You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183326 lines
6.3 MiB
183326 lines
6.3 MiB
/*
|
|
This file is part of Ext JS 4.2
|
|
|
|
Copyright (c) 2011-2013 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.
|
|
|
|
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
|
|
*/
|
|
// @tag foundation,core
|
|
// @define Ext
|
|
|
|
/**
|
|
* @class Ext
|
|
* @singleton
|
|
*/
|
|
var Ext = Ext || {};
|
|
Ext._startTime = new Date().getTime();
|
|
(function() {
|
|
var global = this,
|
|
objectPrototype = Object.prototype,
|
|
toString = objectPrototype.toString,
|
|
enumerables = true,
|
|
enumerablesTest = {toString: 1},
|
|
emptyFn = function () {},
|
|
// This is the "$previous" method of a hook function on an instance. When called, it
|
|
// calls through the class prototype by the name of the called method.
|
|
callOverrideParent = function () {
|
|
var method = callOverrideParent.caller.caller; // skip callParent (our caller)
|
|
return method.$owner.prototype[method.$name].apply(this, arguments);
|
|
},
|
|
i,
|
|
nonWhitespaceRe = /\S/,
|
|
ExtApp,
|
|
iterableRe = /\[object\s*(?:Array|Arguments|\w*Collection|\w*List|HTML\s+document\.all\s+class)\]/;
|
|
|
|
Function.prototype.$extIsFunction = true;
|
|
|
|
Ext.global = global;
|
|
|
|
for (i in enumerablesTest) {
|
|
enumerables = null;
|
|
}
|
|
|
|
if (enumerables) {
|
|
enumerables = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable',
|
|
'toLocaleString', 'toString', 'constructor'];
|
|
}
|
|
|
|
/**
|
|
* An array containing extra enumerables for old browsers
|
|
* @property {String[]}
|
|
*/
|
|
Ext.enumerables = enumerables;
|
|
|
|
/**
|
|
* Copies all the properties of config to the specified object.
|
|
* Note that if recursive merging and cloning without referencing the original objects / arrays is needed, use
|
|
* {@link Ext.Object#merge} instead.
|
|
* @param {Object} object The receiver of the properties
|
|
* @param {Object} config The source of the properties
|
|
* @param {Object} [defaults] A different object that will also be applied for default values
|
|
* @return {Object} returns obj
|
|
*/
|
|
Ext.apply = function(object, config, defaults) {
|
|
if (defaults) {
|
|
Ext.apply(object, defaults);
|
|
}
|
|
|
|
if (object && config && typeof config === 'object') {
|
|
var i, j, k;
|
|
|
|
for (i in config) {
|
|
object[i] = config[i];
|
|
}
|
|
|
|
if (enumerables) {
|
|
for (j = enumerables.length; j--;) {
|
|
k = enumerables[j];
|
|
if (config.hasOwnProperty(k)) {
|
|
object[k] = config[k];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return object;
|
|
};
|
|
|
|
Ext.buildSettings = Ext.apply({
|
|
baseCSSPrefix: 'x-'
|
|
}, Ext.buildSettings || {});
|
|
|
|
Ext.apply(Ext, {
|
|
|
|
/**
|
|
* @property {String} [name='Ext']
|
|
* <p>The name of the property in the global namespace (The <code>window</code> in browser environments) which refers to the current instance of Ext.</p>
|
|
* <p>This is usually <code>"Ext"</code>, but if a sandboxed build of ExtJS is being used, this will be an alternative name.</p>
|
|
* <p>If code is being generated for use by <code>eval</code> or to create a <code>new Function</code>, and the global instance
|
|
* of Ext must be referenced, this is the name that should be built into the code.</p>
|
|
*/
|
|
name: Ext.sandboxName || 'Ext',
|
|
|
|
/**
|
|
* @property {Function}
|
|
* A reusable empty function
|
|
*/
|
|
emptyFn: emptyFn,
|
|
|
|
/**
|
|
* A reusable identity function. The function will always return the first argument, unchanged.
|
|
*/
|
|
identityFn: function(o) {
|
|
return o;
|
|
},
|
|
|
|
/**
|
|
* A zero length string which will pass a truth test. Useful for passing to methods
|
|
* which use a truth test to reject <i>falsy</i> values where a string value must be cleared.
|
|
*/
|
|
emptyString: new String(),
|
|
|
|
baseCSSPrefix: Ext.buildSettings.baseCSSPrefix,
|
|
|
|
/**
|
|
* Copies all the properties of config to object if they don't already exist.
|
|
* @param {Object} object The receiver of the properties
|
|
* @param {Object} config The source of the properties
|
|
* @return {Object} returns obj
|
|
*/
|
|
applyIf: function(object, config) {
|
|
var property;
|
|
|
|
if (object) {
|
|
for (property in config) {
|
|
if (object[property] === undefined) {
|
|
object[property] = config[property];
|
|
}
|
|
}
|
|
}
|
|
|
|
return object;
|
|
},
|
|
|
|
/**
|
|
* Iterates either an array or an object. This method delegates to
|
|
* {@link Ext.Array#each Ext.Array.each} if the given value is iterable, and {@link Ext.Object#each Ext.Object.each} otherwise.
|
|
*
|
|
* @param {Object/Array} object The object or array to be iterated.
|
|
* @param {Function} fn The function to be called for each iteration. See and {@link Ext.Array#each Ext.Array.each} and
|
|
* {@link Ext.Object#each Ext.Object.each} for detailed lists of arguments passed to this function depending on the given object
|
|
* type that is being iterated.
|
|
* @param {Object} scope (Optional) The scope (`this` reference) in which the specified function is executed.
|
|
* Defaults to the object being iterated itself.
|
|
* @markdown
|
|
*/
|
|
iterate: function(object, fn, scope) {
|
|
if (Ext.isEmpty(object)) {
|
|
return;
|
|
}
|
|
|
|
if (scope === undefined) {
|
|
scope = object;
|
|
}
|
|
|
|
if (Ext.isIterable(object)) {
|
|
Ext.Array.each.call(Ext.Array, object, fn, scope);
|
|
}
|
|
else {
|
|
Ext.Object.each.call(Ext.Object, object, fn, scope);
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.apply(Ext, {
|
|
|
|
/**
|
|
* This method deprecated. Use {@link Ext#define Ext.define} instead.
|
|
* @method
|
|
* @param {Function} superclass
|
|
* @param {Object} overrides
|
|
* @return {Function} The subclass constructor from the <tt>overrides</tt> parameter, or a generated one if not provided.
|
|
* @deprecated 4.0.0 Use {@link Ext#define Ext.define} instead
|
|
*/
|
|
extend: (function() {
|
|
// inline overrides
|
|
var objectConstructor = objectPrototype.constructor,
|
|
inlineOverrides = function(o) {
|
|
for (var m in o) {
|
|
if (!o.hasOwnProperty(m)) {
|
|
continue;
|
|
}
|
|
this[m] = o[m];
|
|
}
|
|
};
|
|
|
|
return function(subclass, superclass, overrides) {
|
|
// First we check if the user passed in just the superClass with overrides
|
|
if (Ext.isObject(superclass)) {
|
|
overrides = superclass;
|
|
superclass = subclass;
|
|
subclass = overrides.constructor !== objectConstructor ? overrides.constructor : function() {
|
|
superclass.apply(this, arguments);
|
|
};
|
|
}
|
|
|
|
|
|
// We create a new temporary class
|
|
var F = function() {},
|
|
subclassProto, superclassProto = superclass.prototype;
|
|
|
|
F.prototype = superclassProto;
|
|
subclassProto = subclass.prototype = new F();
|
|
subclassProto.constructor = subclass;
|
|
subclass.superclass = superclassProto;
|
|
|
|
if (superclassProto.constructor === objectConstructor) {
|
|
superclassProto.constructor = superclass;
|
|
}
|
|
|
|
subclass.override = function(overrides) {
|
|
Ext.override(subclass, overrides);
|
|
};
|
|
|
|
subclassProto.override = inlineOverrides;
|
|
subclassProto.proto = subclassProto;
|
|
|
|
subclass.override(overrides);
|
|
subclass.extend = function(o) {
|
|
return Ext.extend(subclass, o);
|
|
};
|
|
|
|
return subclass;
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Overrides members of the specified `target` with the given values.
|
|
*
|
|
* If the `target` is a class declared using {@link Ext#define Ext.define}, the
|
|
* `override` method of that class is called (see {@link Ext.Base#override}) given
|
|
* the `overrides`.
|
|
*
|
|
* If the `target` is a function, it is assumed to be a constructor and the contents
|
|
* of `overrides` are applied to its `prototype` using {@link Ext#apply Ext.apply}.
|
|
*
|
|
* If the `target` is an instance of a class declared using {@link Ext#define Ext.define},
|
|
* the `overrides` are applied to only that instance. In this case, methods are
|
|
* specially processed to allow them to use {@link Ext.Base#callParent}.
|
|
*
|
|
* var panel = new Ext.Panel({ ... });
|
|
*
|
|
* Ext.override(panel, {
|
|
* initComponent: function () {
|
|
* // extra processing...
|
|
*
|
|
* this.callParent();
|
|
* }
|
|
* });
|
|
*
|
|
* If the `target` is none of these, the `overrides` are applied to the `target`
|
|
* using {@link Ext#apply Ext.apply}.
|
|
*
|
|
* Please refer to {@link Ext#define Ext.define} and {@link Ext.Base#override} for
|
|
* further details.
|
|
*
|
|
* @param {Object} target The target to override.
|
|
* @param {Object} overrides The properties to add or replace on `target`.
|
|
* @method override
|
|
*/
|
|
override: function (target, overrides) {
|
|
if (target.$isClass) {
|
|
target.override(overrides);
|
|
} else if (typeof target == 'function') {
|
|
Ext.apply(target.prototype, overrides);
|
|
} else {
|
|
var owner = target.self,
|
|
name, value;
|
|
|
|
if (owner && owner.$isClass) { // if (instance of Ext.define'd class)
|
|
for (name in overrides) {
|
|
if (overrides.hasOwnProperty(name)) {
|
|
value = overrides[name];
|
|
|
|
if (typeof value == 'function') {
|
|
|
|
value.$name = name;
|
|
value.$owner = owner;
|
|
value.$previous = target.hasOwnProperty(name)
|
|
? target[name] // already hooked, so call previous hook
|
|
: callOverrideParent; // calls by name on prototype
|
|
}
|
|
|
|
target[name] = value;
|
|
}
|
|
}
|
|
} else {
|
|
Ext.apply(target, overrides);
|
|
}
|
|
}
|
|
|
|
return target;
|
|
}
|
|
});
|
|
|
|
// A full set of static methods to do type checking
|
|
Ext.apply(Ext, {
|
|
|
|
/**
|
|
* Returns the given value itself if it's not empty, as described in {@link Ext#isEmpty}; returns the default
|
|
* value (second argument) otherwise.
|
|
*
|
|
* @param {Object} value The value to test
|
|
* @param {Object} 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 {Object} value, if non-empty, else defaultValue
|
|
*/
|
|
valueFrom: function(value, defaultValue, allowBlank){
|
|
return Ext.isEmpty(value, allowBlank) ? defaultValue : value;
|
|
},
|
|
|
|
/**
|
|
* Returns the type of the given variable in string format. List of possible values are:
|
|
*
|
|
* - `undefined`: If the given value is `undefined`
|
|
* - `null`: If the given value is `null`
|
|
* - `string`: If the given value is a string
|
|
* - `number`: If the given value is a number
|
|
* - `boolean`: If the given value is a boolean value
|
|
* - `date`: If the given value is a `Date` object
|
|
* - `function`: If the given value is a function reference
|
|
* - `object`: If the given value is an object
|
|
* - `array`: If the given value is an array
|
|
* - `regexp`: If the given value is a regular expression
|
|
* - `element`: If the given value is a DOM Element
|
|
* - `textnode`: If the given value is a DOM text node and contains something other than whitespace
|
|
* - `whitespace`: If the given value is a DOM text node and contains only whitespace
|
|
*
|
|
* @param {Object} value
|
|
* @return {String}
|
|
* @markdown
|
|
*/
|
|
typeOf: function(value) {
|
|
var type,
|
|
typeToString;
|
|
|
|
if (value === null) {
|
|
return 'null';
|
|
}
|
|
|
|
type = typeof value;
|
|
|
|
if (type === 'undefined' || type === 'string' || type === 'number' || type === 'boolean') {
|
|
return type;
|
|
}
|
|
|
|
typeToString = toString.call(value);
|
|
|
|
switch(typeToString) {
|
|
case '[object Array]':
|
|
return 'array';
|
|
case '[object Date]':
|
|
return 'date';
|
|
case '[object Boolean]':
|
|
return 'boolean';
|
|
case '[object Number]':
|
|
return 'number';
|
|
case '[object RegExp]':
|
|
return 'regexp';
|
|
}
|
|
|
|
if (type === 'function') {
|
|
return 'function';
|
|
}
|
|
|
|
if (type === 'object') {
|
|
if (value.nodeType !== undefined) {
|
|
if (value.nodeType === 3) {
|
|
return (nonWhitespaceRe).test(value.nodeValue) ? 'textnode' : 'whitespace';
|
|
}
|
|
else {
|
|
return 'element';
|
|
}
|
|
}
|
|
|
|
return 'object';
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Coerces the first value if possible so that it is comparable to the second value.
|
|
*
|
|
* Coercion only works between the basic atomic data types String, Boolean, Number, Date, null and undefined.
|
|
*
|
|
* Numbers and numeric strings are coerced to Dates using the value as the millisecond era value.
|
|
*
|
|
* Strings are coerced to Dates by parsing using the {@link Ext.Date#defaultFormat defaultFormat}.
|
|
*
|
|
* For example
|
|
*
|
|
* Ext.coerce('false', true);
|
|
*
|
|
* returns the boolean value `false` because the second parameter is of type `Boolean`.
|
|
*
|
|
* @param {Mixed} from The value to coerce
|
|
* @param {Mixed} to The value it must be compared against
|
|
* @return The coerced value.
|
|
*/
|
|
coerce: function(from, to) {
|
|
var fromType = Ext.typeOf(from),
|
|
toType = Ext.typeOf(to),
|
|
isString = typeof from === 'string';
|
|
|
|
if (fromType !== toType) {
|
|
switch (toType) {
|
|
case 'string':
|
|
return String(from);
|
|
case 'number':
|
|
return Number(from);
|
|
case 'boolean':
|
|
return isString && (!from || from === 'false') ? false : Boolean(from);
|
|
case 'null':
|
|
return isString && (!from || from === 'null') ? null : from;
|
|
case 'undefined':
|
|
return isString && (!from || from === 'undefined') ? undefined : from;
|
|
case 'date':
|
|
return isString && isNaN(from) ? Ext.Date.parse(from, Ext.Date.defaultFormat) : Date(Number(from));
|
|
}
|
|
}
|
|
return from;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is empty, false otherwise. The value is deemed to be empty if it is either:
|
|
*
|
|
* - `null`
|
|
* - `undefined`
|
|
* - a zero-length array
|
|
* - a zero-length string (Unless the `allowEmptyString` parameter is set to `true`)
|
|
*
|
|
* @param {Object} value The value to test
|
|
* @param {Boolean} allowEmptyString (optional) true to allow empty strings (defaults to false)
|
|
* @return {Boolean}
|
|
* @markdown
|
|
*/
|
|
isEmpty: function(value, allowEmptyString) {
|
|
return (value === null) || (value === undefined) || (!allowEmptyString ? value === '' : false) || (Ext.isArray(value) && value.length === 0);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a JavaScript Array, false otherwise.
|
|
*
|
|
* @param {Object} target The target to test
|
|
* @return {Boolean}
|
|
* @method
|
|
*/
|
|
isArray: ('isArray' in Array) ? Array.isArray : function(value) {
|
|
return toString.call(value) === '[object Array]';
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a JavaScript Date object, false otherwise.
|
|
* @param {Object} object The object to test
|
|
* @return {Boolean}
|
|
*/
|
|
isDate: function(value) {
|
|
return toString.call(value) === '[object Date]';
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a JavaScript Object, false otherwise.
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
* @method
|
|
*/
|
|
isObject: (toString.call(null) === '[object Object]') ?
|
|
function(value) {
|
|
// check ownerDocument here as well to exclude DOM nodes
|
|
return value !== null && value !== undefined && toString.call(value) === '[object Object]' && value.ownerDocument === undefined;
|
|
} :
|
|
function(value) {
|
|
return toString.call(value) === '[object Object]';
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
isSimpleObject: function(value) {
|
|
return value instanceof Object && value.constructor === Object;
|
|
},
|
|
/**
|
|
* Returns true if the passed value is a JavaScript 'primitive', a string, number or boolean.
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isPrimitive: function(value) {
|
|
var type = typeof value;
|
|
|
|
return type === 'string' || type === 'number' || type === 'boolean';
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a JavaScript Function, false otherwise.
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
* @method
|
|
*/
|
|
isFunction: function(value) {
|
|
return !!(value && value.$extIsFunction);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a number. Returns false for non-finite numbers.
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isNumber: function(value) {
|
|
return typeof value === 'number' && isFinite(value);
|
|
},
|
|
|
|
/**
|
|
* Validates that a value is numeric.
|
|
* @param {Object} value Examples: 1, '1', '2.34'
|
|
* @return {Boolean} True if numeric, false otherwise
|
|
*/
|
|
isNumeric: function(value) {
|
|
return !isNaN(parseFloat(value)) && isFinite(value);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a string.
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isString: function(value) {
|
|
return typeof value === 'string';
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a boolean.
|
|
*
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isBoolean: function(value) {
|
|
return typeof value === 'boolean';
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is an HTMLElement
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isElement: function(value) {
|
|
return value ? value.nodeType === 1 : false;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is a TextNode
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isTextNode: function(value) {
|
|
return value ? value.nodeName === "#text" : false;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed value is defined.
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isDefined: function(value) {
|
|
return typeof value !== 'undefined';
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if the passed value is iterable, that is, if elements of it are addressable using array
|
|
* notation with numeric indices, `false` otherwise.
|
|
*
|
|
* Arrays and function `arguments` objects are iterable. Also HTML collections such as `NodeList` and `HTMLCollection'
|
|
* are iterable.
|
|
*
|
|
* @param {Object} value The value to test
|
|
* @return {Boolean}
|
|
*/
|
|
isIterable: function(value) {
|
|
// To be iterable, the object must have a numeric length property and must not be a string or function.
|
|
if (!value || typeof value.length !== 'number' || typeof value === 'string' || value.$extIsFunction) {
|
|
return false;
|
|
}
|
|
|
|
// Certain "standard" collections in IE (such as document.images) do not offer the correct
|
|
// Javascript Object interface; specifically, they lack the propertyIsEnumerable method.
|
|
// And the item property while it does exist is not typeof "function"
|
|
if (!value.propertyIsEnumerable) {
|
|
return !!value.item;
|
|
}
|
|
|
|
// If it is a regular, interrogatable JS object (not an IE ActiveX object), then...
|
|
// If it has its own property called "length", but not enumerable, it's iterable
|
|
if (value.hasOwnProperty('length') && !value.propertyIsEnumerable('length')) {
|
|
return true;
|
|
}
|
|
|
|
// Test against whitelist which includes known iterable collection types
|
|
return iterableRe.test(toString.call(value));
|
|
}
|
|
});
|
|
|
|
Ext.apply(Ext, {
|
|
|
|
/**
|
|
* Clone simple variables including array, {}-like objects, DOM nodes and Date without keeping the old reference.
|
|
* A reference for the object itself is returned if it's not a direct decendant of Object. For model cloning,
|
|
* see {@link Ext.data.Model#copy Model.copy}.
|
|
*
|
|
* @param {Object} item The variable to clone
|
|
* @return {Object} clone
|
|
*/
|
|
clone: function(item) {
|
|
var type,
|
|
i,
|
|
j,
|
|
k,
|
|
clone,
|
|
key;
|
|
|
|
if (item === null || item === undefined) {
|
|
return item;
|
|
}
|
|
|
|
// DOM nodes
|
|
// TODO proxy this to Ext.Element.clone to handle automatic id attribute changing
|
|
// recursively
|
|
if (item.nodeType && item.cloneNode) {
|
|
return item.cloneNode(true);
|
|
}
|
|
|
|
type = toString.call(item);
|
|
|
|
// Date
|
|
if (type === '[object Date]') {
|
|
return new Date(item.getTime());
|
|
}
|
|
|
|
|
|
// Array
|
|
if (type === '[object Array]') {
|
|
i = item.length;
|
|
|
|
clone = [];
|
|
|
|
while (i--) {
|
|
clone[i] = Ext.clone(item[i]);
|
|
}
|
|
}
|
|
// Object
|
|
else if (type === '[object Object]' && item.constructor === Object) {
|
|
clone = {};
|
|
|
|
for (key in item) {
|
|
clone[key] = Ext.clone(item[key]);
|
|
}
|
|
|
|
if (enumerables) {
|
|
for (j = enumerables.length; j--;) {
|
|
k = enumerables[j];
|
|
if (item.hasOwnProperty(k)) {
|
|
clone[k] = item[k];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return clone || item;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Generate a unique reference of Ext in the global scope, useful for sandboxing
|
|
*/
|
|
getUniqueGlobalNamespace: function() {
|
|
var uniqueGlobalNamespace = this.uniqueGlobalNamespace,
|
|
i;
|
|
|
|
if (uniqueGlobalNamespace === undefined) {
|
|
i = 0;
|
|
|
|
do {
|
|
uniqueGlobalNamespace = 'ExtBox' + (++i);
|
|
} while (Ext.global[uniqueGlobalNamespace] !== undefined);
|
|
|
|
Ext.global[uniqueGlobalNamespace] = Ext;
|
|
this.uniqueGlobalNamespace = uniqueGlobalNamespace;
|
|
}
|
|
|
|
return uniqueGlobalNamespace;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
functionFactoryCache: {},
|
|
|
|
cacheableFunctionFactory: function() {
|
|
var me = this,
|
|
args = Array.prototype.slice.call(arguments),
|
|
cache = me.functionFactoryCache,
|
|
idx, fn, ln;
|
|
|
|
if (Ext.isSandboxed) {
|
|
ln = args.length;
|
|
if (ln > 0) {
|
|
ln--;
|
|
args[ln] = 'var Ext=window.' + Ext.name + ';' + args[ln];
|
|
}
|
|
}
|
|
idx = args.join('');
|
|
fn = cache[idx];
|
|
if (!fn) {
|
|
fn = Function.prototype.constructor.apply(Function.prototype, args);
|
|
|
|
cache[idx] = fn;
|
|
}
|
|
return fn;
|
|
},
|
|
|
|
functionFactory: function() {
|
|
var me = this,
|
|
args = Array.prototype.slice.call(arguments),
|
|
ln;
|
|
|
|
if (Ext.isSandboxed) {
|
|
ln = args.length;
|
|
if (ln > 0) {
|
|
ln--;
|
|
args[ln] = 'var Ext=window.' + Ext.name + ';' + args[ln];
|
|
}
|
|
}
|
|
|
|
return Function.prototype.constructor.apply(Function.prototype, args);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @property
|
|
*/
|
|
Logger: {
|
|
verbose: emptyFn,
|
|
log: emptyFn,
|
|
info: emptyFn,
|
|
warn: emptyFn,
|
|
error: function(message) {
|
|
throw new Error(message);
|
|
},
|
|
deprecate: emptyFn
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Old alias to {@link Ext#typeOf}
|
|
* @deprecated 4.0.0 Use {@link Ext#typeOf} instead
|
|
* @method
|
|
* @inheritdoc Ext#typeOf
|
|
*/
|
|
Ext.type = Ext.typeOf;
|
|
|
|
// When using Cmd optimizations, the namespace Ext.app may already be defined
|
|
// by this point since it's done up front by the tool. Check if app already
|
|
// exists before overwriting it.
|
|
ExtApp = Ext.app;
|
|
if (!ExtApp) {
|
|
ExtApp = Ext.app = {};
|
|
}
|
|
Ext.apply(ExtApp, {
|
|
namespaces: {},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
collectNamespaces: function(paths) {
|
|
var namespaces = Ext.app.namespaces,
|
|
path;
|
|
|
|
for (path in paths) {
|
|
if (paths.hasOwnProperty(path)) {
|
|
namespaces[path] = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds namespace(s) to known list.
|
|
*
|
|
* @param {String/String[]} namespace
|
|
*/
|
|
addNamespaces: function(ns) {
|
|
var namespaces = Ext.app.namespaces,
|
|
i, l;
|
|
|
|
if (!Ext.isArray(ns)) {
|
|
ns = [ns];
|
|
}
|
|
|
|
for (i = 0, l = ns.length; i < l; i++) {
|
|
namespaces[ns[i]] = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Clear all namespaces from known list.
|
|
*/
|
|
clearNamespaces: function() {
|
|
Ext.app.namespaces = {};
|
|
},
|
|
|
|
/**
|
|
* Get namespace prefix for a class name.
|
|
*
|
|
* @param {String} className
|
|
*
|
|
* @return {String} Namespace prefix if it's known, otherwise undefined
|
|
*/
|
|
getNamespace: function(className) {
|
|
var namespaces = Ext.app.namespaces,
|
|
deepestPrefix = '',
|
|
prefix;
|
|
|
|
for (prefix in namespaces) {
|
|
if (namespaces.hasOwnProperty(prefix) &&
|
|
prefix.length > deepestPrefix.length &&
|
|
(prefix + '.' === className.substring(0, prefix.length + 1))) {
|
|
deepestPrefix = prefix;
|
|
}
|
|
}
|
|
|
|
return deepestPrefix === '' ? undefined : deepestPrefix;
|
|
}
|
|
});
|
|
}());
|
|
|
|
/*
|
|
* This method evaluates the given code free of any local variable. In some browsers this
|
|
* will be at global scope, in others it will be in a function.
|
|
* @parma {String} code The code to evaluate.
|
|
* @private
|
|
* @method
|
|
*/
|
|
Ext.globalEval = Ext.global.execScript
|
|
? function(code) {
|
|
execScript(code);
|
|
}
|
|
: function($$code) {
|
|
// IMPORTANT: because we use eval we cannot place this in the above function or it
|
|
// will break the compressor's ability to rename local variables...
|
|
(function(){
|
|
// This var should not be replaced by the compressor. We need to do this so
|
|
// that Ext refers to the global Ext, if we're sandboxing it may
|
|
// refer to the local instance inside the closure
|
|
var Ext = this.Ext;
|
|
eval($$code);
|
|
}());
|
|
};
|
|
|
|
// @tag foundation,core
|
|
// @require ../Ext.js
|
|
// @define Ext.Version
|
|
|
|
/**
|
|
* @author Jacky Nguyen <jacky@sencha.com>
|
|
* @docauthor Jacky Nguyen <jacky@sencha.com>
|
|
* @class Ext.Version
|
|
*
|
|
* A utility class that wrap around a string version number and provide convenient
|
|
* method to perform comparison. See also: {@link Ext.Version#compare compare}. Example:
|
|
*
|
|
* var version = new Ext.Version('1.0.2beta');
|
|
* console.log("Version is " + version); // Version is 1.0.2beta
|
|
*
|
|
* console.log(version.getMajor()); // 1
|
|
* console.log(version.getMinor()); // 0
|
|
* console.log(version.getPatch()); // 2
|
|
* console.log(version.getBuild()); // 0
|
|
* console.log(version.getRelease()); // beta
|
|
*
|
|
* console.log(version.isGreaterThan('1.0.1')); // True
|
|
* console.log(version.isGreaterThan('1.0.2alpha')); // True
|
|
* console.log(version.isGreaterThan('1.0.2RC')); // False
|
|
* console.log(version.isGreaterThan('1.0.2')); // False
|
|
* console.log(version.isLessThan('1.0.2')); // True
|
|
*
|
|
* console.log(version.match(1.0)); // True
|
|
* console.log(version.match('1.0.2')); // True
|
|
*
|
|
*/
|
|
(function() {
|
|
|
|
// Current core version
|
|
// also fix Ext-more.js
|
|
var version = '4.2.1.883', Version;
|
|
Ext.Version = Version = Ext.extend(Object, {
|
|
|
|
/**
|
|
* @param {String/Number} version The version number in the following standard format:
|
|
*
|
|
* major[.minor[.patch[.build[release]]]]
|
|
*
|
|
* Examples:
|
|
*
|
|
* 1.0
|
|
* 1.2.3beta
|
|
* 1.2.3.4RC
|
|
*
|
|
* @return {Ext.Version} this
|
|
*/
|
|
constructor: function(version) {
|
|
var parts, releaseStartIndex;
|
|
|
|
if (version instanceof Version) {
|
|
return version;
|
|
}
|
|
|
|
this.version = this.shortVersion = String(version).toLowerCase().replace(/_/g, '.').replace(/[\-+]/g, '');
|
|
|
|
releaseStartIndex = this.version.search(/([^\d\.])/);
|
|
|
|
if (releaseStartIndex !== -1) {
|
|
this.release = this.version.substr(releaseStartIndex, version.length);
|
|
this.shortVersion = this.version.substr(0, releaseStartIndex);
|
|
}
|
|
|
|
this.shortVersion = this.shortVersion.replace(/[^\d]/g, '');
|
|
|
|
parts = this.version.split('.');
|
|
|
|
this.major = parseInt(parts.shift() || 0, 10);
|
|
this.minor = parseInt(parts.shift() || 0, 10);
|
|
this.patch = parseInt(parts.shift() || 0, 10);
|
|
this.build = parseInt(parts.shift() || 0, 10);
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Override the native toString method
|
|
* @private
|
|
* @return {String} version
|
|
*/
|
|
toString: function() {
|
|
return this.version;
|
|
},
|
|
|
|
/**
|
|
* Override the native valueOf method
|
|
* @private
|
|
* @return {String} version
|
|
*/
|
|
valueOf: function() {
|
|
return this.version;
|
|
},
|
|
|
|
/**
|
|
* Returns the major component value
|
|
* @return {Number} major
|
|
*/
|
|
getMajor: function() {
|
|
return this.major || 0;
|
|
},
|
|
|
|
/**
|
|
* Returns the minor component value
|
|
* @return {Number} minor
|
|
*/
|
|
getMinor: function() {
|
|
return this.minor || 0;
|
|
},
|
|
|
|
/**
|
|
* Returns the patch component value
|
|
* @return {Number} patch
|
|
*/
|
|
getPatch: function() {
|
|
return this.patch || 0;
|
|
},
|
|
|
|
/**
|
|
* Returns the build component value
|
|
* @return {Number} build
|
|
*/
|
|
getBuild: function() {
|
|
return this.build || 0;
|
|
},
|
|
|
|
/**
|
|
* Returns the release component value
|
|
* @return {Number} release
|
|
*/
|
|
getRelease: function() {
|
|
return this.release || '';
|
|
},
|
|
|
|
/**
|
|
* Returns whether this version if greater than the supplied argument
|
|
* @param {String/Number} target The version to compare with
|
|
* @return {Boolean} True if this version if greater than the target, false otherwise
|
|
*/
|
|
isGreaterThan: function(target) {
|
|
return Version.compare(this.version, target) === 1;
|
|
},
|
|
|
|
/**
|
|
* Returns whether this version if greater than or equal to the supplied argument
|
|
* @param {String/Number} target The version to compare with
|
|
* @return {Boolean} True if this version if greater than or equal to the target, false otherwise
|
|
*/
|
|
isGreaterThanOrEqual: function(target) {
|
|
return Version.compare(this.version, target) >= 0;
|
|
},
|
|
|
|
/**
|
|
* Returns whether this version if smaller than the supplied argument
|
|
* @param {String/Number} target The version to compare with
|
|
* @return {Boolean} True if this version if smaller than the target, false otherwise
|
|
*/
|
|
isLessThan: function(target) {
|
|
return Version.compare(this.version, target) === -1;
|
|
},
|
|
|
|
/**
|
|
* Returns whether this version if less than or equal to the supplied argument
|
|
* @param {String/Number} target The version to compare with
|
|
* @return {Boolean} True if this version if less than or equal to the target, false otherwise
|
|
*/
|
|
isLessThanOrEqual: function(target) {
|
|
return Version.compare(this.version, target) <= 0;
|
|
},
|
|
|
|
/**
|
|
* Returns whether this version equals to the supplied argument
|
|
* @param {String/Number} target The version to compare with
|
|
* @return {Boolean} True if this version equals to the target, false otherwise
|
|
*/
|
|
equals: function(target) {
|
|
return Version.compare(this.version, target) === 0;
|
|
},
|
|
|
|
/**
|
|
* Returns whether this version matches the supplied argument. Example:
|
|
*
|
|
* var version = new Ext.Version('1.0.2beta');
|
|
* console.log(version.match(1)); // True
|
|
* console.log(version.match(1.0)); // True
|
|
* console.log(version.match('1.0.2')); // True
|
|
* console.log(version.match('1.0.2RC')); // False
|
|
*
|
|
* @param {String/Number} target The version to compare with
|
|
* @return {Boolean} True if this version matches the target, false otherwise
|
|
*/
|
|
match: function(target) {
|
|
target = String(target);
|
|
return this.version.substr(0, target.length) === target;
|
|
},
|
|
|
|
/**
|
|
* Returns this format: [major, minor, patch, build, release]. Useful for comparison
|
|
* @return {Number[]}
|
|
*/
|
|
toArray: function() {
|
|
return [this.getMajor(), this.getMinor(), this.getPatch(), this.getBuild(), this.getRelease()];
|
|
},
|
|
|
|
/**
|
|
* Returns shortVersion version without dots and release
|
|
* @return {String}
|
|
*/
|
|
getShortVersion: function() {
|
|
return this.shortVersion;
|
|
},
|
|
|
|
/**
|
|
* Convenient alias to {@link Ext.Version#isGreaterThan isGreaterThan}
|
|
* @param {String/Number} target
|
|
* @return {Boolean}
|
|
*/
|
|
gt: function() {
|
|
return this.isGreaterThan.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Convenient alias to {@link Ext.Version#isLessThan isLessThan}
|
|
* @param {String/Number} target
|
|
* @return {Boolean}
|
|
*/
|
|
lt: function() {
|
|
return this.isLessThan.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Convenient alias to {@link Ext.Version#isGreaterThanOrEqual isGreaterThanOrEqual}
|
|
* @param {String/Number} target
|
|
* @return {Boolean}
|
|
*/
|
|
gtEq: function() {
|
|
return this.isGreaterThanOrEqual.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Convenient alias to {@link Ext.Version#isLessThanOrEqual isLessThanOrEqual}
|
|
* @param {String/Number} target
|
|
* @return {Boolean}
|
|
*/
|
|
ltEq: function() {
|
|
return this.isLessThanOrEqual.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
Ext.apply(Version, {
|
|
// @private
|
|
releaseValueMap: {
|
|
'dev': -6,
|
|
'alpha': -5,
|
|
'a': -5,
|
|
'beta': -4,
|
|
'b': -4,
|
|
'rc': -3,
|
|
'#': -2,
|
|
'p': -1,
|
|
'pl': -1
|
|
},
|
|
|
|
/**
|
|
* Converts a version component to a comparable value
|
|
*
|
|
* @static
|
|
* @param {Object} value The value to convert
|
|
* @return {Object}
|
|
*/
|
|
getComponentValue: function(value) {
|
|
return !value ? 0 : (isNaN(value) ? this.releaseValueMap[value] || value : parseInt(value, 10));
|
|
},
|
|
|
|
/**
|
|
* Compare 2 specified versions, starting from left to right. If a part contains special version strings,
|
|
* they are handled in the following order:
|
|
* 'dev' < 'alpha' = 'a' < 'beta' = 'b' < 'RC' = 'rc' < '#' < 'pl' = 'p' < 'anything else'
|
|
*
|
|
* @static
|
|
* @param {String} current The current version to compare to
|
|
* @param {String} target The target version to compare to
|
|
* @return {Number} Returns -1 if the current version is smaller than the target version, 1 if greater, and 0 if they're equivalent
|
|
*/
|
|
compare: function(current, target) {
|
|
var currentValue, targetValue, i;
|
|
|
|
current = new Version(current).toArray();
|
|
target = new Version(target).toArray();
|
|
|
|
for (i = 0; i < Math.max(current.length, target.length); i++) {
|
|
currentValue = this.getComponentValue(current[i]);
|
|
targetValue = this.getComponentValue(target[i]);
|
|
|
|
if (currentValue < targetValue) {
|
|
return -1;
|
|
} else if (currentValue > targetValue) {
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext
|
|
*/
|
|
Ext.apply(Ext, {
|
|
/**
|
|
* @private
|
|
*/
|
|
versions: {},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
lastRegisteredVersion: null,
|
|
|
|
/**
|
|
* Set version number for the given package name.
|
|
*
|
|
* @param {String} packageName The package name, for example: 'core', 'touch', 'extjs'
|
|
* @param {String/Ext.Version} version The version, for example: '1.2.3alpha', '2.4.0-dev'
|
|
* @return {Ext}
|
|
*/
|
|
setVersion: function(packageName, version) {
|
|
Ext.versions[packageName] = new Version(version);
|
|
Ext.lastRegisteredVersion = Ext.versions[packageName];
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Get the version number of the supplied package name; will return the last registered version
|
|
* (last Ext.setVersion call) if there's no package name given.
|
|
*
|
|
* @param {String} packageName (Optional) The package name, for example: 'core', 'touch', 'extjs'
|
|
* @return {Ext.Version} The version
|
|
*/
|
|
getVersion: function(packageName) {
|
|
if (packageName === undefined) {
|
|
return Ext.lastRegisteredVersion;
|
|
}
|
|
|
|
return Ext.versions[packageName];
|
|
},
|
|
|
|
/**
|
|
* Create a closure for deprecated code.
|
|
*
|
|
* // This means Ext.oldMethod is only supported in 4.0.0beta and older.
|
|
* // If Ext.getVersion('extjs') returns a version that is later than '4.0.0beta', for example '4.0.0RC',
|
|
* // the closure will not be invoked
|
|
* Ext.deprecate('extjs', '4.0.0beta', function() {
|
|
* Ext.oldMethod = Ext.newMethod;
|
|
*
|
|
* ...
|
|
* });
|
|
*
|
|
* @param {String} packageName The package name
|
|
* @param {String} since The last version before it's deprecated
|
|
* @param {Function} closure The callback function to be executed with the specified version is less than the current version
|
|
* @param {Object} scope The execution scope (`this`) if the closure
|
|
*/
|
|
deprecate: function(packageName, since, closure, scope) {
|
|
if (Version.compare(Ext.getVersion(packageName), since) < 1) {
|
|
closure.call(scope);
|
|
}
|
|
}
|
|
}); // End Versioning
|
|
|
|
Ext.setVersion('core', version);
|
|
|
|
}());
|
|
|
|
// @tag foundation,core
|
|
// @require ../version/Version.js
|
|
// @define Ext.String
|
|
|
|
/**
|
|
* @class Ext.String
|
|
*
|
|
* A collection of useful static methods to deal with strings.
|
|
* @singleton
|
|
*/
|
|
|
|
Ext.String = (function() {
|
|
var trimRegex = /^[\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f\u3000]+|[\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f\u3000]+$/g,
|
|
escapeRe = /('|\\)/g,
|
|
formatRe = /\{(\d+)\}/g,
|
|
escapeRegexRe = /([-.*+?\^${}()|\[\]\/\\])/g,
|
|
basicTrimRe = /^\s+|\s+$/g,
|
|
whitespaceRe = /\s+/,
|
|
varReplace = /(^[^a-z]*|[^\w])/gi,
|
|
charToEntity,
|
|
entityToChar,
|
|
charToEntityRegex,
|
|
entityToCharRegex,
|
|
htmlEncodeReplaceFn = function(match, capture) {
|
|
return charToEntity[capture];
|
|
},
|
|
htmlDecodeReplaceFn = function(match, capture) {
|
|
return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
|
|
},
|
|
boundsCheck = function(s, other){
|
|
if (s === null || s === undefined || other === null || other === undefined) {
|
|
return false;
|
|
}
|
|
|
|
return other.length <= s.length;
|
|
};
|
|
|
|
return {
|
|
|
|
/**
|
|
* Inserts a substring into a string.
|
|
* @param {String} s The original string.
|
|
* @param {String} value The substring to insert.
|
|
* @param {Number} index The index to insert the substring. Negative indexes will insert from the end of
|
|
* the string. Example:
|
|
*
|
|
* Ext.String.insert("abcdefg", "h", -1); // abcdefhg
|
|
*
|
|
* @return {String} The value with the inserted substring
|
|
*/
|
|
insert: function(s, value, index) {
|
|
if (!s) {
|
|
return value;
|
|
}
|
|
|
|
if (!value) {
|
|
return s;
|
|
}
|
|
|
|
var len = s.length;
|
|
|
|
if (!index && index !== 0) {
|
|
index = len;
|
|
}
|
|
|
|
if (index < 0) {
|
|
index *= -1;
|
|
if (index >= len) {
|
|
// negative overflow, insert at start
|
|
index = 0;
|
|
} else {
|
|
index = len - index;
|
|
}
|
|
}
|
|
|
|
if (index === 0) {
|
|
s = value + s;
|
|
} else if (index >= s.length) {
|
|
s += value;
|
|
} else {
|
|
s = s.substr(0, index) + value + s.substr(index);
|
|
}
|
|
return s;
|
|
},
|
|
|
|
/**
|
|
* Checks if a string starts with a substring
|
|
* @param {String} s The original string
|
|
* @param {String} start The substring to check
|
|
* @param {Boolean} [ignoreCase=false] True to ignore the case in the comparison
|
|
*/
|
|
startsWith: function(s, start, ignoreCase){
|
|
var result = boundsCheck(s, start);
|
|
|
|
if (result) {
|
|
if (ignoreCase) {
|
|
s = s.toLowerCase();
|
|
start = start.toLowerCase();
|
|
}
|
|
result = s.lastIndexOf(start, 0) === 0;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Checks if a string ends with a substring
|
|
* @param {String} s The original string
|
|
* @param {String} start The substring to check
|
|
* @param {Boolean} [ignoreCase=false] True to ignore the case in the comparison
|
|
*/
|
|
endsWith: function(s, end, ignoreCase){
|
|
var result = boundsCheck(s, end);
|
|
|
|
if (result) {
|
|
if (ignoreCase) {
|
|
s = s.toLowerCase();
|
|
end = end.toLowerCase();
|
|
}
|
|
result = s.indexOf(end, s.length - end.length) !== -1;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Converts a string of characters into a legal, parse-able JavaScript `var` name as long as the passed
|
|
* string contains at least one alphabetic character. Non alphanumeric characters, and *leading* non alphabetic
|
|
* characters will be removed.
|
|
* @param {String} s A string to be converted into a `var` name.
|
|
* @return {String} A legal JavaScript `var` name.
|
|
*/
|
|
createVarName: function(s) {
|
|
return s.replace(varReplace, '');
|
|
},
|
|
|
|
/**
|
|
* Convert certain characters (&, <, >, ', and ") to their HTML character equivalents for literal display in web pages.
|
|
* @param {String} value The string to encode.
|
|
* @return {String} The encoded text.
|
|
* @method
|
|
*/
|
|
htmlEncode: function(value) {
|
|
return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
|
|
},
|
|
|
|
/**
|
|
* Convert certain characters (&, <, >, ', and ") from their HTML character equivalents.
|
|
* @param {String} value The string to decode.
|
|
* @return {String} The decoded text.
|
|
* @method
|
|
*/
|
|
htmlDecode: function(value) {
|
|
return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
|
|
},
|
|
|
|
/**
|
|
* Adds a set of character entity definitions to the set used by
|
|
* {@link Ext.String#htmlEncode} and {@link Ext.String#htmlDecode}.
|
|
*
|
|
* This object should be keyed by the entity name sequence,
|
|
* with the value being the textual representation of the entity.
|
|
*
|
|
* Ext.String.addCharacterEntities({
|
|
* '&Uuml;':'Ü',
|
|
* '&ccedil;':'ç',
|
|
* '&ntilde;':'ñ',
|
|
* '&egrave;':'è'
|
|
* });
|
|
* var s = Ext.String.htmlEncode("A string with entities: èÜçñ");
|
|
*
|
|
* __Note:__ the values of the character entities defined on this object are expected
|
|
* to be single character values. As such, the actual values represented by the
|
|
* characters are sensitive to the character encoding of the JavaScript source
|
|
* file when defined in string literal form. Script tags referencing server
|
|
* resources with character entities must ensure that the 'charset' attribute
|
|
* of the script node is consistent with the actual character encoding of the
|
|
* server resource.
|
|
*
|
|
* The set of character entities may be reset back to the default state by using
|
|
* the {@link Ext.String#resetCharacterEntities} method
|
|
*
|
|
* @param {Object} entities The set of character entities to add to the current
|
|
* definitions.
|
|
*/
|
|
addCharacterEntities: function(newEntities) {
|
|
var charKeys = [],
|
|
entityKeys = [],
|
|
key, echar;
|
|
for (key in newEntities) {
|
|
echar = newEntities[key];
|
|
entityToChar[key] = echar;
|
|
charToEntity[echar] = key;
|
|
charKeys.push(echar);
|
|
entityKeys.push(key);
|
|
}
|
|
charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
|
|
entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
|
|
},
|
|
|
|
/**
|
|
* Resets the set of character entity definitions used by
|
|
* {@link Ext.String#htmlEncode} and {@link Ext.String#htmlDecode} back to the
|
|
* default state.
|
|
*/
|
|
resetCharacterEntities: function() {
|
|
charToEntity = {};
|
|
entityToChar = {};
|
|
// add the default set
|
|
this.addCharacterEntities({
|
|
'&' : '&',
|
|
'>' : '>',
|
|
'<' : '<',
|
|
'"' : '"',
|
|
''' : "'"
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Appends content to the query string of a URL, handling logic for whether to place
|
|
* a question mark or ampersand.
|
|
* @param {String} url The URL to append to.
|
|
* @param {String} string The content to append to the URL.
|
|
* @return {String} The resulting URL
|
|
*/
|
|
urlAppend : function(url, string) {
|
|
if (!Ext.isEmpty(string)) {
|
|
return url + (url.indexOf('?') === -1 ? '?' : '&') + string;
|
|
}
|
|
|
|
return url;
|
|
},
|
|
|
|
/**
|
|
* Trims whitespace from either end of a string, leaving spaces within the string intact. Example:
|
|
*
|
|
* var s = ' foo bar ';
|
|
* alert('-' + s + '-'); //alerts "- foo bar -"
|
|
* alert('-' + Ext.String.trim(s) + '-'); //alerts "-foo bar-"
|
|
*
|
|
* @param {String} string The string to trim.
|
|
* @return {String} The trimmed string.
|
|
*/
|
|
trim: function(string) {
|
|
return string.replace(trimRegex, "");
|
|
},
|
|
|
|
/**
|
|
* Capitalize the given string
|
|
* @param {String} string
|
|
* @return {String}
|
|
*/
|
|
capitalize: function(string) {
|
|
return string.charAt(0).toUpperCase() + string.substr(1);
|
|
},
|
|
|
|
/**
|
|
* Uncapitalize the given string.
|
|
* @param {String} string
|
|
* @return {String}
|
|
*/
|
|
uncapitalize: function(string) {
|
|
return string.charAt(0).toLowerCase() + string.substr(1);
|
|
},
|
|
|
|
/**
|
|
* Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length.
|
|
* @param {String} value The string to truncate.
|
|
* @param {Number} length The maximum length to allow before truncating.
|
|
* @param {Boolean} [word=false] `true` to try to find a common word break.
|
|
* @return {String} The converted text.
|
|
*/
|
|
ellipsis: function(value, len, word) {
|
|
if (value && value.length > len) {
|
|
if (word) {
|
|
var vs = value.substr(0, len - 2),
|
|
index = Math.max(vs.lastIndexOf(' '), vs.lastIndexOf('.'), vs.lastIndexOf('!'), vs.lastIndexOf('?'));
|
|
if (index !== -1 && index >= (len - 15)) {
|
|
return vs.substr(0, index) + "...";
|
|
}
|
|
}
|
|
return value.substr(0, len - 3) + "...";
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Escapes the passed string for use in a regular expression.
|
|
* @param {String} string
|
|
* @return {String}
|
|
*/
|
|
escapeRegex: function(string) {
|
|
return string.replace(escapeRegexRe, "\\$1");
|
|
},
|
|
|
|
/**
|
|
* Escapes the passed string for ' and \
|
|
* @param {String} string The string to escape
|
|
* @return {String} The escaped string
|
|
*/
|
|
escape: function(string) {
|
|
return string.replace(escapeRe, "\\$1");
|
|
},
|
|
|
|
/**
|
|
* Utility function that allows you to easily switch a string between two alternating values. The passed value
|
|
* is compared to the current string, and if they are equal, the other value that was passed in is returned. If
|
|
* they are already different, the first value passed in is returned. Note that this method returns the new value
|
|
* but does not change the current string.
|
|
*
|
|
* // alternate sort directions
|
|
* sort = Ext.String.toggle(sort, 'ASC', 'DESC');
|
|
*
|
|
* // instead of conditional logic:
|
|
* sort = (sort === 'ASC' ? 'DESC' : 'ASC');
|
|
*
|
|
* @param {String} string The current string.
|
|
* @param {String} value The value to compare to the current string.
|
|
* @param {String} other The new value to use if the string already equals the first value passed in.
|
|
* @return {String} The new value.
|
|
*/
|
|
toggle: function(string, value, other) {
|
|
return string === value ? other : value;
|
|
},
|
|
|
|
/**
|
|
* Pads the left side of a string with a specified character. This is especially useful
|
|
* for normalizing number and date strings. Example usage:
|
|
*
|
|
* var s = Ext.String.leftPad('123', 5, '0');
|
|
* // s now contains the string: '00123'
|
|
*
|
|
* @param {String} string The original string.
|
|
* @param {Number} size The total length of the output string.
|
|
* @param {String} [character=' '] (optional) The character with which to pad the original string.
|
|
* @return {String} The padded string.
|
|
*/
|
|
leftPad: function(string, size, character) {
|
|
var result = String(string);
|
|
character = character || " ";
|
|
while (result.length < size) {
|
|
result = character + result;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens. Each
|
|
* token must be unique, and must increment in the format {0}, {1}, etc. Example usage:
|
|
*
|
|
* var cls = 'my-class',
|
|
* text = 'Some text';
|
|
* var s = Ext.String.format('<div class="{0}">{1}</div>', cls, text);
|
|
* // s now contains the string: '<div class="my-class">Some text</div>'
|
|
*
|
|
* @param {String} string The tokenized string to be formatted.
|
|
* @param {Mixed...} values The values to replace tokens `{0}`, `{1}`, etc in order.
|
|
* @return {String} The formatted string.
|
|
*/
|
|
format: function(format) {
|
|
var args = Ext.Array.toArray(arguments, 1);
|
|
return format.replace(formatRe, function(m, i) {
|
|
return args[i];
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns a string with a specified number of repetitions a given string pattern.
|
|
* The pattern be separated by a different string.
|
|
*
|
|
* var s = Ext.String.repeat('---', 4); // = '------------'
|
|
* var t = Ext.String.repeat('--', 3, '/'); // = '--/--/--'
|
|
*
|
|
* @param {String} pattern The pattern to repeat.
|
|
* @param {Number} count The number of times to repeat the pattern (may be 0).
|
|
* @param {String} sep An option string to separate each pattern.
|
|
*/
|
|
repeat: function(pattern, count, sep) {
|
|
if (count < 1) {
|
|
count = 0;
|
|
}
|
|
for (var buf = [], i = count; i--; ) {
|
|
buf.push(pattern);
|
|
}
|
|
return buf.join(sep || '');
|
|
},
|
|
|
|
/**
|
|
* Splits a string of space separated words into an array, trimming as needed. If the
|
|
* words are already an array, it is returned.
|
|
*
|
|
* @param {String/Array} words
|
|
*/
|
|
splitWords: function (words) {
|
|
if (words && typeof words == 'string') {
|
|
return words.replace(basicTrimRe, '').split(whitespaceRe);
|
|
}
|
|
return words || [];
|
|
}
|
|
};
|
|
}());
|
|
|
|
// initialize the default encode / decode entities
|
|
Ext.String.resetCharacterEntities();
|
|
|
|
/**
|
|
* Old alias to {@link Ext.String#htmlEncode}
|
|
* @deprecated Use {@link Ext.String#htmlEncode} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.String#htmlEncode
|
|
*/
|
|
Ext.htmlEncode = Ext.String.htmlEncode;
|
|
|
|
|
|
/**
|
|
* Old alias to {@link Ext.String#htmlDecode}
|
|
* @deprecated Use {@link Ext.String#htmlDecode} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.String#htmlDecode
|
|
*/
|
|
Ext.htmlDecode = Ext.String.htmlDecode;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.String#urlAppend}
|
|
* @deprecated Use {@link Ext.String#urlAppend} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.String#urlAppend
|
|
*/
|
|
Ext.urlAppend = Ext.String.urlAppend;
|
|
|
|
// @tag foundation,core
|
|
// @require String.js
|
|
// @define Ext.Number
|
|
|
|
/**
|
|
* @class Ext.Number
|
|
*
|
|
* A collection of useful static methods to deal with numbers
|
|
* @singleton
|
|
*/
|
|
|
|
Ext.Number = new function() {
|
|
|
|
var me = this,
|
|
isToFixedBroken = (0.9).toFixed() !== '1',
|
|
math = Math;
|
|
|
|
Ext.apply(this, {
|
|
/**
|
|
* Checks whether or not the passed number is within a desired range. If the number is already within the
|
|
* range it is returned, otherwise the min or max value is returned depending on which side of the range is
|
|
* exceeded. Note that this method returns the constrained value but does not change the current number.
|
|
* @param {Number} number The number to check
|
|
* @param {Number} min The minimum number in the range
|
|
* @param {Number} max The maximum number in the range
|
|
* @return {Number} The constrained value if outside the range, otherwise the current value
|
|
*/
|
|
constrain: function(number, min, max) {
|
|
var x = parseFloat(number);
|
|
|
|
// Watch out for NaN in Chrome 18
|
|
// V8bug: http://code.google.com/p/v8/issues/detail?id=2056
|
|
|
|
// Operators are faster than Math.min/max. See http://jsperf.com/number-constrain
|
|
// ... and (x < Nan) || (x < undefined) == false
|
|
// ... same for (x > NaN) || (x > undefined)
|
|
// so if min or max are undefined or NaN, we never return them... sadly, this
|
|
// is not true of null (but even Math.max(-1,null)==0 and isNaN(null)==false)
|
|
return (x < min) ? min : ((x > max) ? max : x);
|
|
},
|
|
|
|
/**
|
|
* Snaps the passed number between stopping points based upon a passed increment value.
|
|
*
|
|
* The difference between this and {@link #snapInRange} is that {@link #snapInRange} uses the minValue
|
|
* when calculating snap points:
|
|
*
|
|
* r = Ext.Number.snap(56, 2, 55, 65); // Returns 56 - snap points are zero based
|
|
*
|
|
* r = Ext.Number.snapInRange(56, 2, 55, 65); // Returns 57 - snap points are based from minValue
|
|
*
|
|
* @param {Number} value The unsnapped value.
|
|
* @param {Number} increment The increment by which the value must move.
|
|
* @param {Number} minValue The minimum value to which the returned value must be constrained. Overrides the increment.
|
|
* @param {Number} maxValue The maximum value to which the returned value must be constrained. Overrides the increment.
|
|
* @return {Number} The value of the nearest snap target.
|
|
*/
|
|
snap : function(value, increment, minValue, maxValue) {
|
|
var m;
|
|
|
|
// If no value passed, or minValue was passed and value is less than minValue (anything < undefined is false)
|
|
// Then use the minValue (or zero if the value was undefined)
|
|
if (value === undefined || value < minValue) {
|
|
return minValue || 0;
|
|
}
|
|
|
|
if (increment) {
|
|
m = value % increment;
|
|
if (m !== 0) {
|
|
value -= m;
|
|
if (m * 2 >= increment) {
|
|
value += increment;
|
|
} else if (m * 2 < -increment) {
|
|
value -= increment;
|
|
}
|
|
}
|
|
}
|
|
return me.constrain(value, minValue, maxValue);
|
|
},
|
|
|
|
/**
|
|
* Snaps the passed number between stopping points based upon a passed increment value.
|
|
*
|
|
* The difference between this and {@link #snap} is that {@link #snap} does not use the minValue
|
|
* when calculating snap points:
|
|
*
|
|
* r = Ext.Number.snap(56, 2, 55, 65); // Returns 56 - snap points are zero based
|
|
*
|
|
* r = Ext.Number.snapInRange(56, 2, 55, 65); // Returns 57 - snap points are based from minValue
|
|
*
|
|
* @param {Number} value The unsnapped value.
|
|
* @param {Number} increment The increment by which the value must move.
|
|
* @param {Number} [minValue=0] The minimum value to which the returned value must be constrained.
|
|
* @param {Number} [maxValue=Infinity] The maximum value to which the returned value must be constrained.
|
|
* @return {Number} The value of the nearest snap target.
|
|
*/
|
|
snapInRange : function(value, increment, minValue, maxValue) {
|
|
var tween;
|
|
|
|
// default minValue to zero
|
|
minValue = (minValue || 0);
|
|
|
|
// If value is undefined, or less than minValue, use minValue
|
|
if (value === undefined || value < minValue) {
|
|
return minValue;
|
|
}
|
|
|
|
// Calculate how many snap points from the minValue the passed value is.
|
|
if (increment && (tween = ((value - minValue) % increment))) {
|
|
value -= tween;
|
|
tween *= 2;
|
|
if (tween >= increment) {
|
|
value += increment;
|
|
}
|
|
}
|
|
|
|
// If constraining within a maximum, ensure the maximum is on a snap point
|
|
if (maxValue !== undefined) {
|
|
if (value > (maxValue = me.snapInRange(maxValue, increment, minValue))) {
|
|
value = maxValue;
|
|
}
|
|
}
|
|
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Formats a number using fixed-point notation
|
|
* @param {Number} value The number to format
|
|
* @param {Number} precision The number of digits to show after the decimal point
|
|
*/
|
|
toFixed: isToFixedBroken ? function(value, precision) {
|
|
precision = precision || 0;
|
|
var pow = math.pow(10, precision);
|
|
return (math.round(value * pow) / pow).toFixed(precision);
|
|
} : function(value, precision) {
|
|
return value.toFixed(precision);
|
|
},
|
|
|
|
/**
|
|
* Validate that a value is numeric and convert it to a number if necessary. Returns the specified default value if
|
|
* it is not.
|
|
|
|
Ext.Number.from('1.23', 1); // returns 1.23
|
|
Ext.Number.from('abc', 1); // returns 1
|
|
|
|
* @param {Object} value
|
|
* @param {Number} defaultValue The value to return if the original value is non-numeric
|
|
* @return {Number} value, if numeric, defaultValue otherwise
|
|
*/
|
|
from: function(value, defaultValue) {
|
|
if (isFinite(value)) {
|
|
value = parseFloat(value);
|
|
}
|
|
|
|
return !isNaN(value) ? value : defaultValue;
|
|
},
|
|
|
|
/**
|
|
* Returns a random integer between the specified range (inclusive)
|
|
* @param {Number} from Lowest value to return.
|
|
* @param {Number} to Highst value to return.
|
|
* @return {Number} A random integer within the specified range.
|
|
*/
|
|
randomInt: function (from, to) {
|
|
return math.floor(math.random() * (to - from + 1) + from);
|
|
},
|
|
|
|
/**
|
|
* Corrects floating point numbers that overflow to a non-precise
|
|
* value because of their floating nature, for example `0.1 + 0.2`
|
|
* @param {Number} The number
|
|
* @return {Number} The correctly rounded number
|
|
*/
|
|
correctFloat: function(n) {
|
|
// This is to correct the type of errors where 2 floats end with
|
|
// a long string of decimals, eg 0.1 + 0.2. When they overflow in this
|
|
// manner, they usually go to 15-16 decimals, so we cut it off at 14.
|
|
return parseFloat(n.toPrecision(14));
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @deprecated 4.0.0 Please use {@link Ext.Number#from} instead.
|
|
* @member Ext
|
|
* @method num
|
|
* @inheritdoc Ext.Number#from
|
|
*/
|
|
Ext.num = function() {
|
|
return me.from.apply(this, arguments);
|
|
};
|
|
};
|
|
|
|
// @tag foundation,core
|
|
// @require Number.js
|
|
// @define Ext.Array
|
|
|
|
/**
|
|
* @class Ext.Array
|
|
* @singleton
|
|
* @author Jacky Nguyen <jacky@sencha.com>
|
|
* @docauthor Jacky Nguyen <jacky@sencha.com>
|
|
*
|
|
* A set of useful static methods to deal with arrays; provide missing methods for older browsers.
|
|
*/
|
|
(function() {
|
|
|
|
var arrayPrototype = Array.prototype,
|
|
slice = arrayPrototype.slice,
|
|
supportsSplice = (function () {
|
|
var array = [],
|
|
lengthBefore,
|
|
j = 20;
|
|
|
|
if (!array.splice) {
|
|
return false;
|
|
}
|
|
|
|
// This detects a bug in IE8 splice method:
|
|
// see http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/6e946d03-e09f-4b22-a4dd-cd5e276bf05a/
|
|
|
|
while (j--) {
|
|
array.push("A");
|
|
}
|
|
|
|
array.splice(15, 0, "F", "F", "F", "F", "F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F","F");
|
|
|
|
lengthBefore = array.length; //41
|
|
array.splice(13, 0, "XXX"); // add one element
|
|
|
|
if (lengthBefore+1 != array.length) {
|
|
return false;
|
|
}
|
|
// end IE8 bug
|
|
|
|
return true;
|
|
}()),
|
|
supportsForEach = 'forEach' in arrayPrototype,
|
|
supportsMap = 'map' in arrayPrototype,
|
|
supportsIndexOf = 'indexOf' in arrayPrototype,
|
|
supportsEvery = 'every' in arrayPrototype,
|
|
supportsSome = 'some' in arrayPrototype,
|
|
supportsFilter = 'filter' in arrayPrototype,
|
|
supportsSort = (function() {
|
|
var a = [1,2,3,4,5].sort(function(){ return 0; });
|
|
return a[0] === 1 && a[1] === 2 && a[2] === 3 && a[3] === 4 && a[4] === 5;
|
|
}()),
|
|
supportsSliceOnNodeList = true,
|
|
ExtArray,
|
|
erase,
|
|
replace,
|
|
splice;
|
|
|
|
try {
|
|
// IE 6 - 8 will throw an error when using Array.prototype.slice on NodeList
|
|
if (typeof document !== 'undefined') {
|
|
slice.call(document.getElementsByTagName('body'));
|
|
}
|
|
} catch (e) {
|
|
supportsSliceOnNodeList = false;
|
|
}
|
|
|
|
function fixArrayIndex (array, index) {
|
|
return (index < 0) ? Math.max(0, array.length + index)
|
|
: Math.min(array.length, index);
|
|
}
|
|
|
|
/*
|
|
Does the same work as splice, but with a slightly more convenient signature. The splice
|
|
method has bugs in IE8, so this is the implementation we use on that platform.
|
|
|
|
The rippling of items in the array can be tricky. Consider two use cases:
|
|
|
|
index=2
|
|
removeCount=2
|
|
/=====\
|
|
+---+---+---+---+---+---+---+---+
|
|
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|
|
+---+---+---+---+---+---+---+---+
|
|
/ \/ \/ \/ \
|
|
/ /\ /\ /\ \
|
|
/ / \/ \/ \ +--------------------------+
|
|
/ / /\ /\ +--------------------------+ \
|
|
/ / / \/ +--------------------------+ \ \
|
|
/ / / /+--------------------------+ \ \ \
|
|
/ / / / \ \ \ \
|
|
v v v v v v v v
|
|
+---+---+---+---+---+---+ +---+---+---+---+---+---+---+---+---+
|
|
| 0 | 1 | 4 | 5 | 6 | 7 | | 0 | 1 | a | b | c | 4 | 5 | 6 | 7 |
|
|
+---+---+---+---+---+---+ +---+---+---+---+---+---+---+---+---+
|
|
A B \=========/
|
|
insert=[a,b,c]
|
|
|
|
In case A, it is obvious that copying of [4,5,6,7] must be left-to-right so
|
|
that we don't end up with [0,1,6,7,6,7]. In case B, we have the opposite; we
|
|
must go right-to-left or else we would end up with [0,1,a,b,c,4,4,4,4].
|
|
*/
|
|
function replaceSim (array, index, removeCount, insert) {
|
|
var add = insert ? insert.length : 0,
|
|
length = array.length,
|
|
pos = fixArrayIndex(array, index),
|
|
remove,
|
|
tailOldPos,
|
|
tailNewPos,
|
|
tailCount,
|
|
lengthAfterRemove,
|
|
i;
|
|
|
|
// we try to use Array.push when we can for efficiency...
|
|
if (pos === length) {
|
|
if (add) {
|
|
array.push.apply(array, insert);
|
|
}
|
|
} else {
|
|
remove = Math.min(removeCount, length - pos);
|
|
tailOldPos = pos + remove;
|
|
tailNewPos = tailOldPos + add - remove;
|
|
tailCount = length - tailOldPos;
|
|
lengthAfterRemove = length - remove;
|
|
|
|
if (tailNewPos < tailOldPos) { // case A
|
|
for (i = 0; i < tailCount; ++i) {
|
|
array[tailNewPos+i] = array[tailOldPos+i];
|
|
}
|
|
} else if (tailNewPos > tailOldPos) { // case B
|
|
for (i = tailCount; i--; ) {
|
|
array[tailNewPos+i] = array[tailOldPos+i];
|
|
}
|
|
} // else, add == remove (nothing to do)
|
|
|
|
if (add && pos === lengthAfterRemove) {
|
|
array.length = lengthAfterRemove; // truncate array
|
|
array.push.apply(array, insert);
|
|
} else {
|
|
array.length = lengthAfterRemove + add; // reserves space
|
|
for (i = 0; i < add; ++i) {
|
|
array[pos+i] = insert[i];
|
|
}
|
|
}
|
|
}
|
|
|
|
return array;
|
|
}
|
|
|
|
function replaceNative (array, index, removeCount, insert) {
|
|
if (insert && insert.length) {
|
|
// Inserting at index zero with no removing: use unshift
|
|
if (index === 0 && !removeCount) {
|
|
array.unshift.apply(array, insert);
|
|
}
|
|
// Inserting/replacing in middle of array
|
|
else if (index < array.length) {
|
|
array.splice.apply(array, [index, removeCount].concat(insert));
|
|
}
|
|
// Appending to array
|
|
else {
|
|
array.push.apply(array, insert);
|
|
}
|
|
} else {
|
|
array.splice(index, removeCount);
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function eraseSim (array, index, removeCount) {
|
|
return replaceSim(array, index, removeCount);
|
|
}
|
|
|
|
function eraseNative (array, index, removeCount) {
|
|
array.splice(index, removeCount);
|
|
return array;
|
|
}
|
|
|
|
function spliceSim (array, index, removeCount) {
|
|
var pos = fixArrayIndex(array, index),
|
|
removed = array.slice(index, fixArrayIndex(array, pos+removeCount));
|
|
|
|
if (arguments.length < 4) {
|
|
replaceSim(array, pos, removeCount);
|
|
} else {
|
|
replaceSim(array, pos, removeCount, slice.call(arguments, 3));
|
|
}
|
|
|
|
return removed;
|
|
}
|
|
|
|
function spliceNative (array) {
|
|
return array.splice.apply(array, slice.call(arguments, 1));
|
|
}
|
|
|
|
erase = supportsSplice ? eraseNative : eraseSim;
|
|
replace = supportsSplice ? replaceNative : replaceSim;
|
|
splice = supportsSplice ? spliceNative : spliceSim;
|
|
|
|
// NOTE: from here on, use erase, replace or splice (not native methods)...
|
|
|
|
ExtArray = Ext.Array = {
|
|
/**
|
|
* Iterates an array or an iterable value and invoke the given callback function for each item.
|
|
*
|
|
* var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
|
|
*
|
|
* Ext.Array.each(countries, function(name, index, countriesItSelf) {
|
|
* console.log(name);
|
|
* });
|
|
*
|
|
* var sum = function() {
|
|
* var sum = 0;
|
|
*
|
|
* Ext.Array.each(arguments, function(value) {
|
|
* sum += value;
|
|
* });
|
|
*
|
|
* return sum;
|
|
* };
|
|
*
|
|
* sum(1, 2, 3); // returns 6
|
|
*
|
|
* The iteration can be stopped by returning false in the function callback.
|
|
*
|
|
* Ext.Array.each(countries, function(name, index, countriesItSelf) {
|
|
* if (name === 'Singapore') {
|
|
* return false; // break here
|
|
* }
|
|
* });
|
|
*
|
|
* {@link Ext#each Ext.each} is alias for {@link Ext.Array#each Ext.Array.each}
|
|
*
|
|
* @param {Array/NodeList/Object} iterable The value to be iterated. If this
|
|
* argument is not iterable, the callback function is called once.
|
|
* @param {Function} fn The callback function. If it returns false, the iteration stops and this method returns
|
|
* the current `index`.
|
|
* @param {Object} fn.item The item at the current `index` in the passed `array`
|
|
* @param {Number} fn.index The current `index` within the `array`
|
|
* @param {Array} fn.allItems The `array` itself which was passed as the first argument
|
|
* @param {Boolean} fn.return Return false to stop iteration.
|
|
* @param {Object} scope (Optional) The scope (`this` reference) in which the specified function is executed.
|
|
* @param {Boolean} reverse (Optional) Reverse the iteration order (loop from the end to the beginning)
|
|
* Defaults false
|
|
* @return {Boolean} See description for the `fn` parameter.
|
|
*/
|
|
each: function(array, fn, scope, reverse) {
|
|
array = ExtArray.from(array);
|
|
|
|
var i,
|
|
ln = array.length;
|
|
|
|
if (reverse !== true) {
|
|
for (i = 0; i < ln; i++) {
|
|
if (fn.call(scope || array[i], array[i], i, array) === false) {
|
|
return i;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
for (i = ln - 1; i > -1; i--) {
|
|
if (fn.call(scope || array[i], array[i], i, array) === false) {
|
|
return i;
|
|
}
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Iterates an array and invoke the given callback function for each item. Note that this will simply
|
|
* delegate to the native Array.prototype.forEach method if supported. It doesn't support stopping the
|
|
* iteration by returning false in the callback function like {@link Ext.Array#each}. However, performance
|
|
* could be much better in modern browsers comparing with {@link Ext.Array#each}
|
|
*
|
|
* @param {Array} array The array to iterate
|
|
* @param {Function} fn The callback function.
|
|
* @param {Object} fn.item The item at the current `index` in the passed `array`
|
|
* @param {Number} fn.index The current `index` within the `array`
|
|
* @param {Array} fn.allItems The `array` itself which was passed as the first argument
|
|
* @param {Object} scope (Optional) The execution scope (`this`) in which the specified function is executed.
|
|
*/
|
|
forEach: supportsForEach ? function(array, fn, scope) {
|
|
array.forEach(fn, scope);
|
|
} : function(array, fn, scope) {
|
|
var i = 0,
|
|
ln = array.length;
|
|
|
|
for (; i < ln; i++) {
|
|
fn.call(scope, array[i], i, array);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get the index of the provided `item` in the given `array`, a supplement for the
|
|
* missing arrayPrototype.indexOf in Internet Explorer.
|
|
*
|
|
* @param {Array} array The array to check
|
|
* @param {Object} item The item to look for
|
|
* @param {Number} from (Optional) The index at which to begin the search
|
|
* @return {Number} The index of item in the array (or -1 if it is not found)
|
|
*/
|
|
indexOf: supportsIndexOf ? function(array, item, from) {
|
|
return arrayPrototype.indexOf.call(array, item, from);
|
|
} : function(array, item, from) {
|
|
var i, length = array.length;
|
|
|
|
for (i = (from < 0) ? Math.max(0, length + from) : from || 0; i < length; i++) {
|
|
if (array[i] === item) {
|
|
return i;
|
|
}
|
|
}
|
|
|
|
return -1;
|
|
},
|
|
|
|
/**
|
|
* Checks whether or not the given `array` contains the specified `item`
|
|
*
|
|
* @param {Array} array The array to check
|
|
* @param {Object} item The item to look for
|
|
* @return {Boolean} True if the array contains the item, false otherwise
|
|
*/
|
|
contains: supportsIndexOf ? function(array, item) {
|
|
return arrayPrototype.indexOf.call(array, item) !== -1;
|
|
} : function(array, item) {
|
|
var i, ln;
|
|
|
|
for (i = 0, ln = array.length; i < ln; i++) {
|
|
if (array[i] === item) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Converts any iterable (numeric indices and a length property) into a true array.
|
|
*
|
|
* function test() {
|
|
* var args = Ext.Array.toArray(arguments),
|
|
* fromSecondToLastArgs = Ext.Array.toArray(arguments, 1);
|
|
*
|
|
* alert(args.join(' '));
|
|
* alert(fromSecondToLastArgs.join(' '));
|
|
* }
|
|
*
|
|
* test('just', 'testing', 'here'); // alerts 'just testing here';
|
|
* // alerts 'testing here';
|
|
*
|
|
* Ext.Array.toArray(document.getElementsByTagName('div')); // will convert the NodeList into an array
|
|
* Ext.Array.toArray('splitted'); // returns ['s', 'p', 'l', 'i', 't', 't', 'e', 'd']
|
|
* Ext.Array.toArray('splitted', 0, 3); // returns ['s', 'p', 'l']
|
|
*
|
|
* {@link Ext#toArray Ext.toArray} is alias for {@link Ext.Array#toArray Ext.Array.toArray}
|
|
*
|
|
* @param {Object} iterable the iterable object to be turned into a true Array.
|
|
* @param {Number} start (Optional) a zero-based index that specifies the start of extraction. Defaults to 0
|
|
* @param {Number} end (Optional) a 1-based index that specifies the end of extraction. Defaults to the last
|
|
* index of the iterable value
|
|
* @return {Array} array
|
|
*/
|
|
toArray: function(iterable, start, end){
|
|
if (!iterable || !iterable.length) {
|
|
return [];
|
|
}
|
|
|
|
if (typeof iterable === 'string') {
|
|
iterable = iterable.split('');
|
|
}
|
|
|
|
if (supportsSliceOnNodeList) {
|
|
return slice.call(iterable, start || 0, end || iterable.length);
|
|
}
|
|
|
|
var array = [],
|
|
i;
|
|
|
|
start = start || 0;
|
|
end = end ? ((end < 0) ? iterable.length + end : end) : iterable.length;
|
|
|
|
for (i = start; i < end; i++) {
|
|
array.push(iterable[i]);
|
|
}
|
|
|
|
return array;
|
|
},
|
|
|
|
/**
|
|
* Plucks the value of a property from each item in the Array. Example:
|
|
*
|
|
* Ext.Array.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
|
|
*
|
|
* @param {Array/NodeList} array The Array of items to pluck the value from.
|
|
* @param {String} propertyName The property name to pluck from each element.
|
|
* @return {Array} The value from each item in the Array.
|
|
*/
|
|
pluck: function(array, propertyName) {
|
|
var ret = [],
|
|
i, ln, item;
|
|
|
|
for (i = 0, ln = array.length; i < ln; i++) {
|
|
item = array[i];
|
|
|
|
ret.push(item[propertyName]);
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Creates a new array with the results of calling a provided function on every element in this array.
|
|
*
|
|
* @param {Array} array
|
|
* @param {Function} fn Callback function for each item
|
|
* @param {Mixed} fn.item Current item.
|
|
* @param {Number} fn.index Index of the item.
|
|
* @param {Array} fn.array The whole array that's being iterated.
|
|
* @param {Object} [scope] Callback function scope
|
|
* @return {Array} results
|
|
*/
|
|
map: supportsMap ? function(array, fn, scope) {
|
|
return array.map(fn, scope);
|
|
} : function(array, fn, scope) {
|
|
var results = [],
|
|
i = 0,
|
|
len = array.length;
|
|
|
|
for (; i < len; i++) {
|
|
results[i] = fn.call(scope, array[i], i, array);
|
|
}
|
|
|
|
return results;
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function for each array element until the function returns a falsy value.
|
|
* If such an item is found, the function will return false immediately.
|
|
* Otherwise, it will return true.
|
|
*
|
|
* @param {Array} array
|
|
* @param {Function} fn Callback function for each item
|
|
* @param {Mixed} fn.item Current item.
|
|
* @param {Number} fn.index Index of the item.
|
|
* @param {Array} fn.array The whole array that's being iterated.
|
|
* @param {Object} scope Callback function scope
|
|
* @return {Boolean} True if no false value is returned by the callback function.
|
|
*/
|
|
every: supportsEvery ? function(array, fn, scope) {
|
|
return array.every(fn, scope);
|
|
} : function(array, fn, scope) {
|
|
var i = 0,
|
|
ln = array.length;
|
|
|
|
for (; i < ln; ++i) {
|
|
if (!fn.call(scope, array[i], i, array)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function for each array element until the function returns a truthy value.
|
|
* If such an item is found, the function will return true immediately. Otherwise, it will return false.
|
|
*
|
|
* @param {Array} array
|
|
* @param {Function} fn Callback function for each item
|
|
* @param {Mixed} fn.item Current item.
|
|
* @param {Number} fn.index Index of the item.
|
|
* @param {Array} fn.array The whole array that's being iterated.
|
|
* @param {Object} scope Callback function scope
|
|
* @return {Boolean} True if the callback function returns a truthy value.
|
|
*/
|
|
some: supportsSome ? function(array, fn, scope) {
|
|
return array.some(fn, scope);
|
|
} : function(array, fn, scope) {
|
|
var i = 0,
|
|
ln = array.length;
|
|
|
|
for (; i < ln; ++i) {
|
|
if (fn.call(scope, array[i], i, array)) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Shallow compares the contents of 2 arrays using strict equality.
|
|
* @param {Array} array1
|
|
* @param {Array} array2
|
|
* @return {Boolean} `true` if the arrays are equal.
|
|
*/
|
|
equals: function(array1, array2) {
|
|
var len1 = array1.length,
|
|
len2 = array2.length,
|
|
i;
|
|
|
|
// Short circuit if the same array is passed twice
|
|
if (array1 === array2) {
|
|
return true;
|
|
}
|
|
|
|
if (len1 !== len2) {
|
|
return false;
|
|
}
|
|
|
|
for (i = 0; i < len1; ++i) {
|
|
if (array1[i] !== array2[i]) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Filter through an array and remove empty item as defined in {@link Ext#isEmpty Ext.isEmpty}
|
|
*
|
|
* See {@link Ext.Array#filter}
|
|
*
|
|
* @param {Array} array
|
|
* @return {Array} results
|
|
*/
|
|
clean: function(array) {
|
|
var results = [],
|
|
i = 0,
|
|
ln = array.length,
|
|
item;
|
|
|
|
for (; i < ln; i++) {
|
|
item = array[i];
|
|
|
|
if (!Ext.isEmpty(item)) {
|
|
results.push(item);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
},
|
|
|
|
/**
|
|
* Returns a new array with unique items
|
|
*
|
|
* @param {Array} array
|
|
* @return {Array} results
|
|
*/
|
|
unique: function(array) {
|
|
var clone = [],
|
|
i = 0,
|
|
ln = array.length,
|
|
item;
|
|
|
|
for (; i < ln; i++) {
|
|
item = array[i];
|
|
|
|
if (ExtArray.indexOf(clone, item) === -1) {
|
|
clone.push(item);
|
|
}
|
|
}
|
|
|
|
return clone;
|
|
},
|
|
|
|
/**
|
|
* Creates a new array with all of the elements of this array for which
|
|
* the provided filtering function returns true.
|
|
*
|
|
* @param {Array} array
|
|
* @param {Function} fn Callback function for each item
|
|
* @param {Mixed} fn.item Current item.
|
|
* @param {Number} fn.index Index of the item.
|
|
* @param {Array} fn.array The whole array that's being iterated.
|
|
* @param {Object} scope Callback function scope
|
|
* @return {Array} results
|
|
*/
|
|
filter: supportsFilter ? function(array, fn, scope) {
|
|
return array.filter(fn, scope);
|
|
} : function(array, fn, scope) {
|
|
var results = [],
|
|
i = 0,
|
|
ln = array.length;
|
|
|
|
for (; i < ln; i++) {
|
|
if (fn.call(scope, array[i], i, array)) {
|
|
results.push(array[i]);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
},
|
|
|
|
/**
|
|
* Returns the first item in the array which elicits a true return value from the
|
|
* passed selection function.
|
|
* @param {Array} array The array to search
|
|
* @param {Function} fn The selection function to execute for each item.
|
|
* @param {Mixed} fn.item The array item.
|
|
* @param {String} fn.index The index of the array item.
|
|
* @param {Object} scope (optional) The scope (<code>this</code> reference) in which the
|
|
* function is executed. Defaults to the array
|
|
* @return {Object} The first item in the array which returned true from the selection
|
|
* function, or null if none was found.
|
|
*/
|
|
findBy : function(array, fn, scope) {
|
|
var i = 0,
|
|
len = array.length;
|
|
|
|
for (; i < len; i++) {
|
|
if (fn.call(scope || array, array[i], i)) {
|
|
return array[i];
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Converts a value to an array if it's not already an array; returns:
|
|
*
|
|
* - An empty array if given value is `undefined` or `null`
|
|
* - Itself if given value is already an array
|
|
* - An array copy if given value is {@link Ext#isIterable iterable} (arguments, NodeList and alike)
|
|
* - An array with one item which is the given value, otherwise
|
|
*
|
|
* @param {Object} value The value to convert to an array if it's not already is an array
|
|
* @param {Boolean} newReference (Optional) True to clone the given array and return a new reference if necessary,
|
|
* defaults to false
|
|
* @return {Array} array
|
|
*/
|
|
from: function(value, newReference) {
|
|
if (value === undefined || value === null) {
|
|
return [];
|
|
}
|
|
|
|
if (Ext.isArray(value)) {
|
|
return (newReference) ? slice.call(value) : value;
|
|
}
|
|
|
|
var type = typeof value;
|
|
// Both strings and functions will have a length property. In phantomJS, NodeList
|
|
// instances report typeof=='function' but don't have an apply method...
|
|
if (value && value.length !== undefined && type !== 'string' && (type !== 'function' || !value.apply)) {
|
|
return ExtArray.toArray(value);
|
|
}
|
|
|
|
return [value];
|
|
},
|
|
|
|
/**
|
|
* Removes the specified item from the array if it exists
|
|
*
|
|
* @param {Array} array The array
|
|
* @param {Object} item The item to remove
|
|
* @return {Array} The passed array itself
|
|
*/
|
|
remove: function(array, item) {
|
|
var index = ExtArray.indexOf(array, item);
|
|
|
|
if (index !== -1) {
|
|
erase(array, index, 1);
|
|
}
|
|
|
|
return array;
|
|
},
|
|
|
|
/**
|
|
* Push an item into the array only if the array doesn't contain it yet
|
|
*
|
|
* @param {Array} array The array
|
|
* @param {Object} item The item to include
|
|
*/
|
|
include: function(array, item) {
|
|
if (!ExtArray.contains(array, item)) {
|
|
array.push(item);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Clone a flat array without referencing the previous one. Note that this is different
|
|
* from Ext.clone since it doesn't handle recursive cloning. It's simply a convenient, easy-to-remember method
|
|
* for Array.prototype.slice.call(array)
|
|
*
|
|
* @param {Array} array The array
|
|
* @return {Array} The clone array
|
|
*/
|
|
clone: function(array) {
|
|
return slice.call(array);
|
|
},
|
|
|
|
/**
|
|
* Merge multiple arrays into one with unique items.
|
|
*
|
|
* {@link Ext.Array#union} is alias for {@link Ext.Array#merge}
|
|
*
|
|
* @param {Array} array1
|
|
* @param {Array} array2
|
|
* @param {Array} etc
|
|
* @return {Array} merged
|
|
*/
|
|
merge: function() {
|
|
var args = slice.call(arguments),
|
|
array = [],
|
|
i, ln;
|
|
|
|
for (i = 0, ln = args.length; i < ln; i++) {
|
|
array = array.concat(args[i]);
|
|
}
|
|
|
|
return ExtArray.unique(array);
|
|
},
|
|
|
|
/**
|
|
* Merge multiple arrays into one with unique items that exist in all of the arrays.
|
|
*
|
|
* @param {Array} array1
|
|
* @param {Array} array2
|
|
* @param {Array} etc
|
|
* @return {Array} intersect
|
|
*/
|
|
intersect: function() {
|
|
var intersection = [],
|
|
arrays = slice.call(arguments),
|
|
arraysLength,
|
|
array,
|
|
arrayLength,
|
|
minArray,
|
|
minArrayIndex,
|
|
minArrayCandidate,
|
|
minArrayLength,
|
|
element,
|
|
elementCandidate,
|
|
elementCount,
|
|
i, j, k;
|
|
|
|
if (!arrays.length) {
|
|
return intersection;
|
|
}
|
|
|
|
// Find the smallest array
|
|
arraysLength = arrays.length;
|
|
for (i = minArrayIndex = 0; i < arraysLength; i++) {
|
|
minArrayCandidate = arrays[i];
|
|
if (!minArray || minArrayCandidate.length < minArray.length) {
|
|
minArray = minArrayCandidate;
|
|
minArrayIndex = i;
|
|
}
|
|
}
|
|
|
|
minArray = ExtArray.unique(minArray);
|
|
erase(arrays, minArrayIndex, 1);
|
|
|
|
// Use the smallest unique'd array as the anchor loop. If the other array(s) do contain
|
|
// an item in the small array, we're likely to find it before reaching the end
|
|
// of the inner loop and can terminate the search early.
|
|
minArrayLength = minArray.length;
|
|
arraysLength = arrays.length;
|
|
for (i = 0; i < minArrayLength; i++) {
|
|
element = minArray[i];
|
|
elementCount = 0;
|
|
|
|
for (j = 0; j < arraysLength; j++) {
|
|
array = arrays[j];
|
|
arrayLength = array.length;
|
|
for (k = 0; k < arrayLength; k++) {
|
|
elementCandidate = array[k];
|
|
if (element === elementCandidate) {
|
|
elementCount++;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (elementCount === arraysLength) {
|
|
intersection.push(element);
|
|
}
|
|
}
|
|
|
|
return intersection;
|
|
},
|
|
|
|
/**
|
|
* Perform a set difference A-B by subtracting all items in array B from array A.
|
|
*
|
|
* @param {Array} arrayA
|
|
* @param {Array} arrayB
|
|
* @return {Array} difference
|
|
*/
|
|
difference: function(arrayA, arrayB) {
|
|
var clone = slice.call(arrayA),
|
|
ln = clone.length,
|
|
i, j, lnB;
|
|
|
|
for (i = 0,lnB = arrayB.length; i < lnB; i++) {
|
|
for (j = 0; j < ln; j++) {
|
|
if (clone[j] === arrayB[i]) {
|
|
erase(clone, j, 1);
|
|
j--;
|
|
ln--;
|
|
}
|
|
}
|
|
}
|
|
|
|
return clone;
|
|
},
|
|
|
|
/**
|
|
* Returns a shallow copy of a part of an array. This is equivalent to the native
|
|
* call "Array.prototype.slice.call(array, begin, end)". This is often used when "array"
|
|
* is "arguments" since the arguments object does not supply a slice method but can
|
|
* be the context object to Array.prototype.slice.
|
|
*
|
|
* @param {Array} array The array (or arguments object).
|
|
* @param {Number} begin The index at which to begin. Negative values are offsets from
|
|
* the end of the array.
|
|
* @param {Number} end The index at which to end. The copied items do not include
|
|
* end. Negative values are offsets from the end of the array. If end is omitted,
|
|
* all items up to the end of the array are copied.
|
|
* @return {Array} The copied piece of the array.
|
|
* @method slice
|
|
*/
|
|
// Note: IE6 will return [] on slice.call(x, undefined).
|
|
slice: ([1,2].slice(1, undefined).length ?
|
|
function (array, begin, end) {
|
|
return slice.call(array, begin, end);
|
|
} :
|
|
// at least IE6 uses arguments.length for variadic signature
|
|
function (array, begin, end) {
|
|
// After tested for IE 6, the one below is of the best performance
|
|
// see http://jsperf.com/slice-fix
|
|
if (typeof begin === 'undefined') {
|
|
return slice.call(array);
|
|
}
|
|
if (typeof end === 'undefined') {
|
|
return slice.call(array, begin);
|
|
}
|
|
return slice.call(array, begin, end);
|
|
}
|
|
),
|
|
|
|
/**
|
|
* Sorts the elements of an Array.
|
|
* By default, this method sorts the elements alphabetically and ascending.
|
|
*
|
|
* @param {Array} array The array to sort.
|
|
* @param {Function} sortFn (optional) The comparison function.
|
|
* @param {Mixed} sortFn.a An item to compare.
|
|
* @param {Mixed} sortFn.b Another item to compare.
|
|
* @return {Array} The sorted array.
|
|
*/
|
|
sort: supportsSort ? function(array, sortFn) {
|
|
if (sortFn) {
|
|
return array.sort(sortFn);
|
|
} else {
|
|
return array.sort();
|
|
}
|
|
} : function(array, sortFn) {
|
|
var length = array.length,
|
|
i = 0,
|
|
comparison,
|
|
j, min, tmp;
|
|
|
|
for (; i < length; i++) {
|
|
min = i;
|
|
for (j = i + 1; j < length; j++) {
|
|
if (sortFn) {
|
|
comparison = sortFn(array[j], array[min]);
|
|
if (comparison < 0) {
|
|
min = j;
|
|
}
|
|
} else if (array[j] < array[min]) {
|
|
min = j;
|
|
}
|
|
}
|
|
if (min !== i) {
|
|
tmp = array[i];
|
|
array[i] = array[min];
|
|
array[min] = tmp;
|
|
}
|
|
}
|
|
|
|
return array;
|
|
},
|
|
|
|
/**
|
|
* Recursively flattens into 1-d Array. Injects Arrays inline.
|
|
*
|
|
* @param {Array} array The array to flatten
|
|
* @return {Array} The 1-d array.
|
|
*/
|
|
flatten: function(array) {
|
|
var worker = [];
|
|
|
|
function rFlatten(a) {
|
|
var i, ln, v;
|
|
|
|
for (i = 0, ln = a.length; i < ln; i++) {
|
|
v = a[i];
|
|
|
|
if (Ext.isArray(v)) {
|
|
rFlatten(v);
|
|
} else {
|
|
worker.push(v);
|
|
}
|
|
}
|
|
|
|
return worker;
|
|
}
|
|
|
|
return rFlatten(array);
|
|
},
|
|
|
|
/**
|
|
* Returns the minimum value in the Array.
|
|
*
|
|
* @param {Array/NodeList} array The Array from which to select the minimum value.
|
|
* @param {Function} comparisonFn (optional) a function to perform the comparision which determines minimization.
|
|
* If omitted the "<" operator will be used. Note: gt = 1; eq = 0; lt = -1
|
|
* @param {Mixed} comparisonFn.min Current minimum value.
|
|
* @param {Mixed} comparisonFn.item The value to compare with the current minimum.
|
|
* @return {Object} minValue The minimum value
|
|
*/
|
|
min: function(array, comparisonFn) {
|
|
var min = array[0],
|
|
i, ln, item;
|
|
|
|
for (i = 0, ln = array.length; i < ln; i++) {
|
|
item = array[i];
|
|
|
|
if (comparisonFn) {
|
|
if (comparisonFn(min, item) === 1) {
|
|
min = item;
|
|
}
|
|
}
|
|
else {
|
|
if (item < min) {
|
|
min = item;
|
|
}
|
|
}
|
|
}
|
|
|
|
return min;
|
|
},
|
|
|
|
/**
|
|
* Returns the maximum value in the Array.
|
|
*
|
|
* @param {Array/NodeList} array The Array from which to select the maximum value.
|
|
* @param {Function} comparisonFn (optional) a function to perform the comparision which determines maximization.
|
|
* If omitted the ">" operator will be used. Note: gt = 1; eq = 0; lt = -1
|
|
* @param {Mixed} comparisonFn.max Current maximum value.
|
|
* @param {Mixed} comparisonFn.item The value to compare with the current maximum.
|
|
* @return {Object} maxValue The maximum value
|
|
*/
|
|
max: function(array, comparisonFn) {
|
|
var max = array[0],
|
|
i, ln, item;
|
|
|
|
for (i = 0, ln = array.length; i < ln; i++) {
|
|
item = array[i];
|
|
|
|
if (comparisonFn) {
|
|
if (comparisonFn(max, item) === -1) {
|
|
max = item;
|
|
}
|
|
}
|
|
else {
|
|
if (item > max) {
|
|
max = item;
|
|
}
|
|
}
|
|
}
|
|
|
|
return max;
|
|
},
|
|
|
|
/**
|
|
* Calculates the mean of all items in the array.
|
|
*
|
|
* @param {Array} array The Array to calculate the mean value of.
|
|
* @return {Number} The mean.
|
|
*/
|
|
mean: function(array) {
|
|
return array.length > 0 ? ExtArray.sum(array) / array.length : undefined;
|
|
},
|
|
|
|
/**
|
|
* Calculates the sum of all items in the given array.
|
|
*
|
|
* @param {Array} array The Array to calculate the sum value of.
|
|
* @return {Number} The sum.
|
|
*/
|
|
sum: function(array) {
|
|
var sum = 0,
|
|
i, ln, item;
|
|
|
|
for (i = 0,ln = array.length; i < ln; i++) {
|
|
item = array[i];
|
|
|
|
sum += item;
|
|
}
|
|
|
|
return sum;
|
|
},
|
|
|
|
/**
|
|
* Creates a map (object) keyed by the elements of the given array. The values in
|
|
* the map are the index+1 of the array element. For example:
|
|
*
|
|
* var map = Ext.Array.toMap(['a','b','c']);
|
|
*
|
|
* // map = { a: 1, b: 2, c: 3 };
|
|
*
|
|
* Or a key property can be specified:
|
|
*
|
|
* var map = Ext.Array.toMap([
|
|
* { name: 'a' },
|
|
* { name: 'b' },
|
|
* { name: 'c' }
|
|
* ], 'name');
|
|
*
|
|
* // map = { a: 1, b: 2, c: 3 };
|
|
*
|
|
* Lastly, a key extractor can be provided:
|
|
*
|
|
* var map = Ext.Array.toMap([
|
|
* { name: 'a' },
|
|
* { name: 'b' },
|
|
* { name: 'c' }
|
|
* ], function (obj) { return obj.name.toUpperCase(); });
|
|
*
|
|
* // map = { A: 1, B: 2, C: 3 };
|
|
*
|
|
* @param {Array} array The Array to create the map from.
|
|
* @param {String/Function} [getKey] Name of the object property to use
|
|
* as a key or a function to extract the key.
|
|
* @param {Object} [scope] Value of this inside callback.
|
|
* @return {Object} The resulting map.
|
|
*/
|
|
toMap: function(array, getKey, scope) {
|
|
var map = {},
|
|
i = array.length;
|
|
|
|
if (!getKey) {
|
|
while (i--) {
|
|
map[array[i]] = i+1;
|
|
}
|
|
} else if (typeof getKey == 'string') {
|
|
while (i--) {
|
|
map[array[i][getKey]] = i+1;
|
|
}
|
|
} else {
|
|
while (i--) {
|
|
map[getKey.call(scope, array[i])] = i+1;
|
|
}
|
|
}
|
|
|
|
return map;
|
|
},
|
|
|
|
/**
|
|
* Creates a map (object) keyed by a property of elements of the given array. The values in
|
|
* the map are the array element. For example:
|
|
*
|
|
* var map = Ext.Array.toMap(['a','b','c']);
|
|
*
|
|
* // map = { a: 'a', b: 'b', c: 'c' };
|
|
*
|
|
* Or a key property can be specified:
|
|
*
|
|
* var map = Ext.Array.toMap([
|
|
* { name: 'a' },
|
|
* { name: 'b' },
|
|
* { name: 'c' }
|
|
* ], 'name');
|
|
*
|
|
* // map = { a: {name: 'a'}, b: {name: 'b'}, c: {name: 'c'} };
|
|
*
|
|
* Lastly, a key extractor can be provided:
|
|
*
|
|
* var map = Ext.Array.toMap([
|
|
* { name: 'a' },
|
|
* { name: 'b' },
|
|
* { name: 'c' }
|
|
* ], function (obj) { return obj.name.toUpperCase(); });
|
|
*
|
|
* // map = { A: {name: 'a'}, B: {name: 'b'}, C: {name: 'c'} };
|
|
*
|
|
* @param {Array} array The Array to create the map from.
|
|
* @param {String/Function} [getKey] Name of the object property to use
|
|
* as a key or a function to extract the key.
|
|
* @param {Object} [scope] Value of this inside callback.
|
|
* @return {Object} The resulting map.
|
|
*/
|
|
toValueMap: function(array, getKey, scope) {
|
|
var map = {},
|
|
i = array.length;
|
|
|
|
if (!getKey) {
|
|
while (i--) {
|
|
map[array[i]] = array[i];
|
|
}
|
|
} else if (typeof getKey == 'string') {
|
|
while (i--) {
|
|
map[array[i][getKey]] = array[i];
|
|
}
|
|
} else {
|
|
while (i--) {
|
|
map[getKey.call(scope, array[i])] = array[i];
|
|
}
|
|
}
|
|
|
|
return map;
|
|
},
|
|
|
|
|
|
/**
|
|
* Removes items from an array. This is functionally equivalent to the splice method
|
|
* of Array, but works around bugs in IE8's splice method and does not copy the
|
|
* removed elements in order to return them (because very often they are ignored).
|
|
*
|
|
* @param {Array} array The Array on which to replace.
|
|
* @param {Number} index The index in the array at which to operate.
|
|
* @param {Number} removeCount The number of items to remove at index.
|
|
* @return {Array} The array passed.
|
|
* @method
|
|
*/
|
|
erase: erase,
|
|
|
|
/**
|
|
* Inserts items in to an array.
|
|
*
|
|
* @param {Array} array The Array in which to insert.
|
|
* @param {Number} index The index in the array at which to operate.
|
|
* @param {Array} items The array of items to insert at index.
|
|
* @return {Array} The array passed.
|
|
*/
|
|
insert: function (array, index, items) {
|
|
return replace(array, index, 0, items);
|
|
},
|
|
|
|
/**
|
|
* Replaces items in an array. This is functionally equivalent to the splice method
|
|
* of Array, but works around bugs in IE8's splice method and is often more convenient
|
|
* to call because it accepts an array of items to insert rather than use a variadic
|
|
* argument list.
|
|
*
|
|
* @param {Array} array The Array on which to replace.
|
|
* @param {Number} index The index in the array at which to operate.
|
|
* @param {Number} removeCount The number of items to remove at index (can be 0).
|
|
* @param {Array} insert (optional) An array of items to insert at index.
|
|
* @return {Array} The array passed.
|
|
* @method
|
|
*/
|
|
replace: replace,
|
|
|
|
/**
|
|
* Replaces items in an array. This is equivalent to the splice method of Array, but
|
|
* works around bugs in IE8's splice method. The signature is exactly the same as the
|
|
* splice method except that the array is the first argument. All arguments following
|
|
* removeCount are inserted in the array at index.
|
|
*
|
|
* @param {Array} array The Array on which to replace.
|
|
* @param {Number} index The index in the array at which to operate.
|
|
* @param {Number} removeCount The number of items to remove at index (can be 0).
|
|
* @param {Object...} elements The elements to add to the array. If you don't specify
|
|
* any elements, splice simply removes elements from the array.
|
|
* @return {Array} An array containing the removed items.
|
|
* @method
|
|
*/
|
|
splice: splice,
|
|
|
|
/**
|
|
* Pushes new items onto the end of an Array.
|
|
*
|
|
* Passed parameters may be single items, or arrays of items. If an Array is found in the argument list, all its
|
|
* elements are pushed into the end of the target Array.
|
|
*
|
|
* @param {Array} target The Array onto which to push new items
|
|
* @param {Object...} elements The elements to add to the array. Each parameter may
|
|
* be an Array, in which case all the elements of that Array will be pushed into the end of the
|
|
* destination Array.
|
|
* @return {Array} An array containing all the new items push onto the end.
|
|
*
|
|
*/
|
|
push: function(array) {
|
|
var len = arguments.length,
|
|
i = 1,
|
|
newItem;
|
|
|
|
if (array === undefined) {
|
|
array = [];
|
|
} else if (!Ext.isArray(array)) {
|
|
array = [array];
|
|
}
|
|
for (; i < len; i++) {
|
|
newItem = arguments[i];
|
|
Array.prototype.push[Ext.isIterable(newItem) ? 'apply' : 'call'](array, newItem);
|
|
}
|
|
return array;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#each
|
|
*/
|
|
Ext.each = ExtArray.each;
|
|
|
|
/**
|
|
* @method
|
|
* @member Ext.Array
|
|
* @inheritdoc Ext.Array#merge
|
|
*/
|
|
ExtArray.union = ExtArray.merge;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#min}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#min} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#min
|
|
*/
|
|
Ext.min = ExtArray.min;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#max}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#max} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#max
|
|
*/
|
|
Ext.max = ExtArray.max;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#sum}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#sum} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#sum
|
|
*/
|
|
Ext.sum = ExtArray.sum;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#mean}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#mean} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#mean
|
|
*/
|
|
Ext.mean = ExtArray.mean;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#flatten}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#flatten} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#flatten
|
|
*/
|
|
Ext.flatten = ExtArray.flatten;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#clean}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#clean} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#clean
|
|
*/
|
|
Ext.clean = ExtArray.clean;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#unique}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#unique} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#unique
|
|
*/
|
|
Ext.unique = ExtArray.unique;
|
|
|
|
/**
|
|
* Old alias to {@link Ext.Array#pluck Ext.Array.pluck}
|
|
* @deprecated 4.0.0 Use {@link Ext.Array#pluck Ext.Array.pluck} instead
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#pluck
|
|
*/
|
|
Ext.pluck = ExtArray.pluck;
|
|
|
|
/**
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Array#toArray
|
|
*/
|
|
Ext.toArray = function() {
|
|
return ExtArray.toArray.apply(ExtArray, arguments);
|
|
};
|
|
}());
|
|
|
|
// @tag foundation,core
|
|
// @require Array.js
|
|
// @define Ext.Function
|
|
|
|
/**
|
|
* @class Ext.Function
|
|
*
|
|
* A collection of useful static methods to deal with function callbacks
|
|
* @singleton
|
|
* @alternateClassName Ext.util.Functions
|
|
*/
|
|
Ext.Function = {
|
|
|
|
/**
|
|
* A very commonly used method throughout the framework. It acts as a wrapper around another method
|
|
* which originally accepts 2 arguments for `name` and `value`.
|
|
* The wrapped function then allows "flexible" value setting of either:
|
|
*
|
|
* - `name` and `value` as 2 arguments
|
|
* - one single object argument with multiple key - value pairs
|
|
*
|
|
* For example:
|
|
*
|
|
* var setValue = Ext.Function.flexSetter(function(name, value) {
|
|
* this[name] = value;
|
|
* });
|
|
*
|
|
* // Afterwards
|
|
* // Setting a single name - value
|
|
* setValue('name1', 'value1');
|
|
*
|
|
* // Settings multiple name - value pairs
|
|
* setValue({
|
|
* name1: 'value1',
|
|
* name2: 'value2',
|
|
* name3: 'value3'
|
|
* });
|
|
*
|
|
* @param {Function} setter
|
|
* @returns {Function} flexSetter
|
|
*/
|
|
flexSetter: function(fn) {
|
|
return function(a, b) {
|
|
var k, i;
|
|
|
|
if (a === null) {
|
|
return this;
|
|
}
|
|
|
|
if (typeof a !== 'string') {
|
|
for (k in a) {
|
|
if (a.hasOwnProperty(k)) {
|
|
fn.call(this, k, a[k]);
|
|
}
|
|
}
|
|
|
|
if (Ext.enumerables) {
|
|
for (i = Ext.enumerables.length; i--;) {
|
|
k = Ext.enumerables[i];
|
|
if (a.hasOwnProperty(k)) {
|
|
fn.call(this, k, a[k]);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
fn.call(this, a, b);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Create a new function from the provided `fn`, change `this` to the provided scope, optionally
|
|
* overrides arguments for the call. (Defaults to the arguments passed by the caller)
|
|
*
|
|
* {@link Ext#bind Ext.bind} is alias for {@link Ext.Function#bind Ext.Function.bind}
|
|
*
|
|
* @param {Function} fn The function to delegate.
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed.
|
|
* **If omitted, defaults to the default global environment object (usually the browser window).**
|
|
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
|
|
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
|
|
* if a number the args are inserted at the specified position
|
|
* @return {Function} The new function
|
|
*/
|
|
bind: function(fn, scope, args, appendArgs) {
|
|
if (arguments.length === 2) {
|
|
return function() {
|
|
return fn.apply(scope, arguments);
|
|
};
|
|
}
|
|
|
|
var method = fn,
|
|
slice = Array.prototype.slice;
|
|
|
|
return function() {
|
|
var callArgs = args || arguments;
|
|
|
|
if (appendArgs === true) {
|
|
callArgs = slice.call(arguments, 0);
|
|
callArgs = callArgs.concat(args);
|
|
}
|
|
else if (typeof appendArgs == 'number') {
|
|
callArgs = slice.call(arguments, 0); // copy arguments first
|
|
Ext.Array.insert(callArgs, appendArgs, args);
|
|
}
|
|
|
|
return method.apply(scope || Ext.global, callArgs);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Create a new function from the provided `fn`, the arguments of which are pre-set to `args`.
|
|
* New arguments passed to the newly created callback when it's invoked are appended after the pre-set ones.
|
|
* This is especially useful when creating callbacks.
|
|
*
|
|
* For example:
|
|
*
|
|
* var originalFunction = function(){
|
|
* alert(Ext.Array.from(arguments).join(' '));
|
|
* };
|
|
*
|
|
* var callback = Ext.Function.pass(originalFunction, ['Hello', 'World']);
|
|
*
|
|
* callback(); // alerts 'Hello World'
|
|
* callback('by Me'); // alerts 'Hello World by Me'
|
|
*
|
|
* {@link Ext#pass Ext.pass} is alias for {@link Ext.Function#pass Ext.Function.pass}
|
|
*
|
|
* @param {Function} fn The original function
|
|
* @param {Array} args The arguments to pass to new callback
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed.
|
|
* @return {Function} The new callback function
|
|
*/
|
|
pass: function(fn, args, scope) {
|
|
if (!Ext.isArray(args)) {
|
|
if (Ext.isIterable(args)) {
|
|
args = Ext.Array.clone(args);
|
|
} else {
|
|
args = args !== undefined ? [args] : [];
|
|
}
|
|
}
|
|
|
|
return function() {
|
|
var fnArgs = [].concat(args);
|
|
fnArgs.push.apply(fnArgs, arguments);
|
|
return fn.apply(scope || this, fnArgs);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Create an alias to the provided method property with name `methodName` of `object`.
|
|
* Note that the execution scope will still be bound to the provided `object` itself.
|
|
*
|
|
* @param {Object/Function} object
|
|
* @param {String} methodName
|
|
* @return {Function} aliasFn
|
|
*/
|
|
alias: function(object, methodName) {
|
|
return function() {
|
|
return object[methodName].apply(object, arguments);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Create a "clone" of the provided method. The returned method will call the given
|
|
* method passing along all arguments and the "this" pointer and return its result.
|
|
*
|
|
* @param {Function} method
|
|
* @return {Function} cloneFn
|
|
*/
|
|
clone: function(method) {
|
|
return function() {
|
|
return method.apply(this, arguments);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Creates an interceptor function. The passed function is called before the original one. If it returns false,
|
|
* the original one is not called. The resulting function returns the results of the original function.
|
|
* The passed function is called with the parameters of the original function. Example usage:
|
|
*
|
|
* var sayHi = function(name){
|
|
* alert('Hi, ' + name);
|
|
* }
|
|
*
|
|
* sayHi('Fred'); // alerts "Hi, Fred"
|
|
*
|
|
* // create a new function that validates input without
|
|
* // directly modifying the original function:
|
|
* var sayHiToFriend = Ext.Function.createInterceptor(sayHi, function(name){
|
|
* return name == 'Brian';
|
|
* });
|
|
*
|
|
* sayHiToFriend('Fred'); // no alert
|
|
* sayHiToFriend('Brian'); // alerts "Hi, Brian"
|
|
*
|
|
* @param {Function} origFn The original function.
|
|
* @param {Function} newFn The function to call before the original
|
|
* @param {Object} [scope] The scope (`this` reference) in which the passed function is executed.
|
|
* **If omitted, defaults to the scope in which the original function is called or the browser window.**
|
|
* @param {Object} [returnValue=null] The value to return if the passed function return false.
|
|
* @return {Function} The new function
|
|
*/
|
|
createInterceptor: function(origFn, newFn, scope, returnValue) {
|
|
var method = origFn;
|
|
if (!Ext.isFunction(newFn)) {
|
|
return origFn;
|
|
} else {
|
|
returnValue = Ext.isDefined(returnValue) ? returnValue : null;
|
|
return function() {
|
|
var me = this,
|
|
args = arguments;
|
|
|
|
newFn.target = me;
|
|
newFn.method = origFn;
|
|
return (newFn.apply(scope || me || Ext.global, args) !== false) ? origFn.apply(me || Ext.global, args) : returnValue;
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates a delegate (callback) which, when called, executes after a specific delay.
|
|
*
|
|
* @param {Function} fn The function which will be called on a delay when the returned function is called.
|
|
* Optionally, a replacement (or additional) argument list may be specified.
|
|
* @param {Number} delay The number of milliseconds to defer execution by whenever called.
|
|
* @param {Object} scope (optional) The scope (`this` reference) used by the function at execution time.
|
|
* @param {Array} args (optional) Override arguments for the call. (Defaults to the arguments passed by the caller)
|
|
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
|
|
* if a number the args are inserted at the specified position.
|
|
* @return {Function} A function which, when called, executes the original function after the specified delay.
|
|
*/
|
|
createDelayed: function(fn, delay, scope, args, appendArgs) {
|
|
if (scope || args) {
|
|
fn = Ext.Function.bind(fn, scope, args, appendArgs);
|
|
}
|
|
|
|
return function() {
|
|
var me = this,
|
|
args = Array.prototype.slice.call(arguments);
|
|
|
|
setTimeout(function() {
|
|
fn.apply(me, args);
|
|
}, delay);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:
|
|
*
|
|
* var sayHi = function(name){
|
|
* alert('Hi, ' + name);
|
|
* }
|
|
*
|
|
* // executes immediately:
|
|
* sayHi('Fred');
|
|
*
|
|
* // executes after 2 seconds:
|
|
* Ext.Function.defer(sayHi, 2000, this, ['Fred']);
|
|
*
|
|
* // this syntax is sometimes useful for deferring
|
|
* // execution of an anonymous function:
|
|
* Ext.Function.defer(function(){
|
|
* alert('Anonymous');
|
|
* }, 100);
|
|
*
|
|
* {@link Ext#defer Ext.defer} is alias for {@link Ext.Function#defer Ext.Function.defer}
|
|
*
|
|
* @param {Function} fn The function to defer.
|
|
* @param {Number} millis The number of milliseconds for the setTimeout call
|
|
* (if less than or equal to 0 the function is executed immediately)
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed.
|
|
* **If omitted, defaults to the browser window.**
|
|
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
|
|
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
|
|
* if a number the args are inserted at the specified position
|
|
* @return {Number} The timeout id that can be used with clearTimeout
|
|
*/
|
|
defer: function(fn, millis, scope, args, appendArgs) {
|
|
fn = Ext.Function.bind(fn, scope, args, appendArgs);
|
|
if (millis > 0) {
|
|
return setTimeout(Ext.supports.TimeoutActualLateness ? function () {
|
|
fn();
|
|
} : fn, millis);
|
|
}
|
|
fn();
|
|
return 0;
|
|
},
|
|
|
|
/**
|
|
* Create a combined function call sequence of the original function + the passed function.
|
|
* The resulting function returns the results of the original function.
|
|
* The passed function is called with the parameters of the original function. Example usage:
|
|
*
|
|
* var sayHi = function(name){
|
|
* alert('Hi, ' + name);
|
|
* }
|
|
*
|
|
* sayHi('Fred'); // alerts "Hi, Fred"
|
|
*
|
|
* var sayGoodbye = Ext.Function.createSequence(sayHi, function(name){
|
|
* alert('Bye, ' + name);
|
|
* });
|
|
*
|
|
* sayGoodbye('Fred'); // both alerts show
|
|
*
|
|
* @param {Function} originalFn The original function.
|
|
* @param {Function} newFn The function to sequence
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which the passed function is executed.
|
|
* If omitted, defaults to the scope in which the original function is called or the default global environment object (usually the browser window).
|
|
* @return {Function} The new function
|
|
*/
|
|
createSequence: function(originalFn, newFn, scope) {
|
|
if (!newFn) {
|
|
return originalFn;
|
|
}
|
|
else {
|
|
return function() {
|
|
var result = originalFn.apply(this, arguments);
|
|
newFn.apply(scope || this, arguments);
|
|
return result;
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates a delegate function, optionally with a bound scope which, when called, buffers
|
|
* the execution of the passed function for the configured number of milliseconds.
|
|
* If called again within that period, the impending invocation will be canceled, and the
|
|
* timeout period will begin again.
|
|
*
|
|
* @param {Function} fn The function to invoke on a buffered timer.
|
|
* @param {Number} buffer The number of milliseconds by which to buffer the invocation of the
|
|
* function.
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which
|
|
* the passed function is executed. If omitted, defaults to the scope specified by the caller.
|
|
* @param {Array} args (optional) Override arguments for the call. Defaults to the arguments
|
|
* passed by the caller.
|
|
* @return {Function} A function which invokes the passed function after buffering for the specified time.
|
|
*/
|
|
createBuffered: function(fn, buffer, scope, args) {
|
|
var timerId;
|
|
|
|
return function() {
|
|
var callArgs = args || Array.prototype.slice.call(arguments, 0),
|
|
me = scope || this;
|
|
|
|
if (timerId) {
|
|
clearTimeout(timerId);
|
|
}
|
|
|
|
timerId = setTimeout(function(){
|
|
fn.apply(me, callArgs);
|
|
}, buffer);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Creates a throttled version of the passed function which, when called repeatedly and
|
|
* rapidly, invokes the passed function only after a certain interval has elapsed since the
|
|
* previous invocation.
|
|
*
|
|
* This is useful for wrapping functions which may be called repeatedly, such as
|
|
* a handler of a mouse move event when the processing is expensive.
|
|
*
|
|
* @param {Function} fn The function to execute at a regular time interval.
|
|
* @param {Number} interval The interval **in milliseconds** on which the passed function is executed.
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which
|
|
* the passed function is executed. If omitted, defaults to the scope specified by the caller.
|
|
* @returns {Function} A function which invokes the passed function at the specified interval.
|
|
*/
|
|
createThrottled: function(fn, interval, scope) {
|
|
var lastCallTime, elapsed, lastArgs, timer, execute = function() {
|
|
fn.apply(scope || this, lastArgs);
|
|
lastCallTime = Ext.Date.now();
|
|
};
|
|
|
|
return function() {
|
|
elapsed = Ext.Date.now() - lastCallTime;
|
|
lastArgs = arguments;
|
|
|
|
clearTimeout(timer);
|
|
if (!lastCallTime || (elapsed >= interval)) {
|
|
execute();
|
|
} else {
|
|
timer = setTimeout(execute, interval - elapsed);
|
|
}
|
|
};
|
|
},
|
|
|
|
|
|
/**
|
|
* Adds behavior to an existing method that is executed before the
|
|
* original behavior of the function. For example:
|
|
*
|
|
* var soup = {
|
|
* contents: [],
|
|
* add: function(ingredient) {
|
|
* this.contents.push(ingredient);
|
|
* }
|
|
* };
|
|
* Ext.Function.interceptBefore(soup, "add", function(ingredient){
|
|
* if (!this.contents.length && ingredient !== "water") {
|
|
* // Always add water to start with
|
|
* this.contents.push("water");
|
|
* }
|
|
* });
|
|
* soup.add("onions");
|
|
* soup.add("salt");
|
|
* soup.contents; // will contain: water, onions, salt
|
|
*
|
|
* @param {Object} object The target object
|
|
* @param {String} methodName Name of the method to override
|
|
* @param {Function} fn Function with the new behavior. It will
|
|
* be called with the same arguments as the original method. The
|
|
* return value of this function will be the return value of the
|
|
* new method.
|
|
* @param {Object} [scope] The scope to execute the interceptor function. Defaults to the object.
|
|
* @return {Function} The new function just created.
|
|
*/
|
|
interceptBefore: function(object, methodName, fn, scope) {
|
|
var method = object[methodName] || Ext.emptyFn;
|
|
|
|
return (object[methodName] = function() {
|
|
var ret = fn.apply(scope || this, arguments);
|
|
method.apply(this, arguments);
|
|
|
|
return ret;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Adds behavior to an existing method that is executed after the
|
|
* original behavior of the function. For example:
|
|
*
|
|
* var soup = {
|
|
* contents: [],
|
|
* add: function(ingredient) {
|
|
* this.contents.push(ingredient);
|
|
* }
|
|
* };
|
|
* Ext.Function.interceptAfter(soup, "add", function(ingredient){
|
|
* // Always add a bit of extra salt
|
|
* this.contents.push("salt");
|
|
* });
|
|
* soup.add("water");
|
|
* soup.add("onions");
|
|
* soup.contents; // will contain: water, salt, onions, salt
|
|
*
|
|
* @param {Object} object The target object
|
|
* @param {String} methodName Name of the method to override
|
|
* @param {Function} fn Function with the new behavior. It will
|
|
* be called with the same arguments as the original method. The
|
|
* return value of this function will be the return value of the
|
|
* new method.
|
|
* @param {Object} [scope] The scope to execute the interceptor function. Defaults to the object.
|
|
* @return {Function} The new function just created.
|
|
*/
|
|
interceptAfter: function(object, methodName, fn, scope) {
|
|
var method = object[methodName] || Ext.emptyFn;
|
|
|
|
return (object[methodName] = function() {
|
|
method.apply(this, arguments);
|
|
return fn.apply(scope || this, arguments);
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Function#defer
|
|
*/
|
|
Ext.defer = Ext.Function.alias(Ext.Function, 'defer');
|
|
|
|
/**
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Function#pass
|
|
*/
|
|
Ext.pass = Ext.Function.alias(Ext.Function, 'pass');
|
|
|
|
/**
|
|
* @method
|
|
* @member Ext
|
|
* @inheritdoc Ext.Function#bind
|
|
*/
|
|
Ext.bind = Ext.Function.alias(Ext.Function, 'bind');
|
|
|
|
// @tag foundation,core
|
|
// @require Function.js
|
|
// @define Ext.Object
|
|
|
|
/**
|
|
* @class Ext.Object
|
|
*
|
|
* A collection of useful static methods to deal with objects.
|
|
*
|
|
* @singleton
|
|
*/
|
|
|
|
(function() {
|
|
|
|
// The "constructor" for chain:
|
|
var TemplateClass = function(){},
|
|
ExtObject = Ext.Object = {
|
|
|
|
/**
|
|
* Returns a new object with the given object as the prototype chain. This method is
|
|
* designed to mimic the ECMA standard `Object.create` method and is assigned to that
|
|
* function when it is available.
|
|
*
|
|
* **NOTE** This method does not support the property definitions capability of the
|
|
* `Object.create` method. Only the first argument is supported.
|
|
*
|
|
* @param {Object} object The prototype chain for the new object.
|
|
*/
|
|
chain: Object.create || function (object) {
|
|
TemplateClass.prototype = object;
|
|
var result = new TemplateClass();
|
|
TemplateClass.prototype = null;
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Converts a `name` - `value` pair to an array of objects with support for nested structures. Useful to construct
|
|
* query strings. For example:
|
|
*
|
|
* var objects = Ext.Object.toQueryObjects('hobbies', ['reading', 'cooking', 'swimming']);
|
|
*
|
|
* // objects then equals:
|
|
* [
|
|
* { name: 'hobbies', value: 'reading' },
|
|
* { name: 'hobbies', value: 'cooking' },
|
|
* { name: 'hobbies', value: 'swimming' },
|
|
* ];
|
|
*
|
|
* var objects = Ext.Object.toQueryObjects('dateOfBirth', {
|
|
* day: 3,
|
|
* month: 8,
|
|
* year: 1987,
|
|
* extra: {
|
|
* hour: 4
|
|
* minute: 30
|
|
* }
|
|
* }, true); // Recursive
|
|
*
|
|
* // objects then equals:
|
|
* [
|
|
* { name: 'dateOfBirth[day]', value: 3 },
|
|
* { name: 'dateOfBirth[month]', value: 8 },
|
|
* { name: 'dateOfBirth[year]', value: 1987 },
|
|
* { name: 'dateOfBirth[extra][hour]', value: 4 },
|
|
* { name: 'dateOfBirth[extra][minute]', value: 30 },
|
|
* ];
|
|
*
|
|
* @param {String} name
|
|
* @param {Object/Array} value
|
|
* @param {Boolean} [recursive=false] True to traverse object recursively
|
|
* @return {Array}
|
|
*/
|
|
toQueryObjects: function(name, value, recursive) {
|
|
var self = ExtObject.toQueryObjects,
|
|
objects = [],
|
|
i, ln;
|
|
|
|
if (Ext.isArray(value)) {
|
|
for (i = 0, ln = value.length; i < ln; i++) {
|
|
if (recursive) {
|
|
objects = objects.concat(self(name + '[' + i + ']', value[i], true));
|
|
}
|
|
else {
|
|
objects.push({
|
|
name: name,
|
|
value: value[i]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
else if (Ext.isObject(value)) {
|
|
for (i in value) {
|
|
if (value.hasOwnProperty(i)) {
|
|
if (recursive) {
|
|
objects = objects.concat(self(name + '[' + i + ']', value[i], true));
|
|
}
|
|
else {
|
|
objects.push({
|
|
name: name,
|
|
value: value[i]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
objects.push({
|
|
name: name,
|
|
value: value
|
|
});
|
|
}
|
|
|
|
return objects;
|
|
},
|
|
|
|
/**
|
|
* Takes an object and converts it to an encoded query string.
|
|
*
|
|
* Non-recursive:
|
|
*
|
|
* Ext.Object.toQueryString({foo: 1, bar: 2}); // returns "foo=1&bar=2"
|
|
* Ext.Object.toQueryString({foo: null, bar: 2}); // returns "foo=&bar=2"
|
|
* Ext.Object.toQueryString({'some price': '$300'}); // returns "some%20price=%24300"
|
|
* Ext.Object.toQueryString({date: new Date(2011, 0, 1)}); // returns "date=%222011-01-01T00%3A00%3A00%22"
|
|
* Ext.Object.toQueryString({colors: ['red', 'green', 'blue']}); // returns "colors=red&colors=green&colors=blue"
|
|
*
|
|
* Recursive:
|
|
*
|
|
* Ext.Object.toQueryString({
|
|
* username: 'Jacky',
|
|
* dateOfBirth: {
|
|
* day: 1,
|
|
* month: 2,
|
|
* year: 1911
|
|
* },
|
|
* hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
|
|
* }, true); // returns the following string (broken down and url-decoded for ease of reading purpose):
|
|
* // username=Jacky
|
|
* // &dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911
|
|
* // &hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&hobbies[3][0]=nested&hobbies[3][1]=stuff
|
|
*
|
|
* @param {Object} object The object to encode
|
|
* @param {Boolean} [recursive=false] Whether or not to interpret the object in recursive format.
|
|
* (PHP / Ruby on Rails servers and similar).
|
|
* @return {String} queryString
|
|
*/
|
|
toQueryString: function(object, recursive) {
|
|
var paramObjects = [],
|
|
params = [],
|
|
i, j, ln, paramObject, value;
|
|
|
|
for (i in object) {
|
|
if (object.hasOwnProperty(i)) {
|
|
paramObjects = paramObjects.concat(ExtObject.toQueryObjects(i, object[i], recursive));
|
|
}
|
|
}
|
|
|
|
for (j = 0, ln = paramObjects.length; j < ln; j++) {
|
|
paramObject = paramObjects[j];
|
|
value = paramObject.value;
|
|
|
|
if (Ext.isEmpty(value)) {
|
|
value = '';
|
|
} else if (Ext.isDate(value)) {
|
|
value = Ext.Date.toString(value);
|
|
}
|
|
|
|
params.push(encodeURIComponent(paramObject.name) + '=' + encodeURIComponent(String(value)));
|
|
}
|
|
|
|
return params.join('&');
|
|
},
|
|
|
|
/**
|
|
* Converts a query string back into an object.
|
|
*
|
|
* Non-recursive:
|
|
*
|
|
* Ext.Object.fromQueryString("foo=1&bar=2"); // returns {foo: '1', bar: '2'}
|
|
* Ext.Object.fromQueryString("foo=&bar=2"); // returns {foo: null, bar: '2'}
|
|
* Ext.Object.fromQueryString("some%20price=%24300"); // returns {'some price': '$300'}
|
|
* Ext.Object.fromQueryString("colors=red&colors=green&colors=blue"); // returns {colors: ['red', 'green', 'blue']}
|
|
*
|
|
* Recursive:
|
|
*
|
|
* Ext.Object.fromQueryString(
|
|
* "username=Jacky&"+
|
|
* "dateOfBirth[day]=1&dateOfBirth[month]=2&dateOfBirth[year]=1911&"+
|
|
* "hobbies[0]=coding&hobbies[1]=eating&hobbies[2]=sleeping&"+
|
|
* "hobbies[3][0]=nested&hobbies[3][1]=stuff", true);
|
|
*
|
|
* // returns
|
|
* {
|
|
* username: 'Jacky',
|
|
* dateOfBirth: {
|
|
* day: '1',
|
|
* month: '2',
|
|
* year: '1911'
|
|
* },
|
|
* hobbies: ['coding', 'eating', 'sleeping', ['nested', 'stuff']]
|
|
* }
|
|
*
|
|
* @param {String} queryString The query string to decode
|
|
* @param {Boolean} [recursive=false] Whether or not to recursively decode the string. This format is supported by
|
|
* PHP / Ruby on Rails servers and similar.
|
|
* @return {Object}
|
|
*/
|
|
fromQueryString: function(queryString, recursive) {
|
|
var parts = queryString.replace(/^\?/, '').split('&'),
|
|
object = {},
|
|
temp, components, name, value, i, ln,
|
|
part, j, subLn, matchedKeys, matchedName,
|
|
keys, key, nextKey;
|
|
|
|
for (i = 0, ln = parts.length; i < ln; i++) {
|
|
part = parts[i];
|
|
|
|
if (part.length > 0) {
|
|
components = part.split('=');
|
|
name = decodeURIComponent(components[0]);
|
|
value = (components[1] !== undefined) ? decodeURIComponent(components[1]) : '';
|
|
|
|
if (!recursive) {
|
|
if (object.hasOwnProperty(name)) {
|
|
if (!Ext.isArray(object[name])) {
|
|
object[name] = [object[name]];
|
|
}
|
|
|
|
object[name].push(value);
|
|
}
|
|
else {
|
|
object[name] = value;
|
|
}
|
|
}
|
|
else {
|
|
matchedKeys = name.match(/(\[):?([^\]]*)\]/g);
|
|
matchedName = name.match(/^([^\[]+)/);
|
|
|
|
|
|
name = matchedName[0];
|
|
keys = [];
|
|
|
|
if (matchedKeys === null) {
|
|
object[name] = value;
|
|
continue;
|
|
}
|
|
|
|
for (j = 0, subLn = matchedKeys.length; j < subLn; j++) {
|
|
key = matchedKeys[j];
|
|
key = (key.length === 2) ? '' : key.substring(1, key.length - 1);
|
|
keys.push(key);
|
|
}
|
|
|
|
keys.unshift(name);
|
|
|
|
temp = object;
|
|
|
|
for (j = 0, subLn = keys.length; j < subLn; j++) {
|
|
key = keys[j];
|
|
|
|
if (j === subLn - 1) {
|
|
if (Ext.isArray(temp) && key === '') {
|
|
temp.push(value);
|
|
}
|
|
else {
|
|
temp[key] = value;
|
|
}
|
|
}
|
|
else {
|
|
if (temp[key] === undefined || typeof temp[key] === 'string') {
|
|
nextKey = keys[j+1];
|
|
|
|
temp[key] = (Ext.isNumeric(nextKey) || nextKey === '') ? [] : {};
|
|
}
|
|
|
|
temp = temp[key];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return object;
|
|
},
|
|
|
|
/**
|
|
* Iterates through an object and invokes the given callback function for each iteration.
|
|
* The iteration can be stopped by returning `false` in the callback function. For example:
|
|
*
|
|
* var person = {
|
|
* name: 'Jacky'
|
|
* hairColor: 'black'
|
|
* loves: ['food', 'sleeping', 'wife']
|
|
* };
|
|
*
|
|
* Ext.Object.each(person, function(key, value, myself) {
|
|
* console.log(key + ":" + value);
|
|
*
|
|
* if (key === 'hairColor') {
|
|
* return false; // stop the iteration
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Object} object The object to iterate
|
|
* @param {Function} fn The callback function.
|
|
* @param {String} fn.key
|
|
* @param {Object} fn.value
|
|
* @param {Object} fn.object The object itself
|
|
* @param {Object} [scope] The execution scope (`this`) of the callback function
|
|
*/
|
|
each: function(object, fn, scope) {
|
|
for (var property in object) {
|
|
if (object.hasOwnProperty(property)) {
|
|
if (fn.call(scope || object, property, object[property], object) === false) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Merges any number of objects recursively without referencing them or their children.
|
|
*
|
|
* var extjs = {
|
|
* companyName: 'Ext JS',
|
|
* products: ['Ext JS', 'Ext GWT', 'Ext Designer'],
|
|
* isSuperCool: true,
|
|
* office: {
|
|
* size: 2000,
|
|
* location: 'Palo Alto',
|
|
* isFun: true
|
|
* }
|
|
* };
|
|
*
|
|
* var newStuff = {
|
|
* companyName: 'Sencha Inc.',
|
|
* products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],
|
|
* office: {
|
|
* size: 40000,
|
|
* location: 'Redwood City'
|
|
* }
|
|
* };
|
|
*
|
|
* var sencha = Ext.Object.merge(extjs, newStuff);
|
|
*
|
|
* // extjs and sencha then equals to
|
|
* {
|
|
* companyName: 'Sencha Inc.',
|
|
* products: ['Ext JS', 'Ext GWT', 'Ext Designer', 'Sencha Touch', 'Sencha Animator'],
|
|
* isSuperCool: true,
|
|
* office: {
|
|
* size: 40000,
|
|
* location: 'Redwood City',
|
|
* isFun: true
|
|
* }
|
|
* }
|
|
*
|
|
* @param {Object} destination The object into which all subsequent objects are merged.
|
|
* @param {Object...} object Any number of objects to merge into the destination.
|
|
* @return {Object} merged The destination object with all passed objects merged in.
|
|
*/
|
|
merge: function(destination) {
|
|
var i = 1,
|
|
ln = arguments.length,
|
|
mergeFn = ExtObject.merge,
|
|
cloneFn = Ext.clone,
|
|
object, key, value, sourceKey;
|
|
|
|
for (; i < ln; i++) {
|
|
object = arguments[i];
|
|
|
|
for (key in object) {
|
|
value = object[key];
|
|
if (value && value.constructor === Object) {
|
|
sourceKey = destination[key];
|
|
if (sourceKey && sourceKey.constructor === Object) {
|
|
mergeFn(sourceKey, value);
|
|
}
|
|
else {
|
|
destination[key] = cloneFn(value);
|
|
}
|
|
}
|
|
else {
|
|
destination[key] = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
return destination;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param destination
|
|
*/
|
|
mergeIf: function(destination) {
|
|
var i = 1,
|
|
ln = arguments.length,
|
|
cloneFn = Ext.clone,
|
|
object, key, value;
|
|
|
|
for (; i < ln; i++) {
|
|
object = arguments[i];
|
|
|
|
for (key in object) {
|
|
if (!(key in destination)) {
|
|
value = object[key];
|
|
|
|
if (value && value.constructor === Object) {
|
|
destination[key] = cloneFn(value);
|
|
}
|
|
else {
|
|
destination[key] = value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return destination;
|
|
},
|
|
|
|
/**
|
|
* Returns the first matching key corresponding to the given value.
|
|
* If no matching value is found, null is returned.
|
|
*
|
|
* var person = {
|
|
* name: 'Jacky',
|
|
* loves: 'food'
|
|
* };
|
|
*
|
|
* alert(Ext.Object.getKey(person, 'food')); // alerts 'loves'
|
|
*
|
|
* @param {Object} object
|
|
* @param {Object} value The value to find
|
|
*/
|
|
getKey: function(object, value) {
|
|
for (var property in object) {
|
|
if (object.hasOwnProperty(property) && object[property] === value) {
|
|
return property;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Gets all values of the given object as an array.
|
|
*
|
|
* var values = Ext.Object.getValues({
|
|
* name: 'Jacky',
|
|
* loves: 'food'
|
|
* }); // ['Jacky', 'food']
|
|
*
|
|
* @param {Object} object
|
|
* @return {Array} An array of values from the object
|
|
*/
|
|
getValues: function(object) {
|
|
var values = [],
|
|
property;
|
|
|
|
for (property in object) {
|
|
if (object.hasOwnProperty(property)) {
|
|
values.push(object[property]);
|
|
}
|
|
}
|
|
|
|
return values;
|
|
},
|
|
|
|
/**
|
|
* Gets all keys of the given object as an array.
|
|
*
|
|
* var values = Ext.Object.getKeys({
|
|
* name: 'Jacky',
|
|
* loves: 'food'
|
|
* }); // ['name', 'loves']
|
|
*
|
|
* @param {Object} object
|
|
* @return {String[]} An array of keys from the object
|
|
* @method
|
|
*/
|
|
getKeys: (typeof Object.keys == 'function')
|
|
? function(object){
|
|
if (!object) {
|
|
return [];
|
|
}
|
|
return Object.keys(object);
|
|
}
|
|
: function(object) {
|
|
var keys = [],
|
|
property;
|
|
|
|
for (property in object) {
|
|
if (object.hasOwnProperty(property)) {
|
|
keys.push(property);
|
|
}
|
|
}
|
|
|
|
return keys;
|
|
},
|
|
|
|
/**
|
|
* Gets the total number of this object's own properties
|
|
*
|
|
* var size = Ext.Object.getSize({
|
|
* name: 'Jacky',
|
|
* loves: 'food'
|
|
* }); // size equals 2
|
|
*
|
|
* @param {Object} object
|
|
* @return {Number} size
|
|
*/
|
|
getSize: function(object) {
|
|
var size = 0,
|
|
property;
|
|
|
|
for (property in object) {
|
|
if (object.hasOwnProperty(property)) {
|
|
size++;
|
|
}
|
|
}
|
|
|
|
return size;
|
|
},
|
|
|
|
/**
|
|
* Checks if there are any properties on this object.
|
|
* @param {Object} object
|
|
* @return {Boolean} `true` if there no properties on the object.
|
|
*/
|
|
isEmpty: function(object){
|
|
for (var key in object) {
|
|
if (object.hasOwnProperty(key)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Shallow compares the contents of 2 objects using strict equality. Objects are
|
|
* considered equal if they both have the same set of properties and the
|
|
* value for those properties equals the other in the corresponding object.
|
|
*
|
|
* // Returns true
|
|
* Ext.Object.equals({
|
|
* foo: 1,
|
|
* bar: 2
|
|
* }, {
|
|
* foo: 1,
|
|
* bar: 2
|
|
* });
|
|
*
|
|
* @param {Object} object1
|
|
* @param {Object} object2
|
|
* @return {Boolean} `true` if the objects are equal.
|
|
*/
|
|
equals: (function() {
|
|
var check = function(o1, o2) {
|
|
var key;
|
|
|
|
for (key in o1) {
|
|
if (o1.hasOwnProperty(key)) {
|
|
if (o1[key] !== o2[key]) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
|
|
return function(object1, object2) {
|
|
|
|
// Short circuit if the same object is passed twice
|
|
if (object1 === object2) {
|
|
return true;
|
|
} if (object1 && object2) {
|
|
// Do the second check because we could have extra keys in
|
|
// object2 that don't exist in object1.
|
|
return check(object1, object2) && check(object2, object1);
|
|
} else if (!object1 && !object2) {
|
|
return object1 === object2;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
})(),
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
classify: function(object) {
|
|
var prototype = object,
|
|
objectProperties = [],
|
|
propertyClassesMap = {},
|
|
objectClass = function() {
|
|
var i = 0,
|
|
ln = objectProperties.length,
|
|
property;
|
|
|
|
for (; i < ln; i++) {
|
|
property = objectProperties[i];
|
|
this[property] = new propertyClassesMap[property]();
|
|
}
|
|
},
|
|
key, value;
|
|
|
|
for (key in object) {
|
|
if (object.hasOwnProperty(key)) {
|
|
value = object[key];
|
|
|
|
if (value && value.constructor === Object) {
|
|
objectProperties.push(key);
|
|
propertyClassesMap[key] = ExtObject.classify(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
objectClass.prototype = prototype;
|
|
|
|
return objectClass;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* A convenient alias method for {@link Ext.Object#merge}.
|
|
*
|
|
* @member Ext
|
|
* @method merge
|
|
* @inheritdoc Ext.Object#merge
|
|
*/
|
|
Ext.merge = Ext.Object.merge;
|
|
|
|
/**
|
|
* @private
|
|
* @member Ext
|
|
*/
|
|
Ext.mergeIf = Ext.Object.mergeIf;
|
|
|
|
/**
|
|
*
|
|
* @member Ext
|
|
* @method urlEncode
|
|
* @inheritdoc Ext.Object#toQueryString
|
|
* @deprecated 4.0.0 Use {@link Ext.Object#toQueryString} instead
|
|
*/
|
|
Ext.urlEncode = function() {
|
|
var args = Ext.Array.from(arguments),
|
|
prefix = '';
|
|
|
|
// Support for the old `pre` argument
|
|
if ((typeof args[1] === 'string')) {
|
|
prefix = args[1] + '&';
|
|
args[1] = false;
|
|
}
|
|
|
|
return prefix + ExtObject.toQueryString.apply(ExtObject, args);
|
|
};
|
|
|
|
/**
|
|
* Alias for {@link Ext.Object#fromQueryString}.
|
|
*
|
|
* @member Ext
|
|
* @method urlDecode
|
|
* @inheritdoc Ext.Object#fromQueryString
|
|
* @deprecated 4.0.0 Use {@link Ext.Object#fromQueryString} instead
|
|
*/
|
|
Ext.urlDecode = function() {
|
|
return ExtObject.fromQueryString.apply(ExtObject, arguments);
|
|
};
|
|
|
|
}());
|
|
|
|
// @tag foundation,core
|
|
// @require Object.js
|
|
// @define Ext.Date
|
|
|
|
/**
|
|
* @class Ext.Date
|
|
* A set of useful static methods to deal with date
|
|
* Note that if Ext.Date is required and loaded, it will copy all methods / properties to
|
|
* this object for convenience
|
|
*
|
|
* The date parsing and formatting syntax contains a subset of
|
|
* [PHP's `date()` function](http://www.php.net/date), and the formats that are
|
|
* supported will provide results equivalent to their PHP versions.
|
|
*
|
|
* The following is a list of all currently supported formats:
|
|
* <pre class="">
|
|
Format Description Example returned values
|
|
------ ----------------------------------------------------------------------- -----------------------
|
|
d Day of the month, 2 digits with leading zeros 01 to 31
|
|
D A short textual representation of the day of the week Mon to Sun
|
|
j Day of the month without leading zeros 1 to 31
|
|
l A full textual representation of the day of the week Sunday to Saturday
|
|
N ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday)
|
|
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
|
|
w Numeric representation of the day of the week 0 (for Sunday) to 6 (for Saturday)
|
|
z The day of the year (starting from 0) 0 to 364 (365 in leap years)
|
|
W ISO-8601 week number of year, weeks starting on Monday 01 to 53
|
|
F A full textual representation of a month, such as January or March January to December
|
|
m Numeric representation of a month, with leading zeros 01 to 12
|
|
M A short textual representation of a month Jan to Dec
|
|
n Numeric representation of a month, without leading zeros 1 to 12
|
|
t Number of days in the given month 28 to 31
|
|
L Whether it's a leap year 1 if it is a leap year, 0 otherwise.
|
|
o ISO-8601 year number (identical to (Y), but if the ISO week number (W) Examples: 1998 or 2004
|
|
belongs to the previous or next year, that year is used instead)
|
|
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
|
|
y A two digit representation of a year Examples: 99 or 03
|
|
a Lowercase Ante meridiem and Post meridiem am or pm
|
|
A Uppercase Ante meridiem and Post meridiem AM or PM
|
|
g 12-hour format of an hour without leading zeros 1 to 12
|
|
G 24-hour format of an hour without leading zeros 0 to 23
|
|
h 12-hour format of an hour with leading zeros 01 to 12
|
|
H 24-hour format of an hour with leading zeros 00 to 23
|
|
i Minutes, with leading zeros 00 to 59
|
|
s Seconds, with leading zeros 00 to 59
|
|
u Decimal fraction of a second Examples:
|
|
(minimum 1 digit, arbitrary number of digits allowed) 001 (i.e. 0.001s) or
|
|
100 (i.e. 0.100s) or
|
|
999 (i.e. 0.999s) or
|
|
999876543210 (i.e. 0.999876543210s)
|
|
O Difference to Greenwich time (GMT) in hours and minutes Example: +1030
|
|
P Difference to Greenwich time (GMT) with colon between hours and minutes Example: -08:00
|
|
T Timezone abbreviation of the machine running the code Examples: EST, MDT, PDT ...
|
|
Z Timezone offset in seconds (negative if west of UTC, positive if east) -43200 to 50400
|
|
c ISO 8601 date
|
|
Notes: Examples:
|
|
1) If unspecified, the month / day defaults to the current month / day, 1991 or
|
|
the time defaults to midnight, while the timezone defaults to the 1992-10 or
|
|
browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
|
|
and minutes. The "T" delimiter, seconds, milliseconds and timezone 1994-08-19T16:20+01:00 or
|
|
are optional. 1995-07-18T17:21:28-02:00 or
|
|
2) The decimal fraction of a second, if specified, must contain at 1996-06-17T18:22:29.98765+03:00 or
|
|
least 1 digit (there is no limit to the maximum number 1997-05-16T19:23:30,12345-0400 or
|
|
of digits allowed), and may be delimited by either a '.' or a ',' 1998-04-15T20:24:31.2468Z or
|
|
Refer to the examples on the right for the various levels of 1999-03-14T20:24:32Z or
|
|
date-time granularity which are supported, or see 2000-02-13T21:25:33
|
|
http://www.w3.org/TR/NOTE-datetime for more info. 2001-01-12 22:26:34
|
|
U Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) 1193432466 or -2138434463
|
|
MS Microsoft AJAX serialized dates \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
|
|
\/Date(1238606590509+0800)\/
|
|
time A javascript millisecond timestamp 1350024476440
|
|
timestamp A UNIX timestamp (same as U) 1350024866
|
|
</pre>
|
|
*
|
|
* Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
|
|
*
|
|
* // Sample date:
|
|
* // 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
|
|
*
|
|
* var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
|
|
* console.log(Ext.Date.format(dt, 'Y-m-d')); // 2007-01-10
|
|
* console.log(Ext.Date.format(dt, 'F j, Y, g:i a')); // January 10, 2007, 3:05 pm
|
|
* console.log(Ext.Date.format(dt, 'l, \\t\\he jS \\of F Y h:i:s A')); // Wednesday, the 10th of January 2007 03:05:01 PM
|
|
*
|
|
* Here are some standard date/time patterns that you might find helpful. They
|
|
* are not part of the source of Ext.Date, but to use them you can simply copy this
|
|
* block of code into any script that is included after Ext.Date and they will also become
|
|
* globally available on the Date object. Feel free to add or remove patterns as needed in your code.
|
|
*
|
|
* Ext.Date.patterns = {
|
|
* ISO8601Long:"Y-m-d H:i:s",
|
|
* ISO8601Short:"Y-m-d",
|
|
* ShortDate: "n/j/Y",
|
|
* LongDate: "l, F d, Y",
|
|
* FullDateTime: "l, F d, Y g:i:s A",
|
|
* MonthDay: "F d",
|
|
* ShortTime: "g:i A",
|
|
* LongTime: "g:i:s A",
|
|
* SortableDateTime: "Y-m-d\\TH:i:s",
|
|
* UniversalSortableDateTime: "Y-m-d H:i:sO",
|
|
* YearMonth: "F, Y"
|
|
* };
|
|
*
|
|
* Example usage:
|
|
*
|
|
* var dt = new Date();
|
|
* console.log(Ext.Date.format(dt, Ext.Date.patterns.ShortDate));
|
|
*
|
|
* Developer-written, custom formats may be used by supplying both a formatting and a parsing function
|
|
* which perform to specialized requirements. The functions are stored in {@link #parseFunctions} and {@link #formatFunctions}.
|
|
* @singleton
|
|
*/
|
|
|
|
/*
|
|
* Most of the date-formatting functions below are the excellent work of Baron Schwartz.
|
|
* (see http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/)
|
|
* They generate precompiled functions from format patterns instead of parsing and
|
|
* processing each pattern every time a date is formatted. These functions are available
|
|
* on every Date object.
|
|
*/
|
|
|
|
Ext.Date = new function() {
|
|
var utilDate = this,
|
|
stripEscapeRe = /(\\.)/g,
|
|
hourInfoRe = /([gGhHisucUOPZ]|MS)/,
|
|
dateInfoRe = /([djzmnYycU]|MS)/,
|
|
slashRe = /\\/gi,
|
|
numberTokenRe = /\{(\d+)\}/g,
|
|
MSFormatRe = new RegExp('\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/'),
|
|
code = [
|
|
// date calculations (note: the code below creates a dependency on Ext.Number.from())
|
|
"var me = this, dt, y, m, d, h, i, s, ms, o, O, z, zz, u, v, W, year, jan4, week1monday, daysInMonth, dayMatched,",
|
|
"def = me.defaults,",
|
|
"from = Ext.Number.from,",
|
|
"results = String(input).match(me.parseRegexes[{0}]);", // either null, or an array of matched strings
|
|
|
|
"if(results){",
|
|
"{1}",
|
|
|
|
"if(u != null){", // i.e. unix time is defined
|
|
"v = new Date(u * 1000);", // give top priority to UNIX time
|
|
"}else{",
|
|
// create Date object representing midnight of the current day;
|
|
// this will provide us with our date defaults
|
|
// (note: clearTime() handles Daylight Saving Time automatically)
|
|
"dt = me.clearTime(new Date);",
|
|
|
|
"y = from(y, from(def.y, dt.getFullYear()));",
|
|
"m = from(m, from(def.m - 1, dt.getMonth()));",
|
|
"dayMatched = d !== undefined;",
|
|
"d = from(d, from(def.d, dt.getDate()));",
|
|
|
|
// Attempt to validate the day. Since it defaults to today, it may go out
|
|
// of range, for example parsing m/Y where the value is 02/2000 on the 31st of May.
|
|
// It will attempt to parse 2000/02/31, which will overflow to March and end up
|
|
// returning 03/2000. We only do this when we default the day. If an invalid day value
|
|
// was set to be parsed by the user, continue on and either let it overflow or return null
|
|
// depending on the strict value. This will be in line with the normal Date behaviour.
|
|
|
|
"if (!dayMatched) {",
|
|
"dt.setDate(1);",
|
|
"dt.setMonth(m);",
|
|
"dt.setFullYear(y);",
|
|
|
|
"daysInMonth = me.getDaysInMonth(dt);",
|
|
"if (d > daysInMonth) {",
|
|
"d = daysInMonth;",
|
|
"}",
|
|
"}",
|
|
|
|
"h = from(h, from(def.h, dt.getHours()));",
|
|
"i = from(i, from(def.i, dt.getMinutes()));",
|
|
"s = from(s, from(def.s, dt.getSeconds()));",
|
|
"ms = from(ms, from(def.ms, dt.getMilliseconds()));",
|
|
|
|
"if(z >= 0 && y >= 0){",
|
|
// both the year and zero-based day of year are defined and >= 0.
|
|
// these 2 values alone provide sufficient info to create a full date object
|
|
|
|
// create Date object representing January 1st for the given year
|
|
// handle years < 100 appropriately
|
|
"v = me.add(new Date(y < 100 ? 100 : y, 0, 1, h, i, s, ms), me.YEAR, y < 100 ? y - 100 : 0);",
|
|
|
|
// then add day of year, checking for Date "rollover" if necessary
|
|
"v = !strict? v : (strict === true && (z <= 364 || (me.isLeapYear(v) && z <= 365))? me.add(v, me.DAY, z) : null);",
|
|
"}else if(strict === true && !me.isValid(y, m + 1, d, h, i, s, ms)){", // check for Date "rollover"
|
|
"v = null;", // invalid date, so return null
|
|
"}else{",
|
|
"if (W) {", // support ISO-8601
|
|
// http://en.wikipedia.org/wiki/ISO_week_date
|
|
//
|
|
// Mutually equivalent definitions for week 01 are:
|
|
// a. the week starting with the Monday which is nearest in time to 1 January
|
|
// b. the week with 4 January in it
|
|
// ... there are many others ...
|
|
//
|
|
// We'll use letter b above to determine the first week of the year.
|
|
//
|
|
// So, first get a Date object for January 4th of whatever calendar year is desired.
|
|
//
|
|
// Then, the first Monday of the year can easily be determined by (operating on this Date):
|
|
// 1. Getting the day of the week.
|
|
// 2. Subtracting that by one.
|
|
// 3. Multiplying that by 86400000 (one day in ms).
|
|
// 4. Subtracting this number of days (in ms) from the January 4 date (represented in ms).
|
|
//
|
|
// Example #1 ...
|
|
//
|
|
// January 2012
|
|
// Su Mo Tu We Th Fr Sa
|
|
// 1 2 3 4 5 6 7
|
|
// 8 9 10 11 12 13 14
|
|
// 15 16 17 18 19 20 21
|
|
// 22 23 24 25 26 27 28
|
|
// 29 30 31
|
|
//
|
|
// 1. January 4th is a Wednesday.
|
|
// 2. Its day number is 3.
|
|
// 3. Simply substract 2 days from Wednesday.
|
|
// 4. The first week of the year begins on Monday, January 2. Simple!
|
|
//
|
|
// Example #2 ...
|
|
// January 1992
|
|
// Su Mo Tu We Th Fr Sa
|
|
// 1 2 3 4
|
|
// 5 6 7 8 9 10 11
|
|
// 12 13 14 15 16 17 18
|
|
// 19 20 21 22 23 24 25
|
|
// 26 27 28 29 30 31
|
|
//
|
|
// 1. January 4th is a Saturday.
|
|
// 2. Its day number is 6.
|
|
// 3. Simply subtract 5 days from Saturday.
|
|
// 4. The first week of the year begins on Monday, December 30. Simple!
|
|
//
|
|
// v = Ext.Date.clearTime(new Date(week1monday.getTime() + ((W - 1) * 604800000)));
|
|
// (This is essentially doing the same thing as above but for the week rather than the day)
|
|
"year = y || (new Date()).getFullYear(),",
|
|
"jan4 = new Date(year, 0, 4, 0, 0, 0),",
|
|
"week1monday = new Date(jan4.getTime() - ((jan4.getDay() - 1) * 86400000));",
|
|
"v = Ext.Date.clearTime(new Date(week1monday.getTime() + ((W - 1) * 604800000)));",
|
|
"} else {",
|
|
// plain old Date object
|
|
// handle years < 100 properly
|
|
"v = me.add(new Date(y < 100 ? 100 : y, m, d, h, i, s, ms), me.YEAR, y < 100 ? y - 100 : 0);",
|
|
"}",
|
|
"}",
|
|
"}",
|
|
"}",
|
|
|
|
"if(v){",
|
|
// favor UTC offset over GMT offset
|
|
"if(zz != null){",
|
|
// reset to UTC, then add offset
|
|
"v = me.add(v, me.SECOND, -v.getTimezoneOffset() * 60 - zz);",
|
|
"}else if(o){",
|
|
// reset to GMT, then add offset
|
|
"v = me.add(v, me.MINUTE, -v.getTimezoneOffset() + (sn == '+'? -1 : 1) * (hr * 60 + mn));",
|
|
"}",
|
|
"}",
|
|
|
|
"return v;"
|
|
].join('\n');
|
|
|
|
// create private copy of Ext JS's `Ext.util.Format.format()` method
|
|
// - to remove unnecessary dependency
|
|
// - to resolve namespace conflict with MS-Ajax's implementation
|
|
function xf(format) {
|
|
var args = Array.prototype.slice.call(arguments, 1);
|
|
return format.replace(numberTokenRe, function(m, i) {
|
|
return args[i];
|
|
});
|
|
}
|
|
|
|
Ext.apply(utilDate, {
|
|
/**
|
|
* Returns the current timestamp.
|
|
* @return {Number} Milliseconds since UNIX epoch.
|
|
* @method
|
|
*/
|
|
now: Date.now || function() {
|
|
return +new Date();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Private for now
|
|
*/
|
|
toString: function(date) {
|
|
var pad = Ext.String.leftPad;
|
|
|
|
return date.getFullYear() + "-"
|
|
+ pad(date.getMonth() + 1, 2, '0') + "-"
|
|
+ pad(date.getDate(), 2, '0') + "T"
|
|
+ pad(date.getHours(), 2, '0') + ":"
|
|
+ pad(date.getMinutes(), 2, '0') + ":"
|
|
+ pad(date.getSeconds(), 2, '0');
|
|
},
|
|
|
|
/**
|
|
* Returns the number of milliseconds between two dates.
|
|
* @param {Date} dateA The first date.
|
|
* @param {Date} [dateB=new Date()] (optional) The second date.
|
|
* @return {Number} The difference in milliseconds
|
|
*/
|
|
getElapsed: function(dateA, dateB) {
|
|
return Math.abs(dateA - (dateB || utilDate.now()));
|
|
},
|
|
|
|
/**
|
|
* Global flag which determines if strict date parsing should be used.
|
|
* Strict date parsing will not roll-over invalid dates, which is the
|
|
* default behavior of JavaScript Date objects.
|
|
* (see {@link #parse} for more information)
|
|
* @type Boolean
|
|
*/
|
|
useStrict: false,
|
|
|
|
// private
|
|
formatCodeToRegex: function(character, currentGroup) {
|
|
// Note: currentGroup - position in regex result array (see notes for Ext.Date.parseCodes below)
|
|
var p = utilDate.parseCodes[character];
|
|
|
|
if (p) {
|
|
p = typeof p == 'function'? p() : p;
|
|
utilDate.parseCodes[character] = p; // reassign function result to prevent repeated execution
|
|
}
|
|
|
|
return p ? Ext.applyIf({
|
|
c: p.c ? xf(p.c, currentGroup || "{0}") : p.c
|
|
}, p) : {
|
|
g: 0,
|
|
c: null,
|
|
s: Ext.String.escapeRegex(character) // treat unrecognized characters as literals
|
|
};
|
|
},
|
|
|
|
/**
|
|
* An object hash in which each property is a date parsing function. The property name is the
|
|
* format string which that function parses.
|
|
*
|
|
* This object is automatically populated with date parsing functions as
|
|
* date formats are requested for Ext standard formatting strings.
|
|
*
|
|
* Custom parsing functions may be inserted into this object, keyed by a name which from then on
|
|
* may be used as a format string to {@link #parse}.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.Date.parseFunctions['x-date-format'] = myDateParser;
|
|
*
|
|
* A parsing function should return a Date object, and is passed the following parameters:<div class="mdetail-params"><ul>
|
|
* <li><code>date</code> : String<div class="sub-desc">The date string to parse.</div></li>
|
|
* <li><code>strict</code> : Boolean<div class="sub-desc">True to validate date strings while parsing
|
|
* (i.e. prevent JavaScript Date "rollover") (The default must be `false`).
|
|
* Invalid date strings should return `null` when parsed.</div></li>
|
|
* </ul></div>
|
|
*
|
|
* To enable Dates to also be _formatted_ according to that format, a corresponding
|
|
* formatting function must be placed into the {@link #formatFunctions} property.
|
|
* @property parseFunctions
|
|
* @type Object
|
|
*/
|
|
parseFunctions: {
|
|
"MS": function(input, strict) {
|
|
// note: the timezone offset is ignored since the MS Ajax server sends
|
|
// a UTC milliseconds-since-Unix-epoch value (negative values are allowed)
|
|
var r = (input || '').match(MSFormatRe);
|
|
return r ? new Date(((r[1] || '') + r[2]) * 1) : null;
|
|
},
|
|
"time": function(input, strict) {
|
|
var num = parseInt(input, 10);
|
|
if (num || num === 0) {
|
|
return new Date(num);
|
|
}
|
|
return null;
|
|
},
|
|
"timestamp": function(input, strict) {
|
|
var num = parseInt(input, 10);
|
|
if (num || num === 0) {
|
|
return new Date(num * 1000);
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
parseRegexes: [],
|
|
|
|
/**
|
|
* An object hash in which each property is a date formatting function. The property name is the
|
|
* format string which corresponds to the produced formatted date string.
|
|
*
|
|
* This object is automatically populated with date formatting functions as
|
|
* date formats are requested for Ext standard formatting strings.
|
|
*
|
|
* Custom formatting functions may be inserted into this object, keyed by a name which from then on
|
|
* may be used as a format string to {@link #format}.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.Date.formatFunctions['x-date-format'] = myDateFormatter;
|
|
*
|
|
* A formatting function should return a string representation of the passed Date object, and is passed the following parameters:<div class="mdetail-params"><ul>
|
|
* <li><code>date</code> : Date<div class="sub-desc">The Date to format.</div></li>
|
|
* </ul></div>
|
|
*
|
|
* To enable date strings to also be _parsed_ according to that format, a corresponding
|
|
* parsing function must be placed into the {@link #parseFunctions} property.
|
|
* @property formatFunctions
|
|
* @type Object
|
|
*/
|
|
formatFunctions: {
|
|
"MS": function() {
|
|
// UTC milliseconds since Unix epoch (MS-AJAX serialized date format (MRSF))
|
|
return '\\/Date(' + this.getTime() + ')\\/';
|
|
},
|
|
"time": function(){
|
|
return this.getTime().toString();
|
|
},
|
|
"timestamp": function(){
|
|
return utilDate.format(this, 'U');
|
|
}
|
|
},
|
|
|
|
y2kYear : 50,
|
|
|
|
/**
|
|
* Date interval constant
|
|
* @type String
|
|
*/
|
|
MILLI : "ms",
|
|
|
|
/**
|
|
* Date interval constant
|
|
* @type String
|
|
*/
|
|
SECOND : "s",
|
|
|
|
/**
|
|
* Date interval constant
|
|
* @type String
|
|
*/
|
|
MINUTE : "mi",
|
|
|
|
/** Date interval constant
|
|
* @type String
|
|
*/
|
|
HOUR : "h",
|
|
|
|
/**
|
|
* Date interval constant
|
|
* @type String
|
|
*/
|
|
DAY : "d",
|
|
|
|
/**
|
|
* Date interval constant
|
|
* @type String
|
|
*/
|
|
MONTH : "mo",
|
|
|
|
/**
|
|
* Date interval constant
|
|
* @type String
|
|
*/
|
|
YEAR : "y",
|
|
|
|
/**
|
|
* An object hash containing default date values used during date parsing.
|
|
*
|
|
* The following properties are available:<div class="mdetail-params"><ul>
|
|
* <li><code>y</code> : Number<div class="sub-desc">The default year value. (defaults to undefined)</div></li>
|
|
* <li><code>m</code> : Number<div class="sub-desc">The default 1-based month value. (defaults to undefined)</div></li>
|
|
* <li><code>d</code> : Number<div class="sub-desc">The default day value. (defaults to undefined)</div></li>
|
|
* <li><code>h</code> : Number<div class="sub-desc">The default hour value. (defaults to undefined)</div></li>
|
|
* <li><code>i</code> : Number<div class="sub-desc">The default minute value. (defaults to undefined)</div></li>
|
|
* <li><code>s</code> : Number<div class="sub-desc">The default second value. (defaults to undefined)</div></li>
|
|
* <li><code>ms</code> : Number<div class="sub-desc">The default millisecond value. (defaults to undefined)</div></li>
|
|
* </ul></div>
|
|
*
|
|
* Override these properties to customize the default date values used by the {@link #parse} method.
|
|
*
|
|
* __Note:__ In countries which experience Daylight Saving Time (i.e. DST), the `h`, `i`, `s`
|
|
* and `ms` properties may coincide with the exact time in which DST takes effect.
|
|
* It is the responsibility of the developer to account for this.
|
|
*
|
|
* Example Usage:
|
|
*
|
|
* // set default day value to the first day of the month
|
|
* Ext.Date.defaults.d = 1;
|
|
*
|
|
* // parse a February date string containing only year and month values.
|
|
* // setting the default day value to 1 prevents weird date rollover issues
|
|
* // when attempting to parse the following date string on, for example, March 31st 2009.
|
|
* Ext.Date.parse('2009-02', 'Y-m'); // returns a Date object representing February 1st 2009
|
|
*
|
|
* @property defaults
|
|
* @type Object
|
|
*/
|
|
defaults: {},
|
|
|
|
//<locale type="array">
|
|
/**
|
|
* @property {String[]} dayNames
|
|
* An array of textual day names.
|
|
* Override these values for international dates.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.Date.dayNames = [
|
|
* 'SundayInYourLang',
|
|
* 'MondayInYourLang'
|
|
* // ...
|
|
* ];
|
|
*/
|
|
dayNames : [
|
|
"Sunday",
|
|
"Monday",
|
|
"Tuesday",
|
|
"Wednesday",
|
|
"Thursday",
|
|
"Friday",
|
|
"Saturday"
|
|
],
|
|
//</locale>
|
|
|
|
//<locale type="array">
|
|
/**
|
|
* @property {String[]} monthNames
|
|
* An array of textual month names.
|
|
* Override these values for international dates.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.Date.monthNames = [
|
|
* 'JanInYourLang',
|
|
* 'FebInYourLang'
|
|
* // ...
|
|
* ];
|
|
*/
|
|
monthNames : [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December"
|
|
],
|
|
//</locale>
|
|
|
|
//<locale type="object">
|
|
/**
|
|
* @property {Object} monthNumbers
|
|
* An object hash of zero-based JavaScript month numbers (with short month names as keys. **Note:** keys are case-sensitive).
|
|
* Override these values for international dates.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.Date.monthNumbers = {
|
|
* 'LongJanNameInYourLang': 0,
|
|
* 'ShortJanNameInYourLang':0,
|
|
* 'LongFebNameInYourLang':1,
|
|
* 'ShortFebNameInYourLang':1
|
|
* // ...
|
|
* };
|
|
*/
|
|
monthNumbers : {
|
|
January: 0,
|
|
Jan: 0,
|
|
February: 1,
|
|
Feb: 1,
|
|
March: 2,
|
|
Mar: 2,
|
|
April: 3,
|
|
Apr: 3,
|
|
May: 4,
|
|
June: 5,
|
|
Jun: 5,
|
|
July: 6,
|
|
Jul: 6,
|
|
August: 7,
|
|
Aug: 7,
|
|
September: 8,
|
|
Sep: 8,
|
|
October: 9,
|
|
Oct: 9,
|
|
November: 10,
|
|
Nov: 10,
|
|
December: 11,
|
|
Dec: 11
|
|
},
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @property {String} defaultFormat
|
|
* The date format string that the {@link Ext.util.Format#dateRenderer}
|
|
* and {@link Ext.util.Format#date} functions use. See {@link Ext.Date} for details.
|
|
*
|
|
* This may be overridden in a locale file.
|
|
*/
|
|
defaultFormat : "m/d/Y",
|
|
//</locale>
|
|
//<locale type="function">
|
|
/**
|
|
* Get the short month name for the given month number.
|
|
* Override this function for international dates.
|
|
* @param {Number} month A zero-based JavaScript month number.
|
|
* @return {String} The short month name.
|
|
*/
|
|
getShortMonthName : function(month) {
|
|
return Ext.Date.monthNames[month].substring(0, 3);
|
|
},
|
|
//</locale>
|
|
|
|
//<locale type="function">
|
|
/**
|
|
* Get the short day name for the given day number.
|
|
* Override this function for international dates.
|
|
* @param {Number} day A zero-based JavaScript day number.
|
|
* @return {String} The short day name.
|
|
*/
|
|
getShortDayName : function(day) {
|
|
return Ext.Date.dayNames[day].substring(0, 3);
|
|
},
|
|
//</locale>
|
|
|
|
//<locale type="function">
|
|
/**
|
|
* Get the zero-based JavaScript month number for the given short/full month name.
|
|
* Override this function for international dates.
|
|
* @param {String} name The short/full month name.
|
|
* @return {Number} The zero-based JavaScript month number.
|
|
*/
|
|
getMonthNumber : function(name) {
|
|
// handle camel casing for English month names (since the keys for the Ext.Date.monthNumbers hash are case sensitive)
|
|
return Ext.Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
|
|
},
|
|
//</locale>
|
|
|
|
/**
|
|
* Checks if the specified format contains hour information
|
|
* @param {String} format The format to check
|
|
* @return {Boolean} True if the format contains hour information
|
|
* @method
|
|
*/
|
|
formatContainsHourInfo : function(format){
|
|
return hourInfoRe.test(format.replace(stripEscapeRe, ''));
|
|
},
|
|
|
|
/**
|
|
* Checks if the specified format contains information about
|
|
* anything other than the time.
|
|
* @param {String} format The format to check
|
|
* @return {Boolean} True if the format contains information about
|
|
* date/day information.
|
|
* @method
|
|
*/
|
|
formatContainsDateInfo : function(format){
|
|
return dateInfoRe.test(format.replace(stripEscapeRe, ''));
|
|
},
|
|
|
|
/**
|
|
* Removes all escaping for a date format string. In date formats,
|
|
* using a '\' can be used to escape special characters.
|
|
* @param {String} format The format to unescape
|
|
* @return {String} The unescaped format
|
|
* @method
|
|
*/
|
|
unescapeFormat: function(format) {
|
|
// Escape the format, since \ can be used to escape special
|
|
// characters in a date format. For example, in a Spanish
|
|
// locale the format may be: 'd \\de F \\de Y'
|
|
return format.replace(slashRe, '');
|
|
},
|
|
|
|
/**
|
|
* The base format-code to formatting-function hashmap used by the {@link #format} method.
|
|
* Formatting functions are strings (or functions which return strings) which
|
|
* will return the appropriate value when evaluated in the context of the Date object
|
|
* from which the {@link #format} method is called.
|
|
* Add to / override these mappings for custom date formatting.
|
|
*
|
|
* __Note:__ Ext.Date.format() treats characters as literals if an appropriate mapping cannot be found.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.Date.formatCodes.x = "Ext.util.Format.leftPad(this.getDate(), 2, '0')";
|
|
* console.log(Ext.Date.format(new Date(), 'X'); // returns the current day of the month
|
|
* @type Object
|
|
*/
|
|
formatCodes : {
|
|
d: "Ext.String.leftPad(this.getDate(), 2, '0')",
|
|
D: "Ext.Date.getShortDayName(this.getDay())", // get localized short day name
|
|
j: "this.getDate()",
|
|
l: "Ext.Date.dayNames[this.getDay()]",
|
|
N: "(this.getDay() ? this.getDay() : 7)",
|
|
S: "Ext.Date.getSuffix(this)",
|
|
w: "this.getDay()",
|
|
z: "Ext.Date.getDayOfYear(this)",
|
|
W: "Ext.String.leftPad(Ext.Date.getWeekOfYear(this), 2, '0')",
|
|
F: "Ext.Date.monthNames[this.getMonth()]",
|
|
m: "Ext.String.leftPad(this.getMonth() + 1, 2, '0')",
|
|
M: "Ext.Date.getShortMonthName(this.getMonth())", // get localized short month name
|
|
n: "(this.getMonth() + 1)",
|
|
t: "Ext.Date.getDaysInMonth(this)",
|
|
L: "(Ext.Date.isLeapYear(this) ? 1 : 0)",
|
|
o: "(this.getFullYear() + (Ext.Date.getWeekOfYear(this) == 1 && this.getMonth() > 0 ? +1 : (Ext.Date.getWeekOfYear(this) >= 52 && this.getMonth() < 11 ? -1 : 0)))",
|
|
Y: "Ext.String.leftPad(this.getFullYear(), 4, '0')",
|
|
y: "('' + this.getFullYear()).substring(2, 4)",
|
|
a: "(this.getHours() < 12 ? 'am' : 'pm')",
|
|
A: "(this.getHours() < 12 ? 'AM' : 'PM')",
|
|
g: "((this.getHours() % 12) ? this.getHours() % 12 : 12)",
|
|
G: "this.getHours()",
|
|
h: "Ext.String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0')",
|
|
H: "Ext.String.leftPad(this.getHours(), 2, '0')",
|
|
i: "Ext.String.leftPad(this.getMinutes(), 2, '0')",
|
|
s: "Ext.String.leftPad(this.getSeconds(), 2, '0')",
|
|
u: "Ext.String.leftPad(this.getMilliseconds(), 3, '0')",
|
|
O: "Ext.Date.getGMTOffset(this)",
|
|
P: "Ext.Date.getGMTOffset(this, true)",
|
|
T: "Ext.Date.getTimezone(this)",
|
|
Z: "(this.getTimezoneOffset() * -60)",
|
|
|
|
c: function() { // ISO-8601 -- GMT format
|
|
var c, code, i, l, e;
|
|
for (c = "Y-m-dTH:i:sP", code = [], i = 0, l = c.length; i < l; ++i) {
|
|
e = c.charAt(i);
|
|
code.push(e == "T" ? "'T'" : utilDate.getFormatCode(e)); // treat T as a character literal
|
|
}
|
|
return code.join(" + ");
|
|
},
|
|
/*
|
|
c: function() { // ISO-8601 -- UTC format
|
|
return [
|
|
"this.getUTCFullYear()", "'-'",
|
|
"Ext.util.Format.leftPad(this.getUTCMonth() + 1, 2, '0')", "'-'",
|
|
"Ext.util.Format.leftPad(this.getUTCDate(), 2, '0')",
|
|
"'T'",
|
|
"Ext.util.Format.leftPad(this.getUTCHours(), 2, '0')", "':'",
|
|
"Ext.util.Format.leftPad(this.getUTCMinutes(), 2, '0')", "':'",
|
|
"Ext.util.Format.leftPad(this.getUTCSeconds(), 2, '0')",
|
|
"'Z'"
|
|
].join(" + ");
|
|
},
|
|
*/
|
|
|
|
U: "Math.round(this.getTime() / 1000)"
|
|
},
|
|
|
|
/**
|
|
* Checks if the passed Date parameters will cause a JavaScript Date "rollover".
|
|
* @param {Number} year 4-digit year
|
|
* @param {Number} month 1-based month-of-year
|
|
* @param {Number} day Day of month
|
|
* @param {Number} hour (optional) Hour
|
|
* @param {Number} minute (optional) Minute
|
|
* @param {Number} second (optional) Second
|
|
* @param {Number} millisecond (optional) Millisecond
|
|
* @return {Boolean} `true` if the passed parameters do not cause a Date "rollover", `false` otherwise.
|
|
*/
|
|
isValid : function(y, m, d, h, i, s, ms) {
|
|
// setup defaults
|
|
h = h || 0;
|
|
i = i || 0;
|
|
s = s || 0;
|
|
ms = ms || 0;
|
|
|
|
// Special handling for year < 100
|
|
var dt = utilDate.add(new Date(y < 100 ? 100 : y, m - 1, d, h, i, s, ms), utilDate.YEAR, y < 100 ? y - 100 : 0);
|
|
|
|
return y == dt.getFullYear() &&
|
|
m == dt.getMonth() + 1 &&
|
|
d == dt.getDate() &&
|
|
h == dt.getHours() &&
|
|
i == dt.getMinutes() &&
|
|
s == dt.getSeconds() &&
|
|
ms == dt.getMilliseconds();
|
|
},
|
|
|
|
/**
|
|
* Parses the passed string using the specified date format.
|
|
* Note that this function expects normal calendar dates, meaning that months are 1-based (i.e. 1 = January).
|
|
* The {@link #defaults} hash will be used for any date value (i.e. year, month, day, hour, minute, second or millisecond)
|
|
* which cannot be found in the passed string. If a corresponding default date value has not been specified in the {@link #defaults} hash,
|
|
* the current date's year, month, day or DST-adjusted zero-hour time value will be used instead.
|
|
* Keep in mind that the input date string must precisely match the specified format string
|
|
* in order for the parse operation to be successful (failed parse operations return a null value).
|
|
*
|
|
* Example:
|
|
*
|
|
* //dt = Fri May 25 2007 (current date)
|
|
* var dt = new Date();
|
|
*
|
|
* //dt = Thu May 25 2006 (today's month/day in 2006)
|
|
* dt = Ext.Date.parse("2006", "Y");
|
|
*
|
|
* //dt = Sun Jan 15 2006 (all date parts specified)
|
|
* dt = Ext.Date.parse("2006-01-15", "Y-m-d");
|
|
*
|
|
* //dt = Sun Jan 15 2006 15:20:01
|
|
* dt = Ext.Date.parse("2006-01-15 3:20:01 PM", "Y-m-d g:i:s A");
|
|
*
|
|
* // attempt to parse Sun Feb 29 2006 03:20:01 in strict mode
|
|
* dt = Ext.Date.parse("2006-02-29 03:20:01", "Y-m-d H:i:s", true); // returns null
|
|
*
|
|
* @param {String} input The raw date string.
|
|
* @param {String} format The expected date string format.
|
|
* @param {Boolean} [strict=false] (optional) `true` to validate date strings while parsing (i.e. prevents JavaScript Date "rollover").
|
|
* Invalid date strings will return `null` when parsed.
|
|
* @return {Date} The parsed Date.
|
|
*/
|
|
parse : function(input, format, strict) {
|
|
var p = utilDate.parseFunctions;
|
|
if (p[format] == null) {
|
|
utilDate.createParser(format);
|
|
}
|
|
return p[format].call(utilDate, input, Ext.isDefined(strict) ? strict : utilDate.useStrict);
|
|
},
|
|
|
|
// Backwards compat
|
|
parseDate: function(input, format, strict){
|
|
return utilDate.parse(input, format, strict);
|
|
},
|
|
|
|
|
|
// private
|
|
getFormatCode : function(character) {
|
|
var f = utilDate.formatCodes[character];
|
|
|
|
if (f) {
|
|
f = typeof f == 'function'? f() : f;
|
|
utilDate.formatCodes[character] = f; // reassign function result to prevent repeated execution
|
|
}
|
|
|
|
// note: unknown characters are treated as literals
|
|
return f || ("'" + Ext.String.escape(character) + "'");
|
|
},
|
|
|
|
// private
|
|
createFormat : function(format) {
|
|
var code = [],
|
|
special = false,
|
|
ch = '',
|
|
i;
|
|
|
|
for (i = 0; i < format.length; ++i) {
|
|
ch = format.charAt(i);
|
|
if (!special && ch == "\\") {
|
|
special = true;
|
|
} else if (special) {
|
|
special = false;
|
|
code.push("'" + Ext.String.escape(ch) + "'");
|
|
} else {
|
|
code.push(utilDate.getFormatCode(ch));
|
|
}
|
|
}
|
|
utilDate.formatFunctions[format] = Ext.functionFactory("return " + code.join('+'));
|
|
},
|
|
|
|
// private
|
|
createParser : function(format) {
|
|
var regexNum = utilDate.parseRegexes.length,
|
|
currentGroup = 1,
|
|
calc = [],
|
|
regex = [],
|
|
special = false,
|
|
ch = "",
|
|
i = 0,
|
|
len = format.length,
|
|
atEnd = [],
|
|
obj;
|
|
|
|
for (; i < len; ++i) {
|
|
ch = format.charAt(i);
|
|
if (!special && ch == "\\") {
|
|
special = true;
|
|
} else if (special) {
|
|
special = false;
|
|
regex.push(Ext.String.escape(ch));
|
|
} else {
|
|
obj = utilDate.formatCodeToRegex(ch, currentGroup);
|
|
currentGroup += obj.g;
|
|
regex.push(obj.s);
|
|
if (obj.g && obj.c) {
|
|
if (obj.calcAtEnd) {
|
|
atEnd.push(obj.c);
|
|
} else {
|
|
calc.push(obj.c);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
calc = calc.concat(atEnd);
|
|
|
|
utilDate.parseRegexes[regexNum] = new RegExp("^" + regex.join('') + "$", 'i');
|
|
utilDate.parseFunctions[format] = Ext.functionFactory("input", "strict", xf(code, regexNum, calc.join('')));
|
|
},
|
|
|
|
// private
|
|
parseCodes : {
|
|
/*
|
|
* Notes:
|
|
* g = {Number} calculation group (0 or 1. only group 1 contributes to date calculations.)
|
|
* c = {String} calculation method (required for group 1. null for group 0. {0} = currentGroup - position in regex result array)
|
|
* s = {String} regex pattern. all matches are stored in results[], and are accessible by the calculation mapped to 'c'
|
|
*/
|
|
d: {
|
|
g:1,
|
|
c:"d = parseInt(results[{0}], 10);\n",
|
|
s:"(3[0-1]|[1-2][0-9]|0[1-9])" // day of month with leading zeroes (01 - 31)
|
|
},
|
|
j: {
|
|
g:1,
|
|
c:"d = parseInt(results[{0}], 10);\n",
|
|
s:"(3[0-1]|[1-2][0-9]|[1-9])" // day of month without leading zeroes (1 - 31)
|
|
},
|
|
D: function() {
|
|
for (var a = [], i = 0; i < 7; a.push(utilDate.getShortDayName(i)), ++i); // get localised short day names
|
|
return {
|
|
g:0,
|
|
c:null,
|
|
s:"(?:" + a.join("|") +")"
|
|
};
|
|
},
|
|
l: function() {
|
|
return {
|
|
g:0,
|
|
c:null,
|
|
s:"(?:" + utilDate.dayNames.join("|") + ")"
|
|
};
|
|
},
|
|
N: {
|
|
g:0,
|
|
c:null,
|
|
s:"[1-7]" // ISO-8601 day number (1 (monday) - 7 (sunday))
|
|
},
|
|
//<locale type="object" property="parseCodes">
|
|
S: {
|
|
g:0,
|
|
c:null,
|
|
s:"(?:st|nd|rd|th)"
|
|
},
|
|
//</locale>
|
|
w: {
|
|
g:0,
|
|
c:null,
|
|
s:"[0-6]" // JavaScript day number (0 (sunday) - 6 (saturday))
|
|
},
|
|
z: {
|
|
g:1,
|
|
c:"z = parseInt(results[{0}], 10);\n",
|
|
s:"(\\d{1,3})" // day of the year (0 - 364 (365 in leap years))
|
|
},
|
|
W: {
|
|
g:1,
|
|
c:"W = parseInt(results[{0}], 10);\n",
|
|
s:"(\\d{2})" // ISO-8601 week number (with leading zero)
|
|
},
|
|
F: function() {
|
|
return {
|
|
g:1,
|
|
c:"m = parseInt(me.getMonthNumber(results[{0}]), 10);\n", // get localised month number
|
|
s:"(" + utilDate.monthNames.join("|") + ")"
|
|
};
|
|
},
|
|
M: function() {
|
|
for (var a = [], i = 0; i < 12; a.push(utilDate.getShortMonthName(i)), ++i); // get localised short month names
|
|
return Ext.applyIf({
|
|
s:"(" + a.join("|") + ")"
|
|
}, utilDate.formatCodeToRegex("F"));
|
|
},
|
|
m: {
|
|
g:1,
|
|
c:"m = parseInt(results[{0}], 10) - 1;\n",
|
|
s:"(1[0-2]|0[1-9])" // month number with leading zeros (01 - 12)
|
|
},
|
|
n: {
|
|
g:1,
|
|
c:"m = parseInt(results[{0}], 10) - 1;\n",
|
|
s:"(1[0-2]|[1-9])" // month number without leading zeros (1 - 12)
|
|
},
|
|
t: {
|
|
g:0,
|
|
c:null,
|
|
s:"(?:\\d{2})" // no. of days in the month (28 - 31)
|
|
},
|
|
L: {
|
|
g:0,
|
|
c:null,
|
|
s:"(?:1|0)"
|
|
},
|
|
o: {
|
|
g: 1,
|
|
c: "y = parseInt(results[{0}], 10);\n",
|
|
s: "(\\d{4})" // ISO-8601 year number (with leading zero)
|
|
|
|
},
|
|
Y: {
|
|
g:1,
|
|
c:"y = parseInt(results[{0}], 10);\n",
|
|
s:"(\\d{4})" // 4-digit year
|
|
},
|
|
y: {
|
|
g:1,
|
|
c:"var ty = parseInt(results[{0}], 10);\n"
|
|
+ "y = ty > me.y2kYear ? 1900 + ty : 2000 + ty;\n", // 2-digit year
|
|
s:"(\\d{1,2})"
|
|
},
|
|
/*
|
|
* In the am/pm parsing routines, we allow both upper and lower case
|
|
* even though it doesn't exactly match the spec. It gives much more flexibility
|
|
* in being able to specify case insensitive regexes.
|
|
*/
|
|
//<locale type="object" property="parseCodes">
|
|
a: {
|
|
g:1,
|
|
c:"if (/(am)/i.test(results[{0}])) {\n"
|
|
+ "if (!h || h == 12) { h = 0; }\n"
|
|
+ "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
|
|
s:"(am|pm|AM|PM)",
|
|
calcAtEnd: true
|
|
},
|
|
//</locale>
|
|
//<locale type="object" property="parseCodes">
|
|
A: {
|
|
g:1,
|
|
c:"if (/(am)/i.test(results[{0}])) {\n"
|
|
+ "if (!h || h == 12) { h = 0; }\n"
|
|
+ "} else { if (!h || h < 12) { h = (h || 0) + 12; }}",
|
|
s:"(AM|PM|am|pm)",
|
|
calcAtEnd: true
|
|
},
|
|
//</locale>
|
|
g: {
|
|
g:1,
|
|
c:"h = parseInt(results[{0}], 10);\n",
|
|
s:"(1[0-2]|[0-9])" // 12-hr format of an hour without leading zeroes (1 - 12)
|
|
},
|
|
G: {
|
|
g:1,
|
|
c:"h = parseInt(results[{0}], 10);\n",
|
|
s:"(2[0-3]|1[0-9]|[0-9])" // 24-hr format of an hour without leading zeroes (0 - 23)
|
|
},
|
|
h: {
|
|
g:1,
|
|
c:"h = parseInt(results[{0}], 10);\n",
|
|
s:"(1[0-2]|0[1-9])" // 12-hr format of an hour with leading zeroes (01 - 12)
|
|
},
|
|
H: {
|
|
g:1,
|
|
c:"h = parseInt(results[{0}], 10);\n",
|
|
s:"(2[0-3]|[0-1][0-9])" // 24-hr format of an hour with leading zeroes (00 - 23)
|
|
},
|
|
i: {
|
|
g:1,
|
|
c:"i = parseInt(results[{0}], 10);\n",
|
|
s:"([0-5][0-9])" // minutes with leading zeros (00 - 59)
|
|
},
|
|
s: {
|
|
g:1,
|
|
c:"s = parseInt(results[{0}], 10);\n",
|
|
s:"([0-5][0-9])" // seconds with leading zeros (00 - 59)
|
|
},
|
|
u: {
|
|
g:1,
|
|
c:"ms = results[{0}]; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n",
|
|
s:"(\\d+)" // decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
|
|
},
|
|
O: {
|
|
g:1,
|
|
c:[
|
|
"o = results[{0}];",
|
|
"var sn = o.substring(0,1),", // get + / - sign
|
|
"hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60),", // get hours (performs minutes-to-hour conversion also, just in case)
|
|
"mn = o.substring(3,5) % 60;", // get minutes
|
|
"o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + Ext.String.leftPad(hr, 2, '0') + Ext.String.leftPad(mn, 2, '0')) : null;\n" // -12hrs <= GMT offset <= 14hrs
|
|
].join("\n"),
|
|
s: "([+-]\\d{4})" // GMT offset in hrs and mins
|
|
},
|
|
P: {
|
|
g:1,
|
|
c:[
|
|
"o = results[{0}];",
|
|
"var sn = o.substring(0,1),", // get + / - sign
|
|
"hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60),", // get hours (performs minutes-to-hour conversion also, just in case)
|
|
"mn = o.substring(4,6) % 60;", // get minutes
|
|
"o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))? (sn + Ext.String.leftPad(hr, 2, '0') + Ext.String.leftPad(mn, 2, '0')) : null;\n" // -12hrs <= GMT offset <= 14hrs
|
|
].join("\n"),
|
|
s: "([+-]\\d{2}:\\d{2})" // GMT offset in hrs and mins (with colon separator)
|
|
},
|
|
T: {
|
|
g:0,
|
|
c:null,
|
|
s:"[A-Z]{1,5}" // timezone abbrev. may be between 1 - 5 chars
|
|
},
|
|
Z: {
|
|
g:1,
|
|
c:"zz = results[{0}] * 1;\n" // -43200 <= UTC offset <= 50400
|
|
+ "zz = (-43200 <= zz && zz <= 50400)? zz : null;\n",
|
|
s:"([+-]?\\d{1,5})" // leading '+' sign is optional for UTC offset
|
|
},
|
|
c: function() {
|
|
var calc = [],
|
|
arr = [
|
|
utilDate.formatCodeToRegex("Y", 1), // year
|
|
utilDate.formatCodeToRegex("m", 2), // month
|
|
utilDate.formatCodeToRegex("d", 3), // day
|
|
utilDate.formatCodeToRegex("H", 4), // hour
|
|
utilDate.formatCodeToRegex("i", 5), // minute
|
|
utilDate.formatCodeToRegex("s", 6), // second
|
|
{c:"ms = results[7] || '0'; ms = parseInt(ms, 10)/Math.pow(10, ms.length - 3);\n"}, // decimal fraction of a second (minimum = 1 digit, maximum = unlimited)
|
|
{c:[ // allow either "Z" (i.e. UTC) or "-0530" or "+08:00" (i.e. UTC offset) timezone delimiters. assumes local timezone if no timezone is specified
|
|
"if(results[8]) {", // timezone specified
|
|
"if(results[8] == 'Z'){",
|
|
"zz = 0;", // UTC
|
|
"}else if (results[8].indexOf(':') > -1){",
|
|
utilDate.formatCodeToRegex("P", 8).c, // timezone offset with colon separator
|
|
"}else{",
|
|
utilDate.formatCodeToRegex("O", 8).c, // timezone offset without colon separator
|
|
"}",
|
|
"}"
|
|
].join('\n')}
|
|
],
|
|
i,
|
|
l;
|
|
|
|
for (i = 0, l = arr.length; i < l; ++i) {
|
|
calc.push(arr[i].c);
|
|
}
|
|
|
|
return {
|
|
g:1,
|
|
c:calc.join(""),
|
|
s:[
|
|
arr[0].s, // year (required)
|
|
"(?:", "-", arr[1].s, // month (optional)
|
|
"(?:", "-", arr[2].s, // day (optional)
|
|
"(?:",
|
|
"(?:T| )?", // time delimiter -- either a "T" or a single blank space
|
|
arr[3].s, ":", arr[4].s, // hour AND minute, delimited by a single colon (optional). MUST be preceded by either a "T" or a single blank space
|
|
"(?::", arr[5].s, ")?", // seconds (optional)
|
|
"(?:(?:\\.|,)(\\d+))?", // decimal fraction of a second (e.g. ",12345" or ".98765") (optional)
|
|
"(Z|(?:[-+]\\d{2}(?::)?\\d{2}))?", // "Z" (UTC) or "-0530" (UTC offset without colon delimiter) or "+08:00" (UTC offset with colon delimiter) (optional)
|
|
")?",
|
|
")?",
|
|
")?"
|
|
].join("")
|
|
};
|
|
},
|
|
U: {
|
|
g:1,
|
|
c:"u = parseInt(results[{0}], 10);\n",
|
|
s:"(-?\\d+)" // leading minus sign indicates seconds before UNIX epoch
|
|
}
|
|
},
|
|
|
|
//Old Ext.Date prototype methods.
|
|
// private
|
|
dateFormat: function(date, format) {
|
|
return utilDate.format(date, format);
|
|
},
|
|
|
|
/**
|
|
* Compares if two dates are equal by comparing their values.
|
|
* @param {Date} date1
|
|
* @param {Date} date2
|
|
* @return {Boolean} `true` if the date values are equal
|
|
*/
|
|
isEqual: function(date1, date2) {
|
|
// check we have 2 date objects
|
|
if (date1 && date2) {
|
|
return (date1.getTime() === date2.getTime());
|
|
}
|
|
// one or both isn't a date, only equal if both are falsey
|
|
return !(date1 || date2);
|
|
},
|
|
|
|
/**
|
|
* Formats a date given the supplied format string.
|
|
* @param {Date} date The date to format
|
|
* @param {String} format The format string
|
|
* @return {String} The formatted date or an empty string if date parameter is not a JavaScript Date object
|
|
*/
|
|
format: function(date, format) {
|
|
var formatFunctions = utilDate.formatFunctions;
|
|
|
|
if (!Ext.isDate(date)) {
|
|
return '';
|
|
}
|
|
|
|
if (formatFunctions[format] == null) {
|
|
utilDate.createFormat(format);
|
|
}
|
|
|
|
return formatFunctions[format].call(date) + '';
|
|
},
|
|
|
|
/**
|
|
* Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
|
|
*
|
|
* __Note:__ The date string returned by the JavaScript Date object's `toString()` method varies
|
|
* between browsers (e.g. FF vs IE) and system region settings (e.g. IE in Asia vs IE in America).
|
|
* For a given date string e.g. "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)",
|
|
* getTimezone() first tries to get the timezone abbreviation from between a pair of parentheses
|
|
* (which may or may not be present), failing which it proceeds to get the timezone abbreviation
|
|
* from the GMT offset portion of the date string.
|
|
* @param {Date} date The date
|
|
* @return {String} The abbreviated timezone name (e.g. 'CST', 'PDT', 'EDT', 'MPST' ...).
|
|
*/
|
|
getTimezone : function(date) {
|
|
// the following list shows the differences between date strings from different browsers on a WinXP SP2 machine from an Asian locale:
|
|
//
|
|
// Opera : "Thu, 25 Oct 2007 22:53:45 GMT+0800" -- shortest (weirdest) date string of the lot
|
|
// Safari : "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)" -- value in parentheses always gives the correct timezone (same as FF)
|
|
// FF : "Thu Oct 25 2007 22:55:35 GMT+0800 (Malay Peninsula Standard Time)" -- value in parentheses always gives the correct timezone
|
|
// IE : "Thu Oct 25 22:54:35 UTC+0800 2007" -- (Asian system setting) look for 3-4 letter timezone abbrev
|
|
// IE : "Thu Oct 25 17:06:37 PDT 2007" -- (American system setting) look for 3-4 letter timezone abbrev
|
|
//
|
|
// this crazy regex attempts to guess the correct timezone abbreviation despite these differences.
|
|
// step 1: (?:\((.*)\) -- find timezone in parentheses
|
|
// step 2: ([A-Z]{1,4})(?:[\-+][0-9]{4})?(?: -?\d+)?) -- if nothing was found in step 1, find timezone from timezone offset portion of date string
|
|
// step 3: remove all non uppercase characters found in step 1 and 2
|
|
return date.toString().replace(/^.* (?:\((.*)\)|([A-Z]{1,5})(?:[\-+][0-9]{4})?(?: -?\d+)?)$/, "$1$2").replace(/[^A-Z]/g, "");
|
|
},
|
|
|
|
/**
|
|
* Get the offset from GMT of the current date (equivalent to the format specifier 'O').
|
|
* @param {Date} date The date
|
|
* @param {Boolean} [colon=false] (optional) true to separate the hours and minutes with a colon.
|
|
* @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600').
|
|
*/
|
|
getGMTOffset : function(date, colon) {
|
|
var offset = date.getTimezoneOffset();
|
|
return (offset > 0 ? "-" : "+")
|
|
+ Ext.String.leftPad(Math.floor(Math.abs(offset) / 60), 2, "0")
|
|
+ (colon ? ":" : "")
|
|
+ Ext.String.leftPad(Math.abs(offset % 60), 2, "0");
|
|
},
|
|
|
|
/**
|
|
* Get the numeric day number of the year, adjusted for leap year.
|
|
* @param {Date} date The date
|
|
* @return {Number} 0 to 364 (365 in leap years).
|
|
*/
|
|
getDayOfYear: function(date) {
|
|
var num = 0,
|
|
d = Ext.Date.clone(date),
|
|
m = date.getMonth(),
|
|
i;
|
|
|
|
for (i = 0, d.setDate(1), d.setMonth(0); i < m; d.setMonth(++i)) {
|
|
num += utilDate.getDaysInMonth(d);
|
|
}
|
|
return num + date.getDate() - 1;
|
|
},
|
|
|
|
/**
|
|
* Get the numeric ISO-8601 week number of the year.
|
|
* (equivalent to the format specifier 'W', but without a leading zero).
|
|
* @param {Date} date The date
|
|
* @return {Number} 1 to 53
|
|
* @method
|
|
*/
|
|
getWeekOfYear : (function() {
|
|
// adapted from http://www.merlyn.demon.co.uk/weekcalc.htm
|
|
var ms1d = 864e5, // milliseconds in a day
|
|
ms7d = 7 * ms1d; // milliseconds in a week
|
|
|
|
return function(date) { // return a closure so constants get calculated only once
|
|
var DC3 = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate() + 3) / ms1d, // an Absolute Day Number
|
|
AWN = Math.floor(DC3 / 7), // an Absolute Week Number
|
|
Wyr = new Date(AWN * ms7d).getUTCFullYear();
|
|
|
|
return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Checks if the current date falls within a leap year.
|
|
* @param {Date} date The date
|
|
* @return {Boolean} True if the current date falls within a leap year, false otherwise.
|
|
*/
|
|
isLeapYear : function(date) {
|
|
var year = date.getFullYear();
|
|
return !!((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
|
|
},
|
|
|
|
/**
|
|
* Get the first day of the current month, adjusted for leap year. The returned value
|
|
* is the numeric day index within the week (0-6) which can be used in conjunction with
|
|
* the {@link #monthNames} array to retrieve the textual day name.
|
|
*
|
|
* Example:
|
|
*
|
|
* var dt = new Date('1/10/2007'),
|
|
* firstDay = Ext.Date.getFirstDayOfMonth(dt);
|
|
* console.log(Ext.Date.dayNames[firstDay]); // output: 'Monday'
|
|
*
|
|
* @param {Date} date The date
|
|
* @return {Number} The day number (0-6).
|
|
*/
|
|
getFirstDayOfMonth : function(date) {
|
|
var day = (date.getDay() - (date.getDate() - 1)) % 7;
|
|
return (day < 0) ? (day + 7) : day;
|
|
},
|
|
|
|
/**
|
|
* Get the last day of the current month, adjusted for leap year. The returned value
|
|
* is the numeric day index within the week (0-6) which can be used in conjunction with
|
|
* the {@link #monthNames} array to retrieve the textual day name.
|
|
*
|
|
* Example:
|
|
*
|
|
* var dt = new Date('1/10/2007'),
|
|
* lastDay = Ext.Date.getLastDayOfMonth(dt);
|
|
* console.log(Ext.Date.dayNames[lastDay]); // output: 'Wednesday'
|
|
*
|
|
* @param {Date} date The date
|
|
* @return {Number} The day number (0-6).
|
|
*/
|
|
getLastDayOfMonth : function(date) {
|
|
return utilDate.getLastDateOfMonth(date).getDay();
|
|
},
|
|
|
|
|
|
/**
|
|
* Get the date of the first day of the month in which this date resides.
|
|
* @param {Date} date The date
|
|
* @return {Date}
|
|
*/
|
|
getFirstDateOfMonth : function(date) {
|
|
return new Date(date.getFullYear(), date.getMonth(), 1);
|
|
},
|
|
|
|
/**
|
|
* Get the date of the last day of the month in which this date resides.
|
|
* @param {Date} date The date
|
|
* @return {Date}
|
|
*/
|
|
getLastDateOfMonth : function(date) {
|
|
return new Date(date.getFullYear(), date.getMonth(), utilDate.getDaysInMonth(date));
|
|
},
|
|
|
|
/**
|
|
* Get the number of days in the current month, adjusted for leap year.
|
|
* @param {Date} date The date
|
|
* @return {Number} The number of days in the month.
|
|
* @method
|
|
*/
|
|
getDaysInMonth: (function() {
|
|
var daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
|
|
|
return function(date) { // return a closure for efficiency
|
|
var m = date.getMonth();
|
|
|
|
return m == 1 && utilDate.isLeapYear(date) ? 29 : daysInMonth[m];
|
|
};
|
|
}()),
|
|
|
|
//<locale type="function">
|
|
/**
|
|
* Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
|
|
* @param {Date} date The date
|
|
* @return {String} 'st, 'nd', 'rd' or 'th'.
|
|
*/
|
|
getSuffix : function(date) {
|
|
switch (date.getDate()) {
|
|
case 1:
|
|
case 21:
|
|
case 31:
|
|
return "st";
|
|
case 2:
|
|
case 22:
|
|
return "nd";
|
|
case 3:
|
|
case 23:
|
|
return "rd";
|
|
default:
|
|
return "th";
|
|
}
|
|
},
|
|
//</locale>
|
|
|
|
/**
|
|
* Creates and returns a new Date instance with the exact same date value as the called instance.
|
|
* Dates are copied and passed by reference, so if a copied date variable is modified later, the original
|
|
* variable will also be changed. When the intention is to create a new variable that will not
|
|
* modify the original instance, you should create a clone.
|
|
*
|
|
* Example of correctly cloning a date:
|
|
*
|
|
* //wrong way:
|
|
* var orig = new Date('10/1/2006');
|
|
* var copy = orig;
|
|
* copy.setDate(5);
|
|
* console.log(orig); // returns 'Thu Oct 05 2006'!
|
|
*
|
|
* //correct way:
|
|
* var orig = new Date('10/1/2006'),
|
|
* copy = Ext.Date.clone(orig);
|
|
* copy.setDate(5);
|
|
* console.log(orig); // returns 'Thu Oct 01 2006'
|
|
*
|
|
* @param {Date} date The date.
|
|
* @return {Date} The new Date instance.
|
|
*/
|
|
clone : function(date) {
|
|
return new Date(date.getTime());
|
|
},
|
|
|
|
/**
|
|
* Checks if the current date is affected by Daylight Saving Time (DST).
|
|
* @param {Date} date The date
|
|
* @return {Boolean} `true` if the current date is affected by DST.
|
|
*/
|
|
isDST : function(date) {
|
|
// adapted from http://sencha.com/forum/showthread.php?p=247172#post247172
|
|
// courtesy of @geoffrey.mcgill
|
|
return new Date(date.getFullYear(), 0, 1).getTimezoneOffset() != date.getTimezoneOffset();
|
|
},
|
|
|
|
/**
|
|
* Attempts to clear all time information from this Date by setting the time to midnight of the same day,
|
|
* automatically adjusting for Daylight Saving Time (DST) where applicable.
|
|
*
|
|
* __Note:__ DST timezone information for the browser's host operating system is assumed to be up-to-date.
|
|
* @param {Date} date The date
|
|
* @param {Boolean} [clone=false] `true` to create a clone of this date, clear the time and return it.
|
|
* @return {Date} this or the clone.
|
|
*/
|
|
clearTime : function(date, clone) {
|
|
if (clone) {
|
|
return Ext.Date.clearTime(Ext.Date.clone(date));
|
|
}
|
|
|
|
// get current date before clearing time
|
|
var d = date.getDate(),
|
|
hr,
|
|
c;
|
|
|
|
// clear time
|
|
date.setHours(0);
|
|
date.setMinutes(0);
|
|
date.setSeconds(0);
|
|
date.setMilliseconds(0);
|
|
|
|
if (date.getDate() != d) { // account for DST (i.e. day of month changed when setting hour = 0)
|
|
// note: DST adjustments are assumed to occur in multiples of 1 hour (this is almost always the case)
|
|
// refer to http://www.timeanddate.com/time/aboutdst.html for the (rare) exceptions to this rule
|
|
|
|
// increment hour until cloned date == current date
|
|
for (hr = 1, c = utilDate.add(date, Ext.Date.HOUR, hr); c.getDate() != d; hr++, c = utilDate.add(date, Ext.Date.HOUR, hr));
|
|
|
|
date.setDate(d);
|
|
date.setHours(c.getHours());
|
|
}
|
|
|
|
return date;
|
|
},
|
|
|
|
/**
|
|
* Provides a convenient method for performing basic date arithmetic. This method
|
|
* does not modify the Date instance being called - it creates and returns
|
|
* a new Date instance containing the resulting date value.
|
|
*
|
|
* Examples:
|
|
*
|
|
* // Basic usage:
|
|
* var dt = Ext.Date.add(new Date('10/29/2006'), Ext.Date.DAY, 5);
|
|
* console.log(dt); // returns 'Fri Nov 03 2006 00:00:00'
|
|
*
|
|
* // Negative values will be subtracted:
|
|
* var dt2 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, -5);
|
|
* console.log(dt2); // returns 'Tue Sep 26 2006 00:00:00'
|
|
*
|
|
* // Decimal values can be used:
|
|
* var dt3 = Ext.Date.add(new Date('10/1/2006'), Ext.Date.DAY, 1.25);
|
|
* console.log(dt3); // returns 'Mon Oct 02 2006 06:00:00'
|
|
*
|
|
* @param {Date} date The date to modify
|
|
* @param {String} interval A valid date interval enum value.
|
|
* @param {Number} value The amount to add to the current date.
|
|
* @return {Date} The new Date instance.
|
|
*/
|
|
add : function(date, interval, value) {
|
|
var d = Ext.Date.clone(date),
|
|
Date = Ext.Date,
|
|
day, decimalValue, base = 0;
|
|
if (!interval || value === 0) {
|
|
return d;
|
|
}
|
|
|
|
decimalValue = value - parseInt(value, 10);
|
|
value = parseInt(value, 10);
|
|
|
|
if (value) {
|
|
switch(interval.toLowerCase()) {
|
|
// See EXTJSIV-7418. We use setTime() here to deal with issues related to
|
|
// the switchover that occurs when changing to daylight savings and vice
|
|
// versa. setTime() handles this correctly where setHour/Minute/Second/Millisecond
|
|
// do not. Let's assume the DST change occurs at 2am and we're incrementing using add
|
|
// for 15 minutes at time. When entering DST, we should see:
|
|
// 01:30am
|
|
// 01:45am
|
|
// 03:00am // skip 2am because the hour does not exist
|
|
// ...
|
|
// Similarly, leaving DST, we should see:
|
|
// 01:30am
|
|
// 01:45am
|
|
// 01:00am // repeat 1am because that's the change over
|
|
// 01:30am
|
|
// 01:45am
|
|
// 02:00am
|
|
// ....
|
|
//
|
|
case Ext.Date.MILLI:
|
|
d.setTime(d.getTime() + value);
|
|
break;
|
|
case Ext.Date.SECOND:
|
|
d.setTime(d.getTime() + value * 1000);
|
|
break;
|
|
case Ext.Date.MINUTE:
|
|
d.setTime(d.getTime() + value * 60 * 1000);
|
|
break;
|
|
case Ext.Date.HOUR:
|
|
d.setTime(d.getTime() + value * 60 * 60 * 1000);
|
|
break;
|
|
case Ext.Date.DAY:
|
|
d.setDate(d.getDate() + value);
|
|
break;
|
|
case Ext.Date.MONTH:
|
|
day = date.getDate();
|
|
if (day > 28) {
|
|
day = Math.min(day, Ext.Date.getLastDateOfMonth(Ext.Date.add(Ext.Date.getFirstDateOfMonth(date), Ext.Date.MONTH, value)).getDate());
|
|
}
|
|
d.setDate(day);
|
|
d.setMonth(date.getMonth() + value);
|
|
break;
|
|
case Ext.Date.YEAR:
|
|
day = date.getDate();
|
|
if (day > 28) {
|
|
day = Math.min(day, Ext.Date.getLastDateOfMonth(Ext.Date.add(Ext.Date.getFirstDateOfMonth(date), Ext.Date.YEAR, value)).getDate());
|
|
}
|
|
d.setDate(day);
|
|
d.setFullYear(date.getFullYear() + value);
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (decimalValue) {
|
|
switch (interval.toLowerCase()) {
|
|
case Ext.Date.MILLI: base = 1; break;
|
|
case Ext.Date.SECOND: base = 1000; break;
|
|
case Ext.Date.MINUTE: base = 1000*60; break;
|
|
case Ext.Date.HOUR: base = 1000*60*60; break;
|
|
case Ext.Date.DAY: base = 1000*60*60*24; break;
|
|
|
|
case Ext.Date.MONTH:
|
|
day = utilDate.getDaysInMonth(d);
|
|
base = 1000*60*60*24*day;
|
|
break;
|
|
|
|
case Ext.Date.YEAR:
|
|
day = (utilDate.isLeapYear(d) ? 366 : 365);
|
|
base = 1000*60*60*24*day;
|
|
break;
|
|
}
|
|
if (base) {
|
|
d.setTime(d.getTime() + base * decimalValue);
|
|
}
|
|
}
|
|
|
|
return d;
|
|
},
|
|
|
|
/**
|
|
* Provides a convenient method for performing basic date arithmetic. This method
|
|
* does not modify the Date instance being called - it creates and returns
|
|
* a new Date instance containing the resulting date value.
|
|
*
|
|
* Examples:
|
|
*
|
|
* // Basic usage:
|
|
* var dt = Ext.Date.subtract(new Date('10/29/2006'), Ext.Date.DAY, 5);
|
|
* console.log(dt); // returns 'Tue Oct 24 2006 00:00:00'
|
|
*
|
|
* // Negative values will be added:
|
|
* var dt2 = Ext.Date.subtract(new Date('10/1/2006'), Ext.Date.DAY, -5);
|
|
* console.log(dt2); // returns 'Fri Oct 6 2006 00:00:00'
|
|
*
|
|
* // Decimal values can be used:
|
|
* var dt3 = Ext.Date.subtract(new Date('10/1/2006'), Ext.Date.DAY, 1.25);
|
|
* console.log(dt3); // returns 'Fri Sep 29 2006 06:00:00'
|
|
*
|
|
* @param {Date} date The date to modify
|
|
* @param {String} interval A valid date interval enum value.
|
|
* @param {Number} value The amount to subtract from the current date.
|
|
* @return {Date} The new Date instance.
|
|
*/
|
|
subtract: function(date, interval, value){
|
|
return utilDate.add(date, interval, -value);
|
|
},
|
|
|
|
/**
|
|
* Checks if a date falls on or between the given start and end dates.
|
|
* @param {Date} date The date to check
|
|
* @param {Date} start Start date
|
|
* @param {Date} end End date
|
|
* @return {Boolean} `true` if this date falls on or between the given start and end dates.
|
|
*/
|
|
between : function(date, start, end) {
|
|
var t = date.getTime();
|
|
return start.getTime() <= t && t <= end.getTime();
|
|
},
|
|
|
|
//Maintains compatibility with old static and prototype window.Date methods.
|
|
compat: function() {
|
|
var nativeDate = window.Date,
|
|
p,
|
|
statics = ['useStrict', 'formatCodeToRegex', 'parseFunctions', 'parseRegexes', 'formatFunctions', 'y2kYear', 'MILLI', 'SECOND', 'MINUTE', 'HOUR', 'DAY', 'MONTH', 'YEAR', 'defaults', 'dayNames', 'monthNames', 'monthNumbers', 'getShortMonthName', 'getShortDayName', 'getMonthNumber', 'formatCodes', 'isValid', 'parseDate', 'getFormatCode', 'createFormat', 'createParser', 'parseCodes'],
|
|
proto = ['dateFormat', 'format', 'getTimezone', 'getGMTOffset', 'getDayOfYear', 'getWeekOfYear', 'isLeapYear', 'getFirstDayOfMonth', 'getLastDayOfMonth', 'getDaysInMonth', 'getSuffix', 'clone', 'isDST', 'clearTime', 'add', 'between'],
|
|
sLen = statics.length,
|
|
pLen = proto.length,
|
|
stat, prot, s;
|
|
|
|
//Append statics
|
|
for (s = 0; s < sLen; s++) {
|
|
stat = statics[s];
|
|
nativeDate[stat] = utilDate[stat];
|
|
}
|
|
|
|
//Append to prototype
|
|
for (p = 0; p < pLen; p++) {
|
|
prot = proto[p];
|
|
nativeDate.prototype[prot] = function() {
|
|
var args = Array.prototype.slice.call(arguments);
|
|
args.unshift(this);
|
|
return utilDate[prot].apply(utilDate, args);
|
|
};
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// @tag foundation,core
|
|
// @require ../lang/Date.js
|
|
// @define Ext.Base
|
|
|
|
/**
|
|
* @author Jacky Nguyen <jacky@sencha.com>
|
|
* @docauthor Jacky Nguyen <jacky@sencha.com>
|
|
* @class Ext.Base
|
|
*
|
|
* The root of all classes created with {@link Ext#define}.
|
|
*
|
|
* Ext.Base is the building block of all Ext classes. All classes in Ext inherit from Ext.Base.
|
|
* All prototype and static members of this class are inherited by all other classes.
|
|
*/
|
|
(function(flexSetter) {
|
|
|
|
var noArgs = [],
|
|
Base = function(){},
|
|
hookFunctionFactory = function(hookFunction, underriddenFunction, methodName, owningClass) {
|
|
var result = function() {
|
|
var result = this.callParent(arguments);
|
|
hookFunction.apply(this, arguments);
|
|
return result;
|
|
};
|
|
result.$name = methodName;
|
|
result.$owner = owningClass;
|
|
if (underriddenFunction) {
|
|
result.$previous = underriddenFunction.$previous;
|
|
underriddenFunction.$previous = result;
|
|
}
|
|
return result;
|
|
};
|
|
|
|
// These static properties will be copied to every newly created class with {@link Ext#define}
|
|
Ext.apply(Base, {
|
|
$className: 'Ext.Base',
|
|
|
|
$isClass: true,
|
|
|
|
/**
|
|
* Create a new instance of this Class.
|
|
*
|
|
* Ext.define('My.cool.Class', {
|
|
* ...
|
|
* });
|
|
*
|
|
* My.cool.Class.create({
|
|
* someConfig: true
|
|
* });
|
|
*
|
|
* All parameters are passed to the constructor of the class.
|
|
*
|
|
* @return {Object} the created instance.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
create: function() {
|
|
return Ext.create.apply(Ext, [this].concat(Array.prototype.slice.call(arguments, 0)));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
* @param config
|
|
*/
|
|
extend: function(parent) {
|
|
var parentPrototype = parent.prototype,
|
|
basePrototype, prototype, i, ln, name, statics;
|
|
|
|
prototype = this.prototype = Ext.Object.chain(parentPrototype);
|
|
prototype.self = this;
|
|
|
|
this.superclass = prototype.superclass = parentPrototype;
|
|
|
|
if (!parent.$isClass) {
|
|
basePrototype = Ext.Base.prototype;
|
|
|
|
for (i in basePrototype) {
|
|
if (i in prototype) {
|
|
prototype[i] = basePrototype[i];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Statics inheritance
|
|
statics = parentPrototype.$inheritableStatics;
|
|
|
|
if (statics) {
|
|
for (i = 0,ln = statics.length; i < ln; i++) {
|
|
name = statics[i];
|
|
|
|
if (!this.hasOwnProperty(name)) {
|
|
this[name] = parent[name];
|
|
}
|
|
}
|
|
}
|
|
|
|
if (parent.$onExtended) {
|
|
this.$onExtended = parent.$onExtended.slice();
|
|
}
|
|
|
|
prototype.config = new prototype.configClass();
|
|
prototype.initConfigList = prototype.initConfigList.slice();
|
|
prototype.initConfigMap = Ext.clone(prototype.initConfigMap);
|
|
prototype.configMap = Ext.Object.chain(prototype.configMap);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
$onExtended: [],
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
triggerExtended: function() {
|
|
|
|
var callbacks = this.$onExtended,
|
|
ln = callbacks.length,
|
|
i, callback;
|
|
|
|
if (ln > 0) {
|
|
for (i = 0; i < ln; i++) {
|
|
callback = callbacks[i];
|
|
callback.fn.apply(callback.scope || this, arguments);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
onExtended: function(fn, scope) {
|
|
this.$onExtended.push({
|
|
fn: fn,
|
|
scope: scope
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
* @param config
|
|
*/
|
|
addConfig: function(config, fullMerge) {
|
|
var prototype = this.prototype,
|
|
configNameCache = Ext.Class.configNameCache,
|
|
hasConfig = prototype.configMap,
|
|
initConfigList = prototype.initConfigList,
|
|
initConfigMap = prototype.initConfigMap,
|
|
defaultConfig = prototype.config,
|
|
initializedName, name, value;
|
|
|
|
for (name in config) {
|
|
if (config.hasOwnProperty(name)) {
|
|
if (!hasConfig[name]) {
|
|
hasConfig[name] = true;
|
|
}
|
|
|
|
value = config[name];
|
|
|
|
initializedName = configNameCache[name].initialized;
|
|
|
|
if (!initConfigMap[name] && value !== null && !prototype[initializedName]) {
|
|
initConfigMap[name] = true;
|
|
initConfigList.push(name);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (fullMerge) {
|
|
Ext.merge(defaultConfig, config);
|
|
}
|
|
else {
|
|
Ext.mergeIf(defaultConfig, config);
|
|
}
|
|
|
|
prototype.configClass = Ext.Object.classify(defaultConfig);
|
|
},
|
|
|
|
/**
|
|
* Add / override static properties of this class.
|
|
*
|
|
* Ext.define('My.cool.Class', {
|
|
* ...
|
|
* });
|
|
*
|
|
* My.cool.Class.addStatics({
|
|
* someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
|
|
* method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
|
|
* method2: function() { ... } // My.cool.Class.method2 = function() { ... };
|
|
* });
|
|
*
|
|
* @param {Object} members
|
|
* @return {Ext.Base} this
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
addStatics: function(members) {
|
|
var member, name;
|
|
|
|
for (name in members) {
|
|
if (members.hasOwnProperty(name)) {
|
|
member = members[name];
|
|
if (typeof member == 'function' && !member.$isClass && member !== Ext.emptyFn && member !== Ext.identityFn) {
|
|
member.$owner = this;
|
|
member.$name = name;
|
|
}
|
|
this[name] = member;
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
* @param {Object} members
|
|
*/
|
|
addInheritableStatics: function(members) {
|
|
var inheritableStatics,
|
|
hasInheritableStatics,
|
|
prototype = this.prototype,
|
|
name, member;
|
|
|
|
inheritableStatics = prototype.$inheritableStatics;
|
|
hasInheritableStatics = prototype.$hasInheritableStatics;
|
|
|
|
if (!inheritableStatics) {
|
|
inheritableStatics = prototype.$inheritableStatics = [];
|
|
hasInheritableStatics = prototype.$hasInheritableStatics = {};
|
|
}
|
|
|
|
for (name in members) {
|
|
if (members.hasOwnProperty(name)) {
|
|
member = members[name];
|
|
this[name] = member;
|
|
|
|
if (!hasInheritableStatics[name]) {
|
|
hasInheritableStatics[name] = true;
|
|
inheritableStatics.push(name);
|
|
}
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Add methods / properties to the prototype of this class.
|
|
*
|
|
* Ext.define('My.awesome.Cat', {
|
|
* constructor: function() {
|
|
* ...
|
|
* }
|
|
* });
|
|
*
|
|
* My.awesome.Cat.addMembers({
|
|
* meow: function() {
|
|
* alert('Meowww...');
|
|
* }
|
|
* });
|
|
*
|
|
* var kitty = new My.awesome.Cat;
|
|
* kitty.meow();
|
|
*
|
|
* @param {Object} members
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
addMembers: function(members) {
|
|
var prototype = this.prototype,
|
|
enumerables = Ext.enumerables,
|
|
names = [],
|
|
i, ln, name, member;
|
|
|
|
for (name in members) {
|
|
names.push(name);
|
|
}
|
|
|
|
if (enumerables) {
|
|
names.push.apply(names, enumerables);
|
|
}
|
|
|
|
for (i = 0,ln = names.length; i < ln; i++) {
|
|
name = names[i];
|
|
|
|
if (members.hasOwnProperty(name)) {
|
|
member = members[name];
|
|
|
|
if (typeof member == 'function' && !member.$isClass && member !== Ext.emptyFn && member !== Ext.identityFn) {
|
|
member.$owner = this;
|
|
member.$name = name;
|
|
}
|
|
|
|
prototype[name] = member;
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
* @param name
|
|
* @param member
|
|
*/
|
|
addMember: function(name, member) {
|
|
if (typeof member == 'function' && !member.$isClass && member !== Ext.emptyFn && member !== Ext.identityFn) {
|
|
member.$owner = this;
|
|
member.$name = name;
|
|
}
|
|
|
|
this.prototype[name] = member;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Adds members to class.
|
|
* @static
|
|
* @inheritable
|
|
* @deprecated 4.1 Use {@link #addMembers} instead.
|
|
*/
|
|
implement: function() {
|
|
this.addMembers.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Borrow another class' members to the prototype of this class.
|
|
*
|
|
* Ext.define('Bank', {
|
|
* money: '$$$',
|
|
* printMoney: function() {
|
|
* alert('$$$$$$$');
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('Thief', {
|
|
* ...
|
|
* });
|
|
*
|
|
* Thief.borrow(Bank, ['money', 'printMoney']);
|
|
*
|
|
* var steve = new Thief();
|
|
*
|
|
* alert(steve.money); // alerts '$$$'
|
|
* steve.printMoney(); // alerts '$$$$$$$'
|
|
*
|
|
* @param {Ext.Base} fromClass The class to borrow members from
|
|
* @param {Array/String} members The names of the members to borrow
|
|
* @return {Ext.Base} this
|
|
* @static
|
|
* @inheritable
|
|
* @private
|
|
*/
|
|
borrow: function(fromClass, members) {
|
|
|
|
var prototype = this.prototype,
|
|
fromPrototype = fromClass.prototype,
|
|
i, ln, name, fn, toBorrow;
|
|
|
|
members = Ext.Array.from(members);
|
|
|
|
for (i = 0,ln = members.length; i < ln; i++) {
|
|
name = members[i];
|
|
|
|
toBorrow = fromPrototype[name];
|
|
|
|
if (typeof toBorrow == 'function') {
|
|
fn = Ext.Function.clone(toBorrow);
|
|
|
|
|
|
fn.$owner = this;
|
|
fn.$name = name;
|
|
|
|
prototype[name] = fn;
|
|
}
|
|
else {
|
|
prototype[name] = toBorrow;
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Override members of this class. Overridden methods can be invoked via
|
|
* {@link Ext.Base#callParent}.
|
|
*
|
|
* Ext.define('My.Cat', {
|
|
* constructor: function() {
|
|
* alert("I'm a cat!");
|
|
* }
|
|
* });
|
|
*
|
|
* My.Cat.override({
|
|
* constructor: function() {
|
|
* alert("I'm going to be a cat!");
|
|
*
|
|
* this.callParent(arguments);
|
|
*
|
|
* alert("Meeeeoooowwww");
|
|
* }
|
|
* });
|
|
*
|
|
* var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
|
|
* // alerts "I'm a cat!"
|
|
* // alerts "Meeeeoooowwww"
|
|
*
|
|
* As of 4.1, direct use of this method is deprecated. Use {@link Ext#define Ext.define}
|
|
* instead:
|
|
*
|
|
* Ext.define('My.CatOverride', {
|
|
* override: 'My.Cat',
|
|
* constructor: function() {
|
|
* alert("I'm going to be a cat!");
|
|
*
|
|
* this.callParent(arguments);
|
|
*
|
|
* alert("Meeeeoooowwww");
|
|
* }
|
|
* });
|
|
*
|
|
* The above accomplishes the same result but can be managed by the {@link Ext.Loader}
|
|
* which can properly order the override and its target class and the build process
|
|
* can determine whether the override is needed based on the required state of the
|
|
* target class (My.Cat).
|
|
*
|
|
* @param {Object} members The properties to add to this class. This should be
|
|
* specified as an object literal containing one or more properties.
|
|
* @return {Ext.Base} this class
|
|
* @static
|
|
* @inheritable
|
|
* @markdown
|
|
* @deprecated 4.1.0 Use {@link Ext#define Ext.define} instead
|
|
*/
|
|
override: function(members) {
|
|
var me = this,
|
|
enumerables = Ext.enumerables,
|
|
target = me.prototype,
|
|
cloneFunction = Ext.Function.clone,
|
|
name, index, member, statics, names, previous;
|
|
|
|
if (arguments.length === 2) {
|
|
name = members;
|
|
members = {};
|
|
members[name] = arguments[1];
|
|
enumerables = null;
|
|
}
|
|
|
|
do {
|
|
names = []; // clean slate for prototype (1st pass) and static (2nd pass)
|
|
statics = null; // not needed 1st pass, but needs to be cleared for 2nd pass
|
|
|
|
for (name in members) { // hasOwnProperty is checked in the next loop...
|
|
if (name == 'statics') {
|
|
statics = members[name];
|
|
} else if (name == 'inheritableStatics'){
|
|
me.addInheritableStatics(members[name]);
|
|
} else if (name == 'config') {
|
|
me.addConfig(members[name], true);
|
|
} else {
|
|
names.push(name);
|
|
}
|
|
}
|
|
|
|
if (enumerables) {
|
|
names.push.apply(names, enumerables);
|
|
}
|
|
|
|
for (index = names.length; index--; ) {
|
|
name = names[index];
|
|
|
|
if (members.hasOwnProperty(name)) {
|
|
member = members[name];
|
|
|
|
if (typeof member == 'function' && !member.$className && member !== Ext.emptyFn && member !== Ext.identityFn) {
|
|
if (typeof member.$owner != 'undefined') {
|
|
member = cloneFunction(member);
|
|
}
|
|
|
|
|
|
member.$owner = me;
|
|
member.$name = name;
|
|
|
|
previous = target[name];
|
|
if (previous) {
|
|
member.$previous = previous;
|
|
}
|
|
}
|
|
|
|
target[name] = member;
|
|
}
|
|
}
|
|
|
|
target = me; // 2nd pass is for statics
|
|
members = statics; // statics will be null on 2nd pass
|
|
} while (members);
|
|
|
|
return this;
|
|
},
|
|
|
|
// Documented downwards
|
|
callParent: function(args) {
|
|
var method;
|
|
|
|
// This code is intentionally inlined for the least number of debugger stepping
|
|
return (method = this.callParent.caller) && (method.$previous ||
|
|
((method = method.$owner ? method : method.caller) &&
|
|
method.$owner.superclass.self[method.$name])).apply(this, args || noArgs);
|
|
},
|
|
|
|
// Documented downwards
|
|
callSuper: function(args) {
|
|
var method;
|
|
|
|
// This code is intentionally inlined for the least number of debugger stepping
|
|
return (method = this.callSuper.caller) &&
|
|
((method = method.$owner ? method : method.caller) &&
|
|
method.$owner.superclass.self[method.$name]).apply(this, args || noArgs);
|
|
},
|
|
|
|
/**
|
|
* Used internally by the mixins pre-processor
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
mixin: function(name, mixinClass) {
|
|
var me = this,
|
|
mixin = mixinClass.prototype,
|
|
prototype = me.prototype,
|
|
key, statics, i, ln, staticName,
|
|
mixinValue, hookKey, hookFunction;
|
|
|
|
if (typeof mixin.onClassMixedIn != 'undefined') {
|
|
mixin.onClassMixedIn.call(mixinClass, me);
|
|
}
|
|
|
|
if (!prototype.hasOwnProperty('mixins')) {
|
|
if ('mixins' in prototype) {
|
|
prototype.mixins = Ext.Object.chain(prototype.mixins);
|
|
}
|
|
else {
|
|
prototype.mixins = {};
|
|
}
|
|
}
|
|
|
|
for (key in mixin) {
|
|
mixinValue = mixin[key];
|
|
if (key === 'mixins') {
|
|
Ext.merge(prototype.mixins, mixinValue);
|
|
}
|
|
else if (key === 'xhooks') {
|
|
for (hookKey in mixinValue) {
|
|
hookFunction = mixinValue[hookKey];
|
|
|
|
// Mixed in xhook methods cannot call a parent.
|
|
hookFunction.$previous = Ext.emptyFn;
|
|
|
|
if (prototype.hasOwnProperty(hookKey)) {
|
|
|
|
// Pass the hook function, and the existing function which it is to underride.
|
|
// The existing function has its $previous pointer replaced by a closure
|
|
// which calls the hookFunction and then the existing function's original $previous
|
|
hookFunctionFactory(hookFunction, prototype[hookKey], hookKey, me);
|
|
} else {
|
|
// There's no original function, so generate an implementation which calls
|
|
// the hook function. It will not get any $previous pointer.
|
|
prototype[hookKey] = hookFunctionFactory(hookFunction, null, hookKey, me);
|
|
}
|
|
}
|
|
}
|
|
else if (!(key === 'mixinId' || key === 'config') && (prototype[key] === undefined)) {
|
|
prototype[key] = mixinValue;
|
|
}
|
|
}
|
|
|
|
// Mixin statics inheritance
|
|
statics = mixin.$inheritableStatics;
|
|
|
|
if (statics) {
|
|
for (i = 0, ln = statics.length; i < ln; i++) {
|
|
staticName = statics[i];
|
|
|
|
if (!me.hasOwnProperty(staticName)) {
|
|
me[staticName] = mixinClass[staticName];
|
|
}
|
|
}
|
|
}
|
|
|
|
if ('config' in mixin) {
|
|
me.addConfig(mixin.config, false);
|
|
}
|
|
|
|
prototype.mixins[name] = mixin;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Get the current class' name in string format.
|
|
*
|
|
* Ext.define('My.cool.Class', {
|
|
* constructor: function() {
|
|
* alert(this.self.getName()); // alerts 'My.cool.Class'
|
|
* }
|
|
* });
|
|
*
|
|
* My.cool.Class.getName(); // 'My.cool.Class'
|
|
*
|
|
* @return {String} className
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
getName: function() {
|
|
return Ext.getClassName(this);
|
|
},
|
|
|
|
/**
|
|
* Create aliases for existing prototype methods. Example:
|
|
*
|
|
* Ext.define('My.cool.Class', {
|
|
* method1: function() { ... },
|
|
* method2: function() { ... }
|
|
* });
|
|
*
|
|
* var test = new My.cool.Class();
|
|
*
|
|
* My.cool.Class.createAlias({
|
|
* method3: 'method1',
|
|
* method4: 'method2'
|
|
* });
|
|
*
|
|
* test.method3(); // test.method1()
|
|
*
|
|
* My.cool.Class.createAlias('method5', 'method3');
|
|
*
|
|
* test.method5(); // test.method3() -> test.method1()
|
|
*
|
|
* @param {String/Object} alias The new method name, or an object to set multiple aliases. See
|
|
* {@link Ext.Function#flexSetter flexSetter}
|
|
* @param {String/Object} origin The original method name
|
|
* @static
|
|
* @inheritable
|
|
* @method
|
|
*/
|
|
createAlias: flexSetter(function(alias, origin) {
|
|
this.override(alias, function() {
|
|
return this[origin].apply(this, arguments);
|
|
});
|
|
}),
|
|
|
|
/**
|
|
* @private
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
addXtype: function(xtype) {
|
|
var prototype = this.prototype,
|
|
xtypesMap = prototype.xtypesMap,
|
|
xtypes = prototype.xtypes,
|
|
xtypesChain = prototype.xtypesChain;
|
|
|
|
if (!prototype.hasOwnProperty('xtypesMap')) {
|
|
xtypesMap = prototype.xtypesMap = Ext.merge({}, prototype.xtypesMap || {});
|
|
xtypes = prototype.xtypes = prototype.xtypes ? [].concat(prototype.xtypes) : [];
|
|
xtypesChain = prototype.xtypesChain = prototype.xtypesChain ? [].concat(prototype.xtypesChain) : [];
|
|
prototype.xtype = xtype;
|
|
}
|
|
|
|
if (!xtypesMap[xtype]) {
|
|
xtypesMap[xtype] = true;
|
|
xtypes.push(xtype);
|
|
xtypesChain.push(xtype);
|
|
Ext.ClassManager.setAlias(this, 'widget.' + xtype);
|
|
}
|
|
|
|
return this;
|
|
}
|
|
});
|
|
|
|
Base.implement({
|
|
/** @private */
|
|
isInstance: true,
|
|
|
|
/** @private */
|
|
$className: 'Ext.Base',
|
|
|
|
/** @private */
|
|
configClass: Ext.emptyFn,
|
|
|
|
/** @private */
|
|
initConfigList: [],
|
|
|
|
/** @private */
|
|
configMap: {},
|
|
|
|
/** @private */
|
|
initConfigMap: {},
|
|
|
|
/**
|
|
* Get the reference to the class from which this object was instantiated. Note that unlike {@link Ext.Base#self},
|
|
* `this.statics()` is scope-independent and it always returns the class from which it was called, regardless of what
|
|
* `this` points to during run-time
|
|
*
|
|
* Ext.define('My.Cat', {
|
|
* statics: {
|
|
* totalCreated: 0,
|
|
* speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
|
|
* },
|
|
*
|
|
* constructor: function() {
|
|
* var statics = this.statics();
|
|
*
|
|
* alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
|
|
* // equivalent to: My.Cat.speciesName
|
|
*
|
|
* alert(this.self.speciesName); // dependent on 'this'
|
|
*
|
|
* statics.totalCreated++;
|
|
* },
|
|
*
|
|
* clone: function() {
|
|
* var cloned = new this.self; // dependent on 'this'
|
|
*
|
|
* cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
|
|
*
|
|
* return cloned;
|
|
* }
|
|
* });
|
|
*
|
|
*
|
|
* Ext.define('My.SnowLeopard', {
|
|
* extend: 'My.Cat',
|
|
*
|
|
* statics: {
|
|
* speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
|
|
* },
|
|
*
|
|
* constructor: function() {
|
|
* this.callParent();
|
|
* }
|
|
* });
|
|
*
|
|
* var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
|
|
*
|
|
* var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
|
|
*
|
|
* var clone = snowLeopard.clone();
|
|
* alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
|
|
* alert(clone.groupName); // alerts 'Cat'
|
|
*
|
|
* alert(My.Cat.totalCreated); // alerts 3
|
|
*
|
|
* @protected
|
|
* @return {Ext.Class}
|
|
*/
|
|
statics: function() {
|
|
var method = this.statics.caller,
|
|
self = this.self;
|
|
|
|
if (!method) {
|
|
return self;
|
|
}
|
|
|
|
return method.$owner;
|
|
},
|
|
|
|
/**
|
|
* Call the "parent" method of the current method. That is the method previously
|
|
* overridden by derivation or by an override (see {@link Ext#define}).
|
|
*
|
|
* Ext.define('My.Base', {
|
|
* constructor: function (x) {
|
|
* this.x = x;
|
|
* },
|
|
*
|
|
* statics: {
|
|
* method: function (x) {
|
|
* return x;
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('My.Derived', {
|
|
* extend: 'My.Base',
|
|
*
|
|
* constructor: function () {
|
|
* this.callParent([21]);
|
|
* }
|
|
* });
|
|
*
|
|
* var obj = new My.Derived();
|
|
*
|
|
* alert(obj.x); // alerts 21
|
|
*
|
|
* This can be used with an override as follows:
|
|
*
|
|
* Ext.define('My.DerivedOverride', {
|
|
* override: 'My.Derived',
|
|
*
|
|
* constructor: function (x) {
|
|
* this.callParent([x*2]); // calls original My.Derived constructor
|
|
* }
|
|
* });
|
|
*
|
|
* var obj = new My.Derived();
|
|
*
|
|
* alert(obj.x); // now alerts 42
|
|
*
|
|
* This also works with static methods.
|
|
*
|
|
* Ext.define('My.Derived2', {
|
|
* extend: 'My.Base',
|
|
*
|
|
* statics: {
|
|
* method: function (x) {
|
|
* return this.callParent([x*2]); // calls My.Base.method
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* alert(My.Base.method(10); // alerts 10
|
|
* alert(My.Derived2.method(10); // alerts 20
|
|
*
|
|
* Lastly, it also works with overridden static methods.
|
|
*
|
|
* Ext.define('My.Derived2Override', {
|
|
* override: 'My.Derived2',
|
|
*
|
|
* statics: {
|
|
* method: function (x) {
|
|
* return this.callParent([x*2]); // calls My.Derived2.method
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* alert(My.Derived2.method(10); // now alerts 40
|
|
*
|
|
* To override a method and replace it and also call the superclass method, use
|
|
* {@link #callSuper}. This is often done to patch a method to fix a bug.
|
|
*
|
|
* @protected
|
|
* @param {Array/Arguments} args The arguments, either an array or the `arguments` object
|
|
* from the current method, for example: `this.callParent(arguments)`
|
|
* @return {Object} Returns the result of calling the parent method
|
|
*/
|
|
callParent: function(args) {
|
|
// NOTE: this code is deliberately as few expressions (and no function calls)
|
|
// as possible so that a debugger can skip over this noise with the minimum number
|
|
// of steps. Basically, just hit Step Into until you are where you really wanted
|
|
// to be.
|
|
var method,
|
|
superMethod = (method = this.callParent.caller) && (method.$previous ||
|
|
((method = method.$owner ? method : method.caller) &&
|
|
method.$owner.superclass[method.$name]));
|
|
|
|
|
|
return superMethod.apply(this, args || noArgs);
|
|
},
|
|
|
|
/**
|
|
* This method is used by an override to call the superclass method but bypass any
|
|
* overridden method. This is often done to "patch" a method that contains a bug
|
|
* but for whatever reason cannot be fixed directly.
|
|
*
|
|
* Consider:
|
|
*
|
|
* Ext.define('Ext.some.Class', {
|
|
* method: function () {
|
|
* console.log('Good');
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('Ext.some.DerivedClass', {
|
|
* method: function () {
|
|
* console.log('Bad');
|
|
*
|
|
* // ... logic but with a bug ...
|
|
*
|
|
* this.callParent();
|
|
* }
|
|
* });
|
|
*
|
|
* To patch the bug in `DerivedClass.method`, the typical solution is to create an
|
|
* override:
|
|
*
|
|
* Ext.define('App.paches.DerivedClass', {
|
|
* override: 'Ext.some.DerivedClass',
|
|
*
|
|
* method: function () {
|
|
* console.log('Fixed');
|
|
*
|
|
* // ... logic but with bug fixed ...
|
|
*
|
|
* this.callSuper();
|
|
* }
|
|
* });
|
|
*
|
|
* The patch method cannot use `callParent` to call the superclass `method` since
|
|
* that would call the overridden method containing the bug. In other words, the
|
|
* above patch would only produce "Fixed" then "Good" in the console log, whereas,
|
|
* using `callParent` would produce "Fixed" then "Bad" then "Good".
|
|
*
|
|
* @protected
|
|
* @param {Array/Arguments} args The arguments, either an array or the `arguments` object
|
|
* from the current method, for example: `this.callSuper(arguments)`
|
|
* @return {Object} Returns the result of calling the superclass method
|
|
*/
|
|
callSuper: function(args) {
|
|
// NOTE: this code is deliberately as few expressions (and no function calls)
|
|
// as possible so that a debugger can skip over this noise with the minimum number
|
|
// of steps. Basically, just hit Step Into until you are where you really wanted
|
|
// to be.
|
|
var method,
|
|
superMethod = (method = this.callSuper.caller) &&
|
|
((method = method.$owner ? method : method.caller) &&
|
|
method.$owner.superclass[method.$name]);
|
|
|
|
|
|
return superMethod.apply(this, args || noArgs);
|
|
},
|
|
|
|
/**
|
|
* @property {Ext.Class} self
|
|
*
|
|
* Get the reference to the current class from which this object was instantiated. Unlike {@link Ext.Base#statics},
|
|
* `this.self` is scope-dependent and it's meant to be used for dynamic inheritance. See {@link Ext.Base#statics}
|
|
* for a detailed comparison
|
|
*
|
|
* Ext.define('My.Cat', {
|
|
* statics: {
|
|
* speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
|
|
* },
|
|
*
|
|
* constructor: function() {
|
|
* alert(this.self.speciesName); // dependent on 'this'
|
|
* },
|
|
*
|
|
* clone: function() {
|
|
* return new this.self();
|
|
* }
|
|
* });
|
|
*
|
|
*
|
|
* Ext.define('My.SnowLeopard', {
|
|
* extend: 'My.Cat',
|
|
* statics: {
|
|
* speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
|
|
* }
|
|
* });
|
|
*
|
|
* var cat = new My.Cat(); // alerts 'Cat'
|
|
* var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'
|
|
*
|
|
* var clone = snowLeopard.clone();
|
|
* alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
|
|
*
|
|
* @protected
|
|
*/
|
|
self: Base,
|
|
|
|
// Default constructor, simply returns `this`
|
|
constructor: function() {
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Initialize configuration for this class. a typical example:
|
|
*
|
|
* Ext.define('My.awesome.Class', {
|
|
* // The default config
|
|
* config: {
|
|
* name: 'Awesome',
|
|
* isAwesome: true
|
|
* },
|
|
*
|
|
* constructor: function(config) {
|
|
* this.initConfig(config);
|
|
* }
|
|
* });
|
|
*
|
|
* var awesome = new My.awesome.Class({
|
|
* name: 'Super Awesome'
|
|
* });
|
|
*
|
|
* alert(awesome.getName()); // 'Super Awesome'
|
|
*
|
|
* @protected
|
|
* @param {Object} config
|
|
* @return {Ext.Base} this
|
|
*/
|
|
initConfig: function(config) {
|
|
var instanceConfig = config,
|
|
configNameCache = Ext.Class.configNameCache,
|
|
defaultConfig = new this.configClass(),
|
|
defaultConfigList = this.initConfigList,
|
|
hasConfig = this.configMap,
|
|
nameMap, i, ln, name, initializedName;
|
|
|
|
this.initConfig = Ext.emptyFn;
|
|
|
|
this.initialConfig = instanceConfig || {};
|
|
|
|
this.config = config = (instanceConfig) ? Ext.merge(defaultConfig, config) : defaultConfig;
|
|
|
|
if (instanceConfig) {
|
|
defaultConfigList = defaultConfigList.slice();
|
|
|
|
for (name in instanceConfig) {
|
|
if (hasConfig[name]) {
|
|
if (instanceConfig[name] !== null) {
|
|
defaultConfigList.push(name);
|
|
this[configNameCache[name].initialized] = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
for (i = 0,ln = defaultConfigList.length; i < ln; i++) {
|
|
name = defaultConfigList[i];
|
|
nameMap = configNameCache[name];
|
|
initializedName = nameMap.initialized;
|
|
|
|
if (!this[initializedName]) {
|
|
this[initializedName] = true;
|
|
this[nameMap.set].call(this, config[name]);
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param config
|
|
*/
|
|
hasConfig: function(name) {
|
|
return Boolean(this.configMap[name]);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setConfig: function(config, applyIfNotSet) {
|
|
if (!config) {
|
|
return this;
|
|
}
|
|
|
|
var configNameCache = Ext.Class.configNameCache,
|
|
currentConfig = this.config,
|
|
hasConfig = this.configMap,
|
|
initialConfig = this.initialConfig,
|
|
name, value;
|
|
|
|
applyIfNotSet = Boolean(applyIfNotSet);
|
|
|
|
for (name in config) {
|
|
if (applyIfNotSet && initialConfig.hasOwnProperty(name)) {
|
|
continue;
|
|
}
|
|
|
|
value = config[name];
|
|
currentConfig[name] = value;
|
|
|
|
if (hasConfig[name]) {
|
|
this[configNameCache[name].set](value);
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param name
|
|
*/
|
|
getConfig: function(name) {
|
|
var configNameCache = Ext.Class.configNameCache;
|
|
|
|
return this[configNameCache[name].get]();
|
|
},
|
|
|
|
/**
|
|
* Returns the initial configuration passed to constructor when instantiating
|
|
* this class.
|
|
* @param {String} [name] Name of the config option to return.
|
|
* @return {Object/Mixed} The full config object or a single config value
|
|
* when `name` parameter specified.
|
|
*/
|
|
getInitialConfig: function(name) {
|
|
var config = this.config;
|
|
|
|
if (!name) {
|
|
return config;
|
|
}
|
|
else {
|
|
return config[name];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param names
|
|
* @param callback
|
|
* @param scope
|
|
*/
|
|
onConfigUpdate: function(names, callback, scope) {
|
|
var self = this.self,
|
|
i, ln, name,
|
|
updaterName, updater, newUpdater;
|
|
|
|
names = Ext.Array.from(names);
|
|
|
|
scope = scope || this;
|
|
|
|
for (i = 0,ln = names.length; i < ln; i++) {
|
|
name = names[i];
|
|
updaterName = 'update' + Ext.String.capitalize(name);
|
|
updater = this[updaterName] || Ext.emptyFn;
|
|
newUpdater = function() {
|
|
updater.apply(this, arguments);
|
|
scope[callback].apply(scope, arguments);
|
|
};
|
|
newUpdater.$name = updaterName;
|
|
newUpdater.$owner = self;
|
|
|
|
this[updaterName] = newUpdater;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
destroy: function() {
|
|
this.destroy = Ext.emptyFn;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Call the original method that was previously overridden with {@link Ext.Base#override}
|
|
*
|
|
* Ext.define('My.Cat', {
|
|
* constructor: function() {
|
|
* alert("I'm a cat!");
|
|
* }
|
|
* });
|
|
*
|
|
* My.Cat.override({
|
|
* constructor: function() {
|
|
* alert("I'm going to be a cat!");
|
|
*
|
|
* this.callOverridden();
|
|
*
|
|
* alert("Meeeeoooowwww");
|
|
* }
|
|
* });
|
|
*
|
|
* var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
|
|
* // alerts "I'm a cat!"
|
|
* // alerts "Meeeeoooowwww"
|
|
*
|
|
* @param {Array/Arguments} args The arguments, either an array or the `arguments` object
|
|
* from the current method, for example: `this.callOverridden(arguments)`
|
|
* @return {Object} Returns the result of calling the overridden method
|
|
* @protected
|
|
* @deprecated as of 4.1. Use {@link #callParent} instead.
|
|
*/
|
|
Base.prototype.callOverridden = Base.prototype.callParent;
|
|
|
|
Ext.Base = Base;
|
|
|
|
}(Ext.Function.flexSetter));
|
|
|
|
// @tag foundation,core
|
|
// @require Base.js
|
|
// @define Ext.Class
|
|
|
|
/**
|
|
* @author Jacky Nguyen <jacky@sencha.com>
|
|
* @docauthor Jacky Nguyen <jacky@sencha.com>
|
|
* @class Ext.Class
|
|
*
|
|
* Handles class creation throughout the framework. This is a low level factory that is used by Ext.ClassManager and generally
|
|
* should not be used directly. If you choose to use Ext.Class you will lose out on the namespace, aliasing and depency loading
|
|
* features made available by Ext.ClassManager. The only time you would use Ext.Class directly is to create an anonymous class.
|
|
*
|
|
* If you wish to create a class you should use {@link Ext#define Ext.define} which aliases
|
|
* {@link Ext.ClassManager#create Ext.ClassManager.create} to enable namespacing and dynamic dependency resolution.
|
|
*
|
|
* Ext.Class is the factory and **not** the superclass of everything. For the base class that **all** Ext classes inherit
|
|
* from, see {@link Ext.Base}.
|
|
*/
|
|
(function() {
|
|
var ExtClass,
|
|
Base = Ext.Base,
|
|
baseStaticMembers = [],
|
|
baseStaticMember, baseStaticMemberLength;
|
|
|
|
for (baseStaticMember in Base) {
|
|
if (Base.hasOwnProperty(baseStaticMember)) {
|
|
baseStaticMembers.push(baseStaticMember);
|
|
}
|
|
}
|
|
|
|
baseStaticMemberLength = baseStaticMembers.length;
|
|
|
|
// Creates a constructor that has nothing extra in its scope chain.
|
|
function makeCtor (className) {
|
|
function constructor () {
|
|
// Opera has some problems returning from a constructor when Dragonfly isn't running. The || null seems to
|
|
// be sufficient to stop it misbehaving. Known to be required against 10.53, 11.51 and 11.61.
|
|
return this.constructor.apply(this, arguments) || null;
|
|
}
|
|
return constructor;
|
|
}
|
|
|
|
/**
|
|
* @method constructor
|
|
* Create a new anonymous class.
|
|
*
|
|
* @param {Object} data An object represent the properties of this class
|
|
* @param {Function} onCreated Optional, the callback function to be executed when this class is fully created.
|
|
* Note that the creation process can be asynchronous depending on the pre-processors used.
|
|
*
|
|
* @return {Ext.Base} The newly created class
|
|
*/
|
|
Ext.Class = ExtClass = function(Class, data, onCreated) {
|
|
if (typeof Class != 'function') {
|
|
onCreated = data;
|
|
data = Class;
|
|
Class = null;
|
|
}
|
|
|
|
if (!data) {
|
|
data = {};
|
|
}
|
|
|
|
Class = ExtClass.create(Class, data);
|
|
|
|
ExtClass.process(Class, data, onCreated);
|
|
|
|
return Class;
|
|
};
|
|
|
|
Ext.apply(ExtClass, {
|
|
/**
|
|
* @private
|
|
*/
|
|
onBeforeCreated: function(Class, data, hooks) {
|
|
|
|
Class.addMembers(data);
|
|
|
|
hooks.onCreated.call(Class, Class);
|
|
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
create: function(Class, data) {
|
|
var name, i;
|
|
|
|
if (!Class) {
|
|
Class = makeCtor(
|
|
);
|
|
}
|
|
|
|
for (i = 0; i < baseStaticMemberLength; i++) {
|
|
name = baseStaticMembers[i];
|
|
Class[name] = Base[name];
|
|
}
|
|
|
|
return Class;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
process: function(Class, data, onCreated) {
|
|
var preprocessorStack = data.preprocessors || ExtClass.defaultPreprocessors,
|
|
registeredPreprocessors = this.preprocessors,
|
|
hooks = {
|
|
onBeforeCreated: this.onBeforeCreated
|
|
},
|
|
preprocessors = [],
|
|
preprocessor, preprocessorsProperties,
|
|
i, ln, j, subLn, preprocessorProperty;
|
|
|
|
delete data.preprocessors;
|
|
|
|
for (i = 0,ln = preprocessorStack.length; i < ln; i++) {
|
|
preprocessor = preprocessorStack[i];
|
|
|
|
if (typeof preprocessor == 'string') {
|
|
preprocessor = registeredPreprocessors[preprocessor];
|
|
preprocessorsProperties = preprocessor.properties;
|
|
|
|
if (preprocessorsProperties === true) {
|
|
preprocessors.push(preprocessor.fn);
|
|
}
|
|
else if (preprocessorsProperties) {
|
|
for (j = 0,subLn = preprocessorsProperties.length; j < subLn; j++) {
|
|
preprocessorProperty = preprocessorsProperties[j];
|
|
|
|
if (data.hasOwnProperty(preprocessorProperty)) {
|
|
preprocessors.push(preprocessor.fn);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
preprocessors.push(preprocessor);
|
|
}
|
|
}
|
|
|
|
hooks.onCreated = onCreated ? onCreated : Ext.emptyFn;
|
|
hooks.preprocessors = preprocessors;
|
|
|
|
this.doProcess(Class, data, hooks);
|
|
},
|
|
|
|
doProcess: function(Class, data, hooks) {
|
|
var me = this,
|
|
preprocessors = hooks.preprocessors,
|
|
preprocessor = preprocessors.shift(),
|
|
doProcess = me.doProcess;
|
|
|
|
for ( ; preprocessor ; preprocessor = preprocessors.shift()) {
|
|
// Returning false signifies an asynchronous preprocessor - it will call doProcess when we can continue
|
|
if (preprocessor.call(me, Class, data, hooks, doProcess) === false) {
|
|
return;
|
|
}
|
|
}
|
|
hooks.onBeforeCreated.apply(me, arguments);
|
|
},
|
|
|
|
/** @private */
|
|
preprocessors: {},
|
|
|
|
/**
|
|
* Register a new pre-processor to be used during the class creation process
|
|
*
|
|
* @param {String} name The pre-processor's name
|
|
* @param {Function} fn The callback function to be executed. Typical format:
|
|
*
|
|
* function(cls, data, fn) {
|
|
* // Your code here
|
|
*
|
|
* // Execute this when the processing is finished.
|
|
* // Asynchronous processing is perfectly ok
|
|
* if (fn) {
|
|
* fn.call(this, cls, data);
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Function} fn.cls The created class
|
|
* @param {Object} fn.data The set of properties passed in {@link Ext.Class} constructor
|
|
* @param {Function} fn.fn The callback function that **must** to be executed when this
|
|
* pre-processor finishes, regardless of whether the processing is synchronous or aynchronous.
|
|
* @return {Ext.Class} this
|
|
* @private
|
|
* @static
|
|
*/
|
|
registerPreprocessor: function(name, fn, properties, position, relativeTo) {
|
|
if (!position) {
|
|
position = 'last';
|
|
}
|
|
|
|
if (!properties) {
|
|
properties = [name];
|
|
}
|
|
|
|
this.preprocessors[name] = {
|
|
name: name,
|
|
properties: properties || false,
|
|
fn: fn
|
|
};
|
|
|
|
this.setDefaultPreprocessorPosition(name, position, relativeTo);
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Retrieve a pre-processor callback function by its name, which has been registered before
|
|
*
|
|
* @param {String} name
|
|
* @return {Function} preprocessor
|
|
* @private
|
|
* @static
|
|
*/
|
|
getPreprocessor: function(name) {
|
|
return this.preprocessors[name];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getPreprocessors: function() {
|
|
return this.preprocessors;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
defaultPreprocessors: [],
|
|
|
|
/**
|
|
* Retrieve the array stack of default pre-processors
|
|
* @return {Function[]} defaultPreprocessors
|
|
* @private
|
|
* @static
|
|
*/
|
|
getDefaultPreprocessors: function() {
|
|
return this.defaultPreprocessors;
|
|
},
|
|
|
|
/**
|
|
* Set the default array stack of default pre-processors
|
|
*
|
|
* @private
|
|
* @param {Array} preprocessors
|
|
* @return {Ext.Class} this
|
|
* @static
|
|
*/
|
|
setDefaultPreprocessors: function(preprocessors) {
|
|
this.defaultPreprocessors = Ext.Array.from(preprocessors);
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Insert this pre-processor at a specific position in the stack, optionally relative to
|
|
* any existing pre-processor. For example:
|
|
*
|
|
* Ext.Class.registerPreprocessor('debug', function(cls, data, fn) {
|
|
* // Your code here
|
|
*
|
|
* if (fn) {
|
|
* fn.call(this, cls, data);
|
|
* }
|
|
* }).setDefaultPreprocessorPosition('debug', 'last');
|
|
*
|
|
* @private
|
|
* @param {String} name The pre-processor name. Note that it needs to be registered with
|
|
* {@link Ext.Class#registerPreprocessor registerPreprocessor} before this
|
|
* @param {String} offset The insertion position. Four possible values are:
|
|
* 'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument)
|
|
* @param {String} relativeName
|
|
* @return {Ext.Class} this
|
|
* @static
|
|
*/
|
|
setDefaultPreprocessorPosition: function(name, offset, relativeName) {
|
|
var defaultPreprocessors = this.defaultPreprocessors,
|
|
index;
|
|
|
|
if (typeof offset == 'string') {
|
|
if (offset === 'first') {
|
|
defaultPreprocessors.unshift(name);
|
|
|
|
return this;
|
|
}
|
|
else if (offset === 'last') {
|
|
defaultPreprocessors.push(name);
|
|
|
|
return this;
|
|
}
|
|
|
|
offset = (offset === 'after') ? 1 : -1;
|
|
}
|
|
|
|
index = Ext.Array.indexOf(defaultPreprocessors, relativeName);
|
|
|
|
if (index !== -1) {
|
|
Ext.Array.splice(defaultPreprocessors, Math.max(0, index + offset), 0, name);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
configNameCache: {},
|
|
|
|
getConfigNameMap: function(name) {
|
|
var cache = this.configNameCache,
|
|
map = cache[name],
|
|
capitalizedName;
|
|
|
|
if (!map) {
|
|
capitalizedName = name.charAt(0).toUpperCase() + name.substr(1);
|
|
|
|
map = cache[name] = {
|
|
internal: name,
|
|
initialized: '_is' + capitalizedName + 'Initialized',
|
|
apply: 'apply' + capitalizedName,
|
|
update: 'update' + capitalizedName,
|
|
'set': 'set' + capitalizedName,
|
|
'get': 'get' + capitalizedName,
|
|
doSet : 'doSet' + capitalizedName,
|
|
changeEvent: name.toLowerCase() + 'change'
|
|
};
|
|
}
|
|
|
|
return map;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @cfg {String} extend
|
|
* The parent class that this class extends. For example:
|
|
*
|
|
* Ext.define('Person', {
|
|
* say: function(text) { alert(text); }
|
|
* });
|
|
*
|
|
* Ext.define('Developer', {
|
|
* extend: 'Person',
|
|
* say: function(text) { this.callParent(["print "+text]); }
|
|
* });
|
|
*/
|
|
ExtClass.registerPreprocessor('extend', function(Class, data, hooks) {
|
|
|
|
var Base = Ext.Base,
|
|
basePrototype = Base.prototype,
|
|
extend = data.extend,
|
|
Parent, parentPrototype, i;
|
|
|
|
delete data.extend;
|
|
|
|
if (extend && extend !== Object) {
|
|
Parent = extend;
|
|
}
|
|
else {
|
|
Parent = Base;
|
|
}
|
|
|
|
parentPrototype = Parent.prototype;
|
|
|
|
if (!Parent.$isClass) {
|
|
for (i in basePrototype) {
|
|
if (!parentPrototype[i]) {
|
|
parentPrototype[i] = basePrototype[i];
|
|
}
|
|
}
|
|
}
|
|
|
|
Class.extend(Parent);
|
|
|
|
Class.triggerExtended.apply(Class, arguments);
|
|
|
|
if (data.onClassExtended) {
|
|
Class.onExtended(data.onClassExtended, Class);
|
|
delete data.onClassExtended;
|
|
}
|
|
|
|
}, true);
|
|
|
|
/**
|
|
* @cfg {Object} statics
|
|
* List of static methods for this class. For example:
|
|
*
|
|
* Ext.define('Computer', {
|
|
* statics: {
|
|
* factory: function(brand) {
|
|
* // 'this' in static methods refer to the class itself
|
|
* return new this(brand);
|
|
* }
|
|
* },
|
|
*
|
|
* constructor: function() { ... }
|
|
* });
|
|
*
|
|
* var dellComputer = Computer.factory('Dell');
|
|
*/
|
|
ExtClass.registerPreprocessor('statics', function(Class, data) {
|
|
|
|
Class.addStatics(data.statics);
|
|
|
|
delete data.statics;
|
|
});
|
|
|
|
/**
|
|
* @cfg {Object} inheritableStatics
|
|
* List of inheritable static methods for this class.
|
|
* Otherwise just like {@link #statics} but subclasses inherit these methods.
|
|
*/
|
|
ExtClass.registerPreprocessor('inheritableStatics', function(Class, data) {
|
|
|
|
Class.addInheritableStatics(data.inheritableStatics);
|
|
|
|
delete data.inheritableStatics;
|
|
});
|
|
|
|
/**
|
|
* @cfg {Object} config
|
|
* List of configuration options with their default values, for which automatically
|
|
* accessor methods are generated. For example:
|
|
*
|
|
* Ext.define('SmartPhone', {
|
|
* config: {
|
|
* hasTouchScreen: false,
|
|
* operatingSystem: 'Other',
|
|
* price: 500
|
|
* },
|
|
* constructor: function(cfg) {
|
|
* this.initConfig(cfg);
|
|
* }
|
|
* });
|
|
*
|
|
* var iPhone = new SmartPhone({
|
|
* hasTouchScreen: true,
|
|
* operatingSystem: 'iOS'
|
|
* });
|
|
*
|
|
* iPhone.getPrice(); // 500;
|
|
* iPhone.getOperatingSystem(); // 'iOS'
|
|
* iPhone.getHasTouchScreen(); // true;
|
|
*
|
|
* NOTE for when configs are reference types, the getter and setter methods do not make copies.
|
|
*
|
|
* For example, when a config value is set, the reference is stored on the instance. All instances that set
|
|
* the same reference type will share it.
|
|
*
|
|
* In the case of the getter, the value with either come from the prototype if the setter was never called or from
|
|
* the instance as the last value passed to the setter.
|
|
*
|
|
* For some config properties, the value passed to the setter is transformed prior to being stored on the instance.
|
|
*/
|
|
ExtClass.registerPreprocessor('config', function(Class, data) {
|
|
|
|
var config = data.config,
|
|
prototype = Class.prototype;
|
|
|
|
delete data.config;
|
|
|
|
Ext.Object.each(config, function(name, value) {
|
|
var nameMap = ExtClass.getConfigNameMap(name),
|
|
internalName = nameMap.internal,
|
|
initializedName = nameMap.initialized,
|
|
applyName = nameMap.apply,
|
|
updateName = nameMap.update,
|
|
setName = nameMap.set,
|
|
getName = nameMap.get,
|
|
hasOwnSetter = (setName in prototype) || data.hasOwnProperty(setName),
|
|
hasOwnApplier = (applyName in prototype) || data.hasOwnProperty(applyName),
|
|
hasOwnUpdater = (updateName in prototype) || data.hasOwnProperty(updateName),
|
|
optimizedGetter, customGetter;
|
|
|
|
if (value === null || (!hasOwnSetter && !hasOwnApplier && !hasOwnUpdater)) {
|
|
prototype[internalName] = value;
|
|
prototype[initializedName] = true;
|
|
}
|
|
else {
|
|
prototype[initializedName] = false;
|
|
}
|
|
|
|
if (!hasOwnSetter) {
|
|
data[setName] = function(value) {
|
|
var oldValue = this[internalName],
|
|
applier = this[applyName],
|
|
updater = this[updateName];
|
|
|
|
if (!this[initializedName]) {
|
|
this[initializedName] = true;
|
|
}
|
|
|
|
if (applier) {
|
|
value = applier.call(this, value, oldValue);
|
|
}
|
|
|
|
if (typeof value != 'undefined') {
|
|
this[internalName] = value;
|
|
|
|
if (updater && value !== oldValue) {
|
|
updater.call(this, value, oldValue);
|
|
}
|
|
}
|
|
|
|
return this;
|
|
};
|
|
}
|
|
|
|
if (!(getName in prototype) || data.hasOwnProperty(getName)) {
|
|
customGetter = data[getName] || false;
|
|
|
|
if (customGetter) {
|
|
optimizedGetter = function() {
|
|
return customGetter.apply(this, arguments);
|
|
};
|
|
}
|
|
else {
|
|
optimizedGetter = function() {
|
|
return this[internalName];
|
|
};
|
|
}
|
|
|
|
data[getName] = function() {
|
|
var currentGetter;
|
|
|
|
if (!this[initializedName]) {
|
|
this[initializedName] = true;
|
|
this[setName](this.config[name]);
|
|
}
|
|
|
|
currentGetter = this[getName];
|
|
|
|
if ('$previous' in currentGetter) {
|
|
currentGetter.$previous = optimizedGetter;
|
|
}
|
|
else {
|
|
this[getName] = optimizedGetter;
|
|
}
|
|
|
|
return optimizedGetter.apply(this, arguments);
|
|
};
|
|
}
|
|
});
|
|
|
|
Class.addConfig(config, true);
|
|
});
|
|
|
|
/**
|
|
* @cfg {String[]/Object} mixins
|
|
* List of classes to mix into this class. For example:
|
|
*
|
|
* Ext.define('CanSing', {
|
|
* sing: function() {
|
|
* alert("I'm on the highway to hell...")
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('Musician', {
|
|
* mixins: ['CanSing']
|
|
* })
|
|
*
|
|
* In this case the Musician class will get a `sing` method from CanSing mixin.
|
|
*
|
|
* But what if the Musician already has a `sing` method? Or you want to mix
|
|
* in two classes, both of which define `sing`? In such a cases it's good
|
|
* to define mixins as an object, where you assign a name to each mixin:
|
|
*
|
|
* Ext.define('Musician', {
|
|
* mixins: {
|
|
* canSing: 'CanSing'
|
|
* },
|
|
*
|
|
* sing: function() {
|
|
* // delegate singing operation to mixin
|
|
* this.mixins.canSing.sing.call(this);
|
|
* }
|
|
* })
|
|
*
|
|
* In this case the `sing` method of Musician will overwrite the
|
|
* mixed in `sing` method. But you can access the original mixed in method
|
|
* through special `mixins` property.
|
|
*/
|
|
ExtClass.registerPreprocessor('mixins', function(Class, data, hooks) {
|
|
|
|
var mixins = data.mixins,
|
|
name, mixin, i, ln;
|
|
|
|
delete data.mixins;
|
|
|
|
Ext.Function.interceptBefore(hooks, 'onCreated', function() {
|
|
|
|
if (mixins instanceof Array) {
|
|
for (i = 0,ln = mixins.length; i < ln; i++) {
|
|
mixin = mixins[i];
|
|
name = mixin.prototype.mixinId || mixin.$className;
|
|
|
|
Class.mixin(name, mixin);
|
|
}
|
|
}
|
|
else {
|
|
for (var mixinName in mixins) {
|
|
if (mixins.hasOwnProperty(mixinName)) {
|
|
Class.mixin(mixinName, mixins[mixinName]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Backwards compatible
|
|
Ext.extend = function(Class, Parent, members) {
|
|
|
|
if (arguments.length === 2 && Ext.isObject(Parent)) {
|
|
members = Parent;
|
|
Parent = Class;
|
|
Class = null;
|
|
}
|
|
|
|
var cls;
|
|
|
|
if (!Parent) {
|
|
throw new Error("[Ext.extend] Attempting to extend from a class which has not been loaded on the page.");
|
|
}
|
|
|
|
members.extend = Parent;
|
|
members.preprocessors = [
|
|
'extend'
|
|
,'statics'
|
|
,'inheritableStatics'
|
|
,'mixins'
|
|
,'config'
|
|
];
|
|
|
|
if (Class) {
|
|
cls = new ExtClass(Class, members);
|
|
// The 'constructor' is given as 'Class' but also needs to be on prototype
|
|
cls.prototype.constructor = Class;
|
|
} else {
|
|
cls = new ExtClass(members);
|
|
}
|
|
|
|
cls.prototype.override = function(o) {
|
|
for (var m in o) {
|
|
if (o.hasOwnProperty(m)) {
|
|
this[m] = o[m];
|
|
}
|
|
}
|
|
};
|
|
|
|
return cls;
|
|
};
|
|
}());
|
|
|
|
// @tag foundation,core
|
|
// @require Class.js
|
|
// @define Ext.ClassManager
|
|
|
|
/**
|
|
* @author Jacky Nguyen <jacky@sencha.com>
|
|
* @docauthor Jacky Nguyen <jacky@sencha.com>
|
|
* @class Ext.ClassManager
|
|
*
|
|
* Ext.ClassManager manages all classes and handles mapping from string class name to
|
|
* actual class objects throughout the whole framework. It is not generally accessed directly, rather through
|
|
* these convenient shorthands:
|
|
*
|
|
* - {@link Ext#define Ext.define}
|
|
* - {@link Ext#create Ext.create}
|
|
* - {@link Ext#widget Ext.widget}
|
|
* - {@link Ext#getClass Ext.getClass}
|
|
* - {@link Ext#getClassName Ext.getClassName}
|
|
*
|
|
* # Basic syntax:
|
|
*
|
|
* Ext.define(className, properties);
|
|
*
|
|
* in which `properties` is an object represent a collection of properties that apply to the class. See
|
|
* {@link Ext.ClassManager#create} for more detailed instructions.
|
|
*
|
|
* Ext.define('Person', {
|
|
* name: 'Unknown',
|
|
*
|
|
* constructor: function(name) {
|
|
* if (name) {
|
|
* this.name = name;
|
|
* }
|
|
* },
|
|
*
|
|
* eat: function(foodType) {
|
|
* alert("I'm eating: " + foodType);
|
|
*
|
|
* return this;
|
|
* }
|
|
* });
|
|
*
|
|
* var aaron = new Person("Aaron");
|
|
* aaron.eat("Sandwich"); // alert("I'm eating: Sandwich");
|
|
*
|
|
* Ext.Class has a powerful set of extensible {@link Ext.Class#registerPreprocessor pre-processors} which takes care of
|
|
* everything related to class creation, including but not limited to inheritance, mixins, configuration, statics, etc.
|
|
*
|
|
* # Inheritance:
|
|
*
|
|
* Ext.define('Developer', {
|
|
* extend: 'Person',
|
|
*
|
|
* constructor: function(name, isGeek) {
|
|
* this.isGeek = isGeek;
|
|
*
|
|
* // Apply a method from the parent class' prototype
|
|
* this.callParent([name]);
|
|
* },
|
|
*
|
|
* code: function(language) {
|
|
* alert("I'm coding in: " + language);
|
|
*
|
|
* this.eat("Bugs");
|
|
*
|
|
* return this;
|
|
* }
|
|
* });
|
|
*
|
|
* var jacky = new Developer("Jacky", true);
|
|
* jacky.code("JavaScript"); // alert("I'm coding in: JavaScript");
|
|
* // alert("I'm eating: Bugs");
|
|
*
|
|
* See {@link Ext.Base#callParent} for more details on calling superclass' methods
|
|
*
|
|
* # Mixins:
|
|
*
|
|
* Ext.define('CanPlayGuitar', {
|
|
* playGuitar: function() {
|
|
* alert("F#...G...D...A");
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('CanComposeSongs', {
|
|
* composeSongs: function() { ... }
|
|
* });
|
|
*
|
|
* Ext.define('CanSing', {
|
|
* sing: function() {
|
|
* alert("I'm on the highway to hell...")
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('Musician', {
|
|
* extend: 'Person',
|
|
*
|
|
* mixins: {
|
|
* canPlayGuitar: 'CanPlayGuitar',
|
|
* canComposeSongs: 'CanComposeSongs',
|
|
* canSing: 'CanSing'
|
|
* }
|
|
* })
|
|
*
|
|
* Ext.define('CoolPerson', {
|
|
* extend: 'Person',
|
|
*
|
|
* mixins: {
|
|
* canPlayGuitar: 'CanPlayGuitar',
|
|
* canSing: 'CanSing'
|
|
* },
|
|
*
|
|
* sing: function() {
|
|
* alert("Ahem....");
|
|
*
|
|
* this.mixins.canSing.sing.call(this);
|
|
*
|
|
* alert("[Playing guitar at the same time...]");
|
|
*
|
|
* this.playGuitar();
|
|
* }
|
|
* });
|
|
*
|
|
* var me = new CoolPerson("Jacky");
|
|
*
|
|
* me.sing(); // alert("Ahem...");
|
|
* // alert("I'm on the highway to hell...");
|
|
* // alert("[Playing guitar at the same time...]");
|
|
* // alert("F#...G...D...A");
|
|
*
|
|
* # Config:
|
|
*
|
|
* Ext.define('SmartPhone', {
|
|
* config: {
|
|
* hasTouchScreen: false,
|
|
* operatingSystem: 'Other',
|
|
* price: 500
|
|
* },
|
|
*
|
|
* isExpensive: false,
|
|
*
|
|
* constructor: function(config) {
|
|
* this.initConfig(config);
|
|
* },
|
|
*
|
|
* applyPrice: function(price) {
|
|
* this.isExpensive = (price > 500);
|
|
*
|
|
* return price;
|
|
* },
|
|
*
|
|
* applyOperatingSystem: function(operatingSystem) {
|
|
* if (!(/^(iOS|Android|BlackBerry)$/i).test(operatingSystem)) {
|
|
* return 'Other';
|
|
* }
|
|
*
|
|
* return operatingSystem;
|
|
* }
|
|
* });
|
|
*
|
|
* var iPhone = new SmartPhone({
|
|
* hasTouchScreen: true,
|
|
* operatingSystem: 'iOS'
|
|
* });
|
|
*
|
|
* iPhone.getPrice(); // 500;
|
|
* iPhone.getOperatingSystem(); // 'iOS'
|
|
* iPhone.getHasTouchScreen(); // true;
|
|
* iPhone.hasTouchScreen(); // true
|
|
*
|
|
* iPhone.isExpensive; // false;
|
|
* iPhone.setPrice(600);
|
|
* iPhone.getPrice(); // 600
|
|
* iPhone.isExpensive; // true;
|
|
*
|
|
* iPhone.setOperatingSystem('AlienOS');
|
|
* iPhone.getOperatingSystem(); // 'Other'
|
|
*
|
|
* # Statics:
|
|
*
|
|
* Ext.define('Computer', {
|
|
* statics: {
|
|
* factory: function(brand) {
|
|
* // 'this' in static methods refer to the class itself
|
|
* return new this(brand);
|
|
* }
|
|
* },
|
|
*
|
|
* constructor: function() { ... }
|
|
* });
|
|
*
|
|
* var dellComputer = Computer.factory('Dell');
|
|
*
|
|
* Also see {@link Ext.Base#statics} and {@link Ext.Base#self} for more details on accessing
|
|
* static properties within class methods
|
|
*
|
|
* @singleton
|
|
*/
|
|
(function(Class, alias, arraySlice, arrayFrom, global) {
|
|
|
|
// Creates a constructor that has nothing extra in its scope chain.
|
|
function makeCtor () {
|
|
function constructor () {
|
|
// Opera has some problems returning from a constructor when Dragonfly isn't running. The || null seems to
|
|
// be sufficient to stop it misbehaving. Known to be required against 10.53, 11.51 and 11.61.
|
|
return this.constructor.apply(this, arguments) || null;
|
|
}
|
|
return constructor;
|
|
}
|
|
|
|
var Manager = Ext.ClassManager = {
|
|
|
|
/**
|
|
* @property {Object} classes
|
|
* All classes which were defined through the ClassManager. Keys are the
|
|
* name of the classes and the values are references to the classes.
|
|
* @private
|
|
*/
|
|
classes: {},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
existCache: {},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
namespaceRewrites: [{
|
|
from: 'Ext.',
|
|
to: Ext
|
|
}],
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
maps: {
|
|
alternateToName: {},
|
|
aliasToName: {},
|
|
nameToAliases: {},
|
|
nameToAlternates: {}
|
|
},
|
|
|
|
/** @private */
|
|
enableNamespaceParseCache: true,
|
|
|
|
/** @private */
|
|
namespaceParseCache: {},
|
|
|
|
/** @private */
|
|
instantiators: [],
|
|
|
|
/**
|
|
* Checks if a class has already been created.
|
|
*
|
|
* @param {String} className
|
|
* @return {Boolean} exist
|
|
*/
|
|
isCreated: function(className) {
|
|
var existCache = this.existCache,
|
|
i, ln, part, root, parts;
|
|
|
|
|
|
if (this.classes[className] || existCache[className]) {
|
|
return true;
|
|
}
|
|
|
|
root = global;
|
|
parts = this.parseNamespace(className);
|
|
|
|
for (i = 0, ln = parts.length; i < ln; i++) {
|
|
part = parts[i];
|
|
|
|
if (typeof part != 'string') {
|
|
root = part;
|
|
} else {
|
|
if (!root || !root[part]) {
|
|
return false;
|
|
}
|
|
|
|
root = root[part];
|
|
}
|
|
}
|
|
|
|
existCache[className] = true;
|
|
|
|
this.triggerCreated(className);
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
createdListeners: [],
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
nameCreatedListeners: {},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
triggerCreated: function(className) {
|
|
var listeners = this.createdListeners,
|
|
nameListeners = this.nameCreatedListeners,
|
|
alternateNames = this.maps.nameToAlternates[className],
|
|
names = [className],
|
|
i, ln, j, subLn, listener, name;
|
|
|
|
for (i = 0,ln = listeners.length; i < ln; i++) {
|
|
listener = listeners[i];
|
|
listener.fn.call(listener.scope, className);
|
|
}
|
|
|
|
if (alternateNames) {
|
|
names.push.apply(names, alternateNames);
|
|
}
|
|
|
|
for (i = 0,ln = names.length; i < ln; i++) {
|
|
name = names[i];
|
|
listeners = nameListeners[name];
|
|
|
|
if (listeners) {
|
|
for (j = 0,subLn = listeners.length; j < subLn; j++) {
|
|
listener = listeners[j];
|
|
listener.fn.call(listener.scope, name);
|
|
}
|
|
delete nameListeners[name];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onCreated: function(fn, scope, className) {
|
|
|
|
var listeners = this.createdListeners,
|
|
nameListeners = this.nameCreatedListeners,
|
|
listener = {
|
|
fn: fn,
|
|
scope: scope
|
|
};
|
|
|
|
if (className) {
|
|
if (this.isCreated(className)) {
|
|
fn.call(scope, className);
|
|
return;
|
|
}
|
|
|
|
if (!nameListeners[className]) {
|
|
nameListeners[className] = [];
|
|
}
|
|
|
|
nameListeners[className].push(listener);
|
|
}
|
|
else {
|
|
listeners.push(listener);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Supports namespace rewriting
|
|
* @private
|
|
*/
|
|
parseNamespace: function(namespace) {
|
|
|
|
var cache = this.namespaceParseCache,
|
|
parts,
|
|
rewrites,
|
|
root,
|
|
name,
|
|
rewrite, from, to, i, ln;
|
|
|
|
if (this.enableNamespaceParseCache) {
|
|
if (cache.hasOwnProperty(namespace)) {
|
|
return cache[namespace];
|
|
}
|
|
}
|
|
|
|
parts = [];
|
|
rewrites = this.namespaceRewrites;
|
|
root = global;
|
|
name = namespace;
|
|
|
|
for (i = 0, ln = rewrites.length; i < ln; i++) {
|
|
rewrite = rewrites[i];
|
|
from = rewrite.from;
|
|
to = rewrite.to;
|
|
|
|
if (name === from || name.substring(0, from.length) === from) {
|
|
name = name.substring(from.length);
|
|
|
|
if (typeof to != 'string') {
|
|
root = to;
|
|
} else {
|
|
parts = parts.concat(to.split('.'));
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
|
|
parts.push(root);
|
|
|
|
parts = parts.concat(name.split('.'));
|
|
|
|
if (this.enableNamespaceParseCache) {
|
|
cache[namespace] = parts;
|
|
}
|
|
|
|
return parts;
|
|
},
|
|
|
|
/**
|
|
* Creates a namespace and assign the `value` to the created object
|
|
*
|
|
* Ext.ClassManager.setNamespace('MyCompany.pkg.Example', someObject);
|
|
*
|
|
* alert(MyCompany.pkg.Example === someObject); // alerts true
|
|
*
|
|
* @param {String} name
|
|
* @param {Object} value
|
|
*/
|
|
setNamespace: function(name, value) {
|
|
var root = global,
|
|
parts = this.parseNamespace(name),
|
|
ln = parts.length - 1,
|
|
leaf = parts[ln],
|
|
i, part;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
part = parts[i];
|
|
|
|
if (typeof part != 'string') {
|
|
root = part;
|
|
} else {
|
|
if (!root[part]) {
|
|
root[part] = {};
|
|
}
|
|
|
|
root = root[part];
|
|
}
|
|
}
|
|
|
|
root[leaf] = value;
|
|
|
|
return root[leaf];
|
|
},
|
|
|
|
/**
|
|
* The new Ext.ns, supports namespace rewriting
|
|
* @private
|
|
*/
|
|
createNamespaces: function() {
|
|
var root = global,
|
|
parts, part, i, j, ln, subLn;
|
|
|
|
for (i = 0, ln = arguments.length; i < ln; i++) {
|
|
parts = this.parseNamespace(arguments[i]);
|
|
|
|
for (j = 0, subLn = parts.length; j < subLn; j++) {
|
|
part = parts[j];
|
|
|
|
if (typeof part != 'string') {
|
|
root = part;
|
|
} else {
|
|
if (!root[part]) {
|
|
root[part] = {};
|
|
}
|
|
|
|
root = root[part];
|
|
}
|
|
}
|
|
}
|
|
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Sets a name reference to a class.
|
|
*
|
|
* @param {String} name
|
|
* @param {Object} value
|
|
* @return {Ext.ClassManager} this
|
|
*/
|
|
set: function(name, value) {
|
|
var me = this,
|
|
maps = me.maps,
|
|
nameToAlternates = maps.nameToAlternates,
|
|
targetName = me.getName(value),
|
|
alternates;
|
|
|
|
me.classes[name] = me.setNamespace(name, value);
|
|
|
|
if (targetName && targetName !== name) {
|
|
maps.alternateToName[name] = targetName;
|
|
alternates = nameToAlternates[targetName] || (nameToAlternates[targetName] = []);
|
|
alternates.push(name);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Retrieve a class by its name.
|
|
*
|
|
* @param {String} name
|
|
* @return {Ext.Class} class
|
|
*/
|
|
get: function(name) {
|
|
var classes = this.classes,
|
|
root,
|
|
parts,
|
|
part, i, ln;
|
|
|
|
if (classes[name]) {
|
|
return classes[name];
|
|
}
|
|
|
|
root = global;
|
|
parts = this.parseNamespace(name);
|
|
|
|
for (i = 0, ln = parts.length; i < ln; i++) {
|
|
part = parts[i];
|
|
|
|
if (typeof part != 'string') {
|
|
root = part;
|
|
} else {
|
|
if (!root || !root[part]) {
|
|
return null;
|
|
}
|
|
|
|
root = root[part];
|
|
}
|
|
}
|
|
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Register the alias for a class.
|
|
*
|
|
* @param {Ext.Class/String} cls a reference to a class or a className
|
|
* @param {String} alias Alias to use when referring to this class
|
|
*/
|
|
setAlias: function(cls, alias) {
|
|
var aliasToNameMap = this.maps.aliasToName,
|
|
nameToAliasesMap = this.maps.nameToAliases,
|
|
className;
|
|
|
|
if (typeof cls == 'string') {
|
|
className = cls;
|
|
} else {
|
|
className = this.getName(cls);
|
|
}
|
|
|
|
if (alias && aliasToNameMap[alias] !== className) {
|
|
|
|
aliasToNameMap[alias] = className;
|
|
}
|
|
|
|
if (!nameToAliasesMap[className]) {
|
|
nameToAliasesMap[className] = [];
|
|
}
|
|
|
|
if (alias) {
|
|
Ext.Array.include(nameToAliasesMap[className], alias);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Adds a batch of class name to alias mappings
|
|
* @param {Object} aliases The set of mappings of the form
|
|
* className : [values...]
|
|
*/
|
|
addNameAliasMappings: function(aliases){
|
|
var aliasToNameMap = this.maps.aliasToName,
|
|
nameToAliasesMap = this.maps.nameToAliases,
|
|
className, aliasList, alias, i;
|
|
|
|
for (className in aliases) {
|
|
aliasList = nameToAliasesMap[className] ||
|
|
(nameToAliasesMap[className] = []);
|
|
|
|
for (i = 0; i < aliases[className].length; i++) {
|
|
alias = aliases[className][i];
|
|
if (!aliasToNameMap[alias]) {
|
|
aliasToNameMap[alias] = className;
|
|
aliasList.push(alias);
|
|
}
|
|
}
|
|
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Object} alternates The set of mappings of the form
|
|
* className : [values...]
|
|
*/
|
|
addNameAlternateMappings: function(alternates) {
|
|
var alternateToName = this.maps.alternateToName,
|
|
nameToAlternates = this.maps.nameToAlternates,
|
|
className, aliasList, alternate, i;
|
|
|
|
for (className in alternates) {
|
|
aliasList = nameToAlternates[className] ||
|
|
(nameToAlternates[className] = []);
|
|
|
|
for (i = 0; i < alternates[className].length; i++) {
|
|
alternate = alternates[className][i];
|
|
if (!alternateToName[alternate]) {
|
|
alternateToName[alternate] = className;
|
|
aliasList.push(alternate);
|
|
}
|
|
}
|
|
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Get a reference to the class by its alias.
|
|
*
|
|
* @param {String} alias
|
|
* @return {Ext.Class} class
|
|
*/
|
|
getByAlias: function(alias) {
|
|
return this.get(this.getNameByAlias(alias));
|
|
},
|
|
|
|
/**
|
|
* Get the name of a class by its alias.
|
|
*
|
|
* @param {String} alias
|
|
* @return {String} className
|
|
*/
|
|
getNameByAlias: function(alias) {
|
|
return this.maps.aliasToName[alias] || '';
|
|
},
|
|
|
|
/**
|
|
* Get the name of a class by its alternate name.
|
|
*
|
|
* @param {String} alternate
|
|
* @return {String} className
|
|
*/
|
|
getNameByAlternate: function(alternate) {
|
|
return this.maps.alternateToName[alternate] || '';
|
|
},
|
|
|
|
/**
|
|
* Get the aliases of a class by the class name
|
|
*
|
|
* @param {String} name
|
|
* @return {Array} aliases
|
|
*/
|
|
getAliasesByName: function(name) {
|
|
return this.maps.nameToAliases[name] || [];
|
|
},
|
|
|
|
/**
|
|
* Get the name of the class by its reference or its instance;
|
|
*
|
|
* {@link Ext.ClassManager#getName} is usually invoked by the shorthand {@link Ext#getClassName}.
|
|
*
|
|
* Ext.getName(Ext.Action); // returns "Ext.Action"
|
|
*
|
|
* @param {Ext.Class/Object} object
|
|
* @return {String} className
|
|
*/
|
|
getName: function(object) {
|
|
return object && object.$className || '';
|
|
},
|
|
|
|
/**
|
|
* Get the class of the provided object; returns null if it's not an instance
|
|
* of any class created with Ext.define.
|
|
*
|
|
* {@link Ext.ClassManager#getClass} is usually invoked by the shorthand {@link Ext#getClass}.
|
|
*
|
|
* var component = new Ext.Component();
|
|
*
|
|
* Ext.getClass(component); // returns Ext.Component
|
|
*
|
|
* @param {Object} object
|
|
* @return {Ext.Class} class
|
|
*/
|
|
getClass: function(object) {
|
|
return object && object.self || null;
|
|
},
|
|
|
|
/**
|
|
* Defines a class.
|
|
* @deprecated 4.1.0 Use {@link Ext#define} instead, as that also supports creating overrides.
|
|
*/
|
|
create: function(className, data, createdFn) {
|
|
|
|
var ctor = makeCtor();
|
|
if (typeof data == 'function') {
|
|
data = data(ctor);
|
|
}
|
|
|
|
|
|
data.$className = className;
|
|
|
|
return new Class(ctor, data, function() {
|
|
var postprocessorStack = data.postprocessors || Manager.defaultPostprocessors,
|
|
registeredPostprocessors = Manager.postprocessors,
|
|
postprocessors = [],
|
|
postprocessor, i, ln, j, subLn, postprocessorProperties, postprocessorProperty;
|
|
|
|
delete data.postprocessors;
|
|
|
|
for (i = 0,ln = postprocessorStack.length; i < ln; i++) {
|
|
postprocessor = postprocessorStack[i];
|
|
|
|
if (typeof postprocessor == 'string') {
|
|
postprocessor = registeredPostprocessors[postprocessor];
|
|
postprocessorProperties = postprocessor.properties;
|
|
|
|
if (postprocessorProperties === true) {
|
|
postprocessors.push(postprocessor.fn);
|
|
}
|
|
else if (postprocessorProperties) {
|
|
for (j = 0,subLn = postprocessorProperties.length; j < subLn; j++) {
|
|
postprocessorProperty = postprocessorProperties[j];
|
|
|
|
if (data.hasOwnProperty(postprocessorProperty)) {
|
|
postprocessors.push(postprocessor.fn);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
postprocessors.push(postprocessor);
|
|
}
|
|
}
|
|
|
|
data.postprocessors = postprocessors;
|
|
data.createdFn = createdFn;
|
|
Manager.processCreate(className, this, data);
|
|
});
|
|
},
|
|
|
|
processCreate: function(className, cls, clsData){
|
|
var me = this,
|
|
postprocessor = clsData.postprocessors.shift(),
|
|
createdFn = clsData.createdFn;
|
|
|
|
if (!postprocessor) {
|
|
|
|
if (className) {
|
|
me.set(className, cls);
|
|
}
|
|
|
|
if (createdFn) {
|
|
createdFn.call(cls, cls);
|
|
}
|
|
|
|
if (className) {
|
|
me.triggerCreated(className);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (postprocessor.call(me, className, cls, clsData, me.processCreate) !== false) {
|
|
me.processCreate(className, cls, clsData);
|
|
}
|
|
},
|
|
|
|
createOverride: function (className, data, createdFn) {
|
|
var me = this,
|
|
overriddenClassName = data.override,
|
|
requires = data.requires,
|
|
uses = data.uses,
|
|
classReady = function () {
|
|
var cls, temp;
|
|
|
|
if (requires) {
|
|
temp = requires;
|
|
requires = null; // do the real thing next time (which may be now)
|
|
|
|
// Since the override is going to be used (its target class is now
|
|
// created), we need to fetch the required classes for the override
|
|
// and call us back once they are loaded:
|
|
Ext.Loader.require(temp, classReady);
|
|
} else {
|
|
// The target class and the required classes for this override are
|
|
// ready, so we can apply the override now:
|
|
cls = me.get(overriddenClassName);
|
|
|
|
// We don't want to apply these:
|
|
delete data.override;
|
|
delete data.requires;
|
|
delete data.uses;
|
|
|
|
Ext.override(cls, data);
|
|
|
|
// This pushes the overridding file itself into Ext.Loader.history
|
|
// Hence if the target class never exists, the overriding file will
|
|
// never be included in the build.
|
|
me.triggerCreated(className);
|
|
|
|
if (uses) {
|
|
Ext.Loader.addUsedClasses(uses); // get these classes too!
|
|
}
|
|
|
|
if (createdFn) {
|
|
createdFn.call(cls); // last but not least!
|
|
}
|
|
}
|
|
};
|
|
|
|
me.existCache[className] = true;
|
|
|
|
// Override the target class right after it's created
|
|
me.onCreated(classReady, me, overriddenClassName);
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Instantiate a class by its alias.
|
|
*
|
|
* {@link Ext.ClassManager#instantiateByAlias} is usually invoked by the shorthand {@link Ext#createByAlias}.
|
|
*
|
|
* If {@link Ext.Loader} is {@link Ext.Loader#setConfig enabled} and the class has not been defined yet, it will
|
|
* attempt to load the class via synchronous loading.
|
|
*
|
|
* var window = Ext.createByAlias('widget.window', { width: 600, height: 800, ... });
|
|
*
|
|
* @param {String} alias
|
|
* @param {Object...} args Additional arguments after the alias will be passed to the
|
|
* class constructor.
|
|
* @return {Object} instance
|
|
*/
|
|
instantiateByAlias: function() {
|
|
var alias = arguments[0],
|
|
args = arraySlice.call(arguments),
|
|
className = this.getNameByAlias(alias);
|
|
|
|
if (!className) {
|
|
className = this.maps.aliasToName[alias];
|
|
|
|
|
|
|
|
Ext.syncRequire(className);
|
|
}
|
|
|
|
args[0] = className;
|
|
|
|
return this.instantiate.apply(this, args);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
instantiate: function() {
|
|
var name = arguments[0],
|
|
nameType = typeof name,
|
|
args = arraySlice.call(arguments, 1),
|
|
alias = name,
|
|
possibleName, cls;
|
|
|
|
if (nameType != 'function') {
|
|
if (nameType != 'string' && args.length === 0) {
|
|
args = [name];
|
|
name = name.xclass;
|
|
}
|
|
|
|
|
|
cls = this.get(name);
|
|
}
|
|
else {
|
|
cls = name;
|
|
}
|
|
|
|
// No record of this class name, it's possibly an alias, so look it up
|
|
if (!cls) {
|
|
possibleName = this.getNameByAlias(name);
|
|
|
|
if (possibleName) {
|
|
name = possibleName;
|
|
|
|
cls = this.get(name);
|
|
}
|
|
}
|
|
|
|
// Still no record of this class name, it's possibly an alternate name, so look it up
|
|
if (!cls) {
|
|
possibleName = this.getNameByAlternate(name);
|
|
|
|
if (possibleName) {
|
|
name = possibleName;
|
|
|
|
cls = this.get(name);
|
|
}
|
|
}
|
|
|
|
// Still not existing at this point, try to load it via synchronous mode as the last resort
|
|
if (!cls) {
|
|
|
|
Ext.syncRequire(name);
|
|
|
|
cls = this.get(name);
|
|
}
|
|
|
|
|
|
return this.getInstantiator(args.length)(cls, args);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param name
|
|
* @param args
|
|
*/
|
|
dynInstantiate: function(name, args) {
|
|
args = arrayFrom(args, true);
|
|
args.unshift(name);
|
|
|
|
return this.instantiate.apply(this, args);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param length
|
|
*/
|
|
getInstantiator: function(length) {
|
|
var instantiators = this.instantiators,
|
|
instantiator,
|
|
i,
|
|
args;
|
|
|
|
instantiator = instantiators[length];
|
|
|
|
if (!instantiator) {
|
|
i = length;
|
|
args = [];
|
|
|
|
for (i = 0; i < length; i++) {
|
|
args.push('a[' + i + ']');
|
|
}
|
|
|
|
instantiator = instantiators[length] = new Function('c', 'a', 'return new c(' + args.join(',') + ')');
|
|
}
|
|
|
|
return instantiator;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
postprocessors: {},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
defaultPostprocessors: [],
|
|
|
|
/**
|
|
* Register a post-processor function.
|
|
*
|
|
* @private
|
|
* @param {String} name
|
|
* @param {Function} postprocessor
|
|
*/
|
|
registerPostprocessor: function(name, fn, properties, position, relativeTo) {
|
|
if (!position) {
|
|
position = 'last';
|
|
}
|
|
|
|
if (!properties) {
|
|
properties = [name];
|
|
}
|
|
|
|
this.postprocessors[name] = {
|
|
name: name,
|
|
properties: properties || false,
|
|
fn: fn
|
|
};
|
|
|
|
this.setDefaultPostprocessorPosition(name, position, relativeTo);
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Set the default post processors array stack which are applied to every class.
|
|
*
|
|
* @private
|
|
* @param {String/Array} postprocessors The name of a registered post processor or an array of registered names.
|
|
* @return {Ext.ClassManager} this
|
|
*/
|
|
setDefaultPostprocessors: function(postprocessors) {
|
|
this.defaultPostprocessors = arrayFrom(postprocessors);
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Insert this post-processor at a specific position in the stack, optionally relative to
|
|
* any existing post-processor
|
|
*
|
|
* @private
|
|
* @param {String} name The post-processor name. Note that it needs to be registered with
|
|
* {@link Ext.ClassManager#registerPostprocessor} before this
|
|
* @param {String} offset The insertion position. Four possible values are:
|
|
* 'first', 'last', or: 'before', 'after' (relative to the name provided in the third argument)
|
|
* @param {String} relativeName
|
|
* @return {Ext.ClassManager} this
|
|
*/
|
|
setDefaultPostprocessorPosition: function(name, offset, relativeName) {
|
|
var defaultPostprocessors = this.defaultPostprocessors,
|
|
index;
|
|
|
|
if (typeof offset == 'string') {
|
|
if (offset === 'first') {
|
|
defaultPostprocessors.unshift(name);
|
|
|
|
return this;
|
|
}
|
|
else if (offset === 'last') {
|
|
defaultPostprocessors.push(name);
|
|
|
|
return this;
|
|
}
|
|
|
|
offset = (offset === 'after') ? 1 : -1;
|
|
}
|
|
|
|
index = Ext.Array.indexOf(defaultPostprocessors, relativeName);
|
|
|
|
if (index !== -1) {
|
|
Ext.Array.splice(defaultPostprocessors, Math.max(0, index + offset), 0, name);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Converts a string expression to an array of matching class names. An expression can either refers to class aliases
|
|
* or class names. Expressions support wildcards:
|
|
*
|
|
* // returns ['Ext.window.Window']
|
|
* var window = Ext.ClassManager.getNamesByExpression('widget.window');
|
|
*
|
|
* // returns ['widget.panel', 'widget.window', ...]
|
|
* var allWidgets = Ext.ClassManager.getNamesByExpression('widget.*');
|
|
*
|
|
* // returns ['Ext.data.Store', 'Ext.data.ArrayProxy', ...]
|
|
* var allData = Ext.ClassManager.getNamesByExpression('Ext.data.*');
|
|
*
|
|
* @param {String} expression
|
|
* @return {String[]} classNames
|
|
*/
|
|
getNamesByExpression: function(expression) {
|
|
var nameToAliasesMap = this.maps.nameToAliases,
|
|
names = [],
|
|
name, alias, aliases, possibleName, regex, i, ln;
|
|
|
|
|
|
if (expression.indexOf('*') !== -1) {
|
|
expression = expression.replace(/\*/g, '(.*?)');
|
|
regex = new RegExp('^' + expression + '$');
|
|
|
|
for (name in nameToAliasesMap) {
|
|
if (nameToAliasesMap.hasOwnProperty(name)) {
|
|
aliases = nameToAliasesMap[name];
|
|
|
|
if (name.search(regex) !== -1) {
|
|
names.push(name);
|
|
}
|
|
else {
|
|
for (i = 0, ln = aliases.length; i < ln; i++) {
|
|
alias = aliases[i];
|
|
|
|
if (alias.search(regex) !== -1) {
|
|
names.push(name);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
} else {
|
|
possibleName = this.getNameByAlias(expression);
|
|
|
|
if (possibleName) {
|
|
names.push(possibleName);
|
|
} else {
|
|
possibleName = this.getNameByAlternate(expression);
|
|
|
|
if (possibleName) {
|
|
names.push(possibleName);
|
|
} else {
|
|
names.push(expression);
|
|
}
|
|
}
|
|
}
|
|
|
|
return names;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @cfg {String[]} alias
|
|
* @member Ext.Class
|
|
* List of short aliases for class names. Most useful for defining xtypes for widgets:
|
|
*
|
|
* Ext.define('MyApp.CoolPanel', {
|
|
* extend: 'Ext.panel.Panel',
|
|
* alias: ['widget.coolpanel'],
|
|
* title: 'Yeah!'
|
|
* });
|
|
*
|
|
* // Using Ext.create
|
|
* Ext.create('widget.coolpanel');
|
|
*
|
|
* // Using the shorthand for defining widgets by xtype
|
|
* Ext.widget('panel', {
|
|
* items: [
|
|
* {xtype: 'coolpanel', html: 'Foo'},
|
|
* {xtype: 'coolpanel', html: 'Bar'}
|
|
* ]
|
|
* });
|
|
*
|
|
* Besides "widget" for xtype there are alias namespaces like "feature" for ftype and "plugin" for ptype.
|
|
*/
|
|
Manager.registerPostprocessor('alias', function(name, cls, data) {
|
|
|
|
var aliases = data.alias,
|
|
i, ln;
|
|
|
|
for (i = 0,ln = aliases.length; i < ln; i++) {
|
|
alias = aliases[i];
|
|
|
|
this.setAlias(cls, alias);
|
|
}
|
|
|
|
}, ['xtype', 'alias']);
|
|
|
|
/**
|
|
* @cfg {Boolean} singleton
|
|
* @member Ext.Class
|
|
* When set to true, the class will be instantiated as singleton. For example:
|
|
*
|
|
* Ext.define('Logger', {
|
|
* singleton: true,
|
|
* log: function(msg) {
|
|
* console.log(msg);
|
|
* }
|
|
* });
|
|
*
|
|
* Logger.log('Hello');
|
|
*/
|
|
Manager.registerPostprocessor('singleton', function(name, cls, data, fn) {
|
|
|
|
if (data.singleton) {
|
|
fn.call(this, name, new cls(), data);
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
/**
|
|
* @cfg {String/String[]} alternateClassName
|
|
* @member Ext.Class
|
|
* Defines alternate names for this class. For example:
|
|
*
|
|
* Ext.define('Developer', {
|
|
* alternateClassName: ['Coder', 'Hacker'],
|
|
* code: function(msg) {
|
|
* alert('Typing... ' + msg);
|
|
* }
|
|
* });
|
|
*
|
|
* var joe = Ext.create('Developer');
|
|
* joe.code('stackoverflow');
|
|
*
|
|
* var rms = Ext.create('Hacker');
|
|
* rms.code('hack hack');
|
|
*/
|
|
Manager.registerPostprocessor('alternateClassName', function(name, cls, data) {
|
|
|
|
var alternates = data.alternateClassName,
|
|
i, ln, alternate;
|
|
|
|
if (!(alternates instanceof Array)) {
|
|
alternates = [alternates];
|
|
}
|
|
|
|
for (i = 0, ln = alternates.length; i < ln; i++) {
|
|
alternate = alternates[i];
|
|
|
|
|
|
this.set(alternate, cls);
|
|
}
|
|
});
|
|
|
|
Ext.apply(Ext, {
|
|
/**
|
|
* Instantiate a class by either full name, alias or alternate name.
|
|
*
|
|
* If {@link Ext.Loader} is {@link Ext.Loader#setConfig enabled} and the class has
|
|
* not been defined yet, it will attempt to load the class via synchronous loading.
|
|
*
|
|
* For example, all these three lines return the same result:
|
|
*
|
|
* // alias
|
|
* var window = Ext.create('widget.window', {
|
|
* width: 600,
|
|
* height: 800,
|
|
* ...
|
|
* });
|
|
*
|
|
* // alternate name
|
|
* var window = Ext.create('Ext.Window', {
|
|
* width: 600,
|
|
* height: 800,
|
|
* ...
|
|
* });
|
|
*
|
|
* // full class name
|
|
* var window = Ext.create('Ext.window.Window', {
|
|
* width: 600,
|
|
* height: 800,
|
|
* ...
|
|
* });
|
|
*
|
|
* // single object with xclass property:
|
|
* var window = Ext.create({
|
|
* xclass: 'Ext.window.Window', // any valid value for 'name' (above)
|
|
* width: 600,
|
|
* height: 800,
|
|
* ...
|
|
* });
|
|
*
|
|
* @param {String} [name] The class name or alias. Can be specified as `xclass`
|
|
* property if only one object parameter is specified.
|
|
* @param {Object...} [args] Additional arguments after the name will be passed to
|
|
* the class' constructor.
|
|
* @return {Object} instance
|
|
* @member Ext
|
|
* @method create
|
|
*/
|
|
create: alias(Manager, 'instantiate'),
|
|
|
|
/**
|
|
* Convenient shorthand to create a widget by its xtype or a config object.
|
|
* See also {@link Ext.ClassManager#instantiateByAlias}.
|
|
*
|
|
* var button = Ext.widget('button'); // Equivalent to Ext.create('widget.button');
|
|
*
|
|
* var panel = Ext.widget('panel', { // Equivalent to Ext.create('widget.panel')
|
|
* title: 'Panel'
|
|
* });
|
|
*
|
|
* var grid = Ext.widget({
|
|
* xtype: 'grid',
|
|
* ...
|
|
* });
|
|
*
|
|
* If a {@link Ext.Component component} instance is passed, it is simply returned.
|
|
*
|
|
* @member Ext
|
|
* @param {String} [name] The xtype of the widget to create.
|
|
* @param {Object} [config] The configuration object for the widget constructor.
|
|
* @return {Object} The widget instance
|
|
*/
|
|
widget: function(name, config) {
|
|
// forms:
|
|
// 1: (xtype)
|
|
// 2: (xtype, config)
|
|
// 3: (config)
|
|
// 4: (xtype, component)
|
|
// 5: (component)
|
|
//
|
|
var xtype = name,
|
|
alias, className, T, load;
|
|
|
|
if (typeof xtype != 'string') { // if (form 3 or 5)
|
|
// first arg is config or component
|
|
config = name; // arguments[0]
|
|
xtype = config.xtype;
|
|
} else {
|
|
config = config || {};
|
|
}
|
|
|
|
if (config.isComponent) {
|
|
return config;
|
|
}
|
|
|
|
alias = 'widget.' + xtype;
|
|
className = Manager.getNameByAlias(alias);
|
|
|
|
// this is needed to support demand loading of the class
|
|
if (!className) {
|
|
load = true;
|
|
}
|
|
|
|
T = Manager.get(className);
|
|
if (load || !T) {
|
|
return Manager.instantiateByAlias(alias, config);
|
|
}
|
|
return new T(config);
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc Ext.ClassManager#instantiateByAlias
|
|
* @member Ext
|
|
* @method createByAlias
|
|
*/
|
|
createByAlias: alias(Manager, 'instantiateByAlias'),
|
|
|
|
/**
|
|
* Defines a class or override. A basic class is defined like this:
|
|
*
|
|
* Ext.define('My.awesome.Class', {
|
|
* someProperty: 'something',
|
|
*
|
|
* someMethod: function(s) {
|
|
* alert(s + this.someProperty);
|
|
* }
|
|
*
|
|
* ...
|
|
* });
|
|
*
|
|
* var obj = new My.awesome.Class();
|
|
*
|
|
* obj.someMethod('Say '); // alerts 'Say something'
|
|
*
|
|
* To create an anonymous class, pass `null` for the `className`:
|
|
*
|
|
* Ext.define(null, {
|
|
* constructor: function () {
|
|
* // ...
|
|
* }
|
|
* });
|
|
*
|
|
* In some cases, it is helpful to create a nested scope to contain some private
|
|
* properties. The best way to do this is to pass a function instead of an object
|
|
* as the second parameter. This function will be called to produce the class
|
|
* body:
|
|
*
|
|
* Ext.define('MyApp.foo.Bar', function () {
|
|
* var id = 0;
|
|
*
|
|
* return {
|
|
* nextId: function () {
|
|
* return ++id;
|
|
* }
|
|
* };
|
|
* });
|
|
*
|
|
* _Note_ that when using override, the above syntax will not override successfully, because
|
|
* the passed function would need to be executed first to determine whether or not the result
|
|
* is an override or defining a new object. As such, an alternative syntax that immediately
|
|
* invokes the function can be used:
|
|
*
|
|
* Ext.define('MyApp.override.BaseOverride', function () {
|
|
* var counter = 0;
|
|
*
|
|
* return {
|
|
* override: 'Ext.Component',
|
|
* logId: function () {
|
|
* console.log(++counter, this.id);
|
|
* }
|
|
* };
|
|
* }());
|
|
*
|
|
*
|
|
* When using this form of `Ext.define`, the function is passed a reference to its
|
|
* class. This can be used as an efficient way to access any static properties you
|
|
* may have:
|
|
*
|
|
* Ext.define('MyApp.foo.Bar', function (Bar) {
|
|
* return {
|
|
* statics: {
|
|
* staticMethod: function () {
|
|
* // ...
|
|
* }
|
|
* },
|
|
*
|
|
* method: function () {
|
|
* return Bar.staticMethod();
|
|
* }
|
|
* };
|
|
* });
|
|
*
|
|
* To define an override, include the `override` property. The content of an
|
|
* override is aggregated with the specified class in order to extend or modify
|
|
* that class. This can be as simple as setting default property values or it can
|
|
* extend and/or replace methods. This can also extend the statics of the class.
|
|
*
|
|
* One use for an override is to break a large class into manageable pieces.
|
|
*
|
|
* // File: /src/app/Panel.js
|
|
*
|
|
* Ext.define('My.app.Panel', {
|
|
* extend: 'Ext.panel.Panel',
|
|
* requires: [
|
|
* 'My.app.PanelPart2',
|
|
* 'My.app.PanelPart3'
|
|
* ]
|
|
*
|
|
* constructor: function (config) {
|
|
* this.callParent(arguments); // calls Ext.panel.Panel's constructor
|
|
* //...
|
|
* },
|
|
*
|
|
* statics: {
|
|
* method: function () {
|
|
* return 'abc';
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* // File: /src/app/PanelPart2.js
|
|
* Ext.define('My.app.PanelPart2', {
|
|
* override: 'My.app.Panel',
|
|
*
|
|
* constructor: function (config) {
|
|
* this.callParent(arguments); // calls My.app.Panel's constructor
|
|
* //...
|
|
* }
|
|
* });
|
|
*
|
|
* Another use of overrides is to provide optional parts of classes that can be
|
|
* independently required. In this case, the class may even be unaware of the
|
|
* override altogether.
|
|
*
|
|
* Ext.define('My.ux.CoolTip', {
|
|
* override: 'Ext.tip.ToolTip',
|
|
*
|
|
* constructor: function (config) {
|
|
* this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
|
|
* //...
|
|
* }
|
|
* });
|
|
*
|
|
* The above override can now be required as normal.
|
|
*
|
|
* Ext.define('My.app.App', {
|
|
* requires: [
|
|
* 'My.ux.CoolTip'
|
|
* ]
|
|
* });
|
|
*
|
|
* Overrides can also contain statics:
|
|
*
|
|
* Ext.define('My.app.BarMod', {
|
|
* override: 'Ext.foo.Bar',
|
|
*
|
|
* statics: {
|
|
* method: function (x) {
|
|
* return this.callParent([x * 2]); // call Ext.foo.Bar.method
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* IMPORTANT: An override is only included in a build if the class it overrides is
|
|
* required. Otherwise, the override, like the target class, is not included.
|
|
*
|
|
* @param {String} className The class name to create in string dot-namespaced format, for example:
|
|
* 'My.very.awesome.Class', 'FeedViewer.plugin.CoolPager'
|
|
* It is highly recommended to follow this simple convention:
|
|
* - The root and the class name are 'CamelCased'
|
|
* - Everything else is lower-cased
|
|
* Pass `null` to create an anonymous class.
|
|
* @param {Object} data The key - value pairs of properties to apply to this class. Property names can be of any valid
|
|
* strings, except those in the reserved listed below:
|
|
* - `mixins`
|
|
* - `statics`
|
|
* - `config`
|
|
* - `alias`
|
|
* - `self`
|
|
* - `singleton`
|
|
* - `alternateClassName`
|
|
* - `override`
|
|
*
|
|
* @param {Function} createdFn Optional callback to execute after the class is created, the execution scope of which
|
|
* (`this`) will be the newly created class itself.
|
|
* @return {Ext.Base}
|
|
* @member Ext
|
|
*/
|
|
define: function (className, data, createdFn) {
|
|
|
|
if (data.override) {
|
|
return Manager.createOverride.apply(Manager, arguments);
|
|
}
|
|
|
|
return Manager.create.apply(Manager, arguments);
|
|
},
|
|
|
|
/**
|
|
* Undefines a class defined using the #define method. Typically used
|
|
* for unit testing where setting up and tearing down a class multiple
|
|
* times is required. For example:
|
|
*
|
|
* // define a class
|
|
* Ext.define('Foo', {
|
|
* ...
|
|
* });
|
|
*
|
|
* // run test
|
|
*
|
|
* // undefine the class
|
|
* Ext.undefine('Foo');
|
|
* @param {String} className The class name to undefine in string dot-namespaced format.
|
|
* @private
|
|
*/
|
|
undefine: function(className) {
|
|
|
|
var classes = Manager.classes,
|
|
maps = Manager.maps,
|
|
aliasToName = maps.aliasToName,
|
|
nameToAliases = maps.nameToAliases,
|
|
alternateToName = maps.alternateToName,
|
|
nameToAlternates = maps.nameToAlternates,
|
|
aliases = nameToAliases[className],
|
|
alternates = nameToAlternates[className],
|
|
parts, partCount, namespace, i;
|
|
|
|
delete Manager.namespaceParseCache[className];
|
|
delete nameToAliases[className];
|
|
delete nameToAlternates[className];
|
|
delete classes[className];
|
|
|
|
if (aliases) {
|
|
for (i = aliases.length; i--;) {
|
|
delete aliasToName[aliases[i]];
|
|
}
|
|
}
|
|
|
|
if (alternates) {
|
|
for (i = alternates.length; i--; ) {
|
|
delete alternateToName[alternates[i]];
|
|
}
|
|
}
|
|
|
|
parts = Manager.parseNamespace(className);
|
|
partCount = parts.length - 1;
|
|
namespace = parts[0];
|
|
|
|
for (i = 1; i < partCount; i++) {
|
|
namespace = namespace[parts[i]];
|
|
if (!namespace) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Old IE blows up on attempt to delete window property
|
|
try {
|
|
delete namespace[parts[partCount]];
|
|
}
|
|
catch (e) {
|
|
namespace[parts[partCount]] = undefined;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc Ext.ClassManager#getName
|
|
* @member Ext
|
|
* @method getClassName
|
|
*/
|
|
getClassName: alias(Manager, 'getName'),
|
|
|
|
/**
|
|
* Returns the displayName property or className or object. When all else fails, returns "Anonymous".
|
|
* @param {Object} object
|
|
* @return {String}
|
|
*/
|
|
getDisplayName: function(object) {
|
|
if (object) {
|
|
if (object.displayName) {
|
|
return object.displayName;
|
|
}
|
|
|
|
if (object.$name && object.$class) {
|
|
return Ext.getClassName(object.$class) + '#' + object.$name;
|
|
}
|
|
|
|
if (object.$className) {
|
|
return object.$className;
|
|
}
|
|
}
|
|
|
|
return 'Anonymous';
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc Ext.ClassManager#getClass
|
|
* @member Ext
|
|
* @method getClass
|
|
*/
|
|
getClass: alias(Manager, 'getClass'),
|
|
|
|
/**
|
|
* Creates namespaces to be used for scoping variables and classes so that they are not global.
|
|
* Specifying the last node of a namespace implicitly creates all other nodes. Usage:
|
|
*
|
|
* Ext.namespace('Company', 'Company.data');
|
|
*
|
|
* // equivalent and preferable to the above syntax
|
|
* Ext.ns('Company.data');
|
|
*
|
|
* Company.Widget = function() { ... };
|
|
*
|
|
* Company.data.CustomStore = function(config) { ... };
|
|
*
|
|
* @param {String...} namespaces
|
|
* @return {Object} The namespace object.
|
|
* (If multiple arguments are passed, this will be the last namespace created)
|
|
* @member Ext
|
|
* @method namespace
|
|
*/
|
|
namespace: alias(Manager, 'createNamespaces')
|
|
});
|
|
|
|
/**
|
|
* Old name for {@link Ext#widget}.
|
|
* @deprecated 4.0.0 Use {@link Ext#widget} instead.
|
|
* @method createWidget
|
|
* @member Ext
|
|
*/
|
|
Ext.createWidget = Ext.widget;
|
|
|
|
/**
|
|
* Convenient alias for {@link Ext#namespace Ext.namespace}.
|
|
* @inheritdoc Ext#namespace
|
|
* @member Ext
|
|
* @method ns
|
|
*/
|
|
Ext.ns = Ext.namespace;
|
|
|
|
Class.registerPreprocessor('className', function(cls, data) {
|
|
if (data.$className) {
|
|
cls.$className = data.$className;
|
|
}
|
|
|
|
}, true, 'first');
|
|
|
|
Class.registerPreprocessor('alias', function(cls, data) {
|
|
|
|
var prototype = cls.prototype,
|
|
xtypes = arrayFrom(data.xtype),
|
|
aliases = arrayFrom(data.alias),
|
|
widgetPrefix = 'widget.',
|
|
widgetPrefixLength = widgetPrefix.length,
|
|
xtypesChain = Array.prototype.slice.call(prototype.xtypesChain || []),
|
|
xtypesMap = Ext.merge({}, prototype.xtypesMap || {}),
|
|
i, ln, alias, xtype;
|
|
|
|
for (i = 0,ln = aliases.length; i < ln; i++) {
|
|
alias = aliases[i];
|
|
|
|
|
|
if (alias.substring(0, widgetPrefixLength) === widgetPrefix) {
|
|
xtype = alias.substring(widgetPrefixLength);
|
|
Ext.Array.include(xtypes, xtype);
|
|
}
|
|
}
|
|
|
|
cls.xtype = data.xtype = xtypes[0];
|
|
data.xtypes = xtypes;
|
|
|
|
for (i = 0,ln = xtypes.length; i < ln; i++) {
|
|
xtype = xtypes[i];
|
|
|
|
if (!xtypesMap[xtype]) {
|
|
xtypesMap[xtype] = true;
|
|
xtypesChain.push(xtype);
|
|
}
|
|
}
|
|
|
|
data.xtypesChain = xtypesChain;
|
|
data.xtypesMap = xtypesMap;
|
|
|
|
Ext.Function.interceptAfter(data, 'onClassCreated', function() {
|
|
|
|
var mixins = prototype.mixins,
|
|
key, mixin;
|
|
|
|
for (key in mixins) {
|
|
if (mixins.hasOwnProperty(key)) {
|
|
mixin = mixins[key];
|
|
|
|
xtypes = mixin.xtypes;
|
|
|
|
if (xtypes) {
|
|
for (i = 0,ln = xtypes.length; i < ln; i++) {
|
|
xtype = xtypes[i];
|
|
|
|
if (!xtypesMap[xtype]) {
|
|
xtypesMap[xtype] = true;
|
|
xtypesChain.push(xtype);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
for (i = 0,ln = xtypes.length; i < ln; i++) {
|
|
xtype = xtypes[i];
|
|
|
|
|
|
Ext.Array.include(aliases, widgetPrefix + xtype);
|
|
}
|
|
|
|
data.alias = aliases;
|
|
|
|
}, ['xtype', 'alias']);
|
|
|
|
}(Ext.Class, Ext.Function.alias, Array.prototype.slice, Ext.Array.from, Ext.global));
|
|
|
|
// simple mechanism for automated means of injecting large amounts of dependency info
|
|
// at the appropriate time in the load cycle
|
|
if (Ext._alternatesMetadata) {
|
|
Ext.ClassManager.addNameAlternateMappings(Ext._alternatesMetadata);
|
|
Ext._alternatesMetadata = null;
|
|
}
|
|
|
|
if (Ext._aliasMetadata) {
|
|
Ext.ClassManager.addNameAliasMappings(Ext._aliasMetadata);
|
|
Ext._aliasMetadata = null;
|
|
}
|
|
|
|
// @tag foundation,core
|
|
// @require ClassManager.js
|
|
// @define Ext.Loader
|
|
|
|
/**
|
|
* @author Jacky Nguyen <jacky@sencha.com>
|
|
* @docauthor Jacky Nguyen <jacky@sencha.com>
|
|
* @class Ext.Loader
|
|
*
|
|
* Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most commonly used
|
|
* via the {@link Ext#require} shorthand. Ext.Loader supports both asynchronous and synchronous loading
|
|
* approaches, and leverage their advantages for the best development flow. We'll discuss about the pros and cons of each approach:
|
|
*
|
|
* # Asynchronous Loading #
|
|
*
|
|
* - Advantages:
|
|
* + Cross-domain
|
|
* + No web server needed: you can run the application via the file system protocol (i.e: `file://path/to/your/index
|
|
* .html`)
|
|
* + Best possible debugging experience: error messages come with the exact file name and line number
|
|
*
|
|
* - Disadvantages:
|
|
* + Dependencies need to be specified before-hand
|
|
*
|
|
* ### Method 1: Explicitly include what you need: ###
|
|
*
|
|
* // Syntax
|
|
* Ext.require({String/Array} expressions);
|
|
*
|
|
* // Example: Single alias
|
|
* Ext.require('widget.window');
|
|
*
|
|
* // Example: Single class name
|
|
* Ext.require('Ext.window.Window');
|
|
*
|
|
* // Example: Multiple aliases / class names mix
|
|
* Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);
|
|
*
|
|
* // Wildcards
|
|
* Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);
|
|
*
|
|
* ### Method 2: Explicitly exclude what you don't need: ###
|
|
*
|
|
* // Syntax: Note that it must be in this chaining format.
|
|
* Ext.exclude({String/Array} expressions)
|
|
* .require({String/Array} expressions);
|
|
*
|
|
* // Include everything except Ext.data.*
|
|
* Ext.exclude('Ext.data.*').require('*');
|
|
*
|
|
* // Include all widgets except widget.checkbox*,
|
|
* // which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.
|
|
* Ext.exclude('widget.checkbox*').require('widget.*');
|
|
*
|
|
* # Synchronous Loading on Demand #
|
|
*
|
|
* - Advantages:
|
|
* + There's no need to specify dependencies before-hand, which is always the convenience of including ext-all.js
|
|
* before
|
|
*
|
|
* - Disadvantages:
|
|
* + Not as good debugging experience since file name won't be shown (except in Firebug at the moment)
|
|
* + Must be from the same domain due to XHR restriction
|
|
* + Need a web server, same reason as above
|
|
*
|
|
* There's one simple rule to follow: Instantiate everything with Ext.create instead of the `new` keyword
|
|
*
|
|
* Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...});
|
|
*
|
|
* Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias
|
|
*
|
|
* Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype`
|
|
*
|
|
* Behind the scene, {@link Ext.ClassManager} will automatically check whether the given class name / alias has already
|
|
* existed on the page. If it's not, Ext.Loader will immediately switch itself to synchronous mode and automatic load the given
|
|
* class and all its dependencies.
|
|
*
|
|
* # Hybrid Loading - The Best of Both Worlds #
|
|
*
|
|
* It has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:
|
|
*
|
|
* ### Step 1: Start writing your application using synchronous approach.
|
|
*
|
|
* Ext.Loader will automatically fetch all dependencies on demand as they're needed during run-time. For example:
|
|
*
|
|
* Ext.onReady(function(){
|
|
* var window = Ext.widget('window', {
|
|
* width: 500,
|
|
* height: 300,
|
|
* layout: {
|
|
* type: 'border',
|
|
* padding: 5
|
|
* },
|
|
* title: 'Hello Dialog',
|
|
* items: [{
|
|
* title: 'Navigation',
|
|
* collapsible: true,
|
|
* region: 'west',
|
|
* width: 200,
|
|
* html: 'Hello',
|
|
* split: true
|
|
* }, {
|
|
* title: 'TabPanel',
|
|
* region: 'center'
|
|
* }]
|
|
* });
|
|
*
|
|
* window.show();
|
|
* })
|
|
*
|
|
* ### Step 2: Along the way, when you need better debugging ability, watch the console for warnings like these: ###
|
|
*
|
|
* [Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code
|
|
* ClassManager.js:432
|
|
* [Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
|
|
*
|
|
* Simply copy and paste the suggested code above `Ext.onReady`, i.e:
|
|
*
|
|
* Ext.require('Ext.window.Window');
|
|
* Ext.require('Ext.layout.container.Border');
|
|
*
|
|
* Ext.onReady(...);
|
|
*
|
|
* Everything should now load via asynchronous mode.
|
|
*
|
|
* # Deployment #
|
|
*
|
|
* It's important to note that dynamic loading should only be used during development on your local machines.
|
|
* During production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes
|
|
* the whole process of transitioning from / to between development / maintenance and production as easy as
|
|
* possible. Internally {@link Ext.Loader#history Ext.Loader.history} maintains the list of all dependencies your application
|
|
* needs in the exact loading sequence. It's as simple as concatenating all files in this array into one,
|
|
* then include it on top of your application.
|
|
*
|
|
* This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
|
|
*
|
|
* @singleton
|
|
*/
|
|
|
|
Ext.Loader = new function() {
|
|
var Loader = this,
|
|
Manager = Ext.ClassManager,
|
|
Class = Ext.Class,
|
|
flexSetter = Ext.Function.flexSetter,
|
|
alias = Ext.Function.alias,
|
|
pass = Ext.Function.pass,
|
|
defer = Ext.Function.defer,
|
|
arrayErase = Ext.Array.erase,
|
|
dependencyProperties = ['extend', 'mixins', 'requires'],
|
|
isInHistory = {},
|
|
history = [],
|
|
slashDotSlashRe = /\/\.\//g,
|
|
dotRe = /\./g,
|
|
setPathCount = 0;
|
|
|
|
Ext.apply(Loader, {
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
isInHistory: isInHistory,
|
|
|
|
/**
|
|
* An array of class names to keep track of the dependency loading order.
|
|
* This is not guaranteed to be the same everytime due to the asynchronous
|
|
* nature of the Loader.
|
|
*
|
|
* @property {Array} history
|
|
*/
|
|
history: history,
|
|
|
|
/**
|
|
* Configuration
|
|
* @private
|
|
*/
|
|
config: {
|
|
/**
|
|
* @cfg {Boolean} enabled
|
|
* Whether or not to enable the dynamic dependency loading feature.
|
|
*/
|
|
enabled: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} scriptChainDelay
|
|
* millisecond delay between asynchronous script injection (prevents stack overflow on some user agents)
|
|
* 'false' disables delay but potentially increases stack load.
|
|
*/
|
|
scriptChainDelay : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} disableCaching
|
|
* Appends current timestamp to script files to prevent caching.
|
|
*/
|
|
disableCaching: true,
|
|
|
|
/**
|
|
* @cfg {String} disableCachingParam
|
|
* The get parameter name for the cache buster's timestamp.
|
|
*/
|
|
disableCachingParam: '_dc',
|
|
|
|
/**
|
|
* @cfg {Boolean} garbageCollect
|
|
* True to prepare an asynchronous script tag for garbage collection (effective only
|
|
* if {@link #preserveScripts preserveScripts} is false)
|
|
*/
|
|
garbageCollect : false,
|
|
|
|
/**
|
|
* @cfg {Object} paths
|
|
* The mapping from namespaces to file paths
|
|
*
|
|
* {
|
|
* 'Ext': '.', // This is set by default, Ext.layout.container.Container will be
|
|
* // loaded from ./layout/Container.js
|
|
*
|
|
* 'My': './src/my_own_folder' // My.layout.Container will be loaded from
|
|
* // ./src/my_own_folder/layout/Container.js
|
|
* }
|
|
*
|
|
* Note that all relative paths are relative to the current HTML document.
|
|
* If not being specified, for example, <code>Other.awesome.Class</code>
|
|
* will simply be loaded from <code>./Other/awesome/Class.js</code>
|
|
*/
|
|
paths: {
|
|
'Ext': '.'
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} preserveScripts
|
|
* False to remove and optionally {@link #garbageCollect garbage-collect} asynchronously loaded scripts,
|
|
* True to retain script element for browser debugger compatibility and improved load performance.
|
|
*/
|
|
preserveScripts : true,
|
|
|
|
/**
|
|
* @cfg {String} scriptCharset
|
|
* Optional charset to specify encoding of dynamic script content.
|
|
*/
|
|
scriptCharset : undefined
|
|
},
|
|
|
|
/**
|
|
* Set the configuration for the loader. This should be called right after ext-(debug).js
|
|
* is included in the page, and before Ext.onReady. i.e:
|
|
*
|
|
* <script type="text/javascript" src="ext-core-debug.js"></script>
|
|
* <script type="text/javascript">
|
|
* Ext.Loader.setConfig({
|
|
* enabled: true,
|
|
* paths: {
|
|
* 'My': 'my_own_path'
|
|
* }
|
|
* });
|
|
* </script>
|
|
* <script type="text/javascript">
|
|
* Ext.require(...);
|
|
*
|
|
* Ext.onReady(function() {
|
|
* // application code here
|
|
* });
|
|
* </script>
|
|
*
|
|
* Refer to config options of {@link Ext.Loader} for the list of possible properties
|
|
*
|
|
* @param {Object} config The config object to override the default values
|
|
* @return {Ext.Loader} this
|
|
*/
|
|
setConfig: function(name, value) {
|
|
if (Ext.isObject(name) && arguments.length === 1) {
|
|
Ext.merge(Loader.config, name);
|
|
|
|
if ('paths' in name) {
|
|
Ext.app.collectNamespaces(name.paths);
|
|
}
|
|
}
|
|
else {
|
|
Loader.config[name] = (Ext.isObject(value)) ? Ext.merge(Loader.config[name], value) : value;
|
|
|
|
if (name === 'paths') {
|
|
Ext.app.collectNamespaces(value);
|
|
}
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* Get the config value corresponding to the specified name. If no name is given, will return the config object
|
|
* @param {String} name The config property name
|
|
* @return {Object}
|
|
*/
|
|
getConfig: function(name) {
|
|
if (name) {
|
|
return Loader.config[name];
|
|
}
|
|
|
|
return Loader.config;
|
|
},
|
|
|
|
/**
|
|
* Sets the path of a namespace.
|
|
* For Example:
|
|
*
|
|
* Ext.Loader.setPath('Ext', '.');
|
|
*
|
|
* @param {String/Object} name See {@link Ext.Function#flexSetter flexSetter}
|
|
* @param {String} [path] See {@link Ext.Function#flexSetter flexSetter}
|
|
* @return {Ext.Loader} this
|
|
* @method
|
|
*/
|
|
setPath: flexSetter(function(name, path) {
|
|
Loader.config.paths[name] = path;
|
|
Ext.app.namespaces[name] = true;
|
|
setPathCount++;
|
|
|
|
return Loader;
|
|
}),
|
|
|
|
/**
|
|
* Sets a batch of path entries
|
|
*
|
|
* @param {Object } paths a set of className: path mappings
|
|
* @return {Ext.Loader} this
|
|
*/
|
|
addClassPathMappings: function(paths) {
|
|
var name;
|
|
|
|
if(setPathCount == 0){
|
|
Loader.config.paths = paths;
|
|
} else {
|
|
for(name in paths){
|
|
Loader.config.paths[name] = paths[name];
|
|
}
|
|
}
|
|
setPathCount++;
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* Translates a className to a file path by adding the
|
|
* the proper prefix and converting the .'s to /'s. For example:
|
|
*
|
|
* Ext.Loader.setPath('My', '/path/to/My');
|
|
*
|
|
* alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'
|
|
*
|
|
* Note that the deeper namespace levels, if explicitly set, are always resolved first. For example:
|
|
*
|
|
* Ext.Loader.setPath({
|
|
* 'My': '/path/to/lib',
|
|
* 'My.awesome': '/other/path/for/awesome/stuff',
|
|
* 'My.awesome.more': '/more/awesome/path'
|
|
* });
|
|
*
|
|
* alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'
|
|
*
|
|
* alert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'
|
|
*
|
|
* alert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'
|
|
*
|
|
* alert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'
|
|
*
|
|
* @param {String} className
|
|
* @return {String} path
|
|
*/
|
|
getPath: function(className) {
|
|
var path = '',
|
|
paths = Loader.config.paths,
|
|
prefix = Loader.getPrefix(className);
|
|
|
|
if (prefix.length > 0) {
|
|
if (prefix === className) {
|
|
return paths[prefix];
|
|
}
|
|
|
|
path = paths[prefix];
|
|
className = className.substring(prefix.length + 1);
|
|
}
|
|
|
|
if (path.length > 0) {
|
|
path += '/';
|
|
}
|
|
|
|
return path.replace(slashDotSlashRe, '/') + className.replace(dotRe, "/") + '.js';
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} className
|
|
*/
|
|
getPrefix: function(className) {
|
|
var paths = Loader.config.paths,
|
|
prefix, deepestPrefix = '';
|
|
|
|
if (paths.hasOwnProperty(className)) {
|
|
return className;
|
|
}
|
|
|
|
for (prefix in paths) {
|
|
if (paths.hasOwnProperty(prefix) && prefix + '.' === className.substring(0, prefix.length + 1)) {
|
|
if (prefix.length > deepestPrefix.length) {
|
|
deepestPrefix = prefix;
|
|
}
|
|
}
|
|
}
|
|
|
|
return deepestPrefix;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} className
|
|
*/
|
|
isAClassNameWithAKnownPrefix: function(className) {
|
|
var prefix = Loader.getPrefix(className);
|
|
|
|
// we can only say it's really a class if className is not equal to any known namespace
|
|
return prefix !== '' && prefix !== className;
|
|
},
|
|
|
|
/**
|
|
* Loads all classes by the given names and all their direct dependencies; optionally executes
|
|
* the given callback function when finishes, within the optional scope.
|
|
*
|
|
* {@link Ext#require} is alias for {@link Ext.Loader#require}.
|
|
*
|
|
* @param {String/Array} expressions Can either be a string or an array of string
|
|
* @param {Function} fn (Optional) The callback function
|
|
* @param {Object} scope (Optional) The execution scope (`this`) of the callback function
|
|
* @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
|
|
*/
|
|
require: function(expressions, fn, scope, excludes) {
|
|
if (fn) {
|
|
fn.call(scope);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Synchronously loads all classes by the given names and all their direct dependencies; optionally
|
|
* executes the given callback function when finishes, within the optional scope.
|
|
*
|
|
* {@link Ext#syncRequire} is alias for {@link Ext.Loader#syncRequire}.
|
|
*
|
|
* @param {String/Array} expressions Can either be a string or an array of string
|
|
* @param {Function} fn (Optional) The callback function
|
|
* @param {Object} scope (Optional) The execution scope (`this`) of the callback function
|
|
* @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
|
|
*/
|
|
syncRequire: function() {},
|
|
|
|
/**
|
|
* Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.
|
|
* Can be chained with more `require` and `exclude` methods, eg:
|
|
*
|
|
* Ext.exclude('Ext.data.*').require('*');
|
|
*
|
|
* Ext.exclude('widget.button*').require('widget.*');
|
|
*
|
|
* {@link Ext#exclude} is alias for {@link Ext.Loader#exclude}.
|
|
*
|
|
* @param {Array} excludes
|
|
* @return {Object} object contains `require` method for chaining
|
|
*/
|
|
exclude: function(excludes) {
|
|
return {
|
|
require: function(expressions, fn, scope) {
|
|
return Loader.require(expressions, fn, scope, excludes);
|
|
},
|
|
|
|
syncRequire: function(expressions, fn, scope) {
|
|
return Loader.syncRequire(expressions, fn, scope, excludes);
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Add a new listener to be executed when all required scripts are fully loaded
|
|
*
|
|
* @param {Function} fn The function callback to be executed
|
|
* @param {Object} scope The execution scope (<code>this</code>) of the callback function
|
|
* @param {Boolean} withDomReady Whether or not to wait for document dom ready as well
|
|
*/
|
|
onReady: function(fn, scope, withDomReady, options) {
|
|
var oldFn;
|
|
|
|
if (withDomReady !== false && Ext.onDocumentReady) {
|
|
oldFn = fn;
|
|
|
|
fn = function() {
|
|
Ext.onDocumentReady(oldFn, scope, options);
|
|
};
|
|
}
|
|
|
|
fn.call(scope);
|
|
}
|
|
});
|
|
|
|
var queue = [],
|
|
isClassFileLoaded = {},
|
|
isFileLoaded = {},
|
|
classNameToFilePathMap = {},
|
|
scriptElements = {},
|
|
readyListeners = [],
|
|
usedClasses = [],
|
|
requiresMap = {},
|
|
comparePriority = function(listenerA, listenerB) {
|
|
return listenerB.priority - listenerA.priority;
|
|
};
|
|
|
|
Ext.apply(Loader, {
|
|
/**
|
|
* @private
|
|
*/
|
|
documentHead: typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]),
|
|
|
|
/**
|
|
* Flag indicating whether there are still files being loaded
|
|
* @private
|
|
*/
|
|
isLoading: false,
|
|
|
|
/**
|
|
* Maintain the queue for all dependencies. Each item in the array is an object of the format:
|
|
*
|
|
* {
|
|
* requires: [...], // The required classes for this queue item
|
|
* callback: function() { ... } // The function to execute when all classes specified in requires exist
|
|
* }
|
|
*
|
|
* @private
|
|
*/
|
|
queue: queue,
|
|
|
|
/**
|
|
* Maintain the list of files that have already been handled so that they never get double-loaded
|
|
* @private
|
|
*/
|
|
isClassFileLoaded: isClassFileLoaded,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
isFileLoaded: isFileLoaded,
|
|
|
|
/**
|
|
* Maintain the list of listeners to execute when all required scripts are fully loaded
|
|
* @private
|
|
*/
|
|
readyListeners: readyListeners,
|
|
|
|
/**
|
|
* Contains classes referenced in `uses` properties.
|
|
* @private
|
|
*/
|
|
optionalRequires: usedClasses,
|
|
|
|
/**
|
|
* Map of fully qualified class names to an array of dependent classes.
|
|
* @private
|
|
*/
|
|
requiresMap: requiresMap,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
numPendingFiles: 0,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
numLoadedFiles: 0,
|
|
|
|
/** @private */
|
|
hasFileLoadError: false,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
classNameToFilePathMap: classNameToFilePathMap,
|
|
|
|
/**
|
|
* The number of scripts loading via loadScript.
|
|
* @private
|
|
*/
|
|
scriptsLoading: 0,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
syncModeEnabled: false,
|
|
|
|
scriptElements: scriptElements,
|
|
|
|
/**
|
|
* Refresh all items in the queue. If all dependencies for an item exist during looping,
|
|
* it will execute the callback and call refreshQueue again. Triggers onReady when the queue is
|
|
* empty
|
|
* @private
|
|
*/
|
|
refreshQueue: function() {
|
|
var ln = queue.length,
|
|
i, item, j, requires;
|
|
|
|
// When the queue of loading classes reaches zero, trigger readiness
|
|
|
|
if (!ln && !Loader.scriptsLoading) {
|
|
return Loader.triggerReady();
|
|
}
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
item = queue[i];
|
|
|
|
if (item) {
|
|
requires = item.requires;
|
|
|
|
// Don't bother checking when the number of files loaded
|
|
// is still less than the array length
|
|
if (requires.length > Loader.numLoadedFiles) {
|
|
continue;
|
|
}
|
|
|
|
// Remove any required classes that are loaded
|
|
for (j = 0; j < requires.length; ) {
|
|
if (Manager.isCreated(requires[j])) {
|
|
// Take out from the queue
|
|
arrayErase(requires, j, 1);
|
|
}
|
|
else {
|
|
j++;
|
|
}
|
|
}
|
|
|
|
// If we've ended up with no required classes, call the callback
|
|
if (item.requires.length === 0) {
|
|
arrayErase(queue, i, 1);
|
|
item.callback.call(item.scope);
|
|
Loader.refreshQueue();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* Inject a script element to document's head, call onLoad and onError accordingly
|
|
* @private
|
|
*/
|
|
injectScriptElement: function(url, onLoad, onError, scope, charset) {
|
|
var script = document.createElement('script'),
|
|
dispatched = false,
|
|
config = Loader.config,
|
|
onLoadFn = function() {
|
|
|
|
if(!dispatched) {
|
|
dispatched = true;
|
|
script.onload = script.onreadystatechange = script.onerror = null;
|
|
if (typeof config.scriptChainDelay == 'number') {
|
|
//free the stack (and defer the next script)
|
|
defer(onLoad, config.scriptChainDelay, scope);
|
|
} else {
|
|
onLoad.call(scope);
|
|
}
|
|
Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
|
|
}
|
|
|
|
},
|
|
onErrorFn = function(arg) {
|
|
defer(onError, 1, scope); //free the stack
|
|
Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
|
|
};
|
|
|
|
script.type = 'text/javascript';
|
|
script.onerror = onErrorFn;
|
|
charset = charset || config.scriptCharset;
|
|
if (charset) {
|
|
script.charset = charset;
|
|
}
|
|
|
|
/*
|
|
* IE9 Standards mode (and others) SHOULD follow the load event only
|
|
* (Note: IE9 supports both onload AND readystatechange events)
|
|
*/
|
|
if ('addEventListener' in script ) {
|
|
script.onload = onLoadFn;
|
|
} else if ('readyState' in script) { // for <IE9 Compatability
|
|
script.onreadystatechange = function() {
|
|
if ( this.readyState == 'loaded' || this.readyState == 'complete' ) {
|
|
onLoadFn();
|
|
}
|
|
};
|
|
} else {
|
|
script.onload = onLoadFn;
|
|
}
|
|
|
|
script.src = url;
|
|
(Loader.documentHead || document.getElementsByTagName('head')[0]).appendChild(script);
|
|
|
|
return script;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
removeScriptElement: function(url) {
|
|
if (scriptElements[url]) {
|
|
Loader.cleanupScriptElement(scriptElements[url], true, !!Loader.getConfig('garbageCollect'));
|
|
delete scriptElements[url];
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
cleanupScriptElement: function(script, remove, collect) {
|
|
var prop;
|
|
script.onload = script.onreadystatechange = script.onerror = null;
|
|
if (remove) {
|
|
Ext.removeNode(script); // Remove, since its useless now
|
|
if (collect) {
|
|
for (prop in script) {
|
|
try {
|
|
if (prop != 'src') {
|
|
// If we set the src property to null IE
|
|
// will try and request a script at './null'
|
|
script[prop] = null;
|
|
}
|
|
delete script[prop]; // and prepare for GC
|
|
} catch (cleanEx) {
|
|
//ignore
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* Loads the specified script URL and calls the supplied callbacks. If this method
|
|
* is called before {@link Ext#isReady}, the script's load will delay the transition
|
|
* to ready. This can be used to load arbitrary scripts that may contain further
|
|
* {@link Ext#require Ext.require} calls.
|
|
*
|
|
* @param {Object/String} options The options object or simply the URL to load.
|
|
* @param {String} options.url The URL from which to load the script.
|
|
* @param {Function} [options.onLoad] The callback to call on successful load.
|
|
* @param {Function} [options.onError] The callback to call on failure to load.
|
|
* @param {Object} [options.scope] The scope (`this`) for the supplied callbacks.
|
|
*/
|
|
loadScript: function (options) {
|
|
var config = Loader.getConfig(),
|
|
isString = typeof options == 'string',
|
|
url = isString ? options : options.url,
|
|
onError = !isString && options.onError,
|
|
onLoad = !isString && options.onLoad,
|
|
scope = !isString && options.scope,
|
|
onScriptError = function() {
|
|
Loader.numPendingFiles--;
|
|
Loader.scriptsLoading--;
|
|
|
|
if (onError) {
|
|
onError.call(scope, "Failed loading '" + url + "', please verify that the file exists");
|
|
}
|
|
|
|
if (Loader.numPendingFiles + Loader.scriptsLoading === 0) {
|
|
Loader.refreshQueue();
|
|
}
|
|
},
|
|
onScriptLoad = function () {
|
|
Loader.numPendingFiles--;
|
|
Loader.scriptsLoading--;
|
|
|
|
if (onLoad) {
|
|
onLoad.call(scope);
|
|
}
|
|
|
|
if (Loader.numPendingFiles + Loader.scriptsLoading === 0) {
|
|
Loader.refreshQueue();
|
|
}
|
|
},
|
|
src;
|
|
|
|
Loader.isLoading = true;
|
|
Loader.numPendingFiles++;
|
|
Loader.scriptsLoading++;
|
|
|
|
src = config.disableCaching ?
|
|
(url + '?' + config.disableCachingParam + '=' + Ext.Date.now()) : url;
|
|
|
|
scriptElements[url] = Loader.injectScriptElement(src, onScriptLoad, onScriptError);
|
|
},
|
|
|
|
/**
|
|
* Load a script file, supports both asynchronous and synchronous approaches
|
|
* @private
|
|
*/
|
|
loadScriptFile: function(url, onLoad, onError, scope, synchronous) {
|
|
if (isFileLoaded[url]) {
|
|
return Loader;
|
|
}
|
|
|
|
var config = Loader.getConfig(),
|
|
noCacheUrl = url + (config.disableCaching ? ('?' + config.disableCachingParam + '=' + Ext.Date.now()) : ''),
|
|
isCrossOriginRestricted = false,
|
|
xhr, status, onScriptError,
|
|
debugSourceURL = "";
|
|
|
|
scope = scope || Loader;
|
|
|
|
Loader.isLoading = true;
|
|
|
|
if (!synchronous) {
|
|
onScriptError = function() {
|
|
};
|
|
|
|
scriptElements[url] = Loader.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
|
|
} else {
|
|
if (typeof XMLHttpRequest != 'undefined') {
|
|
xhr = new XMLHttpRequest();
|
|
} else {
|
|
xhr = new ActiveXObject('Microsoft.XMLHTTP');
|
|
}
|
|
|
|
try {
|
|
xhr.open('GET', noCacheUrl, false);
|
|
xhr.send(null);
|
|
} catch (e) {
|
|
isCrossOriginRestricted = true;
|
|
}
|
|
|
|
status = (xhr.status === 1223) ? 204 :
|
|
(xhr.status === 0 && ((self.location || {}).protocol == 'file:' || (self.location || {}).protocol == 'ionp:')) ? 200 : xhr.status;
|
|
|
|
isCrossOriginRestricted = isCrossOriginRestricted || (status === 0);
|
|
|
|
if (isCrossOriginRestricted
|
|
) {
|
|
}
|
|
else if ((status >= 200 && status < 300) || (status === 304)
|
|
) {
|
|
// Debugger friendly, file names are still shown even though they're eval'ed code
|
|
// Breakpoints work on both Firebug and Chrome's Web Inspector
|
|
if (!Ext.isIE) {
|
|
debugSourceURL = "\n//@ sourceURL=" + url;
|
|
}
|
|
|
|
Ext.globalEval(xhr.responseText + debugSourceURL);
|
|
|
|
onLoad.call(scope);
|
|
}
|
|
else {
|
|
}
|
|
|
|
// Prevent potential IE memory leak
|
|
xhr = null;
|
|
}
|
|
},
|
|
|
|
// documented above
|
|
syncRequire: function() {
|
|
var syncModeEnabled = Loader.syncModeEnabled;
|
|
|
|
if (!syncModeEnabled) {
|
|
Loader.syncModeEnabled = true;
|
|
}
|
|
|
|
Loader.require.apply(Loader, arguments);
|
|
|
|
if (!syncModeEnabled) {
|
|
Loader.syncModeEnabled = false;
|
|
}
|
|
|
|
Loader.refreshQueue();
|
|
},
|
|
|
|
// documented above
|
|
require: function(expressions, fn, scope, excludes) {
|
|
var excluded = {},
|
|
included = {},
|
|
excludedClassNames = [],
|
|
possibleClassNames = [],
|
|
classNames = [],
|
|
references = [],
|
|
callback,
|
|
syncModeEnabled,
|
|
filePath, expression, exclude, className,
|
|
possibleClassName, i, j, ln, subLn;
|
|
|
|
if (excludes) {
|
|
// Convert possible single string to an array.
|
|
excludes = (typeof excludes === 'string') ? [ excludes ] : excludes;
|
|
|
|
for (i = 0,ln = excludes.length; i < ln; i++) {
|
|
exclude = excludes[i];
|
|
|
|
if (typeof exclude == 'string' && exclude.length > 0) {
|
|
excludedClassNames = Manager.getNamesByExpression(exclude);
|
|
|
|
for (j = 0,subLn = excludedClassNames.length; j < subLn; j++) {
|
|
excluded[excludedClassNames[j]] = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Convert possible single string to an array.
|
|
expressions = (typeof expressions === 'string') ? [ expressions ] : (expressions ? expressions : []);
|
|
|
|
if (fn) {
|
|
if (fn.length > 0) {
|
|
callback = function() {
|
|
var classes = [],
|
|
i, ln;
|
|
|
|
for (i = 0,ln = references.length; i < ln; i++) {
|
|
classes.push(Manager.get(references[i]));
|
|
}
|
|
|
|
return fn.apply(this, classes);
|
|
};
|
|
}
|
|
else {
|
|
callback = fn;
|
|
}
|
|
}
|
|
else {
|
|
callback = Ext.emptyFn;
|
|
}
|
|
|
|
scope = scope || Ext.global;
|
|
|
|
for (i = 0,ln = expressions.length; i < ln; i++) {
|
|
expression = expressions[i];
|
|
|
|
if (typeof expression == 'string' && expression.length > 0) {
|
|
possibleClassNames = Manager.getNamesByExpression(expression);
|
|
subLn = possibleClassNames.length;
|
|
|
|
for (j = 0; j < subLn; j++) {
|
|
possibleClassName = possibleClassNames[j];
|
|
|
|
if (excluded[possibleClassName] !== true) {
|
|
references.push(possibleClassName);
|
|
|
|
if (!Manager.isCreated(possibleClassName) && !included[possibleClassName]) {
|
|
included[possibleClassName] = true;
|
|
classNames.push(possibleClassName);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// If the dynamic dependency feature is not being used, throw an error
|
|
// if the dependencies are not defined
|
|
if (classNames.length > 0) {
|
|
if (!Loader.config.enabled) {
|
|
throw new Error("Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. " +
|
|
"Missing required class" + ((classNames.length > 1) ? "es" : "") + ": " + classNames.join(', '));
|
|
}
|
|
}
|
|
else {
|
|
callback.call(scope);
|
|
return Loader;
|
|
}
|
|
|
|
syncModeEnabled = Loader.syncModeEnabled;
|
|
|
|
if (!syncModeEnabled) {
|
|
queue.push({
|
|
requires: classNames.slice(), // this array will be modified as the queue is processed,
|
|
// so we need a copy of it
|
|
callback: callback,
|
|
scope: scope
|
|
});
|
|
}
|
|
|
|
ln = classNames.length;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
className = classNames[i];
|
|
|
|
filePath = Loader.getPath(className);
|
|
|
|
// If we are synchronously loading a file that has already been asychronously loaded before
|
|
// we need to destroy the script tag and revert the count
|
|
// This file will then be forced loaded in synchronous
|
|
if (syncModeEnabled && isClassFileLoaded.hasOwnProperty(className)) {
|
|
if (!isClassFileLoaded[className]) {
|
|
Loader.numPendingFiles--;
|
|
Loader.removeScriptElement(filePath);
|
|
delete isClassFileLoaded[className];
|
|
}
|
|
}
|
|
|
|
if (!isClassFileLoaded.hasOwnProperty(className)) {
|
|
isClassFileLoaded[className] = false;
|
|
classNameToFilePathMap[className] = filePath;
|
|
|
|
Loader.numPendingFiles++;
|
|
Loader.loadScriptFile(
|
|
filePath,
|
|
pass(Loader.onFileLoaded, [className, filePath], Loader),
|
|
pass(Loader.onFileLoadError, [className, filePath], Loader),
|
|
Loader,
|
|
syncModeEnabled
|
|
);
|
|
}
|
|
}
|
|
|
|
if (syncModeEnabled) {
|
|
callback.call(scope);
|
|
|
|
if (ln === 1) {
|
|
return Manager.get(className);
|
|
}
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} className
|
|
* @param {String} filePath
|
|
*/
|
|
onFileLoaded: function(className, filePath) {
|
|
var loaded = isClassFileLoaded[className];
|
|
Loader.numLoadedFiles++;
|
|
|
|
isClassFileLoaded[className] = true;
|
|
isFileLoaded[filePath] = true;
|
|
|
|
// In FF, when we sync load something that has had a script tag inserted, the load event may
|
|
// sometimes fire even if we clean it up and set it to null, so check if we're already loaded here.
|
|
if (!loaded) {
|
|
Loader.numPendingFiles--;
|
|
}
|
|
|
|
if (Loader.numPendingFiles === 0) {
|
|
Loader.refreshQueue();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onFileLoadError: function(className, filePath, errorMessage, isSynchronous) {
|
|
Loader.numPendingFiles--;
|
|
Loader.hasFileLoadError = true;
|
|
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Ensure that any classes referenced in the `uses` property are loaded.
|
|
*/
|
|
addUsedClasses: function (classes) {
|
|
var cls, i, ln;
|
|
|
|
if (classes) {
|
|
classes = (typeof classes == 'string') ? [classes] : classes;
|
|
for (i = 0, ln = classes.length; i < ln; i++) {
|
|
cls = classes[i];
|
|
if (typeof cls == 'string' && !Ext.Array.contains(usedClasses, cls)) {
|
|
usedClasses.push(cls);
|
|
}
|
|
}
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
triggerReady: function() {
|
|
var listener,
|
|
refClasses = usedClasses;
|
|
|
|
if (Loader.isLoading) {
|
|
Loader.isLoading = false;
|
|
|
|
if (refClasses.length !== 0) {
|
|
// Clone then empty the array to eliminate potential recursive loop issue
|
|
refClasses = refClasses.slice();
|
|
usedClasses.length = 0;
|
|
// this may immediately call us back if all 'uses' classes
|
|
// have been loaded
|
|
Loader.require(refClasses, Loader.triggerReady, Loader);
|
|
return Loader;
|
|
}
|
|
}
|
|
|
|
Ext.Array.sort(readyListeners, comparePriority);
|
|
|
|
// this method can be called with Loader.isLoading either true or false
|
|
// (can be called with false when all 'uses' classes are already loaded)
|
|
// this may bypass the above if condition
|
|
while (readyListeners.length && !Loader.isLoading) {
|
|
// calls to refreshQueue may re-enter triggerReady
|
|
// so we cannot necessarily iterate the readyListeners array
|
|
listener = readyListeners.shift();
|
|
listener.fn.call(listener.scope);
|
|
}
|
|
|
|
return Loader;
|
|
},
|
|
|
|
// Documented above already
|
|
onReady: function(fn, scope, withDomReady, options) {
|
|
var oldFn;
|
|
|
|
if (withDomReady !== false && Ext.onDocumentReady) {
|
|
oldFn = fn;
|
|
|
|
fn = function() {
|
|
Ext.onDocumentReady(oldFn, scope, options);
|
|
};
|
|
}
|
|
|
|
if (!Loader.isLoading) {
|
|
fn.call(scope);
|
|
}
|
|
else {
|
|
readyListeners.push({
|
|
fn: fn,
|
|
scope: scope,
|
|
priority: (options && options.priority) || 0
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String} className
|
|
*/
|
|
historyPush: function(className) {
|
|
if (className && isClassFileLoaded.hasOwnProperty(className) && !isInHistory[className]) {
|
|
isInHistory[className] = true;
|
|
history.push(className);
|
|
}
|
|
return Loader;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Turns on or off the "cache buster" applied to dynamically loaded scripts. Normally
|
|
* dynamically loaded scripts have an extra query parameter appended to avoid stale
|
|
* cached scripts. This method can be used to disable this mechanism, and is primarily
|
|
* useful for testing. This is done using a cookie.
|
|
* @param {Boolean} disable True to disable the cache buster.
|
|
* @param {String} [path="/"] An optional path to scope the cookie.
|
|
* @private
|
|
*/
|
|
Ext.disableCacheBuster = function (disable, path) {
|
|
var date = new Date();
|
|
date.setTime(date.getTime() + (disable ? 10*365 : -1) * 24*60*60*1000);
|
|
date = date.toGMTString();
|
|
document.cookie = 'ext-cache=1; expires=' + date + '; path='+(path || '/');
|
|
};
|
|
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method require
|
|
* @inheritdoc Ext.Loader#require
|
|
*/
|
|
Ext.require = alias(Loader, 'require');
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method syncRequire
|
|
* @inheritdoc Ext.Loader#syncRequire
|
|
*/
|
|
Ext.syncRequire = alias(Loader, 'syncRequire');
|
|
|
|
/**
|
|
* Convenient shortcut to {@link Ext.Loader#exclude}
|
|
* @member Ext
|
|
* @method exclude
|
|
* @inheritdoc Ext.Loader#exclude
|
|
*/
|
|
Ext.exclude = alias(Loader, 'exclude');
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method onReady
|
|
* @ignore
|
|
*/
|
|
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 instantiating 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, hooks, continueFn) {
|
|
|
|
var me = this,
|
|
dependencies = [],
|
|
dependency,
|
|
className = Manager.getName(cls),
|
|
i, j, ln, subLn, value, propertyName, propertyValue,
|
|
requiredMap, requiredDep;
|
|
|
|
/*
|
|
Loop through the dependencyProperties, look for string class names and push
|
|
them into a stack, regardless of whether the property's value is a string, array or object. For example:
|
|
{
|
|
extend: 'Ext.MyClass',
|
|
requires: ['Ext.some.OtherClass'],
|
|
mixins: {
|
|
observable: 'Ext.util.Observable';
|
|
}
|
|
}
|
|
which will later be transformed into:
|
|
{
|
|
extend: Ext.MyClass,
|
|
requires: [Ext.some.OtherClass],
|
|
mixins: {
|
|
observable: Ext.util.Observable;
|
|
}
|
|
}
|
|
*/
|
|
|
|
for (i = 0,ln = dependencyProperties.length; i < ln; i++) {
|
|
propertyName = dependencyProperties[i];
|
|
|
|
if (data.hasOwnProperty(propertyName)) {
|
|
propertyValue = data[propertyName];
|
|
|
|
if (typeof propertyValue == 'string') {
|
|
dependencies.push(propertyValue);
|
|
}
|
|
else if (propertyValue instanceof Array) {
|
|
for (j = 0, subLn = propertyValue.length; j < subLn; j++) {
|
|
value = propertyValue[j];
|
|
|
|
if (typeof value == 'string') {
|
|
dependencies.push(value);
|
|
}
|
|
}
|
|
}
|
|
else if (typeof propertyValue != 'function') {
|
|
for (j in propertyValue) {
|
|
if (propertyValue.hasOwnProperty(j)) {
|
|
value = propertyValue[j];
|
|
|
|
if (typeof value == 'string') {
|
|
dependencies.push(value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (dependencies.length === 0) {
|
|
return;
|
|
}
|
|
|
|
|
|
Loader.require(dependencies, function() {
|
|
for (i = 0,ln = dependencyProperties.length; i < ln; i++) {
|
|
propertyName = dependencyProperties[i];
|
|
|
|
if (data.hasOwnProperty(propertyName)) {
|
|
propertyValue = data[propertyName];
|
|
|
|
if (typeof propertyValue == 'string') {
|
|
data[propertyName] = Manager.get(propertyValue);
|
|
}
|
|
else if (propertyValue instanceof Array) {
|
|
for (j = 0, subLn = propertyValue.length; j < subLn; j++) {
|
|
value = propertyValue[j];
|
|
|
|
if (typeof value == 'string') {
|
|
data[propertyName][j] = Manager.get(value);
|
|
}
|
|
}
|
|
}
|
|
else if (typeof propertyValue != 'function') {
|
|
for (var k in propertyValue) {
|
|
if (propertyValue.hasOwnProperty(k)) {
|
|
value = propertyValue[k];
|
|
|
|
if (typeof value == 'string') {
|
|
data[propertyName][k] = Manager.get(value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
continueFn.call(me, cls, data, hooks);
|
|
});
|
|
|
|
return false;
|
|
}, true, 'after', 'className');
|
|
|
|
/**
|
|
* @cfg {String[]} uses
|
|
* @member Ext.Class
|
|
* List of optional classes to load together with this class. These aren't neccessarily loaded before
|
|
* this class is created, but are guaranteed to be available before Ext.onReady listeners are
|
|
* invoked. 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 = data.uses;
|
|
if (uses) {
|
|
Loader.addUsedClasses(uses);
|
|
}
|
|
});
|
|
|
|
Manager.onCreated(Loader.historyPush);
|
|
};
|
|
|
|
// simple mechanism for automated means of injecting large amounts of dependency info
|
|
// at the appropriate time in the load cycle
|
|
if (Ext._classPathMetadata) {
|
|
Ext.Loader.addClassPathMappings(Ext._classPathMetadata);
|
|
Ext._classPathMetadata = null;
|
|
}
|
|
|
|
// initalize the default path of the framework
|
|
(function() {
|
|
var scripts = document.getElementsByTagName('script'),
|
|
currentScript = scripts[scripts.length - 1],
|
|
src = currentScript.src,
|
|
path = src.substring(0, src.lastIndexOf('/') + 1),
|
|
Loader = Ext.Loader;
|
|
|
|
|
|
Loader.setConfig({
|
|
enabled: true,
|
|
disableCaching:
|
|
true,
|
|
paths: {
|
|
'Ext': path + 'src'
|
|
}
|
|
});
|
|
})();
|
|
|
|
// allows a tools like dynatrace to deterministically detect onReady state by invoking
|
|
// a callback (intended for external consumption)
|
|
Ext._endTime = new Date().getTime();
|
|
if (Ext._beforereadyhandler){
|
|
Ext._beforereadyhandler();
|
|
}
|
|
|
|
// @tag foundation,core
|
|
// @require ../class/Loader.js
|
|
// @define Ext.Error
|
|
|
|
/**
|
|
* @author Brian Moeskau <brian@sencha.com>
|
|
* @docauthor Brian Moeskau <brian@sencha.com>
|
|
*
|
|
* A wrapper class for the native JavaScript Error object that adds a few useful capabilities for handling
|
|
* errors in an Ext application. When you use Ext.Error to {@link #raise} an error from within any class that
|
|
* uses the Ext 4 class system, the Error class can automatically add the source class and method from which
|
|
* the error was raised. It also includes logic to automatically log the error to the console, if available,
|
|
* with additional metadata about the error. In all cases, the error will always be thrown at the end so that
|
|
* execution will halt.
|
|
*
|
|
* Ext.Error also offers a global error {@link #handle handling} method that can be overridden in order to
|
|
* handle application-wide errors in a single spot. You can optionally {@link #ignore} errors altogether,
|
|
* although in a real application it's usually a better idea to override the handling function and perform
|
|
* logging or some other method of reporting the errors in a way that is meaningful to the application.
|
|
*
|
|
* At its simplest you can simply raise an error as a simple string from within any code:
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Error.raise('Something bad happened!');
|
|
*
|
|
* If raised from plain JavaScript code, the error will be logged to the console (if available) and the message
|
|
* displayed. In most cases however you'll be raising errors from within a class, and it may often be useful to add
|
|
* additional metadata about the error being raised. The {@link #raise} method can also take a config object.
|
|
* In this form the `msg` attribute becomes the error description, and any other data added to the config gets
|
|
* added to the error object and, if the console is available, logged to the console for inspection.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.define('Ext.Foo', {
|
|
* doSomething: function(option){
|
|
* if (someCondition === false) {
|
|
* Ext.Error.raise({
|
|
* msg: 'You cannot do that!',
|
|
* option: option, // whatever was passed into the method
|
|
* 'error code': 100 // other arbitrary info
|
|
* });
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* If a console is available (that supports the `console.dir` function) you'll see console output like:
|
|
*
|
|
* An error was raised with the following data:
|
|
* option: Object { foo: "bar"}
|
|
* foo: "bar"
|
|
* error code: 100
|
|
* msg: "You cannot do that!"
|
|
* sourceClass: "Ext.Foo"
|
|
* sourceMethod: "doSomething"
|
|
*
|
|
* uncaught exception: You cannot do that!
|
|
*
|
|
* As you can see, the error will report exactly where it was raised and will include as much information as the
|
|
* raising code can usefully provide.
|
|
*
|
|
* 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.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Error.handle = function(err) {
|
|
* if (err.someProperty == 'NotReallyAnError') {
|
|
* // maybe log something to the application here if applicable
|
|
* return true;
|
|
* }
|
|
* // any non-true return value (including none) will cause the error to be thrown
|
|
* }
|
|
*
|
|
*/
|
|
Ext.Error = Ext.extend(Error, {
|
|
statics: {
|
|
/**
|
|
* @property {Boolean} ignore
|
|
* Static flag that can be used to globally disable error reporting to the browser if set to true
|
|
* (defaults to false). Note that if you ignore Ext errors it's likely that some other code may fail
|
|
* and throw a native JavaScript error thereafter, so use with caution. In most cases it will probably
|
|
* be preferable to supply a custom error {@link #handle handling} function instead.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Error.ignore = true;
|
|
*
|
|
* @static
|
|
*/
|
|
ignore: false,
|
|
|
|
/**
|
|
* @property {Boolean} notify
|
|
* Static flag that can be used to globally control error notification to the user. Unlike
|
|
* Ex.Error.ignore, this does not effect exceptions. They are still thrown. This value can be
|
|
* set to false to disable the alert notification (default is true for IE6 and IE7).
|
|
*
|
|
* Only the first error will generate an alert. Internally this flag is set to false when the
|
|
* first error occurs prior to displaying the alert.
|
|
*
|
|
* This flag is not used in a release build.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Error.notify = false;
|
|
*
|
|
* @static
|
|
*/
|
|
//notify: Ext.isIE6 || Ext.isIE7,
|
|
|
|
/**
|
|
* Raise an error that can include additional data and supports automatic console logging if available.
|
|
* You can pass a string error message or an object with the `msg` attribute which will be used as the
|
|
* error message. The object can contain any other name-value attributes (or objects) to be logged
|
|
* along with the error.
|
|
*
|
|
* Note that after displaying the error message a JavaScript error will ultimately be thrown so that
|
|
* execution will halt.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Error.raise('A simple string error message');
|
|
*
|
|
* // or...
|
|
*
|
|
* Ext.define('Ext.Foo', {
|
|
* doSomething: function(option){
|
|
* if (someCondition === false) {
|
|
* Ext.Error.raise({
|
|
* msg: 'You cannot do that!',
|
|
* option: option, // whatever was passed into the method
|
|
* 'error code': 100 // other arbitrary info
|
|
* });
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* @param {String/Object} err The error message string, or an object containing the attribute "msg" that will be
|
|
* used as the error message. Any other data included in the object will also be logged to the browser console,
|
|
* if available.
|
|
* @static
|
|
*/
|
|
raise: function(err){
|
|
err = err || {};
|
|
if (Ext.isString(err)) {
|
|
err = { msg: err };
|
|
}
|
|
|
|
var method = this.raise.caller,
|
|
msg;
|
|
|
|
if (method) {
|
|
if (method.$name) {
|
|
err.sourceMethod = method.$name;
|
|
}
|
|
if (method.$owner) {
|
|
err.sourceClass = method.$owner.$className;
|
|
}
|
|
}
|
|
|
|
if (Ext.Error.handle(err) !== true) {
|
|
msg = Ext.Error.prototype.toString.call(err);
|
|
|
|
Ext.log({
|
|
msg: msg,
|
|
level: 'error',
|
|
dump: err,
|
|
stack: true
|
|
});
|
|
|
|
throw new Ext.Error(err);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Globally handle any Ext errors that may be raised, optionally providing custom logic to
|
|
* handle different errors individually. Return true from the function to bypass throwing the
|
|
* error to the browser, otherwise the error will be thrown and execution will halt.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Error.handle = function(err) {
|
|
* if (err.someProperty == 'NotReallyAnError') {
|
|
* // maybe log something to the application here if applicable
|
|
* return true;
|
|
* }
|
|
* // any non-true return value (including none) will cause the error to be thrown
|
|
* }
|
|
*
|
|
* @param {Ext.Error} err The Ext.Error object being raised. It will contain any attributes that were originally
|
|
* raised with it, plus properties about the method and class from which the error originated (if raised from a
|
|
* class that uses the Ext 4 class system).
|
|
* @static
|
|
*/
|
|
handle: function(){
|
|
return Ext.Error.ignore;
|
|
}
|
|
},
|
|
|
|
// This is the standard property that is the name of the constructor.
|
|
name: 'Ext.Error',
|
|
|
|
/**
|
|
* Creates new Error object.
|
|
* @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.
|
|
*/
|
|
constructor: function(config){
|
|
if (Ext.isString(config)) {
|
|
config = { msg: config };
|
|
}
|
|
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
me.message = me.message || me.msg; // 'message' is standard ('msg' is non-standard)
|
|
// note: the above does not work in old WebKit (me.message is readonly) (Safari 4)
|
|
},
|
|
|
|
/**
|
|
* Provides a custom string representation of the error object. This is an override of the base JavaScript
|
|
* `Object.toString` method, which is useful so that when logged to the browser console, an error object will
|
|
* be displayed with a useful message instead of `[object Object]`, the default `toString` result.
|
|
*
|
|
* The default implementation will include the error message along with the raising class and method, if available,
|
|
* but this can be overridden with a custom implementation either at the prototype level (for all errors) or on
|
|
* a particular error instance, if you want to provide a custom description that will show up in the console.
|
|
* @return {String} The error message. If raised from within the Ext 4 class system, the error message will also
|
|
* include the raising class and method names, if available.
|
|
*/
|
|
toString: function(){
|
|
var me = this,
|
|
className = me.sourceClass ? me.sourceClass : '',
|
|
methodName = me.sourceMethod ? '.' + me.sourceMethod + '(): ' : '',
|
|
msg = me.msg || '(No description provided)';
|
|
|
|
return className + methodName + msg;
|
|
}
|
|
});
|
|
|
|
/*
|
|
* Create a function that will throw an error if called (in debug mode) with a message that
|
|
* indicates the method has been removed.
|
|
* @param {String} suggestion Optional text to include in the message (a workaround perhaps).
|
|
* @return {Function} The generated function.
|
|
* @private
|
|
*/
|
|
Ext.deprecated = function (suggestion) {
|
|
return Ext.emptyFn;
|
|
};
|
|
|
|
/*
|
|
* This mechanism is used to notify the user of the first error encountered on the page. This
|
|
* was previously internal to Ext.Error.raise and is a desirable feature since errors often
|
|
* slip silently under the radar. It cannot live in Ext.Error.raise since there are times
|
|
* where exceptions are handled in a try/catch.
|
|
*/
|
|
|
|
// @tag extras,core
|
|
// @require ../lang/Error.js
|
|
// @define Ext.JSON
|
|
|
|
/**
|
|
* Modified version of [Douglas Crockford's JSON.js][dc] that doesn't
|
|
* mess with the Object prototype.
|
|
*
|
|
* [dc]: http://www.json.org/js.html
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.JSON = (new(function() {
|
|
var me = this,
|
|
encodingFunction,
|
|
decodingFunction,
|
|
useNative = null,
|
|
useHasOwn = !! {}.hasOwnProperty,
|
|
isNative = function() {
|
|
if (useNative === null) {
|
|
useNative = Ext.USE_NATIVE_JSON && window.JSON && JSON.toString() == '[object JSON]';
|
|
}
|
|
return useNative;
|
|
},
|
|
pad = function(n) {
|
|
return n < 10 ? "0" + n : n;
|
|
},
|
|
doDecode = function(json) {
|
|
return eval("(" + json + ')');
|
|
},
|
|
doEncode = function(o, newline) {
|
|
// http://jsperf.com/is-undefined
|
|
if (o === null || o === undefined) {
|
|
return "null";
|
|
} else if (Ext.isDate(o)) {
|
|
return Ext.JSON.encodeDate(o);
|
|
} else if (Ext.isString(o)) {
|
|
return Ext.JSON.encodeString(o);
|
|
} else if (typeof o == "number") {
|
|
//don't use isNumber here, since finite checks happen inside isNumber
|
|
return isFinite(o) ? String(o) : "null";
|
|
} else if (Ext.isBoolean(o)) {
|
|
return String(o);
|
|
}
|
|
// Allow custom zerialization by adding a toJSON method to any object type.
|
|
// Date/String have a toJSON in some environments, so check these first.
|
|
else if (o.toJSON) {
|
|
return o.toJSON();
|
|
} else if (Ext.isArray(o)) {
|
|
return encodeArray(o, newline);
|
|
} else if (Ext.isObject(o)) {
|
|
return encodeObject(o, newline);
|
|
} else if (typeof o === "function") {
|
|
return "null";
|
|
}
|
|
return 'undefined';
|
|
},
|
|
m = {
|
|
"\b": '\\b',
|
|
"\t": '\\t',
|
|
"\n": '\\n',
|
|
"\f": '\\f',
|
|
"\r": '\\r',
|
|
'"': '\\"',
|
|
"\\": '\\\\',
|
|
'\x0b': '\\u000b' //ie doesn't handle \v
|
|
},
|
|
charToReplace = /[\\\"\x00-\x1f\x7f-\uffff]/g,
|
|
encodeString = function(s) {
|
|
return '"' + s.replace(charToReplace, function(a) {
|
|
var c = m[a];
|
|
return typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
|
|
}) + '"';
|
|
},
|
|
|
|
|
|
encodeArray = function(o, newline) {
|
|
|
|
var a = ["[", ""], // Note empty string in case there are no serializable members.
|
|
len = o.length,
|
|
i;
|
|
for (i = 0; i < len; i += 1) {
|
|
a.push(Ext.JSON.encodeValue(o[i]), ',');
|
|
}
|
|
// Overwrite trailing comma (or empty string)
|
|
a[a.length - 1] = ']';
|
|
return a.join("");
|
|
},
|
|
|
|
encodeObject = function(o, newline) {
|
|
|
|
var a = ["{", ""], // Note empty string in case there are no serializable members.
|
|
i, val;
|
|
for (i in o) {
|
|
val = o[i];
|
|
if (!useHasOwn || o.hasOwnProperty(i)) {
|
|
// To match JSON.stringify, we shouldn't encode functions or undefined
|
|
if (typeof val === 'function' || val === undefined) {
|
|
continue;
|
|
}
|
|
a.push(Ext.JSON.encodeValue(i), ":", Ext.JSON.encodeValue(val), ',');
|
|
|
|
}
|
|
}
|
|
// Overwrite trailing comma (or empty string)
|
|
a[a.length - 1] = '}';
|
|
return a.join("");
|
|
};
|
|
|
|
/**
|
|
* Encodes a String. This returns the actual string which is inserted into the JSON string as the literal
|
|
* expression. **The returned value includes enclosing double quotation marks.**
|
|
*
|
|
* To override this:
|
|
*
|
|
* Ext.JSON.encodeString = function(s) {
|
|
* return 'Foo' + s;
|
|
* };
|
|
*
|
|
* @param {String} s The String to encode
|
|
* @return {String} The string literal to use in a JSON string.
|
|
* @method
|
|
*/
|
|
me.encodeString = encodeString;
|
|
|
|
/**
|
|
* The function which {@link #encode} uses to encode all javascript values to their JSON representations
|
|
* when {@link Ext#USE_NATIVE_JSON} is `false`.
|
|
*
|
|
* This is made public so that it can be replaced with a custom implementation.
|
|
*
|
|
* @param {Object} o Any javascript value to be converted to its JSON representation
|
|
* @return {String} The JSON representation of the passed value.
|
|
* @method
|
|
*/
|
|
me.encodeValue = doEncode;
|
|
|
|
/**
|
|
* Encodes a Date. This returns the actual string which is inserted into the JSON string as the literal
|
|
* expression. **The returned value includes enclosing double quotation marks.**
|
|
*
|
|
* The default return format is `"yyyy-mm-ddThh:mm:ss"`.
|
|
*
|
|
* To override this:
|
|
*
|
|
* Ext.JSON.encodeDate = function(d) {
|
|
* return Ext.Date.format(d, '"Y-m-d"');
|
|
* };
|
|
*
|
|
* @param {Date} d The Date to encode
|
|
* @return {String} The string literal to use in a JSON string.
|
|
*/
|
|
me.encodeDate = function(o) {
|
|
return '"' + o.getFullYear() + "-"
|
|
+ pad(o.getMonth() + 1) + "-"
|
|
+ pad(o.getDate()) + "T"
|
|
+ pad(o.getHours()) + ":"
|
|
+ pad(o.getMinutes()) + ":"
|
|
+ pad(o.getSeconds()) + '"';
|
|
};
|
|
|
|
/**
|
|
* Encodes an Object, Array or other value.
|
|
*
|
|
* If the environment's native JSON encoding is not being used ({@link Ext#USE_NATIVE_JSON} is not set,
|
|
* or the environment does not support it), then ExtJS's encoding will be used. This allows the developer
|
|
* to add a `toJSON` method to their classes which need serializing to return a valid JSON representation
|
|
* of the object.
|
|
*
|
|
* @param {Object} o The variable to encode
|
|
* @return {String} The JSON string
|
|
*/
|
|
me.encode = function(o) {
|
|
if (!encodingFunction) {
|
|
// setup encoding function on first access
|
|
encodingFunction = isNative() ? JSON.stringify : me.encodeValue;
|
|
}
|
|
return encodingFunction(o);
|
|
};
|
|
|
|
/**
|
|
* Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws
|
|
* a SyntaxError unless the safe option is set.
|
|
*
|
|
* @param {String} json The JSON string
|
|
* @param {Boolean} [safe=false] True to return null, false to throw an exception if the JSON is invalid.
|
|
* @return {Object} The resulting object
|
|
*/
|
|
me.decode = function(json, safe) {
|
|
if (!decodingFunction) {
|
|
// setup decoding function on first access
|
|
decodingFunction = isNative() ? JSON.parse : doDecode;
|
|
}
|
|
try {
|
|
return decodingFunction(json);
|
|
} catch (e) {
|
|
if (safe === true) {
|
|
return null;
|
|
}
|
|
Ext.Error.raise({
|
|
sourceClass: "Ext.JSON",
|
|
sourceMethod: "decode",
|
|
msg: "You're trying to decode an invalid JSON String: " + json
|
|
});
|
|
}
|
|
};
|
|
})());
|
|
/**
|
|
* Shorthand for {@link Ext.JSON#encode}
|
|
* @member Ext
|
|
* @method encode
|
|
* @inheritdoc Ext.JSON#encode
|
|
*/
|
|
Ext.encode = Ext.JSON.encode;
|
|
/**
|
|
* Shorthand for {@link Ext.JSON#decode}
|
|
* @member Ext
|
|
* @method decode
|
|
* @inheritdoc Ext.JSON#decode
|
|
*/
|
|
Ext.decode = Ext.JSON.decode;
|
|
|
|
// @tag extras,core
|
|
// @require misc/JSON.js
|
|
// @define Ext
|
|
|
|
/**
|
|
* @class Ext
|
|
*
|
|
* The Ext namespace (global object) encapsulates all classes, singletons, and
|
|
* utility methods provided by Sencha's libraries.
|
|
*
|
|
* Most user interface Components are at a lower level of nesting in the namespace,
|
|
* but many common utility functions are provided as direct properties of the Ext namespace.
|
|
*
|
|
* Also many frequently used methods from other classes are provided as shortcuts
|
|
* within the Ext namespace. For example {@link Ext#getCmp Ext.getCmp} aliases
|
|
* {@link Ext.ComponentManager#get Ext.ComponentManager.get}.
|
|
*
|
|
* Many applications are initiated with {@link Ext#onReady Ext.onReady} which is
|
|
* called once the DOM is ready. This ensures all scripts have been loaded,
|
|
* preventing dependency issues. For example:
|
|
*
|
|
* Ext.onReady(function(){
|
|
* new Ext.Component({
|
|
* renderTo: document.body,
|
|
* html: 'DOM ready!'
|
|
* });
|
|
* });
|
|
*
|
|
* For more information about how to use the Ext classes, see:
|
|
*
|
|
* - <a href="http://www.sencha.com/learn/">The Learning Center</a>
|
|
* - <a href="http://www.sencha.com/learn/Ext_FAQ">The FAQ</a>
|
|
* - <a href="http://www.sencha.com/forum/">The forums</a>
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.apply(Ext, {
|
|
userAgent: navigator.userAgent.toLowerCase(),
|
|
cache: {},
|
|
idSeed: 1000,
|
|
windowId: 'ext-window',
|
|
documentId: 'ext-document',
|
|
|
|
/**
|
|
* True when the document is fully initialized and ready for action
|
|
*/
|
|
isReady: false,
|
|
|
|
/**
|
|
* True to automatically uncache orphaned Ext.Elements periodically
|
|
*/
|
|
enableGarbageCollector: true,
|
|
|
|
/**
|
|
* True to automatically purge event listeners during garbageCollection.
|
|
*/
|
|
enableListenerCollection: true,
|
|
|
|
/**
|
|
* @property {Object} rootHierarchyState the top level hierarchy state to which
|
|
* all other hierarchy states are chained. If there is a viewport instance,
|
|
* this object becomes the viewport's heirarchyState. See also
|
|
* {@link Ext.AbstractComponent#getHierarchyState}
|
|
* @private
|
|
*/
|
|
rootHierarchyState: {},
|
|
|
|
addCacheEntry: function(id, el, dom) {
|
|
dom = dom || el.dom;
|
|
|
|
|
|
var cache = Ext.cache,
|
|
key = id || (el && el.id) || dom.id,
|
|
entry = cache[key] || (cache[key] = {
|
|
data: {},
|
|
events: {},
|
|
|
|
dom: dom,
|
|
|
|
// Skip garbage collection for special elements (window, document, iframes)
|
|
skipGarbageCollection: !!(dom.getElementById || dom.navigator)
|
|
});
|
|
|
|
if (el) {
|
|
el.$cache = entry;
|
|
// Inject the back link from the cache in case the cache entry
|
|
// had already been created by Ext.fly. Ext.fly creates a cache entry with no el link.
|
|
entry.el = el;
|
|
}
|
|
|
|
return entry;
|
|
},
|
|
|
|
updateCacheEntry: function(cacheItem, dom){
|
|
cacheItem.dom = dom;
|
|
if (cacheItem.el) {
|
|
cacheItem.el.dom = dom;
|
|
}
|
|
return cacheItem;
|
|
},
|
|
|
|
/**
|
|
* Generates unique ids. If the element already has an id, it is unchanged
|
|
* @param {HTMLElement/Ext.Element} [el] The element to generate an id for
|
|
* @param {String} prefix (optional) Id prefix (defaults "ext-gen")
|
|
* @return {String} The generated Id.
|
|
*/
|
|
id: function(el, prefix) {
|
|
var me = this,
|
|
sandboxPrefix = '';
|
|
el = Ext.getDom(el, true) || {};
|
|
if (el === document) {
|
|
el.id = me.documentId;
|
|
}
|
|
else if (el === window) {
|
|
el.id = me.windowId;
|
|
}
|
|
if (!el.id) {
|
|
if (me.isSandboxed) {
|
|
sandboxPrefix = Ext.sandboxName.toLowerCase() + '-';
|
|
}
|
|
el.id = sandboxPrefix + (prefix || "ext-gen") + (++Ext.idSeed);
|
|
}
|
|
return el.id;
|
|
},
|
|
|
|
escapeId: (function(){
|
|
var validIdRe = /^[a-zA-Z_][a-zA-Z0-9_\-]*$/i,
|
|
escapeRx = /([\W]{1})/g,
|
|
leadingNumRx = /^(\d)/g,
|
|
escapeFn = function(match, capture){
|
|
return "\\" + capture;
|
|
},
|
|
numEscapeFn = function(match, capture){
|
|
return '\\00' + capture.charCodeAt(0).toString(16) + ' ';
|
|
};
|
|
|
|
return function(id) {
|
|
return validIdRe.test(id)
|
|
? id
|
|
// replace the number portion last to keep the trailing ' '
|
|
// from being escaped
|
|
: id.replace(escapeRx, escapeFn)
|
|
.replace(leadingNumRx, numEscapeFn);
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Returns the current document body as an {@link Ext.Element}.
|
|
* @return {Ext.Element} The document body
|
|
*/
|
|
getBody: (function() {
|
|
var body;
|
|
return function() {
|
|
return body || (body = Ext.get(document.body));
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Returns the current document head as an {@link Ext.Element}.
|
|
* @return {Ext.Element} The document head
|
|
* @method
|
|
*/
|
|
getHead: (function() {
|
|
var head;
|
|
return function() {
|
|
return head || (head = Ext.get(document.getElementsByTagName("head")[0]));
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Returns the current HTML document object as an {@link Ext.Element}.
|
|
* @return {Ext.Element} The document
|
|
*/
|
|
getDoc: (function() {
|
|
var doc;
|
|
return function() {
|
|
return doc || (doc = Ext.get(document));
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Returns the current orientation of the mobile device
|
|
* @return {String} Either 'portrait' or 'landscape'
|
|
*/
|
|
getOrientation: function() {
|
|
return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
|
|
},
|
|
|
|
/**
|
|
* Attempts to destroy any objects passed to it by removing all event listeners, removing them from the
|
|
* DOM (if applicable) and calling their destroy functions (if available). This method is primarily
|
|
* intended for arguments of type {@link Ext.Element} and {@link Ext.Component}, but any subclass of
|
|
* {@link Ext.util.Observable} can be passed in. Any number of elements and/or components can be
|
|
* passed into this function in a single call as separate arguments.
|
|
*
|
|
* @param {Ext.dom.Element/Ext.util.Observable/Ext.dom.Element[]/Ext.util.Observable[]...} args
|
|
* Any number of elements or components, or an Array of either of these to destroy.
|
|
*/
|
|
destroy: function() {
|
|
var ln = arguments.length,
|
|
i, arg;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
arg = arguments[i];
|
|
if (arg) {
|
|
if (Ext.isArray(arg)) {
|
|
this.destroy.apply(this, arg);
|
|
} else if (arg.isStore) {
|
|
arg.destroyStore();
|
|
} else if (Ext.isFunction(arg.destroy)) {
|
|
arg.destroy();
|
|
} else if (arg.dom) {
|
|
arg.remove();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Execute a callback function in a particular scope. If `callback` argument is a
|
|
* function reference, that is called. If it is a string, the string is assumed to
|
|
* be the name of a method on the given `scope`. If no function is passed the call
|
|
* is ignored.
|
|
*
|
|
* For example, these calls are equivalent:
|
|
*
|
|
* var myFunc = this.myFunc;
|
|
*
|
|
* Ext.callback('myFunc', this, [arg1, arg2]);
|
|
* Ext.callback(myFunc, this, [arg1, arg2]);
|
|
*
|
|
* Ext.isFunction(myFunc) && this.myFunc(arg1, arg2);
|
|
*
|
|
* @param {Function} callback The callback to execute
|
|
* @param {Object} [scope] The scope to execute in
|
|
* @param {Array} [args] The arguments to pass to the function
|
|
* @param {Number} [delay] Pass a number to delay the call by a number of milliseconds.
|
|
* @return The value returned by the callback or `undefined` (if there is a `delay`
|
|
* or if the `callback` is not a function).
|
|
*/
|
|
callback: function (callback, scope, args, delay) {
|
|
var fn, ret;
|
|
|
|
if (Ext.isFunction(callback)){
|
|
fn = callback;
|
|
} else if (scope && Ext.isString(callback)) {
|
|
fn = scope[callback];
|
|
}
|
|
|
|
if (fn) {
|
|
args = args || [];
|
|
scope = scope || window;
|
|
if (delay) {
|
|
Ext.defer(fn, delay, scope, args);
|
|
} else {
|
|
ret = fn.apply(scope, args);
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
resolveMethod: function(fn, scope) {
|
|
if (Ext.isFunction(fn)) {
|
|
return fn;
|
|
}
|
|
|
|
|
|
return scope[fn];
|
|
},
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#htmlEncode}.
|
|
* @inheritdoc Ext.String#htmlEncode
|
|
* @ignore
|
|
*/
|
|
htmlEncode : function(value) {
|
|
return Ext.String.htmlEncode(value);
|
|
},
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#htmlDecode}.
|
|
* @inheritdoc Ext.String#htmlDecode
|
|
* @ignore
|
|
*/
|
|
htmlDecode : function(value) {
|
|
return Ext.String.htmlDecode(value);
|
|
},
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#urlAppend}.
|
|
* @inheritdoc Ext.String#urlAppend
|
|
* @ignore
|
|
*/
|
|
urlAppend : function(url, s) {
|
|
return Ext.String.urlAppend(url, s);
|
|
}
|
|
});
|
|
|
|
|
|
Ext.ns = Ext.namespace;
|
|
|
|
// for old browsers
|
|
window.undefined = window.undefined;
|
|
|
|
/**
|
|
* @class Ext
|
|
*/
|
|
(function(){
|
|
/*
|
|
FF 3.6 - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.17) Gecko/20110420 Firefox/3.6.17
|
|
FF 4.0.1 - Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
|
|
FF 5.0 - Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
|
|
|
|
IE6 - Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;)
|
|
IE7 - Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SV1;)
|
|
IE8 - Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
|
|
IE9 - Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)]
|
|
IE10 - Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8)
|
|
|
|
Chrome 11 - Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.60 Safari/534.24
|
|
|
|
Safari 5 - Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
|
|
|
|
Opera 11.11 - Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
|
|
*/
|
|
var check = function(regex){
|
|
return regex.test(Ext.userAgent);
|
|
},
|
|
isStrict = document.compatMode == "CSS1Compat",
|
|
version = function (is, regex) {
|
|
var m;
|
|
return (is && (m = regex.exec(Ext.userAgent))) ? parseFloat(m[1]) : 0;
|
|
},
|
|
docMode = document.documentMode,
|
|
isOpera = check(/opera/),
|
|
isOpera10_5 = isOpera && check(/version\/10\.5/),
|
|
isChrome = check(/\bchrome\b/),
|
|
isWebKit = check(/webkit/),
|
|
isSafari = !isChrome && check(/safari/),
|
|
isSafari2 = isSafari && check(/applewebkit\/4/), // unique to Safari 2
|
|
isSafari3 = isSafari && check(/version\/3/),
|
|
isSafari4 = isSafari && check(/version\/4/),
|
|
isSafari5_0 = isSafari && check(/version\/5\.0/),
|
|
isSafari5 = isSafari && check(/version\/5/),
|
|
isIE = !isOpera && check(/msie/),
|
|
isIE7 = isIE && ((check(/msie 7/) && docMode != 8 && docMode != 9 && docMode != 10) || docMode == 7),
|
|
isIE8 = isIE && ((check(/msie 8/) && docMode != 7 && docMode != 9 && docMode != 10) || docMode == 8),
|
|
isIE9 = isIE && ((check(/msie 9/) && docMode != 7 && docMode != 8 && docMode != 10) || docMode == 9),
|
|
isIE10 = isIE && ((check(/msie 10/) && docMode != 7 && docMode != 8 && docMode != 9) || docMode == 10),
|
|
isIE6 = isIE && check(/msie 6/),
|
|
isGecko = !isWebKit && check(/gecko/),
|
|
isGecko3 = isGecko && check(/rv:1\.9/),
|
|
isGecko4 = isGecko && check(/rv:2\.0/),
|
|
isGecko5 = isGecko && check(/rv:5\./),
|
|
isGecko10 = isGecko && check(/rv:10\./),
|
|
isFF3_0 = isGecko3 && check(/rv:1\.9\.0/),
|
|
isFF3_5 = isGecko3 && check(/rv:1\.9\.1/),
|
|
isFF3_6 = isGecko3 && check(/rv:1\.9\.2/),
|
|
isWindows = check(/windows|win32/),
|
|
isMac = check(/macintosh|mac os x/),
|
|
isLinux = check(/linux/),
|
|
scrollbarSize = null,
|
|
chromeVersion = version(true, /\bchrome\/(\d+\.\d+)/),
|
|
firefoxVersion = version(true, /\bfirefox\/(\d+\.\d+)/),
|
|
ieVersion = version(isIE, /msie (\d+\.\d+)/),
|
|
operaVersion = version(isOpera, /version\/(\d+\.\d+)/),
|
|
safariVersion = version(isSafari, /version\/(\d+\.\d+)/),
|
|
webKitVersion = version(isWebKit, /webkit\/(\d+\.\d+)/),
|
|
isSecure = /^https/i.test(window.location.protocol),
|
|
nullLog;
|
|
|
|
// remove css image flicker
|
|
try {
|
|
document.execCommand("BackgroundImageCache", false, true);
|
|
} catch(e) {}
|
|
|
|
|
|
|
|
nullLog = function () {};
|
|
nullLog.info = nullLog.warn = nullLog.error = Ext.emptyFn;
|
|
|
|
// also update Version.js
|
|
Ext.setVersion('extjs', '4.2.1.883');
|
|
Ext.apply(Ext, {
|
|
/**
|
|
* @property {String} SSL_SECURE_URL
|
|
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src
|
|
* to prevent the IE insecure content warning (`'about:blank'`, except for IE
|
|
* in secure mode, which is `'javascript:""'`).
|
|
*/
|
|
SSL_SECURE_URL : isSecure && isIE ? 'javascript:\'\'' : 'about:blank',
|
|
|
|
/**
|
|
* @property {Boolean} enableFx
|
|
* True if the {@link Ext.fx.Anim} Class is available.
|
|
*/
|
|
|
|
plainTableCls: Ext.buildSettings.baseCSSPrefix + 'table-plain',
|
|
|
|
plainListCls: Ext.buildSettings.baseCSSPrefix + 'list-plain',
|
|
|
|
/**
|
|
* @property {Boolean} enableNestedListenerRemoval
|
|
* **Experimental.** True to cascade listener removal to child elements when an element
|
|
* is removed. Currently not optimized for performance.
|
|
*/
|
|
enableNestedListenerRemoval : false,
|
|
|
|
/**
|
|
* @property {Boolean} USE_NATIVE_JSON
|
|
* Indicates whether to use native browser parsing for JSON methods.
|
|
* This option is ignored if the browser does not support native JSON methods.
|
|
*
|
|
* **Note:** Native JSON methods will not work with objects that have functions.
|
|
* Also, property names must be quoted, otherwise the data will not parse.
|
|
*/
|
|
USE_NATIVE_JSON : false,
|
|
|
|
/**
|
|
* Returns the dom node for the passed String (id), dom node, or Ext.Element.
|
|
* Optional 'strict' flag is needed for IE since it can return 'name' and
|
|
* 'id' elements by using getElementById.
|
|
*
|
|
* Here are some examples:
|
|
*
|
|
* // gets dom node based on id
|
|
* var elDom = Ext.getDom('elId');
|
|
* // gets dom node based on the dom node
|
|
* var elDom1 = Ext.getDom(elDom);
|
|
*
|
|
* // If we don't know if we are working with an
|
|
* // Ext.Element or a dom node use Ext.getDom
|
|
* function(el){
|
|
* var dom = Ext.getDom(el);
|
|
* // do something with the dom node
|
|
* }
|
|
*
|
|
* **Note:** the dom node to be found actually needs to exist (be rendered, etc)
|
|
* when this method is called to be successful.
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el
|
|
* @return HTMLElement
|
|
*/
|
|
getDom : function(el, strict) {
|
|
if (!el || !document) {
|
|
return null;
|
|
}
|
|
if (el.dom) {
|
|
return el.dom;
|
|
} else {
|
|
if (typeof el == 'string') {
|
|
var e = Ext.getElementById(el);
|
|
// IE returns elements with the 'name' and 'id' attribute.
|
|
// we do a strict check to return the element with only the id attribute
|
|
if (e && isIE && strict) {
|
|
if (el == e.getAttribute('id')) {
|
|
return e;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
return e;
|
|
} else {
|
|
return el;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes a DOM node from the document.
|
|
*
|
|
* Removes this element from the document, removes all DOM event listeners, and
|
|
* deletes the cache reference. All DOM event listeners are removed from this element.
|
|
* If {@link Ext#enableNestedListenerRemoval Ext.enableNestedListenerRemoval} is
|
|
* `true`, then DOM event listeners are also removed from all child nodes.
|
|
* The body node will be ignored if passed in.
|
|
*
|
|
* @param {HTMLElement} node The node to remove
|
|
* @method
|
|
*/
|
|
removeNode : isIE6 || isIE7 || isIE8
|
|
? (function() {
|
|
var d;
|
|
return function(n){
|
|
if(n && n.tagName.toUpperCase() != 'BODY'){
|
|
(Ext.enableNestedListenerRemoval) ? Ext.EventManager.purgeElement(n) : Ext.EventManager.removeAll(n);
|
|
|
|
var cache = Ext.cache,
|
|
id = n.id;
|
|
|
|
if (cache[id]) {
|
|
delete cache[id].dom;
|
|
delete cache[id];
|
|
}
|
|
|
|
if (isIE8 && n.parentNode) {
|
|
n.parentNode.removeChild(n);
|
|
}
|
|
d = d || document.createElement('div');
|
|
d.appendChild(n);
|
|
d.innerHTML = '';
|
|
}
|
|
};
|
|
}())
|
|
: function(n) {
|
|
if (n && n.parentNode && n.tagName.toUpperCase() != 'BODY') {
|
|
(Ext.enableNestedListenerRemoval) ? Ext.EventManager.purgeElement(n) : Ext.EventManager.removeAll(n);
|
|
|
|
var cache = Ext.cache,
|
|
id = n.id;
|
|
|
|
if (cache[id]) {
|
|
delete cache[id].dom;
|
|
delete cache[id];
|
|
}
|
|
|
|
n.parentNode.removeChild(n);
|
|
}
|
|
},
|
|
|
|
isStrict: isStrict,
|
|
|
|
// IE10 quirks behaves like Gecko/WebKit quirks, so don't include it here
|
|
isIEQuirks: isIE && (!isStrict && (isIE6 || isIE7 || isIE8 || isIE9)),
|
|
|
|
/**
|
|
* True if the detected browser is Opera.
|
|
* @type Boolean
|
|
*/
|
|
isOpera : isOpera,
|
|
|
|
/**
|
|
* True if the detected browser is Opera 10.5x.
|
|
* @type Boolean
|
|
*/
|
|
isOpera10_5 : isOpera10_5,
|
|
|
|
/**
|
|
* True if the detected browser uses WebKit.
|
|
* @type Boolean
|
|
*/
|
|
isWebKit : isWebKit,
|
|
|
|
/**
|
|
* True if the detected browser is Chrome.
|
|
* @type Boolean
|
|
*/
|
|
isChrome : isChrome,
|
|
|
|
/**
|
|
* True if the detected browser is Safari.
|
|
* @type Boolean
|
|
*/
|
|
isSafari : isSafari,
|
|
|
|
/**
|
|
* True if the detected browser is Safari 3.x.
|
|
* @type Boolean
|
|
*/
|
|
isSafari3 : isSafari3,
|
|
|
|
/**
|
|
* True if the detected browser is Safari 4.x.
|
|
* @type Boolean
|
|
*/
|
|
isSafari4 : isSafari4,
|
|
|
|
/**
|
|
* True if the detected browser is Safari 5.x.
|
|
* @type Boolean
|
|
*/
|
|
isSafari5 : isSafari5,
|
|
|
|
/**
|
|
* True if the detected browser is Safari 5.0.x.
|
|
* @type Boolean
|
|
*/
|
|
isSafari5_0 : isSafari5_0,
|
|
|
|
|
|
/**
|
|
* True if the detected browser is Safari 2.x.
|
|
* @type Boolean
|
|
*/
|
|
isSafari2 : isSafari2,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer.
|
|
* @type Boolean
|
|
*/
|
|
isIE : isIE,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 6.x.
|
|
* @type Boolean
|
|
*/
|
|
isIE6 : isIE6,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 7.x.
|
|
* @type Boolean
|
|
*/
|
|
isIE7 : isIE7,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 7.x or lower.
|
|
* @type Boolean
|
|
*/
|
|
isIE7m : isIE6 || isIE7,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 7.x or higher.
|
|
* @type Boolean
|
|
*/
|
|
isIE7p : isIE && !isIE6,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 8.x.
|
|
* @type Boolean
|
|
*/
|
|
isIE8 : isIE8,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 8.x or lower.
|
|
* @type Boolean
|
|
*/
|
|
isIE8m : isIE6 || isIE7 || isIE8,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 8.x or higher.
|
|
* @type Boolean
|
|
*/
|
|
isIE8p : isIE && !(isIE6 || isIE7),
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 9.x.
|
|
* @type Boolean
|
|
*/
|
|
isIE9 : isIE9,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 9.x or lower.
|
|
* @type Boolean
|
|
*/
|
|
isIE9m : isIE6 || isIE7 || isIE8 || isIE9,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 9.x or higher.
|
|
* @type Boolean
|
|
*/
|
|
isIE9p : isIE && !(isIE6 || isIE7 || isIE8),
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 10.x.
|
|
* @type Boolean
|
|
*/
|
|
isIE10 : isIE10,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 10.x or lower.
|
|
* @type Boolean
|
|
*/
|
|
isIE10m : isIE6 || isIE7 || isIE8 || isIE9 || isIE10,
|
|
|
|
/**
|
|
* True if the detected browser is Internet Explorer 10.x or higher.
|
|
* @type Boolean
|
|
*/
|
|
isIE10p : isIE && !(isIE6 || isIE7 || isIE8 || isIE9),
|
|
|
|
/**
|
|
* True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
|
|
* @type Boolean
|
|
*/
|
|
isGecko : isGecko,
|
|
|
|
/**
|
|
* True if the detected browser uses a Gecko 1.9+ layout engine (e.g. Firefox 3.x).
|
|
* @type Boolean
|
|
*/
|
|
isGecko3 : isGecko3,
|
|
|
|
/**
|
|
* True if the detected browser uses a Gecko 2.0+ layout engine (e.g. Firefox 4.x).
|
|
* @type Boolean
|
|
*/
|
|
isGecko4 : isGecko4,
|
|
|
|
/**
|
|
* True if the detected browser uses a Gecko 5.0+ layout engine (e.g. Firefox 5.x).
|
|
* @type Boolean
|
|
*/
|
|
isGecko5 : isGecko5,
|
|
|
|
/**
|
|
* True if the detected browser uses a Gecko 5.0+ layout engine (e.g. Firefox 5.x).
|
|
* @type Boolean
|
|
*/
|
|
isGecko10 : isGecko10,
|
|
|
|
/**
|
|
* True if the detected browser uses FireFox 3.0
|
|
* @type Boolean
|
|
*/
|
|
isFF3_0 : isFF3_0,
|
|
|
|
/**
|
|
* True if the detected browser uses FireFox 3.5
|
|
* @type Boolean
|
|
*/
|
|
isFF3_5 : isFF3_5,
|
|
|
|
/**
|
|
* True if the detected browser uses FireFox 3.6
|
|
* @type Boolean
|
|
*/
|
|
isFF3_6 : isFF3_6,
|
|
|
|
/**
|
|
* True if the detected browser uses FireFox 4
|
|
* @type Boolean
|
|
*/
|
|
isFF4 : 4 <= firefoxVersion && firefoxVersion < 5,
|
|
|
|
/**
|
|
* True if the detected browser uses FireFox 5
|
|
* @type Boolean
|
|
*/
|
|
isFF5 : 5 <= firefoxVersion && firefoxVersion < 6,
|
|
|
|
/**
|
|
* True if the detected browser uses FireFox 10
|
|
* @type Boolean
|
|
*/
|
|
isFF10 : 10 <= firefoxVersion && firefoxVersion < 11,
|
|
|
|
/**
|
|
* True if the detected platform is Linux.
|
|
* @type Boolean
|
|
*/
|
|
isLinux : isLinux,
|
|
|
|
/**
|
|
* True if the detected platform is Windows.
|
|
* @type Boolean
|
|
*/
|
|
isWindows : isWindows,
|
|
|
|
/**
|
|
* True if the detected platform is Mac OS.
|
|
* @type Boolean
|
|
*/
|
|
isMac : isMac,
|
|
|
|
/**
|
|
* The current version of Chrome (0 if the browser is not Chrome).
|
|
* @type Number
|
|
*/
|
|
chromeVersion: chromeVersion,
|
|
|
|
/**
|
|
* The current version of Firefox (0 if the browser is not Firefox).
|
|
* @type Number
|
|
*/
|
|
firefoxVersion: firefoxVersion,
|
|
|
|
/**
|
|
* The current version of IE (0 if the browser is not IE). This does not account
|
|
* for the documentMode of the current page, which is factored into {@link #isIE7},
|
|
* {@link #isIE8} and {@link #isIE9}. Thus this is not always true:
|
|
*
|
|
* Ext.isIE8 == (Ext.ieVersion == 8)
|
|
*
|
|
* @type Number
|
|
*/
|
|
ieVersion: ieVersion,
|
|
|
|
/**
|
|
* The current version of Opera (0 if the browser is not Opera).
|
|
* @type Number
|
|
*/
|
|
operaVersion: operaVersion,
|
|
|
|
/**
|
|
* The current version of Safari (0 if the browser is not Safari).
|
|
* @type Number
|
|
*/
|
|
safariVersion: safariVersion,
|
|
|
|
/**
|
|
* The current version of WebKit (0 if the browser does not use WebKit).
|
|
* @type Number
|
|
*/
|
|
webKitVersion: webKitVersion,
|
|
|
|
/**
|
|
* True if the page is running over SSL
|
|
* @type Boolean
|
|
*/
|
|
isSecure: isSecure,
|
|
|
|
/**
|
|
* URL to a 1x1 transparent gif image used by Ext to create inline icons with
|
|
* CSS background images. In older versions of IE, this defaults to
|
|
* "http://sencha.com/s.gif" and you should change this to a URL on your server.
|
|
* For other browsers it uses an inline data URL.
|
|
* @type String
|
|
*/
|
|
BLANK_IMAGE_URL : (isIE6 || isIE7) ? '/' + '/www.sencha.com/s.gif' : 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
|
|
|
|
/**
|
|
* Utility method for returning a default value if the passed value is empty.
|
|
*
|
|
* The value is deemed to be empty if it is:
|
|
*
|
|
* - null
|
|
* - undefined
|
|
* - an empty array
|
|
* - a zero length string (Unless the `allowBlank` parameter is `true`)
|
|
*
|
|
* @param {Object} value The value to test
|
|
* @param {Object} defaultValue The value to return if the original value is empty
|
|
* @param {Boolean} [allowBlank=false] true to allow zero length strings to qualify as non-empty.
|
|
* @return {Object} value, if non-empty, else defaultValue
|
|
* @deprecated 4.0.0 Use {@link Ext#valueFrom} instead
|
|
*/
|
|
value : function(v, defaultValue, allowBlank){
|
|
return Ext.isEmpty(v, allowBlank) ? defaultValue : v;
|
|
},
|
|
|
|
/**
|
|
* Escapes the passed string for use in a regular expression.
|
|
* @param {String} str
|
|
* @return {String}
|
|
* @deprecated 4.0.0 Use {@link Ext.String#escapeRegex} instead
|
|
*/
|
|
escapeRe : function(s) {
|
|
return s.replace(/([-.*+?\^${}()|\[\]\/\\])/g, "\\$1");
|
|
},
|
|
|
|
/**
|
|
* Applies event listeners to elements by selectors when the document is ready.
|
|
* The event name is specified with an `@` suffix.
|
|
*
|
|
* Ext.addBehaviors({
|
|
* // add a listener for click on all anchors in element with id foo
|
|
* '#foo a@click' : function(e, t){
|
|
* // do something
|
|
* },
|
|
*
|
|
* // add the same listener to multiple selectors (separated by comma BEFORE the @)
|
|
* '#foo a, #bar span.some-class@mouseover' : function(){
|
|
* // do something
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Object} obj The list of behaviors to apply
|
|
*/
|
|
addBehaviors : function(o){
|
|
if(!Ext.isReady){
|
|
Ext.onReady(function(){
|
|
Ext.addBehaviors(o);
|
|
});
|
|
} else {
|
|
var cache = {}, // simple cache for applying multiple behaviors to same selector does query multiple times
|
|
parts,
|
|
b,
|
|
s;
|
|
for (b in o) {
|
|
if ((parts = b.split('@'))[1]) { // for Object prototype breakers
|
|
s = parts[0];
|
|
if(!cache[s]){
|
|
cache[s] = Ext.select(s);
|
|
}
|
|
cache[s].on(parts[1], o[b]);
|
|
}
|
|
}
|
|
cache = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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] true to force a recalculation of the value.
|
|
* @return {Object} An object containing scrollbar sizes.
|
|
* @return {Number} return.width The width of the vertical scrollbar.
|
|
* @return {Number} return.height The height of the horizontal scrollbar.
|
|
*/
|
|
getScrollbarSize: function (force) {
|
|
if (!Ext.isReady) {
|
|
return {};
|
|
}
|
|
|
|
if (force || !scrollbarSize) {
|
|
var db = document.body,
|
|
div = document.createElement('div');
|
|
|
|
div.style.width = div.style.height = '100px';
|
|
div.style.overflow = 'scroll';
|
|
div.style.position = 'absolute';
|
|
|
|
db.appendChild(div); // now we can measure the div...
|
|
|
|
// at least in iE9 the div is not 100px - the scrollbar size is removed!
|
|
scrollbarSize = {
|
|
width: div.offsetWidth - div.clientWidth,
|
|
height: div.offsetHeight - div.clientHeight
|
|
};
|
|
|
|
db.removeChild(div);
|
|
}
|
|
|
|
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] 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');
|
|
* }
|
|
* });
|
|
*
|
|
* Important note: To borrow class prototype methods, use {@link Ext.Base#borrow} instead.
|
|
*
|
|
* @param {Object} dest The destination object.
|
|
* @param {Object} source The source object.
|
|
* @param {String/String[]} names Either an Array of property names, or a comma-delimited list
|
|
* of property names to copy.
|
|
* @param {Boolean} [usePrototypeKeys] Defaults to false. Pass true to copy keys off of the
|
|
* prototype as well as the instance.
|
|
* @return {Object} The modified object.
|
|
*/
|
|
copyTo : function(dest, source, names, usePrototypeKeys){
|
|
if(typeof names == 'string'){
|
|
names = names.split(/[,;\s]/);
|
|
}
|
|
|
|
var n,
|
|
nLen = names? names.length : 0,
|
|
name;
|
|
|
|
for(n = 0; n < nLen; n++) {
|
|
name = names[n];
|
|
|
|
if(usePrototypeKeys || source.hasOwnProperty(name)){
|
|
dest[name] = source[name];
|
|
}
|
|
}
|
|
|
|
return dest;
|
|
},
|
|
|
|
/**
|
|
* Attempts to destroy and then remove a set of named properties of the passed object.
|
|
* @param {Object} o The object (most likely a Component) who's properties you wish to destroy.
|
|
* @param {String...} args One or more names of the properties to destroy and remove from the object.
|
|
*/
|
|
destroyMembers : function(o){
|
|
for (var i = 1, a = arguments, len = a.length; i < len; i++) {
|
|
Ext.destroy(o[a[i]]);
|
|
delete o[a[i]];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Logs a message. If a console is present it will be used. On Opera, the method
|
|
* "opera.postError" is called. In other cases, the message is logged to an array
|
|
* "Ext.log.out". An attached debugger can watch this array and view the log. The
|
|
* log buffer is limited to a maximum of "Ext.log.max" entries (defaults to 250).
|
|
* The `Ext.log.out` array can also be written to a popup window by entering the
|
|
* following in the URL bar (a "bookmarklet"):
|
|
*
|
|
* javascript:void(Ext.log.show());
|
|
*
|
|
* If additional parameters are passed, they are joined and appended to the message.
|
|
* A technique for tracing entry and exit of a function is this:
|
|
*
|
|
* function foo () {
|
|
* Ext.log({ indent: 1 }, '>> foo');
|
|
*
|
|
* // log statements in here or methods called from here will be indented
|
|
* // by one step
|
|
*
|
|
* Ext.log({ outdent: 1 }, '<< foo');
|
|
* }
|
|
*
|
|
* This method does nothing in a release build.
|
|
*
|
|
* @param {String/Object} [options] The message to log or an options object with any
|
|
* of the following properties:
|
|
*
|
|
* - `msg`: The message to log (required).
|
|
* - `level`: One of: "error", "warn", "info" or "log" (the default is "log").
|
|
* - `dump`: An object to dump to the log as part of the message.
|
|
* - `stack`: True to include a stack trace in the log.
|
|
* - `indent`: Cause subsequent log statements to be indented one step.
|
|
* - `outdent`: Cause this and following statements to be one step less indented.
|
|
*
|
|
* @param {String...} [message] The message to log (required unless specified in
|
|
* options object).
|
|
*
|
|
* @method
|
|
*/
|
|
log :
|
|
nullLog,
|
|
|
|
/**
|
|
* Partitions the set into two sets: a true set and a false set.
|
|
*
|
|
* Example 1:
|
|
*
|
|
* Ext.partition([true, false, true, true, false]);
|
|
* // returns [[true, true, true], [false, false]]
|
|
*
|
|
* Example 2:
|
|
*
|
|
* Ext.partition(
|
|
* Ext.query("p"),
|
|
* function(val){
|
|
* return val.className == "class1"
|
|
* }
|
|
* );
|
|
* // true are those paragraph elements with a className of "class1",
|
|
* // false set are those that do not have that className.
|
|
*
|
|
* @param {Array/NodeList} arr The array to partition
|
|
* @param {Function} truth (optional) a function to determine truth.
|
|
* If this is omitted the element itself must be able to be evaluated for its truthfulness.
|
|
* @return {Array} [array of truish values, array of falsy values]
|
|
* @deprecated 4.0.0 Will be removed in the next major version
|
|
*/
|
|
partition : function(arr, truth){
|
|
var ret = [[],[]],
|
|
a, v,
|
|
aLen = arr.length;
|
|
|
|
for (a = 0; a < aLen; a++) {
|
|
v = arr[a];
|
|
ret[ (truth && truth(v, a, arr)) || (!truth && v) ? 0 : 1].push(v);
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Invokes a method on each item in an Array.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.invoke(Ext.query("p"), "getAttribute", "id");
|
|
* // [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
|
|
*
|
|
* @param {Array/NodeList} arr The Array of items to invoke the method on.
|
|
* @param {String} methodName The method name to invoke.
|
|
* @param {Object...} args Arguments to send into the method invocation.
|
|
* @return {Array} The results of invoking the method on each item in the array.
|
|
* @deprecated 4.0.0 Will be removed in the next major version
|
|
*/
|
|
invoke : function(arr, methodName){
|
|
var ret = [],
|
|
args = Array.prototype.slice.call(arguments, 2),
|
|
a, v,
|
|
aLen = arr.length;
|
|
|
|
for (a = 0; a < aLen; a++) {
|
|
v = arr[a];
|
|
|
|
if (v && typeof v[methodName] == 'function') {
|
|
ret.push(v[methodName].apply(v, args));
|
|
} else {
|
|
ret.push(undefined);
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Zips N sets together.
|
|
*
|
|
* Example 1:
|
|
*
|
|
* Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
|
|
*
|
|
* Example 2:
|
|
*
|
|
* Ext.zip(
|
|
* [ "+", "-", "+"],
|
|
* [ 12, 10, 22],
|
|
* [ 43, 15, 96],
|
|
* function(a, b, c){
|
|
* return "$" + a + "" + b + "." + c
|
|
* }
|
|
* ); // ["$+12.43", "$-10.15", "$+22.96"]
|
|
*
|
|
* @param {Array/NodeList...} arr This argument may be repeated. Array(s)
|
|
* to contribute values.
|
|
* @param {Function} zipper (optional) The last item in the argument list.
|
|
* This will drive how the items are zipped together.
|
|
* @return {Array} The zipped set.
|
|
* @deprecated 4.0.0 Will be removed in the next major version
|
|
*/
|
|
zip : function(){
|
|
var parts = Ext.partition(arguments, function( val ){ return typeof val != 'function'; }),
|
|
arrs = parts[0],
|
|
fn = parts[1][0],
|
|
len = Ext.max(Ext.pluck(arrs, "length")),
|
|
ret = [],
|
|
i,
|
|
j,
|
|
aLen;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
ret[i] = [];
|
|
if(fn){
|
|
ret[i] = fn.apply(fn, Ext.pluck(arrs, i));
|
|
}else{
|
|
for (j = 0, aLen = arrs.length; j < aLen; j++){
|
|
ret[i].push( arrs[j][i] );
|
|
}
|
|
}
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Turns an array into a sentence, joined by a specified connector - e.g.:
|
|
*
|
|
* Ext.toSentence(['Adama', 'Tigh', 'Roslin']); //'Adama, Tigh and Roslin'
|
|
* Ext.toSentence(['Adama', 'Tigh', 'Roslin'], 'or'); //'Adama, Tigh or Roslin'
|
|
*
|
|
* @param {String[]} items The array to create a sentence from
|
|
* @param {String} connector The string to use to connect the last two words.
|
|
* Usually 'and' or 'or' - defaults to 'and'.
|
|
* @return {String} The sentence string
|
|
* @deprecated 4.0.0 Will be removed in the next major version
|
|
*/
|
|
toSentence: function(items, connector) {
|
|
var length = items.length,
|
|
head,
|
|
tail;
|
|
|
|
if (length <= 1) {
|
|
return items[0];
|
|
} else {
|
|
head = items.slice(0, length - 1);
|
|
tail = items[length - 1];
|
|
|
|
return Ext.util.Format.format("{0} {1} {2}", head.join(", "), connector || 'and', tail);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the default font-family to use for components that support a `glyph` config.
|
|
* @param {String} fontFamily The name of the font-family
|
|
*/
|
|
setGlyphFontFamily: function(fontFamily) {
|
|
Ext._glyphFontFamily = fontFamily;
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} useShims
|
|
* By default, Ext intelligently decides whether floating elements should be shimmed.
|
|
* If you are using flash, you may want to set this to true.
|
|
*/
|
|
useShims: isIE6
|
|
});
|
|
}());
|
|
|
|
/**
|
|
* Loads Ext.app.Application class and starts it up with given configuration after the
|
|
* page is ready.
|
|
*
|
|
* See `Ext.app.Application` for details.
|
|
*
|
|
* @param {Object/String} config Application config object or name of a class derived from Ext.app.Application.
|
|
*/
|
|
Ext.application = function(config) {
|
|
var App, paths, ns;
|
|
|
|
if (typeof config === "string") {
|
|
Ext.require(config, function(){
|
|
App = Ext.ClassManager.get(config);
|
|
});
|
|
}
|
|
else {
|
|
// We have to process `paths` before creating Application class,
|
|
// or `requires` won't work.
|
|
Ext.Loader.setPath(config.name, config.appFolder || 'app');
|
|
|
|
if (paths = config.paths) {
|
|
for (ns in paths) {
|
|
if (paths.hasOwnProperty(ns)) {
|
|
Ext.Loader.setPath(ns, paths[ns]);
|
|
}
|
|
}
|
|
}
|
|
|
|
config['paths processed'] = true;
|
|
|
|
// Let Ext.define do the hard work but don't assign a class name.
|
|
//
|
|
Ext.define(config.name + ".$application", Ext.apply({
|
|
extend: 'Ext.app.Application' // can be replaced by config!
|
|
}, config),
|
|
// call here when the App class gets full defined
|
|
function () {
|
|
App = this;
|
|
});
|
|
}
|
|
|
|
Ext.onReady(function() {
|
|
// this won't be called until App has been created and its requires have been
|
|
// met...
|
|
Ext.app.Application.instance = new App();
|
|
});
|
|
};
|
|
|
|
// @tag extras,core
|
|
// @require ../Ext-more.js
|
|
// @define Ext.util.Format
|
|
|
|
/**
|
|
* @class Ext.util.Format
|
|
*
|
|
* This class is a centralized place for formatting functions. It includes
|
|
* functions to format various different types of data, such as text, dates and numeric values.
|
|
*
|
|
* ## Localization
|
|
*
|
|
* This class contains several options for localization. These can be set once the library has loaded,
|
|
* all calls to the functions from that point will use the locale settings that were specified.
|
|
*
|
|
* Options include:
|
|
*
|
|
* - thousandSeparator
|
|
* - decimalSeparator
|
|
* - currenyPrecision
|
|
* - currencySign
|
|
* - currencyAtEnd
|
|
*
|
|
* This class also uses the default date format defined here: {@link Ext.Date#defaultFormat}.
|
|
*
|
|
* ## Using with renderers
|
|
*
|
|
* There are two helper functions that return a new function that can be used in conjunction with
|
|
* grid renderers:
|
|
*
|
|
* columns: [{
|
|
* dataIndex: 'date',
|
|
* renderer: Ext.util.Format.dateRenderer('Y-m-d')
|
|
* }, {
|
|
* dataIndex: 'time',
|
|
* renderer: Ext.util.Format.numberRenderer('0.000')
|
|
* }]
|
|
*
|
|
* Functions that only take a single argument can also be passed directly:
|
|
*
|
|
* columns: [{
|
|
* dataIndex: 'cost',
|
|
* renderer: Ext.util.Format.usMoney
|
|
* }, {
|
|
* dataIndex: 'productCode',
|
|
* renderer: Ext.util.Format.uppercase
|
|
* }]
|
|
*
|
|
* ## Using with XTemplates
|
|
*
|
|
* XTemplates can also directly use Ext.util.Format functions:
|
|
*
|
|
* new Ext.XTemplate([
|
|
* 'Date: {startDate:date("Y-m-d")}',
|
|
* 'Cost: {cost:usMoney}'
|
|
* ]);
|
|
*
|
|
* @singleton
|
|
*/
|
|
(function() {
|
|
Ext.ns('Ext.util');
|
|
|
|
var UtilFormat = Ext.util.Format = {},
|
|
stripTagsRE = /<\/?[^>]+>/gi,
|
|
stripScriptsRe = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,
|
|
nl2brRe = /\r?\n/g,
|
|
allHashes = /^#+$/,
|
|
|
|
// Match a format string characters to be able to detect remaining "literal" characters
|
|
formatPattern = /[\d,\.#]+/,
|
|
|
|
// A RegExp to remove from a number format string, all characters except digits and '.'
|
|
formatCleanRe = /[^\d\.#]/g,
|
|
|
|
// A RegExp to remove from a number format string, all characters except digits and the local decimal separator.
|
|
// Created on first use. The local decimal separator character must be initialized for this to be created.
|
|
I18NFormatCleanRe,
|
|
|
|
// Cache ofg number formatting functions keyed by format string
|
|
formatFns = {};
|
|
|
|
Ext.apply(UtilFormat, {
|
|
//<locale>
|
|
/**
|
|
* @property {String} thousandSeparator
|
|
* The character that the {@link #number} function uses as a thousand separator.
|
|
*
|
|
* This may be overridden in a locale file.
|
|
*/
|
|
thousandSeparator: ',',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @property {String} decimalSeparator
|
|
* The character that the {@link #number} function uses as a decimal point.
|
|
*
|
|
* This may be overridden in a locale file.
|
|
*/
|
|
decimalSeparator: '.',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @property {Number} currencyPrecision
|
|
* The number of decimal places that the {@link #currency} function displays.
|
|
*
|
|
* This may be overridden in a locale file.
|
|
*/
|
|
currencyPrecision: 2,
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @property {String} currencySign
|
|
* The currency sign that the {@link #currency} function displays.
|
|
*
|
|
* This may be overridden in a locale file.
|
|
*/
|
|
currencySign: '$',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @property {Boolean} currencyAtEnd
|
|
* This may be set to <code>true</code> to make the {@link #currency} function
|
|
* append the currency sign to the formatted value.
|
|
*
|
|
* This may be overridden in a locale file.
|
|
*/
|
|
currencyAtEnd: false,
|
|
//</locale>
|
|
|
|
/**
|
|
* Checks a reference and converts it to empty string if it is undefined.
|
|
* @param {Object} value Reference to check
|
|
* @return {Object} Empty string if converted, otherwise the original value
|
|
*/
|
|
undef : function(value) {
|
|
return value !== undefined ? value : "";
|
|
},
|
|
|
|
/**
|
|
* Checks a reference and converts it to the default value if it's empty.
|
|
* @param {Object} value Reference to check
|
|
* @param {String} [defaultValue=""] The value to insert of it's undefined.
|
|
* @return {String}
|
|
*/
|
|
defaultValue : function(value, defaultValue) {
|
|
return value !== undefined && value !== '' ? value : defaultValue;
|
|
},
|
|
|
|
/**
|
|
* Returns a substring from within an original string.
|
|
* @param {String} value The original text
|
|
* @param {Number} start The start index of the substring
|
|
* @param {Number} length The length of the substring
|
|
* @return {String} The substring
|
|
* @method
|
|
*/
|
|
substr : 'ab'.substr(-1) != 'b'
|
|
? function (value, start, length) {
|
|
var str = String(value);
|
|
return (start < 0)
|
|
? str.substr(Math.max(str.length + start, 0), length)
|
|
: str.substr(start, length);
|
|
}
|
|
: function(value, start, length) {
|
|
return String(value).substr(start, length);
|
|
},
|
|
|
|
/**
|
|
* Converts a string to all lower case letters.
|
|
* @param {String} value The text to convert
|
|
* @return {String} The converted text
|
|
*/
|
|
lowercase : function(value) {
|
|
return String(value).toLowerCase();
|
|
},
|
|
|
|
/**
|
|
* Converts a string to all upper case letters.
|
|
* @param {String} value The text to convert
|
|
* @return {String} The converted text
|
|
*/
|
|
uppercase : function(value) {
|
|
return String(value).toUpperCase();
|
|
},
|
|
|
|
/**
|
|
* Format a number as US currency.
|
|
* @param {Number/String} value The numeric value to format
|
|
* @return {String} The formatted currency string
|
|
*/
|
|
usMoney : function(v) {
|
|
return UtilFormat.currency(v, '$', 2);
|
|
},
|
|
|
|
/**
|
|
* Format a number as a currency.
|
|
* @param {Number/String} value The numeric value to format
|
|
* @param {String} [sign] The currency sign to use (defaults to {@link #currencySign})
|
|
* @param {Number} [decimals] The number of decimals to use for the currency
|
|
* (defaults to {@link #currencyPrecision})
|
|
* @param {Boolean} [end] True if the currency sign should be at the end of the string
|
|
* (defaults to {@link #currencyAtEnd})
|
|
* @return {String} The formatted currency string
|
|
*/
|
|
currency: function(v, currencySign, decimals, end) {
|
|
var negativeSign = '',
|
|
format = ",0",
|
|
i = 0;
|
|
v = v - 0;
|
|
if (v < 0) {
|
|
v = -v;
|
|
negativeSign = '-';
|
|
}
|
|
decimals = Ext.isDefined(decimals) ? decimals : UtilFormat.currencyPrecision;
|
|
format += (decimals > 0 ? '.' : '');
|
|
for (; i < decimals; i++) {
|
|
format += '0';
|
|
}
|
|
v = UtilFormat.number(v, format);
|
|
if ((end || UtilFormat.currencyAtEnd) === true) {
|
|
return Ext.String.format("{0}{1}{2}", negativeSign, v, currencySign || UtilFormat.currencySign);
|
|
} else {
|
|
return Ext.String.format("{0}{1}{2}", negativeSign, currencySign || UtilFormat.currencySign, v);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Formats the passed date using the specified format pattern.
|
|
* @param {String/Date} value The value to format. If a string is passed, it is converted to a Date
|
|
* by the Javascript's built-in Date#parse method.
|
|
* @param {String} [format] Any valid date format string. Defaults to {@link Ext.Date#defaultFormat}.
|
|
* @return {String} The formatted date string.
|
|
*/
|
|
date: function(v, format) {
|
|
if (!v) {
|
|
return "";
|
|
}
|
|
if (!Ext.isDate(v)) {
|
|
v = new Date(Date.parse(v));
|
|
}
|
|
return Ext.Date.dateFormat(v, format || Ext.Date.defaultFormat);
|
|
},
|
|
|
|
/**
|
|
* Returns a date rendering function that can be reused to apply a date format multiple times efficiently.
|
|
* @param {String} format Any valid date format string. Defaults to {@link Ext.Date#defaultFormat}.
|
|
* @return {Function} The date formatting function
|
|
*/
|
|
dateRenderer : function(format) {
|
|
return function(v) {
|
|
return UtilFormat.date(v, format);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Strips all HTML tags.
|
|
* @param {Object} value The text from which to strip tags
|
|
* @return {String} The stripped text
|
|
*/
|
|
stripTags : function(v) {
|
|
return !v ? v : String(v).replace(stripTagsRE, "");
|
|
},
|
|
|
|
/**
|
|
* Strips all script tags.
|
|
* @param {Object} value The text from which to strip script tags
|
|
* @return {String} The stripped text
|
|
*/
|
|
stripScripts : function(v) {
|
|
return !v ? v : String(v).replace(stripScriptsRe, "");
|
|
},
|
|
|
|
/**
|
|
* Simple format for a file size (xxx bytes, xxx KB, xxx MB).
|
|
* @param {Number/String} size The numeric value to format
|
|
* @return {String} The formatted file size
|
|
*/
|
|
fileSize : (function(){
|
|
var byteLimit = 1024,
|
|
kbLimit = 1048576,
|
|
mbLimit = 1073741824;
|
|
|
|
return function(size) {
|
|
var out;
|
|
if (size < byteLimit) {
|
|
if (size === 1) {
|
|
out = '1 byte';
|
|
} else {
|
|
out = size + ' bytes';
|
|
}
|
|
} else if (size < kbLimit) {
|
|
out = (Math.round(((size*10) / byteLimit))/10) + ' KB';
|
|
} else if (size < mbLimit) {
|
|
out = (Math.round(((size*10) / kbLimit))/10) + ' MB';
|
|
} else {
|
|
out = (Math.round(((size*10) / mbLimit))/10) + ' GB';
|
|
}
|
|
return out;
|
|
};
|
|
})(),
|
|
|
|
/**
|
|
* It does simple math for use in a template, for example:
|
|
*
|
|
* var tpl = new Ext.Template('{value} * 10 = {value:math("* 10")}');
|
|
*
|
|
* @return {Function} A function that operates on the passed value.
|
|
* @method
|
|
*/
|
|
math : (function(){
|
|
var fns = {};
|
|
|
|
return function(v, a){
|
|
if (!fns[a]) {
|
|
fns[a] = Ext.functionFactory('v', 'return v ' + a + ';');
|
|
}
|
|
return fns[a](v);
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* Rounds the passed number to the required decimal precision.
|
|
* @param {Number/String} value The numeric value to round.
|
|
* @param {Number} precision The number of decimal places to which to round the first parameter's value.
|
|
* @return {Number} The rounded value.
|
|
*/
|
|
round : function(value, precision) {
|
|
var result = Number(value);
|
|
if (typeof precision == 'number') {
|
|
precision = Math.pow(10, precision);
|
|
result = Math.round(value * precision) / precision;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Formats the passed number according to the passed format string.
|
|
*
|
|
* The number of digits after the decimal separator character specifies the number of
|
|
* decimal places in the resulting string. The *local-specific* decimal character is
|
|
* used in the result.
|
|
*
|
|
* The *presence* of a thousand separator character in the format string specifies that
|
|
* the *locale-specific* thousand separator (if any) is inserted separating thousand groups.
|
|
*
|
|
* By default, "," is expected as the thousand separator, and "." is expected as the decimal separator.
|
|
*
|
|
* ## New to Ext JS 4
|
|
*
|
|
* Locale-specific characters are always used in the formatted output when inserting
|
|
* thousand and decimal separators.
|
|
*
|
|
* The format string must specify separator characters according to US/UK conventions ("," as the
|
|
* thousand separator, and "." as the decimal separator)
|
|
*
|
|
* To allow specification of format strings according to local conventions for separator characters, add
|
|
* the string `/i` to the end of the format string.
|
|
*
|
|
* examples (123456.789):
|
|
*
|
|
* - `0` - (123456) show only digits, no precision
|
|
* - `0.00` - (123456.78) show only digits, 2 precision
|
|
* - `0.0000` - (123456.7890) show only digits, 4 precision
|
|
* - `0,000` - (123,456) show comma and digits, no precision
|
|
* - `0,000.00` - (123,456.78) show comma and digits, 2 precision
|
|
* - `0,0.00` - (123,456.78) shortcut method, show comma and digits, 2 precision
|
|
* - `0.####` - (123,456,789) Allow maximum 4 decimal places, but do not right pad with zeroes
|
|
*
|
|
* @param {Number} v The number to format.
|
|
* @param {String} format The way you would like to format this text.
|
|
* @return {String} The formatted number.
|
|
*/
|
|
number : function(v, formatString) {
|
|
if (!formatString) {
|
|
return v;
|
|
}
|
|
var formatFn = formatFns[formatString];
|
|
|
|
// Generate formatting function to be cached and reused keyed by the format string.
|
|
// This results in a 100% performance increase over analyzing the format string each invocation.
|
|
if (!formatFn) {
|
|
|
|
var originalFormatString = formatString,
|
|
comma = UtilFormat.thousandSeparator,
|
|
decimalSeparator = UtilFormat.decimalSeparator,
|
|
hasComma,
|
|
splitFormat,
|
|
extraChars,
|
|
precision = 0,
|
|
multiplier,
|
|
trimTrailingZeroes,
|
|
code;
|
|
|
|
// The "/i" suffix allows caller to use a locale-specific formatting string.
|
|
// Clean the format string by removing all but numerals and the decimal separator.
|
|
// Then split the format string into pre and post decimal segments according to *what* the
|
|
// decimal separator is. If they are specifying "/i", they are using the local convention in the format string.
|
|
if (formatString.substr(formatString.length - 2) == '/i') {
|
|
if (!I18NFormatCleanRe) {
|
|
I18NFormatCleanRe = new RegExp('[^\\d\\' + UtilFormat.decimalSeparator + ']','g');
|
|
}
|
|
formatString = formatString.substr(0, formatString.length - 2);
|
|
hasComma = formatString.indexOf(comma) != -1;
|
|
splitFormat = formatString.replace(I18NFormatCleanRe, '').split(decimalSeparator);
|
|
} else {
|
|
hasComma = formatString.indexOf(',') != -1;
|
|
splitFormat = formatString.replace(formatCleanRe, '').split('.');
|
|
}
|
|
extraChars = formatString.replace(formatPattern, '');
|
|
|
|
if (splitFormat.length > 2) {
|
|
} else if (splitFormat.length === 2) {
|
|
precision = splitFormat[1].length;
|
|
|
|
// Formatting ending in .##### means maximum 5 trailing significant digits
|
|
trimTrailingZeroes = allHashes.test(splitFormat[1]);
|
|
}
|
|
|
|
// The function we create is called immediately and returns a closure which has access to vars and some fixed values; RegExes and the format string.
|
|
code = [
|
|
'var utilFormat=Ext.util.Format,extNumber=Ext.Number,neg,fnum,parts' +
|
|
(hasComma ? ',thousandSeparator,thousands=[],j,n,i' : '') +
|
|
(extraChars ? ',formatString="' + formatString + '",formatPattern=/[\\d,\\.#]+/' : '') +
|
|
(trimTrailingZeroes ? ',trailingZeroes=/\\.?0+$/;' : ';') +
|
|
'return function(v){' +
|
|
'if(typeof v!=="number"&&isNaN(v=extNumber.from(v,NaN)))return"";' +
|
|
'neg=v<0;',
|
|
'fnum=Ext.Number.toFixed(Math.abs(v), ' + precision + ');'
|
|
];
|
|
|
|
if (hasComma) {
|
|
// If we have to insert commas...
|
|
|
|
// split the string up into whole and decimal parts if there are decimals
|
|
if (precision) {
|
|
code[code.length] = 'parts=fnum.split(".");';
|
|
code[code.length] = 'fnum=parts[0];';
|
|
}
|
|
code[code.length] =
|
|
'if(v>=1000) {';
|
|
code[code.length] = 'thousandSeparator=utilFormat.thousandSeparator;' +
|
|
'thousands.length=0;' +
|
|
'j=fnum.length;' +
|
|
'n=fnum.length%3||3;' +
|
|
'for(i=0;i<j;i+=n){' +
|
|
'if(i!==0){' +
|
|
'n=3;' +
|
|
'}' +
|
|
'thousands[thousands.length]=fnum.substr(i,n);' +
|
|
'}' +
|
|
'fnum=thousands.join(thousandSeparator);' +
|
|
'}';
|
|
if (precision) {
|
|
code[code.length] = 'fnum += utilFormat.decimalSeparator+parts[1];';
|
|
}
|
|
|
|
} else if (precision) {
|
|
// If they are using a weird decimal separator, split and concat using it
|
|
code[code.length] = 'if(utilFormat.decimalSeparator!=="."){' +
|
|
'parts=fnum.split(".");' +
|
|
'fnum=parts[0]+utilFormat.decimalSeparator+parts[1];' +
|
|
'}';
|
|
}
|
|
|
|
if (trimTrailingZeroes) {
|
|
code[code.length] = 'fnum=fnum.replace(trailingZeroes,"");';
|
|
}
|
|
|
|
/*
|
|
* Edge case. If we have a very small negative number it will get rounded to 0,
|
|
* however the initial check at the top will still report as negative. Replace
|
|
* everything but 1-9 and check if the string is empty to determine a 0 value.
|
|
*/
|
|
code[code.length] = 'if(neg&&fnum!=="' + (precision ? '0.' + Ext.String.repeat('0', precision) : '0') + '")fnum="-"+fnum;';
|
|
|
|
code[code.length] = 'return ';
|
|
|
|
// If there were extra characters around the formatting string, replace the format string part with the formatted number.
|
|
if (extraChars) {
|
|
code[code.length] = 'formatString.replace(formatPattern, fnum);';
|
|
} else {
|
|
code[code.length] = 'fnum;';
|
|
}
|
|
code[code.length] = '};'
|
|
|
|
formatFn = formatFns[originalFormatString] = Ext.functionFactory('Ext', code.join(''))(Ext);
|
|
}
|
|
return formatFn(v);
|
|
},
|
|
|
|
/**
|
|
* Returns a number rendering function that can be reused to apply a number format multiple
|
|
* times efficiently.
|
|
*
|
|
* @param {String} format Any valid number format string for {@link #number}
|
|
* @return {Function} The number formatting function
|
|
*/
|
|
numberRenderer : function(format) {
|
|
return function(v) {
|
|
return UtilFormat.number(v, format);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Formats an object of name value properties as HTML element attribute values suitable for using when creating textual markup.
|
|
* @param {Object} attributes An object containing the HTML attributes as properties eg: `{height:40, vAlign:'top'}`
|
|
*/
|
|
attributes: function(attributes) {
|
|
if (typeof attributes === 'object') {
|
|
var result = [],
|
|
name;
|
|
|
|
for (name in attributes) {
|
|
result.push(name, '="', name === 'style' ? Ext.DomHelper.generateStyles(attributes[name]) : Ext.htmlEncode(attributes[name]), '"');
|
|
}
|
|
attributes = result.join('');
|
|
}
|
|
return attributes||'';
|
|
},
|
|
|
|
/**
|
|
* Selectively do a plural form of a word based on a numeric value. For example, in a template,
|
|
* `{commentCount:plural("Comment")}` would result in `"1 Comment"` if commentCount was 1 or
|
|
* would be `"x Comments"` if the value is 0 or greater than 1.
|
|
*
|
|
* @param {Number} value The value to compare against
|
|
* @param {String} singular The singular form of the word
|
|
* @param {String} [plural] The plural form of the word (defaults to the singular with an "s")
|
|
*/
|
|
plural : function(v, s, p) {
|
|
return v +' ' + (v == 1 ? s : (p ? p : s+'s'));
|
|
},
|
|
|
|
/**
|
|
* Converts newline characters to the HTML tag `<br/>`
|
|
*
|
|
* @param {String} v The string value to format.
|
|
* @return {String} The string with embedded `<br/>` tags in place of newlines.
|
|
*/
|
|
nl2br : function(v) {
|
|
return Ext.isEmpty(v) ? '' : v.replace(nl2brRe, '<br/>');
|
|
},
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#capitalize}.
|
|
* @method
|
|
* @inheritdoc Ext.String#capitalize
|
|
*/
|
|
capitalize: Ext.String.capitalize,
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#ellipsis}.
|
|
* @method
|
|
* @inheritdoc Ext.String#ellipsis
|
|
*/
|
|
ellipsis: Ext.String.ellipsis,
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#format}.
|
|
* @method
|
|
* @inheritdoc Ext.String#format
|
|
*/
|
|
format: Ext.String.format,
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#htmlDecode}.
|
|
* @method
|
|
* @inheritdoc Ext.String#htmlDecode
|
|
*/
|
|
htmlDecode: Ext.String.htmlDecode,
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#htmlEncode}.
|
|
* @method
|
|
* @inheritdoc Ext.String#htmlEncode
|
|
*/
|
|
htmlEncode: Ext.String.htmlEncode,
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#leftPad}.
|
|
* @method
|
|
* @inheritdoc Ext.String#leftPad
|
|
*/
|
|
leftPad: Ext.String.leftPad,
|
|
|
|
/**
|
|
* Alias for {@link Ext.String#trim}.
|
|
* @method
|
|
* @inheritdoc Ext.String#trim
|
|
*/
|
|
trim : Ext.String.trim,
|
|
|
|
/**
|
|
* Parses a number or string representing margin sizes into an object.
|
|
* Supports CSS-style margin declarations (e.g. 10, "10", "10 10", "10 10 10" and
|
|
* "10 10 10 10" are all valid options and would return the same result).
|
|
*
|
|
* @param {Number/String} v The encoded margins
|
|
* @return {Object} An object with margin sizes for top, right, bottom and left
|
|
*/
|
|
parseBox : function(box) {
|
|
box = box || 0;
|
|
|
|
if (typeof box === 'number') {
|
|
return {
|
|
top : box,
|
|
right : box,
|
|
bottom: box,
|
|
left : box
|
|
};
|
|
}
|
|
|
|
var parts = box.split(' '),
|
|
ln = parts.length;
|
|
|
|
if (ln == 1) {
|
|
parts[1] = parts[2] = parts[3] = parts[0];
|
|
}
|
|
else if (ln == 2) {
|
|
parts[2] = parts[0];
|
|
parts[3] = parts[1];
|
|
}
|
|
else if (ln == 3) {
|
|
parts[3] = parts[1];
|
|
}
|
|
|
|
return {
|
|
top :parseInt(parts[0], 10) || 0,
|
|
right :parseInt(parts[1], 10) || 0,
|
|
bottom:parseInt(parts[2], 10) || 0,
|
|
left :parseInt(parts[3], 10) || 0
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Escapes the passed string for use in a regular expression.
|
|
* @param {String} str
|
|
* @return {String}
|
|
*/
|
|
escapeRegex : function(s) {
|
|
return s.replace(/([\-.*+?\^${}()|\[\]\/\\])/g, "\\$1");
|
|
}
|
|
});
|
|
}());
|
|
|
|
// @tag extras,core
|
|
// @require Format.js
|
|
|
|
/**
|
|
* Provides the ability to execute one or more arbitrary tasks in a asynchronous manner.
|
|
* Generally, you can use the singleton {@link Ext.TaskManager} instead, but if needed,
|
|
* you can create separate instances of TaskRunner. Any number of separate tasks can be
|
|
* started at any time and will run independently of each other.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* // Start a simple clock task that updates a div once per second
|
|
* var updateClock = function () {
|
|
* Ext.fly('clock').update(new Date().format('g:i:s A'));
|
|
* }
|
|
*
|
|
* var runner = new Ext.util.TaskRunner();
|
|
* var task = runner.start({
|
|
* run: updateClock,
|
|
* interval: 1000
|
|
* }
|
|
*
|
|
* The equivalent using TaskManager:
|
|
*
|
|
* var task = Ext.TaskManager.start({
|
|
* run: updateClock,
|
|
* interval: 1000
|
|
* });
|
|
*
|
|
* To end a running task:
|
|
*
|
|
* task.destroy();
|
|
*
|
|
* If a task needs to be started and stopped repeated over time, you can create a
|
|
* {@link Ext.util.TaskRunner.Task Task} instance.
|
|
*
|
|
* var task = runner.newTask({
|
|
* run: function () {
|
|
* // useful code
|
|
* },
|
|
* interval: 1000
|
|
* });
|
|
*
|
|
* task.start();
|
|
*
|
|
* // ...
|
|
*
|
|
* task.stop();
|
|
*
|
|
* // ...
|
|
*
|
|
* task.start();
|
|
*
|
|
* A re-usable, one-shot task can be managed similar to the above:
|
|
*
|
|
* var task = runner.newTask({
|
|
* run: function () {
|
|
* // useful code to run once
|
|
* },
|
|
* repeat: 1
|
|
* });
|
|
*
|
|
* task.start();
|
|
*
|
|
* // ...
|
|
*
|
|
* task.start();
|
|
*
|
|
* See the {@link #start} method for details about how to configure a task object.
|
|
*
|
|
* Also see {@link Ext.util.DelayedTask}.
|
|
*
|
|
* @constructor
|
|
* @param {Number/Object} [interval=10] The minimum precision in milliseconds supported by this
|
|
* TaskRunner instance. Alternatively, a config object to apply to the new instance.
|
|
*/
|
|
Ext.define('Ext.util.TaskRunner', {
|
|
/**
|
|
* @cfg {Boolean} [fireIdleEvent=true]
|
|
* This may be configured `false` to inhibit firing of the {@link Ext.EventManager#idleEvent idle event} after task invocation.
|
|
*/
|
|
|
|
/**
|
|
* @cfg interval
|
|
* The timer resolution.
|
|
*/
|
|
interval: 10,
|
|
|
|
/**
|
|
* @property timerId
|
|
* The id of the current timer.
|
|
* @private
|
|
*/
|
|
timerId: null,
|
|
|
|
constructor: function (interval) {
|
|
var me = this;
|
|
|
|
if (typeof interval == 'number') {
|
|
me.interval = interval;
|
|
} else if (interval) {
|
|
Ext.apply(me, interval);
|
|
}
|
|
|
|
me.tasks = [];
|
|
me.timerFn = Ext.Function.bind(me.onTick, me);
|
|
},
|
|
|
|
/**
|
|
* Creates a new {@link Ext.util.TaskRunner.Task Task} instance. These instances can
|
|
* be easily started and stopped.
|
|
* @param {Object} config The config object. For details on the supported properties,
|
|
* see {@link #start}.
|
|
*/
|
|
newTask: function (config) {
|
|
var task = new Ext.util.TaskRunner.Task(config);
|
|
task.manager = this;
|
|
return task;
|
|
},
|
|
|
|
/**
|
|
* Starts a new task.
|
|
*
|
|
* Before each invocation, Ext injects the property `taskRunCount` into the task object
|
|
* so that calculations based on the repeat count can be performed.
|
|
*
|
|
* The returned task will contain a `destroy` method that can be used to destroy the
|
|
* task and cancel further calls. This is equivalent to the {@link #stop} method.
|
|
*
|
|
* @param {Object} task A config object that supports the following properties:
|
|
* @param {Function} task.run The function to execute each time the task is invoked. The
|
|
* function will be called at each interval and passed the `args` argument if specified,
|
|
* and the current invocation count if not.
|
|
*
|
|
* If a particular scope (`this` reference) is required, be sure to specify it using
|
|
* the `scope` argument.
|
|
*
|
|
* @param {Function} task.onError The function to execute in case of unhandled
|
|
* error on task.run.
|
|
*
|
|
* @param {Boolean} task.run.return `false` from this function to terminate the task.
|
|
*
|
|
* @param {Number} task.interval The frequency in milliseconds with which the task
|
|
* should be invoked.
|
|
*
|
|
* @param {Object[]} task.args An array of arguments to be passed to the function
|
|
* specified by `run`. If not specified, the current invocation count is passed.
|
|
*
|
|
* @param {Object} task.scope The scope (`this` reference) in which to execute the
|
|
* `run` function. Defaults to the task config object.
|
|
*
|
|
* @param {Number} task.duration The length of time in milliseconds to invoke the task
|
|
* before stopping automatically (defaults to indefinite).
|
|
*
|
|
* @param {Number} task.repeat The number of times to invoke the task before stopping
|
|
* automatically (defaults to indefinite).
|
|
* @return {Object} The task
|
|
*/
|
|
start: function(task) {
|
|
var me = this,
|
|
now = Ext.Date.now();
|
|
|
|
if (!task.pending) {
|
|
me.tasks.push(task);
|
|
task.pending = true; // don't allow the task to be added to me.tasks again
|
|
}
|
|
|
|
task.stopped = false; // might have been previously stopped...
|
|
task.taskStartTime = now;
|
|
task.taskRunTime = task.fireOnStart !== false ? 0 : task.taskStartTime;
|
|
task.taskRunCount = 0;
|
|
|
|
if (!me.firing) {
|
|
if (task.fireOnStart !== false) {
|
|
me.startTimer(0, now);
|
|
} else {
|
|
me.startTimer(task.interval, now);
|
|
}
|
|
}
|
|
|
|
return task;
|
|
},
|
|
|
|
/**
|
|
* Stops an existing running task.
|
|
* @param {Object} task The task to stop
|
|
* @return {Object} The task
|
|
*/
|
|
stop: function(task) {
|
|
// NOTE: we don't attempt to remove the task from me.tasks at this point because
|
|
// this could be called from inside a task which would then corrupt the state of
|
|
// the loop in onTick
|
|
if (!task.stopped) {
|
|
task.stopped = true;
|
|
|
|
if (task.onStop) {
|
|
task.onStop.call(task.scope || task, task);
|
|
}
|
|
}
|
|
|
|
return task;
|
|
},
|
|
|
|
/**
|
|
* Stops all tasks that are currently running.
|
|
*/
|
|
stopAll: function() {
|
|
// onTick will take care of cleaning up the mess after this point...
|
|
Ext.each(this.tasks, this.stop, this);
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
firing: false,
|
|
|
|
nextExpires: 1e99,
|
|
|
|
// private
|
|
onTick: function () {
|
|
var me = this,
|
|
tasks = me.tasks,
|
|
now = Ext.Date.now(),
|
|
nextExpires = 1e99,
|
|
len = tasks.length,
|
|
expires, newTasks, i, task, rt, remove;
|
|
|
|
me.timerId = null;
|
|
me.firing = true; // ensure we don't startTimer during this loop...
|
|
|
|
// tasks.length can be > len if start is called during a task.run call... so we
|
|
// first check len to avoid tasks.length reference but eventually we need to also
|
|
// check tasks.length. we avoid repeating use of tasks.length by setting len at
|
|
// that time (to help the next loop)
|
|
for (i = 0; i < len || i < (len = tasks.length); ++i) {
|
|
task = tasks[i];
|
|
|
|
if (!(remove = task.stopped)) {
|
|
expires = task.taskRunTime + task.interval;
|
|
|
|
if (expires <= now) {
|
|
rt = 1; // otherwise we have a stale "rt"
|
|
try {
|
|
rt = task.run.apply(task.scope || task, task.args || [++task.taskRunCount]);
|
|
} catch (taskError) {
|
|
try {
|
|
if (task.onError) {
|
|
rt = task.onError.call(task.scope || task, task, taskError);
|
|
}
|
|
} catch (ignore) { }
|
|
}
|
|
task.taskRunTime = now;
|
|
if (rt === false || task.taskRunCount === task.repeat) {
|
|
me.stop(task);
|
|
remove = true;
|
|
} else {
|
|
remove = task.stopped; // in case stop was called by run
|
|
expires = now + task.interval;
|
|
}
|
|
}
|
|
|
|
if (!remove && task.duration && task.duration <= (now - task.taskStartTime)) {
|
|
me.stop(task);
|
|
remove = true;
|
|
}
|
|
}
|
|
|
|
if (remove) {
|
|
task.pending = false; // allow the task to be added to me.tasks again
|
|
|
|
// once we detect that a task needs to be removed, we copy the tasks that
|
|
// will carry forward into newTasks... this way we avoid O(N*N) to remove
|
|
// each task from the tasks array (and ripple the array down) and also the
|
|
// potentially wasted effort of making a new tasks[] even if all tasks are
|
|
// going into the next wave.
|
|
if (!newTasks) {
|
|
newTasks = tasks.slice(0, i);
|
|
// we don't set me.tasks here because callbacks can also start tasks,
|
|
// which get added to me.tasks... so we will visit them in this loop
|
|
// and account for their expirations in nextExpires...
|
|
}
|
|
} else {
|
|
if (newTasks) {
|
|
newTasks.push(task); // we've cloned the tasks[], so keep this one...
|
|
}
|
|
|
|
if (nextExpires > expires) {
|
|
nextExpires = expires; // track the nearest expiration time
|
|
}
|
|
}
|
|
}
|
|
|
|
if (newTasks) {
|
|
// only now can we copy the newTasks to me.tasks since no user callbacks can
|
|
// take place
|
|
me.tasks = newTasks;
|
|
}
|
|
|
|
me.firing = false; // we're done, so allow startTimer afterwards
|
|
|
|
if (me.tasks.length) {
|
|
// we create a new Date here because all the callbacks could have taken a long
|
|
// time... we want to base the next timeout on the current time (after the
|
|
// callback storm):
|
|
me.startTimer(nextExpires - now, Ext.Date.now());
|
|
}
|
|
|
|
// After a tick
|
|
if (me.fireIdleEvent !== false) {
|
|
Ext.EventManager.idleEvent.fire();
|
|
}
|
|
},
|
|
|
|
// private
|
|
startTimer: function (timeout, now) {
|
|
var me = this,
|
|
expires = now + timeout,
|
|
timerId = me.timerId;
|
|
|
|
// Check to see if this request is enough in advance of the current timer. If so,
|
|
// we reschedule the timer based on this new expiration.
|
|
if (timerId && me.nextExpires - expires > me.interval) {
|
|
clearTimeout(timerId);
|
|
timerId = null;
|
|
}
|
|
|
|
if (!timerId) {
|
|
if (timeout < me.interval) {
|
|
timeout = me.interval;
|
|
}
|
|
|
|
me.timerId = setTimeout(me.timerFn, timeout);
|
|
me.nextExpires = expires;
|
|
}
|
|
}
|
|
},
|
|
function () {
|
|
var me = this,
|
|
proto = me.prototype;
|
|
|
|
/**
|
|
* Destroys this instance, stopping all tasks that are currently running.
|
|
* @method destroy
|
|
*/
|
|
proto.destroy = proto.stopAll;
|
|
|
|
// Documented in TaskManager.js
|
|
Ext.util.TaskManager = Ext.TaskManager = new me();
|
|
|
|
/**
|
|
* Instances of this class are created by {@link Ext.util.TaskRunner#newTask} method.
|
|
*
|
|
* For details on config properties, see {@link Ext.util.TaskRunner#start}.
|
|
* @class Ext.util.TaskRunner.Task
|
|
*/
|
|
me.Task = new Ext.Class({
|
|
isTask: true,
|
|
|
|
/**
|
|
* This flag is set to `true` by {@link #stop}.
|
|
* @private
|
|
*/
|
|
stopped: true, // this avoids the odd combination of !stopped && !pending
|
|
|
|
/**
|
|
* Override default behavior
|
|
*/
|
|
fireOnStart: false,
|
|
|
|
constructor: function (config) {
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
/**
|
|
* Restarts this task, clearing it duration, expiration and run count.
|
|
* @param {Number} [interval] Optionally reset this task's interval.
|
|
*/
|
|
restart: function (interval) {
|
|
if (interval !== undefined) {
|
|
this.interval = interval;
|
|
}
|
|
|
|
this.manager.start(this);
|
|
},
|
|
|
|
/**
|
|
* Starts this task if it is not already started.
|
|
* @param {Number} [interval] Optionally reset this task's interval.
|
|
*/
|
|
start: function (interval) {
|
|
if (this.stopped) {
|
|
this.restart(interval);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Stops this task.
|
|
*/
|
|
stop: function () {
|
|
this.manager.stop(this);
|
|
}
|
|
});
|
|
|
|
proto = me.Task.prototype;
|
|
|
|
/**
|
|
* Destroys this instance, stopping this task's execution.
|
|
* @method destroy
|
|
*/
|
|
proto.destroy = proto.stop;
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// @tag extras,core
|
|
/**
|
|
* A static {@link Ext.util.TaskRunner} instance that can be used to start and stop
|
|
* arbitrary tasks. See {@link Ext.util.TaskRunner} for supported methods and task
|
|
* config properties.
|
|
*
|
|
* // Start a simple clock task that updates a div once per second
|
|
* var task = {
|
|
* run: function(){
|
|
* Ext.fly('clock').update(new Date().format('g:i:s A'));
|
|
* },
|
|
* interval: 1000 //1 second
|
|
* }
|
|
*
|
|
* Ext.TaskManager.start(task);
|
|
*
|
|
* See the {@link #start} method for details about how to configure a task object.
|
|
*/
|
|
Ext.define('Ext.util.TaskManager', {
|
|
extend: Ext.util.TaskRunner ,
|
|
|
|
alternateClassName: [
|
|
'Ext.TaskManager'
|
|
],
|
|
|
|
singleton: true
|
|
});
|
|
|
|
// @tag extras,core
|
|
// @require ../util/TaskManager.js
|
|
|
|
/**
|
|
* @class Ext.perf.Accumulator
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.perf.Accumulator', (function () {
|
|
var currentFrame = null,
|
|
khrome = Ext.global['chrome'],
|
|
formatTpl,
|
|
// lazy init on first request for timestamp (avoids infobar in IE until needed)
|
|
// Also avoids kicking off Chrome's microsecond timer until first needed
|
|
getTimestamp = function () {
|
|
|
|
getTimestamp = function () {
|
|
return new Date().getTime();
|
|
};
|
|
|
|
var interval, toolbox;
|
|
|
|
// If Chrome is started with the --enable-benchmarking switch
|
|
if (Ext.isChrome && khrome && khrome.Interval) {
|
|
interval = new khrome.Interval();
|
|
interval.start();
|
|
getTimestamp = function () {
|
|
return interval.microseconds() / 1000;
|
|
};
|
|
} else if (window.ActiveXObject) {
|
|
try {
|
|
// the above technique is not very accurate for small intervals...
|
|
toolbox = new ActiveXObject('SenchaToolbox.Toolbox');
|
|
Ext.senchaToolbox = toolbox; // export for other uses
|
|
getTimestamp = function () {
|
|
return toolbox.milliseconds;
|
|
};
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
} else if (Date.now) {
|
|
getTimestamp = Date.now;
|
|
}
|
|
|
|
Ext.perf.getTimestamp = Ext.perf.Accumulator.getTimestamp = getTimestamp;
|
|
return getTimestamp();
|
|
};
|
|
|
|
function adjustSet (set, time) {
|
|
set.sum += time;
|
|
set.min = Math.min(set.min, time);
|
|
set.max = Math.max(set.max, time);
|
|
}
|
|
|
|
function leaveFrame (time) {
|
|
var totalTime = time ? time : (getTimestamp() - this.time), // do this first
|
|
me = this, // me = frame
|
|
accum = me.accum;
|
|
|
|
++accum.count;
|
|
if (! --accum.depth) {
|
|
adjustSet(accum.total, totalTime);
|
|
}
|
|
adjustSet(accum.pure, totalTime - me.childTime);
|
|
|
|
currentFrame = me.parent;
|
|
if (currentFrame) {
|
|
++currentFrame.accum.childCount;
|
|
currentFrame.childTime += totalTime;
|
|
}
|
|
}
|
|
|
|
function makeSet () {
|
|
return {
|
|
min: Number.MAX_VALUE,
|
|
max: 0,
|
|
sum: 0
|
|
};
|
|
}
|
|
|
|
function makeTap (me, fn) {
|
|
return function () {
|
|
var frame = me.enter(),
|
|
ret = fn.apply(this, arguments);
|
|
|
|
frame.leave();
|
|
return ret;
|
|
};
|
|
}
|
|
|
|
function round (x) {
|
|
return Math.round(x * 100) / 100;
|
|
}
|
|
|
|
function setToJSON (count, childCount, calibration, set) {
|
|
var data = {
|
|
avg: 0,
|
|
min: set.min,
|
|
max: set.max,
|
|
sum: 0
|
|
};
|
|
|
|
if (count) {
|
|
calibration = calibration || 0;
|
|
data.sum = set.sum - childCount * calibration;
|
|
data.avg = data.sum / count;
|
|
// min and max cannot be easily corrected since we don't know the number of
|
|
// child calls for them.
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
return {
|
|
constructor: function (name) {
|
|
var me = this;
|
|
|
|
me.count = me.childCount = me.depth = me.maxDepth = 0;
|
|
me.pure = makeSet();
|
|
me.total = makeSet();
|
|
me.name = name;
|
|
},
|
|
|
|
statics: {
|
|
getTimestamp: getTimestamp
|
|
},
|
|
|
|
format: function (calibration) {
|
|
if (!formatTpl) {
|
|
formatTpl = new Ext.XTemplate([
|
|
'{name} - {count} call(s)',
|
|
'<tpl if="count">',
|
|
'<tpl if="childCount">',
|
|
' ({childCount} children)',
|
|
'</tpl>',
|
|
'<tpl if="depth - 1">',
|
|
' ({depth} deep)',
|
|
'</tpl>',
|
|
'<tpl for="times">',
|
|
', {type}: {[this.time(values.sum)]} msec (',
|
|
//'min={[this.time(values.min)]}, ',
|
|
'avg={[this.time(values.sum / parent.count)]}',
|
|
//', max={[this.time(values.max)]}',
|
|
')',
|
|
'</tpl>',
|
|
'</tpl>'
|
|
].join(''), {
|
|
time: function (t) {
|
|
return Math.round(t * 100) / 100;
|
|
}
|
|
});
|
|
}
|
|
|
|
var data = this.getData(calibration);
|
|
data.name = this.name;
|
|
data.pure.type = 'Pure';
|
|
data.total.type = 'Total';
|
|
data.times = [data.pure, data.total];
|
|
return formatTpl.apply(data);
|
|
},
|
|
|
|
getData: function (calibration) {
|
|
var me = this;
|
|
|
|
return {
|
|
count: me.count,
|
|
childCount: me.childCount,
|
|
depth: me.maxDepth,
|
|
pure: setToJSON(me.count, me.childCount, calibration, me.pure),
|
|
total: setToJSON(me.count, me.childCount, calibration, me.total)
|
|
};
|
|
},
|
|
|
|
enter: function () {
|
|
var me = this,
|
|
frame = {
|
|
accum: me,
|
|
leave: leaveFrame,
|
|
childTime: 0,
|
|
parent: currentFrame
|
|
};
|
|
|
|
++me.depth;
|
|
if (me.maxDepth < me.depth) {
|
|
me.maxDepth = me.depth;
|
|
}
|
|
|
|
currentFrame = frame;
|
|
frame.time = getTimestamp(); // do this last
|
|
return frame;
|
|
},
|
|
|
|
monitor: function (fn, scope, args) {
|
|
var frame = this.enter();
|
|
if (args) {
|
|
fn.apply(scope, args);
|
|
} else {
|
|
fn.call(scope);
|
|
}
|
|
frame.leave();
|
|
},
|
|
|
|
report: function () {
|
|
Ext.log(this.format());
|
|
},
|
|
|
|
tap: function (className, methodName) {
|
|
var me = this,
|
|
methods = typeof methodName == 'string' ? [methodName] : methodName,
|
|
klass, statik, i, parts, length, name, src,
|
|
tapFunc;
|
|
|
|
tapFunc = function(){
|
|
if (typeof className == 'string') {
|
|
klass = Ext.global;
|
|
parts = className.split('.');
|
|
for (i = 0, length = parts.length; i < length; ++i) {
|
|
klass = klass[parts[i]];
|
|
}
|
|
} else {
|
|
klass = className;
|
|
}
|
|
|
|
for (i = 0, length = methods.length; i < length; ++i) {
|
|
name = methods[i];
|
|
statik = name.charAt(0) == '!';
|
|
|
|
if (statik) {
|
|
name = name.substring(1);
|
|
} else {
|
|
statik = !(name in klass.prototype);
|
|
}
|
|
|
|
src = statik ? klass : klass.prototype;
|
|
src[name] = makeTap(me, src[name]);
|
|
}
|
|
};
|
|
|
|
Ext.ClassManager.onCreated(tapFunc, me, className);
|
|
|
|
return me;
|
|
}
|
|
};
|
|
}()),
|
|
|
|
function () {
|
|
Ext.perf.getTimestamp = this.getTimestamp;
|
|
});
|
|
|
|
// @tag extras,core
|
|
// @require Accumulator.js
|
|
|
|
/**
|
|
* @class Ext.perf.Monitor
|
|
* @singleton
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.perf.Monitor', {
|
|
singleton: true,
|
|
alternateClassName: 'Ext.Perf',
|
|
|
|
|
|
|
|
|
|
|
|
constructor: function () {
|
|
this.accumulators = [];
|
|
this.accumulatorsByName = {};
|
|
},
|
|
|
|
calibrate: function () {
|
|
var accum = new Ext.perf.Accumulator('$'),
|
|
total = accum.total,
|
|
getTimestamp = Ext.perf.Accumulator.getTimestamp,
|
|
count = 0,
|
|
frame,
|
|
endTime,
|
|
startTime;
|
|
|
|
startTime = getTimestamp();
|
|
|
|
do {
|
|
frame = accum.enter();
|
|
frame.leave();
|
|
++count;
|
|
} while (total.sum < 100);
|
|
|
|
endTime = getTimestamp();
|
|
|
|
return (endTime - startTime) / count;
|
|
},
|
|
|
|
get: function (name) {
|
|
var me = this,
|
|
accum = me.accumulatorsByName[name];
|
|
|
|
if (!accum) {
|
|
me.accumulatorsByName[name] = accum = new Ext.perf.Accumulator(name);
|
|
me.accumulators.push(accum);
|
|
}
|
|
|
|
return accum;
|
|
},
|
|
|
|
enter: function (name) {
|
|
return this.get(name).enter();
|
|
},
|
|
|
|
monitor: function (name, fn, scope) {
|
|
this.get(name).monitor(fn, scope);
|
|
},
|
|
|
|
report: function () {
|
|
var me = this,
|
|
accumulators = me.accumulators,
|
|
calibration = me.calibrate();
|
|
|
|
accumulators.sort(function (a, b) {
|
|
return (a.name < b.name) ? -1 : ((b.name < a.name) ? 1 : 0);
|
|
});
|
|
|
|
me.updateGC();
|
|
|
|
Ext.log('Calibration: ' + Math.round(calibration * 100) / 100 + ' msec/sample');
|
|
Ext.each(accumulators, function (accum) {
|
|
Ext.log(accum.format(calibration));
|
|
});
|
|
},
|
|
|
|
getData: function (all) {
|
|
var ret = {},
|
|
accumulators = this.accumulators;
|
|
|
|
Ext.each(accumulators, function (accum) {
|
|
if (all || accum.count) {
|
|
ret[accum.name] = accum.getData();
|
|
}
|
|
});
|
|
|
|
return ret;
|
|
},
|
|
|
|
reset: function(){
|
|
Ext.each(this.accumulators, function(accum){
|
|
var me = accum;
|
|
me.count = me.childCount = me.depth = me.maxDepth = 0;
|
|
me.pure = {
|
|
min: Number.MAX_VALUE,
|
|
max: 0,
|
|
sum: 0
|
|
};
|
|
me.total = {
|
|
min: Number.MAX_VALUE,
|
|
max: 0,
|
|
sum: 0
|
|
};
|
|
});
|
|
},
|
|
|
|
updateGC: function () {
|
|
var accumGC = this.accumulatorsByName.GC,
|
|
toolbox = Ext.senchaToolbox,
|
|
bucket;
|
|
|
|
if (accumGC) {
|
|
accumGC.count = toolbox.garbageCollectionCounter || 0;
|
|
|
|
if (accumGC.count) {
|
|
bucket = accumGC.pure;
|
|
accumGC.total.sum = bucket.sum = toolbox.garbageCollectionMilliseconds;
|
|
bucket.min = bucket.max = bucket.sum / accumGC.count;
|
|
bucket = accumGC.total;
|
|
bucket.min = bucket.max = bucket.sum / accumGC.count;
|
|
}
|
|
}
|
|
},
|
|
|
|
watchGC: function () {
|
|
Ext.perf.getTimestamp(); // initializes SenchaToolbox (if available)
|
|
|
|
var toolbox = Ext.senchaToolbox;
|
|
|
|
if (toolbox) {
|
|
this.get("GC");
|
|
toolbox.watchGarbageCollector(false); // no logging, just totals
|
|
}
|
|
},
|
|
|
|
setup: function (config) {
|
|
if (!config) {
|
|
config = {
|
|
/*insertHtml: {
|
|
'Ext.dom.Helper': 'insertHtml'
|
|
},*/
|
|
/*xtplCompile: {
|
|
'Ext.XTemplateCompiler': 'compile'
|
|
},*/
|
|
// doInsert: {
|
|
// 'Ext.Template': 'doInsert'
|
|
// },
|
|
// applyOut: {
|
|
// 'Ext.XTemplate': 'applyOut'
|
|
// },
|
|
render: {
|
|
'Ext.AbstractComponent': 'render'
|
|
},
|
|
// fnishRender: {
|
|
// 'Ext.AbstractComponent': 'finishRender'
|
|
// },
|
|
// renderSelectors: {
|
|
// 'Ext.AbstractComponent': 'applyRenderSelectors'
|
|
// },
|
|
// compAddCls: {
|
|
// 'Ext.AbstractComponent': 'addCls'
|
|
// },
|
|
// compRemoveCls: {
|
|
// 'Ext.AbstractComponent': 'removeCls'
|
|
// },
|
|
// getStyle: {
|
|
// 'Ext.core.Element': 'getStyle'
|
|
// },
|
|
// setStyle: {
|
|
// 'Ext.core.Element': 'setStyle'
|
|
// },
|
|
// addCls: {
|
|
// 'Ext.core.Element': 'addCls'
|
|
// },
|
|
// removeCls: {
|
|
// 'Ext.core.Element': 'removeCls'
|
|
// },
|
|
// measure: {
|
|
// 'Ext.layout.component.Component': 'measureAutoDimensions'
|
|
// },
|
|
// moveItem: {
|
|
// 'Ext.layout.Layout': 'moveItem'
|
|
// },
|
|
// layoutFlush: {
|
|
// 'Ext.layout.Context': 'flush'
|
|
// },
|
|
layout: {
|
|
'Ext.layout.Context': 'run'
|
|
}
|
|
};
|
|
}
|
|
|
|
this.currentConfig = config;
|
|
|
|
var key, prop,
|
|
accum, className, methods;
|
|
for (key in config) {
|
|
if (config.hasOwnProperty(key)) {
|
|
prop = config[key];
|
|
accum = Ext.Perf.get(key);
|
|
|
|
for (className in prop) {
|
|
if (prop.hasOwnProperty(className)) {
|
|
methods = prop[className];
|
|
accum.tap(className, methods);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.watchGC();
|
|
}
|
|
});
|
|
|
|
// @tag extras,core
|
|
// @require perf/Monitor.js
|
|
// @define Ext.Supports
|
|
|
|
/**
|
|
* @class Ext.is
|
|
*
|
|
* Determines information about the current platform the application is running on.
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.is = {
|
|
init : function(navigator) {
|
|
var platforms = this.platforms,
|
|
ln = platforms.length,
|
|
i, platform;
|
|
|
|
navigator = navigator || window.navigator;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
platform = platforms[i];
|
|
this[platform.identity] = platform.regex.test(navigator[platform.property]);
|
|
}
|
|
|
|
/**
|
|
* @property Desktop True if the browser is running on a desktop machine
|
|
* @type {Boolean}
|
|
*/
|
|
this.Desktop = this.Mac || this.Windows || (this.Linux && !this.Android);
|
|
/**
|
|
* @property Tablet True if the browser is running on a tablet (iPad)
|
|
*/
|
|
this.Tablet = this.iPad;
|
|
/**
|
|
* @property Phone True if the browser is running on a phone.
|
|
* @type {Boolean}
|
|
*/
|
|
this.Phone = !this.Desktop && !this.Tablet;
|
|
/**
|
|
* @property iOS True if the browser is running on iOS
|
|
* @type {Boolean}
|
|
*/
|
|
this.iOS = this.iPhone || this.iPad || this.iPod;
|
|
|
|
/**
|
|
* @property Standalone Detects when application has been saved to homescreen.
|
|
* @type {Boolean}
|
|
*/
|
|
this.Standalone = !!window.navigator.standalone;
|
|
},
|
|
|
|
/**
|
|
* @property iPhone True when the browser is running on a iPhone
|
|
* @type {Boolean}
|
|
*/
|
|
platforms: [{
|
|
property: 'platform',
|
|
regex: /iPhone/i,
|
|
identity: 'iPhone'
|
|
},
|
|
|
|
/**
|
|
* @property iPod True when the browser is running on a iPod
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'platform',
|
|
regex: /iPod/i,
|
|
identity: 'iPod'
|
|
},
|
|
|
|
/**
|
|
* @property iPad True when the browser is running on a iPad
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'userAgent',
|
|
regex: /iPad/i,
|
|
identity: 'iPad'
|
|
},
|
|
|
|
/**
|
|
* @property Blackberry True when the browser is running on a Blackberry
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'userAgent',
|
|
regex: /Blackberry/i,
|
|
identity: 'Blackberry'
|
|
},
|
|
|
|
/**
|
|
* @property Android True when the browser is running on an Android device
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'userAgent',
|
|
regex: /Android/i,
|
|
identity: 'Android'
|
|
},
|
|
|
|
/**
|
|
* @property Mac True when the browser is running on a Mac
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'platform',
|
|
regex: /Mac/i,
|
|
identity: 'Mac'
|
|
},
|
|
|
|
/**
|
|
* @property Windows True when the browser is running on Windows
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'platform',
|
|
regex: /Win/i,
|
|
identity: 'Windows'
|
|
},
|
|
|
|
/**
|
|
* @property Linux True when the browser is running on Linux
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
property: 'platform',
|
|
regex: /Linux/i,
|
|
identity: 'Linux'
|
|
}]
|
|
};
|
|
|
|
Ext.is.init();
|
|
|
|
/**
|
|
* @class Ext.supports
|
|
*
|
|
* Determines information about features are supported in the current environment
|
|
*
|
|
* @singleton
|
|
*/
|
|
(function(){
|
|
|
|
// this is a local copy of certain logic from (Abstract)Element.getStyle
|
|
// to break a dependancy between the supports mechanism and Element
|
|
// use this instead of element references to check for styling info
|
|
var getStyle = function(element, styleName){
|
|
var view = element.ownerDocument.defaultView,
|
|
style = (view ? view.getComputedStyle(element, null) : element.currentStyle) || element.style;
|
|
return style[styleName];
|
|
},
|
|
supportsVectors = {
|
|
'IE6-quirks': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0],
|
|
'IE6-strict': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,0,1,1,0,0,1,0,1,0,0,0],
|
|
'IE7-quirks': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0],
|
|
'IE7-strict': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,1,0,0,1,0,1,0,0,0],
|
|
'IE8-quirks': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0],
|
|
'IE8-strict': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,1,1,0,0,1,0,1,0,0,1],
|
|
'IE9-quirks': [0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0],
|
|
'IE9-strict': [0,1,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,0,0,0,0,1],
|
|
'IE10-quirks': [1,1,0,0,1,1,1,1,0,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0,0,0,1],
|
|
'IE10-strict': [1,1,0,0,1,1,1,1,0,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0,0,0,1]
|
|
};
|
|
|
|
function getBrowserKey() {
|
|
var browser = Ext.isIE6 ? 'IE6' : Ext.isIE7 ? 'IE7' : Ext.isIE8 ? 'IE8' :
|
|
Ext.isIE9 ? 'IE9': Ext.isIE10 ? 'IE10' : '';
|
|
|
|
return browser ? browser + (Ext.isStrict ? '-strict' : '-quirks') : '';
|
|
}
|
|
|
|
Ext.supports = {
|
|
/**
|
|
* Runs feature detection routines and sets the various flags. This is called when
|
|
* the scripts loads (very early) and again at {@link Ext#onReady}. Some detections
|
|
* are flagged as `early` and run immediately. Others that require the document body
|
|
* will not run until ready.
|
|
*
|
|
* Each test is run only once, so calling this method from an onReady function is safe
|
|
* and ensures that all flags have been set.
|
|
* @markdown
|
|
* @private
|
|
*/
|
|
init : function() {
|
|
var me = this,
|
|
doc = document,
|
|
toRun = me.toRun || me.tests,
|
|
n = toRun.length,
|
|
div = n && Ext.isReady && doc.createElement('div'),
|
|
notRun = [],
|
|
browserKey = getBrowserKey(),
|
|
test, vector, value;
|
|
|
|
if (div) {
|
|
div.innerHTML = [
|
|
'<div style="height:30px;width:50px;">',
|
|
'<div style="height:20px;width:20px;"></div>',
|
|
'</div>',
|
|
'<div style="width: 200px; height: 200px; position: relative; padding: 5px;">',
|
|
'<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>',
|
|
'</div>',
|
|
'<div style="position: absolute; left: 10%; top: 10%;"></div>',
|
|
'<div style="float:left; background-color:transparent;"></div>'
|
|
].join('');
|
|
|
|
doc.body.appendChild(div);
|
|
}
|
|
|
|
vector = supportsVectors[browserKey];
|
|
while (n--) {
|
|
test = toRun[n];
|
|
value = vector && vector[n];
|
|
if (value !== undefined) {
|
|
me[test.identity] = value;
|
|
} else if (div || test.early) {
|
|
me[test.identity] = test.fn.call(me, doc, div);
|
|
} else {
|
|
notRun.push(test);
|
|
}
|
|
}
|
|
|
|
if (div) {
|
|
doc.body.removeChild(div);
|
|
}
|
|
|
|
me.toRun = notRun;
|
|
},
|
|
|
|
|
|
/**
|
|
* @property PointerEvents True if document environment supports the CSS3 pointer-events style.
|
|
* @type {Boolean}
|
|
*/
|
|
PointerEvents: 'pointerEvents' in document.documentElement.style,
|
|
|
|
// IE10/Win8 throws "Access Denied" accessing window.localStorage, so this test
|
|
// needs to have a try/catch
|
|
/**
|
|
* @property LocalStorage True if localStorage is supported
|
|
*/
|
|
LocalStorage: (function() {
|
|
try {
|
|
return 'localStorage' in window && window['localStorage'] !== null;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
})(),
|
|
|
|
/**
|
|
* @property CSS3BoxShadow True if document environment supports the CSS3 box-shadow style.
|
|
* @type {Boolean}
|
|
*/
|
|
CSS3BoxShadow: 'boxShadow' in document.documentElement.style || 'WebkitBoxShadow' in document.documentElement.style || 'MozBoxShadow' in document.documentElement.style,
|
|
|
|
/**
|
|
* @property ClassList True if document environment supports the HTML5 classList API.
|
|
* @type {Boolean}
|
|
*/
|
|
ClassList: !!document.documentElement.classList,
|
|
|
|
/**
|
|
* @property OrientationChange True if the device supports orientation change
|
|
* @type {Boolean}
|
|
*/
|
|
OrientationChange: ((typeof window.orientation != 'undefined') && ('onorientationchange' in window)),
|
|
|
|
/**
|
|
* @property DeviceMotion True if the device supports device motion (acceleration and rotation rate)
|
|
* @type {Boolean}
|
|
*/
|
|
DeviceMotion: ('ondevicemotion' in window),
|
|
|
|
/**
|
|
* @property Touch True if the device supports touch
|
|
* @type {Boolean}
|
|
*/
|
|
// is.Desktop is needed due to the bug in Chrome 5.0.375, Safari 3.1.2
|
|
// and Safari 4.0 (they all have 'ontouchstart' in the window object).
|
|
Touch: ('ontouchstart' in window) && (!Ext.is.Desktop),
|
|
|
|
/**
|
|
* @property TimeoutActualLateness True if the browser passes the "actualLateness" parameter to
|
|
* setTimeout. See: https://developer.mozilla.org/en/DOM/window.setTimeout
|
|
* @type {Boolean}
|
|
*/
|
|
TimeoutActualLateness: (function(){
|
|
setTimeout(function(){
|
|
Ext.supports.TimeoutActualLateness = arguments.length !== 0;
|
|
}, 0);
|
|
}()),
|
|
|
|
tests: [
|
|
/**
|
|
* @property Transitions True if the device supports CSS3 Transitions
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Transitions',
|
|
fn: function(doc, div) {
|
|
var prefix = [
|
|
'webkit',
|
|
'Moz',
|
|
'o',
|
|
'ms',
|
|
'khtml'
|
|
],
|
|
TE = 'TransitionEnd',
|
|
transitionEndName = [
|
|
prefix[0] + TE,
|
|
'transitionend', //Moz bucks the prefixing convention
|
|
prefix[2] + TE,
|
|
prefix[3] + TE,
|
|
prefix[4] + TE
|
|
],
|
|
ln = prefix.length,
|
|
i = 0,
|
|
out = false;
|
|
|
|
for (; i < ln; i++) {
|
|
if (getStyle(div, prefix[i] + "TransitionProperty")) {
|
|
Ext.supports.CSS3Prefix = prefix[i];
|
|
Ext.supports.CSS3TransitionEnd = transitionEndName[i];
|
|
out = true;
|
|
break;
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property RightMargin True if the device supports right margin.
|
|
* See https://bugs.webkit.org/show_bug.cgi?id=13343 for why this is needed.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'RightMargin',
|
|
fn: function(doc, div) {
|
|
var view = doc.defaultView;
|
|
return !(view && view.getComputedStyle(div.firstChild.firstChild, null).marginRight != '0px');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property DisplayChangeInputSelectionBug True if INPUT elements lose their
|
|
* selection when their display style is changed. Essentially, if a text input
|
|
* has focus and its display style is changed, the I-beam disappears.
|
|
*
|
|
* This bug is encountered due to the work around in place for the {@link #RightMargin}
|
|
* bug. This has been observed in Safari 4.0.4 and older, and appears to be fixed
|
|
* in Safari 5. It's not clear if Safari 4.1 has the bug, but it has the same WebKit
|
|
* version number as Safari 5 (according to http://unixpapa.com/js/gecko.html).
|
|
*/
|
|
{
|
|
identity: 'DisplayChangeInputSelectionBug',
|
|
early: true,
|
|
fn: function() {
|
|
var webKitVersion = Ext.webKitVersion;
|
|
// WebKit but older than Safari 5 or Chrome 6:
|
|
return 0 < webKitVersion && webKitVersion < 533;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property DisplayChangeTextAreaSelectionBug True if TEXTAREA elements lose their
|
|
* selection when their display style is changed. Essentially, if a text area has
|
|
* focus and its display style is changed, the I-beam disappears.
|
|
*
|
|
* This bug is encountered due to the work around in place for the {@link #RightMargin}
|
|
* bug. This has been observed in Chrome 10 and Safari 5 and older, and appears to
|
|
* be fixed in Chrome 11.
|
|
*/
|
|
{
|
|
identity: 'DisplayChangeTextAreaSelectionBug',
|
|
early: true,
|
|
fn: function() {
|
|
var webKitVersion = Ext.webKitVersion;
|
|
|
|
/*
|
|
Has bug w/textarea:
|
|
|
|
(Chrome) Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-US)
|
|
AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.127
|
|
Safari/534.16
|
|
(Safari) Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us)
|
|
AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5
|
|
Safari/533.21.1
|
|
|
|
No bug:
|
|
|
|
(Chrome) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7)
|
|
AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.57
|
|
Safari/534.24
|
|
*/
|
|
return 0 < webKitVersion && webKitVersion < 534.24;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property TransparentColor True if the device supports transparent color
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'TransparentColor',
|
|
fn: function(doc, div, view) {
|
|
view = doc.defaultView;
|
|
return !(view && view.getComputedStyle(div.lastChild, null).backgroundColor != 'transparent');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property ComputedStyle True if the browser supports document.defaultView.getComputedStyle()
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'ComputedStyle',
|
|
fn: function(doc, div, view) {
|
|
view = doc.defaultView;
|
|
return view && view.getComputedStyle;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property Svg True if the device supports SVG
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Svg',
|
|
fn: function(doc) {
|
|
return !!doc.createElementNS && !!doc.createElementNS( "http:/" + "/www.w3.org/2000/svg", "svg").createSVGRect;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property Canvas True if the device supports Canvas
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Canvas',
|
|
fn: function(doc) {
|
|
return !!doc.createElement('canvas').getContext;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property Vml True if the device supports VML
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Vml',
|
|
fn: function(doc) {
|
|
var d = doc.createElement("div");
|
|
d.innerHTML = "<!--[if vml]><br/><br/><![endif]-->";
|
|
return (d.childNodes.length == 2);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property Float True if the device supports CSS float
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Float',
|
|
fn: function(doc, div) {
|
|
return !!div.lastChild.style.cssFloat;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property AudioTag True if the device supports the HTML5 audio tag
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'AudioTag',
|
|
fn: function(doc) {
|
|
return !!doc.createElement('audio').canPlayType;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property History True if the device supports HTML5 history
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'History',
|
|
fn: function() {
|
|
var history = window.history;
|
|
return !!(history && history.pushState);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property CSS3DTransform True if the device supports CSS3DTransform
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'CSS3DTransform',
|
|
fn: function() {
|
|
return (typeof WebKitCSSMatrix != 'undefined' && new WebKitCSSMatrix().hasOwnProperty('m41'));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property CSS3LinearGradient True if the device supports CSS3 linear gradients
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'CSS3LinearGradient',
|
|
fn: function(doc, div) {
|
|
var property = 'background-image:',
|
|
webkit = '-webkit-gradient(linear, left top, right bottom, from(black), to(white))',
|
|
w3c = 'linear-gradient(left top, black, white)',
|
|
moz = '-moz-' + w3c,
|
|
ms = '-ms-' + w3c,
|
|
opera = '-o-' + w3c,
|
|
options = [property + webkit, property + w3c, property + moz, property + ms, property + opera];
|
|
|
|
div.style.cssText = options.join(';');
|
|
|
|
return (("" + div.style.backgroundImage).indexOf('gradient') !== -1) && !Ext.isIE9;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property CSS3BorderRadius True if the device supports CSS3 border radius
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'CSS3BorderRadius',
|
|
fn: function(doc, div) {
|
|
var domPrefixes = ['borderRadius', 'BorderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius'],
|
|
pass = false,
|
|
i;
|
|
for (i = 0; i < domPrefixes.length; i++) {
|
|
if (document.body.style[domPrefixes[i]] !== undefined) {
|
|
return true;
|
|
}
|
|
}
|
|
return pass;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property GeoLocation True if the device supports GeoLocation
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'GeoLocation',
|
|
fn: function() {
|
|
// Use the in check for geolocation, see https://github.com/Modernizr/Modernizr/issues/513
|
|
return (typeof navigator != 'undefined' && 'geolocation' in navigator) || (typeof google != 'undefined' && typeof google.gears != 'undefined');
|
|
}
|
|
},
|
|
/**
|
|
* @property MouseEnterLeave True if the browser supports mouseenter and mouseleave events
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'MouseEnterLeave',
|
|
fn: function(doc, div){
|
|
return ('onmouseenter' in div && 'onmouseleave' in div);
|
|
}
|
|
},
|
|
/**
|
|
* @property MouseWheel True if the browser supports the mousewheel event
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'MouseWheel',
|
|
fn: function(doc, div) {
|
|
return ('onmousewheel' in div);
|
|
}
|
|
},
|
|
/**
|
|
* @property Opacity True if the browser supports normal css opacity
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Opacity',
|
|
fn: function(doc, div){
|
|
// Not a strict equal comparison in case opacity can be converted to a number.
|
|
if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
|
|
return false;
|
|
}
|
|
div.firstChild.style.cssText = 'opacity:0.73';
|
|
return div.firstChild.style.opacity == '0.73';
|
|
}
|
|
},
|
|
/**
|
|
* @property Placeholder True if the browser supports the HTML5 placeholder attribute on inputs
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Placeholder',
|
|
fn: function(doc) {
|
|
return 'placeholder' in doc.createElement('input');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property Direct2DBug True if when asking for an element's dimension via offsetWidth or offsetHeight,
|
|
* getBoundingClientRect, etc. the browser returns the subpixel width rounded to the nearest pixel.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Direct2DBug',
|
|
fn: function() {
|
|
return Ext.isString(document.body.style.msTransformOrigin) && Ext.isIE10m;
|
|
}
|
|
},
|
|
/**
|
|
* @property BoundingClientRect True if the browser supports the getBoundingClientRect method on elements
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'BoundingClientRect',
|
|
fn: function(doc, div) {
|
|
return Ext.isFunction(div.getBoundingClientRect);
|
|
}
|
|
},
|
|
/**
|
|
* @property RotatedBoundingClientRect True if the BoundingClientRect is
|
|
* rotated when the element is rotated using a CSS transform.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'RotatedBoundingClientRect',
|
|
fn: function() {
|
|
var body = document.body,
|
|
supports = false,
|
|
el = document.createElement('div'),
|
|
style = el.style;
|
|
|
|
if (el.getBoundingClientRect) {
|
|
style.WebkitTransform = style.MozTransform =
|
|
style.OTransform = style.transform = 'rotate(90deg)';
|
|
style.width = '100px';
|
|
style.height = '30px';
|
|
body.appendChild(el)
|
|
|
|
supports = el.getBoundingClientRect().height !== 100;
|
|
body.removeChild(el);
|
|
}
|
|
|
|
return supports;
|
|
}
|
|
},
|
|
{
|
|
identity: 'IncludePaddingInWidthCalculation',
|
|
fn: function(doc, div){
|
|
return div.childNodes[1].firstChild.offsetWidth == 210;
|
|
}
|
|
},
|
|
{
|
|
identity: 'IncludePaddingInHeightCalculation',
|
|
fn: function(doc, div){
|
|
return div.childNodes[1].firstChild.offsetHeight == 210;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property ArraySort True if the Array sort native method isn't bugged.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'ArraySort',
|
|
fn: function() {
|
|
var a = [1,2,3,4,5].sort(function(){ return 0; });
|
|
return a[0] === 1 && a[1] === 2 && a[2] === 3 && a[3] === 4 && a[4] === 5;
|
|
}
|
|
},
|
|
/**
|
|
* @property Range True if browser support document.createRange native method.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'Range',
|
|
fn: function() {
|
|
return !!document.createRange;
|
|
}
|
|
},
|
|
/**
|
|
* @property CreateContextualFragment True if browser support CreateContextualFragment range native methods.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'CreateContextualFragment',
|
|
fn: function() {
|
|
var range = Ext.supports.Range ? document.createRange() : false;
|
|
|
|
return range && !!range.createContextualFragment;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property WindowOnError True if browser supports window.onerror.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'WindowOnError',
|
|
fn: function () {
|
|
// sadly, we cannot feature detect this...
|
|
return Ext.isIE || Ext.isGecko || Ext.webKitVersion >= 534.16; // Chrome 10+
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property TextAreaMaxLength True if the browser supports maxlength on textareas.
|
|
* @type {Boolean}
|
|
*/
|
|
{
|
|
identity: 'TextAreaMaxLength',
|
|
fn: function(){
|
|
var el = document.createElement('textarea');
|
|
return ('maxlength' in el);
|
|
}
|
|
},
|
|
/**
|
|
* @property GetPositionPercentage True if the browser will return the left/top/right/bottom
|
|
* position as a percentage when explicitly set as a percentage value.
|
|
* @type {Boolean}
|
|
*/
|
|
// Related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7
|
|
{
|
|
identity: 'GetPositionPercentage',
|
|
fn: function(doc, div){
|
|
return getStyle(div.childNodes[2], 'left') == '10%';
|
|
}
|
|
},
|
|
/**
|
|
* @property {Boolean} PercentageHeightOverflowBug
|
|
* In some browsers (IE quirks, IE6, IE7, IE9, chrome, safari and opera at the time
|
|
* of this writing) a percentage-height element ignores the horizontal scrollbar
|
|
* of its parent element. This method returns true if the browser is affected
|
|
* by this bug.
|
|
*
|
|
* @private
|
|
*/
|
|
{
|
|
identity: 'PercentageHeightOverflowBug',
|
|
fn: function(doc) {
|
|
var hasBug = false,
|
|
style, el;
|
|
|
|
if (Ext.getScrollbarSize().height) {
|
|
// must have space-consuming scrollbars for bug to be possible
|
|
el = doc.createElement('div');
|
|
style = el.style;
|
|
style.height = '50px';
|
|
style.width = '50px';
|
|
style.overflow = 'auto';
|
|
style.position = 'absolute';
|
|
|
|
el.innerHTML = [
|
|
'<div style="display:table;height:100%;">',
|
|
// The element that causes the horizontal overflow must be
|
|
// a child of the element with the 100% height, otherwise
|
|
// horizontal overflow is not triggered in webkit quirks mode
|
|
'<div style="width:51px;"></div>',
|
|
'</div>'
|
|
].join('');
|
|
doc.body.appendChild(el);
|
|
if (el.firstChild.offsetHeight === 50) {
|
|
hasBug = true;
|
|
}
|
|
doc.body.removeChild(el);
|
|
}
|
|
|
|
return hasBug;
|
|
}
|
|
},
|
|
/**
|
|
* @property {Boolean} xOriginBug
|
|
* In Chrome 24.0, an RTL element which has vertical overflow positions its right X origin incorrectly.
|
|
* It skips a non-existent scrollbar which has been moved to the left edge due to the RTL setting.
|
|
*
|
|
* http://code.google.com/p/chromium/issues/detail?id=174656
|
|
*
|
|
* This method returns true if the browser is affected by this bug.
|
|
*
|
|
* @private
|
|
*/
|
|
{
|
|
identity: 'xOriginBug',
|
|
fn: function(doc, div) {
|
|
div.innerHTML = '<div id="b1" style="height:100px;width:100px;direction:rtl;position:relative;overflow:scroll">' +
|
|
'<div id="b2" style="position:relative;width:100%;height:20px;"></div>' +
|
|
'<div id="b3" style="position:absolute;width:20px;height:20px;top:0px;right:0px"></div>' +
|
|
'</div>';
|
|
|
|
var outerBox = document.getElementById('b1').getBoundingClientRect(),
|
|
b2 = document.getElementById('b2').getBoundingClientRect(),
|
|
b3 = document.getElementById('b3').getBoundingClientRect();
|
|
|
|
return (b2.left !== outerBox.left && b3.right !== outerBox.right);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} ScrollWidthInlinePaddingBug
|
|
* In some browsers the right padding of an overflowing element is not accounted
|
|
* for in its scrollWidth. The result can vary depending on whether or not
|
|
* The element contains block-level children. This method tests the effect
|
|
* of padding on scrollWidth when there are no block-level children inside the
|
|
* overflowing element.
|
|
*
|
|
* This method returns true if the browser is affected by this bug.
|
|
*/
|
|
{
|
|
identity: 'ScrollWidthInlinePaddingBug',
|
|
fn: function(doc) {
|
|
var hasBug = false,
|
|
style, el;
|
|
|
|
el = doc.createElement('div');
|
|
style = el.style;
|
|
style.height = '50px';
|
|
style.width = '50px';
|
|
style.padding = '10px';
|
|
style.overflow = 'hidden';
|
|
style.position = 'absolute';
|
|
|
|
el.innerHTML =
|
|
'<span style="display:inline-block;zoom:1;height:60px;width:60px;"></span>';
|
|
doc.body.appendChild(el);
|
|
if (el.scrollWidth === 70) {
|
|
hasBug = true;
|
|
}
|
|
doc.body.removeChild(el);
|
|
|
|
return hasBug;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
}());
|
|
|
|
Ext.supports.init(); // run the "early" detections now
|
|
|
|
// @tag dom,core
|
|
// @require ../Support.js
|
|
// @define Ext.util.DelayedTask
|
|
|
|
/**
|
|
* @class Ext.util.DelayedTask
|
|
*
|
|
* The DelayedTask class provides a convenient way to "buffer" the execution of a method,
|
|
* performing setTimeout where a new timeout cancels the old timeout. When called, the
|
|
* task will wait the specified time period before executing. If durng that time period,
|
|
* the task is called again, the original call will be cancelled. This continues so that
|
|
* the function is only called a single time for each iteration.
|
|
*
|
|
* This method is especially useful for things like detecting whether a user has finished
|
|
* typing in a text field. An example would be performing validation on a keypress. You can
|
|
* use this class to buffer the keypress events for a certain number of milliseconds, and
|
|
* perform only if they stop for that amount of time.
|
|
*
|
|
* ## Usage
|
|
*
|
|
* var task = new Ext.util.DelayedTask(function(){
|
|
* alert(Ext.getDom('myInputField').value.length);
|
|
* });
|
|
*
|
|
* // Wait 500ms before calling our function. If the user presses another key
|
|
* // during that 500ms, it will be cancelled and we'll wait another 500ms.
|
|
* Ext.get('myInputField').on('keypress', function() {
|
|
* task.{@link #delay}(500);
|
|
* });
|
|
*
|
|
* Note that we are using a DelayedTask here to illustrate a point. The configuration
|
|
* option `buffer` for {@link Ext.util.Observable#addListener addListener/on} will
|
|
* also setup a delayed task for you to buffer events.
|
|
*
|
|
* @constructor The parameters to this constructor serve as defaults and are not required.
|
|
* @param {Function} fn (optional) The default function to call. If not specified here, it must be specified during the {@link #delay} call.
|
|
* @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.
|
|
* @param {Boolean} [cancelOnDelay=true] By default, each call to {@link #delay} cancels any pending invocation and reschedules a new
|
|
* invocation. Specifying this as `false` means that calls to {@link #delay} when an invocation is pending just update the call settings,
|
|
* `newDelay`, `newFn`, `newScope` or `newArgs`, whichever are passed.
|
|
*/
|
|
Ext.util.DelayedTask = function(fn, scope, args, cancelOnDelay) {
|
|
var me = this,
|
|
delay,
|
|
call = function() {
|
|
clearInterval(me.id);
|
|
me.id = null;
|
|
fn.apply(scope, args || []);
|
|
Ext.EventManager.idleEvent.fire();
|
|
};
|
|
|
|
cancelOnDelay = typeof cancelOnDelay === 'boolean' ? cancelOnDelay : true;
|
|
|
|
/**
|
|
* @property {Number} id
|
|
* The id of the currently pending invocation. Will be set to `null` if there is no
|
|
* invocation pending.
|
|
*/
|
|
me.id = null;
|
|
|
|
/**
|
|
* By default, cancels any pending timeout and queues a new one.
|
|
*
|
|
* If the `cancelOnDelay` parameter was specified as `false` in the constructor, this does not cancel and
|
|
* reschedule, but just updates the call settings, `newDelay`, `newFn`, `newScope` or `newArgs`, whichever are passed.
|
|
*
|
|
* @param {Number} newDelay The milliseconds to delay
|
|
* @param {Function} newFn (optional) Overrides function passed to constructor
|
|
* @param {Object} newScope (optional) Overrides scope passed to constructor. Remember that if no scope
|
|
* is specified, <code>this</code> will refer to the browser window.
|
|
* @param {Array} newArgs (optional) Overrides args passed to constructor
|
|
*/
|
|
me.delay = function(newDelay, newFn, newScope, newArgs) {
|
|
if (cancelOnDelay) {
|
|
me.cancel();
|
|
}
|
|
delay = newDelay || delay,
|
|
fn = newFn || fn;
|
|
scope = newScope || scope;
|
|
args = newArgs || args;
|
|
if (!me.id) {
|
|
me.id = setInterval(call, delay);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Cancel the last queued timeout
|
|
*/
|
|
me.cancel = function() {
|
|
if (me.id) {
|
|
clearInterval(me.id);
|
|
me.id = null;
|
|
}
|
|
};
|
|
};
|
|
|
|
// @tag dom,core
|
|
/**
|
|
* Represents single event type that an Observable object listens to.
|
|
* All actual listeners are tracked inside here. When the event fires,
|
|
* it calls all the registered listener functions.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.Event', function() {
|
|
var arraySlice = Array.prototype.slice,
|
|
arrayInsert = Ext.Array.insert,
|
|
toArray = Ext.Array.toArray,
|
|
DelayedTask = Ext.util.DelayedTask;
|
|
|
|
return {
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isEvent
|
|
* `true` in this class to identify an object as an instantiated Event, or subclass thereof.
|
|
*/
|
|
isEvent: true,
|
|
|
|
// Private. Event suspend count
|
|
suspended: 0,
|
|
|
|
noOptions: {},
|
|
|
|
constructor: function(observable, name) {
|
|
this.name = name;
|
|
this.observable = observable;
|
|
this.listeners = [];
|
|
},
|
|
|
|
addListener: function(fn, scope, options) {
|
|
var me = this,
|
|
listeners, listener, priority, isNegativePriority, highestNegativePriorityIndex,
|
|
hasNegativePriorityIndex, length, index, i, listenerPriority;
|
|
|
|
scope = scope || me.observable;
|
|
|
|
|
|
if (!me.isListening(fn, scope)) {
|
|
listener = me.createListener(fn, scope, options);
|
|
if (me.firing) {
|
|
// if we are currently firing this event, don't disturb the listener loop
|
|
me.listeners = me.listeners.slice(0);
|
|
}
|
|
listeners = me.listeners;
|
|
index = length = listeners.length;
|
|
priority = options && options.priority;
|
|
highestNegativePriorityIndex = me._highestNegativePriorityIndex;
|
|
hasNegativePriorityIndex = (highestNegativePriorityIndex !== undefined);
|
|
if (priority) {
|
|
// Find the index at which to insert the listener into the listeners array,
|
|
// sorted by priority highest to lowest.
|
|
isNegativePriority = (priority < 0);
|
|
if (!isNegativePriority || hasNegativePriorityIndex) {
|
|
// If the priority is a positive number, or if it is a negative number
|
|
// and there are other existing negative priority listenrs, then we
|
|
// need to calcuate the listeners priority-order index.
|
|
// If the priority is a negative number, begin the search for priority
|
|
// order index at the index of the highest existing negative priority
|
|
// listener, otherwise begin at 0
|
|
for(i = (isNegativePriority ? highestNegativePriorityIndex : 0); i < length; i++) {
|
|
// Listeners created without options will have no "o" property
|
|
listenerPriority = listeners[i].o ? listeners[i].o.priority||0 : 0;
|
|
if (listenerPriority < priority) {
|
|
index = i;
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
// if the priority is a negative number, and there are no other negative
|
|
// priority listeners, then no calculation is needed - the negative
|
|
// priority listener gets appended to the end of the listeners array.
|
|
me._highestNegativePriorityIndex = index;
|
|
}
|
|
} else if (hasNegativePriorityIndex) {
|
|
// listeners with a priority of 0 or undefined are appended to the end of
|
|
// the listeners array unless there are negative priority listeners in the
|
|
// listeners array, then they are inserted before the highest negative
|
|
// priority listener.
|
|
index = highestNegativePriorityIndex;
|
|
}
|
|
|
|
if (!isNegativePriority && index <= highestNegativePriorityIndex) {
|
|
me._highestNegativePriorityIndex ++;
|
|
}
|
|
if (index === length) {
|
|
me.listeners[length] = listener;
|
|
} else {
|
|
arrayInsert(me.listeners, index, [listener]);
|
|
}
|
|
}
|
|
},
|
|
|
|
createListener: function(fn, scope, o) {
|
|
scope = scope || this.observable;
|
|
|
|
var me = this,
|
|
listener = {
|
|
fn: fn,
|
|
scope: scope,
|
|
ev: me
|
|
},
|
|
handler = fn;
|
|
|
|
// The order is important. The 'single' wrapper must be wrapped by the 'buffer' and 'delayed' wrapper
|
|
// because the event removal that the single listener does destroys the listener's DelayedTask(s)
|
|
if (o) {
|
|
listener.o = o;
|
|
if (o.single) {
|
|
handler = me.createSingle(handler, listener, o, scope);
|
|
}
|
|
if (o.target) {
|
|
handler = me.createTargeted(handler, listener, o, scope);
|
|
}
|
|
if (o.delay) {
|
|
handler = me.createDelayed(handler, listener, o, scope);
|
|
}
|
|
if (o.buffer) {
|
|
handler = me.createBuffered(handler, listener, o, scope);
|
|
}
|
|
}
|
|
|
|
listener.fireFn = handler;
|
|
return listener;
|
|
},
|
|
|
|
findListener: function(fn, scope) {
|
|
var listeners = this.listeners,
|
|
i = listeners.length,
|
|
listener,
|
|
s;
|
|
|
|
while (i--) {
|
|
listener = listeners[i];
|
|
if (listener) {
|
|
s = listener.scope;
|
|
|
|
// Compare the listener's scope with *JUST THE PASSED SCOPE* if one is passed, and only fall back to the owning Observable if none is passed.
|
|
// We cannot use the test (s == scope || s == this.observable)
|
|
// Otherwise, if the Observable itself adds Ext.emptyFn as a listener, and then Ext.emptyFn is added under another scope, there will be a false match.
|
|
if (listener.fn == fn && (s == (scope || this.observable))) {
|
|
return i;
|
|
}
|
|
}
|
|
}
|
|
|
|
return - 1;
|
|
},
|
|
|
|
isListening: function(fn, scope) {
|
|
return this.findListener(fn, scope) !== -1;
|
|
},
|
|
|
|
removeListener: function(fn, scope) {
|
|
var me = this,
|
|
index,
|
|
listener,
|
|
highestNegativePriorityIndex,
|
|
k;
|
|
index = me.findListener(fn, scope);
|
|
if (index != -1) {
|
|
listener = me.listeners[index];
|
|
highestNegativePriorityIndex = me._highestNegativePriorityIndex;
|
|
|
|
if (me.firing) {
|
|
me.listeners = me.listeners.slice(0);
|
|
}
|
|
|
|
// cancel and remove a buffered handler that hasn't fired yet
|
|
if (listener.task) {
|
|
listener.task.cancel();
|
|
delete listener.task;
|
|
}
|
|
|
|
// cancel and remove all delayed handlers that haven't fired yet
|
|
k = listener.tasks && listener.tasks.length;
|
|
if (k) {
|
|
while (k--) {
|
|
listener.tasks[k].cancel();
|
|
}
|
|
delete listener.tasks;
|
|
}
|
|
|
|
// Remove this listener from the listeners array
|
|
// We can use splice directly. The IE8 bug which Ext.Array works around only affects *insertion*
|
|
// http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/6e946d03-e09f-4b22-a4dd-cd5e276bf05a/
|
|
me.listeners.splice(index, 1);
|
|
|
|
// if the listeners array contains negative priority listeners, adjust the
|
|
// internal index if needed.
|
|
if (highestNegativePriorityIndex) {
|
|
if (index < highestNegativePriorityIndex) {
|
|
me._highestNegativePriorityIndex --;
|
|
} else if (index === highestNegativePriorityIndex && index === me.listeners.length) {
|
|
delete me._highestNegativePriorityIndex;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
// Iterate to stop any buffered/delayed events
|
|
clearListeners: function() {
|
|
var listeners = this.listeners,
|
|
i = listeners.length;
|
|
|
|
while (i--) {
|
|
this.removeListener(listeners[i].fn, listeners[i].scope);
|
|
}
|
|
},
|
|
|
|
suspend: function() {
|
|
this.suspended += 1;
|
|
},
|
|
|
|
resume: function() {
|
|
if (this.suspended) {
|
|
this.suspended--;
|
|
}
|
|
},
|
|
|
|
fire: function() {
|
|
var me = this,
|
|
listeners = me.listeners,
|
|
count = listeners.length,
|
|
i,
|
|
args,
|
|
listener,
|
|
len;
|
|
|
|
if (!me.suspended && count > 0) {
|
|
me.firing = true;
|
|
args = arguments.length ? arraySlice.call(arguments, 0) : []
|
|
len = args.length;
|
|
for (i = 0; i < count; i++) {
|
|
listener = listeners[i];
|
|
if (listener.o) {
|
|
args[len] = listener.o;
|
|
}
|
|
if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) {
|
|
return (me.firing = false);
|
|
}
|
|
}
|
|
}
|
|
me.firing = false;
|
|
return true;
|
|
},
|
|
|
|
createTargeted: function (handler, listener, o, scope) {
|
|
return function(){
|
|
if (o.target === arguments[0]){
|
|
handler.apply(scope, arguments);
|
|
}
|
|
};
|
|
},
|
|
|
|
createBuffered: function (handler, listener, o, scope) {
|
|
listener.task = new DelayedTask();
|
|
return function() {
|
|
listener.task.delay(o.buffer, handler, scope, toArray(arguments));
|
|
};
|
|
},
|
|
|
|
createDelayed: function (handler, listener, o, scope) {
|
|
return function() {
|
|
var task = new DelayedTask();
|
|
if (!listener.tasks) {
|
|
listener.tasks = [];
|
|
}
|
|
listener.tasks.push(task);
|
|
task.delay(o.delay || 10, handler, scope, toArray(arguments));
|
|
};
|
|
},
|
|
|
|
createSingle: function (handler, listener, o, scope) {
|
|
return function() {
|
|
var event = listener.ev;
|
|
|
|
if (event.removeListener(listener.fn, scope) && event.observable) {
|
|
// Removing from a regular Observable-owned, named event (not an anonymous
|
|
// event such as Ext's readyEvent): Decrement the listeners count
|
|
event.observable.hasListeners[event.name]--;
|
|
}
|
|
|
|
return handler.apply(scope, arguments);
|
|
};
|
|
}
|
|
};
|
|
});
|
|
|
|
// @tag dom,core
|
|
// @require util/Event.js
|
|
// @define Ext.EventManager
|
|
|
|
/**
|
|
* @class Ext.EventManager
|
|
* Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
|
|
* several useful events directly.
|
|
*
|
|
* See {@link Ext.EventObject} for more details on normalized event objects.
|
|
* @singleton
|
|
*/
|
|
Ext.EventManager = new function() {
|
|
var EventManager = this,
|
|
doc = document,
|
|
win = window,
|
|
escapeRx = /\\/g,
|
|
prefix = Ext.baseCSSPrefix,
|
|
// IE9strict addEventListener has some issues with using synthetic events
|
|
supportsAddEventListener = !Ext.isIE9 && 'addEventListener' in doc,
|
|
readyEvent,
|
|
initExtCss = function() {
|
|
// find the body element
|
|
var bd = doc.body || doc.getElementsByTagName('body')[0],
|
|
cls = [prefix + 'body'],
|
|
htmlCls = [],
|
|
supportsLG = Ext.supports.CSS3LinearGradient,
|
|
supportsBR = Ext.supports.CSS3BorderRadius,
|
|
html;
|
|
|
|
if (!bd) {
|
|
return false;
|
|
}
|
|
|
|
html = bd.parentNode;
|
|
|
|
function add (c) {
|
|
cls.push(prefix + c);
|
|
}
|
|
|
|
//Let's keep this human readable!
|
|
if (Ext.isIE && Ext.isIE9m) {
|
|
add('ie');
|
|
|
|
// very often CSS needs to do checks like "IE7+" or "IE6 or 7". To help
|
|
// reduce the clutter (since CSS/SCSS cannot do these tests), we add some
|
|
// additional classes:
|
|
//
|
|
// x-ie7p : IE7+ : 7 <= ieVer
|
|
// x-ie7m : IE7- : ieVer <= 7
|
|
// x-ie8p : IE8+ : 8 <= ieVer
|
|
// x-ie8m : IE8- : ieVer <= 8
|
|
// x-ie9p : IE9+ : 9 <= ieVer
|
|
// x-ie78 : IE7 or 8 : 7 <= ieVer <= 8
|
|
//
|
|
if (Ext.isIE6) {
|
|
add('ie6');
|
|
} else { // ignore pre-IE6 :)
|
|
add('ie7p');
|
|
|
|
if (Ext.isIE7) {
|
|
add('ie7');
|
|
} else {
|
|
add('ie8p');
|
|
|
|
if (Ext.isIE8) {
|
|
add('ie8');
|
|
} else {
|
|
add('ie9p');
|
|
|
|
if (Ext.isIE9) {
|
|
add('ie9');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (Ext.isIE7m) {
|
|
add('ie7m');
|
|
}
|
|
if (Ext.isIE8m) {
|
|
add('ie8m');
|
|
}
|
|
if (Ext.isIE9m) {
|
|
add('ie9m');
|
|
}
|
|
if (Ext.isIE7 || Ext.isIE8) {
|
|
add('ie78');
|
|
}
|
|
}
|
|
|
|
if (Ext.isIE10) {
|
|
add('ie10');
|
|
}
|
|
|
|
if (Ext.isGecko) {
|
|
add('gecko');
|
|
if (Ext.isGecko3) {
|
|
add('gecko3');
|
|
}
|
|
if (Ext.isGecko4) {
|
|
add('gecko4');
|
|
}
|
|
if (Ext.isGecko5) {
|
|
add('gecko5');
|
|
}
|
|
}
|
|
if (Ext.isOpera) {
|
|
add('opera');
|
|
}
|
|
if (Ext.isWebKit) {
|
|
add('webkit');
|
|
}
|
|
if (Ext.isSafari) {
|
|
add('safari');
|
|
if (Ext.isSafari2) {
|
|
add('safari2');
|
|
}
|
|
if (Ext.isSafari3) {
|
|
add('safari3');
|
|
}
|
|
if (Ext.isSafari4) {
|
|
add('safari4');
|
|
}
|
|
if (Ext.isSafari5) {
|
|
add('safari5');
|
|
}
|
|
if (Ext.isSafari5_0) {
|
|
add('safari5_0')
|
|
}
|
|
}
|
|
if (Ext.isChrome) {
|
|
add('chrome');
|
|
}
|
|
if (Ext.isMac) {
|
|
add('mac');
|
|
}
|
|
if (Ext.isLinux) {
|
|
add('linux');
|
|
}
|
|
if (!supportsBR) {
|
|
add('nbr');
|
|
}
|
|
if (!supportsLG) {
|
|
add('nlg');
|
|
}
|
|
|
|
// add to the parent to allow for selectors x-strict x-border-box, also set the isBorderBox property correctly
|
|
if (html) {
|
|
if (Ext.isStrict && (Ext.isIE6 || Ext.isIE7)) {
|
|
Ext.isBorderBox = false;
|
|
}
|
|
else {
|
|
Ext.isBorderBox = true;
|
|
}
|
|
|
|
if(!Ext.isBorderBox) {
|
|
htmlCls.push(prefix + 'content-box');
|
|
}
|
|
if (Ext.isStrict) {
|
|
htmlCls.push(prefix + 'strict');
|
|
} else {
|
|
htmlCls.push(prefix + 'quirks');
|
|
}
|
|
Ext.fly(html, '_internal').addCls(htmlCls);
|
|
}
|
|
|
|
Ext.fly(bd, '_internal').addCls(cls);
|
|
return true;
|
|
};
|
|
|
|
Ext.apply(EventManager, {
|
|
/**
|
|
* Check if we have bound our global onReady listener
|
|
* @private
|
|
*/
|
|
hasBoundOnReady: false,
|
|
|
|
/**
|
|
* Check if fireDocReady has been called
|
|
* @private
|
|
*/
|
|
hasFiredReady: false,
|
|
|
|
/**
|
|
* Additionally, allow the 'DOM' listener thread to complete (usually desirable with mobWebkit, Gecko)
|
|
* before firing the entire onReady chain (high stack load on Loader) by specifying a delay value.
|
|
* Defaults to 1ms.
|
|
* @private
|
|
*/
|
|
deferReadyEvent : 1,
|
|
|
|
/*
|
|
* diags: a list of event names passed to onReadyEvent (in chron order)
|
|
* @private
|
|
*/
|
|
onReadyChain : [],
|
|
|
|
/**
|
|
* Holds references to any onReady functions
|
|
* @private
|
|
*/
|
|
readyEvent:
|
|
(function () {
|
|
readyEvent = new Ext.util.Event();
|
|
readyEvent.fire = function () {
|
|
Ext._beforeReadyTime = Ext._beforeReadyTime || new Date().getTime();
|
|
readyEvent.self.prototype.fire.apply(readyEvent, arguments);
|
|
Ext._afterReadytime = new Date().getTime();
|
|
};
|
|
return readyEvent;
|
|
}()),
|
|
|
|
/**
|
|
* Fires when an event handler finishes its run, just before returning to browser control.
|
|
*
|
|
* This includes DOM event handlers, Ajax (including JSONP) event handlers, and {@link Ext.util.TaskRunner TaskRunners}
|
|
*
|
|
* This can be useful for performing cleanup, or update tasks which need to happen only
|
|
* after all code in an event handler has been run, but which should not be executed in a timer
|
|
* due to the intervening browser reflow/repaint which would take place.
|
|
*
|
|
*/
|
|
idleEvent: new Ext.util.Event(),
|
|
|
|
/**
|
|
* detects whether the EventManager has been placed in a paused state for synchronization
|
|
* with external debugging / perf tools (PageAnalyzer)
|
|
* @private
|
|
*/
|
|
isReadyPaused: function(){
|
|
return (/[?&]ext-pauseReadyFire\b/i.test(location.search) && !Ext._continueFireReady);
|
|
},
|
|
|
|
/**
|
|
* Binds the appropriate browser event for checking if the DOM has loaded.
|
|
* @private
|
|
*/
|
|
bindReadyEvent: function() {
|
|
if (EventManager.hasBoundOnReady) {
|
|
return;
|
|
}
|
|
|
|
// Test scenario where Core is dynamically loaded AFTER window.load
|
|
if ( doc.readyState == 'complete' ) { // Firefox4+ got support for this state, others already do.
|
|
EventManager.onReadyEvent({
|
|
type: doc.readyState || 'body'
|
|
});
|
|
} else {
|
|
doc.addEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
|
|
win.addEventListener('load', EventManager.onReadyEvent, false);
|
|
EventManager.hasBoundOnReady = true;
|
|
}
|
|
},
|
|
|
|
onReadyEvent : function(e) {
|
|
if (e && e.type) {
|
|
EventManager.onReadyChain.push(e.type);
|
|
}
|
|
|
|
if (EventManager.hasBoundOnReady) {
|
|
doc.removeEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
|
|
win.removeEventListener('load', EventManager.onReadyEvent, false);
|
|
}
|
|
|
|
if (!Ext.isReady) {
|
|
EventManager.fireDocReady();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* We know the document is loaded, so trigger any onReady events.
|
|
* @private
|
|
*/
|
|
fireDocReady: function() {
|
|
if (!Ext.isReady) {
|
|
Ext._readyTime = new Date().getTime();
|
|
Ext.isReady = true;
|
|
|
|
Ext.supports.init();
|
|
EventManager.onWindowUnload();
|
|
readyEvent.onReadyChain = EventManager.onReadyChain; //diags report
|
|
|
|
if (Ext.isNumber(EventManager.deferReadyEvent)) {
|
|
Ext.Function.defer(EventManager.fireReadyEvent, EventManager.deferReadyEvent);
|
|
EventManager.hasDocReadyTimer = true;
|
|
} else {
|
|
EventManager.fireReadyEvent();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fires the ready event
|
|
* @private
|
|
*/
|
|
fireReadyEvent: function() {
|
|
|
|
// Unset the timer flag here since other onReady events may be
|
|
// added during the fire() call and we don't want to block them
|
|
EventManager.hasDocReadyTimer = false;
|
|
EventManager.isFiring = true;
|
|
|
|
// Ready events are all single: true, if we get to the end
|
|
// & there are more listeners, it means they were added
|
|
// inside some other ready event
|
|
while (readyEvent.listeners.length && !EventManager.isReadyPaused()) {
|
|
readyEvent.fire();
|
|
}
|
|
EventManager.isFiring = false;
|
|
EventManager.hasFiredReady = true;
|
|
Ext.EventManager.idleEvent.fire();
|
|
},
|
|
|
|
/**
|
|
* Adds a listener to be notified when the document is ready (before onload and before images are loaded).
|
|
*
|
|
* {@link Ext#onDocumentReady} is an alias for {@link Ext.EventManager#onDocumentReady}.
|
|
*
|
|
* @param {Function} fn The method the event invokes.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function executes.
|
|
* Defaults to the browser window.
|
|
* @param {Object} [options] Options object as passed to {@link Ext.Element#addListener}.
|
|
*/
|
|
onDocumentReady: function(fn, scope, options) {
|
|
options = options || {};
|
|
// force single, only ever fire it once
|
|
options.single = true;
|
|
readyEvent.addListener(fn, scope, options);
|
|
|
|
// If we're in the middle of firing, or we have a deferred timer
|
|
// pending, drop out since the event will be fired later
|
|
if (!(EventManager.isFiring || EventManager.hasDocReadyTimer)) {
|
|
if (Ext.isReady) {
|
|
EventManager.fireReadyEvent();
|
|
} else {
|
|
EventManager.bindReadyEvent();
|
|
}
|
|
}
|
|
},
|
|
|
|
// --------------------- event binding ---------------------
|
|
|
|
/**
|
|
* Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.
|
|
* @private
|
|
*/
|
|
stoppedMouseDownEvent: new Ext.util.Event(),
|
|
|
|
/**
|
|
* Options to parse for the 4th argument to addListener.
|
|
* @private
|
|
*/
|
|
propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
|
|
|
|
/**
|
|
* Get the id of the element. If one has not been assigned, automatically assign it.
|
|
* @param {HTMLElement/Ext.Element} element The element to get the id for.
|
|
* @return {String} id
|
|
*/
|
|
getId : function(element) {
|
|
var id;
|
|
|
|
element = Ext.getDom(element);
|
|
|
|
if (element === doc || element === win) {
|
|
id = element === doc ? Ext.documentId : Ext.windowId;
|
|
}
|
|
else {
|
|
id = Ext.id(element);
|
|
}
|
|
|
|
if (!Ext.cache[id]) {
|
|
Ext.addCacheEntry(id, null, element);
|
|
}
|
|
|
|
return id;
|
|
},
|
|
|
|
/**
|
|
* Convert a "config style" listener into a set of flat arguments so they can be passed to addListener
|
|
* @private
|
|
* @param {Object} element The element the event is for
|
|
* @param {Object} event The event configuration
|
|
* @param {Object} isRemove True if a removal should be performed, otherwise an add will be done.
|
|
*/
|
|
prepareListenerConfig: function(element, config, isRemove) {
|
|
var propRe = EventManager.propRe,
|
|
key, value, args;
|
|
|
|
// loop over all the keys in the object
|
|
for (key in config) {
|
|
if (config.hasOwnProperty(key)) {
|
|
// if the key is something else then an event option
|
|
if (!propRe.test(key)) {
|
|
value = config[key];
|
|
// if the value is a function it must be something like click: function() {}, scope: this
|
|
// which means that there might be multiple event listeners with shared options
|
|
if (typeof value == 'function') {
|
|
// shared options
|
|
args = [element, key, value, config.scope, config];
|
|
} else {
|
|
// if its not a function, it must be an object like click: {fn: function() {}, scope: this}
|
|
args = [element, key, value.fn, value.scope, value];
|
|
}
|
|
|
|
if (isRemove) {
|
|
EventManager.removeListener.apply(EventManager, args);
|
|
} else {
|
|
EventManager.addListener.apply(EventManager, args);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
mouseEnterLeaveRe: /mouseenter|mouseleave/,
|
|
|
|
/**
|
|
* Normalize cross browser event differences
|
|
* @private
|
|
* @param {Object} eventName The event name
|
|
* @param {Object} fn The function to execute
|
|
* @return {Object} The new event name/function
|
|
*/
|
|
normalizeEvent: function(eventName, fn) {
|
|
if (EventManager.mouseEnterLeaveRe.test(eventName) && !Ext.supports.MouseEnterLeave) {
|
|
if (fn) {
|
|
fn = Ext.Function.createInterceptor(fn, EventManager.contains);
|
|
}
|
|
eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
|
|
} else if (eventName == 'mousewheel' && !Ext.supports.MouseWheel && !Ext.isOpera) {
|
|
eventName = 'DOMMouseScroll';
|
|
}
|
|
return {
|
|
eventName: eventName,
|
|
fn: fn
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Checks whether the event's relatedTarget is contained inside (or <b>is</b>) the element.
|
|
* @private
|
|
* @param {Object} event
|
|
*/
|
|
contains: function(event) {
|
|
event = event.browserEvent || event;
|
|
var parent = event.currentTarget,
|
|
child = EventManager.getRelatedTarget(event);
|
|
|
|
if (parent && parent.firstChild) {
|
|
while (child) {
|
|
if (child === parent) {
|
|
return false;
|
|
}
|
|
child = child.parentNode;
|
|
if (child && (child.nodeType != 1)) {
|
|
child = null;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Appends an event handler to an element. The shorthand version {@link #on} is equivalent.
|
|
* Typically you will use {@link Ext.Element#addListener} directly on an Element in favor of
|
|
* calling this version.
|
|
*
|
|
* {@link Ext.EventManager#on} is an alias for {@link Ext.EventManager#addListener}.
|
|
*
|
|
* @param {String/Ext.Element/HTMLElement/Window} el The html element or id to assign the event handler to.
|
|
*
|
|
* @param {String} eventName The name of the event to listen for.
|
|
*
|
|
* @param {Function/String} handler The handler function the event invokes. A String parameter
|
|
* is assumed to be method name in `scope` object, or Element object if no scope is provided.
|
|
* @param {Ext.EventObject} handler.event The {@link Ext.EventObject EventObject} describing the event.
|
|
* @param {Ext.dom.Element} handler.target The Element which was the target of the event.
|
|
* Note that this may be filtered by using the `delegate` option.
|
|
* @param {Object} handler.options The options object from the addListener call.
|
|
*
|
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
|
|
* Defaults to the Element.
|
|
*
|
|
* @param {Object} [options] An object containing handler configuration properties.
|
|
* This may contain any of the following properties (See {@link Ext.Element#addListener}
|
|
* for examples of how to use these options.):
|
|
* @param {Object} options.scope The scope (`this` reference) in which the handler function is executed. Defaults to the Element.
|
|
* @param {String} options.delegate A simple selector to filter the target or look for a descendant of the target
|
|
* @param {Boolean} options.stopEvent True to stop the event. That is stop propagation, and prevent the default action.
|
|
* @param {Boolean} options.preventDefault True to prevent the default action
|
|
* @param {Boolean} options.stopPropagation True to prevent event propagation
|
|
* @param {Boolean} options.normalized False to pass a browser event to the handler function instead of an Ext.EventObject
|
|
* @param {Number} options.delay The number of milliseconds to delay the invocation of the handler after te event fires.
|
|
* @param {Boolean} options.single True to add a handler to handle just the next firing of the event, and then remove itself.
|
|
* @param {Number} options.buffer Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
|
|
* by the specified number of milliseconds. If the event fires again within that time, the original
|
|
* handler is *not* invoked, but the new handler is scheduled in its place.
|
|
* @param {Ext.dom.Element} options.target Only call the handler if the event was fired on the target Element,
|
|
* *not* if the event was bubbled up from a child node.
|
|
*/
|
|
addListener: function(element, eventName, fn, scope, options) {
|
|
// Check if we've been passed a "config style" event.
|
|
if (typeof eventName !== 'string') {
|
|
EventManager.prepareListenerConfig(element, eventName);
|
|
return;
|
|
}
|
|
|
|
var dom = element.dom || Ext.getDom(element),
|
|
hasAddEventListener, bind, wrap, cache, id, cacheItem, capture;
|
|
|
|
if (typeof fn === 'string') {
|
|
fn = Ext.resolveMethod(fn, scope || element);
|
|
}
|
|
|
|
|
|
// create the wrapper function
|
|
options = options || {};
|
|
|
|
bind = EventManager.normalizeEvent(eventName, fn);
|
|
wrap = EventManager.createListenerWrap(dom, eventName, bind.fn, scope, options);
|
|
|
|
// add all required data into the event cache
|
|
cache = EventManager.getEventListenerCache(element.dom ? element : dom, eventName);
|
|
eventName = bind.eventName;
|
|
|
|
// In IE9 we prefer to use attachEvent but it's not available for some Elements (SVG)
|
|
hasAddEventListener = supportsAddEventListener || (Ext.isIE9 && !dom.attachEvent);
|
|
|
|
if (!hasAddEventListener) {
|
|
id = EventManager.normalizeId(dom);
|
|
// If there's no id we don't have any events bound, so we never
|
|
// need to clone at this point.
|
|
if (id) {
|
|
cacheItem = Ext.cache[id][eventName];
|
|
if (cacheItem && cacheItem.firing) {
|
|
// If we're in the middle of firing we want to update the class
|
|
// cache reference so it is different to the array we referenced
|
|
// when we started firing the event. Though this is a more difficult
|
|
// way of not mutating the collection while firing, a vast majority of
|
|
// the time we won't be adding listeners for the same element/event type
|
|
// while firing the same event.
|
|
cache = EventManager.cloneEventListenerCache(dom, eventName);
|
|
}
|
|
}
|
|
}
|
|
|
|
capture = !!options.capture;
|
|
cache.push({
|
|
fn: fn,
|
|
wrap: wrap,
|
|
scope: scope,
|
|
capture: capture
|
|
});
|
|
|
|
if (!hasAddEventListener) {
|
|
// If cache length is 1, it means we're binding the first event
|
|
// for this element for this type
|
|
if (cache.length === 1) {
|
|
id = EventManager.normalizeId(dom, true);
|
|
fn = Ext.Function.bind(EventManager.handleSingleEvent, EventManager, [id, eventName], true);
|
|
Ext.cache[id][eventName] = {
|
|
firing: false,
|
|
fn: fn
|
|
};
|
|
dom.attachEvent('on' + eventName, fn);
|
|
}
|
|
} else {
|
|
dom.addEventListener(eventName, wrap, capture);
|
|
}
|
|
|
|
if (dom == doc && eventName == 'mousedown') {
|
|
EventManager.stoppedMouseDownEvent.addListener(wrap);
|
|
}
|
|
},
|
|
|
|
// Handle the case where the window/document already has an id attached.
|
|
// In this case we still want to return our custom window/doc id.
|
|
normalizeId: function(dom, force) {
|
|
var id;
|
|
if (dom === document) {
|
|
id = Ext.documentId;
|
|
} else if (dom === window) {
|
|
id = Ext.windowId;
|
|
} else {
|
|
id = dom.id;
|
|
}
|
|
if (!id && force) {
|
|
id = EventManager.getId(dom);
|
|
}
|
|
return id;
|
|
},
|
|
|
|
handleSingleEvent: function(e, id, eventName) {
|
|
// Don't create a copy here, since we fire lots of events and it's likely
|
|
// that we won't add an event during a fire. Instead, we'll handle this during
|
|
// the process of adding events
|
|
var listenerCache = EventManager.getEventListenerCache(id, eventName),
|
|
attachItem = Ext.cache[id][eventName],
|
|
len, i;
|
|
|
|
// Typically this will never occur, however, the framework allows the creation
|
|
// of synthetic events in Ext.EventObject. As such, it makes it possible to fire
|
|
// off the same event on the same element during this method.
|
|
if (attachItem.firing) {
|
|
return;
|
|
}
|
|
|
|
attachItem.firing = true;
|
|
for (i = 0, len = listenerCache.length; i < len; ++i) {
|
|
listenerCache[i].wrap(e);
|
|
}
|
|
attachItem.firing = false;
|
|
|
|
},
|
|
|
|
/**
|
|
* Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically
|
|
* you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
|
|
*
|
|
* {@link Ext.EventManager#on} is an alias for {@link Ext.EventManager#addListener}.
|
|
*
|
|
* @param {String/Ext.Element/HTMLElement/Window} el The id or html element from which to remove the listener.
|
|
* @param {String} eventName The name of the event.
|
|
* @param {Function} fn The handler function to remove. **This must be a reference to the function passed
|
|
* into the {@link #addListener} call.**
|
|
* @param {Object} scope If a scope (`this` reference) was specified when the listener was added,
|
|
* then this must refer to the same object.
|
|
*/
|
|
removeListener : function(element, eventName, fn, scope) {
|
|
// handle our listener config object syntax
|
|
if (typeof eventName !== 'string') {
|
|
EventManager.prepareListenerConfig(element, eventName, true);
|
|
return;
|
|
}
|
|
|
|
var dom = Ext.getDom(element),
|
|
id, el = element.dom ? element : Ext.get(dom),
|
|
cache = EventManager.getEventListenerCache(el, eventName),
|
|
bindName = EventManager.normalizeEvent(eventName).eventName,
|
|
i = cache.length, j, cacheItem, hasRemoveEventListener,
|
|
listener, wrap;
|
|
|
|
if (!dom) {
|
|
return;
|
|
}
|
|
|
|
// In IE9 we prefer to use detachEvent but it's not available for some Elements (SVG)
|
|
hasRemoveEventListener = supportsAddEventListener || (Ext.isIE9 && !dom.detachEvent);
|
|
|
|
if (typeof fn === 'string') {
|
|
fn = Ext.resolveMethod(fn, scope || element);
|
|
}
|
|
|
|
while (i--) {
|
|
listener = cache[i];
|
|
|
|
if (listener && (!fn || listener.fn == fn) && (!scope || listener.scope === scope)) {
|
|
wrap = listener.wrap;
|
|
|
|
// clear buffered calls
|
|
if (wrap.task) {
|
|
clearTimeout(wrap.task);
|
|
delete wrap.task;
|
|
}
|
|
|
|
// clear delayed calls
|
|
j = wrap.tasks && wrap.tasks.length;
|
|
if (j) {
|
|
while (j--) {
|
|
clearTimeout(wrap.tasks[j]);
|
|
}
|
|
delete wrap.tasks;
|
|
}
|
|
|
|
if (!hasRemoveEventListener) {
|
|
// if length is 1, we're removing the final event, actually
|
|
// unbind it from the element
|
|
id = EventManager.normalizeId(dom, true);
|
|
cacheItem = Ext.cache[id][bindName];
|
|
if (cacheItem && cacheItem.firing) {
|
|
// See code in addListener for why we create a copy
|
|
cache = EventManager.cloneEventListenerCache(dom, bindName);
|
|
}
|
|
|
|
if (cache.length === 1) {
|
|
fn = cacheItem.fn;
|
|
delete Ext.cache[id][bindName];
|
|
dom.detachEvent('on' + bindName, fn);
|
|
}
|
|
} else {
|
|
dom.removeEventListener(bindName, wrap, listener.capture);
|
|
}
|
|
|
|
if (wrap && dom == doc && eventName == 'mousedown') {
|
|
EventManager.stoppedMouseDownEvent.removeListener(wrap);
|
|
}
|
|
|
|
// remove listener from cache
|
|
Ext.Array.erase(cache, i, 1);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes all event handers from an element. Typically you will use {@link Ext.Element#removeAllListeners}
|
|
* directly on an Element in favor of calling this version.
|
|
* @param {String/Ext.Element/HTMLElement/Window} el The id or html element from which to remove all event handlers.
|
|
*/
|
|
removeAll : function(element) {
|
|
var id = (typeof element === 'string') ? element : element.id,
|
|
cache, events, eventName;
|
|
|
|
// If the element does not have an ID or a cache entry for its ID, then this is a no-op
|
|
if (id && (cache = Ext.cache[id])) {
|
|
events = cache.events;
|
|
|
|
for (eventName in events) {
|
|
if (events.hasOwnProperty(eventName)) {
|
|
EventManager.removeListener(element, eventName);
|
|
}
|
|
}
|
|
cache.events = {};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Recursively removes all previous added listeners from an element and its children. Typically you will use {@link Ext.Element#purgeAllListeners}
|
|
* directly on an Element in favor of calling this version.
|
|
* @param {String/Ext.Element/HTMLElement/Window} el The id or html element from which to remove all event handlers.
|
|
* @param {String} eventName (optional) The name of the event.
|
|
*/
|
|
purgeElement : function(element, eventName) {
|
|
var dom = Ext.getDom(element),
|
|
i = 0, len, childNodes;
|
|
|
|
if (eventName) {
|
|
EventManager.removeListener(element, eventName);
|
|
} else {
|
|
EventManager.removeAll(element);
|
|
}
|
|
|
|
if (dom && dom.childNodes) {
|
|
childNodes = dom.childNodes;
|
|
for (len = childNodes.length; i < len; i++) {
|
|
EventManager.purgeElement(childNodes[i], eventName);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Create the wrapper function for the event
|
|
* @private
|
|
* @param {HTMLElement} dom The dom element
|
|
* @param {String} ename The event name
|
|
* @param {Function} fn The function to execute
|
|
* @param {Object} scope The scope to execute callback in
|
|
* @param {Object} options The options
|
|
* @return {Function} the wrapper function
|
|
*/
|
|
createListenerWrap : function(dom, ename, fn, scope, options) {
|
|
options = options || {};
|
|
|
|
var f, gen, wrap = function(e, args) {
|
|
// Compile the implementation upon first firing
|
|
if (!gen) {
|
|
f = ['if(!' + Ext.name + ') {return;}'];
|
|
|
|
if (options.buffer || options.delay || options.freezeEvent) {
|
|
if (options.freezeEvent) {
|
|
// If we're freezing, we still want to update the singleton event object
|
|
// as well as returning a frozen copy
|
|
f.push('e = X.EventObject.setEvent(e);');
|
|
}
|
|
f.push('e = new X.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
|
|
} else {
|
|
f.push('e = X.EventObject.setEvent(e);');
|
|
}
|
|
|
|
if (options.delegate) {
|
|
// double up '\' characters so escape sequences survive the
|
|
// string-literal translation
|
|
f.push('var result, t = e.getTarget("' + (options.delegate + '').replace(escapeRx, '\\\\') + '", this);');
|
|
f.push('if(!t) {return;}');
|
|
} else {
|
|
f.push('var t = e.target, result;');
|
|
}
|
|
|
|
if (options.target) {
|
|
f.push('if(e.target !== options.target) {return;}');
|
|
}
|
|
|
|
if (options.stopEvent) {
|
|
f.push('e.stopEvent();');
|
|
} else {
|
|
if(options.preventDefault) {
|
|
f.push('e.preventDefault();');
|
|
}
|
|
if(options.stopPropagation) {
|
|
f.push('e.stopPropagation();');
|
|
}
|
|
}
|
|
|
|
if (options.normalized === false) {
|
|
f.push('e = e.browserEvent;');
|
|
}
|
|
|
|
if (options.buffer) {
|
|
f.push('(wrap.task && clearTimeout(wrap.task));');
|
|
f.push('wrap.task = setTimeout(function() {');
|
|
}
|
|
|
|
if (options.delay) {
|
|
f.push('wrap.tasks = wrap.tasks || [];');
|
|
f.push('wrap.tasks.push(setTimeout(function() {');
|
|
}
|
|
|
|
// finally call the actual handler fn
|
|
f.push('result = fn.call(scope || dom, e, t, options);');
|
|
|
|
if (options.single) {
|
|
f.push('evtMgr.removeListener(dom, ename, fn, scope);');
|
|
}
|
|
|
|
// Fire the global idle event for all events except mousemove which is too common, and
|
|
// fires too frequently and fast to be use in tiggering onIdle processing. Do not fire on page unload.
|
|
if (ename !== 'mousemove' && ename !== 'unload') {
|
|
f.push('if (evtMgr.idleEvent.listeners.length) {');
|
|
f.push('evtMgr.idleEvent.fire();');
|
|
f.push('}');
|
|
}
|
|
|
|
if (options.delay) {
|
|
f.push('}, ' + options.delay + '));');
|
|
}
|
|
|
|
if (options.buffer) {
|
|
f.push('}, ' + options.buffer + ');');
|
|
}
|
|
f.push('return result;');
|
|
|
|
gen = Ext.cacheableFunctionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', 'X', 'evtMgr', f.join('\n'));
|
|
}
|
|
|
|
return gen.call(dom, e, options, fn, scope, ename, dom, wrap, args, Ext, EventManager);
|
|
};
|
|
return wrap;
|
|
},
|
|
|
|
/**
|
|
* Gets the event cache object for a particular element
|
|
* @private
|
|
* @param {HTMLElement} element The element
|
|
* @return {Object} The event cache object
|
|
*/
|
|
getEventCache: function(element) {
|
|
var elementCache, eventCache, id;
|
|
|
|
if (!element) {
|
|
return [];
|
|
}
|
|
|
|
if (element.$cache) {
|
|
elementCache = element.$cache;
|
|
} else {
|
|
// getId will populate the cache for this element if it isn't already present
|
|
if (typeof element === 'string') {
|
|
id = element;
|
|
} else {
|
|
id = EventManager.getId(element);
|
|
}
|
|
elementCache = Ext.cache[id];
|
|
}
|
|
eventCache = elementCache.events || (elementCache.events = {});
|
|
return eventCache;
|
|
},
|
|
|
|
/**
|
|
* Get the event cache for a particular element for a particular event
|
|
* @private
|
|
* @param {HTMLElement} element The element
|
|
* @param {Object} eventName The event name
|
|
* @return {Array} The events for the element
|
|
*/
|
|
getEventListenerCache : function(element, eventName) {
|
|
var eventCache = EventManager.getEventCache(element);
|
|
return eventCache[eventName] || (eventCache[eventName] = []);
|
|
},
|
|
|
|
/**
|
|
* Clones the event cache for a particular element for a particular event
|
|
* @private
|
|
* @param {HTMLElement} element The element
|
|
* @param {Object} eventName The event name
|
|
* @return {Array} The cloned events for the element
|
|
*/
|
|
cloneEventListenerCache: function(element, eventName){
|
|
var eventCache = EventManager.getEventCache(element),
|
|
out;
|
|
|
|
if (eventCache[eventName]) {
|
|
out = eventCache[eventName].slice(0);
|
|
} else {
|
|
out = [];
|
|
}
|
|
eventCache[eventName] = out;
|
|
return out;
|
|
},
|
|
|
|
// --------------------- utility methods ---------------------
|
|
mouseLeaveRe: /(mouseout|mouseleave)/,
|
|
mouseEnterRe: /(mouseover|mouseenter)/,
|
|
|
|
/**
|
|
* Stop the event (preventDefault and stopPropagation)
|
|
* @param {Event} event The event to stop
|
|
*/
|
|
stopEvent: function(event) {
|
|
EventManager.stopPropagation(event);
|
|
EventManager.preventDefault(event);
|
|
},
|
|
|
|
/**
|
|
* Cancels bubbling of the event.
|
|
* @param {Event} event The event to stop bubbling.
|
|
*/
|
|
stopPropagation: function(event) {
|
|
event = event.browserEvent || event;
|
|
if (event.stopPropagation) {
|
|
event.stopPropagation();
|
|
} else {
|
|
event.cancelBubble = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Prevents the browsers default handling of the event.
|
|
* @param {Event} event The event to prevent the default
|
|
*/
|
|
preventDefault: function(event) {
|
|
event = event.browserEvent || event;
|
|
if (event.preventDefault) {
|
|
event.preventDefault();
|
|
} else {
|
|
event.returnValue = false;
|
|
// Some keys events require setting the keyCode to -1 to be prevented
|
|
try {
|
|
// all ctrl + X and F1 -> F12
|
|
if (event.ctrlKey || event.keyCode > 111 && event.keyCode < 124) {
|
|
event.keyCode = -1;
|
|
}
|
|
} catch (e) {
|
|
// see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the related target from the event.
|
|
* @param {Object} event The event
|
|
* @return {HTMLElement} The related target.
|
|
*/
|
|
getRelatedTarget: function(event) {
|
|
event = event.browserEvent || event;
|
|
var target = event.relatedTarget;
|
|
if (!target) {
|
|
if (EventManager.mouseLeaveRe.test(event.type)) {
|
|
target = event.toElement;
|
|
} else if (EventManager.mouseEnterRe.test(event.type)) {
|
|
target = event.fromElement;
|
|
}
|
|
}
|
|
return EventManager.resolveTextNode(target);
|
|
},
|
|
|
|
/**
|
|
* Gets the x coordinate from the event
|
|
* @param {Object} event The event
|
|
* @return {Number} The x coordinate
|
|
*/
|
|
getPageX: function(event) {
|
|
return EventManager.getPageXY(event)[0];
|
|
},
|
|
|
|
/**
|
|
* Gets the y coordinate from the event
|
|
* @param {Object} event The event
|
|
* @return {Number} The y coordinate
|
|
*/
|
|
getPageY: function(event) {
|
|
return EventManager.getPageXY(event)[1];
|
|
},
|
|
|
|
/**
|
|
* Gets the x & y coordinate from the event
|
|
* @param {Object} event The event
|
|
* @return {Number[]} The x/y coordinate
|
|
*/
|
|
getPageXY: function(event) {
|
|
event = event.browserEvent || event;
|
|
var x = event.pageX,
|
|
y = event.pageY,
|
|
docEl = doc.documentElement,
|
|
body = doc.body;
|
|
|
|
// pageX/pageY not available (undefined, not null), use clientX/clientY instead
|
|
if (!x && x !== 0) {
|
|
x = event.clientX + (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) - (docEl && docEl.clientLeft || body && body.clientLeft || 0);
|
|
y = event.clientY + (docEl && docEl.scrollTop || body && body.scrollTop || 0) - (docEl && docEl.clientTop || body && body.clientTop || 0);
|
|
}
|
|
return [x, y];
|
|
},
|
|
|
|
/**
|
|
* Gets the target of the event.
|
|
* @param {Object} event The event
|
|
* @return {HTMLElement} target
|
|
*/
|
|
getTarget: function(event) {
|
|
event = event.browserEvent || event;
|
|
return EventManager.resolveTextNode(event.target || event.srcElement);
|
|
},
|
|
|
|
// technically no need to browser sniff this, however it makes
|
|
// no sense to check this every time, for every event, whether
|
|
// the string is equal.
|
|
/**
|
|
* Resolve any text nodes accounting for browser differences.
|
|
* @private
|
|
* @param {HTMLElement} node The node
|
|
* @return {HTMLElement} The resolved node
|
|
*/
|
|
resolveTextNode: Ext.isGecko ?
|
|
function(node) {
|
|
if (node) {
|
|
// work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197
|
|
var s = HTMLElement.prototype.toString.call(node);
|
|
if (s !== '[xpconnect wrapped native prototype]' && s !== '[object XULElement]') {
|
|
return node.nodeType == 3 ? node.parentNode: node;
|
|
}
|
|
}
|
|
}
|
|
:
|
|
function(node) {
|
|
return node && node.nodeType == 3 ? node.parentNode: node;
|
|
},
|
|
|
|
// --------------------- custom event binding ---------------------
|
|
|
|
// Keep track of the current width/height
|
|
curWidth: 0,
|
|
curHeight: 0,
|
|
|
|
/**
|
|
* Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
|
|
* passes new viewport width and height to handlers.
|
|
* @param {Function} fn The handler function the window resize event invokes.
|
|
* @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
|
|
* @param {Boolean} [options] Options object as passed to {@link Ext.Element#addListener}
|
|
*/
|
|
onWindowResize: function(fn, scope, options) {
|
|
var resize = EventManager.resizeEvent;
|
|
|
|
if (!resize) {
|
|
EventManager.resizeEvent = resize = new Ext.util.Event();
|
|
EventManager.on(win, 'resize', EventManager.fireResize, null, {buffer: 100});
|
|
}
|
|
resize.addListener(fn, scope, options);
|
|
},
|
|
|
|
/**
|
|
* Fire the resize event.
|
|
* @private
|
|
*/
|
|
fireResize: function() {
|
|
var w = Ext.Element.getViewWidth(),
|
|
h = Ext.Element.getViewHeight();
|
|
|
|
//whacky problem in IE where the resize event will sometimes fire even though the w/h are the same.
|
|
if (EventManager.curHeight != h || EventManager.curWidth != w) {
|
|
EventManager.curHeight = h;
|
|
EventManager.curWidth = w;
|
|
EventManager.resizeEvent.fire(w, h);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes the passed window resize listener.
|
|
* @param {Function} fn The method the event invokes
|
|
* @param {Object} scope The scope of handler
|
|
*/
|
|
removeResizeListener: function(fn, scope) {
|
|
var resize = EventManager.resizeEvent;
|
|
if (resize) {
|
|
resize.removeListener(fn, scope);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds a listener to be notified when the browser window is unloaded.
|
|
* @param {Function} fn The handler function the window unload event invokes.
|
|
* @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
|
|
* @param {Boolean} options Options object as passed to {@link Ext.Element#addListener}
|
|
*/
|
|
onWindowUnload: function(fn, scope, options) {
|
|
var unload = EventManager.unloadEvent;
|
|
|
|
if (!unload) {
|
|
EventManager.unloadEvent = unload = new Ext.util.Event();
|
|
EventManager.addListener(win, 'unload', EventManager.fireUnload);
|
|
}
|
|
if (fn) {
|
|
unload.addListener(fn, scope, options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fires the unload event for items bound with onWindowUnload
|
|
* @private
|
|
*/
|
|
fireUnload: function() {
|
|
// wrap in a try catch, could have some problems during unload
|
|
try {
|
|
// relinquish references.
|
|
doc = win = undefined;
|
|
|
|
var gridviews, i, ln,
|
|
el, cache;
|
|
|
|
EventManager.unloadEvent.fire();
|
|
// Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
|
|
if (Ext.isGecko3) {
|
|
gridviews = Ext.ComponentQuery.query('gridview');
|
|
i = 0;
|
|
ln = gridviews.length;
|
|
for (; i < ln; i++) {
|
|
gridviews[i].scrollToTop();
|
|
}
|
|
}
|
|
// Purge all elements in the cache
|
|
cache = Ext.cache;
|
|
|
|
for (el in cache) {
|
|
if (cache.hasOwnProperty(el)) {
|
|
EventManager.removeAll(el);
|
|
}
|
|
}
|
|
} catch(e) {
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes the passed window unload listener.
|
|
* @param {Function} fn The method the event invokes
|
|
* @param {Object} scope The scope of handler
|
|
*/
|
|
removeUnloadListener: function(fn, scope) {
|
|
var unload = EventManager.unloadEvent;
|
|
if (unload) {
|
|
unload.removeListener(fn, scope);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* note 1: IE fires ONLY the keydown event on specialkey autorepeat
|
|
* note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
|
|
* (research done by Jan Wolter at http://unixpapa.com/js/key.html)
|
|
* @private
|
|
*/
|
|
useKeyDown: Ext.isWebKit ?
|
|
parseInt(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1], 10) >= 525 :
|
|
!((Ext.isGecko && !Ext.isWindows) || Ext.isOpera),
|
|
|
|
/**
|
|
* Indicates which event to use for getting key presses.
|
|
* @return {String} The appropriate event name.
|
|
*/
|
|
getKeyEvent: function() {
|
|
return EventManager.useKeyDown ? 'keydown' : 'keypress';
|
|
}
|
|
});
|
|
|
|
// route "< ie9-Standards" to a legacy IE onReady implementation
|
|
if(!supportsAddEventListener && document.attachEvent) {
|
|
Ext.apply( EventManager, {
|
|
/* Customized implementation for Legacy IE. The default implementation is configured for use
|
|
* with all other 'standards compliant' agents.
|
|
* References: http://javascript.nwbox.com/IEContentLoaded/
|
|
* licensed courtesy of http://developer.yahoo.com/yui/license.html
|
|
*/
|
|
|
|
/**
|
|
* This strategy has minimal benefits for Sencha solutions that build themselves (ie. minimal initial page markup).
|
|
* However, progressively-enhanced pages (with image content and/or embedded frames) will benefit the most from it.
|
|
* Browser timer resolution is too poor to ensure a doScroll check more than once on a page loaded with minimal
|
|
* assets (the readystatechange event 'complete' usually beats the doScroll timer on a 'lightly-loaded' initial document).
|
|
*/
|
|
pollScroll : function() {
|
|
var scrollable = true;
|
|
|
|
try {
|
|
document.documentElement.doScroll('left');
|
|
} catch(e) {
|
|
scrollable = false;
|
|
}
|
|
|
|
// on IE8, when running within an iFrame, document.body is not immediately available
|
|
if (scrollable && document.body) {
|
|
EventManager.onReadyEvent({
|
|
type:'doScroll'
|
|
});
|
|
} else {
|
|
/*
|
|
* minimize thrashing --
|
|
* adjusted for setTimeout's close-to-minimums (not too low),
|
|
* as this method SHOULD always be called once initially
|
|
*/
|
|
EventManager.scrollTimeout = setTimeout(EventManager.pollScroll, 20);
|
|
}
|
|
|
|
return scrollable;
|
|
},
|
|
|
|
/**
|
|
* Timer for doScroll polling
|
|
* @private
|
|
*/
|
|
scrollTimeout: null,
|
|
|
|
/* @private
|
|
*/
|
|
readyStatesRe : /complete/i,
|
|
|
|
/* @private
|
|
*/
|
|
checkReadyState: function() {
|
|
var state = document.readyState;
|
|
|
|
if (EventManager.readyStatesRe.test(state)) {
|
|
EventManager.onReadyEvent({
|
|
type: state
|
|
});
|
|
}
|
|
},
|
|
|
|
bindReadyEvent: function() {
|
|
var topContext = true;
|
|
|
|
if (EventManager.hasBoundOnReady) {
|
|
return;
|
|
}
|
|
|
|
//are we in an IFRAME? (doScroll ineffective here)
|
|
try {
|
|
topContext = window.frameElement === undefined;
|
|
} catch(e) {
|
|
// If we throw an exception, it means we're probably getting access denied,
|
|
// which means we're in an iframe cross domain.
|
|
topContext = false;
|
|
}
|
|
|
|
if (!topContext || !doc.documentElement.doScroll) {
|
|
EventManager.pollScroll = Ext.emptyFn; //then noop this test altogether
|
|
}
|
|
|
|
// starts doScroll polling if necessary
|
|
if (EventManager.pollScroll() === true) {
|
|
return;
|
|
}
|
|
|
|
// Core is loaded AFTER initial document write/load ?
|
|
if (doc.readyState == 'complete' ) {
|
|
EventManager.onReadyEvent({type: 'already ' + (doc.readyState || 'body') });
|
|
} else {
|
|
doc.attachEvent('onreadystatechange', EventManager.checkReadyState);
|
|
window.attachEvent('onload', EventManager.onReadyEvent);
|
|
EventManager.hasBoundOnReady = true;
|
|
}
|
|
},
|
|
|
|
onReadyEvent : function(e) {
|
|
if (e && e.type) {
|
|
EventManager.onReadyChain.push(e.type);
|
|
}
|
|
|
|
if (EventManager.hasBoundOnReady) {
|
|
document.detachEvent('onreadystatechange', EventManager.checkReadyState);
|
|
window.detachEvent('onload', EventManager.onReadyEvent);
|
|
}
|
|
|
|
if (Ext.isNumber(EventManager.scrollTimeout)) {
|
|
clearTimeout(EventManager.scrollTimeout);
|
|
delete EventManager.scrollTimeout;
|
|
}
|
|
|
|
if (!Ext.isReady) {
|
|
EventManager.fireDocReady();
|
|
}
|
|
},
|
|
|
|
//diags: a list of event types passed to onReadyEvent (in chron order)
|
|
onReadyChain : []
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Adds a function to be called when the DOM is ready, and all required classes have been loaded.
|
|
*
|
|
* If the DOM is ready and all classes are loaded, the passed function is executed immediately.
|
|
* @member Ext
|
|
* @method onReady
|
|
* @param {Function} fn The function callback to be executed
|
|
* @param {Object} scope The execution scope (`this` reference) of the callback function
|
|
* @param {Object} options The options to modify the listener as passed to {@link Ext.util.Observable#addListener addListener}.
|
|
*/
|
|
Ext.onReady = function(fn, scope, options) {
|
|
Ext.Loader.onReady(fn, scope, true, options);
|
|
};
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method onDocumentReady
|
|
* @inheritdoc Ext.EventManager#onDocumentReady
|
|
*/
|
|
Ext.onDocumentReady = EventManager.onDocumentReady;
|
|
|
|
/**
|
|
* @member Ext.EventManager
|
|
* @method on
|
|
* @inheritdoc Ext.EventManager#addListener
|
|
*/
|
|
EventManager.on = EventManager.addListener;
|
|
|
|
/**
|
|
* @member Ext.EventManager
|
|
* @method un
|
|
* @inheritdoc Ext.EventManager#removeListener
|
|
*/
|
|
EventManager.un = EventManager.removeListener;
|
|
|
|
Ext.onReady(initExtCss);
|
|
};
|
|
|
|
// @tag core
|
|
/**
|
|
* Base class that provides a common interface for publishing events. Subclasses are expected to to have a property
|
|
* "events" with all the events defined, and, optionally, a property "listeners" with configured listeners defined.
|
|
*
|
|
* For example:
|
|
*
|
|
* Ext.define('Employee', {
|
|
* mixins: {
|
|
* observable: 'Ext.util.Observable'
|
|
* },
|
|
*
|
|
* constructor: function (config) {
|
|
* // The Observable constructor copies all of the properties of `config` on
|
|
* // to `this` using {@link Ext#apply}. Further, the `listeners` property is
|
|
* // processed to add listeners.
|
|
* //
|
|
* this.mixins.observable.constructor.call(this, config);
|
|
*
|
|
* this.addEvents(
|
|
* 'fired',
|
|
* 'quit'
|
|
* );
|
|
* }
|
|
* });
|
|
*
|
|
* This could then be used like this:
|
|
*
|
|
* var newEmployee = new Employee({
|
|
* name: employeeName,
|
|
* listeners: {
|
|
* quit: function() {
|
|
* // By default, "this" will be the object that fired the event.
|
|
* alert(this.name + " has quit!");
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.util.Observable', function(Observable) {
|
|
|
|
// Private Destroyable class which removes listeners
|
|
var emptyArray = [],
|
|
arrayProto = Array.prototype,
|
|
arraySlice = arrayProto.slice,
|
|
ExtEvent = Ext.util.Event,
|
|
ListenerRemover = function(observable) {
|
|
|
|
// Passed a ListenerRemover: return it
|
|
if (observable instanceof ListenerRemover) {
|
|
return observable;
|
|
}
|
|
|
|
this.observable = observable;
|
|
|
|
// Called when addManagedListener is used with the event source as the second arg:
|
|
// (owner, eventSource, args...)
|
|
if (arguments[1].isObservable) {
|
|
this.managedListeners = true;
|
|
}
|
|
this.args = arraySlice.call(arguments, 1);
|
|
};
|
|
|
|
ListenerRemover.prototype.destroy = function() {
|
|
this.observable[this.managedListeners ? 'mun' : 'un'].apply(this.observable, this.args);
|
|
};
|
|
|
|
return {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
statics: {
|
|
/**
|
|
* Removes **all** added captures from the Observable.
|
|
*
|
|
* @param {Ext.util.Observable} o The Observable to release
|
|
* @static
|
|
*/
|
|
releaseCapture: function(o) {
|
|
o.fireEventArgs = this.prototype.fireEventArgs;
|
|
},
|
|
|
|
/**
|
|
* Starts capture on the specified Observable. All events will be passed to the supplied function with the event
|
|
* name + standard signature of the event **before** the event is fired. If the supplied function returns false,
|
|
* the event will not fire.
|
|
*
|
|
* @param {Ext.util.Observable} o The Observable to capture events from.
|
|
* @param {Function} fn The function to call when an event is fired.
|
|
* @param {Object} scope (optional) The scope (`this` reference) in which the function is executed. Defaults to
|
|
* the Observable firing the event.
|
|
* @static
|
|
*/
|
|
capture: function(o, fn, scope) {
|
|
// We're capturing calls to fireEventArgs to avoid duplication of events;
|
|
// however fn expects fireEvent's signature so we have to convert it here.
|
|
// To avoid unnecessary conversions, observe() below is aware of the changes
|
|
// and will capture fireEventArgs instead.
|
|
var newFn = function(eventName, args) {
|
|
return fn.apply(scope, [eventName].concat(args));
|
|
}
|
|
|
|
this.captureArgs(o, newFn, scope);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
captureArgs: function(o, fn, scope) {
|
|
o.fireEventArgs = Ext.Function.createInterceptor(o.fireEventArgs, fn, scope);
|
|
},
|
|
|
|
/**
|
|
* Sets observability on the passed class constructor.
|
|
*
|
|
* This makes any event fired on any instance of the passed class also fire a single event through
|
|
* the **class** allowing for central handling of events on many instances at once.
|
|
*
|
|
* Usage:
|
|
*
|
|
* Ext.util.Observable.observe(Ext.data.Connection);
|
|
* Ext.data.Connection.on('beforerequest', function(con, options) {
|
|
* console.log('Ajax request made to ' + options.url);
|
|
* });
|
|
*
|
|
* @param {Function} c The class constructor to make observable.
|
|
* @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}.
|
|
* @static
|
|
*/
|
|
observe: function(cls, listeners) {
|
|
if (cls) {
|
|
if (!cls.isObservable) {
|
|
Ext.applyIf(cls, new this());
|
|
this.captureArgs(cls.prototype, cls.fireEventArgs, cls);
|
|
}
|
|
if (Ext.isObject(listeners)) {
|
|
cls.on(listeners);
|
|
}
|
|
}
|
|
return cls;
|
|
},
|
|
|
|
/**
|
|
* Prepares a given class for observable instances. This method is called when a
|
|
* class derives from this class or uses this class as a mixin.
|
|
* @param {Function} T The class constructor to prepare.
|
|
* @private
|
|
*/
|
|
prepareClass: function (T, mixin) {
|
|
// T.hasListeners is the object to track listeners on class T. This object's
|
|
// prototype (__proto__) is the "hasListeners" of T.superclass.
|
|
|
|
// Instances of T will create "hasListeners" that have T.hasListeners as their
|
|
// immediate prototype (__proto__).
|
|
|
|
if (!T.HasListeners) {
|
|
// We create a HasListeners "class" for this class. The "prototype" of the
|
|
// HasListeners class is an instance of the HasListeners class associated
|
|
// with this class's super class (or with Observable).
|
|
var HasListeners = function () {},
|
|
SuperHL = T.superclass.HasListeners || (mixin && mixin.HasListeners) ||
|
|
Observable.HasListeners;
|
|
|
|
// Make the HasListener class available on the class and its prototype:
|
|
T.prototype.HasListeners = T.HasListeners = HasListeners;
|
|
|
|
// And connect its "prototype" to the new HasListeners of our super class
|
|
// (which is also the class-level "hasListeners" instance).
|
|
HasListeners.prototype = T.hasListeners = new SuperHL();
|
|
}
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Object} listeners
|
|
*
|
|
* A config object containing one or more event handlers to be added to this object during initialization. This
|
|
* should be a valid listeners config object as specified in the {@link #addListener} example for attaching multiple
|
|
* handlers at once.
|
|
*
|
|
* **DOM events from Ext JS {@link Ext.Component Components}**
|
|
*
|
|
* While _some_ Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually
|
|
* only done when extra value can be added. For example the {@link Ext.view.View DataView}'s **`{@link
|
|
* Ext.view.View#itemclick itemclick}`** event passing the node clicked on. To access DOM events directly from a
|
|
* child element of a Component, we need to specify the `element` option to identify the Component property to add a
|
|
* DOM listener to:
|
|
*
|
|
* new Ext.panel.Panel({
|
|
* width: 400,
|
|
* height: 200,
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar'
|
|
* }],
|
|
* listeners: {
|
|
* click: {
|
|
* element: 'el', //bind to the underlying el property on the panel
|
|
* fn: function(){ console.log('click el'); }
|
|
* },
|
|
* dblclick: {
|
|
* element: 'body', //bind to the underlying body property on the panel
|
|
* fn: function(){ console.log('dblclick body'); }
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} isObservable
|
|
* `true` in this class to identify an object as an instantiated Observable, or subclass thereof.
|
|
*/
|
|
isObservable: true,
|
|
|
|
/**
|
|
* @private
|
|
* Initial suspended call count. Incremented when {@link #suspendEvents} is called, decremented when {@link #resumeEvents} is called.
|
|
*/
|
|
eventsSuspended: 0,
|
|
|
|
/**
|
|
* @property {Object} hasListeners
|
|
* @readonly
|
|
* This object holds a key for any event that has a listener. The listener may be set
|
|
* directly on the instance, or on its class or a super class (via {@link #observe}) or
|
|
* on the {@link Ext.app.EventBus MVC EventBus}. The values of this object are truthy
|
|
* (a non-zero number) and falsy (0 or undefined). They do not represent an exact count
|
|
* of listeners. The value for an event is truthy if the event must be fired and is
|
|
* falsy if there is no need to fire the event.
|
|
*
|
|
* The intended use of this property is to avoid the expense of fireEvent calls when
|
|
* there are no listeners. This can be particularly helpful when one would otherwise
|
|
* have to call fireEvent hundreds or thousands of times. It is used like this:
|
|
*
|
|
* if (this.hasListeners.foo) {
|
|
* this.fireEvent('foo', this, arg1);
|
|
* }
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
// The subclass may have already initialized it.
|
|
if (!me.hasListeners) {
|
|
me.hasListeners = new me.HasListeners();
|
|
}
|
|
|
|
me.events = me.events || {};
|
|
if (me.listeners) {
|
|
me.on(me.listeners);
|
|
me.listeners = null; //Set as an instance property to pre-empt the prototype in case any are set there.
|
|
}
|
|
|
|
if (me.bubbleEvents) {
|
|
me.enableBubble(me.bubbleEvents);
|
|
}
|
|
},
|
|
|
|
onClassExtended: function (T) {
|
|
if (!T.HasListeners) {
|
|
// Some classes derive from us and some others derive from those classes. All
|
|
// of these are passed to this method.
|
|
Observable.prepareClass(T);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// Matches options property names within a listeners specification object - property names which are never used as event names.
|
|
eventOptionsRe : /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|element|destroyable|vertical|horizontal|freezeEvent|priority)$/,
|
|
|
|
/**
|
|
* Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is
|
|
* destroyed.
|
|
*
|
|
* @param {Ext.util.Observable/Ext.Element} item The item to which to add a listener/listeners.
|
|
* @param {Object/String} ename The event name, or an object containing event name properties.
|
|
* @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
|
|
* @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
|
|
* in which the handler function is executed.
|
|
* @param {Object} options (optional) If the `ename` parameter was an event name, this is the
|
|
* {@link Ext.util.Observable#addListener addListener} options.
|
|
* @return {Object} **Only when the `destroyable` option is specified. **
|
|
*
|
|
* A `Destroyable` object. An object which implements the `destroy` method which removes all listeners added in this call. For example:
|
|
*
|
|
* this.btnListeners = = myButton.mon({
|
|
* destroyable: true
|
|
* mouseover: function() { console.log('mouseover'); },
|
|
* mouseout: function() { console.log('mouseout'); },
|
|
* click: function() { console.log('click'); }
|
|
* });
|
|
*
|
|
* And when those listeners need to be removed:
|
|
*
|
|
* Ext.destroy(this.btnListeners);
|
|
*
|
|
* or
|
|
*
|
|
* this.btnListeners.destroy();
|
|
*/
|
|
addManagedListener: function(item, ename, fn, scope, options, /* private */ noDestroy) {
|
|
var me = this,
|
|
managedListeners = me.managedListeners = me.managedListeners || [],
|
|
config, passedOptions;
|
|
|
|
if (typeof ename !== 'string') {
|
|
// When creating listeners using the object form, allow caller to override the default of
|
|
// using the listeners object as options.
|
|
// This is used by relayEvents, when adding its relayer so that it does not contibute
|
|
// a spurious options param to the end of the arg list.
|
|
passedOptions = arguments.length > 4 ? options : ename;
|
|
|
|
options = ename;
|
|
for (ename in options) {
|
|
if (options.hasOwnProperty(ename)) {
|
|
config = options[ename];
|
|
if (!me.eventOptionsRe.test(ename)) {
|
|
// recurse, but pass the noDestroy parameter as true so that lots of individual Destroyables are not created.
|
|
// We create a single one at the end if necessary.
|
|
me.addManagedListener(item, ename, config.fn || config, config.scope || options.scope || scope, config.fn ? config : passedOptions, true);
|
|
}
|
|
}
|
|
}
|
|
if (options && options.destroyable) {
|
|
return new ListenerRemover(me, item, options);
|
|
}
|
|
}
|
|
else {
|
|
if (typeof fn === 'string') {
|
|
scope = scope || me;
|
|
fn = Ext.resolveMethod(fn, scope);
|
|
}
|
|
|
|
managedListeners.push({
|
|
item: item,
|
|
ename: ename,
|
|
fn: fn,
|
|
scope: scope,
|
|
options: options
|
|
});
|
|
|
|
item.on(ename, fn, scope, options);
|
|
|
|
// The 'noDestroy' flag is sent if we're looping through a hash of listeners passing each one to addManagedListener separately
|
|
if (!noDestroy && options && options.destroyable) {
|
|
return new ListenerRemover(me, item, ename, fn, scope);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes listeners that were added by the {@link #mon} method.
|
|
*
|
|
* @param {Ext.util.Observable/Ext.Element} item The item from which to remove a listener/listeners.
|
|
* @param {Object/String} ename The event name, or an object containing event name properties.
|
|
* @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
|
|
* @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
|
|
* in which the handler function is executed.
|
|
*/
|
|
removeManagedListener: function(item, ename, fn, scope) {
|
|
var me = this,
|
|
options,
|
|
config,
|
|
managedListeners,
|
|
length,
|
|
i, func;
|
|
|
|
if (typeof ename !== 'string') {
|
|
options = ename;
|
|
for (ename in options) {
|
|
if (options.hasOwnProperty(ename)) {
|
|
config = options[ename];
|
|
if (!me.eventOptionsRe.test(ename)) {
|
|
me.removeManagedListener(item, ename, config.fn || config, config.scope || options.scope || scope);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
managedListeners = me.managedListeners ? me.managedListeners.slice() : [];
|
|
|
|
if (typeof fn === 'string') {
|
|
scope = scope || me;
|
|
fn = Ext.resolveMethod(fn, scope);
|
|
}
|
|
|
|
for (i = 0, length = managedListeners.length; i < length; i++) {
|
|
me.removeManagedListenerItem(false, managedListeners[i], item, ename, fn, scope);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fires the specified event with the passed parameters (minus the event name, plus the `options` object passed
|
|
* to {@link #addListener}).
|
|
*
|
|
* An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) by
|
|
* calling {@link #enableBubble}.
|
|
*
|
|
* @param {String} eventName The name of the event to fire.
|
|
* @param {Object...} args Variable number of parameters are passed to handlers.
|
|
* @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
|
|
*/
|
|
fireEvent: function(eventName) {
|
|
return this.fireEventArgs(eventName, arraySlice.call(arguments, 1));
|
|
},
|
|
|
|
/**
|
|
* Fires the specified event with the passed parameter list.
|
|
*
|
|
* An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) by
|
|
* calling {@link #enableBubble}.
|
|
*
|
|
* @param {String} eventName The name of the event to fire.
|
|
* @param {Object[]} args An array of parameters which are passed to handlers.
|
|
* @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
|
|
*/
|
|
fireEventArgs: function(eventName, args) {
|
|
eventName = eventName.toLowerCase();
|
|
var me = this,
|
|
events = me.events,
|
|
event = events && events[eventName],
|
|
ret = true;
|
|
|
|
// Only continue firing the event if there are listeners to be informed.
|
|
// Bubbled events will always have a listener count, so will be fired.
|
|
if (event && me.hasListeners[eventName]) {
|
|
ret = me.continueFireEvent(eventName, args || emptyArray, event.bubble);
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Continue to fire event.
|
|
* @private
|
|
*
|
|
* @param {String} eventName
|
|
* @param {Array} args
|
|
* @param {Boolean} bubbles
|
|
*/
|
|
continueFireEvent: function(eventName, args, bubbles) {
|
|
var target = this,
|
|
queue, event,
|
|
ret = true;
|
|
|
|
do {
|
|
if (target.eventsSuspended) {
|
|
if ((queue = target.eventQueue)) {
|
|
queue.push([eventName, args, bubbles]);
|
|
}
|
|
return ret;
|
|
} else {
|
|
event = target.events[eventName];
|
|
// Continue bubbling if event exists and it is `true` or the handler didn't returns false and it
|
|
// configure to bubble.
|
|
if (event && event !== true) {
|
|
if ((ret = event.fire.apply(event, args)) === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} while (bubbles && (target = target.getBubbleParent()));
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Gets the bubbling parent for an Observable
|
|
* @private
|
|
* @return {Ext.util.Observable} The bubble parent. null is returned if no bubble target exists
|
|
*/
|
|
getBubbleParent: function() {
|
|
var me = this, parent = me.getBubbleTarget && me.getBubbleTarget();
|
|
if (parent && parent.isObservable) {
|
|
return parent;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Appends an event handler to this object. For example:
|
|
*
|
|
* myGridPanel.on("mouseover", this.onMouseOver, this);
|
|
*
|
|
* The method also allows for a single argument to be passed which is a config object
|
|
* containing properties which specify multiple events. For example:
|
|
*
|
|
* myGridPanel.on({
|
|
* cellClick: this.onCellClick,
|
|
* mouseover: this.onMouseOver,
|
|
* mouseout: this.onMouseOut,
|
|
* scope: this // Important. Ensure "this" is correct during handler execution
|
|
* });
|
|
*
|
|
* One can also specify options for each event handler separately:
|
|
*
|
|
* myGridPanel.on({
|
|
* cellClick: {fn: this.onCellClick, scope: this, single: true},
|
|
* mouseover: {fn: panel.onMouseOver, scope: panel}
|
|
* });
|
|
*
|
|
* *Names* of methods in a specified scope may also be used. Note that
|
|
* `scope` MUST be specified to use this option:
|
|
*
|
|
* myGridPanel.on({
|
|
* cellClick: {fn: 'onCellClick', scope: this, single: true},
|
|
* mouseover: {fn: 'onMouseOver', scope: panel}
|
|
* });
|
|
*
|
|
* @param {String/Object} eventName The name of the event to listen for.
|
|
* May also be an object who's property names are event names.
|
|
*
|
|
* @param {Function} [fn] The method the event invokes, or *if `scope` is specified, the *name* of the method within
|
|
* the specified `scope`. Will be called with arguments
|
|
* given to {@link Ext.util.Observable#fireEvent} plus the `options` parameter described below.
|
|
*
|
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function is
|
|
* executed. **If omitted, defaults to the object which fired the event.**
|
|
*
|
|
* @param {Object} [options] An object containing handler configuration.
|
|
*
|
|
* **Note:** Unlike in ExtJS 3.x, the options object will also be passed as the last
|
|
* argument to every event handler.
|
|
*
|
|
* This object may contain any of the following properties:
|
|
*
|
|
* @param {Object} options.scope
|
|
* The scope (`this` reference) in which the handler function is executed. **If omitted,
|
|
* defaults to the object which fired the event.**
|
|
*
|
|
* @param {Number} options.delay
|
|
* The number of milliseconds to delay the invocation of the handler after the event fires.
|
|
*
|
|
* @param {Boolean} options.single
|
|
* True to add a handler to handle just the next firing of the event, and then remove itself.
|
|
*
|
|
* @param {Number} options.buffer
|
|
* Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
|
|
* by the specified number of milliseconds. If the event fires again within that time,
|
|
* the original handler is _not_ invoked, but the new handler is scheduled in its place.
|
|
*
|
|
* @param {Ext.util.Observable} options.target
|
|
* Only call the handler if the event was fired on the target Observable, _not_ if the event
|
|
* was bubbled up from a child Observable.
|
|
*
|
|
* @param {String} options.element
|
|
* **This option is only valid for listeners bound to {@link Ext.Component Components}.**
|
|
* The name of a Component property which references an element to add a listener to.
|
|
*
|
|
* This option is useful during Component construction to add DOM event listeners to elements of
|
|
* {@link Ext.Component Components} which will exist only after the Component is rendered.
|
|
* For example, to add a click listener to a Panel's body:
|
|
*
|
|
* new Ext.panel.Panel({
|
|
* title: 'The title',
|
|
* listeners: {
|
|
* click: this.handlePanelClick,
|
|
* element: 'body'
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Boolean} [options.destroyable=false]
|
|
* When specified as `true`, the function returns A `Destroyable` object. An object which implements the `destroy` method which removes all listeners added in this call.
|
|
*
|
|
* @param {Number} [options.priority]
|
|
* An optional numeric priority that determines the order in which event handlers
|
|
* are run. Event handlers with no priority will be run as if they had a priority
|
|
* of 0. Handlers with a higher priority will be prioritized to run sooner than
|
|
* those with a lower priority. Negative numbers can be used to set a priority
|
|
* lower than the default. Internally, the framework uses a range of 1000 or
|
|
* greater, and -1000 or lesser for handers that are intended to run before or
|
|
* after all others, so it is recommended to stay within the range of -999 to 999
|
|
* when setting the priority of event handlers in application-level code.
|
|
*
|
|
* **Combining Options**
|
|
*
|
|
* Using the options argument, it is possible to combine different types of listeners:
|
|
*
|
|
* A delayed, one-time listener.
|
|
*
|
|
* myPanel.on('hide', this.handleClick, this, {
|
|
* single: true,
|
|
* delay: 100
|
|
* });
|
|
*
|
|
* @return {Object} **Only when the `destroyable` option is specified. **
|
|
*
|
|
* A `Destroyable` object. An object which implements the `destroy` method which removes all listeners added in this call. For example:
|
|
*
|
|
* this.btnListeners = = myButton.on({
|
|
* destroyable: true
|
|
* mouseover: function() { console.log('mouseover'); },
|
|
* mouseout: function() { console.log('mouseout'); },
|
|
* click: function() { console.log('click'); }
|
|
* });
|
|
*
|
|
* And when those listeners need to be removed:
|
|
*
|
|
* Ext.destroy(this.btnListeners);
|
|
*
|
|
* or
|
|
*
|
|
* this.btnListeners.destroy();
|
|
*/
|
|
addListener: function(ename, fn, scope, options) {
|
|
var me = this,
|
|
config, event,
|
|
prevListenerCount = 0;
|
|
|
|
// Object listener hash passed
|
|
if (typeof ename !== 'string') {
|
|
options = ename;
|
|
for (ename in options) {
|
|
if (options.hasOwnProperty(ename)) {
|
|
config = options[ename];
|
|
if (!me.eventOptionsRe.test(ename)) {
|
|
/* This would be an API change so check removed until https://sencha.jira.com/browse/EXTJSIV-7183 is fully implemented in 4.2
|
|
// Test must go here as well as in the simple form because of the attempted property access here on the config object.
|
|
*/
|
|
me.addListener(ename, config.fn || config, config.scope || options.scope, config.fn ? config : options);
|
|
}
|
|
}
|
|
}
|
|
if (options && options.destroyable) {
|
|
return new ListenerRemover(me, options);
|
|
}
|
|
}
|
|
// String, function passed
|
|
else {
|
|
ename = ename.toLowerCase();
|
|
event = me.events[ename];
|
|
if (event && event.isEvent) {
|
|
prevListenerCount = event.listeners.length;
|
|
} else {
|
|
me.events[ename] = event = new ExtEvent(me, ename);
|
|
}
|
|
|
|
// Allow listeners: { click: 'onClick', scope: myObject }
|
|
if (typeof fn === 'string') {
|
|
scope = scope || me;
|
|
fn = Ext.resolveMethod(fn, scope);
|
|
}
|
|
event.addListener(fn, scope, options);
|
|
|
|
// If a new listener has been added (Event.addListener rejects duplicates of the same fn+scope)
|
|
// then increment the hasListeners counter
|
|
if (event.listeners.length !== prevListenerCount) {
|
|
me.hasListeners._incr_(ename);
|
|
}
|
|
if (options && options.destroyable) {
|
|
return new ListenerRemover(me, ename, fn, scope, options);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes an event handler.
|
|
*
|
|
* @param {String} eventName The type of event the handler was associated with.
|
|
* @param {Function} fn The handler to remove. **This must be a reference to the function passed into the
|
|
* {@link Ext.util.Observable#addListener} call.**
|
|
* @param {Object} scope (optional) The scope originally specified for the handler. It must be the same as the
|
|
* scope argument specified in the original call to {@link Ext.util.Observable#addListener} or the listener will not be removed.
|
|
*/
|
|
removeListener: function(ename, fn, scope) {
|
|
var me = this,
|
|
config,
|
|
event,
|
|
options;
|
|
|
|
if (typeof ename !== 'string') {
|
|
options = ename;
|
|
for (ename in options) {
|
|
if (options.hasOwnProperty(ename)) {
|
|
config = options[ename];
|
|
if (!me.eventOptionsRe.test(ename)) {
|
|
me.removeListener(ename, config.fn || config, config.scope || options.scope);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
ename = ename.toLowerCase();
|
|
event = me.events[ename];
|
|
if (event && event.isEvent) {
|
|
if (typeof fn === 'string') {
|
|
scope = scope || me;
|
|
fn = Ext.resolveMethod(fn, scope);
|
|
}
|
|
|
|
if (event.removeListener(fn, scope)) {
|
|
me.hasListeners._decr_(ename);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes all listeners for this object including the managed listeners
|
|
*/
|
|
clearListeners: function() {
|
|
var events = this.events,
|
|
hasListeners = this.hasListeners,
|
|
event,
|
|
key;
|
|
|
|
for (key in events) {
|
|
if (events.hasOwnProperty(key)) {
|
|
event = events[key];
|
|
if (event.isEvent) {
|
|
delete hasListeners[key];
|
|
event.clearListeners();
|
|
}
|
|
}
|
|
}
|
|
|
|
this.clearManagedListeners();
|
|
},
|
|
|
|
|
|
/**
|
|
* Removes all managed listeners for this object.
|
|
*/
|
|
clearManagedListeners : function() {
|
|
var managedListeners = this.managedListeners || [],
|
|
i = 0,
|
|
len = managedListeners.length;
|
|
|
|
for (; i < len; i++) {
|
|
this.removeManagedListenerItem(true, managedListeners[i]);
|
|
}
|
|
|
|
this.managedListeners = [];
|
|
},
|
|
|
|
/**
|
|
* Remove a single managed listener item
|
|
* @private
|
|
* @param {Boolean} isClear True if this is being called during a clear
|
|
* @param {Object} managedListener The managed listener item
|
|
* See removeManagedListener for other args
|
|
*/
|
|
removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
|
|
if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
|
|
managedListener.item.un(managedListener.ename, managedListener.fn, managedListener.scope);
|
|
if (!isClear) {
|
|
Ext.Array.remove(this.managedListeners, managedListener);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* Adds the specified events to the list of events which this Observable may fire.
|
|
*
|
|
* @param {Object/String...} eventNames Either an object with event names as properties with
|
|
* a value of `true`. For example:
|
|
*
|
|
* this.addEvents({
|
|
* storeloaded: true,
|
|
* storecleared: true
|
|
* });
|
|
*
|
|
* Or any number of event names as separate parameters. For example:
|
|
*
|
|
* this.addEvents('storeloaded', 'storecleared');
|
|
*
|
|
*/
|
|
addEvents: function(o) {
|
|
var me = this,
|
|
events = me.events || (me.events = {}),
|
|
arg, args, i;
|
|
|
|
if (typeof o == 'string') {
|
|
for (args = arguments, i = args.length; i--; ) {
|
|
arg = args[i];
|
|
if (!events[arg]) {
|
|
events[arg] = true;
|
|
}
|
|
}
|
|
} else {
|
|
Ext.applyIf(me.events, o);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer
|
|
* indicates whether the event needs firing or not.
|
|
*
|
|
* @param {String} eventName The name of the event to check for
|
|
* @return {Boolean} `true` if the event is being listened for or bubbles, else `false`
|
|
*/
|
|
hasListener: function(ename) {
|
|
return !!this.hasListeners[ename.toLowerCase()];
|
|
},
|
|
|
|
/**
|
|
* Suspends the firing of all events. (see {@link #resumeEvents})
|
|
*
|
|
* @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
|
|
* after the {@link #resumeEvents} call instead of discarding all suspended events.
|
|
*/
|
|
suspendEvents: function(queueSuspended) {
|
|
this.eventsSuspended += 1;
|
|
if (queueSuspended && !this.eventQueue) {
|
|
this.eventQueue = [];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Suspends firing of the named event(s).
|
|
*
|
|
* After calling this method to suspend events, the events will no longer fire when requested to fire.
|
|
*
|
|
* **Note that if this is called multiple times for a certain event, the converse method
|
|
* {@link #resumeEvent} will have to be called the same number of times for it to resume firing.**
|
|
*
|
|
* @param {String...} eventName Multiple event names to suspend.
|
|
*/
|
|
suspendEvent: function(eventName) {
|
|
var len = arguments.length,
|
|
i, event;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
event = this.events[arguments[i]];
|
|
|
|
// If it exists, and is an Event object (not still a boolean placeholder), suspend it
|
|
if (event && event.suspend) {
|
|
event.suspend();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Resumes firing of the named event(s).
|
|
*
|
|
* After calling this method to resume events, the events will fire when requested to fire.
|
|
*
|
|
* **Note that if the {@link #suspendEvent} method is called multiple times for a certain event,
|
|
* this converse method will have to be called the same number of times for it to resume firing.**
|
|
*
|
|
* @param {String...} eventName Multiple event names to resume.
|
|
*/
|
|
resumeEvent: function() {
|
|
var len = arguments.length,
|
|
i, event;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
|
|
// If it exists, and is an Event object (not still a boolean placeholder), resume it
|
|
event = this.events[arguments[i]];
|
|
if (event && event.resume) {
|
|
event.resume();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Resumes firing events (see {@link #suspendEvents}).
|
|
*
|
|
* If events were suspended using the `queueSuspended` parameter, then all events fired
|
|
* during event suspension will be sent to any listeners now.
|
|
*/
|
|
resumeEvents: function() {
|
|
var me = this,
|
|
queued = me.eventQueue,
|
|
qLen, q;
|
|
|
|
if (me.eventsSuspended && ! --me.eventsSuspended) {
|
|
delete me.eventQueue;
|
|
|
|
if (queued) {
|
|
qLen = queued.length;
|
|
for (q = 0; q < qLen; q++) {
|
|
me.continueFireEvent.apply(me, queued[q]);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Relays selected events from the specified Observable as if the events were fired by `this`.
|
|
*
|
|
* For example if you are extending Grid, you might decide to forward some events from store.
|
|
* So you can do this inside your initComponent:
|
|
*
|
|
* this.relayEvents(this.getStore(), ['load']);
|
|
*
|
|
* The grid instance will then have an observable 'load' event which will be passed the
|
|
* parameters of the store's load event and any function fired with the grid's load event
|
|
* would have access to the grid using the `this` keyword.
|
|
*
|
|
* @param {Object} origin The Observable whose events this object is to relay.
|
|
* @param {String[]} events Array of event names to relay.
|
|
* @param {String} [prefix] A common prefix to prepend to the event names. For example:
|
|
*
|
|
* this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
|
|
*
|
|
* Now the grid will forward 'load' and 'clear' events of store as 'storeload' and 'storeclear'.
|
|
*
|
|
* @return {Object} A `Destroyable` object. An object which implements the `destroy` method which, when destroyed, removes all relayers. For example:
|
|
*
|
|
* this.storeRelayers = this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
|
|
*
|
|
* Can be undone by calling
|
|
*
|
|
* Ext.destroy(this.storeRelayers);
|
|
*
|
|
* or
|
|
* this.store.relayers.destroy();
|
|
*/
|
|
relayEvents : function(origin, events, prefix) {
|
|
var me = this,
|
|
len = events.length,
|
|
i = 0,
|
|
oldName,
|
|
relayers = {};
|
|
|
|
for (; i < len; i++) {
|
|
oldName = events[i];
|
|
|
|
// Build up the listener hash.
|
|
relayers[oldName] = me.createRelayer(prefix ? prefix + oldName : oldName);
|
|
}
|
|
// Add the relaying listeners as ManagedListeners so that they are removed when this.clearListeners is called (usually when _this_ is destroyed)
|
|
// Explicitly pass options as undefined so that the listener does not get an extra options param
|
|
// which then has to be sliced off in the relayer.
|
|
me.mon(origin, relayers, null, null, undefined);
|
|
|
|
// relayed events are always destroyable.
|
|
return new ListenerRemover(me, origin, relayers);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates an event handling function which refires the event from this object as the passed event name.
|
|
* @param {String} newName The name under which to refire the passed parameters.
|
|
* @param {Array} beginEnd (optional) The caller can specify on which indices to slice.
|
|
* @returns {Function}
|
|
*/
|
|
createRelayer: function(newName, beginEnd) {
|
|
var me = this;
|
|
return function() {
|
|
return me.fireEventArgs.call(me, newName, beginEnd ? arraySlice.apply(arguments, beginEnd) : arguments);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Enables events fired by this Observable to bubble up an owner hierarchy by calling `this.getBubbleTarget()` if
|
|
* present. There is no implementation in the Observable base class.
|
|
*
|
|
* This is commonly used by Ext.Components to bubble events to owner Containers.
|
|
* See {@link Ext.Component#getBubbleTarget}. The default implementation in Ext.Component returns the
|
|
* Component's immediate owner. But if a known target is required, this can be overridden to access the
|
|
* required target more quickly.
|
|
*
|
|
* Example:
|
|
*
|
|
* Ext.define('Ext.overrides.form.field.Base', {
|
|
* override: 'Ext.form.field.Base',
|
|
*
|
|
* // Add functionality to Field's initComponent to enable the change event to bubble
|
|
* initComponent: function () {
|
|
* this.callParent();
|
|
* this.enableBubble('change');
|
|
* }
|
|
* });
|
|
*
|
|
* var myForm = Ext.create('Ext.form.Panel', {
|
|
* title: 'User Details',
|
|
* items: [{
|
|
* ...
|
|
* }],
|
|
* listeners: {
|
|
* change: function() {
|
|
* // Title goes red if form has been modified.
|
|
* myForm.header.setStyle('color', 'red');
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* @param {String/String[]} eventNames The event name to bubble, or an Array of event names.
|
|
*/
|
|
enableBubble: function(eventNames) {
|
|
if (eventNames) {
|
|
var me = this,
|
|
names = (typeof eventNames == 'string') ? arguments : eventNames,
|
|
length = names.length,
|
|
events = me.events,
|
|
ename, event, i;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
ename = names[i].toLowerCase();
|
|
event = events[ename];
|
|
|
|
if (!event || typeof event == 'boolean') {
|
|
events[ename] = event = new ExtEvent(me, ename);
|
|
}
|
|
|
|
// Event must fire if it bubbles (We don't know if anyone up the
|
|
// bubble hierarchy has listeners added)
|
|
me.hasListeners._incr_(ename);
|
|
|
|
event.bubble = true;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}, function() {
|
|
var Observable = this,
|
|
proto = Observable.prototype,
|
|
HasListeners = function () {},
|
|
prepareMixin = function (T) {
|
|
if (!T.HasListeners) {
|
|
var proto = T.prototype;
|
|
|
|
// Classes that use us as a mixin (best practice) need to be prepared.
|
|
Observable.prepareClass(T, this);
|
|
|
|
// Now that we are mixed in to class T, we need to watch T for derivations
|
|
// and prepare them also.
|
|
T.onExtended(function (U) {
|
|
|
|
Observable.prepareClass(U);
|
|
});
|
|
|
|
// Also, if a class uses us as a mixin and that class is then used as
|
|
// a mixin, we need to be notified of that as well.
|
|
if (proto.onClassMixedIn) {
|
|
// play nice with other potential overrides...
|
|
Ext.override(T, {
|
|
onClassMixedIn: function (U) {
|
|
prepareMixin.call(this, U);
|
|
this.callParent(arguments);
|
|
}
|
|
});
|
|
} else {
|
|
// just us chickens, so add the method...
|
|
proto.onClassMixedIn = function (U) {
|
|
prepareMixin.call(this, U);
|
|
};
|
|
}
|
|
}
|
|
},
|
|
globalEvents;
|
|
|
|
HasListeners.prototype = {
|
|
//$$: 42 // to make sure we have a proper prototype
|
|
_decr_: function (ev) {
|
|
if (! --this[ev]) {
|
|
// Delete this entry, since 0 does not mean no one is listening, just
|
|
// that no one is *directly* listening. This allows the eventBus or
|
|
// class observers to "poke" through and expose their presence.
|
|
delete this[ev];
|
|
}
|
|
},
|
|
_incr_: function (ev) {
|
|
if (this.hasOwnProperty(ev)) {
|
|
// if we already have listeners at this level, just increment the count...
|
|
++this[ev];
|
|
} else {
|
|
// otherwise, start the count at 1 (which hides whatever is in our prototype
|
|
// chain)...
|
|
this[ev] = 1;
|
|
}
|
|
}
|
|
};
|
|
|
|
proto.HasListeners = Observable.HasListeners = HasListeners;
|
|
|
|
Observable.createAlias({
|
|
/**
|
|
* @method
|
|
* Shorthand for {@link #addListener}.
|
|
* @inheritdoc Ext.util.Observable#addListener
|
|
*/
|
|
on: 'addListener',
|
|
/**
|
|
* @method
|
|
* Shorthand for {@link #removeListener}.
|
|
* @inheritdoc Ext.util.Observable#removeListener
|
|
*/
|
|
un: 'removeListener',
|
|
/**
|
|
* @method
|
|
* Shorthand for {@link #addManagedListener}.
|
|
* @inheritdoc Ext.util.Observable#addManagedListener
|
|
*/
|
|
mon: 'addManagedListener',
|
|
/**
|
|
* @method
|
|
* Shorthand for {@link #removeManagedListener}.
|
|
* @inheritdoc Ext.util.Observable#removeManagedListener
|
|
*/
|
|
mun: 'removeManagedListener'
|
|
});
|
|
|
|
//deprecated, will be removed in 5.0
|
|
Observable.observeClass = Observable.observe;
|
|
|
|
/**
|
|
* @member Ext
|
|
* @property {Ext.util.Observable} globalEvents
|
|
* An instance of `{@link Ext.util.Observable}` through which Ext fires global events.
|
|
*
|
|
* This Observable instance fires the following events:
|
|
*
|
|
* * **`idle`**
|
|
*
|
|
* Fires when an event handler finishes its run, just before returning to browser control.
|
|
*
|
|
* This includes DOM event handlers, Ajax (including JSONP) event handlers, and {@link Ext.util.TaskRunner TaskRunners}
|
|
*
|
|
* This can be useful for performing cleanup, or update tasks which need to happen only
|
|
* after all code in an event handler has been run, but which should not be executed in a timer
|
|
* due to the intervening browser reflow/repaint which would take place.
|
|
*
|
|
* * **`ready`**
|
|
*
|
|
* Fires when the DOM is ready, and all required classes have been loaded. Functionally
|
|
* the same as {@link Ext#onReady}, but must be called with the `single` option:
|
|
*
|
|
* Ext.on({
|
|
* ready: function() {
|
|
* console.log('document is ready!');
|
|
* },
|
|
* single: true
|
|
* });
|
|
*
|
|
* * **`resumelayouts`**
|
|
*
|
|
* Fires after global layout processing has been resumed in {@link Ext.AbstractComponent#resumeLayouts}.
|
|
*/
|
|
Ext.globalEvents = globalEvents = new Observable({
|
|
events: {
|
|
idle: Ext.EventManager.idleEvent,
|
|
ready: Ext.EventManager.readyEvent
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method on
|
|
* Shorthand for the {@link Ext.util.Observable#addListener} method of the
|
|
* {@link Ext#globalEvents} Observable instance.
|
|
* @inheritdoc Ext.util.Observable#addListener
|
|
*/
|
|
Ext.on = function() {
|
|
return globalEvents.addListener.apply(globalEvents, arguments);
|
|
};
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method
|
|
* Shorthand for the {@link Ext.util.Observable#removeListener} method of the
|
|
* {@link Ext#globalEvents} Observable instance.
|
|
* @inheritdoc Ext.util.Observable#removeListener
|
|
*/
|
|
Ext.un = function() {
|
|
return globalEvents.removeListener.apply(globalEvents, arguments);
|
|
};
|
|
|
|
// this is considered experimental (along with beforeMethod, afterMethod, removeMethodListener?)
|
|
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
|
|
// private
|
|
function getMethodEvent(method){
|
|
var e = (this.methodEvents = this.methodEvents || {})[method],
|
|
returnValue,
|
|
v,
|
|
cancel,
|
|
obj = this,
|
|
makeCall;
|
|
|
|
if (!e) {
|
|
this.methodEvents[method] = e = {};
|
|
e.originalFn = this[method];
|
|
e.methodName = method;
|
|
e.before = [];
|
|
e.after = [];
|
|
|
|
makeCall = function(fn, scope, args){
|
|
if((v = fn.apply(scope || obj, args)) !== undefined){
|
|
if (typeof v == 'object') {
|
|
if(v.returnValue !== undefined){
|
|
returnValue = v.returnValue;
|
|
}else{
|
|
returnValue = v;
|
|
}
|
|
cancel = !!v.cancel;
|
|
}
|
|
else
|
|
if (v === false) {
|
|
cancel = true;
|
|
}
|
|
else {
|
|
returnValue = v;
|
|
}
|
|
}
|
|
};
|
|
|
|
this[method] = function(){
|
|
var args = Array.prototype.slice.call(arguments, 0),
|
|
b, i, len;
|
|
returnValue = v = undefined;
|
|
cancel = false;
|
|
|
|
for(i = 0, len = e.before.length; i < len; i++){
|
|
b = e.before[i];
|
|
makeCall(b.fn, b.scope, args);
|
|
if (cancel) {
|
|
return returnValue;
|
|
}
|
|
}
|
|
|
|
if((v = e.originalFn.apply(obj, args)) !== undefined){
|
|
returnValue = v;
|
|
}
|
|
|
|
for(i = 0, len = e.after.length; i < len; i++){
|
|
b = e.after[i];
|
|
makeCall(b.fn, b.scope, args);
|
|
if (cancel) {
|
|
return returnValue;
|
|
}
|
|
}
|
|
return returnValue;
|
|
};
|
|
}
|
|
return e;
|
|
}
|
|
|
|
Ext.apply(proto, {
|
|
onClassMixedIn: prepareMixin,
|
|
|
|
// these are considered experimental
|
|
// allows for easier interceptor and sequences, including cancelling and overwriting the return value of the call
|
|
// adds an 'interceptor' called before the original method
|
|
beforeMethod : function(method, fn, scope){
|
|
getMethodEvent.call(this, method).before.push({
|
|
fn: fn,
|
|
scope: scope
|
|
});
|
|
},
|
|
|
|
// adds a 'sequence' called after the original method
|
|
afterMethod : function(method, fn, scope){
|
|
getMethodEvent.call(this, method).after.push({
|
|
fn: fn,
|
|
scope: scope
|
|
});
|
|
},
|
|
|
|
removeMethodListener: function(method, fn, scope){
|
|
var e = this.getMethodEvent(method),
|
|
i, len;
|
|
for(i = 0, len = e.before.length; i < len; i++){
|
|
if(e.before[i].fn == fn && e.before[i].scope == scope){
|
|
Ext.Array.erase(e.before, i, 1);
|
|
return;
|
|
}
|
|
}
|
|
for(i = 0, len = e.after.length; i < len; i++){
|
|
if(e.after[i].fn == fn && e.after[i].scope == scope){
|
|
Ext.Array.erase(e.after, i, 1);
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
toggleEventLogging: function(toggle) {
|
|
Ext.util.Observable[toggle ? 'capture' : 'releaseCapture'](this, function(en) {
|
|
if (Ext.isDefined(Ext.global.console)) {
|
|
Ext.global.console.log(en, arguments);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// @tag dom,core
|
|
// @require EventManager.js
|
|
// @define Ext.EventObject
|
|
|
|
/**
|
|
* @class Ext.EventObject
|
|
|
|
Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject
|
|
wraps the browser's native event-object normalizing cross-browser differences,
|
|
such as which mouse button is clicked, keys pressed, mechanisms to stop
|
|
event-propagation along with a method to prevent default actions from taking place.
|
|
|
|
For example:
|
|
|
|
function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
|
|
e.preventDefault();
|
|
var target = e.getTarget(); // same as t (the target HTMLElement)
|
|
...
|
|
}
|
|
|
|
var myDiv = {@link Ext#get Ext.get}("myDiv"); // get reference to an {@link Ext.Element}
|
|
myDiv.on( // 'on' is shorthand for addListener
|
|
"click", // perform an action on click of myDiv
|
|
handleClick // reference to the action handler
|
|
);
|
|
|
|
// other methods to do the same:
|
|
Ext.EventManager.on("myDiv", 'click', handleClick);
|
|
Ext.EventManager.addListener("myDiv", 'click', handleClick);
|
|
|
|
* @singleton
|
|
* @markdown
|
|
*/
|
|
Ext.define('Ext.EventObjectImpl', {
|
|
|
|
|
|
/** Key constant @type Number */
|
|
BACKSPACE: 8,
|
|
/** Key constant @type Number */
|
|
TAB: 9,
|
|
/** Key constant @type Number */
|
|
NUM_CENTER: 12,
|
|
/** Key constant @type Number */
|
|
ENTER: 13,
|
|
/** Key constant @type Number */
|
|
RETURN: 13,
|
|
/** Key constant @type Number */
|
|
SHIFT: 16,
|
|
/** Key constant @type Number */
|
|
CTRL: 17,
|
|
/** Key constant @type Number */
|
|
ALT: 18,
|
|
/** Key constant @type Number */
|
|
PAUSE: 19,
|
|
/** Key constant @type Number */
|
|
CAPS_LOCK: 20,
|
|
/** Key constant @type Number */
|
|
ESC: 27,
|
|
/** Key constant @type Number */
|
|
SPACE: 32,
|
|
/** Key constant @type Number */
|
|
PAGE_UP: 33,
|
|
/** Key constant @type Number */
|
|
PAGE_DOWN: 34,
|
|
/** Key constant @type Number */
|
|
END: 35,
|
|
/** Key constant @type Number */
|
|
HOME: 36,
|
|
/** Key constant @type Number */
|
|
LEFT: 37,
|
|
/** Key constant @type Number */
|
|
UP: 38,
|
|
/** Key constant @type Number */
|
|
RIGHT: 39,
|
|
/** Key constant @type Number */
|
|
DOWN: 40,
|
|
/** Key constant @type Number */
|
|
PRINT_SCREEN: 44,
|
|
/** Key constant @type Number */
|
|
INSERT: 45,
|
|
/** Key constant @type Number */
|
|
DELETE: 46,
|
|
/** Key constant @type Number */
|
|
ZERO: 48,
|
|
/** Key constant @type Number */
|
|
ONE: 49,
|
|
/** Key constant @type Number */
|
|
TWO: 50,
|
|
/** Key constant @type Number */
|
|
THREE: 51,
|
|
/** Key constant @type Number */
|
|
FOUR: 52,
|
|
/** Key constant @type Number */
|
|
FIVE: 53,
|
|
/** Key constant @type Number */
|
|
SIX: 54,
|
|
/** Key constant @type Number */
|
|
SEVEN: 55,
|
|
/** Key constant @type Number */
|
|
EIGHT: 56,
|
|
/** Key constant @type Number */
|
|
NINE: 57,
|
|
/** Key constant @type Number */
|
|
A: 65,
|
|
/** Key constant @type Number */
|
|
B: 66,
|
|
/** Key constant @type Number */
|
|
C: 67,
|
|
/** Key constant @type Number */
|
|
D: 68,
|
|
/** Key constant @type Number */
|
|
E: 69,
|
|
/** Key constant @type Number */
|
|
F: 70,
|
|
/** Key constant @type Number */
|
|
G: 71,
|
|
/** Key constant @type Number */
|
|
H: 72,
|
|
/** Key constant @type Number */
|
|
I: 73,
|
|
/** Key constant @type Number */
|
|
J: 74,
|
|
/** Key constant @type Number */
|
|
K: 75,
|
|
/** Key constant @type Number */
|
|
L: 76,
|
|
/** Key constant @type Number */
|
|
M: 77,
|
|
/** Key constant @type Number */
|
|
N: 78,
|
|
/** Key constant @type Number */
|
|
O: 79,
|
|
/** Key constant @type Number */
|
|
P: 80,
|
|
/** Key constant @type Number */
|
|
Q: 81,
|
|
/** Key constant @type Number */
|
|
R: 82,
|
|
/** Key constant @type Number */
|
|
S: 83,
|
|
/** Key constant @type Number */
|
|
T: 84,
|
|
/** Key constant @type Number */
|
|
U: 85,
|
|
/** Key constant @type Number */
|
|
V: 86,
|
|
/** Key constant @type Number */
|
|
W: 87,
|
|
/** Key constant @type Number */
|
|
X: 88,
|
|
/** Key constant @type Number */
|
|
Y: 89,
|
|
/** Key constant @type Number */
|
|
Z: 90,
|
|
/** Key constant @type Number */
|
|
CONTEXT_MENU: 93,
|
|
/** Key constant @type Number */
|
|
NUM_ZERO: 96,
|
|
/** Key constant @type Number */
|
|
NUM_ONE: 97,
|
|
/** Key constant @type Number */
|
|
NUM_TWO: 98,
|
|
/** Key constant @type Number */
|
|
NUM_THREE: 99,
|
|
/** Key constant @type Number */
|
|
NUM_FOUR: 100,
|
|
/** Key constant @type Number */
|
|
NUM_FIVE: 101,
|
|
/** Key constant @type Number */
|
|
NUM_SIX: 102,
|
|
/** Key constant @type Number */
|
|
NUM_SEVEN: 103,
|
|
/** Key constant @type Number */
|
|
NUM_EIGHT: 104,
|
|
/** Key constant @type Number */
|
|
NUM_NINE: 105,
|
|
/** Key constant @type Number */
|
|
NUM_MULTIPLY: 106,
|
|
/** Key constant @type Number */
|
|
NUM_PLUS: 107,
|
|
/** Key constant @type Number */
|
|
NUM_MINUS: 109,
|
|
/** Key constant @type Number */
|
|
NUM_PERIOD: 110,
|
|
/** Key constant @type Number */
|
|
NUM_DIVISION: 111,
|
|
/** Key constant @type Number */
|
|
F1: 112,
|
|
/** Key constant @type Number */
|
|
F2: 113,
|
|
/** Key constant @type Number */
|
|
F3: 114,
|
|
/** Key constant @type Number */
|
|
F4: 115,
|
|
/** Key constant @type Number */
|
|
F5: 116,
|
|
/** Key constant @type Number */
|
|
F6: 117,
|
|
/** Key constant @type Number */
|
|
F7: 118,
|
|
/** Key constant @type Number */
|
|
F8: 119,
|
|
/** Key constant @type Number */
|
|
F9: 120,
|
|
/** Key constant @type Number */
|
|
F10: 121,
|
|
/** Key constant @type Number */
|
|
F11: 122,
|
|
/** Key constant @type Number */
|
|
F12: 123,
|
|
/**
|
|
* The mouse wheel delta scaling factor. This value depends on browser version and OS and
|
|
* attempts to produce a similar scrolling experience across all platforms and browsers.
|
|
*
|
|
* To change this value:
|
|
*
|
|
* Ext.EventObjectImpl.prototype.WHEEL_SCALE = 72;
|
|
*
|
|
* @type Number
|
|
* @markdown
|
|
*/
|
|
WHEEL_SCALE: (function () {
|
|
var scale;
|
|
|
|
if (Ext.isGecko) {
|
|
// Firefox uses 3 on all platforms
|
|
scale = 3;
|
|
} else if (Ext.isMac) {
|
|
// Continuous scrolling devices have momentum and produce much more scroll than
|
|
// discrete devices on the same OS and browser. To make things exciting, Safari
|
|
// (and not Chrome) changed from small values to 120 (like IE).
|
|
|
|
if (Ext.isSafari && Ext.webKitVersion >= 532.0) {
|
|
// Safari changed the scrolling factor to match IE (for details see
|
|
// https://bugs.webkit.org/show_bug.cgi?id=24368). The WebKit version where this
|
|
// change was introduced was 532.0
|
|
// Detailed discussion:
|
|
// https://bugs.webkit.org/show_bug.cgi?id=29601
|
|
// http://trac.webkit.org/browser/trunk/WebKit/chromium/src/mac/WebInputEventFactory.mm#L1063
|
|
scale = 120;
|
|
} else {
|
|
// MS optical wheel mouse produces multiples of 12 which is close enough
|
|
// to help tame the speed of the continuous mice...
|
|
scale = 12;
|
|
}
|
|
|
|
// Momentum scrolling produces very fast scrolling, so increase the scale factor
|
|
// to help produce similar results cross platform. This could be even larger and
|
|
// it would help those mice, but other mice would become almost unusable as a
|
|
// result (since we cannot tell which device type is in use).
|
|
scale *= 3;
|
|
} else {
|
|
// IE, Opera and other Windows browsers use 120.
|
|
scale = 120;
|
|
}
|
|
|
|
return scale;
|
|
}()),
|
|
|
|
/**
|
|
* Simple click regex
|
|
* @private
|
|
*/
|
|
clickRe: /(dbl)?click/,
|
|
// safari keypress events for special keys return bad keycodes
|
|
safariKeys: {
|
|
3: 13, // enter
|
|
63234: 37, // left
|
|
63235: 39, // right
|
|
63232: 38, // up
|
|
63233: 40, // down
|
|
63276: 33, // page up
|
|
63277: 34, // page down
|
|
63272: 46, // delete
|
|
63273: 36, // home
|
|
63275: 35 // end
|
|
},
|
|
// normalize button clicks, don't see any way to feature detect this.
|
|
btnMap: Ext.isIE ? {
|
|
1: 0,
|
|
4: 1,
|
|
2: 2
|
|
} : {
|
|
0: 0,
|
|
1: 1,
|
|
2: 2
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} ctrlKey
|
|
* True if the control key was down during the event.
|
|
* In Mac this will also be true when meta key was down.
|
|
*/
|
|
/**
|
|
* @property {Boolean} altKey
|
|
* True if the alt key was down during the event.
|
|
*/
|
|
/**
|
|
* @property {Boolean} shiftKey
|
|
* True if the shift key was down during the event.
|
|
*/
|
|
|
|
constructor: function(event, freezeEvent){
|
|
if (event) {
|
|
this.setEvent(event.browserEvent || event, freezeEvent);
|
|
}
|
|
},
|
|
|
|
setEvent: function(event, freezeEvent){
|
|
var me = this, button, options;
|
|
|
|
if (event === me || (event && event.browserEvent)) { // already wrapped
|
|
return event;
|
|
}
|
|
me.browserEvent = event;
|
|
if (event) {
|
|
// normalize buttons
|
|
button = event.button ? me.btnMap[event.button] : (event.which ? event.which - 1 : -1);
|
|
if (me.clickRe.test(event.type) && button == -1) {
|
|
button = 0;
|
|
}
|
|
options = {
|
|
type: event.type,
|
|
button: button,
|
|
shiftKey: event.shiftKey,
|
|
// mac metaKey behaves like ctrlKey
|
|
ctrlKey: event.ctrlKey || event.metaKey || false,
|
|
altKey: event.altKey,
|
|
// in getKey these will be normalized for the mac
|
|
keyCode: event.keyCode,
|
|
charCode: event.charCode,
|
|
// cache the targets for the delayed and or buffered events
|
|
target: Ext.EventManager.getTarget(event),
|
|
relatedTarget: Ext.EventManager.getRelatedTarget(event),
|
|
currentTarget: event.currentTarget,
|
|
xy: (freezeEvent ? me.getXY() : null)
|
|
};
|
|
} else {
|
|
options = {
|
|
button: -1,
|
|
shiftKey: false,
|
|
ctrlKey: false,
|
|
altKey: false,
|
|
keyCode: 0,
|
|
charCode: 0,
|
|
target: null,
|
|
xy: [0, 0]
|
|
};
|
|
}
|
|
Ext.apply(me, options);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Stop the event (preventDefault and stopPropagation)
|
|
*/
|
|
stopEvent: function(){
|
|
this.stopPropagation();
|
|
this.preventDefault();
|
|
},
|
|
|
|
/**
|
|
* Prevents the browsers default handling of the event.
|
|
*/
|
|
preventDefault: function(){
|
|
if (this.browserEvent) {
|
|
Ext.EventManager.preventDefault(this.browserEvent);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Cancels bubbling of the event.
|
|
*/
|
|
stopPropagation: function(){
|
|
var browserEvent = this.browserEvent;
|
|
|
|
if (browserEvent) {
|
|
if (browserEvent.type == 'mousedown') {
|
|
Ext.EventManager.stoppedMouseDownEvent.fire(this);
|
|
}
|
|
Ext.EventManager.stopPropagation(browserEvent);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the character code for the event.
|
|
* @return {Number}
|
|
*/
|
|
getCharCode: function(){
|
|
return this.charCode || this.keyCode;
|
|
},
|
|
|
|
/**
|
|
* Returns a normalized keyCode for the event.
|
|
* @return {Number} The key code
|
|
*/
|
|
getKey: function(){
|
|
return this.normalizeKey(this.keyCode || this.charCode);
|
|
},
|
|
|
|
/**
|
|
* Normalize key codes across browsers
|
|
* @private
|
|
* @param {Number} key The key code
|
|
* @return {Number} The normalized code
|
|
*/
|
|
normalizeKey: function(key){
|
|
// can't feature detect this
|
|
return Ext.isWebKit ? (this.safariKeys[key] || key) : key;
|
|
},
|
|
|
|
/**
|
|
* Gets the x coordinate of the event.
|
|
* @return {Number}
|
|
* @deprecated 4.0 Replaced by {@link #getX}
|
|
*/
|
|
getPageX: function(){
|
|
return this.getX();
|
|
},
|
|
|
|
/**
|
|
* Gets the y coordinate of the event.
|
|
* @return {Number}
|
|
* @deprecated 4.0 Replaced by {@link #getY}
|
|
*/
|
|
getPageY: function(){
|
|
return this.getY();
|
|
},
|
|
|
|
/**
|
|
* Gets the x coordinate of the event.
|
|
* @return {Number}
|
|
*/
|
|
getX: function() {
|
|
return this.getXY()[0];
|
|
},
|
|
|
|
/**
|
|
* Gets the y coordinate of the event.
|
|
* @return {Number}
|
|
*/
|
|
getY: function() {
|
|
return this.getXY()[1];
|
|
},
|
|
|
|
/**
|
|
* Gets the page coordinates of the event.
|
|
* @return {Number[]} The xy values like [x, y]
|
|
*/
|
|
getXY: function() {
|
|
if (!this.xy) {
|
|
// same for XY
|
|
this.xy = Ext.EventManager.getPageXY(this.browserEvent);
|
|
}
|
|
return this.xy;
|
|
},
|
|
|
|
/**
|
|
* Gets the target for the event.
|
|
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
|
|
* @param {Number/HTMLElement} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
|
|
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
|
|
* @return {HTMLElement}
|
|
*/
|
|
getTarget : function(selector, maxDepth, returnEl){
|
|
if (selector) {
|
|
return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
|
|
}
|
|
return returnEl ? Ext.get(this.target) : this.target;
|
|
},
|
|
|
|
/**
|
|
* Gets the related target.
|
|
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
|
|
* @param {Number/HTMLElement} maxDepth (optional) The max depth to search as a number or element (defaults to 10 || document.body)
|
|
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
|
|
* @return {HTMLElement}
|
|
*/
|
|
getRelatedTarget : function(selector, maxDepth, returnEl){
|
|
if (selector && this.relatedTarget) {
|
|
return Ext.fly(this.relatedTarget).findParent(selector, maxDepth, returnEl);
|
|
}
|
|
return returnEl ? Ext.get(this.relatedTarget) : this.relatedTarget;
|
|
},
|
|
|
|
/**
|
|
* Correctly scales a given wheel delta.
|
|
* @param {Number} delta The delta value.
|
|
*/
|
|
correctWheelDelta : function (delta) {
|
|
var scale = this.WHEEL_SCALE,
|
|
ret = Math.round(delta / scale);
|
|
|
|
if (!ret && delta) {
|
|
ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Returns the mouse wheel deltas for this event.
|
|
* @return {Object} An object with "x" and "y" properties holding the mouse wheel deltas.
|
|
*/
|
|
getWheelDeltas : function () {
|
|
var me = this,
|
|
event = me.browserEvent,
|
|
dx = 0, dy = 0; // the deltas
|
|
|
|
if (Ext.isDefined(event.wheelDeltaX)) { // WebKit has both dimensions
|
|
dx = event.wheelDeltaX;
|
|
dy = event.wheelDeltaY;
|
|
} else if (event.wheelDelta) { // old WebKit and IE
|
|
dy = event.wheelDelta;
|
|
} else if (event.detail) { // Gecko
|
|
dy = -event.detail; // gecko is backwards
|
|
|
|
// Gecko sometimes returns really big values if the user changes settings to
|
|
// scroll a whole page per scroll
|
|
if (dy > 100) {
|
|
dy = 3;
|
|
} else if (dy < -100) {
|
|
dy = -3;
|
|
}
|
|
|
|
// Firefox 3.1 adds an axis field to the event to indicate direction of
|
|
// scroll. See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
|
|
if (Ext.isDefined(event.axis) && event.axis === event.HORIZONTAL_AXIS) {
|
|
dx = dy;
|
|
dy = 0;
|
|
}
|
|
}
|
|
|
|
return {
|
|
x: me.correctWheelDelta(dx),
|
|
y: me.correctWheelDelta(dy)
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Normalizes mouse wheel y-delta across browsers. To get x-delta information, use
|
|
* {@link #getWheelDeltas} instead.
|
|
* @return {Number} The mouse wheel y-delta
|
|
*/
|
|
getWheelDelta : function(){
|
|
var deltas = this.getWheelDeltas();
|
|
|
|
return deltas.y;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the target of this event is a child of el. Unless the allowEl parameter is set, it will return false if if the target is el.
|
|
* Example usage:<pre><code>
|
|
// Handle click on any child of an element
|
|
Ext.getBody().on('click', function(e){
|
|
if(e.within('some-el')){
|
|
alert('Clicked on a child of some-el!');
|
|
}
|
|
});
|
|
|
|
// Handle click directly on an element, ignoring clicks on child nodes
|
|
Ext.getBody().on('click', function(e,t){
|
|
if((t.id == 'some-el') && !e.within(t, true)){
|
|
alert('Clicked directly on some-el!');
|
|
}
|
|
});
|
|
</code></pre>
|
|
* @param {String/HTMLElement/Ext.Element} el The id, DOM element or Ext.Element to check
|
|
* @param {Boolean} [related] `true` to test if the related target is within el instead of the target
|
|
* @param {Boolean} [allowEl] `true` to also check if the passed element is the target or related target
|
|
* @return {Boolean}
|
|
*/
|
|
within : function(el, related, allowEl){
|
|
if(el){
|
|
var t = related ? this.getRelatedTarget() : this.getTarget(),
|
|
result;
|
|
|
|
if (t) {
|
|
result = Ext.fly(el, '_internal').contains(t);
|
|
if (!result && allowEl) {
|
|
result = t == Ext.getDom(el);
|
|
}
|
|
return result;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Checks if the key pressed was a "navigation" key
|
|
* @return {Boolean} True if the press is a navigation keypress
|
|
*/
|
|
isNavKeyPress : function(){
|
|
var me = this,
|
|
k = this.normalizeKey(me.keyCode);
|
|
|
|
return (k >= 33 && k <= 40) || // Page Up/Down, End, Home, Left, Up, Right, Down
|
|
k == me.RETURN ||
|
|
k == me.TAB ||
|
|
k == me.ESC;
|
|
},
|
|
|
|
/**
|
|
* Checks if the key pressed was a "special" key
|
|
* @return {Boolean} True if the press is a special keypress
|
|
*/
|
|
isSpecialKey : function(){
|
|
var k = this.normalizeKey(this.keyCode);
|
|
return (this.type == 'keypress' && this.ctrlKey) ||
|
|
this.isNavKeyPress() ||
|
|
(k == this.BACKSPACE) || // Backspace
|
|
(k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
|
|
(k >= 44 && k <= 46); // Print Screen, Insert, Delete
|
|
},
|
|
|
|
/**
|
|
* Returns a point object that consists of the object coordinates.
|
|
* @return {Ext.util.Point} point
|
|
*/
|
|
getPoint : function(){
|
|
var xy = this.getXY();
|
|
return new Ext.util.Point(xy[0], xy[1]);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the control, meta, shift or alt key was pressed during this event.
|
|
* @return {Boolean}
|
|
*/
|
|
hasModifier : function(){
|
|
return this.ctrlKey || this.altKey || this.shiftKey || this.metaKey;
|
|
},
|
|
|
|
/**
|
|
* Injects a DOM event using the data in this object and (optionally) a new target.
|
|
* This is a low-level technique and not likely to be used by application code. The
|
|
* currently supported event types are:
|
|
* <p><b>HTMLEvents</b></p>
|
|
* <ul>
|
|
* <li>load</li>
|
|
* <li>unload</li>
|
|
* <li>select</li>
|
|
* <li>change</li>
|
|
* <li>submit</li>
|
|
* <li>reset</li>
|
|
* <li>resize</li>
|
|
* <li>scroll</li>
|
|
* </ul>
|
|
* <p><b>MouseEvents</b></p>
|
|
* <ul>
|
|
* <li>click</li>
|
|
* <li>dblclick</li>
|
|
* <li>mousedown</li>
|
|
* <li>mouseup</li>
|
|
* <li>mouseover</li>
|
|
* <li>mousemove</li>
|
|
* <li>mouseout</li>
|
|
* </ul>
|
|
* <p><b>UIEvents</b></p>
|
|
* <ul>
|
|
* <li>focusin</li>
|
|
* <li>focusout</li>
|
|
* <li>activate</li>
|
|
* <li>focus</li>
|
|
* <li>blur</li>
|
|
* </ul>
|
|
* @param {Ext.Element/HTMLElement} target (optional) If specified, the target for the event. This
|
|
* is likely to be used when relaying a DOM event. If not specified, {@link #getTarget}
|
|
* is used to determine the target.
|
|
*/
|
|
injectEvent: (function () {
|
|
var API,
|
|
dispatchers = {}, // keyed by event type (e.g., 'mousedown')
|
|
crazyIEButtons;
|
|
|
|
// Good reference: http://developer.yahoo.com/yui/docs/UserAction.js.html
|
|
|
|
// IE9 has createEvent, but this code causes major problems with htmleditor (it
|
|
// blocks all mouse events and maybe more). TODO
|
|
|
|
if (!Ext.isIE9m && document.createEvent) { // if (DOM compliant)
|
|
API = {
|
|
createHtmlEvent: function (doc, type, bubbles, cancelable) {
|
|
var event = doc.createEvent('HTMLEvents');
|
|
|
|
event.initEvent(type, bubbles, cancelable);
|
|
return event;
|
|
},
|
|
|
|
createMouseEvent: function (doc, type, bubbles, cancelable, detail,
|
|
clientX, clientY, ctrlKey, altKey, shiftKey, metaKey,
|
|
button, relatedTarget) {
|
|
var event = doc.createEvent('MouseEvents'),
|
|
view = doc.defaultView || window;
|
|
|
|
if (event.initMouseEvent) {
|
|
event.initMouseEvent(type, bubbles, cancelable, view, detail,
|
|
clientX, clientY, clientX, clientY, ctrlKey, altKey,
|
|
shiftKey, metaKey, button, relatedTarget);
|
|
} else { // old Safari
|
|
event = doc.createEvent('UIEvents');
|
|
event.initEvent(type, bubbles, cancelable);
|
|
event.view = view;
|
|
event.detail = detail;
|
|
event.screenX = clientX;
|
|
event.screenY = clientY;
|
|
event.clientX = clientX;
|
|
event.clientY = clientY;
|
|
event.ctrlKey = ctrlKey;
|
|
event.altKey = altKey;
|
|
event.metaKey = metaKey;
|
|
event.shiftKey = shiftKey;
|
|
event.button = button;
|
|
event.relatedTarget = relatedTarget;
|
|
}
|
|
|
|
return event;
|
|
},
|
|
|
|
createUIEvent: function (doc, type, bubbles, cancelable, detail) {
|
|
var event = doc.createEvent('UIEvents'),
|
|
view = doc.defaultView || window;
|
|
|
|
event.initUIEvent(type, bubbles, cancelable, view, detail);
|
|
return event;
|
|
},
|
|
|
|
fireEvent: function (target, type, event) {
|
|
target.dispatchEvent(event);
|
|
},
|
|
|
|
fixTarget: function (target) {
|
|
// Safari3 doesn't have window.dispatchEvent()
|
|
if (target == window && !target.dispatchEvent) {
|
|
return document;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
};
|
|
} else if (document.createEventObject) { // else if (IE)
|
|
crazyIEButtons = { 0: 1, 1: 4, 2: 2 };
|
|
|
|
API = {
|
|
createHtmlEvent: function (doc, type, bubbles, cancelable) {
|
|
var event = doc.createEventObject();
|
|
event.bubbles = bubbles;
|
|
event.cancelable = cancelable;
|
|
return event;
|
|
},
|
|
|
|
createMouseEvent: function (doc, type, bubbles, cancelable, detail,
|
|
clientX, clientY, ctrlKey, altKey, shiftKey, metaKey,
|
|
button, relatedTarget) {
|
|
var event = doc.createEventObject();
|
|
event.bubbles = bubbles;
|
|
event.cancelable = cancelable;
|
|
event.detail = detail;
|
|
event.screenX = clientX;
|
|
event.screenY = clientY;
|
|
event.clientX = clientX;
|
|
event.clientY = clientY;
|
|
event.ctrlKey = ctrlKey;
|
|
event.altKey = altKey;
|
|
event.shiftKey = shiftKey;
|
|
event.metaKey = metaKey;
|
|
event.button = crazyIEButtons[button] || button;
|
|
event.relatedTarget = relatedTarget; // cannot assign to/fromElement
|
|
return event;
|
|
},
|
|
|
|
createUIEvent: function (doc, type, bubbles, cancelable, detail) {
|
|
var event = doc.createEventObject();
|
|
event.bubbles = bubbles;
|
|
event.cancelable = cancelable;
|
|
return event;
|
|
},
|
|
|
|
fireEvent: function (target, type, event) {
|
|
target.fireEvent('on' + type, event);
|
|
},
|
|
|
|
fixTarget: function (target) {
|
|
if (target == document) {
|
|
// IE6,IE7 thinks window==document and doesn't have window.fireEvent()
|
|
// IE6,IE7 cannot properly call document.fireEvent()
|
|
return document.documentElement;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
};
|
|
}
|
|
|
|
//----------------
|
|
// HTMLEvents
|
|
|
|
Ext.Object.each({
|
|
load: [false, false],
|
|
unload: [false, false],
|
|
select: [true, false],
|
|
change: [true, false],
|
|
submit: [true, true],
|
|
reset: [true, false],
|
|
resize: [true, false],
|
|
scroll: [true, false]
|
|
},
|
|
function (name, value) {
|
|
var bubbles = value[0], cancelable = value[1];
|
|
dispatchers[name] = function (targetEl, srcEvent) {
|
|
var e = API.createHtmlEvent(name, bubbles, cancelable);
|
|
API.fireEvent(targetEl, name, e);
|
|
};
|
|
});
|
|
|
|
//----------------
|
|
// MouseEvents
|
|
|
|
function createMouseEventDispatcher (type, detail) {
|
|
var cancelable = (type != 'mousemove');
|
|
return function (targetEl, srcEvent) {
|
|
var xy = srcEvent.getXY(),
|
|
e = API.createMouseEvent(targetEl.ownerDocument, type, true, cancelable,
|
|
detail, xy[0], xy[1], srcEvent.ctrlKey, srcEvent.altKey,
|
|
srcEvent.shiftKey, srcEvent.metaKey, srcEvent.button,
|
|
srcEvent.relatedTarget);
|
|
API.fireEvent(targetEl, type, e);
|
|
};
|
|
}
|
|
|
|
Ext.each(['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mousemove', 'mouseout'],
|
|
function (eventName) {
|
|
dispatchers[eventName] = createMouseEventDispatcher(eventName, 1);
|
|
});
|
|
|
|
//----------------
|
|
// UIEvents
|
|
|
|
Ext.Object.each({
|
|
focusin: [true, false],
|
|
focusout: [true, false],
|
|
activate: [true, true],
|
|
focus: [false, false],
|
|
blur: [false, false]
|
|
},
|
|
function (name, value) {
|
|
var bubbles = value[0], cancelable = value[1];
|
|
dispatchers[name] = function (targetEl, srcEvent) {
|
|
var e = API.createUIEvent(targetEl.ownerDocument, name, bubbles, cancelable, 1);
|
|
API.fireEvent(targetEl, name, e);
|
|
};
|
|
});
|
|
|
|
//---------
|
|
if (!API) {
|
|
// not even sure what ancient browsers fall into this category...
|
|
|
|
dispatchers = {}; // never mind all those we just built :P
|
|
|
|
API = {
|
|
fixTarget: Ext.identityFn
|
|
};
|
|
}
|
|
|
|
function cannotInject (target, srcEvent) {
|
|
}
|
|
|
|
return function (target) {
|
|
var me = this,
|
|
dispatcher = dispatchers[me.type] || cannotInject,
|
|
t = target ? (target.dom || target) : me.getTarget();
|
|
|
|
t = API.fixTarget(t);
|
|
dispatcher(t, me);
|
|
};
|
|
}()) // call to produce method
|
|
|
|
}, function() {
|
|
|
|
Ext.EventObject = new Ext.EventObjectImpl();
|
|
|
|
});
|
|
|
|
|
|
// @tag dom,core
|
|
// @require ../EventObject.js
|
|
|
|
/**
|
|
* @class Ext.dom.AbstractQuery
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.dom.AbstractQuery', {
|
|
/**
|
|
* Selects a group of elements.
|
|
* @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
|
|
* @param {HTMLElement/String} [root] The start of the query (defaults to document).
|
|
* @return {HTMLElement[]} An Array of DOM elements which match the selector. If there are
|
|
* no matches, and empty Array is returned.
|
|
*/
|
|
select: function(q, root) {
|
|
var results = [],
|
|
nodes,
|
|
i,
|
|
j,
|
|
qlen,
|
|
nlen;
|
|
|
|
root = root || document;
|
|
|
|
if (typeof root == 'string') {
|
|
root = document.getElementById(root);
|
|
}
|
|
|
|
q = q.split(",");
|
|
|
|
for (i = 0,qlen = q.length; i < qlen; i++) {
|
|
if (typeof q[i] == 'string') {
|
|
|
|
//support for node attribute selection
|
|
if (typeof q[i][0] == '@') {
|
|
nodes = root.getAttributeNode(q[i].substring(1));
|
|
results.push(nodes);
|
|
} else {
|
|
nodes = root.querySelectorAll(q[i]);
|
|
|
|
for (j = 0,nlen = nodes.length; j < nlen; j++) {
|
|
results.push(nodes[j]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return results;
|
|
},
|
|
|
|
/**
|
|
* Selects a single element.
|
|
* @param {String} selector The selector/xpath query
|
|
* @param {HTMLElement/String} [root] The start of the query (defaults to document).
|
|
* @return {HTMLElement} The DOM element which matched the selector.
|
|
*/
|
|
selectNode: function(q, root) {
|
|
return this.select(q, root)[0];
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String/HTMLElement/Array} el An element id, element or array of elements
|
|
* @param {String} selector The simple selector to test
|
|
* @return {Boolean}
|
|
*/
|
|
is: function(el, q) {
|
|
if (typeof el == "string") {
|
|
el = document.getElementById(el);
|
|
}
|
|
return this.select(q).indexOf(el) !== -1;
|
|
}
|
|
|
|
});
|
|
|
|
// @tag dom,core
|
|
// @require AbstractQuery.js
|
|
|
|
/**
|
|
* Abstract base class for {@link Ext.dom.Helper}.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.dom.AbstractHelper', {
|
|
emptyTags : /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
|
|
confRe : /^(?:tag|children|cn|html|tpl|tplData)$/i,
|
|
endRe : /end/i,
|
|
styleSepRe: /\s*(?::|;)\s*/,
|
|
|
|
// Since cls & for are reserved words, we need to transform them
|
|
attributeTransform: { cls : 'class', htmlFor : 'for' },
|
|
|
|
closeTags: {},
|
|
|
|
decamelizeName : (function () {
|
|
var camelCaseRe = /([a-z])([A-Z])/g,
|
|
cache = {};
|
|
|
|
function decamel (match, p1, p2) {
|
|
return p1 + '-' + p2.toLowerCase();
|
|
}
|
|
|
|
return function (s) {
|
|
return cache[s] || (cache[s] = s.replace(camelCaseRe, decamel));
|
|
};
|
|
}()),
|
|
|
|
generateMarkup: function(spec, buffer) {
|
|
var me = this,
|
|
specType = typeof spec,
|
|
attr, val, tag, i, closeTags;
|
|
|
|
if (specType == "string" || specType == "number") {
|
|
buffer.push(spec);
|
|
} else if (Ext.isArray(spec)) {
|
|
for (i = 0; i < spec.length; i++) {
|
|
if (spec[i]) {
|
|
me.generateMarkup(spec[i], buffer);
|
|
}
|
|
}
|
|
} else {
|
|
tag = spec.tag || 'div';
|
|
buffer.push('<', tag);
|
|
|
|
for (attr in spec) {
|
|
if (spec.hasOwnProperty(attr)) {
|
|
val = spec[attr];
|
|
if (!me.confRe.test(attr)) {
|
|
if (typeof val == "object") {
|
|
buffer.push(' ', attr, '="');
|
|
me.generateStyles(val, buffer).push('"');
|
|
} else {
|
|
buffer.push(' ', me.attributeTransform[attr] || attr, '="', val, '"');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Now either just close the tag or try to add children and close the tag.
|
|
if (me.emptyTags.test(tag)) {
|
|
buffer.push('/>');
|
|
} else {
|
|
buffer.push('>');
|
|
|
|
// Apply the tpl html, and cn specifications
|
|
if ((val = spec.tpl)) {
|
|
val.applyOut(spec.tplData, buffer);
|
|
}
|
|
if ((val = spec.html)) {
|
|
buffer.push(val);
|
|
}
|
|
if ((val = spec.cn || spec.children)) {
|
|
me.generateMarkup(val, buffer);
|
|
}
|
|
|
|
// we generate a lot of close tags, so cache them rather than push 3 parts
|
|
closeTags = me.closeTags;
|
|
buffer.push(closeTags[tag] || (closeTags[tag] = '</' + tag + '>'));
|
|
}
|
|
}
|
|
|
|
return buffer;
|
|
},
|
|
|
|
/**
|
|
* Converts the styles from the given object to text. The styles are CSS style names
|
|
* with their associated value.
|
|
*
|
|
* The basic form of this method returns a string:
|
|
*
|
|
* var s = Ext.DomHelper.generateStyles({
|
|
* backgroundColor: 'red'
|
|
* });
|
|
*
|
|
* // s = 'background-color:red;'
|
|
*
|
|
* Alternatively, this method can append to an output array.
|
|
*
|
|
* var buf = [];
|
|
*
|
|
* ...
|
|
*
|
|
* Ext.DomHelper.generateStyles({
|
|
* backgroundColor: 'red'
|
|
* }, buf);
|
|
*
|
|
* In this case, the style text is pushed on to the array and the array is returned.
|
|
*
|
|
* @param {Object} styles The object describing the styles.
|
|
* @param {String[]} [buffer] The output buffer.
|
|
* @return {String/String[]} If buffer is passed, it is returned. Otherwise the style
|
|
* string is returned.
|
|
*/
|
|
generateStyles: function (styles, buffer) {
|
|
var a = buffer || [],
|
|
name;
|
|
|
|
for (name in styles) {
|
|
if (styles.hasOwnProperty(name)) {
|
|
a.push(this.decamelizeName(name), ':', styles[name], ';');
|
|
}
|
|
}
|
|
|
|
return buffer || a.join('');
|
|
},
|
|
|
|
/**
|
|
* Returns the markup for the passed Element(s) config.
|
|
* @param {Object} spec The DOM object spec (and children)
|
|
* @return {String}
|
|
*/
|
|
markup: function(spec) {
|
|
if (typeof spec == "string") {
|
|
return spec;
|
|
}
|
|
|
|
var buf = this.generateMarkup(spec, []);
|
|
return buf.join('');
|
|
},
|
|
|
|
/**
|
|
* Applies a style specification to an element.
|
|
* @param {String/HTMLElement} el The element to apply styles to
|
|
* @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
|
|
* a function which returns such a specification.
|
|
*/
|
|
applyStyles: function(el, styles) {
|
|
if (styles) {
|
|
var i = 0,
|
|
len;
|
|
|
|
el = Ext.fly(el, '_applyStyles');
|
|
if (typeof styles == 'function') {
|
|
styles = styles.call();
|
|
}
|
|
if (typeof styles == 'string') {
|
|
styles = Ext.util.Format.trim(styles).split(this.styleSepRe);
|
|
for (len = styles.length; i < len;) {
|
|
el.setStyle(styles[i++], styles[i++]);
|
|
}
|
|
} else if (Ext.isObject(styles)) {
|
|
el.setStyle(styles);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts an HTML fragment into the DOM.
|
|
* @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
|
|
*
|
|
* For example take the following HTML: `<div>Contents</div>`
|
|
*
|
|
* Using different `where` values inserts element to the following places:
|
|
*
|
|
* - beforeBegin: `<HERE><div>Contents</div>`
|
|
* - afterBegin: `<div><HERE>Contents</div>`
|
|
* - beforeEnd: `<div>Contents<HERE></div>`
|
|
* - afterEnd: `<div>Contents</div><HERE>`
|
|
*
|
|
* @param {HTMLElement/TextNode} el The context element
|
|
* @param {String} html The HTML fragment
|
|
* @return {HTMLElement} The new node
|
|
*/
|
|
insertHtml: function(where, el, html) {
|
|
var hash = {},
|
|
setStart,
|
|
range,
|
|
frag,
|
|
rangeEl;
|
|
|
|
where = where.toLowerCase();
|
|
|
|
// add these here because they are used in both branches of the condition.
|
|
hash['beforebegin'] = ['BeforeBegin', 'previousSibling'];
|
|
hash['afterend'] = ['AfterEnd', 'nextSibling'];
|
|
|
|
range = el.ownerDocument.createRange();
|
|
setStart = 'setStart' + (this.endRe.test(where) ? 'After' : 'Before');
|
|
if (hash[where]) {
|
|
range[setStart](el);
|
|
frag = range.createContextualFragment(html);
|
|
el.parentNode.insertBefore(frag, where == 'beforebegin' ? el : el.nextSibling);
|
|
return el[(where == 'beforebegin' ? 'previous' : 'next') + 'Sibling'];
|
|
}
|
|
else {
|
|
rangeEl = (where == 'afterbegin' ? 'first' : 'last') + 'Child';
|
|
if (el.firstChild) {
|
|
range[setStart](el[rangeEl]);
|
|
frag = range.createContextualFragment(html);
|
|
if (where == 'afterbegin') {
|
|
el.insertBefore(frag, el.firstChild);
|
|
}
|
|
else {
|
|
el.appendChild(frag);
|
|
}
|
|
}
|
|
else {
|
|
el.innerHTML = html;
|
|
}
|
|
return el[rangeEl];
|
|
}
|
|
|
|
throw 'Illegal insertion point -> "' + where + '"';
|
|
},
|
|
|
|
/**
|
|
* Creates new DOM element(s) and inserts them before el.
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
|
|
* @param {Boolean} [returnElement] true to return a Ext.Element
|
|
* @return {HTMLElement/Ext.Element} The new node
|
|
*/
|
|
insertBefore: function(el, o, returnElement) {
|
|
return this.doInsert(el, o, returnElement, 'beforebegin');
|
|
},
|
|
|
|
/**
|
|
* Creates new DOM element(s) and inserts them after el.
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object} o The DOM object spec (and children)
|
|
* @param {Boolean} [returnElement] true to return a Ext.Element
|
|
* @return {HTMLElement/Ext.Element} The new node
|
|
*/
|
|
insertAfter: function(el, o, returnElement) {
|
|
return this.doInsert(el, o, returnElement, 'afterend', 'nextSibling');
|
|
},
|
|
|
|
/**
|
|
* Creates new DOM element(s) and inserts them as the first child of el.
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
|
|
* @param {Boolean} [returnElement] true to return a Ext.Element
|
|
* @return {HTMLElement/Ext.Element} The new node
|
|
*/
|
|
insertFirst: function(el, o, returnElement) {
|
|
return this.doInsert(el, o, returnElement, 'afterbegin', 'firstChild');
|
|
},
|
|
|
|
/**
|
|
* Creates new DOM element(s) and appends them to el.
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
|
|
* @param {Boolean} [returnElement] true to return a Ext.Element
|
|
* @return {HTMLElement/Ext.Element} The new node
|
|
*/
|
|
append: function(el, o, returnElement) {
|
|
return this.doInsert(el, o, returnElement, 'beforeend', '', true);
|
|
},
|
|
|
|
/**
|
|
* Creates new DOM element(s) and overwrites the contents of el with them.
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
|
|
* @param {Boolean} [returnElement] true to return a Ext.Element
|
|
* @return {HTMLElement/Ext.Element} The new node
|
|
*/
|
|
overwrite: function(el, o, returnElement) {
|
|
el = Ext.getDom(el);
|
|
el.innerHTML = this.markup(o);
|
|
return returnElement ? Ext.get(el.firstChild) : el.firstChild;
|
|
},
|
|
|
|
doInsert: function(el, o, returnElement, pos, sibling, append) {
|
|
var newNode = this.insertHtml(pos, Ext.getDom(el), this.markup(o));
|
|
return returnElement ? Ext.get(newNode, true) : newNode;
|
|
}
|
|
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.AbstractElement_static', {
|
|
override: 'Ext.dom.AbstractElement',
|
|
|
|
inheritableStatics: {
|
|
unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
|
|
camelRe: /(-[a-z])/gi,
|
|
msRe: /^-ms-/,
|
|
cssRe: /([a-z0-9\-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*)?;?/gi,
|
|
opacityRe: /alpha\(opacity=(.*)\)/i,
|
|
propertyCache: {},
|
|
defaultUnit : "px",
|
|
borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
|
|
paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
|
|
margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
|
|
/**
|
|
* Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
|
|
* @param size {Object} The size to set
|
|
* @param units {String} The units to append to a numeric size value
|
|
* @private
|
|
* @static
|
|
*/
|
|
addUnits: function(size, units) {
|
|
// Most common case first: Size is set to a number
|
|
if (typeof size == 'number') {
|
|
return size + (units || this.defaultUnit || 'px');
|
|
}
|
|
|
|
// Size set to a value which means "auto"
|
|
if (size === "" || size == "auto" || size === undefined || size === null) {
|
|
return size || '';
|
|
}
|
|
|
|
// Otherwise, warn if it's not a valid CSS measurement
|
|
if (!this.unitRe.test(size)) {
|
|
return size || '';
|
|
}
|
|
|
|
return size;
|
|
},
|
|
|
|
/**
|
|
* @static
|
|
* @private
|
|
*/
|
|
isAncestor: function(p, c) {
|
|
var ret = false;
|
|
|
|
p = Ext.getDom(p);
|
|
c = Ext.getDom(c);
|
|
if (p && c) {
|
|
if (p.contains) {
|
|
return p.contains(c);
|
|
} else if (p.compareDocumentPosition) {
|
|
return !!(p.compareDocumentPosition(c) & 16);
|
|
} else {
|
|
while ((c = c.parentNode)) {
|
|
ret = c == p || ret;
|
|
}
|
|
}
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
|
|
* (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
|
|
* @static
|
|
* @param {Number/String} box The encoded margins
|
|
* @return {Object} An object with margin sizes for top, right, bottom and left
|
|
*/
|
|
parseBox: function(box) {
|
|
box = box || 0;
|
|
|
|
var type = typeof box,
|
|
parts,
|
|
ln;
|
|
|
|
if (type === 'number') {
|
|
return {
|
|
top : box,
|
|
right : box,
|
|
bottom: box,
|
|
left : box
|
|
};
|
|
} else if (type !== 'string') {
|
|
// If not a number or a string, assume we've been given a box config.
|
|
return box;
|
|
}
|
|
|
|
parts = box.split(' ');
|
|
ln = parts.length;
|
|
|
|
if (ln == 1) {
|
|
parts[1] = parts[2] = parts[3] = parts[0];
|
|
} else if (ln == 2) {
|
|
parts[2] = parts[0];
|
|
parts[3] = parts[1];
|
|
} else if (ln == 3) {
|
|
parts[3] = parts[1];
|
|
}
|
|
|
|
return {
|
|
top :parseFloat(parts[0]) || 0,
|
|
right :parseFloat(parts[1]) || 0,
|
|
bottom:parseFloat(parts[2]) || 0,
|
|
left :parseFloat(parts[3]) || 0
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
|
|
* (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
|
|
* @static
|
|
* @param {Number/String/Object} box The encoded margins, or an object with top, right,
|
|
* bottom, and left properties
|
|
* @param {String} units The type of units to add
|
|
* @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
|
|
*/
|
|
unitizeBox: function(box, units) {
|
|
var a = this.addUnits,
|
|
b = this.parseBox(box);
|
|
|
|
return a(b.top, units) + ' ' +
|
|
a(b.right, units) + ' ' +
|
|
a(b.bottom, units) + ' ' +
|
|
a(b.left, units);
|
|
|
|
},
|
|
|
|
// private
|
|
camelReplaceFn: function(m, a) {
|
|
return a.charAt(1).toUpperCase();
|
|
},
|
|
|
|
/**
|
|
* Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
|
|
* For example:
|
|
*
|
|
* - border-width -> borderWidth
|
|
* - padding-top -> paddingTop
|
|
*
|
|
* @static
|
|
* @param {String} prop The property to normalize
|
|
* @return {String} The normalized string
|
|
*/
|
|
normalize: function(prop) {
|
|
// TODO: Mobile optimization?
|
|
if (prop == 'float') {
|
|
prop = Ext.supports.Float ? 'cssFloat' : 'styleFloat';
|
|
}
|
|
// For '-ms-foo' we need msFoo
|
|
return this.propertyCache[prop] || (this.propertyCache[prop] = prop.replace(this.msRe, 'ms-').replace(this.camelRe, this.camelReplaceFn));
|
|
},
|
|
|
|
/**
|
|
* Retrieves the document height
|
|
* @static
|
|
* @return {Number} documentHeight
|
|
*/
|
|
getDocumentHeight: function() {
|
|
return Math.max(!Ext.isStrict ? document.body.scrollHeight : document.documentElement.scrollHeight, this.getViewportHeight());
|
|
},
|
|
|
|
/**
|
|
* Retrieves the document width
|
|
* @static
|
|
* @return {Number} documentWidth
|
|
*/
|
|
getDocumentWidth: function() {
|
|
return Math.max(!Ext.isStrict ? document.body.scrollWidth : document.documentElement.scrollWidth, this.getViewportWidth());
|
|
},
|
|
|
|
/**
|
|
* Retrieves the viewport height of the window.
|
|
* @static
|
|
* @return {Number} viewportHeight
|
|
*/
|
|
getViewportHeight: function(){
|
|
return window.innerHeight;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the viewport width of the window.
|
|
* @static
|
|
* @return {Number} viewportWidth
|
|
*/
|
|
getViewportWidth: function() {
|
|
return window.innerWidth;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the viewport size of the window.
|
|
* @static
|
|
* @return {Object} object containing width and height properties
|
|
*/
|
|
getViewSize: function() {
|
|
return {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Retrieves the current orientation of the window. This is calculated by
|
|
* determing if the height is greater than the width.
|
|
* @static
|
|
* @return {String} Orientation of window: 'portrait' or 'landscape'
|
|
*/
|
|
getOrientation: function() {
|
|
if (Ext.supports.OrientationChange) {
|
|
return (window.orientation == 0) ? 'portrait' : 'landscape';
|
|
}
|
|
|
|
return (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
|
|
},
|
|
|
|
/**
|
|
* Returns the top Element that is located at the passed coordinates
|
|
* @static
|
|
* @param {Number} x The x coordinate
|
|
* @param {Number} y The y coordinate
|
|
* @return {String} The found Element
|
|
*/
|
|
fromPoint: function(x, y) {
|
|
return Ext.get(document.elementFromPoint(x, y));
|
|
},
|
|
|
|
/**
|
|
* Converts a CSS string into an object with a property for each style.
|
|
*
|
|
* The sample code below would return an object with 2 properties, one
|
|
* for background-color and one for color.
|
|
*
|
|
* var css = 'background-color: red;color: blue; ';
|
|
* console.log(Ext.dom.Element.parseStyles(css));
|
|
*
|
|
* @static
|
|
* @param {String} styles A CSS string
|
|
* @return {Object} styles
|
|
*/
|
|
parseStyles: function(styles){
|
|
var out = {},
|
|
cssRe = this.cssRe,
|
|
matches;
|
|
|
|
if (styles) {
|
|
// Since we're using the g flag on the regex, we need to set the lastIndex.
|
|
// This automatically happens on some implementations, but not others, see:
|
|
// http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
|
|
// http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
|
|
cssRe.lastIndex = 0;
|
|
while ((matches = cssRe.exec(styles))) {
|
|
out[matches[1]] = matches[2]||'';
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
}
|
|
},
|
|
function () {
|
|
var doc = document,
|
|
activeElement = null,
|
|
isCSS1 = doc.compatMode == "CSS1Compat";
|
|
|
|
// If the browser does not support document.activeElement we need some assistance.
|
|
// This covers old Safari 3.2 (4.0 added activeElement along with just about all
|
|
// other browsers). We need this support to handle issues with old Safari.
|
|
if (!('activeElement' in doc) && doc.addEventListener) {
|
|
doc.addEventListener('focus',
|
|
function (ev) {
|
|
if (ev && ev.target) {
|
|
activeElement = (ev.target == doc) ? null : ev.target;
|
|
}
|
|
}, true);
|
|
}
|
|
|
|
/*
|
|
* Helper function to create the function that will restore the selection.
|
|
*/
|
|
function makeSelectionRestoreFn (activeEl, start, end) {
|
|
return function () {
|
|
activeEl.selectionStart = start;
|
|
activeEl.selectionEnd = end;
|
|
};
|
|
}
|
|
|
|
this.addInheritableStatics({
|
|
/**
|
|
* Returns the active element in the DOM. If the browser supports activeElement
|
|
* on the document, this is returned. If not, the focus is tracked and the active
|
|
* element is maintained internally.
|
|
* @return {HTMLElement} The active (focused) element in the document.
|
|
*/
|
|
getActiveElement: function () {
|
|
var active;
|
|
// In IE 6/7, calling activeElement can sometimes throw an Unspecified Error,
|
|
// so we need to wrap it in a try catch
|
|
|
|
try {
|
|
active = doc.activeElement;
|
|
} catch(e) {}
|
|
|
|
// Default to the body if we can't find anything
|
|
// https://developer.mozilla.org/en-US/docs/DOM/document.activeElement
|
|
active = active || activeElement;
|
|
if (!active) {
|
|
active = activeElement = document.body;
|
|
}
|
|
return active;
|
|
},
|
|
|
|
/**
|
|
* Creates a function to call to clean up problems with the work-around for the
|
|
* WebKit RightMargin bug. The work-around is to add "display: 'inline-block'" to
|
|
* the element before calling getComputedStyle and then to restore its original
|
|
* display value. The problem with this is that it corrupts the selection of an
|
|
* INPUT or TEXTAREA element (as in the "I-beam" goes away but ths focus remains).
|
|
* To cleanup after this, we need to capture the selection of any such element and
|
|
* then restore it after we have restored the display style.
|
|
*
|
|
* @param {Ext.dom.Element} target The top-most element being adjusted.
|
|
* @private
|
|
*/
|
|
getRightMarginFixCleaner: function (target) {
|
|
var supports = Ext.supports,
|
|
hasInputBug = supports.DisplayChangeInputSelectionBug,
|
|
hasTextAreaBug = supports.DisplayChangeTextAreaSelectionBug,
|
|
activeEl,
|
|
tag,
|
|
start,
|
|
end;
|
|
|
|
if (hasInputBug || hasTextAreaBug) {
|
|
activeEl = doc.activeElement || activeElement; // save a call
|
|
tag = activeEl && activeEl.tagName;
|
|
|
|
if ((hasTextAreaBug && tag == 'TEXTAREA') ||
|
|
(hasInputBug && tag == 'INPUT' && activeEl.type == 'text')) {
|
|
if (Ext.dom.Element.isAncestor(target, activeEl)) {
|
|
start = activeEl.selectionStart;
|
|
end = activeEl.selectionEnd;
|
|
|
|
if (Ext.isNumber(start) && Ext.isNumber(end)) { // to be safe...
|
|
// We don't create the raw closure here inline because that
|
|
// will be costly even if we don't want to return it (nested
|
|
// function decls and exprs are often instantiated on entry
|
|
// regardless of whether execution ever reaches them):
|
|
return makeSelectionRestoreFn(activeEl, start, end);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return Ext.emptyFn; // avoid special cases, just return a nop
|
|
},
|
|
|
|
getViewWidth: function(full) {
|
|
return full ? Ext.dom.Element.getDocumentWidth() : Ext.dom.Element.getViewportWidth();
|
|
},
|
|
|
|
getViewHeight: function(full) {
|
|
return full ? Ext.dom.Element.getDocumentHeight() : Ext.dom.Element.getViewportHeight();
|
|
},
|
|
|
|
getDocumentHeight: function() {
|
|
return Math.max(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, Ext.dom.Element.getViewportHeight());
|
|
},
|
|
|
|
getDocumentWidth: function() {
|
|
return Math.max(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, Ext.dom.Element.getViewportWidth());
|
|
},
|
|
|
|
getViewportHeight: function(){
|
|
return Ext.isIE9m ?
|
|
(Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
|
|
self.innerHeight;
|
|
},
|
|
|
|
getViewportWidth: function() {
|
|
return (!Ext.isStrict && !Ext.isOpera) ? doc.body.clientWidth :
|
|
Ext.isIE9m ? doc.documentElement.clientWidth : self.innerWidth;
|
|
},
|
|
|
|
/**
|
|
* Serializes a DOM form into a url encoded string
|
|
* @param {Object} form The form
|
|
* @return {String} The url encoded form
|
|
*/
|
|
serializeForm: function(form) {
|
|
var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
|
|
hasSubmit = false,
|
|
encoder = encodeURIComponent,
|
|
data = '',
|
|
eLen = fElements.length,
|
|
element, name, type, options, hasValue, e,
|
|
o, oLen, opt;
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
element = fElements[e];
|
|
name = element.name;
|
|
type = element.type;
|
|
options = element.options;
|
|
|
|
if (!element.disabled && name) {
|
|
if (/select-(one|multiple)/i.test(type)) {
|
|
oLen = options.length;
|
|
for (o = 0; o < oLen; o++) {
|
|
opt = options[o];
|
|
if (opt.selected) {
|
|
hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
|
|
data += Ext.String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
|
|
}
|
|
}
|
|
} else if (!(/file|undefined|reset|button/i.test(type))) {
|
|
if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
|
|
data += encoder(name) + '=' + encoder(element.value) + '&';
|
|
hasSubmit = /submit/i.test(type);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return data.substr(0, data.length - 1);
|
|
}
|
|
});
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.AbstractElement_insertion', {
|
|
override: 'Ext.dom.AbstractElement',
|
|
|
|
/**
|
|
* Appends the passed element(s) to this element
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The id or element to insert or a DomHelper config
|
|
* The id of the node, a DOM Node or an existing Element.
|
|
* @param {Boolean} [returnDom=false] True to return the raw DOM element instead of Ext.dom.AbstractElement
|
|
* @return {Ext.dom.AbstractElement} The inserted Element.
|
|
*/
|
|
appendChild: function(el, returnDom) {
|
|
var me = this,
|
|
insertEl,
|
|
eLen, e, oldUseDom;
|
|
|
|
if (el.nodeType || el.dom || typeof el == 'string') { // element
|
|
el = Ext.getDom(el);
|
|
me.dom.appendChild(el);
|
|
return !returnDom ? Ext.get(el) : el;
|
|
} else if (el.length) {
|
|
// append all elements to a documentFragment
|
|
insertEl = Ext.fly(document.createDocumentFragment(), '_internal');
|
|
eLen = el.length;
|
|
|
|
// DocumentFragments cannot accept innerHTML
|
|
Ext.DomHelper.useDom = true;
|
|
for (e = 0; e < eLen; e++) {
|
|
insertEl.appendChild(el[e], returnDom);
|
|
}
|
|
Ext.DomHelper.useDom = oldUseDom;
|
|
me.dom.appendChild(insertEl.dom);
|
|
return returnDom ? insertEl.dom : insertEl;
|
|
}
|
|
else { // dh config
|
|
return me.createChild(el, null, returnDom);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Appends this element to the passed element
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement} el The new parent element.
|
|
* The id of the node, a DOM Node or an existing Element.
|
|
* @return {Ext.dom.AbstractElement} This element
|
|
*/
|
|
appendTo: function(el) {
|
|
Ext.getDom(el).appendChild(this.dom);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Inserts this element before the passed element in the DOM
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement} el The element before which this element will be inserted.
|
|
* The id of the node, a DOM Node or an existing Element.
|
|
* @return {Ext.dom.AbstractElement} This element
|
|
*/
|
|
insertBefore: function(el) {
|
|
el = Ext.getDom(el);
|
|
el.parentNode.insertBefore(this.dom, el);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Inserts this element after the passed element in the DOM
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement} el The element to insert after.
|
|
* The id of the node, a DOM Node or an existing Element.
|
|
* @return {Ext.dom.AbstractElement} This element
|
|
*/
|
|
insertAfter: function(el) {
|
|
el = Ext.getDom(el);
|
|
el.parentNode.insertBefore(this.dom, el.nextSibling);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Inserts (or creates) an element (or DomHelper config) as the first child of this element
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The id or element to insert or a DomHelper config
|
|
* to create and insert
|
|
* @return {Ext.dom.AbstractElement} The new child
|
|
*/
|
|
insertFirst: function(el, returnDom) {
|
|
el = el || {};
|
|
if (el.nodeType || el.dom || typeof el == 'string') { // element
|
|
el = Ext.getDom(el);
|
|
this.dom.insertBefore(el, this.dom.firstChild);
|
|
return !returnDom ? Ext.get(el) : el;
|
|
}
|
|
else { // dh config
|
|
return this.createChild(el, this.dom.firstChild, returnDom);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement/Object/Array} el The id, element to insert or a DomHelper config
|
|
* to create and insert *or* an array of any of those.
|
|
* @param {String} [where='before'] 'before' or 'after'
|
|
* @param {Boolean} [returnDom=false] True to return the raw DOM element instead of Ext.dom.AbstractElement
|
|
* @return {Ext.dom.AbstractElement} The inserted Element. If an array is passed, the last inserted element is returned.
|
|
*/
|
|
insertSibling: function(el, where, returnDom) {
|
|
var me = this,
|
|
DomHelper = Ext.core.DomHelper,
|
|
oldUseDom = DomHelper.useDom,
|
|
isAfter = (where || 'before').toLowerCase() == 'after',
|
|
rt, insertEl, eLen, e;
|
|
|
|
if (Ext.isArray(el)) {
|
|
// append all elements to a documentFragment
|
|
insertEl = Ext.fly(document.createDocumentFragment(), '_internal');
|
|
eLen = el.length;
|
|
|
|
// DocumentFragments cannot accept innerHTML
|
|
DomHelper.useDom = true;
|
|
for (e = 0; e < eLen; e++) {
|
|
rt = insertEl.appendChild(el[e], returnDom);
|
|
}
|
|
DomHelper.useDom = oldUseDom;
|
|
|
|
// Insert fragment into document
|
|
me.dom.parentNode.insertBefore(insertEl.dom, isAfter ? me.dom.nextSibling : me.dom);
|
|
return rt;
|
|
}
|
|
|
|
el = el || {};
|
|
|
|
if (el.nodeType || el.dom) {
|
|
rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom);
|
|
if (!returnDom) {
|
|
rt = Ext.get(rt);
|
|
}
|
|
} else {
|
|
if (isAfter && !me.dom.nextSibling) {
|
|
rt = DomHelper.append(me.dom.parentNode, el, !returnDom);
|
|
} else {
|
|
rt = DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
|
|
}
|
|
}
|
|
return rt;
|
|
},
|
|
|
|
/**
|
|
* Replaces the passed element with this element
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement} el The element to replace.
|
|
* The id of the node, a DOM Node or an existing Element.
|
|
* @return {Ext.dom.AbstractElement} This element
|
|
*/
|
|
replace: function(el) {
|
|
el = Ext.get(el);
|
|
this.insertBefore(el);
|
|
el.remove();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Replaces this element with the passed element
|
|
* @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The new element (id of the node, a DOM Node
|
|
* or an existing Element) or a DomHelper config of an element to create
|
|
* @return {Ext.dom.AbstractElement} This element
|
|
*/
|
|
replaceWith: function(el){
|
|
var me = this;
|
|
|
|
if (el.nodeType || el.dom || typeof el == 'string') {
|
|
el = Ext.get(el);
|
|
me.dom.parentNode.insertBefore(el.dom, me.dom);
|
|
} else {
|
|
el = Ext.core.DomHelper.insertBefore(me.dom, el);
|
|
}
|
|
|
|
delete Ext.cache[me.id];
|
|
Ext.removeNode(me.dom);
|
|
me.id = Ext.id(me.dom = el);
|
|
Ext.dom.AbstractElement.addToCache(me.isFlyweight ? new Ext.dom.AbstractElement(me.dom) : me);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
|
|
* @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
|
|
* automatically generated with the specified attributes.
|
|
* @param {HTMLElement} [insertBefore] a child element of this element
|
|
* @param {Boolean} [returnDom=false] true to return the dom node instead of creating an Element
|
|
* @return {Ext.dom.AbstractElement} The new child element
|
|
*/
|
|
createChild: function(config, insertBefore, returnDom) {
|
|
config = config || {tag:'div'};
|
|
if (insertBefore) {
|
|
return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
|
|
}
|
|
else {
|
|
return Ext.core.DomHelper.append(this.dom, config, returnDom !== true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates and wraps this element with another element
|
|
* @param {Object} [config] DomHelper element config object for the wrapper element or null for an empty div
|
|
* @param {Boolean} [returnDom=false] True to return the raw DOM element instead of Ext.dom.AbstractElement
|
|
* @param {String} [selector] A {@link Ext.dom.Query DomQuery} selector to select a descendant node within the created element to use as the wrapping element.
|
|
* @return {HTMLElement/Ext.dom.AbstractElement} The newly created wrapper element
|
|
*/
|
|
wrap: function(config, returnDom, selector) {
|
|
var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, true),
|
|
target = newEl;
|
|
|
|
if (selector) {
|
|
target = Ext.DomQuery.selectNode(selector, newEl.dom);
|
|
}
|
|
|
|
target.appendChild(this.dom);
|
|
return returnDom ? newEl.dom : newEl;
|
|
},
|
|
|
|
/**
|
|
* Inserts an html fragment into this element
|
|
* @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
|
|
* See {@link Ext.dom.Helper#insertHtml} for details.
|
|
* @param {String} html The HTML fragment
|
|
* @param {Boolean} [returnEl=false] True to return an Ext.dom.AbstractElement
|
|
* @return {HTMLElement/Ext.dom.AbstractElement} The inserted node (or nearest related if more than 1 inserted)
|
|
*/
|
|
insertHtml: function(where, html, returnEl) {
|
|
var el = Ext.core.DomHelper.insertHtml(where, this.dom, html);
|
|
return returnEl ? Ext.get(el) : el;
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.AbstractElement_style', {
|
|
|
|
override: 'Ext.dom.AbstractElement'
|
|
|
|
}, function() {
|
|
// local style camelizing for speed
|
|
var Element = this,
|
|
wordsRe = /\w/g,
|
|
spacesRe = /\s+/,
|
|
transparentRe = /^(?:transparent|(?:rgba[(](?:\s*\d+\s*[,]){3}\s*0\s*[)]))$/i,
|
|
// In some browsers, currently IE10 and older chrome versions, when ClassList is
|
|
// supported most elements will have the classList attribute, but some svg elements
|
|
// will still not have it present, so in a small amount of cases we'll still need
|
|
// to check at run time whether we can use it.
|
|
hasClassList = Ext.supports.ClassList,
|
|
PADDING = 'padding',
|
|
MARGIN = 'margin',
|
|
BORDER = 'border',
|
|
LEFT_SUFFIX = '-left',
|
|
RIGHT_SUFFIX = '-right',
|
|
TOP_SUFFIX = '-top',
|
|
BOTTOM_SUFFIX = '-bottom',
|
|
WIDTH = '-width',
|
|
// special markup used throughout Ext when box wrapping elements
|
|
borders = {l: BORDER + LEFT_SUFFIX + WIDTH, r: BORDER + RIGHT_SUFFIX + WIDTH, t: BORDER + TOP_SUFFIX + WIDTH, b: BORDER + BOTTOM_SUFFIX + WIDTH},
|
|
paddings = {l: PADDING + LEFT_SUFFIX, r: PADDING + RIGHT_SUFFIX, t: PADDING + TOP_SUFFIX, b: PADDING + BOTTOM_SUFFIX},
|
|
margins = {l: MARGIN + LEFT_SUFFIX, r: MARGIN + RIGHT_SUFFIX, t: MARGIN + TOP_SUFFIX, b: MARGIN + BOTTOM_SUFFIX},
|
|
internalFly = new Element.Fly();
|
|
|
|
|
|
Ext.override(Element, {
|
|
|
|
/**
|
|
* This shared object is keyed by style name (e.g., 'margin-left' or 'marginLeft'). The
|
|
* values are objects with the following properties:
|
|
*
|
|
* * `name` (String) : The actual name to be presented to the DOM. This is typically the value
|
|
* returned by {@link #normalize}.
|
|
* * `get` (Function) : A hook function that will perform the get on this style. These
|
|
* functions receive "(dom, el)" arguments. The `dom` parameter is the DOM Element
|
|
* from which to get ths tyle. The `el` argument (may be null) is the Ext.Element.
|
|
* * `set` (Function) : A hook function that will perform the set on this style. These
|
|
* functions receive "(dom, value, el)" arguments. The `dom` parameter is the DOM Element
|
|
* from which to get ths tyle. The `value` parameter is the new value for the style. The
|
|
* `el` argument (may be null) is the Ext.Element.
|
|
*
|
|
* The `this` pointer is the object that contains `get` or `set`, which means that
|
|
* `this.name` can be accessed if needed. The hook functions are both optional.
|
|
* @private
|
|
*/
|
|
styleHooks: {},
|
|
|
|
// private
|
|
addStyles : function(sides, styles){
|
|
var totalSize = 0,
|
|
sidesArr = (sides || '').match(wordsRe),
|
|
i,
|
|
len = sidesArr.length,
|
|
side,
|
|
styleSides = [];
|
|
|
|
if (len == 1) {
|
|
totalSize = Math.abs(parseFloat(this.getStyle(styles[sidesArr[0]])) || 0);
|
|
} else if (len) {
|
|
for (i = 0; i < len; i++) {
|
|
side = sidesArr[i];
|
|
styleSides.push(styles[side]);
|
|
}
|
|
//Gather all at once, returning a hash
|
|
styleSides = this.getStyle(styleSides);
|
|
|
|
for (i=0; i < len; i++) {
|
|
side = sidesArr[i];
|
|
totalSize += Math.abs(parseFloat(styleSides[styles[side]]) || 0);
|
|
}
|
|
}
|
|
|
|
return totalSize;
|
|
},
|
|
|
|
/**
|
|
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
|
|
* @param {String/String[]} className The CSS classes to add separated by space, or an array of classes
|
|
* @return {Ext.dom.Element} this
|
|
* @method
|
|
*/
|
|
addCls: (function(){
|
|
var addWithClassList = function(className) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
trimRe = me.trimRe,
|
|
origClassName = className,
|
|
classList,
|
|
newCls,
|
|
i,
|
|
len,
|
|
cls;
|
|
|
|
if (typeof(className) == 'string') {
|
|
// split string on spaces to make an array of className
|
|
className = className.replace(trimRe, '').split(spacesRe);
|
|
}
|
|
|
|
// the gain we have here is that we can skip parsing className and use the
|
|
// classList.contains method, so now O(M) not O(M+N)
|
|
if (dom && className && !!(len = className.length)) {
|
|
if (!dom.className) {
|
|
dom.className = className.join(' ');
|
|
} else {
|
|
classList = dom.classList;
|
|
if (classList) {
|
|
for (i = 0; i < len; ++i) {
|
|
cls = className[i];
|
|
if (cls) {
|
|
if (!classList.contains(cls)) {
|
|
if (newCls) {
|
|
newCls.push(cls);
|
|
} else {
|
|
newCls = dom.className.replace(trimRe, '');
|
|
newCls = newCls ? [newCls, cls] : [cls];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (newCls) {
|
|
dom.className = newCls.join(' '); // write to DOM once
|
|
}
|
|
} else {
|
|
addWithoutClassList(origClassName);
|
|
}
|
|
}
|
|
}
|
|
return me;
|
|
}, addWithoutClassList = function(className) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
elClasses;
|
|
|
|
if (dom && className && className.length) {
|
|
elClasses = Ext.Element.mergeClsList(dom.className, className);
|
|
if (elClasses.changed) {
|
|
dom.className = elClasses.join(' '); // write to DOM once
|
|
}
|
|
}
|
|
return me;
|
|
};
|
|
|
|
return hasClassList ? addWithClassList : addWithoutClassList;
|
|
})(),
|
|
|
|
|
|
/**
|
|
* Removes one or more CSS classes from the element.
|
|
* @param {String/String[]} className The CSS classes to remove separated by space, or an array of classes
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
removeCls: function(className) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
classList,
|
|
len,
|
|
elClasses;
|
|
|
|
if (typeof(className) == 'string') {
|
|
// split string on spaces to make an array of className
|
|
className = className.replace(me.trimRe, '').split(spacesRe);
|
|
}
|
|
|
|
if (dom && dom.className && className && !!(len = className.length)) {
|
|
classList = dom.classList;
|
|
if (len === 1 && classList) {
|
|
if (className[0]) {
|
|
classList.remove(className[0]); // one DOM write
|
|
}
|
|
} else {
|
|
elClasses = Ext.Element.removeCls(dom.className, className);
|
|
if (elClasses.changed) {
|
|
dom.className = elClasses.join(' ');
|
|
}
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
|
|
* @param {String/String[]} className The CSS class to add, or an array of classes
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
radioCls: function(className) {
|
|
var cn = this.dom.parentNode.childNodes,
|
|
v,
|
|
i, len;
|
|
className = Ext.isArray(className) ? className: [className];
|
|
for (i = 0, len = cn.length; i < len; i++) {
|
|
v = cn[i];
|
|
if (v && v.nodeType == 1) {
|
|
internalFly.attach(v).removeCls(className);
|
|
}
|
|
}
|
|
return this.addCls(className);
|
|
},
|
|
|
|
/**
|
|
* Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
|
|
* @param {String} className The CSS class to toggle
|
|
* @return {Ext.dom.Element} this
|
|
* @method
|
|
*/
|
|
toggleCls: (function(){
|
|
var toggleWithClassList = function(className){
|
|
var me = this,
|
|
dom = me.dom,
|
|
classList;
|
|
|
|
if (dom) {
|
|
className = className.replace(me.trimRe, '');
|
|
if (className) {
|
|
classList = dom.classList;
|
|
if (classList) {
|
|
classList.toggle(className);
|
|
} else {
|
|
toggleWithoutClassList(className);
|
|
}
|
|
}
|
|
}
|
|
|
|
return me;
|
|
}, toggleWithoutClassList = function(className){
|
|
return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
|
|
};
|
|
|
|
return hasClassList ? toggleWithClassList : toggleWithoutClassList;
|
|
})(),
|
|
|
|
/**
|
|
* Checks if the specified CSS class exists on this element's DOM node.
|
|
* @param {String} className The CSS class to check for
|
|
* @return {Boolean} True if the class exists, else false
|
|
* @method
|
|
*/
|
|
hasCls: (function(){
|
|
var hasClsWithClassList = function(className) {
|
|
var dom = this.dom,
|
|
out = false,
|
|
classList;
|
|
|
|
if (dom && className) {
|
|
classList = dom.classList;
|
|
if (classList) {
|
|
out = classList.contains(className);
|
|
} else {
|
|
out = hasClsWithoutClassList(className);
|
|
}
|
|
}
|
|
return out;
|
|
}, hasClsWithoutClassList = function(className){
|
|
var dom = this.dom;
|
|
return dom ? className && (' '+dom.className+' ').indexOf(' '+className+' ') !== -1 : false;
|
|
};
|
|
|
|
return hasClassList ? hasClsWithClassList : hasClsWithoutClassList;
|
|
})(),
|
|
|
|
/**
|
|
* Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
|
|
* @param {String} oldClassName The CSS class to replace
|
|
* @param {String} newClassName The replacement CSS class
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
replaceCls: function(oldClassName, newClassName){
|
|
return this.removeCls(oldClassName).addCls(newClassName);
|
|
},
|
|
|
|
/**
|
|
* Checks if the current value of a style is equal to a given value.
|
|
* @param {String} style property whose value is returned.
|
|
* @param {String} value to check against.
|
|
* @return {Boolean} true for when the current value equals the given value.
|
|
*/
|
|
isStyle: function(style, val) {
|
|
return this.getStyle(style) == val;
|
|
},
|
|
|
|
/**
|
|
* Returns a named style property based on computed/currentStyle (primary) and
|
|
* inline-style if primary is not available.
|
|
*
|
|
* @param {String/String[]} property The style property (or multiple property names
|
|
* in an array) whose value is returned.
|
|
* @param {Boolean} [inline=false] if `true` only inline styles will be returned.
|
|
* @return {String/Object} The current value of the style property for this element
|
|
* (or a hash of named style values if multiple property arguments are requested).
|
|
* @method
|
|
*/
|
|
getStyle: function (property, inline) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
multiple = typeof property != 'string',
|
|
hooks = me.styleHooks,
|
|
prop = property,
|
|
props = prop,
|
|
len = 1,
|
|
domStyle, camel, values, hook, out, style, i;
|
|
|
|
if (multiple) {
|
|
values = {};
|
|
prop = props[0];
|
|
i = 0;
|
|
if (!(len = props.length)) {
|
|
return values;
|
|
}
|
|
}
|
|
|
|
if (!dom || dom.documentElement) {
|
|
return values || '';
|
|
}
|
|
|
|
domStyle = dom.style;
|
|
|
|
if (inline) {
|
|
style = domStyle;
|
|
} else {
|
|
// Caution: Firefox will not render "presentation" (ie. computed styles) in
|
|
// iframes that are display:none or those inheriting display:none. Similar
|
|
// issues with legacy Safari.
|
|
//
|
|
style = dom.ownerDocument.defaultView.getComputedStyle(dom, null);
|
|
|
|
// fallback to inline style if rendering context not available
|
|
if (!style) {
|
|
inline = true;
|
|
style = domStyle;
|
|
}
|
|
}
|
|
|
|
do {
|
|
hook = hooks[prop];
|
|
|
|
if (!hook) {
|
|
hooks[prop] = hook = { name: Element.normalize(prop) };
|
|
}
|
|
|
|
if (hook.get) {
|
|
out = hook.get(dom, me, inline, style);
|
|
} else {
|
|
camel = hook.name;
|
|
out = style[camel];
|
|
}
|
|
|
|
if (!multiple) {
|
|
return out;
|
|
}
|
|
|
|
values[prop] = out;
|
|
prop = props[++i];
|
|
} while (i < len);
|
|
|
|
return values;
|
|
},
|
|
|
|
getStyles: function () {
|
|
var props = Ext.Array.slice(arguments),
|
|
len = props.length,
|
|
inline;
|
|
|
|
if (len && typeof props[len-1] == 'boolean') {
|
|
inline = props.pop();
|
|
}
|
|
|
|
return this.getStyle(props, inline);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the value of the given property is visually transparent. This
|
|
* may be due to a 'transparent' style value or an rgba value with 0 in the alpha
|
|
* component.
|
|
* @param {String} prop The style property whose value is to be tested.
|
|
* @return {Boolean} True if the style property is visually transparent.
|
|
*/
|
|
isTransparent: function (prop) {
|
|
var value = this.getStyle(prop);
|
|
return value ? transparentRe.test(value) : false;
|
|
},
|
|
|
|
/**
|
|
* Wrapper for setting style properties, also takes single object parameter of multiple styles.
|
|
* @param {String/Object} property The style property to be set, or an object of multiple styles.
|
|
* @param {String} [value] The value to apply to the given property, or null if an object was passed.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setStyle: function(prop, value) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
hooks = me.styleHooks,
|
|
style = dom.style,
|
|
name = prop,
|
|
hook;
|
|
|
|
// we don't promote the 2-arg form to object-form to avoid the overhead...
|
|
if (typeof name == 'string') {
|
|
hook = hooks[name];
|
|
if (!hook) {
|
|
hooks[name] = hook = { name: Element.normalize(name) };
|
|
}
|
|
value = (value == null) ? '' : value;
|
|
if (hook.set) {
|
|
hook.set(dom, value, me);
|
|
} else {
|
|
style[hook.name] = value;
|
|
}
|
|
if (hook.afterSet) {
|
|
hook.afterSet(dom, value, me);
|
|
}
|
|
} else {
|
|
for (name in prop) {
|
|
if (prop.hasOwnProperty(name)) {
|
|
hook = hooks[name];
|
|
if (!hook) {
|
|
hooks[name] = hook = { name: Element.normalize(name) };
|
|
}
|
|
value = prop[name];
|
|
value = (value == null) ? '' : value;
|
|
if (hook.set) {
|
|
hook.set(dom, value, me);
|
|
} else {
|
|
style[hook.name] = value;
|
|
}
|
|
if (hook.afterSet) {
|
|
hook.afterSet(dom, value, me);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the offset height of the element
|
|
* @param {Boolean} [contentHeight] true to get the height minus borders and padding
|
|
* @return {Number} The element's height
|
|
*/
|
|
getHeight: function(contentHeight) {
|
|
var dom = this.dom,
|
|
height = contentHeight ? (dom.clientHeight - this.getPadding("tb")) : dom.offsetHeight;
|
|
return height > 0 ? height: 0;
|
|
},
|
|
|
|
/**
|
|
* Returns the offset width of the element
|
|
* @param {Boolean} [contentWidth] true to get the width minus borders and padding
|
|
* @return {Number} The element's width
|
|
*/
|
|
getWidth: function(contentWidth) {
|
|
var dom = this.dom,
|
|
width = contentWidth ? (dom.clientWidth - this.getPadding("lr")) : dom.offsetWidth;
|
|
return width > 0 ? width: 0;
|
|
},
|
|
|
|
/**
|
|
* Set the width of this Element.
|
|
* @param {Number/String} width The new width. This may be one of:
|
|
*
|
|
* - A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS width style. Animation may **not** be used.
|
|
*
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setWidth: function(width) {
|
|
var me = this;
|
|
me.dom.style.width = Element.addUnits(width);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Set the height of this Element.
|
|
*
|
|
* // change the height to 200px and animate with default configuration
|
|
* Ext.fly('elementId').setHeight(200, true);
|
|
*
|
|
* // change the height to 150px and animate with a custom configuration
|
|
* Ext.fly('elId').setHeight(150, {
|
|
* duration : 500, // animation will have a duration of .5 seconds
|
|
* // will change the content to "finished"
|
|
* callback: function(){ this.{@link #update}("finished"); }
|
|
* });
|
|
*
|
|
* @param {Number/String} height The new height. This may be one of:
|
|
*
|
|
* - A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)
|
|
* - A String used to set the CSS height style. Animation may **not** be used.
|
|
*
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setHeight: function(height) {
|
|
var me = this;
|
|
me.dom.style.height = Element.addUnits(height);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Gets the width of the border(s) for the specified side(s)
|
|
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
|
|
* passing `'lr'` would get the border **l**eft width + the border **r**ight width.
|
|
* @return {Number} The width of the sides passed added together
|
|
*/
|
|
getBorderWidth: function(side){
|
|
return this.addStyles(side, borders);
|
|
},
|
|
|
|
/**
|
|
* Gets the width of the padding(s) for the specified side(s)
|
|
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
|
|
* passing `'lr'` would get the padding **l**eft + the padding **r**ight.
|
|
* @return {Number} The padding of the sides passed added together
|
|
*/
|
|
getPadding: function(side){
|
|
return this.addStyles(side, paddings);
|
|
},
|
|
|
|
margins : margins,
|
|
|
|
/**
|
|
* More flexible version of {@link #setStyle} for setting style properties.
|
|
* @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
|
|
* a function which returns such a specification.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
applyStyles: function(styles) {
|
|
if (styles) {
|
|
var i,
|
|
len,
|
|
dom = this.dom;
|
|
|
|
if (typeof styles == 'function') {
|
|
styles = styles.call();
|
|
}
|
|
if (typeof styles == 'string') {
|
|
styles = Ext.util.Format.trim(styles).split(/\s*(?::|;)\s*/);
|
|
for (i = 0, len = styles.length; i < len;) {
|
|
dom.style[Element.normalize(styles[i++])] = styles[i++];
|
|
}
|
|
}
|
|
else if (typeof styles == 'object') {
|
|
this.setStyle(styles);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Set the size of this Element. If animation is true, both width and height will be animated concurrently.
|
|
* @param {Number/String} width The new width. This may be one of:
|
|
*
|
|
* - A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS width style. Animation may **not** be used.
|
|
* - A size object in the format `{width: widthValue, height: heightValue}`.
|
|
*
|
|
* @param {Number/String} height The new height. This may be one of:
|
|
*
|
|
* - A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS height style. Animation may **not** be used.
|
|
*
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setSize: function(width, height) {
|
|
var me = this,
|
|
style = me.dom.style;
|
|
|
|
if (Ext.isObject(width)) {
|
|
// in case of object from getSize()
|
|
height = width.height;
|
|
width = width.width;
|
|
}
|
|
|
|
style.width = Element.addUnits(width);
|
|
style.height = Element.addUnits(height);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the dimensions of the element available to lay content out in.
|
|
*
|
|
* If the element (or any ancestor element) has CSS style `display: none`, the dimensions will be zero.
|
|
*
|
|
* Example:
|
|
*
|
|
* var vpSize = Ext.getBody().getViewSize();
|
|
*
|
|
* // all Windows created afterwards will have a default value of 90% height and 95% width
|
|
* Ext.Window.override({
|
|
* width: vpSize.width * 0.9,
|
|
* height: vpSize.height * 0.95
|
|
* });
|
|
* // To handle window resizing you would have to hook onto onWindowResize.
|
|
*
|
|
* getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
|
|
* To obtain the size including scrollbars, use getStyleSize
|
|
*
|
|
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
|
|
*
|
|
* @return {Object} Object describing width and height.
|
|
* @return {Number} return.width
|
|
* @return {Number} return.height
|
|
*/
|
|
getViewSize: function() {
|
|
var doc = document,
|
|
dom = this.dom;
|
|
|
|
if (dom == doc || dom == doc.body) {
|
|
return {
|
|
width: Element.getViewportWidth(),
|
|
height: Element.getViewportHeight()
|
|
};
|
|
}
|
|
else {
|
|
return {
|
|
width: dom.clientWidth,
|
|
height: dom.clientHeight
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the size of the element.
|
|
* @param {Boolean} [contentSize] true to get the width/size minus borders and padding
|
|
* @return {Object} An object containing the element's size:
|
|
* @return {Number} return.width
|
|
* @return {Number} return.height
|
|
*/
|
|
getSize: function(contentSize) {
|
|
var dom = this.dom;
|
|
return {
|
|
width: Math.max(0, contentSize ? (dom.clientWidth - this.getPadding("lr")) : dom.offsetWidth),
|
|
height: Math.max(0, contentSize ? (dom.clientHeight - this.getPadding("tb")) : dom.offsetHeight)
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Forces the browser to repaint this element
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
repaint: function() {
|
|
var dom = this.dom;
|
|
this.addCls(Ext.baseCSSPrefix + 'repaint');
|
|
setTimeout(function(){
|
|
internalFly.attach(dom).removeCls(Ext.baseCSSPrefix + 'repaint');
|
|
}, 1);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
|
|
* then it returns the calculated width of the sides (see getPadding)
|
|
* @param {String} [sides] Any combination of l, r, t, b to get the sum of those sides
|
|
* @return {Object/Number}
|
|
*/
|
|
getMargin: function(side){
|
|
var me = this,
|
|
hash = {t:"top", l:"left", r:"right", b: "bottom"},
|
|
key,
|
|
o,
|
|
margins;
|
|
|
|
if (!side) {
|
|
margins = [];
|
|
for (key in me.margins) {
|
|
if(me.margins.hasOwnProperty(key)) {
|
|
margins.push(me.margins[key]);
|
|
}
|
|
}
|
|
o = me.getStyle(margins);
|
|
if(o && typeof o == 'object') {
|
|
//now mixin nomalized values (from hash table)
|
|
for (key in me.margins) {
|
|
if(me.margins.hasOwnProperty(key)) {
|
|
o[hash[key]] = parseFloat(o[me.margins[key]]) || 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
return o;
|
|
} else {
|
|
return me.addStyles(side, me.margins);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Puts a mask over this element to disable user interaction. Requires core.css.
|
|
* This method can only be applied to elements which accept child nodes.
|
|
* @param {String} [msg] A message to display in the mask
|
|
* @param {String} [msgCls] A css class to apply to the msg element
|
|
*/
|
|
mask: function(msg, msgCls, transparent) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
data = (me.$cache || me.getCache()).data,
|
|
el = data.mask,
|
|
mask,
|
|
size,
|
|
cls = '',
|
|
prefix = Ext.baseCSSPrefix;
|
|
|
|
me.addCls(prefix + 'masked');
|
|
if (me.getStyle("position") == "static") {
|
|
me.addCls(prefix + 'masked-relative');
|
|
}
|
|
if (el) {
|
|
el.remove();
|
|
}
|
|
if (msgCls && typeof msgCls == 'string' ) {
|
|
cls = ' ' + msgCls;
|
|
}
|
|
else {
|
|
cls = ' ' + prefix + 'mask-gray';
|
|
}
|
|
|
|
mask = me.createChild({
|
|
cls: prefix + 'mask' + ((transparent !== false) ? '' : (' ' + prefix + 'mask-gray')),
|
|
html: msg ? ('<div class="' + (msgCls || (prefix + 'mask-message')) + '">' + msg + '</div>') : ''
|
|
});
|
|
|
|
size = me.getSize();
|
|
|
|
data.mask = mask;
|
|
|
|
if (dom === document.body) {
|
|
size.height = window.innerHeight;
|
|
if (me.orientationHandler) {
|
|
Ext.EventManager.unOrientationChange(me.orientationHandler, me);
|
|
}
|
|
|
|
me.orientationHandler = function() {
|
|
size = me.getSize();
|
|
size.height = window.innerHeight;
|
|
mask.setSize(size);
|
|
};
|
|
|
|
Ext.EventManager.onOrientationChange(me.orientationHandler, me);
|
|
}
|
|
mask.setSize(size);
|
|
if (Ext.is.iPad) {
|
|
Ext.repaint();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes a previously applied mask.
|
|
*/
|
|
unmask: function() {
|
|
var me = this,
|
|
data = (me.$cache || me.getCache()).data,
|
|
mask = data.mask,
|
|
prefix = Ext.baseCSSPrefix;
|
|
|
|
if (mask) {
|
|
mask.remove();
|
|
delete data.mask;
|
|
}
|
|
me.removeCls([prefix + 'masked', prefix + 'masked-relative']);
|
|
|
|
if (me.dom === document.body) {
|
|
Ext.EventManager.unOrientationChange(me.orientationHandler, me);
|
|
delete me.orientationHandler;
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
Ext.onReady(function () {
|
|
var supports = Ext.supports,
|
|
styleHooks,
|
|
colorStyles, i, name, camel;
|
|
|
|
function fixTransparent (dom, el, inline, style) {
|
|
var value = style[this.name] || '';
|
|
return transparentRe.test(value) ? 'transparent' : value;
|
|
}
|
|
|
|
function fixRightMargin (dom, el, inline, style) {
|
|
var result = style.marginRight,
|
|
domStyle, display;
|
|
|
|
// Ignore cases when the margin is correctly reported as 0, the bug only shows
|
|
// numbers larger.
|
|
if (result != '0px') {
|
|
domStyle = dom.style;
|
|
display = domStyle.display;
|
|
domStyle.display = 'inline-block';
|
|
result = (inline ? style : dom.ownerDocument.defaultView.getComputedStyle(dom, null)).marginRight;
|
|
domStyle.display = display;
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function fixRightMarginAndInputFocus (dom, el, inline, style) {
|
|
var result = style.marginRight,
|
|
domStyle, cleaner, display;
|
|
|
|
if (result != '0px') {
|
|
domStyle = dom.style;
|
|
cleaner = Element.getRightMarginFixCleaner(dom);
|
|
display = domStyle.display;
|
|
domStyle.display = 'inline-block';
|
|
result = (inline ? style : dom.ownerDocument.defaultView.getComputedStyle(dom, '')).marginRight;
|
|
domStyle.display = display;
|
|
cleaner();
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
styleHooks = Element.prototype.styleHooks;
|
|
|
|
// Ext.supports needs to be initialized (we run very early in the onready sequence),
|
|
// but it is OK to call Ext.supports.init() more times than necessary...
|
|
if (supports.init) {
|
|
supports.init();
|
|
}
|
|
|
|
// Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
|
|
if (!supports.RightMargin) {
|
|
styleHooks.marginRight = styleHooks['margin-right'] = {
|
|
name: 'marginRight',
|
|
// TODO - Touch should use conditional compilation here or ensure that the
|
|
// underlying Ext.supports flags are set correctly...
|
|
get: (supports.DisplayChangeInputSelectionBug || supports.DisplayChangeTextAreaSelectionBug) ?
|
|
fixRightMarginAndInputFocus : fixRightMargin
|
|
};
|
|
}
|
|
|
|
if (!supports.TransparentColor) {
|
|
colorStyles = ['background-color', 'border-color', 'color', 'outline-color'];
|
|
for (i = colorStyles.length; i--; ) {
|
|
name = colorStyles[i];
|
|
camel = Element.normalize(name);
|
|
|
|
styleHooks[name] = styleHooks[camel] = {
|
|
name: camel,
|
|
get: fixTransparent
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.AbstractElement_traversal', {
|
|
override: 'Ext.dom.AbstractElement',
|
|
|
|
/**
|
|
* Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String} selector The simple selector to test
|
|
* @param {Number/String/HTMLElement/Ext.Element} [limit]
|
|
* The max depth to search as a number or an element which causes the upward traversal to stop
|
|
* and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
|
|
* @param {Boolean} [returnEl=false] True to return a Ext.Element object instead of DOM node
|
|
* @return {HTMLElement} The matching DOM node (or null if no match was found)
|
|
*/
|
|
findParent: function(simpleSelector, limit, returnEl) {
|
|
var target = this.dom,
|
|
topmost = document.documentElement,
|
|
depth = 0,
|
|
stopEl;
|
|
|
|
limit = limit || 50;
|
|
if (isNaN(limit)) {
|
|
stopEl = Ext.getDom(limit);
|
|
limit = Number.MAX_VALUE;
|
|
}
|
|
while (target && target.nodeType == 1 && depth < limit && target != topmost && target != stopEl) {
|
|
if (Ext.DomQuery.is(target, simpleSelector)) {
|
|
return returnEl ? Ext.get(target) : target;
|
|
}
|
|
depth++;
|
|
target = target.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String} selector The simple selector to test
|
|
* @param {Number/String/HTMLElement/Ext.Element} [limit]
|
|
* The max depth to search as a number or an element which causes the upward traversal to stop
|
|
* and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
|
|
* @param {Boolean} [returnEl=false] True to return a Ext.Element object instead of DOM node
|
|
* @return {HTMLElement} The matching DOM node (or null if no match was found)
|
|
*/
|
|
findParentNode: function(simpleSelector, limit, returnEl) {
|
|
var p = Ext.fly(this.dom.parentNode, '_internal');
|
|
return p ? p.findParent(simpleSelector, limit, returnEl) : null;
|
|
},
|
|
|
|
/**
|
|
* Walks up the DOM looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
|
|
* This is a shortcut for findParentNode() that always returns an Ext.dom.Element.
|
|
* @param {String} selector The simple selector to test
|
|
* @param {Number/String/HTMLElement/Ext.Element} [limit]
|
|
* The max depth to search as a number or an element which causes the upward traversal to stop
|
|
* and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
|
|
* @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element
|
|
* @return {Ext.Element} The matching DOM node (or null if no match was found)
|
|
*/
|
|
up: function(simpleSelector, limit, returnDom) {
|
|
return this.findParentNode(simpleSelector, limit, !returnDom);
|
|
},
|
|
|
|
/**
|
|
* Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
|
|
* @param {String} selector The CSS selector
|
|
* @param {Boolean} [unique] True to create a unique Ext.Element for each element. Defaults to a shared flyweight object.
|
|
* @return {Ext.CompositeElement} The composite element
|
|
*/
|
|
select: function(selector, composite) {
|
|
return Ext.dom.Element.select(selector, this.dom, composite);
|
|
},
|
|
|
|
/**
|
|
* Selects child nodes based on the passed CSS selector (the selector should not contain an id).
|
|
* @param {String} selector The CSS selector
|
|
* @return {HTMLElement[]} An array of the matched nodes
|
|
*/
|
|
query: function(selector) {
|
|
return Ext.DomQuery.select(selector, this.dom);
|
|
},
|
|
|
|
/**
|
|
* Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
|
|
* @param {String} selector The CSS selector
|
|
* @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element
|
|
* @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if returnDom = true)
|
|
*/
|
|
down: function(selector, returnDom) {
|
|
var n = Ext.DomQuery.selectNode(selector, this.dom);
|
|
return returnDom ? n : Ext.get(n);
|
|
},
|
|
|
|
/**
|
|
* Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
|
|
* @param {String} selector The CSS selector
|
|
* @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element.
|
|
* @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if returnDom = true)
|
|
*/
|
|
child: function(selector, returnDom) {
|
|
var node,
|
|
me = this,
|
|
id;
|
|
|
|
// Pull the ID from the DOM (Ext.id also ensures that there *is* an ID).
|
|
// If this object is a Flyweight, it will not have an ID
|
|
id = Ext.id(me.dom);
|
|
// Escape "invalid" chars
|
|
id = Ext.escapeId(id);
|
|
node = Ext.DomQuery.selectNode('#' + id + " > " + selector, me.dom);
|
|
return returnDom ? node : Ext.get(node);
|
|
},
|
|
|
|
/**
|
|
* Gets the parent node for this element, optionally chaining up trying to match a selector
|
|
* @param {String} [selector] Find a parent node that matches the passed simple selector
|
|
* @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
|
|
* @return {Ext.dom.Element/HTMLElement} The parent node or null
|
|
*/
|
|
parent: function(selector, returnDom) {
|
|
return this.matchNode('parentNode', 'parentNode', selector, returnDom);
|
|
},
|
|
|
|
/**
|
|
* Gets the next sibling, skipping text nodes
|
|
* @param {String} [selector] Find the next sibling that matches the passed simple selector
|
|
* @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
|
|
* @return {Ext.dom.Element/HTMLElement} The next sibling or null
|
|
*/
|
|
next: function(selector, returnDom) {
|
|
return this.matchNode('nextSibling', 'nextSibling', selector, returnDom);
|
|
},
|
|
|
|
/**
|
|
* Gets the previous sibling, skipping text nodes
|
|
* @param {String} [selector] Find the previous sibling that matches the passed simple selector
|
|
* @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
|
|
* @return {Ext.dom.Element/HTMLElement} The previous sibling or null
|
|
*/
|
|
prev: function(selector, returnDom) {
|
|
return this.matchNode('previousSibling', 'previousSibling', selector, returnDom);
|
|
},
|
|
|
|
|
|
/**
|
|
* Gets the first child, skipping text nodes
|
|
* @param {String} [selector] Find the next sibling that matches the passed simple selector
|
|
* @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
|
|
* @return {Ext.dom.Element/HTMLElement} The first child or null
|
|
*/
|
|
first: function(selector, returnDom) {
|
|
return this.matchNode('nextSibling', 'firstChild', selector, returnDom);
|
|
},
|
|
|
|
/**
|
|
* Gets the last child, skipping text nodes
|
|
* @param {String} [selector] Find the previous sibling that matches the passed simple selector
|
|
* @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
|
|
* @return {Ext.dom.Element/HTMLElement} The last child or null
|
|
*/
|
|
last: function(selector, returnDom) {
|
|
return this.matchNode('previousSibling', 'lastChild', selector, returnDom);
|
|
},
|
|
|
|
matchNode: function(dir, start, selector, returnDom) {
|
|
if (!this.dom) {
|
|
return null;
|
|
}
|
|
|
|
var n = this.dom[start];
|
|
while (n) {
|
|
if (n.nodeType == 1 && (!selector || Ext.DomQuery.is(n, selector))) {
|
|
return !returnDom ? Ext.get(n) : n;
|
|
}
|
|
n = n[dir];
|
|
}
|
|
return null;
|
|
},
|
|
|
|
isAncestor: function(element) {
|
|
return this.self.isAncestor.call(this.self, this.dom, element);
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
// @require Ext.Supports
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.dom.AbstractElement', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
trimRe: /^\s+|\s+$/g,
|
|
whitespaceRe: /\s/,
|
|
|
|
inheritableStatics: {
|
|
trimRe: /^\s+|\s+$/g,
|
|
whitespaceRe: /\s/,
|
|
|
|
/**
|
|
* Retrieves Ext.dom.Element objects. {@link Ext#get} is alias for {@link Ext.dom.Element#get}.
|
|
*
|
|
* **This method does not retrieve {@link Ext.Component Component}s.** This method retrieves Ext.dom.Element
|
|
* objects which encapsulate DOM elements. To retrieve a Component by its ID, use {@link Ext.ComponentManager#get}.
|
|
*
|
|
* When passing an id, it should not include the `#` character that is used for a css selector.
|
|
*
|
|
* // For an element with id 'foo'
|
|
* Ext.get('foo'); // Correct
|
|
* Ext.get('#foo'); // Incorrect
|
|
*
|
|
* Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with
|
|
* the same id via AJAX or DOM.
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el The id of the node, a DOM Node or an existing Element.
|
|
* @return {Ext.dom.Element} The Element object (or null if no matching element was found)
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
get: function(el) {
|
|
var me = this,
|
|
document = window.document,
|
|
El = Ext.dom.Element,
|
|
cacheItem,
|
|
docEl,
|
|
extEl,
|
|
dom,
|
|
id;
|
|
|
|
if (!el) {
|
|
return null;
|
|
}
|
|
|
|
// Ext.get(flyweight) must return an Element instance, not the flyweight
|
|
if (el.isFly) {
|
|
el = el.dom;
|
|
}
|
|
|
|
if (typeof el == "string") { // element id
|
|
if (el == Ext.windowId) {
|
|
return El.get(window);
|
|
} else if (el == Ext.documentId) {
|
|
return El.get(document);
|
|
}
|
|
|
|
cacheItem = Ext.cache[el];
|
|
// This code is here to catch the case where we've got a reference to a document of an iframe
|
|
// It getElementById will fail because it's not part of the document, so if we're skipping
|
|
// GC it means it's a window/document object that isn't the default window/document, which we have
|
|
// already handled above
|
|
if (cacheItem && cacheItem.skipGarbageCollection) {
|
|
extEl = cacheItem.el;
|
|
return extEl;
|
|
}
|
|
|
|
if (!(dom = document.getElementById(el))) {
|
|
return null;
|
|
}
|
|
|
|
if (cacheItem && cacheItem.el) {
|
|
extEl = Ext.updateCacheEntry(cacheItem, dom).el;
|
|
} else {
|
|
// Force new element if there's a cache but no el attached
|
|
extEl = new El(dom, !!cacheItem);
|
|
}
|
|
return extEl;
|
|
} else if (el.tagName) { // dom element
|
|
if (!(id = el.id)) {
|
|
id = Ext.id(el);
|
|
}
|
|
cacheItem = Ext.cache[id];
|
|
if (cacheItem && cacheItem.el) {
|
|
extEl = Ext.updateCacheEntry(cacheItem, el).el;
|
|
} else {
|
|
// Force new element if there's a cache but no el attached
|
|
extEl = new El(el, !!cacheItem);
|
|
}
|
|
return extEl;
|
|
} else if (el instanceof me) {
|
|
if (el != me.docEl && el != me.winEl) {
|
|
id = el.id;
|
|
// refresh dom element in case no longer valid,
|
|
// catch case where it hasn't been appended
|
|
cacheItem = Ext.cache[id];
|
|
if (cacheItem) {
|
|
Ext.updateCacheEntry(cacheItem, document.getElementById(id) || el.dom);
|
|
}
|
|
}
|
|
return el;
|
|
} else if (el.isComposite) {
|
|
return el;
|
|
} else if (Ext.isArray(el)) {
|
|
return me.select(el);
|
|
} else if (el === document) {
|
|
// create a bogus element object representing the document object
|
|
if (!me.docEl) {
|
|
docEl = me.docEl = Ext.Object.chain(El.prototype);
|
|
docEl.dom = document;
|
|
// set an "el" property on the element that references itself.
|
|
// This allows Ext.util.Positionable methods to operate on
|
|
// this.el.dom since it gets mixed into both Element and Component
|
|
docEl.el = docEl;
|
|
docEl.id = Ext.id(document);
|
|
me.addToCache(docEl);
|
|
}
|
|
return me.docEl;
|
|
} else if (el === window) {
|
|
if (!me.winEl) {
|
|
me.winEl = Ext.Object.chain(El.prototype);
|
|
me.winEl.dom = window;
|
|
me.winEl.id = Ext.id(window);
|
|
me.addToCache(me.winEl);
|
|
}
|
|
return me.winEl;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
addToCache: function(el, id) {
|
|
if (el) {
|
|
Ext.addCacheEntry(id, el);
|
|
}
|
|
return el;
|
|
},
|
|
|
|
addMethods: function() {
|
|
this.override.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* <p>Returns an array of unique class names based upon the input strings, or string arrays.</p>
|
|
* <p>The number of parameters is unlimited.</p>
|
|
* <p>Example</p><pre><code>
|
|
// Add x-invalid and x-mandatory classes, do not duplicate
|
|
myElement.dom.className = Ext.core.Element.mergeClsList(this.initialClasses, 'x-invalid x-mandatory');
|
|
</code></pre>
|
|
* @param {Mixed} clsList1 A string of class names, or an array of class names.
|
|
* @param {Mixed} clsList2 A string of class names, or an array of class names.
|
|
* @return {Array} An array of strings representing remaining unique, merged class names. If class names were added to the first list, the <code>changed</code> property will be <code>true</code>.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
mergeClsList: function() {
|
|
var clsList, clsHash = {},
|
|
i, length, j, listLength, clsName, result = [],
|
|
changed = false,
|
|
trimRe = this.trimRe,
|
|
whitespaceRe = this.whitespaceRe;
|
|
|
|
for (i = 0, length = arguments.length; i < length; i++) {
|
|
clsList = arguments[i];
|
|
if (Ext.isString(clsList)) {
|
|
clsList = clsList.replace(trimRe, '').split(whitespaceRe);
|
|
}
|
|
if (clsList) {
|
|
for (j = 0, listLength = clsList.length; j < listLength; j++) {
|
|
clsName = clsList[j];
|
|
if (!clsHash[clsName]) {
|
|
if (i) {
|
|
changed = true;
|
|
}
|
|
clsHash[clsName] = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
for (clsName in clsHash) {
|
|
result.push(clsName);
|
|
}
|
|
result.changed = changed;
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* <p>Returns an array of unique class names deom the first parameter with all class names
|
|
* from the second parameter removed.</p>
|
|
* <p>Example</p><pre><code>
|
|
// Remove x-invalid and x-mandatory classes if present.
|
|
myElement.dom.className = Ext.core.Element.removeCls(this.initialClasses, 'x-invalid x-mandatory');
|
|
</code></pre>
|
|
* @param {Mixed} existingClsList A string of class names, or an array of class names.
|
|
* @param {Mixed} removeClsList A string of class names, or an array of class names to remove from <code>existingClsList</code>.
|
|
* @return {Array} An array of strings representing remaining class names. If class names were removed, the <code>changed</code> property will be <code>true</code>.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
removeCls: function(existingClsList, removeClsList) {
|
|
var clsHash = {},
|
|
i, length, clsName, result = [],
|
|
changed = false,
|
|
whitespaceRe = this.whitespaceRe;
|
|
|
|
if (existingClsList) {
|
|
if (Ext.isString(existingClsList)) {
|
|
existingClsList = existingClsList.replace(this.trimRe, '').split(whitespaceRe);
|
|
}
|
|
for (i = 0, length = existingClsList.length; i < length; i++) {
|
|
clsHash[existingClsList[i]] = true;
|
|
}
|
|
}
|
|
if (removeClsList) {
|
|
if (Ext.isString(removeClsList)) {
|
|
removeClsList = removeClsList.split(whitespaceRe);
|
|
}
|
|
for (i = 0, length = removeClsList.length; i < length; i++) {
|
|
clsName = removeClsList[i];
|
|
if (clsHash[clsName]) {
|
|
changed = true;
|
|
delete clsHash[clsName];
|
|
}
|
|
}
|
|
}
|
|
for (clsName in clsHash) {
|
|
result.push(clsName);
|
|
}
|
|
result.changed = changed;
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @property {Number}
|
|
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
|
|
* Use the CSS 'visibility' property to hide the element.
|
|
*
|
|
* Note that in this mode, {@link Ext.dom.Element#isVisible isVisible} may return true
|
|
* for an element even though it actually has a parent element that is hidden. For this
|
|
* reason, and in most cases, using the {@link #OFFSETS} mode is a better choice.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
VISIBILITY: 1,
|
|
|
|
/**
|
|
* @property {Number}
|
|
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
|
|
* Use the CSS 'display' property to hide the element.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
DISPLAY: 2,
|
|
|
|
/**
|
|
* @property {Number}
|
|
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
|
|
* Use CSS absolute positioning and top/left offsets to hide the element.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
OFFSETS: 3,
|
|
|
|
/**
|
|
* @property {Number}
|
|
* Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
|
|
* Add or remove the {@link Ext.Layer#visibilityCls} class to hide the element.
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
ASCLASS: 4
|
|
},
|
|
|
|
constructor: function(element, forceNew) {
|
|
var me = this,
|
|
dom = typeof element == 'string'
|
|
? document.getElementById(element)
|
|
: element,
|
|
id;
|
|
|
|
// set an "el" property that references "this". This allows
|
|
// Ext.util.Positionable methods to operate on this.el.dom since it
|
|
// gets mixed into both Element and Component
|
|
me.el = me;
|
|
|
|
if (!dom) {
|
|
return null;
|
|
}
|
|
|
|
id = dom.id;
|
|
if (!forceNew && id && Ext.cache[id]) {
|
|
// element object already exists
|
|
return Ext.cache[id].el;
|
|
}
|
|
|
|
/**
|
|
* @property {HTMLElement} dom
|
|
* The DOM element
|
|
*/
|
|
me.dom = dom;
|
|
|
|
/**
|
|
* @property {String} id
|
|
* The DOM element ID
|
|
*/
|
|
me.id = id || Ext.id(dom);
|
|
|
|
me.self.addToCache(me);
|
|
},
|
|
|
|
/**
|
|
* Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
|
|
* @param {Object} o The object with the attributes
|
|
* @param {Boolean} [useSet=true] false to override the default setAttribute to use expandos.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
set: function(o, useSet) {
|
|
var el = this.dom,
|
|
attr,
|
|
value;
|
|
|
|
for (attr in o) {
|
|
if (o.hasOwnProperty(attr)) {
|
|
value = o[attr];
|
|
if (attr == 'style') {
|
|
this.applyStyles(value);
|
|
}
|
|
else if (attr == 'cls') {
|
|
el.className = value;
|
|
}
|
|
else if (useSet !== false) {
|
|
if (value === undefined) {
|
|
el.removeAttribute(attr);
|
|
} else {
|
|
el.setAttribute(attr, value);
|
|
}
|
|
}
|
|
else {
|
|
el[attr] = value;
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @property {String} defaultUnit
|
|
* The default unit to append to CSS values where a unit isn't provided.
|
|
*/
|
|
defaultUnit: "px",
|
|
|
|
/**
|
|
* Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
|
|
* @param {String} selector The simple selector to test
|
|
* @return {Boolean} True if this element matches the selector, else false
|
|
*/
|
|
is: function(simpleSelector) {
|
|
return Ext.DomQuery.is(this.dom, simpleSelector);
|
|
},
|
|
|
|
/**
|
|
* Returns the value of the "value" attribute
|
|
* @param {Boolean} asNumber true to parse the value as a number
|
|
* @return {String/Number}
|
|
*/
|
|
getValue: function(asNumber) {
|
|
var val = this.dom.value;
|
|
return asNumber ? parseInt(val, 10) : val;
|
|
},
|
|
|
|
/**
|
|
* Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode
|
|
* Ext.removeNode}
|
|
*/
|
|
remove: function() {
|
|
var me = this,
|
|
dom = me.dom;
|
|
|
|
if (me.isAnimate) {
|
|
me.stopAnimation();
|
|
}
|
|
|
|
if (dom) {
|
|
Ext.removeNode(dom);
|
|
delete me.dom;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns true if this element is an ancestor of the passed element
|
|
* @param {HTMLElement/String} el The element to check
|
|
* @return {Boolean} True if this element is an ancestor of el, else false
|
|
*/
|
|
contains: function(el) {
|
|
if (!el) {
|
|
return false;
|
|
}
|
|
|
|
var me = this,
|
|
dom = el.dom || el;
|
|
|
|
// we need el-contains-itself logic here because isAncestor does not do that:
|
|
return (dom === me.dom) || Ext.dom.AbstractElement.isAncestor(me.dom, dom);
|
|
},
|
|
|
|
/**
|
|
* Returns the value of an attribute from the element's underlying DOM node.
|
|
* @param {String} name The attribute name
|
|
* @param {String} [namespace] The namespace in which to look for the attribute
|
|
* @return {String} The attribute value
|
|
*/
|
|
getAttribute: function(name, ns) {
|
|
var dom = this.dom;
|
|
return dom.getAttributeNS(ns, name) || dom.getAttribute(ns + ":" + name) || dom.getAttribute(name) || dom[name];
|
|
},
|
|
|
|
/**
|
|
* Update the innerHTML of this element
|
|
* @param {String} html The new HTML
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
update: function(html) {
|
|
if (this.dom) {
|
|
this.dom.innerHTML = html;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
/**
|
|
* Set the innerHTML of this element
|
|
* @param {String} html The new HTML
|
|
* @return {Ext.Element} this
|
|
*/
|
|
setHTML: function(html) {
|
|
if(this.dom) {
|
|
this.dom.innerHTML = html;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns the innerHTML of an Element or an empty string if the element's
|
|
* dom no longer exists.
|
|
*/
|
|
getHTML: function() {
|
|
return this.dom ? this.dom.innerHTML : '';
|
|
},
|
|
|
|
/**
|
|
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
|
|
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
|
|
* @return {Ext.Element} this
|
|
*/
|
|
hide: function() {
|
|
this.setVisible(false);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
|
|
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
|
|
* @return {Ext.Element} this
|
|
*/
|
|
show: function() {
|
|
this.setVisible(true);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
|
|
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
|
|
* @param {Boolean} visible Whether the element is visible
|
|
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
|
|
* @return {Ext.Element} this
|
|
*/
|
|
setVisible: function(visible, animate) {
|
|
var me = this,
|
|
statics = me.self,
|
|
mode = me.getVisibilityMode(),
|
|
prefix = Ext.baseCSSPrefix;
|
|
|
|
switch (mode) {
|
|
case statics.VISIBILITY:
|
|
me.removeCls([prefix + 'hidden-display', prefix + 'hidden-offsets']);
|
|
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-visibility');
|
|
break;
|
|
|
|
case statics.DISPLAY:
|
|
me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-offsets']);
|
|
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-display');
|
|
break;
|
|
|
|
case statics.OFFSETS:
|
|
me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-display']);
|
|
me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-offsets');
|
|
break;
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
getVisibilityMode: function() {
|
|
// Only flyweights won't have a $cache object, by calling getCache the cache
|
|
// will be created for future accesses. As such, we're eliminating the method
|
|
// call since it's mostly redundant
|
|
var data = (this.$cache || this.getCache()).data,
|
|
visMode = data.visibilityMode;
|
|
|
|
if (visMode === undefined) {
|
|
data.visibilityMode = visMode = this.self.DISPLAY;
|
|
}
|
|
|
|
return visMode;
|
|
},
|
|
|
|
/**
|
|
* Use this to change the visibility mode between {@link #VISIBILITY}, {@link #DISPLAY}, {@link #OFFSETS} or {@link #ASCLASS}.
|
|
*/
|
|
setVisibilityMode: function(mode) {
|
|
(this.$cache || this.getCache()).data.visibilityMode = mode;
|
|
return this;
|
|
},
|
|
|
|
getCache: function() {
|
|
var me = this,
|
|
id = me.dom.id || Ext.id(me.dom);
|
|
|
|
// Note that we do not assign an ID to the calling object here.
|
|
// An Ext.dom.Element will have one assigned at construction, and an Ext.dom.Element.Fly must not have one.
|
|
// We assign an ID to the DOM element if it does not have one.
|
|
me.$cache = Ext.cache[id] || Ext.addCacheEntry(id, null, me.dom);
|
|
|
|
return me.$cache;
|
|
}
|
|
},
|
|
function() {
|
|
var AbstractElement = this;
|
|
|
|
/**
|
|
* @private
|
|
* @member Ext
|
|
*/
|
|
Ext.getDetachedBody = function () {
|
|
var detachedEl = AbstractElement.detachedBodyEl;
|
|
|
|
if (!detachedEl) {
|
|
detachedEl = document.createElement('div');
|
|
AbstractElement.detachedBodyEl = detachedEl = new AbstractElement.Fly(detachedEl);
|
|
detachedEl.isDetachedBody = true;
|
|
}
|
|
|
|
return detachedEl;
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
* @member Ext
|
|
*/
|
|
Ext.getElementById = function (id) {
|
|
var el = document.getElementById(id),
|
|
detachedBodyEl;
|
|
|
|
if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {
|
|
el = detachedBodyEl.dom.querySelector('#' + Ext.escapeId(id));
|
|
}
|
|
|
|
return el;
|
|
};
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method get
|
|
* @inheritdoc Ext.dom.Element#get
|
|
*/
|
|
Ext.get = function(el) {
|
|
return Ext.dom.Element.get(el);
|
|
};
|
|
|
|
this.addStatics({
|
|
/**
|
|
* @class Ext.dom.Element.Fly
|
|
* @alternateClassName Ext.dom.AbstractElement.Fly
|
|
* @extends Ext.dom.Element
|
|
*
|
|
* A non-persistent wrapper for a DOM element which may be used to execute methods of {@link Ext.dom.Element}
|
|
* upon a DOM element without creating an instance of {@link Ext.dom.Element}.
|
|
*
|
|
* A **singleton** instance of this class is returned when you use {@link Ext#fly}
|
|
*
|
|
* Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
|
|
* You should not keep and use the reference to this singleton over multiple lines because methods that you call
|
|
* may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
|
|
*/
|
|
Fly: new Ext.Class({
|
|
// Although here the class is extending from AbstractElement,
|
|
// the class will be overwritten by Element definition with
|
|
// a class extending from Element instead.
|
|
// Therefore above we document it as extending Ext.Element.
|
|
extend: AbstractElement,
|
|
|
|
/**
|
|
* @property {Boolean} isFly
|
|
* This is `true` to identify Element flyweights
|
|
*/
|
|
isFly: true,
|
|
|
|
constructor: function(dom) {
|
|
this.dom = dom;
|
|
// set an "el" property that references "this". This allows
|
|
// Ext.util.Positionable methods to operate on this.el.dom since it
|
|
// gets mixed into both Element and Component
|
|
this.el = this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Attach this fliyweight instance to the passed DOM element.
|
|
*
|
|
* Note that a flightweight does **not** have an ID, and does not acquire the ID of the DOM element.
|
|
*/
|
|
attach: function (dom) {
|
|
|
|
// Attach to the passed DOM element. The same code as in Ext.Fly
|
|
this.dom = dom;
|
|
// Use cached data if there is existing cached data for the referenced DOM element,
|
|
// otherwise it will be created when needed by getCache.
|
|
this.$cache = dom.id ? Ext.cache[dom.id] : null;
|
|
return this;
|
|
}
|
|
}),
|
|
|
|
_flyweights: {},
|
|
|
|
/**
|
|
* Gets the singleton {@link Ext.dom.Element.Fly flyweight} element, with the passed node as the active element.
|
|
*
|
|
* Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
|
|
* You may not keep and use the reference to this singleton over multiple lines because methods that you call
|
|
* may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
|
|
*
|
|
* {@link Ext#fly} is alias for {@link Ext.dom.AbstractElement#fly}.
|
|
*
|
|
* Use this to make one-time references to DOM elements which are not going to be accessed again either by
|
|
* application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link
|
|
* Ext#get Ext.get} will be more appropriate to take advantage of the caching provided by the Ext.dom.Element
|
|
* class.
|
|
*
|
|
* @param {String/HTMLElement} dom The dom node or id
|
|
* @param {String} [named] Allows for creation of named reusable flyweights to prevent conflicts (e.g.
|
|
* internally Ext uses "_global")
|
|
* @return {Ext.dom.Element.Fly} The singleton flyweight object (or null if no matching element was found)
|
|
* @static
|
|
* @member Ext.dom.AbstractElement
|
|
*/
|
|
fly: function(dom, named) {
|
|
var fly = null,
|
|
_flyweights = AbstractElement._flyweights;
|
|
|
|
named = named || '_global';
|
|
|
|
dom = Ext.getDom(dom);
|
|
|
|
if (dom) {
|
|
fly = _flyweights[named] || (_flyweights[named] = new AbstractElement.Fly());
|
|
|
|
// Attach to the passed DOM element.
|
|
// This code performs the same function as Fly.attach, but inline it for efficiency
|
|
fly.dom = dom;
|
|
// Use cached data if there is existing cached data for the referenced DOM element,
|
|
// otherwise it will be created when needed by getCache.
|
|
fly.$cache = dom.id ? Ext.cache[dom.id] : null;
|
|
}
|
|
return fly;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method fly
|
|
* @inheritdoc Ext.dom.AbstractElement#fly
|
|
*/
|
|
Ext.fly = function() {
|
|
return AbstractElement.fly.apply(AbstractElement, arguments);
|
|
};
|
|
|
|
(function (proto) {
|
|
/**
|
|
* @method destroy
|
|
* @member Ext.dom.AbstractElement
|
|
* @inheritdoc Ext.dom.AbstractElement#remove
|
|
* Alias to {@link #remove}.
|
|
*/
|
|
proto.destroy = proto.remove;
|
|
|
|
/**
|
|
* Returns a child element of this element given its `id`.
|
|
* @method getById
|
|
* @member Ext.dom.AbstractElement
|
|
* @param {String} id The id of the desired child element.
|
|
* @param {Boolean} [asDom=false] True to return the DOM element, false to return a
|
|
* wrapped Element object.
|
|
*/
|
|
if (document.querySelector) {
|
|
proto.getById = function (id, asDom) {
|
|
// for normal elements getElementById is the best solution, but if the el is
|
|
// not part of the document.body, we have to resort to querySelector
|
|
var dom = document.getElementById(id) ||
|
|
this.dom.querySelector('#'+Ext.escapeId(id));
|
|
return asDom ? dom : (dom ? Ext.get(dom) : null);
|
|
};
|
|
} else {
|
|
proto.getById = function (id, asDom) {
|
|
var dom = document.getElementById(id);
|
|
return asDom ? dom : (dom ? Ext.get(dom) : null);
|
|
};
|
|
}
|
|
}(this.prototype));
|
|
});
|
|
|
|
// @tag dom,core
|
|
// @define Ext.DomHelper
|
|
|
|
// @define Ext.core.DomHelper
|
|
|
|
/**
|
|
* @class Ext.DomHelper
|
|
* @extends Ext.dom.Helper
|
|
* @alternateClassName Ext.core.DomHelper
|
|
* @singleton
|
|
*
|
|
* The DomHelper class provides a layer of abstraction from DOM and transparently supports creating elements via DOM or
|
|
* using HTML fragments. It also has the ability to create HTML fragment templates from your DOM building code.
|
|
*
|
|
* # DomHelper element specification object
|
|
*
|
|
* A specification object is used when creating elements. Attributes of this object are assumed to be element
|
|
* attributes, except for 4 special attributes:
|
|
*
|
|
* - **tag** - The tag name of the element.
|
|
* - **children** or **cn** - An array of the same kind of element definition objects to be created and appended.
|
|
* These can be nested as deep as you want.
|
|
* - **cls** - The class attribute of the element. This will end up being either the "class" attribute on a HTML
|
|
* fragment or className for a DOM node, depending on whether DomHelper is using fragments or DOM.
|
|
* - **html** - The innerHTML for the element.
|
|
*
|
|
* **NOTE:** For other arbitrary attributes, the value will currently **not** be automatically HTML-escaped prior to
|
|
* building the element's HTML string. This means that if your attribute value contains special characters that would
|
|
* not normally be allowed in a double-quoted attribute value, you **must** manually HTML-encode it beforehand (see
|
|
* {@link Ext.String#htmlEncode}) or risk malformed HTML being created. This behavior may change in a future release.
|
|
*
|
|
* # Insertion methods
|
|
*
|
|
* Commonly used insertion methods:
|
|
*
|
|
* - **{@link #append}**
|
|
* - **{@link #insertBefore}**
|
|
* - **{@link #insertAfter}**
|
|
* - **{@link #overwrite}**
|
|
* - **{@link #createTemplate}**
|
|
* - **{@link #insertHtml}**
|
|
*
|
|
* # Example
|
|
*
|
|
* This is an example, where an unordered list with 3 children items is appended to an existing element with
|
|
* id 'my-div':
|
|
*
|
|
* var dh = Ext.DomHelper; // create shorthand alias
|
|
* // specification object
|
|
* var spec = {
|
|
* id: 'my-ul',
|
|
* tag: 'ul',
|
|
* cls: 'my-list',
|
|
* // append children after creating
|
|
* children: [ // may also specify 'cn' instead of 'children'
|
|
* {tag: 'li', id: 'item0', html: 'List Item 0'},
|
|
* {tag: 'li', id: 'item1', html: 'List Item 1'},
|
|
* {tag: 'li', id: 'item2', html: 'List Item 2'}
|
|
* ]
|
|
* };
|
|
* var list = dh.append(
|
|
* 'my-div', // the context element 'my-div' can either be the id or the actual node
|
|
* spec // the specification object
|
|
* );
|
|
*
|
|
* Element creation specification parameters in this class may also be passed as an Array of specification objects. This
|
|
* can be used to insert multiple sibling nodes into an existing container very efficiently. For example, to add more
|
|
* list items to the example above:
|
|
*
|
|
* dh.append('my-ul', [
|
|
* {tag: 'li', id: 'item3', html: 'List Item 3'},
|
|
* {tag: 'li', id: 'item4', html: 'List Item 4'}
|
|
* ]);
|
|
*
|
|
* # Templating
|
|
*
|
|
* The real power is in the built-in templating. Instead of creating or appending any elements, {@link #createTemplate}
|
|
* returns a Template object which can be used over and over to insert new elements. Revisiting the example above, we
|
|
* could utilize templating this time:
|
|
*
|
|
* // create the node
|
|
* var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
|
|
* // get template
|
|
* var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
|
|
*
|
|
* for(var i = 0; i < 5, i++){
|
|
* tpl.append(list, [i]); // use template to append to the actual node
|
|
* }
|
|
*
|
|
* An example using a template:
|
|
*
|
|
* var html = '<a id="{0}" href="{1}" class="nav">{2}</a>';
|
|
*
|
|
* var tpl = new Ext.DomHelper.createTemplate(html);
|
|
* tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
|
|
* tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
|
|
*
|
|
* The same example using named parameters:
|
|
*
|
|
* var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
|
|
*
|
|
* var tpl = new Ext.DomHelper.createTemplate(html);
|
|
* tpl.append('blog-roll', {
|
|
* id: 'link1',
|
|
* url: 'http://www.edspencer.net/',
|
|
* text: "Ed's Site"
|
|
* });
|
|
* tpl.append('blog-roll', {
|
|
* id: 'link2',
|
|
* url: 'http://www.dustindiaz.com/',
|
|
* text: "Dustin's Site"
|
|
* });
|
|
*
|
|
* # Compiling Templates
|
|
*
|
|
* Templates are applied using regular expressions. The performance is great, but if you are adding a bunch of DOM
|
|
* elements using the same template, you can increase performance even further by {@link Ext.Template#compile
|
|
* "compiling"} the template. The way "{@link Ext.Template#compile compile()}" works is the template is parsed and
|
|
* broken up at the different variable points and a dynamic function is created and eval'ed. The generated function
|
|
* performs string concatenation of these parts and the passed variables instead of using regular expressions.
|
|
*
|
|
* var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
|
|
*
|
|
* var tpl = new Ext.DomHelper.createTemplate(html);
|
|
* tpl.compile();
|
|
*
|
|
* //... use template like normal
|
|
*
|
|
* # Performance Boost
|
|
*
|
|
* DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead of DOM can significantly
|
|
* boost performance.
|
|
*
|
|
* Element creation specification parameters may also be strings. If {@link #useDom} is false, then the string is used
|
|
* as innerHTML. If {@link #useDom} is true, a string specification results in the creation of a text node. Usage:
|
|
*
|
|
* Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
|
|
*
|
|
*/
|
|
Ext.define('Ext.dom.Helper', (function() {
|
|
|
|
// kill repeat to save bytes
|
|
var afterbegin = 'afterbegin',
|
|
afterend = 'afterend',
|
|
beforebegin = 'beforebegin',
|
|
beforeend = 'beforeend',
|
|
ts = '<table>',
|
|
te = '</table>',
|
|
tbs = ts+'<tbody>',
|
|
tbe = '</tbody>'+te,
|
|
trs = tbs + '<tr>',
|
|
tre = '</tr>'+tbe,
|
|
detachedDiv = document.createElement('div'),
|
|
bbValues = ['BeforeBegin', 'previousSibling'],
|
|
aeValues = ['AfterEnd', 'nextSibling'],
|
|
bb_ae_PositionHash = {
|
|
beforebegin: bbValues,
|
|
afterend: aeValues
|
|
},
|
|
fullPositionHash = {
|
|
beforebegin: bbValues,
|
|
afterend: aeValues,
|
|
afterbegin: ['AfterBegin', 'firstChild'],
|
|
beforeend: ['BeforeEnd', 'lastChild']
|
|
};
|
|
|
|
/**
|
|
* @class Ext.dom.Helper
|
|
* @extends Ext.dom.AbstractHelper
|
|
* @requires Ext.dom.AbstractElement
|
|
*
|
|
* The actual class of which {@link Ext.DomHelper} is instance of.
|
|
*
|
|
* Use singleton {@link Ext.DomHelper} instead.
|
|
*
|
|
* @private
|
|
*/
|
|
return {
|
|
extend: Ext.dom.AbstractHelper ,
|
|
|
|
|
|
tableRe: /^(?:table|thead|tbody|tr|td)$/i,
|
|
|
|
tableElRe: /td|tr|tbody|thead/i,
|
|
|
|
/**
|
|
* @property {Boolean} useDom
|
|
* True to force the use of DOM instead of html fragments.
|
|
*/
|
|
useDom : false,
|
|
|
|
/**
|
|
* Creates new DOM element(s) without inserting them to the document.
|
|
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
|
|
* @return {HTMLElement} The new uninserted node
|
|
*/
|
|
createDom: function(o, parentNode){
|
|
var el,
|
|
doc = document,
|
|
useSet,
|
|
attr,
|
|
val,
|
|
cn,
|
|
i, l;
|
|
|
|
if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted
|
|
el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
|
|
for (i = 0, l = o.length; i < l; i++) {
|
|
this.createDom(o[i], el);
|
|
}
|
|
} else if (typeof o == 'string') { // Allow a string as a child spec.
|
|
el = doc.createTextNode(o);
|
|
} else {
|
|
el = doc.createElement(o.tag || 'div');
|
|
useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
|
|
for (attr in o) {
|
|
if (!this.confRe.test(attr)) {
|
|
val = o[attr];
|
|
if (attr == 'cls') {
|
|
el.className = val;
|
|
} else {
|
|
if (useSet) {
|
|
el.setAttribute(attr, val);
|
|
} else {
|
|
el[attr] = val;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Ext.DomHelper.applyStyles(el, o.style);
|
|
|
|
if ((cn = o.children || o.cn)) {
|
|
this.createDom(cn, el);
|
|
} else if (o.html) {
|
|
el.innerHTML = o.html;
|
|
}
|
|
}
|
|
if (parentNode) {
|
|
parentNode.appendChild(el);
|
|
}
|
|
return el;
|
|
},
|
|
|
|
ieTable: function(depth, openingTags, htmlContent, closingTags){
|
|
detachedDiv.innerHTML = [openingTags, htmlContent, closingTags].join('');
|
|
|
|
var i = -1,
|
|
el = detachedDiv,
|
|
ns;
|
|
|
|
while (++i < depth) {
|
|
el = el.firstChild;
|
|
}
|
|
// If the result is multiple siblings, then encapsulate them into one fragment.
|
|
ns = el.nextSibling;
|
|
|
|
if (ns) {
|
|
ns = el;
|
|
el = document.createDocumentFragment();
|
|
|
|
while (ns) {
|
|
nx = ns.nextSibling;
|
|
el.appendChild(ns);
|
|
ns = nx;
|
|
}
|
|
}
|
|
return el;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Nasty code for IE's broken table implementation
|
|
*/
|
|
insertIntoTable: function(tag, where, destinationEl, html) {
|
|
var node,
|
|
before,
|
|
bb = where == beforebegin,
|
|
ab = where == afterbegin,
|
|
be = where == beforeend,
|
|
ae = where == afterend;
|
|
|
|
if (tag == 'td' && (ab || be) || !this.tableElRe.test(tag) && (bb || ae)) {
|
|
return null;
|
|
}
|
|
before = bb ? destinationEl :
|
|
ae ? destinationEl.nextSibling :
|
|
ab ? destinationEl.firstChild : null;
|
|
|
|
if (bb || ae) {
|
|
destinationEl = destinationEl.parentNode;
|
|
}
|
|
|
|
if (tag == 'td' || (tag == 'tr' && (be || ab))) {
|
|
node = this.ieTable(4, trs, html, tre);
|
|
} else if (((tag == 'tbody' || tag == 'thead') && (be || ab)) ||
|
|
(tag == 'tr' && (bb || ae))) {
|
|
node = this.ieTable(3, tbs, html, tbe);
|
|
} else {
|
|
node = this.ieTable(2, ts, html, te);
|
|
}
|
|
destinationEl.insertBefore(node, before);
|
|
return node;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fix for IE9 createContextualFragment missing method
|
|
*/
|
|
createContextualFragment: function(html) {
|
|
var fragment = document.createDocumentFragment(),
|
|
length, childNodes;
|
|
|
|
detachedDiv.innerHTML = html;
|
|
childNodes = detachedDiv.childNodes;
|
|
length = childNodes.length;
|
|
|
|
// Move nodes into fragment, don't clone: http://jsperf.com/create-fragment
|
|
while (length--) {
|
|
fragment.appendChild(childNodes[0]);
|
|
}
|
|
return fragment;
|
|
},
|
|
|
|
applyStyles: function(el, styles) {
|
|
if (styles) {
|
|
if (typeof styles == "function") {
|
|
styles = styles.call();
|
|
}
|
|
if (typeof styles == "string") {
|
|
styles = Ext.dom.Element.parseStyles(styles);
|
|
}
|
|
if (typeof styles == "object") {
|
|
Ext.fly(el, '_applyStyles').setStyle(styles);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Alias for {@link #markup}.
|
|
* @inheritdoc Ext.dom.AbstractHelper#markup
|
|
*/
|
|
createHtml: function(spec) {
|
|
return this.markup(spec);
|
|
},
|
|
|
|
doInsert: function(el, o, returnElement, pos, sibling, append) {
|
|
|
|
el = el.dom || Ext.getDom(el);
|
|
|
|
var newNode;
|
|
|
|
if (this.useDom) {
|
|
newNode = this.createDom(o, null);
|
|
|
|
if (append) {
|
|
el.appendChild(newNode);
|
|
}
|
|
else {
|
|
(sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
|
|
}
|
|
|
|
} else {
|
|
newNode = this.insertHtml(pos, el, this.markup(o));
|
|
}
|
|
return returnElement ? Ext.get(newNode, true) : newNode;
|
|
},
|
|
|
|
/**
|
|
* Creates new DOM element(s) and overwrites the contents of el with them.
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
|
|
* @param {Boolean} [returnElement] true to return an Ext.Element
|
|
* @return {HTMLElement/Ext.Element} The new node
|
|
*/
|
|
overwrite: function(el, html, returnElement) {
|
|
var newNode;
|
|
|
|
el = Ext.getDom(el);
|
|
html = this.markup(html);
|
|
|
|
// IE Inserting HTML into a table/tbody/tr requires extra processing: http://www.ericvasilik.com/2006/07/code-karma.html
|
|
if (Ext.isIE && this.tableRe.test(el.tagName)) {
|
|
// Clearing table elements requires removal of all elements.
|
|
while (el.firstChild) {
|
|
el.removeChild(el.firstChild);
|
|
}
|
|
if (html) {
|
|
newNode = this.insertHtml('afterbegin', el, html);
|
|
return returnElement ? Ext.get(newNode) : newNode;
|
|
}
|
|
return null;
|
|
}
|
|
el.innerHTML = html;
|
|
return returnElement ? Ext.get(el.firstChild) : el.firstChild;
|
|
},
|
|
|
|
insertHtml: function(where, el, html) {
|
|
var hashVal,
|
|
range,
|
|
rangeEl,
|
|
setStart,
|
|
frag;
|
|
|
|
where = where.toLowerCase();
|
|
|
|
// Has fast HTML insertion into existing DOM: http://www.w3.org/TR/html5/apis-in-html-documents.html#insertadjacenthtml
|
|
if (el.insertAdjacentHTML) {
|
|
|
|
// IE's incomplete table implementation: http://www.ericvasilik.com/2006/07/code-karma.html
|
|
if (Ext.isIE && this.tableRe.test(el.tagName) && (frag = this.insertIntoTable(el.tagName.toLowerCase(), where, el, html))) {
|
|
return frag;
|
|
}
|
|
|
|
if ((hashVal = fullPositionHash[where])) {
|
|
|
|
if (Ext.global.MSApp && Ext.global.MSApp.execUnsafeLocalFunction) {
|
|
//ALLOW MS TO EXECUTE THIS CODE FOR NATIVE WINDOWS 8 DESKTOP APPS
|
|
MSApp.execUnsafeLocalFunction(function () {
|
|
el.insertAdjacentHTML(hashVal[0], html);
|
|
});
|
|
} else {
|
|
el.insertAdjacentHTML(hashVal[0], html);
|
|
}
|
|
|
|
return el[hashVal[1]];
|
|
}
|
|
// if (not IE and context element is an HTMLElement) or TextNode
|
|
} else {
|
|
// we cannot insert anything inside a textnode so...
|
|
if (el.nodeType === 3) {
|
|
where = where === 'afterbegin' ? 'beforebegin' : where;
|
|
where = where === 'beforeend' ? 'afterend' : where;
|
|
}
|
|
range = Ext.supports.CreateContextualFragment ? el.ownerDocument.createRange() : undefined;
|
|
setStart = 'setStart' + (this.endRe.test(where) ? 'After' : 'Before');
|
|
if (bb_ae_PositionHash[where]) {
|
|
if (range) {
|
|
range[setStart](el);
|
|
frag = range.createContextualFragment(html);
|
|
} else {
|
|
frag = this.createContextualFragment(html);
|
|
}
|
|
el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling);
|
|
return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling'];
|
|
} else {
|
|
rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child';
|
|
if (el.firstChild) {
|
|
if (range) {
|
|
range[setStart](el[rangeEl]);
|
|
frag = range.createContextualFragment(html);
|
|
} else {
|
|
frag = this.createContextualFragment(html);
|
|
}
|
|
|
|
if (where == afterbegin) {
|
|
el.insertBefore(frag, el.firstChild);
|
|
} else {
|
|
el.appendChild(frag);
|
|
}
|
|
} else {
|
|
el.innerHTML = html;
|
|
}
|
|
return el[rangeEl];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates a new Ext.Template from the DOM object spec.
|
|
* @param {Object} o The DOM object spec (and children)
|
|
* @return {Ext.Template} The new template
|
|
*/
|
|
createTemplate: function(o) {
|
|
var html = this.markup(o);
|
|
return new Ext.Template(html);
|
|
}
|
|
|
|
};
|
|
})(), function() {
|
|
Ext.ns('Ext.core');
|
|
Ext.DomHelper = Ext.core.DomHelper = new this;
|
|
});
|
|
|
|
// @tag core
|
|
/**
|
|
* Represents an HTML fragment template. Templates may be {@link #compile precompiled} for greater performance.
|
|
*
|
|
* An instance of this class may be created by passing to the constructor either a single argument, or multiple
|
|
* arguments:
|
|
*
|
|
* # Single argument: String/Array
|
|
*
|
|
* The single argument may be either a String or an Array:
|
|
*
|
|
* - String:
|
|
*
|
|
* var t = new Ext.Template("<div>Hello {0}.</div>");
|
|
* t.{@link #append}('some-element', ['foo']);
|
|
*
|
|
* - Array:
|
|
*
|
|
* An Array will be combined with `join('')`.
|
|
*
|
|
* var t = new Ext.Template([
|
|
* '<div name="{id}">',
|
|
* '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
|
|
* '</div>',
|
|
* ]);
|
|
* t.{@link #compile}();
|
|
* t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
|
|
*
|
|
* # Multiple arguments: String, Object, Array, ...
|
|
*
|
|
* Multiple arguments will be combined with `join('')`.
|
|
*
|
|
* var t = new Ext.Template(
|
|
* '<div name="{id}">',
|
|
* '<span class="{cls}">{name} {value}</span>',
|
|
* '</div>',
|
|
* // a configuration object:
|
|
* {
|
|
* compiled: true, // {@link #compile} immediately
|
|
* }
|
|
* );
|
|
*
|
|
* # Notes
|
|
*
|
|
* - For a list of available format functions, see {@link Ext.util.Format}.
|
|
* - `disableFormats` reduces `{@link #apply}` time when no formatting is required.
|
|
*/
|
|
Ext.define('Ext.Template', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
inheritableStatics: {
|
|
/**
|
|
* Creates a template from the passed element's value (_display:none_ textarea, preferred) or innerHTML.
|
|
* @param {String/HTMLElement} el A DOM element or its id
|
|
* @param {Object} config (optional) Config object
|
|
* @return {Ext.Template} The created template
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
from: function(el, config) {
|
|
el = Ext.getDom(el);
|
|
return new this(el.value || el.innerHTML, config || '');
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* Creates new template.
|
|
*
|
|
* @param {String...} html List of strings to be concatenated into template.
|
|
* Alternatively an array of strings can be given, but then no config object may be passed.
|
|
* @param {Object} config (optional) Config object
|
|
*/
|
|
constructor: function(html) {
|
|
var me = this,
|
|
args = arguments,
|
|
buffer = [],
|
|
i = 0,
|
|
length = args.length,
|
|
value;
|
|
|
|
me.initialConfig = {};
|
|
|
|
// Allow an array to be passed here so we can
|
|
// pass an array of strings and an object
|
|
// at the end
|
|
if (length === 1 && Ext.isArray(html)) {
|
|
args = html;
|
|
length = args.length;
|
|
}
|
|
|
|
if (length > 1) {
|
|
for (; i < length; i++) {
|
|
value = args[i];
|
|
if (typeof value == 'object') {
|
|
Ext.apply(me.initialConfig, value);
|
|
Ext.apply(me, value);
|
|
} else {
|
|
buffer.push(value);
|
|
}
|
|
}
|
|
} else {
|
|
buffer.push(html);
|
|
}
|
|
|
|
// @private
|
|
me.html = buffer.join('');
|
|
|
|
if (me.compiled) {
|
|
me.compile();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} isTemplate
|
|
* `true` in this class to identify an object as an instantiated Template, or subclass thereof.
|
|
*/
|
|
isTemplate: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} compiled
|
|
* True to immediately compile the template. Defaults to false.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} disableFormats
|
|
* True to disable format functions in the template. If the template doesn't contain
|
|
* format functions, setting disableFormats to true will reduce apply time. Defaults to false.
|
|
*/
|
|
disableFormats: false,
|
|
|
|
re: /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
|
|
|
|
/**
|
|
* 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:
|
|
*
|
|
* var tpl = new Ext.Template('Name: {0}, Age: {1}');
|
|
* tpl.apply(['John', 25]);
|
|
*
|
|
* or an object:
|
|
*
|
|
* var tpl = new Ext.Template('Name: {name}, Age: {age}');
|
|
* tpl.apply({name: 'John', age: 25});
|
|
*
|
|
* @return {String} The HTML fragment
|
|
*/
|
|
apply: function(values) {
|
|
var me = this,
|
|
useFormat = me.disableFormats !== true,
|
|
fm = Ext.util.Format,
|
|
tpl = me,
|
|
ret;
|
|
|
|
if (me.compiled) {
|
|
return me.compiled(values).join('');
|
|
}
|
|
|
|
function fn(m, name, format, args) {
|
|
if (format && useFormat) {
|
|
if (args) {
|
|
args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
|
|
} else {
|
|
args = [values[name]];
|
|
}
|
|
if (format.substr(0, 5) == "this.") {
|
|
return tpl[format.substr(5)].apply(tpl, args);
|
|
}
|
|
else {
|
|
return fm[format].apply(fm, args);
|
|
}
|
|
}
|
|
else {
|
|
return values[name] !== undefined ? values[name] : "";
|
|
}
|
|
}
|
|
|
|
ret = me.html.replace(me.re, fn);
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Appends the result of this template to the provided output array.
|
|
* @param {Object/Array} values The template values. See {@link #apply}.
|
|
* @param {Array} out The array to which output is pushed.
|
|
* @return {Array} The given out array.
|
|
*/
|
|
applyOut: function(values, out) {
|
|
var me = this;
|
|
|
|
if (me.compiled) {
|
|
out.push.apply(out, me.compiled(values));
|
|
} else {
|
|
out.push(me.apply(values));
|
|
}
|
|
|
|
return out;
|
|
},
|
|
|
|
/**
|
|
* @method applyTemplate
|
|
* @member Ext.Template
|
|
* Alias for {@link #apply}.
|
|
* @inheritdoc Ext.Template#apply
|
|
*/
|
|
applyTemplate: function () {
|
|
return this.apply.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Sets the HTML used as the template and optionally compiles it.
|
|
* @param {String} html
|
|
* @param {Boolean} compile (optional) True to compile the template.
|
|
* @return {Ext.Template} this
|
|
*/
|
|
set: function(html, compile) {
|
|
var me = this;
|
|
me.html = html;
|
|
me.compiled = null;
|
|
return compile ? me.compile() : me;
|
|
},
|
|
|
|
compileARe: /\\/g,
|
|
compileBRe: /(\r\n|\n)/g,
|
|
compileCRe: /'/g,
|
|
|
|
/**
|
|
* Compiles the template into an internal function, eliminating the RegEx overhead.
|
|
* @return {Ext.Template} this
|
|
*/
|
|
compile: function() {
|
|
var me = this,
|
|
fm = Ext.util.Format,
|
|
useFormat = me.disableFormats !== true,
|
|
body, bodyReturn;
|
|
|
|
function fn(m, name, format, args) {
|
|
if (format && useFormat) {
|
|
args = args ? ',' + args: "";
|
|
if (format.substr(0, 5) != "this.") {
|
|
format = "fm." + format + '(';
|
|
}
|
|
else {
|
|
format = 'this.' + format.substr(5) + '(';
|
|
}
|
|
}
|
|
else {
|
|
args = '';
|
|
format = "(values['" + name + "'] == undefined ? '' : ";
|
|
}
|
|
return "'," + format + "values['" + name + "']" + args + ") ,'";
|
|
}
|
|
|
|
bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn);
|
|
body = "this.compiled = function(values){ return ['" + bodyReturn + "'];};";
|
|
eval(body);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Applies the supplied values to the template and inserts the new node(s) as the first child of el.
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
|
|
* @param {Boolean} returnElement (optional) true to return a Ext.Element.
|
|
* @return {HTMLElement/Ext.Element} The new node or Element
|
|
*/
|
|
insertFirst: function(el, values, returnElement) {
|
|
return this.doInsert('afterBegin', el, values, returnElement);
|
|
},
|
|
|
|
/**
|
|
* Applies the supplied values to the template and inserts the new node(s) before el.
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
|
|
* @param {Boolean} returnElement (optional) true to return a Ext.Element.
|
|
* @return {HTMLElement/Ext.Element} The new node or Element
|
|
*/
|
|
insertBefore: function(el, values, returnElement) {
|
|
return this.doInsert('beforeBegin', el, values, returnElement);
|
|
},
|
|
|
|
/**
|
|
* Applies the supplied values to the template and inserts the new node(s) after el.
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
|
|
* @param {Boolean} returnElement (optional) true to return a Ext.Element.
|
|
* @return {HTMLElement/Ext.Element} The new node or Element
|
|
*/
|
|
insertAfter: function(el, values, returnElement) {
|
|
return this.doInsert('afterEnd', el, values, returnElement);
|
|
},
|
|
|
|
/**
|
|
* Applies the supplied `values` to the template and appends the new node(s) to the specified `el`.
|
|
*
|
|
* For example usage see {@link Ext.Template Ext.Template class docs}.
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
|
|
* @param {Boolean} returnElement (optional) true to return an Ext.Element.
|
|
* @return {HTMLElement/Ext.Element} The new node or Element
|
|
*/
|
|
append: function(el, values, returnElement) {
|
|
return this.doInsert('beforeEnd', el, values, returnElement);
|
|
},
|
|
|
|
doInsert: function(where, el, values, returnElement) {
|
|
var newNode = Ext.DomHelper.insertHtml(where, Ext.getDom(el), this.apply(values));
|
|
return returnElement ? Ext.get(newNode) : newNode;
|
|
},
|
|
|
|
/**
|
|
* Applies the supplied values to the template and overwrites the content of el with the new node(s).
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} el The context element
|
|
* @param {Object/Array} values The template values. See {@link #applyTemplate} for details.
|
|
* @param {Boolean} returnElement (optional) true to return a Ext.Element.
|
|
* @return {HTMLElement/Ext.Element} The new node or Element
|
|
*/
|
|
overwrite: function(el, values, returnElement) {
|
|
var newNode = Ext.DomHelper.overwrite(Ext.getDom(el), this.apply(values));
|
|
return returnElement ? Ext.get(newNode) : newNode;
|
|
}
|
|
});
|
|
|
|
// @tag core
|
|
/**
|
|
* This class parses the XTemplate syntax and calls abstract methods to process the parts.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.XTemplateParser', {
|
|
constructor: function (config) {
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
/**
|
|
* @property {Number} level The 'for' or 'foreach' loop context level. This is adjusted
|
|
* up by one prior to calling {@link #doFor} or {@link #doForEach} and down by one after
|
|
* calling the corresponding {@link #doEnd} that closes the loop. This will be 1 on the
|
|
* first {@link #doFor} or {@link #doForEach} call.
|
|
*/
|
|
|
|
/**
|
|
* This method is called to process a piece of raw text from the tpl.
|
|
* @param {String} text
|
|
* @method doText
|
|
*/
|
|
// doText: function (text)
|
|
|
|
/**
|
|
* This method is called to process expressions (like `{[expr]}`).
|
|
* @param {String} expr The body of the expression (inside "{[" and "]}").
|
|
* @method doExpr
|
|
*/
|
|
// doExpr: function (expr)
|
|
|
|
/**
|
|
* This method is called to process simple tags (like `{tag}`).
|
|
* @method doTag
|
|
*/
|
|
// doTag: function (tag)
|
|
|
|
/**
|
|
* This method is called to process `<tpl else>`.
|
|
* @method doElse
|
|
*/
|
|
// doElse: function ()
|
|
|
|
/**
|
|
* This method is called to process `{% text %}`.
|
|
* @param {String} text
|
|
* @method doEval
|
|
*/
|
|
// doEval: function (text)
|
|
|
|
/**
|
|
* This method is called to process `<tpl if="action">`. If there are other attributes,
|
|
* these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name (such as 'exec').
|
|
* @method doIf
|
|
*/
|
|
// doIf: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl elseif="action">`. If there are other attributes,
|
|
* these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name (such as 'exec').
|
|
* @method doElseIf
|
|
*/
|
|
// doElseIf: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl switch="action">`. If there are other attributes,
|
|
* these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name (such as 'exec').
|
|
* @method doSwitch
|
|
*/
|
|
// doSwitch: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl case="action">`. If there are other attributes,
|
|
* these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name (such as 'exec').
|
|
* @method doCase
|
|
*/
|
|
// doCase: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl default>`.
|
|
* @method doDefault
|
|
*/
|
|
// doDefault: function ()
|
|
|
|
/**
|
|
* This method is called to process `</tpl>`. It is given the action type that started
|
|
* the tpl and the set of additional actions.
|
|
* @param {String} type The type of action that is being ended.
|
|
* @param {Object} actions The other actions keyed by the attribute name (such as 'exec').
|
|
* @method doEnd
|
|
*/
|
|
// doEnd: function (type, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl for="action">`. If there are other attributes,
|
|
* these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name (such as 'exec').
|
|
* @method doFor
|
|
*/
|
|
// doFor: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl foreach="action">`. If there are other
|
|
* attributes, these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name (such as 'exec').
|
|
* @method doForEach
|
|
*/
|
|
// doForEach: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process `<tpl exec="action">`. If there are other attributes,
|
|
* these are passed in the actions object.
|
|
* @param {String} action
|
|
* @param {Object} actions Other actions keyed by the attribute name.
|
|
* @method doExec
|
|
*/
|
|
// doExec: function (action, actions)
|
|
|
|
/**
|
|
* This method is called to process an empty `<tpl>`. This is unlikely to need to be
|
|
* implemented, so a default (do nothing) version is provided.
|
|
* @method
|
|
*/
|
|
doTpl: Ext.emptyFn,
|
|
|
|
parse: function (str) {
|
|
var me = this,
|
|
len = str.length,
|
|
aliases = { elseif: 'elif' },
|
|
topRe = me.topRe,
|
|
actionsRe = me.actionsRe,
|
|
index, stack, s, m, t, prev, frame, subMatch, begin, end, actions,
|
|
prop;
|
|
|
|
me.level = 0;
|
|
me.stack = stack = [];
|
|
|
|
for (index = 0; index < len; index = end) {
|
|
topRe.lastIndex = index;
|
|
m = topRe.exec(str);
|
|
|
|
if (!m) {
|
|
me.doText(str.substring(index, len));
|
|
break;
|
|
}
|
|
|
|
begin = m.index;
|
|
end = topRe.lastIndex;
|
|
|
|
if (index < begin) {
|
|
me.doText(str.substring(index, begin));
|
|
}
|
|
|
|
if (m[1]) {
|
|
end = str.indexOf('%}', begin+2);
|
|
me.doEval(str.substring(begin+2, end));
|
|
end += 2;
|
|
} else if (m[2]) {
|
|
end = str.indexOf(']}', begin+2);
|
|
me.doExpr(str.substring(begin+2, end));
|
|
end += 2;
|
|
} else if (m[3]) { // if ('{' token)
|
|
me.doTag(m[3]);
|
|
} else if (m[4]) { // content of a <tpl xxxxxx xxx> tag
|
|
actions = null;
|
|
while ((subMatch = actionsRe.exec(m[4])) !== null) {
|
|
s = subMatch[2] || subMatch[3];
|
|
if (s) {
|
|
s = Ext.String.htmlDecode(s); // decode attr value
|
|
t = subMatch[1];
|
|
t = aliases[t] || t;
|
|
actions = actions || {};
|
|
prev = actions[t];
|
|
|
|
if (typeof prev == 'string') {
|
|
actions[t] = [prev, s];
|
|
} else if (prev) {
|
|
actions[t].push(s);
|
|
} else {
|
|
actions[t] = s;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!actions) {
|
|
if (me.elseRe.test(m[4])) {
|
|
me.doElse();
|
|
} else if (me.defaultRe.test(m[4])) {
|
|
me.doDefault();
|
|
} else {
|
|
me.doTpl();
|
|
stack.push({ type: 'tpl' });
|
|
}
|
|
}
|
|
else if (actions['if']) {
|
|
me.doIf(actions['if'], actions);
|
|
stack.push({ type: 'if' });
|
|
}
|
|
else if (actions['switch']) {
|
|
me.doSwitch(actions['switch'], actions);
|
|
stack.push({ type: 'switch' });
|
|
}
|
|
else if (actions['case']) {
|
|
me.doCase(actions['case'], actions);
|
|
}
|
|
else if (actions['elif']) {
|
|
me.doElseIf(actions['elif'], actions);
|
|
}
|
|
else if (actions['for']) {
|
|
++me.level;
|
|
|
|
// Extract property name to use from indexed item
|
|
if (prop = me.propRe.exec(m[4])) {
|
|
actions.propName = prop[1] || prop[2];
|
|
}
|
|
me.doFor(actions['for'], actions);
|
|
stack.push({ type: 'for', actions: actions });
|
|
}
|
|
else if (actions['foreach']) {
|
|
++me.level;
|
|
|
|
// Extract property name to use from indexed item
|
|
if (prop = me.propRe.exec(m[4])) {
|
|
actions.propName = prop[1] || prop[2];
|
|
}
|
|
me.doForEach(actions['foreach'], actions);
|
|
stack.push({ type: 'foreach', actions: actions });
|
|
}
|
|
else if (actions.exec) {
|
|
me.doExec(actions.exec, actions);
|
|
stack.push({ type: 'exec', actions: actions });
|
|
}
|
|
/*
|
|
else {
|
|
// todo - error
|
|
}
|
|
*/
|
|
} else if (m[0].length === 5) {
|
|
// if the length of m[0] is 5, assume that we're dealing with an opening tpl tag with no attributes (e.g. <tpl>...</tpl>)
|
|
// in this case no action is needed other than pushing it on to the stack
|
|
stack.push({ type: 'tpl' });
|
|
} else {
|
|
frame = stack.pop();
|
|
me.doEnd(frame.type, frame.actions);
|
|
if (frame.type == 'for' || frame.type == 'foreach') {
|
|
--me.level;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// Internal regexes
|
|
|
|
topRe: /(?:(\{\%)|(\{\[)|\{([^{}]+)\})|(?:<tpl([^>]*)\>)|(?:<\/tpl>)/g,
|
|
actionsRe: /\s*(elif|elseif|if|for|foreach|exec|switch|case|eval|between)\s*\=\s*(?:(?:"([^"]*)")|(?:'([^']*)'))\s*/g,
|
|
propRe: /prop=(?:(?:"([^"]*)")|(?:'([^']*)'))/,
|
|
defaultRe: /^\s*default\s*$/,
|
|
elseRe: /^\s*else\s*$/
|
|
});
|
|
|
|
// @tag core
|
|
/**
|
|
* This class compiles the XTemplate syntax into a function object. The function is used
|
|
* like so:
|
|
*
|
|
* function (out, values, parent, xindex, xcount) {
|
|
* // out is the output array to store results
|
|
* // values, parent, xindex and xcount have their historical meaning
|
|
* }
|
|
*
|
|
* @markdown
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.XTemplateCompiler', {
|
|
extend: Ext.XTemplateParser ,
|
|
|
|
// Chrome really likes "new Function" to realize the code block (as in it is
|
|
// 2x-3x faster to call it than using eval), but Firefox chokes on it badly.
|
|
// IE and Opera are also fine with the "new Function" technique.
|
|
useEval: Ext.isGecko,
|
|
|
|
// See http://jsperf.com/nige-array-append for quickest way to append to an array of unknown length
|
|
// (Due to arbitrary code execution inside a template, we cannot easily track the length in var)
|
|
// On IE6 to 8, myArray[myArray.length]='foo' is better. On other browsers myArray.push('foo') is better.
|
|
useIndex: Ext.isIE8m,
|
|
|
|
useFormat: true,
|
|
|
|
propNameRe: /^[\w\d\$]*$/,
|
|
|
|
compile: function (tpl) {
|
|
var me = this,
|
|
code = me.generate(tpl);
|
|
|
|
// When using "new Function", we have to pass our "Ext" variable to it in order to
|
|
// support sandboxing. If we did not, the generated function would use the global
|
|
// "Ext", not the "Ext" from our sandbox (scope chain).
|
|
//
|
|
return me.useEval ? me.evalTpl(code) : (new Function('Ext', code))(Ext);
|
|
},
|
|
|
|
generate: function (tpl) {
|
|
var me = this,
|
|
// note: Ext here is properly sandboxed
|
|
definitions = 'var fm=Ext.util.Format,ts=Object.prototype.toString;',
|
|
code;
|
|
|
|
// Track how many levels we use, so that we only "var" each level's variables once
|
|
me.maxLevel = 0;
|
|
|
|
me.body = [
|
|
'var c0=values, a0=' + me.createArrayTest(0) + ', p0=parent, n0=xcount, i0=xindex, k0, v;\n'
|
|
];
|
|
if (me.definitions) {
|
|
if (typeof me.definitions === 'string') {
|
|
me.definitions = [me.definitions, definitions ];
|
|
} else {
|
|
me.definitions.push(definitions);
|
|
}
|
|
} else {
|
|
me.definitions = [ definitions ];
|
|
}
|
|
me.switches = [];
|
|
|
|
me.parse(tpl);
|
|
|
|
me.definitions.push(
|
|
(me.useEval ? '$=' : 'return') + ' function (' + me.fnArgs + ') {',
|
|
me.body.join(''),
|
|
'}'
|
|
);
|
|
|
|
code = me.definitions.join('\n');
|
|
|
|
// Free up the arrays.
|
|
me.definitions.length = me.body.length = me.switches.length = 0;
|
|
delete me.definitions;
|
|
delete me.body;
|
|
delete me.switches;
|
|
|
|
return code;
|
|
},
|
|
|
|
//-----------------------------------
|
|
// XTemplateParser callouts
|
|
|
|
doText: function (text) {
|
|
var me = this,
|
|
out = me.body;
|
|
|
|
text = text.replace(me.aposRe, "\\'").replace(me.newLineRe, '\\n');
|
|
if (me.useIndex) {
|
|
out.push('out[out.length]=\'', text, '\'\n');
|
|
} else {
|
|
out.push('out.push(\'', text, '\')\n');
|
|
}
|
|
},
|
|
|
|
doExpr: function (expr) {
|
|
var out = this.body;
|
|
out.push('if ((v=' + expr + ') != null) out');
|
|
|
|
// Coerce value to string using concatenation of an empty string literal.
|
|
// See http://jsperf.com/tostringvscoercion/5
|
|
if (this.useIndex) {
|
|
out.push('[out.length]=v+\'\'\n');
|
|
} else {
|
|
out.push('.push(v+\'\')\n');
|
|
}
|
|
},
|
|
|
|
doTag: function (tag) {
|
|
var expr = this.parseTag(tag);
|
|
if (expr) {
|
|
this.doExpr(expr);
|
|
} else {
|
|
// if we cannot match on tagRe handle as plain text
|
|
this.doText('{' + tag + '}');
|
|
}
|
|
},
|
|
|
|
doElse: function () {
|
|
this.body.push('} else {\n');
|
|
},
|
|
|
|
doEval: function (text) {
|
|
this.body.push(text, '\n');
|
|
},
|
|
|
|
doIf: function (action, actions) {
|
|
var me = this;
|
|
|
|
// If it's just a propName, use it directly in the if
|
|
if (action === '.') {
|
|
me.body.push('if (values) {\n');
|
|
} else if (me.propNameRe.test(action)) {
|
|
me.body.push('if (', me.parseTag(action), ') {\n');
|
|
}
|
|
// Otherwise, it must be an expression, and needs to be returned from an fn which uses with(values)
|
|
else {
|
|
me.body.push('if (', me.addFn(action), me.callFn, ') {\n');
|
|
}
|
|
if (actions.exec) {
|
|
me.doExec(actions.exec);
|
|
}
|
|
},
|
|
|
|
doElseIf: function (action, actions) {
|
|
var me = this;
|
|
|
|
// If it's just a propName, use it directly in the else if
|
|
if (action === '.') {
|
|
me.body.push('else if (values) {\n');
|
|
} else if (me.propNameRe.test(action)) {
|
|
me.body.push('} else if (', me.parseTag(action), ') {\n');
|
|
}
|
|
// Otherwise, it must be an expression, and needs to be returned from an fn which uses with(values)
|
|
else {
|
|
me.body.push('} else if (', me.addFn(action), me.callFn, ') {\n');
|
|
}
|
|
if (actions.exec) {
|
|
me.doExec(actions.exec);
|
|
}
|
|
},
|
|
|
|
doSwitch: function (action) {
|
|
var me = this;
|
|
|
|
// If it's just a propName, use it directly in the switch
|
|
if (action === '.') {
|
|
me.body.push('switch (values) {\n');
|
|
} else if (me.propNameRe.test(action)) {
|
|
me.body.push('switch (', me.parseTag(action), ') {\n');
|
|
}
|
|
// Otherwise, it must be an expression, and needs to be returned from an fn which uses with(values)
|
|
else {
|
|
me.body.push('switch (', me.addFn(action), me.callFn, ') {\n');
|
|
}
|
|
me.switches.push(0);
|
|
},
|
|
|
|
doCase: function (action) {
|
|
var me = this,
|
|
cases = Ext.isArray(action) ? action : [action],
|
|
n = me.switches.length - 1,
|
|
match, i;
|
|
|
|
if (me.switches[n]) {
|
|
me.body.push('break;\n');
|
|
} else {
|
|
me.switches[n]++;
|
|
}
|
|
|
|
for (i = 0, n = cases.length; i < n; ++i) {
|
|
match = me.intRe.exec(cases[i]);
|
|
cases[i] = match ? match[1] : ("'" + cases[i].replace(me.aposRe,"\\'") + "'");
|
|
}
|
|
|
|
me.body.push('case ', cases.join(': case '), ':\n');
|
|
},
|
|
|
|
doDefault: function () {
|
|
var me = this,
|
|
n = me.switches.length - 1;
|
|
|
|
if (me.switches[n]) {
|
|
me.body.push('break;\n');
|
|
} else {
|
|
me.switches[n]++;
|
|
}
|
|
|
|
me.body.push('default:\n');
|
|
},
|
|
|
|
doEnd: function (type, actions) {
|
|
var me = this,
|
|
L = me.level-1;
|
|
|
|
if (type == 'for' || type == 'foreach') {
|
|
/*
|
|
To exit a for or foreach loop we must restore the outer loop's context. The
|
|
code looks like this (which goes with that produced by doFor or doForEach):
|
|
|
|
for (...) { // the part generated by doFor or doForEach
|
|
... // the body of the for loop
|
|
|
|
// ... any tpl for exec statement goes here...
|
|
}
|
|
parent = p1;
|
|
values = r2;
|
|
xcount = n1;
|
|
xindex = i1
|
|
*/
|
|
if (actions.exec) {
|
|
me.doExec(actions.exec);
|
|
}
|
|
|
|
me.body.push('}\n');
|
|
me.body.push('parent=p',L,';values=r',L+1,';xcount=n'+L+';xindex=i',L,'+1;xkey=k',L,';\n');
|
|
} else if (type == 'if' || type == 'switch') {
|
|
me.body.push('}\n');
|
|
}
|
|
},
|
|
|
|
doFor: function (action, actions) {
|
|
var me = this,
|
|
s,
|
|
L = me.level,
|
|
up = L-1,
|
|
parentAssignment;
|
|
|
|
// If it's just a propName, use it directly in the switch
|
|
if (action === '.') {
|
|
s = 'values';
|
|
} else if (me.propNameRe.test(action)) {
|
|
s = me.parseTag(action);
|
|
}
|
|
// Otherwise, it must be an expression, and needs to be returned from an fn which uses with(values)
|
|
else {
|
|
s = me.addFn(action) + me.callFn;
|
|
}
|
|
|
|
/*
|
|
We are trying to produce a block of code that looks like below. We use the nesting
|
|
level to uniquely name the control variables.
|
|
|
|
// Omit "var " if we have already been through level 2
|
|
var i2 = 0,
|
|
n2 = 0,
|
|
c2 = values['propName'],
|
|
// c2 is the context object for the for loop
|
|
a2 = Array.isArray(c2);
|
|
r2 = values,
|
|
// r2 is the values object
|
|
p2, // p2 is the parent context (of the outer for loop)
|
|
k2; // object key - not used by for loop but doEnd needs this to be declared
|
|
|
|
// If iterating over the current data, the parent is always set to c2
|
|
p2 = parent = c2;
|
|
// If iterating over a property in an object, set the parent to the object
|
|
p2 = parent = a1 ? c1[i1] : c1 // set parent
|
|
if (c2) {
|
|
if (a2) {
|
|
n2 = c2.length;
|
|
} else if (c2.isMixedCollection) {
|
|
c2 = c2.items;
|
|
n2 = c2.length;
|
|
} else if (c2.isStore) {
|
|
c2 = c2.data.items;
|
|
n2 = c2.length;
|
|
} else {
|
|
c2 = [ c2 ];
|
|
n2 = 1;
|
|
}
|
|
}
|
|
// i2 is the loop index and n2 is the number (xcount) of this for loop
|
|
for (xcount = n2; i2 < n2; ++i2) {
|
|
values = c2[i2] // adjust special vars to inner scope
|
|
xindex = i2 + 1 // xindex is 1-based
|
|
|
|
The body of the loop is whatever comes between the tpl and /tpl statements (which
|
|
is handled by doEnd).
|
|
*/
|
|
|
|
// Declare the vars for a particular level only if we have not already declared them.
|
|
if (me.maxLevel < L) {
|
|
me.maxLevel = L;
|
|
me.body.push('var ');
|
|
}
|
|
|
|
if (action == '.') {
|
|
parentAssignment = 'c' + L;
|
|
} else {
|
|
parentAssignment = 'a' + up + '?c' + up + '[i' + up + ']:c' + up;
|
|
}
|
|
|
|
me.body.push('i',L,'=0,n', L, '=0,c',L,'=',s,',a',L,'=', me.createArrayTest(L),',r',L,'=values,p',L,',k',L,';\n',
|
|
'p',L,'=parent=',parentAssignment,'\n',
|
|
'if (c',L,'){if(a',L,'){n', L,'=c', L, '.length;}else if (c', L, '.isMixedCollection){c',L,'=c',L,'.items;n',L,'=c',L,'.length;}else if(c',L,'.isStore){c',L,'=c',L,'.data.items;n',L,'=c',L,'.length;}else{c',L,'=[c',L,'];n',L,'=1;}}\n',
|
|
'for (xcount=n',L,';i',L,'<n'+L+';++i',L,'){\n',
|
|
'values=c',L,'[i',L,']');
|
|
if (actions.propName) {
|
|
me.body.push('.', actions.propName);
|
|
}
|
|
me.body.push('\n',
|
|
'xindex=i',L,'+1\n');
|
|
|
|
if (actions.between) {
|
|
me.body.push('if(xindex>1){ out.push("',actions.between,'"); } \n');
|
|
}
|
|
},
|
|
|
|
doForEach: function (action, actions) {
|
|
var me = this,
|
|
s,
|
|
L = me.level,
|
|
up = L-1,
|
|
parentAssignment;
|
|
|
|
// If it's just a propName, use it directly in the switch
|
|
if (action === '.') {
|
|
s = 'values';
|
|
} else if (me.propNameRe.test(action)) {
|
|
s = me.parseTag(action);
|
|
}
|
|
// Otherwise, it must be an expression, and needs to be returned from an fn which uses with(values)
|
|
else {
|
|
s = me.addFn(action) + me.callFn;
|
|
}
|
|
|
|
/*
|
|
We are trying to produce a block of code that looks like below. We use the nesting
|
|
level to uniquely name the control variables.
|
|
|
|
// Omit "var " if we have already been through level 2
|
|
var i2 = -1,
|
|
n2 = 0,
|
|
c2 = values['propName'], // c2 is the context object for the for loop
|
|
a2 = Array.isArray(c2);
|
|
r2 = values, // r2 is the values object
|
|
p2, // p2 is the parent context (of the outer for loop)
|
|
k2; // k2 is the object key while looping
|
|
|
|
// If iterating over the current data, the parent is always set to c2
|
|
p2 = parent = c2;
|
|
// If iterating over a property in an object, set the parent to the object
|
|
p2 = parent = a1 ? c1[i1] : c1 // set parent
|
|
|
|
for(k2 in c2){
|
|
xindex = ++i + 1; // xindex is 1-based
|
|
xkey = k2;
|
|
values = c2[k2]; // values is the property value
|
|
|
|
|
|
The body of the loop is whatever comes between the tpl and /tpl statements (which
|
|
is handled by doEnd).
|
|
*/
|
|
|
|
// Declare the vars for a particular level only if we have not already declared them.
|
|
if (me.maxLevel < L) {
|
|
me.maxLevel = L;
|
|
me.body.push('var ');
|
|
}
|
|
|
|
if (action == '.') {
|
|
parentAssignment = 'c' + L;
|
|
} else {
|
|
parentAssignment = 'a' + up + '?c' + up + '[i' + up + ']:c' + up;
|
|
}
|
|
|
|
me.body.push('i',L,'=-1,n',L,'=0,c',L,'=',s,',a',L,'=',me.createArrayTest(L),',r',L,'=values,p',L,',k',L,';\n',
|
|
'p',L,'=parent=',parentAssignment,'\n',
|
|
'for(k',L,' in c',L,'){\n',
|
|
'xindex=++i',L,'+1;\n',
|
|
'xkey=k',L,';\n',
|
|
'values=c',L,'[k',L,'];');
|
|
if (actions.propName) {
|
|
me.body.push('.', actions.propName);
|
|
}
|
|
|
|
if (actions.between) {
|
|
me.body.push('if(xindex>1){ out.push("',actions.between,'"); } \n');
|
|
}
|
|
},
|
|
|
|
createArrayTest: ('isArray' in Array) ? function(L) {
|
|
return 'Array.isArray(c' + L + ')';
|
|
} : function(L) {
|
|
return 'ts.call(c' + L + ')==="[object Array]"';
|
|
},
|
|
|
|
doExec: function (action, actions) {
|
|
var me = this,
|
|
name = 'f' + me.definitions.length;
|
|
|
|
me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
|
|
' try { with(values) {',
|
|
' ' + action,
|
|
' }} catch(e) {',
|
|
'}',
|
|
'}');
|
|
|
|
me.body.push(name + me.callFn + '\n');
|
|
},
|
|
|
|
//-----------------------------------
|
|
// Internal
|
|
|
|
addFn: function (body) {
|
|
var me = this,
|
|
name = 'f' + me.definitions.length;
|
|
|
|
if (body === '.') {
|
|
me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
|
|
' return values',
|
|
'}');
|
|
} else if (body === '..') {
|
|
me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
|
|
' return parent',
|
|
'}');
|
|
} else {
|
|
me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
|
|
' try { with(values) {',
|
|
' return(' + body + ')',
|
|
' }} catch(e) {',
|
|
'}',
|
|
'}');
|
|
}
|
|
|
|
return name;
|
|
},
|
|
|
|
parseTag: function (tag) {
|
|
var me = this,
|
|
m = me.tagRe.exec(tag),
|
|
name, format, args, math, v;
|
|
|
|
if (!m) {
|
|
return null;
|
|
}
|
|
|
|
name = m[1];
|
|
format = m[2];
|
|
args = m[3];
|
|
math = m[4];
|
|
|
|
// name = "." - Just use the values object.
|
|
if (name == '.') {
|
|
// filter to not include arrays/objects/nulls
|
|
if (!me.validTypes) {
|
|
me.definitions.push('var validTypes={string:1,number:1,boolean:1};');
|
|
me.validTypes = true;
|
|
}
|
|
v = 'validTypes[typeof values] || ts.call(values) === "[object Date]" ? values : ""';
|
|
}
|
|
// name = "#" - Use the xindex
|
|
else if (name == '#') {
|
|
v = 'xindex';
|
|
}
|
|
// name = "$" - Use the xkey
|
|
else if (name == '$') {
|
|
v = 'xkey';
|
|
}
|
|
else if (name.substr(0, 7) == "parent.") {
|
|
v = name;
|
|
}
|
|
// compound Javascript property name (e.g., "foo.bar")
|
|
else if (isNaN(name) && name.indexOf('-') == -1 && name.indexOf('.') != -1) {
|
|
v = "values." + name;
|
|
}
|
|
// number or a '-' in it or a single word (maybe a keyword): use array notation
|
|
// (http://jsperf.com/string-property-access/4)
|
|
else {
|
|
v = "values['" + name + "']";
|
|
}
|
|
|
|
if (math) {
|
|
v = '(' + v + math + ')';
|
|
}
|
|
|
|
if (format && me.useFormat) {
|
|
args = args ? ',' + args : "";
|
|
if (format.substr(0, 5) != "this.") {
|
|
format = "fm." + format + '(';
|
|
} else {
|
|
format += '(';
|
|
}
|
|
} else {
|
|
return v;
|
|
}
|
|
|
|
return format + v + args + ')';
|
|
},
|
|
|
|
// @private
|
|
evalTpl: function ($) {
|
|
|
|
// We have to use eval to realize the code block and capture the inner func we also
|
|
// don't want a deep scope chain. We only do this in Firefox and it is also unhappy
|
|
// with eval containing a return statement, so instead we assign to "$" and return
|
|
// that. Because we use "eval", we are automatically sandboxed properly.
|
|
eval($);
|
|
return $;
|
|
},
|
|
|
|
newLineRe: /\r\n|\r|\n/g,
|
|
aposRe: /[']/g,
|
|
intRe: /^\s*(\d+)\s*$/,
|
|
tagRe: /^([\w-\.\#\$]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?$/
|
|
|
|
}, function () {
|
|
var proto = this.prototype;
|
|
|
|
proto.fnArgs = 'out,values,parent,xindex,xcount,xkey';
|
|
proto.callFn = '.call(this,' + proto.fnArgs + ')';
|
|
});
|
|
|
|
// @tag core
|
|
/**
|
|
* A template class that supports advanced functionality like:
|
|
*
|
|
* - Autofilling arrays using templates and sub-templates
|
|
* - Conditional processing with basic comparison operators
|
|
* - Basic math function support
|
|
* - Execute arbitrary inline code with special built-in template variables
|
|
* - Custom member functions
|
|
* - Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created
|
|
*
|
|
* XTemplate provides the templating mechanism built into {@link Ext.view.View}.
|
|
*
|
|
* The {@link Ext.Template} describes the acceptable parameters to pass to the constructor. The following examples
|
|
* demonstrate all of the supported features.
|
|
*
|
|
* # Sample Data
|
|
*
|
|
* This is the data object used for reference in each code example:
|
|
*
|
|
* var data = {
|
|
* name: 'Don Griffin',
|
|
* title: 'Senior Technomage',
|
|
* company: 'Sencha Inc.',
|
|
* drinks: ['Coffee', 'Water', 'More Coffee'],
|
|
* kids: [
|
|
* { name: 'Aubrey', age: 17 },
|
|
* { name: 'Joshua', age: 13 },
|
|
* { name: 'Cale', age: 10 },
|
|
* { name: 'Nikol', age: 5 },
|
|
* { name: 'Solomon', age: 0 }
|
|
* ]
|
|
* };
|
|
*
|
|
* # Auto filling of arrays
|
|
*
|
|
* The **tpl** tag and the **for** operator are used to process the provided data object:
|
|
*
|
|
* - If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl
|
|
* tag for each item in the array.
|
|
* - If for="." is specified, the data object provided is examined.
|
|
* - If between="..." is specified, the provided value will be inserted between the items.
|
|
* This is also supported in the "foreach" looping template.
|
|
* - While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).
|
|
*
|
|
* Examples:
|
|
*
|
|
* <tpl for=".">...</tpl> // loop through array at root node
|
|
* <tpl for="foo">...</tpl> // loop through array at foo node
|
|
* <tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
|
|
* <tpl for="." between=",">...</tpl> // loop through array at root node and insert ',' between each item
|
|
*
|
|
* Using the sample data above:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Kids: ',
|
|
* '<tpl for=".">', // process the data.kids node
|
|
* '<p>{#}. {name}</p>', // use current array index to autonumber
|
|
* '</tpl></p>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
|
|
*
|
|
* An example illustrating how the **for** property can be leveraged to access specified members of the provided data
|
|
* object to populate the template:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Title: {title}</p>',
|
|
* '<p>Company: {company}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">', // interrogate the kids property within the data
|
|
* '<p>{name}</p>',
|
|
* '</tpl></p>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data); // pass the root node of the data object
|
|
*
|
|
* Flat arrays that contain values (and not objects) can be auto-rendered using the special **`{.}`** variable inside a
|
|
* loop. This variable will represent the value of the array at the current index:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>{name}\'s favorite beverages:</p>',
|
|
* '<tpl for="drinks">',
|
|
* '<div> - {.}</div>',
|
|
* '</tpl>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data);
|
|
*
|
|
* When processing a sub-template, for example while looping through a child array, you can access the parent object's
|
|
* members via the **parent** object:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<tpl if="age > 1">',
|
|
* '<p>{name}</p>',
|
|
* '<p>Dad: {parent.name}</p>',
|
|
* '</tpl>',
|
|
* '</tpl></p>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data);
|
|
*
|
|
* The **foreach** operator is used to loop over an object's properties. The following
|
|
* example demonstrates looping over the main data object's properties:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<dl>',
|
|
* '<tpl foreach=".">',
|
|
* '<dt>{$}</dt>', // the special **`{$}`** variable contains the property name
|
|
* '<dd>{.}</dd>', // within the loop, the **`{.}`** variable is set to the property value
|
|
* '</tpl>',
|
|
* '</dl>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data);
|
|
*
|
|
* # Conditional processing with basic comparison operators
|
|
*
|
|
* The **tpl** tag and the **if** operator are used to provide conditional checks for deciding whether or not to render
|
|
* specific parts of the template.
|
|
*
|
|
* Using the sample data above:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<tpl if="age > 1">',
|
|
* '<p>{name}</p>',
|
|
* '</tpl>',
|
|
* '</tpl></p>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data);
|
|
*
|
|
* More advanced conditionals are also supported:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<p>{name} is a ',
|
|
* '<tpl if="age >= 13">',
|
|
* '<p>teenager</p>',
|
|
* '<tpl elseif="age >= 2">',
|
|
* '<p>kid</p>',
|
|
* '<tpl else>',
|
|
* '<p>baby</p>',
|
|
* '</tpl>',
|
|
* '</tpl></p>'
|
|
* );
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<p>{name} is a ',
|
|
* '<tpl switch="name">',
|
|
* '<tpl case="Aubrey" case="Nikol">',
|
|
* '<p>girl</p>',
|
|
* '<tpl default>',
|
|
* '<p>boy</p>',
|
|
* '</tpl>',
|
|
* '</tpl></p>'
|
|
* );
|
|
*
|
|
* A `break` is implied between each case and default, however, multiple cases can be listed
|
|
* in a single <tpl> tag.
|
|
*
|
|
* # Using double quotes
|
|
*
|
|
* Examples:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* "<tpl if='age > 1 && age < 10'>Child</tpl>",
|
|
* "<tpl if='age >= 10 && age < 18'>Teenager</tpl>",
|
|
* "<tpl if='this.isGirl(name)'>...</tpl>",
|
|
* '<tpl if="id == \'download\'">...</tpl>',
|
|
* "<tpl if='needsIcon'><img src='{icon}' class='{iconCls}'/></tpl>",
|
|
* "<tpl if='name == \"Don\"'>Hello</tpl>"
|
|
* );
|
|
*
|
|
* # Basic math support
|
|
*
|
|
* The following basic math operators may be applied directly on numeric data values:
|
|
*
|
|
* + - * /
|
|
*
|
|
* For example:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<tpl if="age > 1">', // <-- Note that the > is encoded
|
|
* '<p>{#}: {name}</p>', // <-- Auto-number each item
|
|
* '<p>In 5 Years: {age+5}</p>', // <-- Basic math
|
|
* '<p>Dad: {parent.name}</p>',
|
|
* '</tpl>',
|
|
* '</tpl></p>'
|
|
* );
|
|
* tpl.overwrite(panel.body, data);
|
|
*
|
|
* # Execute arbitrary inline code with special built-in template variables
|
|
*
|
|
* Anything between `{[ ... ]}` is considered code to be executed in the scope of the template.
|
|
* The expression is evaluated and the result is included in the generated result. There are
|
|
* some special variables available in that code:
|
|
*
|
|
* - **out**: The output array into which the template is being appended (using `push` to later
|
|
* `join`).
|
|
* - **values**: The values in the current scope. If you are using scope changing sub-templates,
|
|
* you can change what values is.
|
|
* - **parent**: The scope (values) of the ancestor template.
|
|
* - **xindex**: If you are in a "for" or "foreach" looping template, the index of the loop you are in (1-based).
|
|
* - **xcount**: If you are in a "for" looping template, the total length of the array you are looping.
|
|
* - **xkey**: If you are in a "foreach" looping template, the key of the current property
|
|
* being examined.
|
|
*
|
|
* This example demonstrates basic row striping using an inline code block and the xindex variable:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
|
|
* '{name}',
|
|
* '</div>',
|
|
* '</tpl></p>'
|
|
* );
|
|
*
|
|
* Any code contained in "verbatim" blocks (using "{% ... %}") will be inserted directly in
|
|
* the generated code for the template. These blocks are not included in the output. This
|
|
* can be used for simple things like break/continue in a loop, or control structures or
|
|
* method calls (when they don't produce output). The `this` references the template instance.
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '{% if (xindex % 2 === 0) continue; %}',
|
|
* '{name}',
|
|
* '{% if (xindex > 100) break; %}',
|
|
* '</div>',
|
|
* '</tpl></p>'
|
|
* );
|
|
*
|
|
* # Template member functions
|
|
*
|
|
* One or more member functions can be specified in a configuration object passed into the XTemplate constructor for
|
|
* more complex processing:
|
|
*
|
|
* var tpl = new Ext.XTemplate(
|
|
* '<p>Name: {name}</p>',
|
|
* '<p>Kids: ',
|
|
* '<tpl for="kids">',
|
|
* '<tpl if="this.isGirl(name)">',
|
|
* '<p>Girl: {name} - {age}</p>',
|
|
* '<tpl else>',
|
|
* '<p>Boy: {name} - {age}</p>',
|
|
* '</tpl>',
|
|
* '<tpl if="this.isBaby(age)">',
|
|
* '<p>{name} is a baby!</p>',
|
|
* '</tpl>',
|
|
* '</tpl></p>',
|
|
* {
|
|
* // XTemplate configuration:
|
|
* disableFormats: true,
|
|
* // member functions:
|
|
* isGirl: function(name){
|
|
* return name == 'Aubrey' || name == 'Nikol';
|
|
* },
|
|
* isBaby: function(age){
|
|
* return age < 1;
|
|
* }
|
|
* }
|
|
* );
|
|
* tpl.overwrite(panel.body, data);
|
|
*/
|
|
Ext.define('Ext.XTemplate', {
|
|
extend: Ext.Template ,
|
|
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
emptyObj: {},
|
|
|
|
/**
|
|
* @cfg {Boolean} compiled
|
|
* Only applies to {@link Ext.Template}, XTemplates are compiled automatically on the
|
|
* first call to {@link #apply} or {@link #applyOut}.
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Array} definitions
|
|
* Optional. A statement, or array of statements which set up `var`s which may then
|
|
* be accessed within the scope of the generated function.
|
|
*/
|
|
|
|
apply: function(values, parent) {
|
|
return this.applyOut(values, [], parent).join('');
|
|
},
|
|
|
|
applyOut: function(values, out, parent) {
|
|
var me = this,
|
|
compiler;
|
|
|
|
if (!me.fn) {
|
|
compiler = new Ext.XTemplateCompiler({
|
|
useFormat: me.disableFormats !== true,
|
|
definitions: me.definitions
|
|
});
|
|
|
|
me.fn = compiler.compile(me.html);
|
|
}
|
|
|
|
try {
|
|
me.fn(out, values, parent || me.emptyObj, 1, 1);
|
|
} catch (e) {
|
|
}
|
|
|
|
return out;
|
|
},
|
|
|
|
/**
|
|
* Does nothing. XTemplates are compiled automatically, so this function simply returns this.
|
|
* @return {Ext.XTemplate} this
|
|
*/
|
|
compile: function() {
|
|
return this;
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* Gets an `XTemplate` from an object (an instance of an {@link Ext#define}'d class).
|
|
* Many times, templates are configured high in the class hierarchy and are to be
|
|
* shared by all classes that derive from that base. To further complicate matters,
|
|
* these templates are seldom actual instances but are rather configurations. For
|
|
* example:
|
|
*
|
|
* Ext.define('MyApp.Class', {
|
|
* extraCls: 'extra-class',
|
|
*
|
|
* someTpl: [
|
|
* '<div class="{%this.emitClass(out)%}"></div>',
|
|
* {
|
|
* // Member fn - outputs the owing class's extra CSS class
|
|
* emitClass: function(out) {
|
|
* out.push(this.owner.extraCls);
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* The goal being to share that template definition with all instances and even
|
|
* instances of derived classes, until `someTpl` is overridden. This method will
|
|
* "upgrade" these configurations to be real `XTemplate` instances *in place* (to
|
|
* avoid creating one instance per object).
|
|
*
|
|
* The resulting XTemplate will have an `owner` reference injected which refers back
|
|
* to the owning object whether that is an object which has an *own instance*, or a
|
|
* class prototype. Through this link, XTemplate member functions will be able to access
|
|
* prototype properties of its owning class.
|
|
*
|
|
* @param {Object} instance The object from which to get the `XTemplate` (must be
|
|
* an instance of an {@link Ext#define}'d class).
|
|
* @param {String} name The name of the property by which to get the `XTemplate`.
|
|
* @return {Ext.XTemplate} The `XTemplate` instance or null if not found.
|
|
* @protected
|
|
* @static
|
|
*/
|
|
getTpl: function (instance, name) {
|
|
var tpl = instance[name], // go for it! 99% of the time we will get it!
|
|
owner;
|
|
|
|
if (tpl && !tpl.isTemplate) { // tpl is just a configuration (not an instance)
|
|
// create the template instance from the configuration:
|
|
tpl = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
|
|
|
|
// and replace the reference with the new instance:
|
|
if (instance.hasOwnProperty(name)) { // the tpl is on the instance
|
|
owner = instance;
|
|
} else { // must be somewhere in the prototype chain
|
|
for (owner = instance.self.prototype; owner && !owner.hasOwnProperty(name); owner = owner.superclass) {
|
|
}
|
|
}
|
|
owner[name] = tpl;
|
|
tpl.owner = owner;
|
|
}
|
|
// else !tpl (no such tpl) or the tpl is an instance already... either way, tpl
|
|
// is ready to return
|
|
|
|
return tpl || null;
|
|
}
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
// @require Helper.js
|
|
// @define Ext.dom.Query
|
|
// @define Ext.core.DomQuery
|
|
// @define Ext.DomQuery
|
|
|
|
/*
|
|
* This is code is also distributed under MIT license for use
|
|
* with jQuery and prototype JavaScript libraries.
|
|
*/
|
|
/**
|
|
* @class Ext.dom.Query
|
|
* @alternateClassName Ext.DomQuery
|
|
* @alternateClassName Ext.core.DomQuery
|
|
* @singleton
|
|
*
|
|
* Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes
|
|
* and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
|
|
*
|
|
* DomQuery supports most of the [CSS3 selectors spec][1], along with some custom selectors and basic XPath.
|
|
*
|
|
* All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example
|
|
* `div.foo:nth-child(odd)[@foo=bar].bar:first` would be a perfectly valid selector. Node filters are processed
|
|
* in the order in which they appear, which allows you to optimize your queries for your document structure.
|
|
*
|
|
* ## Element Selectors:
|
|
*
|
|
* - **`*`** any element
|
|
* - **`E`** an element with the tag E
|
|
* - **`E F`** All descendent elements of E that have the tag F
|
|
* - **`E > F`** or **E/F** all direct children elements of E that have the tag F
|
|
* - **`E + F`** all elements with the tag F that are immediately preceded by an element with the tag E
|
|
* - **`E ~ F`** all elements with the tag F that are preceded by a sibling element with the tag E
|
|
*
|
|
* ## Attribute Selectors:
|
|
*
|
|
* The use of `@` and quotes are optional. For example, `div[@foo='bar']` is also a valid attribute selector.
|
|
*
|
|
* - **`E[foo]`** has an attribute "foo"
|
|
* - **`E[foo=bar]`** has an attribute "foo" that equals "bar"
|
|
* - **`E[foo^=bar]`** has an attribute "foo" that starts with "bar"
|
|
* - **`E[foo$=bar]`** has an attribute "foo" that ends with "bar"
|
|
* - **`E[foo*=bar]`** has an attribute "foo" that contains the substring "bar"
|
|
* - **`E[foo%=2]`** has an attribute "foo" that is evenly divisible by 2
|
|
* - **`E[foo!=bar]`** attribute "foo" does not equal "bar"
|
|
*
|
|
* ## Pseudo Classes:
|
|
*
|
|
* - **`E:first-child`** E is the first child of its parent
|
|
* - **`E:last-child`** E is the last child of its parent
|
|
* - **`E:nth-child(_n_)`** E is the _n_th child of its parent (1 based as per the spec)
|
|
* - **`E:nth-child(odd)`** E is an odd child of its parent
|
|
* - **`E:nth-child(even)`** E is an even child of its parent
|
|
* - **`E:only-child`** E is the only child of its parent
|
|
* - **`E:checked`** E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
|
|
* - **`E:first`** the first E in the resultset
|
|
* - **`E:last`** the last E in the resultset
|
|
* - **`E:nth(_n_)`** the _n_th E in the resultset (1 based)
|
|
* - **`E:odd`** shortcut for :nth-child(odd)
|
|
* - **`E:even`** shortcut for :nth-child(even)
|
|
* - **`E:contains(foo)`** E's innerHTML contains the substring "foo"
|
|
* - **`E:nodeValue(foo)`** E contains a textNode with a nodeValue that equals "foo"
|
|
* - **`E:not(S)`** an E element that does not match simple selector S
|
|
* - **`E:has(S)`** an E element that has a descendent that matches simple selector S
|
|
* - **`E:next(S)`** an E element whose next sibling matches simple selector S
|
|
* - **`E:prev(S)`** an E element whose previous sibling matches simple selector S
|
|
* - **`E:any(S1|S2|S2)`** an E element which matches any of the simple selectors S1, S2 or S3
|
|
* - **`E:visible(true)`** an E element which is deeply visible according to {@link Ext.dom.Element#isVisible}
|
|
*
|
|
* ## CSS Value Selectors:
|
|
*
|
|
* - **`E{display=none}`** css value "display" that equals "none"
|
|
* - **`E{display^=none}`** css value "display" that starts with "none"
|
|
* - **`E{display$=none}`** css value "display" that ends with "none"
|
|
* - **`E{display*=none}`** css value "display" that contains the substring "none"
|
|
* - **`E{display%=2}`** css value "display" that is evenly divisible by 2
|
|
* - **`E{display!=none}`** css value "display" that does not equal "none"
|
|
*
|
|
* ## XML Namespaces:
|
|
* - **`ns|E`** an element with tag E and namespace prefix ns
|
|
*
|
|
* [1]: http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors
|
|
*/
|
|
Ext.ns('Ext.core');
|
|
|
|
Ext.dom.Query = Ext.core.DomQuery = Ext.DomQuery = (function() {
|
|
var DQ,
|
|
doc = document,
|
|
cache = {},
|
|
simpleCache = {},
|
|
valueCache = {},
|
|
useClassList = !!doc.documentElement.classList,
|
|
useElementPointer = !!doc.documentElement.firstElementChild,
|
|
useChildrenCollection = (function() {
|
|
var d = doc.createElement('div');
|
|
d.innerHTML = '<!-- -->text<!-- -->';
|
|
return d.children && (d.children.length === 0);
|
|
})(),
|
|
nonSpace = /\S/,
|
|
trimRe = /^\s+|\s+$/g,
|
|
tplRe = /\{(\d+)\}/g,
|
|
modeRe = /^(\s?[\/>+~]\s?|\s|$)/,
|
|
tagTokenRe = /^(#)?([\w\-\*\|\\]+)/,
|
|
nthRe = /(\d*)n\+?(\d*)/,
|
|
nthRe2 = /\D/,
|
|
startIdRe = /^\s*#/,
|
|
// This is for IE MSXML which does not support expandos.
|
|
// IE runs the same speed using setAttribute, however FF slows way down
|
|
// and Safari completely fails so they need to continue to use expandos.
|
|
isIE = window.ActiveXObject ? true : false,
|
|
key = 30803,
|
|
longHex = /\\([0-9a-fA-F]{6})/g,
|
|
shortHex = /\\([0-9a-fA-F]{1,6})\s{0,1}/g,
|
|
nonHex = /\\([^0-9a-fA-F]{1})/g,
|
|
escapes = /\\/g,
|
|
num, hasEscapes,
|
|
// True if the browser supports the following syntax:
|
|
// document.getElementsByTagName('namespacePrefix:tagName')
|
|
supportsColonNsSeparator = (function () {
|
|
var xmlDoc,
|
|
xmlString = '<r><a:b xmlns:a="n"></a:b></r>';
|
|
|
|
if (window.DOMParser) {
|
|
xmlDoc = (new DOMParser()).parseFromString(xmlString, "application/xml");
|
|
} else {
|
|
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
|
xmlDoc.loadXML(xmlString);
|
|
}
|
|
|
|
return !!xmlDoc.getElementsByTagName('a:b').length;
|
|
})(),
|
|
|
|
// replaces a long hex regex match group with the appropriate ascii value
|
|
// $args indicate regex match pos
|
|
longHexToChar = function($0, $1) {
|
|
return String.fromCharCode(parseInt($1, 16));
|
|
},
|
|
|
|
// converts a shortHex regex match to the long form
|
|
shortToLongHex = function($0, $1) {
|
|
while ($1.length < 6) {
|
|
$1 = '0' + $1;
|
|
}
|
|
return '\\' + $1;
|
|
},
|
|
|
|
// converts a single char escape to long escape form
|
|
charToLongHex = function($0, $1) {
|
|
num = $1.charCodeAt(0).toString(16);
|
|
if (num.length === 1) {
|
|
num = '0' + num;
|
|
}
|
|
return '\\0000' + num;
|
|
},
|
|
|
|
// Un-escapes an input selector string. Assumes all escape sequences have been
|
|
// normalized to the css '\\0000##' 6-hex-digit style escape sequence :
|
|
// will not handle any other escape formats
|
|
unescapeCssSelector = function(selector) {
|
|
return (hasEscapes) ? selector.replace(longHex, longHexToChar) : selector;
|
|
},
|
|
|
|
// checks if the path has escaping & does any appropriate replacements
|
|
setupEscapes = function(path) {
|
|
hasEscapes = (path.indexOf('\\') > -1);
|
|
if (hasEscapes) {
|
|
path = path
|
|
.replace(shortHex, shortToLongHex)
|
|
.replace(nonHex, charToLongHex)
|
|
.replace(escapes, '\\\\'); // double the '\' for js compilation
|
|
}
|
|
return path;
|
|
};
|
|
|
|
// this eval is stop the compressor from
|
|
// renaming the variable to something shorter
|
|
eval("var batch = 30803, child, next, prev, byClassName;");
|
|
|
|
// Retrieve the child node from a particular
|
|
// parent at the specified index.
|
|
child = useChildrenCollection ?
|
|
function child(parent, index) {
|
|
return parent.children[index];
|
|
} :
|
|
function child(parent, index) {
|
|
var i = 0,
|
|
n = parent.firstChild;
|
|
while (n) {
|
|
if (n.nodeType == 1) {
|
|
if (++i == index) {
|
|
return n;
|
|
}
|
|
}
|
|
n = n.nextSibling;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// retrieve the next element node
|
|
next = useElementPointer ?
|
|
function(n) {
|
|
return n.nextElementSibling;
|
|
} :
|
|
function(n) {
|
|
while ((n = n.nextSibling) && n.nodeType != 1);
|
|
return n;
|
|
};
|
|
|
|
// retrieve the previous element node
|
|
prev = useElementPointer ?
|
|
function(n) {
|
|
return n.previousElementSibling;
|
|
} :
|
|
function(n) {
|
|
while ((n = n.previousSibling) && n.nodeType != 1);
|
|
return n;
|
|
};
|
|
|
|
// Mark each child node with a nodeIndex skipping and
|
|
// removing empty text nodes.
|
|
function children(parent) {
|
|
var n = parent.firstChild,
|
|
nodeIndex = -1,
|
|
nextNode;
|
|
|
|
while (n) {
|
|
nextNode = n.nextSibling;
|
|
// clean worthless empty nodes.
|
|
if (n.nodeType == 3 && !nonSpace.test(n.nodeValue)) {
|
|
parent.removeChild(n);
|
|
} else {
|
|
// add an expando nodeIndex
|
|
n.nodeIndex = ++nodeIndex;
|
|
}
|
|
n = nextNode;
|
|
}
|
|
return this;
|
|
}
|
|
|
|
// nodeSet - array of nodes
|
|
// cls - CSS Class
|
|
byClassName = useClassList ? // Use classList API where available: http://jsperf.com/classlist-vs-old-school-check/
|
|
function (nodeSet, cls) {
|
|
cls = unescapeCssSelector(cls);
|
|
if (!cls) {
|
|
return nodeSet;
|
|
}
|
|
var result = [], ri = -1,
|
|
i, ci, classList;
|
|
|
|
for (i = 0; ci = nodeSet[i]; i++) {
|
|
classList = ci.classList;
|
|
if (classList) {
|
|
if (classList.contains(cls)) {
|
|
result[++ri] = ci;
|
|
}
|
|
} else if ((' ' + ci.className + ' ').indexOf(cls) !== -1) {
|
|
// Some elements types (SVG) may not always have a classList
|
|
// in some browsers, so fallback to the old style here
|
|
result[++ri] = ci;
|
|
}
|
|
}
|
|
return result;
|
|
} :
|
|
function (nodeSet, cls) {
|
|
cls = unescapeCssSelector(cls);
|
|
if (!cls) {
|
|
return nodeSet;
|
|
}
|
|
var result = [], ri = -1,
|
|
i, ci;
|
|
|
|
for (i = 0; ci = nodeSet[i]; i++) {
|
|
if ((' ' + ci.className + ' ').indexOf(cls) !== -1) {
|
|
result[++ri] = ci;
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
|
|
function attrValue(n, attr) {
|
|
// if its an array, use the first node.
|
|
if (!n.tagName && typeof n.length != "undefined") {
|
|
n = n[0];
|
|
}
|
|
if (!n) {
|
|
return null;
|
|
}
|
|
|
|
if (attr == "for") {
|
|
return n.htmlFor;
|
|
}
|
|
if (attr == "class" || attr == "className") {
|
|
return n.className;
|
|
}
|
|
return n.getAttribute(attr) || n[attr];
|
|
|
|
}
|
|
|
|
// ns - nodes
|
|
// mode - false, /, >, +, ~
|
|
// tagName - defaults to "*"
|
|
function getNodes(ns, mode, tagName) {
|
|
var result = [], ri = -1, cs,
|
|
i, ni, j, ci, cn, utag, n, cj;
|
|
if (!ns) {
|
|
return result;
|
|
}
|
|
tagName = tagName.replace('|', ':') || "*";
|
|
// convert to array
|
|
if (typeof ns.getElementsByTagName != "undefined") {
|
|
ns = [ns];
|
|
}
|
|
|
|
// no mode specified, grab all elements by tagName
|
|
// at any depth
|
|
if (!mode) {
|
|
tagName = unescapeCssSelector(tagName);
|
|
if (!supportsColonNsSeparator && DQ.isXml(ns[0]) &&
|
|
tagName.indexOf(':') !== -1) {
|
|
// Some browsers (e.g. WebKit and Opera do not support the following syntax
|
|
// in xml documents: getElementsByTagName('ns:tagName'). To work around
|
|
// this, we remove the namespace prefix from the tagName, get the elements
|
|
// by tag name only, and then compare each element's tagName property to
|
|
// the tagName with namespace prefix attached to ensure that the tag is in
|
|
// the proper namespace.
|
|
for (i = 0; ni = ns[i]; i++) {
|
|
cs = ni.getElementsByTagName(tagName.split(':').pop());
|
|
for (j = 0; ci = cs[j]; j++) {
|
|
if (ci.tagName === tagName) {
|
|
result[++ri] = ci;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
for (i = 0; ni = ns[i]; i++) {
|
|
cs = ni.getElementsByTagName(tagName);
|
|
for (j = 0; ci = cs[j]; j++) {
|
|
result[++ri] = ci;
|
|
}
|
|
}
|
|
}
|
|
// Direct Child mode (/ or >)
|
|
// E > F or E/F all direct children elements of E that have the tag
|
|
} else if (mode == "/" || mode == ">") {
|
|
utag = tagName.toUpperCase();
|
|
for (i = 0; ni = ns[i]; i++) {
|
|
cn = ni.childNodes;
|
|
for (j = 0; cj = cn[j]; j++) {
|
|
if (cj.nodeName == utag || cj.nodeName == tagName || tagName == '*') {
|
|
result[++ri] = cj;
|
|
}
|
|
}
|
|
}
|
|
// Immediately Preceding mode (+)
|
|
// E + F all elements with the tag F that are immediately preceded by an element with the tag E
|
|
} else if (mode == "+") {
|
|
utag = tagName.toUpperCase();
|
|
for (i = 0; n = ns[i]; i++) {
|
|
while ((n = n.nextSibling) && n.nodeType != 1);
|
|
if (n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')) {
|
|
result[++ri] = n;
|
|
}
|
|
}
|
|
// Sibling mode (~)
|
|
// E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
|
|
} else if (mode == "~") {
|
|
utag = tagName.toUpperCase();
|
|
for (i = 0; n = ns[i]; i++) {
|
|
while ((n = n.nextSibling)) {
|
|
if (n.nodeName == utag || n.nodeName == tagName || tagName == '*') {
|
|
result[++ri] = n;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function concat(a, b) {
|
|
a.push.apply(a, b);
|
|
return a;
|
|
}
|
|
|
|
function byTag(cs, tagName) {
|
|
if (cs.tagName || cs === doc) {
|
|
cs = [cs];
|
|
}
|
|
if (!tagName) {
|
|
return cs;
|
|
}
|
|
var result = [], ri = -1,
|
|
i, ci;
|
|
tagName = tagName.toLowerCase();
|
|
for (i = 0; ci = cs[i]; i++) {
|
|
if (ci.nodeType == 1 && ci.tagName.toLowerCase() == tagName) {
|
|
result[++ri] = ci;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function byId(cs, id) {
|
|
id = unescapeCssSelector(id);
|
|
if (cs.tagName || cs === doc) {
|
|
cs = [cs];
|
|
}
|
|
if (!id) {
|
|
return cs;
|
|
}
|
|
var result = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = cs[i]; i++) {
|
|
if (ci && ci.id == id) {
|
|
result[++ri] = ci;
|
|
return result;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// operators are =, !=, ^=, $=, *=, %=, |= and ~=
|
|
// custom can be "{"
|
|
function byAttribute(cs, attr, value, op, custom) {
|
|
var result = [],
|
|
ri = -1,
|
|
useGetStyle = custom == "{",
|
|
fn = DQ.operators[op],
|
|
a,
|
|
xml,
|
|
hasXml,
|
|
i, ci;
|
|
|
|
value = unescapeCssSelector(value);
|
|
|
|
for (i = 0; ci = cs[i]; i++) {
|
|
// skip non-element nodes.
|
|
if (ci.nodeType === 1) {
|
|
// only need to do this for the first node
|
|
if (!hasXml) {
|
|
xml = DQ.isXml(ci);
|
|
hasXml = true;
|
|
}
|
|
|
|
// we only need to change the property names if we're dealing with html nodes, not XML
|
|
if (!xml) {
|
|
if (useGetStyle) {
|
|
a = DQ.getStyle(ci, attr);
|
|
} else if (attr == "class" || attr == "className") {
|
|
a = ci.className;
|
|
} else if (attr == "for") {
|
|
a = ci.htmlFor;
|
|
} else if (attr == "href") {
|
|
// getAttribute href bug
|
|
// http://www.glennjones.net/Post/809/getAttributehrefbug.htm
|
|
a = ci.getAttribute("href", 2);
|
|
} else {
|
|
a = ci.getAttribute(attr);
|
|
}
|
|
} else {
|
|
a = ci.getAttribute(attr);
|
|
}
|
|
if ((fn && fn(a, value)) || (!fn && a)) {
|
|
result[++ri] = ci;
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function byPseudo(cs, name, value) {
|
|
value = unescapeCssSelector(value);
|
|
return DQ.pseudos[name](cs, value);
|
|
}
|
|
|
|
function nodupIEXml(cs) {
|
|
var d = ++key,
|
|
r,
|
|
i, len, c;
|
|
cs[0].setAttribute("_nodup", d);
|
|
r = [cs[0]];
|
|
for (i = 1, len = cs.length; i < len; i++) {
|
|
c = cs[i];
|
|
if (!c.getAttribute("_nodup") != d) {
|
|
c.setAttribute("_nodup", d);
|
|
r[r.length] = c;
|
|
}
|
|
}
|
|
for (i = 0, len = cs.length; i < len; i++) {
|
|
cs[i].removeAttribute("_nodup");
|
|
}
|
|
return r;
|
|
}
|
|
|
|
function nodup(cs) {
|
|
if (!cs) {
|
|
return [];
|
|
}
|
|
var len = cs.length, c, i, r = cs, cj, ri = -1, d, j;
|
|
if (!len || typeof cs.nodeType != "undefined" || len == 1) {
|
|
return cs;
|
|
}
|
|
if (isIE && typeof cs[0].selectSingleNode != "undefined") {
|
|
return nodupIEXml(cs);
|
|
}
|
|
d = ++key;
|
|
cs[0]._nodup = d;
|
|
for (i = 1; c = cs[i]; i++) {
|
|
if (c._nodup != d) {
|
|
c._nodup = d;
|
|
} else {
|
|
r = [];
|
|
for (j = 0; j < i; j++) {
|
|
r[++ri] = cs[j];
|
|
}
|
|
for (j = i + 1; cj = cs[j]; j++) {
|
|
if (cj._nodup != d) {
|
|
cj._nodup = d;
|
|
r[++ri] = cj;
|
|
}
|
|
}
|
|
return r;
|
|
}
|
|
}
|
|
return r;
|
|
}
|
|
|
|
function quickDiffIEXml(c1, c2) {
|
|
var d = ++key,
|
|
r = [],
|
|
i, len;
|
|
for (i = 0, len = c1.length; i < len; i++) {
|
|
c1[i].setAttribute("_qdiff", d);
|
|
}
|
|
for (i = 0, len = c2.length; i < len; i++) {
|
|
if (c2[i].getAttribute("_qdiff") != d) {
|
|
r[r.length] = c2[i];
|
|
}
|
|
}
|
|
for (i = 0, len = c1.length; i < len; i++) {
|
|
c1[i].removeAttribute("_qdiff");
|
|
}
|
|
return r;
|
|
}
|
|
|
|
function quickDiff(c1, c2) {
|
|
var len1 = c1.length,
|
|
d = ++key,
|
|
r = [],
|
|
i, len;
|
|
if (!len1) {
|
|
return c2;
|
|
}
|
|
if (isIE && typeof c1[0].selectSingleNode != "undefined") {
|
|
return quickDiffIEXml(c1, c2);
|
|
}
|
|
for (i = 0; i < len1; i++) {
|
|
c1[i]._qdiff = d;
|
|
}
|
|
for (i = 0, len = c2.length; i < len; i++) {
|
|
if (c2[i]._qdiff != d) {
|
|
r[r.length] = c2[i];
|
|
}
|
|
}
|
|
return r;
|
|
}
|
|
|
|
function quickId(ns, mode, root, id) {
|
|
if (ns == root) {
|
|
id = unescapeCssSelector(id);
|
|
var d = root.ownerDocument || root;
|
|
return d.getElementById(id);
|
|
}
|
|
ns = getNodes(ns, mode, "*");
|
|
return byId(ns, id);
|
|
}
|
|
|
|
return DQ = {
|
|
getStyle: function(el, name) {
|
|
return Ext.fly(el, '_DomQuery').getStyle(name);
|
|
},
|
|
/**
|
|
* Compiles a selector/xpath query into a reusable function. The returned function
|
|
* takes one parameter "root" (optional), which is the context node from where the query should start.
|
|
* @param {String} selector The selector/xpath query
|
|
* @param {String} [type="select"] Either "select" or "simple" for a simple selector match
|
|
* @return {Function}
|
|
*/
|
|
compile: function(path, type) {
|
|
type = type || "select";
|
|
|
|
// setup fn preamble
|
|
var fn = ["var f = function(root) {\n var mode; ++batch; var n = root || document;\n"],
|
|
lastPath,
|
|
matchers = DQ.matchers,
|
|
matchersLn = matchers.length,
|
|
modeMatch,
|
|
// accept leading mode switch
|
|
lmode = path.match(modeRe),
|
|
tokenMatch, matched, j, t, m;
|
|
|
|
path = setupEscapes(path);
|
|
|
|
if (lmode && lmode[1]) {
|
|
fn[fn.length] = 'mode="' + lmode[1].replace(trimRe, "") + '";';
|
|
path = path.replace(lmode[1], "");
|
|
}
|
|
|
|
// strip leading slashes
|
|
while (path.substr(0, 1) == "/") {
|
|
path = path.substr(1);
|
|
}
|
|
|
|
while (path && lastPath != path) {
|
|
lastPath = path;
|
|
tokenMatch = path.match(tagTokenRe);
|
|
if (type == "select") {
|
|
if (tokenMatch) {
|
|
// ID Selector
|
|
if (tokenMatch[1] == "#") {
|
|
fn[fn.length] = 'n = quickId(n, mode, root, "' + tokenMatch[2] + '");';
|
|
} else {
|
|
fn[fn.length] = 'n = getNodes(n, mode, "' + tokenMatch[2] + '");';
|
|
}
|
|
path = path.replace(tokenMatch[0], "");
|
|
} else if (path.substr(0, 1) != '@') {
|
|
fn[fn.length] = 'n = getNodes(n, mode, "*");';
|
|
}
|
|
// type of "simple"
|
|
} else {
|
|
if (tokenMatch) {
|
|
if (tokenMatch[1] == "#") {
|
|
fn[fn.length] = 'n = byId(n, "' + tokenMatch[2] + '");';
|
|
} else {
|
|
fn[fn.length] = 'n = byTag(n, "' + tokenMatch[2] + '");';
|
|
}
|
|
path = path.replace(tokenMatch[0], "");
|
|
}
|
|
}
|
|
while (!(modeMatch = path.match(modeRe))) {
|
|
matched = false;
|
|
for (j = 0; j < matchersLn; j++) {
|
|
t = matchers[j];
|
|
m = path.match(t.re);
|
|
if (m) {
|
|
fn[fn.length] = t.select.replace(tplRe, function(x, i) {
|
|
return m[i];
|
|
});
|
|
path = path.replace(m[0], "");
|
|
matched = true;
|
|
break;
|
|
}
|
|
}
|
|
// prevent infinite loop on bad selector
|
|
if (!matched) {
|
|
Ext.Error.raise({
|
|
sourceClass:'Ext.DomQuery',
|
|
sourceMethod:'compile',
|
|
msg:'Error parsing selector. Parsing failed at "' + path + '"'
|
|
});
|
|
}
|
|
}
|
|
if (modeMatch[1]) {
|
|
fn[fn.length] = 'mode="' + modeMatch[1].replace(trimRe, "") + '";';
|
|
path = path.replace(modeMatch[1], "");
|
|
}
|
|
}
|
|
// close fn out
|
|
fn[fn.length] = "return nodup(n);\n}";
|
|
|
|
// eval fn and return it
|
|
eval(fn.join(""));
|
|
return f;
|
|
},
|
|
|
|
/**
|
|
* Selects an array of DOM nodes using JavaScript-only implementation.
|
|
*
|
|
* Use {@link #select} to take advantage of browsers built-in support for CSS selectors.
|
|
* @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
|
|
* @param {HTMLElement/String} [root=document] The start of the query.
|
|
* @return {HTMLElement[]} An Array of DOM elements which match the selector. If there are
|
|
* no matches, and empty Array is returned.
|
|
*/
|
|
jsSelect: function(path, root, type) {
|
|
// set root to doc if not specified.
|
|
root = root || doc;
|
|
|
|
if (typeof root == "string") {
|
|
root = doc.getElementById(root);
|
|
}
|
|
var paths = path.split(","),
|
|
results = [],
|
|
i, len, subPath, result;
|
|
|
|
// loop over each selector
|
|
for (i = 0, len = paths.length; i < len; i++) {
|
|
subPath = paths[i].replace(trimRe, "");
|
|
// compile and place in cache
|
|
if (!cache[subPath]) {
|
|
// When we compile, escaping is handled inside the compile method
|
|
cache[subPath] = DQ.compile(subPath, type);
|
|
if (!cache[subPath]) {
|
|
Ext.Error.raise({
|
|
sourceClass:'Ext.DomQuery',
|
|
sourceMethod:'jsSelect',
|
|
msg:subPath + ' is not a valid selector'
|
|
});
|
|
}
|
|
} else {
|
|
// If we've already compiled, we still need to check if the
|
|
// selector has escaping and setup the appropriate flags
|
|
setupEscapes(subPath);
|
|
}
|
|
result = cache[subPath](root);
|
|
if (result && result !== doc) {
|
|
results = results.concat(result);
|
|
}
|
|
}
|
|
|
|
// if there were multiple selectors, make sure dups
|
|
// are eliminated
|
|
if (paths.length > 1) {
|
|
return nodup(results);
|
|
}
|
|
return results;
|
|
},
|
|
|
|
isXml: function(el) {
|
|
var docEl = (el ? el.ownerDocument || el : 0).documentElement;
|
|
return docEl ? docEl.nodeName !== "HTML" : false;
|
|
},
|
|
|
|
/**
|
|
* Selects an array of DOM nodes by CSS/XPath selector.
|
|
*
|
|
* Uses [document.querySelectorAll][0] if browser supports that, otherwise falls back to
|
|
* {@link Ext.dom.Query#jsSelect} to do the work.
|
|
*
|
|
* Aliased as {@link Ext#query}.
|
|
*
|
|
* [0]: https://developer.mozilla.org/en/DOM/document.querySelectorAll
|
|
*
|
|
* @param {String} path The selector/xpath query
|
|
* @param {HTMLElement} [root=document] The start of the query.
|
|
* @return {HTMLElement[]} An array of DOM elements (not a NodeList as returned by `querySelectorAll`).
|
|
* @param {String} [type="select"] Either "select" or "simple" for a simple selector match (only valid when
|
|
* used when the call is deferred to the jsSelect method)
|
|
* @param {Boolean} [single] Pass `true` to select only the first matching node using `document.querySelector` (where available)
|
|
* @method
|
|
*/
|
|
select : doc.querySelectorAll ? function(path, root, type, single) {
|
|
root = root || doc;
|
|
if (!DQ.isXml(root)) {
|
|
try {
|
|
/*
|
|
* This checking here is to "fix" the behaviour of querySelectorAll
|
|
* for non root document queries. The way qsa works is intentional,
|
|
* however it's definitely not the expected way it should work.
|
|
* When descendant selectors are used, only the lowest selector must be inside the root!
|
|
* More info: http://ejohn.org/blog/thoughts-on-queryselectorall/
|
|
* So we create a descendant selector by prepending the root's ID, and query the parent node.
|
|
* UNLESS the root has no parent in which qsa will work perfectly.
|
|
*
|
|
* We only modify the path for single selectors (ie, no multiples),
|
|
* without a full parser it makes it difficult to do this correctly.
|
|
*/
|
|
if (root.parentNode && (root.nodeType !== 9) && path.indexOf(',') === -1 && !startIdRe.test(path)) {
|
|
path = '#' + Ext.escapeId(Ext.id(root)) + ' ' + path;
|
|
root = root.parentNode;
|
|
}
|
|
return single ? [ root.querySelector(path) ]
|
|
: Ext.Array.toArray(root.querySelectorAll(path));
|
|
}
|
|
catch (e) {
|
|
}
|
|
}
|
|
return DQ.jsSelect.call(this, path, root, type);
|
|
} : function(path, root, type) {
|
|
return DQ.jsSelect.call(this, path, root, type);
|
|
},
|
|
|
|
/**
|
|
* Selects a single element.
|
|
* @param {String} selector The selector/xpath query
|
|
* @param {HTMLElement} [root=document] The start of the query.
|
|
* @return {HTMLElement} The DOM element which matched the selector.
|
|
*/
|
|
selectNode : function(path, root){
|
|
return Ext.DomQuery.select(path, root, null, true)[0];
|
|
},
|
|
|
|
/**
|
|
* Selects the value of a node, optionally replacing null with the defaultValue.
|
|
* @param {String} selector The selector/xpath query
|
|
* @param {HTMLElement} [root=document] The start of the query.
|
|
* @param {String} [defaultValue] When specified, this is return as empty value.
|
|
* @return {String}
|
|
*/
|
|
selectValue: function(path, root, defaultValue) {
|
|
path = path.replace(trimRe, "");
|
|
if (!valueCache[path]) {
|
|
valueCache[path] = DQ.compile(path, "select");
|
|
} else {
|
|
setupEscapes(path);
|
|
}
|
|
|
|
var n = valueCache[path](root),
|
|
v;
|
|
|
|
n = n[0] ? n[0] : n;
|
|
|
|
// overcome a limitation of maximum textnode size
|
|
// Rumored to potentially crash IE6 but has not been confirmed.
|
|
// http://reference.sitepoint.com/javascript/Node/normalize
|
|
// https://developer.mozilla.org/En/DOM/Node.normalize
|
|
if (typeof n.normalize == 'function') {
|
|
n.normalize();
|
|
}
|
|
|
|
v = (n && n.firstChild ? n.firstChild.nodeValue : null);
|
|
return ((v === null || v === undefined || v === '') ? defaultValue : v);
|
|
},
|
|
|
|
/**
|
|
* Selects the value of a node, parsing integers and floats.
|
|
* Returns the defaultValue, or 0 if none is specified.
|
|
* @param {String} selector The selector/xpath query
|
|
* @param {HTMLElement} [root=document] The start of the query.
|
|
* @param {Number} [defaultValue] When specified, this is return as empty value.
|
|
* @return {Number}
|
|
*/
|
|
selectNumber: function(path, root, defaultValue) {
|
|
var v = DQ.selectValue(path, root, defaultValue || 0);
|
|
return parseFloat(v);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed element(s) match the passed simple selector
|
|
* (e.g. `div.some-class` or `span:first-child`)
|
|
* @param {String/HTMLElement/HTMLElement[]} el An element id, element or array of elements
|
|
* @param {String} selector The simple selector to test
|
|
* @return {Boolean}
|
|
*/
|
|
is: function(el, ss) {
|
|
if (typeof el == "string") {
|
|
el = doc.getElementById(el);
|
|
}
|
|
var isArray = Ext.isArray(el),
|
|
result = DQ.filter(isArray ? el : [el], ss);
|
|
return isArray ? (result.length == el.length) : (result.length > 0);
|
|
},
|
|
|
|
/**
|
|
* Filters an array of elements to only include matches of a simple selector
|
|
* (e.g. `div.some-class` or `span:first-child`)
|
|
* @param {HTMLElement[]} el An array of elements to filter
|
|
* @param {String} selector The simple selector to test
|
|
* @param {Boolean} nonMatches If true, it returns the elements that DON'T match the selector instead of the
|
|
* ones that match
|
|
* @return {HTMLElement[]} An Array of DOM elements which match the selector. If there are no matches, and empty
|
|
* Array is returned.
|
|
*/
|
|
filter: function(els, ss, nonMatches) {
|
|
ss = ss.replace(trimRe, "");
|
|
if (!simpleCache[ss]) {
|
|
simpleCache[ss] = DQ.compile(ss, "simple");
|
|
} else {
|
|
setupEscapes(ss);
|
|
}
|
|
|
|
var result = simpleCache[ss](els);
|
|
return nonMatches ? quickDiff(result, els) : result;
|
|
},
|
|
|
|
/**
|
|
* Collection of matching regular expressions and code snippets.
|
|
* Each capture group within `()` will be replace the `{}` in the select
|
|
* statement as specified by their index.
|
|
*/
|
|
matchers: [{
|
|
re: /^\.([\w\-\\]+)/,
|
|
select: useClassList ? 'n = byClassName(n, "{1}");' : 'n = byClassName(n, " {1} ");'
|
|
}, {
|
|
re: /^\:([\w\-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
|
|
select: 'n = byPseudo(n, "{1}", "{2}");'
|
|
}, {
|
|
re: /^(?:([\[\{])(?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
|
|
select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
|
|
}, {
|
|
re: /^#([\w\-\\]+)/,
|
|
select: 'n = byId(n, "{1}");'
|
|
}, {
|
|
re: /^@([\w\-\.]+)/,
|
|
select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
|
|
}],
|
|
|
|
/**
|
|
* Collection of operator comparison functions.
|
|
* The default operators are `=`, `!=`, `^=`, `$=`, `*=`, `%=`, `|=` and `~=`.
|
|
*
|
|
* New operators can be added as long as the match the format *c*`=` where *c*
|
|
* is any character other than space, `>`, or `<`.
|
|
*
|
|
* Operator functions are passed the following parameters:
|
|
*
|
|
* * `propValue` : The property value to test.
|
|
* * `compareTo` : The value to compare to.
|
|
*/
|
|
operators: {
|
|
"=": function(a, v) {
|
|
return a == v;
|
|
},
|
|
"!=": function(a, v) {
|
|
return a != v;
|
|
},
|
|
"^=": function(a, v) {
|
|
return a && a.substr(0, v.length) == v;
|
|
},
|
|
"$=": function(a, v) {
|
|
return a && a.substr(a.length - v.length) == v;
|
|
},
|
|
"*=": function(a, v) {
|
|
return a && a.indexOf(v) !== -1;
|
|
},
|
|
"%=": function(a, v) {
|
|
return (a % v) === 0;
|
|
},
|
|
"|=": function(a, v) {
|
|
return a && (a == v || a.substr(0, v.length + 1) == v + '-');
|
|
},
|
|
"~=": function(a, v) {
|
|
return a && (' ' + a + ' ').indexOf(' ' + v + ' ') != -1;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Object hash of "pseudo class" filter functions which are used when filtering selections.
|
|
* Each function is passed two parameters:
|
|
*
|
|
* - **c** : Array
|
|
* An Array of DOM elements to filter.
|
|
*
|
|
* - **v** : String
|
|
* The argument (if any) supplied in the selector.
|
|
*
|
|
* A filter function returns an Array of DOM elements which conform to the pseudo class.
|
|
* In addition to the provided pseudo classes listed above such as `first-child` and `nth-child`,
|
|
* developers may add additional, custom psuedo class filters to select elements according to application-specific requirements.
|
|
*
|
|
* For example, to filter `a` elements to only return links to __external__ resources:
|
|
*
|
|
* Ext.DomQuery.pseudos.external = function(c, v) {
|
|
* var r = [], ri = -1;
|
|
* for(var i = 0, ci; ci = c[i]; i++) {
|
|
* // Include in result set only if it's a link to an external resource
|
|
* if (ci.hostname != location.hostname) {
|
|
* r[++ri] = ci;
|
|
* }
|
|
* }
|
|
* return r;
|
|
* };
|
|
*
|
|
* Then external links could be gathered with the following statement:
|
|
*
|
|
* var externalLinks = Ext.select("a:external");
|
|
*/
|
|
pseudos: {
|
|
"first-child": function(c) {
|
|
var r = [], ri = -1, n,
|
|
i, ci;
|
|
for (i = 0; (ci = n = c[i]); i++) {
|
|
while ((n = n.previousSibling) && n.nodeType != 1);
|
|
if (!n) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"last-child": function(c) {
|
|
var r = [], ri = -1, n,
|
|
i, ci;
|
|
for (i = 0; (ci = n = c[i]); i++) {
|
|
while ((n = n.nextSibling) && n.nodeType != 1);
|
|
if (!n) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"nth-child": function(c, a) {
|
|
var r = [], ri = -1,
|
|
m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),
|
|
f = (m[1] || 1) - 0, l = m[2] - 0,
|
|
i, n, j, cn, pn;
|
|
for (i = 0; n = c[i]; i++) {
|
|
pn = n.parentNode;
|
|
if (batch != pn._batch) {
|
|
j = 0;
|
|
for (cn = pn.firstChild; cn; cn = cn.nextSibling) {
|
|
if (cn.nodeType == 1) {
|
|
cn.nodeIndex = ++j;
|
|
}
|
|
}
|
|
pn._batch = batch;
|
|
}
|
|
if (f == 1) {
|
|
if (l === 0 || n.nodeIndex == l) {
|
|
r[++ri] = n;
|
|
}
|
|
} else if ((n.nodeIndex + l) % f === 0) {
|
|
r[++ri] = n;
|
|
}
|
|
}
|
|
|
|
return r;
|
|
},
|
|
|
|
"only-child": function(c) {
|
|
var r = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
if (!prev(ci) && !next(ci)) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"empty": function(c) {
|
|
var r = [], ri = -1,
|
|
i, ci, cns, j, cn, empty;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
cns = ci.childNodes;
|
|
j = 0;
|
|
empty = true;
|
|
while (cn = cns[j]) {
|
|
++j;
|
|
if (cn.nodeType == 1 || cn.nodeType == 3) {
|
|
empty = false;
|
|
break;
|
|
}
|
|
}
|
|
if (empty) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"contains": function(c, v) {
|
|
var r = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
if ((ci.textContent || ci.innerText || ci.text || '').indexOf(v) != -1) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"nodeValue": function(c, v) {
|
|
var r = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
if (ci.firstChild && ci.firstChild.nodeValue == v) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"checked": function(c) {
|
|
var r = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
if (ci.checked === true) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"not": function(c, ss) {
|
|
return DQ.filter(c, ss, true);
|
|
},
|
|
|
|
"any": function(c, selectors) {
|
|
var ss = selectors.split('|'),
|
|
r = [], ri = -1, s,
|
|
i, ci, j;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
for (j = 0; s = ss[j]; j++) {
|
|
if (DQ.is(ci, s)) {
|
|
r[++ri] = ci;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"odd": function(c) {
|
|
return this["nth-child"](c, "odd");
|
|
},
|
|
|
|
"even": function(c) {
|
|
return this["nth-child"](c, "even");
|
|
},
|
|
|
|
"nth": function(c, a) {
|
|
return c[a - 1] || [];
|
|
},
|
|
|
|
"first": function(c) {
|
|
return c[0] || [];
|
|
},
|
|
|
|
"last": function(c) {
|
|
return c[c.length - 1] || [];
|
|
},
|
|
|
|
"has": function(c, ss) {
|
|
var s = DQ.select,
|
|
r = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
if (s(ss, ci).length > 0) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"next": function(c, ss) {
|
|
var is = DQ.is,
|
|
r = [], ri = -1,
|
|
i, ci, n;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
n = next(ci);
|
|
if (n && is(n, ss)) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
"prev": function(c, ss) {
|
|
var is = DQ.is,
|
|
r = [], ri = -1,
|
|
i, ci, n;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
n = prev(ci);
|
|
if (n && is(n, ss)) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
focusable: function(candidates) {
|
|
var len = candidates.length,
|
|
results = [],
|
|
i = 0,
|
|
c;
|
|
|
|
for (; i < len; i++) {
|
|
c = candidates[i];
|
|
if (Ext.fly(c, '_DomQuery').isFocusable()) {
|
|
results.push(c);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
},
|
|
|
|
visible: function(candidates, deep) {
|
|
var len = candidates.length,
|
|
results = [],
|
|
i = 0,
|
|
c;
|
|
|
|
for (; i < len; i++) {
|
|
c = candidates[i];
|
|
if (Ext.fly(c, '_DomQuery').isVisible(deep)) {
|
|
results.push(c);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
}
|
|
}
|
|
};
|
|
}());
|
|
|
|
/**
|
|
* Shorthand of {@link Ext.dom.Query#select}
|
|
* @member Ext
|
|
* @method query
|
|
* @inheritdoc Ext.dom.Query#select
|
|
*/
|
|
Ext.query = Ext.DomQuery.select;
|
|
|
|
// @tag dom,core
|
|
/* ================================
|
|
* A Note About Wrapped Animations
|
|
* ================================
|
|
* A few of the effects below implement two different animations per effect, one wrapping
|
|
* animation that performs the visual effect and a "no-op" animation on this Element where
|
|
* no attributes of the element itself actually change. The purpose for this is that the
|
|
* wrapper is required for the effect to work and so it does the actual animation work, but
|
|
* we always animate `this` so that the element's events and callbacks work as expected to
|
|
* the callers of this API.
|
|
*
|
|
* Because of this, we always want each wrap animation to complete first (we don't want to
|
|
* cut off the visual effect early). To ensure that, we arbitrarily increase the duration of
|
|
* the element's no-op animation, also ensuring that it has a decent minimum value -- on slow
|
|
* systems, too-low durations can cause race conditions between the wrap animation and the
|
|
* element animation being removed out of order. Note that in each wrap's `afteranimate`
|
|
* callback it will explicitly terminate the element animation as soon as the wrap is complete,
|
|
* so there's no real danger in making the duration too long.
|
|
*
|
|
* This applies to all effects that get wrapped, including slideIn, slideOut, switchOff and frame.
|
|
*/
|
|
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.Element_anim', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
/**
|
|
* Performs custom animation on this Element.
|
|
*
|
|
* The following properties may be specified in `from`, `to`, and `keyframe` objects:
|
|
*
|
|
* - `x` - The page X position in pixels.
|
|
*
|
|
* - `y` - The page Y position in pixels
|
|
*
|
|
* - `left` - The element's CSS `left` value. Units must be supplied.
|
|
*
|
|
* - `top` - The element's CSS `top` value. Units must be supplied.
|
|
*
|
|
* - `width` - The element's CSS `width` value. Units must be supplied.
|
|
*
|
|
* - `height` - The element's CSS `height` value. Units must be supplied.
|
|
*
|
|
* - `scrollLeft` - The element's `scrollLeft` value.
|
|
*
|
|
* - `scrollTop` - The element's `scrollTop` value.
|
|
*
|
|
* - `opacity` - The element's `opacity` value. This must be a value between `0` and `1`.
|
|
*
|
|
* **Be aware** that animating an Element which is being used by an Ext Component without in some way informing the
|
|
* Component about the changed element state will result in incorrect Component behaviour. This is because the
|
|
* Component will be using the old state of the element. To avoid this problem, it is now possible to directly
|
|
* animate certain properties of Components.
|
|
*
|
|
* @param {Object} config Configuration for {@link Ext.fx.Anim}.
|
|
* Note that the {@link Ext.fx.Anim#to to} config is required.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
animate: function(config) {
|
|
var me = this,
|
|
listeners,
|
|
anim,
|
|
animId = me.dom.id || Ext.id(me.dom);
|
|
|
|
if (!Ext.fx.Manager.hasFxBlock(animId)) {
|
|
// Bit of gymnastics here to ensure our internal listeners get bound first
|
|
if (config.listeners) {
|
|
listeners = config.listeners;
|
|
delete config.listeners;
|
|
}
|
|
if (config.internalListeners) {
|
|
config.listeners = config.internalListeners;
|
|
delete config.internalListeners;
|
|
}
|
|
anim = new Ext.fx.Anim(me.anim(config));
|
|
if (listeners) {
|
|
anim.on(listeners);
|
|
}
|
|
Ext.fx.Manager.queueFx(anim);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// @private - process the passed fx configuration.
|
|
anim: function(config) {
|
|
if (!Ext.isObject(config)) {
|
|
return (config) ? {} : false;
|
|
}
|
|
|
|
var me = this,
|
|
duration = config.duration || Ext.fx.Anim.prototype.duration,
|
|
easing = config.easing || 'ease',
|
|
animConfig;
|
|
|
|
if (config.stopAnimation) {
|
|
me.stopAnimation();
|
|
}
|
|
|
|
Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
|
|
|
|
// Clear any 'paused' defaults.
|
|
Ext.fx.Manager.setFxDefaults(me.id, {
|
|
delay: 0
|
|
});
|
|
|
|
animConfig = {
|
|
// Pass the DOM reference. That's tested first so will be converted to an Ext.fx.Target fastest.
|
|
target: me.dom,
|
|
remove: config.remove,
|
|
alternate: config.alternate || false,
|
|
duration: duration,
|
|
easing: easing,
|
|
callback: config.callback,
|
|
listeners: config.listeners,
|
|
iterations: config.iterations || 1,
|
|
scope: config.scope,
|
|
block: config.block,
|
|
concurrent: config.concurrent,
|
|
delay: config.delay || 0,
|
|
paused: true,
|
|
keyframes: config.keyframes,
|
|
from: config.from || {},
|
|
to: Ext.apply({}, config)
|
|
};
|
|
Ext.apply(animConfig.to, config.to);
|
|
|
|
// Anim API properties - backward compat
|
|
delete animConfig.to.to;
|
|
delete animConfig.to.from;
|
|
delete animConfig.to.remove;
|
|
delete animConfig.to.alternate;
|
|
delete animConfig.to.keyframes;
|
|
delete animConfig.to.iterations;
|
|
delete animConfig.to.listeners;
|
|
delete animConfig.to.target;
|
|
delete animConfig.to.paused;
|
|
delete animConfig.to.callback;
|
|
delete animConfig.to.scope;
|
|
delete animConfig.to.duration;
|
|
delete animConfig.to.easing;
|
|
delete animConfig.to.concurrent;
|
|
delete animConfig.to.block;
|
|
delete animConfig.to.stopAnimation;
|
|
delete animConfig.to.delay;
|
|
return animConfig;
|
|
},
|
|
|
|
/**
|
|
* Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide
|
|
* effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the
|
|
* {@link Ext.fx.Anim} class overview for valid anchor point options. Usage:
|
|
*
|
|
* // default: slide the element in from the top
|
|
* el.slideIn();
|
|
*
|
|
* // custom: slide the element in from the right with a 2-second duration
|
|
* el.slideIn('r', { duration: 2000 });
|
|
*
|
|
* // common config options shown with default values
|
|
* el.slideIn('t', {
|
|
* easing: 'easeOut',
|
|
* duration: 500
|
|
* });
|
|
*
|
|
* @param {String} anchor (optional) One of the valid {@link Ext.fx.Anim} anchor positions (defaults to top: 't')
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @param {Boolean} options.preserveScroll Set to true if preservation of any descendant elements'
|
|
* `scrollTop` values is required. By default the DOM wrapping operation performed by `slideIn` and
|
|
* `slideOut` causes the browser to lose all scroll positions.
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
slideIn: function(anchor, obj, slideOut) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
elStyle = dom.style,
|
|
beforeAnim,
|
|
wrapAnim,
|
|
restoreScroll,
|
|
wrapDomParentNode;
|
|
|
|
anchor = anchor || "t";
|
|
obj = obj || {};
|
|
|
|
beforeAnim = function() {
|
|
var animScope = this,
|
|
listeners = obj.listeners,
|
|
el = Ext.fly(dom, '_anim'),
|
|
box, originalStyles, anim, wrap;
|
|
|
|
if (!slideOut) {
|
|
el.fixDisplay();
|
|
}
|
|
|
|
box = el.getBox();
|
|
if ((anchor == 't' || anchor == 'b') && box.height === 0) {
|
|
box.height = dom.scrollHeight;
|
|
}
|
|
else if ((anchor == 'l' || anchor == 'r') && box.width === 0) {
|
|
box.width = dom.scrollWidth;
|
|
}
|
|
|
|
originalStyles = el.getStyles('width', 'height', 'left', 'right', 'top', 'bottom', 'position', 'z-index', true);
|
|
el.setSize(box.width, box.height);
|
|
|
|
// Cache all descendants' scrollTop & scrollLeft values if configured to preserve scroll.
|
|
if (obj.preserveScroll) {
|
|
restoreScroll = el.cacheScrollValues();
|
|
}
|
|
|
|
wrap = el.wrap({
|
|
id: Ext.id() + '-anim-wrap-for-' + el.dom.id,
|
|
style: {
|
|
visibility: slideOut ? 'visible' : 'hidden'
|
|
}
|
|
});
|
|
wrapDomParentNode = wrap.dom.parentNode;
|
|
wrap.setPositioning(el.getPositioning(true));
|
|
if (wrap.isStyle('position', 'static')) {
|
|
wrap.position('relative');
|
|
}
|
|
el.clearPositioning('auto');
|
|
wrap.clip();
|
|
|
|
// The wrap will have reset all descendant scrollTops. Restore them if we cached them.
|
|
if (restoreScroll) {
|
|
restoreScroll();
|
|
}
|
|
|
|
// This element is temporarily positioned absolute within its wrapper.
|
|
// Restore to its default, CSS-inherited visibility setting.
|
|
// We cannot explicitly poke visibility:visible into its style because that overrides the visibility of the wrap.
|
|
el.setStyle({
|
|
visibility: '',
|
|
position: 'absolute'
|
|
});
|
|
if (slideOut) {
|
|
wrap.setSize(box.width, box.height);
|
|
}
|
|
|
|
switch (anchor) {
|
|
case 't':
|
|
anim = {
|
|
from: {
|
|
width: box.width + 'px',
|
|
height: '0px'
|
|
},
|
|
to: {
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
elStyle.bottom = '0px';
|
|
break;
|
|
case 'l':
|
|
anim = {
|
|
from: {
|
|
width: '0px',
|
|
height: box.height + 'px'
|
|
},
|
|
to: {
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
me.anchorAnimX(anchor);
|
|
break;
|
|
case 'r':
|
|
anim = {
|
|
from: {
|
|
x: box.x + box.width,
|
|
width: '0px',
|
|
height: box.height + 'px'
|
|
},
|
|
to: {
|
|
x: box.x,
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
me.anchorAnimX(anchor);
|
|
break;
|
|
case 'b':
|
|
anim = {
|
|
from: {
|
|
y: box.y + box.height,
|
|
width: box.width + 'px',
|
|
height: '0px'
|
|
},
|
|
to: {
|
|
y: box.y,
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
break;
|
|
case 'tl':
|
|
anim = {
|
|
from: {
|
|
x: box.x,
|
|
y: box.y,
|
|
width: '0px',
|
|
height: '0px'
|
|
},
|
|
to: {
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
elStyle.bottom = '0px';
|
|
me.anchorAnimX('l');
|
|
break;
|
|
case 'bl':
|
|
anim = {
|
|
from: {
|
|
y: box.y + box.height,
|
|
width: '0px',
|
|
height: '0px'
|
|
},
|
|
to: {
|
|
y: box.y,
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
me.anchorAnimX('l');
|
|
break;
|
|
case 'br':
|
|
anim = {
|
|
from: {
|
|
x: box.x + box.width,
|
|
y: box.y + box.height,
|
|
width: '0px',
|
|
height: '0px'
|
|
},
|
|
to: {
|
|
x: box.x,
|
|
y: box.y,
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
me.anchorAnimX('r');
|
|
break;
|
|
case 'tr':
|
|
anim = {
|
|
from: {
|
|
x: box.x + box.width,
|
|
width: '0px',
|
|
height: '0px'
|
|
},
|
|
to: {
|
|
x: box.x,
|
|
width: box.width + 'px',
|
|
height: box.height + 'px'
|
|
}
|
|
};
|
|
elStyle.bottom = '0px';
|
|
me.anchorAnimX('r');
|
|
break;
|
|
}
|
|
|
|
wrap.show();
|
|
wrapAnim = Ext.apply({}, obj);
|
|
delete wrapAnim.listeners;
|
|
wrapAnim = new Ext.fx.Anim(Ext.applyIf(wrapAnim, {
|
|
target: wrap,
|
|
duration: 500,
|
|
easing: 'ease-out',
|
|
from: slideOut ? anim.to : anim.from,
|
|
to: slideOut ? anim.from : anim.to
|
|
}));
|
|
|
|
// In the absence of a callback, this listener MUST be added first
|
|
wrapAnim.on('afteranimate', function() {
|
|
var el = Ext.fly(dom, '_anim');
|
|
|
|
el.setStyle(originalStyles);
|
|
if (slideOut) {
|
|
if (obj.useDisplay) {
|
|
el.setDisplayed(false);
|
|
} else {
|
|
el.hide();
|
|
}
|
|
}
|
|
if (wrap.dom) {
|
|
if (wrap.dom.parentNode) {
|
|
wrap.dom.parentNode.insertBefore(el.dom, wrap.dom);
|
|
} else {
|
|
wrapDomParentNode.appendChild(el.dom);
|
|
}
|
|
wrap.remove();
|
|
}
|
|
// The unwrap will have reset all descendant scrollTops. Restore them if we cached them.
|
|
if (restoreScroll) {
|
|
restoreScroll();
|
|
}
|
|
// kill the no-op element animation created below
|
|
animScope.end();
|
|
});
|
|
// Add configured listeners after
|
|
if (listeners) {
|
|
wrapAnim.on(listeners);
|
|
}
|
|
};
|
|
|
|
me.animate({
|
|
// See "A Note About Wrapped Animations" at the top of this class:
|
|
duration: obj.duration ? Math.max(obj.duration, 500) * 2 : 1000,
|
|
listeners: {
|
|
beforeanimate: beforeAnim // kick off the wrap animation
|
|
}
|
|
});
|
|
return me;
|
|
},
|
|
|
|
|
|
/**
|
|
* Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide
|
|
* effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will
|
|
* still take up space in the document. The element must be removed from the DOM using the 'remove' config option if
|
|
* desired. This function automatically handles wrapping the element with a fixed-size container if needed. See the
|
|
* {@link Ext.fx.Anim} class overview for valid anchor point options. Usage:
|
|
*
|
|
* // default: slide the element out to the top
|
|
* el.slideOut();
|
|
*
|
|
* // custom: slide the element out to the right with a 2-second duration
|
|
* el.slideOut('r', { duration: 2000 });
|
|
*
|
|
* // common config options shown with default values
|
|
* el.slideOut('t', {
|
|
* easing: 'easeOut',
|
|
* duration: 500,
|
|
* remove: false,
|
|
* useDisplay: false
|
|
* });
|
|
*
|
|
* @param {String} anchor (optional) One of the valid {@link Ext.fx.Anim} anchor positions (defaults to top: 't')
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
slideOut: function(anchor, o) {
|
|
return this.slideIn(anchor, o, true);
|
|
},
|
|
|
|
/**
|
|
* Fades the element out while slowly expanding it in all directions. When the effect is completed, the element will
|
|
* be hidden (visibility = 'hidden') but block elements will still take up space in the document. Usage:
|
|
*
|
|
* // default
|
|
* el.puff();
|
|
*
|
|
* // common config options shown with default values
|
|
* el.puff({
|
|
* easing: 'easeOut',
|
|
* duration: 500,
|
|
* useDisplay: false
|
|
* });
|
|
*
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
puff: function(obj) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
beforeAnim,
|
|
box = me.getBox(),
|
|
originalStyles = me.getStyles('width', 'height', 'left', 'right', 'top', 'bottom', 'position', 'z-index', 'font-size', 'opacity', true);
|
|
|
|
obj = Ext.applyIf(obj || {}, {
|
|
easing: 'ease-out',
|
|
duration: 500,
|
|
useDisplay: false
|
|
});
|
|
|
|
beforeAnim = function() {
|
|
var el = Ext.fly(dom, '_anim');
|
|
|
|
el.clearOpacity();
|
|
el.show();
|
|
this.to = {
|
|
width: box.width * 2,
|
|
height: box.height * 2,
|
|
x: box.x - (box.width / 2),
|
|
y: box.y - (box.height /2),
|
|
opacity: 0,
|
|
fontSize: '200%'
|
|
};
|
|
this.on('afteranimate',function() {
|
|
var el = Ext.fly(dom, '_anim');
|
|
if (el) {
|
|
if (obj.useDisplay) {
|
|
el.setDisplayed(false);
|
|
} else {
|
|
el.hide();
|
|
}
|
|
el.setStyle(originalStyles);
|
|
Ext.callback(obj.callback, obj.scope);
|
|
}
|
|
});
|
|
};
|
|
|
|
me.animate({
|
|
duration: obj.duration,
|
|
easing: obj.easing,
|
|
listeners: {
|
|
beforeanimate: {
|
|
fn: beforeAnim
|
|
}
|
|
}
|
|
});
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
|
|
* When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
|
|
* take up space in the document. The element must be removed from the DOM using the 'remove' config option if
|
|
* desired. Usage:
|
|
*
|
|
* // default
|
|
* el.switchOff();
|
|
*
|
|
* // all config options shown with default values
|
|
* el.switchOff({
|
|
* easing: 'easeIn',
|
|
* duration: .3,
|
|
* remove: false,
|
|
* useDisplay: false
|
|
* });
|
|
*
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
switchOff: function(obj) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
beforeAnim;
|
|
|
|
obj = Ext.applyIf(obj || {}, {
|
|
easing: 'ease-in',
|
|
duration: 500,
|
|
remove: false,
|
|
useDisplay: false
|
|
});
|
|
|
|
beforeAnim = function() {
|
|
var el = Ext.fly(dom, '_anim'),
|
|
animScope = this,
|
|
size = el.getSize(),
|
|
xy = el.getXY(),
|
|
keyframe, position;
|
|
|
|
el.clearOpacity();
|
|
el.clip();
|
|
position = el.getPositioning();
|
|
|
|
keyframe = new Ext.fx.Animator({
|
|
target: dom,
|
|
duration: obj.duration,
|
|
easing: obj.easing,
|
|
keyframes: {
|
|
33: {
|
|
opacity: 0.3
|
|
},
|
|
66: {
|
|
height: 1,
|
|
y: xy[1] + size.height / 2
|
|
},
|
|
100: {
|
|
width: 1,
|
|
x: xy[0] + size.width / 2
|
|
}
|
|
}
|
|
});
|
|
keyframe.on('afteranimate', function() {
|
|
var el = Ext.fly(dom, '_anim');
|
|
if (obj.useDisplay) {
|
|
el.setDisplayed(false);
|
|
} else {
|
|
el.hide();
|
|
}
|
|
el.clearOpacity();
|
|
el.setPositioning(position);
|
|
el.setSize(size);
|
|
// kill the no-op element animation created below
|
|
animScope.end();
|
|
});
|
|
};
|
|
|
|
me.animate({
|
|
// See "A Note About Wrapped Animations" at the top of this class:
|
|
duration: (Math.max(obj.duration, 500) * 2),
|
|
listeners: {
|
|
beforeanimate: {
|
|
fn: beforeAnim
|
|
}
|
|
},
|
|
callback: obj.callback,
|
|
scope: obj.scope
|
|
});
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Shows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:
|
|
*
|
|
* // default: a single light blue ripple
|
|
* el.frame();
|
|
*
|
|
* // custom: 3 red ripples lasting 3 seconds total
|
|
* el.frame("#ff0000", 3, { duration: 3000 });
|
|
*
|
|
* // common config options shown with default values
|
|
* el.frame("#C3DAF9", 1, {
|
|
* duration: 1000 // duration of each individual ripple.
|
|
* // Note: Easing is not configurable and will be ignored if included
|
|
* });
|
|
*
|
|
* @param {String} [color='#C3DAF9'] The hex color value for the border.
|
|
* @param {Number} [count=1] The number of ripples to display.
|
|
* @param {Object} [options] Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
frame : function(color, count, obj){
|
|
var me = this,
|
|
dom = me.dom,
|
|
beforeAnim;
|
|
|
|
color = color || '#C3DAF9';
|
|
count = count || 1;
|
|
obj = obj || {};
|
|
|
|
beforeAnim = function() {
|
|
var el = Ext.fly(dom, '_anim'),
|
|
animScope = this,
|
|
box,
|
|
proxy, proxyAnim;
|
|
|
|
el.show();
|
|
box = el.getBox();
|
|
proxy = Ext.getBody().createChild({
|
|
id: el.dom.id + '-anim-proxy',
|
|
style: {
|
|
position : 'absolute',
|
|
'pointer-events': 'none',
|
|
'z-index': 35000,
|
|
border : '0px solid ' + color
|
|
}
|
|
});
|
|
|
|
proxyAnim = new Ext.fx.Anim({
|
|
target: proxy,
|
|
duration: obj.duration || 1000,
|
|
iterations: count,
|
|
from: {
|
|
top: box.y,
|
|
left: box.x,
|
|
borderWidth: 0,
|
|
opacity: 1,
|
|
height: box.height,
|
|
width: box.width
|
|
},
|
|
to: {
|
|
top: box.y - 20,
|
|
left: box.x - 20,
|
|
borderWidth: 10,
|
|
opacity: 0,
|
|
height: box.height + 40,
|
|
width: box.width + 40
|
|
}
|
|
});
|
|
proxyAnim.on('afteranimate', function() {
|
|
proxy.remove();
|
|
// kill the no-op element animation created below
|
|
animScope.end();
|
|
});
|
|
};
|
|
|
|
me.animate({
|
|
// See "A Note About Wrapped Animations" at the top of this class:
|
|
duration: (Math.max(obj.duration, 500) * 2) || 2000,
|
|
listeners: {
|
|
beforeanimate: {
|
|
fn: beforeAnim
|
|
}
|
|
},
|
|
callback: obj.callback,
|
|
scope: obj.scope
|
|
});
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Slides the element while fading it out of view. An anchor point can be optionally passed to set the ending point
|
|
* of the effect. Usage:
|
|
*
|
|
* // default: slide the element downward while fading out
|
|
* el.ghost();
|
|
*
|
|
* // custom: slide the element out to the right with a 2-second duration
|
|
* el.ghost('r', { duration: 2000 });
|
|
*
|
|
* // common config options shown with default values
|
|
* el.ghost('b', {
|
|
* easing: 'easeOut',
|
|
* duration: 500
|
|
* });
|
|
*
|
|
* @param {String} anchor (optional) One of the valid {@link Ext.fx.Anim} anchor positions (defaults to bottom: 'b')
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
ghost: function(anchor, obj) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
beforeAnim;
|
|
|
|
anchor = anchor || "b";
|
|
beforeAnim = function() {
|
|
var el = Ext.fly(dom, '_anim'),
|
|
width = el.getWidth(),
|
|
height = el.getHeight(),
|
|
xy = el.getXY(),
|
|
position = el.getPositioning(),
|
|
to = {
|
|
opacity: 0
|
|
};
|
|
switch (anchor) {
|
|
case 't':
|
|
to.y = xy[1] - height;
|
|
break;
|
|
case 'l':
|
|
to.x = xy[0] - width;
|
|
break;
|
|
case 'r':
|
|
to.x = xy[0] + width;
|
|
break;
|
|
case 'b':
|
|
to.y = xy[1] + height;
|
|
break;
|
|
case 'tl':
|
|
to.x = xy[0] - width;
|
|
to.y = xy[1] - height;
|
|
break;
|
|
case 'bl':
|
|
to.x = xy[0] - width;
|
|
to.y = xy[1] + height;
|
|
break;
|
|
case 'br':
|
|
to.x = xy[0] + width;
|
|
to.y = xy[1] + height;
|
|
break;
|
|
case 'tr':
|
|
to.x = xy[0] + width;
|
|
to.y = xy[1] - height;
|
|
break;
|
|
}
|
|
this.to = to;
|
|
this.on('afteranimate', function () {
|
|
var el = Ext.fly(dom, '_anim');
|
|
if (el) {
|
|
el.hide();
|
|
el.clearOpacity();
|
|
el.setPositioning(position);
|
|
}
|
|
});
|
|
};
|
|
|
|
me.animate(Ext.applyIf(obj || {}, {
|
|
duration: 500,
|
|
easing: 'ease-out',
|
|
listeners: {
|
|
beforeanimate: beforeAnim
|
|
}
|
|
}));
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Highlights the Element by setting a color (applies to the background-color by default, but can be changed using
|
|
* the "attr" config option) and then fading back to the original color. If no original color is available, you
|
|
* should provide the "endColor" config option which will be cleared after the animation. Usage:
|
|
*
|
|
* // default: highlight background to yellow
|
|
* el.highlight();
|
|
*
|
|
* // custom: highlight foreground text to blue for 2 seconds
|
|
* el.highlight("0000ff", { attr: 'color', duration: 2000 });
|
|
*
|
|
* // common config options shown with default values
|
|
* el.highlight("ffff9c", {
|
|
* attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
|
|
* endColor: (current color) or "ffffff",
|
|
* easing: 'easeIn',
|
|
* duration: 1000
|
|
* });
|
|
*
|
|
* @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading #
|
|
* (defaults to yellow: 'ffff9c')
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.dom.Element} The Element
|
|
*/
|
|
highlight: function(color, o) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
from = {},
|
|
restore, to, attr, lns, event, fn;
|
|
|
|
// Cannot set bckground-color on table elements. Find div elements to highlight.
|
|
if (dom.tagName.match(me.tableTagRe)) {
|
|
return me.select('div').highlight(color, o);
|
|
}
|
|
|
|
o = o || {};
|
|
lns = o.listeners || {};
|
|
attr = o.attr || 'backgroundColor';
|
|
from[attr] = color || 'ffff9c';
|
|
|
|
if (!o.to) {
|
|
to = {};
|
|
to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
|
|
}
|
|
else {
|
|
to = o.to;
|
|
}
|
|
|
|
// Don't apply directly on lns, since we reference it in our own callbacks below
|
|
o.listeners = Ext.apply(Ext.apply({}, lns), {
|
|
beforeanimate: function() {
|
|
restore = dom.style[attr];
|
|
var el = Ext.fly(dom, '_anim');
|
|
el.clearOpacity();
|
|
el.show();
|
|
|
|
event = lns.beforeanimate;
|
|
if (event) {
|
|
fn = event.fn || event;
|
|
return fn.apply(event.scope || lns.scope || window, arguments);
|
|
}
|
|
},
|
|
afteranimate: function() {
|
|
if (dom) {
|
|
dom.style[attr] = restore;
|
|
}
|
|
|
|
event = lns.afteranimate;
|
|
if (event) {
|
|
fn = event.fn || event;
|
|
fn.apply(event.scope || lns.scope || window, arguments);
|
|
}
|
|
}
|
|
});
|
|
|
|
me.animate(Ext.apply({}, o, {
|
|
duration: 1000,
|
|
easing: 'ease-in',
|
|
from: from,
|
|
to: to
|
|
}));
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Creates a pause before any subsequent queued effects begin. If there are no effects queued after the pause it will
|
|
* have no effect. Usage:
|
|
*
|
|
* el.pause(1);
|
|
*
|
|
* @deprecated 4.0 Use the `delay` config to {@link #animate} instead.
|
|
* @param {Number} seconds The length of time to pause (in seconds)
|
|
* @return {Ext.Element} The Element
|
|
*/
|
|
pause: function(ms) {
|
|
var me = this;
|
|
Ext.fx.Manager.setFxDefaults(me.id, {
|
|
delay: ms
|
|
});
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Fade an element in (from transparent to opaque). The ending opacity can be specified using the `opacity`
|
|
* config option. Usage:
|
|
*
|
|
* // default: fade in from opacity 0 to 100%
|
|
* el.fadeIn();
|
|
*
|
|
* // custom: fade in from opacity 0 to 75% over 2 seconds
|
|
* el.fadeIn({ opacity: .75, duration: 2000});
|
|
*
|
|
* // common config options shown with default values
|
|
* el.fadeIn({
|
|
* opacity: 1, //can be any value between 0 and 1 (e.g. .5)
|
|
* easing: 'easeOut',
|
|
* duration: 500
|
|
* });
|
|
*
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.Element} The Element
|
|
*/
|
|
fadeIn: function(o) {
|
|
var me = this,
|
|
dom = me.dom;
|
|
|
|
me.animate(Ext.apply({}, o, {
|
|
opacity: 1,
|
|
internalListeners: {
|
|
beforeanimate: function(anim){
|
|
// restore any visibility/display that may have
|
|
// been applied by a fadeout animation
|
|
var el = Ext.fly(dom, '_anim');
|
|
if (el.isStyle('display', 'none')) {
|
|
el.setDisplayed('');
|
|
} else {
|
|
el.show();
|
|
}
|
|
}
|
|
}
|
|
}));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Fade an element out (from opaque to transparent). The ending opacity can be specified using the `opacity`
|
|
* config option. Note that IE may require `useDisplay:true` in order to redisplay correctly.
|
|
* Usage:
|
|
*
|
|
* // default: fade out from the element's current opacity to 0
|
|
* el.fadeOut();
|
|
*
|
|
* // custom: fade out from the element's current opacity to 25% over 2 seconds
|
|
* el.fadeOut({ opacity: .25, duration: 2000});
|
|
*
|
|
* // common config options shown with default values
|
|
* el.fadeOut({
|
|
* opacity: 0, //can be any value between 0 and 1 (e.g. .5)
|
|
* easing: 'easeOut',
|
|
* duration: 500,
|
|
* remove: false,
|
|
* useDisplay: false
|
|
* });
|
|
*
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.Element} The Element
|
|
*/
|
|
fadeOut: function(o) {
|
|
var me = this,
|
|
dom = me.dom;
|
|
|
|
o = Ext.apply({
|
|
opacity: 0,
|
|
internalListeners: {
|
|
afteranimate: function(anim){
|
|
if (dom && anim.to.opacity === 0) {
|
|
var el = Ext.fly(dom, '_anim');
|
|
if (o.useDisplay) {
|
|
el.setDisplayed(false);
|
|
} else {
|
|
el.hide();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, o);
|
|
me.animate(o);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Animates the transition of an element's dimensions from a starting height/width to an ending height/width. This
|
|
* method is a convenience implementation of {@link #shift}. Usage:
|
|
*
|
|
* // change height and width to 100x100 pixels
|
|
* el.scale(100, 100);
|
|
*
|
|
* // common config options shown with default values. The height and width will default to
|
|
* // the element's existing values if passed as null.
|
|
* el.scale(
|
|
* [element's width],
|
|
* [element's height], {
|
|
* easing: 'easeOut',
|
|
* duration: 350
|
|
* }
|
|
* );
|
|
*
|
|
* @deprecated 4.0 Just use {@link #animate} instead.
|
|
* @param {Number} width The new width (pass undefined to keep the original width)
|
|
* @param {Number} height The new height (pass undefined to keep the original height)
|
|
* @param {Object} options (optional) Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.Element} The Element
|
|
*/
|
|
scale: function(w, h, o) {
|
|
this.animate(Ext.apply({}, o, {
|
|
width: w,
|
|
height: h
|
|
}));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Animates the transition of any combination of an element's dimensions, xy position and/or opacity. Any of these
|
|
* properties not specified in the config object will not be changed. This effect requires that at least one new
|
|
* dimension, position or opacity setting must be passed in on the config object in order for the function to have
|
|
* any effect. Usage:
|
|
*
|
|
* // slide the element horizontally to x position 200 while changing the height and opacity
|
|
* el.shift({ x: 200, height: 50, opacity: .8 });
|
|
*
|
|
* // common config options shown with default values.
|
|
* el.shift({
|
|
* width: [element's width],
|
|
* height: [element's height],
|
|
* x: [element's x position],
|
|
* y: [element's y position],
|
|
* opacity: [element's opacity],
|
|
* easing: 'easeOut',
|
|
* duration: 350
|
|
* });
|
|
*
|
|
* @deprecated 4.0 Just use {@link #animate} instead.
|
|
* @param {Object} options Object literal with any of the {@link Ext.fx.Anim} config options
|
|
* @return {Ext.Element} The Element
|
|
*/
|
|
shift: function(config) {
|
|
this.animate(config);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
anchorAnimX: function(anchor) {
|
|
var xName = (anchor === 'l') ? 'right' : 'left';
|
|
this.dom.style[xName] = '0px';
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.Element_dd', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
/**
|
|
* Initializes a {@link Ext.dd.DD} drag drop object for this element.
|
|
* @param {String} group The group the DD object is member of
|
|
* @param {Object} config The DD config object
|
|
* @param {Object} overrides An object containing methods to override/implement on the DD object
|
|
* @return {Ext.dd.DD} The DD object
|
|
*/
|
|
initDD : function(group, config, overrides){
|
|
var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
|
|
return Ext.apply(dd, overrides);
|
|
},
|
|
|
|
/**
|
|
* Initializes a {@link Ext.dd.DDProxy} object for this element.
|
|
* @param {String} group The group the DDProxy object is member of
|
|
* @param {Object} config The DDProxy config object
|
|
* @param {Object} overrides An object containing methods to override/implement on the DDProxy object
|
|
* @return {Ext.dd.DDProxy} The DDProxy object
|
|
*/
|
|
initDDProxy : function(group, config, overrides){
|
|
var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
|
|
return Ext.apply(dd, overrides);
|
|
},
|
|
|
|
/**
|
|
* Initializes a {@link Ext.dd.DDTarget} object for this element.
|
|
* @param {String} group The group the DDTarget object is member of
|
|
* @param {Object} config The DDTarget config object
|
|
* @param {Object} overrides An object containing methods to override/implement on the DDTarget object
|
|
* @return {Ext.dd.DDTarget} The DDTarget object
|
|
*/
|
|
initDDTarget : function(group, config, overrides){
|
|
var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
|
|
return Ext.apply(dd, overrides);
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.Element_fx', {
|
|
override: 'Ext.dom.Element'
|
|
},
|
|
function() {
|
|
|
|
var Element = Ext.dom.Element,
|
|
VISIBILITY = "visibility",
|
|
DISPLAY = "display",
|
|
NONE = "none",
|
|
HIDDEN = 'hidden',
|
|
VISIBLE = 'visible',
|
|
OFFSETS = "offsets",
|
|
ASCLASS = "asclass",
|
|
NOSIZE = 'nosize',
|
|
ORIGINALDISPLAY = 'originalDisplay',
|
|
VISMODE = 'visibilityMode',
|
|
ISVISIBLE = 'isVisible',
|
|
OFFSETCLASS = Ext.baseCSSPrefix + 'hide-offsets',
|
|
getDisplay = function(el) {
|
|
var data = (el.$cache || el.getCache()).data,
|
|
display = data[ORIGINALDISPLAY];
|
|
|
|
if (display === undefined) {
|
|
data[ORIGINALDISPLAY] = display = '';
|
|
}
|
|
return display;
|
|
},
|
|
getVisMode = function(el){
|
|
var data = (el.$cache || el.getCache()).data,
|
|
visMode = data[VISMODE];
|
|
|
|
if (visMode === undefined) {
|
|
data[VISMODE] = visMode = Element.VISIBILITY;
|
|
}
|
|
return visMode;
|
|
};
|
|
|
|
Element.override({
|
|
/**
|
|
* The element's default display mode.
|
|
*/
|
|
originalDisplay : "",
|
|
visibilityMode : 1,
|
|
|
|
/**
|
|
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
|
|
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
|
|
* @param {Boolean} visible Whether the element is visible
|
|
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setVisible : function(visible, animate) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
visMode = getVisMode(me);
|
|
|
|
// hideMode string override
|
|
if (typeof animate == 'string') {
|
|
switch (animate) {
|
|
case DISPLAY:
|
|
visMode = Element.DISPLAY;
|
|
break;
|
|
case VISIBILITY:
|
|
visMode = Element.VISIBILITY;
|
|
break;
|
|
case OFFSETS:
|
|
visMode = Element.OFFSETS;
|
|
break;
|
|
case NOSIZE:
|
|
case ASCLASS:
|
|
visMode = Element.ASCLASS;
|
|
break;
|
|
}
|
|
me.setVisibilityMode(visMode);
|
|
animate = false;
|
|
}
|
|
|
|
if (!animate || !me.anim) {
|
|
if (visMode == Element.DISPLAY) {
|
|
return me.setDisplayed(visible);
|
|
} else if (visMode == Element.OFFSETS) {
|
|
me[visible?'removeCls':'addCls'](OFFSETCLASS);
|
|
} else if (visMode == Element.VISIBILITY) {
|
|
me.fixDisplay();
|
|
// Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting
|
|
dom.style.visibility = visible ? '' : HIDDEN;
|
|
} else if (visMode == Element.ASCLASS) {
|
|
me[visible?'removeCls':'addCls'](me.visibilityCls || Element.visibilityCls);
|
|
}
|
|
} else {
|
|
// closure for composites
|
|
if (visible) {
|
|
me.setOpacity(0.01);
|
|
me.setVisible(true);
|
|
}
|
|
if (!Ext.isObject(animate)) {
|
|
animate = {
|
|
duration: 350,
|
|
easing: 'ease-in'
|
|
};
|
|
}
|
|
me.animate(Ext.applyIf({
|
|
callback: function() {
|
|
if (!visible) {
|
|
|
|
// Grab the dom again, since the reference may have changed if we use fly
|
|
Ext.fly(dom, '_internal').setVisible(false).setOpacity(1);
|
|
}
|
|
},
|
|
to: {
|
|
opacity: (visible) ? 1 : 0
|
|
}
|
|
}, animate));
|
|
}
|
|
(me.$cache || me.getCache()).data[ISVISIBLE] = visible;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Determine if the Element has a relevant height and width available based
|
|
* upon current logical visibility state
|
|
*/
|
|
hasMetrics : function(){
|
|
var visMode = getVisMode(this);
|
|
return this.isVisible() || (visMode == Element.OFFSETS) || (visMode == Element.VISIBILITY);
|
|
},
|
|
|
|
/**
|
|
* Toggles the element's visibility or display, depending on visibility mode.
|
|
* @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
toggle : function(animate){
|
|
var me = this;
|
|
me.setVisible(!me.isVisible(), me.anim(animate));
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
|
|
* @param {Boolean/String} value Boolean value to display the element using its default display, or a string to set the display directly.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setDisplayed : function(value) {
|
|
if(typeof value == "boolean"){
|
|
value = value ? getDisplay(this) : NONE;
|
|
}
|
|
this.setStyle(DISPLAY, value);
|
|
return this;
|
|
},
|
|
|
|
// private
|
|
fixDisplay : function(){
|
|
var me = this;
|
|
if (me.isStyle(DISPLAY, NONE)) {
|
|
me.setStyle(VISIBILITY, HIDDEN);
|
|
me.setStyle(DISPLAY, getDisplay(me)); // first try reverting to default
|
|
if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block
|
|
me.setStyle(DISPLAY, "block");
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
hide : function(animate){
|
|
// hideMode override
|
|
if (typeof animate == 'string'){
|
|
this.setVisible(false, animate);
|
|
return this;
|
|
}
|
|
this.setVisible(false, this.anim(animate));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
show : function(animate){
|
|
// hideMode override
|
|
if (typeof animate == 'string'){
|
|
this.setVisible(true, animate);
|
|
return this;
|
|
}
|
|
this.setVisible(true, this.anim(animate));
|
|
return this;
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.Element_position', {
|
|
override: 'Ext.dom.Element'
|
|
},
|
|
function() {
|
|
|
|
var flyInstance,
|
|
Element = this,
|
|
LEFT = "left",
|
|
RIGHT = "right",
|
|
TOP = "top",
|
|
BOTTOM = "bottom",
|
|
POSITION = "position",
|
|
STATIC = "static",
|
|
RELATIVE = "relative",
|
|
ZINDEX = "z-index",
|
|
BODY = 'BODY',
|
|
|
|
PADDING = 'padding',
|
|
BORDER = 'border',
|
|
SLEFT = '-left',
|
|
SRIGHT = '-right',
|
|
STOP = '-top',
|
|
SBOTTOM = '-bottom',
|
|
SWIDTH = '-width',
|
|
// special markup used throughout Ext when box wrapping elements
|
|
borders = {l: BORDER + SLEFT + SWIDTH, r: BORDER + SRIGHT + SWIDTH, t: BORDER + STOP + SWIDTH, b: BORDER + SBOTTOM + SWIDTH},
|
|
paddings = {l: PADDING + SLEFT, r: PADDING + SRIGHT, t: PADDING + STOP, b: PADDING + SBOTTOM},
|
|
paddingsTLRB = [paddings.l, paddings.r, paddings.t, paddings.b],
|
|
bordersTLRB = [borders.l, borders.r, borders.t, borders.b],
|
|
round = Math.round,
|
|
doc = document,
|
|
fly = function (el) {
|
|
if (!flyInstance) {
|
|
flyInstance = new Ext.Element.Fly();
|
|
}
|
|
flyInstance.attach(el);
|
|
return flyInstance;
|
|
};
|
|
|
|
Element.override({
|
|
|
|
pxRe: /^\d+(?:\.\d*)?px$/i,
|
|
|
|
inheritableStatics: {
|
|
getX: function(el) {
|
|
return Element.getXY(el)[0];
|
|
},
|
|
|
|
getXY: function(el) {
|
|
var bd = doc.body,
|
|
docEl = doc.documentElement,
|
|
leftBorder = 0,
|
|
topBorder = 0,
|
|
ret = [0,0],
|
|
box,
|
|
scroll;
|
|
|
|
el = Ext.getDom(el);
|
|
|
|
if(el != doc && el != bd){
|
|
// IE has the potential to throw when getBoundingClientRect
|
|
// is called on an element not attached to dom
|
|
if (Ext.isIE) {
|
|
try {
|
|
box = el.getBoundingClientRect();
|
|
// In some versions of IE, the documentElement (HTML element)
|
|
// will have a 2px border that gets included, so subtract it off
|
|
topBorder = docEl.clientTop || bd.clientTop;
|
|
leftBorder = docEl.clientLeft || bd.clientLeft;
|
|
} catch (ex) {
|
|
box = { left: 0, top: 0 };
|
|
}
|
|
} else {
|
|
box = el.getBoundingClientRect();
|
|
}
|
|
|
|
scroll = fly(doc).getScroll();
|
|
ret = [
|
|
round(box.left + scroll.left - leftBorder),
|
|
round(box.top + scroll.top - topBorder)
|
|
];
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
getY: function(el) {
|
|
return Element.getXY(el)[1];
|
|
},
|
|
|
|
setX: function(el, x) {
|
|
Element.setXY(el, [x, false]);
|
|
},
|
|
|
|
setXY: function(el, xy) {
|
|
(el = Ext.fly(el, '_setXY')).position();
|
|
|
|
var pts = el.translatePoints(xy),
|
|
style = el.dom.style,
|
|
pos;
|
|
|
|
// right position may have been previously set by rtlSetXY or
|
|
// rtlSetLocalXY so clear it here just in case.
|
|
style.right = 'auto';
|
|
for (pos in pts) {
|
|
if (!isNaN(pts[pos])) {
|
|
style[pos] = pts[pos] + "px";
|
|
}
|
|
}
|
|
},
|
|
|
|
setY: function(el, y) {
|
|
Element.setXY(el, [false, y]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Centers the Element in either the viewport, or another Element.
|
|
* @param {String/HTMLElement/Ext.dom.Element} centerIn element in
|
|
* which to center the element.
|
|
*/
|
|
center: function(centerIn){
|
|
return this.alignTo(centerIn || doc, 'c-c');
|
|
},
|
|
|
|
/**
|
|
* Clears positioning back to the default when the document was loaded.
|
|
* @param {String} [value=''] The value to use for the left, right, top, bottom.
|
|
* You could use 'auto'.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
clearPositioning: function(value) {
|
|
value = value || '';
|
|
return this.setStyle({
|
|
left : value,
|
|
right : value,
|
|
top : value,
|
|
bottom : value,
|
|
'z-index' : '',
|
|
position : STATIC
|
|
});
|
|
},
|
|
|
|
getAnchorToXY: function(el, anchor, local, mySize) {
|
|
return el.getAnchorXY(anchor, local, mySize);
|
|
},
|
|
|
|
/**
|
|
* Gets the bottom Y coordinate of the element (element Y position + element height)
|
|
* @param {Boolean} local True to get the local css position instead of page
|
|
* coordinate
|
|
* @return {Number}
|
|
* @deprecated
|
|
*/
|
|
getBottom: function(local) {
|
|
return (local ? this.getLocalY() : this.getY()) + this.getHeight();
|
|
},
|
|
|
|
getBorderPadding: function() {
|
|
var paddingWidth = this.getStyle(paddingsTLRB),
|
|
bordersWidth = this.getStyle(bordersTLRB);
|
|
|
|
return {
|
|
beforeX: (parseFloat(bordersWidth[borders.l]) || 0) + (parseFloat(paddingWidth[paddings.l]) || 0),
|
|
afterX: (parseFloat(bordersWidth[borders.r]) || 0) + (parseFloat(paddingWidth[paddings.r]) || 0),
|
|
beforeY: (parseFloat(bordersWidth[borders.t]) || 0) + (parseFloat(paddingWidth[paddings.t]) || 0),
|
|
afterY: (parseFloat(bordersWidth[borders.b]) || 0) + (parseFloat(paddingWidth[paddings.b]) || 0)
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Calculates the x, y to center this element on the screen
|
|
* @return {Number[]} The x, y values [x, y]
|
|
* @deprecated
|
|
*/
|
|
getCenterXY: function(){
|
|
return this.getAlignToXY(doc, 'c-c');
|
|
},
|
|
|
|
/**
|
|
* Gets the left X coordinate
|
|
* @param {Boolean} local True to get the local css position instead of
|
|
* page coordinate
|
|
* @return {Number}
|
|
* @deprecated Use {@link #getX} or {@link #getLocalX}
|
|
*/
|
|
getLeft: function(local) {
|
|
return local ? this.getLocalX() : this.getX();
|
|
},
|
|
|
|
/**
|
|
* Gets the local CSS X position for the element
|
|
*
|
|
* @return {Number}
|
|
*/
|
|
getLocalX: function() {
|
|
var me = this,
|
|
offsetParent = me.dom.offsetParent,
|
|
x = me.getStyle('left');
|
|
|
|
if (!x || x === 'auto') {
|
|
x = 0;
|
|
} else if (me.pxRe.test(x)) {
|
|
x = parseFloat(x);
|
|
} else {
|
|
x = me.getX();
|
|
if (offsetParent) {
|
|
x -= Element.getX(offsetParent);
|
|
}
|
|
}
|
|
|
|
return x;
|
|
},
|
|
|
|
/**
|
|
* Gets the local CSS X and Y position for the element
|
|
*
|
|
* @return {Array} [x, y]
|
|
*/
|
|
getLocalXY: function() {
|
|
var me = this,
|
|
offsetParent = me.dom.offsetParent,
|
|
style = me.getStyle(['left', 'top']),
|
|
x = style.left,
|
|
y = style.top;
|
|
|
|
if (!x || x === 'auto') {
|
|
x = 0;
|
|
} else if (me.pxRe.test(x)) {
|
|
x = parseFloat(x);
|
|
} else {
|
|
x = me.getX();
|
|
if (offsetParent) {
|
|
x -= Element.getX(offsetParent);
|
|
}
|
|
}
|
|
|
|
if (!y || y === 'auto') {
|
|
y = 0;
|
|
} else if (me.pxRe.test(y)) {
|
|
y = parseFloat(y);
|
|
} else {
|
|
y = me.getY();
|
|
if (offsetParent) {
|
|
y -= Element.getY(offsetParent);
|
|
}
|
|
}
|
|
|
|
return [x, y];
|
|
},
|
|
|
|
/**
|
|
* Gets the local CSS Y position for the element
|
|
*
|
|
* @return {Number}
|
|
*/
|
|
getLocalY: function() {
|
|
var me = this,
|
|
offsetParent = me.dom.offsetParent,
|
|
y = me.getStyle('top');
|
|
|
|
if (!y || y === 'auto') {
|
|
y = 0;
|
|
} else if (me.pxRe.test(y)) {
|
|
y = parseFloat(y);
|
|
} else {
|
|
y = me.getY();
|
|
if (offsetParent) {
|
|
y -= Element.getY(offsetParent);
|
|
}
|
|
}
|
|
|
|
return y;
|
|
},
|
|
|
|
/**
|
|
* Returns an object defining the area of this Element which can be passed to
|
|
* {@link Ext.util.Positionable#setBox} to set another Element's size/location to match this element.
|
|
*
|
|
* @param {Boolean} [asRegion] If true an Ext.util.Region will be returned
|
|
* @return {Object/Ext.util.Region} box An object in the following format:
|
|
*
|
|
* {
|
|
* left: <Element's X position>,
|
|
* top: <Element's Y position>,
|
|
* width: <Element's width>,
|
|
* height: <Element's height>,
|
|
* bottom: <Element's lower bound>,
|
|
* right: <Element's rightmost bound>
|
|
* }
|
|
*
|
|
* The returned object may also be addressed as an Array where index 0 contains
|
|
* the X position and index 1 contains the Y position. So the result may also be
|
|
* used for {@link #setXY}
|
|
* @deprecated use {@link Ext.util.Positionable#getBox} to get a box object, and
|
|
* {@link Ext.util.Positionable#getRegion} to get a {@link Ext.util.Region Region}.
|
|
*/
|
|
getPageBox: function(getRegion) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
isDoc = dom.nodeName == BODY,
|
|
w = isDoc ? Ext.Element.getViewWidth() : dom.offsetWidth,
|
|
h = isDoc ? Ext.Element.getViewHeight() : dom.offsetHeight,
|
|
xy = me.getXY(),
|
|
t = xy[1],
|
|
r = xy[0] + w,
|
|
b = xy[1] + h,
|
|
l = xy[0];
|
|
|
|
if (getRegion) {
|
|
return new Ext.util.Region(t, r, b, l);
|
|
}
|
|
else {
|
|
return {
|
|
left: l,
|
|
top: t,
|
|
width: w,
|
|
height: h,
|
|
right: r,
|
|
bottom: b
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets an object with all CSS positioning properties. Useful along with
|
|
* #setPostioning to get snapshot before performing an update and then restoring
|
|
* the element.
|
|
* @param {Boolean} [autoPx=false] true to return pixel values for "auto" styles.
|
|
* @return {Object}
|
|
*/
|
|
getPositioning: function(autoPx){
|
|
var styles = this.getStyle(['left', 'top', 'position', 'z-index']),
|
|
dom = this.dom;
|
|
|
|
if(autoPx) {
|
|
if(styles.left === 'auto') {
|
|
styles.left = dom.offsetLeft + 'px';
|
|
}
|
|
if(styles.top === 'auto') {
|
|
styles.top = dom.offsetTop + 'px';
|
|
}
|
|
}
|
|
|
|
return styles;
|
|
},
|
|
|
|
/**
|
|
* Gets the right X coordinate of the element (element X position + element width)
|
|
* @param {Boolean} local True to get the local css position instead of page
|
|
* coordinates
|
|
* @return {Number}
|
|
* @deprecated
|
|
*/
|
|
getRight: function(local) {
|
|
return (local ? this.getLocalX() : this.getX()) + this.getWidth();
|
|
},
|
|
|
|
/**
|
|
* Gets the top Y coordinate
|
|
* @param {Boolean} local True to get the local css position instead of page
|
|
* coordinates
|
|
* @return {Number}
|
|
* @deprecated Use {@link #getY} or {@link #getLocalY}
|
|
*/
|
|
getTop: function(local) {
|
|
return local ? this.getLocalY() : this.getY();
|
|
},
|
|
|
|
/**
|
|
* Gets element X position in page coordinates
|
|
*
|
|
* @return {Number}
|
|
*/
|
|
getX: function() {
|
|
return Element.getX(this.dom);
|
|
},
|
|
|
|
/**
|
|
* Gets element X and Y positions in page coordinates
|
|
*
|
|
* @return {Array} [x, y]
|
|
*/
|
|
getXY: function() {
|
|
return Element.getXY(this.dom);
|
|
},
|
|
|
|
/**
|
|
* Gets element Y position in page coordinates
|
|
*
|
|
* @return {Number}
|
|
*/
|
|
getY: function() {
|
|
return Element.getY(this.dom);
|
|
},
|
|
|
|
/**
|
|
* Sets the position of the element in page coordinates.
|
|
* @param {Number} x X value for new position (coordinates are page-based)
|
|
* @param {Number} y Y value for new position (coordinates are page-based)
|
|
* @param {Boolean/Object} [animate] True for the default animation, or a standard
|
|
* Element animation config object
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated Use {@link #setXY} instead.
|
|
*/
|
|
moveTo: function(x, y, animate) {
|
|
return this.setXY([x, y], animate);
|
|
},
|
|
|
|
/**
|
|
* Initializes positioning on this element. If a desired position is not passed,
|
|
* it will make the the element positioned relative IF it is not already positioned.
|
|
* @param {String} [pos] Positioning to use "relative", "absolute" or "fixed"
|
|
* @param {Number} [zIndex] The zIndex to apply
|
|
* @param {Number} [x] Set the page X position
|
|
* @param {Number} [y] Set the page Y position
|
|
*/
|
|
position: function(pos, zIndex, x, y) {
|
|
var me = this;
|
|
|
|
if (!pos && me.isStyle(POSITION, STATIC)) {
|
|
me.setStyle(POSITION, RELATIVE);
|
|
} else if (pos) {
|
|
me.setStyle(POSITION, pos);
|
|
}
|
|
if (zIndex) {
|
|
me.setStyle(ZINDEX, zIndex);
|
|
}
|
|
if (x || y) {
|
|
me.setXY([x || false, y || false]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the element's CSS bottom style.
|
|
* @param {Number/String} bottom Number of pixels or CSS string value to set as
|
|
* the bottom CSS property value
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated
|
|
*/
|
|
setBottom: function(bottom) {
|
|
this.dom.style[BOTTOM] = this.addUnits(bottom);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the element's position and size in one shot. If animation is true then
|
|
* width, height, x and y will be animated concurrently.
|
|
*
|
|
* @param {Number} x X value for new position (coordinates are page-based)
|
|
* @param {Number} y Y value for new position (coordinates are page-based)
|
|
* @param {Number/String} width The new width. This may be one of:
|
|
*
|
|
* - A Number specifying the new width in this Element's
|
|
* {@link #defaultUnit}s (by default, pixels)
|
|
* - A String used to set the CSS width style. Animation may **not** be used.
|
|
*
|
|
* @param {Number/String} height The new height. This may be one of:
|
|
*
|
|
* - A Number specifying the new height in this Element's
|
|
* {@link #defaultUnit}s (by default, pixels)
|
|
* - A String used to set the CSS height style. Animation may **not** be used.
|
|
*
|
|
* @param {Boolean/Object} [animate] true for the default animation or
|
|
* a standard Element animation config object
|
|
*
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated Use {@link Ext.util.Positionable#setBox} instead.
|
|
*/
|
|
setBounds: function(x, y, width, height, animate) {
|
|
return this.setBox({
|
|
x: x,
|
|
y: y,
|
|
width: width,
|
|
height: height
|
|
}, animate);
|
|
},
|
|
|
|
/**
|
|
* Sets the element's left position directly using CSS style
|
|
* (instead of {@link #setX}).
|
|
* @param {Number/String} left Number of pixels or CSS string value to
|
|
* set as the left CSS property value
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated
|
|
*/
|
|
setLeft: function(left) {
|
|
this.dom.style[LEFT] = this.addUnits(left);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the element's left and top positions directly using CSS style
|
|
* @param {Number/String} left Number of pixels or CSS string value to
|
|
* set as the left CSS property value
|
|
* @param {Number/String} top Number of pixels or CSS string value to
|
|
* set as the top CSS property value
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated
|
|
*/
|
|
setLeftTop: function(left, top) {
|
|
var me = this,
|
|
style = me.dom.style;
|
|
|
|
style.left = me.addUnits(left);
|
|
style.top = me.addUnits(top);
|
|
|
|
return me;
|
|
},
|
|
|
|
setLocalX: function(x) {
|
|
var style = this.dom.style;
|
|
|
|
// clear right style just in case it was previously set by rtlSetXY/rtlSetLocalXY
|
|
style.right = 'auto';
|
|
style.left = (x === null) ? 'auto' : x + 'px';
|
|
},
|
|
|
|
setLocalXY: function(x, y) {
|
|
var style = this.dom.style;
|
|
|
|
// clear right style just in case it was previously set by rtlSetXY/rtlSetLocalXY
|
|
style.right = 'auto';
|
|
|
|
if (x && x.length) {
|
|
y = x[1];
|
|
x = x[0];
|
|
}
|
|
|
|
if (x === null) {
|
|
style.left = 'auto';
|
|
} else if (x !== undefined) {
|
|
style.left = x + 'px';
|
|
}
|
|
|
|
if (y === null) {
|
|
style.top = 'auto';
|
|
} else if (y !== undefined) {
|
|
style.top = y + 'px';
|
|
}
|
|
},
|
|
|
|
setLocalY: function(y) {
|
|
this.dom.style.top = (y === null) ? 'auto' : y + 'px';
|
|
},
|
|
|
|
/**
|
|
* Sets the position of the element in page coordinates.
|
|
* @param {Number} x X value for new position
|
|
* @param {Number} y Y value for new position
|
|
* @param {Boolean/Object} [animate] True for the default animation, or a standard
|
|
* Element animation config object
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated Use {@link #setXY} instead.
|
|
*/
|
|
setLocation: function(x, y, animate) {
|
|
return this.setXY([x, y], animate);
|
|
},
|
|
|
|
/**
|
|
* Set positioning with an object returned by #getPositioning.
|
|
* @param {Object} posCfg
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setPositioning: function(pc) {
|
|
return this.setStyle(pc);
|
|
},
|
|
|
|
/**
|
|
* Sets the element's CSS right style.
|
|
* @param {Number/String} right Number of pixels or CSS string value to
|
|
* set as the right CSS property value
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated
|
|
*/
|
|
setRight: function(right) {
|
|
this.dom.style[RIGHT] = this.addUnits(right);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the element's top position directly using CSS style
|
|
* (instead of {@link #setY}).
|
|
* @param {Number/String} top Number of pixels or CSS string value to
|
|
* set as the top CSS property value
|
|
* @return {Ext.dom.Element} this
|
|
* @deprecated
|
|
*/
|
|
setTop: function(top) {
|
|
this.dom.style[TOP] = this.addUnits(top);
|
|
return this;
|
|
},
|
|
|
|
setX: function(x, animate) {
|
|
return this.setXY([x, this.getY()], animate);
|
|
},
|
|
|
|
setXY: function(xy, animate) {
|
|
var me = this;
|
|
|
|
if (!animate || !me.anim) {
|
|
Element.setXY(me.dom, xy);
|
|
} else {
|
|
if (!Ext.isObject(animate)) {
|
|
animate = {};
|
|
}
|
|
me.animate(Ext.applyIf({ to: { x: xy[0], y: xy[1] } }, animate));
|
|
}
|
|
return this;
|
|
},
|
|
|
|
setY: function(y, animate) {
|
|
return this.setXY([this.getX(), y], animate);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* Returns the `X,Y` position of the passed element in browser document space without regard
|
|
* to any RTL direction settings.
|
|
*/
|
|
Element.getTrueXY = Element.getXY;
|
|
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.Element_scroll', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
/**
|
|
* Returns true if this element is scrollable.
|
|
* @return {Boolean}
|
|
*/
|
|
isScrollable: function() {
|
|
var dom = this.dom;
|
|
return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
|
|
},
|
|
|
|
/**
|
|
* Returns the current scroll position of the element.
|
|
* @return {Object} An object containing the scroll position in the format
|
|
* `{left: (scrollLeft), top: (scrollTop)}`
|
|
*/
|
|
getScroll: function() {
|
|
var me = this,
|
|
dom = me.dom,
|
|
doc = document,
|
|
body = doc.body,
|
|
docElement = doc.documentElement,
|
|
left, top;
|
|
|
|
if (dom === doc || dom === body) {
|
|
// the scrollLeft/scrollTop may be either on the body or documentElement,
|
|
// depending on browser. It is possible to use window.pageXOffset/pageYOffset
|
|
// in most modern browsers but this complicates things when in rtl mode because
|
|
// pageXOffset does not always behave the same as scrollLeft when direction is
|
|
// rtl. (e.g. pageXOffset can be an offset from the right, while scrollLeft
|
|
// is offset from the left, one can be positive and the other negative, etc.)
|
|
// To avoid adding an extra layer of feature detection in rtl mode to deal with
|
|
// these differences, it's best just to always use scrollLeft/scrollTop
|
|
left = docElement.scrollLeft || (body ? body.scrollLeft : 0);
|
|
top = docElement.scrollTop || (body ? body.scrollTop : 0);
|
|
} else {
|
|
left = dom.scrollLeft;
|
|
top = dom.scrollTop;
|
|
}
|
|
|
|
return {
|
|
left: left,
|
|
top: top
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Gets the left scroll position
|
|
* @return {Number} The left scroll position
|
|
*/
|
|
getScrollLeft: function() {
|
|
var dom = this.dom,
|
|
doc = document;
|
|
|
|
if (dom === doc || dom === doc.body) {
|
|
return this.getScroll().left;
|
|
} else {
|
|
return dom.scrollLeft;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the top scroll position
|
|
* @return {Number} The top scroll position
|
|
*/
|
|
getScrollTop: function(){
|
|
var dom = this.dom,
|
|
doc = document;
|
|
|
|
if (dom === doc || dom === doc.body) {
|
|
return this.getScroll().top;
|
|
} else {
|
|
return dom.scrollTop;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the left scroll position
|
|
* @param {Number} left The left scroll position
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setScrollLeft: function(left){
|
|
this.dom.scrollLeft = left;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the top scroll position
|
|
* @param {Number} top The top scroll position
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setScrollTop: function(top) {
|
|
this.dom.scrollTop = top;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Scrolls this element by the passed delta values, optionally animating.
|
|
*
|
|
* All of the following are equivalent:
|
|
*
|
|
* el.scrollBy(10, 10, true);
|
|
* el.scrollBy([10, 10], true);
|
|
* el.scrollBy({ x: 10, y: 10 }, true);
|
|
*
|
|
* @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
|
|
* an object with "x" and "y" properties.
|
|
* @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
|
|
* @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
|
|
* @return {Ext.Element} this
|
|
*/
|
|
scrollBy: function(deltaX, deltaY, animate) {
|
|
var me = this,
|
|
dom = me.dom;
|
|
|
|
// Extract args if deltas were passed as an Array.
|
|
if (deltaX.length) {
|
|
animate = deltaY;
|
|
deltaY = deltaX[1];
|
|
deltaX = deltaX[0];
|
|
} else if (typeof deltaX != 'number') { // or an object
|
|
animate = deltaY;
|
|
deltaY = deltaX.y;
|
|
deltaX = deltaX.x;
|
|
}
|
|
|
|
if (deltaX) {
|
|
me.scrollTo('left', me.constrainScrollLeft(dom.scrollLeft + deltaX), animate);
|
|
}
|
|
if (deltaY) {
|
|
me.scrollTo('top', me.constrainScrollTop(dom.scrollTop + deltaY), animate);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Scrolls this element the specified scroll point. It does NOT do bounds checking so
|
|
* if you scroll to a weird value it will try to do it. For auto bounds checking, use #scroll.
|
|
* @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
|
|
* @param {Number} value The new scroll value
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
|
|
* animation config object
|
|
* @return {Ext.Element} this
|
|
*/
|
|
scrollTo: function(side, value, animate) {
|
|
//check if we're scrolling top or left
|
|
var top = /top/i.test(side),
|
|
me = this,
|
|
prop = top ? 'scrollTop' : 'scrollLeft',
|
|
dom = me.dom,
|
|
animCfg;
|
|
|
|
if (!animate || !me.anim) {
|
|
// just setting the value, so grab the direction
|
|
dom[prop] = value;
|
|
// corrects IE, other browsers will ignore
|
|
dom[prop] = value;
|
|
}
|
|
else {
|
|
animCfg = {
|
|
to: {}
|
|
};
|
|
animCfg.to[prop] = value;
|
|
if (Ext.isObject(animate)) {
|
|
Ext.applyIf(animCfg, animate);
|
|
}
|
|
me.animate(animCfg);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Scrolls this element into view within the passed container.
|
|
* @param {String/HTMLElement/Ext.Element} [container=document.body] The container element
|
|
* to scroll. Should be a string (id), dom node, or Ext.Element.
|
|
* @param {Boolean} [hscroll=true] False to disable horizontal scroll.
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
|
|
* @param {Boolean} [highlight=false] true to {@link #highlight} the element when it is in view.
|
|
* animation config object
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
scrollIntoView: function(container, hscroll, animate, highlight) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
offsets = me.getOffsetsTo(container = Ext.getDom(container) || Ext.getBody().dom),
|
|
// el's box
|
|
left = offsets[0] + container.scrollLeft,
|
|
top = offsets[1] + container.scrollTop,
|
|
bottom = top + dom.offsetHeight,
|
|
right = left + dom.offsetWidth,
|
|
// ct's box
|
|
ctClientHeight = container.clientHeight,
|
|
ctScrollTop = parseInt(container.scrollTop, 10),
|
|
ctScrollLeft = parseInt(container.scrollLeft, 10),
|
|
ctBottom = ctScrollTop + ctClientHeight,
|
|
ctRight = ctScrollLeft + container.clientWidth,
|
|
newPos;
|
|
|
|
// Highlight upon end of scroll
|
|
if (highlight) {
|
|
if (animate) {
|
|
animate = Ext.apply({
|
|
listeners: {
|
|
afteranimate: function() {
|
|
me.scrollChildFly.attach(dom).highlight();
|
|
}
|
|
}
|
|
}, animate);
|
|
} else {
|
|
me.scrollChildFly.attach(dom).highlight();
|
|
}
|
|
}
|
|
|
|
if (dom.offsetHeight > ctClientHeight || top < ctScrollTop) {
|
|
newPos = top;
|
|
} else if (bottom > ctBottom) {
|
|
newPos = bottom - ctClientHeight;
|
|
}
|
|
if (newPos != null) {
|
|
me.scrollChildFly.attach(container).scrollTo('top', newPos, animate);
|
|
}
|
|
|
|
if (hscroll !== false) {
|
|
newPos = null;
|
|
if (dom.offsetWidth > container.clientWidth || left < ctScrollLeft) {
|
|
newPos = left;
|
|
} else if (right > ctRight) {
|
|
newPos = right - container.clientWidth;
|
|
}
|
|
if (newPos != null) {
|
|
me.scrollChildFly.attach(container).scrollTo('left', newPos, animate);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// @private
|
|
scrollChildIntoView: function(child, hscroll) {
|
|
this.scrollChildFly.attach(Ext.getDom(child)).scrollIntoView(this, hscroll);
|
|
},
|
|
|
|
/**
|
|
* Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
|
|
* within this element's scrollable range.
|
|
* @param {String} direction Possible values are:
|
|
*
|
|
* - `"l"` (or `"left"`)
|
|
* - `"r"` (or `"right"`)
|
|
* - `"t"` (or `"top"`, or `"up"`)
|
|
* - `"b"` (or `"bottom"`, or `"down"`)
|
|
*
|
|
* @param {Number} distance How far to scroll the element in pixels
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard Element
|
|
* animation config object
|
|
* @return {Boolean} Returns true if a scroll was triggered or false if the element
|
|
* was scrolled as far as it could go.
|
|
*/
|
|
scroll: function(direction, distance, animate) {
|
|
if (!this.isScrollable()) {
|
|
return false;
|
|
}
|
|
var me = this,
|
|
dom = me.dom,
|
|
side = direction === 'r' || direction === 'l' ? 'left' : 'top',
|
|
scrolled = false,
|
|
currentScroll, constrainedScroll;
|
|
|
|
if (direction === 'r') {
|
|
distance = -distance;
|
|
}
|
|
|
|
if (side === 'left') {
|
|
currentScroll = dom.scrollLeft;
|
|
constrainedScroll = me.constrainScrollLeft(currentScroll + distance);
|
|
} else {
|
|
currentScroll = dom.scrollTop;
|
|
constrainedScroll = me.constrainScrollTop(currentScroll + distance);
|
|
}
|
|
|
|
if (constrainedScroll !== currentScroll) {
|
|
this.scrollTo(side, constrainedScroll, animate);
|
|
scrolled = true;
|
|
}
|
|
|
|
return scrolled;
|
|
},
|
|
|
|
constrainScrollLeft: function(left) {
|
|
var dom = this.dom;
|
|
return Math.max(Math.min(left, dom.scrollWidth - dom.clientWidth), 0);
|
|
},
|
|
|
|
constrainScrollTop: function(top) {
|
|
var dom = this.dom;
|
|
return Math.max(Math.min(top, dom.scrollHeight - dom.clientHeight), 0);
|
|
}
|
|
}, function() {
|
|
this.prototype.scrollChildFly = new this.Fly();
|
|
this.prototype.scrolltoFly = new this.Fly();
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
*/
|
|
Ext.define('Ext.dom.Element_style', {
|
|
override: 'Ext.dom.Element'
|
|
},
|
|
function() {
|
|
|
|
var Element = this,
|
|
view = document.defaultView,
|
|
adjustDirect2DTableRe = /table-row|table-.*-group/,
|
|
INTERNAL = '_internal',
|
|
HIDDEN = 'hidden',
|
|
HEIGHT = 'height',
|
|
WIDTH = 'width',
|
|
ISCLIPPED = 'isClipped',
|
|
OVERFLOW = 'overflow',
|
|
OVERFLOWX = 'overflow-x',
|
|
OVERFLOWY = 'overflow-y',
|
|
ORIGINALCLIP = 'originalClip',
|
|
DOCORBODYRE = /#document|body/i,
|
|
// This reduces the lookup of 'me.styleHooks' by one hop in the prototype chain. It is
|
|
// the same object.
|
|
styleHooks, verticalStyleHooks90, verticalStyleHooks270,
|
|
edges, k, edge, borderWidth;
|
|
|
|
if (!view || !view.getComputedStyle) {
|
|
Element.prototype.getStyle = function (property, inline) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
multiple = typeof property != 'string',
|
|
hooks = me.styleHooks,
|
|
prop = property,
|
|
props = prop,
|
|
len = 1,
|
|
isInline = inline,
|
|
camel, domStyle, values, hook, out, style, i;
|
|
|
|
if (multiple) {
|
|
values = {};
|
|
prop = props[0];
|
|
i = 0;
|
|
if (!(len = props.length)) {
|
|
return values;
|
|
}
|
|
}
|
|
|
|
if (!dom || dom.documentElement) {
|
|
return values || '';
|
|
}
|
|
|
|
domStyle = dom.style;
|
|
|
|
if (inline) {
|
|
style = domStyle;
|
|
} else {
|
|
style = dom.currentStyle;
|
|
|
|
// fallback to inline style if rendering context not available
|
|
if (!style) {
|
|
isInline = true;
|
|
style = domStyle;
|
|
}
|
|
}
|
|
|
|
do {
|
|
hook = hooks[prop];
|
|
|
|
if (!hook) {
|
|
hooks[prop] = hook = { name: Element.normalize(prop) };
|
|
}
|
|
|
|
if (hook.get) {
|
|
out = hook.get(dom, me, isInline, style);
|
|
} else {
|
|
camel = hook.name;
|
|
|
|
// In some cases, IE6 will throw Invalid Argument exceptions for properties
|
|
// like fontSize (/examples/tabs/tabs.html in 4.0 used to exhibit this but
|
|
// no longer does due to font style changes). There is a real cost to a try
|
|
// block, so we avoid it where possible...
|
|
if (hook.canThrow) {
|
|
try {
|
|
out = style[camel];
|
|
} catch (e) {
|
|
out = '';
|
|
}
|
|
} else {
|
|
// EXTJSIV-5657 - In IE9 quirks mode there is a chance that VML root element
|
|
// has neither `currentStyle` nor `style`. Return '' this case.
|
|
out = style ? style[camel] : '';
|
|
}
|
|
}
|
|
|
|
if (!multiple) {
|
|
return out;
|
|
}
|
|
|
|
values[prop] = out;
|
|
prop = props[++i];
|
|
} while (i < len);
|
|
|
|
return values;
|
|
};
|
|
}
|
|
|
|
Element.override({
|
|
getHeight: function(contentHeight, preciseHeight) {
|
|
var me = this,
|
|
hidden = me.isStyle('display', 'none'),
|
|
height,
|
|
floating;
|
|
|
|
if (hidden) {
|
|
return 0;
|
|
}
|
|
|
|
height = me.dom.offsetHeight;
|
|
|
|
// IE9/10 Direct2D dimension rounding bug
|
|
if (Ext.supports.Direct2DBug) {
|
|
floating = me.adjustDirect2DDimension(HEIGHT);
|
|
if (preciseHeight) {
|
|
height += floating;
|
|
}
|
|
else if (floating > 0 && floating < 0.5) {
|
|
height++;
|
|
}
|
|
}
|
|
|
|
if (contentHeight) {
|
|
height -= me.getBorderWidth("tb") + me.getPadding("tb");
|
|
}
|
|
|
|
return (height < 0) ? 0 : height;
|
|
},
|
|
|
|
getWidth: function(contentWidth, preciseWidth) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
hidden = me.isStyle('display', 'none'),
|
|
rect, width, floating;
|
|
|
|
if (hidden) {
|
|
return 0;
|
|
}
|
|
|
|
// Gecko will in some cases report an offsetWidth that is actually less than the width of the
|
|
// text contents, because it measures fonts with sub-pixel precision but rounds the calculated
|
|
// value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
|
|
// subpixel measurements so we can force them to always be rounded up. See
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=458617
|
|
// Rounding up ensures that the width includes the full width of the text contents.
|
|
if (preciseWidth && Ext.supports.BoundingClientRect) {
|
|
rect = dom.getBoundingClientRect();
|
|
// IE9 is the only browser that supports getBoundingClientRect() and
|
|
// uses a filter to rotate the element vertically. When a filter
|
|
// is used to rotate the element, the getHeight/getWidth functions
|
|
// are not inverted (see setVertical).
|
|
width = (me.vertical && !Ext.isIE9 && !Ext.supports.RotatedBoundingClientRect) ?
|
|
(rect.bottom - rect.top) : (rect.right - rect.left);
|
|
} else {
|
|
width = dom.offsetWidth;
|
|
}
|
|
|
|
// IE9/10 Direct2D dimension rounding bug: https://sencha.jira.com/browse/EXTJSIV-603
|
|
// there is no need make adjustments for this bug when the element is vertically
|
|
// rotated because the width of a vertical element is its rotated height
|
|
if (Ext.supports.Direct2DBug && !me.vertical) {
|
|
// get the fractional portion of the sub-pixel precision width of the element's text contents
|
|
floating = me.adjustDirect2DDimension(WIDTH);
|
|
if (preciseWidth) {
|
|
width += floating;
|
|
}
|
|
// IE9 also measures fonts with sub-pixel precision, but unlike Gecko, instead of rounding the offsetWidth down,
|
|
// it rounds to the nearest integer. This means that in order to ensure that the width includes the full
|
|
// width of the text contents we need to increment the width by 1 only if the fractional portion is less than 0.5
|
|
else if (floating > 0 && floating < 0.5) {
|
|
width++;
|
|
}
|
|
}
|
|
|
|
if (contentWidth) {
|
|
width -= me.getBorderWidth("lr") + me.getPadding("lr");
|
|
}
|
|
|
|
return (width < 0) ? 0 : width;
|
|
},
|
|
|
|
setWidth: function(width, animate) {
|
|
var me = this;
|
|
width = me.adjustWidth(width);
|
|
if (!animate || !me.anim) {
|
|
me.dom.style.width = me.addUnits(width);
|
|
}
|
|
else {
|
|
if (!Ext.isObject(animate)) {
|
|
animate = {};
|
|
}
|
|
me.animate(Ext.applyIf({
|
|
to: {
|
|
width: width
|
|
}
|
|
}, animate));
|
|
}
|
|
return me;
|
|
},
|
|
|
|
setHeight : function(height, animate) {
|
|
var me = this;
|
|
|
|
height = me.adjustHeight(height);
|
|
if (!animate || !me.anim) {
|
|
me.dom.style.height = me.addUnits(height);
|
|
}
|
|
else {
|
|
if (!Ext.isObject(animate)) {
|
|
animate = {};
|
|
}
|
|
me.animate(Ext.applyIf({
|
|
to: {
|
|
height: height
|
|
}
|
|
}, animate));
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
applyStyles: function(style) {
|
|
Ext.DomHelper.applyStyles(this.dom, style);
|
|
return this;
|
|
},
|
|
|
|
setSize: function(width, height, animate) {
|
|
var me = this;
|
|
|
|
if (Ext.isObject(width)) { // in case of object from getSize()
|
|
animate = height;
|
|
height = width.height;
|
|
width = width.width;
|
|
}
|
|
|
|
width = me.adjustWidth(width);
|
|
height = me.adjustHeight(height);
|
|
|
|
if (!animate || !me.anim) {
|
|
me.dom.style.width = me.addUnits(width);
|
|
me.dom.style.height = me.addUnits(height);
|
|
}
|
|
else {
|
|
if (animate === true) {
|
|
animate = {};
|
|
}
|
|
me.animate(Ext.applyIf({
|
|
to: {
|
|
width: width,
|
|
height: height
|
|
}
|
|
}, animate));
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
getViewSize : function() {
|
|
var me = this,
|
|
dom = me.dom,
|
|
isDoc = DOCORBODYRE.test(dom.nodeName),
|
|
ret;
|
|
|
|
// If the body, use static methods
|
|
if (isDoc) {
|
|
ret = {
|
|
width : Element.getViewWidth(),
|
|
height : Element.getViewHeight()
|
|
};
|
|
} else {
|
|
ret = {
|
|
width : dom.clientWidth,
|
|
height : dom.clientHeight
|
|
};
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
getSize: function(contentSize) {
|
|
return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
|
|
},
|
|
|
|
// TODO: Look at this
|
|
|
|
// private ==> used by Fx
|
|
adjustWidth : function(width) {
|
|
var me = this,
|
|
isNum = (typeof width == 'number');
|
|
|
|
if (isNum && me.autoBoxAdjust && !me.isBorderBox()) {
|
|
width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
|
|
}
|
|
return (isNum && width < 0) ? 0 : width;
|
|
},
|
|
|
|
// private ==> used by Fx
|
|
adjustHeight : function(height) {
|
|
var me = this,
|
|
isNum = (typeof height == "number");
|
|
|
|
if (isNum && me.autoBoxAdjust && !me.isBorderBox()) {
|
|
height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
|
|
}
|
|
return (isNum && height < 0) ? 0 : height;
|
|
},
|
|
|
|
/**
|
|
* Return the CSS color for the specified CSS attribute. rgb, 3 digit (like `#fff`) and valid values
|
|
* are convert to standard 6 digit hex color.
|
|
* @param {String} attr The css attribute
|
|
* @param {String} defaultValue The default value to use when a valid color isn't found
|
|
* @param {String} [prefix] defaults to #. Use an empty string when working with
|
|
* color anims.
|
|
*/
|
|
getColor : function(attr, defaultValue, prefix) {
|
|
var v = this.getStyle(attr),
|
|
color = prefix || prefix === '' ? prefix : '#',
|
|
h, len, i=0;
|
|
|
|
if (!v || (/transparent|inherit/.test(v))) {
|
|
return defaultValue;
|
|
}
|
|
if (/^r/.test(v)) {
|
|
v = v.slice(4, v.length - 1).split(',');
|
|
len = v.length;
|
|
for (; i<len; i++) {
|
|
h = parseInt(v[i], 10);
|
|
color += (h < 16 ? '0' : '') + h.toString(16);
|
|
}
|
|
} else {
|
|
v = v.replace('#', '');
|
|
color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
|
|
}
|
|
return(color.length > 5 ? color.toLowerCase() : defaultValue);
|
|
},
|
|
|
|
/**
|
|
* Set the opacity of the element
|
|
* @param {Number} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
|
|
* @param {Boolean/Object} [animate] a standard Element animation config object or `true` for
|
|
* the default animation (`{duration: 350, easing: 'easeIn'}`)
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
setOpacity: function(opacity, animate) {
|
|
var me = this;
|
|
|
|
if (!me.dom) {
|
|
return me;
|
|
}
|
|
|
|
if (!animate || !me.anim) {
|
|
me.setStyle('opacity', opacity);
|
|
}
|
|
else {
|
|
if (typeof animate != 'object') {
|
|
animate = {
|
|
duration: 350,
|
|
easing: 'ease-in'
|
|
};
|
|
}
|
|
|
|
me.animate(Ext.applyIf({
|
|
to: {
|
|
opacity: opacity
|
|
}
|
|
}, animate));
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Clears any opacity settings from this element. Required in some cases for IE.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
clearOpacity : function() {
|
|
return this.setOpacity('');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
|
|
* @return {Number} 0 or 1
|
|
*/
|
|
adjustDirect2DDimension: function(dimension) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
display = me.getStyle('display'),
|
|
inlineDisplay = dom.style.display,
|
|
inlinePosition = dom.style.position,
|
|
originIndex = dimension === WIDTH ? 0 : 1,
|
|
currentStyle = dom.currentStyle,
|
|
floating;
|
|
|
|
if (display === 'inline') {
|
|
dom.style.display = 'inline-block';
|
|
}
|
|
|
|
dom.style.position = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
|
|
|
|
// floating will contain digits that appears after the decimal point
|
|
// if height or width are set to auto we fallback to msTransformOrigin calculation
|
|
|
|
// Use currentStyle here instead of getStyle. In some difficult to reproduce
|
|
// instances it resets the scrollWidth of the element
|
|
floating = (parseFloat(currentStyle[dimension]) || parseFloat(currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
|
|
|
|
dom.style.position = inlinePosition;
|
|
|
|
if (display === 'inline') {
|
|
dom.style.display = inlineDisplay;
|
|
}
|
|
|
|
return floating;
|
|
},
|
|
|
|
/**
|
|
* Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
clip : function() {
|
|
var me = this,
|
|
data = (me.$cache || me.getCache()).data,
|
|
style;
|
|
|
|
if (!data[ISCLIPPED]) {
|
|
data[ISCLIPPED] = true;
|
|
style = me.getStyle([OVERFLOW, OVERFLOWX, OVERFLOWY]);
|
|
data[ORIGINALCLIP] = {
|
|
o: style[OVERFLOW],
|
|
x: style[OVERFLOWX],
|
|
y: style[OVERFLOWY]
|
|
};
|
|
me.setStyle(OVERFLOW, HIDDEN);
|
|
me.setStyle(OVERFLOWX, HIDDEN);
|
|
me.setStyle(OVERFLOWY, HIDDEN);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Return clipping (overflow) to original clipping before {@link #clip} was called
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
unclip : function() {
|
|
var me = this,
|
|
data = (me.$cache || me.getCache()).data,
|
|
clip;
|
|
|
|
if (data[ISCLIPPED]) {
|
|
data[ISCLIPPED] = false;
|
|
clip = data[ORIGINALCLIP];
|
|
if (clip.o) {
|
|
me.setStyle(OVERFLOW, clip.o);
|
|
}
|
|
if (clip.x) {
|
|
me.setStyle(OVERFLOWX, clip.x);
|
|
}
|
|
if (clip.y) {
|
|
me.setStyle(OVERFLOWY, clip.y);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Wraps the specified element with a special 9 element markup/CSS block that renders by default as
|
|
* a gray container with a gradient background, rounded corners and a 4-way shadow.
|
|
*
|
|
* This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
|
|
* {@link Ext.panel.Panel} when {@link Ext.panel.Panel#frame frame=true}, {@link Ext.window.Window}).
|
|
* The markup is of this form:
|
|
*
|
|
* Ext.dom.Element.boxMarkup =
|
|
* '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
|
|
* <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
|
|
* <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
|
|
*
|
|
* Example usage:
|
|
*
|
|
* // Basic box wrap
|
|
* Ext.get("foo").boxWrap();
|
|
*
|
|
* // You can also add a custom class and use CSS inheritance rules to customize the box look.
|
|
* // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
|
|
* // for how to create a custom box wrap style.
|
|
* Ext.get("foo").boxWrap().addCls("x-box-blue");
|
|
*
|
|
* @param {String} [class='x-box'] A base CSS class to apply to the containing wrapper element.
|
|
* Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
|
|
* so if you supply an alternate base class, make sure you also supply all of the necessary rules.
|
|
* @return {Ext.dom.Element} The outermost wrapping element of the created box structure.
|
|
*/
|
|
boxWrap : function(cls) {
|
|
cls = cls || Ext.baseCSSPrefix + 'box';
|
|
var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(Element.boxMarkup, cls) + "</div>"));
|
|
Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
|
|
return el;
|
|
},
|
|
|
|
/**
|
|
* Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
|
|
* when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
|
|
* if a height has not been set using CSS.
|
|
* @return {Number}
|
|
*/
|
|
getComputedHeight : function() {
|
|
var me = this,
|
|
h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
|
|
if (!h) {
|
|
h = parseFloat(me.getStyle(HEIGHT)) || 0;
|
|
if (!me.isBorderBox()) {
|
|
h += me.getFrameWidth('tb');
|
|
}
|
|
}
|
|
return h;
|
|
},
|
|
|
|
/**
|
|
* Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
|
|
* when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
|
|
* if a width has not been set using CSS.
|
|
* @return {Number}
|
|
*/
|
|
getComputedWidth : function() {
|
|
var me = this,
|
|
w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
|
|
|
|
if (!w) {
|
|
w = parseFloat(me.getStyle(WIDTH)) || 0;
|
|
if (!me.isBorderBox()) {
|
|
w += me.getFrameWidth('lr');
|
|
}
|
|
}
|
|
return w;
|
|
},
|
|
|
|
/**
|
|
* Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
|
|
* for more information about the sides.
|
|
* @param {String} sides
|
|
* @return {Number}
|
|
*/
|
|
getFrameWidth : function(sides, onlyContentBox) {
|
|
return (onlyContentBox && this.isBorderBox()) ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
|
|
},
|
|
|
|
/**
|
|
* Sets up event handlers to add and remove a css class when the mouse is over this element
|
|
* @param {String} className The class to add
|
|
* @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
|
|
* will be the Element instance. If this functions returns false, the class will not be added.
|
|
* @param {Object} [scope] The scope to execute the testFn in.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
addClsOnOver : function(className, testFn, scope) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
hasTest = Ext.isFunction(testFn);
|
|
|
|
me.hover(
|
|
function() {
|
|
if (hasTest && testFn.call(scope || me, me) === false) {
|
|
return;
|
|
}
|
|
Ext.fly(dom, INTERNAL).addCls(className);
|
|
},
|
|
function() {
|
|
Ext.fly(dom, INTERNAL).removeCls(className);
|
|
}
|
|
);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets up event handlers to add and remove a css class when this element has the focus
|
|
* @param {String} className The class to add
|
|
* @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
|
|
* will be the Element instance. If this functions returns false, the class will not be added.
|
|
* @param {Object} [scope] The scope to execute the testFn in.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
addClsOnFocus : function(className, testFn, scope) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
hasTest = Ext.isFunction(testFn);
|
|
|
|
me.on("focus", function() {
|
|
if (hasTest && testFn.call(scope || me, me) === false) {
|
|
return false;
|
|
}
|
|
Ext.fly(dom, INTERNAL).addCls(className);
|
|
});
|
|
me.on("blur", function() {
|
|
Ext.fly(dom, INTERNAL).removeCls(className);
|
|
});
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
|
|
* @param {String} className The class to add
|
|
* @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
|
|
* will be the Element instance. If this functions returns false, the class will not be added.
|
|
* @param {Object} [scope] The scope to execute the testFn in.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
addClsOnClick : function(className, testFn, scope) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
hasTest = Ext.isFunction(testFn);
|
|
|
|
me.on("mousedown", function() {
|
|
if (hasTest && testFn.call(scope || me, me) === false) {
|
|
return false;
|
|
}
|
|
Ext.fly(dom, INTERNAL).addCls(className);
|
|
var d = Ext.getDoc(),
|
|
fn = function() {
|
|
Ext.fly(dom, INTERNAL).removeCls(className);
|
|
d.removeListener("mouseup", fn);
|
|
};
|
|
d.on("mouseup", fn);
|
|
});
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the dimensions of the element available to lay content out in.
|
|
*
|
|
* getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and
|
|
* offsetWidth/clientWidth. To obtain the size excluding scrollbars, use getViewSize.
|
|
*
|
|
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
|
|
*
|
|
* @return {Object} Object describing width and height.
|
|
* @return {Number} return.width
|
|
* @return {Number} return.height
|
|
*/
|
|
getStyleSize : function() {
|
|
var me = this,
|
|
d = this.dom,
|
|
isDoc = DOCORBODYRE.test(d.nodeName),
|
|
s ,
|
|
w, h;
|
|
|
|
// If the body, use static methods
|
|
if (isDoc) {
|
|
return {
|
|
width : Element.getViewWidth(),
|
|
height : Element.getViewHeight()
|
|
};
|
|
}
|
|
|
|
s = me.getStyle([HEIGHT, WIDTH], true); //seek inline
|
|
// Use Styles if they are set
|
|
if (s.width && s.width != 'auto') {
|
|
w = parseFloat(s.width);
|
|
if (me.isBorderBox()) {
|
|
w -= me.getFrameWidth('lr');
|
|
}
|
|
}
|
|
// Use Styles if they are set
|
|
if (s.height && s.height != 'auto') {
|
|
h = parseFloat(s.height);
|
|
if (me.isBorderBox()) {
|
|
h -= me.getFrameWidth('tb');
|
|
}
|
|
}
|
|
// Use getWidth/getHeight if style not set.
|
|
return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
|
|
},
|
|
|
|
statics: {
|
|
selectableCls: Ext.baseCSSPrefix + 'selectable',
|
|
unselectableCls: Ext.baseCSSPrefix + 'unselectable'
|
|
},
|
|
|
|
/**
|
|
* Enable text selection for this element (normalized across browsers)
|
|
* @return {Ext.Element} this
|
|
*/
|
|
selectable : function() {
|
|
var me = this;
|
|
|
|
// We clear this property for all browsers, not just Opera. This is so that rendering templates don't need to
|
|
// condition on Opera when making elements unselectable.
|
|
me.dom.unselectable = '';
|
|
|
|
me.removeCls(Element.unselectableCls);
|
|
me.addCls(Element.selectableCls);
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Disables text selection for this element (normalized across browsers)
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
unselectable : function() {
|
|
// The approach used to disable text selection combines CSS, HTML attributes and DOM events. Importantly the
|
|
// strategy is designed to be expressible in markup, so that elements can be rendered unselectable without
|
|
// needing modifications post-render. e.g.:
|
|
//
|
|
// <div class="x-unselectable" unselectable="on"></div>
|
|
//
|
|
// Changes to this method may need to be reflected elsewhere, e.g. ProtoElement.
|
|
var me = this;
|
|
|
|
// The unselectable property (or similar) is supported by various browsers but Opera is the only browser that
|
|
// doesn't support any of the other techniques. The problem with it is that it isn't inherited by child
|
|
// elements. Theoretically we could add it to all children but the performance would be terrible. In certain
|
|
// key locations (e.g. panel headers) we add unselectable="on" to extra elements during rendering just for
|
|
// Opera's benefit.
|
|
if (Ext.isOpera) {
|
|
me.dom.unselectable = 'on';
|
|
}
|
|
|
|
// In Mozilla and WebKit the CSS properties -moz-user-select and -webkit-user-select prevent a selection
|
|
// originating in an element. These are inherited, which is what we want.
|
|
//
|
|
// In IE we rely on a listener for the selectstart event instead. We don't need to register a listener on the
|
|
// individual element, instead we use a single listener and rely on event propagation to listen for the event at
|
|
// the document level. That listener will walk up the DOM looking for nodes that have either of the classes
|
|
// x-selectable or x-unselectable. This simulates the CSS inheritance approach.
|
|
//
|
|
// IE 10 is expected to support -ms-user-select so the listener may not be required.
|
|
me.removeCls(Element.selectableCls);
|
|
me.addCls(Element.unselectableCls);
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Changes this Element's state to "vertical" (rotated 90 or 270 degrees).
|
|
* This involves inverting the getters and setters for height and width,
|
|
* and applying hooks for rotating getters and setters for border/margin/padding.
|
|
* (getWidth becomes getHeight and vice versa), setStyle and getStyle will
|
|
* also return the inverse when height or width are being operated on.
|
|
*
|
|
* @param {Number} angle the angle of rotation - either 90 or 270
|
|
* @param {String} cls an optional css class that contains the required
|
|
* styles for switching the element to vertical orientation. Omit this if
|
|
* the element already contains vertical styling. If cls is provided,
|
|
* it will be removed from the element when {@link #setHorizontal} is called.
|
|
* @private
|
|
*/
|
|
setVertical: function(angle, cls) {
|
|
var me = this,
|
|
proto = Element.prototype,
|
|
hooks;
|
|
|
|
me.vertical = true;
|
|
if (cls) {
|
|
me.addCls(me.verticalCls = cls);
|
|
}
|
|
|
|
me.setWidth = proto.setHeight;
|
|
me.setHeight = proto.setWidth;
|
|
if (!Ext.isIE9m) {
|
|
// In browsers that use CSS3 transforms we must invert getHeight and
|
|
// get Width. In IE9 and below no adjustment is needed because we use
|
|
// a BasicImage filter to rotate the element and the element's
|
|
// offsetWidth and offsetHeight are automatically inverted.
|
|
me.getWidth = proto.getHeight;
|
|
me.getHeight = proto.getWidth;
|
|
}
|
|
|
|
// Switch to using the appropriate vertical style hooks
|
|
me.styleHooks = (angle === 270) ?
|
|
Element.prototype.verticalStyleHooks270 : Element.prototype.verticalStyleHooks90;
|
|
},
|
|
|
|
/**
|
|
* Removes "vertical" state from this element (reverses everything done
|
|
* by {@link #setVertical}).
|
|
* @private
|
|
*/
|
|
setHorizontal: function() {
|
|
var me = this,
|
|
cls = me.verticalCls;
|
|
|
|
delete me.vertical;
|
|
if (cls) {
|
|
delete me.verticalCls;
|
|
me.removeCls(cls);
|
|
}
|
|
|
|
// delete the inverted methods and revert to inheriting from the prototype
|
|
delete me.setWidth;
|
|
delete me.setHeight;
|
|
if (!Ext.isIE9m) {
|
|
delete me.getWidth;
|
|
delete me.getHeight;
|
|
}
|
|
|
|
// revert to inheriting styleHooks from the prototype
|
|
delete me.styleHooks;
|
|
}
|
|
});
|
|
|
|
Element.prototype.styleHooks = styleHooks = Ext.dom.AbstractElement.prototype.styleHooks;
|
|
|
|
// When elements are rotated 80 or 270 degrees, their border, margin and padding hooks
|
|
// need to be rotated as well.
|
|
Element.prototype.verticalStyleHooks90 = verticalStyleHooks90 = Ext.Object.chain(Element.prototype.styleHooks);
|
|
Element.prototype.verticalStyleHooks270 = verticalStyleHooks270 = Ext.Object.chain(Element.prototype.styleHooks);
|
|
|
|
verticalStyleHooks90.width = { name: 'height' };
|
|
verticalStyleHooks90.height = { name: 'width' };
|
|
verticalStyleHooks90['margin-top'] = { name: 'marginLeft' };
|
|
verticalStyleHooks90['margin-right'] = { name: 'marginTop' };
|
|
verticalStyleHooks90['margin-bottom'] = { name: 'marginRight' };
|
|
verticalStyleHooks90['margin-left'] = { name: 'marginBottom' };
|
|
verticalStyleHooks90['padding-top'] = { name: 'paddingLeft' };
|
|
verticalStyleHooks90['padding-right'] = { name: 'paddingTop' };
|
|
verticalStyleHooks90['padding-bottom'] = { name: 'paddingRight' };
|
|
verticalStyleHooks90['padding-left'] = { name: 'paddingBottom' };
|
|
verticalStyleHooks90['border-top'] = { name: 'borderLeft' };
|
|
verticalStyleHooks90['border-right'] = { name: 'borderTop' };
|
|
verticalStyleHooks90['border-bottom'] = { name: 'borderRight' };
|
|
verticalStyleHooks90['border-left'] = { name: 'borderBottom' };
|
|
|
|
verticalStyleHooks270.width = { name: 'height' };
|
|
verticalStyleHooks270.height = { name: 'width' };
|
|
verticalStyleHooks270['margin-top'] = { name: 'marginRight' };
|
|
verticalStyleHooks270['margin-right'] = { name: 'marginBottom' };
|
|
verticalStyleHooks270['margin-bottom'] = { name: 'marginLeft' };
|
|
verticalStyleHooks270['margin-left'] = { name: 'marginTop' };
|
|
verticalStyleHooks270['padding-top'] = { name: 'paddingRight' };
|
|
verticalStyleHooks270['padding-right'] = { name: 'paddingBottom' };
|
|
verticalStyleHooks270['padding-bottom'] = { name: 'paddingLeft' };
|
|
verticalStyleHooks270['padding-left'] = { name: 'paddingTop' };
|
|
verticalStyleHooks270['border-top'] = { name: 'borderRight' };
|
|
verticalStyleHooks270['border-right'] = { name: 'borderBottom' };
|
|
verticalStyleHooks270['border-bottom'] = { name: 'borderLeft' };
|
|
verticalStyleHooks270['border-left'] = { name: 'borderTop' };
|
|
|
|
if (Ext.isIE7m) {
|
|
styleHooks.fontSize = styleHooks['font-size'] = {
|
|
name: 'fontSize',
|
|
canThrow: true
|
|
};
|
|
|
|
styleHooks.fontStyle = styleHooks['font-style'] = {
|
|
name: 'fontStyle',
|
|
canThrow: true
|
|
};
|
|
|
|
styleHooks.fontFamily = styleHooks['font-family'] = {
|
|
name: 'fontFamily',
|
|
canThrow: true
|
|
};
|
|
}
|
|
|
|
// override getStyle for border-*-width
|
|
if (Ext.isIEQuirks || Ext.isIE && Ext.ieVersion <= 8) {
|
|
function getBorderWidth (dom, el, inline, style) {
|
|
if (style[this.styleName] == 'none') {
|
|
return '0px';
|
|
}
|
|
return style[this.name];
|
|
}
|
|
|
|
edges = ['Top','Right','Bottom','Left'];
|
|
k = edges.length;
|
|
|
|
while (k--) {
|
|
edge = edges[k];
|
|
borderWidth = 'border' + edge + 'Width';
|
|
|
|
styleHooks['border-'+edge.toLowerCase()+'-width'] = styleHooks[borderWidth] = {
|
|
name: borderWidth,
|
|
styleName: 'border' + edge + 'Style',
|
|
get: getBorderWidth
|
|
};
|
|
}
|
|
}
|
|
|
|
// The following hack is needed to support padding on dom elements with display:table.
|
|
// It was added because at one point auto layout's "outerCt" element had padding applied
|
|
// to it. The padding is now appplied to the innerCt which is display:table-cell, so this
|
|
// hack is not currently needed.
|
|
//if (Ext.isIE9 && Ext.isStrict) {
|
|
// // In IE9, getComputedStyle always returns 0px for padding if the element has
|
|
// // "display:table", so we use currentStyle instead.
|
|
// var names = {
|
|
// padding: 'padding',
|
|
// paddingTop: 'padding-top',
|
|
// paddingRight: 'padding-right',
|
|
// paddingBottom: 'padding-bottom',
|
|
// paddingLeft: 'padding-left'
|
|
// },
|
|
// createHook = function(name, camelCaseName) {
|
|
// styleHooks[name] = styleHooks[camelCaseName] = {
|
|
// name: name,
|
|
// get: function(dom) {
|
|
// return dom.currentStyle[name];
|
|
// }
|
|
// }
|
|
// },
|
|
// camelCaseName;
|
|
//
|
|
// for (camelCaseName in names) {
|
|
// createHook(names[camelCaseName], camelCaseName);
|
|
// }
|
|
//}
|
|
|
|
// Element.unselectable relies on this listener to prevent selection in IE. Some other browsers support the event too
|
|
// but it is only strictly required for IE. In WebKit this listener causes subtle differences to how the browser handles
|
|
// the non-selection, e.g. whether or not the mouse cursor changes when attempting to select text.
|
|
Ext.getDoc().on('selectstart', function(ev, dom) {
|
|
var doc = document.documentElement,
|
|
selectableCls = Element.selectableCls,
|
|
unselectableCls = Element.unselectableCls,
|
|
tagName = dom && dom.tagName;
|
|
|
|
tagName = tagName && tagName.toLowerCase();
|
|
|
|
// Element.unselectable is not really intended to handle selection within text fields and it is important that
|
|
// fields inside menus or panel headers don't inherit the unselectability. In most browsers this is automatic but in
|
|
// IE 9 the selectstart event can bubble up from text fields so we have to explicitly handle that case.
|
|
if (tagName === 'input' || tagName === 'textarea') {
|
|
return;
|
|
}
|
|
|
|
// Walk up the DOM checking the nodes. This may be 'slow' but selectstart events don't fire very often
|
|
while (dom && dom.nodeType === 1 && dom !== doc) {
|
|
var el = Ext.fly(dom);
|
|
|
|
// If the node has the class x-selectable then stop looking, the text selection is allowed
|
|
if (el.hasCls(selectableCls)) {
|
|
return;
|
|
}
|
|
|
|
// If the node has class x-unselectable then the text selection needs to be stopped
|
|
if (el.hasCls(unselectableCls)) {
|
|
ev.stopEvent();
|
|
return;
|
|
}
|
|
|
|
dom = dom.parentNode;
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
Ext.onReady(function () {
|
|
var opacityRe = /alpha\(opacity=(.*)\)/i,
|
|
trimRe = /^\s+|\s+$/g,
|
|
hooks = Ext.dom.Element.prototype.styleHooks;
|
|
|
|
// Ext.supports flags are not populated until onReady...
|
|
hooks.opacity = {
|
|
name: 'opacity',
|
|
afterSet: function(dom, value, el) {
|
|
if (el.isLayer) {
|
|
el.onOpacitySet(value);
|
|
}
|
|
}
|
|
};
|
|
if (!Ext.supports.Opacity && Ext.isIE) {
|
|
Ext.apply(hooks.opacity, {
|
|
get: function (dom) {
|
|
var filter = dom.style.filter,
|
|
match, opacity;
|
|
if (filter.match) {
|
|
match = filter.match(opacityRe);
|
|
if (match) {
|
|
opacity = parseFloat(match[1]);
|
|
if (!isNaN(opacity)) {
|
|
return opacity ? opacity / 100 : 0;
|
|
}
|
|
}
|
|
}
|
|
return 1;
|
|
},
|
|
set: function (dom, value) {
|
|
var style = dom.style,
|
|
val = style.filter.replace(opacityRe, '').replace(trimRe, '');
|
|
|
|
style.zoom = 1; // ensure dom.hasLayout
|
|
|
|
// value can be a number or '' or null... so treat falsey as no opacity
|
|
if (typeof(value) == 'number' && value >= 0 && value < 1) {
|
|
value *= 100;
|
|
style.filter = val + (val.length ? ' ' : '') + 'alpha(opacity='+value+')';
|
|
} else {
|
|
style.filter = val;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// else there is no work around for the lack of opacity support. Should not be a
|
|
// problem given that this has been supported for a long time now...
|
|
});
|
|
|
|
// @tag core
|
|
/**
|
|
* This mixin provides a common interface for objects that can be positioned, e.g.
|
|
* {@link Ext.Component Components} and {@link Ext.dom.Element Elements}
|
|
*/
|
|
Ext.define('Ext.util.Positionable', {
|
|
|
|
_positionTopLeft: ['position', 'top', 'left'],
|
|
|
|
_alignRe: /^([a-z]+)-([a-z]+)(\?)?$/,
|
|
|
|
// Stub implementation called after positioning.
|
|
// May be implemented in subclasses. AbstractComponent has an implementation.
|
|
afterSetPosition: Ext.emptyFn,
|
|
|
|
|
|
// private ==> used outside of core
|
|
// TODO: currently only used by ToolTip. does this method belong here?
|
|
adjustForConstraints: function(xy, parent) {
|
|
var vector = this.getConstrainVector(parent, xy);
|
|
if (vector) {
|
|
xy[0] += vector[0];
|
|
xy[1] += vector[1];
|
|
}
|
|
return xy;
|
|
},
|
|
|
|
/**
|
|
* Aligns the element with another element relative to the specified anchor points. If
|
|
* the other element is the document it aligns it to the viewport. The position
|
|
* parameter is optional, and can be specified in any one of the following formats:
|
|
*
|
|
* - **Blank**: Defaults to aligning the element's top-left corner to the target's
|
|
* bottom-left corner ("tl-bl").
|
|
* - **One anchor (deprecated)**: The passed anchor position is used as the target
|
|
* element's anchor point. The element being aligned will position its top-left
|
|
* corner (tl) to that point. *This method has been deprecated in favor of the newer
|
|
* two anchor syntax below*.
|
|
* - **Two anchors**: If two values from the table below are passed separated by a dash,
|
|
* the first value is used as the element's anchor point, and the second value is
|
|
* used as the target's anchor point.
|
|
*
|
|
* In addition to the anchor points, the position parameter also supports the "?"
|
|
* character. If "?" is passed at the end of the position string, the element will
|
|
* attempt to align as specified, but the position will be adjusted to constrain to
|
|
* the viewport if necessary. Note that the element being aligned might be swapped to
|
|
* align to a different position than that specified in order to enforce the viewport
|
|
* constraints. Following are all of the supported anchor positions:
|
|
*
|
|
* <pre>
|
|
* Value Description
|
|
* ----- -----------------------------
|
|
* tl The top left corner (default)
|
|
* t The center of the top edge
|
|
* tr The top right corner
|
|
* l The center of the left edge
|
|
* c In the center of the element
|
|
* r The center of the right edge
|
|
* bl The bottom left corner
|
|
* b The center of the bottom edge
|
|
* br The bottom right corner
|
|
* </pre>
|
|
*
|
|
* Example Usage:
|
|
*
|
|
* // align el to other-el using the default positioning
|
|
* // ("tl-bl", non-constrained)
|
|
* el.alignTo("other-el");
|
|
*
|
|
* // align the top left corner of el with the top right corner of other-el
|
|
* // (constrained to viewport)
|
|
* el.alignTo("other-el", "tr?");
|
|
*
|
|
* // align the bottom right corner of el with the center left edge of other-el
|
|
* el.alignTo("other-el", "br-l?");
|
|
*
|
|
* // align the center of el with the bottom left corner of other-el and
|
|
* // adjust the x position by -6 pixels (and the y position by 0)
|
|
* el.alignTo("other-el", "c-bl", [-6, 0]);
|
|
*
|
|
* @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
|
|
* HTMLElement, or id of the element to align to.
|
|
* @param {String} [position="tl-bl?"] The position to align to
|
|
* @param {Number[]} [offsets] Offset the positioning by [x, y]
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard
|
|
* Element animation config object
|
|
* @return {Ext.util.Positionable} this
|
|
*/
|
|
alignTo: function(element, position, offsets, animate) {
|
|
var me = this,
|
|
el = me.el;
|
|
|
|
return me.setXY(me.getAlignToXY(element, position, offsets),
|
|
el.anim && !!animate ? el.anim(animate) : false);
|
|
},
|
|
|
|
/**
|
|
* Anchors an element to another element and realigns it when the window is resized.
|
|
* @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
|
|
* HTMLElement, or id of the element to align to.
|
|
* @param {String} [position="tl-bl?"] The position to align to
|
|
* @param {Number[]} [offsets] Offset the positioning by [x, y]
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard
|
|
* Element animation config object
|
|
* @param {Boolean/Number} [monitorScroll=50] True to monitor body scroll and
|
|
* reposition. If this parameter is a number, it is used as the buffer delay in
|
|
* milliseconds.
|
|
* @param {Function} [callback] The function to call after the animation finishes
|
|
* @return {Ext.util.Positionable} this
|
|
*/
|
|
anchorTo: function(anchorToEl, alignment, offsets, animate, monitorScroll, callback) {
|
|
var me = this,
|
|
scroll = !Ext.isEmpty(monitorScroll),
|
|
action = function() {
|
|
me.alignTo(anchorToEl, alignment, offsets, animate);
|
|
Ext.callback(callback, me);
|
|
},
|
|
anchor = me.getAnchor();
|
|
|
|
// previous listener anchor, remove it
|
|
me.removeAnchor();
|
|
Ext.apply(anchor, {
|
|
fn: action,
|
|
scroll: scroll
|
|
});
|
|
|
|
Ext.EventManager.onWindowResize(action, null);
|
|
|
|
if (scroll) {
|
|
Ext.EventManager.on(window, 'scroll', action, null,
|
|
{buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
|
|
}
|
|
action(); // align immediately
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Calculates x,y coordinates specified by the anchor position on the element, adding
|
|
* extraX and extraY values.
|
|
* @param {String} [anchor='tl'] The specified anchor position.
|
|
* See {@link #alignTo} for details on supported anchor positions.
|
|
* @param {Number} [extraX] value to be added to the x coordinate
|
|
* @param {Number} [extraY] value to be added to the y coordinate
|
|
* @param {Object} [size] An object containing the size to use for calculating anchor
|
|
* position {width: (target width), height: (target height)} (defaults to the
|
|
* element's current size)
|
|
* @return {Number[]} [x, y] An array containing the element's x and y coordinates
|
|
* @private
|
|
*/
|
|
calculateAnchorXY: function(anchor, extraX, extraY, mySize) {
|
|
//Passing a different size is useful for pre-calculating anchors,
|
|
//especially for anchored animations that change the el size.
|
|
var me = this,
|
|
el = me.el,
|
|
doc = document,
|
|
isViewport = el.dom == doc.body || el.dom == doc,
|
|
round = Math.round,
|
|
xy, myWidth, myHeight;
|
|
|
|
anchor = (anchor || "tl").toLowerCase();
|
|
mySize = mySize || {};
|
|
|
|
myWidth = mySize.width || isViewport ? Ext.Element.getViewWidth() : me.getWidth();
|
|
myHeight = mySize.height || isViewport ? Ext.Element.getViewHeight() : me.getHeight();
|
|
|
|
// Calculate anchor position.
|
|
// Test most common cases for picker alignment first.
|
|
switch (anchor) {
|
|
case 'tl' : xy = [0, 0];
|
|
break;
|
|
case 'bl' : xy = [0, myHeight];
|
|
break;
|
|
case 'tr' : xy = [myWidth, 0];
|
|
break;
|
|
case 'c' : xy = [round(myWidth * 0.5), round(myHeight * 0.5)];
|
|
break;
|
|
case 't' : xy = [round(myWidth * 0.5), 0];
|
|
break;
|
|
case 'l' : xy = [0, round(myHeight * 0.5)];
|
|
break;
|
|
case 'r' : xy = [myWidth, round(myHeight * 0.5)];
|
|
break;
|
|
case 'b' : xy = [round(myWidth * 0.5), myHeight];
|
|
break;
|
|
case 'tc' : xy = [round(myWidth * 0.5), 0];
|
|
break;
|
|
case 'bc' : xy = [round(myWidth * 0.5), myHeight];
|
|
break;
|
|
case 'br' : xy = [myWidth, myHeight];
|
|
}
|
|
return [xy[0] + extraX, xy[1] + extraY];
|
|
},
|
|
|
|
/**
|
|
* By default this method does nothing but return the position spec passed to it. In
|
|
* rtl mode it is overridden to convert "l" to "r" and vice versa when required.
|
|
* @private
|
|
*/
|
|
convertPositionSpec: Ext.identityFn,
|
|
|
|
/**
|
|
* Gets the x,y coordinates to align this element with another element. See
|
|
* {@link #alignTo} for more info on the supported position values.
|
|
* @param {Ext.util.Positionable/HTMLElement/String} element The Positionable,
|
|
* HTMLElement, or id of the element to align to.
|
|
* @param {String} [position="tl-bl?"] The position to align to
|
|
* @param {Number[]} [offsets] Offset the positioning by [x, y]
|
|
* @return {Number[]} [x, y]
|
|
*/
|
|
getAlignToXY: function(alignToEl, posSpec, offset) {
|
|
var me = this,
|
|
viewportWidth = Ext.Element.getViewWidth() - 10, // 10px of margin for ie
|
|
viewportHeight = Ext.Element.getViewHeight() - 10, // 10px of margin for ie
|
|
doc = document,
|
|
docElement = doc.documentElement,
|
|
docBody = doc.body,
|
|
scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0),
|
|
scrollY = (docElement.scrollTop || docBody.scrollTop || 0),
|
|
alignMatch, myPosition, alignToElPosition, myWidth, myHeight,
|
|
alignToElRegion, swapY, swapX, constrain, align1, align2,
|
|
p1y, p1x, p2y, p2x, x, y;
|
|
|
|
alignToEl = Ext.get(alignToEl.el || alignToEl);
|
|
|
|
if (!alignToEl || !alignToEl.dom) {
|
|
}
|
|
|
|
offset = offset || [0,0];
|
|
posSpec = (!posSpec || posSpec == "?" ? "tl-bl?" :
|
|
(!(/-/).test(posSpec) && posSpec !== "" ? "tl-" + posSpec : posSpec || "tl-bl")).toLowerCase();
|
|
|
|
posSpec = me.convertPositionSpec(posSpec);
|
|
|
|
alignMatch = posSpec.match(me._alignRe);
|
|
|
|
|
|
align1 = alignMatch[1];
|
|
align2 = alignMatch[2];
|
|
constrain = !!alignMatch[3];
|
|
|
|
//Subtract the aligned el's internal xy from the target's offset xy
|
|
//plus custom offset to get this Element's new offset xy
|
|
myPosition = me.getAnchorXY(align1, true);
|
|
alignToElPosition = me.getAnchorToXY(alignToEl, align2, false);
|
|
|
|
x = alignToElPosition[0] - myPosition[0] + offset[0];
|
|
y = alignToElPosition[1] - myPosition[1] + offset[1];
|
|
|
|
// If position spec ended with a "?", then constrain to viewport is necessary
|
|
if (constrain) {
|
|
myWidth = me.getWidth();
|
|
myHeight = me.getHeight();
|
|
alignToElRegion = alignToEl.getRegion();
|
|
// If we are at a viewport boundary and the aligned el is anchored
|
|
// on a target border that is perpendicular to the vp border,
|
|
// allow the aligned el to slide on that border, otherwise swap
|
|
// the aligned el to the opposite border of the target.
|
|
p1y = align1.charAt(0);
|
|
p1x = align1.charAt(align1.length - 1);
|
|
p2y = align2.charAt(0);
|
|
p2x = align2.charAt(align2.length - 1);
|
|
swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
|
|
swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));
|
|
|
|
if (x + myWidth > viewportWidth + scrollX) {
|
|
x = swapX ? alignToElRegion.left - myWidth : viewportWidth + scrollX - myWidth;
|
|
}
|
|
if (x < scrollX) {
|
|
x = swapX ? alignToElRegion.right : scrollX;
|
|
}
|
|
if (y + myHeight > viewportHeight + scrollY) {
|
|
y = swapY ? alignToElRegion.top - myHeight : viewportHeight + scrollY - myHeight;
|
|
}
|
|
if (y < scrollY) {
|
|
y = swapY ? alignToElRegion.bottom : scrollY;
|
|
}
|
|
}
|
|
return [x,y];
|
|
},
|
|
|
|
// private
|
|
getAnchor: function(){
|
|
var el = this.el,
|
|
data = (el.$cache || el.getCache()).data,
|
|
anchor;
|
|
|
|
if (!el.dom) {
|
|
return;
|
|
}
|
|
anchor = data._anchor;
|
|
|
|
if(!anchor){
|
|
anchor = data._anchor = {};
|
|
}
|
|
return anchor;
|
|
},
|
|
|
|
/**
|
|
* Gets the x,y coordinates specified by the anchor position on the element.
|
|
* @param {String} [anchor='tl'] The specified anchor position.
|
|
* See {@link #alignTo} for details on supported anchor positions.
|
|
* @param {Boolean} [local] True to get the local (element top/left-relative) anchor
|
|
* position instead of page coordinates
|
|
* @param {Object} [size] An object containing the size to use for calculating anchor
|
|
* position {width: (target width), height: (target height)} (defaults to the
|
|
* element's current size)
|
|
* @return {Number[]} [x, y] An array containing the element's x and y coordinates
|
|
*/
|
|
getAnchorXY: function(anchor, local, mySize) {
|
|
var me = this,
|
|
myPos = me.getXY(),
|
|
el = me.el,
|
|
doc = document,
|
|
isViewport = el.dom == doc.body || el.dom == doc,
|
|
scroll = el.getScroll(),
|
|
extraX = isViewport ? scroll.left : local ? 0 : myPos[0],
|
|
extraY = isViewport ? scroll.top : local ? 0 : myPos[1];
|
|
|
|
return me.calculateAnchorXY(anchor, extraX, extraY, mySize);
|
|
},
|
|
|
|
/**
|
|
* Return an object defining the area of this Element which can be passed to
|
|
* {@link #setBox} to set another Element's size/location to match this element.
|
|
*
|
|
* @param {Boolean} [contentBox] If true a box for the content of the element is
|
|
* returned.
|
|
* @param {Boolean} [local] If true the element's left and top relative to its
|
|
* `offsetParent` are returned instead of page x/y.
|
|
* @return {Object} box An object in the format:
|
|
*
|
|
* {
|
|
* x: <Element's X position>,
|
|
* y: <Element's Y position>,
|
|
* left: <Element's X position (an alias for x)>,
|
|
* top: <Element's Y position (an alias for y)>,
|
|
* width: <Element's width>,
|
|
* height: <Element's height>,
|
|
* bottom: <Element's lower bound>,
|
|
* right: <Element's rightmost bound>
|
|
* }
|
|
*
|
|
* The returned object may also be addressed as an Array where index 0 contains the X
|
|
* position and index 1 contains the Y position. The result may also be used for
|
|
* {@link #setXY}
|
|
*/
|
|
getBox: function(contentBox, local) {
|
|
var me = this,
|
|
xy = local ? me.getLocalXY() : me.getXY(),
|
|
x = xy[0],
|
|
y = xy[1],
|
|
w = me.getWidth(),
|
|
h = me.getHeight(),
|
|
borderPadding, beforeX, beforeY;
|
|
|
|
if (contentBox) {
|
|
borderPadding = me.getBorderPadding();
|
|
beforeX = borderPadding.beforeX;
|
|
beforeY = borderPadding.beforeY;
|
|
|
|
x += beforeX;
|
|
y += beforeY;
|
|
w -= (beforeX + borderPadding.afterX);
|
|
h -= (beforeY + borderPadding.afterY);
|
|
}
|
|
|
|
return {
|
|
x: x,
|
|
left: x,
|
|
0: x,
|
|
y: y,
|
|
top: y,
|
|
1: y,
|
|
width: w,
|
|
height: h,
|
|
right: x + w,
|
|
bottom: y + h
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Calculates the new [x,y] position to move this Positionable into a constrain region.
|
|
*
|
|
* By default, this Positionable is constrained to be within the container it was added to, or the element it was
|
|
* rendered to.
|
|
*
|
|
* Priority is given to constraining the top and left within the constraint.
|
|
*
|
|
* An alternative constraint may be passed.
|
|
* @param {String/HTMLElement/Ext.Element/Ext.util.Region} [constrainTo] The Element or {@link Ext.util.Region Region}
|
|
* into which this Component is to be constrained. Defaults to the element into which this Positionable
|
|
* was rendered, or this Component's {@link Ext.Component#constrainTo.
|
|
* @param {Number[]} [proposedPosition] A proposed `[X, Y]` position to test for validity
|
|
* and to coerce into constraints instead of using this Positionable's current position.
|
|
* @param {Boolean} [local] The proposedPosition is local *(relative to floatParent if a floating Component)*
|
|
* @param {Number[]} [proposedSize] A proposed `[width, height]` size to use when calculating
|
|
* constraints instead of using this Positionable's current size.
|
|
* @return {Number[]} **If** the element *needs* to be translated, the new `[X, Y]` position within
|
|
* constraints if possible, giving priority to keeping the top and left edge in the constrain region.
|
|
* Otherwise, `false`.
|
|
*/
|
|
calculateConstrainedPosition: function(constrainTo, proposedPosition, local, proposedSize) {
|
|
var me = this,
|
|
vector,
|
|
fp = me.floatParent,
|
|
parentNode = fp ? fp.getTargetEl() : null,
|
|
parentOffset,
|
|
borderPadding,
|
|
proposedConstrainPosition,
|
|
xy = false;
|
|
|
|
if (local && fp) {
|
|
parentOffset = parentNode.getXY();
|
|
borderPadding = parentNode.getBorderPadding();
|
|
parentOffset[0] += borderPadding.beforeX;
|
|
parentOffset[1] += borderPadding.beforeY;
|
|
if (proposedPosition) {
|
|
proposedConstrainPosition = [proposedPosition[0] + parentOffset[0], proposedPosition[1] + parentOffset[1]];
|
|
}
|
|
} else {
|
|
proposedConstrainPosition = proposedPosition;
|
|
}
|
|
// Calculate the constrain vector to coerce our position to within our
|
|
// constrainTo setting. getConstrainVector will provide a default constraint
|
|
// region if there is no explicit constrainTo, *and* there is no floatParent owner Component.
|
|
constrainTo = constrainTo || me.constrainTo || parentNode || me.container || me.el.parent();
|
|
vector = (me.constrainHeader ? me.header : me).getConstrainVector(constrainTo, proposedConstrainPosition, proposedSize);
|
|
|
|
// false is returned if no movement is needed
|
|
if (vector) {
|
|
xy = proposedPosition || me.getPosition(local);
|
|
xy[0] += vector[0];
|
|
xy[1] += vector[1];
|
|
}
|
|
return xy;
|
|
},
|
|
|
|
/**
|
|
* Returns the `[X, Y]` vector by which this Positionable's element must be translated to make a best
|
|
* attempt to constrain within the passed constraint. Returns `false` if the element
|
|
* does not need to be moved.
|
|
*
|
|
* Priority is given to constraining the top and left within the constraint.
|
|
*
|
|
* The constraint may either be an existing element into which the element is to be
|
|
* constrained, or a {@link Ext.util.Region Region} into which this element is to be
|
|
* constrained.
|
|
*
|
|
* By default, any extra shadow around the element is **not** included in the constrain calculations - the edges
|
|
* of the element are used as the element bounds. To constrain the shadow within the constrain region, set the
|
|
* `constrainShadow` property on this element to `true`.
|
|
*
|
|
* @param {Ext.util.Positionable/HTMLElement/String/Ext.util.Region} [constrainTo] The
|
|
* Positionable, HTMLElement, element id, or Region into which the element is to be
|
|
* constrained.
|
|
* @param {Number[]} [proposedPosition] A proposed `[X, Y]` position to test for validity
|
|
* and to produce a vector for instead of using the element's current position
|
|
* @param {Number[]} [proposedSize] A proposed `[width, height]` size to constrain
|
|
* instead of using the element's current size
|
|
* @return {Number[]/Boolean} **If** the element *needs* to be translated, an `[X, Y]`
|
|
* vector by which this element must be translated. Otherwise, `false`.
|
|
*/
|
|
getConstrainVector: function(constrainTo, proposedPosition, proposedSize) {
|
|
var thisRegion = this.getRegion(),
|
|
vector = [0, 0],
|
|
shadowSize = (this.shadow && this.constrainShadow && !this.shadowDisabled) ? this.shadow.getShadowSize() : undefined,
|
|
overflowed = false,
|
|
constraintInsets = this.constraintInsets;
|
|
|
|
if (!(constrainTo instanceof Ext.util.Region)) {
|
|
constrainTo = Ext.get(constrainTo.el || constrainTo).getViewRegion();
|
|
}
|
|
|
|
// Apply constraintInsets
|
|
if (constraintInsets) {
|
|
constraintInsets = Ext.isObject(constraintInsets) ? constraintInsets : Ext.Element.parseBox(constraintInsets);
|
|
constrainTo.adjust(constraintInsets.top, constraintInsets.right, constraintInsets.bottom, constraintInsets.length);
|
|
}
|
|
|
|
// Shift this region to occupy the proposed position
|
|
if (proposedPosition) {
|
|
thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
|
|
}
|
|
// Set the size of this region to the proposed size
|
|
if (proposedSize) {
|
|
thisRegion.right = thisRegion.left + proposedSize[0];
|
|
thisRegion.bottom = thisRegion.top + proposedSize[1];
|
|
}
|
|
|
|
// Reduce the constrain region to allow for shadow
|
|
if (shadowSize) {
|
|
constrainTo.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);
|
|
}
|
|
|
|
// Constrain the X coordinate by however much this Element overflows
|
|
if (thisRegion.right > constrainTo.right) {
|
|
overflowed = true;
|
|
vector[0] = (constrainTo.right - thisRegion.right); // overflowed the right
|
|
}
|
|
if (thisRegion.left + vector[0] < constrainTo.left) {
|
|
overflowed = true;
|
|
vector[0] = (constrainTo.left - thisRegion.left); // overflowed the left
|
|
}
|
|
|
|
// Constrain the Y coordinate by however much this Element overflows
|
|
if (thisRegion.bottom > constrainTo.bottom) {
|
|
overflowed = true;
|
|
vector[1] = (constrainTo.bottom - thisRegion.bottom); // overflowed the bottom
|
|
}
|
|
if (thisRegion.top + vector[1] < constrainTo.top) {
|
|
overflowed = true;
|
|
vector[1] = (constrainTo.top - thisRegion.top); // overflowed the top
|
|
}
|
|
return overflowed ? vector : false;
|
|
},
|
|
|
|
/**
|
|
* Returns the offsets of this element from the passed element. The element must both
|
|
* be part of the DOM tree and not have display:none to have page coordinates.
|
|
* @param {Ext.util.Positionable/HTMLElement/String} offsetsTo The Positionable,
|
|
* HTMLElement, or element id to get get the offsets from.
|
|
* @return {Number[]} The XY page offsets (e.g. `[100, -200]`)
|
|
*/
|
|
getOffsetsTo: function(offsetsTo) {
|
|
var o = this.getXY(),
|
|
e = Ext.fly(offsetsTo.el || offsetsTo, '_internal').getXY();
|
|
return [o[0] - e[0],o[1] - e[1]];
|
|
},
|
|
|
|
/**
|
|
* Returns a region object that defines the area of this element.
|
|
* @return {Ext.util.Region} A Region containing "top, left, bottom, right" properties.
|
|
*/
|
|
getRegion: function() {
|
|
var box = this.getBox();
|
|
return new Ext.util.Region(box.top, box.right, box.bottom, box.left);
|
|
},
|
|
|
|
/**
|
|
* Returns the **content** region of this element. That is the region within the borders
|
|
* and padding.
|
|
* @return {Ext.util.Region} A Region containing "top, left, bottom, right" member data.
|
|
*/
|
|
getViewRegion: function() {
|
|
var me = this,
|
|
el = me.el,
|
|
isBody = el.dom.nodeName === 'BODY',
|
|
borderPadding, scroll, pos, top, left, width, height;
|
|
|
|
// For the body we want to do some special logic
|
|
if (isBody) {
|
|
scroll = el.getScroll();
|
|
left = scroll.left;
|
|
top = scroll.top;
|
|
width = Ext.dom.AbstractElement.getViewportWidth();
|
|
height = Ext.dom.AbstractElement.getViewportHeight();
|
|
}
|
|
else {
|
|
borderPadding = me.getBorderPadding();
|
|
pos = me.getXY();
|
|
left = pos[0] + borderPadding.beforeX;
|
|
top = pos[1] + borderPadding.beforeY;
|
|
width = me.getWidth(true);
|
|
height = me.getHeight(true);
|
|
}
|
|
|
|
return new Ext.util.Region(top, left + width, top + height, left);
|
|
},
|
|
|
|
/**
|
|
* Move the element relative to its current position.
|
|
* @param {String} direction Possible values are:
|
|
*
|
|
* - `"l"` (or `"left"`)
|
|
* - `"r"` (or `"right"`)
|
|
* - `"t"` (or `"top"`, or `"up"`)
|
|
* - `"b"` (or `"bottom"`, or `"down"`)
|
|
*
|
|
* @param {Number} distance How far to move the element in pixels
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard
|
|
* Element animation config object
|
|
*/
|
|
move: function(direction, distance, animate) {
|
|
var me = this,
|
|
xy = me.getXY(),
|
|
x = xy[0],
|
|
y = xy[1],
|
|
left = [x - distance, y],
|
|
right = [x + distance, y],
|
|
top = [x, y - distance],
|
|
bottom = [x, y + distance],
|
|
hash = {
|
|
l: left,
|
|
left: left,
|
|
r: right,
|
|
right: right,
|
|
t: top,
|
|
top: top,
|
|
up: top,
|
|
b: bottom,
|
|
bottom: bottom,
|
|
down: bottom
|
|
};
|
|
|
|
direction = direction.toLowerCase();
|
|
me.setXY([hash[direction][0], hash[direction][1]], animate);
|
|
},
|
|
|
|
/**
|
|
* Remove any anchor to this element. See {@link #anchorTo}.
|
|
* @return {Ext.util.Positionable} this
|
|
*/
|
|
removeAnchor: function() {
|
|
var anchor = this.getAnchor();
|
|
|
|
if (anchor && anchor.fn) {
|
|
Ext.EventManager.removeResizeListener(anchor.fn);
|
|
if (anchor.scroll) {
|
|
Ext.EventManager.un(window, 'scroll', anchor.fn);
|
|
}
|
|
delete anchor.fn;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets the element's box. If animate is true then x, y, width, and height will be
|
|
* animated concurrently.
|
|
* @param {Object} box The box to fill {x, y, width, height}
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard
|
|
* Element animation config object
|
|
* @return {Ext.util.Positionable} this
|
|
*/
|
|
setBox: function(box, animate) {
|
|
var me = this,
|
|
el = me.el,
|
|
x = box.x,
|
|
y = box.y,
|
|
xy = [x, y],
|
|
w = box.width,
|
|
h = box.height,
|
|
doConstrain = (me.constrain || me.constrainHeader),
|
|
constrainedPos = doConstrain && me.calculateConstrainedPosition(null, [x, y], false, [w, h]);
|
|
|
|
// Position to the contrained
|
|
if (constrainedPos) {
|
|
x = constrainedPos[0];
|
|
y = constrainedPos[1];
|
|
}
|
|
if (!animate || !el.anim) {
|
|
me.setSize(w, h);
|
|
me.setXY([x, y]);
|
|
me.afterSetPosition(x, y);
|
|
} else {
|
|
me.animate(Ext.applyIf({
|
|
to: {
|
|
x: x,
|
|
y: y,
|
|
width: el.adjustWidth(w),
|
|
height: el.adjustHeight(h)
|
|
},
|
|
listeners: {
|
|
afteranimate: Ext.Function.bind(me.afterSetPosition, me, [x, y])
|
|
}
|
|
}, animate));
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the element's position and size to the specified region. If animation is true
|
|
* then width, height, x and y will be animated concurrently.
|
|
*
|
|
* @param {Ext.util.Region} region The region to fill
|
|
* @param {Boolean/Object} [animate] true for the default animation or a standard
|
|
* Element animation config object
|
|
* @return {Ext.util.Positionable} this
|
|
*/
|
|
setRegion: function(region, animate) {
|
|
return this.setBox({
|
|
x: region.left,
|
|
y: region.top,
|
|
width: region.right - region.left,
|
|
height: region.bottom - region.top
|
|
}, animate);
|
|
},
|
|
|
|
/**
|
|
* Translates the passed page coordinates into left/top css values for the element
|
|
* @param {Number/Array} x The page x or an array containing [x, y]
|
|
* @param {Number} [y] The page y, required if x is not an array
|
|
* @return {Object} An object with left and top properties. e.g.
|
|
* {left: (value), top: (value)}
|
|
*/
|
|
translatePoints: function(x, y) {
|
|
var pos = this.translateXY(x, y);
|
|
|
|
return {
|
|
left: pos.x,
|
|
top: pos.y
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Translates the passed page coordinates into x and y css values for the element
|
|
* @param {Number/Array} x The page x or an array containing [x, y]
|
|
* @param {Number} [y] The page y, required if x is not an array
|
|
* @return {Object} An object with x and y properties. e.g.
|
|
* {x: (value), y: (value)}
|
|
* @private
|
|
*/
|
|
translateXY: function(x, y) {
|
|
var me = this,
|
|
el = me.el,
|
|
styles = el.getStyle(me._positionTopLeft),
|
|
relative = styles.position == 'relative',
|
|
left = parseFloat(styles.left),
|
|
top = parseFloat(styles.top),
|
|
xy = me.getXY();
|
|
|
|
if (Ext.isArray(x)) {
|
|
y = x[1];
|
|
x = x[0];
|
|
}
|
|
if (isNaN(left)) {
|
|
left = relative ? 0 : el.dom.offsetLeft;
|
|
}
|
|
if (isNaN(top)) {
|
|
top = relative ? 0 : el.dom.offsetTop;
|
|
}
|
|
left = (typeof x == 'number') ? x - xy[0] + left : undefined;
|
|
top = (typeof y == 'number') ? y - xy[1] + top : undefined;
|
|
return {
|
|
x: left,
|
|
y: top
|
|
};
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
* @class Ext.dom.Element
|
|
* @alternateClassName Ext.Element
|
|
* @alternateClassName Ext.core.Element
|
|
* @extends Ext.dom.AbstractElement
|
|
*
|
|
* Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
|
|
*
|
|
* All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all
|
|
* DOM elements.
|
|
*
|
|
* Note that the events documented in this class are not Ext events, they encapsulate browser events. Some older browsers
|
|
* may not support the full range of events. Which events are supported is beyond the control of Ext JS.
|
|
*
|
|
* Usage:
|
|
*
|
|
* // by id
|
|
* var el = Ext.get("my-div");
|
|
*
|
|
* // by DOM element reference
|
|
* var el = Ext.get(myDivElement);
|
|
*
|
|
* # Animations
|
|
*
|
|
* When an element is manipulated, by default there is no animation.
|
|
*
|
|
* var el = Ext.get("my-div");
|
|
*
|
|
* // no animation
|
|
* el.setWidth(100);
|
|
*
|
|
* Many of the functions for manipulating an element have an optional "animate" parameter. This parameter can be
|
|
* specified as boolean (true) for default animation effects.
|
|
*
|
|
* // default animation
|
|
* el.setWidth(100, true);
|
|
*
|
|
* To configure the effects, an object literal with animation options to use as the Element animation configuration
|
|
* object can also be specified. Note that the supported Element animation configuration options are a subset of the
|
|
* {@link Ext.fx.Anim} animation options specific to Fx effects. The supported Element animation configuration options
|
|
* are:
|
|
*
|
|
* Option Default Description
|
|
* --------- -------- ---------------------------------------------
|
|
* {@link Ext.fx.Anim#duration duration} 350 The duration of the animation in milliseconds
|
|
* {@link Ext.fx.Anim#easing easing} easeOut The easing method
|
|
* {@link Ext.fx.Anim#callback callback} none A function to execute when the anim completes
|
|
* {@link Ext.fx.Anim#scope scope} this The scope (this) of the callback function
|
|
*
|
|
* Usage:
|
|
*
|
|
* // Element animation options object
|
|
* var opt = {
|
|
* {@link Ext.fx.Anim#duration duration}: 1000,
|
|
* {@link Ext.fx.Anim#easing easing}: 'elasticIn',
|
|
* {@link Ext.fx.Anim#callback callback}: this.foo,
|
|
* {@link Ext.fx.Anim#scope scope}: this
|
|
* };
|
|
* // animation with some options set
|
|
* el.setWidth(100, opt);
|
|
*
|
|
* The Element animation object being used for the animation will be set on the options object as "anim", which allows
|
|
* you to stop or manipulate the animation. Here is an example:
|
|
*
|
|
* // using the "anim" property to get the Anim object
|
|
* if(opt.anim.isAnimated()){
|
|
* opt.anim.stop();
|
|
* }
|
|
*
|
|
* # Composite (Collections of) Elements
|
|
*
|
|
* For working with collections of Elements, see {@link Ext.CompositeElement}
|
|
*
|
|
* @constructor
|
|
* Creates new Element directly.
|
|
* @param {String/HTMLElement} element
|
|
* @param {Boolean} [forceNew] By default the constructor checks to see if there is already an instance of this
|
|
* element in the cache and if there is it returns the same instance. This will skip that check (useful for extending
|
|
* this class).
|
|
* @return {Object}
|
|
*/
|
|
Ext.define('Ext.dom.Element', function(Element) {
|
|
var HIDDEN = 'hidden',
|
|
DOC = document,
|
|
VISIBILITY = "visibility",
|
|
DISPLAY = "display",
|
|
NONE = "none",
|
|
XMASKED = Ext.baseCSSPrefix + "masked",
|
|
XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative",
|
|
EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg",
|
|
bodyRe = /^body/i,
|
|
visFly,
|
|
|
|
// speedy lookup for elements never to box adjust
|
|
noBoxAdjust = Ext.isStrict ? {
|
|
select: 1
|
|
}: {
|
|
input: 1,
|
|
select: 1,
|
|
textarea: 1
|
|
},
|
|
|
|
// Pseudo for use by cacheScrollValues
|
|
isScrolled = function(c) {
|
|
var r = [], ri = -1,
|
|
i, ci;
|
|
for (i = 0; ci = c[i]; i++) {
|
|
if (ci.scrollTop > 0 || ci.scrollLeft > 0) {
|
|
r[++ri] = ci;
|
|
}
|
|
}
|
|
return r;
|
|
};
|
|
|
|
return {
|
|
|
|
extend: Ext.dom.AbstractElement ,
|
|
|
|
alternateClassName: ['Ext.Element', 'Ext.core.Element'],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tableTagRe: /^(?:tr|td|table|tbody)$/i,
|
|
|
|
mixins: [
|
|
Ext.util.Positionable
|
|
],
|
|
|
|
addUnits: function() {
|
|
return Element.addUnits.apply(Element, arguments);
|
|
},
|
|
|
|
/**
|
|
* Tries to focus the element. Any exceptions are caught and ignored.
|
|
* @param {Number} [defer] Milliseconds to defer the focus
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
focus: function(defer, /* private */ dom) {
|
|
var me = this;
|
|
|
|
dom = dom || me.dom;
|
|
try {
|
|
if (Number(defer)) {
|
|
Ext.defer(me.focus, defer, me, [null, dom]);
|
|
} else {
|
|
dom.focus();
|
|
}
|
|
} catch(e) {
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Tries to blur the element. Any exceptions are caught and ignored.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
blur: function() {
|
|
var me = this,
|
|
dom = me.dom;
|
|
// In IE, blurring the body can cause the browser window to hide.
|
|
// Blurring the body is redundant, so instead we just focus it
|
|
if (dom !== document.body) {
|
|
try {
|
|
dom.blur();
|
|
} catch(e) {
|
|
}
|
|
return me;
|
|
} else {
|
|
return me.focus(undefined, dom);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Tests various css rules/browsers to determine if this element uses a border box
|
|
* @return {Boolean}
|
|
*/
|
|
isBorderBox: function() {
|
|
var box = Ext.isBorderBox;
|
|
|
|
// IE6/7 force input elements to content-box even if border-box is set explicitly
|
|
if (box && Ext.isIE7m) {
|
|
box = !((this.dom.tagName || "").toLowerCase() in noBoxAdjust);
|
|
}
|
|
return box;
|
|
},
|
|
|
|
/**
|
|
* Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
|
|
* @param {Function} overFn The function to call when the mouse enters the Element.
|
|
* @param {Function} outFn The function to call when the mouse leaves the Element.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the functions are executed. Defaults
|
|
* to the Element's DOM element.
|
|
* @param {Object} [options] Options for the listener. See {@link Ext.util.Observable#addListener the
|
|
* options parameter}.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
hover: function(overFn, outFn, scope, options) {
|
|
var me = this;
|
|
me.on('mouseenter', overFn, scope || me.dom, options);
|
|
me.on('mouseleave', outFn, scope || me.dom, options);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the value of a namespaced attribute from the element's underlying DOM node.
|
|
* @param {String} namespace The namespace in which to look for the attribute
|
|
* @param {String} name The attribute name
|
|
* @return {String} The attribute value
|
|
*/
|
|
getAttributeNS: function(ns, name) {
|
|
return this.getAttribute(name, ns);
|
|
},
|
|
|
|
getAttribute: (Ext.isIE && !(Ext.isIE9p && DOC.documentMode >= 9)) ?
|
|
|
|
// Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera, Safari, Konqueror, and iCab,
|
|
// as a non-exhaustive list) return null when the specified attribute does not exist on the specified element.
|
|
// The DOM specification says that the correct return value in this case is actually the empty string, and some
|
|
// DOM implementations implement this behavior. The implementation of getAttribute in XUL (Gecko) actually follows
|
|
// the specification and returns an empty string. Consequently, you should use hasAttribute to check for an attribute's
|
|
// existence prior to calling getAttribute() if it is possible that the requested attribute does not exist on the specified element.
|
|
//
|
|
// https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
|
|
// http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614
|
|
|
|
function(name, ns) {
|
|
var d = this.dom,
|
|
type;
|
|
if (ns) {
|
|
type = typeof d[ns + ":" + name];
|
|
if (type != 'undefined' && type != 'unknown') {
|
|
return d[ns + ":" + name] || null;
|
|
}
|
|
return null;
|
|
}
|
|
if (name === "for") {
|
|
name = "htmlFor";
|
|
}
|
|
return d[name] || null;
|
|
} : function(name, ns) {
|
|
var d = this.dom;
|
|
if (ns) {
|
|
return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name);
|
|
}
|
|
return d.getAttribute(name) || d[name] || null;
|
|
},
|
|
|
|
/**
|
|
* When an element is moved around in the DOM, or is hidden using `display:none`, it loses layout, and therefore
|
|
* all scroll positions of all descendant elements are lost.
|
|
*
|
|
* This function caches them, and returns a function, which when run will restore the cached positions.
|
|
* In the following example, the Panel is moved from one Container to another which will cause it to lose all scroll positions:
|
|
*
|
|
* var restoreScroll = myPanel.el.cacheScrollValues();
|
|
* myOtherContainer.add(myPanel);
|
|
* restoreScroll();
|
|
*
|
|
* @return {Function} A function which will restore all descentant elements of this Element to their scroll
|
|
* positions recorded when this function was executed. Be aware that the returned function is a closure which has
|
|
* captured the scope of `cacheScrollValues`, so take care to derefence it as soon as not needed - if is it is a `var`
|
|
* it will drop out of scope, and the reference will be freed.
|
|
*/
|
|
cacheScrollValues: function() {
|
|
var me = this,
|
|
scrolledDescendants,
|
|
el, i,
|
|
scrollValues = [],
|
|
result = function() {
|
|
for (i = 0; i < scrolledDescendants.length; i++) {
|
|
el = scrolledDescendants[i];
|
|
el.scrollLeft = scrollValues[i][0];
|
|
el.scrollTop = scrollValues[i][1];
|
|
}
|
|
};
|
|
|
|
if (!Ext.DomQuery.pseudos.isScrolled) {
|
|
Ext.DomQuery.pseudos.isScrolled = isScrolled;
|
|
}
|
|
scrolledDescendants = me.query(':isScrolled');
|
|
for (i = 0; i < scrolledDescendants.length; i++) {
|
|
el = scrolledDescendants[i];
|
|
scrollValues[i] = [el.scrollLeft, el.scrollTop];
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} autoBoxAdjust
|
|
* True to automatically adjust width and height settings for box-model issues.
|
|
*/
|
|
autoBoxAdjust: true,
|
|
|
|
/**
|
|
* Checks whether the element is currently visible using both visibility and display properties.
|
|
* @param {Boolean} [deep=false] True to walk the dom and see if parent elements are hidden.
|
|
* If false, the function only checks the visibility of the element itself and it may return
|
|
* `true` even though a parent is not visible.
|
|
* @return {Boolean} `true` if the element is currently visible, else `false`
|
|
*/
|
|
isVisible : function(deep) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
stopNode = dom.ownerDocument.documentElement;
|
|
|
|
if (!visFly) {
|
|
visFly = new Element.Fly();
|
|
}
|
|
|
|
while (dom !== stopNode) {
|
|
// We're invisible if we hit a nonexistent parentNode or a document
|
|
// fragment or computed style visibility:hidden or display:none
|
|
if (!dom || dom.nodeType === 11 || (visFly.attach(dom)).isStyle(VISIBILITY, HIDDEN) || visFly.isStyle(DISPLAY, NONE)) {
|
|
return false;
|
|
}
|
|
// Quit now unless we are being asked to check parent nodes.
|
|
if (!deep) {
|
|
break;
|
|
}
|
|
dom = dom.parentNode;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Returns true if display is not "none"
|
|
* @return {Boolean}
|
|
*/
|
|
isDisplayed : function() {
|
|
return !this.isStyle(DISPLAY, NONE);
|
|
},
|
|
|
|
/**
|
|
* Convenience method for setVisibilityMode(Element.DISPLAY)
|
|
* @param {String} [display] What to set display to when visible
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
enableDisplayMode : function(display) {
|
|
var me = this;
|
|
|
|
me.setVisibilityMode(Element.DISPLAY);
|
|
|
|
if (!Ext.isEmpty(display)) {
|
|
(me.$cache || me.getCache()).data.originalDisplay = display;
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Puts a mask over this element to disable user interaction. Requires core.css.
|
|
* This method can only be applied to elements which accept child nodes.
|
|
* @param {String} [msg] A message to display in the mask
|
|
* @param {String} [msgCls] A css class to apply to the msg element
|
|
* @return {Ext.dom.Element} The mask element
|
|
*/
|
|
mask : function(msg, msgCls /* private - passed by AbstractComponent.mask to avoid the need to interrogate the DOM to get the height*/, elHeight) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
// In some cases, setExpression will exist but not be of a function type,
|
|
// so we check it explicitly here to stop IE throwing errors
|
|
setExpression = dom.style.setExpression,
|
|
data = (me.$cache || me.getCache()).data,
|
|
maskShimEl = data.maskShimEl,
|
|
maskEl = data.maskEl,
|
|
maskMsg = data.maskMsg,
|
|
widthExpression, heightExpression;
|
|
|
|
if (!(bodyRe.test(dom.tagName) && me.getStyle('position') == 'static')) {
|
|
me.addCls(XMASKEDRELATIVE);
|
|
}
|
|
|
|
// We always needs to recreate the mask since the DOM element may have been re-created
|
|
if (maskEl) {
|
|
maskEl.remove();
|
|
}
|
|
|
|
if (maskMsg) {
|
|
maskMsg.remove();
|
|
}
|
|
|
|
if (maskShimEl) {
|
|
maskShimEl.remove();
|
|
}
|
|
|
|
if (Ext.isIE6) {
|
|
maskShimEl = Ext.DomHelper.append(dom, {
|
|
tag: 'iframe',
|
|
cls : Ext.baseCSSPrefix + 'shim ' + Ext.baseCSSPrefix + 'mask-shim'
|
|
}, true);
|
|
data.maskShimEl = maskShimEl;
|
|
maskShimEl.setDisplayed(true);
|
|
}
|
|
|
|
Ext.DomHelper.append(dom, [{
|
|
cls : Ext.baseCSSPrefix + "mask",
|
|
style: 'top:0;left:0;'
|
|
}, {
|
|
cls : msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG,
|
|
cn : {
|
|
tag: 'div',
|
|
cls: Ext.baseCSSPrefix + 'mask-msg-inner',
|
|
cn: {
|
|
tag: 'div',
|
|
cls: Ext.baseCSSPrefix + 'mask-msg-text',
|
|
html: msg || ''
|
|
}
|
|
}
|
|
}]);
|
|
|
|
maskMsg = Ext.get(dom.lastChild);
|
|
maskEl = Ext.get(maskMsg.dom.previousSibling);
|
|
data.maskMsg = maskMsg;
|
|
data.maskEl = maskEl;
|
|
|
|
me.addCls(XMASKED);
|
|
maskEl.setDisplayed(true);
|
|
|
|
if (typeof msg == 'string') {
|
|
maskMsg.setDisplayed(true);
|
|
maskMsg.center(me);
|
|
} else {
|
|
maskMsg.setDisplayed(false);
|
|
}
|
|
// NOTE: CSS expressions are resource intensive and to be used only as a last resort
|
|
// These expressions are removed as soon as they are no longer necessary - in the unmask method.
|
|
// In normal use cases an element will be masked for a limited period of time.
|
|
// Fix for https://sencha.jira.com/browse/EXTJSIV-19.
|
|
// IE6 strict mode and IE6-9 quirks mode takes off left+right padding when calculating width!
|
|
if (!Ext.supports.IncludePaddingInWidthCalculation && setExpression) {
|
|
// In an occasional case setExpression will throw an exception
|
|
try {
|
|
maskEl.dom.style.setExpression('width', 'this.parentNode.clientWidth + "px"');
|
|
widthExpression = 'this.parentNode.clientWidth + "px"';
|
|
if (maskShimEl) {
|
|
maskShimEl.dom.style.setExpression('width', widthExpression);
|
|
}
|
|
maskEl.dom.style.setExpression('width', widthExpression);
|
|
} catch (e) {}
|
|
}
|
|
|
|
// Some versions and modes of IE subtract top+bottom padding when calculating height.
|
|
// Different versions from those which make the same error for width!
|
|
if (!Ext.supports.IncludePaddingInHeightCalculation && setExpression) {
|
|
// In an occasional case setExpression will throw an exception
|
|
try {
|
|
heightExpression = 'this.parentNode.' + (dom == DOC.body ? 'scrollHeight' : 'offsetHeight') + ' + "px"';
|
|
if (maskShimEl) {
|
|
maskShimEl.dom.style.setExpression('height', heightExpression);
|
|
}
|
|
maskEl.dom.style.setExpression('height', heightExpression);
|
|
} catch (e) {}
|
|
}
|
|
// ie will not expand full height automatically
|
|
else if (Ext.isIE9m && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
|
|
if (maskShimEl) {
|
|
maskShimEl.setSize(undefined, elHeight || me.getHeight());
|
|
}
|
|
maskEl.setSize(undefined, elHeight || me.getHeight());
|
|
}
|
|
return maskEl;
|
|
},
|
|
|
|
/**
|
|
* Hides a previously applied mask.
|
|
*/
|
|
unmask : function() {
|
|
var me = this,
|
|
data = (me.$cache || me.getCache()).data,
|
|
maskEl = data.maskEl,
|
|
maskShimEl = data.maskShimEl,
|
|
maskMsg = data.maskMsg,
|
|
style;
|
|
|
|
if (maskEl) {
|
|
style = maskEl.dom.style;
|
|
// Remove resource-intensive CSS expressions as soon as they are not required.
|
|
if (style.clearExpression) {
|
|
style.clearExpression('width');
|
|
style.clearExpression('height');
|
|
}
|
|
|
|
if (maskEl) {
|
|
maskEl.remove();
|
|
delete data.maskEl;
|
|
}
|
|
|
|
if (maskMsg) {
|
|
maskMsg.remove();
|
|
delete data.maskMsg;
|
|
}
|
|
|
|
me.removeCls([XMASKED, XMASKEDRELATIVE]);
|
|
|
|
if (maskShimEl) {
|
|
style = maskShimEl.dom.style;
|
|
// Remove resource-intensive CSS expressions as soon as they are not required.
|
|
if (style.clearExpression) {
|
|
style.clearExpression('width');
|
|
style.clearExpression('height');
|
|
}
|
|
|
|
maskShimEl.remove();
|
|
delete data.maskShimEl;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns true if this element is masked. Also re-centers any displayed message within the mask.
|
|
* @return {Boolean}
|
|
*/
|
|
isMasked : function() {
|
|
var me = this,
|
|
data = (me.$cache || me.getCache()).data,
|
|
maskEl = data.maskEl,
|
|
maskMsg = data.maskMsg,
|
|
hasMask = false;
|
|
|
|
if (maskEl && maskEl.isVisible()) {
|
|
if (maskMsg) {
|
|
maskMsg.center(me);
|
|
}
|
|
hasMask = true;
|
|
}
|
|
return hasMask;
|
|
},
|
|
|
|
/**
|
|
* Creates an iframe shim for this element to keep selects and other windowed objects from
|
|
* showing through.
|
|
* @return {Ext.dom.Element} The new shim element
|
|
*/
|
|
createShim : function() {
|
|
var el = DOC.createElement('iframe'),
|
|
shim;
|
|
|
|
el.frameBorder = '0';
|
|
el.className = Ext.baseCSSPrefix + 'shim';
|
|
el.src = Ext.SSL_SECURE_URL;
|
|
shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
|
|
shim.autoBoxAdjust = false;
|
|
return shim;
|
|
},
|
|
|
|
/**
|
|
* Convenience method for constructing a KeyMap
|
|
* @param {String/Number/Number[]/Object} key Either a string with the keys to listen for, the numeric key code,
|
|
* array of key codes or an object with the following options:
|
|
* @param {Number/Array} key.key
|
|
* @param {Boolean} key.shift
|
|
* @param {Boolean} key.ctrl
|
|
* @param {Boolean} key.alt
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope (`this` reference) in which the specified function is executed. Defaults to this Element.
|
|
* @return {Ext.util.KeyMap} The KeyMap created
|
|
*/
|
|
addKeyListener : function(key, fn, scope){
|
|
var config;
|
|
if(typeof key != 'object' || Ext.isArray(key)){
|
|
config = {
|
|
target: this,
|
|
key: key,
|
|
fn: fn,
|
|
scope: scope
|
|
};
|
|
}else{
|
|
config = {
|
|
target: this,
|
|
key : key.key,
|
|
shift : key.shift,
|
|
ctrl : key.ctrl,
|
|
alt : key.alt,
|
|
fn: fn,
|
|
scope: scope
|
|
};
|
|
}
|
|
return new Ext.util.KeyMap(config);
|
|
},
|
|
|
|
/**
|
|
* Creates a KeyMap for this element
|
|
* @param {Object} config The KeyMap config. See {@link Ext.util.KeyMap} for more details
|
|
* @return {Ext.util.KeyMap} The KeyMap created
|
|
*/
|
|
addKeyMap : function(config) {
|
|
return new Ext.util.KeyMap(Ext.apply({
|
|
target: this
|
|
}, config));
|
|
},
|
|
|
|
// Mouse events
|
|
/**
|
|
* @event click
|
|
* Fires when a mouse click is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event contextmenu
|
|
* Fires when a right click is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event dblclick
|
|
* Fires when a mouse double click is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mousedown
|
|
* Fires when a mousedown is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mouseup
|
|
* Fires when a mouseup is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mouseover
|
|
* Fires when a mouseover is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mousemove
|
|
* Fires when a mousemove is detected with the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mouseout
|
|
* Fires when a mouseout is detected with the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mouseenter
|
|
* Fires when the mouse enters the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event mouseleave
|
|
* Fires when the mouse leaves the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
|
|
// Keyboard events
|
|
/**
|
|
* @event keypress
|
|
* Fires when a keypress is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event keydown
|
|
* Fires when a keydown is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event keyup
|
|
* Fires when a keyup is detected within the element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
|
|
// HTML frame/object events
|
|
/**
|
|
* @event load
|
|
* Fires when the user agent finishes loading all content within the element. Only supported by window, frames,
|
|
* objects and images.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event unload
|
|
* Fires when the user agent removes all content from a window or frame. For elements, it fires when the target
|
|
* element or any of its content has been removed.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event abort
|
|
* Fires when an object/image is stopped from loading before completely loaded.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event error
|
|
* Fires when an object/image/frame cannot be loaded properly.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event resize
|
|
* Fires when a document view is resized.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event scroll
|
|
* Fires when a document view is scrolled.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
|
|
// Form events
|
|
/**
|
|
* @event select
|
|
* Fires when a user selects some text in a text field, including input and textarea.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event change
|
|
* Fires when a control loses the input focus and its value has been modified since gaining focus.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event submit
|
|
* Fires when a form is submitted.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event reset
|
|
* Fires when a form is reset.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event focus
|
|
* Fires when an element receives focus either via the pointing device or by tab navigation.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event blur
|
|
* Fires when an element loses focus either via the pointing device or by tabbing navigation.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
|
|
// User Interface events
|
|
/**
|
|
* @event DOMFocusIn
|
|
* Where supported. Similar to HTML focus event, but can be applied to any focusable element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMFocusOut
|
|
* Where supported. Similar to HTML blur event, but can be applied to any focusable element.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMActivate
|
|
* Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
|
|
// DOM Mutation events
|
|
/**
|
|
* @event DOMSubtreeModified
|
|
* Where supported. Fires when the subtree is modified.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMNodeInserted
|
|
* Where supported. Fires when a node has been added as a child of another node.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMNodeRemoved
|
|
* Where supported. Fires when a descendant node of the element is removed.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMNodeRemovedFromDocument
|
|
* Where supported. Fires when a node is being removed from a document.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMNodeInsertedIntoDocument
|
|
* Where supported. Fires when a node is being inserted into a document.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMAttrModified
|
|
* Where supported. Fires when an attribute has been modified.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
/**
|
|
* @event DOMCharacterDataModified
|
|
* Where supported. Fires when the character data has been modified.
|
|
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
|
|
* @param {HTMLElement} t The target of the event.
|
|
*/
|
|
|
|
/**
|
|
* Appends an event handler to this element.
|
|
*
|
|
* @param {String} eventName The name of event to handle.
|
|
*
|
|
* @param {Function} fn The handler function the event invokes. This function is passed the following parameters:
|
|
*
|
|
* - **evt** : EventObject
|
|
*
|
|
* The {@link Ext.EventObject EventObject} describing the event.
|
|
*
|
|
* - **el** : HtmlElement
|
|
*
|
|
* The DOM element which was the target of the event. Note that this may be filtered by using the delegate option.
|
|
*
|
|
* - **o** : Object
|
|
*
|
|
* The options object from the call that setup the listener.
|
|
*
|
|
* @param {Object} scope (optional) The scope (**this** reference) in which the handler function is executed. **If
|
|
* omitted, defaults to this Element.**
|
|
*
|
|
* @param {Object} options (optional) An object containing handler configuration properties. This may contain any of
|
|
* the following properties:
|
|
*
|
|
* - **scope** Object :
|
|
*
|
|
* The scope (**this** reference) in which the handler function is executed. **If omitted, defaults to this
|
|
* Element.**
|
|
*
|
|
* - **delegate** String:
|
|
*
|
|
* A simple selector to filter the target or look for a descendant of the target. See below for additional details.
|
|
*
|
|
* - **stopEvent** Boolean:
|
|
*
|
|
* True to stop the event. That is stop propagation, and prevent the default action.
|
|
*
|
|
* - **preventDefault** Boolean:
|
|
*
|
|
* True to prevent the default action
|
|
*
|
|
* - **stopPropagation** Boolean:
|
|
*
|
|
* True to prevent event propagation
|
|
*
|
|
* - **normalized** Boolean:
|
|
*
|
|
* False to pass a browser event to the handler function instead of an Ext.EventObject
|
|
*
|
|
* - **target** Ext.dom.Element:
|
|
*
|
|
* Only call the handler if the event was fired on the target Element, _not_ if the event was bubbled up from a
|
|
* child node.
|
|
*
|
|
* - **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.
|
|
*
|
|
* **Combining Options**
|
|
*
|
|
* Using the options argument, it is possible to combine different types of listeners:
|
|
*
|
|
* A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the options
|
|
* object. The options object is available as the third parameter in the handler function.
|
|
*
|
|
* Code:
|
|
*
|
|
* el.on('click', this.onClick, this, {
|
|
* single: true,
|
|
* delay: 100,
|
|
* stopEvent : true,
|
|
* forumId: 4
|
|
* });
|
|
*
|
|
* **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 handlers.
|
|
*
|
|
* Code:
|
|
*
|
|
* el.on({
|
|
* 'click' : {
|
|
* fn: this.onClick,
|
|
* scope: this,
|
|
* delay: 100
|
|
* },
|
|
* 'mouseover' : {
|
|
* fn: this.onMouseOver,
|
|
* scope: this
|
|
* },
|
|
* 'mouseout' : {
|
|
* fn: this.onMouseOut,
|
|
* scope: this
|
|
* }
|
|
* });
|
|
*
|
|
* Or a shorthand syntax:
|
|
*
|
|
* Code:
|
|
*
|
|
* el.on({
|
|
* 'click' : this.onClick,
|
|
* 'mouseover' : this.onMouseOver,
|
|
* 'mouseout' : this.onMouseOut,
|
|
* scope: this
|
|
* });
|
|
*
|
|
* **delegate**
|
|
*
|
|
* This is a configuration option that you can pass along when registering a handler for an event to assist with
|
|
* event delegation. Event delegation is a technique that is used to reduce memory consumption and prevent exposure
|
|
* to memory-leaks. By registering an event for a container element as opposed to each element within a container.
|
|
* By setting this configuration option to a simple selector, the target element will be filtered to look for a
|
|
* descendant of the target. For example:
|
|
*
|
|
* // using this markup:
|
|
* <div id='elId'>
|
|
* <p id='p1'>paragraph one</p>
|
|
* <p id='p2' class='clickable'>paragraph two</p>
|
|
* <p id='p3'>paragraph three</p>
|
|
* </div>
|
|
*
|
|
* // utilize event delegation to registering just one handler on the container element:
|
|
* el = Ext.get('elId');
|
|
* el.on(
|
|
* 'click',
|
|
* function(e,t) {
|
|
* // handle click
|
|
* console.info(t.id); // 'p2'
|
|
* },
|
|
* this,
|
|
* {
|
|
* // filter the target element to be a descendant with the class 'clickable'
|
|
* delegate: '.clickable'
|
|
* }
|
|
* );
|
|
*
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
on: function(eventName, fn, scope, options) {
|
|
Ext.EventManager.on(this, eventName, fn, scope || this, options);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes an event handler from this element.
|
|
*
|
|
* **Note**: if a *scope* was explicitly specified when {@link #on adding} the listener,
|
|
* the same scope must be specified here.
|
|
*
|
|
* Example:
|
|
*
|
|
* el.un('click', this.handlerFn);
|
|
* // or
|
|
* el.removeListener('click', this.handlerFn);
|
|
*
|
|
* @param {String} eventName The name of the event from which to remove the handler.
|
|
* @param {Function} fn The handler function to remove. **This must be a reference to the function passed into the
|
|
* {@link #on} call.**
|
|
* @param {Object} scope If a scope (**this** reference) was specified when the listener was added, then this must
|
|
* refer to the same object.
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
un: function(eventName, fn, scope) {
|
|
Ext.EventManager.un(this, eventName, fn, scope || this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes all previous added listeners from this element
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
removeAllListeners: function() {
|
|
Ext.EventManager.removeAll(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Recursively removes all previous added listeners from this element and its children
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
purgeAllListeners: function() {
|
|
Ext.EventManager.purgeElement(this);
|
|
return this;
|
|
},
|
|
|
|
select: function(selector) {
|
|
return Element.select(selector, false, this.dom);
|
|
}
|
|
};
|
|
}, function() {
|
|
|
|
var DOC = document,
|
|
EC = Ext.cache,
|
|
Element = this,
|
|
AbstractElement = Ext.dom.AbstractElement,
|
|
focusRe = /^a|button|embed|iframe|input|object|select|textarea$/i,
|
|
nonSpaceRe = /\S/,
|
|
scriptTagRe = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
|
|
replaceScriptTagRe = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig,
|
|
srcRe = /\ssrc=([\'\"])(.*?)\1/i,
|
|
typeRe = /\stype=([\'\"])(.*?)\1/i,
|
|
useDocForId = !Ext.isIE8m,
|
|
internalFly;
|
|
|
|
Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
|
|
//</!if>
|
|
|
|
// private
|
|
// Garbage collection - uncache elements/purge listeners on orphaned elements
|
|
// so we don't hold a reference and cause the browser to retain them
|
|
function garbageCollect() {
|
|
if (!Ext.enableGarbageCollector) {
|
|
clearInterval(Element.collectorThreadId);
|
|
} else {
|
|
var eid,
|
|
d,
|
|
o,
|
|
t;
|
|
|
|
for (eid in EC) {
|
|
if (!EC.hasOwnProperty(eid)) {
|
|
continue;
|
|
}
|
|
|
|
o = EC[eid];
|
|
|
|
// Skip document and window elements
|
|
if (o.skipGarbageCollection) {
|
|
continue;
|
|
}
|
|
|
|
d = o.dom;
|
|
|
|
|
|
// -------------------------------------------------------
|
|
// Determining what is garbage:
|
|
// -------------------------------------------------------
|
|
// !d.parentNode
|
|
// no parentNode == direct orphan, definitely garbage
|
|
// -------------------------------------------------------
|
|
// !d.offsetParent && !document.getElementById(eid)
|
|
// display none elements have no offsetParent so we will
|
|
// also try to look it up by it's id. However, check
|
|
// offsetParent first so we don't do unneeded lookups.
|
|
// This enables collection of elements that are not orphans
|
|
// directly, but somewhere up the line they have an orphan
|
|
// parent.
|
|
// -------------------------------------------------------
|
|
if (d && (!d.parentNode || (!d.offsetParent && !Ext.getElementById(eid)))) {
|
|
if (Ext.enableListenerCollection) {
|
|
Ext.EventManager.removeAll(d);
|
|
}
|
|
delete EC[eid];
|
|
}
|
|
}
|
|
// Cleanup IE Object leaks
|
|
if (Ext.isIE) {
|
|
t = {};
|
|
for (eid in EC) {
|
|
if (!EC.hasOwnProperty(eid)) {
|
|
continue;
|
|
}
|
|
t[eid] = EC[eid];
|
|
}
|
|
EC = Ext.cache = t;
|
|
}
|
|
}
|
|
}
|
|
|
|
Element.collectorThreadId = setInterval(garbageCollect, 30000);
|
|
|
|
//Stuff from Element-more.js
|
|
Element.addMethods({
|
|
|
|
/**
|
|
* Monitors this Element for the mouse leaving. Calls the function after the specified delay only if
|
|
* the mouse was not moved back into the Element within the delay. If the mouse *was* moved
|
|
* back in, the function is not called.
|
|
* @param {Number} delay The delay **in milliseconds** to wait for possible mouse re-entry before calling the handler function.
|
|
* @param {Function} handler The function to call if the mouse remains outside of this Element for the specified time.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function executes. Defaults to this Element.
|
|
* @return {Object} The listeners object which was added to this element so that monitoring can be stopped. Example usage:
|
|
*
|
|
* // Hide the menu if the mouse moves out for 250ms or more
|
|
* this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);
|
|
*
|
|
* ...
|
|
* // Remove mouseleave monitor on menu destroy
|
|
* this.menuEl.un(this.mouseLeaveMonitor);
|
|
*
|
|
*/
|
|
monitorMouseLeave: function(delay, handler, scope) {
|
|
var me = this,
|
|
timer,
|
|
listeners = {
|
|
mouseleave: function(e) {
|
|
timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay);
|
|
},
|
|
mouseenter: function() {
|
|
clearTimeout(timer);
|
|
},
|
|
freezeEvent: true
|
|
};
|
|
|
|
me.on(listeners);
|
|
return listeners;
|
|
},
|
|
|
|
/**
|
|
* Stops the specified event(s) from bubbling and optionally prevents the default action
|
|
* @param {String/String[]} eventName an event / array of events to stop from bubbling
|
|
* @param {Boolean} [preventDefault] true to prevent the default action too
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
swallowEvent : function(eventName, preventDefault) {
|
|
var me = this,
|
|
e, eLen,
|
|
fn = function(e) {
|
|
e.stopPropagation();
|
|
if (preventDefault) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
if (Ext.isArray(eventName)) {
|
|
eLen = eventName.length;
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
me.on(eventName[e], fn);
|
|
}
|
|
|
|
return me;
|
|
}
|
|
me.on(eventName, fn);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Create an event handler on this element such that when the event fires and is handled by this element,
|
|
* it will be relayed to another object (i.e., fired again as if it originated from that object instead).
|
|
* @param {String} eventName The type of event to relay
|
|
* @param {Object} observable Any object that extends {@link Ext.util.Observable} that will provide the context
|
|
* for firing the relayed event
|
|
*/
|
|
relayEvent : function(eventName, observable) {
|
|
this.on(eventName, function(e) {
|
|
observable.fireEvent(eventName, e);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.
|
|
* @param {Boolean} [forceReclean=false] By default the element keeps track if it has been cleaned already
|
|
* so you can call this over and over. However, if you update the element and need to force a reclean, you
|
|
* can pass true.
|
|
*/
|
|
clean : function(forceReclean) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
data = (me.$cache || me.getCache()).data,
|
|
n = dom.firstChild,
|
|
ni = -1,
|
|
nx;
|
|
|
|
if (data.isCleaned && forceReclean !== true) {
|
|
return me;
|
|
}
|
|
|
|
while (n) {
|
|
nx = n.nextSibling;
|
|
if (n.nodeType == 3) {
|
|
// Remove empty/whitespace text nodes
|
|
if (!(nonSpaceRe.test(n.nodeValue))) {
|
|
dom.removeChild(n);
|
|
// Combine adjacent text nodes
|
|
} else if (nx && nx.nodeType == 3) {
|
|
n.appendData(Ext.String.trim(nx.data));
|
|
dom.removeChild(nx);
|
|
nx = n.nextSibling;
|
|
n.nodeIndex = ++ni;
|
|
}
|
|
} else {
|
|
// Recursively clean
|
|
internalFly.attach(n).clean();
|
|
n.nodeIndex = ++ni;
|
|
}
|
|
n = nx;
|
|
}
|
|
|
|
data.isCleaned = true;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Direct access to the Ext.ElementLoader {@link Ext.ElementLoader#method-load} method. The method takes the same object
|
|
* parameter as {@link Ext.ElementLoader#method-load}
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
load : function(options) {
|
|
this.getLoader().load(options);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Gets this element's {@link Ext.ElementLoader ElementLoader}
|
|
* @return {Ext.ElementLoader} The loader
|
|
*/
|
|
getLoader : function() {
|
|
var me = this,
|
|
data = (me.$cache || me.getCache()).data,
|
|
loader = data.loader;
|
|
|
|
if (!loader) {
|
|
data.loader = loader = new Ext.ElementLoader({
|
|
target: me
|
|
});
|
|
}
|
|
return loader;
|
|
},
|
|
|
|
/**
|
|
* @private.
|
|
* Currently used for updating grid cells without modifying DOM structure
|
|
*
|
|
* Synchronizes content of this Element with the content of the passed element.
|
|
*
|
|
* Style and CSS class are copied from source into this Element, and contents are synched
|
|
* recursively. If a child node is a text node, the textual data is copied.
|
|
*/
|
|
syncContent: function(source) {
|
|
source = Ext.getDom(source);
|
|
var sourceNodes = source.childNodes,
|
|
sourceLen = sourceNodes.length,
|
|
dest = this.dom,
|
|
destNodes = dest.childNodes,
|
|
destLen = destNodes.length,
|
|
i, destNode, sourceNode,
|
|
nodeType, newAttrs, attLen, attName;
|
|
|
|
// Copy top node's attributes across. Use IE-specific method if possible.
|
|
// In IE10, there is a problem where the className will not get updated
|
|
// in the view, even though the className on the dom element is correct.
|
|
// See EXTJSIV-9462
|
|
if (Ext.isIE9m && dest.mergeAttributes) {
|
|
dest.mergeAttributes(source, true);
|
|
|
|
// EXTJSIV-6803. IE's mergeAttributes appears not to make the source's "src" value available until after the image is ready.
|
|
// So programatically copy any src attribute.
|
|
dest.src = source.src;
|
|
} else {
|
|
newAttrs = source.attributes;
|
|
attLen = newAttrs.length;
|
|
for (i = 0; i < attLen; i++) {
|
|
attName = newAttrs[i].name;
|
|
if (attName !== 'id') {
|
|
dest.setAttribute(attName, newAttrs[i].value);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If the number of child nodes does not match, fall back to replacing innerHTML
|
|
if (sourceLen !== destLen) {
|
|
dest.innerHTML = source.innerHTML;
|
|
return;
|
|
}
|
|
|
|
// Loop through source nodes.
|
|
// If there are fewer, we must remove excess
|
|
for (i = 0; i < sourceLen; i++) {
|
|
sourceNode = sourceNodes[i];
|
|
destNode = destNodes[i];
|
|
nodeType = sourceNode.nodeType;
|
|
|
|
// If node structure is out of sync, just drop innerHTML in and return
|
|
if (nodeType !== destNode.nodeType || (nodeType === 1 && sourceNode.tagName !== destNode.tagName)) {
|
|
dest.innerHTML = source.innerHTML;
|
|
return;
|
|
}
|
|
|
|
// Update text node
|
|
if (nodeType === 3) {
|
|
destNode.data = sourceNode.data;
|
|
}
|
|
// Sync element content
|
|
else {
|
|
if (sourceNode.id && destNode.id !== sourceNode.id) {
|
|
destNode.id = sourceNode.id;
|
|
}
|
|
destNode.style.cssText = sourceNode.style.cssText;
|
|
destNode.className = sourceNode.className;
|
|
internalFly.attach(destNode).syncContent(sourceNode);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates the innerHTML of this element, optionally searching for and processing scripts.
|
|
* @param {String} html The new HTML
|
|
* @param {Boolean} [loadScripts] True to look for and process scripts (defaults to false)
|
|
* @param {Function} [callback] For async script loading you can be notified when the update completes
|
|
* @return {Ext.dom.Element} this
|
|
*/
|
|
update : function(html, loadScripts, callback) {
|
|
var me = this,
|
|
id,
|
|
dom,
|
|
interval;
|
|
|
|
if (!me.dom) {
|
|
return me;
|
|
}
|
|
html = html || '';
|
|
dom = me.dom;
|
|
|
|
if (loadScripts !== true) {
|
|
dom.innerHTML = html;
|
|
Ext.callback(callback, me);
|
|
return me;
|
|
}
|
|
|
|
id = Ext.id();
|
|
html += '<span id="' + id + '"></span>';
|
|
|
|
interval = setInterval(function() {
|
|
var hd,
|
|
match,
|
|
attrs,
|
|
srcMatch,
|
|
typeMatch,
|
|
el,
|
|
s;
|
|
if (!(el = DOC.getElementById(id))) {
|
|
return false;
|
|
}
|
|
clearInterval(interval);
|
|
Ext.removeNode(el);
|
|
hd = Ext.getHead().dom;
|
|
|
|
while ((match = scriptTagRe.exec(html))) {
|
|
attrs = match[1];
|
|
srcMatch = attrs ? attrs.match(srcRe) : false;
|
|
if (srcMatch && srcMatch[2]) {
|
|
s = DOC.createElement("script");
|
|
s.src = srcMatch[2];
|
|
typeMatch = attrs.match(typeRe);
|
|
if (typeMatch && typeMatch[2]) {
|
|
s.type = typeMatch[2];
|
|
}
|
|
hd.appendChild(s);
|
|
} else if (match[2] && match[2].length > 0) {
|
|
if (window.execScript) {
|
|
window.execScript(match[2]);
|
|
} else {
|
|
window.eval(match[2]);
|
|
}
|
|
}
|
|
}
|
|
Ext.callback(callback, me);
|
|
}, 20);
|
|
dom.innerHTML = html.replace(replaceScriptTagRe, '');
|
|
return me;
|
|
},
|
|
|
|
// inherit docs, overridden so we can add removeAnchor
|
|
removeAllListeners : function() {
|
|
this.removeAnchor();
|
|
Ext.EventManager.removeAll(this.dom);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Creates a proxy element of this element
|
|
* @param {String/Object} config The class name of the proxy element or a DomHelper config object
|
|
* @param {String/HTMLElement} [renderTo] The element or element id to render the proxy to. Defaults to: document.body.
|
|
* @param {Boolean} [matchBox=false] True to align and size the proxy to this element now.
|
|
* @return {Ext.dom.Element} The new proxy element
|
|
*/
|
|
createProxy : function(config, renderTo, matchBox) {
|
|
config = (typeof config == 'object') ? config : {tag : "div", cls: config};
|
|
|
|
var me = this,
|
|
proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
|
|
Ext.DomHelper.insertBefore(me.dom, config, true);
|
|
|
|
proxy.setVisibilityMode(Element.DISPLAY);
|
|
proxy.hide();
|
|
if (matchBox && me.setBox && me.getBox) { // check to make sure Element.position.js is loaded
|
|
proxy.setBox(me.getBox());
|
|
}
|
|
return proxy;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this element needs an explicit tabIndex to make it focusable. Input fields, text areas, buttons
|
|
* anchors elements **with an href** etc do not need a tabIndex, but structural elements do.
|
|
*/
|
|
needsTabIndex: function() {
|
|
if (this.dom) {
|
|
if ((this.dom.nodeName === 'a') && (!this.dom.href)) {
|
|
return true;
|
|
}
|
|
return !focusRe.test(this.dom.nodeName);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks whether this element can be focused.
|
|
* @return {Boolean} True if the element is focusable
|
|
*/
|
|
isFocusable: function (/* private - assume it's the focusEl of a Component */ asFocusEl) {
|
|
var dom = this.dom,
|
|
tabIndexAttr = dom.getAttributeNode('tabIndex'),
|
|
tabIndex,
|
|
nodeName = dom.nodeName,
|
|
canFocus = false;
|
|
|
|
// Certain browsers always report zero in the absence of the tabIndex attribute.
|
|
// Testing the specified property (Standards: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-862529273)
|
|
// Should filter out these cases.
|
|
// The exceptions are IE6 to IE8. In these browsers all elements will yield a tabIndex
|
|
// and therefore all elements will appear to be focusable.
|
|
// This adversely affects modal Floating components.
|
|
// These listen for the TAB key, and then test whether the event target === last focusable
|
|
// or first focusable element, and forcibly to a circular navigation.
|
|
// We cannot know the true first or last focusable element, so this problem still exists for IE6,7,8
|
|
// See Ext.util.Floating
|
|
if (tabIndexAttr && tabIndexAttr.specified) {
|
|
tabIndex = tabIndexAttr.value;
|
|
}
|
|
if (dom && !dom.disabled) {
|
|
// A tabIndex of -1 means it has to be programatically focused, so that needs FocusManager,
|
|
// and it has to be the focus holding el of a Component within the Component tree.
|
|
if (tabIndex == -1) { // note that the value is a string
|
|
canFocus = Ext.FocusManager && Ext.FocusManager.enabled && asFocusEl;
|
|
}
|
|
else {
|
|
// See if it's a naturally focusable element
|
|
if (focusRe.test(nodeName)) {
|
|
if ((nodeName !== 'a') || dom.href) {
|
|
canFocus = true;
|
|
}
|
|
}
|
|
// A non naturally focusable element is in the navigation flow if it has a positive numeric tab index.
|
|
else {
|
|
canFocus = tabIndex != null && tabIndex >= 0;
|
|
}
|
|
}
|
|
canFocus = canFocus && this.isVisible(true);
|
|
}
|
|
return canFocus;
|
|
}
|
|
});
|
|
|
|
if (Ext.isIE) {
|
|
Element.prototype.getById = function (id, asDom) {
|
|
var dom = this.dom,
|
|
cacheItem, el, ret;
|
|
|
|
if (dom) {
|
|
// for normal elements getElementById is the best solution, but if the el is
|
|
// not part of the document.body, we need to use all[]
|
|
el = (useDocForId && DOC.getElementById(id)) || dom.all[id];
|
|
if (el) {
|
|
if (asDom) {
|
|
ret = el;
|
|
} else {
|
|
// calling Element.get here is a real hit (2x slower) because it has to
|
|
// redetermine that we are giving it a dom el.
|
|
cacheItem = EC[id];
|
|
if (cacheItem && cacheItem.el) {
|
|
ret = Ext.updateCacheEntry(cacheItem, el).el;
|
|
} else {
|
|
ret = new Element(el);
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
}
|
|
|
|
return asDom ? Ext.getDom(id) : Element.get(id);
|
|
};
|
|
}
|
|
|
|
Element.createAlias({
|
|
/**
|
|
* @method
|
|
* @inheritdoc Ext.dom.Element#on
|
|
* Shorthand for {@link #on}.
|
|
*/
|
|
addListener: 'on',
|
|
/**
|
|
* @method
|
|
* @inheritdoc Ext.dom.Element#un
|
|
* Shorthand for {@link #un}.
|
|
*/
|
|
removeListener: 'un',
|
|
/**
|
|
* @method
|
|
* @inheritdoc Ext.dom.Element#removeAllListeners
|
|
* Alias for {@link #removeAllListeners}.
|
|
*/
|
|
clearListeners: 'removeAllListeners',
|
|
/**
|
|
* @method
|
|
* @inheritdoc Ext.dom.Element#isFocusable
|
|
* Alias for {@link #isFocusable}.
|
|
*/
|
|
focusable: 'isFocusable'
|
|
});
|
|
|
|
Element.Fly = AbstractElement.Fly = new Ext.Class({
|
|
extend: Element,
|
|
|
|
isFly: true,
|
|
|
|
constructor: function(dom) {
|
|
this.dom = dom;
|
|
// set an "el" property that references "this". This allows
|
|
// Ext.util.Positionable methods to operate on this.el.dom since it
|
|
// gets mixed into both Element and Component
|
|
this.el = this;
|
|
},
|
|
|
|
attach: AbstractElement.Fly.prototype.attach
|
|
});
|
|
|
|
internalFly = new Element.Fly();
|
|
|
|
if (Ext.isIE) {
|
|
Ext.getElementById = function (id) {
|
|
var el = DOC.getElementById(id),
|
|
detachedBodyEl;
|
|
|
|
if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {
|
|
el = detachedBodyEl.dom.all[id];
|
|
}
|
|
|
|
return el;
|
|
};
|
|
} else if (!DOC.querySelector) {
|
|
Ext.getDetachedBody = Ext.getBody;
|
|
|
|
Ext.getElementById = function (id) {
|
|
return DOC.getElementById(id);
|
|
};
|
|
}
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
* This class encapsulates a *collection* of DOM elements, providing methods to filter members, or to perform collective
|
|
* actions upon the whole set.
|
|
*
|
|
* Although they are not listed, this class supports all of the methods of {@link Ext.dom.Element} and
|
|
* {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.
|
|
*
|
|
* Example:
|
|
*
|
|
* var els = Ext.select("#some-el div.some-class");
|
|
* // or select directly from an existing element
|
|
* var el = Ext.get('some-el');
|
|
* el.select('div.some-class');
|
|
*
|
|
* els.setWidth(100); // all elements become 100 width
|
|
* els.hide(true); // all elements fade out and hide
|
|
* // or
|
|
* els.setWidth(100).hide(true);
|
|
*/
|
|
Ext.define('Ext.dom.CompositeElementLite', {
|
|
alternateClassName: 'Ext.CompositeElementLite',
|
|
|
|
|
|
|
|
statics: {
|
|
/**
|
|
* @private
|
|
* Copies all of the functions from Ext.dom.Element's prototype onto CompositeElementLite's prototype.
|
|
* This is called twice - once immediately below, and once again after additional Ext.dom.Element
|
|
* are added in Ext JS
|
|
*/
|
|
importElementMethods: function() {
|
|
var name,
|
|
elementPrototype = Ext.dom.Element.prototype,
|
|
prototype = this.prototype;
|
|
|
|
for (name in elementPrototype) {
|
|
if (typeof elementPrototype[name] == 'function'){
|
|
(function(key) {
|
|
prototype[key] = prototype[key] || function() {
|
|
return this.invoke(key, arguments);
|
|
};
|
|
}).call(prototype, name);
|
|
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
constructor: function(elements, root) {
|
|
/**
|
|
* @property {HTMLElement[]} elements
|
|
* The Array of DOM elements which this CompositeElement encapsulates.
|
|
*
|
|
* This will not *usually* be accessed in developers' code, but developers wishing to augment the capabilities
|
|
* of the CompositeElementLite class may use it when adding methods to the class.
|
|
*
|
|
* For example to add the `nextAll` method to the class to **add** all following siblings of selected elements,
|
|
* the code would be
|
|
*
|
|
* Ext.override(Ext.dom.CompositeElementLite, {
|
|
* nextAll: function() {
|
|
* var elements = this.elements, i, l = elements.length, n, r = [], ri = -1;
|
|
*
|
|
* // Loop through all elements in this Composite, accumulating
|
|
* // an Array of all siblings.
|
|
* for (i = 0; i < l; i++) {
|
|
* for (n = elements[i].nextSibling; n; n = n.nextSibling) {
|
|
* r[++ri] = n;
|
|
* }
|
|
* }
|
|
*
|
|
* // Add all found siblings to this Composite
|
|
* return this.add(r);
|
|
* }
|
|
* });
|
|
*
|
|
* @readonly
|
|
*/
|
|
this.elements = [];
|
|
this.add(elements, root);
|
|
this.el = new Ext.dom.AbstractElement.Fly();
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} isComposite
|
|
* `true` in this class to identify an object as an instantiated CompositeElement, or subclass thereof.
|
|
*/
|
|
isComposite: true,
|
|
|
|
// private
|
|
getElement: function(el) {
|
|
// Set the shared flyweight dom property to the current element
|
|
return this.el.attach(el);
|
|
},
|
|
|
|
// private
|
|
transformElement: function(el) {
|
|
return Ext.getDom(el);
|
|
},
|
|
|
|
/**
|
|
* Returns the number of elements in this Composite.
|
|
* @return {Number}
|
|
*/
|
|
getCount: function() {
|
|
return this.elements.length;
|
|
},
|
|
|
|
/**
|
|
* Adds elements to this Composite object.
|
|
* @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an Array of DOM elements to add, or another Composite
|
|
* object who's elements should be added.
|
|
* @return {Ext.dom.CompositeElement} This Composite object.
|
|
*/
|
|
add: function(els, root) {
|
|
var elements = this.elements,
|
|
i, ln;
|
|
|
|
if (!els) {
|
|
return this;
|
|
}
|
|
|
|
if (typeof els == "string") {
|
|
els = Ext.dom.Element.selectorFunction(els, root);
|
|
}
|
|
else if (els.isComposite) {
|
|
els = els.elements;
|
|
}
|
|
else if (!Ext.isIterable(els)) {
|
|
els = [els];
|
|
}
|
|
|
|
for (i = 0, ln = els.length; i < ln; ++i) {
|
|
elements.push(this.transformElement(els[i]));
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
invoke: function(fn, args) {
|
|
var elements = this.elements,
|
|
ln = elements.length,
|
|
element,
|
|
i;
|
|
|
|
fn = Ext.dom.Element.prototype[fn];
|
|
for (i = 0; i < ln; i++) {
|
|
element = elements[i];
|
|
|
|
if (element) {
|
|
fn.apply(this.getElement(element), args);
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns a flyweight Element of the dom element object at the specified index
|
|
* @param {Number} index
|
|
* @return {Ext.dom.Element}
|
|
*/
|
|
item: function(index) {
|
|
var el = this.elements[index],
|
|
out = null;
|
|
|
|
if (el) {
|
|
out = this.getElement(el);
|
|
}
|
|
|
|
return out;
|
|
},
|
|
|
|
/**
|
|
* Gets a range nodes.
|
|
* @param {Number} start (optional) The index of the first node in the range
|
|
* @param {Number} end (optional) The index of the last node in the range
|
|
* @return {HTMLElement[]} An array of nodes
|
|
*/
|
|
slice: function() {
|
|
return this.elements.slice.apply(this.elements, arguments);
|
|
},
|
|
|
|
// fixes scope with flyweight
|
|
addListener: function(eventName, handler, scope, opt) {
|
|
var els = this.elements,
|
|
len = els.length,
|
|
i, e;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
e = els[i];
|
|
if (e) {
|
|
Ext.EventManager.on(e, eventName, handler, scope || e, opt);
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* Calls the passed function for each element in this composite.
|
|
* @param {Function} fn The function to call.
|
|
* @param {Ext.dom.Element} fn.el The current Element in the iteration. **This is the flyweight
|
|
* (shared) Ext.dom.Element instance, so if you require a a reference to the dom node, use el.dom.**
|
|
* @param {Ext.dom.CompositeElement} fn.c This Composite object.
|
|
* @param {Number} fn.index The zero-based index in the iteration.
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed.
|
|
* Defaults to the Element.
|
|
* @return {Ext.dom.CompositeElement} this
|
|
*/
|
|
each: function(fn, scope) {
|
|
var me = this,
|
|
els = me.elements,
|
|
len = els.length,
|
|
i, e;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
e = els[i];
|
|
if (e) {
|
|
e = this.getElement(e);
|
|
if (fn.call(scope || e, e, me, i) === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Clears this Composite and adds the elements passed.
|
|
* @param {HTMLElement[]/Ext.dom.CompositeElement} els Either an array of DOM elements, or another Composite from which
|
|
* to fill this Composite.
|
|
* @return {Ext.dom.CompositeElement} this
|
|
*/
|
|
fill: function(els) {
|
|
var me = this;
|
|
me.elements = [];
|
|
me.add(els);
|
|
return me;
|
|
},
|
|
|
|
insert: function(index, nodes) {
|
|
Ext.Array.insert(this.elements, index, nodes);
|
|
},
|
|
|
|
/**
|
|
* Filters this composite to only elements that match the passed selector.
|
|
* @param {String/Function} selector A string CSS selector or a comparison function. The comparison function will be
|
|
* called with the following arguments:
|
|
* @param {Ext.dom.Element} selector.el The current DOM element.
|
|
* @param {Number} selector.index The current index within the collection.
|
|
* @return {Ext.dom.CompositeElement} this
|
|
*/
|
|
filter: function(selector) {
|
|
var me = this,
|
|
els = me.elements,
|
|
len = els.length,
|
|
out = [],
|
|
i = 0,
|
|
isFunc = typeof selector == 'function',
|
|
add,
|
|
el;
|
|
|
|
for (; i < len; i++) {
|
|
el = els[i];
|
|
add = false;
|
|
if (el) {
|
|
el = me.getElement(el);
|
|
|
|
if (isFunc) {
|
|
add = selector.call(el, el, me, i) !== false;
|
|
} else {
|
|
add = el.is(selector);
|
|
}
|
|
|
|
if (add) {
|
|
out.push(me.transformElement(el));
|
|
}
|
|
}
|
|
}
|
|
|
|
me.elements = out;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Find the index of the passed element within the composite collection.
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.dom.Element, or an HtmlElement
|
|
* to find within the composite collection.
|
|
* @return {Number} The index of the passed Ext.dom.Element in the composite collection, or -1 if not found.
|
|
*/
|
|
indexOf: function(el) {
|
|
return Ext.Array.indexOf(this.elements, this.transformElement(el));
|
|
},
|
|
|
|
/**
|
|
* Replaces the specified element with the passed element.
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
|
|
* element in this composite to replace.
|
|
* @param {String/Ext.Element} replacement The id of an element or the Element itself.
|
|
* @param {Boolean} [domReplace] True to remove and replace the element in the document too.
|
|
* @return {Ext.dom.CompositeElement} this
|
|
*/
|
|
replaceElement: function(el, replacement, domReplace) {
|
|
var index = !isNaN(el) ? el : this.indexOf(el),
|
|
d;
|
|
if (index > -1) {
|
|
replacement = Ext.getDom(replacement);
|
|
if (domReplace) {
|
|
d = this.elements[index];
|
|
d.parentNode.insertBefore(replacement, d);
|
|
Ext.removeNode(d);
|
|
}
|
|
Ext.Array.splice(this.elements, index, 1, replacement);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes all elements from this Composite.
|
|
* @param {Boolean} [removeDom] True to also remove the elements from the document.
|
|
*/
|
|
clear: function(removeDom) {
|
|
var me = this,
|
|
els = me.elements,
|
|
i = els.length - 1;
|
|
|
|
if (removeDom) {
|
|
for (; i >= 0; i--) {
|
|
Ext.removeNode(els[i]);
|
|
}
|
|
}
|
|
this.elements = [];
|
|
},
|
|
|
|
addElements: function(els, root) {
|
|
if (!els) {
|
|
return this;
|
|
}
|
|
|
|
if (typeof els == "string") {
|
|
els = Ext.dom.Element.selectorFunction(els, root);
|
|
}
|
|
|
|
var yels = this.elements,
|
|
eLen = els.length,
|
|
e;
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
yels.push(Ext.get(els[e]));
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns the first Element
|
|
* @return {Ext.dom.Element}
|
|
*/
|
|
first: function() {
|
|
return this.item(0);
|
|
},
|
|
|
|
/**
|
|
* Returns the last Element
|
|
* @return {Ext.dom.Element}
|
|
*/
|
|
last: function() {
|
|
return this.item(this.getCount() - 1);
|
|
},
|
|
|
|
/**
|
|
* Returns true if this composite contains the passed element.
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.Element, or an HtmlElement to
|
|
* find within the composite collection.
|
|
* @return {Boolean}
|
|
*/
|
|
contains: function(el) {
|
|
return this.indexOf(el) != -1;
|
|
},
|
|
|
|
/**
|
|
* Removes the specified element(s).
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
|
|
* element in this composite or an array of any of those.
|
|
* @param {Boolean} [removeDom] True to also remove the element from the document.
|
|
* @return {Ext.dom.CompositeElement} this
|
|
*/
|
|
removeElement: function(keys, removeDom) {
|
|
keys = [].concat(keys);
|
|
|
|
var me = this,
|
|
elements = me.elements,
|
|
kLen = keys.length,
|
|
val, el, k;
|
|
|
|
for (k = 0; k < kLen; k++) {
|
|
val = keys[k];
|
|
|
|
if ((el = (elements[val] || elements[val = me.indexOf(val)]))) {
|
|
if (removeDom) {
|
|
if (el.dom) {
|
|
el.remove();
|
|
} else {
|
|
Ext.removeNode(el);
|
|
}
|
|
}
|
|
Ext.Array.erase(elements, val, 1);
|
|
}
|
|
}
|
|
|
|
return me;
|
|
}
|
|
|
|
}, function() {
|
|
this.importElementMethods();
|
|
|
|
this.prototype.on = this.prototype.addListener;
|
|
|
|
if (Ext.DomQuery){
|
|
Ext.dom.Element.selectorFunction = Ext.DomQuery.select;
|
|
}
|
|
|
|
/**
|
|
* Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
|
|
* to be applied to many related elements in one statement through the returned
|
|
* {@link Ext.dom.CompositeElement CompositeElement} or
|
|
* {@link Ext.dom.CompositeElementLite CompositeElementLite} object.
|
|
* @param {String/HTMLElement[]} selector The CSS selector or an array of elements
|
|
* @param {HTMLElement/String} [root] The root element of the query or id of the root
|
|
* @return {Ext.dom.CompositeElementLite/Ext.dom.CompositeElement}
|
|
* @member Ext.dom.Element
|
|
* @method select
|
|
* @static
|
|
* @ignore
|
|
*/
|
|
Ext.dom.Element.select = function(selector, root) {
|
|
var elements;
|
|
|
|
if (typeof selector == "string") {
|
|
elements = Ext.dom.Element.selectorFunction(selector, root);
|
|
}
|
|
else if (selector.length !== undefined) {
|
|
elements = selector;
|
|
}
|
|
else {
|
|
}
|
|
|
|
return new Ext.CompositeElementLite(elements);
|
|
};
|
|
|
|
/**
|
|
* @member Ext
|
|
* @method select
|
|
* @inheritdoc Ext.dom.Element#select
|
|
* @ignore
|
|
*/
|
|
Ext.select = function() {
|
|
return Ext.dom.Element.select.apply(Ext.dom.Element, arguments);
|
|
};
|
|
});
|
|
|
|
// @tag dom,core
|
|
/**
|
|
* @class Ext.dom.CompositeElement
|
|
* <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter
|
|
* members, or to perform collective actions upon the whole set.</p>
|
|
* <p>Although they are not listed, this class supports all of the methods of {@link Ext.dom.Element} and
|
|
* {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.</p>
|
|
* <p>All methods return <i>this</i> and can be chained.</p>
|
|
* Usage:
|
|
<pre><code>
|
|
var els = Ext.select("#some-el div.some-class", true);
|
|
// or select directly from an existing element
|
|
var el = Ext.get('some-el');
|
|
el.select('div.some-class', true);
|
|
|
|
els.setWidth(100); // all elements become 100 width
|
|
els.hide(true); // all elements fade out and hide
|
|
// or
|
|
els.setWidth(100).hide(true);
|
|
</code></pre>
|
|
*/
|
|
Ext.define('Ext.dom.CompositeElement', {
|
|
alternateClassName: 'Ext.CompositeElement',
|
|
|
|
extend: Ext.dom.CompositeElementLite ,
|
|
|
|
// private
|
|
getElement: function(el) {
|
|
// In this case just return it, since we already have a reference to it
|
|
return el;
|
|
},
|
|
|
|
// private
|
|
transformElement: function(el) {
|
|
return Ext.get(el);
|
|
}
|
|
|
|
}, function() {
|
|
/**
|
|
* Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
|
|
* to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
|
|
* {@link Ext.CompositeElementLite CompositeElementLite} object.
|
|
* @param {String/HTMLElement[]} selector The CSS selector or an array of elements
|
|
* @param {Boolean} [unique] true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
|
|
* @param {HTMLElement/String} [root] The root element of the query or id of the root
|
|
* @return {Ext.CompositeElementLite/Ext.CompositeElement}
|
|
* @member Ext.dom.Element
|
|
* @method select
|
|
* @static
|
|
*/
|
|
|
|
Ext.dom.Element.select = function(selector, unique, root) {
|
|
var elements;
|
|
|
|
if (typeof selector == "string") {
|
|
elements = Ext.dom.Element.selectorFunction(selector, root);
|
|
}
|
|
else if (selector.length !== undefined) {
|
|
elements = selector;
|
|
}
|
|
else {
|
|
}
|
|
return (unique === true) ? new Ext.CompositeElement(elements) : new Ext.CompositeElementLite(elements);
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Shorthand of {@link Ext.Element#method-select}.
|
|
* @member Ext
|
|
* @method select
|
|
* @inheritdoc Ext.Element#select
|
|
*/
|
|
Ext.select = Ext.Element.select;
|
|
|
|
/**
|
|
* Represents a collection of a set of key and value pairs. Each key in the HashMap
|
|
* must be unique, the same key cannot exist twice. Access to items is provided via
|
|
* the key only. Sample usage:
|
|
*
|
|
* var map = new Ext.util.HashMap();
|
|
* map.add('key1', 1);
|
|
* map.add('key2', 2);
|
|
* map.add('key3', 3);
|
|
*
|
|
* map.each(function(key, value, length){
|
|
* console.log(key, value, length);
|
|
* });
|
|
*
|
|
* The HashMap is an unordered class,
|
|
* there is no guarantee when iterating over the items that they will be in any particular
|
|
* order. If this is required, then use a {@link Ext.util.MixedCollection}.
|
|
*/
|
|
Ext.define('Ext.util.HashMap', {
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @private Mutation counter which is incremented upon add and remove.
|
|
*/
|
|
generation: 0,
|
|
|
|
/**
|
|
* @cfg {Function} keyFn A function that is used to retrieve a default key for a passed object.
|
|
* A default is provided that returns the `id` property on the object. This function is only used
|
|
* if the `add` method is called with a single argument.
|
|
*/
|
|
|
|
/**
|
|
* Creates new HashMap.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
config = config || {};
|
|
|
|
var me = this,
|
|
keyFn = config.keyFn;
|
|
|
|
me.initialConfig = config;
|
|
me.addEvents(
|
|
/**
|
|
* @event add
|
|
* Fires when a new item is added to the hash.
|
|
* @param {Ext.util.HashMap} this
|
|
* @param {String} key The key of the added item.
|
|
* @param {Object} value The value of the added item.
|
|
*/
|
|
'add',
|
|
/**
|
|
* @event clear
|
|
* Fires when the hash is cleared.
|
|
* @param {Ext.util.HashMap} this
|
|
*/
|
|
'clear',
|
|
/**
|
|
* @event remove
|
|
* Fires when an item is removed from the hash.
|
|
* @param {Ext.util.HashMap} this
|
|
* @param {String} key The key of the removed item.
|
|
* @param {Object} value The value of the removed item.
|
|
*/
|
|
'remove',
|
|
/**
|
|
* @event replace
|
|
* Fires when an item is replaced in the hash.
|
|
* @param {Ext.util.HashMap} this
|
|
* @param {String} key The key of the replaced item.
|
|
* @param {Object} value The new value for the item.
|
|
* @param {Object} old The old value for the item.
|
|
*/
|
|
'replace'
|
|
);
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
me.clear(true);
|
|
|
|
if (keyFn) {
|
|
me.getKey = keyFn;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the number of items in the hash.
|
|
* @return {Number} The number of items in the hash.
|
|
*/
|
|
getCount: function() {
|
|
return this.length;
|
|
},
|
|
|
|
/**
|
|
* Implementation for being able to extract the key from an object if only
|
|
* a single argument is passed.
|
|
* @private
|
|
* @param {String} key The key
|
|
* @param {Object} value The value
|
|
* @return {Array} [key, value]
|
|
*/
|
|
getData: function(key, value) {
|
|
// if we have no value, it means we need to get the key from the object
|
|
if (value === undefined) {
|
|
value = key;
|
|
key = this.getKey(value);
|
|
}
|
|
|
|
return [key, value];
|
|
},
|
|
|
|
/**
|
|
* Extracts the key from an object. This is a default implementation, it may be overridden
|
|
* @param {Object} o The object to get the key from
|
|
* @return {String} The key to use.
|
|
*/
|
|
getKey: function(o) {
|
|
return o.id;
|
|
},
|
|
|
|
/**
|
|
* Adds an item to the collection. Fires the {@link #event-add} event when complete.
|
|
*
|
|
* @param {String/Object} key The key to associate with the item, or the new item.
|
|
*
|
|
* If a {@link #getKey} implementation was specified for this HashMap,
|
|
* or if the key of the stored items is in a property called `id`,
|
|
* the HashMap will be able to *derive* the key for the new item.
|
|
* In this case just pass the new item in this parameter.
|
|
*
|
|
* @param {Object} [o] The item to add.
|
|
*
|
|
* @return {Object} The item added.
|
|
*/
|
|
add: function(key, value) {
|
|
var me = this;
|
|
|
|
// Need to check arguments length here, since we could have called:
|
|
// map.add('foo', undefined);
|
|
if (arguments.length === 1) {
|
|
value = key;
|
|
key = me.getKey(value);
|
|
}
|
|
|
|
if (me.containsKey(key)) {
|
|
return me.replace(key, value);
|
|
}
|
|
|
|
me.map[key] = value;
|
|
++me.length;
|
|
me.generation++;
|
|
if (me.hasListeners.add) {
|
|
me.fireEvent('add', me, key, value);
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Replaces an item in the hash. If the key doesn't exist, the
|
|
* {@link #method-add} method will be used.
|
|
* @param {String} key The key of the item.
|
|
* @param {Object} value The new value for the item.
|
|
* @return {Object} The new value of the item.
|
|
*/
|
|
replace: function(key, value) {
|
|
var me = this,
|
|
map = me.map,
|
|
old;
|
|
|
|
// Need to check arguments length here, since we could have called:
|
|
// map.replace('foo', undefined);
|
|
if (arguments.length === 1) {
|
|
value = key;
|
|
key = me.getKey(value);
|
|
}
|
|
|
|
if (!me.containsKey(key)) {
|
|
me.add(key, value);
|
|
}
|
|
old = map[key];
|
|
map[key] = value;
|
|
me.generation++;
|
|
if (me.hasListeners.replace) {
|
|
me.fireEvent('replace', me, key, value, old);
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Remove an item from the hash.
|
|
* @param {Object} o The value of the item to remove.
|
|
* @return {Boolean} True if the item was successfully removed.
|
|
*/
|
|
remove: function(o) {
|
|
var key = this.findKey(o);
|
|
if (key !== undefined) {
|
|
return this.removeAtKey(key);
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Remove an item from the hash.
|
|
* @param {String} key The key to remove.
|
|
* @return {Boolean} True if the item was successfully removed.
|
|
*/
|
|
removeAtKey: function(key) {
|
|
var me = this,
|
|
value;
|
|
|
|
if (me.containsKey(key)) {
|
|
value = me.map[key];
|
|
delete me.map[key];
|
|
--me.length;
|
|
me.generation++;
|
|
if (me.hasListeners.remove) {
|
|
me.fireEvent('remove', me, key, value);
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Retrieves an item with a particular key.
|
|
* @param {String} key The key to lookup.
|
|
* @return {Object} The value at that key. If it doesn't exist, `undefined` is returned.
|
|
*/
|
|
get: function(key) {
|
|
var map = this.map;
|
|
return map.hasOwnProperty(key) ? map[key] : undefined;
|
|
},
|
|
|
|
/**
|
|
* Removes all items from the hash.
|
|
* @return {Ext.util.HashMap} this
|
|
*/
|
|
clear: function(/* private */ initial) {
|
|
var me = this;
|
|
|
|
// Only clear if it has ever had any content
|
|
if (initial || me.generation) {
|
|
me.map = {};
|
|
me.length = 0;
|
|
me.generation = initial ? 0 : me.generation + 1;
|
|
}
|
|
if (initial !== true && me.hasListeners.clear) {
|
|
me.fireEvent('clear', me);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Checks whether a key exists in the hash.
|
|
* @param {String} key The key to check for.
|
|
* @return {Boolean} True if they key exists in the hash.
|
|
*/
|
|
containsKey: function(key) {
|
|
var map = this.map;
|
|
return map.hasOwnProperty(key) && map[key] !== undefined;
|
|
},
|
|
|
|
/**
|
|
* Checks whether a value exists in the hash.
|
|
* @param {Object} value The value to check for.
|
|
* @return {Boolean} True if the value exists in the dictionary.
|
|
*/
|
|
contains: function(value) {
|
|
return this.containsKey(this.findKey(value));
|
|
},
|
|
|
|
/**
|
|
* Return all of the keys in the hash.
|
|
* @return {Array} An array of keys.
|
|
*/
|
|
getKeys: function() {
|
|
return this.getArray(true);
|
|
},
|
|
|
|
/**
|
|
* Return all of the values in the hash.
|
|
* @return {Array} An array of values.
|
|
*/
|
|
getValues: function() {
|
|
return this.getArray(false);
|
|
},
|
|
|
|
/**
|
|
* Gets either the keys/values in an array from the hash.
|
|
* @private
|
|
* @param {Boolean} isKey True to extract the keys, otherwise, the value
|
|
* @return {Array} An array of either keys/values from the hash.
|
|
*/
|
|
getArray: function(isKey) {
|
|
var arr = [],
|
|
key,
|
|
map = this.map;
|
|
for (key in map) {
|
|
if (map.hasOwnProperty(key)) {
|
|
arr.push(isKey ? key: map[key]);
|
|
}
|
|
}
|
|
return arr;
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for each item in the hash.
|
|
* Returning false from the function will cease iteration.
|
|
*
|
|
* @param {Function} fn The function to execute.
|
|
* @param {String} fn.key The key of the item.
|
|
* @param {Number} fn.value The value of the item.
|
|
* @param {Number} fn.length The total number of items in the hash.
|
|
* @param {Object} [scope] The scope to execute in. Defaults to <tt>this</tt>.
|
|
* @return {Ext.util.HashMap} this
|
|
*/
|
|
each: function(fn, scope) {
|
|
// copy items so they may be removed during iteration.
|
|
var items = Ext.apply({}, this.map),
|
|
key,
|
|
length = this.length;
|
|
|
|
scope = scope || this;
|
|
for (key in items) {
|
|
if (items.hasOwnProperty(key)) {
|
|
if (fn.call(scope, key, items[key], length) === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Performs a shallow copy on this hash.
|
|
* @return {Ext.util.HashMap} The new hash object.
|
|
*/
|
|
clone: function() {
|
|
var hash = new this.self(this.initialConfig),
|
|
map = this.map,
|
|
key;
|
|
|
|
hash.suspendEvents();
|
|
for (key in map) {
|
|
if (map.hasOwnProperty(key)) {
|
|
hash.add(key, map[key]);
|
|
}
|
|
}
|
|
hash.resumeEvents();
|
|
return hash;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Find the key for a value.
|
|
* @param {Object} value The value to find.
|
|
* @return {Object} The value of the item. Returns <tt>undefined</tt> if not found.
|
|
*/
|
|
findKey: function(value) {
|
|
var key,
|
|
map = this.map;
|
|
|
|
for (key in map) {
|
|
if (map.hasOwnProperty(key) && map[key] === value) {
|
|
return key;
|
|
}
|
|
}
|
|
return undefined;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Base Manager class
|
|
*/
|
|
Ext.define('Ext.AbstractManager', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
typeName: 'type',
|
|
|
|
constructor: function(config) {
|
|
Ext.apply(this, config || {});
|
|
|
|
/**
|
|
* @property {Ext.util.HashMap} all
|
|
* Contains all of the items currently managed
|
|
*/
|
|
this.all = new Ext.util.HashMap();
|
|
|
|
this.types = {};
|
|
},
|
|
|
|
/**
|
|
* Returns an item by id.
|
|
* For additional details see {@link Ext.util.HashMap#get}.
|
|
* @param {String} id The id of the item
|
|
* @return {Object} The item, undefined if not found.
|
|
*/
|
|
get : function(id) {
|
|
return this.all.get(id);
|
|
},
|
|
|
|
/**
|
|
* Registers an item to be managed
|
|
* @param {Object} item The item to register
|
|
*/
|
|
register: function(item) {
|
|
this.all.add(item);
|
|
},
|
|
|
|
/**
|
|
* Unregisters an item by removing it from this manager
|
|
* @param {Object} item The item to unregister
|
|
*/
|
|
unregister: function(item) {
|
|
this.all.remove(item);
|
|
},
|
|
|
|
/**
|
|
* Registers a new item constructor, keyed by a type key.
|
|
* @param {String} type The mnemonic string by which the class may be looked up.
|
|
* @param {Function} cls The new instance class.
|
|
*/
|
|
registerType : function(type, cls) {
|
|
this.types[type] = cls;
|
|
cls[this.typeName] = type;
|
|
},
|
|
|
|
/**
|
|
* Checks if an item type is registered.
|
|
* @param {String} type The mnemonic string by which the class may be looked up
|
|
* @return {Boolean} Whether the type is registered.
|
|
*/
|
|
isRegistered : function(type){
|
|
return this.types[type] !== undefined;
|
|
},
|
|
|
|
/**
|
|
* Creates and returns an instance of whatever this manager manages, based on the supplied type and
|
|
* config object.
|
|
* @param {Object} config The config object
|
|
* @param {String} defaultType If no type is discovered in the config object, we fall back to this type
|
|
* @return {Object} The instance of whatever this manager is managing
|
|
*/
|
|
create: function(config, defaultType) {
|
|
var type = config[this.typeName] || config.type || defaultType,
|
|
Constructor = this.types[type];
|
|
|
|
|
|
return new Constructor(config);
|
|
},
|
|
|
|
/**
|
|
* Registers a function that will be called when an item with the specified id is added to the manager.
|
|
* This will happen on instantiation.
|
|
* @param {String} id The item id
|
|
* @param {Function} fn The callback function. Called with a single parameter, the item.
|
|
* @param {Object} scope The scope (this reference) in which the callback is executed.
|
|
* Defaults to the item.
|
|
*/
|
|
onAvailable : function(id, fn, scope){
|
|
var all = this.all,
|
|
item,
|
|
callback;
|
|
|
|
if (all.containsKey(id)) {
|
|
item = all.get(id);
|
|
fn.call(scope || item, item);
|
|
} else {
|
|
callback = function(map, key, item){
|
|
if (key == id) {
|
|
fn.call(scope || item, item);
|
|
all.un('add', callback);
|
|
}
|
|
};
|
|
all.on('add', callback);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for each item in the collection.
|
|
* @param {Function} fn The function to execute.
|
|
* @param {String} fn.key The key of the item
|
|
* @param {Number} fn.value The value of the item
|
|
* @param {Number} fn.length The total number of items in the collection
|
|
* @param {Boolean} fn.return False to cease iteration.
|
|
* @param {Object} scope The scope to execute in. Defaults to `this`.
|
|
*/
|
|
each: function(fn, scope){
|
|
this.all.each(fn, scope || this);
|
|
},
|
|
|
|
/**
|
|
* Gets the number of items in the collection.
|
|
* @return {Number} The number of items in the collection.
|
|
*/
|
|
getCount: function(){
|
|
return this.all.getCount();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.ComponentManager
|
|
* <p>Provides a registry of all Components (instances of {@link Ext.Component} or any subclass
|
|
* thereof) on a page so that they can be easily accessed by {@link Ext.Component component}
|
|
* {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).</p>
|
|
* <p>This object also provides a registry of available Component <i>classes</i>
|
|
* indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
|
|
* The <code>xtype</code> provides a way to avoid instantiating child Components
|
|
* when creating a full, nested config object for a complete Ext page.</p>
|
|
* <p>A child Component may be specified simply as a <i>config object</i>
|
|
* as long as the correct <code>{@link Ext.Component#xtype xtype}</code> is specified so that if and when the Component
|
|
* needs rendering, the correct type can be looked up for lazy instantiation.</p>
|
|
* <p>For a list of all available <code>{@link Ext.Component#xtype xtypes}</code>, see {@link Ext.Component}.</p>
|
|
* @singleton
|
|
*/
|
|
Ext.define('Ext.ComponentManager', {
|
|
extend: Ext.AbstractManager ,
|
|
alternateClassName: 'Ext.ComponentMgr',
|
|
|
|
singleton: true,
|
|
|
|
typeName: 'xtype',
|
|
|
|
/**
|
|
* Creates a new Component from the specified config object using the
|
|
* config object's xtype to determine the class to instantiate.
|
|
* @param {Object} config A configuration object for the Component you wish to create.
|
|
* @param {String} defaultType (optional) The xtype to use if the config object does not
|
|
* contain a <code>xtype</code>. (Optional if the config contains a <code>xtype</code>).
|
|
* @return {Ext.Component} The newly instantiated Component.
|
|
*/
|
|
create: function(component, defaultType){
|
|
if (typeof component == 'string') {
|
|
return Ext.widget(component);
|
|
}
|
|
if (component.isComponent) {
|
|
return component;
|
|
}
|
|
return Ext.widget(component.xtype || defaultType, component);
|
|
},
|
|
|
|
registerType: function(type, cls) {
|
|
this.types[type] = cls;
|
|
cls[this.typeName] = type;
|
|
cls.prototype[this.typeName] = type;
|
|
}
|
|
},
|
|
function () {
|
|
/**
|
|
* This is shorthand reference to {@link Ext.ComponentManager#get}.
|
|
* Looks up an existing {@link Ext.Component Component} by {@link Ext.Component#id id}
|
|
*
|
|
* @param {String} id The component {@link Ext.Component#id id}
|
|
* @return Ext.Component The Component, `undefined` if not found, or `null` if a
|
|
* Class was found.
|
|
* @member Ext
|
|
*/
|
|
Ext.getCmp = function(id) {
|
|
return Ext.ComponentManager.get(id);
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Provides searching of Components within Ext.ComponentManager (globally) or a specific
|
|
* Ext.container.Container on the document with a similar syntax to a CSS selector.
|
|
* Returns Array of matching Components, or empty Array.
|
|
*
|
|
* ## Basic Component lookup
|
|
*
|
|
* Components can be retrieved by using their {@link Ext.Component xtype}:
|
|
*
|
|
* - `component`
|
|
* - `gridpanel`
|
|
*
|
|
* Matching by `xtype` matches inherited types, so in the following code, the previous field
|
|
* *of any type which inherits from `TextField`* will be found:
|
|
*
|
|
* prevField = myField.previousNode('textfield');
|
|
*
|
|
* To match only the exact type, pass the "shallow" flag by adding `(true)` to xtype
|
|
* (See AbstractComponent's {@link Ext.AbstractComponent#isXType isXType} method):
|
|
*
|
|
* prevTextField = myField.previousNode('textfield(true)');
|
|
*
|
|
* You can search Components by their `id` or `itemId` property, prefixed with a #:
|
|
*
|
|
* #myContainer
|
|
*
|
|
* Component `xtype` and `id` or `itemId` can be used together to avoid possible
|
|
* id collisions between Components of different types:
|
|
*
|
|
* panel#myPanel
|
|
*
|
|
* ## Traversing Component tree
|
|
*
|
|
* Components can be found by their relation to other Components. There are several
|
|
* relationship operators, mostly taken from CSS selectors:
|
|
*
|
|
* - **`E F`** All descendant Components of E that match F
|
|
* - **`E > F`** All direct children Components of E that match F
|
|
* - **`E ^ F`** All parent Components of E that match F
|
|
*
|
|
* Expressions between relationship operators are matched left to right, i.e. leftmost
|
|
* selector is applied first, then if one or more matches are found, relationship operator
|
|
* itself is applied, then next selector expression, etc. It is possible to combine
|
|
* relationship operators in complex selectors:
|
|
*
|
|
* window[title="Input form"] textfield[name=login] ^ form > button[action=submit]
|
|
*
|
|
* That selector can be read this way: Find a window with title "Input form", in that
|
|
* window find a TextField with name "login" at any depth (including subpanels and/or
|
|
* FieldSets), then find an `Ext.form.Panel` that is a parent of the TextField, and in
|
|
* that form find a direct child that is a button with custom property `action` set to
|
|
* value "submit".
|
|
*
|
|
* Whitespace on both sides of `^` and `>` operators is non-significant, i.e. can be
|
|
* omitted, but usually is used for clarity.
|
|
*
|
|
* ## Searching by Component attributes
|
|
*
|
|
* Components can be searched by their object property values (attributes). To do that,
|
|
* use attribute matching expression in square brackets:
|
|
*
|
|
* - `component[autoScroll]` - matches any Component that has `autoScroll` property with
|
|
* any truthy (non-empty, not `false`) value.
|
|
* - `panel[title="Test"]` - matches any Component that has `title` property set to
|
|
* "Test". Note that if the value does not contain spaces, the quotes are optional.
|
|
*
|
|
* Attributes can use any of the operators in {@link Ext.dom.Query DomQuery}'s
|
|
* {@link Ext.dom.Query#operators operators} to compare values.
|
|
*
|
|
* Prefixing the attribute name with an at sign `@` means that the property must be
|
|
* the object's `ownProperty`, not a property from the prototype chain.
|
|
*
|
|
* Specifications like `[propName]` check that the property is a truthy value. To check
|
|
* that the object has an `ownProperty` of a certain name, regardless of the value use
|
|
* the form `[?propName]`.
|
|
*
|
|
* The specified value is coerced to match the type of the property found in the
|
|
* candidate Component using {@link Ext#coerce}.
|
|
*
|
|
* If you need to find Components by their `itemId` property, use `#id` form; it will
|
|
* do the same but is easier to read.
|
|
*
|
|
* ## Attribute matching operators
|
|
*
|
|
* The '=' operator will return the results that **exactly** match the
|
|
* specified object property (attribute):
|
|
*
|
|
* Ext.ComponentQuery.query('panel[cls=my-cls]');
|
|
*
|
|
* Will match the following Component:
|
|
*
|
|
* Ext.create('Ext.window.Window', {
|
|
* cls: 'my-cls'
|
|
* });
|
|
*
|
|
* But will not match the following Component, because 'my-cls' is one value
|
|
* among others:
|
|
*
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* cls: 'foo-cls my-cls bar-cls'
|
|
* });
|
|
*
|
|
* You can use the '~=' operator instead, it will return Components with
|
|
* the property that **exactly** matches one of the whitespace-separated
|
|
* values. This is also true for properties that only have *one* value:
|
|
*
|
|
* Ext.ComponentQuery.query('panel[cls~=my-cls]');
|
|
*
|
|
* Will match both Components:
|
|
*
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* cls: 'foo-cls my-cls bar-cls'
|
|
* });
|
|
*
|
|
* Ext.create('Ext.window.Window', {
|
|
* cls: 'my-cls'
|
|
* });
|
|
*
|
|
* Generally, '=' operator is more suited for object properties other than
|
|
* CSS classes, while '~=' operator will work best with properties that
|
|
* hold lists of whitespace-separated CSS classes.
|
|
*
|
|
* The '^=' operator will return Components with specified attribute that
|
|
* start with the passed value:
|
|
*
|
|
* Ext.ComponentQuery.query('panel[title^=Sales]');
|
|
*
|
|
* Will match the following Component:
|
|
*
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Sales estimate for Q4'
|
|
* });
|
|
*
|
|
* The '$=' operator will return Components with specified properties that
|
|
* end with the passed value:
|
|
*
|
|
* Ext.ComponentQuery.query('field[fieldLabel$=name]');
|
|
*
|
|
* Will match the following Component:
|
|
*
|
|
* Ext.create('Ext.form.field.Text', {
|
|
* fieldLabel: 'Enter your name'
|
|
* });
|
|
*
|
|
* The following test will find panels with their `ownProperty` collapsed being equal to
|
|
* `false`. It will **not** match a collapsed property from the prototype chain.
|
|
*
|
|
* Ext.ComponentQuery.query('panel[@collapsed=false]');
|
|
*
|
|
* Member expressions from candidate Components may be tested. If the expression returns
|
|
* a *truthy* value, the candidate Component will be included in the query:
|
|
*
|
|
* var disabledFields = myFormPanel.query("{isDisabled()}");
|
|
*
|
|
* Such expressions are executed in Component's context, and the above expression is
|
|
* similar to running this snippet for every Component in your application:
|
|
*
|
|
* if (component.isDisabled()) {
|
|
* matches.push(component);
|
|
* }
|
|
*
|
|
* It is important to use only methods that are available in **every** Component instance
|
|
* to avoid run time exceptions. If you need to match your Components with a custom
|
|
* condition formula, you can augment `Ext.Component` to provide custom matcher that
|
|
* will return `false` by default, and override it in your custom classes:
|
|
*
|
|
* Ext.define('My.Component', {
|
|
* override: 'Ext.Component',
|
|
* myMatcher: function() { return false; }
|
|
* });
|
|
*
|
|
* Ext.define('My.Panel', {
|
|
* extend: 'Ext.panel.Panel',
|
|
* requires: ['My.Component'], // Ensure that Component override is applied
|
|
* myMatcher: function(selector) {
|
|
* return selector === 'myPanel';
|
|
* }
|
|
* });
|
|
*
|
|
* After that you can use a selector with your custom matcher to find all instances
|
|
* of `My.Panel`:
|
|
*
|
|
* Ext.ComponentQuery.query("{myMatcher('myPanel')}");
|
|
*
|
|
* However if you really need to use a custom matcher, you may find it easier to implement
|
|
* a custom Pseudo class instead (see below).
|
|
*
|
|
* ## Conditional matching
|
|
*
|
|
* Attribute matchers can be combined to select only Components that match **all**
|
|
* conditions (logical AND operator):
|
|
*
|
|
* Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
|
|
*
|
|
* E.g., the query above will match only a Panel-descended Component that has 'my-cls'
|
|
* CSS class *and* is floating *and* with a title that ends with "sales data".
|
|
*
|
|
* Expressions separated with commas will match any Component that satisfies
|
|
* *either* expression (logical OR operator):
|
|
*
|
|
* Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');
|
|
*
|
|
* E.g., the query above will match any field with field label starting with "User",
|
|
* *or* any field that has "password" in its label.
|
|
*
|
|
* ## Pseudo classes
|
|
*
|
|
* Pseudo classes may be used to filter results in the same way as in
|
|
* {@link Ext.dom.Query}. There are five default pseudo classes:
|
|
*
|
|
* * `not` Negates a selector.
|
|
* * `first` Filters out all except the first matching item for a selector.
|
|
* * `last` Filters out all except the last matching item for a selector.
|
|
* * `focusable` Filters out all except Components which are currently able to recieve
|
|
* focus.
|
|
* * `nth-child` Filters Components by ordinal position in the selection.
|
|
*
|
|
* These pseudo classes can be used with other matchers or without them:
|
|
*
|
|
* // Select first direct child button in any panel
|
|
* Ext.ComponentQuery.query('panel > button:first');
|
|
*
|
|
* // Select last field in Profile form
|
|
* Ext.ComponentQuery.query('form[title=Profile] field:last');
|
|
*
|
|
* // Find first focusable Component in a panel and focus it
|
|
* panel.down(':focusable').focus();
|
|
*
|
|
* // Select any field that is not hidden in a form
|
|
* form.query('field:not(hiddenfield)');
|
|
*
|
|
* Pseudo class `nth-child` can be used to find any child Component by its
|
|
* position relative to its siblings. This class' handler takes one argument
|
|
* that specifies the selection formula as `Xn` or `Xn+Y`:
|
|
*
|
|
* // Find every odd field in a form
|
|
* form.query('field:nth-child(2n+1)'); // or use shortcut: :nth-child(odd)
|
|
*
|
|
* // Find every even field in a form
|
|
* form.query('field:nth-child(2n)'); // or use shortcut: :nth-child(even)
|
|
*
|
|
* // Find every 3rd field in a form
|
|
* form.query('field:nth-child(3n)');
|
|
*
|
|
* Pseudo classes can be combined to further filter the results, e.g., in the
|
|
* form example above we can modify the query to exclude hidden fields:
|
|
*
|
|
* // Find every 3rd non-hidden field in a form
|
|
* form.query('field:not(hiddenfield):nth-child(3n)');
|
|
*
|
|
* Note that when combining pseudo classes, whitespace is significant, i.e.
|
|
* there should be no spaces between pseudo classes. This is a common mistake;
|
|
* if you accidentally type a space between `field` and `:not`, the query
|
|
* will not return any result because it will mean "find *field's children
|
|
* Components* that are not hidden fields...".
|
|
*
|
|
* ## Custom pseudo classes
|
|
*
|
|
* It is possible to define your own custom pseudo classes. In fact, a
|
|
* pseudo class is just a property in `Ext.ComponentQuery.pseudos` object
|
|
* that defines pseudo class name (property name) and pseudo class handler
|
|
* (property value):
|
|
*
|
|
* // Function receives array and returns a filtered array.
|
|
* Ext.ComponentQuery.pseudos.invalid = function(items) {
|
|
* var i = 0, l = items.length, c, result = [];
|
|
* for (; i < l; i++) {
|
|
* if (!(c = items[i]).isValid()) {
|
|
* result.push(c);
|
|
* }
|
|
* }
|
|
* return result;
|
|
* };
|
|
*
|
|
* var invalidFields = myFormPanel.query('field:invalid');
|
|
* if (invalidFields.length) {
|
|
* invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
|
|
* for (var i = 0, l = invalidFields.length; i < l; i++) {
|
|
* invalidFields[i].getEl().frame("red");
|
|
* }
|
|
* }
|
|
*
|
|
* Pseudo class handlers can be even more flexible, with a selector
|
|
* argument used to define the logic:
|
|
*
|
|
* // Handler receives array of itmes and selector in parentheses
|
|
* Ext.ComponentQuery.pseudos.titleRegex = function(components, selector) {
|
|
* var i = 0, l = components.length, c, result = [], regex = new RegExp(selector);
|
|
* for (; i < l; i++) {
|
|
* c = components[i];
|
|
* if (c.title && regex.test(c.title)) {
|
|
* result.push(c);
|
|
* }
|
|
* }
|
|
* return result;
|
|
* }
|
|
*
|
|
* var salesTabs = tabPanel.query('panel:titleRegex("sales\\s+for\\s+201[123]")');
|
|
*
|
|
* Be careful when using custom pseudo classes with MVC Controllers: when
|
|
* you use a pseudo class in Controller's `control` or `listen` component
|
|
* selectors, the pseudo class' handler function will be called very often
|
|
* and may slow down your application significantly. A good rule of thumb
|
|
* is to always specify Component xtype with the pseudo class so that the
|
|
* handlers are only called on Components that you need, and try to make
|
|
* the condition checks as cheap in terms of execution time as possible.
|
|
* Note how in the example above, handler function checks that Component
|
|
* *has* a title first, before running regex test on it.
|
|
*
|
|
* ## Query examples
|
|
*
|
|
* Queries return an array of Components. Here are some example queries:
|
|
*
|
|
* // retrieve all Ext.Panels in the document by xtype
|
|
* var panelsArray = Ext.ComponentQuery.query('panel');
|
|
*
|
|
* // retrieve all Ext.Panels within the container with an id myCt
|
|
* var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
|
|
*
|
|
* // retrieve all direct children which are Ext.Panels within myCt
|
|
* var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
|
|
*
|
|
* // retrieve all grids or trees
|
|
* var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');
|
|
*
|
|
* // Focus first Component
|
|
* myFormPanel.child(':focusable').focus();
|
|
*
|
|
* // Retrieve every odd text field in a form
|
|
* myFormPanel.query('textfield:nth-child(odd)');
|
|
*
|
|
* // Retrieve every even field in a form, excluding hidden fields
|
|
* myFormPanel.query('field:not(hiddenfield):nth-child(even)');
|
|
*
|
|
* For easy access to queries based from a particular Container see the
|
|
* {@link Ext.container.Container#query}, {@link Ext.container.Container#down} and
|
|
* {@link Ext.container.Container#child} methods. Also see
|
|
* {@link Ext.Component#up}.
|
|
*/
|
|
Ext.define('Ext.ComponentQuery', {
|
|
singleton: true
|
|
|
|
|
|
|
|
|
|
}, function() {
|
|
|
|
var cq = this,
|
|
domQueryOperators = Ext.dom.Query.operators,
|
|
nthRe = /(\d*)n\+?(\d*)/,
|
|
nthRe2 = /\D/,
|
|
|
|
// A function source code pattern with a placeholder which accepts an expression which yields a truth value when applied
|
|
// as a member on each item in the passed array.
|
|
filterFnPattern = [
|
|
'var r = [],',
|
|
'i = 0,',
|
|
'it = items,',
|
|
'l = it.length,',
|
|
'c;',
|
|
'for (; i < l; i++) {',
|
|
'c = it[i];',
|
|
'if (c.{0}) {',
|
|
'r.push(c);',
|
|
'}',
|
|
'}',
|
|
'return r;'
|
|
].join(''),
|
|
|
|
filterItems = function(items, operation) {
|
|
// Argument list for the operation is [ itemsArray, operationArg1, operationArg2...]
|
|
// The operation's method loops over each item in the candidate array and
|
|
// returns an array of items which match its criteria
|
|
return operation.method.apply(this, [ items ].concat(operation.args));
|
|
},
|
|
|
|
getItems = function(items, mode) {
|
|
var result = [],
|
|
i = 0,
|
|
length = items.length,
|
|
candidate,
|
|
deep = mode !== '>';
|
|
|
|
for (; i < length; i++) {
|
|
candidate = items[i];
|
|
if (candidate.getRefItems) {
|
|
result = result.concat(candidate.getRefItems(deep));
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
getAncestors = function(items) {
|
|
var result = [],
|
|
i = 0,
|
|
length = items.length,
|
|
candidate;
|
|
for (; i < length; i++) {
|
|
candidate = items[i];
|
|
while (!!(candidate = candidate.getRefOwner())) {
|
|
result.push(candidate);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Filters the passed candidate array and returns only items which match the passed xtype
|
|
filterByXType = function(items, xtype, shallow) {
|
|
if (xtype === '*') {
|
|
return items.slice();
|
|
}
|
|
else {
|
|
var result = [],
|
|
i = 0,
|
|
length = items.length,
|
|
candidate;
|
|
for (; i < length; i++) {
|
|
candidate = items[i];
|
|
if (candidate.isXType(xtype, shallow)) {
|
|
result.push(candidate);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
},
|
|
|
|
// Filters the passed candidate array and returns only items which have the passed className
|
|
filterByClassName = function(items, className) {
|
|
var result = [],
|
|
i = 0,
|
|
length = items.length,
|
|
candidate;
|
|
for (; i < length; i++) {
|
|
candidate = items[i];
|
|
if (candidate.hasCls(className)) {
|
|
result.push(candidate);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Filters the passed candidate array and returns only items which have the specified property match
|
|
filterByAttribute = function(items, property, operator, compareTo) {
|
|
var result = [],
|
|
i = 0,
|
|
length = items.length,
|
|
mustBeOwnProperty,
|
|
presenceOnly,
|
|
candidate, propValue,
|
|
j, propLen;
|
|
|
|
// Prefixing property name with an @ means that the property must be in the candidate, not in its prototype
|
|
if (property.charAt(0) === '@') {
|
|
mustBeOwnProperty = true;
|
|
property = property.substr(1);
|
|
}
|
|
if (property.charAt(0) === '?') {
|
|
mustBeOwnProperty = true;
|
|
presenceOnly = true;
|
|
property = property.substr(1);
|
|
}
|
|
|
|
for (; i < length; i++) {
|
|
candidate = items[i];
|
|
|
|
// Check candidate hasOwnProperty is propName prefixed with a bang.
|
|
if (!mustBeOwnProperty || candidate.hasOwnProperty(property)) {
|
|
|
|
// pull out property value to test
|
|
propValue = candidate[property];
|
|
|
|
if (presenceOnly) {
|
|
result.push(candidate);
|
|
}
|
|
// implies property is an array, and we must compare value against each element.
|
|
else if (operator === '~=') {
|
|
if (propValue) {
|
|
//We need an array
|
|
if (!Ext.isArray(propValue)) {
|
|
propValue = propValue.split(' ');
|
|
}
|
|
|
|
for (j = 0, propLen = propValue.length; j < propLen; j++) {
|
|
if (domQueryOperators[operator](Ext.coerce(propValue[j], compareTo), compareTo)) {
|
|
result.push(candidate);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} else if (!compareTo ? !!candidate[property] : domQueryOperators[operator](Ext.coerce(propValue, compareTo), compareTo)) {
|
|
result.push(candidate);
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Filters the passed candidate array and returns only items which have the specified itemId or id
|
|
filterById = function(items, id) {
|
|
var result = [],
|
|
i = 0,
|
|
length = items.length,
|
|
candidate;
|
|
for (; i < length; i++) {
|
|
candidate = items[i];
|
|
if (candidate.getItemId() === id) {
|
|
result.push(candidate);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Filters the passed candidate array and returns only items which the named pseudo class matcher filters in
|
|
filterByPseudo = function(items, name, value) {
|
|
return cq.pseudos[name](items, value);
|
|
},
|
|
|
|
// Determines leading mode
|
|
// > for direct child, and ^ to switch to ownerCt axis
|
|
modeRe = /^(\s?([>\^])\s?|\s|$)/,
|
|
|
|
// Matches a token with possibly (true|false) appended for the "shallow" parameter
|
|
tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/,
|
|
|
|
matchers = [{
|
|
// Checks for .xtype with possibly (true|false) appended for the "shallow" parameter
|
|
re: /^\.([\w\-]+)(?:\((true|false)\))?/,
|
|
method: filterByXType
|
|
}, {
|
|
// checks for [attribute=value], [attribute^=value], [attribute$=value], [attribute*=value], [attribute~=value], [attribute%=value], [attribute!=value]
|
|
// Allow [@attribute] to check truthy ownProperty
|
|
// Allow [?attribute] to check for presence of ownProperty
|
|
re: /^(?:\[((?:@|\?)?[\w\-\$]*[^\^\$\*~%!])\s?(?:(=|.=)\s?['"]?(.*?)["']?)?\])/,
|
|
method: filterByAttribute
|
|
}, {
|
|
// checks for #cmpItemId
|
|
re: /^#([\w\-]+)/,
|
|
method: filterById
|
|
}, {
|
|
// checks for :<pseudo_class>(<selector>)
|
|
re: /^\:([\w\-]+)(?:\(((?:\{[^\}]+\})|(?:(?!\{)[^\s>\/]*?(?!\})))\))?/,
|
|
method: filterByPseudo
|
|
}, {
|
|
// checks for {<member_expression>}
|
|
re: /^(?:\{([^\}]+)\})/,
|
|
method: filterFnPattern
|
|
}];
|
|
|
|
// Internal class Ext.ComponentQuery.Query
|
|
cq.Query = Ext.extend(Object, {
|
|
constructor: function(cfg) {
|
|
cfg = cfg || {};
|
|
Ext.apply(this, cfg);
|
|
},
|
|
|
|
// Executes this Query upon the selected root.
|
|
// The root provides the initial source of candidate Component matches which are progressively
|
|
// filtered by iterating through this Query's operations cache.
|
|
// If no root is provided, all registered Components are searched via the ComponentManager.
|
|
// root may be a Container who's descendant Components are filtered
|
|
// root may be a Component with an implementation of getRefItems which provides some nested Components such as the
|
|
// docked items within a Panel.
|
|
// root may be an array of candidate Components to filter using this Query.
|
|
execute : function(root) {
|
|
var operations = this.operations,
|
|
i = 0,
|
|
length = operations.length,
|
|
operation,
|
|
workingItems;
|
|
|
|
// no root, use all Components in the document
|
|
if (!root) {
|
|
workingItems = Ext.ComponentManager.all.getArray();
|
|
}
|
|
// Root is an iterable object like an Array, or system Collection, eg HtmlCollection
|
|
else if (Ext.isIterable(root)) {
|
|
workingItems = root;
|
|
}
|
|
// Root is a MixedCollection
|
|
else if (root.isMixedCollection) {
|
|
workingItems = root.items;
|
|
}
|
|
|
|
// We are going to loop over our operations and take care of them
|
|
// one by one.
|
|
for (; i < length; i++) {
|
|
operation = operations[i];
|
|
|
|
// The mode operation requires some custom handling.
|
|
// All other operations essentially filter down our current
|
|
// working items, while mode replaces our current working
|
|
// items by getting children from each one of our current
|
|
// working items. The type of mode determines the type of
|
|
// children we get. (e.g. > only gets direct children)
|
|
if (operation.mode === '^') {
|
|
workingItems = getAncestors(workingItems || [root]);
|
|
}
|
|
else if (operation.mode) {
|
|
workingItems = getItems(workingItems || [root], operation.mode);
|
|
}
|
|
else {
|
|
workingItems = filterItems(workingItems || getItems([root]), operation);
|
|
}
|
|
|
|
// If this is the last operation, it means our current working
|
|
// items are the final matched items. Thus return them!
|
|
if (i === length -1) {
|
|
return workingItems;
|
|
}
|
|
}
|
|
return [];
|
|
},
|
|
|
|
is: function(component) {
|
|
var operations = this.operations,
|
|
components = Ext.isArray(component) ? component : [component],
|
|
originalLength = components.length,
|
|
lastOperation = operations[operations.length-1],
|
|
ln, i;
|
|
|
|
components = filterItems(components, lastOperation);
|
|
if (components.length === originalLength) {
|
|
if (operations.length > 1) {
|
|
for (i = 0, ln = components.length; i < ln; i++) {
|
|
if (Ext.Array.indexOf(this.execute(), components[i]) === -1) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
|
|
Ext.apply(this, {
|
|
|
|
// private cache of selectors and matching ComponentQuery.Query objects
|
|
cache: {},
|
|
|
|
// private cache of pseudo class filter functions
|
|
pseudos: {
|
|
not: function(components, selector){
|
|
var CQ = Ext.ComponentQuery,
|
|
i = 0,
|
|
length = components.length,
|
|
results = [],
|
|
index = -1,
|
|
component;
|
|
|
|
for(; i < length; ++i) {
|
|
component = components[i];
|
|
if (!CQ.is(component, selector)) {
|
|
results[++index] = component;
|
|
}
|
|
}
|
|
return results;
|
|
},
|
|
first: function(components) {
|
|
var ret = [];
|
|
|
|
if (components.length > 0) {
|
|
ret.push(components[0]);
|
|
}
|
|
return ret;
|
|
},
|
|
last: function(components) {
|
|
var len = components.length,
|
|
ret = [];
|
|
|
|
if (len > 0) {
|
|
ret.push(components[len - 1]);
|
|
}
|
|
return ret;
|
|
},
|
|
focusable: function(cmps) {
|
|
var len = cmps.length,
|
|
results = [],
|
|
i = 0,
|
|
c;
|
|
|
|
for (; i < len; i++) {
|
|
c = cmps[i];
|
|
// If this is a generally focusable Component (has a focusEl, is rendered, enabled and visible)
|
|
// then it is currently focusable if focus management is enabled or if it is an input field, a button or a menu item
|
|
if (c.isFocusable()) {
|
|
results.push(c);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
},
|
|
"nth-child" : function(c, a) {
|
|
var result = [],
|
|
m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a),
|
|
f = (m[1] || 1) - 0, l = m[2] - 0,
|
|
i, n, nodeIndex;
|
|
for (i = 0; n = c[i]; i++) {
|
|
nodeIndex = i + 1;
|
|
if (f == 1) {
|
|
if (l == 0 || nodeIndex == l) {
|
|
result.push(n);
|
|
}
|
|
} else if ((nodeIndex + l) % f == 0){
|
|
result.push(n);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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) {
|
|
var selectors = selector.split(','),
|
|
length = selectors.length,
|
|
i = 0,
|
|
results = [],
|
|
noDupResults = [],
|
|
dupMatcher = {},
|
|
query, resultsLn, cmp;
|
|
|
|
for (; i < length; i++) {
|
|
selector = Ext.String.trim(selectors[i]);
|
|
query = this.cache[selector] || (this.cache[selector] = this.parse(selector));
|
|
results = results.concat(query.execute(root));
|
|
}
|
|
|
|
// multiple selectors, potential to find duplicates
|
|
// lets filter them out.
|
|
if (length > 1) {
|
|
resultsLn = results.length;
|
|
for (i = 0; i < resultsLn; i++) {
|
|
cmp = results[i];
|
|
if (!dupMatcher[cmp.id]) {
|
|
noDupResults.push(cmp);
|
|
dupMatcher[cmp.id] = true;
|
|
}
|
|
}
|
|
results = noDupResults;
|
|
}
|
|
return results;
|
|
},
|
|
|
|
/**
|
|
* Tests whether the passed Component matches the selector string.
|
|
* @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
|
|
*/
|
|
is: function(component, selector) {
|
|
if (!selector) {
|
|
return true;
|
|
}
|
|
var selectors = selector.split(','),
|
|
length = selectors.length,
|
|
i = 0,
|
|
query;
|
|
|
|
for (; i < length; i++) {
|
|
selector = Ext.String.trim(selectors[i]);
|
|
query = this.cache[selector] || (this.cache[selector] = this.parse(selector));
|
|
if (query.is(component)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
parse: function(selector) {
|
|
var operations = [],
|
|
length = matchers.length,
|
|
lastSelector,
|
|
tokenMatch,
|
|
matchedChar,
|
|
modeMatch,
|
|
selectorMatch,
|
|
i, matcher, method;
|
|
|
|
// We are going to parse the beginning of the selector over and
|
|
// over again, slicing off the selector any portions we converted into an
|
|
// operation, until it is an empty string.
|
|
while (selector && lastSelector !== selector) {
|
|
lastSelector = selector;
|
|
|
|
// First we check if we are dealing with a token like #, * or an xtype
|
|
tokenMatch = selector.match(tokenRe);
|
|
|
|
if (tokenMatch) {
|
|
matchedChar = tokenMatch[1];
|
|
|
|
// If the token is prefixed with a # we push a filterById operation to our stack
|
|
if (matchedChar === '#') {
|
|
operations.push({
|
|
method: filterById,
|
|
args: [Ext.String.trim(tokenMatch[2])]
|
|
});
|
|
}
|
|
// If the token is prefixed with a . we push a filterByClassName operation to our stack
|
|
// FIXME: Not enabled yet. just needs \. adding to the tokenRe prefix
|
|
else if (matchedChar === '.') {
|
|
operations.push({
|
|
method: filterByClassName,
|
|
args: [Ext.String.trim(tokenMatch[2])]
|
|
});
|
|
}
|
|
// If the token is a * or an xtype string, we push a filterByXType
|
|
// operation to the stack.
|
|
else {
|
|
operations.push({
|
|
method: filterByXType,
|
|
args: [Ext.String.trim(tokenMatch[2]), Boolean(tokenMatch[3])]
|
|
});
|
|
}
|
|
|
|
// Now we slice of the part we just converted into an operation
|
|
selector = selector.replace(tokenMatch[0], '');
|
|
}
|
|
|
|
// If the next part of the query is not a space or > or ^, it means we
|
|
// are going to check for more things that our current selection
|
|
// has to comply to.
|
|
while (!(modeMatch = selector.match(modeRe))) {
|
|
// Lets loop over each type of matcher and execute it
|
|
// on our current selector.
|
|
for (i = 0; selector && i < length; i++) {
|
|
matcher = matchers[i];
|
|
selectorMatch = selector.match(matcher.re);
|
|
method = matcher.method;
|
|
|
|
// If we have a match, add an operation with the method
|
|
// associated with this matcher, and pass the regular
|
|
// expression matches are arguments to the operation.
|
|
if (selectorMatch) {
|
|
operations.push({
|
|
method: Ext.isString(matcher.method)
|
|
// Turn a string method into a function by formatting the string with our selector matche expression
|
|
// A new method is created for different match expressions, eg {id=='textfield-1024'}
|
|
// Every expression may be different in different selectors.
|
|
? Ext.functionFactory('items', Ext.String.format.apply(Ext.String, [method].concat(selectorMatch.slice(1))))
|
|
: matcher.method,
|
|
args: selectorMatch.slice(1)
|
|
});
|
|
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] + '"');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Now we are going to check for a mode change. This means a space
|
|
// or a > to determine if we are going to select all the children
|
|
// of the currently matched items, or a ^ if we are going to use the
|
|
// ownerCt axis as the candidate source.
|
|
if (modeMatch[1]) { // Assignment, and test for truthiness!
|
|
operations.push({
|
|
mode: modeMatch[2]||modeMatch[1]
|
|
});
|
|
selector = selector.replace(modeMatch[0], '');
|
|
}
|
|
}
|
|
|
|
// Now that we have all our operations in an array, we are going
|
|
// to create a new Query using these operations.
|
|
return new cq.Query({
|
|
operations: operations
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
/*
|
|
* The dirty implementation in this class is quite naive. The reasoning for this is that the dirty state
|
|
* will only be used in very specific circumstances, specifically, after the render process has begun but
|
|
* the component is not yet rendered to the DOM. As such, we want it to perform as quickly as possible
|
|
* so it's not as fully featured as you may expect.
|
|
*/
|
|
|
|
/**
|
|
* Manages certain element-like data prior to rendering. These values are passed
|
|
* on to the render process. This is currently used to manage the "class" and "style" attributes
|
|
* of a component's primary el as well as the bodyEl of panels. This allows things like
|
|
* addBodyCls in Panel to share logic with addCls in AbstractComponent.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.ProtoElement', (function () {
|
|
var splitWords = Ext.String.splitWords,
|
|
toMap = Ext.Array.toMap;
|
|
|
|
return {
|
|
|
|
isProtoEl: true,
|
|
|
|
/**
|
|
* The property name for the className on the data object passed to {@link #writeTo}.
|
|
*/
|
|
clsProp: 'cls',
|
|
|
|
/**
|
|
* The property name for the style on the data object passed to {@link #writeTo}.
|
|
*/
|
|
styleProp: 'style',
|
|
|
|
/**
|
|
* The property name for the removed classes on the data object passed to {@link #writeTo}.
|
|
*/
|
|
removedProp: 'removed',
|
|
|
|
/**
|
|
* True if the style must be converted to text during {@link #writeTo}. When used to
|
|
* populate tpl data, this will be true. When used to populate {@link Ext.DomHelper}
|
|
* specs, this will be false (the default).
|
|
*/
|
|
styleIsText: false,
|
|
|
|
constructor: function (config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
me.classList = splitWords(me.cls);
|
|
me.classMap = toMap(me.classList);
|
|
delete me.cls;
|
|
|
|
if (Ext.isFunction(me.style)) {
|
|
me.styleFn = me.style;
|
|
delete me.style;
|
|
} else if (typeof me.style == 'string') {
|
|
me.style = Ext.Element.parseStyles(me.style);
|
|
} else if (me.style) {
|
|
me.style = Ext.apply({}, me.style); // don't edit the given object
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Indicates that the current state of the object has been flushed to the DOM, so we need
|
|
* to track any subsequent changes
|
|
*/
|
|
flush: function(){
|
|
this.flushClassList = [];
|
|
this.removedClasses = {};
|
|
// clear the style, it will be recreated if we add anything new
|
|
delete this.style;
|
|
delete this.unselectableAttr;
|
|
},
|
|
|
|
/**
|
|
* Adds class to the element.
|
|
* @param {String} cls One or more classnames separated with spaces.
|
|
* @return {Ext.util.ProtoElement} this
|
|
*/
|
|
addCls: function (cls) {
|
|
var me = this,
|
|
add = (typeof cls === 'string') ? splitWords(cls) : cls,
|
|
length = add.length,
|
|
list = me.classList,
|
|
map = me.classMap,
|
|
flushList = me.flushClassList,
|
|
i = 0,
|
|
c;
|
|
|
|
for (; i < length; ++i) {
|
|
c = add[i];
|
|
if (!map[c]) {
|
|
map[c] = true;
|
|
list.push(c);
|
|
if (flushList) {
|
|
flushList.push(c);
|
|
delete me.removedClasses[c];
|
|
}
|
|
}
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* True if the element has given class.
|
|
* @param {String} cls
|
|
* @return {Boolean}
|
|
*/
|
|
hasCls: function (cls) {
|
|
return cls in this.classMap;
|
|
},
|
|
|
|
/**
|
|
* Removes class from the element.
|
|
* @param {String} cls One or more classnames separated with spaces.
|
|
* @return {Ext.util.ProtoElement} this
|
|
*/
|
|
removeCls: function (cls) {
|
|
var me = this,
|
|
list = me.classList,
|
|
newList = (me.classList = []),
|
|
remove = toMap(splitWords(cls)),
|
|
length = list.length,
|
|
map = me.classMap,
|
|
removedClasses = me.removedClasses,
|
|
i, c;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
c = list[i];
|
|
if (remove[c]) {
|
|
if (removedClasses) {
|
|
if (map[c]) {
|
|
removedClasses[c] = true;
|
|
Ext.Array.remove(me.flushClassList, c);
|
|
}
|
|
}
|
|
delete map[c];
|
|
} else {
|
|
newList.push(c);
|
|
}
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Adds styles to the element.
|
|
* @param {String/Object} prop The style property to be set, or an object of multiple styles.
|
|
* @param {String} [value] The value to apply to the given property.
|
|
* @return {Ext.util.ProtoElement} this
|
|
*/
|
|
setStyle: function (prop, value) {
|
|
var me = this,
|
|
style = me.style || (me.style = {});
|
|
|
|
if (typeof prop == 'string') {
|
|
if (arguments.length === 1) {
|
|
me.setStyle(Ext.Element.parseStyles(prop));
|
|
} else {
|
|
style[prop] = value;
|
|
}
|
|
} else {
|
|
Ext.apply(style, prop);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
unselectable: function() {
|
|
// See Ext.dom.Element.unselectable for an explanation of what is required to make an element unselectable
|
|
this.addCls(Ext.dom.Element.unselectableCls);
|
|
|
|
if (Ext.isOpera) {
|
|
this.unselectableAttr = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Writes style and class properties to given object.
|
|
* Styles will be written to {@link #styleProp} and class names to {@link #clsProp}.
|
|
* @param {Object} to
|
|
* @return {Object} to
|
|
*/
|
|
writeTo: function (to) {
|
|
var me = this,
|
|
classList = me.flushClassList || me.classList,
|
|
removedClasses = me.removedClasses,
|
|
style;
|
|
|
|
if (me.styleFn) {
|
|
style = Ext.apply({}, me.styleFn());
|
|
Ext.apply(style, me.style);
|
|
} else {
|
|
style = me.style;
|
|
}
|
|
|
|
to[me.clsProp] = classList.join(' ');
|
|
|
|
if (style) {
|
|
to[me.styleProp] = me.styleIsText ? Ext.DomHelper.generateStyles(style) : style;
|
|
}
|
|
|
|
if (removedClasses) {
|
|
removedClasses = Ext.Object.getKeys(removedClasses);
|
|
if (removedClasses.length) {
|
|
to[me.removedProp] = removedClasses.join(' ');
|
|
}
|
|
}
|
|
|
|
if (me.unselectableAttr) {
|
|
to.unselectable = 'on';
|
|
}
|
|
|
|
return to;
|
|
}
|
|
};
|
|
}()));
|
|
|
|
/**
|
|
* Provides a registry of available Plugin classes indexed by a mnemonic code known as the Plugin's ptype.
|
|
*
|
|
* A plugin may be specified simply as a *config object* as long as the correct `ptype` is specified:
|
|
*
|
|
* {
|
|
* ptype: 'gridviewdragdrop',
|
|
* dragText: 'Drag and drop to reorganize'
|
|
* }
|
|
*
|
|
* Or just use the ptype on its own:
|
|
*
|
|
* 'gridviewdragdrop'
|
|
*
|
|
* Alternatively you can instantiate the plugin with Ext.create:
|
|
*
|
|
* Ext.create('Ext.grid.plugin.DragDrop', {
|
|
* dragText: 'Drag and drop to reorganize'
|
|
* })
|
|
*/
|
|
Ext.define('Ext.PluginManager', {
|
|
extend: Ext.AbstractManager ,
|
|
alternateClassName: 'Ext.PluginMgr',
|
|
singleton: true,
|
|
typeName: 'ptype',
|
|
|
|
/**
|
|
* Creates a new Plugin from the specified config object using the config object's ptype to determine the class to
|
|
* instantiate.
|
|
* @param {Object} config A configuration object for the Plugin you wish to create.
|
|
* @param {Function} defaultType (optional) The constructor to provide the default Plugin type if the config object does not
|
|
* contain a `ptype`. (Optional if the config contains a `ptype`).
|
|
* @return {Ext.Component} The newly instantiated Plugin.
|
|
*/
|
|
create : function(config, defaultType, host) {
|
|
var result;
|
|
|
|
if (config.init) {
|
|
result = config;
|
|
} else {
|
|
// Inject the host into the config is we know the host
|
|
if (host) {
|
|
config = Ext.apply({}, config); // copy since we are going to modify
|
|
config.cmp = host;
|
|
}
|
|
// Grab the host ref if it was configured in
|
|
else {
|
|
host = config.cmp;
|
|
}
|
|
|
|
if (config.xclass) {
|
|
result = Ext.create(config);
|
|
} else {
|
|
// Lookup the class from the ptype and instantiate unless its a singleton
|
|
result = Ext.ClassManager.getByAlias(('plugin.' + (config.ptype || defaultType)));
|
|
|
|
if (typeof result === 'function') {
|
|
result = new result(config);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If we come out with a non-null plugin, ensure that any setCmp is called once.
|
|
if (result && host && result.setCmp && !result.setCmpCalled) {
|
|
result.setCmp(host);
|
|
result.setCmpCalled = true;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Returns all plugins registered with the given type. Here, 'type' refers to the type of plugin, not its ptype.
|
|
* @param {String} type The type to search for
|
|
* @param {Boolean} defaultsOnly True to only return plugins of this type where the plugin's isDefault property is
|
|
* truthy
|
|
* @return {Ext.AbstractPlugin[]} All matching plugins
|
|
*/
|
|
findByType: function(type, defaultsOnly) {
|
|
var matches = [],
|
|
types = this.types,
|
|
name,
|
|
item;
|
|
|
|
for (name in types) {
|
|
if (!types.hasOwnProperty(name)) {
|
|
continue;
|
|
}
|
|
item = types[name];
|
|
|
|
if (item.type == type && (!defaultsOnly || (defaultsOnly === true && item.isDefault))) {
|
|
matches.push(item);
|
|
}
|
|
}
|
|
|
|
return matches;
|
|
}
|
|
}, function() {
|
|
/**
|
|
* Shorthand for {@link Ext.PluginManager#registerType}
|
|
* @param {String} ptype The ptype mnemonic string by which the Plugin class
|
|
* may be looked up.
|
|
* @param {Function} cls The new Plugin class.
|
|
* @member Ext
|
|
* @method preg
|
|
*/
|
|
Ext.preg = function() {
|
|
return Ext.PluginManager.registerType.apply(Ext.PluginManager, arguments);
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Represents a filter that can be applied to a {@link Ext.util.MixedCollection MixedCollection}. Can either simply
|
|
* filter on a property/value pair or pass in a filter function with custom logic. Filters are always used in the
|
|
* context of MixedCollections, though {@link Ext.data.Store Store}s frequently create them when filtering and searching
|
|
* on their records. Example usage:
|
|
*
|
|
* //set up a fictional MixedCollection containing a few people to filter on
|
|
* var allNames = new Ext.util.MixedCollection();
|
|
* allNames.addAll([
|
|
* {id: 1, name: 'Ed', age: 25},
|
|
* {id: 2, name: 'Jamie', age: 37},
|
|
* {id: 3, name: 'Abe', age: 32},
|
|
* {id: 4, name: 'Aaron', age: 26},
|
|
* {id: 5, name: 'David', age: 32}
|
|
* ]);
|
|
*
|
|
* var ageFilter = new Ext.util.Filter({
|
|
* property: 'age',
|
|
* value : 32
|
|
* });
|
|
*
|
|
* var longNameFilter = new Ext.util.Filter({
|
|
* filterFn: function(item) {
|
|
* return item.name.length > 4;
|
|
* }
|
|
* });
|
|
*
|
|
* //a new MixedCollection with the 3 names longer than 4 characters
|
|
* var longNames = allNames.filter(longNameFilter);
|
|
*
|
|
* //a new MixedCollection with the 2 people of age 32:
|
|
* var youngFolk = allNames.filter(ageFilter);
|
|
*
|
|
*/
|
|
Ext.define('Ext.util.Filter', {
|
|
|
|
/**
|
|
* @cfg {String} property
|
|
* The property to filter on. Required unless a {@link #filterFn} is passed
|
|
*/
|
|
/**
|
|
* @cfg {Mixed} value
|
|
* The value to filter on. Required unless a {@link #filterFn} is passed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} filterFn
|
|
* A custom filter function which is passed each item in the {@link Ext.util.MixedCollection} in turn. Should return
|
|
* `true` to accept each item or `false` to reject it.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [id]
|
|
* An identifier by which this Filter is indexed in a {@link Ext.data.Store#property-filters Store's filters collection}
|
|
*
|
|
* Identified Filters may be individually removed from a Store's filter set by using {@link Ext.data.Store#removeFilter}.
|
|
*
|
|
* Anonymous Filters may be removed en masse by passing `null` to {@link Ext.data.Store#removeFilter}.
|
|
*/
|
|
id: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} anyMatch
|
|
* True to allow any match - no regex start/end line anchors will be added.
|
|
*/
|
|
anyMatch: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} exactMatch
|
|
* True to force exact match (^ and $ characters added to the regex). Ignored if anyMatch is true.
|
|
*/
|
|
exactMatch: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} caseSensitive
|
|
* True to make the regex case sensitive (adds 'i' switch to regex).
|
|
*/
|
|
caseSensitive: false,
|
|
|
|
/**
|
|
* @property {Boolean} disabled
|
|
* Setting this property to `true` disables this individual Filter so that it no longer contributes to a {@link Ext.data.Store#property-filters Store's filter set}
|
|
*
|
|
* When disabled, the next time the store is filtered, the Filter plays no part in filtering and records eliminated by it may rejoin the dataset.
|
|
*
|
|
*/
|
|
disabled: false,
|
|
|
|
/**
|
|
* @cfg {String} [operator]
|
|
* The operator to use to compare the {@link #cfg-property} to this Filter's {@link #cfg-value}
|
|
*
|
|
* Possible values are:
|
|
* * <
|
|
* * <=
|
|
* * =
|
|
* * >=
|
|
* * >
|
|
* * !=
|
|
*/
|
|
operator: null,
|
|
|
|
/**
|
|
* @cfg {String} root
|
|
* Optional root property. This is mostly useful when filtering a Store, in which case we set the root to 'data' to
|
|
* make the filter pull the {@link #property} out of the data object of each item
|
|
*/
|
|
|
|
statics: {
|
|
/**
|
|
* Creates a single filter function which encapsulates the passed Filter array.
|
|
* @param {Ext.util.Filter[]} filters The filter set for which to create a filter function
|
|
* @return {Function} a function, which when passed a candidate object returns `true` if
|
|
* the candidate passes all the specified Filters.
|
|
*/
|
|
createFilterFn: function(filters) {
|
|
return filters && filters.length ? function(candidate) {
|
|
var isMatch = true,
|
|
length = filters.length,
|
|
i, filter;
|
|
|
|
for (i = 0; isMatch && i < length; i++) {
|
|
filter = filters[i];
|
|
|
|
// Disabling a filter stops it from contributing to the overall filter function.
|
|
if (!filter.disabled) {
|
|
isMatch = isMatch && filter.filterFn.call(filter.scope || filter, candidate);
|
|
}
|
|
}
|
|
return isMatch;
|
|
} : function() {
|
|
return true;
|
|
};
|
|
}
|
|
},
|
|
|
|
operatorFns: {
|
|
"<": function(candidate) {
|
|
return Ext.coerce(this.getRoot(candidate)[this.property], this.value) < this.value;
|
|
},
|
|
"<=": function(candidate) {
|
|
return Ext.coerce(this.getRoot(candidate)[this.property], this.value) <= this.value;
|
|
},
|
|
"=": function(candidate) {
|
|
return Ext.coerce(this.getRoot(candidate)[this.property], this.value) == this.value;
|
|
},
|
|
">=": function(candidate) {
|
|
return Ext.coerce(this.getRoot(candidate)[this.property], this.value) >= this.value;
|
|
},
|
|
">": function(candidate) {
|
|
return Ext.coerce(this.getRoot(candidate)[this.property], this.value) > this.value;
|
|
},
|
|
"!=": function(candidate) {
|
|
return Ext.coerce(this.getRoot(candidate)[this.property], this.value) != this.value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates new Filter.
|
|
* @param {Object} [config] Config object
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
me.initialConfig = config;
|
|
Ext.apply(me, config);
|
|
|
|
//we're aliasing filter to filterFn mostly for API cleanliness reasons, despite the fact it dirties the code here.
|
|
//Ext.util.Sorter takes a sorterFn property but allows .sort to be called - we do the same here
|
|
me.filter = me.filter || me.filterFn;
|
|
|
|
if (me.filter === undefined) {
|
|
me.setValue(config.value);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Changes the value that this filter tests its configured (@link #cfg-property} with.
|
|
* @param {Mixed} value The new value to compare the property with.
|
|
*/
|
|
setValue: function(value) {
|
|
var me = this;
|
|
me.value = value;
|
|
if (me.property === undefined || me.value === undefined) {
|
|
// Commented this out temporarily because it stops us using string ids in models. TODO: Remove this once
|
|
// Model has been updated to allow string ids
|
|
|
|
// Ext.Error.raise("A Filter requires either a property or a filterFn to be set");
|
|
} else {
|
|
me.filter = me.createFilterFn();
|
|
}
|
|
|
|
me.filterFn = me.filter;
|
|
},
|
|
|
|
/**
|
|
* Changes the filtering function which this Filter uses to choose items to include.
|
|
*
|
|
* This replaces any configured {@link #cfg-filterFn} and overrides any {@link #cfg-property} and {@link #cfg-value) settings.
|
|
* @param {Function} filterFn A function which returns `true` or `false` to either include or exclude the passed object.
|
|
* @param {Object} filterFn.value The value for consideration to be included or excluded.
|
|
*
|
|
*/
|
|
setFilterFn: function(filterFn) {
|
|
this.filterFn = this.filter = filterFn;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates a filter function for the configured property/value/anyMatch/caseSensitive options for this Filter
|
|
*/
|
|
createFilterFn: function() {
|
|
var me = this,
|
|
matcher = me.createValueMatcher(),
|
|
property = me.property;
|
|
|
|
if (me.operator) {
|
|
return me.operatorFns[me.operator];
|
|
} else {
|
|
return function(item) {
|
|
var value = me.getRoot(item)[property];
|
|
return matcher === null ? value === null : matcher.test(value);
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the root property of the given item, based on the configured {@link #root} property
|
|
* @param {Object} item The item
|
|
* @return {Object} The root property of the object
|
|
*/
|
|
getRoot: function(item) {
|
|
var root = this.root;
|
|
return root === undefined ? item : item[root];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a regular expression based on the given value and matching options
|
|
*/
|
|
createValueMatcher : function() {
|
|
var me = this,
|
|
value = me.value,
|
|
anyMatch = me.anyMatch,
|
|
exactMatch = me.exactMatch,
|
|
caseSensitive = me.caseSensitive,
|
|
escapeRe = Ext.String.escapeRegex;
|
|
|
|
if (value === null) {
|
|
return value;
|
|
}
|
|
|
|
if (!value.exec) { // not a regex
|
|
value = String(value);
|
|
|
|
if (anyMatch === true) {
|
|
value = escapeRe(value);
|
|
} else {
|
|
value = '^' + escapeRe(value);
|
|
if (exactMatch === true) {
|
|
value += '$';
|
|
}
|
|
}
|
|
value = new RegExp(value, caseSensitive ? '' : 'i');
|
|
}
|
|
|
|
return value;
|
|
},
|
|
|
|
serialize: function() {
|
|
var me = this,
|
|
result = Ext.apply({}, me.initialConfig);
|
|
|
|
result.value = me.value;
|
|
return result;
|
|
}
|
|
}, function() {
|
|
// Operator type '==' is the same as operator type '='
|
|
this.prototype.operatorFns['=='] = this.prototype.operatorFns['='];
|
|
});
|
|
|
|
/**
|
|
* @class Ext.util.AbstractMixedCollection
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.AbstractMixedCollection', {
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} isMixedCollection
|
|
* `true` in this class to identify an object as an instantiated MixedCollection, or subclass thereof.
|
|
*/
|
|
isMixedCollection: true,
|
|
|
|
/**
|
|
* @private Mutation counter which is incremented upon add and remove.
|
|
*/
|
|
generation: 0,
|
|
|
|
/**
|
|
* @private Mutation counter for the index map which is synchronized with the collection's mutation counter
|
|
* when the index map is interrogated and found to be out of sync and needed a rebuild.
|
|
*/
|
|
indexGeneration: 0,
|
|
|
|
constructor: function(allowFunctions, keyFn) {
|
|
var me = this;
|
|
|
|
// Modern constructor signature using a config object
|
|
if (arguments.length === 1 && Ext.isObject(allowFunctions)) {
|
|
me.initialConfig = allowFunctions;
|
|
Ext.apply(me, allowFunctions);
|
|
}
|
|
// Old constructor signature
|
|
else {
|
|
me.allowFunctions = allowFunctions === true;
|
|
if (keyFn) {
|
|
me.getKey = keyFn;
|
|
}
|
|
me.initialConfig = {
|
|
allowFunctions: me.allowFunctions,
|
|
getKey: me.getKey
|
|
};
|
|
}
|
|
|
|
me.items = [];
|
|
me.map = {};
|
|
me.keys = [];
|
|
me.indexMap = {};
|
|
me.length = 0;
|
|
|
|
/**
|
|
* @event clear
|
|
* Fires when the collection is cleared.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event add
|
|
* Fires when an item is added to the collection.
|
|
* @param {Number} index The index at which the item was added.
|
|
* @param {Object} o The item added.
|
|
* @param {String} key The key associated with the added item.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event replace
|
|
* Fires when an item is replaced in the collection.
|
|
* @param {String} key he key associated with the new added.
|
|
* @param {Object} old The item being replaced.
|
|
* @param {Object} new The new item.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event remove
|
|
* Fires when an item is removed from the collection.
|
|
* @param {Object} o The item being removed.
|
|
* @param {String} key (optional) The key associated with the removed item.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
me.mixins.observable.constructor.call(me);
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} allowFunctions Specify <code>true</code> if the {@link #addAll}
|
|
* function should add function references to the collection. Defaults to
|
|
* <code>false</code>.
|
|
* @since 3.4.0
|
|
*/
|
|
allowFunctions : false,
|
|
|
|
/**
|
|
* Adds an item to the collection. Fires the {@link #event-add} event when complete.
|
|
*
|
|
* @param {String/Object} key The key to associate with the item, or the new item.
|
|
*
|
|
* If a {@link #getKey} implementation was specified for this MixedCollection,
|
|
* or if the key of the stored items is in a property called `id`,
|
|
* the MixedCollection will be able to *derive* the key for the new item.
|
|
* In this case just pass the new item in this parameter.
|
|
*
|
|
* @param {Object} [obj] The item to add.
|
|
*
|
|
* @return {Object} The item added.
|
|
* @since 1.1.0
|
|
*/
|
|
add : function(key, obj) {
|
|
var len = this.length,
|
|
out;
|
|
|
|
if (arguments.length === 1) {
|
|
out = this.insert(len, key);
|
|
} else {
|
|
out = this.insert(len, key, obj);
|
|
}
|
|
return out;
|
|
},
|
|
|
|
/**
|
|
* A function which will be called, passing a newly added object
|
|
* when the object is added without a separate id. The function
|
|
* should yield the key by which that object will be indexed.
|
|
*
|
|
* If no key is yielded, then the object will be added, but it
|
|
* cannot be accessed or removed quickly. Finding it in this
|
|
* collection for interrogation or removal will require a linear
|
|
* scan of this collection's items.
|
|
*
|
|
* The default implementation simply returns `item.id` but you can
|
|
* provide your own implementation to return a different value as
|
|
* in the following examples:
|
|
*
|
|
* // normal way
|
|
* var mc = new Ext.util.MixedCollection();
|
|
* mc.add(someEl.dom.id, someEl);
|
|
* mc.add(otherEl.dom.id, otherEl);
|
|
* //and so on
|
|
*
|
|
* // using getKey
|
|
* var mc = new Ext.util.MixedCollection({
|
|
* getKey: function(el){
|
|
* return el.dom.id;
|
|
* }
|
|
* });
|
|
* mc.add(someEl);
|
|
* mc.add(otherEl);
|
|
*
|
|
* @param {Object} item The item for which to find the key.
|
|
* @return {Object} The key for the passed item.
|
|
* @since 1.1.0
|
|
* @template
|
|
*/
|
|
getKey : function(o) {
|
|
return o.id;
|
|
},
|
|
|
|
/**
|
|
* Replaces an item in the collection. Fires the {@link #event-replace} event when complete.
|
|
* @param {String} key The key associated with the item to replace, or the replacement item.
|
|
*
|
|
* If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key
|
|
* of your stored items is in a property called *`id`*, then the MixedCollection
|
|
* will be able to <i>derive</i> the key of the replacement item. If you want to replace an item
|
|
* with one having the same key value, then just pass the replacement item in this parameter.
|
|
*
|
|
* @param o {Object} o (optional) If the first parameter passed was a key, the item to associate
|
|
* with that key.
|
|
* @return {Object} The new item.
|
|
* @since 1.1.0
|
|
*/
|
|
replace : function(key, o) {
|
|
var me = this,
|
|
old,
|
|
index;
|
|
|
|
if (arguments.length == 1) {
|
|
o = arguments[0];
|
|
key = me.getKey(o);
|
|
}
|
|
old = me.map[key];
|
|
if (typeof key == 'undefined' || key === null || typeof old == 'undefined') {
|
|
return me.add(key, o);
|
|
}
|
|
me.generation++;
|
|
index = me.indexOfKey(key);
|
|
me.items[index] = o;
|
|
me.map[key] = o;
|
|
if (me.hasListeners.replace) {
|
|
me.fireEvent('replace', key, old, o);
|
|
}
|
|
return o;
|
|
},
|
|
|
|
/**
|
|
* Change the key for an existing item in the collection. If the old key
|
|
* does not exist this is a no-op.
|
|
* @param {Object} oldKey The old key
|
|
* @param {Object} newKey The new key
|
|
*/
|
|
updateKey: function(oldKey, newKey) {
|
|
var me = this,
|
|
map = me.map,
|
|
indexMap = me.indexMap,
|
|
index = me.indexOfKey(oldKey),
|
|
item;
|
|
|
|
if (index > -1) {
|
|
item = map[oldKey];
|
|
delete map[oldKey];
|
|
delete indexMap[oldKey];
|
|
map[newKey] = item;
|
|
indexMap[newKey] = index;
|
|
me.keys[index] = newKey;
|
|
me.generation++;
|
|
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds all elements of an Array or an Object to the collection.
|
|
* @param {Object/Array} objs An Object containing properties which will be added
|
|
* to the collection, or an Array of values, each of which are added to the collection.
|
|
* Functions references will be added to the collection if `{@link #allowFunctions}`
|
|
* has been set to `true`.
|
|
* @since 1.1.0
|
|
*/
|
|
addAll : function(objs) {
|
|
var me = this,
|
|
key;
|
|
|
|
if (arguments.length > 1 || Ext.isArray(objs)) {
|
|
me.insert(me.length, arguments.length > 1 ? arguments : objs);
|
|
} else {
|
|
for (key in objs) {
|
|
if (objs.hasOwnProperty(key)) {
|
|
if (me.allowFunctions || typeof objs[key] != 'function') {
|
|
me.add(key, objs[key]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for every item in the collection.
|
|
* The function should return a boolean value.
|
|
* Returning false from the function will stop the iteration.
|
|
*
|
|
* @param {Function} fn The function to execute for each item.
|
|
* @param {Mixed} fn.item The collection item.
|
|
* @param {Number} fn.index The index of item.
|
|
* @param {Number} fn.len Total length of collection.
|
|
* @param {Object} scope (optional) The scope (<code>this</code> reference)
|
|
* in which the function is executed. Defaults to the current item in the iteration.
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
each : function(fn, scope){
|
|
var items = Ext.Array.push([], this.items), // each safe for removal
|
|
i = 0,
|
|
len = items.length,
|
|
item;
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
if (fn.call(scope || item, item, i, len) === false) {
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for every key in the collection, passing each
|
|
* key, and its associated item as the first two parameters.
|
|
* @param {Function} fn The function to execute for each item.
|
|
* @param {String} fn.key The key of collection item.
|
|
* @param {Mixed} fn.item The collection item.
|
|
* @param {Number} fn.index The index of item.
|
|
* @param {Number} fn.len Total length of collection.
|
|
* @param {Object} scope (optional) The scope (<code>this</code> reference) in which the
|
|
* function is executed. Defaults to the browser window.
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
eachKey : function(fn, scope){
|
|
var keys = this.keys,
|
|
items = this.items,
|
|
i = 0,
|
|
len = keys.length;
|
|
|
|
for (; i < len; i++) {
|
|
fn.call(scope || window, keys[i], items[i], i, len);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the first item in the collection which elicits a true return value from the
|
|
* passed selection function.
|
|
* @param {Function} fn The selection function to execute for each item.
|
|
* @param {Mixed} fn.item The collection item.
|
|
* @param {String} fn.key The key of collection item.
|
|
* @param {Object} scope (optional) The scope (<code>this</code> reference) in which the
|
|
* function is executed. Defaults to the browser window.
|
|
* @return {Object} The first item in the collection which returned true from the selection
|
|
* function, or null if none was found.
|
|
*/
|
|
findBy : function(fn, scope) {
|
|
var keys = this.keys,
|
|
items = this.items,
|
|
i = 0,
|
|
len = items.length;
|
|
|
|
for (; i < len; i++) {
|
|
if (fn.call(scope || window, items[i], keys[i])) {
|
|
return items[i];
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Returns the first item in the collection which elicits a true return value from the passed selection function.
|
|
* @deprecated 4.0 Use {@link #findBy} instead.
|
|
* @since 1.1.0
|
|
*/
|
|
find : function() {
|
|
if (Ext.isDefined(Ext.global.console)) {
|
|
Ext.global.console.warn('Ext.util.MixedCollection: find has been deprecated. Use findBy instead.');
|
|
}
|
|
return this.findBy.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Inserts an item at the specified index in the collection. Fires the {@link #event-add} event when complete.
|
|
* @param {Number} index The index to insert the item at.
|
|
* @param {String/Object/String[]/Object[]} key The key to associate with the new item, or the item itself.
|
|
* May also be an array of either to insert multiple items at once.
|
|
* @param {Object/Object[]} o (optional) If the second parameter was a key, the new item.
|
|
* May also be an array to insert multiple items at once.
|
|
* @return {Object} The item inserted or an array of items inserted.
|
|
* @since 1.1.0
|
|
*/
|
|
insert : function(index, key, obj) {
|
|
var out;
|
|
if (Ext.isIterable(key)) {
|
|
out = this.doInsert(index, key, obj);
|
|
} else {
|
|
if (arguments.length > 2) {
|
|
out = this.doInsert(index, [key], [obj]);
|
|
} else {
|
|
out = this.doInsert(index, [key]);
|
|
}
|
|
out = out[0];
|
|
}
|
|
return out;
|
|
},
|
|
|
|
// Private multi insert implementation.
|
|
doInsert : function(index, keys, objects) {
|
|
var me = this,
|
|
itemKey,
|
|
removeIndex,
|
|
i, len = keys.length,
|
|
deDupedLen = len,
|
|
fireAdd = me.hasListeners.add,
|
|
syncIndices,
|
|
newKeys = {},
|
|
passedDuplicates,
|
|
oldKeys, oldObjects;
|
|
|
|
// External key(s) passed. We cannot reliably find an object's index using the key extraction fn.
|
|
// Set a flag for use by contains, indexOf and remove
|
|
if (objects != null) {
|
|
me.useLinearSearch = true;
|
|
}
|
|
// No external keys: calculate keys array if not passed
|
|
else {
|
|
objects = keys;
|
|
keys = new Array(len);
|
|
for (i = 0; i < len; i++) {
|
|
keys[i] = this.getKey(objects[i]);
|
|
}
|
|
}
|
|
|
|
// First, remove duplicates of the keys. If a removal point is less than insertion index, decr insertion index
|
|
me.suspendEvents();
|
|
for (i = 0; i < len; i++) {
|
|
itemKey = keys[i];
|
|
|
|
// Must use indexOf - map might be out of sync
|
|
removeIndex = me.indexOfKey(itemKey);
|
|
if (removeIndex !== -1) {
|
|
if (removeIndex < index) {
|
|
index--;
|
|
}
|
|
me.removeAt(removeIndex);
|
|
}
|
|
|
|
if (itemKey != null) {
|
|
// If a previous new item used this key, we will have to rebuild the input arrays from the newKeys map.
|
|
if (newKeys[itemKey] != null) {
|
|
passedDuplicates = true;
|
|
deDupedLen--;
|
|
}
|
|
newKeys[itemKey] = i;
|
|
}
|
|
}
|
|
me.resumeEvents();
|
|
|
|
// Duplicate keys were detected - rebuild the objects and keys arrays from the last values associated with each unique key
|
|
if (passedDuplicates) {
|
|
oldKeys = keys;
|
|
oldObjects = objects;
|
|
keys = new Array(deDupedLen);
|
|
objects = new Array(deDupedLen);
|
|
i = 0;
|
|
|
|
// Loop through unique key hash, properties of which point to last encountered index for that key.
|
|
// Rebuild deduped objects and keys arrays.
|
|
for (itemKey in newKeys) {
|
|
keys[i] = oldKeys[newKeys[itemKey]];
|
|
objects[i] = oldObjects[newKeys[itemKey]];
|
|
i++;
|
|
}
|
|
len = deDupedLen;
|
|
}
|
|
|
|
// If we are appending and the indices are in sync, its cheap to kep them that way
|
|
syncIndices = index === me.length && me.indexGeneration === me.generation;
|
|
|
|
// Insert the new items and new keys in at the insertion point
|
|
Ext.Array.insert(me.items, index, objects);
|
|
Ext.Array.insert(me.keys, index, keys);
|
|
me.length += len;
|
|
me.generation++;
|
|
if (syncIndices) {
|
|
me.indexGeneration = me.generation;
|
|
}
|
|
for (i = 0; i < len; i++, index++) {
|
|
itemKey = keys[i];
|
|
if (itemKey != null) {
|
|
me.map[itemKey] = objects[i];
|
|
|
|
// If the index is still in sync, keep it that way
|
|
if (syncIndices) {
|
|
me.indexMap[itemKey] = index;
|
|
}
|
|
}
|
|
if (fireAdd) {
|
|
me.fireEvent('add', index, objects[i], itemKey);
|
|
}
|
|
}
|
|
return objects;
|
|
},
|
|
|
|
/**
|
|
* Remove an item from the collection.
|
|
* @param {Object} o The item to remove.
|
|
* @return {Object} The item removed or false if no item was removed.
|
|
* @since 1.1.0
|
|
*/
|
|
remove : function(o) {
|
|
var me = this,
|
|
removeKey,
|
|
index;
|
|
|
|
// If
|
|
// We have not been forced into using linear lookup by a usage of the 2 arg form of add
|
|
// and
|
|
// The key extraction function yields a key
|
|
// Then use indexOfKey. This will use the indexMap - rebuilding it if necessary.
|
|
if (!me.useLinearSearch && (removeKey = me.getKey(o))) {
|
|
index = me.indexOfKey(removeKey);
|
|
}
|
|
|
|
// Otherwise we have to do it the slow way with a linear search.
|
|
else {
|
|
index = Ext.Array.indexOf(me.items, o);
|
|
}
|
|
|
|
return (index === -1) ? false : me.removeAt(index);
|
|
},
|
|
|
|
/**
|
|
* Remove all items in the collection. Can also be used
|
|
* to remove only the items in the passed array.
|
|
* @param {Array} [items] An array of items to be removed.
|
|
* @return {Ext.util.MixedCollection} this object
|
|
*/
|
|
removeAll : function(items) {
|
|
var me = this,
|
|
i;
|
|
|
|
if (items || me.hasListeners.remove) {
|
|
// Only perform expensive item-by-item removal if there's a listener or specific items
|
|
if (items) {
|
|
for (i = items.length - 1; i >= 0; --i) {
|
|
me.remove(items[i]);
|
|
}
|
|
} else {
|
|
while (me.length) {
|
|
me.removeAt(0);
|
|
}
|
|
}
|
|
} else {
|
|
me.length = me.items.length = me.keys.length = 0;
|
|
me.map = {};
|
|
me.indexMap = {};
|
|
me.generation++;
|
|
me.indexGeneration = me.generation;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove an item from a specified index in the collection. Fires the {@link #event-remove} event when complete.
|
|
* @param {Number} index The index within the collection of the item to remove.
|
|
* @return {Object} The item removed or false if no item was removed.
|
|
* @since 1.1.0
|
|
*/
|
|
removeAt : function(index) {
|
|
var me = this,
|
|
o,
|
|
key;
|
|
|
|
if (index < me.length && index >= 0) {
|
|
me.length--;
|
|
o = me.items[index];
|
|
Ext.Array.erase(me.items, index, 1);
|
|
key = me.keys[index];
|
|
if (typeof key != 'undefined') {
|
|
delete me.map[key];
|
|
}
|
|
Ext.Array.erase(me.keys, index, 1);
|
|
if (me.hasListeners.remove) {
|
|
me.fireEvent('remove', o, key);
|
|
}
|
|
me.generation++;
|
|
return o;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Remove a range of items starting at a specified index in the collection.
|
|
* Does not fire the remove event.
|
|
* @param {Number} index The index within the collection of the item to remove.
|
|
* @param {Number} [removeCount=1] The nuber of items to remove beginning at the specified index.
|
|
* @return {Object} The last item removed or false if no item was removed.
|
|
*/
|
|
removeRange : function(index, removeCount) {
|
|
var me = this,
|
|
o,
|
|
key,
|
|
i,
|
|
limit,
|
|
syncIndices,
|
|
trimming;
|
|
|
|
if (index < me.length && index >= 0) {
|
|
if (!removeCount) {
|
|
removeCount = 1;
|
|
}
|
|
limit = Math.min(index + removeCount, me.length);
|
|
removeCount = limit - index;
|
|
|
|
// If we are removing from end and the indices are in sync, its cheap to kep them that way
|
|
trimming = limit === me.length;
|
|
syncIndices = trimming && me.indexGeneration === me.generation;
|
|
|
|
// Loop through the to remove indices deleting from the key hashes
|
|
for (i = index; i < limit; i++) {
|
|
key = me.keys[i];
|
|
if (key != null) {
|
|
delete me.map[key];
|
|
if (syncIndices) {
|
|
delete me.indexMap[key];
|
|
}
|
|
}
|
|
}
|
|
// Last item encountered
|
|
o = me.items[i - 1];
|
|
|
|
me.length -= removeCount;
|
|
me.generation++;
|
|
if (syncIndices) {
|
|
me.indexGeneration = me.generation;
|
|
}
|
|
|
|
// Chop items and keys arrays.
|
|
// If trimming the trailing end, we can just truncate the array.
|
|
// We can use splice directly. The IE8 bug which Ext.Array works around only affects *insertion*
|
|
// http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/6e946d03-e09f-4b22-a4dd-cd5e276bf05a/
|
|
if (trimming) {
|
|
me.items.length = me.keys.length = me.length;
|
|
} else {
|
|
me.items.splice(index, removeCount);
|
|
me.keys.splice(index, removeCount);
|
|
}
|
|
|
|
// Return last object removed
|
|
return o;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Removes an item associated with the passed key fom the collection.
|
|
* @param {String} key The key of the item to remove. If `null` is passed,
|
|
* all objects which yielded no key from the configured {@link #getKey} function are removed.
|
|
* @return {Object} Only returned if removing at a specified key. The item removed or false if no item was removed.
|
|
*/
|
|
removeAtKey : function(key) {
|
|
var me = this,
|
|
keys = me.keys,
|
|
i;
|
|
|
|
// Remove objects which yielded no key from our configured getKey function
|
|
if (key == null) {
|
|
for (i = keys.length - 1; i >=0; i--) {
|
|
if (keys[i] == null) {
|
|
me.removeAt(i);
|
|
}
|
|
}
|
|
}
|
|
// Remove object at the passed key
|
|
else {
|
|
return me.removeAt(me.indexOfKey(key));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the number of items in the collection.
|
|
* @return {Number} the number of items in the collection.
|
|
* @since 1.1.0
|
|
*/
|
|
getCount : function() {
|
|
return this.length;
|
|
},
|
|
|
|
/**
|
|
* Returns index within the collection of the passed Object.
|
|
* @param {Object} o The item to find the index of.
|
|
* @return {Number} index of the item. Returns -1 if not found.
|
|
* @since 1.1.0
|
|
*/
|
|
indexOf : function(o) {
|
|
var me = this,
|
|
key;
|
|
|
|
if (o != null) {
|
|
// If
|
|
// We have not been forced into using linear lookup by a usage of the 2 arg form of add
|
|
// and
|
|
// The key extraction function yields a key
|
|
// Then use indexOfKey. This will use the indexMap - rebuilding it if necessary.
|
|
if (!me.useLinearSearch && (key = me.getKey(o))) {
|
|
return this.indexOfKey(key);
|
|
}
|
|
|
|
// Fallback: Use linear search
|
|
return Ext.Array.indexOf(me.items, o);
|
|
}
|
|
|
|
// No object passed
|
|
return -1;
|
|
},
|
|
|
|
/**
|
|
* Returns index within the collection of the passed key.
|
|
* @param {String} key The key to find the index of.
|
|
* @return {Number} index of the key.
|
|
* @since 1.1.0
|
|
*/
|
|
indexOfKey : function(key) {
|
|
if (!this.map.hasOwnProperty(key)) {
|
|
return -1;
|
|
}
|
|
if (this.indexGeneration !== this.generation) {
|
|
this.rebuildIndexMap();
|
|
}
|
|
return this.indexMap[key];
|
|
},
|
|
|
|
rebuildIndexMap: function() {
|
|
var me = this,
|
|
indexMap = me.indexMap = {},
|
|
keys = me.keys,
|
|
len = keys.length,
|
|
i;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
indexMap[keys[i]] = i;
|
|
}
|
|
me.indexGeneration = me.generation;
|
|
},
|
|
|
|
/**
|
|
* Returns the item associated with the passed key OR index.
|
|
* Key has priority over index. This is the equivalent
|
|
* of calling {@link #getByKey} first, then if nothing matched calling {@link #getAt}.
|
|
* @param {String/Number} key The key or index of the item.
|
|
* @return {Object} If the item is found, returns the item. If the item was not found, returns <code>undefined</code>.
|
|
* If an item was found, but is a Class, returns <code>null</code>.
|
|
* @since 1.1.0
|
|
*/
|
|
get : function(key) {
|
|
var me = this,
|
|
mk = me.map[key],
|
|
item = mk !== undefined ? mk : (typeof key == 'number') ? me.items[key] : undefined;
|
|
return typeof item != 'function' || me.allowFunctions ? item : null; // for prototype!
|
|
},
|
|
|
|
/**
|
|
* Returns the item at the specified index.
|
|
* @param {Number} index The index of the item.
|
|
* @return {Object} The item at the specified index.
|
|
*/
|
|
getAt : function(index) {
|
|
return this.items[index];
|
|
},
|
|
|
|
/**
|
|
* Returns the item associated with the passed key.
|
|
* @param {String/Number} key The key of the item.
|
|
* @return {Object} The item associated with the passed key.
|
|
*/
|
|
getByKey : function(key) {
|
|
return this.map[key];
|
|
},
|
|
|
|
/**
|
|
* Returns true if the collection contains the passed Object as an item.
|
|
* @param {Object} o The Object to look for in the collection.
|
|
* @return {Boolean} True if the collection contains the Object as an item.
|
|
* @since 1.1.0
|
|
*/
|
|
contains : function(o) {
|
|
var me = this,
|
|
key;
|
|
|
|
if (o != null) {
|
|
// If
|
|
// We have not been forced into using linear lookup by a usage of the 2 arg form of add
|
|
// and
|
|
// The key extraction function yields a key
|
|
// Then use the map to determine object presence.
|
|
if (!me.useLinearSearch && (key = me.getKey(o))) {
|
|
return this.map[key] != null;
|
|
}
|
|
|
|
// Fallback: Use linear search
|
|
return Ext.Array.indexOf(this.items, o) !== -1;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the collection contains the passed Object as a key.
|
|
* @param {String} key The key to look for in the collection.
|
|
* @return {Boolean} True if the collection contains the Object as a key.
|
|
* @since 1.1.0
|
|
*/
|
|
containsKey : function(key) {
|
|
return this.map.hasOwnProperty(key);
|
|
},
|
|
|
|
/**
|
|
* Removes all items from the collection. Fires the {@link #event-clear} event when complete.
|
|
* @since 1.1.0
|
|
*/
|
|
clear : function() {
|
|
var me = this;
|
|
|
|
// Only clear if it has ever had any content
|
|
if (me.generation) {
|
|
me.length = 0;
|
|
me.items = [];
|
|
me.keys = [];
|
|
me.map = {};
|
|
me.indexMap = {};
|
|
|
|
me.generation++;
|
|
me.indexGeneration = me.generation;
|
|
}
|
|
if (me.hasListeners.clear) {
|
|
me.fireEvent('clear');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the first item in the collection.
|
|
* @return {Object} the first item in the collection..
|
|
* @since 1.1.0
|
|
*/
|
|
first : function() {
|
|
return this.items[0];
|
|
},
|
|
|
|
/**
|
|
* Returns the last item in the collection.
|
|
* @return {Object} the last item in the collection..
|
|
* @since 1.1.0
|
|
*/
|
|
last : function() {
|
|
return this.items[this.length - 1];
|
|
},
|
|
|
|
/**
|
|
* Collects all of the values of the given property and returns their sum
|
|
* @param {String} property The property to sum by
|
|
* @param {String} [root] 'root' property to extract the first argument from. This is used mainly when
|
|
* summing fields in records, where the fields are all stored inside the 'data' object
|
|
* @param {Number} [start=0] The record index to start at
|
|
* @param {Number} [end=-1] The record index to end at
|
|
* @return {Number} The total
|
|
*/
|
|
sum: function(property, root, start, end) {
|
|
var values = this.extractValues(property, root),
|
|
length = values.length,
|
|
sum = 0,
|
|
i;
|
|
|
|
start = start || 0;
|
|
end = (end || end === 0) ? end : length - 1;
|
|
|
|
for (i = start; i <= end; i++) {
|
|
sum += values[i];
|
|
}
|
|
|
|
return sum;
|
|
},
|
|
|
|
/**
|
|
* Collects unique values of a particular property in this MixedCollection
|
|
* @param {String} property The property to collect on
|
|
* @param {String} root (optional) 'root' property to extract the first argument from. This is used mainly when
|
|
* summing fields in records, where the fields are all stored inside the 'data' object
|
|
* @param {Boolean} allowBlank (optional) Pass true to allow null, undefined or empty string values
|
|
* @return {Array} The unique values
|
|
*/
|
|
collect: function(property, root, allowNull) {
|
|
var values = this.extractValues(property, root),
|
|
length = values.length,
|
|
hits = {},
|
|
unique = [],
|
|
value, strValue, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
value = values[i];
|
|
strValue = String(value);
|
|
|
|
if ((allowNull || !Ext.isEmpty(value)) && !hits[strValue]) {
|
|
hits[strValue] = true;
|
|
unique.push(value);
|
|
}
|
|
}
|
|
|
|
return unique;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Extracts all of the given property values from the items in the MC. Mainly used as a supporting method for
|
|
* functions like sum and collect.
|
|
* @param {String} property The property to extract
|
|
* @param {String} root (optional) 'root' property to extract the first argument from. This is used mainly when
|
|
* extracting field data from Model instances, where the fields are stored inside the 'data' object
|
|
* @return {Array} The extracted values
|
|
*/
|
|
extractValues: function(property, root) {
|
|
var values = this.items;
|
|
|
|
if (root) {
|
|
values = Ext.Array.pluck(values, root);
|
|
}
|
|
|
|
return Ext.Array.pluck(values, property);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* For API parity with Store's PageMap class. Buffered rendering checks if the Store has the range
|
|
* required to render. The Store delegates this question to its backing data object which may be an instance
|
|
* of its private PageMap class, or a MixedCollection.
|
|
*/
|
|
hasRange: function(start, end) {
|
|
return (end < this.length);
|
|
},
|
|
|
|
/**
|
|
* Returns a range of items in this collection
|
|
* @param {Number} startIndex (optional) The starting index. Defaults to 0.
|
|
* @param {Number} endIndex (optional) The ending index. Defaults to the last item.
|
|
* @return {Array} An array of items
|
|
* @since 1.1.0
|
|
*/
|
|
getRange : function(start, end){
|
|
var me = this,
|
|
items = me.items,
|
|
range = [],
|
|
len = items.length,
|
|
tmp, reverse;
|
|
|
|
if (len < 1) {
|
|
return range;
|
|
}
|
|
|
|
if (start > end) {
|
|
reverse = true;
|
|
tmp = start;
|
|
start = end;
|
|
end = tmp;
|
|
}
|
|
|
|
if (start < 0) {
|
|
start = 0;
|
|
}
|
|
|
|
if (end == null || end >= len) {
|
|
end = len - 1;
|
|
}
|
|
|
|
range = items.slice(start, end + 1);
|
|
if (reverse && range.length) {
|
|
range.reverse();
|
|
}
|
|
return range;
|
|
},
|
|
|
|
/**
|
|
* <p>Filters the objects in this collection by a set of {@link Ext.util.Filter Filter}s, or by a single
|
|
* property/value pair with optional parameters for substring matching and case sensitivity. See
|
|
* {@link Ext.util.Filter Filter} for an example of using Filter objects (preferred). Alternatively,
|
|
* MixedCollection can be easily filtered by property like this:</p>
|
|
*
|
|
* //create a simple store with a few people defined
|
|
* var people = new Ext.util.MixedCollection();
|
|
* people.addAll([
|
|
* {id: 1, age: 25, name: 'Ed'},
|
|
* {id: 2, age: 24, name: 'Tommy'},
|
|
* {id: 3, age: 24, name: 'Arne'},
|
|
* {id: 4, age: 26, name: 'Aaron'}
|
|
* ]);
|
|
*
|
|
* //a new MixedCollection containing only the items where age == 24
|
|
* var middleAged = people.filter('age', 24);
|
|
*
|
|
* @param {Ext.util.Filter[]/String} property A property on your objects, or an array of {@link Ext.util.Filter Filter} objects
|
|
* @param {String/RegExp} value Either string that the property values
|
|
* should start with or a RegExp to test against the property
|
|
* @param {Boolean} [anyMatch=false] True to match any part of the string, not just the beginning
|
|
* @param {Boolean} [caseSensitive=false] True for case sensitive comparison.
|
|
* @return {Ext.util.MixedCollection} The new filtered collection
|
|
* @since 1.1.0
|
|
*/
|
|
filter : function(property, value, anyMatch, caseSensitive) {
|
|
var filters = [];
|
|
|
|
//support for the simple case of filtering by property/value
|
|
if (Ext.isString(property)) {
|
|
filters.push(new Ext.util.Filter({
|
|
property : property,
|
|
value : value,
|
|
anyMatch : anyMatch,
|
|
caseSensitive: caseSensitive
|
|
}));
|
|
} else if (Ext.isArray(property) || property instanceof Ext.util.Filter) {
|
|
filters = filters.concat(property);
|
|
}
|
|
|
|
// At this point we have an array of zero or more Ext.util.Filter objects to filter with,
|
|
// so here we construct a function that combines these filters by ANDing them together
|
|
// and filter by that.
|
|
return this.filterBy(Ext.util.Filter.createFilterFn(filters));
|
|
},
|
|
|
|
/**
|
|
* Filter by a function. Returns a <i>new</i> collection that has been filtered.
|
|
* The passed function will be called with each object in the collection.
|
|
* If the function returns true, the value is included otherwise it is filtered.
|
|
* @param {Function} fn The function to be called.
|
|
* @param {Mixed} fn.item The collection item.
|
|
* @param {String} fn.key The key of collection item.
|
|
* @param {Object} scope (optional) The scope (<code>this</code> reference) in
|
|
* which the function is executed. Defaults to this MixedCollection.
|
|
* @return {Ext.util.MixedCollection} The new filtered collection
|
|
* @since 1.1.0
|
|
*/
|
|
filterBy : function(fn, scope) {
|
|
var me = this,
|
|
newMC = new me.self(me.initialConfig),
|
|
keys = me.keys,
|
|
items = me.items,
|
|
length = items.length,
|
|
i;
|
|
|
|
newMC.getKey = me.getKey;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
if (fn.call(scope || me, items[i], keys[i])) {
|
|
newMC.add(keys[i], items[i]);
|
|
}
|
|
}
|
|
|
|
return newMC;
|
|
},
|
|
|
|
/**
|
|
* Finds the index of the first matching object in this collection by a specific property/value.
|
|
* @param {String} property The name of a property on your objects.
|
|
* @param {String/RegExp} value A string that the property values
|
|
* should start with or a RegExp to test against the property.
|
|
* @param {Number} [start=0] The index to start searching at.
|
|
* @param {Boolean} [anyMatch=false] True to match any part of the string, not just the beginning.
|
|
* @param {Boolean} [caseSensitive=false] True for case sensitive comparison.
|
|
* @return {Number} The matched index or -1
|
|
* @since 2.3.0
|
|
*/
|
|
findIndex : function(property, value, start, anyMatch, caseSensitive){
|
|
if(Ext.isEmpty(value, false)){
|
|
return -1;
|
|
}
|
|
value = this.createValueMatcher(value, anyMatch, caseSensitive);
|
|
return this.findIndexBy(function(o){
|
|
return o && value.test(o[property]);
|
|
}, null, start);
|
|
},
|
|
|
|
/**
|
|
* Find the index of the first matching object in this collection by a function.
|
|
* If the function returns <i>true</i> it is considered a match.
|
|
* @param {Function} fn The function to be called.
|
|
* @param {Mixed} fn.item The collection item.
|
|
* @param {String} fn.key The key of collection item.
|
|
* @param {Object} [scope] The scope (<code>this</code> reference) in which the function is executed. Defaults to this MixedCollection.
|
|
* @param {Number} [start=0] The index to start searching at.
|
|
* @return {Number} The matched index or -1
|
|
* @since 2.3.0
|
|
*/
|
|
findIndexBy : function(fn, scope, start){
|
|
var me = this,
|
|
keys = me.keys,
|
|
items = me.items,
|
|
i = start || 0,
|
|
len = items.length;
|
|
|
|
for (; i < len; i++) {
|
|
if (fn.call(scope || me, items[i], keys[i])) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
},
|
|
|
|
/**
|
|
* Returns a regular expression based on the given value and matching options. This is used internally for finding and filtering,
|
|
* and by Ext.data.Store#filter
|
|
* @private
|
|
* @param {String} value The value to create the regex for. This is escaped using Ext.escapeRe
|
|
* @param {Boolean} anyMatch True to allow any match - no regex start/end line anchors will be added. Defaults to false
|
|
* @param {Boolean} caseSensitive True to make the regex case sensitive (adds 'i' switch to regex). Defaults to false.
|
|
* @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
|
|
* @since 3.4.0
|
|
*/
|
|
createValueMatcher : function(value, anyMatch, caseSensitive, exactMatch) {
|
|
if (!value.exec) { // not a regex
|
|
var er = Ext.String.escapeRegex;
|
|
value = String(value);
|
|
|
|
if (anyMatch === true) {
|
|
value = er(value);
|
|
} else {
|
|
value = '^' + er(value);
|
|
if (exactMatch === true) {
|
|
value += '$';
|
|
}
|
|
}
|
|
value = new RegExp(value, caseSensitive ? '' : 'i');
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Creates a shallow copy of this collection
|
|
* @return {Ext.util.MixedCollection}
|
|
* @since 1.1.0
|
|
*/
|
|
clone : function() {
|
|
var me = this,
|
|
copy = new this.self(me.initialConfig);
|
|
|
|
copy.add(me.keys, me.items);
|
|
return copy;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Represents a single sorter that can be applied to a Store. The sorter is used
|
|
* to compare two values against each other for the purpose of ordering them. Ordering
|
|
* is achieved by specifying either:
|
|
*
|
|
* - {@link #property A sorting property}
|
|
* - {@link #sorterFn A sorting function}
|
|
*
|
|
* As a contrived example, we can specify a custom sorter that sorts by rank:
|
|
*
|
|
* Ext.define('Person', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['name', 'rank']
|
|
* });
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* model: 'Person',
|
|
* proxy: 'memory',
|
|
* sorters: [{
|
|
* sorterFn: function(o1, o2){
|
|
* var getRank = function(o){
|
|
* var name = o.get('rank');
|
|
* if (name === 'first') {
|
|
* return 1;
|
|
* } else if (name === 'second') {
|
|
* return 2;
|
|
* } else {
|
|
* return 3;
|
|
* }
|
|
* },
|
|
* rank1 = getRank(o1),
|
|
* rank2 = getRank(o2);
|
|
*
|
|
* if (rank1 === rank2) {
|
|
* return 0;
|
|
* }
|
|
*
|
|
* return rank1 < rank2 ? -1 : 1;
|
|
* }
|
|
* }],
|
|
* data: [{
|
|
* name: 'Person1',
|
|
* rank: 'second'
|
|
* }, {
|
|
* name: 'Person2',
|
|
* rank: 'third'
|
|
* }, {
|
|
* name: 'Person3',
|
|
* rank: 'first'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.util.Sorter', {
|
|
|
|
/**
|
|
* @cfg {String} property
|
|
* The property to sort by. Required unless {@link #sorterFn} is provided. The property is extracted from the object
|
|
* directly and compared for sorting using the built in comparison operators.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} sorterFn
|
|
* A specific sorter function to execute. Can be passed instead of {@link #property}. This sorter function allows
|
|
* for any kind of custom/complex comparisons. The sorterFn receives two arguments, the objects being compared. The
|
|
* function should return:
|
|
*
|
|
* - -1 if o1 is "less than" o2
|
|
* - 0 if o1 is "equal" to o2
|
|
* - 1 if o1 is "greater than" o2
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} root
|
|
* Optional root property. This is mostly useful when sorting a Store, in which case we set the root to 'data' to
|
|
* make the filter pull the {@link #property} out of the data object of each item
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} transform
|
|
* A function that will be run on each value before it is compared in the sorter. The function will receive a single
|
|
* argument, the value.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} direction
|
|
* The direction to sort by.
|
|
*/
|
|
direction: "ASC",
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
|
|
me.updateSortFunction();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates and returns a function which sorts an array by the given property and direction
|
|
* @return {Function} A function which sorts by the property/direction combination provided
|
|
*/
|
|
createSortFunction: function(sorterFn) {
|
|
var me = this,
|
|
direction = me.direction || "ASC",
|
|
modifier = direction.toUpperCase() == "DESC" ? -1 : 1;
|
|
|
|
//create a comparison function. Takes 2 objects, returns 1 if object 1 is greater,
|
|
//-1 if object 2 is greater or 0 if they are equal
|
|
return function(o1, o2) {
|
|
return modifier * sorterFn.call(me, o1, o2);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Basic default sorter function that just compares the defined property of each object
|
|
*/
|
|
defaultSorterFn: function(o1, o2) {
|
|
var me = this,
|
|
transform = me.transform,
|
|
v1 = me.getRoot(o1)[me.property],
|
|
v2 = me.getRoot(o2)[me.property];
|
|
|
|
if (transform) {
|
|
v1 = transform(v1);
|
|
v2 = transform(v2);
|
|
}
|
|
|
|
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the root property of the given item, based on the configured {@link #root} property
|
|
* @param {Object} item The item
|
|
* @return {Object} The root property of the object
|
|
*/
|
|
getRoot: function(item) {
|
|
return this.root === undefined ? item : item[this.root];
|
|
},
|
|
|
|
/**
|
|
* Set the sorting direction for this sorter.
|
|
* @param {String} direction The direction to sort in. Should be either 'ASC' or 'DESC'.
|
|
*/
|
|
setDirection: function(direction) {
|
|
var me = this;
|
|
me.direction = direction ? direction.toUpperCase() : direction;
|
|
me.updateSortFunction();
|
|
},
|
|
|
|
/**
|
|
* Toggles the sorting direction for this sorter.
|
|
*/
|
|
toggle: function() {
|
|
var me = this;
|
|
me.direction = Ext.String.toggle(me.direction, "ASC", "DESC");
|
|
me.updateSortFunction();
|
|
},
|
|
|
|
/**
|
|
* Update the sort function for this sorter.
|
|
* @param {Function} [fn] A new sorter function for this sorter. If not specified it will use the default
|
|
* sorting function.
|
|
*/
|
|
updateSortFunction: function(fn) {
|
|
var me = this;
|
|
fn = fn || me.sorterFn || me.defaultSorterFn;
|
|
me.sort = me.createSortFunction(fn);
|
|
},
|
|
|
|
serialize: function() {
|
|
return {
|
|
root: this.root,
|
|
property: this.property,
|
|
direction: this.direction
|
|
};
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Tommy Maintz <tommy@sencha.com>
|
|
*
|
|
* A mixin which allows a data component to be sorted. This is used by e.g. {@link Ext.data.Store} and {@link Ext.data.TreeStore}.
|
|
*
|
|
* **NOTE**: This mixin is mainly for internal use and most users should not need to use it directly. It
|
|
* is more likely you will want to use one of the component classes that import this mixin, such as
|
|
* {@link Ext.data.Store} or {@link Ext.data.TreeStore}.
|
|
*/
|
|
Ext.define("Ext.util.Sortable", {
|
|
/**
|
|
* @property {Boolean} isSortable
|
|
* `true` in this class to identify an object as an instantiated Sortable, or subclass thereof.
|
|
*/
|
|
isSortable: true,
|
|
|
|
/**
|
|
* @cfg {String} defaultSortDirection
|
|
* The default sort direction to use if one is not specified.
|
|
*/
|
|
defaultSortDirection: "ASC",
|
|
|
|
|
|
|
|
|
|
|
|
statics: {
|
|
/**
|
|
* Creates a single comparator function which encapsulates the passed Sorter array.
|
|
* @param {Ext.util.Sorter[]} sorters The sorter set for which to create a comparator function
|
|
* @return {Function} a function, which when passed two comparable objects returns the result
|
|
* of the whole sorter comparator functions.
|
|
*/
|
|
createComparator: function(sorters) {
|
|
return sorters && sorters.length ? function(r1, r2) {
|
|
var result = sorters[0].sort(r1, r2),
|
|
length = sorters.length,
|
|
i = 1;
|
|
|
|
// if we have more than one sorter, OR any additional sorter functions together
|
|
for (; i < length; i++) {
|
|
result = result || sorters[i].sort.call(this, r1, r2);
|
|
}
|
|
return result;
|
|
}: function() {
|
|
return 0;
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} sortRoot
|
|
* The property in each item that contains the data to sort.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.util.Sorter[]/Object[]} sorters
|
|
* The initial set of {@link Ext.util.Sorter Sorters}
|
|
*/
|
|
|
|
/**
|
|
* Performs initialization of this mixin. Component classes using this mixin should call this method during their
|
|
* own initialization.
|
|
*/
|
|
initSortable: function() {
|
|
var me = this,
|
|
sorters = me.sorters;
|
|
|
|
/**
|
|
* @property {Ext.util.MixedCollection} sorters
|
|
* The collection of {@link Ext.util.Sorter Sorters} currently applied to this Store
|
|
*/
|
|
me.sorters = new Ext.util.AbstractMixedCollection(false, function(item) {
|
|
return item.id || item.property;
|
|
});
|
|
|
|
if (sorters) {
|
|
me.sorters.addAll(me.decodeSorters(sorters));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sorts the data in the Store by one or more of its properties. Example usage:
|
|
*
|
|
* //sort by a single field
|
|
* myStore.sort('myField', 'DESC');
|
|
*
|
|
* //sorting by multiple fields
|
|
* myStore.sort([
|
|
* {
|
|
* property : 'age',
|
|
* direction: 'ASC'
|
|
* },
|
|
* {
|
|
* property : 'name',
|
|
* direction: 'DESC'
|
|
* }
|
|
* ]);
|
|
*
|
|
* Internally, Store converts the passed arguments into an array of {@link Ext.util.Sorter} instances, and delegates
|
|
* the actual sorting to its internal {@link Ext.util.MixedCollection}.
|
|
*
|
|
* When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code:
|
|
*
|
|
* store.sort('myField');
|
|
* store.sort('myField');
|
|
*
|
|
* Is equivalent to this code, because Store handles the toggling automatically:
|
|
*
|
|
* store.sort('myField', 'ASC');
|
|
* store.sort('myField', 'DESC');
|
|
*
|
|
* @param {String/Ext.util.Sorter[]} [sorters] Either a string name of one of the fields in this Store's configured
|
|
* {@link Ext.data.Model Model}, or an array of sorter configurations.
|
|
* @param {String} [direction="ASC"] The overall direction to sort the data by.
|
|
* @return {Ext.util.Sorter[]}
|
|
*/
|
|
sort: function(sorters, direction, where, doSort) {
|
|
var me = this,
|
|
sorter,
|
|
newSorters;
|
|
|
|
if (Ext.isArray(sorters)) {
|
|
doSort = where;
|
|
where = direction;
|
|
newSorters = sorters;
|
|
}
|
|
else if (Ext.isObject(sorters)) {
|
|
doSort = where;
|
|
where = direction;
|
|
newSorters = [sorters];
|
|
}
|
|
else if (Ext.isString(sorters)) {
|
|
sorter = me.sorters.get(sorters);
|
|
|
|
if (!sorter) {
|
|
sorter = {
|
|
property : sorters,
|
|
direction: direction
|
|
};
|
|
newSorters = [sorter];
|
|
}
|
|
else if (direction === undefined) {
|
|
sorter.toggle();
|
|
}
|
|
else {
|
|
sorter.setDirection(direction);
|
|
}
|
|
}
|
|
|
|
if (newSorters && newSorters.length) {
|
|
newSorters = me.decodeSorters(newSorters);
|
|
if (Ext.isString(where)) {
|
|
if (where === 'prepend') {
|
|
me.sorters.insert(0, newSorters);
|
|
}
|
|
else {
|
|
me.sorters.addAll(newSorters);
|
|
}
|
|
}
|
|
else {
|
|
me.sorters.clear();
|
|
me.sorters.addAll(newSorters);
|
|
}
|
|
}
|
|
|
|
if (doSort !== false) {
|
|
me.fireEvent('beforesort', me, newSorters);
|
|
me.onBeforeSort(newSorters);
|
|
|
|
sorters = me.sorters.items;
|
|
if (sorters.length) {
|
|
// Sort using a generated sorter function which combines all of the Sorters passed
|
|
me.doSort(me.generateComparator());
|
|
}
|
|
}
|
|
|
|
return sorters;
|
|
},
|
|
|
|
/**
|
|
* Returns a comparator function which compares two items and returns -1, 0, or 1 depending
|
|
* on the currently defined set of {@link #cfg-sorters}.
|
|
*
|
|
* If there are no {@link #cfg-sorters} defined, it returns a function which returns `0` meaning
|
|
* that no sorting will occur.
|
|
*/
|
|
generateComparator: function() {
|
|
var sorters = this.sorters.getRange();
|
|
return sorters.length ? this.createComparator(sorters) : this.emptyComparator;
|
|
},
|
|
|
|
emptyComparator: function(){
|
|
return 0;
|
|
},
|
|
|
|
onBeforeSort: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* Normalizes an array of sorter objects, ensuring that they are all Ext.util.Sorter instances
|
|
* @param {Object[]} sorters The sorters array
|
|
* @return {Ext.util.Sorter[]} Array of Ext.util.Sorter objects
|
|
*/
|
|
decodeSorters: function(sorters) {
|
|
if (!Ext.isArray(sorters)) {
|
|
if (sorters === undefined) {
|
|
sorters = [];
|
|
} else {
|
|
sorters = [sorters];
|
|
}
|
|
}
|
|
|
|
var length = sorters.length,
|
|
Sorter = Ext.util.Sorter,
|
|
fields = this.model ? this.model.prototype.fields : null,
|
|
field,
|
|
config, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
config = sorters[i];
|
|
|
|
if (!(config instanceof Sorter)) {
|
|
if (Ext.isString(config)) {
|
|
config = {
|
|
property: config
|
|
};
|
|
}
|
|
|
|
Ext.applyIf(config, {
|
|
root : this.sortRoot,
|
|
direction: "ASC"
|
|
});
|
|
|
|
//support for 3.x style sorters where a function can be defined as 'fn'
|
|
if (config.fn) {
|
|
config.sorterFn = config.fn;
|
|
}
|
|
|
|
//support a function to be passed as a sorter definition
|
|
if (typeof config == 'function') {
|
|
config = {
|
|
sorterFn: config
|
|
};
|
|
}
|
|
|
|
// ensure sortType gets pushed on if necessary
|
|
if (fields && !config.transform) {
|
|
field = fields.get(config.property);
|
|
config.transform = field && field.sortType !== Ext.identityFn ? field.sortType : undefined;
|
|
}
|
|
sorters[i] = new Ext.util.Sorter(config);
|
|
}
|
|
}
|
|
|
|
return sorters;
|
|
},
|
|
|
|
getSorters: function() {
|
|
return this.sorters.items;
|
|
},
|
|
|
|
/**
|
|
* Gets the first sorter from the sorters collection, excluding
|
|
* any groupers that may be in place
|
|
* @protected
|
|
* @return {Ext.util.Sorter} The sorter, null if none exist
|
|
*/
|
|
getFirstSorter: function(){
|
|
var sorters = this.sorters.items,
|
|
len = sorters.length,
|
|
i = 0,
|
|
sorter;
|
|
|
|
for (; i < len; ++i) {
|
|
sorter = sorters[i];
|
|
if (!sorter.isGrouper) {
|
|
return sorter;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}, function() {
|
|
// Reference the static implementation in prototype
|
|
this.prototype.createComparator = this.createComparator;
|
|
});
|
|
|
|
/**
|
|
* Represents a collection of a set of key and value pairs. Each key in the MixedCollection
|
|
* must be unique, the same key cannot exist twice. This collection is ordered, items in the
|
|
* collection can be accessed by index or via the key. Newly added items are added to
|
|
* the end of the collection. This class is similar to {@link Ext.util.HashMap} however it
|
|
* is heavier and provides more functionality. Sample usage:
|
|
*
|
|
* var coll = new Ext.util.MixedCollection();
|
|
* coll.add('key1', 'val1');
|
|
* coll.add('key2', 'val2');
|
|
* coll.add('key3', 'val3');
|
|
*
|
|
* console.log(coll.get('key1')); // prints 'val1'
|
|
* console.log(coll.indexOfKey('key3')); // prints 2
|
|
*
|
|
* The MixedCollection also has support for sorting and filtering of the values in the collection.
|
|
*
|
|
* var coll = new Ext.util.MixedCollection();
|
|
* coll.add('key1', 100);
|
|
* coll.add('key2', -100);
|
|
* coll.add('key3', 17);
|
|
* coll.add('key4', 0);
|
|
* var biggerThanZero = coll.filterBy(function(value){
|
|
* return value > 0;
|
|
* });
|
|
* console.log(biggerThanZero.getCount()); // prints 2
|
|
*
|
|
*/
|
|
Ext.define('Ext.util.MixedCollection', {
|
|
extend: Ext.util.AbstractMixedCollection ,
|
|
mixins: {
|
|
sortable: Ext.util.Sortable
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} allowFunctions
|
|
* Configure as `true` if the {@link #addAll} function should add function references to the collection.
|
|
*/
|
|
|
|
/**
|
|
* Creates new MixedCollection.
|
|
* @param {Object} config A configuration object.
|
|
* @param {Boolean} [config.allowFunctions=false] Specify `true` if the {@link #addAll}
|
|
* function should add function references to the collection.
|
|
* @param {Function} [config.getKey] A function that can accept an item of the type(s) stored in this MixedCollection
|
|
* and return the key value for that item. This is used when available to look up the key on items that
|
|
* were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is
|
|
* equivalent to overriding the {@link #method-getKey} method.
|
|
*/
|
|
constructor: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.addEvents('sort');
|
|
me.mixins.sortable.initSortable.call(me);
|
|
},
|
|
|
|
doSort: function(sorterFn) {
|
|
this.sortBy(sorterFn);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Performs the actual sorting based on a direction and a sorting function. Internally,
|
|
* this creates a temporary array of all items in the MixedCollection, sorts it and then writes
|
|
* the sorted array data back into this.items and this.keys
|
|
* @param {String} property Property to sort by ('key', 'value', or 'index')
|
|
* @param {String} dir (optional) Direction to sort 'ASC' or 'DESC'. Defaults to 'ASC'.
|
|
* @param {Function} fn (optional) Comparison function that defines the sort order.
|
|
* Defaults to sorting by numeric value.
|
|
*/
|
|
_sort : function(property, dir, fn) {
|
|
var me = this,
|
|
i, len,
|
|
dsc = String(dir).toUpperCase() == 'DESC' ? -1 : 1,
|
|
|
|
//this is a temporary array used to apply the sorting function
|
|
c = [],
|
|
keys = me.keys,
|
|
items = me.items,
|
|
o;
|
|
|
|
//default to a simple sorter function if one is not provided
|
|
fn = fn || function(a, b) {
|
|
return a - b;
|
|
};
|
|
|
|
//copy all the items into a temporary array, which we will sort
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
c[c.length] = {
|
|
key : keys[i],
|
|
value: items[i],
|
|
index: i
|
|
};
|
|
}
|
|
|
|
//sort the temporary array
|
|
Ext.Array.sort(c, function(a, b) {
|
|
return fn(a[property], b[property]) * dsc ||
|
|
// In case of equality, ensure stable sort by comparing collection index
|
|
(a.index < b.index ? -1 : 1);
|
|
});
|
|
|
|
// Copy the temporary array back into the main this.items and this.keys objects
|
|
// Repopulate the indexMap hash if configured to do so.
|
|
for (i = 0, len = c.length; i < len; i++) {
|
|
o = c[i];
|
|
items[i] = o.value;
|
|
keys[i] = o.key;
|
|
me.indexMap[o.key] = i;
|
|
}
|
|
me.generation++;
|
|
me.indexGeneration = me.generation;
|
|
me.fireEvent('sort', me);
|
|
},
|
|
|
|
/**
|
|
* Sorts the collection by a single sorter function
|
|
* @param {Function} sorterFn The function to sort by
|
|
*/
|
|
sortBy: function(sorterFn) {
|
|
var me = this,
|
|
items = me.items,
|
|
item,
|
|
keys = me.keys,
|
|
key,
|
|
length = items.length,
|
|
i;
|
|
|
|
// Stamp the collection index into each item so that we can implement stable sort
|
|
for (i = 0; i < length; i++) {
|
|
items[i].$extCollectionIndex = i;
|
|
}
|
|
|
|
Ext.Array.sort(items, function(a, b) {
|
|
return sorterFn(a, b) ||
|
|
// In case of equality, ensure stable sort by comparing collection index
|
|
(a.$extCollectionIndex < b.$extCollectionIndex ? -1 : 1);
|
|
});
|
|
|
|
// Update the keys array, and remove the index
|
|
for (i = 0; i < length; i++) {
|
|
item = items[i];
|
|
key = me.getKey(item);
|
|
keys[i] = key;
|
|
me.indexMap[key] = i;
|
|
delete items.$extCollectionIndex;
|
|
}
|
|
me.generation++;
|
|
me.indexGeneration = me.generation;
|
|
me.fireEvent('sort', me, items, keys);
|
|
},
|
|
|
|
/**
|
|
* Calculates the insertion index of the new item based upon the comparison function passed, or the current sort order.
|
|
* @param {Object} newItem The new object to find the insertion position of.
|
|
* @param {Function} [sorterFn] The function to sort by. This is the same as the sorting function
|
|
* passed to {@link #sortBy}. It accepts 2 items from this MixedCollection, and returns -1 0, or 1
|
|
* depending on the relative sort positions of the 2 compared items.
|
|
*
|
|
* If omitted, a function {@link #generateComparator generated} from the currently defined set of
|
|
* {@link #cfg-sorters} will be used.
|
|
*
|
|
* @return {Number} The insertion point to add the new item into this MixedCollection at using {@link #insert}
|
|
*/
|
|
findInsertionIndex: function(newItem, sorterFn) {
|
|
var me = this,
|
|
items = me.items,
|
|
start = 0,
|
|
end = items.length - 1,
|
|
middle,
|
|
comparison;
|
|
|
|
if (!sorterFn) {
|
|
sorterFn = me.generateComparator();
|
|
}
|
|
while (start <= end) {
|
|
middle = (start + end) >> 1;
|
|
comparison = sorterFn(newItem, items[middle]);
|
|
if (comparison >= 0) {
|
|
start = middle + 1;
|
|
} else if (comparison < 0) {
|
|
end = middle - 1;
|
|
}
|
|
}
|
|
return start;
|
|
},
|
|
|
|
/**
|
|
* Reorders each of the items based on a mapping from old index to new index. Internally this
|
|
* just translates into a sort. The 'sort' event is fired whenever reordering has occured.
|
|
* @param {Object} mapping Mapping from old item index to new item index
|
|
*/
|
|
reorder: function(mapping) {
|
|
var me = this,
|
|
items = me.items,
|
|
index = 0,
|
|
length = items.length,
|
|
order = [],
|
|
remaining = [],
|
|
oldIndex;
|
|
|
|
me.suspendEvents();
|
|
|
|
//object of {oldPosition: newPosition} reversed to {newPosition: oldPosition}
|
|
for (oldIndex in mapping) {
|
|
order[mapping[oldIndex]] = items[oldIndex];
|
|
}
|
|
|
|
for (index = 0; index < length; index++) {
|
|
if (mapping[index] == undefined) {
|
|
remaining.push(items[index]);
|
|
}
|
|
}
|
|
|
|
for (index = 0; index < length; index++) {
|
|
if (order[index] == undefined) {
|
|
order[index] = remaining.shift();
|
|
}
|
|
}
|
|
|
|
me.clear();
|
|
me.addAll(order);
|
|
|
|
me.resumeEvents();
|
|
me.fireEvent('sort', me);
|
|
},
|
|
|
|
/**
|
|
* Sorts this collection by <b>key</b>s.
|
|
* @param {String} direction (optional) 'ASC' or 'DESC'. Defaults to 'ASC'.
|
|
* @param {Function} fn (optional) Comparison function that defines the sort order.
|
|
* Defaults to sorting by case insensitive string.
|
|
*/
|
|
sortByKey : function(dir, fn){
|
|
this._sort('key', dir, fn || function(a, b){
|
|
var v1 = String(a).toUpperCase(), v2 = String(b).toUpperCase();
|
|
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.Target
|
|
|
|
This class specifies a generic target for an animation. It provides a wrapper around a
|
|
series of different types of objects to allow for a generic animation API.
|
|
A target can be a single object or a Composite object containing other objects that are
|
|
to be animated. This class and it's subclasses are generally not created directly, the
|
|
underlying animation will create the appropriate Ext.fx.target.Target object by passing
|
|
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}
|
|
|
|
* @markdown
|
|
* @abstract
|
|
*/
|
|
Ext.define('Ext.fx.target.Target', {
|
|
|
|
isAnimTarget: true,
|
|
|
|
/**
|
|
* Creates new Target.
|
|
* @param {Ext.Component/Ext.Element/Ext.draw.Sprite} target The object to be animated
|
|
*/
|
|
constructor: function(target) {
|
|
this.target = target;
|
|
this.id = this.getId();
|
|
},
|
|
|
|
getId: function() {
|
|
return this.target.id;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.Element
|
|
*
|
|
* This class represents a animation target for an {@link Ext.Element}. In general this class will not be
|
|
* created directly, the {@link Ext.Element} will be passed to the animation and
|
|
* and the appropriate target will be created.
|
|
*/
|
|
Ext.define('Ext.fx.target.Element', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.Target ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'element',
|
|
|
|
getElVal: function(el, attr, val) {
|
|
if (val == undefined) {
|
|
if (attr === 'x') {
|
|
val = el.getX();
|
|
} else if (attr === 'y') {
|
|
val = el.getY();
|
|
} else if (attr === 'scrollTop') {
|
|
val = el.getScroll().top;
|
|
} else if (attr === 'scrollLeft') {
|
|
val = el.getScroll().left;
|
|
} else if (attr === 'height') {
|
|
val = el.getHeight();
|
|
} else if (attr === 'width') {
|
|
val = el.getWidth();
|
|
} else {
|
|
val = el.getStyle(attr);
|
|
}
|
|
}
|
|
return val;
|
|
},
|
|
|
|
getAttr: function(attr, val) {
|
|
var el = this.target;
|
|
return [[ el, this.getElVal(el, attr, val)]];
|
|
},
|
|
|
|
setAttr: function(targetData) {
|
|
var target = this.target,
|
|
ln = targetData.length,
|
|
attrs, attr, o, i, j, ln2;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
attrs = targetData[i].attrs;
|
|
for (attr in attrs) {
|
|
if (attrs.hasOwnProperty(attr)) {
|
|
ln2 = attrs[attr].length;
|
|
for (j = 0; j < ln2; j++) {
|
|
o = attrs[attr][j];
|
|
this.setElVal(o[0], attr, o[1]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
setElVal: function(element, attr, value){
|
|
if (attr === 'x') {
|
|
element.setX(value);
|
|
} else if (attr === 'y') {
|
|
element.setY(value);
|
|
} else if (attr === 'scrollTop') {
|
|
element.scrollTo('top', value);
|
|
} else if (attr === 'scrollLeft') {
|
|
element.scrollTo('left',value);
|
|
} else if (attr === 'width') {
|
|
element.setWidth(value);
|
|
} else if (attr === 'height') {
|
|
element.setHeight(value);
|
|
} else {
|
|
element.setStyle(attr, value);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.ElementCSS
|
|
*
|
|
* This class represents a animation target for an {@link Ext.Element} that supports CSS
|
|
* based animation. In general this class will not be created directly, the {@link Ext.Element}
|
|
* will be passed to the animation and the appropriate target will be created.
|
|
*/
|
|
Ext.define('Ext.fx.target.ElementCSS', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.Element ,
|
|
|
|
/* End Definitions */
|
|
|
|
setAttr: function(targetData, isFirstFrame) {
|
|
var cssArr = {
|
|
attrs: [],
|
|
duration: [],
|
|
easing: []
|
|
},
|
|
ln = targetData.length,
|
|
attributes,
|
|
attrs,
|
|
attr,
|
|
easing,
|
|
duration,
|
|
o,
|
|
i,
|
|
j,
|
|
ln2;
|
|
for (i = 0; i < ln; i++) {
|
|
attrs = targetData[i];
|
|
duration = attrs.duration;
|
|
easing = attrs.easing;
|
|
attrs = attrs.attrs;
|
|
for (attr in attrs) {
|
|
if (Ext.Array.indexOf(cssArr.attrs, attr) == -1) {
|
|
cssArr.attrs.push(attr.replace(/[A-Z]/g, function(v) {
|
|
return '-' + v.toLowerCase();
|
|
}));
|
|
cssArr.duration.push(duration + 'ms');
|
|
cssArr.easing.push(easing);
|
|
}
|
|
}
|
|
}
|
|
attributes = cssArr.attrs.join(',');
|
|
duration = cssArr.duration.join(',');
|
|
easing = cssArr.easing.join(', ');
|
|
for (i = 0; i < ln; i++) {
|
|
attrs = targetData[i].attrs;
|
|
for (attr in attrs) {
|
|
ln2 = attrs[attr].length;
|
|
for (j = 0; j < ln2; j++) {
|
|
o = attrs[attr][j];
|
|
o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', isFirstFrame ? '' : attributes);
|
|
o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', isFirstFrame ? '' : duration);
|
|
o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', isFirstFrame ? '' : easing);
|
|
o[0].setStyle(attr, o[1]);
|
|
|
|
// Must trigger reflow to make this get used as the start point for the transition that follows
|
|
if (isFirstFrame) {
|
|
o = o[0].dom.offsetWidth;
|
|
}
|
|
else {
|
|
// Remove transition properties when completed.
|
|
o[0].on(Ext.supports.CSS3TransitionEnd, function() {
|
|
this.setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', null);
|
|
this.setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', null);
|
|
this.setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', null);
|
|
}, o[0], { single: true });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.CompositeElement
|
|
*
|
|
* This class represents a animation target for a {@link Ext.CompositeElement}. It allows
|
|
* each {@link Ext.Element} in the group to be animated as a whole. In general this class will not be
|
|
* created directly, the {@link Ext.CompositeElement} will be passed to the animation and
|
|
* and the appropriate target will be created.
|
|
*/
|
|
Ext.define('Ext.fx.target.CompositeElement', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.Element ,
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @property {Boolean} isComposite
|
|
* `true` in this class to identify an object as an instantiated CompositeElement, or subclass thereof.
|
|
*/
|
|
isComposite: true,
|
|
|
|
constructor: function(target) {
|
|
target.id = target.id || Ext.id(null, 'ext-composite-');
|
|
this.callParent([target]);
|
|
},
|
|
|
|
getAttr: function(attr, val) {
|
|
var out = [],
|
|
target = this.target,
|
|
elements = target.elements,
|
|
length = elements.length,
|
|
i,
|
|
el;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
el = elements[i];
|
|
|
|
if (el) {
|
|
el = target.getElement(el);
|
|
out.push([el, this.getElVal(el, attr, val)]);
|
|
}
|
|
}
|
|
|
|
return out;
|
|
},
|
|
|
|
setAttr: function(targetData){
|
|
var target = this.target,
|
|
ln = targetData.length,
|
|
elements = target.elements,
|
|
ln3 = elements.length,
|
|
value, k,
|
|
attrs, attr, o, i, j, ln2;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
attrs = targetData[i].attrs;
|
|
for (attr in attrs) {
|
|
if (attrs.hasOwnProperty(attr)) {
|
|
ln2 = attrs[attr].length;
|
|
for (j = 0; j < ln2; j++) {
|
|
value = attrs[attr][j][1];
|
|
for (k = 0; k < ln3; ++k) {
|
|
el = elements[k];
|
|
if (el) {
|
|
el = target.getElement(el);
|
|
this.setElVal(el, attr, value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.CompositeElementCSS
|
|
*
|
|
* This class represents a animation target for a {@link Ext.CompositeElement}, where the
|
|
* constituent elements support CSS based animation. It allows each {@link Ext.Element} in
|
|
* the group to be animated as a whole. In general this class will not be created directly,
|
|
* the {@link Ext.CompositeElement} will be passed to the animation and the appropriate target
|
|
* will be created.
|
|
*/
|
|
Ext.define('Ext.fx.target.CompositeElementCSS', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.CompositeElement ,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
setAttr: function() {
|
|
return Ext.fx.target.ElementCSS.prototype.setAttr.apply(this, arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.Sprite
|
|
|
|
This class represents an animation target for a {@link Ext.draw.Sprite}. In general this class will not be
|
|
created directly, the {@link Ext.draw.Sprite} will be passed to the animation and
|
|
and the appropriate target will be created.
|
|
|
|
* @markdown
|
|
*/
|
|
|
|
Ext.define('Ext.fx.target.Sprite', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.Target ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'draw',
|
|
|
|
getFromPrim: function (sprite, attr) {
|
|
var obj;
|
|
switch (attr) {
|
|
case 'rotate':
|
|
case 'rotation':
|
|
obj = sprite.attr.rotation;
|
|
return {
|
|
x: obj.x || 0,
|
|
y: obj.y || 0,
|
|
degrees: obj.degrees || 0
|
|
};
|
|
case 'scale':
|
|
case 'scaling':
|
|
obj = sprite.attr.scaling;
|
|
return {
|
|
x: obj.x || 1,
|
|
y: obj.y || 1,
|
|
cx: obj.cx || 0,
|
|
cy: obj.cy || 0
|
|
};
|
|
case 'translate':
|
|
case 'translation':
|
|
obj = sprite.attr.translation;
|
|
return {
|
|
x: obj.x || 0,
|
|
y: obj.y || 0
|
|
};
|
|
default:
|
|
return sprite.attr[attr];
|
|
}
|
|
},
|
|
|
|
getAttr: function (attr, val) {
|
|
return [
|
|
[this.target, val != undefined ? val : this.getFromPrim(this.target, attr)]
|
|
];
|
|
},
|
|
|
|
setAttr: function (targetData) {
|
|
var ln = targetData.length,
|
|
spriteArr = [],
|
|
attrsConf, attr, attrArr, attrs, sprite, idx, value, i, j, x, y, ln2;
|
|
for (i = 0; i < ln; i++) {
|
|
attrsConf = targetData[i].attrs;
|
|
for (attr in attrsConf) {
|
|
attrArr = attrsConf[attr];
|
|
ln2 = attrArr.length;
|
|
for (j = 0; j < ln2; j++) {
|
|
sprite = attrArr[j][0];
|
|
attrs = attrArr[j][1];
|
|
if (attr === 'translate' || attr === 'translation') {
|
|
value = {
|
|
x: attrs.x,
|
|
y: attrs.y
|
|
};
|
|
}
|
|
else if (attr === 'rotate' || attr === 'rotation') {
|
|
x = attrs.x;
|
|
if (isNaN(x)) {
|
|
x = null;
|
|
}
|
|
y = attrs.y;
|
|
if (isNaN(y)) {
|
|
y = null;
|
|
}
|
|
value = {
|
|
degrees: attrs.degrees,
|
|
x: x,
|
|
y: y
|
|
};
|
|
} else if (attr === 'scale' || attr === 'scaling') {
|
|
x = attrs.x;
|
|
if (isNaN(x)) {
|
|
x = null;
|
|
}
|
|
y = attrs.y;
|
|
if (isNaN(y)) {
|
|
y = null;
|
|
}
|
|
value = {
|
|
x: x,
|
|
y: y,
|
|
cx: attrs.cx,
|
|
cy: attrs.cy
|
|
};
|
|
}
|
|
else if (attr === 'width' || attr === 'height' || attr === 'x' || attr === 'y') {
|
|
value = parseFloat(attrs);
|
|
}
|
|
else {
|
|
value = attrs;
|
|
}
|
|
idx = Ext.Array.indexOf(spriteArr, sprite);
|
|
if (idx == -1) {
|
|
spriteArr.push([sprite, {}]);
|
|
idx = spriteArr.length - 1;
|
|
}
|
|
spriteArr[idx][1][attr] = value;
|
|
}
|
|
}
|
|
}
|
|
ln = spriteArr.length;
|
|
for (i = 0; i < ln; i++) {
|
|
spriteArr[i][0].setAttributes(spriteArr[i][1]);
|
|
}
|
|
this.target.redraw();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.CompositeSprite
|
|
|
|
This class represents a animation target for a {@link Ext.draw.CompositeSprite}. It allows
|
|
each {@link Ext.draw.Sprite} in the group to be animated as a whole. In general this class will not be
|
|
created directly, the {@link Ext.draw.CompositeSprite} will be passed to the animation and
|
|
and the appropriate target will be created.
|
|
|
|
* @markdown
|
|
*/
|
|
|
|
Ext.define('Ext.fx.target.CompositeSprite', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.Sprite ,
|
|
|
|
/* End Definitions */
|
|
|
|
getAttr: function(attr, val) {
|
|
var out = [],
|
|
sprites = [].concat(this.target.items),
|
|
length = sprites.length,
|
|
i,
|
|
sprite;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
sprite = sprites[i];
|
|
out.push([sprite, val != undefined ? val : this.getFromPrim(sprite, attr)]);
|
|
}
|
|
|
|
return out;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.target.Component
|
|
*
|
|
* This class represents a animation target for a {@link Ext.Component}. In general this class will not be
|
|
* created directly, the {@link Ext.Component} will be passed to the animation and
|
|
* and the appropriate target will be created.
|
|
*/
|
|
Ext.define('Ext.fx.target.Component', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.fx.target.Target ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'component',
|
|
|
|
// Methods to call to retrieve unspecified "from" values from a target Component
|
|
getPropMethod: {
|
|
top: function() {
|
|
return this.getPosition(true)[1];
|
|
},
|
|
left: function() {
|
|
return this.getPosition(true)[0];
|
|
},
|
|
x: function() {
|
|
return this.getPosition()[0];
|
|
},
|
|
y: function() {
|
|
return this.getPosition()[1];
|
|
},
|
|
height: function() {
|
|
return this.getHeight();
|
|
},
|
|
width: function() {
|
|
return this.getWidth();
|
|
},
|
|
opacity: function() {
|
|
return this.el.getStyle('opacity');
|
|
}
|
|
},
|
|
|
|
setMethods: {
|
|
top: 'setPosition',
|
|
left: 'setPosition',
|
|
x: 'setPagePosition',
|
|
y: 'setPagePosition',
|
|
height: 'setSize',
|
|
width: 'setSize',
|
|
opacity: 'setOpacity'
|
|
},
|
|
|
|
// Read the named attribute from the target Component. Use the defined getter for the attribute
|
|
getAttr: function(attr, val) {
|
|
return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];
|
|
},
|
|
|
|
setAttr: function(targetData, isFirstFrame, isLastFrame) {
|
|
var me = this,
|
|
ln = targetData.length,
|
|
attrs, attr, o, i, j, targets, left, top, w, h,
|
|
methodsToCall = {},
|
|
methodProps;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
attrs = targetData[i].attrs;
|
|
for (attr in attrs) {
|
|
targets = attrs[attr].length;
|
|
for (j = 0; j < targets; j++) {
|
|
o = attrs[attr][j];
|
|
methodProps = methodsToCall[me.setMethods[attr]] || (methodsToCall[me.setMethods[attr]] = {});
|
|
methodProps.target = o[0];
|
|
methodProps[attr] = o[1];
|
|
// debugging code: Ext.log('Setting ' + o[0].id + "'s " + attr + ' to ' + o[1]);
|
|
}
|
|
}
|
|
if (methodsToCall.setPosition) {
|
|
o = methodsToCall.setPosition;
|
|
left = (o.left === undefined) ? undefined : parseFloat(o.left);
|
|
top = (o.top === undefined) ? undefined : parseFloat(o.top);
|
|
o.target.setPosition(left, top);
|
|
}
|
|
if (methodsToCall.setPagePosition) {
|
|
o = methodsToCall.setPagePosition;
|
|
o.target.setPagePosition(o.x, o.y);
|
|
}
|
|
if (methodsToCall.setSize) {
|
|
o = methodsToCall.setSize;
|
|
// Dimensions not being animated MUST NOT be autosized. They must remain at current value.
|
|
w = (o.width === undefined) ? o.target.getWidth() : parseFloat(o.width);
|
|
h = (o.height === undefined) ? o.target.getHeight() : parseFloat(o.height);
|
|
|
|
// Only set the size of the Component on the last frame, or if the animation was
|
|
// configured with dynamic: true.
|
|
// In other cases, we just set the target element size.
|
|
// This will result in either clipping if animating a reduction in size, or the revealing of
|
|
// the inner elements of the Component if animating an increase in size.
|
|
// Component's animate function initially resizes to the larger size before resizing the
|
|
// outer element to clip the contents.
|
|
o.target.el.setSize(w, h);
|
|
if (isLastFrame || me.dynamic) {
|
|
// Defer the final sizing & layout until we are outside of this frame.
|
|
// In case anything in the resulting layout calls animation.
|
|
// If it does, *this* frame will fire again... recursively
|
|
Ext.globalEvents.on({
|
|
idle: Ext.Function.bind(o.target.setSize, o.target, [w, h]),
|
|
single: true
|
|
});
|
|
}
|
|
}
|
|
if (methodsToCall.setOpacity) {
|
|
o = methodsToCall.setOpacity;
|
|
o.target.el.setStyle('opacity', o.opacity);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.Queue
|
|
* Animation Queue mixin to handle chaining and queueing by target.
|
|
* @private
|
|
*/
|
|
|
|
Ext.define('Ext.fx.Queue', {
|
|
|
|
|
|
|
|
constructor: function() {
|
|
this.targets = new Ext.util.HashMap();
|
|
this.fxQueue = {};
|
|
},
|
|
|
|
// @private
|
|
getFxDefaults: function(targetId) {
|
|
var target = this.targets.get(targetId);
|
|
if (target) {
|
|
return target.fxDefaults;
|
|
}
|
|
return {};
|
|
},
|
|
|
|
// @private
|
|
setFxDefaults: function(targetId, obj) {
|
|
var target = this.targets.get(targetId);
|
|
if (target) {
|
|
target.fxDefaults = Ext.apply(target.fxDefaults || {}, obj);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
stopAnimation: function(targetId) {
|
|
var me = this,
|
|
queue = me.getFxQueue(targetId),
|
|
ln = queue.length;
|
|
while (ln) {
|
|
queue[ln - 1].end();
|
|
ln--;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns current animation object if the element has any effects actively running or queued, else returns false.
|
|
*/
|
|
getActiveAnimation: function(targetId) {
|
|
var queue = this.getFxQueue(targetId);
|
|
return (queue && !!queue.length) ? queue[0] : false;
|
|
},
|
|
|
|
// @private
|
|
hasFxBlock: function(targetId) {
|
|
var queue = this.getFxQueue(targetId);
|
|
return queue && queue[0] && queue[0].block;
|
|
},
|
|
|
|
// @private get fx queue for passed target, create if needed.
|
|
getFxQueue: function(targetId) {
|
|
if (!targetId) {
|
|
return false;
|
|
}
|
|
var me = this,
|
|
queue = me.fxQueue[targetId],
|
|
target = me.targets.get(targetId);
|
|
|
|
if (!target) {
|
|
return false;
|
|
}
|
|
|
|
if (!queue) {
|
|
me.fxQueue[targetId] = [];
|
|
// GarbageCollector will need to clean up Elements since they aren't currently observable
|
|
if (target.type != 'element') {
|
|
target.target.on('destroy', function() {
|
|
me.fxQueue[targetId] = [];
|
|
});
|
|
}
|
|
}
|
|
return me.fxQueue[targetId];
|
|
},
|
|
|
|
// @private
|
|
queueFx: function(anim) {
|
|
var me = this,
|
|
target = anim.target,
|
|
queue, ln;
|
|
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
queue = me.getFxQueue(target.getId());
|
|
ln = queue.length;
|
|
|
|
if (ln) {
|
|
if (anim.concurrent) {
|
|
anim.paused = false;
|
|
}
|
|
else {
|
|
queue[ln - 1].on('afteranimate', function() {
|
|
anim.paused = false;
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
anim.paused = false;
|
|
}
|
|
anim.on('afteranimate', function() {
|
|
Ext.Array.remove(queue, anim);
|
|
if (queue.length === 0) {
|
|
me.targets.remove(anim.target);
|
|
}
|
|
if (anim.remove) {
|
|
if (target.type == 'element') {
|
|
var el = Ext.get(target.id);
|
|
if (el) {
|
|
el.remove();
|
|
}
|
|
}
|
|
}
|
|
}, me, {
|
|
single: true
|
|
});
|
|
queue.push(anim);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.Manager
|
|
* Animation Manager which keeps track of all current animations and manages them on a frame by frame basis.
|
|
* @private
|
|
* @singleton
|
|
*/
|
|
|
|
Ext.define('Ext.fx.Manager', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
queue: Ext.fx.Queue
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
me.items = new Ext.util.MixedCollection();
|
|
me.mixins.queue.constructor.call(me);
|
|
|
|
// Do not use fireIdleEvent: false. Each tick of the TaskRunner needs to fire the idleEvent
|
|
// in case an animation callback/listener adds a listener.
|
|
me.taskRunner = new Ext.util.TaskRunner();
|
|
|
|
// this.requestAnimFrame = (function() {
|
|
// var raf = window.requestAnimationFrame ||
|
|
// window.webkitRequestAnimationFrame ||
|
|
// window.mozRequestAnimationFrame ||
|
|
// window.oRequestAnimationFrame ||
|
|
// window.msRequestAnimationFrame;
|
|
// if (raf) {
|
|
// return function(callback, element) {
|
|
// raf(callback);
|
|
// };
|
|
// }
|
|
// else {
|
|
// return function(callback, element) {
|
|
// window.setTimeout(callback, Ext.fx.Manager.interval);
|
|
// };
|
|
// }
|
|
// })();
|
|
},
|
|
|
|
/**
|
|
* @cfg {Number} interval Default interval in miliseconds to calculate each frame. Defaults to 16ms (~60fps)
|
|
*/
|
|
interval: 16,
|
|
|
|
/**
|
|
* @cfg {Boolean} forceJS Force the use of JavaScript-based animation instead of CSS3 animation, even when CSS3
|
|
* animation is supported by the browser. This defaults to true currently, as CSS3 animation support is still
|
|
* considered experimental at this time, and if used should be thouroughly tested across all targeted browsers.
|
|
* @protected
|
|
*/
|
|
forceJS: true,
|
|
|
|
// @private Target factory
|
|
createTarget: function(target) {
|
|
var me = this,
|
|
useCSS3 = !me.forceJS && Ext.supports.Transitions,
|
|
targetObj;
|
|
|
|
me.useCSS3 = useCSS3;
|
|
|
|
if (target) {
|
|
// dom element, string or fly
|
|
if (target.tagName || Ext.isString(target) || target.isFly) {
|
|
target = Ext.get(target);
|
|
targetObj = new Ext.fx.target['Element' + (useCSS3 ? 'CSS' : '')](target);
|
|
}
|
|
// Element
|
|
else if (target.dom) {
|
|
targetObj = new Ext.fx.target['Element' + (useCSS3 ? 'CSS' : '')](target);
|
|
}
|
|
// Element Composite
|
|
else if (target.isComposite) {
|
|
targetObj = new Ext.fx.target['CompositeElement' + (useCSS3 ? 'CSS' : '')](target);
|
|
}
|
|
// Draw Sprite
|
|
else if (target.isSprite) {
|
|
targetObj = new Ext.fx.target.Sprite(target);
|
|
}
|
|
// Draw Sprite Composite
|
|
else if (target.isCompositeSprite) {
|
|
targetObj = new Ext.fx.target.CompositeSprite(target);
|
|
}
|
|
// Component
|
|
else if (target.isComponent) {
|
|
targetObj = new Ext.fx.target.Component(target);
|
|
}
|
|
else if (target.isAnimTarget) {
|
|
return target;
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
me.targets.add(targetObj);
|
|
return targetObj;
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Add an Anim to the manager. This is done automatically when an Anim instance is created.
|
|
* @param {Ext.fx.Anim} anim
|
|
*/
|
|
addAnim: function(anim) {
|
|
var me = this,
|
|
items = me.items,
|
|
task = me.task;
|
|
|
|
// Make sure we use the anim's id, not the anim target's id here. The anim id will be unique on
|
|
// each call to addAnim. `anim.target` is the DOM element being targeted, and since multiple animations
|
|
// can target a single DOM node concurrently, the target id cannot be assumned to be unique.
|
|
items.add(anim.id, anim);
|
|
//Ext.log('+ added anim ', anim.id, ', target: ', anim.target.getId(), ', duration: ', anim.duration);
|
|
|
|
// Start the timer if not already running
|
|
if (!task && items.length) {
|
|
task = me.task = {
|
|
run: me.runner,
|
|
interval: me.interval,
|
|
scope: me
|
|
};
|
|
//Ext.log('--->> Starting task');
|
|
me.taskRunner.start(task);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Remove an Anim from the manager. This is done automatically when an Anim ends.
|
|
* @param {Ext.fx.Anim} anim
|
|
*/
|
|
removeAnim: function(anim) {
|
|
var me = this,
|
|
items = me.items,
|
|
task = me.task;
|
|
|
|
items.removeAtKey(anim.id);
|
|
//Ext.log(' X removed anim ', anim.id, ', target: ', anim.target.getId(), ', frames: ', anim.frameCount, ', item count: ', items.length);
|
|
|
|
// Stop the timer if there are no more managed Anims
|
|
if (task && !items.length) {
|
|
//Ext.log('[]--- Stopping task');
|
|
me.taskRunner.stop(task);
|
|
delete me.task;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Runner function being called each frame
|
|
*/
|
|
runner: function() {
|
|
var me = this,
|
|
items = me.items.getRange(),
|
|
i = 0,
|
|
len = items.length,
|
|
anim;
|
|
|
|
//Ext.log(' executing anim runner task with ', len, ' items');
|
|
me.targetArr = {};
|
|
|
|
// Single timestamp for all animations this interval
|
|
me.timestamp = new Date();
|
|
|
|
// Loop to start any new animations first before looping to
|
|
// execute running animations (which will also include all animations
|
|
// started in this loop). This is a subtle difference from simply
|
|
// iterating in one loop and starting then running each animation,
|
|
// but separating the loops is necessary to ensure that all new animations
|
|
// actually kick off prior to existing ones regardless of array order.
|
|
// Otherwise in edge cases when there is excess latency in overall
|
|
// performance, allowing existing animations to run before new ones can
|
|
// lead to dropped frames and subtle race conditions when they are
|
|
// interdependent, which is often the case with certain Element fx.
|
|
for (; i < len; i++) {
|
|
anim = items[i];
|
|
|
|
if (anim.isReady()) {
|
|
//Ext.log(' starting anim ', anim.id, ', target: ', anim.target.id);
|
|
me.startAnim(anim);
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < len; i++) {
|
|
anim = items[i];
|
|
|
|
if (anim.isRunning()) {
|
|
//Ext.log(' running anim ', anim.target.id);
|
|
me.runAnim(anim);
|
|
}
|
|
}
|
|
|
|
// Apply all the pending changes to their targets
|
|
me.applyPendingAttrs();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Start the individual animation (initialization)
|
|
*/
|
|
startAnim: function(anim) {
|
|
anim.start(this.timestamp);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Run the individual animation for this frame
|
|
*/
|
|
runAnim: function(anim) {
|
|
if (!anim) {
|
|
return;
|
|
}
|
|
var me = this,
|
|
useCSS3 = me.useCSS3 && anim.target.type == 'element',
|
|
elapsedTime = me.timestamp - anim.startTime,
|
|
lastFrame = (elapsedTime >= anim.duration),
|
|
target, o;
|
|
|
|
target = this.collectTargetData(anim, elapsedTime, useCSS3, lastFrame);
|
|
|
|
// For CSS3 animation, we need to immediately set the first frame's attributes without any transition
|
|
// to get a good initial state, then add the transition properties and set the final attributes.
|
|
if (useCSS3) {
|
|
//Ext.log(' (i) using CSS3 transitions');
|
|
|
|
// Flush the collected attributes, without transition
|
|
anim.target.setAttr(target.anims[anim.id].attributes, true);
|
|
|
|
// Add the end frame data
|
|
me.collectTargetData(anim, anim.duration, useCSS3, lastFrame);
|
|
|
|
// Pause the animation so runAnim doesn't keep getting called
|
|
anim.paused = true;
|
|
|
|
target = anim.target.target;
|
|
// We only want to attach an event on the last element in a composite
|
|
if (anim.target.isComposite) {
|
|
target = anim.target.target.last();
|
|
}
|
|
|
|
// Listen for the transitionend event
|
|
o = {};
|
|
o[Ext.supports.CSS3TransitionEnd] = anim.lastFrame;
|
|
o.scope = anim;
|
|
o.single = true;
|
|
target.on(o);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Collect target attributes for the given Anim object at the given timestamp
|
|
* @param {Ext.fx.Anim} anim The Anim instance
|
|
* @param {Number} timestamp Time after the anim's start time
|
|
* @param {Boolean} [useCSS3=false] True if using CSS3-based animation, else false
|
|
* @param {Boolean} [isLastFrame=false] True if this is the last frame of animation to be run, else false
|
|
* @return {Object} The animation target wrapper object containing the passed animation along with the
|
|
* new attributes to set on the target's element in the next animation frame.
|
|
*/
|
|
collectTargetData: function(anim, elapsedTime, useCSS3, isLastFrame) {
|
|
var targetId = anim.target.getId(),
|
|
target = this.targetArr[targetId];
|
|
|
|
if (!target) {
|
|
// Create a thin wrapper around the target so that we can create a link between the
|
|
// target element and its associated animations. This is important later when applying
|
|
// attributes to the target so that each animation can be independently run with its own
|
|
// duration and stopped at any point without affecting other animations for the same target.
|
|
target = this.targetArr[targetId] = {
|
|
id: targetId,
|
|
el: anim.target,
|
|
anims: {}
|
|
};
|
|
}
|
|
|
|
// This is a wrapper for the animation so that we can also save state along with it,
|
|
// including the current elapsed time and lastFrame status. Even though this method only
|
|
// adds a single anim object per call, each target element could have multiple animations
|
|
// associated with it, which is why the anim is added to the target's `anims` hash by id.
|
|
target.anims[anim.id] = {
|
|
id: anim.id,
|
|
anim: anim,
|
|
elapsed: elapsedTime,
|
|
isLastFrame: isLastFrame,
|
|
// This is the object that gets applied to the target element below in applyPendingAttrs():
|
|
attributes: [{
|
|
duration: anim.duration,
|
|
easing: (useCSS3 && anim.reverse) ? anim.easingFn.reverse().toCSS3() : anim.easing,
|
|
// This is where the magic happens. The anim calculates what its new attributes should
|
|
// be based on the current frame and returns those as a hash of values.
|
|
attrs: anim.runAnim(elapsedTime)
|
|
}]
|
|
};
|
|
|
|
return target;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Apply all pending attribute changes to their targets
|
|
*/
|
|
applyPendingAttrs: function() {
|
|
var targetArr = this.targetArr,
|
|
target, targetId, animWrap, anim, animId;
|
|
|
|
// Loop through each target
|
|
for (targetId in targetArr) {
|
|
if (targetArr.hasOwnProperty(targetId)) {
|
|
target = targetArr[targetId];
|
|
|
|
// Each target could have multiple associated animations, so iterate those
|
|
for (animId in target.anims) {
|
|
if (target.anims.hasOwnProperty(animId)) {
|
|
animWrap = target.anims[animId];
|
|
anim = animWrap.anim;
|
|
|
|
// If the animation has valid attributes, set them on the target
|
|
if (animWrap.attributes && anim.isRunning()) {
|
|
//Ext.log(' > applying attributes for anim ', animWrap.id, ', target: ', target.id, ', elapsed: ', animWrap.elapsed);
|
|
target.el.setAttr(animWrap.attributes, false, animWrap.isLastFrame);
|
|
|
|
// If this particular anim is at the last frame end it
|
|
if (animWrap.isLastFrame) {
|
|
//Ext.log(' running last frame for ', animWrap.id, ', target: ', targetId);
|
|
anim.lastFrame();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.fx.Animator
|
|
*
|
|
* This class is used to run keyframe based animations, which follows the CSS3 based animation structure.
|
|
* Keyframe animations differ from typical from/to animations in that they offer the ability to specify values
|
|
* at various points throughout the animation.
|
|
*
|
|
* ## 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}
|
|
* event that fires after each key frame is reached.
|
|
*
|
|
* ## Example
|
|
*
|
|
* In the example below, we modify the values of the element at each fifth throughout the animation.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.fx.Animator', {
|
|
* target: Ext.getBody().createChild({
|
|
* style: {
|
|
* width: '100px',
|
|
* height: '100px',
|
|
* 'background-color': 'red'
|
|
* }
|
|
* }),
|
|
* duration: 10000, // 10 seconds
|
|
* keyframes: {
|
|
* 0: {
|
|
* opacity: 1,
|
|
* backgroundColor: 'FF0000'
|
|
* },
|
|
* 20: {
|
|
* x: 30,
|
|
* opacity: 0.5
|
|
* },
|
|
* 40: {
|
|
* x: 130,
|
|
* backgroundColor: '0000FF'
|
|
* },
|
|
* 60: {
|
|
* y: 80,
|
|
* opacity: 0.3
|
|
* },
|
|
* 80: {
|
|
* width: 200,
|
|
* y: 200
|
|
* },
|
|
* 100: {
|
|
* opacity: 1,
|
|
* backgroundColor: '00FF00'
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.fx.Animator', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @property {Boolean} isAnimator
|
|
* `true` in this class to identify an object as an instantiated Animator, or subclass thereof.
|
|
*/
|
|
isAnimator: true,
|
|
|
|
/**
|
|
* @cfg {Number} duration
|
|
* Time in milliseconds for the animation to last. Defaults to 250.
|
|
*/
|
|
duration: 250,
|
|
|
|
/**
|
|
* @cfg {Number} delay
|
|
* Time to delay before starting the animation. Defaults to 0.
|
|
*/
|
|
delay: 0,
|
|
|
|
/* private used to track a delayed starting time */
|
|
delayStart: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} dynamic
|
|
* Currently only for Component Animation: Only set a component's outer element size bypassing layouts. Set to true to do full layouts for every frame of the animation. Defaults to false.
|
|
*/
|
|
dynamic: false,
|
|
|
|
/**
|
|
* @cfg {String} easing
|
|
*
|
|
* This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change
|
|
* speed over its duration.
|
|
*
|
|
* - backIn
|
|
* - backOut
|
|
* - bounceIn
|
|
* - bounceOut
|
|
* - ease
|
|
* - easeIn
|
|
* - easeOut
|
|
* - easeInOut
|
|
* - elasticIn
|
|
* - elasticOut
|
|
* - cubic-bezier(x1, y1, x2, y2)
|
|
*
|
|
* Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
|
|
* specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
|
|
* be in the range [0, 1] or the definition is invalid.
|
|
*
|
|
* [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
|
|
*/
|
|
easing: 'ease',
|
|
|
|
/**
|
|
* Flag to determine if the animation has started
|
|
* @property running
|
|
* @type Boolean
|
|
*/
|
|
running: false,
|
|
|
|
/**
|
|
* Flag to determine if the animation is paused. Only set this to true if you need to
|
|
* keep the Anim instance around to be unpaused later; otherwise call {@link #end}.
|
|
* @property paused
|
|
* @type Boolean
|
|
*/
|
|
paused: false,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
damper: 1,
|
|
|
|
/**
|
|
* @cfg {Number} iterations
|
|
* Number of times to execute the animation. Defaults to 1.
|
|
*/
|
|
iterations: 1,
|
|
|
|
/**
|
|
* Current iteration the animation is running.
|
|
* @property currentIteration
|
|
* @type Number
|
|
*/
|
|
currentIteration: 0,
|
|
|
|
/**
|
|
* Current keyframe step of the animation.
|
|
* @property keyframeStep
|
|
* @type Number
|
|
*/
|
|
keyframeStep: 0,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
animKeyFramesRE: /^(from|to|\d+%?)$/,
|
|
|
|
/**
|
|
* @cfg {Ext.fx.target.Target} target
|
|
* The Ext.fx.target to apply the animation to. If not specified during initialization, this can be passed to the applyAnimator
|
|
* method to apply the same animation to many targets.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} keyframes
|
|
* Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'
|
|
* is considered '100%'.<b>Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using
|
|
* "from" or "to"</b>. A keyframe declaration without these keyframe selectors is invalid and will not be available for
|
|
* animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to
|
|
* be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
|
|
<pre><code>
|
|
keyframes : {
|
|
'0%': {
|
|
left: 100
|
|
},
|
|
'40%': {
|
|
left: 150
|
|
},
|
|
'60%': {
|
|
left: 75
|
|
},
|
|
'100%': {
|
|
left: 100
|
|
}
|
|
}
|
|
</code></pre>
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
config = Ext.apply(me, config || {});
|
|
me.config = config;
|
|
me.id = Ext.id(null, 'ext-animator-');
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeanimate
|
|
* Fires before the animation starts. A handler can return false to cancel the animation.
|
|
* @param {Ext.fx.Animator} this
|
|
*/
|
|
'beforeanimate',
|
|
/**
|
|
* @event keyframe
|
|
* Fires at each keyframe.
|
|
* @param {Ext.fx.Animator} this
|
|
* @param {Number} keyframe step number
|
|
*/
|
|
'keyframe',
|
|
/**
|
|
* @event afteranimate
|
|
* Fires when the animation is complete.
|
|
* @param {Ext.fx.Animator} this
|
|
* @param {Date} startTime
|
|
*/
|
|
'afteranimate'
|
|
);
|
|
me.mixins.observable.constructor.call(me, config);
|
|
me.timeline = [];
|
|
me.createTimeline(me.keyframes);
|
|
if (me.target) {
|
|
me.applyAnimator(me.target);
|
|
Ext.fx.Manager.addAnim(me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
sorter: function (a, b) {
|
|
return a.pct - b.pct;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Takes the given keyframe configuration object and converts it into an ordered array with the passed attributes per keyframe
|
|
* or applying the 'to' configuration to all keyframes. Also calculates the proper animation duration per keyframe.
|
|
*/
|
|
createTimeline: function(keyframes) {
|
|
var me = this,
|
|
attrs = [],
|
|
to = me.to || {},
|
|
duration = me.duration,
|
|
prevMs, ms, i, ln, pct, attr;
|
|
|
|
for (pct in keyframes) {
|
|
if (keyframes.hasOwnProperty(pct) && me.animKeyFramesRE.test(pct)) {
|
|
attr = {attrs: Ext.apply(keyframes[pct], to)};
|
|
// CSS3 spec allow for from/to to be specified.
|
|
if (pct == "from") {
|
|
pct = 0;
|
|
}
|
|
else if (pct == "to") {
|
|
pct = 100;
|
|
}
|
|
// convert % values into integers
|
|
attr.pct = parseInt(pct, 10);
|
|
attrs.push(attr);
|
|
}
|
|
}
|
|
// Sort by pct property
|
|
Ext.Array.sort(attrs, me.sorter);
|
|
// Only an end
|
|
//if (attrs[0].pct) {
|
|
// attrs.unshift({pct: 0, attrs: element.attrs});
|
|
//}
|
|
|
|
ln = attrs.length;
|
|
for (i = 0; i < ln; i++) {
|
|
prevMs = (attrs[i - 1]) ? duration * (attrs[i - 1].pct / 100) : 0;
|
|
ms = duration * (attrs[i].pct / 100);
|
|
me.timeline.push({
|
|
duration: ms - prevMs,
|
|
attrs: attrs[i].attrs
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Applies animation to the Ext.fx.target
|
|
* @private
|
|
* @param target
|
|
* @type String/Object
|
|
*/
|
|
applyAnimator: function(target) {
|
|
var me = this,
|
|
anims = [],
|
|
timeline = me.timeline,
|
|
ln = timeline.length,
|
|
anim, easing, damper, attrs, i;
|
|
|
|
if (me.fireEvent('beforeanimate', me) !== false) {
|
|
for (i = 0; i < ln; i++) {
|
|
anim = timeline[i];
|
|
attrs = anim.attrs;
|
|
easing = attrs.easing || me.easing;
|
|
damper = attrs.damper || me.damper;
|
|
delete attrs.easing;
|
|
delete attrs.damper;
|
|
anim = new Ext.fx.Anim({
|
|
target: target,
|
|
easing: easing,
|
|
damper: damper,
|
|
duration: anim.duration,
|
|
paused: true,
|
|
to: attrs
|
|
});
|
|
anims.push(anim);
|
|
}
|
|
me.animations = anims;
|
|
me.target = anim.target;
|
|
for (i = 0; i < ln - 1; i++) {
|
|
anim = anims[i];
|
|
anim.nextAnim = anims[i + 1];
|
|
anim.on('afteranimate', function() {
|
|
this.nextAnim.paused = false;
|
|
});
|
|
anim.on('afteranimate', function() {
|
|
this.fireEvent('keyframe', this, ++this.keyframeStep);
|
|
}, me);
|
|
}
|
|
anims[ln - 1].on('afteranimate', function() {
|
|
this.lastFrame();
|
|
}, me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fires beforeanimate and sets the running flag.
|
|
*/
|
|
start: function(startTime) {
|
|
var me = this,
|
|
delay = me.delay,
|
|
delayStart = me.delayStart,
|
|
delayDelta;
|
|
if (delay) {
|
|
if (!delayStart) {
|
|
me.delayStart = startTime;
|
|
return;
|
|
}
|
|
else {
|
|
delayDelta = startTime - delayStart;
|
|
if (delayDelta < delay) {
|
|
return;
|
|
}
|
|
else {
|
|
// Compensate for frame delay;
|
|
startTime = new Date(delayStart.getTime() + delay);
|
|
}
|
|
}
|
|
}
|
|
if (me.fireEvent('beforeanimate', me) !== false) {
|
|
me.startTime = startTime;
|
|
me.running = true;
|
|
me.animations[me.keyframeStep].paused = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Perform lastFrame cleanup and handle iterations
|
|
* @returns a hash of the new attributes.
|
|
*/
|
|
lastFrame: function() {
|
|
var me = this,
|
|
iter = me.iterations,
|
|
iterCount = me.currentIteration;
|
|
|
|
iterCount++;
|
|
if (iterCount < iter) {
|
|
me.startTime = new Date();
|
|
me.currentIteration = iterCount;
|
|
me.keyframeStep = 0;
|
|
me.applyAnimator(me.target);
|
|
me.animations[me.keyframeStep].paused = false;
|
|
}
|
|
else {
|
|
me.currentIteration = 0;
|
|
me.end();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fire afteranimate event and end the animation. Usually called automatically when the
|
|
* animation reaches its final frame, but can also be called manually to pre-emptively
|
|
* stop and destroy the running animation.
|
|
*/
|
|
end: function() {
|
|
var me = this;
|
|
me.fireEvent('afteranimate', me, me.startTime, new Date() - me.startTime);
|
|
},
|
|
|
|
isReady: function() {
|
|
return this.paused === false && this.running === false && this.iterations > 0;
|
|
},
|
|
|
|
isRunning: function() {
|
|
// Explicitly return false, we don't want to be run continuously by the manager
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.fx.CubicBezier', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
singleton: true,
|
|
|
|
/* End Definitions */
|
|
|
|
cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
|
|
var cx = 3 * p1x,
|
|
bx = 3 * (p2x - p1x) - cx,
|
|
ax = 1 - cx - bx,
|
|
cy = 3 * p1y,
|
|
by = 3 * (p2y - p1y) - cy,
|
|
ay = 1 - cy - by;
|
|
function sampleCurveX(t) {
|
|
return ((ax * t + bx) * t + cx) * t;
|
|
}
|
|
function solve(x, epsilon) {
|
|
var t = solveCurveX(x, epsilon);
|
|
return ((ay * t + by) * t + cy) * t;
|
|
}
|
|
function solveCurveX(x, epsilon) {
|
|
var t0, t1, t2, x2, d2, i;
|
|
for (t2 = x, i = 0; i < 8; i++) {
|
|
x2 = sampleCurveX(t2) - x;
|
|
if (Math.abs(x2) < epsilon) {
|
|
return t2;
|
|
}
|
|
d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
|
|
if (Math.abs(d2) < 1e-6) {
|
|
break;
|
|
}
|
|
t2 = t2 - x2 / d2;
|
|
}
|
|
t0 = 0;
|
|
t1 = 1;
|
|
t2 = x;
|
|
if (t2 < t0) {
|
|
return t0;
|
|
}
|
|
if (t2 > t1) {
|
|
return t1;
|
|
}
|
|
while (t0 < t1) {
|
|
x2 = sampleCurveX(t2);
|
|
if (Math.abs(x2 - x) < epsilon) {
|
|
return t2;
|
|
}
|
|
if (x > x2) {
|
|
t0 = t2;
|
|
} else {
|
|
t1 = t2;
|
|
}
|
|
t2 = (t1 - t0) / 2 + t0;
|
|
}
|
|
return t2;
|
|
}
|
|
return solve(t, 1 / (200 * duration));
|
|
},
|
|
|
|
cubicBezier: function(x1, y1, x2, y2) {
|
|
var fn = function(pos) {
|
|
return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
|
|
};
|
|
fn.toCSS3 = function() {
|
|
return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
|
|
};
|
|
fn.reverse = function() {
|
|
return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
|
|
};
|
|
return fn;
|
|
}
|
|
});
|
|
|
|
// @define Ext.fx.Easing
|
|
|
|
/**
|
|
* @class Ext.fx.Easing
|
|
*
|
|
* This class contains a series of function definitions used to modify values during an animation.
|
|
* They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
|
|
* speed over its duration. The following options are available:
|
|
*
|
|
* - linear The default easing type
|
|
* - backIn
|
|
* - backOut
|
|
* - bounceIn
|
|
* - bounceOut
|
|
* - ease
|
|
* - easeIn
|
|
* - easeOut
|
|
* - easeInOut
|
|
* - elasticIn
|
|
* - elasticOut
|
|
* - cubic-bezier(x1, y1, x2, y2)
|
|
*
|
|
* Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
|
|
* specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
|
|
* be in the range [0, 1] or the definition is invalid.
|
|
*
|
|
* [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.require('Ext.fx.CubicBezier', function() {
|
|
var math = Math,
|
|
pi = math.PI,
|
|
pow = math.pow,
|
|
sin = math.sin,
|
|
sqrt = math.sqrt,
|
|
abs = math.abs,
|
|
backInSeed = 1.70158;
|
|
|
|
Ext.define('Ext.fx.Easing', {
|
|
singleton: true,
|
|
|
|
linear: Ext.identityFn,
|
|
ease: function(n) {
|
|
var q = 0.07813 - n / 2,
|
|
alpha = -0.25,
|
|
Q = sqrt(0.0066 + q * q),
|
|
x = Q - q,
|
|
X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1),
|
|
y = -Q - q,
|
|
Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1),
|
|
t = X + Y + 0.25;
|
|
return pow(1 - t, 2) * 3 * t * 0.1 + (1 - t) * 3 * t * t + t * t * t;
|
|
},
|
|
easeIn: function (n) {
|
|
return pow(n, 1.7);
|
|
},
|
|
easeOut: function (n) {
|
|
return pow(n, 0.48);
|
|
},
|
|
easeInOut: function(n) {
|
|
var q = 0.48 - n / 1.04,
|
|
Q = sqrt(0.1734 + q * q),
|
|
x = Q - q,
|
|
X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1),
|
|
y = -Q - q,
|
|
Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1),
|
|
t = X + Y + 0.5;
|
|
return (1 - t) * 3 * t * t + t * t * t;
|
|
},
|
|
backIn: function (n) {
|
|
return n * n * ((backInSeed + 1) * n - backInSeed);
|
|
},
|
|
backOut: function (n) {
|
|
n = n - 1;
|
|
return n * n * ((backInSeed + 1) * n + backInSeed) + 1;
|
|
},
|
|
elasticIn: function (n) {
|
|
if (n === 0 || n === 1) {
|
|
return n;
|
|
}
|
|
var p = 0.3,
|
|
s = p / 4;
|
|
return pow(2, -10 * n) * sin((n - s) * (2 * pi) / p) + 1;
|
|
},
|
|
elasticOut: function (n) {
|
|
return 1 - Ext.fx.Easing.elasticIn(1 - n);
|
|
},
|
|
bounceIn: function (n) {
|
|
return 1 - Ext.fx.Easing.bounceOut(1 - n);
|
|
},
|
|
bounceOut: function (n) {
|
|
var s = 7.5625,
|
|
p = 2.75,
|
|
l;
|
|
if (n < (1 / p)) {
|
|
l = s * n * n;
|
|
} else {
|
|
if (n < (2 / p)) {
|
|
n -= (1.5 / p);
|
|
l = s * n * n + 0.75;
|
|
} else {
|
|
if (n < (2.5 / p)) {
|
|
n -= (2.25 / p);
|
|
l = s * n * n + 0.9375;
|
|
} else {
|
|
n -= (2.625 / p);
|
|
l = s * n * n + 0.984375;
|
|
}
|
|
}
|
|
}
|
|
return l;
|
|
}
|
|
}, function(){
|
|
var easing = Ext.fx.Easing.self,
|
|
proto = easing.prototype;
|
|
|
|
easing.implement({
|
|
'back-in': proto.backIn,
|
|
'back-out': proto.backOut,
|
|
'ease-in': proto.easeIn,
|
|
'ease-out': proto.easeOut,
|
|
'elastic-in': proto.elasticIn,
|
|
'elastic-out': proto.elasticOut,
|
|
'bounce-in': proto.bounceIn,
|
|
'bounce-out': proto.bounceOut,
|
|
'ease-in-out': proto.easeInOut
|
|
});
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Represents an RGB color and provides helper functions get
|
|
* color components in HSL color space.
|
|
*/
|
|
Ext.define('Ext.draw.Color', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
/* End Definitions */
|
|
|
|
colorToHexRe: /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
|
|
rgbRe: /\s*rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)\s*/,
|
|
hexRe: /\s*#([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/,
|
|
|
|
/**
|
|
* @cfg {Number} lightnessFactor
|
|
*
|
|
* The default factor to compute the lighter or darker color. Defaults to 0.2.
|
|
*/
|
|
lightnessFactor: 0.2,
|
|
|
|
/**
|
|
* Creates new Color.
|
|
* @param {Number} red Red component (0..255)
|
|
* @param {Number} green Green component (0..255)
|
|
* @param {Number} blue Blue component (0..255)
|
|
*/
|
|
constructor : function(red, green, blue) {
|
|
var me = this,
|
|
clamp = Ext.Number.constrain;
|
|
me.r = clamp(red, 0, 255);
|
|
me.g = clamp(green, 0, 255);
|
|
me.b = clamp(blue, 0, 255);
|
|
},
|
|
|
|
/**
|
|
* Get the red component of the color, in the range 0..255.
|
|
* @return {Number}
|
|
*/
|
|
getRed: function() {
|
|
return this.r;
|
|
},
|
|
|
|
/**
|
|
* Get the green component of the color, in the range 0..255.
|
|
* @return {Number}
|
|
*/
|
|
getGreen: function() {
|
|
return this.g;
|
|
},
|
|
|
|
/**
|
|
* Get the blue component of the color, in the range 0..255.
|
|
* @return {Number}
|
|
*/
|
|
getBlue: function() {
|
|
return this.b;
|
|
},
|
|
|
|
/**
|
|
* Get the RGB values.
|
|
* @return {Number[]}
|
|
*/
|
|
getRGB: function() {
|
|
var me = this;
|
|
return [me.r, me.g, me.b];
|
|
},
|
|
|
|
/**
|
|
* Get the equivalent HSL components of the color.
|
|
* @return {Number[]}
|
|
*/
|
|
getHSL: function() {
|
|
var me = this,
|
|
r = me.r / 255,
|
|
g = me.g / 255,
|
|
b = me.b / 255,
|
|
max = Math.max(r, g, b),
|
|
min = Math.min(r, g, b),
|
|
delta = max - min,
|
|
h,
|
|
s = 0,
|
|
l = 0.5 * (max + min);
|
|
|
|
// min==max means achromatic (hue is undefined)
|
|
if (min != max) {
|
|
s = (l < 0.5) ? delta / (max + min) : delta / (2 - max - min);
|
|
if (r == max) {
|
|
h = 60 * (g - b) / delta;
|
|
} else if (g == max) {
|
|
h = 120 + 60 * (b - r) / delta;
|
|
} else {
|
|
h = 240 + 60 * (r - g) / delta;
|
|
}
|
|
if (h < 0) {
|
|
h += 360;
|
|
}
|
|
if (h >= 360) {
|
|
h -= 360;
|
|
}
|
|
}
|
|
return [h, s, l];
|
|
},
|
|
|
|
/**
|
|
* Return a new color that is lighter than this color.
|
|
* @param {Number} factor Lighter factor (0..1), default to 0.2
|
|
* @return Ext.draw.Color
|
|
*/
|
|
getLighter: function(factor) {
|
|
var hsl = this.getHSL();
|
|
factor = factor || this.lightnessFactor;
|
|
hsl[2] = Ext.Number.constrain(hsl[2] + factor, 0, 1);
|
|
return this.fromHSL(hsl[0], hsl[1], hsl[2]);
|
|
},
|
|
|
|
/**
|
|
* Return a new color that is darker than this color.
|
|
* @param {Number} factor Darker factor (0..1), default to 0.2
|
|
* @return Ext.draw.Color
|
|
*/
|
|
getDarker: function(factor) {
|
|
factor = factor || this.lightnessFactor;
|
|
return this.getLighter(-factor);
|
|
},
|
|
|
|
/**
|
|
* Return the color in the hex format, i.e. '#rrggbb'.
|
|
* @return {String}
|
|
*/
|
|
toString: function() {
|
|
var me = this,
|
|
round = Math.round,
|
|
r = round(me.r).toString(16),
|
|
g = round(me.g).toString(16),
|
|
b = round(me.b).toString(16);
|
|
r = (r.length == 1) ? '0' + r : r;
|
|
g = (g.length == 1) ? '0' + g : g;
|
|
b = (b.length == 1) ? '0' + b : b;
|
|
return ['#', r, g, b].join('');
|
|
},
|
|
|
|
/**
|
|
* Convert a color to hexadecimal format.
|
|
*
|
|
* **Note:** This method is both static and instance.
|
|
*
|
|
* @param {String/String[]} color The color value (i.e 'rgb(255, 255, 255)', 'color: #ffffff').
|
|
* Can also be an Array, in this case the function handles the first member.
|
|
* @returns {String} The color in hexadecimal format.
|
|
* @static
|
|
*/
|
|
toHex: function(color) {
|
|
if (Ext.isArray(color)) {
|
|
color = color[0];
|
|
}
|
|
if (!Ext.isString(color)) {
|
|
return '';
|
|
}
|
|
if (color.substr(0, 1) === '#') {
|
|
return color;
|
|
}
|
|
var digits = this.colorToHexRe.exec(color),
|
|
red,
|
|
green,
|
|
blue,
|
|
rgb;
|
|
|
|
if (Ext.isArray(digits)) {
|
|
red = parseInt(digits[2], 10);
|
|
green = parseInt(digits[3], 10);
|
|
blue = parseInt(digits[4], 10);
|
|
rgb = blue | (green << 8) | (red << 16);
|
|
return digits[1] + '#' + ("000000" + rgb.toString(16)).slice(-6);
|
|
}
|
|
else {
|
|
return color;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Parse the string and create a new color.
|
|
*
|
|
* Supported formats: '#rrggbb', '#rgb', and 'rgb(r,g,b)'.
|
|
*
|
|
* If the string is not recognized, an undefined will be returned instead.
|
|
*
|
|
* **Note:** This method is both static and instance.
|
|
*
|
|
* @param {String} str Color in string.
|
|
* @returns Ext.draw.Color
|
|
* @static
|
|
*/
|
|
fromString: function(str) {
|
|
var values, r, g, b,
|
|
parse = parseInt;
|
|
|
|
if ((str.length == 4 || str.length == 7) && str.substr(0, 1) === '#') {
|
|
values = str.match(this.hexRe);
|
|
if (values) {
|
|
r = parse(values[1], 16) >> 0;
|
|
g = parse(values[2], 16) >> 0;
|
|
b = parse(values[3], 16) >> 0;
|
|
if (str.length == 4) {
|
|
r += (r * 16);
|
|
g += (g * 16);
|
|
b += (b * 16);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
values = str.match(this.rgbRe);
|
|
if (values) {
|
|
r = values[1];
|
|
g = values[2];
|
|
b = values[3];
|
|
}
|
|
}
|
|
|
|
return (typeof r == 'undefined') ? undefined : new Ext.draw.Color(r, g, b);
|
|
},
|
|
|
|
/**
|
|
* Returns the gray value (0 to 255) of the color.
|
|
*
|
|
* The gray value is calculated using the formula r*0.3 + g*0.59 + b*0.11.
|
|
*
|
|
* @returns {Number}
|
|
*/
|
|
getGrayscale: function() {
|
|
// http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
|
|
return this.r * 0.3 + this.g * 0.59 + this.b * 0.11;
|
|
},
|
|
|
|
/**
|
|
* Create a new color based on the specified HSL values.
|
|
*
|
|
* **Note:** This method is both static and instance.
|
|
*
|
|
* @param {Number} h Hue component (0..359)
|
|
* @param {Number} s Saturation component (0..1)
|
|
* @param {Number} l Lightness component (0..1)
|
|
* @returns Ext.draw.Color
|
|
* @static
|
|
*/
|
|
fromHSL: function(h, s, l) {
|
|
var C, X, m, i, rgb = [],
|
|
abs = Math.abs,
|
|
floor = Math.floor;
|
|
|
|
if (s == 0 || h == null) {
|
|
// achromatic
|
|
rgb = [l, l, l];
|
|
}
|
|
else {
|
|
// http://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL
|
|
// C is the chroma
|
|
// X is the second largest component
|
|
// m is the lightness adjustment
|
|
h /= 60;
|
|
C = s * (1 - abs(2 * l - 1));
|
|
X = C * (1 - abs(h - 2 * floor(h / 2) - 1));
|
|
m = l - C / 2;
|
|
switch (floor(h)) {
|
|
case 0:
|
|
rgb = [C, X, 0];
|
|
break;
|
|
case 1:
|
|
rgb = [X, C, 0];
|
|
break;
|
|
case 2:
|
|
rgb = [0, C, X];
|
|
break;
|
|
case 3:
|
|
rgb = [0, X, C];
|
|
break;
|
|
case 4:
|
|
rgb = [X, 0, C];
|
|
break;
|
|
case 5:
|
|
rgb = [C, 0, X];
|
|
break;
|
|
}
|
|
rgb = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
|
|
}
|
|
return new Ext.draw.Color(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
|
|
}
|
|
}, function() {
|
|
var prototype = this.prototype;
|
|
|
|
//These functions are both static and instance. TODO: find a more elegant way of copying them
|
|
this.addStatics({
|
|
fromHSL: function() {
|
|
return prototype.fromHSL.apply(prototype, arguments);
|
|
},
|
|
fromString: function() {
|
|
return prototype.fromString.apply(prototype, arguments);
|
|
},
|
|
toHex: function() {
|
|
return prototype.toHex.apply(prototype, arguments);
|
|
}
|
|
});
|
|
});
|
|
|
|
/**
|
|
* @class Ext.draw.Draw
|
|
* Base Drawing class. Provides base drawing functions.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.draw.Draw', {
|
|
/* Begin Definitions */
|
|
|
|
singleton: true,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
pathToStringRE: /,?([achlmqrstvxz]),?/gi,
|
|
pathCommandRE: /([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig,
|
|
pathValuesRE: /(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig,
|
|
stopsRE: /^(\d+%?)$/,
|
|
radian: Math.PI / 180,
|
|
|
|
availableAnimAttrs: {
|
|
along: "along",
|
|
blur: null,
|
|
"clip-rect": "csv",
|
|
cx: null,
|
|
cy: null,
|
|
fill: "color",
|
|
"fill-opacity": null,
|
|
"font-size": null,
|
|
height: null,
|
|
opacity: null,
|
|
path: "path",
|
|
r: null,
|
|
rotation: "csv",
|
|
rx: null,
|
|
ry: null,
|
|
scale: "csv",
|
|
stroke: "color",
|
|
"stroke-opacity": null,
|
|
"stroke-width": null,
|
|
translation: "csv",
|
|
width: null,
|
|
x: null,
|
|
y: null
|
|
},
|
|
|
|
is: function(o, type) {
|
|
type = String(type).toLowerCase();
|
|
return (type == "object" && o === Object(o)) ||
|
|
(type == "undefined" && typeof o == type) ||
|
|
(type == "null" && o === null) ||
|
|
(type == "array" && Array.isArray && Array.isArray(o)) ||
|
|
(Object.prototype.toString.call(o).toLowerCase().slice(8, -1)) == type;
|
|
},
|
|
|
|
ellipsePath: function(sprite) {
|
|
var attr = sprite.attr;
|
|
return Ext.String.format("M{0},{1}A{2},{3},0,1,1,{0},{4}A{2},{3},0,1,1,{0},{1}z", attr.x, attr.y - attr.ry, attr.rx, attr.ry, attr.y + attr.ry);
|
|
},
|
|
|
|
rectPath: function(sprite) {
|
|
var attr = sprite.attr;
|
|
if (attr.radius) {
|
|
return Ext.String.format("M{0},{1}l{2},0a{3},{3},0,0,1,{3},{3}l0,{5}a{3},{3},0,0,1,{4},{3}l{6},0a{3},{3},0,0,1,{4},{4}l0,{7}a{3},{3},0,0,1,{3},{4}z", attr.x + attr.radius, attr.y, attr.width - attr.radius * 2, attr.radius, -attr.radius, attr.height - attr.radius * 2, attr.radius * 2 - attr.width, attr.radius * 2 - attr.height);
|
|
}
|
|
else {
|
|
return Ext.String.format("M{0},{1}L{2},{1},{2},{3},{0},{3}z", attr.x, attr.y, attr.width + attr.x, attr.height + attr.y);
|
|
}
|
|
},
|
|
|
|
// To be deprecated, converts itself (an arrayPath) to a proper SVG path string
|
|
path2string: function () {
|
|
return this.join(",").replace(Ext.draw.Draw.pathToStringRE, "$1");
|
|
},
|
|
|
|
// Convert the passed arrayPath to a proper SVG path string (d attribute)
|
|
pathToString: function(arrayPath) {
|
|
return arrayPath.join(",").replace(Ext.draw.Draw.pathToStringRE, "$1");
|
|
},
|
|
|
|
parsePathString: function (pathString) {
|
|
if (!pathString) {
|
|
return null;
|
|
}
|
|
var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
|
|
data = [],
|
|
me = this;
|
|
if (me.is(pathString, "array") && me.is(pathString[0], "array")) { // rough assumption
|
|
data = me.pathClone(pathString);
|
|
}
|
|
if (!data.length) {
|
|
String(pathString).replace(me.pathCommandRE, function (a, b, c) {
|
|
var params = [],
|
|
name = b.toLowerCase();
|
|
c.replace(me.pathValuesRE, function (a, b) {
|
|
b && params.push(+b);
|
|
});
|
|
if (name == "m" && params.length > 2) {
|
|
data.push([b].concat(Ext.Array.splice(params, 0, 2)));
|
|
name = "l";
|
|
b = (b == "m") ? "l" : "L";
|
|
}
|
|
while (params.length >= paramCounts[name]) {
|
|
data.push([b].concat(Ext.Array.splice(params, 0, paramCounts[name])));
|
|
if (!paramCounts[name]) {
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
data.toString = me.path2string;
|
|
return data;
|
|
},
|
|
|
|
mapPath: function (path, matrix) {
|
|
if (!matrix) {
|
|
return path;
|
|
}
|
|
var x, y, i, ii, j, jj, pathi;
|
|
path = this.path2curve(path);
|
|
for (i = 0, ii = path.length; i < ii; i++) {
|
|
pathi = path[i];
|
|
for (j = 1, jj = pathi.length; j < jj-1; j += 2) {
|
|
x = matrix.x(pathi[j], pathi[j + 1]);
|
|
y = matrix.y(pathi[j], pathi[j + 1]);
|
|
pathi[j] = x;
|
|
pathi[j + 1] = y;
|
|
}
|
|
}
|
|
return path;
|
|
},
|
|
|
|
pathClone: function(pathArray) {
|
|
var res = [],
|
|
j, jj, i, ii;
|
|
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption
|
|
pathArray = this.parsePathString(pathArray);
|
|
}
|
|
for (i = 0, ii = pathArray.length; i < ii; i++) {
|
|
res[i] = [];
|
|
for (j = 0, jj = pathArray[i].length; j < jj; j++) {
|
|
res[i][j] = pathArray[i][j];
|
|
}
|
|
}
|
|
res.toString = this.path2string;
|
|
return res;
|
|
},
|
|
|
|
pathToAbsolute: function (pathArray) {
|
|
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption
|
|
pathArray = this.parsePathString(pathArray);
|
|
}
|
|
var res = [],
|
|
x = 0,
|
|
y = 0,
|
|
mx = 0,
|
|
my = 0,
|
|
i = 0,
|
|
ln = pathArray.length,
|
|
r, pathSegment, j, ln2;
|
|
// MoveTo initial x/y position
|
|
if (ln && pathArray[0][0] == "M") {
|
|
x = +pathArray[0][1];
|
|
y = +pathArray[0][2];
|
|
mx = x;
|
|
my = y;
|
|
i++;
|
|
res[0] = ["M", x, y];
|
|
}
|
|
for (; i < ln; i++) {
|
|
r = res[i] = [];
|
|
pathSegment = pathArray[i];
|
|
if (pathSegment[0] != pathSegment[0].toUpperCase()) {
|
|
r[0] = pathSegment[0].toUpperCase();
|
|
switch (r[0]) {
|
|
// Elliptical Arc
|
|
case "A":
|
|
r[1] = pathSegment[1];
|
|
r[2] = pathSegment[2];
|
|
r[3] = pathSegment[3];
|
|
r[4] = pathSegment[4];
|
|
r[5] = pathSegment[5];
|
|
r[6] = +(pathSegment[6] + x);
|
|
r[7] = +(pathSegment[7] + y);
|
|
break;
|
|
// Vertical LineTo
|
|
case "V":
|
|
r[1] = +pathSegment[1] + y;
|
|
break;
|
|
// Horizontal LineTo
|
|
case "H":
|
|
r[1] = +pathSegment[1] + x;
|
|
break;
|
|
case "M":
|
|
// MoveTo
|
|
mx = +pathSegment[1] + x;
|
|
my = +pathSegment[2] + y;
|
|
default:
|
|
j = 1;
|
|
ln2 = pathSegment.length;
|
|
for (; j < ln2; j++) {
|
|
r[j] = +pathSegment[j] + ((j % 2) ? x : y);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
j = 0;
|
|
ln2 = pathSegment.length;
|
|
for (; j < ln2; j++) {
|
|
res[i][j] = pathSegment[j];
|
|
}
|
|
}
|
|
switch (r[0]) {
|
|
// ClosePath
|
|
case "Z":
|
|
x = mx;
|
|
y = my;
|
|
break;
|
|
// Horizontal LineTo
|
|
case "H":
|
|
x = r[1];
|
|
break;
|
|
// Vertical LineTo
|
|
case "V":
|
|
y = r[1];
|
|
break;
|
|
// MoveTo
|
|
case "M":
|
|
pathSegment = res[i];
|
|
ln2 = pathSegment.length;
|
|
mx = pathSegment[ln2 - 2];
|
|
my = pathSegment[ln2 - 1];
|
|
default:
|
|
pathSegment = res[i];
|
|
ln2 = pathSegment.length;
|
|
x = pathSegment[ln2 - 2];
|
|
y = pathSegment[ln2 - 1];
|
|
}
|
|
}
|
|
res.toString = this.path2string;
|
|
return res;
|
|
},
|
|
|
|
// TO BE DEPRECATED
|
|
pathToRelative: function (pathArray) {
|
|
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) {
|
|
pathArray = this.parsePathString(pathArray);
|
|
}
|
|
var res = [],
|
|
x = 0,
|
|
y = 0,
|
|
mx = 0,
|
|
my = 0,
|
|
start = 0,
|
|
r,
|
|
pa,
|
|
i,
|
|
j,
|
|
k,
|
|
len,
|
|
ii,
|
|
jj,
|
|
kk;
|
|
|
|
if (pathArray[0][0] == "M") {
|
|
x = pathArray[0][1];
|
|
y = pathArray[0][2];
|
|
mx = x;
|
|
my = y;
|
|
start++;
|
|
res.push(["M", x, y]);
|
|
}
|
|
for (i = start, ii = pathArray.length; i < ii; i++) {
|
|
r = res[i] = [];
|
|
pa = pathArray[i];
|
|
if (pa[0] != pa[0].toLowerCase()) {
|
|
r[0] = pa[0].toLowerCase();
|
|
switch (r[0]) {
|
|
case "a":
|
|
r[1] = pa[1];
|
|
r[2] = pa[2];
|
|
r[3] = pa[3];
|
|
r[4] = pa[4];
|
|
r[5] = pa[5];
|
|
r[6] = +(pa[6] - x).toFixed(3);
|
|
r[7] = +(pa[7] - y).toFixed(3);
|
|
break;
|
|
case "v":
|
|
r[1] = +(pa[1] - y).toFixed(3);
|
|
break;
|
|
case "m":
|
|
mx = pa[1];
|
|
my = pa[2];
|
|
default:
|
|
for (j = 1, jj = pa.length; j < jj; j++) {
|
|
r[j] = +(pa[j] - ((j % 2) ? x : y)).toFixed(3);
|
|
}
|
|
}
|
|
} else {
|
|
r = res[i] = [];
|
|
if (pa[0] == "m") {
|
|
mx = pa[1] + x;
|
|
my = pa[2] + y;
|
|
}
|
|
for (k = 0, kk = pa.length; k < kk; k++) {
|
|
res[i][k] = pa[k];
|
|
}
|
|
}
|
|
len = res[i].length;
|
|
switch (res[i][0]) {
|
|
case "z":
|
|
x = mx;
|
|
y = my;
|
|
break;
|
|
case "h":
|
|
x += +res[i][len - 1];
|
|
break;
|
|
case "v":
|
|
y += +res[i][len - 1];
|
|
break;
|
|
default:
|
|
x += +res[i][len - 2];
|
|
y += +res[i][len - 1];
|
|
}
|
|
}
|
|
res.toString = this.path2string;
|
|
return res;
|
|
},
|
|
|
|
// Returns a path converted to a set of curveto commands
|
|
path2curve: function (path) {
|
|
var me = this,
|
|
points = me.pathToAbsolute(path),
|
|
ln = points.length,
|
|
attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
|
|
i, seg, segLn, point;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
points[i] = me.command2curve(points[i], attrs);
|
|
if (points[i].length > 7) {
|
|
points[i].shift();
|
|
point = points[i];
|
|
while (point.length) {
|
|
Ext.Array.splice(points, i++, 0, ["C"].concat(Ext.Array.splice(point, 0, 6)));
|
|
}
|
|
Ext.Array.erase(points, i, 1);
|
|
ln = points.length;
|
|
i--;
|
|
}
|
|
seg = points[i];
|
|
segLn = seg.length;
|
|
attrs.x = seg[segLn - 2];
|
|
attrs.y = seg[segLn - 1];
|
|
attrs.bx = parseFloat(seg[segLn - 4]) || attrs.x;
|
|
attrs.by = parseFloat(seg[segLn - 3]) || attrs.y;
|
|
}
|
|
return points;
|
|
},
|
|
|
|
interpolatePaths: function (path, path2) {
|
|
var me = this,
|
|
p = me.pathToAbsolute(path),
|
|
p2 = me.pathToAbsolute(path2),
|
|
attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
|
|
attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
|
|
fixArc = function (pp, i) {
|
|
if (pp[i].length > 7) {
|
|
pp[i].shift();
|
|
var pi = pp[i];
|
|
while (pi.length) {
|
|
Ext.Array.splice(pp, i++, 0, ["C"].concat(Ext.Array.splice(pi, 0, 6)));
|
|
}
|
|
Ext.Array.erase(pp, i, 1);
|
|
ii = Math.max(p.length, p2.length || 0);
|
|
}
|
|
},
|
|
fixM = function (path1, path2, a1, a2, i) {
|
|
if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
|
|
Ext.Array.splice(path2, i, 0, ["M", a2.x, a2.y]);
|
|
a1.bx = 0;
|
|
a1.by = 0;
|
|
a1.x = path1[i][1];
|
|
a1.y = path1[i][2];
|
|
ii = Math.max(p.length, p2.length || 0);
|
|
}
|
|
},
|
|
i, ii,
|
|
seg, seg2, seglen, seg2len;
|
|
for (i = 0, ii = Math.max(p.length, p2.length || 0); i < ii; i++) {
|
|
p[i] = me.command2curve(p[i], attrs);
|
|
fixArc(p, i);
|
|
(p2[i] = me.command2curve(p2[i], attrs2));
|
|
fixArc(p2, i);
|
|
fixM(p, p2, attrs, attrs2, i);
|
|
fixM(p2, p, attrs2, attrs, i);
|
|
seg = p[i];
|
|
seg2 = p2[i];
|
|
seglen = seg.length;
|
|
seg2len = seg2.length;
|
|
attrs.x = seg[seglen - 2];
|
|
attrs.y = seg[seglen - 1];
|
|
attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
|
|
attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
|
|
attrs2.bx = (parseFloat(seg2[seg2len - 4]) || attrs2.x);
|
|
attrs2.by = (parseFloat(seg2[seg2len - 3]) || attrs2.y);
|
|
attrs2.x = seg2[seg2len - 2];
|
|
attrs2.y = seg2[seg2len - 1];
|
|
}
|
|
return [p, p2];
|
|
},
|
|
|
|
//Returns any path command as a curveto command based on the attrs passed
|
|
command2curve: function (pathCommand, d) {
|
|
var me = this;
|
|
if (!pathCommand) {
|
|
return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
|
|
}
|
|
if (pathCommand[0] != "T" && pathCommand[0] != "Q") {
|
|
d.qx = d.qy = null;
|
|
}
|
|
switch (pathCommand[0]) {
|
|
case "M":
|
|
d.X = pathCommand[1];
|
|
d.Y = pathCommand[2];
|
|
break;
|
|
case "A":
|
|
pathCommand = ["C"].concat(me.arc2curve.apply(me, [d.x, d.y].concat(pathCommand.slice(1))));
|
|
break;
|
|
case "S":
|
|
pathCommand = ["C", d.x + (d.x - (d.bx || d.x)), d.y + (d.y - (d.by || d.y))].concat(pathCommand.slice(1));
|
|
break;
|
|
case "T":
|
|
d.qx = d.x + (d.x - (d.qx || d.x));
|
|
d.qy = d.y + (d.y - (d.qy || d.y));
|
|
pathCommand = ["C"].concat(me.quadratic2curve(d.x, d.y, d.qx, d.qy, pathCommand[1], pathCommand[2]));
|
|
break;
|
|
case "Q":
|
|
d.qx = pathCommand[1];
|
|
d.qy = pathCommand[2];
|
|
pathCommand = ["C"].concat(me.quadratic2curve(d.x, d.y, pathCommand[1], pathCommand[2], pathCommand[3], pathCommand[4]));
|
|
break;
|
|
case "L":
|
|
pathCommand = ["C"].concat(d.x, d.y, pathCommand[1], pathCommand[2], pathCommand[1], pathCommand[2]);
|
|
break;
|
|
case "H":
|
|
pathCommand = ["C"].concat(d.x, d.y, pathCommand[1], d.y, pathCommand[1], d.y);
|
|
break;
|
|
case "V":
|
|
pathCommand = ["C"].concat(d.x, d.y, d.x, pathCommand[1], d.x, pathCommand[1]);
|
|
break;
|
|
case "Z":
|
|
pathCommand = ["C"].concat(d.x, d.y, d.X, d.Y, d.X, d.Y);
|
|
break;
|
|
}
|
|
return pathCommand;
|
|
},
|
|
|
|
quadratic2curve: function (x1, y1, ax, ay, x2, y2) {
|
|
var _13 = 1 / 3,
|
|
_23 = 2 / 3;
|
|
return [
|
|
_13 * x1 + _23 * ax,
|
|
_13 * y1 + _23 * ay,
|
|
_13 * x2 + _23 * ax,
|
|
_13 * y2 + _23 * ay,
|
|
x2,
|
|
y2
|
|
];
|
|
},
|
|
|
|
rotate: function (x, y, rad) {
|
|
var cos = Math.cos(rad),
|
|
sin = Math.sin(rad),
|
|
X = x * cos - y * sin,
|
|
Y = x * sin + y * cos;
|
|
return {x: X, y: Y};
|
|
},
|
|
|
|
arc2curve: function (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
|
|
// for more information of where this Math came from visit:
|
|
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
|
|
var me = this,
|
|
PI = Math.PI,
|
|
radian = me.radian,
|
|
_120 = PI * 120 / 180,
|
|
rad = radian * (+angle || 0),
|
|
res = [],
|
|
math = Math,
|
|
mcos = math.cos,
|
|
msin = math.sin,
|
|
msqrt = math.sqrt,
|
|
mabs = math.abs,
|
|
masin = math.asin,
|
|
xy, x, y, h, rx2, ry2, k, cx, cy, f1, f2, df, c1, s1, c2, s2,
|
|
t, hx, hy, m1, m2, m3, m4, newres, i, ln, f2old, x2old, y2old;
|
|
if (!recursive) {
|
|
xy = me.rotate(x1, y1, -rad);
|
|
x1 = xy.x;
|
|
y1 = xy.y;
|
|
xy = me.rotate(x2, y2, -rad);
|
|
x2 = xy.x;
|
|
y2 = xy.y;
|
|
x = (x1 - x2) / 2;
|
|
y = (y1 - y2) / 2;
|
|
h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
|
|
if (h > 1) {
|
|
h = msqrt(h);
|
|
rx = h * rx;
|
|
ry = h * ry;
|
|
}
|
|
rx2 = rx * rx;
|
|
ry2 = ry * ry;
|
|
k = (large_arc_flag == sweep_flag ? -1 : 1) *
|
|
msqrt(mabs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
|
|
cx = k * rx * y / ry + (x1 + x2) / 2;
|
|
cy = k * -ry * x / rx + (y1 + y2) / 2;
|
|
f1 = masin(((y1 - cy) / ry).toFixed(7));
|
|
f2 = masin(((y2 - cy) / ry).toFixed(7));
|
|
|
|
f1 = x1 < cx ? PI - f1 : f1;
|
|
f2 = x2 < cx ? PI - f2 : f2;
|
|
if (f1 < 0) {
|
|
f1 = PI * 2 + f1;
|
|
}
|
|
if (f2 < 0) {
|
|
f2 = PI * 2 + f2;
|
|
}
|
|
if (sweep_flag && f1 > f2) {
|
|
f1 = f1 - PI * 2;
|
|
}
|
|
if (!sweep_flag && f2 > f1) {
|
|
f2 = f2 - PI * 2;
|
|
}
|
|
}
|
|
else {
|
|
f1 = recursive[0];
|
|
f2 = recursive[1];
|
|
cx = recursive[2];
|
|
cy = recursive[3];
|
|
}
|
|
df = f2 - f1;
|
|
if (mabs(df) > _120) {
|
|
f2old = f2;
|
|
x2old = x2;
|
|
y2old = y2;
|
|
f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
|
|
x2 = cx + rx * mcos(f2);
|
|
y2 = cy + ry * msin(f2);
|
|
res = me.arc2curve(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
|
|
}
|
|
df = f2 - f1;
|
|
c1 = mcos(f1);
|
|
s1 = msin(f1);
|
|
c2 = mcos(f2);
|
|
s2 = msin(f2);
|
|
t = math.tan(df / 4);
|
|
hx = 4 / 3 * rx * t;
|
|
hy = 4 / 3 * ry * t;
|
|
m1 = [x1, y1];
|
|
m2 = [x1 + hx * s1, y1 - hy * c1];
|
|
m3 = [x2 + hx * s2, y2 - hy * c2];
|
|
m4 = [x2, y2];
|
|
m2[0] = 2 * m1[0] - m2[0];
|
|
m2[1] = 2 * m1[1] - m2[1];
|
|
if (recursive) {
|
|
return [m2, m3, m4].concat(res);
|
|
}
|
|
else {
|
|
res = [m2, m3, m4].concat(res).join().split(",");
|
|
newres = [];
|
|
ln = res.length;
|
|
for (i = 0; i < ln; i++) {
|
|
newres[i] = i % 2 ? me.rotate(res[i - 1], res[i], rad).y : me.rotate(res[i], res[i + 1], rad).x;
|
|
}
|
|
return newres;
|
|
}
|
|
},
|
|
|
|
// TO BE DEPRECATED
|
|
rotateAndTranslatePath: function (sprite) {
|
|
var alpha = sprite.rotation.degrees,
|
|
cx = sprite.rotation.x,
|
|
cy = sprite.rotation.y,
|
|
dx = sprite.translation.x,
|
|
dy = sprite.translation.y,
|
|
path,
|
|
i,
|
|
p,
|
|
xy,
|
|
j,
|
|
res = [];
|
|
if (!alpha && !dx && !dy) {
|
|
return this.pathToAbsolute(sprite.attr.path);
|
|
}
|
|
dx = dx || 0;
|
|
dy = dy || 0;
|
|
path = this.pathToAbsolute(sprite.attr.path);
|
|
for (i = path.length; i--;) {
|
|
p = res[i] = path[i].slice();
|
|
if (p[0] == "A") {
|
|
xy = this.rotatePoint(p[6], p[7], alpha, cx, cy);
|
|
p[6] = xy.x + dx;
|
|
p[7] = xy.y + dy;
|
|
} else {
|
|
j = 1;
|
|
while (p[j + 1] != null) {
|
|
xy = this.rotatePoint(p[j], p[j + 1], alpha, cx, cy);
|
|
p[j] = xy.x + dx;
|
|
p[j + 1] = xy.y + dy;
|
|
j += 2;
|
|
}
|
|
}
|
|
}
|
|
return res;
|
|
},
|
|
|
|
// TO BE DEPRECATED
|
|
rotatePoint: function (x, y, alpha, cx, cy) {
|
|
if (!alpha) {
|
|
return {
|
|
x: x,
|
|
y: y
|
|
};
|
|
}
|
|
cx = cx || 0;
|
|
cy = cy || 0;
|
|
x = x - cx;
|
|
y = y - cy;
|
|
alpha = alpha * this.radian;
|
|
var cos = Math.cos(alpha),
|
|
sin = Math.sin(alpha);
|
|
return {
|
|
x: x * cos - y * sin + cx,
|
|
y: x * sin + y * cos + cy
|
|
};
|
|
},
|
|
|
|
pathDimensions: function (path) {
|
|
if (!path || !(path + "")) {
|
|
return {x: 0, y: 0, width: 0, height: 0};
|
|
}
|
|
path = this.path2curve(path);
|
|
var x = 0,
|
|
y = 0,
|
|
X = [],
|
|
Y = [],
|
|
i = 0,
|
|
ln = path.length,
|
|
p, xmin, ymin, xmax, ymax, dim;
|
|
for (; i < ln; i++) {
|
|
p = path[i];
|
|
if (p[0] == "M") {
|
|
x = p[1];
|
|
y = p[2];
|
|
X.push(x);
|
|
Y.push(y);
|
|
}
|
|
else {
|
|
dim = this.curveDim(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
|
|
X = X.concat(dim.min.x, dim.max.x);
|
|
Y = Y.concat(dim.min.y, dim.max.y);
|
|
x = p[5];
|
|
y = p[6];
|
|
}
|
|
}
|
|
xmin = Math.min.apply(0, X);
|
|
ymin = Math.min.apply(0, Y);
|
|
xmax = Math.max.apply(0, X);
|
|
ymax = Math.max.apply(0, Y);
|
|
return {
|
|
x: Math.round(xmin),
|
|
y: Math.round(ymin),
|
|
path: path,
|
|
width: Math.round(xmax - xmin),
|
|
height: Math.round(ymax - ymin)
|
|
};
|
|
},
|
|
|
|
intersectInside: function(path, cp1, cp2) {
|
|
return (cp2[0] - cp1[0]) * (path[1] - cp1[1]) > (cp2[1] - cp1[1]) * (path[0] - cp1[0]);
|
|
},
|
|
|
|
intersectIntersection: function(s, e, cp1, cp2) {
|
|
var p = [],
|
|
dcx = cp1[0] - cp2[0],
|
|
dcy = cp1[1] - cp2[1],
|
|
dpx = s[0] - e[0],
|
|
dpy = s[1] - e[1],
|
|
n1 = cp1[0] * cp2[1] - cp1[1] * cp2[0],
|
|
n2 = s[0] * e[1] - s[1] * e[0],
|
|
n3 = 1 / (dcx * dpy - dcy * dpx);
|
|
|
|
p[0] = (n1 * dpx - n2 * dcx) * n3;
|
|
p[1] = (n1 * dpy - n2 * dcy) * n3;
|
|
return p;
|
|
},
|
|
|
|
intersect: function(subjectPolygon, clipPolygon) {
|
|
var me = this,
|
|
i = 0,
|
|
ln = clipPolygon.length,
|
|
cp1 = clipPolygon[ln - 1],
|
|
outputList = subjectPolygon,
|
|
cp2, s, e, ln2, inputList, j;
|
|
for (; i < ln; ++i) {
|
|
cp2 = clipPolygon[i];
|
|
inputList = outputList;
|
|
outputList = [];
|
|
s = inputList[inputList.length - 1];
|
|
j = 0;
|
|
ln2 = inputList.length;
|
|
for (; j < ln2; j++) {
|
|
e = inputList[j];
|
|
if (me.intersectInside(e, cp1, cp2)) {
|
|
if (!me.intersectInside(s, cp1, cp2)) {
|
|
outputList.push(me.intersectIntersection(s, e, cp1, cp2));
|
|
}
|
|
outputList.push(e);
|
|
}
|
|
else if (me.intersectInside(s, cp1, cp2)) {
|
|
outputList.push(me.intersectIntersection(s, e, cp1, cp2));
|
|
}
|
|
s = e;
|
|
}
|
|
cp1 = cp2;
|
|
}
|
|
return outputList;
|
|
},
|
|
|
|
bezier : function (a, b, c, d, x) {
|
|
if (x === 0) {
|
|
return a;
|
|
}
|
|
else if (x === 1) {
|
|
return d;
|
|
}
|
|
var du = 1 - x,
|
|
d3 = du * du * du,
|
|
r = x / du;
|
|
return d3 * (a + r * (3 * b + r * (3 * c + d * r)));
|
|
},
|
|
|
|
bezierDim : function (a, b, c, d) {
|
|
var points = [], r,
|
|
A, top, C, delta, bottom, s,
|
|
min, max, i;
|
|
// The min and max happens on boundary or b' == 0
|
|
if (a + 3 * c == d + 3 * b) {
|
|
r = a - b;
|
|
r /= 2 * (a - b - b + c);
|
|
if ( r < 1 && r > 0) {
|
|
points.push(r);
|
|
}
|
|
} else {
|
|
// b'(x) / -3 = (a-3b+3c-d)x^2+ (-2a+4b-2c)x + (a-b)
|
|
// delta = -4 (-b^2+a c+b c-c^2-a d+b d)
|
|
A = a - 3 * b + 3 * c - d;
|
|
top = 2 * (a - b - b + c);
|
|
C = a - b;
|
|
delta = top * top - 4 * A * C;
|
|
bottom = A + A;
|
|
if (delta === 0) {
|
|
r = top / bottom;
|
|
if (r < 1 && r > 0) {
|
|
points.push(r);
|
|
}
|
|
} else if (delta > 0) {
|
|
s = Math.sqrt(delta);
|
|
r = (s + top) / bottom;
|
|
|
|
if (r < 1 && r > 0) {
|
|
points.push(r);
|
|
}
|
|
|
|
r = (top - s) / bottom;
|
|
|
|
if (r < 1 && r > 0) {
|
|
points.push(r);
|
|
}
|
|
}
|
|
}
|
|
min = Math.min(a, d);
|
|
max = Math.max(a, d);
|
|
for (i = 0; i < points.length; i++) {
|
|
min = Math.min(min, this.bezier(a, b, c, d, points[i]));
|
|
max = Math.max(max, this.bezier(a, b, c, d, points[i]));
|
|
}
|
|
return [min, max];
|
|
},
|
|
|
|
curveDim: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
|
|
var x = this.bezierDim(p1x, c1x, c2x, p2x),
|
|
y = this.bezierDim(p1y, c1y, c2y, p2y);
|
|
return {
|
|
min: {
|
|
x: x[0],
|
|
y: y[0]
|
|
},
|
|
max: {
|
|
x: x[1],
|
|
y: y[1]
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Calculates bezier curve control anchor points for a particular point in a path, with a
|
|
* smoothing curve applied. The smoothness of the curve is controlled by the 'value' parameter.
|
|
* Note that this algorithm assumes that the line being smoothed is normalized going from left
|
|
* to right; it makes special adjustments assuming this orientation.
|
|
*
|
|
* @param {Number} prevX X coordinate of the previous point in the path
|
|
* @param {Number} prevY Y coordinate of the previous point in the path
|
|
* @param {Number} curX X coordinate of the current point in the path
|
|
* @param {Number} curY Y coordinate of the current point in the path
|
|
* @param {Number} nextX X coordinate of the next point in the path
|
|
* @param {Number} nextY Y coordinate of the next point in the path
|
|
* @param {Number} value A value to control the smoothness of the curve; this is used to
|
|
* divide the distance between points, so a value of 2 corresponds to
|
|
* half the distance between points (a very smooth line) while higher values
|
|
* result in less smooth curves. Defaults to 4.
|
|
* @return {Object} Object containing x1, y1, x2, y2 bezier control anchor points; x1 and y1
|
|
* are the control point for the curve toward the previous path point, and
|
|
* x2 and y2 are the control point for the curve toward the next path point.
|
|
*/
|
|
getAnchors: function (prevX, prevY, curX, curY, nextX, nextY, value) {
|
|
value = value || 4;
|
|
var M = Math,
|
|
PI = M.PI,
|
|
halfPI = PI / 2,
|
|
abs = M.abs,
|
|
sin = M.sin,
|
|
cos = M.cos,
|
|
atan = M.atan,
|
|
control1Length, control2Length, control1Angle, control2Angle,
|
|
control1X, control1Y, control2X, control2Y, alpha;
|
|
|
|
// Find the length of each control anchor line, by dividing the horizontal distance
|
|
// between points by the value parameter.
|
|
control1Length = (curX - prevX) / value;
|
|
control2Length = (nextX - curX) / value;
|
|
|
|
// Determine the angle of each control anchor line. If the middle point is a vertical
|
|
// turnaround then we force it to a flat horizontal angle to prevent the curve from
|
|
// dipping above or below the middle point. Otherwise we use an angle that points
|
|
// toward the previous/next target point.
|
|
if ((curY >= prevY && curY >= nextY) || (curY <= prevY && curY <= nextY)) {
|
|
control1Angle = control2Angle = halfPI;
|
|
} else {
|
|
control1Angle = atan((curX - prevX) / abs(curY - prevY));
|
|
if (prevY < curY) {
|
|
control1Angle = PI - control1Angle;
|
|
}
|
|
control2Angle = atan((nextX - curX) / abs(curY - nextY));
|
|
if (nextY < curY) {
|
|
control2Angle = PI - control2Angle;
|
|
}
|
|
}
|
|
|
|
// Adjust the calculated angles so they point away from each other on the same line
|
|
alpha = halfPI - ((control1Angle + control2Angle) % (PI * 2)) / 2;
|
|
if (alpha > halfPI) {
|
|
alpha -= PI;
|
|
}
|
|
control1Angle += alpha;
|
|
control2Angle += alpha;
|
|
|
|
// Find the control anchor points from the angles and length
|
|
control1X = curX - control1Length * sin(control1Angle);
|
|
control1Y = curY + control1Length * cos(control1Angle);
|
|
control2X = curX + control2Length * sin(control2Angle);
|
|
control2Y = curY + control2Length * cos(control2Angle);
|
|
|
|
// One last adjustment, make sure that no control anchor point extends vertically past
|
|
// its target prev/next point, as that results in curves dipping above or below and
|
|
// bending back strangely. If we find this happening we keep the control angle but
|
|
// reduce the length of the control line so it stays within bounds.
|
|
if ((curY > prevY && control1Y < prevY) || (curY < prevY && control1Y > prevY)) {
|
|
control1X += abs(prevY - control1Y) * (control1X - curX) / (control1Y - curY);
|
|
control1Y = prevY;
|
|
}
|
|
if ((curY > nextY && control2Y < nextY) || (curY < nextY && control2Y > nextY)) {
|
|
control2X -= abs(nextY - control2Y) * (control2X - curX) / (control2Y - curY);
|
|
control2Y = nextY;
|
|
}
|
|
|
|
return {
|
|
x1: control1X,
|
|
y1: control1Y,
|
|
x2: control2X,
|
|
y2: control2Y
|
|
};
|
|
},
|
|
|
|
/* Smoothing function for a path. Converts a path into cubic beziers. Value defines the divider of the distance between points.
|
|
* Defaults to a value of 4.
|
|
*/
|
|
smooth: function (originalPath, value) {
|
|
var path = this.path2curve(originalPath),
|
|
newp = [path[0]],
|
|
x = path[0][1],
|
|
y = path[0][2],
|
|
j,
|
|
points,
|
|
i = 1,
|
|
ii = path.length,
|
|
beg = 1,
|
|
mx = x,
|
|
my = y,
|
|
pathi,
|
|
pathil,
|
|
pathim,
|
|
pathiml,
|
|
pathip,
|
|
pathipl,
|
|
begl;
|
|
|
|
for (; i < ii; i++) {
|
|
pathi = path[i];
|
|
pathil = pathi.length;
|
|
pathim = path[i - 1];
|
|
pathiml = pathim.length;
|
|
pathip = path[i + 1];
|
|
pathipl = pathip && pathip.length;
|
|
if (pathi[0] == "M") {
|
|
mx = pathi[1];
|
|
my = pathi[2];
|
|
j = i + 1;
|
|
while (path[j][0] != "C") {
|
|
j++;
|
|
}
|
|
newp.push(["M", mx, my]);
|
|
beg = newp.length;
|
|
x = mx;
|
|
y = my;
|
|
continue;
|
|
}
|
|
if (pathi[pathil - 2] == mx && pathi[pathil - 1] == my && (!pathip || pathip[0] == "M")) {
|
|
begl = newp[beg].length;
|
|
points = this.getAnchors(pathim[pathiml - 2], pathim[pathiml - 1], mx, my, newp[beg][begl - 2], newp[beg][begl - 1], value);
|
|
newp[beg][1] = points.x2;
|
|
newp[beg][2] = points.y2;
|
|
}
|
|
else if (!pathip || pathip[0] == "M") {
|
|
points = {
|
|
x1: pathi[pathil - 2],
|
|
y1: pathi[pathil - 1]
|
|
};
|
|
} else {
|
|
points = this.getAnchors(pathim[pathiml - 2], pathim[pathiml - 1], pathi[pathil - 2], pathi[pathil - 1], pathip[pathipl - 2], pathip[pathipl - 1], value);
|
|
}
|
|
newp.push(["C", x, y, points.x1, points.y1, pathi[pathil - 2], pathi[pathil - 1]]);
|
|
x = points.x2;
|
|
y = points.y2;
|
|
}
|
|
return newp;
|
|
},
|
|
|
|
findDotAtSegment: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
|
|
var t1 = 1 - t;
|
|
return {
|
|
x: Math.pow(t1, 3) * p1x + Math.pow(t1, 2) * 3 * t * c1x + t1 * 3 * t * t * c2x + Math.pow(t, 3) * p2x,
|
|
y: Math.pow(t1, 3) * p1y + Math.pow(t1, 2) * 3 * t * c1y + t1 * 3 * t * t * c2y + Math.pow(t, 3) * p2y
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
snapEnds: function (from, to, stepsMax, prettyNumbers) {
|
|
if (Ext.isDate(from)) {
|
|
return this.snapEndsByDate(from, to, stepsMax);
|
|
}
|
|
var step = (to - from) / stepsMax,
|
|
level = Math.floor(Math.log(step) / Math.LN10) + 1,
|
|
m = Math.pow(10, level),
|
|
cur,
|
|
floor,
|
|
modulo = Math.round((step % m) * Math.pow(10, 2 - level)),
|
|
interval = [[0, 15], [10, 1], [20, 4], [25, 2], [50, 9], [100, 15]],
|
|
stepCount = 0,
|
|
value,
|
|
weight,
|
|
i,
|
|
topValue,
|
|
topWeight = 1e9,
|
|
ln = interval.length;
|
|
|
|
floor = Math.floor(from / m) * m;
|
|
if (from == floor && floor > 0) {
|
|
floor = Math.floor((from - (m/10)) / m) * m;
|
|
}
|
|
|
|
if (prettyNumbers) {
|
|
for (i = 0; i < ln; i++) {
|
|
value = interval[i][0];
|
|
weight = (value - modulo) < 0 ? 1e6 : (value - modulo) / interval[i][1];
|
|
if (weight < topWeight) {
|
|
topValue = value;
|
|
topWeight = weight;
|
|
}
|
|
}
|
|
step = Math.floor(step * Math.pow(10, -level)) * Math.pow(10, level) + topValue * Math.pow(10, level - 2);
|
|
|
|
if (from < 0 && to >= 0) {
|
|
cur = 0;
|
|
while (cur > from) {
|
|
cur -= step;
|
|
stepCount++;
|
|
}
|
|
from = +cur.toFixed(10);
|
|
|
|
cur = 0;
|
|
while (cur < to) {
|
|
cur += step;
|
|
stepCount++;
|
|
}
|
|
to = +cur.toFixed(10);
|
|
} else {
|
|
cur = from = floor;
|
|
while (cur < to) {
|
|
cur += step;
|
|
stepCount++;
|
|
}
|
|
}
|
|
to = +cur.toFixed(10);
|
|
} else {
|
|
from = floor;
|
|
stepCount = stepsMax;
|
|
}
|
|
|
|
return {
|
|
from: from,
|
|
to: to,
|
|
power: level,
|
|
step: step,
|
|
steps: stepCount
|
|
};
|
|
},
|
|
|
|
/**
|
|
* snapEndsByDate is a utility method to deduce an appropriate tick configuration for the data set of given
|
|
* feature. Refer to {@link #snapEnds}.
|
|
*
|
|
* @param {Date} from The minimum value in the data
|
|
* @param {Date} to The maximum value in the data
|
|
* @param {Number} stepsMax The maximum number of ticks
|
|
* @param {Boolean} lockEnds If true, the 'from' and 'to' parameters will be used as fixed end values and will not be adjusted
|
|
*
|
|
* @return {Object} The calculated step and ends info; properties are:
|
|
* - from: The result start value, which may be lower than the original start value
|
|
* - to: The result end value, which may be higher than the original end value
|
|
* - step: The fixed value size of each step, or undefined if the steps are not fixed.
|
|
* - steps: The number of steps if the steps are fixed, or an array of step values.
|
|
|
|
* NOTE: Even when the steps have a fixed value, they may not divide the from/to range perfectly evenly;
|
|
* there may be a smaller distance between the last step and the end value than between prior
|
|
* steps, particularly when the `endsLocked` param is true. Therefore it is best to not use
|
|
* the `steps` result when finding the axis tick points, instead use the `step`, `to`, and
|
|
* `from` to find the correct point for each tick.
|
|
*/
|
|
snapEndsByDate: function (from, to, stepsMax, lockEnds) {
|
|
var selectedStep = false,
|
|
scales = [
|
|
[Ext.Date.MILLI, [1, 2, 5, 10, 20, 50, 100, 200, 250, 500]],
|
|
[Ext.Date.SECOND, [1, 2, 5, 10, 15, 30]],
|
|
[Ext.Date.MINUTE, [1, 2, 5, 10, 15, 30]],
|
|
[Ext.Date.HOUR, [1, 2, 3, 4, 6, 12]],
|
|
[Ext.Date.DAY, [1, 2, 7, 14]],
|
|
[Ext.Date.MONTH, [1, 2, 3, 6]]
|
|
],
|
|
sLen = scales.length,
|
|
stop = false,
|
|
scale, j, yearDiff, s;
|
|
|
|
// Find the most desirable scale
|
|
for (s = 0; s < sLen; s++) {
|
|
scale = scales[s];
|
|
if (!stop) {
|
|
for (j = 0; j < scale[1].length; j++) {
|
|
if (to < Ext.Date.add(from, scale[0], scale[1][j] * stepsMax)) {
|
|
selectedStep = [scale[0], scale[1][j]];
|
|
stop = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!selectedStep) {
|
|
yearDiff = this.snapEnds(from.getFullYear(), to.getFullYear() + 1, stepsMax, lockEnds);
|
|
selectedStep = [Date.YEAR, Math.round(yearDiff.step)];
|
|
}
|
|
return this.snapEndsByDateAndStep(from, to, selectedStep, lockEnds);
|
|
},
|
|
|
|
|
|
/**
|
|
* snapEndsByDateAndStep is a utility method to deduce an appropriate tick configuration for the data set of given
|
|
* feature and specific step size.
|
|
*
|
|
* @param {Date} from The minimum value in the data
|
|
* @param {Date} to The maximum value in the data
|
|
* @param {Array} step An array with two components: The first is the unit of the step (day, month, year, etc).
|
|
* The second is the number of units for the step (1, 2, etc.).
|
|
* If the number is an integer, it represents the number of units for the step ([Ext.Date.DAY, 2] means "Every other day").
|
|
* If the number is a fraction, it represents the number of steps per unit ([Ext.Date.DAY, 1/2] means "Twice a day").
|
|
* If the unit is the month, the steps may be adjusted depending on the month. For instance [Ext.Date.MONTH, 1/3], which means "Three times a month",
|
|
* generates steps on the 1st, the 10th and the 20th of every month regardless of whether a month has 28 days or 31 days. The steps are generated
|
|
* as follows:
|
|
* - [Ext.Date.MONTH, n]: on the current date every 'n' months, maxed to the number of days in the month.
|
|
* - [Ext.Date.MONTH, 1/2]: on the 1st and 15th of every month.
|
|
* - [Ext.Date.MONTH, 1/3]: on the 1st, 10th and 20th of every month.
|
|
* - [Ext.Date.MONTH, 1/4]: on the 1st, 8th, 15th and 22nd of every month.
|
|
* @param {Boolean} lockEnds If true, the 'from' and 'to' parameters will be used as fixed end values
|
|
* and will not be adjusted
|
|
*
|
|
* @return {Object} The calculated step and ends info; properties are:
|
|
* - from: The result start value, which may be lower than the original start value
|
|
* - to: The result end value, which may be higher than the original end value
|
|
* - step: The fixed value size of each step, or undefined if the steps are not fixed.
|
|
* - steps: The number of steps if the steps are fixed, or an array of step values.
|
|
|
|
* NOTE: Even when the steps have a fixed value, they may not divide the from/to range perfectly evenly;
|
|
* there may be a smaller distance between the last step and the end value than between prior
|
|
* steps, particularly when the `endsLocked` param is true. Therefore it is best to not use
|
|
* the `steps` result when finding the axis tick points, instead use the `step`, `to`, and
|
|
* `from` to find the correct point for each tick.
|
|
*/
|
|
|
|
snapEndsByDateAndStep: function(from, to, step, lockEnds) {
|
|
var fromStat = [from.getFullYear(), from.getMonth(), from.getDate(),
|
|
from.getHours(), from.getMinutes(), from.getSeconds(), from.getMilliseconds()],
|
|
steps, testFrom, testTo, date, year, month, day, fractionalMonth,
|
|
stepUnit = step[0], stepValue = step[1];
|
|
if (lockEnds) {
|
|
testFrom = from;
|
|
} else {
|
|
switch (stepUnit) {
|
|
case Ext.Date.MILLI:
|
|
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
|
|
fromStat[4], fromStat[5], Math.floor(fromStat[6] / stepValue) * stepValue);
|
|
break;
|
|
case Ext.Date.SECOND:
|
|
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
|
|
fromStat[4], Math.floor(fromStat[5] / stepValue) * stepValue, 0);
|
|
break;
|
|
case Ext.Date.MINUTE:
|
|
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
|
|
Math.floor(fromStat[4] / stepValue) * stepValue, 0, 0);
|
|
break;
|
|
case Ext.Date.HOUR:
|
|
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2],
|
|
Math.floor(fromStat[3] / stepValue) * stepValue, 0, 0, 0);
|
|
break;
|
|
case Ext.Date.DAY:
|
|
testFrom = new Date(fromStat[0], fromStat[1],
|
|
Math.floor((fromStat[2] - 1) / stepValue) * stepValue + 1, 0, 0, 0, 0);
|
|
break;
|
|
case Ext.Date.MONTH:
|
|
testFrom = new Date(fromStat[0], Math.floor(fromStat[1] / stepValue) * stepValue, 1, 0, 0, 0, 0);
|
|
break;
|
|
default: // Ext.Date.YEAR
|
|
testFrom = new Date(Math.floor(fromStat[0] / stepValue) * stepValue, 0, 1, 0, 0, 0, 0);
|
|
break;
|
|
}
|
|
}
|
|
|
|
fractionalMonth = ((stepUnit === Ext.Date.MONTH) && (stepValue == 1/2 || stepValue == 1/3 || stepValue == 1/4));
|
|
steps = (fractionalMonth ? [] : 0);
|
|
|
|
// TODO(zhangbei) : We can do it better somehow...
|
|
testTo = new Date(testFrom);
|
|
while (testTo < to) {
|
|
if (fractionalMonth) {
|
|
date = new Date(testTo);
|
|
year = date.getFullYear();
|
|
month = date.getMonth();
|
|
day = date.getDate();
|
|
switch(stepValue) {
|
|
case 1/2: // the 1st and 15th of every month
|
|
if (day >= 15) {
|
|
day = 1;
|
|
if (++month > 11) {
|
|
year++;
|
|
}
|
|
}
|
|
else {
|
|
day = 15;
|
|
}
|
|
break;
|
|
|
|
case 1/3: // the 1st, 10th and 20th of every month
|
|
if (day >= 20) {
|
|
day = 1;
|
|
if (++month > 11) {
|
|
year++;
|
|
}
|
|
}
|
|
else {
|
|
if (day >= 10) {
|
|
day = 20
|
|
}
|
|
else {
|
|
day = 10;
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 1/4: // the 1st, 8th, 15th and 22nd of every month
|
|
if (day >= 22) {
|
|
day = 1;
|
|
if (++month > 11) {
|
|
year++;
|
|
}
|
|
}
|
|
else {
|
|
if (day >= 15) {
|
|
day = 22
|
|
}
|
|
else {
|
|
if (day >= 8) {
|
|
day = 15
|
|
}
|
|
else {
|
|
day = 8;
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
testTo.setYear(year);
|
|
testTo.setMonth(month);
|
|
testTo.setDate(day);
|
|
steps.push(new Date(testTo));
|
|
}
|
|
else {
|
|
testTo = Ext.Date.add(testTo, stepUnit, stepValue);
|
|
steps++;
|
|
}
|
|
}
|
|
|
|
if (lockEnds) {
|
|
testTo = to;
|
|
}
|
|
|
|
if (fractionalMonth) {
|
|
return {
|
|
from : +testFrom,
|
|
to : +testTo,
|
|
steps : steps // array of steps
|
|
};
|
|
}
|
|
else {
|
|
return {
|
|
from : +testFrom,
|
|
to : +testTo,
|
|
step : (testTo - testFrom) / steps,
|
|
steps : steps // number of steps
|
|
};
|
|
}
|
|
},
|
|
|
|
sorter: function (a, b) {
|
|
return a.offset - b.offset;
|
|
},
|
|
|
|
rad: function(degrees) {
|
|
return degrees % 360 * Math.PI / 180;
|
|
},
|
|
|
|
degrees: function(radian) {
|
|
return radian * 180 / Math.PI % 360;
|
|
},
|
|
|
|
withinBox: function(x, y, bbox) {
|
|
bbox = bbox || {};
|
|
return (x >= bbox.x && x <= (bbox.x + bbox.width) && y >= bbox.y && y <= (bbox.y + bbox.height));
|
|
},
|
|
|
|
parseGradient: function(gradient) {
|
|
var me = this,
|
|
type = gradient.type || 'linear',
|
|
angle = gradient.angle || 0,
|
|
radian = me.radian,
|
|
stops = gradient.stops,
|
|
stopsArr = [],
|
|
stop,
|
|
vector,
|
|
max,
|
|
stopObj;
|
|
|
|
if (type == 'linear') {
|
|
vector = [0, 0, Math.cos(angle * radian), Math.sin(angle * radian)];
|
|
max = 1 / (Math.max(Math.abs(vector[2]), Math.abs(vector[3])) || 1);
|
|
vector[2] *= max;
|
|
vector[3] *= max;
|
|
if (vector[2] < 0) {
|
|
vector[0] = -vector[2];
|
|
vector[2] = 0;
|
|
}
|
|
if (vector[3] < 0) {
|
|
vector[1] = -vector[3];
|
|
vector[3] = 0;
|
|
}
|
|
}
|
|
|
|
for (stop in stops) {
|
|
if (stops.hasOwnProperty(stop) && me.stopsRE.test(stop)) {
|
|
stopObj = {
|
|
offset: parseInt(stop, 10),
|
|
color: Ext.draw.Color.toHex(stops[stop].color) || '#ffffff',
|
|
opacity: stops[stop].opacity || 1
|
|
};
|
|
stopsArr.push(stopObj);
|
|
}
|
|
}
|
|
// Sort by pct property
|
|
Ext.Array.sort(stopsArr, me.sorter);
|
|
if (type == 'linear') {
|
|
return {
|
|
id: gradient.id,
|
|
type: type,
|
|
vector: vector,
|
|
stops: stopsArr
|
|
};
|
|
}
|
|
else {
|
|
return {
|
|
id: gradient.id,
|
|
type: type,
|
|
centerX: gradient.centerX,
|
|
centerY: gradient.centerY,
|
|
focalX: gradient.focalX,
|
|
focalY: gradient.focalY,
|
|
radius: gradient.radius,
|
|
vector: vector,
|
|
stops: stopsArr
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.fx.PropertyHandler', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
statics: {
|
|
defaultHandler: {
|
|
pixelDefaultsRE: /width|height|top$|bottom$|left$|right$/i,
|
|
unitRE: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/,
|
|
scrollRE: /^scroll/i,
|
|
|
|
computeDelta: function(from, end, damper, initial, attr) {
|
|
damper = (typeof damper == 'number') ? damper : 1;
|
|
var unitRE = this.unitRE,
|
|
match = unitRE.exec(from),
|
|
start, units;
|
|
if (match) {
|
|
from = match[1];
|
|
units = match[2];
|
|
if (!this.scrollRE.test(attr) && !units && this.pixelDefaultsRE.test(attr)) {
|
|
units = 'px';
|
|
}
|
|
}
|
|
from = +from || 0;
|
|
|
|
match = unitRE.exec(end);
|
|
if (match) {
|
|
end = match[1];
|
|
units = match[2] || units;
|
|
}
|
|
end = +end || 0;
|
|
start = (initial != null) ? initial : from;
|
|
return {
|
|
from: from,
|
|
delta: (end - start) * damper,
|
|
units: units
|
|
};
|
|
},
|
|
|
|
get: function(from, end, damper, initialFrom, attr) {
|
|
var ln = from.length,
|
|
out = [],
|
|
i, initial, res, j, len;
|
|
for (i = 0; i < ln; i++) {
|
|
if (initialFrom) {
|
|
initial = initialFrom[i][1].from;
|
|
}
|
|
if (Ext.isArray(from[i][1]) && Ext.isArray(end)) {
|
|
res = [];
|
|
j = 0;
|
|
len = from[i][1].length;
|
|
for (; j < len; j++) {
|
|
res.push(this.computeDelta(from[i][1][j], end[j], damper, initial, attr));
|
|
}
|
|
out.push([from[i][0], res]);
|
|
}
|
|
else {
|
|
out.push([from[i][0], this.computeDelta(from[i][1], end, damper, initial, attr)]);
|
|
}
|
|
}
|
|
return out;
|
|
},
|
|
|
|
set: function(values, easing) {
|
|
var ln = values.length,
|
|
out = [],
|
|
i, val, res, len, j;
|
|
for (i = 0; i < ln; i++) {
|
|
val = values[i][1];
|
|
if (Ext.isArray(val)) {
|
|
res = [];
|
|
j = 0;
|
|
len = val.length;
|
|
for (; j < len; j++) {
|
|
res.push(val[j].from + val[j].delta * easing + (val[j].units || 0));
|
|
}
|
|
out.push([values[i][0], res]);
|
|
} else {
|
|
out.push([values[i][0], val.from + val.delta * easing + (val.units || 0)]);
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
},
|
|
stringHandler: {
|
|
computeDelta: function(from, end, damper, initial, attr) {
|
|
return {
|
|
from: from,
|
|
delta: end
|
|
};
|
|
},
|
|
|
|
get: function(from, end, damper, initialFrom, attr) {
|
|
var ln = from.length,
|
|
out = [],
|
|
i, initial, res, j, len;
|
|
for (i = 0; i < ln; i++) {
|
|
out.push([from[i][0], this.computeDelta(from[i][1], end, damper, initial, attr)]);
|
|
}
|
|
return out;
|
|
},
|
|
|
|
set: function(values, easing) {
|
|
var ln = values.length,
|
|
out = [],
|
|
i, val, res, len, j;
|
|
for (i = 0; i < ln; i++) {
|
|
val = values[i][1];
|
|
out.push([values[i][0], val.delta]);
|
|
}
|
|
return out;
|
|
}
|
|
},
|
|
color: {
|
|
rgbRE: /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
|
|
hexRE: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
|
|
hex3RE: /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i,
|
|
|
|
parseColor : function(color, damper) {
|
|
damper = (typeof damper == 'number') ? damper : 1;
|
|
var out = false,
|
|
reList = [this.hexRE, this.rgbRE, this.hex3RE],
|
|
length = reList.length,
|
|
match, base, re, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
re = reList[i];
|
|
|
|
base = (i % 2 === 0) ? 16 : 10;
|
|
match = re.exec(color);
|
|
if (match && match.length === 4) {
|
|
if (i === 2) {
|
|
match[1] += match[1];
|
|
match[2] += match[2];
|
|
match[3] += match[3];
|
|
}
|
|
out = {
|
|
red: parseInt(match[1], base),
|
|
green: parseInt(match[2], base),
|
|
blue: parseInt(match[3], base)
|
|
};
|
|
break;
|
|
}
|
|
}
|
|
|
|
return out || color;
|
|
},
|
|
|
|
computeDelta: function(from, end, damper, initial) {
|
|
from = this.parseColor(from);
|
|
end = this.parseColor(end, damper);
|
|
var start = initial ? initial : from,
|
|
tfrom = typeof start,
|
|
tend = typeof end;
|
|
//Extra check for when the color string is not recognized.
|
|
if (tfrom == 'string' || tfrom == 'undefined'
|
|
|| tend == 'string' || tend == 'undefined') {
|
|
return end || start;
|
|
}
|
|
return {
|
|
from: from,
|
|
delta: {
|
|
red: Math.round((end.red - start.red) * damper),
|
|
green: Math.round((end.green - start.green) * damper),
|
|
blue: Math.round((end.blue - start.blue) * damper)
|
|
}
|
|
};
|
|
},
|
|
|
|
get: function(start, end, damper, initialFrom) {
|
|
var ln = start.length,
|
|
out = [],
|
|
i, initial;
|
|
for (i = 0; i < ln; i++) {
|
|
if (initialFrom) {
|
|
initial = initialFrom[i][1].from;
|
|
}
|
|
out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
|
|
}
|
|
return out;
|
|
},
|
|
|
|
set: function(values, easing) {
|
|
var ln = values.length,
|
|
out = [],
|
|
i, val, parsedString, from, delta;
|
|
for (i = 0; i < ln; i++) {
|
|
val = values[i][1];
|
|
if (val) {
|
|
from = val.from;
|
|
delta = val.delta;
|
|
//multiple checks to reformat the color if it can't recognized by computeDelta.
|
|
val = (typeof val == 'object' && 'red' in val)?
|
|
'rgb(' + val.red + ', ' + val.green + ', ' + val.blue + ')' : val;
|
|
val = (typeof val == 'object' && val.length)? val[0] : val;
|
|
if (typeof val == 'undefined') {
|
|
return [];
|
|
}
|
|
parsedString = typeof val == 'string'? val :
|
|
'rgb(' + [
|
|
(from.red + Math.round(delta.red * easing)) % 256,
|
|
(from.green + Math.round(delta.green * easing)) % 256,
|
|
(from.blue + Math.round(delta.blue * easing)) % 256
|
|
].join(',') + ')';
|
|
out.push([
|
|
values[i][0],
|
|
parsedString
|
|
]);
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
},
|
|
object: {
|
|
interpolate: function(prop, damper) {
|
|
damper = (typeof damper == 'number') ? damper : 1;
|
|
var out = {},
|
|
p;
|
|
for(p in prop) {
|
|
out[p] = parseFloat(prop[p]) * damper;
|
|
}
|
|
return out;
|
|
},
|
|
|
|
computeDelta: function(from, end, damper, initial) {
|
|
from = this.interpolate(from);
|
|
end = this.interpolate(end, damper);
|
|
var start = initial ? initial : from,
|
|
delta = {},
|
|
p;
|
|
|
|
for(p in end) {
|
|
delta[p] = end[p] - start[p];
|
|
}
|
|
return {
|
|
from: from,
|
|
delta: delta
|
|
};
|
|
},
|
|
|
|
get: function(start, end, damper, initialFrom) {
|
|
var ln = start.length,
|
|
out = [],
|
|
i, initial;
|
|
for (i = 0; i < ln; i++) {
|
|
if (initialFrom) {
|
|
initial = initialFrom[i][1].from;
|
|
}
|
|
out.push([start[i][0], this.computeDelta(start[i][1], end, damper, initial)]);
|
|
}
|
|
return out;
|
|
},
|
|
|
|
set: function(values, easing) {
|
|
var ln = values.length,
|
|
out = [],
|
|
outObject = {},
|
|
i, from, delta, val, p;
|
|
for (i = 0; i < ln; i++) {
|
|
val = values[i][1];
|
|
from = val.from;
|
|
delta = val.delta;
|
|
for (p in from) {
|
|
outObject[p] = from[p] + delta[p] * easing;
|
|
}
|
|
out.push([
|
|
values[i][0],
|
|
outObject
|
|
]);
|
|
}
|
|
return out;
|
|
}
|
|
},
|
|
|
|
path: {
|
|
computeDelta: function(from, end, damper, initial) {
|
|
damper = (typeof damper == 'number') ? damper : 1;
|
|
var start;
|
|
from = +from || 0;
|
|
end = +end || 0;
|
|
start = (initial != null) ? initial : from;
|
|
return {
|
|
from: from,
|
|
delta: (end - start) * damper
|
|
};
|
|
},
|
|
|
|
forcePath: function(path) {
|
|
if (!Ext.isArray(path) && !Ext.isArray(path[0])) {
|
|
path = Ext.draw.Draw.parsePathString(path);
|
|
}
|
|
return path;
|
|
},
|
|
|
|
get: function(start, end, damper, initialFrom) {
|
|
var endPath = this.forcePath(end),
|
|
out = [],
|
|
startLn = start.length,
|
|
startPathLn, pointsLn, i, deltaPath, initial, j, k, path, startPath;
|
|
for (i = 0; i < startLn; i++) {
|
|
startPath = this.forcePath(start[i][1]);
|
|
|
|
deltaPath = Ext.draw.Draw.interpolatePaths(startPath, endPath);
|
|
startPath = deltaPath[0];
|
|
endPath = deltaPath[1];
|
|
|
|
startPathLn = startPath.length;
|
|
path = [];
|
|
for (j = 0; j < startPathLn; j++) {
|
|
deltaPath = [startPath[j][0]];
|
|
pointsLn = startPath[j].length;
|
|
for (k = 1; k < pointsLn; k++) {
|
|
initial = initialFrom && initialFrom[0][1][j][k].from;
|
|
deltaPath.push(this.computeDelta(startPath[j][k], endPath[j][k], damper, initial));
|
|
}
|
|
path.push(deltaPath);
|
|
}
|
|
out.push([start[i][0], path]);
|
|
}
|
|
return out;
|
|
},
|
|
|
|
set: function(values, easing) {
|
|
var ln = values.length,
|
|
out = [],
|
|
i, j, k, newPath, calcPath, deltaPath, deltaPathLn, pointsLn;
|
|
for (i = 0; i < ln; i++) {
|
|
deltaPath = values[i][1];
|
|
newPath = [];
|
|
deltaPathLn = deltaPath.length;
|
|
for (j = 0; j < deltaPathLn; j++) {
|
|
calcPath = [deltaPath[j][0]];
|
|
pointsLn = deltaPath[j].length;
|
|
for (k = 1; k < pointsLn; k++) {
|
|
calcPath.push(deltaPath[j][k].from + deltaPath[j][k].delta * easing);
|
|
}
|
|
newPath.push(calcPath.join(','));
|
|
}
|
|
out.push([values[i][0], newPath.join(',')]);
|
|
}
|
|
return out;
|
|
}
|
|
}
|
|
/* End Definitions */
|
|
}
|
|
}, function() {
|
|
//set color properties to color interpolator
|
|
var props = [
|
|
'outlineColor',
|
|
'backgroundColor',
|
|
'borderColor',
|
|
'borderTopColor',
|
|
'borderRightColor',
|
|
'borderBottomColor',
|
|
'borderLeftColor',
|
|
'fill',
|
|
'stroke'
|
|
],
|
|
length = props.length,
|
|
i = 0,
|
|
prop;
|
|
|
|
for (; i<length; i++) {
|
|
prop = props[i];
|
|
this[prop] = this.color;
|
|
}
|
|
|
|
//set string properties to string
|
|
props = ['cursor'];
|
|
length = props.length;
|
|
i = 0;
|
|
|
|
for (; i<length; i++) {
|
|
prop = props[i];
|
|
this[prop] = this.stringHandler;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class manages animation for a specific {@link #target}. The animation allows
|
|
* animation of various properties on the target, such as size, position, color and others.
|
|
*
|
|
* ## Starting Conditions
|
|
*
|
|
* The starting conditions for the animation are provided by the {@link #from} configuration.
|
|
* Any/all of the properties in the {@link #from} configuration can be specified. If a particular
|
|
* property is not defined, the starting value for that property will be read directly from the target.
|
|
*
|
|
* ## End Conditions
|
|
*
|
|
* The ending conditions for the animation are provided by the {@link #to} configuration. These mark
|
|
* the final values once the animations has finished. The values in the {@link #from} can mirror
|
|
* those in the {@link #to} configuration to provide a starting point.
|
|
*
|
|
* ## Other Options
|
|
*
|
|
* - {@link #duration}: Specifies the time period of the animation.
|
|
* - {@link #easing}: Specifies the easing of the animation.
|
|
* - {@link #iterations}: Allows the animation to repeat a number of times.
|
|
* - {@link #alternate}: Used in conjunction with {@link #iterations}, reverses the direction every second iteration.
|
|
*
|
|
* ## Example Code
|
|
*
|
|
* @example
|
|
* var myComponent = Ext.create('Ext.Component', {
|
|
* renderTo: document.body,
|
|
* width: 200,
|
|
* height: 200,
|
|
* style: 'border: 1px solid red;'
|
|
* });
|
|
*
|
|
* Ext.create('Ext.fx.Anim', {
|
|
* target: myComponent,
|
|
* duration: 1000,
|
|
* from: {
|
|
* width: 400 //starting width 400
|
|
* },
|
|
* to: {
|
|
* width: 300, //end width 300
|
|
* height: 300 // end height 300
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.fx.Anim', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @property {Boolean} isAnimation
|
|
* `true` in this class to identify an object as an instantiated Anim, or subclass thereof.
|
|
*/
|
|
isAnimation: true,
|
|
|
|
/**
|
|
* @cfg {Function} callback
|
|
* A function to be run after the animation has completed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} scope
|
|
* The scope that the {@link #callback} function will be called with
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} duration
|
|
* Time in milliseconds for a single animation to last. If the {@link #iterations} property is
|
|
* specified, then each animate will take the same duration for each iteration.
|
|
*/
|
|
duration: 250,
|
|
|
|
/**
|
|
* @cfg {Number} delay
|
|
* Time to delay before starting the animation.
|
|
*/
|
|
delay: 0,
|
|
|
|
/* @private used to track a delayed starting time */
|
|
delayStart: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} dynamic
|
|
* Currently only for Component Animation: Only set a component's outer element size bypassing layouts.
|
|
* Set to true to do full layouts for every frame of the animation.
|
|
*/
|
|
dynamic: false,
|
|
|
|
/**
|
|
* @cfg {String} easing
|
|
* This describes how the intermediate values used during a transition will be calculated.
|
|
* It allows for a transition to change speed over its duration.
|
|
*
|
|
* - backIn
|
|
* - backOut
|
|
* - bounceIn
|
|
* - bounceOut
|
|
* - ease
|
|
* - easeIn
|
|
* - easeOut
|
|
* - easeInOut
|
|
* - elasticIn
|
|
* - elasticOut
|
|
* - cubic-bezier(x1, y1, x2, y2)
|
|
*
|
|
* Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
|
|
* specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
|
|
* be in the range [0, 1] or the definition is invalid.
|
|
*
|
|
* [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
|
|
*/
|
|
easing: 'ease',
|
|
|
|
/**
|
|
* @cfg {Object} keyframes
|
|
* Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'
|
|
* is considered '100%'. **Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using
|
|
* "from" or "to".** A keyframe declaration without these keyframe selectors is invalid and will not be available for
|
|
* animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to
|
|
* be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
|
|
*
|
|
* keyframes : {
|
|
* '0%': {
|
|
* left: 100
|
|
* },
|
|
* '40%': {
|
|
* left: 150
|
|
* },
|
|
* '60%': {
|
|
* left: 75
|
|
* },
|
|
* '100%': {
|
|
* left: 100
|
|
* }
|
|
* }
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
damper: 1,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
bezierRE: /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
|
|
|
|
/**
|
|
* Run the animation from the end to the beginning
|
|
* Defaults to false.
|
|
* @cfg {Boolean} reverse
|
|
*/
|
|
reverse: false,
|
|
|
|
/**
|
|
* Flag to determine if the animation has started
|
|
* @property running
|
|
* @type Boolean
|
|
*/
|
|
running: false,
|
|
|
|
/**
|
|
* Flag to determine if the animation is paused. Only set this to true if you need to
|
|
* keep the Anim instance around to be unpaused later; otherwise call {@link #end}.
|
|
* @property paused
|
|
* @type Boolean
|
|
*/
|
|
paused: false,
|
|
|
|
/**
|
|
* @cfg {Number} iterations
|
|
* Number of times to execute the animation.
|
|
*/
|
|
iterations: 1,
|
|
|
|
/**
|
|
* @cfg {Boolean} alternate
|
|
* Used in conjunction with iterations to reverse the animation each time an iteration completes.
|
|
*/
|
|
alternate: false,
|
|
|
|
/**
|
|
* Current iteration the animation is running.
|
|
* @property currentIteration
|
|
* @type Number
|
|
*/
|
|
currentIteration: 0,
|
|
|
|
/**
|
|
* Starting time of the animation.
|
|
* @property startTime
|
|
* @type Date
|
|
*/
|
|
startTime: 0,
|
|
|
|
/**
|
|
* Contains a cache of the interpolators to be used.
|
|
* @private
|
|
* @property propHandlers
|
|
* @type Object
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} target
|
|
* The {@link Ext.fx.target.Target} to apply the animation to. This should only be specified when creating an Ext.fx.Anim directly.
|
|
* The target does not need to be a {@link Ext.fx.target.Target} instance, it can be the underlying object. For example, you can
|
|
* pass a Component, Element or Sprite as the target and the Anim will create the appropriate {@link Ext.fx.target.Target} object
|
|
* automatically.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} from
|
|
* An object containing property/value pairs for the beginning of the animation. If not specified, the current state of the
|
|
* Ext.fx.target will be used. For example:
|
|
*
|
|
* from: {
|
|
* opacity: 0, // Transparent
|
|
* color: '#ffffff', // White
|
|
* left: 0
|
|
* }
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} to (required)
|
|
* An object containing property/value pairs for the end of the animation. For example:
|
|
*
|
|
* to: {
|
|
* opacity: 1, // Opaque
|
|
* color: '#00ff00', // Green
|
|
* left: 500
|
|
* }
|
|
*
|
|
*/
|
|
|
|
// @private
|
|
frameCount: 0,
|
|
|
|
// @private
|
|
constructor: function(config) {
|
|
var me = this,
|
|
curve;
|
|
|
|
config = config || {};
|
|
// If keyframes are passed, they really want an Animator instead.
|
|
if (config.keyframes) {
|
|
return new Ext.fx.Animator(config);
|
|
}
|
|
Ext.apply(me, config);
|
|
if (me.from === undefined) {
|
|
me.from = {};
|
|
}
|
|
me.propHandlers = {};
|
|
me.config = config;
|
|
me.target = Ext.fx.Manager.createTarget(me.target);
|
|
me.easingFn = Ext.fx.Easing[me.easing];
|
|
me.target.dynamic = me.dynamic;
|
|
|
|
// If not a pre-defined curve, try a cubic-bezier
|
|
if (!me.easingFn) {
|
|
me.easingFn = String(me.easing).match(me.bezierRE);
|
|
if (me.easingFn && me.easingFn.length == 5) {
|
|
curve = me.easingFn;
|
|
me.easingFn = Ext.fx.CubicBezier.cubicBezier(+curve[1], +curve[2], +curve[3], +curve[4]);
|
|
}
|
|
}
|
|
me.id = Ext.id(null, 'ext-anim-');
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeanimate
|
|
* Fires before the animation starts. A handler can return false to cancel the animation.
|
|
* @param {Ext.fx.Anim} this
|
|
*/
|
|
'beforeanimate',
|
|
/**
|
|
* @event afteranimate
|
|
* Fires when the animation is complete.
|
|
* @param {Ext.fx.Anim} this
|
|
* @param {Date} startTime
|
|
*/
|
|
'afteranimate',
|
|
/**
|
|
* @event lastframe
|
|
* Fires when the animation's last frame has been set.
|
|
* @param {Ext.fx.Anim} this
|
|
* @param {Date} startTime
|
|
*/
|
|
'lastframe'
|
|
);
|
|
me.mixins.observable.constructor.call(me);
|
|
Ext.fx.Manager.addAnim(me);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Helper to the target
|
|
*/
|
|
setAttr: function(attr, value) {
|
|
return Ext.fx.Manager.items.get(this.id).setAttr(this.target, attr, value);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Set up the initial currentAttrs hash.
|
|
*/
|
|
initAttrs: function() {
|
|
var me = this,
|
|
from = me.from,
|
|
to = me.to,
|
|
initialFrom = me.initialFrom || {},
|
|
out = {},
|
|
start, end, propHandler, attr;
|
|
|
|
for (attr in to) {
|
|
if (to.hasOwnProperty(attr)) {
|
|
start = me.target.getAttr(attr, from[attr]);
|
|
end = to[attr];
|
|
// Use default (numeric) property handler
|
|
if (!Ext.fx.PropertyHandler[attr]) {
|
|
if (Ext.isObject(end)) {
|
|
propHandler = me.propHandlers[attr] = Ext.fx.PropertyHandler.object;
|
|
} else {
|
|
propHandler = me.propHandlers[attr] = Ext.fx.PropertyHandler.defaultHandler;
|
|
}
|
|
}
|
|
// Use custom handler
|
|
else {
|
|
propHandler = me.propHandlers[attr] = Ext.fx.PropertyHandler[attr];
|
|
}
|
|
out[attr] = propHandler.get(start, end, me.damper, initialFrom[attr], attr);
|
|
}
|
|
}
|
|
me.currentAttrs = out;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fires beforeanimate and sets the running flag.
|
|
*/
|
|
start: function(startTime) {
|
|
var me = this,
|
|
delay = me.delay,
|
|
delayStart = me.delayStart,
|
|
delayDelta;
|
|
|
|
if (delay) {
|
|
if (!delayStart) {
|
|
me.delayStart = startTime;
|
|
return;
|
|
}
|
|
else {
|
|
delayDelta = startTime - delayStart;
|
|
if (delayDelta < delay) {
|
|
return;
|
|
}
|
|
else {
|
|
// Compensate for frame delay;
|
|
startTime = new Date(delayStart.getTime() + delay);
|
|
}
|
|
}
|
|
}
|
|
if (me.fireEvent('beforeanimate', me) !== false) {
|
|
me.startTime = startTime;
|
|
if (!me.paused && !me.currentAttrs) {
|
|
me.initAttrs();
|
|
}
|
|
me.running = true;
|
|
me.frameCount = 0;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Calculate attribute value at the passed timestamp.
|
|
* @returns a hash of the new attributes.
|
|
*/
|
|
runAnim: function(elapsedTime) {
|
|
var me = this,
|
|
attrs = me.currentAttrs,
|
|
duration = me.duration,
|
|
easingFn = me.easingFn,
|
|
propHandlers = me.propHandlers,
|
|
ret = {},
|
|
easing, values, attr, lastFrame;
|
|
|
|
if (elapsedTime >= duration) {
|
|
elapsedTime = duration;
|
|
lastFrame = true;
|
|
}
|
|
if (me.reverse) {
|
|
elapsedTime = duration - elapsedTime;
|
|
}
|
|
|
|
for (attr in attrs) {
|
|
if (attrs.hasOwnProperty(attr)) {
|
|
values = attrs[attr];
|
|
easing = lastFrame ? 1 : easingFn(elapsedTime / duration);
|
|
ret[attr] = propHandlers[attr].set(values, easing);
|
|
}
|
|
}
|
|
me.frameCount++;
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Perform lastFrame cleanup and handle iterations
|
|
* @returns a hash of the new attributes.
|
|
*/
|
|
lastFrame: function() {
|
|
var me = this,
|
|
iter = me.iterations,
|
|
iterCount = me.currentIteration;
|
|
|
|
iterCount++;
|
|
if (iterCount < iter) {
|
|
if (me.alternate) {
|
|
me.reverse = !me.reverse;
|
|
}
|
|
me.startTime = new Date();
|
|
me.currentIteration = iterCount;
|
|
// Turn off paused for CSS3 Transitions
|
|
me.paused = false;
|
|
}
|
|
else {
|
|
me.currentIteration = 0;
|
|
me.end();
|
|
me.fireEvent('lastframe', me, me.startTime);
|
|
}
|
|
},
|
|
|
|
endWasCalled: 0,
|
|
|
|
/**
|
|
* Fire afteranimate event and end the animation. Usually called automatically when the
|
|
* animation reaches its final frame, but can also be called manually to pre-emptively
|
|
* stop and destroy the running animation.
|
|
*/
|
|
end: function() {
|
|
if (this.endWasCalled++) {
|
|
return;
|
|
}
|
|
var me = this;
|
|
me.startTime = 0;
|
|
me.paused = false;
|
|
me.running = false;
|
|
Ext.fx.Manager.removeAnim(me);
|
|
me.fireEvent('afteranimate', me, me.startTime);
|
|
Ext.callback(me.callback, me.scope, [me, me.startTime]);
|
|
},
|
|
|
|
isReady: function() {
|
|
return this.paused === false && this.running === false && this.iterations > 0;
|
|
},
|
|
|
|
isRunning: function() {
|
|
return this.paused === false && this.running === true && this.isAnimator !== true;
|
|
}
|
|
});
|
|
// Set flag to indicate that Fx is available. Class might not be available immediately.
|
|
Ext.enableFx = true;
|
|
|
|
/**
|
|
* This animation class is a mixin.
|
|
*
|
|
* Ext.util.Animate provides an API for the creation of animated transitions of properties and styles.
|
|
* This class is used as a mixin and currently applied to {@link Ext.Element}, {@link Ext.CompositeElement},
|
|
* {@link Ext.draw.Sprite}, {@link Ext.draw.CompositeSprite}, and {@link Ext.Component}. Note that Components
|
|
* have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and
|
|
* opacity (color, paddings, and margins can not be animated).
|
|
*
|
|
* ## Animation Basics
|
|
*
|
|
* All animations require three things - `easing`, `duration`, and `to` (the final end value for each property)
|
|
* you wish to animate. Easing and duration are defaulted values specified below.
|
|
* Easing describes how the intermediate values used during a transition will be calculated.
|
|
* {@link Ext.fx.Anim#easing Easing} allows for a transition to change speed over its duration.
|
|
* You may use the defaults for easing and duration, but you must always set a
|
|
* {@link Ext.fx.Anim#to to} property which is the end value for all animations.
|
|
*
|
|
* Popular element 'to' configurations are:
|
|
*
|
|
* - opacity
|
|
* - x
|
|
* - y
|
|
* - color
|
|
* - height
|
|
* - width
|
|
*
|
|
* Popular sprite 'to' configurations are:
|
|
*
|
|
* - translation
|
|
* - path
|
|
* - scale
|
|
* - stroke
|
|
* - rotation
|
|
*
|
|
* The default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in
|
|
* milliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve
|
|
* used for all animations is 'ease'. Popular easing functions are included and can be found in {@link Ext.fx.Anim#easing Easing}.
|
|
*
|
|
* For example, a simple animation to fade out an element with a default easing and duration:
|
|
*
|
|
* var p1 = Ext.get('myElementId');
|
|
*
|
|
* p1.animate({
|
|
* to: {
|
|
* opacity: 0
|
|
* }
|
|
* });
|
|
*
|
|
* To make this animation fade out in a tenth of a second:
|
|
*
|
|
* var p1 = Ext.get('myElementId');
|
|
*
|
|
* p1.animate({
|
|
* duration: 100,
|
|
* to: {
|
|
* opacity: 0
|
|
* }
|
|
* });
|
|
*
|
|
* ## Animation Queues
|
|
*
|
|
* By default all animations are added to a queue which allows for animation via a chain-style API.
|
|
* For example, the following code will queue 4 animations which occur sequentially (one right after the other):
|
|
*
|
|
* p1.animate({
|
|
* to: {
|
|
* x: 500
|
|
* }
|
|
* }).animate({
|
|
* to: {
|
|
* y: 150
|
|
* }
|
|
* }).animate({
|
|
* to: {
|
|
* backgroundColor: '#f00' //red
|
|
* }
|
|
* }).animate({
|
|
* to: {
|
|
* opacity: 0
|
|
* }
|
|
* });
|
|
*
|
|
* You can change this behavior by calling the {@link Ext.util.Animate#syncFx syncFx} method and all
|
|
* subsequent animations for the specified target will be run concurrently (at the same time).
|
|
*
|
|
* p1.syncFx(); //this will make all animations run at the same time
|
|
*
|
|
* p1.animate({
|
|
* to: {
|
|
* x: 500
|
|
* }
|
|
* }).animate({
|
|
* to: {
|
|
* y: 150
|
|
* }
|
|
* }).animate({
|
|
* to: {
|
|
* backgroundColor: '#f00' //red
|
|
* }
|
|
* }).animate({
|
|
* to: {
|
|
* opacity: 0
|
|
* }
|
|
* });
|
|
*
|
|
* This works the same as:
|
|
*
|
|
* p1.animate({
|
|
* to: {
|
|
* x: 500,
|
|
* y: 150,
|
|
* backgroundColor: '#f00' //red
|
|
* opacity: 0
|
|
* }
|
|
* });
|
|
*
|
|
* The {@link Ext.util.Animate#stopAnimation stopAnimation} method can be used to stop any
|
|
* currently running animations and clear any queued animations.
|
|
*
|
|
* ## Animation Keyframes
|
|
*
|
|
* You can also set up complex animations with {@link Ext.fx.Anim#keyframes keyframes} which follow the
|
|
* CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.
|
|
* The previous example can be written with the following syntax:
|
|
*
|
|
* p1.animate({
|
|
* duration: 1000, //one second total
|
|
* keyframes: {
|
|
* 25: { //from 0 to 250ms (25%)
|
|
* x: 0
|
|
* },
|
|
* 50: { //from 250ms to 500ms (50%)
|
|
* y: 0
|
|
* },
|
|
* 75: { //from 500ms to 750ms (75%)
|
|
* backgroundColor: '#f00' //red
|
|
* },
|
|
* 100: { //from 750ms to 1sec
|
|
* opacity: 0
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* ## Animation Events
|
|
*
|
|
* Each animation you create has events for {@link Ext.fx.Anim#beforeanimate beforeanimate},
|
|
* {@link Ext.fx.Anim#afteranimate afteranimate}, and {@link Ext.fx.Anim#lastframe lastframe}.
|
|
* Keyframed animations adds an additional {@link Ext.fx.Animator#keyframe keyframe} event which
|
|
* fires for each keyframe in your animation.
|
|
*
|
|
* All animations support the {@link Ext.util.Observable#listeners listeners} configuration to attact functions to these events.
|
|
*
|
|
* startAnimate: function() {
|
|
* var p1 = Ext.get('myElementId');
|
|
* p1.animate({
|
|
* duration: 100,
|
|
* to: {
|
|
* opacity: 0
|
|
* },
|
|
* listeners: {
|
|
* beforeanimate: function() {
|
|
* // Execute my custom method before the animation
|
|
* this.myBeforeAnimateFn();
|
|
* },
|
|
* afteranimate: function() {
|
|
* // Execute my custom method after the animation
|
|
* this.myAfterAnimateFn();
|
|
* },
|
|
* scope: this
|
|
* });
|
|
* },
|
|
* myBeforeAnimateFn: function() {
|
|
* // My custom logic
|
|
* },
|
|
* myAfterAnimateFn: function() {
|
|
* // My custom logic
|
|
* }
|
|
*
|
|
* Due to the fact that animations run asynchronously, you can determine if an animation is currently
|
|
* running on any target by using the {@link Ext.util.Animate#getActiveAnimation getActiveAnimation}
|
|
* method. This method will return false if there are no active animations or return the currently
|
|
* running {@link Ext.fx.Anim} instance.
|
|
*
|
|
* In this example, we're going to wait for the current animation to finish, then stop any other
|
|
* queued animations before we fade our element's opacity to 0:
|
|
*
|
|
* var curAnim = p1.getActiveAnimation();
|
|
* if (curAnim) {
|
|
* curAnim.on('afteranimate', function() {
|
|
* p1.stopAnimation();
|
|
* p1.animate({
|
|
* to: {
|
|
* opacity: 0
|
|
* }
|
|
* });
|
|
* });
|
|
* }
|
|
*/
|
|
Ext.define('Ext.util.Animate', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
isAnimate: true,
|
|
|
|
/**
|
|
* Performs custom animation on this object.
|
|
*
|
|
* This method is applicable to both the {@link Ext.Component Component} class and the {@link Ext.draw.Sprite Sprite}
|
|
* class. It performs animated transitions of certain properties of this object over a specified timeline.
|
|
*
|
|
* ### Animating a {@link Ext.Component Component}
|
|
*
|
|
* When animating a Component, the following properties may be specified in `from`, `to`, and `keyframe` objects:
|
|
*
|
|
* - `x` - The Component's page X position in pixels.
|
|
*
|
|
* - `y` - The Component's page Y position in pixels
|
|
*
|
|
* - `left` - The Component's `left` value in pixels.
|
|
*
|
|
* - `top` - The Component's `top` value in pixels.
|
|
*
|
|
* - `width` - The Component's `width` value in pixels.
|
|
*
|
|
* - `height` - The Component's `height` value in pixels.
|
|
*
|
|
* - `dynamic` - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation.
|
|
* *Use sparingly as laying out on every intermediate size change is an expensive operation.*
|
|
*
|
|
* For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:
|
|
*
|
|
* myWindow = Ext.create('Ext.window.Window', {
|
|
* title: 'Test Component animation',
|
|
* width: 500,
|
|
* height: 300,
|
|
* layout: {
|
|
* type: 'hbox',
|
|
* align: 'stretch'
|
|
* },
|
|
* items: [{
|
|
* title: 'Left: 33%',
|
|
* margins: '5 0 5 5',
|
|
* flex: 1
|
|
* }, {
|
|
* title: 'Left: 66%',
|
|
* margins: '5 5 5 5',
|
|
* flex: 2
|
|
* }]
|
|
* });
|
|
* myWindow.show();
|
|
* myWindow.header.el.on('click', function() {
|
|
* myWindow.animate({
|
|
* to: {
|
|
* width: (myWindow.getWidth() == 500) ? 700 : 500,
|
|
* height: (myWindow.getHeight() == 300) ? 400 : 300
|
|
* }
|
|
* });
|
|
* });
|
|
*
|
|
* For performance reasons, by default, the internal layout is only updated when the Window reaches its final `"to"`
|
|
* size. If dynamic updating of the Window's child Components is required, then configure the animation with
|
|
* `dynamic: true` and the two child items will maintain their proportions during the animation.
|
|
*
|
|
* @param {Object} config Configuration for {@link Ext.fx.Anim}.
|
|
* Note that the {@link Ext.fx.Anim#to to} config is required.
|
|
* @return {Object} this
|
|
*/
|
|
animate: function(animObj) {
|
|
var me = this;
|
|
if (Ext.fx.Manager.hasFxBlock(me.id)) {
|
|
return me;
|
|
}
|
|
Ext.fx.Manager.queueFx(new Ext.fx.Anim(me.anim(animObj)));
|
|
return this;
|
|
},
|
|
|
|
// @private - process the passed fx configuration.
|
|
anim: function(config) {
|
|
if (!Ext.isObject(config)) {
|
|
return (config) ? {} : false;
|
|
}
|
|
|
|
var me = this;
|
|
|
|
if (config.stopAnimation) {
|
|
me.stopAnimation();
|
|
}
|
|
|
|
Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
|
|
|
|
return Ext.apply({
|
|
target: me,
|
|
paused: true
|
|
}, config);
|
|
},
|
|
|
|
/**
|
|
* Stops any running effects and clears this object's internal effects queue if it contains any additional effects
|
|
* that haven't started yet.
|
|
* @deprecated 4.0 Replaced by {@link #stopAnimation}
|
|
* @return {Ext.Element} The Element
|
|
* @method
|
|
*/
|
|
stopFx: Ext.Function.alias(Ext.util.Animate, 'stopAnimation'),
|
|
|
|
/**
|
|
* Stops any running effects and clears this object's internal effects queue if it contains any additional effects
|
|
* that haven't started yet.
|
|
* @return {Ext.Element} The Element
|
|
*/
|
|
stopAnimation: function() {
|
|
Ext.fx.Manager.stopAnimation(this.id);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite
|
|
* of {@link #sequenceFx}.
|
|
* @return {Object} this
|
|
*/
|
|
syncFx: function() {
|
|
Ext.fx.Manager.setFxDefaults(this.id, {
|
|
concurrent: true
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the
|
|
* opposite of {@link #syncFx}.
|
|
* @return {Object} this
|
|
*/
|
|
sequenceFx: function() {
|
|
Ext.fx.Manager.setFxDefaults(this.id, {
|
|
concurrent: false
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* @deprecated 4.0 Replaced by {@link #getActiveAnimation}
|
|
* @inheritdoc Ext.util.Animate#getActiveAnimation
|
|
* @method
|
|
*/
|
|
hasActiveFx: Ext.Function.alias(Ext.util.Animate, 'getActiveAnimation'),
|
|
|
|
/**
|
|
* Returns the current animation if this object has any effects actively running or queued, else returns false.
|
|
* @return {Ext.fx.Anim/Boolean} Anim if element has active effects, else false
|
|
*/
|
|
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.Element.prototype, this.prototype);
|
|
// We need to call this again so the animation methods get copied over to CE
|
|
Ext.CompositeElementLite.importElementMethods();
|
|
});
|
|
|
|
/**
|
|
* This mixin enables classes to declare relationships to child elements and provides the
|
|
* mechanics for acquiring the {@link Ext.Element elements} and storing them on an object
|
|
* instance as properties.
|
|
*
|
|
* This class is used by {@link Ext.Component components} and {@link Ext.layout.container.Container container layouts} to
|
|
* manage their child elements.
|
|
*
|
|
* A typical component that uses these features might look something like this:
|
|
*
|
|
* Ext.define('Ext.ux.SomeComponent', {
|
|
* extend: 'Ext.Component',
|
|
*
|
|
* childEls: [
|
|
* 'bodyEl'
|
|
* ],
|
|
*
|
|
* renderTpl: [
|
|
* '<div id="{id}-bodyEl"></div>'
|
|
* ],
|
|
*
|
|
* // ...
|
|
* });
|
|
*
|
|
* The `childEls` array lists one or more relationships to child elements managed by the
|
|
* component. The items in this array can be either of the following types:
|
|
*
|
|
* - String: the id suffix and property name in one. For example, "bodyEl" in the above
|
|
* example means a "bodyEl" property will be added to the instance with the result of
|
|
* {@link Ext#get} given "componentId-bodyEl" where "componentId" is the component instance's
|
|
* id.
|
|
* - Object: with a `name` property that names the instance property for the element, and
|
|
* one of the following additional properties:
|
|
* - `id`: The full id of the child element.
|
|
* - `itemId`: The suffix part of the id to which "componentId-" is prepended.
|
|
* - `select`: A selector that will be passed to {@link Ext#select}.
|
|
* - `selectNode`: A selector that will be passed to {@link Ext.DomQuery#selectNode}.
|
|
*
|
|
* The example above could have used this instead to achieve the same result:
|
|
*
|
|
* childEls: [
|
|
* { name: 'bodyEl', itemId: 'bodyEl' }
|
|
* ]
|
|
*
|
|
* When using `select`, the property will be an instance of {@link Ext.CompositeElement}. In
|
|
* all other cases, the property will be an {@link Ext.Element} or `null` if not found.
|
|
*
|
|
* Care should be taken when using `select` or `selectNode` to find child elements. The
|
|
* following issues should be considered:
|
|
*
|
|
* - Performance: using selectors can be slower than id lookup by a factor 10x or more.
|
|
* - Over-selecting: selectors are applied after the DOM elements for all children have
|
|
* been rendered, so selectors can match elements from child components (including nested
|
|
* versions of the same component) accidentally.
|
|
*
|
|
* This above issues are most important when using `select` since it returns multiple
|
|
* elements.
|
|
*
|
|
* **IMPORTANT**
|
|
* Unlike a `renderTpl` where there is a single value for an instance, `childEls` are aggregated
|
|
* up the class hierarchy so that they are effectively inherited. In other words, if a
|
|
* class where to derive from `Ext.ux.SomeComponent` in the example above, it could also
|
|
* have a `childEls` property in the same way as `Ext.ux.SomeComponent`.
|
|
*
|
|
* Ext.define('Ext.ux.AnotherComponent', {
|
|
* extend: 'Ext.ux.SomeComponent',
|
|
*
|
|
* childEls: [
|
|
* // 'bodyEl' is inherited
|
|
* 'innerEl'
|
|
* ],
|
|
*
|
|
* renderTpl: [
|
|
* '<div id="{id}-bodyEl">'
|
|
* '<div id="{id}-innerEl"></div>'
|
|
* '</div>'
|
|
* ],
|
|
*
|
|
* // ...
|
|
* });
|
|
*
|
|
* The `renderTpl` contains both child elements and unites them in the desired markup, but
|
|
* the `childEls` only contains the new child element. The {@link #applyChildEls} method
|
|
* takes care of looking up all `childEls` for an instance and considers `childEls`
|
|
* properties on all the super classes and mixins.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.ElementContainer', {
|
|
|
|
childEls: [
|
|
// empty - this solves a couple problems:
|
|
// 1. It ensures that all classes have a childEls (avoid null ptr)
|
|
// 2. It prevents mixins from smashing on their own childEls (these are gathered
|
|
// specifically)
|
|
],
|
|
|
|
constructor: function () {
|
|
var me = this,
|
|
childEls;
|
|
|
|
// if we have configured childEls, we need to merge them with those from this
|
|
// class, its bases and the set of mixins...
|
|
if (me.hasOwnProperty('childEls')) {
|
|
childEls = me.childEls;
|
|
delete me.childEls;
|
|
|
|
me.addChildEls.apply(me, childEls);
|
|
}
|
|
},
|
|
|
|
destroy: function () {
|
|
var me = this,
|
|
childEls = me.getChildEls(),
|
|
child, childName, i, k;
|
|
|
|
for (i = childEls.length; i--; ) {
|
|
childName = childEls[i];
|
|
if (typeof childName != 'string') {
|
|
childName = childName.name;
|
|
}
|
|
|
|
child = me[childName];
|
|
if (child) {
|
|
me[childName] = null; // better than delete since that changes the "shape"
|
|
child.remove();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds each argument passed to this method to the {@link Ext.AbstractComponent#cfg-childEls childEls} array.
|
|
*/
|
|
addChildEls: function () {
|
|
var me = this,
|
|
args = arguments;
|
|
|
|
if (me.hasOwnProperty('childEls')) {
|
|
me.childEls.push.apply(me.childEls, args);
|
|
} else {
|
|
me.childEls = me.getChildEls().concat(Array.prototype.slice.call(args));
|
|
}
|
|
|
|
me.prune(me.childEls, false);
|
|
},
|
|
|
|
/**
|
|
* Sets references to elements inside the component.
|
|
* @private
|
|
*/
|
|
applyChildEls: function(el, id) {
|
|
var me = this,
|
|
childEls = me.getChildEls(),
|
|
baseId, childName, i, selector, value;
|
|
|
|
baseId = (id || me.id) + '-';
|
|
for (i = childEls.length; i--; ) {
|
|
childName = childEls[i];
|
|
|
|
if (typeof childName == 'string') {
|
|
// We don't use Ext.get because that is 3x (or more) slower on IE6-8. Since
|
|
// we know the el's are children of our el we use getById instead:
|
|
value = el.getById(baseId + childName);
|
|
} else {
|
|
if ((selector = childName.select)) {
|
|
value = Ext.select(selector, true, el.dom); // a CompositeElement
|
|
} else if ((selector = childName.selectNode)) {
|
|
value = Ext.get(Ext.DomQuery.selectNode(selector, el.dom));
|
|
} else {
|
|
// see above re:getById...
|
|
value = el.getById(childName.id || (baseId + childName.itemId));
|
|
}
|
|
|
|
childName = childName.name;
|
|
}
|
|
|
|
me[childName] = value;
|
|
}
|
|
},
|
|
|
|
getChildEls: function () {
|
|
var me = this,
|
|
self;
|
|
|
|
// If an instance has its own childEls, that is the complete set:
|
|
if (me.hasOwnProperty('childEls')) {
|
|
return me.childEls;
|
|
}
|
|
|
|
// Typically, however, the childEls is a class-level concept, so check to see if
|
|
// we have cached the complete set on the class:
|
|
self = me.self;
|
|
return self.$childEls || me.getClassChildEls(self);
|
|
},
|
|
|
|
getClassChildEls: function (cls) {
|
|
var me = this,
|
|
result = cls.$childEls,
|
|
childEls, i, length, forked, mixin, mixins, name, parts, proto, supr, superMixins;
|
|
|
|
if (!result) {
|
|
// We put the various childEls arrays into parts in the order of superclass,
|
|
// new mixins and finally from cls. These parts can be null or undefined and
|
|
// we will skip them later.
|
|
|
|
supr = cls.superclass;
|
|
if (supr) {
|
|
supr = supr.self;
|
|
parts = [supr.$childEls || me.getClassChildEls(supr)]; // super+mixins
|
|
superMixins = supr.prototype.mixins || {};
|
|
} else {
|
|
parts = [];
|
|
superMixins = {};
|
|
}
|
|
|
|
proto = cls.prototype;
|
|
mixins = proto.mixins; // since we are a mixin, there will be at least us
|
|
for (name in mixins) {
|
|
if (mixins.hasOwnProperty(name) && !superMixins.hasOwnProperty(name)) {
|
|
mixin = mixins[name].self;
|
|
parts.push(mixin.$childEls || me.getClassChildEls(mixin));
|
|
}
|
|
}
|
|
|
|
parts.push(proto.hasOwnProperty('childEls') && proto.childEls);
|
|
|
|
for (i = 0, length = parts.length; i < length; ++i) {
|
|
childEls = parts[i];
|
|
if (childEls && childEls.length) {
|
|
if (!result) {
|
|
result = childEls;
|
|
} else {
|
|
if (!forked) {
|
|
forked = true;
|
|
result = result.slice(0);
|
|
}
|
|
result.push.apply(result, childEls);
|
|
}
|
|
}
|
|
}
|
|
|
|
cls.$childEls = result = (result ? me.prune(result, !forked) : []);
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
prune: function (childEls, shared) {
|
|
var index = childEls.length,
|
|
map = {},
|
|
name;
|
|
|
|
while (index--) {
|
|
name = childEls[index];
|
|
if (typeof name != 'string') {
|
|
name = name.name;
|
|
}
|
|
|
|
if (!map[name]) {
|
|
map[name] = 1;
|
|
} else {
|
|
if (shared) {
|
|
shared = false;
|
|
childEls = childEls.slice(0);
|
|
}
|
|
Ext.Array.erase(childEls, index, 1);
|
|
}
|
|
}
|
|
|
|
return childEls;
|
|
},
|
|
|
|
/**
|
|
* Removes items in the childEls array based on the return value of a supplied test
|
|
* function. The function is called with a entry in childEls and if the test function
|
|
* return true, that entry is removed. If false, that entry is kept.
|
|
*
|
|
* @param {Function} testFn The test function.
|
|
*/
|
|
removeChildEls: function (testFn) {
|
|
var me = this,
|
|
old = me.getChildEls(),
|
|
keepers = (me.childEls = []),
|
|
n, i, cel;
|
|
|
|
for (i = 0, n = old.length; i < n; ++i) {
|
|
cel = old[i];
|
|
if (!testFn(cel)) {
|
|
keepers.push(cel);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Given a component hierarchy of this:
|
|
*
|
|
* {
|
|
* xtype: 'panel',
|
|
* id: 'ContainerA',
|
|
* layout: 'hbox',
|
|
* renderTo: Ext.getBody(),
|
|
* items: [
|
|
* {
|
|
* id: 'ContainerB',
|
|
* xtype: 'container',
|
|
* items: [
|
|
* { id: 'ComponentA' }
|
|
* ]
|
|
* }
|
|
* ]
|
|
* }
|
|
*
|
|
* The rendering of the above proceeds roughly like this:
|
|
*
|
|
* - ContainerA's initComponent calls #render passing the `renderTo` property as the
|
|
* container argument.
|
|
* - `render` calls the `getRenderTree` method to get a complete {@link Ext.DomHelper} spec.
|
|
* - `getRenderTree` fires the "beforerender" event and calls the #beforeRender
|
|
* method. Its result is obtained by calling #getElConfig.
|
|
* - The #getElConfig method uses the `renderTpl` and its render data as the content
|
|
* of the `autoEl` described element.
|
|
* - The result of `getRenderTree` is passed to {@link Ext.DomHelper#append}.
|
|
* - The `renderTpl` contains calls to render things like docked items, container items
|
|
* and raw markup (such as the `html` or `tpl` config properties). These calls are to
|
|
* methods added to the {@link Ext.XTemplate} instance by #setupRenderTpl.
|
|
* - The #setupRenderTpl method adds methods such as `renderItems`, `renderContent`, etc.
|
|
* to the template. These are directed to "doRenderItems", "doRenderContent" etc..
|
|
* - The #setupRenderTpl calls traverse from components to their {@link Ext.layout.Layout}
|
|
* object.
|
|
* - When a container is rendered, it also has a `renderTpl`. This is processed when the
|
|
* `renderContainer` method is called in the component's `renderTpl`. This call goes to
|
|
* Ext.layout.container.Container#doRenderContainer. This method repeats this
|
|
* process for all components in the container.
|
|
* - After the top-most component's markup is generated and placed in to the DOM, the next
|
|
* step is to link elements to their components and finish calling the component methods
|
|
* `onRender` and `afterRender` as well as fire the corresponding events.
|
|
* - The first step in this is to call #finishRender. This method descends the
|
|
* component hierarchy and calls `onRender` and fires the `render` event. These calls
|
|
* are delivered top-down to approximate the timing of these calls/events from previous
|
|
* versions.
|
|
* - During the pass, the component's `el` is set. Likewise, the `renderSelectors` and
|
|
* `childEls` are applied to capture references to the component's elements.
|
|
* - These calls are also made on the {@link Ext.layout.container.Container} layout to
|
|
* capture its elements. Both of these classes use {@link Ext.util.ElementContainer} to
|
|
* handle `childEls` processing.
|
|
* - Once this is complete, a similar pass is made by calling #finishAfterRender.
|
|
* This call also descends the component hierarchy, but this time the calls are made in
|
|
* a bottom-up order to `afterRender`.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.Renderable', {
|
|
|
|
|
|
|
|
|
|
frameCls: Ext.baseCSSPrefix + 'frame',
|
|
|
|
frameIdRegex: /[\-]frame\d+[TMB][LCR]$/,
|
|
|
|
frameElNames: ['TL','TC','TR','ML','MC','MR','BL','BC','BR'],
|
|
|
|
frameTpl: [
|
|
'{%this.renderDockedItems(out,values,0);%}',
|
|
'<tpl if="top">',
|
|
'<tpl if="left"><div id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>{frameElCls}" role="presentation"></tpl>',
|
|
'<tpl if="right"><div id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>{frameElCls}" role="presentation"></tpl>',
|
|
'<div id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>{frameElCls}" role="presentation"></div>',
|
|
'<tpl if="right"></div></tpl>',
|
|
'<tpl if="left"></div></tpl>',
|
|
'</tpl>',
|
|
'<tpl if="left"><div id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>{frameElCls}" role="presentation"></tpl>',
|
|
'<tpl if="right"><div id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>{frameElCls}" role="presentation"></tpl>',
|
|
'<div id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>{frameElCls}" role="presentation">',
|
|
'{%this.applyRenderTpl(out, values)%}',
|
|
'</div>',
|
|
'<tpl if="right"></div></tpl>',
|
|
'<tpl if="left"></div></tpl>',
|
|
'<tpl if="bottom">',
|
|
'<tpl if="left"><div id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>{frameElCls}" role="presentation"></tpl>',
|
|
'<tpl if="right"><div id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>{frameElCls}" role="presentation"></tpl>',
|
|
'<div id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>{frameElCls}" role="presentation"></div>',
|
|
'<tpl if="right"></div></tpl>',
|
|
'<tpl if="left"></div></tpl>',
|
|
'</tpl>',
|
|
'{%this.renderDockedItems(out,values,1);%}'
|
|
],
|
|
|
|
frameTableTpl: [
|
|
'{%this.renderDockedItems(out,values,0);%}',
|
|
'<table class="', Ext.plainTableCls, '" cellpadding="0"><tbody>',
|
|
'<tpl if="top">',
|
|
'<tr>',
|
|
'<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>{frameElCls}" role="presentation"></td>',
|
|
'<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'</tr>',
|
|
'</tpl>',
|
|
'<tr>',
|
|
'<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>{frameElCls}" role="presentation">',
|
|
'{%this.applyRenderTpl(out, values)%}',
|
|
'</td>',
|
|
'<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'</tr>',
|
|
'<tpl if="bottom">',
|
|
'<tr>',
|
|
'<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>{frameElCls}" role="presentation"></td>',
|
|
'<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'</tr>',
|
|
'</tpl>',
|
|
'</tbody></table>',
|
|
'{%this.renderDockedItems(out,values,1);%}'
|
|
],
|
|
|
|
/**
|
|
* Allows addition of behavior after rendering is complete. At this stage the Component’s Element
|
|
* will have been styled according to the configuration, will have had any configured CSS class
|
|
* names added, and will be in the configured visibility and the configured enable state.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterRender : function() {
|
|
var me = this,
|
|
data = {},
|
|
protoEl = me.protoEl,
|
|
target = me.el,
|
|
item, pre, hide, contentEl;
|
|
|
|
me.finishRenderChildren();
|
|
|
|
// We need to do the contentEl here because it depends on the layout items (inner/outerCt)
|
|
// to be rendered before we can put it in
|
|
if (me.contentEl) {
|
|
pre = Ext.baseCSSPrefix;
|
|
hide = pre + 'hide-';
|
|
contentEl = Ext.get(me.contentEl);
|
|
contentEl.removeCls([pre+'hidden', hide+'display', hide+'offsets', hide+'nosize']);
|
|
me.getContentTarget().appendChild(contentEl.dom);
|
|
}
|
|
|
|
protoEl.writeTo(data);
|
|
|
|
// Here we apply any styles that were set on the protoEl during the rendering phase
|
|
// A majority of times this will not happen, but we still need to handle it
|
|
|
|
item = data.removed;
|
|
if (item) {
|
|
target.removeCls(item);
|
|
}
|
|
|
|
item = data.cls;
|
|
if (item.length) {
|
|
target.addCls(item);
|
|
}
|
|
|
|
item = data.style;
|
|
if (data.style) {
|
|
target.setStyle(item);
|
|
}
|
|
|
|
me.protoEl = null;
|
|
|
|
// If this is the outermost Container, lay it out as soon as it is rendered.
|
|
if (!me.ownerCt) {
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
afterFirstLayout : function(width, height) {
|
|
var me = this,
|
|
x = me.x,
|
|
y = me.y,
|
|
hasX,
|
|
hasY,
|
|
pos, xy;
|
|
|
|
// We only have to set absolute position here if there is no ownerlayout which should take responsibility.
|
|
// Consider the example of rendered components outside of a viewport - these might need their positions setting.
|
|
if (!me.ownerLayout) {
|
|
hasX = Ext.isDefined(x);
|
|
hasY = Ext.isDefined(y);
|
|
}
|
|
|
|
// For floaters, calculate x and y if they aren't defined by aligning
|
|
// the sized element to the center of either the container or the ownerCt
|
|
if (me.floating && (!hasX || !hasY)) {
|
|
if (me.floatParent) {
|
|
pos = me.floatParent.getTargetEl().getViewRegion();
|
|
xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
|
|
pos.x = xy[0] - pos.x;
|
|
pos.y = xy[1] - pos.y;
|
|
} else {
|
|
xy = me.el.getAlignToXY(me.container, 'c-c');
|
|
pos = me.container.translateXY(xy[0], xy[1]);
|
|
}
|
|
x = hasX ? x : pos.x;
|
|
y = hasY ? y : pos.y;
|
|
hasX = hasY = true;
|
|
}
|
|
|
|
if (hasX || hasY) {
|
|
me.setPosition(x, y);
|
|
}
|
|
me.onBoxReady(width, height);
|
|
},
|
|
|
|
/**
|
|
* Sets references to elements inside the component. This applies {@link Ext.AbstractComponent#cfg-renderSelectors renderSelectors}
|
|
* as well as {@link Ext.AbstractComponent#cfg-childEls childEls}.
|
|
* @private
|
|
*/
|
|
applyRenderSelectors: function() {
|
|
var me = this,
|
|
selectors = me.renderSelectors,
|
|
el = me.el,
|
|
dom = el.dom,
|
|
selector;
|
|
|
|
me.applyChildEls(el);
|
|
|
|
// We still support renderSelectors. There are a few places in the framework that
|
|
// need them and they are a documented part of the API. In fact, we support mixing
|
|
// childEls and renderSelectors (no reason not to).
|
|
if (selectors) {
|
|
for (selector in selectors) {
|
|
if (selectors.hasOwnProperty(selector) && selectors[selector]) {
|
|
me[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], dom));
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeRender: function () {
|
|
var me = this,
|
|
target = me.getTargetEl(),
|
|
overflowEl = me.getOverflowEl(),
|
|
layout = me.getComponentLayout(),
|
|
// Call the style calculation early which sets the public scrollFlags property
|
|
overflowStyle = me.getOverflowStyle();
|
|
|
|
// Just before rendering, set the frame flag if we are an always-framed component like Window or Tip.
|
|
me.frame = me.frame || me.alwaysFramed;
|
|
|
|
if (!layout.initialized) {
|
|
layout.initLayout();
|
|
}
|
|
|
|
// Attempt to set overflow style prior to render if the targetEl can be accessed.
|
|
// If the targetEl does not exist yet, this will take place in finishRender
|
|
if (overflowEl) {
|
|
overflowEl.setStyle(overflowStyle);
|
|
me.overflowStyleSet = true;
|
|
}
|
|
|
|
me.setUI(me.ui);
|
|
|
|
if (me.disabled) {
|
|
// pass silent so the event doesn't fire the first time.
|
|
me.disable(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called from the selected frame generation template to insert this Component's inner structure inside the framing structure.
|
|
*
|
|
* When framing is used, a selected frame generation template is used as the primary template of the #getElConfig instead
|
|
* of the configured {@link Ext.AbstractComponent#renderTpl renderTpl}. The renderTpl is invoked by this method which is injected into the framing template.
|
|
*/
|
|
doApplyRenderTpl: function(out, values) {
|
|
// Careful! This method is bolted on to the frameTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the frameTpl instance!
|
|
|
|
var me = values.$comp,
|
|
tpl;
|
|
|
|
// Don't do this if the component is already rendered:
|
|
if (!me.rendered) {
|
|
tpl = me.initRenderTpl();
|
|
tpl.applyOut(values.renderData, out);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles autoRender.
|
|
* Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that
|
|
* ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body
|
|
*/
|
|
doAutoRender: function() {
|
|
var me = this;
|
|
if (!me.rendered) {
|
|
if (me.floating) {
|
|
me.render(document.body);
|
|
} else {
|
|
me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
|
|
}
|
|
}
|
|
},
|
|
|
|
doRenderContent: function (out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$comp;
|
|
|
|
if (me.html) {
|
|
Ext.DomHelper.generateMarkup(me.html, out);
|
|
delete me.html;
|
|
}
|
|
|
|
if (me.tpl) {
|
|
// Make sure this.tpl is an instantiated XTemplate
|
|
if (!me.tpl.isTemplate) {
|
|
me.tpl = new Ext.XTemplate(me.tpl);
|
|
}
|
|
|
|
if (me.data) {
|
|
//me.tpl[me.tplWriteMode](target, me.data);
|
|
me.tpl.applyOut(me.data, out);
|
|
delete me.data;
|
|
}
|
|
}
|
|
},
|
|
|
|
doRenderFramingDockedItems: function (out, renderData, after) {
|
|
// Careful! This method is bolted on to the frameTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the frameTpl instance!
|
|
|
|
var me = renderData.$comp;
|
|
|
|
// Most components don't have dockedItems, so check for doRenderDockedItems on the
|
|
// component (also, don't do this if the component is already rendered):
|
|
if (!me.rendered && me.doRenderDockedItems) {
|
|
// The "renderData" property is placed in scope for the renderTpl, but we don't
|
|
// want to render docked items at that level in addition to the framing level:
|
|
renderData.renderData.$skipDockedItems = true;
|
|
|
|
// doRenderDockedItems requires the $comp property on renderData, but this is
|
|
// set on the frameTpl's renderData as well:
|
|
me.doRenderDockedItems.call(this, out, renderData, after);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This method visits the rendered component tree in a "top-down" order. That is, this
|
|
* code runs on a parent component before running on a child. This method calls the
|
|
* {@link #onRender} method of each component.
|
|
* @param {Number} containerIdx The index into the Container items of this Component.
|
|
*
|
|
* @private
|
|
*/
|
|
finishRender: function(containerIdx) {
|
|
var me = this,
|
|
tpl, data, el;
|
|
|
|
// We are typically called w/me.el==null as a child of some ownerCt that is being
|
|
// rendered. We are also called by render for a normal component (w/o a configured
|
|
// me.el). In this case, render sets me.el and me.rendering (indirectly). Lastly
|
|
// we are also called on a component (like a Viewport) that has a configured me.el
|
|
// (body for a Viewport) when render is called. In this case, it is not flagged as
|
|
// "me.rendering" yet becasue it does not produce a renderTree. We use this to know
|
|
// not to regen the renderTpl.
|
|
|
|
if (!me.el || me.$pid) {
|
|
if (me.container) {
|
|
el = me.container.getById(me.id, true);
|
|
} else {
|
|
el = Ext.getDom(me.id);
|
|
}
|
|
|
|
if (!me.el) {
|
|
// Typical case: we produced the el during render
|
|
me.wrapPrimaryEl(el);
|
|
} else {
|
|
// We were configured with an el and created a proxy, so now we can swap
|
|
// the proxy for me.el:
|
|
delete me.$pid;
|
|
|
|
if (!me.el.dom) {
|
|
// make sure me.el is an Element
|
|
me.wrapPrimaryEl(me.el);
|
|
}
|
|
el.parentNode.insertBefore(me.el.dom, el);
|
|
Ext.removeNode(el); // remove placeholder el
|
|
// TODO - what about class/style?
|
|
}
|
|
} else if (!me.rendering) {
|
|
// We were configured with an el and then told to render (e.g., Viewport). We
|
|
// need to generate the proper DOM. Insert first because the layout system
|
|
// insists that child Component elements indices match the Component indices.
|
|
tpl = me.initRenderTpl();
|
|
if (tpl) {
|
|
data = me.initRenderData();
|
|
tpl.insertFirst(me.getTargetEl(), data);
|
|
}
|
|
}
|
|
// else we are rendering
|
|
|
|
if (!me.container) {
|
|
// top-level rendered components will already have me.container set up
|
|
me.container = Ext.get(me.el.dom.parentNode);
|
|
}
|
|
|
|
if (me.ctCls) {
|
|
me.container.addCls(me.ctCls);
|
|
}
|
|
|
|
// Sets the rendered flag and clears the rendering flag
|
|
me.onRender(me.container, containerIdx);
|
|
|
|
// If we could not access a target protoEl in beforeRender, we have to set the overflow styles here.
|
|
if (!me.overflowStyleSet) {
|
|
me.getOverflowEl().setStyle(me.getOverflowStyle());
|
|
}
|
|
|
|
// Tell the encapsulating element to hide itself in the way the Component is configured to hide
|
|
// This means DISPLAY, VISIBILITY or OFFSETS.
|
|
me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
|
|
|
|
if (me.overCls) {
|
|
me.el.hover(me.addOverCls, me.removeOverCls, me);
|
|
}
|
|
|
|
if (me.hasListeners.render) {
|
|
me.fireEvent('render', me);
|
|
}
|
|
|
|
me.afterRender(); // this can cause a layout
|
|
if (me.hasListeners.afterrender) {
|
|
me.fireEvent('afterrender', me);
|
|
}
|
|
me.initEvents();
|
|
|
|
if (me.hidden) {
|
|
// Hiding during the render process should not perform any ancillary
|
|
// actions that the full hide process does; It is not hiding, it begins in a hidden state.'
|
|
// So just make the element hidden according to the configured hideMode
|
|
me.el.hide();
|
|
}
|
|
},
|
|
|
|
finishRenderChildren: function () {
|
|
var layout = this.getComponentLayout();
|
|
|
|
layout.finishRender();
|
|
},
|
|
|
|
getElConfig : function() {
|
|
var me = this,
|
|
autoEl = me.autoEl,
|
|
frameInfo = me.getFrameInfo(),
|
|
config = {
|
|
tag: 'div',
|
|
tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
|
|
},
|
|
protoEl = me.protoEl,
|
|
i, frameElNames, len, suffix, frameGenId, frameData;
|
|
|
|
me.initStyles(protoEl);
|
|
protoEl.writeTo(config);
|
|
protoEl.flush();
|
|
|
|
if (Ext.isString(autoEl)) {
|
|
config.tag = autoEl;
|
|
} else {
|
|
Ext.apply(config, autoEl); // harmless if !autoEl
|
|
}
|
|
|
|
// It's important to assign the id here as an autoEl.id could have been (wrongly) applied and this would get things out of sync
|
|
config.id = me.id;
|
|
|
|
if (config.tpl) {
|
|
// Use the framingTpl as the main content creating template. It will call out to this.applyRenderTpl(out, values)
|
|
if (frameInfo) {
|
|
frameElNames = me.frameElNames;
|
|
len = frameElNames.length;
|
|
|
|
config.tplData = frameData = me.getFrameRenderData();
|
|
frameData.renderData = me.initRenderData();
|
|
frameGenId = frameData.fgid;
|
|
|
|
// Add the childEls for each of the frame elements
|
|
for (i = 0; i < len; i++) {
|
|
suffix = frameElNames[i];
|
|
me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
|
|
}
|
|
|
|
// Panel must have a frameBody
|
|
me.addChildEls({
|
|
name: 'frameBody',
|
|
id: frameGenId + 'MC'
|
|
});
|
|
} else {
|
|
config.tplData = me.initRenderData();
|
|
}
|
|
}
|
|
|
|
return config;
|
|
},
|
|
|
|
// Create the framingTpl from the string.
|
|
// Poke in a reference to applyRenderTpl(frameInfo, out)
|
|
initFramingTpl: function(table) {
|
|
var tpl = this.getFrameTpl(table);
|
|
|
|
if (tpl && !tpl.applyRenderTpl) {
|
|
this.setupFramingTpl(tpl);
|
|
}
|
|
|
|
return tpl;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Inject a reference to the function which applies the render template into the framing template. The framing template
|
|
* wraps the content.
|
|
*/
|
|
setupFramingTpl: function(frameTpl) {
|
|
frameTpl.applyRenderTpl = this.doApplyRenderTpl;
|
|
frameTpl.renderDockedItems = this.doRenderFramingDockedItems;
|
|
},
|
|
|
|
/**
|
|
* This function takes the position argument passed to onRender and returns a
|
|
* DOM element that you can use in the insertBefore.
|
|
* @param {String/Number/Ext.dom.Element/HTMLElement} position Index, element id or element you want
|
|
* to put this component before.
|
|
* @return {HTMLElement} DOM element that you can use in the insertBefore
|
|
*/
|
|
getInsertPosition: function(position) {
|
|
// Convert the position to an element to insert before
|
|
if (position !== undefined) {
|
|
if (Ext.isNumber(position)) {
|
|
position = this.container.dom.childNodes[position];
|
|
}
|
|
else {
|
|
position = Ext.getDom(position);
|
|
}
|
|
}
|
|
|
|
return position;
|
|
},
|
|
|
|
getRenderTree: function() {
|
|
var me = this;
|
|
|
|
if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
|
|
me.beforeRender();
|
|
|
|
// Flag to let the layout's finishRenderItems and afterFinishRenderItems
|
|
// know which items to process
|
|
me.rendering = true;
|
|
|
|
if (me.el) {
|
|
// Since we are producing a render tree, we produce a "proxy el" that will
|
|
// sit in the rendered DOM precisely where me.el belongs. We replace the
|
|
// proxy el in the finishRender phase.
|
|
return {
|
|
tag: 'div',
|
|
id: (me.$pid = Ext.id())
|
|
};
|
|
}
|
|
|
|
return me.getElConfig();
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
initContainer: function(container) {
|
|
var me = this;
|
|
|
|
// If you render a component specifying the el, we get the container
|
|
// of the el, and make sure we dont move the el around in the dom
|
|
// during the render
|
|
if (!container && me.el) {
|
|
container = me.el.dom.parentNode;
|
|
me.allowDomMove = false;
|
|
}
|
|
me.container = container.dom ? container : Ext.get(container);
|
|
|
|
return me.container;
|
|
},
|
|
|
|
/**
|
|
* Initialized the renderData to be used when rendering the renderTpl.
|
|
* @return {Object} Object with keys and values that are going to be applied to the renderTpl
|
|
* @protected
|
|
*/
|
|
initRenderData: function() {
|
|
var me = this;
|
|
|
|
return Ext.apply({
|
|
$comp: me,
|
|
id: me.id,
|
|
ui: me.ui,
|
|
uiCls: me.uiCls,
|
|
baseCls: me.baseCls,
|
|
componentCls: me.componentCls,
|
|
frame: me.frame,
|
|
childElCls: '' // overridden in RTL
|
|
}, me.renderData);
|
|
},
|
|
|
|
/**
|
|
* Initializes the renderTpl.
|
|
* @return {Ext.XTemplate} The renderTpl XTemplate instance.
|
|
* @private
|
|
*/
|
|
initRenderTpl: function() {
|
|
var tpl = this.getTpl('renderTpl');
|
|
|
|
if (tpl && !tpl.renderContent) {
|
|
this.setupRenderTpl(tpl);
|
|
}
|
|
|
|
return tpl;
|
|
},
|
|
|
|
/**
|
|
* Template method called when this Component's DOM structure is created.
|
|
*
|
|
* At this point, this Component's (and all descendants') DOM structure *exists* but it has not
|
|
* been layed out (positioned and sized).
|
|
*
|
|
* Subclasses which override this to gain access to the structure at render time should
|
|
* call the parent class's method before attempting to access any child elements of the Component.
|
|
*
|
|
* @param {Ext.core.Element} parentNode The parent Element in which this Component's encapsulating element is contained.
|
|
* @param {Number} containerIdx The index within the parent Container's child collection of this Component.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onRender: function(parentNode, containerIdx) {
|
|
var me = this,
|
|
x = me.x,
|
|
y = me.y,
|
|
lastBox = null,
|
|
width, height,
|
|
el = me.el;
|
|
|
|
me.applyRenderSelectors();
|
|
|
|
// Flag set on getRenderTree to flag to the layout's postprocessing routine that
|
|
// the Component is in the process of being rendered and needs postprocessing.
|
|
me.rendering = null;
|
|
|
|
me.rendered = true;
|
|
|
|
// We need to remember these to avoid writing them during the initial layout:
|
|
if (x != null) {
|
|
lastBox = {x:x};
|
|
}
|
|
if (y != null) {
|
|
(lastBox = lastBox || {}).y = y;
|
|
}
|
|
// Framed components need their width/height to apply to the frame, which is
|
|
// best handled in layout at present.
|
|
// If we're using the content box model, we also cannot assign initial sizes since we do not know the border widths to subtract
|
|
if (!me.getFrameInfo() && Ext.isBorderBox) {
|
|
width = me.width;
|
|
height = me.height;
|
|
|
|
if (typeof width === 'number') {
|
|
lastBox = lastBox || {};
|
|
lastBox.width = width;
|
|
}
|
|
if (typeof height === 'number') {
|
|
lastBox = lastBox || {};
|
|
lastBox.height = height;
|
|
}
|
|
}
|
|
|
|
me.lastBox = el.lastBox = lastBox;
|
|
},
|
|
|
|
/**
|
|
* Renders the Component into the passed HTML element.
|
|
*
|
|
* **If you are using a {@link Ext.container.Container Container} object to house this
|
|
* Component, then do not use the render method.**
|
|
*
|
|
* A Container's child Components are rendered by that Container's
|
|
* {@link Ext.container.Container#layout layout} manager when the Container is first rendered.
|
|
*
|
|
* If the Container is already rendered when a new child Component is added, you may need to call
|
|
* the Container's {@link Ext.container.Container#doLayout doLayout} to refresh the view which
|
|
* causes any unrendered child Components to be rendered. This is required so that you can add
|
|
* multiple child components if needed while only refreshing the layout once.
|
|
*
|
|
* When creating complex UIs, it is important to remember that sizing and positioning
|
|
* of child items is the responsibility of the Container's {@link Ext.container.Container#layout layout}
|
|
* manager. If you expect child items to be sized in response to user interactions, you must
|
|
* configure the Container with a layout manager which creates and manages the type of layout you
|
|
* have in mind.
|
|
*
|
|
* **Omitting the Container's {@link Ext.Container#layout layout} config means that a basic
|
|
* layout manager is used which does nothing but render child components sequentially into the
|
|
* Container. No sizing or positioning will be performed in this situation.**
|
|
*
|
|
* @param {Ext.Element/HTMLElement/String} [container] The element this Component should be
|
|
* rendered into. If it is being created from existing markup, this should be omitted.
|
|
* @param {String/Number} [position] The element ID or DOM node index within the container **before**
|
|
* which this component will be inserted (defaults to appending to the end of the container)
|
|
*/
|
|
render: function(container, position) {
|
|
var me = this,
|
|
el = me.el && (me.el = Ext.get(me.el)), // ensure me.el is wrapped
|
|
vetoed,
|
|
tree,
|
|
nextSibling;
|
|
|
|
Ext.suspendLayouts();
|
|
|
|
container = me.initContainer(container);
|
|
|
|
nextSibling = me.getInsertPosition(position);
|
|
|
|
if (!el) {
|
|
tree = me.getRenderTree();
|
|
if (me.ownerLayout && me.ownerLayout.transformItemRenderTree) {
|
|
tree = me.ownerLayout.transformItemRenderTree(tree);
|
|
}
|
|
|
|
// tree will be null if a beforerender listener returns false
|
|
if (tree) {
|
|
if (nextSibling) {
|
|
el = Ext.DomHelper.insertBefore(nextSibling, tree);
|
|
} else {
|
|
el = Ext.DomHelper.append(container, tree);
|
|
}
|
|
|
|
me.wrapPrimaryEl(el);
|
|
}
|
|
} else {
|
|
if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
|
|
me.beforeRender();
|
|
// Set configured styles on pre-rendered Component's element
|
|
me.initStyles(el);
|
|
if (me.allowDomMove !== false) {
|
|
if (nextSibling) {
|
|
container.dom.insertBefore(el.dom, nextSibling);
|
|
} else {
|
|
container.dom.appendChild(el.dom);
|
|
}
|
|
}
|
|
} else {
|
|
vetoed = true;
|
|
}
|
|
}
|
|
|
|
if (el && !vetoed) {
|
|
me.finishRender(position);
|
|
}
|
|
|
|
Ext.resumeLayouts(!me.hidden && !container.isDetachedBody);
|
|
},
|
|
|
|
/**
|
|
* Ensures that this component is attached to `document.body`. If the component was
|
|
* rendered to {@link Ext#getDetachedBody}, then it will be appended to `document.body`.
|
|
* Any configured position is also restored.
|
|
* @param {Boolean} [runLayout=false] True to run the component's layout.
|
|
*/
|
|
ensureAttachedToBody: function (runLayout) {
|
|
var comp = this,
|
|
body;
|
|
|
|
while (comp.ownerCt) {
|
|
comp = comp.ownerCt;
|
|
}
|
|
|
|
if (comp.container.isDetachedBody) {
|
|
comp.container = body = Ext.getBody();
|
|
body.appendChild(comp.el.dom);
|
|
if (runLayout) {
|
|
comp.updateLayout();
|
|
}
|
|
if (typeof comp.x == 'number' || typeof comp.y == 'number') {
|
|
comp.setPosition(comp.x, comp.y);
|
|
}
|
|
}
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
renderTpl.renderBody = renderTpl.renderContent = this.doRenderContent;
|
|
},
|
|
|
|
wrapPrimaryEl: function (dom) {
|
|
this.el = Ext.get(dom, true);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
initFrame : function() {
|
|
if (Ext.supports.CSS3BorderRadius || !this.frame) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
frameInfo = me.getFrameInfo(),
|
|
frameTpl, frameGenId,
|
|
frameElNames = me.frameElNames,
|
|
len = frameElNames.length,
|
|
i, frameData, suffix;
|
|
|
|
if (frameInfo) {
|
|
frameTpl = me.getFrameTpl(frameInfo.table);
|
|
frameData = me.getFrameRenderData();
|
|
frameGenId = frameData.fgid;
|
|
|
|
// Here we render the frameTpl to this component. This inserts the 9point div
|
|
// or the table framing.
|
|
frameTpl.insertFirst(me.el, frameData);
|
|
|
|
// The frameBody is returned in getTargetEl, so that layouts render items to
|
|
// the correct target.
|
|
me.frameBody = me.el.down('.' + me.frameCls + '-mc');
|
|
|
|
// Clean out the childEls for the old frame elements (the majority of the els)
|
|
me.removeChildEls(function (c) {
|
|
return c.id && me.frameIdRegex.test(c.id);
|
|
});
|
|
|
|
// Grab references to the childEls for each of the new frame elements
|
|
for (i = 0; i < len; i++) {
|
|
suffix = frameElNames[i];
|
|
me['frame' + suffix] = me.el.getById(frameGenId + suffix);
|
|
}
|
|
}
|
|
},
|
|
|
|
getFrameRenderData: function () {
|
|
var me = this,
|
|
// we are only called if framing so this has already been determined:
|
|
frameInfo = me.frameSize,
|
|
frameGenId = (me.frameGenId || 0) + 1;
|
|
|
|
// since we render id's into the markup and id's NEED to be unique, we have a
|
|
// simple strategy for numbering their generations.
|
|
me.frameGenId = frameGenId;
|
|
|
|
return {
|
|
$comp: me,
|
|
fgid: me.id + '-frame' + frameGenId,
|
|
ui: me.ui,
|
|
uiCls: me.uiCls,
|
|
frameCls: me.frameCls,
|
|
baseCls: me.baseCls,
|
|
top: !!frameInfo.top,
|
|
left: !!frameInfo.left,
|
|
right: !!frameInfo.right,
|
|
bottom: !!frameInfo.bottom,
|
|
// can be optionally set by a subclass or override to be an extra class to
|
|
// be applied to all framing elements (used by RTL)
|
|
frameElCls: ''
|
|
};
|
|
},
|
|
|
|
updateFrame: function() {
|
|
if (Ext.supports.CSS3BorderRadius || !this.frame) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
wasTable = me.frameSize && me.frameSize.table,
|
|
oldFrameTL = me.frameTL,
|
|
oldFrameBL = me.frameBL,
|
|
oldFrameML = me.frameML,
|
|
oldFrameMC = me.frameMC,
|
|
newMCClassName;
|
|
|
|
me.initFrame();
|
|
|
|
if (oldFrameMC) {
|
|
if (me.frame) {
|
|
|
|
// Store the class names set on the new MC
|
|
newMCClassName = me.frameMC.dom.className;
|
|
|
|
// Framing elements have been selected in initFrame, no need to run applyRenderSelectors
|
|
// Replace the new mc with the old mc
|
|
oldFrameMC.insertAfter(me.frameMC);
|
|
me.frameMC.remove();
|
|
|
|
// Restore the reference to the old frame mc as the framebody
|
|
me.frameBody = me.frameMC = oldFrameMC;
|
|
|
|
// Apply the new mc classes to the old mc element
|
|
oldFrameMC.dom.className = newMCClassName;
|
|
|
|
// Remove the old framing
|
|
if (wasTable) {
|
|
me.el.query('> table')[1].remove();
|
|
}
|
|
else {
|
|
if (oldFrameTL) {
|
|
oldFrameTL.remove();
|
|
}
|
|
if (oldFrameBL) {
|
|
oldFrameBL.remove();
|
|
}
|
|
if (oldFrameML) {
|
|
oldFrameML.remove();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if (me.frame) {
|
|
me.applyRenderSelectors();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* On render, reads an encoded style attribute, "filter" from the style of this Component's element.
|
|
* This information is memoized based upon the CSS class name of this Component's element.
|
|
* Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
|
|
* into the document to receive the document element's CSS class name, and therefore style attributes.
|
|
*/
|
|
getFrameInfo: function() {
|
|
// If native framing can be used, or this component is not going to be framed, then do not attempt to read CSS framing info.
|
|
if (Ext.supports.CSS3BorderRadius || !this.frame) {
|
|
return false;
|
|
}
|
|
|
|
var me = this,
|
|
frameInfoCache = me.frameInfoCache,
|
|
cls = me.getFramingInfoCls() + '-frameInfo',
|
|
frameInfo = frameInfoCache[cls],
|
|
max = Math.max,
|
|
styleEl, match, info, frameTop, frameRight, frameBottom, frameLeft,
|
|
borderWidthT, borderWidthR, borderWidthB, borderWidthL,
|
|
paddingT, paddingR, paddingB, paddingL,
|
|
borderRadiusTL, borderRadiusTR, borderRadiusBR, borderRadiusBL;
|
|
|
|
if (frameInfo == null) {
|
|
// Get the singleton frame style proxy with our el class name stamped into it.
|
|
styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
|
|
info = styleEl.getStyle('font-family');
|
|
|
|
if (info) {
|
|
// The framing data is encoded as
|
|
//
|
|
// D=div|T=table
|
|
// | H=horz|V=vert
|
|
// | |
|
|
// | |
|
|
// [DT][HV]-[T-R-B-L]-[T-R-B-L]-[T-R-B-L]
|
|
// / / | | \ \
|
|
// / / | | \ \
|
|
// / / / \ \ \
|
|
// / / border-width \ \
|
|
// border-radius padding
|
|
//
|
|
// The first 2 chars hold the div/table and horizontal/vertical flags.
|
|
// The 3 sets of TRBL 4-tuples are the CSS3 values for border-radius,
|
|
// border-width and padding, respectively.
|
|
//
|
|
info = info.split('-');
|
|
|
|
borderRadiusTL = parseInt(info[1], 10);
|
|
borderRadiusTR = parseInt(info[2], 10);
|
|
borderRadiusBR = parseInt(info[3], 10);
|
|
borderRadiusBL = parseInt(info[4], 10);
|
|
borderWidthT = parseInt(info[5], 10);
|
|
borderWidthR = parseInt(info[6], 10);
|
|
borderWidthB = parseInt(info[7], 10);
|
|
borderWidthL = parseInt(info[8], 10);
|
|
paddingT = parseInt(info[9], 10);
|
|
paddingR = parseInt(info[10], 10);
|
|
paddingB = parseInt(info[11], 10);
|
|
paddingL = parseInt(info[12], 10);
|
|
|
|
// This calculation should follow ext-theme-base/etc/mixins/frame.css
|
|
// with respect to the CSS3 equivalent formulation:
|
|
frameTop = max(borderWidthT, max(borderRadiusTL, borderRadiusTR));
|
|
frameRight = max(borderWidthR, max(borderRadiusTR, borderRadiusBR));
|
|
frameBottom = max(borderWidthB, max(borderRadiusBL, borderRadiusBR));
|
|
frameLeft = max(borderWidthL, max(borderRadiusTL, borderRadiusBL));
|
|
|
|
frameInfo = {
|
|
table: info[0].charAt(0) === 't',
|
|
vertical: info[0].charAt(1) === 'v',
|
|
|
|
top: frameTop,
|
|
right: frameRight,
|
|
bottom: frameBottom,
|
|
left: frameLeft,
|
|
|
|
width: frameLeft + frameRight,
|
|
height: frameTop + frameBottom,
|
|
|
|
maxWidth: max(frameTop, frameRight, frameBottom, frameLeft),
|
|
|
|
border: {
|
|
top: borderWidthT,
|
|
right: borderWidthR,
|
|
bottom: borderWidthB,
|
|
left: borderWidthL,
|
|
width: borderWidthL + borderWidthR,
|
|
height: borderWidthT + borderWidthB
|
|
},
|
|
padding: {
|
|
top: paddingT,
|
|
right: paddingR,
|
|
bottom: paddingB,
|
|
left: paddingL,
|
|
width: paddingL + paddingR,
|
|
height: paddingT + paddingB
|
|
},
|
|
radius: {
|
|
tl: borderRadiusTL,
|
|
tr: borderRadiusTR,
|
|
br: borderRadiusBR,
|
|
bl: borderRadiusBL
|
|
}
|
|
};
|
|
} else {
|
|
frameInfo = false;
|
|
}
|
|
|
|
|
|
frameInfoCache[cls] = frameInfo;
|
|
}
|
|
|
|
me.frame = !!frameInfo;
|
|
me.frameSize = frameInfo;
|
|
|
|
return frameInfo;
|
|
},
|
|
|
|
getFramingInfoCls: function(){
|
|
return this.baseCls + '-' + this.ui;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns an offscreen div with the same class name as the element this is being rendered.
|
|
* This is because child item rendering takes place in a detached div which, being not
|
|
* part of the document, has no styling.
|
|
*/
|
|
getStyleProxy: function(cls) {
|
|
var result = this.styleProxyEl || (Ext.AbstractComponent.prototype.styleProxyEl = Ext.getBody().createChild({
|
|
style: {
|
|
position: 'absolute',
|
|
top: '-10000px'
|
|
}
|
|
}, null, true));
|
|
|
|
result.className = cls;
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getFrameTpl : function(table) {
|
|
return this.getTpl(table ? 'frameTableTpl' : 'frameTpl');
|
|
},
|
|
|
|
// Cache the frame information object so as not to cause style recalculations
|
|
frameInfoCache: {}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.state.Provider
|
|
* <p>Abstract base class for state provider implementations. The provider is responsible
|
|
* for setting values and extracting values to/from the underlying storage source. The
|
|
* storage source can vary and the details should be implemented in a subclass. For example
|
|
* a provider could use a server side database or the browser localstorage where supported.</p>
|
|
*
|
|
* <p>This class provides methods for encoding and decoding <b>typed</b> variables including
|
|
* dates and defines the Provider interface. By default these methods put the value and the
|
|
* type information into a delimited string that can be stored. These should be overridden in
|
|
* a subclass if you want to change the format of the encoded value and subsequent decoding.</p>
|
|
*/
|
|
Ext.define('Ext.state.Provider', {
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} prefix A string to prefix to items stored in the underlying state store.
|
|
* Defaults to <tt>'ext-'</tt>
|
|
*/
|
|
prefix: 'ext-',
|
|
|
|
constructor : function(config){
|
|
config = config || {};
|
|
var me = this;
|
|
Ext.apply(me, config);
|
|
/**
|
|
* @event statechange
|
|
* Fires when a state change occurs.
|
|
* @param {Ext.state.Provider} this This state provider
|
|
* @param {String} key The state key which was changed
|
|
* @param {String} value The encoded value for the state
|
|
*/
|
|
me.addEvents("statechange");
|
|
me.state = {};
|
|
me.mixins.observable.constructor.call(me);
|
|
},
|
|
|
|
/**
|
|
* Returns the current value for a key
|
|
* @param {String} name The key name
|
|
* @param {Object} defaultValue A default value to return if the key's value is not found
|
|
* @return {Object} The state data
|
|
*/
|
|
get : function(name, defaultValue){
|
|
return typeof this.state[name] == "undefined" ?
|
|
defaultValue : this.state[name];
|
|
},
|
|
|
|
/**
|
|
* Clears a value from the state
|
|
* @param {String} name The key name
|
|
*/
|
|
clear : function(name){
|
|
var me = this;
|
|
delete me.state[name];
|
|
me.fireEvent("statechange", me, name, null);
|
|
},
|
|
|
|
/**
|
|
* Sets the value for a key
|
|
* @param {String} name The key name
|
|
* @param {Object} value The value to set
|
|
*/
|
|
set : function(name, value){
|
|
var me = this;
|
|
me.state[name] = value;
|
|
me.fireEvent("statechange", me, name, value);
|
|
},
|
|
|
|
/**
|
|
* Decodes a string previously encoded with {@link #encodeValue}.
|
|
* @param {String} value The value to decode
|
|
* @return {Object} The decoded value
|
|
*/
|
|
decodeValue : function(value){
|
|
|
|
// a -> Array
|
|
// n -> Number
|
|
// d -> Date
|
|
// b -> Boolean
|
|
// s -> String
|
|
// o -> Object
|
|
// -> Empty (null)
|
|
|
|
var me = this,
|
|
re = /^(a|n|d|b|s|o|e)\:(.*)$/,
|
|
matches = re.exec(unescape(value)),
|
|
all,
|
|
type,
|
|
keyValue,
|
|
values,
|
|
vLen,
|
|
v;
|
|
|
|
if(!matches || !matches[1]){
|
|
return; // non state
|
|
}
|
|
|
|
type = matches[1];
|
|
value = matches[2];
|
|
switch (type) {
|
|
case 'e':
|
|
return null;
|
|
case 'n':
|
|
return parseFloat(value);
|
|
case 'd':
|
|
return new Date(Date.parse(value));
|
|
case 'b':
|
|
return (value == '1');
|
|
case 'a':
|
|
all = [];
|
|
if(value != ''){
|
|
values = value.split('^');
|
|
vLen = values.length;
|
|
|
|
for (v = 0; v < vLen; v++) {
|
|
value = values[v];
|
|
all.push(me.decodeValue(value));
|
|
}
|
|
}
|
|
return all;
|
|
case 'o':
|
|
all = {};
|
|
if(value != ''){
|
|
values = value.split('^');
|
|
vLen = values.length;
|
|
|
|
for (v = 0; v < vLen; v++) {
|
|
value = values[v];
|
|
keyValue = value.split('=');
|
|
all[keyValue[0]] = me.decodeValue(keyValue[1]);
|
|
}
|
|
}
|
|
return all;
|
|
default:
|
|
return value;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Encodes a value including type information. Decode with {@link #decodeValue}.
|
|
* @param {Object} value The value to encode
|
|
* @return {String} The encoded value
|
|
*/
|
|
encodeValue : function(value){
|
|
var flat = '',
|
|
i = 0,
|
|
enc,
|
|
len,
|
|
key;
|
|
|
|
if (value == null) {
|
|
return 'e:1';
|
|
} else if(typeof value == 'number') {
|
|
enc = 'n:' + value;
|
|
} else if(typeof value == 'boolean') {
|
|
enc = 'b:' + (value ? '1' : '0');
|
|
} else if(Ext.isDate(value)) {
|
|
enc = 'd:' + value.toGMTString();
|
|
} else if(Ext.isArray(value)) {
|
|
for (len = value.length; i < len; i++) {
|
|
flat += this.encodeValue(value[i]);
|
|
if (i != len - 1) {
|
|
flat += '^';
|
|
}
|
|
}
|
|
enc = 'a:' + flat;
|
|
} else if (typeof value == 'object') {
|
|
for (key in value) {
|
|
if (typeof value[key] != 'function' && value[key] !== undefined) {
|
|
flat += key + '=' + this.encodeValue(value[key]) + '^';
|
|
}
|
|
}
|
|
enc = 'o:' + flat.substring(0, flat.length-1);
|
|
} else {
|
|
enc = 's:' + value;
|
|
}
|
|
return escape(enc);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.state.Manager
|
|
* This is the global state manager. By default all components that are "state aware" check this class
|
|
* for state information if you don't pass them a custom state provider. In order for this class
|
|
* to be useful, it must be initialized with a provider when your application initializes. Example usage:
|
|
<pre><code>
|
|
// in your initialization function
|
|
init : function(){
|
|
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
|
|
}
|
|
</code></pre>
|
|
* This class passes on calls from components to the underlying {@link Ext.state.Provider} so that
|
|
* there is a common interface that can be used without needing to refer to a specific provider instance
|
|
* in every component.
|
|
* @singleton
|
|
* @docauthor Evan Trimboli <evan@sencha.com>
|
|
*/
|
|
Ext.define('Ext.state.Manager', {
|
|
singleton: true,
|
|
|
|
constructor: function() {
|
|
this.provider = new Ext.state.Provider();
|
|
},
|
|
|
|
|
|
/**
|
|
* Configures the default state provider for your application
|
|
* @param {Ext.state.Provider} stateProvider The state provider to set
|
|
*/
|
|
setProvider : function(stateProvider){
|
|
this.provider = stateProvider;
|
|
},
|
|
|
|
/**
|
|
* Returns the current value for a key
|
|
* @param {String} name The key name
|
|
* @param {Object} defaultValue The default value to return if the key lookup does not match
|
|
* @return {Object} The state data
|
|
*/
|
|
get : function(key, defaultValue){
|
|
return this.provider.get(key, defaultValue);
|
|
},
|
|
|
|
/**
|
|
* Sets the value for a key
|
|
* @param {String} name The key name
|
|
* @param {Object} value The state data
|
|
*/
|
|
set : function(key, value){
|
|
this.provider.set(key, value);
|
|
},
|
|
|
|
/**
|
|
* Clears a value from the state
|
|
* @param {String} name The key name
|
|
*/
|
|
clear : function(key){
|
|
this.provider.clear(key);
|
|
},
|
|
|
|
/**
|
|
* Gets the currently configured state provider
|
|
* @return {Ext.state.Provider} The state provider
|
|
*/
|
|
getProvider : function(){
|
|
return this.provider;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.state.Stateful
|
|
* A mixin for being able to save the state of an object to an underlying
|
|
* {@link Ext.state.Provider}.
|
|
*/
|
|
Ext.define('Ext.state.Stateful', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Boolean} stateful
|
|
* A flag which causes the object to attempt to restore the state of
|
|
* internal properties from a saved state on startup. The object must have
|
|
* a {@link #stateId} for state to be managed.
|
|
*
|
|
* Auto-generated ids are not guaranteed to be stable across page loads and
|
|
* cannot be relied upon to save and restore the same state for a object.
|
|
*
|
|
* For state saving to work, the state manager's provider must have been
|
|
* set to an implementation of {@link Ext.state.Provider} which overrides the
|
|
* {@link Ext.state.Provider#set set} and {@link Ext.state.Provider#get get}
|
|
* methods to save and recall name/value pairs. A built-in implementation,
|
|
* {@link Ext.state.CookieProvider} is available.
|
|
*
|
|
* To set the state provider for the current page:
|
|
*
|
|
* Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
|
|
* expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
|
|
* }));
|
|
*
|
|
* A stateful object attempts to save state when one of the events
|
|
* listed in the {@link #stateEvents} configuration fires.
|
|
*
|
|
* To save state, a stateful object first serializes its state by
|
|
* calling *{@link #getState}*.
|
|
*
|
|
* The Component base class implements {@link #getState} to save its width and height within the state
|
|
* only if they were initially configured, and have changed from the configured value.
|
|
*
|
|
* The Panel class saves its collapsed state in addition to that.
|
|
*
|
|
* The Grid class saves its column state in addition to its superclass state.
|
|
*
|
|
* If there is more application state to be save, the developer must provide an implementation which
|
|
* first calls the superclass method to inherit the above behaviour, and then injects new properties
|
|
* into the returned object.
|
|
*
|
|
* The value yielded by getState is passed to {@link Ext.state.Manager#set}
|
|
* which uses the configured {@link Ext.state.Provider} to save the object
|
|
* keyed by the {@link #stateId}.
|
|
*
|
|
* During construction, a stateful object attempts to *restore* its state by calling
|
|
* {@link Ext.state.Manager#get} passing the {@link #stateId}
|
|
*
|
|
* The resulting object is passed to {@link #applyState}*. The default implementation of
|
|
* {@link #applyState} simply copies properties into the object, but a developer may
|
|
* override this to support restoration of more complex application state.
|
|
*
|
|
* You can perform extra processing on state save and restore by attaching
|
|
* handlers to the {@link #beforestaterestore}, {@link #staterestore},
|
|
* {@link #beforestatesave} and {@link #statesave} events.
|
|
*/
|
|
stateful: false,
|
|
|
|
/**
|
|
* @cfg {String} stateId
|
|
* The unique id for this object to use for state management purposes.
|
|
* <p>See {@link #stateful} for an explanation of saving and restoring state.</p>
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String[]} stateEvents
|
|
* <p>An array of events that, when fired, should trigger this object to
|
|
* save its state. Defaults to none. <code>stateEvents</code> may be any type
|
|
* of event supported by this object, including browser or custom events
|
|
* (e.g., <tt>['click', 'customerchange']</tt>).</p>
|
|
* <p>See <code>{@link #stateful}</code> for an explanation of saving and
|
|
* restoring object state.</p>
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} saveDelay
|
|
* A buffer to be applied if many state events are fired within a short period.
|
|
*/
|
|
saveDelay: 100,
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
config = config || {};
|
|
if (config.stateful !== undefined) {
|
|
me.stateful = config.stateful;
|
|
}
|
|
if (config.saveDelay !== undefined) {
|
|
me.saveDelay = config.saveDelay;
|
|
}
|
|
me.stateId = me.stateId || config.stateId;
|
|
|
|
if (!me.stateEvents) {
|
|
me.stateEvents = [];
|
|
}
|
|
if (config.stateEvents) {
|
|
me.stateEvents.concat(config.stateEvents);
|
|
}
|
|
this.addEvents(
|
|
/**
|
|
* @event beforestaterestore
|
|
* Fires before the state of the object is restored. Return false from an event handler to stop the restore.
|
|
* @param {Ext.state.Stateful} this
|
|
* @param {Object} state The hash of state values returned from the StateProvider. If this
|
|
* event is not vetoed, then the state object is passed to <b><tt>applyState</tt></b>. By default,
|
|
* that simply copies property values into this object. The method maybe overriden to
|
|
* provide custom state restoration.
|
|
*/
|
|
'beforestaterestore',
|
|
|
|
/**
|
|
* @event staterestore
|
|
* Fires after the state of the object is restored.
|
|
* @param {Ext.state.Stateful} this
|
|
* @param {Object} state The hash of state values returned from the StateProvider. This is passed
|
|
* to <b><tt>applyState</tt></b>. By default, that simply copies property values into this
|
|
* object. The method maybe overriden to provide custom state restoration.
|
|
*/
|
|
'staterestore',
|
|
|
|
/**
|
|
* @event beforestatesave
|
|
* Fires before the state of the object is saved to the configured state provider. Return false to stop the save.
|
|
* @param {Ext.state.Stateful} this
|
|
* @param {Object} state The hash of state values. This is determined by calling
|
|
* <b><tt>getState()</tt></b> on the object. This method must be provided by the
|
|
* developer to return whetever representation of state is required, by default, Ext.state.Stateful
|
|
* has a null implementation.
|
|
*/
|
|
'beforestatesave',
|
|
|
|
/**
|
|
* @event statesave
|
|
* Fires after the state of the object is saved to the configured state provider.
|
|
* @param {Ext.state.Stateful} this
|
|
* @param {Object} state The hash of state values. This is determined by calling
|
|
* <b><tt>getState()</tt></b> on the object. This method must be provided by the
|
|
* developer to return whetever representation of state is required, by default, Ext.state.Stateful
|
|
* has a null implementation.
|
|
*/
|
|
'statesave'
|
|
);
|
|
me.mixins.observable.constructor.call(me);
|
|
|
|
if (me.stateful !== false) {
|
|
me.addStateEvents(me.stateEvents);
|
|
me.initState();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Add events that will trigger the state to be saved. If the first argument is an
|
|
* array, each element of that array is the name of a state event. Otherwise, each
|
|
* argument passed to this method is the name of a state event.
|
|
*
|
|
* @param {String/String[]} events The event name or an array of event names.
|
|
*/
|
|
addStateEvents: function (events) {
|
|
var me = this,
|
|
i, event, stateEventsByName;
|
|
|
|
if (me.stateful && me.getStateId()) {
|
|
if (typeof events == 'string') {
|
|
events = Array.prototype.slice.call(arguments, 0);
|
|
}
|
|
|
|
stateEventsByName = me.stateEventsByName || (me.stateEventsByName = {});
|
|
|
|
for (i = events.length; i--; ) {
|
|
event = events[i];
|
|
|
|
if (!stateEventsByName[event]) {
|
|
stateEventsByName[event] = 1;
|
|
me.on(event, me.onStateChange, me);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This method is called when any of the {@link #stateEvents} are fired.
|
|
* @private
|
|
*/
|
|
onStateChange: function(){
|
|
var me = this,
|
|
delay = me.saveDelay,
|
|
statics, runner;
|
|
|
|
if (!me.stateful) {
|
|
return;
|
|
}
|
|
|
|
if (delay) {
|
|
if (!me.stateTask) {
|
|
statics = Ext.state.Stateful;
|
|
runner = statics.runner || (statics.runner = new Ext.util.TaskRunner());
|
|
|
|
me.stateTask = runner.newTask({
|
|
run: me.saveState,
|
|
scope: me,
|
|
interval: delay,
|
|
repeat: 1
|
|
});
|
|
}
|
|
|
|
me.stateTask.start();
|
|
} else {
|
|
me.saveState();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Saves the state of the object to the persistence store.
|
|
*/
|
|
saveState: function() {
|
|
var me = this,
|
|
id = me.stateful && me.getStateId(),
|
|
hasListeners = me.hasListeners,
|
|
state;
|
|
|
|
if (id) {
|
|
state = me.getState() || {}; //pass along for custom interactions
|
|
if (!hasListeners.beforestatesave || me.fireEvent('beforestatesave', me, state) !== false) {
|
|
Ext.state.Manager.set(id, state);
|
|
if (hasListeners.statesave) {
|
|
me.fireEvent('statesave', me, state);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the current state of the object. By default this function returns null,
|
|
* it should be overridden in subclasses to implement methods for getting the state.
|
|
* @return {Object} The current state
|
|
*/
|
|
getState: function(){
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Applies the state to the object. This should be overridden in subclasses to do
|
|
* more complex state operations. By default it applies the state properties onto
|
|
* the current object.
|
|
* @param {Object} state The state
|
|
*/
|
|
applyState: function(state) {
|
|
if (state) {
|
|
Ext.apply(this, state);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the state id for this object.
|
|
* @return {String} The 'stateId' or the implicit 'id' specified by component configuration.
|
|
* @private
|
|
*/
|
|
getStateId: function() {
|
|
var me = this;
|
|
return me.stateId || (me.autoGenId ? null : me.id);
|
|
},
|
|
|
|
/**
|
|
* Initializes the state of the object upon construction.
|
|
* @private
|
|
*/
|
|
initState: function(){
|
|
var me = this,
|
|
id = me.stateful && me.getStateId(),
|
|
hasListeners = me.hasListeners,
|
|
state;
|
|
|
|
if (id) {
|
|
state = Ext.state.Manager.get(id);
|
|
if (state) {
|
|
state = Ext.apply({}, state);
|
|
if (!hasListeners.beforestaterestore || me.fireEvent('beforestaterestore', me, state) !== false) {
|
|
me.applyState(state);
|
|
if (hasListeners.staterestore) {
|
|
me.fireEvent('staterestore', me, state);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Conditionally saves a single property from this object to the given state object.
|
|
* The idea is to only save state which has changed from the initial state so that
|
|
* current software settings do not override future software settings. Only those
|
|
* values that are user-changed state should be saved.
|
|
*
|
|
* @param {String} propName The name of the property to save.
|
|
* @param {Object} state The state object in to which to save the property.
|
|
* @param {String} stateName (optional) The name to use for the property in state.
|
|
* @return {Boolean} True if the property was saved, false if not.
|
|
*/
|
|
savePropToState: function (propName, state, stateName) {
|
|
var me = this,
|
|
value = me[propName],
|
|
config = me.initialConfig;
|
|
|
|
if (me.hasOwnProperty(propName)) {
|
|
if (!config || config[propName] !== value) {
|
|
if (state) {
|
|
state[stateName || propName] = value;
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Gathers additional named properties of the instance and adds their current values
|
|
* to the passed state object.
|
|
* @param {String/String[]} propNames The name (or array of names) of the property to save.
|
|
* @param {Object} state The state object in to which to save the property values.
|
|
* @return {Object} state
|
|
*/
|
|
savePropsToState: function (propNames, state) {
|
|
var me = this,
|
|
i, n;
|
|
|
|
if (typeof propNames == 'string') {
|
|
me.savePropToState(propNames, state);
|
|
} else {
|
|
for (i = 0, n = propNames.length; i < n; ++i) {
|
|
me.savePropToState(propNames[i], state);
|
|
}
|
|
}
|
|
|
|
return state;
|
|
},
|
|
|
|
/**
|
|
* Destroys this stateful object.
|
|
*/
|
|
destroy: function(){
|
|
var me = this,
|
|
task = me.stateTask;
|
|
|
|
if (task) {
|
|
task.destroy();
|
|
me.stateTask = null;
|
|
}
|
|
|
|
me.clearListeners();
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.util.Renderable', {
|
|
override: 'Ext.util.Renderable',
|
|
|
|
_rtlCls: Ext.baseCSSPrefix + 'rtl',
|
|
_ltrCls: Ext.baseCSSPrefix + 'ltr',
|
|
|
|
// this template should be exactly the same as frameTableTple, except with the order
|
|
// of right and left TD elements switched.
|
|
rtlFrameTableTpl: [
|
|
'{%this.renderDockedItems(out,values,0);%}',
|
|
'<table class="', Ext.plainTableCls, '" cellpadding="0"><tbody>',
|
|
'<tpl if="top">',
|
|
'<tr>',
|
|
'<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>{frameElCls}" role="presentation"></td>',
|
|
'<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'</tr>',
|
|
'</tpl>',
|
|
'<tr>',
|
|
'<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>{frameElCls}" role="presentation">',
|
|
'{%this.applyRenderTpl(out, values)%}',
|
|
'</td>',
|
|
'<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'</tr>',
|
|
'<tpl if="bottom">',
|
|
'<tr>',
|
|
'<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>{frameElCls}" role="presentation"></td>',
|
|
'<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>{frameElCls}" role="presentation"></td></tpl>',
|
|
'</tr>',
|
|
'</tpl>',
|
|
'</tbody></table>',
|
|
'{%this.renderDockedItems(out,values,1);%}'
|
|
],
|
|
|
|
beforeRender: function() {
|
|
var rtl = this.getHierarchyState().rtl;
|
|
if (rtl) {
|
|
this.addCls(this._rtlCls);
|
|
} else if (rtl === false) {
|
|
this.addCls(this._ltrCls);
|
|
}
|
|
|
|
this.callParent();
|
|
},
|
|
|
|
getFrameTpl: function(table) {
|
|
return (table && this.getHierarchyState().rtl) ?
|
|
this.getTpl('rtlFrameTableTpl') : this.callParent(arguments);
|
|
},
|
|
|
|
initRenderData: function() {
|
|
var me = this,
|
|
renderData = me.callParent(),
|
|
rtlCls = me._rtlCls;
|
|
|
|
if (rtlCls && me.getHierarchyState().rtl) {
|
|
renderData.childElCls = ' ' + rtlCls;
|
|
}
|
|
|
|
return renderData;
|
|
},
|
|
|
|
getFrameRenderData: function () {
|
|
var me = this,
|
|
data = me.callParent(),
|
|
rtlCls = me._rtlCls;
|
|
|
|
if (rtlCls && me.getHierarchyState().rtl) {
|
|
data.frameElCls = ' ' + rtlCls;
|
|
}
|
|
|
|
return data;
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* An abstract base class which provides shared methods for Components across the Sencha product line.
|
|
*
|
|
* Please refer to sub class's documentation.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.AbstractComponent', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
positionable: Ext.util.Positionable ,
|
|
observable: Ext.util.Observable ,
|
|
animate: Ext.util.Animate ,
|
|
elementCt: Ext.util.ElementContainer ,
|
|
renderable: Ext.util.Renderable ,
|
|
state: Ext.state.Stateful
|
|
},
|
|
|
|
// The "uses" property specifies class which are used in an instantiated AbstractComponent.
|
|
// They do *not* have to be loaded before this class may be defined - that is what "requires" is for.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
statics: {
|
|
AUTO_ID: 1000,
|
|
|
|
pendingLayouts: null,
|
|
|
|
layoutSuspendCount: 0,
|
|
|
|
/**
|
|
* Cancels layout of a component.
|
|
* @param {Ext.Component} comp
|
|
*/
|
|
cancelLayout: function(comp, isDestroying) {
|
|
var context = this.runningLayoutContext || this.pendingLayouts;
|
|
|
|
if (context) {
|
|
context.cancelComponent(comp, false, isDestroying);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Performs all pending layouts that were scheduled while
|
|
* {@link Ext.AbstractComponent#suspendLayouts suspendLayouts} was in effect.
|
|
* @static
|
|
*/
|
|
flushLayouts: function () {
|
|
var me = this,
|
|
context = me.pendingLayouts;
|
|
|
|
if (context && context.invalidQueue.length) {
|
|
me.pendingLayouts = null;
|
|
me.runningLayoutContext = context;
|
|
|
|
Ext.override(context, {
|
|
runComplete: function () {
|
|
// we need to release the layout queue before running any of the
|
|
// finishedLayout calls because they call afterComponentLayout
|
|
// which can re-enter by calling doLayout/doComponentLayout.
|
|
me.runningLayoutContext = null;
|
|
|
|
var result = this.callParent(); // not "me" here!
|
|
if (Ext.globalEvents.hasListeners.afterlayout) {
|
|
Ext.globalEvents.fireEvent('afterlayout');
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
context.run();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Resumes layout activity in the whole framework.
|
|
*
|
|
* {@link Ext#suspendLayouts} is alias of {@link Ext.AbstractComponent#suspendLayouts}.
|
|
*
|
|
* @param {Boolean} [flush=false] `true` to perform all the pending layouts. This can also be
|
|
* achieved by calling {@link Ext.AbstractComponent#flushLayouts flushLayouts} directly.
|
|
* @static
|
|
*/
|
|
resumeLayouts: function (flush) {
|
|
if (this.layoutSuspendCount && ! --this.layoutSuspendCount) {
|
|
if (flush) {
|
|
this.flushLayouts();
|
|
}
|
|
if (Ext.globalEvents.hasListeners.resumelayouts) {
|
|
Ext.globalEvents.fireEvent('resumelayouts');
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Stops layouts from happening in the whole framework.
|
|
*
|
|
* It's useful to suspend the layout activity while updating multiple components and
|
|
* containers:
|
|
*
|
|
* Ext.suspendLayouts();
|
|
* // batch of updates...
|
|
* Ext.resumeLayouts(true);
|
|
*
|
|
* {@link Ext#suspendLayouts} is alias of {@link Ext.AbstractComponent#suspendLayouts}.
|
|
*
|
|
* See also {@link Ext#batchLayouts} for more abstract way of doing this.
|
|
*
|
|
* @static
|
|
*/
|
|
suspendLayouts: function () {
|
|
++this.layoutSuspendCount;
|
|
},
|
|
|
|
/**
|
|
* Updates layout of a component.
|
|
*
|
|
* @param {Ext.Component} comp The component to update.
|
|
* @param {Boolean} [defer=false] `true` to just queue the layout if this component.
|
|
* @static
|
|
*/
|
|
updateLayout: function (comp, defer) {
|
|
var me = this,
|
|
running = me.runningLayoutContext,
|
|
pending;
|
|
|
|
if (running) {
|
|
running.queueInvalidate(comp);
|
|
} else {
|
|
pending = me.pendingLayouts || (me.pendingLayouts = new Ext.layout.Context());
|
|
pending.queueInvalidate(comp);
|
|
|
|
if (!defer && !me.layoutSuspendCount && !comp.isLayoutSuspended()) {
|
|
me.flushLayouts();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @property {Boolean} isComponent
|
|
* `true` in this class to identify an object as an instantiated Component, or subclass thereof.
|
|
*/
|
|
isComponent: true,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getAutoId: function() {
|
|
this.autoGenId = true;
|
|
return ++Ext.AbstractComponent.AUTO_ID;
|
|
},
|
|
|
|
deferLayouts: false,
|
|
|
|
/**
|
|
* @cfg {String} id
|
|
* The **unique id of this component instance.**
|
|
*
|
|
* It should not be necessary to use this configuration except for singleton objects in your application. Components
|
|
* created with an `id` may be accessed globally using {@link Ext#getCmp Ext.getCmp}.
|
|
*
|
|
* Instead of using assigned ids, use the {@link #itemId} config, and {@link Ext.ComponentQuery ComponentQuery}
|
|
* which provides selector-based searching for Sencha Components analogous to DOM querying. The {@link
|
|
* Ext.container.Container Container} class contains {@link Ext.container.Container#down shortcut methods} to query
|
|
* its descendant Components by selector.
|
|
*
|
|
* Note that this `id` will also be used as the element id for the containing HTML element that is rendered to the
|
|
* page for this component. This allows you to write id-based CSS rules to style the specific instance of this
|
|
* component uniquely, and also to select sub-elements using this component's `id` as the parent.
|
|
*
|
|
* **Note:** To avoid complications imposed by a unique `id` also see `{@link #itemId}`.
|
|
*
|
|
* **Note:** To access the container of a Component see `{@link #ownerCt}`.
|
|
*
|
|
* Defaults to an {@link #getId auto-assigned id}.
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} autoGenId
|
|
* `true` indicates an `id` was auto-generated rather than provided by configuration.
|
|
* @private
|
|
*/
|
|
autoGenId: false,
|
|
|
|
/**
|
|
* @cfg {String} itemId
|
|
* An `itemId` can be used as an alternative way to get a reference to a component when no object reference is
|
|
* available. Instead of using an `{@link #id}` with {@link Ext}.{@link Ext#getCmp getCmp}, use `itemId` with
|
|
* {@link Ext.container.Container}.{@link Ext.container.Container#getComponent getComponent} which will retrieve
|
|
* `itemId`'s or {@link #id}'s. Since `itemId`'s are an index to the container's internal MixedCollection, the
|
|
* `itemId` is scoped locally to the container -- avoiding potential conflicts with {@link Ext.ComponentManager}
|
|
* which requires a **unique** `{@link #id}`.
|
|
*
|
|
* var c = new Ext.panel.Panel({ //
|
|
* {@link Ext.Component#height height}: 300,
|
|
* {@link #renderTo}: document.body,
|
|
* {@link Ext.container.Container#layout layout}: 'auto',
|
|
* {@link Ext.container.Container#cfg-items items}: [
|
|
* {
|
|
* itemId: 'p1',
|
|
* {@link Ext.panel.Panel#title title}: 'Panel 1',
|
|
* {@link Ext.Component#height height}: 150
|
|
* },
|
|
* {
|
|
* itemId: 'p2',
|
|
* {@link Ext.panel.Panel#title title}: 'Panel 2',
|
|
* {@link Ext.Component#height height}: 150
|
|
* }
|
|
* ]
|
|
* })
|
|
* p1 = c.{@link Ext.container.Container#getComponent getComponent}('p1'); // not the same as {@link Ext#getCmp Ext.getCmp()}
|
|
* p2 = p1.{@link #ownerCt}.{@link Ext.container.Container#getComponent getComponent}('p2'); // reference via a sibling
|
|
*
|
|
* Also see {@link #id}, `{@link Ext.container.Container#query}`, `{@link Ext.container.Container#down}` and
|
|
* `{@link Ext.container.Container#child}`.
|
|
*
|
|
* **Note**: to access the container of an item see {@link #ownerCt}.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Container} ownerCt
|
|
* This Component's owner {@link Ext.container.Container Container} (is set automatically
|
|
* when this Component is added to a Container).
|
|
*
|
|
* *Important.* This is not a universal upwards navigation pointer. It indicates the Container which owns and manages
|
|
* this Component if any. There are other similar relationships such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the
|
|
* {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the
|
|
* {@link Ext.grid.column.Column column header} which activated the column menu.
|
|
*
|
|
* These differences are abstracted away by the {@link #up} method.
|
|
*
|
|
* **Note**: to access items within the Container see {@link #itemId}.
|
|
* @readonly
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} autoEl
|
|
* A tag name or {@link Ext.DomHelper DomHelper} spec used to create the {@link #getEl Element} which will
|
|
* encapsulate this Component.
|
|
*
|
|
* You do not normally need to specify this. For the base classes {@link Ext.Component} and
|
|
* {@link Ext.container.Container}, this defaults to **'div'**. The more complex Sencha classes use a more
|
|
* complex DOM structure specified by their own {@link #renderTpl}s.
|
|
*
|
|
* This is intended to allow the developer to create application-specific utility Components encapsulated by
|
|
* different DOM elements. Example usage:
|
|
*
|
|
* {
|
|
* xtype: 'component',
|
|
* autoEl: {
|
|
* tag: 'img',
|
|
* src: 'http://www.example.com/example.jpg'
|
|
* }
|
|
* }, {
|
|
* xtype: 'component',
|
|
* autoEl: {
|
|
* tag: 'blockquote',
|
|
* html: 'autoEl is cool!'
|
|
* }
|
|
* }, {
|
|
* xtype: 'container',
|
|
* autoEl: 'ul',
|
|
* cls: 'ux-unordered-list',
|
|
* items: {
|
|
* xtype: 'component',
|
|
* autoEl: 'li',
|
|
* html: 'First list item'
|
|
* }
|
|
* }
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.XTemplate/String/String[]} renderTpl
|
|
* An {@link Ext.XTemplate XTemplate} used to create the internal structure inside this Component's encapsulating
|
|
* {@link #getEl Element}.
|
|
*
|
|
* You do not normally need to specify this. For the base classes {@link Ext.Component} and
|
|
* {@link Ext.container.Container}, this defaults to **`null`** which means that they will be initially rendered
|
|
* with no internal structure; they render their {@link #getEl Element} empty. The more specialized Ext JS and Sencha Touch
|
|
* classes which use a more complex DOM structure, provide their own template definitions.
|
|
*
|
|
* This is intended to allow the developer to create application-specific utility Components with customized
|
|
* internal structure.
|
|
*
|
|
* Upon rendering, any created child elements may be automatically imported into object properties using the
|
|
* {@link #renderSelectors} and {@link #cfg-childEls} options.
|
|
* @protected
|
|
*/
|
|
renderTpl: '{%this.renderContent(out,values)%}',
|
|
|
|
/**
|
|
* @cfg {Object} renderData
|
|
*
|
|
* The data used by {@link #renderTpl} in addition to the following property values of the component:
|
|
*
|
|
* - id
|
|
* - ui
|
|
* - uiCls
|
|
* - baseCls
|
|
* - componentCls
|
|
* - frame
|
|
*
|
|
* See {@link #renderSelectors} and {@link #cfg-childEls} for usage examples.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} renderSelectors
|
|
* An object containing properties specifying {@link Ext.DomQuery DomQuery} selectors which identify child elements
|
|
* created by the render process.
|
|
*
|
|
* After the Component's internal structure is rendered according to the {@link #renderTpl}, this object is iterated through,
|
|
* and the found Elements are added as properties to the Component using the `renderSelector` property name.
|
|
*
|
|
* For example, a Component which renders a title and description into its element:
|
|
*
|
|
* Ext.create('Ext.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* renderTpl: [
|
|
* '<h1 class="title">{title}</h1>',
|
|
* '<p>{desc}</p>'
|
|
* ],
|
|
* renderData: {
|
|
* title: "Error",
|
|
* desc: "Something went wrong"
|
|
* },
|
|
* renderSelectors: {
|
|
* titleEl: 'h1.title',
|
|
* descEl: 'p'
|
|
* },
|
|
* listeners: {
|
|
* afterrender: function(cmp){
|
|
* // After rendering the component will have a titleEl and descEl properties
|
|
* cmp.titleEl.setStyle({color: "red"});
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* For a faster, but less flexible, alternative that achieves the same end result (properties for child elements on the
|
|
* Component after render), see {@link #cfg-childEls} and {@link #addChildEls}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object[]} childEls
|
|
* An array describing the child elements of the Component. Each member of the array
|
|
* is an object with these properties:
|
|
*
|
|
* - `name` - The property name on the Component for the child element.
|
|
* - `itemId` - The id to combine with the Component's id that is the id of the child element.
|
|
* - `id` - The id of the child element.
|
|
*
|
|
* If the array member is a string, it is equivalent to `{ name: m, itemId: m }`.
|
|
*
|
|
* For example, a Component which renders a title and body text:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* renderTpl: [
|
|
* '<h1 id="{id}-title">{title}</h1>',
|
|
* '<p>{msg}</p>',
|
|
* ],
|
|
* renderData: {
|
|
* title: "Error",
|
|
* msg: "Something went wrong"
|
|
* },
|
|
* childEls: ["title"],
|
|
* listeners: {
|
|
* afterrender: function(cmp){
|
|
* // After rendering the component will have a title property
|
|
* cmp.title.setStyle({color: "red"});
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* A more flexible, but somewhat slower, approach is {@link #renderSelectors}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} renderTo
|
|
* Specify the `id` of the element, a DOM element or an existing Element that this component will be rendered into.
|
|
*
|
|
* **Notes:**
|
|
*
|
|
* Do *not* use this option if the Component is to be a child item of a {@link Ext.container.Container Container}.
|
|
* It is the responsibility of the {@link Ext.container.Container Container}'s
|
|
* {@link Ext.container.Container#layout layout manager} to render and manage its child items.
|
|
*
|
|
* When using this config, a call to `render()` is not required.
|
|
*
|
|
* See also: {@link #method-render}.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} frame
|
|
* Specify as `true` to have the Component inject framing elements within the Component at render time to provide a
|
|
* graphical rounded frame around the Component content.
|
|
*
|
|
* This is only necessary when running on outdated, or non standard-compliant browsers such as Microsoft's Internet
|
|
* Explorer prior to version 9 which do not support rounded corners natively.
|
|
*
|
|
* The extra space taken up by this framing is available from the read only property {@link #frameSize}.
|
|
*/
|
|
|
|
/**
|
|
* @property {Object} frameSize
|
|
* @readonly
|
|
* Indicates the width of any framing elements which were added within the encapsulating
|
|
* element to provide graphical, rounded borders. See the {@link #frame} config. This
|
|
* property is `null` if the component is not framed.
|
|
*
|
|
* This is an object containing the frame width in pixels for all four sides of the
|
|
* Component containing the following properties:
|
|
*
|
|
* @property {Number} [frameSize.top=0] The width of the top framing element in pixels.
|
|
* @property {Number} [frameSize.right=0] The width of the right framing element in pixels.
|
|
* @property {Number} [frameSize.bottom=0] The width of the bottom framing element in pixels.
|
|
* @property {Number} [frameSize.left=0] The width of the left framing element in pixels.
|
|
* @property {Number} [frameSize.width=0] The total width of the left and right framing elements in pixels.
|
|
* @property {Number} [frameSize.height=0] The total height of the top and right bottom elements in pixels.
|
|
*/
|
|
frameSize: null,
|
|
|
|
/**
|
|
* @cfg {String/Object} componentLayout
|
|
* The sizing and positioning of a Component's internal Elements is the responsibility of the Component's layout
|
|
* manager which sizes a Component's internal structure in response to the Component being sized.
|
|
*
|
|
* Generally, developers will not use this configuration as all provided Components which need their internal
|
|
* elements sizing (Such as {@link Ext.form.field.Base input fields}) come with their own componentLayout managers.
|
|
*
|
|
* The {@link Ext.layout.container.Auto default layout manager} will be used on instances of the base Ext.Component
|
|
* class which simply sizes the Component's encapsulating element to the height and width specified in the
|
|
* {@link #setSize} method.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.XTemplate/Ext.Template/String/String[]} tpl
|
|
* An {@link Ext.Template}, {@link Ext.XTemplate} or an array of strings to form an Ext.XTemplate. Used in
|
|
* conjunction with the `{@link #data}` and `{@link #tplWriteMode}` configurations.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} data
|
|
* The initial set of data to apply to the `{@link #tpl}` to update the content area of the Component.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Widget} xtype
|
|
* This property provides a shorter alternative to creating objects than using a full
|
|
* class name. Using `xtype` is the most common way to define component instances,
|
|
* especially in a container. For example, the items in a form containing text fields
|
|
* could be created explicitly like so:
|
|
*
|
|
* items: [
|
|
* Ext.create('Ext.form.field.Text', {
|
|
* fieldLabel: 'Foo'
|
|
* }),
|
|
* Ext.create('Ext.form.field.Text', {
|
|
* fieldLabel: 'Bar'
|
|
* }),
|
|
* Ext.create('Ext.form.field.Number', {
|
|
* fieldLabel: 'Num'
|
|
* })
|
|
* ]
|
|
*
|
|
* But by using `xtype`, the above becomes:
|
|
*
|
|
* items: [
|
|
* {
|
|
* xtype: 'textfield',
|
|
* fieldLabel: 'Foo'
|
|
* },
|
|
* {
|
|
* xtype: 'textfield',
|
|
* fieldLabel: 'Bar'
|
|
* },
|
|
* {
|
|
* xtype: 'numberfield',
|
|
* fieldLabel: 'Num'
|
|
* }
|
|
* ]
|
|
*
|
|
* When the `xtype` is common to many items, {@link Ext.container.AbstractContainer#defaultType}
|
|
* is another way to specify the `xtype` for all items that don't have an explicit `xtype`:
|
|
*
|
|
* defaultType: 'textfield',
|
|
* items: [
|
|
* { fieldLabel: 'Foo' },
|
|
* { fieldLabel: 'Bar' },
|
|
* { fieldLabel: 'Num', xtype: 'numberfield' }
|
|
* ]
|
|
*
|
|
* Each member of the `items` array is now just a "configuration object". These objects
|
|
* are used to create and configure component instances. A configuration object can be
|
|
* manually used to instantiate a component using {@link Ext#widget}:
|
|
*
|
|
* var text1 = Ext.create('Ext.form.field.Text', {
|
|
* fieldLabel: 'Foo'
|
|
* });
|
|
*
|
|
* // or alternatively:
|
|
*
|
|
* var text1 = Ext.widget({
|
|
* xtype: 'textfield',
|
|
* fieldLabel: 'Foo'
|
|
* });
|
|
*
|
|
* This conversion of configuration objects into instantiated components is done when
|
|
* a container is created as part of its {Ext.container.AbstractContainer#initComponent}
|
|
* process. As part of the same process, the `items` array is converted from its raw
|
|
* array form into a {@link Ext.util.MixedCollection} instance.
|
|
*
|
|
* You can define your own `xtype` on a custom {@link Ext.Component component} by specifying
|
|
* the `xtype` property in {@link Ext#define}. For example:
|
|
*
|
|
* Ext.define('MyApp.PressMeButton', {
|
|
* extend: 'Ext.button.Button',
|
|
* xtype: 'pressmebutton',
|
|
* text: 'Press Me'
|
|
* });
|
|
*
|
|
* Care should be taken when naming an `xtype` in a custom component because there is
|
|
* a single, shared scope for all xtypes. Third part components should consider using
|
|
* a prefix to avoid collisions.
|
|
*
|
|
* Ext.define('Foo.form.CoolButton', {
|
|
* extend: 'Ext.button.Button',
|
|
* xtype: 'ux-coolbutton',
|
|
* text: 'Cool!'
|
|
* });
|
|
*
|
|
* See {@link Ext.enums.Widget} for list of all available xtypes.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} tplWriteMode
|
|
* The Ext.(X)Template method to use when updating the content area of the Component.
|
|
* See `{@link Ext.XTemplate#overwrite}` for information on default mode.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
tplWriteMode: 'overwrite',
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-component']
|
|
* The base CSS class to apply to this component's element. This will also be prepended to elements within this
|
|
* component like Panel's body will get a class `x-panel-body`. This means that if you create a subclass of Panel, and
|
|
* you want it to get all the Panels styling for the element and the body, you leave the `baseCls` `x-panel` and use
|
|
* `componentCls` to add specific styling for this component.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'component',
|
|
|
|
/**
|
|
* @cfg {String} componentCls
|
|
* CSS Class to be added to a components root level element to give distinction to it via styling.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [cls='']
|
|
* An optional extra CSS class that will be added to this component's Element. This can be useful
|
|
* for adding customized styles to the component or any of its children using standard CSS rules.
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [overCls='']
|
|
* An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element,
|
|
* and removed when the mouse moves out. This can be useful for adding customized 'active' or 'hover' styles to the
|
|
* component or any of its children using standard CSS rules.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [disabledCls='x-item-disabled']
|
|
* CSS class to add when the Component is disabled.
|
|
*/
|
|
disabledCls: Ext.baseCSSPrefix + 'item-disabled',
|
|
|
|
/**
|
|
* @cfg {String} ui
|
|
* A UI style for a component.
|
|
*/
|
|
ui: 'default',
|
|
|
|
/**
|
|
* @cfg {String[]} uiCls
|
|
* An array of of `classNames` which are currently applied to this component.
|
|
* @private
|
|
*/
|
|
uiCls: [],
|
|
|
|
/**
|
|
* @cfg {String/Object} style
|
|
* A custom style specification to be applied to this component's Element. Should be a valid argument to
|
|
* {@link Ext.Element#applyStyles}.
|
|
*
|
|
* new Ext.panel.Panel({
|
|
* title: 'Some Title',
|
|
* renderTo: Ext.getBody(),
|
|
* width: 400, height: 300,
|
|
* layout: 'form',
|
|
* items: [{
|
|
* xtype: 'textarea',
|
|
* style: {
|
|
* width: '95%',
|
|
* marginBottom: '10px'
|
|
* }
|
|
* },
|
|
* new Ext.button.Button({
|
|
* text: 'Send',
|
|
* minWidth: '100',
|
|
* style: {
|
|
* marginBottom: '10px'
|
|
* }
|
|
* })
|
|
* ]
|
|
* });
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} width
|
|
* The width of this component in pixels.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} height
|
|
* The height of this component in pixels.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String/Boolean} border
|
|
* Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can
|
|
* be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
|
|
*
|
|
* For components that have no border by default, setting this won't make the border appear by itself.
|
|
* You also need to specify border color and style:
|
|
*
|
|
* border: 5,
|
|
* style: {
|
|
* borderColor: 'red',
|
|
* borderStyle: 'solid'
|
|
* }
|
|
*
|
|
* To turn off the border, use `border: false`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} padding
|
|
* Specifies the padding for this component. The padding can be a single numeric value to apply to all sides or it
|
|
* can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} margin
|
|
* Specifies the margin for this component. The margin can be a single numeric value to apply to all sides or it can
|
|
* be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} hidden
|
|
* `true` to hide the component.
|
|
* @since 2.3.0
|
|
*/
|
|
hidden: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} disabled
|
|
* `true` to disable the component.
|
|
* @since 2.3.0
|
|
*/
|
|
disabled: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [draggable=false]
|
|
* Allows the component to be dragged.
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} draggable
|
|
* Indicates whether or not the component can be dragged.
|
|
* @readonly
|
|
*/
|
|
draggable: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} floating
|
|
* Create the Component as a floating and use absolute positioning.
|
|
*
|
|
* The z-index of floating Components is handled by a ZIndexManager. If you simply render a floating Component into the DOM, it will be managed
|
|
* by the global {@link Ext.WindowManager WindowManager}.
|
|
*
|
|
* If you include a floating Component as a child item of a Container, then upon render, Ext JS will seek an ancestor floating Component to house a new
|
|
* ZIndexManager instance to manage its descendant floaters. If no floating ancestor can be found, the global WindowManager will be used.
|
|
*
|
|
* When a floating Component which has a ZindexManager managing descendant floaters is destroyed, those descendant floaters will also be destroyed.
|
|
*/
|
|
floating: false,
|
|
|
|
/**
|
|
* @cfg {String} hideMode
|
|
* A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:
|
|
*
|
|
* - `'display'` : The Component will be hidden using the `display: none` style.
|
|
* - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.
|
|
* - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area of the document.
|
|
* This is useful when a hidden Component must maintain measurable dimensions. Hiding using `display` results in a
|
|
* Component having zero dimensions.
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
hideMode: 'display',
|
|
|
|
/**
|
|
* @cfg {String} contentEl
|
|
* Specify an existing HTML element, or the `id` of an existing HTML element to use as the content for this component.
|
|
*
|
|
* This config option is used to take an existing HTML element and place it in the layout element of a new component
|
|
* (it simply moves the specified DOM element _after the Component is rendered_ to use as the content.
|
|
*
|
|
* **Notes:**
|
|
*
|
|
* The specified HTML element is appended to the layout element of the component _after any configured
|
|
* {@link #html HTML} has been inserted_, and so the document will not contain this element at the time
|
|
* the {@link #event-render} event is fired.
|
|
*
|
|
* The specified HTML element used will not participate in any **`{@link Ext.container.Container#layout layout}`**
|
|
* scheme that the Component may use. It is just HTML. Layouts operate on child
|
|
* **`{@link Ext.container.Container#cfg-items items}`**.
|
|
*
|
|
* Add either the `x-hidden` or the `x-hide-display` CSS class to prevent a brief flicker of the content before it
|
|
* is rendered to the panel.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} [html='']
|
|
* An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the layout element content.
|
|
* The HTML content is added after the component is rendered, so the document will not contain this HTML at the time
|
|
* the {@link #event-render} event is fired. This content is inserted into the body _before_ any configured {@link #contentEl}
|
|
* is appended.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} minHeight
|
|
* The minimum value in pixels which this Component will set its height to.
|
|
*
|
|
* **Warning:** This will override any size management applied by layout managers.
|
|
*/
|
|
/**
|
|
* @cfg {Number} minWidth
|
|
* The minimum value in pixels which this Component will set its width to.
|
|
*
|
|
* **Warning:** This will override any size management applied by layout managers.
|
|
*/
|
|
/**
|
|
* @cfg {Number} maxHeight
|
|
* The maximum value in pixels which this Component will set its height to.
|
|
*
|
|
* **Warning:** This will override any size management applied by layout managers.
|
|
*/
|
|
/**
|
|
* @cfg {Number} maxWidth
|
|
* The maximum value in pixels which this Component will set its width to.
|
|
*
|
|
* **Warning:** This will override any size management applied by layout managers.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.ComponentLoader/Object} loader
|
|
* A configuration object or an instance of a {@link Ext.ComponentLoader} to load remote content
|
|
* for this Component.
|
|
*
|
|
* Ext.create('Ext.Component', {
|
|
* loader: {
|
|
* url: 'content.html',
|
|
* autoLoad: true
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.ComponentLoader/Object/String/Boolean} autoLoad
|
|
* An alias for {@link #loader} config which also allows to specify just a string which will be
|
|
* used as the url that's automatically loaded:
|
|
*
|
|
* Ext.create('Ext.Component', {
|
|
* autoLoad: 'content.html',
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* The above is the same as:
|
|
*
|
|
* Ext.create('Ext.Component', {
|
|
* loader: {
|
|
* url: 'content.html',
|
|
* autoLoad: true
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* Don't use it together with {@link #loader} config.
|
|
*
|
|
* @deprecated 4.1.1 Use {@link #loader} config instead.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} autoShow
|
|
* `true` to automatically show the component upon creation. This config option may only be used for
|
|
* {@link #floating} components or components that use {@link #autoRender}.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
autoShow: false,
|
|
|
|
/**
|
|
* @cfg {Boolean/String/HTMLElement/Ext.Element} autoRender
|
|
* This config is intended mainly for non-{@link #cfg-floating} Components which may or may not be shown. Instead of using
|
|
* {@link #renderTo} in the configuration, and rendering upon construction, this allows a Component to render itself
|
|
* upon first _{@link Ext.Component#method-show show}_. If {@link #cfg-floating} is `true`, the value of this config is omitted as if it is `true`.
|
|
*
|
|
* Specify as `true` to have this Component render to the document body upon first show.
|
|
*
|
|
* Specify as an element, or the ID of an element to have this Component render to a specific element upon first
|
|
* show.
|
|
*/
|
|
autoRender: false,
|
|
|
|
// @private
|
|
allowDomMove: true,
|
|
|
|
/**
|
|
* @cfg {Ext.AbstractPlugin[]/Ext.AbstractPlugin/Object[]/Object/Ext.enums.Plugin[]/Ext.enums.Plugin} plugins
|
|
* An array of plugins to be added to this component. Can also be just a single plugin instead of array.
|
|
*
|
|
* Plugins provide custom functionality for a component. The only requirement for
|
|
* a valid plugin is that it contain an `init` method that accepts a reference of type Ext.Component. When a component
|
|
* is created, if any plugins are available, the component will call the init method on each plugin, passing a
|
|
* reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide
|
|
* its functionality.
|
|
*
|
|
* Plugins can be added to component by either directly referencing the plugin instance:
|
|
*
|
|
* plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})],
|
|
*
|
|
* By using config object with ptype:
|
|
*
|
|
* plugins: [{ptype: 'cellediting', clicksToEdit: 1}],
|
|
*
|
|
* Or with just a ptype:
|
|
*
|
|
* plugins: ['cellediting', 'gridviewdragdrop'],
|
|
*
|
|
* See {@link Ext.enums.Plugin} for list of all ptypes.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} rendered
|
|
* Indicates whether or not the component has been rendered.
|
|
* @readonly
|
|
* @since 1.1.0
|
|
*/
|
|
rendered: false,
|
|
|
|
/**
|
|
* @property {Number} componentLayoutCounter
|
|
* @private
|
|
* The number of component layout calls made on this object.
|
|
*/
|
|
componentLayoutCounter: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean/Number} [shrinkWrap=2]
|
|
*
|
|
* If this property is a number, it is interpreted as follows:
|
|
*
|
|
* - 0: Neither width nor height depend on content. This is equivalent to `false`.
|
|
* - 1: Width depends on content (shrink wraps), but height does not.
|
|
* - 2: Height depends on content (shrink wraps), but width does not. The default.
|
|
* - 3: Both width and height depend on content (shrink wrap). This is equivalent to `true`.
|
|
*
|
|
* In CSS terms, shrink-wrap width is analogous to an inline-block element as opposed
|
|
* to a block-level element. Some container layouts always shrink-wrap their children,
|
|
* effectively ignoring this property (e.g., {@link Ext.layout.container.HBox},
|
|
* {@link Ext.layout.container.VBox}, {@link Ext.layout.component.Dock}).
|
|
*/
|
|
shrinkWrap: 2,
|
|
|
|
weight: 0,
|
|
|
|
/**
|
|
* @property {Boolean} maskOnDisable
|
|
* This is an internal flag that you use when creating custom components. By default this is set to `true` which means
|
|
* that every component gets a mask when it's disabled. Components like FieldContainer, FieldSet, Field, Button, Tab
|
|
* override this property to `false` since they want to implement custom disable logic.
|
|
*/
|
|
maskOnDisable: true,
|
|
|
|
/**
|
|
* @property {Boolean} [_isLayoutRoot=false]
|
|
* Setting this property to `true` causes the {@link #isLayoutRoot} method to return
|
|
* `true` and stop the search for the top-most component for a layout.
|
|
* @protected
|
|
*/
|
|
_isLayoutRoot: false,
|
|
|
|
/**
|
|
* @property {String} [contentPaddingProperty='padding']
|
|
* The name of the padding property that is used by the layout to manage
|
|
* padding. See {@link Ext.layout.container.Auto#managePadding managePadding}
|
|
*/
|
|
contentPaddingProperty: 'padding',
|
|
|
|
horizontalPosProp: 'left',
|
|
|
|
// private
|
|
borderBoxCls: Ext.baseCSSPrefix + 'border-box',
|
|
|
|
/**
|
|
* Creates new Component.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor : function(config) {
|
|
var me = this,
|
|
i, len, xhooks;
|
|
|
|
if (config) {
|
|
Ext.apply(me, config);
|
|
|
|
xhooks = me.xhooks;
|
|
if (xhooks) {
|
|
delete me.xhooks;
|
|
Ext.override(me, xhooks);
|
|
}
|
|
} else {
|
|
config = {};
|
|
}
|
|
|
|
me.initialConfig = config;
|
|
|
|
me.mixins.elementCt.constructor.call(me);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeactivate
|
|
* Fires before a Component has been visually activated. Returning `false` from an event listener can prevent
|
|
* the activate from occurring.
|
|
* @param {Ext.Component} this
|
|
*/
|
|
'beforeactivate',
|
|
/**
|
|
* @event activate
|
|
* Fires after a Component has been visually activated.
|
|
* @param {Ext.Component} this
|
|
*/
|
|
'activate',
|
|
/**
|
|
* @event beforedeactivate
|
|
* Fires before a Component has been visually deactivated. Returning `false` from an event listener can
|
|
* prevent the deactivate from occurring.
|
|
* @param {Ext.Component} this
|
|
*/
|
|
'beforedeactivate',
|
|
/**
|
|
* @event deactivate
|
|
* Fires after a Component has been visually deactivated.
|
|
* @param {Ext.Component} this
|
|
*/
|
|
'deactivate',
|
|
/**
|
|
* @event added
|
|
* Fires after a Component had been added to a Container.
|
|
* @param {Ext.Component} this
|
|
* @param {Ext.container.Container} container Parent Container
|
|
* @param {Number} pos position of Component
|
|
* @since 3.4.0
|
|
*/
|
|
'added',
|
|
/**
|
|
* @event disable
|
|
* Fires after the component is disabled.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'disable',
|
|
/**
|
|
* @event enable
|
|
* Fires after the component is enabled.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'enable',
|
|
/**
|
|
* @event beforeshow
|
|
* Fires before the component is shown when calling the {@link Ext.Component#method-show show} method. Return `false` from an event
|
|
* handler to stop the show.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'beforeshow',
|
|
/**
|
|
* @event show
|
|
* Fires after the component is shown when calling the {@link Ext.Component#method-show show} method.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'show',
|
|
/**
|
|
* @event beforehide
|
|
* Fires before the component is hidden when calling the {@link Ext.Component#method-hide hide} method. Return `false` from an event
|
|
* handler to stop the hide.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'beforehide',
|
|
/**
|
|
* @event hide
|
|
* Fires after the component is hidden. Fires after the component is hidden when calling the {@link Ext.Component#method-hide hide}
|
|
* method.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'hide',
|
|
/**
|
|
* @event removed
|
|
* Fires when a component is removed from an Ext.container.Container
|
|
* @param {Ext.Component} this
|
|
* @param {Ext.container.Container} ownerCt Container which holds the component
|
|
* @since 3.4.0
|
|
*/
|
|
'removed',
|
|
/**
|
|
* @event beforerender
|
|
* Fires before the component is {@link #rendered}. Return `false` from an event handler to stop the
|
|
* {@link #method-render}.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'beforerender',
|
|
/**
|
|
* @event render
|
|
* Fires after the component markup is {@link #rendered}.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'render',
|
|
/**
|
|
* @event afterrender
|
|
* Fires after the component rendering is finished.
|
|
*
|
|
* The `afterrender` event is fired after this Component has been {@link #rendered}, been postprocessed by any
|
|
* `afterRender` method defined for the Component.
|
|
* @param {Ext.Component} this
|
|
* @since 3.4.0
|
|
*/
|
|
'afterrender',
|
|
/**
|
|
* @event boxready
|
|
* Fires *one time* - after the component has been laid out for the first time at its initial size.
|
|
* @param {Ext.Component} this
|
|
* @param {Number} width The initial width.
|
|
* @param {Number} height The initial height.
|
|
*/
|
|
'boxready',
|
|
/**
|
|
* @event beforedestroy
|
|
* Fires before the component is {@link #method-destroy}ed. Return `false` from an event handler to stop the
|
|
* {@link #method-destroy}.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'beforedestroy',
|
|
/**
|
|
* @event destroy
|
|
* Fires after the component is {@link #method-destroy}ed.
|
|
* @param {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
'destroy',
|
|
/**
|
|
* @event resize
|
|
* Fires after the component is resized. Note that this does *not* fire when the component is first laid out at its initial
|
|
* size. To hook that point in the life cycle, use the {@link #boxready} event.
|
|
* @param {Ext.Component} this
|
|
* @param {Number} width The new width that was set.
|
|
* @param {Number} height The new height that was set.
|
|
* @param {Number} oldWidth The previous width.
|
|
* @param {Number} oldHeight The previous height.
|
|
*/
|
|
'resize',
|
|
/**
|
|
* @event move
|
|
* Fires after the component is moved.
|
|
* @param {Ext.Component} this
|
|
* @param {Number} x The new x position.
|
|
* @param {Number} y The new y position.
|
|
*/
|
|
'move',
|
|
/**
|
|
* @event focus
|
|
* Fires when this Component receives focus.
|
|
* @param {Ext.Component} this
|
|
* @param {Ext.EventObject} The focus event.
|
|
*/
|
|
'focus',
|
|
/**
|
|
* @event blur
|
|
* Fires when this Component loses focus.
|
|
* @param {Ext.Component} this
|
|
* @param {Ext.EventObject} The blur event.
|
|
*/
|
|
'blur'
|
|
);
|
|
|
|
me.getId();
|
|
|
|
me.setupProtoEl();
|
|
|
|
// initComponent, beforeRender, or event handlers may have set the style or `cls` property since the `protoEl` was set up
|
|
// so we must apply styles and classes here too.
|
|
if (me.cls) {
|
|
me.initialCls = me.cls;
|
|
me.protoEl.addCls(me.cls);
|
|
}
|
|
if (me.style) {
|
|
me.initialStyle = me.style;
|
|
me.protoEl.setStyle(me.style);
|
|
}
|
|
|
|
me.renderData = me.renderData || {};
|
|
me.renderSelectors = me.renderSelectors || {};
|
|
|
|
if (me.plugins) {
|
|
me.plugins = me.constructPlugins();
|
|
}
|
|
|
|
// we need this before we call initComponent
|
|
if (!me.hasListeners) {
|
|
me.hasListeners = new me.HasListeners();
|
|
}
|
|
|
|
me.initComponent();
|
|
|
|
// ititComponent gets a chance to change the id property before registering
|
|
Ext.ComponentManager.register(me);
|
|
|
|
// Don't pass the config so that it is not applied to 'this' again
|
|
me.mixins.observable.constructor.call(me);
|
|
me.mixins.state.constructor.call(me, config);
|
|
|
|
// Save state on resize.
|
|
this.addStateEvents('resize');
|
|
|
|
// Move this into Observable?
|
|
if (me.plugins) {
|
|
for (i = 0, len = me.plugins.length; i < len; i++) {
|
|
me.plugins[i] = me.initPlugin(me.plugins[i]);
|
|
}
|
|
}
|
|
|
|
me.loader = me.getLoader();
|
|
|
|
if (me.renderTo) {
|
|
me.render(me.renderTo);
|
|
// EXTJSIV-1935 - should be a way to do afterShow or something, but that
|
|
// won't work. Likewise, rendering hidden and then showing (w/autoShow) has
|
|
// implications to afterRender so we cannot do that.
|
|
}
|
|
|
|
// Auto show only works unilaterally on *uncontained* Components.
|
|
// If contained, then it is the Container's responsibility to do the showing at next layout time.
|
|
if (me.autoShow && !me.isContained) {
|
|
me.show();
|
|
}
|
|
|
|
},
|
|
|
|
initComponent: function () {
|
|
// This is called again here to allow derived classes to add plugin configs to the
|
|
// plugins array before calling down to this, the base initComponent.
|
|
this.plugins = this.constructPlugins();
|
|
|
|
// this will properly (ignore or) constrain the configured width/height to their
|
|
// min/max values for consistency.
|
|
this.setSize(this.width, this.height);
|
|
},
|
|
|
|
/**
|
|
* The supplied default state gathering method for the AbstractComponent class.
|
|
*
|
|
* This method returns dimension settings such as `flex`, `anchor`, `width` and `height` along with `collapsed`
|
|
* state.
|
|
*
|
|
* Subclasses which implement more complex state should call the superclass's implementation, and apply their state
|
|
* to the result if this basic state is to be saved.
|
|
*
|
|
* Note that Component state will only be saved if the Component has a {@link #stateId} and there as a StateProvider
|
|
* configured for the document.
|
|
*
|
|
* @return {Object}
|
|
*/
|
|
getState: function() {
|
|
var me = this,
|
|
state = null,
|
|
sizeModel = me.getSizeModel();
|
|
|
|
if (sizeModel.width.configured) {
|
|
state = me.addPropertyToState(state, 'width');
|
|
}
|
|
if (sizeModel.height.configured) {
|
|
state = me.addPropertyToState(state, 'height');
|
|
}
|
|
|
|
return state;
|
|
},
|
|
|
|
/**
|
|
* Save a property to the given state object if it is not its default or configured
|
|
* value.
|
|
*
|
|
* @param {Object} state The state object.
|
|
* @param {String} propName The name of the property on this object to save.
|
|
* @param {String} [value] The value of the state property (defaults to `this[propName]`).
|
|
* @return {Boolean} The state object or a new object if state was `null` and the property
|
|
* was saved.
|
|
* @protected
|
|
*/
|
|
addPropertyToState: function (state, propName, value) {
|
|
var me = this,
|
|
len = arguments.length;
|
|
|
|
// If the property is inherited, it is a default and we don't want to save it to
|
|
// the state, however if we explicitly specify a value, always save it
|
|
if (len == 3 || me.hasOwnProperty(propName)) {
|
|
if (len < 3) {
|
|
value = me[propName];
|
|
}
|
|
|
|
// If the property has the same value as was initially configured, again, we
|
|
// don't want to save it.
|
|
if (value !== me.initialConfig[propName]) {
|
|
(state || (state = {}))[propName] = value;
|
|
}
|
|
}
|
|
|
|
return state;
|
|
},
|
|
|
|
show: Ext.emptyFn,
|
|
|
|
animate: function(animObj) {
|
|
var me = this,
|
|
hasToWidth,
|
|
hasToHeight,
|
|
toHeight,
|
|
toWidth,
|
|
to,
|
|
clearWidth,
|
|
clearHeight,
|
|
curWidth, w, curHeight, h, isExpanding,
|
|
wasConstrained,
|
|
wasConstrainedHeader,
|
|
passedCallback,
|
|
oldOverflow;
|
|
|
|
animObj = animObj || {};
|
|
to = animObj.to || {};
|
|
|
|
if (Ext.fx.Manager.hasFxBlock(me.id)) {
|
|
return me;
|
|
}
|
|
|
|
hasToWidth = Ext.isDefined(to.width);
|
|
if (hasToWidth) {
|
|
toWidth = Ext.Number.constrain(to.width, me.minWidth, me.maxWidth);
|
|
}
|
|
|
|
hasToHeight = Ext.isDefined(to.height);
|
|
if (hasToHeight) {
|
|
toHeight = Ext.Number.constrain(to.height, me.minHeight, me.maxHeight);
|
|
}
|
|
|
|
// Special processing for animating Component dimensions.
|
|
if (!animObj.dynamic && (hasToWidth || hasToHeight)) {
|
|
curWidth = (animObj.from ? animObj.from.width : undefined) || me.getWidth();
|
|
w = curWidth;
|
|
curHeight = (animObj.from ? animObj.from.height : undefined) || me.getHeight();
|
|
h = curHeight;
|
|
isExpanding = false;
|
|
|
|
if (hasToHeight && toHeight > curHeight) {
|
|
h = toHeight;
|
|
isExpanding = true;
|
|
}
|
|
if (hasToWidth && toWidth > curWidth) {
|
|
w = toWidth;
|
|
isExpanding = true;
|
|
}
|
|
|
|
// During animated sizing, overflow has to be hidden to clip expanded content
|
|
if (hasToHeight || hasToWidth) {
|
|
oldOverflow = me.el.getStyle('overtflow');
|
|
if (oldOverflow !== 'hidden') {
|
|
me.el.setStyle('overflow', 'hidden');
|
|
}
|
|
}
|
|
|
|
// If any dimensions are being increased, we must resize the internal structure
|
|
// of the Component, but then clip it by sizing its encapsulating element back to original dimensions.
|
|
// The animation will then progressively reveal the larger content.
|
|
if (isExpanding) {
|
|
clearWidth = !Ext.isNumber(me.width);
|
|
clearHeight = !Ext.isNumber(me.height);
|
|
|
|
// Lay out this component at the new, larger size to get the internals correctly laid out.
|
|
// Then size the encapsulating **Element** back down to size.
|
|
// We will then just animate the element to reveal the correctly laid out content.
|
|
me.setSize(w, h);
|
|
me.el.setSize(curWidth, curHeight);
|
|
|
|
if (clearWidth) {
|
|
delete me.width;
|
|
}
|
|
if (clearHeight) {
|
|
delete me.height;
|
|
}
|
|
}
|
|
if (hasToWidth) {
|
|
to.width = toWidth;
|
|
}
|
|
|
|
if (hasToHeight) {
|
|
to.height = toHeight;
|
|
}
|
|
}
|
|
|
|
// No constraining during the animate - the "to" size has already been calculated with respect to all settings.
|
|
// Arrange to reinstate any constraining after the animation has completed
|
|
wasConstrained = me.constrain;
|
|
wasConstrainedHeader = me.constrainHeader;
|
|
if (wasConstrained || wasConstrainedHeader) {
|
|
me.constrain = me.constrainHeader = false;
|
|
passedCallback = animObj.callback;
|
|
animObj.callback = function() {
|
|
me.constrain = wasConstrained;
|
|
me.constrainHeader = wasConstrainedHeader;
|
|
// Call the original callback if any
|
|
if (passedCallback) {
|
|
passedCallback.call(animObj.scope||me, arguments);
|
|
}
|
|
if (oldOverflow !== 'hidden') {
|
|
me.el.setStyle('overflow', oldOverflow);
|
|
}
|
|
};
|
|
}
|
|
return me.mixins.animate.animate.apply(me, arguments);
|
|
},
|
|
|
|
setHiddenState: function(hidden){
|
|
var hierarchyState = this.getHierarchyState();
|
|
|
|
this.hidden = hidden;
|
|
if (hidden) {
|
|
hierarchyState.hidden = true;
|
|
} else {
|
|
delete hierarchyState.hidden;
|
|
}
|
|
},
|
|
|
|
onHide: function() {
|
|
// Only lay out if there is an owning layout which might be affected by the hide
|
|
if (this.ownerLayout) {
|
|
this.updateLayout({ isRoot: false });
|
|
}
|
|
},
|
|
|
|
onShow : function() {
|
|
this.updateLayout({ isRoot: false });
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @param {String/Object} ptype string or config object containing a ptype property.
|
|
*
|
|
* Constructs a plugin according to the passed config object/ptype string.
|
|
*
|
|
* Ensures that the constructed plugin always has a `cmp` reference back to this component.
|
|
* The setting up of this is done in PluginManager. The PluginManager ensures that a reference to this
|
|
* component is passed to the constructor. It also ensures that the plugin's `setCmp` method (if any) is called.
|
|
*/
|
|
constructPlugin: function(plugin) {
|
|
var me = this;
|
|
|
|
// ptype only, pass as the defultType
|
|
if (typeof plugin == 'string') {
|
|
plugin = Ext.PluginManager.create({}, plugin, me);
|
|
}
|
|
// Object (either config with ptype or an instantiated plugin)
|
|
else {
|
|
plugin = Ext.PluginManager.create(plugin, null, me);
|
|
}
|
|
return plugin;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns an array of fully constructed plugin instances. This converts any configs into their
|
|
* appropriate instances.
|
|
*
|
|
* It does not mutate the plugins array. It creates a new array.
|
|
*/
|
|
constructPlugins: function() {
|
|
var me = this,
|
|
plugins = me.plugins,
|
|
result, i, len;
|
|
|
|
if (plugins) {
|
|
result = [];
|
|
if (!Ext.isArray(plugins)) {
|
|
plugins = [ plugins ];
|
|
}
|
|
for (i = 0, len = plugins.length; i < len; i++) {
|
|
// this just returns already-constructed plugin instances...
|
|
result[i] = me.constructPlugin(plugins[i]);
|
|
}
|
|
}
|
|
|
|
me.pluginsInitialized = true;
|
|
return result;
|
|
},
|
|
|
|
// @private
|
|
initPlugin : function(plugin) {
|
|
plugin.init(this);
|
|
|
|
return plugin;
|
|
},
|
|
|
|
// @private
|
|
// Adds a plugin. May be called at any time in the component's lifecycle.
|
|
addPlugin: function(plugin) {
|
|
var me = this;
|
|
|
|
plugin = me.constructPlugin(plugin);
|
|
if (me.plugins) {
|
|
me.plugins.push(plugin);
|
|
} else {
|
|
me.plugins = [ plugin ];
|
|
}
|
|
if (me.pluginsInitialized) {
|
|
me.initPlugin(plugin);
|
|
}
|
|
return plugin;
|
|
},
|
|
|
|
removePlugin: function(plugin) {
|
|
Ext.Array.remove(this.plugins, plugin);
|
|
plugin.destroy();
|
|
},
|
|
|
|
/**
|
|
* Retrieves plugin from this component's collection by its `ptype`.
|
|
* @param {String} ptype The Plugin's ptype as specified by the class's `alias` configuration.
|
|
* @return {Ext.AbstractPlugin} plugin instance.
|
|
*/
|
|
findPlugin: function(ptype) {
|
|
var i,
|
|
plugins = this.plugins,
|
|
ln = plugins && plugins.length;
|
|
for (i = 0; i < ln; i++) {
|
|
if (plugins[i].ptype === ptype) {
|
|
return plugins[i];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Retrieves a plugin from this component's collection by its `pluginId`.
|
|
* @param {String} pluginId
|
|
* @return {Ext.AbstractPlugin} plugin instance.
|
|
*/
|
|
getPlugin: function(pluginId) {
|
|
var i,
|
|
plugins = this.plugins,
|
|
ln = plugins && plugins.length;
|
|
for (i = 0; i < ln; i++) {
|
|
if (plugins[i].pluginId === pluginId) {
|
|
return plugins[i];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Occurs before componentLayout is run. In previous releases, this method could
|
|
* return `false` to prevent its layout but that is not supported in Ext JS 4.1 or
|
|
* higher. This method is simply a notification of the impending layout to give the
|
|
* component a chance to adjust the DOM. Ideally, DOM reads should be avoided at this
|
|
* time to reduce expensive document reflows.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
beforeLayout: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* Injected as an override by Ext.Aria.initialize
|
|
*/
|
|
updateAria: Ext.emptyFn,
|
|
|
|
/**
|
|
* Called by Component#doAutoRender
|
|
*
|
|
* Register a Container configured `floating: true` with this Component's {@link Ext.ZIndexManager ZIndexManager}.
|
|
*
|
|
* Components added in this way will not participate in any layout, but will be rendered
|
|
* upon first show in the way that {@link Ext.window.Window Window}s are.
|
|
*/
|
|
registerFloatingItem: function(cmp) {
|
|
var me = this;
|
|
if (!me.floatingDescendants) {
|
|
me.floatingDescendants = new Ext.ZIndexManager(me);
|
|
}
|
|
me.floatingDescendants.register(cmp);
|
|
},
|
|
|
|
unregisterFloatingItem: function(cmp) {
|
|
var me = this;
|
|
if (me.floatingDescendants) {
|
|
me.floatingDescendants.unregister(cmp);
|
|
}
|
|
},
|
|
|
|
layoutSuspendCount: 0,
|
|
|
|
suspendLayouts: function () {
|
|
var me = this;
|
|
if (!me.rendered) {
|
|
return;
|
|
}
|
|
if (++me.layoutSuspendCount == 1) {
|
|
me.suspendLayout = true;
|
|
}
|
|
},
|
|
|
|
resumeLayouts: function (flushOptions) {
|
|
var me = this;
|
|
if (!me.rendered) {
|
|
return;
|
|
}
|
|
if (! --me.layoutSuspendCount) {
|
|
me.suspendLayout = false;
|
|
if (flushOptions && !me.isLayoutSuspended()) {
|
|
me.updateLayout(flushOptions);
|
|
}
|
|
}
|
|
},
|
|
|
|
setupProtoEl: function() {
|
|
var cls = this.initCls();
|
|
|
|
this.protoEl = new Ext.util.ProtoElement({
|
|
cls: cls.join(' ') // in case any of the parts have multiple classes
|
|
});
|
|
},
|
|
|
|
initCls: function() {
|
|
var me = this,
|
|
cls = [ me.baseCls, me.getComponentLayout().targetCls ];
|
|
|
|
if (Ext.isDefined(me.cmpCls)) {
|
|
if (Ext.isDefined(Ext.global.console)) {
|
|
Ext.global.console.warn('Ext.Component: cmpCls has been deprecated. Please use componentCls.');
|
|
}
|
|
me.componentCls = me.cmpCls;
|
|
delete me.cmpCls;
|
|
}
|
|
|
|
if (me.componentCls) {
|
|
cls.push(me.componentCls);
|
|
} else {
|
|
me.componentCls = me.baseCls;
|
|
}
|
|
|
|
return cls;
|
|
},
|
|
|
|
/**
|
|
* Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any
|
|
* `uiCls` set on the component and rename them so they include the new UI.
|
|
* @param {String} ui The new UI for the component.
|
|
*/
|
|
setUI: function(ui) {
|
|
var me = this,
|
|
uiCls = me.uiCls,
|
|
activeUI = me.activeUI,
|
|
classes;
|
|
|
|
if (ui === activeUI) {
|
|
// The ui hasn't changed
|
|
return;
|
|
}
|
|
|
|
// activeUI will only be set if setUI has been called before. If it hasn't there's no need to remove anything
|
|
if (activeUI) {
|
|
classes = me.removeClsWithUI(uiCls, true);
|
|
|
|
if (classes.length) {
|
|
me.removeCls(classes);
|
|
}
|
|
|
|
// Remove the UI from the element
|
|
me.removeUIFromElement();
|
|
}
|
|
else {
|
|
// We need uiCls to be empty otherwise our call to addClsWithUI won't do anything
|
|
me.uiCls = [];
|
|
}
|
|
|
|
// Set the UI
|
|
me.ui = ui;
|
|
|
|
// After the first call to setUI the values ui and activeUI should track each other but initially we need some
|
|
// way to tell whether the ui has really been set.
|
|
me.activeUI = ui;
|
|
|
|
// Add the new UI to the element
|
|
me.addUIToElement();
|
|
|
|
classes = me.addClsWithUI(uiCls, true);
|
|
|
|
if (classes.length) {
|
|
me.addCls(classes);
|
|
}
|
|
|
|
// Changing the ui can lead to significant changes to a component's appearance, so the layout needs to be
|
|
// updated. Internally most calls to setUI are pre-render. Buttons are a notable exception as setScale changes
|
|
// the ui and often requires the layout to be updated.
|
|
if (me.rendered) {
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds a `cls` to the `uiCls` array, which will also call {@link #addUIClsToElement} and adds to all elements of this
|
|
* component.
|
|
* @param {String/String[]} classes A string or an array of strings to add to the `uiCls`.
|
|
* @param {Object} skip (Boolean) skip `true` to skip adding it to the class and do it later (via the return).
|
|
*/
|
|
addClsWithUI: function(classes, skip) {
|
|
var me = this,
|
|
clsArray = [],
|
|
i = 0,
|
|
uiCls = me.uiCls = Ext.Array.clone(me.uiCls),
|
|
activeUI = me.activeUI,
|
|
length,
|
|
cls;
|
|
|
|
if (typeof classes === "string") {
|
|
classes = (classes.indexOf(' ') < 0) ? [classes] : Ext.String.splitWords(classes);
|
|
}
|
|
|
|
length = classes.length;
|
|
|
|
for (; i < length; i++) {
|
|
cls = classes[i];
|
|
|
|
if (cls && !me.hasUICls(cls)) {
|
|
uiCls.push(cls);
|
|
|
|
// We can skip this bit if there isn't an activeUI because we'll be called again from setUI
|
|
if (activeUI) {
|
|
clsArray = clsArray.concat(me.addUIClsToElement(cls));
|
|
}
|
|
}
|
|
}
|
|
|
|
if (skip !== true && activeUI) {
|
|
me.addCls(clsArray);
|
|
}
|
|
|
|
return clsArray;
|
|
},
|
|
|
|
/**
|
|
* Removes a `cls` to the `uiCls` array, which will also call {@link #removeUIClsFromElement} and removes it from all
|
|
* elements of this component.
|
|
* @param {String/String[]} cls A string or an array of strings to remove to the `uiCls`.
|
|
*/
|
|
removeClsWithUI: function(classes, skip) {
|
|
var me = this,
|
|
clsArray = [],
|
|
i = 0,
|
|
extArray = Ext.Array,
|
|
remove = extArray.remove,
|
|
uiCls = me.uiCls = extArray.clone(me.uiCls),
|
|
activeUI = me.activeUI,
|
|
length, cls;
|
|
|
|
if (typeof classes === "string") {
|
|
classes = (classes.indexOf(' ') < 0) ? [classes] : Ext.String.splitWords(classes);
|
|
}
|
|
|
|
length = classes.length;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
cls = classes[i];
|
|
|
|
if (cls && me.hasUICls(cls)) {
|
|
remove(uiCls, cls);
|
|
|
|
//If there's no activeUI then there's nothing to remove
|
|
if (activeUI) {
|
|
clsArray = clsArray.concat(me.removeUIClsFromElement(cls));
|
|
}
|
|
}
|
|
}
|
|
|
|
if (skip !== true && activeUI) {
|
|
me.removeCls(clsArray);
|
|
}
|
|
|
|
return clsArray;
|
|
},
|
|
|
|
/**
|
|
* Checks if there is currently a specified `uiCls`.
|
|
* @param {String} cls The `cls` to check.
|
|
*/
|
|
hasUICls: function(cls) {
|
|
var me = this,
|
|
uiCls = me.uiCls || [];
|
|
|
|
return Ext.Array.contains(uiCls, cls);
|
|
},
|
|
|
|
frameElementsArray: ['tl', 'tc', 'tr', 'ml', 'mc', 'mr', 'bl', 'bc', 'br'],
|
|
|
|
/**
|
|
* Method which adds a specified UI + `uiCls` to the components element. Can be overridden to remove the UI from more
|
|
* than just the components element.
|
|
* @param {String} ui The UI to remove from the element.
|
|
*/
|
|
addUIClsToElement: function(cls) {
|
|
var me = this,
|
|
baseClsUi = me.baseCls + '-' + me.ui + '-' + cls,
|
|
result = [Ext.baseCSSPrefix + cls, me.baseCls + '-' + cls, baseClsUi],
|
|
frameElementsArray, frameElementsLength, i, el, frameElement;
|
|
|
|
if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
|
|
// define each element of the frame
|
|
frameElementsArray = me.frameElementsArray;
|
|
frameElementsLength = frameElementsArray.length;
|
|
|
|
// loop through each of them, and if they are defined add the ui
|
|
for (i = 0; i < frameElementsLength; i++) {
|
|
frameElement = frameElementsArray[i];
|
|
el = me['frame' + frameElement.toUpperCase()];
|
|
|
|
if (el) {
|
|
el.addCls(baseClsUi + '-' + frameElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Method which removes a specified UI + `uiCls` from the components element. The `cls` which is added to the element
|
|
* will be: `this.baseCls + '-' + ui`.
|
|
* @param {String} ui The UI to add to the element.
|
|
*/
|
|
removeUIClsFromElement: function(cls) {
|
|
var me = this,
|
|
baseClsUi = me.baseCls + '-' + me.ui + '-' + cls,
|
|
result = [Ext.baseCSSPrefix + cls, me.baseCls + '-' + cls, baseClsUi],
|
|
frameElementsArray, frameElementsLength, i, el, frameElement;
|
|
|
|
if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
|
|
// define each element of the frame
|
|
frameElementsArray = me.frameElementsArray;
|
|
frameElementsLength = frameElementsArray.length;
|
|
|
|
// loop through each of them, and if they are defined add the ui
|
|
for (i = 0; i < frameElementsLength; i++) {
|
|
frameElement = frameElementsArray[i];
|
|
el = me['frame' + frameElement.toUpperCase()];
|
|
|
|
if (el) {
|
|
el.removeCls(baseClsUi + '-' + frameElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Method which adds a specified UI to the components element.
|
|
* @private
|
|
*/
|
|
addUIToElement: function() {
|
|
var me = this,
|
|
baseClsUI = me.baseCls + '-' + me.ui,
|
|
frameElementsArray, frameElementsLength, i, el, frameElement;
|
|
|
|
me.addCls(baseClsUI);
|
|
|
|
if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
|
|
// define each element of the frame
|
|
frameElementsArray = me.frameElementsArray;
|
|
frameElementsLength = frameElementsArray.length;
|
|
|
|
// loop through each of them, and if they are defined add the ui
|
|
for (i = 0; i < frameElementsLength; i++) {
|
|
frameElement = frameElementsArray[i];
|
|
el = me['frame' + frameElement.toUpperCase()];
|
|
|
|
if (el) {
|
|
el.addCls(baseClsUI + '-' + frameElement);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method which removes a specified UI from the components element.
|
|
* @private
|
|
*/
|
|
removeUIFromElement: function() {
|
|
var me = this,
|
|
baseClsUI = me.baseCls + '-' + me.ui,
|
|
frameElementsArray, frameElementsLength, i, el, frameElement;
|
|
|
|
me.removeCls(baseClsUI);
|
|
|
|
if (me.rendered && me.frame && !Ext.supports.CSS3BorderRadius) {
|
|
// define each element of the frame
|
|
frameElementsArray = me.frameElementsArray;
|
|
frameElementsLength = frameElementsArray.length;
|
|
|
|
for (i = 0; i < frameElementsLength; i++) {
|
|
frameElement = frameElementsArray[i];
|
|
el = me['frame' + frameElement.toUpperCase()];
|
|
|
|
if (el) {
|
|
el.removeCls(baseClsUI + '-' + frameElement);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getTpl: function(name) {
|
|
return Ext.XTemplate.getTpl(this, name);
|
|
},
|
|
|
|
/**
|
|
* Applies padding, margin, border, top, left, height, and width configs to the
|
|
* appropriate elements.
|
|
* @private
|
|
*/
|
|
initStyles: function(targetEl) {
|
|
var me = this,
|
|
Element = Ext.Element,
|
|
margin = me.margin,
|
|
border = me.border,
|
|
cls = me.cls,
|
|
style = me.style,
|
|
x = me.x,
|
|
y = me.y,
|
|
width, height;
|
|
|
|
me.initPadding(targetEl);
|
|
|
|
if (margin != null) {
|
|
targetEl.setStyle('margin', this.unitizeBox((margin === true) ? 5 : margin));
|
|
}
|
|
|
|
if (border != null) {
|
|
me.setBorder(border, targetEl);
|
|
}
|
|
|
|
// initComponent, beforeRender, or event handlers may have set the style or cls property since the protoEl was set up
|
|
// so we must apply styles and classes here too.
|
|
if (cls && cls != me.initialCls) {
|
|
targetEl.addCls(cls);
|
|
me.cls = me.initialCls = null;
|
|
}
|
|
if (style && style != me.initialStyle) {
|
|
targetEl.setStyle(style);
|
|
me.style = me.initialStyle = null;
|
|
}
|
|
|
|
if (x != null) {
|
|
targetEl.setStyle(me.horizontalPosProp, (typeof x == 'number') ? (x + 'px') : x);
|
|
}
|
|
if (y != null) {
|
|
targetEl.setStyle('top', (typeof y == 'number') ? (y + 'px') : y);
|
|
}
|
|
|
|
if (Ext.isBorderBox && (!me.ownerCt || me.floating)) {
|
|
targetEl.addCls(me.borderBoxCls);
|
|
}
|
|
|
|
// Framed components need their width/height to apply to the frame, which is
|
|
// best handled in layout at present.
|
|
if (!me.getFrameInfo()) {
|
|
width = me.width;
|
|
height = me.height;
|
|
|
|
// If we're using the content box model, we also cannot assign numeric initial sizes since we do not know the border widths to subtract
|
|
if (width != null) {
|
|
if (typeof width === 'number') {
|
|
if (Ext.isBorderBox) {
|
|
targetEl.setStyle('width', width + 'px');
|
|
}
|
|
} else {
|
|
targetEl.setStyle('width', width);
|
|
}
|
|
}
|
|
if (height != null) {
|
|
if (typeof height === 'number') {
|
|
if (Ext.isBorderBox) {
|
|
targetEl.setStyle('height', height + 'px');
|
|
}
|
|
} else {
|
|
targetEl.setStyle('height', height);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initializes padding by applying it to the target element, or if the layout manages
|
|
* padding ensures that the padding on the target element is "0".
|
|
* @private
|
|
*/
|
|
initPadding: function(targetEl) {
|
|
var me = this,
|
|
padding = me.padding;
|
|
|
|
if (padding != null) {
|
|
if (me.layout && me.layout.managePadding && me.contentPaddingProperty === 'padding') {
|
|
// If the container layout manages padding, the layout will apply the
|
|
// padding to an inner element rather than the target element. The
|
|
// assumed intent is for the configured padding to override any padding
|
|
// that is applied to the target element via stylesheet rules. It is
|
|
// therefore necessary to set the target element's padding to "0".
|
|
targetEl.setStyle('padding', 0);
|
|
} else {
|
|
// Convert the padding, margin and border properties from a space seperated string
|
|
// into a proper style string
|
|
targetEl.setStyle('padding', this.unitizeBox((padding === true) ? 5 : padding));
|
|
}
|
|
}
|
|
},
|
|
|
|
parseBox: function(box) {
|
|
return Ext.dom.Element.parseBox(box);
|
|
},
|
|
|
|
unitizeBox: function(box) {
|
|
return Ext.dom.Element.unitizeBox(box);
|
|
},
|
|
|
|
/**
|
|
* Sets the margin on the target element.
|
|
* @param {Number/String} margin The margin to set. See the {@link #margin} config.
|
|
*/
|
|
setMargin: function(margin, /* private */ preventLayout) {
|
|
var me = this;
|
|
|
|
if (me.rendered) {
|
|
if (!margin && margin !== 0) {
|
|
margin = '';
|
|
} else {
|
|
if (margin === true) {
|
|
margin = 5;
|
|
}
|
|
margin = this.unitizeBox(margin);
|
|
}
|
|
me.getTargetEl().setStyle('margin', margin);
|
|
if (!preventLayout) {
|
|
me.updateLayout();
|
|
}
|
|
} else {
|
|
me.margin = margin;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initialize any events on this component
|
|
* @protected
|
|
*/
|
|
initEvents : function() {
|
|
var me = this,
|
|
afterRenderEvents = me.afterRenderEvents,
|
|
afterRenderEvent, el, property, index, len;
|
|
|
|
if (afterRenderEvents) {
|
|
for (property in afterRenderEvents) {
|
|
el = me[property];
|
|
|
|
if (el && el.on) {
|
|
afterRenderEvent = afterRenderEvents[property];
|
|
|
|
for (index = 0, len = afterRenderEvent.length ; index < len ; ++index) {
|
|
me.mon(el, afterRenderEvent[index]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// This will add focus/blur listeners to the getFocusEl() element if that is naturally focusable.
|
|
// If *not* naturally focusable, then the FocusManager must be enabled to get it to listen for focus so that
|
|
// the FocusManager can track and highlight focus.
|
|
me.addFocusListener();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets up the focus listener on this Component's {@link #getFocusEl focusEl} if it has one.
|
|
*
|
|
* Form Components which must implicitly participate in tabbing order usually have a naturally focusable
|
|
* element as their {@link #getFocusEl focusEl}, and it is the DOM event of that receiving focus which drives
|
|
* the Component's `onFocus` handling, and the DOM event of it being blurred which drives the `onBlur` handling.
|
|
*
|
|
* If the {@link #getFocusEl focusEl} is **not** naturally focusable, then the listeners are only added
|
|
* if the {@link Ext.FocusManager FocusManager} is enabled.
|
|
*/
|
|
addFocusListener: function() {
|
|
var me = this,
|
|
focusEl = me.getFocusEl(),
|
|
needsTabIndex;
|
|
|
|
// All Containers may be focusable, not only "form" type elements, but also
|
|
// Panels, Toolbars, Windows etc.
|
|
// Usually, the <DIV> element they will return as their focusEl will not be able to receive focus
|
|
// However, if the FocusManager is invoked, its non-default navigation handlers (invoked when
|
|
// tabbing/arrowing off of certain Components) may explicitly focus a Panel or Container or FieldSet etc.
|
|
// Add listeners to the focus and blur events on the focus element
|
|
|
|
// If this Component returns a focusEl, we might need to add a focus listener to it.
|
|
if (focusEl) {
|
|
// getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
|
|
// Window can do this via its defaultFocus configuration which can reference a Button.
|
|
if (focusEl.isComponent) {
|
|
return focusEl.addFocusListener();
|
|
}
|
|
|
|
// If the focusEl is naturally focusable, then we always need a focus listener to drive the Component's
|
|
// onFocus handling.
|
|
// If *not* naturally focusable, then we only need the focus listener if the FocusManager is enabled.
|
|
needsTabIndex = focusEl.needsTabIndex();
|
|
if (!me.focusListenerAdded && (!needsTabIndex || Ext.FocusManager.enabled)) {
|
|
if (needsTabIndex) {
|
|
focusEl.dom.tabIndex = -1;
|
|
}
|
|
focusEl.on({
|
|
focus: me.onFocus,
|
|
blur: me.onBlur,
|
|
scope: me
|
|
});
|
|
me.focusListenerAdded = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the focus holder element associated with this Component. At the Component base class level, this function returns `undefined`.
|
|
*
|
|
* Subclasses which use embedded focusable elements (such as Window, Field and Button) should override this
|
|
* for use by the {@link Ext.Component#method-focus focus} method.
|
|
*
|
|
* Containers which need to participate in the {@link Ext.FocusManager FocusManager}'s navigation and Container focusing scheme also
|
|
* need to return a `focusEl`, although focus is only listened for in this case if the {@link Ext.FocusManager FocusManager} is {@link Ext.FocusManager#method-enable enable}d.
|
|
*
|
|
* @returns {undefined} `undefined` because raw Components cannot by default hold focus.
|
|
*/
|
|
getFocusEl: Ext.emptyFn,
|
|
|
|
isFocusable: function() {
|
|
var me = this,
|
|
focusEl;
|
|
if ((me.focusable !== false) && (focusEl = me.getFocusEl()) && me.rendered && !me.destroying && !me.isDestroyed && !me.disabled && me.isVisible(true)) {
|
|
|
|
// getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
|
|
// Window can do this via its defaultFocus configuration which can reference a Button.
|
|
// Both Component and Element implement isFocusable, so always ask that.
|
|
return focusEl.isFocusable(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Template method to do any pre-focus processing.
|
|
* @protected
|
|
* @param {Ext.EventObject} e The event object
|
|
*/
|
|
beforeFocus: Ext.emptyFn,
|
|
|
|
// private
|
|
onFocus: function(e) {
|
|
var me = this,
|
|
focusCls = me.focusCls,
|
|
focusEl = me.getFocusEl();
|
|
|
|
if (!me.disabled) {
|
|
me.beforeFocus(e);
|
|
if (focusCls && focusEl) {
|
|
focusEl.addCls(me.addClsWithUI(focusCls, true));
|
|
}
|
|
if (!me.hasFocus) {
|
|
me.hasFocus = true;
|
|
me.fireEvent('focus', me, e);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Template method to do any pre-blur processing.
|
|
* @protected
|
|
* @param {Ext.EventObject} e The event object
|
|
*/
|
|
beforeBlur : Ext.emptyFn,
|
|
|
|
// private
|
|
onBlur : function(e) {
|
|
var me = this,
|
|
focusCls = me.focusCls,
|
|
focusEl = me.getFocusEl();
|
|
|
|
if (me.destroying) {
|
|
return;
|
|
}
|
|
|
|
me.beforeBlur(e);
|
|
if (focusCls && focusEl) {
|
|
focusEl.removeCls(me.removeClsWithUI(focusCls, true));
|
|
}
|
|
if (me.validateOnBlur) {
|
|
me.validate();
|
|
}
|
|
me.hasFocus = false;
|
|
me.fireEvent('blur', me, e);
|
|
me.postBlur(e);
|
|
},
|
|
|
|
/**
|
|
* Template method to do any post-blur processing.
|
|
* @protected
|
|
* @param {Ext.EventObject} e The event object
|
|
*/
|
|
postBlur : Ext.emptyFn,
|
|
|
|
/**
|
|
* Tests whether this Component matches the selector string.
|
|
* @param {String} selector The selector string to test against.
|
|
* @return {Boolean} `true` if this Component matches the selector.
|
|
*/
|
|
is: function(selector) {
|
|
return Ext.ComponentQuery.is(this, selector);
|
|
},
|
|
|
|
/**
|
|
* Navigates up the ownership hierarchy searching for an ancestor Container which matches any passed simple selector or component.
|
|
*
|
|
* *Important.* There is not a universal upwards navigation pointer. There are several upwards relationships
|
|
* such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the
|
|
* {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the
|
|
* {@link Ext.grid.column.Column column header} which activated the column menu.
|
|
*
|
|
* These differences are abstracted away by this method.
|
|
*
|
|
* Example:
|
|
*
|
|
* var owningTabPanel = grid.up('tabpanel');
|
|
*
|
|
* @param {String/Ext.Component} [selector] The simple selector component or actual component to test. If not passed the immediate owner/activater is returned.
|
|
* @param {String/Number/Ext.Component} [limit] This may be a selector upon which to stop the upward scan, or a limit of teh number of steps, or Component reference to stop on.
|
|
* @return {Ext.container.Container} The matching ancestor Container (or `undefined` if no match was found).
|
|
*/
|
|
up: function (selector, limit) {
|
|
var result = this.getRefOwner(),
|
|
limitSelector = typeof limit === 'string',
|
|
limitCount = typeof limit === 'number',
|
|
limitComponent = limit && limit.isComponent,
|
|
steps = 0;
|
|
|
|
if (selector) {
|
|
for (; result; result = result.getRefOwner()) {
|
|
steps++;
|
|
if (selector.isComponent) {
|
|
if (result === selector) {
|
|
return result;
|
|
}
|
|
} else {
|
|
if (Ext.ComponentQuery.is(result, selector)) {
|
|
return result;
|
|
}
|
|
}
|
|
|
|
// Stop when we hit the limit selector
|
|
if (limitSelector && result.is(limit)) {
|
|
return;
|
|
}
|
|
if (limitCount && steps === limit) {
|
|
return;
|
|
}
|
|
if (limitComponent && result === limit) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Returns the next sibling of this Component.
|
|
*
|
|
* Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.
|
|
*
|
|
* May also be referred to as **`next()`**
|
|
*
|
|
* Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
|
|
* {@link #nextNode}
|
|
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following items.
|
|
* @return {Ext.Component} The next sibling (or the next sibling which matches the selector).
|
|
* Returns `null` if there is no matching sibling.
|
|
*/
|
|
nextSibling: function(selector) {
|
|
var o = this.ownerCt, it, last, idx, c;
|
|
if (o) {
|
|
it = o.items;
|
|
idx = it.indexOf(this) + 1;
|
|
if (idx) {
|
|
if (selector) {
|
|
for (last = it.getCount(); idx < last; idx++) {
|
|
if ((c = it.getAt(idx)).is(selector)) {
|
|
return c;
|
|
}
|
|
}
|
|
} else {
|
|
if (idx < it.getCount()) {
|
|
return it.getAt(idx);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Returns the previous sibling of this Component.
|
|
*
|
|
* Optionally selects the previous sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery}
|
|
* selector.
|
|
*
|
|
* May also be referred to as **`prev()`**
|
|
*
|
|
* Note that this is limited to siblings, and if no siblings of the item match, `null` is returned. Contrast with
|
|
* {@link #previousNode}
|
|
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding items.
|
|
* @return {Ext.Component} The previous sibling (or the previous sibling which matches the selector).
|
|
* Returns `null` if there is no matching sibling.
|
|
*/
|
|
previousSibling: function(selector) {
|
|
var o = this.ownerCt, it, idx, c;
|
|
if (o) {
|
|
it = o.items;
|
|
idx = it.indexOf(this);
|
|
if (idx != -1) {
|
|
if (selector) {
|
|
for (--idx; idx >= 0; idx--) {
|
|
if ((c = it.getAt(idx)).is(selector)) {
|
|
return c;
|
|
}
|
|
}
|
|
} else {
|
|
if (idx) {
|
|
return it.getAt(--idx);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Returns the previous 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 in reverse order to attempt to find a match. Contrast with {@link #previousSibling}.
|
|
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the preceding nodes.
|
|
* @return {Ext.Component} The previous node (or the previous node which matches the selector).
|
|
* Returns `null` if there is no matching node.
|
|
*/
|
|
previousNode: function(selector, /* private */ includeSelf) {
|
|
var node = this,
|
|
ownerCt = node.ownerCt,
|
|
result,
|
|
it, i, sib;
|
|
|
|
// If asked to include self, test me
|
|
if (includeSelf && node.is(selector)) {
|
|
return node;
|
|
}
|
|
|
|
if (ownerCt) {
|
|
for (it = ownerCt.items.items, i = Ext.Array.indexOf(it, node) - 1; i > -1; i--) {
|
|
sib = it[i];
|
|
if (sib.query) {
|
|
result = sib.query(selector);
|
|
result = result[result.length - 1];
|
|
if (result) {
|
|
return result;
|
|
}
|
|
}
|
|
if (sib.is(selector)) {
|
|
return sib;
|
|
}
|
|
}
|
|
return ownerCt.previousNode(selector, true);
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* 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 #nextSibling}.
|
|
* @param {String} [selector] A {@link Ext.ComponentQuery ComponentQuery} selector to filter the following nodes.
|
|
* @return {Ext.Component} The next node (or the next node which matches the selector).
|
|
* Returns `null` if there is no matching node.
|
|
*/
|
|
nextNode: function(selector, /* private */ includeSelf) {
|
|
var node = this,
|
|
ownerCt = node.ownerCt,
|
|
result,
|
|
it, len, i, sib;
|
|
|
|
// If asked to include self, test me
|
|
if (includeSelf && node.is(selector)) {
|
|
return node;
|
|
}
|
|
|
|
if (ownerCt) {
|
|
for (it = ownerCt.items.items, i = Ext.Array.indexOf(it, node) + 1, len = it.length; i < len; i++) {
|
|
sib = it[i];
|
|
if (sib.is(selector)) {
|
|
return sib;
|
|
}
|
|
if (sib.down) {
|
|
result = sib.down(selector);
|
|
if (result) {
|
|
return result;
|
|
}
|
|
}
|
|
}
|
|
return ownerCt.nextNode(selector);
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the `id` of this component. Will auto-generate an `id` if one has not already been set.
|
|
* @return {String}
|
|
*/
|
|
getId : function() {
|
|
return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
|
|
},
|
|
|
|
/**
|
|
* Returns the value of {@link #itemId} assigned to this component, or when that
|
|
* is not set, returns the value of {@link #id}.
|
|
* @return {String}
|
|
*/
|
|
getItemId : function() {
|
|
return this.itemId || this.id;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the top level element representing this component.
|
|
* @return {Ext.dom.Element}
|
|
* @since 1.1.0
|
|
*/
|
|
getEl : function() {
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* This is used to determine where to insert the 'html', 'contentEl' and 'items' in this component.
|
|
* @private
|
|
*/
|
|
getTargetEl: function() {
|
|
return this.frameBody || this.el;
|
|
},
|
|
|
|
/**
|
|
* Get an el for overflowing, defaults to the target el
|
|
* @private
|
|
*/
|
|
getOverflowEl: function(){
|
|
return this.getTargetEl();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the CSS style object which will set the Component's scroll styles. This must be applied
|
|
* to the {@link #getTargetEl target element}.
|
|
*/
|
|
getOverflowStyle: function() {
|
|
var me = this,
|
|
result = null,
|
|
ox, oy,
|
|
overflowStyle;
|
|
|
|
// Note to maintainer. To save on waves of testing, setting and defaulting, the code below
|
|
// rolls assignent statements into conditional test value expressiona and property object initializers.
|
|
// This avoids sprawling code. Maintain with care.
|
|
if (typeof me.autoScroll === 'boolean') {
|
|
result = {
|
|
overflow: overflowStyle = me.autoScroll ? 'auto' : ''
|
|
};
|
|
me.scrollFlags = {
|
|
overflowX: overflowStyle,
|
|
overflowY: overflowStyle,
|
|
x: true,
|
|
y: true,
|
|
both: true
|
|
};
|
|
} else {
|
|
ox = me.overflowX;
|
|
oy = me.overflowY;
|
|
if (ox !== undefined || oy !== undefined) {
|
|
result = {
|
|
'overflowX': ox = ox || '',
|
|
'overflowY': oy = oy || ''
|
|
};
|
|
|
|
/**
|
|
* @member Ext.Component
|
|
* @property {Object} scrollFlags
|
|
* An object property which provides unified information as to which dimensions are scrollable based upon
|
|
* the {@link #autoScroll}, {@link #overflowX} and {@link #overflowY} settings (And for *views* of trees and grids, the owning panel's {@link Ext.panel.Table#scroll scroll} setting).
|
|
*
|
|
* Note that if you set overflow styles using the {@link #style} config or {@link Ext.panel.Panel#bodyStyle bodyStyle} config, this object does not include that information;
|
|
* it is best to use {@link #autoScroll}, {@link #overflowX} and {@link #overflowY} if you need to access these flags.
|
|
*
|
|
* This object has the following properties:
|
|
* @property {Boolean} scrollFlags.x `true` if this Component is scrollable horizontally - style setting may be `'auto'` or `'scroll'`.
|
|
* @property {Boolean} scrollFlags.y `true` if this Component is scrollable vertically - style setting may be `'auto'` or `'scroll'`.
|
|
* @property {Boolean} scrollFlags.both `true` if this Component is scrollable both horizontally and vertically.
|
|
* @property {String} scrollFlags.overflowX The `overflow-x` style setting, `'auto'` or `'scroll'` or `''`.
|
|
* @property {String} scrollFlags.overflowY The `overflow-y` style setting, `'auto'` or `'scroll'` or `''`.
|
|
* @readonly
|
|
*/
|
|
me.scrollFlags = {
|
|
overflowX: ox,
|
|
overflowY: oy,
|
|
x: ox = (ox === 'auto' || ox === 'scroll'),
|
|
y: oy = (oy === 'auto' || oy === 'scroll'),
|
|
both: ox && oy
|
|
};
|
|
} else {
|
|
me.scrollFlags = {
|
|
overflowX: '',
|
|
overflowY: '',
|
|
x: false,
|
|
y: false,
|
|
both: false
|
|
};
|
|
}
|
|
}
|
|
|
|
// The scrollable container element must be non-statically positioned or IE6/7 will make
|
|
// positioned children stay in place rather than scrolling with the rest of the content
|
|
if (result && Ext.isIE7m) {
|
|
result.position = 'relative';
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
|
|
* from the xtype (default) or whether it is directly of the xtype specified (`shallow = true`).
|
|
*
|
|
* **If using your own subclasses, be aware that a Component must register its own xtype to participate in
|
|
* determination of inherited xtypes.**
|
|
*
|
|
* For a list of all available xtypes, see the {@link Ext.Component} header.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* var t = new Ext.form.field.Text();
|
|
* var isText = t.isXType('textfield'); // true
|
|
* var isBoxSubclass = t.isXType('field'); // true, descended from Ext.form.field.Base
|
|
* var isBoxInstance = t.isXType('field', true); // false, not a direct Ext.form.field.Base instance
|
|
*
|
|
* @param {String} xtype The xtype to check for this Component
|
|
* @param {Boolean} [shallow=false] `true` to check whether this Component is directly of the specified xtype, `false` to
|
|
* check whether this Component is descended from the xtype.
|
|
* @return {Boolean} `true` if this component descends from the specified xtype, `false` otherwise.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
isXType: function(xtype, shallow) {
|
|
if (shallow) {
|
|
return this.xtype === xtype;
|
|
}
|
|
else {
|
|
return this.xtypesMap[xtype];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the
|
|
* {@link Ext.Component} header.
|
|
*
|
|
* **If using your own subclasses, be aware that a Component must register its own xtype to participate in
|
|
* determination of inherited xtypes.**
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* var t = new Ext.form.field.Text();
|
|
* alert(t.getXTypes()); // alerts 'component/field/textfield'
|
|
*
|
|
* @return {String} The xtype hierarchy string
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
getXTypes: function() {
|
|
var self = this.self,
|
|
xtypes, parentPrototype, parentXtypes;
|
|
|
|
if (!self.xtypes) {
|
|
xtypes = [];
|
|
parentPrototype = this;
|
|
|
|
while (parentPrototype) {
|
|
parentXtypes = parentPrototype.xtypes;
|
|
|
|
if (parentXtypes !== undefined) {
|
|
xtypes.unshift.apply(xtypes, parentXtypes);
|
|
}
|
|
|
|
parentPrototype = parentPrototype.superclass;
|
|
}
|
|
|
|
self.xtypeChain = xtypes;
|
|
self.xtypes = xtypes.join('/');
|
|
}
|
|
|
|
return self.xtypes;
|
|
},
|
|
|
|
/**
|
|
* Update the content area of a component.
|
|
* @param {String/Object} htmlOrData If this component has been configured with a template via the tpl config then
|
|
* it will use this argument as data to populate the template. If this component was not configured with a template,
|
|
* the components content area will be updated via Ext.Element update.
|
|
* @param {Boolean} [loadScripts=false] Only legitimate when using the `html` configuration.
|
|
* @param {Function} [callback] Only legitimate when using the `html` configuration. Callback to execute when
|
|
* scripts have finished loading.
|
|
*
|
|
* @since 3.4.0
|
|
*/
|
|
update : function(htmlOrData, loadScripts, cb) {
|
|
var me = this,
|
|
isData = (me.tpl && !Ext.isString(htmlOrData)),
|
|
el;
|
|
|
|
if (isData) {
|
|
me.data = htmlOrData;
|
|
} else {
|
|
me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
|
|
}
|
|
|
|
if (me.rendered) {
|
|
el = me.isContainer ? me.layout.getRenderTarget() : me.getTargetEl();
|
|
if (isData) {
|
|
me.tpl[me.tplWriteMode](el, htmlOrData || {});
|
|
} else {
|
|
el.update(me.html, loadScripts, cb);
|
|
}
|
|
me.updateLayout();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Convenience function to hide or show this component by Boolean.
|
|
* @param {Boolean} visible `true` to show, `false` to hide.
|
|
* @return {Ext.Component} this
|
|
* @since 1.1.0
|
|
*/
|
|
setVisible : function(visible) {
|
|
return this[visible ? 'show': 'hide']();
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if this component is visible.
|
|
*
|
|
* @param {Boolean} [deep=false] Pass `true` to interrogate the visibility status of all parent Containers to
|
|
* determine whether this Component is truly visible to the user.
|
|
*
|
|
* Generally, to determine whether a Component is hidden, the no argument form is needed. For example when creating
|
|
* dynamically laid out UIs in a hidden Container before showing them.
|
|
*
|
|
* @return {Boolean} `true` if this component is visible, `false` otherwise.
|
|
*
|
|
* @since 1.1.0
|
|
*/
|
|
isVisible: function(deep) {
|
|
var me = this,
|
|
hidden;
|
|
|
|
if (me.hidden || !me.rendered || me.isDestroyed) {
|
|
hidden = true;
|
|
} else if (deep) {
|
|
hidden = me.isHierarchicallyHidden();
|
|
}
|
|
|
|
return !hidden;
|
|
},
|
|
|
|
isHierarchicallyHidden: function() {
|
|
var child = this,
|
|
hidden = false,
|
|
parent, parentHierarchyState;
|
|
|
|
// It is possible for some components to be immune to collapse meaning the immune
|
|
// component remains visible when its direct parent is collapsed, e.g. panel header.
|
|
// Because of this, we must walk up the component hierarchy to determine the true
|
|
// visible state of the component.
|
|
for (; (parent = child.ownerCt || child.floatParent); child = parent) {
|
|
parentHierarchyState = parent.getHierarchyState();
|
|
if (parentHierarchyState.hidden) {
|
|
hidden = true;
|
|
break;
|
|
}
|
|
if (child.getHierarchyState().collapseImmune) {
|
|
// The child or one of its ancestors is immune to collapse.
|
|
if (parent.collapsed && !child.collapseImmune) {
|
|
// If the child's direct parent is collapsed, and the child
|
|
// itself does not have collapse immunity we know that
|
|
// the child is not visible.
|
|
hidden = true;
|
|
break;
|
|
}
|
|
} else {
|
|
// We have ascended the tree to a point where collapse immunity
|
|
// is not in play. This means if any anscestor above this point
|
|
// is collapsed, then the component is not visible.
|
|
hidden = !!parentHierarchyState.collapsed;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return hidden;
|
|
},
|
|
|
|
onBoxReady: function(width, height) {
|
|
var me = this;
|
|
|
|
if (me.disableOnBoxReady) {
|
|
me.onDisable();
|
|
} else if (me.enableOnBoxReady) {
|
|
me.onEnable();
|
|
}
|
|
if (me.resizable) {
|
|
me.initResizable(me.resizable);
|
|
}
|
|
|
|
// Draggability must be initialized after resizability
|
|
// Because if we have to be wrapped, the resizer wrapper must be dragged as a pseudo-Component
|
|
if (me.draggable) {
|
|
me.initDraggable();
|
|
}
|
|
|
|
if (me.hasListeners.boxready) {
|
|
me.fireEvent('boxready', me, width, height);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Enable the component
|
|
* @param {Boolean} [silent=false] Passing `true` will suppress the `enable` event from being fired.
|
|
* @since 1.1.0
|
|
*/
|
|
enable: function(silent) {
|
|
var me = this;
|
|
|
|
delete me.disableOnBoxReady;
|
|
me.removeCls(me.disabledCls);
|
|
if (me.rendered) {
|
|
me.onEnable();
|
|
} else {
|
|
me.enableOnBoxReady = true;
|
|
}
|
|
|
|
me.disabled = false;
|
|
delete me.resetDisable;
|
|
|
|
if (silent !== true) {
|
|
me.fireEvent('enable', me);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Disable the component.
|
|
* @param {Boolean} [silent=false] Passing `true` will suppress the `disable` event from being fired.
|
|
* @since 1.1.0
|
|
*/
|
|
disable: function(silent) {
|
|
var me = this;
|
|
|
|
delete me.enableOnBoxReady;
|
|
me.addCls(me.disabledCls);
|
|
if (me.rendered) {
|
|
me.onDisable();
|
|
} else {
|
|
me.disableOnBoxReady = true;
|
|
}
|
|
|
|
me.disabled = true;
|
|
|
|
if (silent !== true) {
|
|
delete me.resetDisable;
|
|
me.fireEvent('disable', me);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Allows addition of behavior to the enable operation.
|
|
* After calling the superclass's `onEnable`, the Component will be enabled.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onEnable: function() {
|
|
if (this.maskOnDisable) {
|
|
this.el.dom.disabled = false;
|
|
this.unmask();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Allows addition of behavior to the disable operation.
|
|
* After calling the superclass's `onDisable`, the Component will be disabled.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onDisable : function() {
|
|
var me = this,
|
|
focusCls = me.focusCls,
|
|
focusEl = me.getFocusEl();
|
|
|
|
if (focusCls && focusEl) {
|
|
focusEl.removeCls(me.removeClsWithUI(focusCls, true));
|
|
}
|
|
|
|
if (me.maskOnDisable) {
|
|
me.el.dom.disabled = true;
|
|
me.mask();
|
|
}
|
|
},
|
|
|
|
mask: function() {
|
|
var box = this.lastBox,
|
|
target = this.getMaskTarget(),
|
|
args = [];
|
|
|
|
// Pass it the height of our element if we know it.
|
|
if (box) {
|
|
args[2] = box.height;
|
|
}
|
|
target.mask.apply(target, args);
|
|
},
|
|
|
|
unmask: function() {
|
|
this.getMaskTarget().unmask();
|
|
},
|
|
|
|
getMaskTarget: function(){
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* Method to determine whether this Component is currently disabled.
|
|
* @return {Boolean} the disabled state of this Component.
|
|
*/
|
|
isDisabled : function() {
|
|
return this.disabled;
|
|
},
|
|
|
|
/**
|
|
* Enable or disable the component.
|
|
* @param {Boolean} disabled `true` to disable.
|
|
*/
|
|
setDisabled : function(disabled) {
|
|
return this[disabled ? 'disable': 'enable']();
|
|
},
|
|
|
|
/**
|
|
* Method to determine whether this Component is currently set to hidden.
|
|
* @return {Boolean} the hidden state of this Component.
|
|
*/
|
|
isHidden : function() {
|
|
return this.hidden;
|
|
},
|
|
|
|
/**
|
|
* Adds a CSS class to the top level element representing this component.
|
|
* @param {String/String[]} cls The CSS class name to add.
|
|
* @return {Ext.Component} Returns the Component to allow method chaining.
|
|
*/
|
|
addCls : function(cls) {
|
|
var me = this,
|
|
el = me.rendered ? me.el : me.protoEl;
|
|
|
|
el.addCls.apply(el, arguments);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc Ext.AbstractComponent#addCls
|
|
* @deprecated 4.1 Use {@link #addCls} instead.
|
|
* @since 2.3.0
|
|
*/
|
|
addClass : function() {
|
|
return this.addCls.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Checks if the specified CSS class exists on this element's DOM node.
|
|
* @param {String} className The CSS class to check for.
|
|
* @return {Boolean} `true` if the class exists, else `false`.
|
|
* @method
|
|
*/
|
|
hasCls: function (cls) {
|
|
var me = this,
|
|
el = me.rendered ? me.el : me.protoEl;
|
|
|
|
return el.hasCls.apply(el, arguments);
|
|
},
|
|
|
|
/**
|
|
* Removes a CSS class from the top level element representing this component.
|
|
* @param {String/String[]} cls The CSS class name to remove.
|
|
* @returns {Ext.Component} Returns the Component to allow method chaining.
|
|
*/
|
|
removeCls : function(cls) {
|
|
var me = this,
|
|
el = me.rendered ? me.el : me.protoEl;
|
|
|
|
el.removeCls.apply(el, arguments);
|
|
return me;
|
|
},
|
|
|
|
|
|
addOverCls: function() {
|
|
var me = this;
|
|
if (!me.disabled) {
|
|
me.el.addCls(me.overCls);
|
|
}
|
|
},
|
|
|
|
removeOverCls: function() {
|
|
this.el.removeCls(this.overCls);
|
|
},
|
|
|
|
addListener : function(element, listeners, scope, options) {
|
|
var me = this,
|
|
fn,
|
|
option;
|
|
|
|
if (Ext.isString(element) && (Ext.isObject(listeners) || options && options.element)) {
|
|
if (options.element) {
|
|
fn = listeners;
|
|
|
|
listeners = {};
|
|
listeners[element] = fn;
|
|
element = options.element;
|
|
if (scope) {
|
|
listeners.scope = scope;
|
|
}
|
|
|
|
for (option in options) {
|
|
if (options.hasOwnProperty(option)) {
|
|
if (me.eventOptionsRe.test(option)) {
|
|
listeners[option] = options[option];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// At this point we have a variable called element,
|
|
// and a listeners object that can be passed to on
|
|
if (me[element] && me[element].on) {
|
|
me.mon(me[element], listeners);
|
|
} else {
|
|
me.afterRenderEvents = me.afterRenderEvents || {};
|
|
if (!me.afterRenderEvents[element]) {
|
|
me.afterRenderEvents[element] = [];
|
|
}
|
|
me.afterRenderEvents[element].push(listeners);
|
|
}
|
|
return;
|
|
}
|
|
|
|
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) {
|
|
if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
|
|
element.un(managedListener.ename, managedListener.fn, managedListener.scope);
|
|
if (!isClear) {
|
|
Ext.Array.remove(me.managedListeners, managedListener);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Provides the link for Observable's `fireEvent` method to bubble up the ownership hierarchy.
|
|
* @return {Ext.container.Container} the Container which owns this Component.
|
|
* @since 3.4.0
|
|
*/
|
|
getBubbleTarget : function() {
|
|
return this.ownerCt;
|
|
},
|
|
|
|
/**
|
|
* Method to determine whether this Component is floating.
|
|
* @return {Boolean} the floating state of this component.
|
|
*/
|
|
isFloating : function() {
|
|
return this.floating;
|
|
},
|
|
|
|
/**
|
|
* Method to determine whether this Component is draggable.
|
|
* @return {Boolean} the draggable state of this component.
|
|
*/
|
|
isDraggable : function() {
|
|
return !!this.draggable;
|
|
},
|
|
|
|
/**
|
|
* Method to determine whether this Component is droppable.
|
|
* @return {Boolean} the droppable state of this component.
|
|
*/
|
|
isDroppable : function() {
|
|
return !!this.droppable;
|
|
},
|
|
|
|
/**
|
|
* Method to manage awareness of when components are added to their
|
|
* respective Container, firing an #added event. References are
|
|
* established at add time rather than at render time.
|
|
*
|
|
* Allows addition of behavior when a Component is added to a
|
|
* Container. At this stage, the Component is in the parent
|
|
* Container's collection of child items. After calling the
|
|
* superclass's `onAdded`, the `ownerCt` reference will be present,
|
|
* and if configured with a ref, the `refOwner` will be set.
|
|
*
|
|
* @param {Ext.container.Container} container Container which holds the component.
|
|
* @param {Number} pos Position at which the component was added.
|
|
*
|
|
* @template
|
|
* @protected
|
|
* @since 3.4.0
|
|
*/
|
|
onAdded : function(container, pos) {
|
|
var me = this;
|
|
|
|
me.ownerCt = container;
|
|
|
|
if (me.hierarchyState) {
|
|
// if component has a hierarchyState at this point we set an invalid flag in the
|
|
// hierarchy state so that descendants of this component know to re-initialize
|
|
// their hierarchyState the next time it is requested (see getHierarchyState())
|
|
me.hierarchyState.invalid = true;
|
|
// We can now delete the old hierarchyState since it is invalid. IMPORTANT:
|
|
// the descendants are still linked to the old hierarchy state via the
|
|
// prototype chain, and their heirarchyState property will be synced up
|
|
// the next time their getHierarchyState() method is called. For this reason
|
|
// hierarchyState should always be accessed using getHierarchyState()
|
|
delete me.hierarchyState;
|
|
}
|
|
|
|
if (me.hasListeners.added) {
|
|
me.fireEvent('added', me, container, pos);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method to manage awareness of when components are removed from their
|
|
* respective Container, firing a #removed event. References are properly
|
|
* cleaned up after removing a component from its owning container.
|
|
*
|
|
* Allows addition of behavior when a Component is removed from
|
|
* its parent Container. At this stage, the Component has been
|
|
* removed from its parent Container's collection of child items,
|
|
* but has not been destroyed (It will be destroyed if the parent
|
|
* Container's `autoDestroy` is `true`, or if the remove call was
|
|
* passed a truthy second parameter). After calling the
|
|
* superclass's `onRemoved`, the `ownerCt` and the `refOwner` will not
|
|
* be present.
|
|
* @param {Boolean} destroying Will be passed as `true` if the Container performing the remove operation will delete this
|
|
* Component upon remove.
|
|
*
|
|
* @template
|
|
* @protected
|
|
* @since 3.4.0
|
|
*/
|
|
onRemoved : function(destroying) {
|
|
var me = this;
|
|
if (me.hasListeners.removed) {
|
|
me.fireEvent('removed', me, me.ownerCt);
|
|
}
|
|
delete me.ownerCt;
|
|
delete me.ownerLayout;
|
|
},
|
|
|
|
/**
|
|
* Invoked before the Component is destroyed.
|
|
*
|
|
* @method
|
|
* @template
|
|
* @protected
|
|
*/
|
|
beforeDestroy : Ext.emptyFn,
|
|
|
|
/**
|
|
* Allows addition of behavior to the resize operation.
|
|
*
|
|
* Called when Ext.resizer.Resizer#drag event is fired.
|
|
*
|
|
* @method
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onResize: function(width, height, oldWidth, oldHeight) {
|
|
var me = this;
|
|
|
|
// constrain is a config on Floating
|
|
if (me.floating && me.constrain) {
|
|
me.doConstrain();
|
|
}
|
|
if (me.hasListeners.resize) {
|
|
me.fireEvent('resize', me, width, height, oldWidth, oldHeight);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the width and height of this Component. This method fires the {@link #resize} event. This method can accept
|
|
* either width and height as separate arguments, or you can pass a size object like `{width:10, height:20}`.
|
|
*
|
|
* @param {Number/String/Object} width The new width to set. This may be one of:
|
|
*
|
|
* - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS width style.
|
|
* - A size object in the format `{width: widthValue, height: heightValue}`.
|
|
* - `undefined` to leave the width unchanged.
|
|
*
|
|
* @param {Number/String} height The new height to set (not required if a size object is passed as the first arg).
|
|
* This may be one of:
|
|
*
|
|
* - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS height style. Animation may **not** be used.
|
|
* - `undefined` to leave the height unchanged.
|
|
*
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setSize : function(width, height) {
|
|
var me = this;
|
|
|
|
// support for standard size objects
|
|
if (width && typeof width == 'object') {
|
|
height = width.height;
|
|
width = width.width;
|
|
}
|
|
|
|
// Constrain within configured maxima
|
|
if (typeof width == 'number') {
|
|
me.width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
|
|
} else if (width === null) {
|
|
delete me.width;
|
|
}
|
|
|
|
if (typeof height == 'number') {
|
|
me.height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
|
|
} else if (height === null) {
|
|
delete me.height;
|
|
}
|
|
|
|
// If not rendered, all we need to is set the properties.
|
|
// The initial layout will set the size
|
|
if (me.rendered && me.isVisible()) {
|
|
|
|
// If we are changing size, then we are not the root.
|
|
me.updateLayout({
|
|
isRoot: false
|
|
});
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Determines whether this Component is the root of a layout. This returns `true` if
|
|
* this component can run its layout without assistance from or impact on its owner.
|
|
* If this component cannot run its layout given these restrictions, `false` is returned
|
|
* and its owner will be considered as the next candidate for the layout root.
|
|
*
|
|
* Setting the {@link #_isLayoutRoot} property to `true` causes this method to always
|
|
* return `true`. This may be useful when updating a layout of a Container which shrink
|
|
* wraps content, and you know that it will not change size, and so can safely be the
|
|
* topmost participant in the layout run.
|
|
* @protected
|
|
*/
|
|
isLayoutRoot: function() {
|
|
var me = this,
|
|
ownerLayout = me.ownerLayout;
|
|
|
|
// Return true if we have been explicitly flagged as the layout root, or if we are floating.
|
|
// Sometimes floating Components get an ownerCt ref injected into them which is *not* a true ownerCt, merely
|
|
// an upward link for reference purposes. For example a grid column menu is linked to the
|
|
// owning header via an ownerCt reference.
|
|
if (!ownerLayout || me._isLayoutRoot || me.floating) {
|
|
return true;
|
|
}
|
|
|
|
return ownerLayout.isItemLayoutRoot(me);
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if layout is suspended for this component. This can come from direct
|
|
* suspension of this component's layout activity ({@link Ext.Container#suspendLayout}) or if one
|
|
* of this component's containers is suspended.
|
|
*
|
|
* @return {Boolean} `true` layout of this component is suspended.
|
|
*/
|
|
isLayoutSuspended: function () {
|
|
var comp = this,
|
|
ownerLayout;
|
|
|
|
while (comp) {
|
|
if (comp.layoutSuspendCount || comp.suspendLayout) {
|
|
return true;
|
|
}
|
|
|
|
ownerLayout = comp.ownerLayout;
|
|
if (!ownerLayout) {
|
|
break;
|
|
}
|
|
|
|
// TODO - what about suspending a Layout instance?
|
|
|
|
// this works better than ownerCt since ownerLayout means "is managed by" in
|
|
// the proper sense... some floating components have ownerCt but won't have an
|
|
// ownerLayout
|
|
comp = ownerLayout.owner;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Updates this component's layout. If this update affects this components {@link #ownerCt},
|
|
* that component's `updateLayout` method will be called to perform the layout instead.
|
|
* Otherwise, just this component (and its child items) will layout.
|
|
*
|
|
* @param {Object} [options] An object with layout options.
|
|
* @param {Boolean} options.defer `true` if this layout should be deferred.
|
|
* @param {Boolean} options.isRoot `true` if this layout should be the root of the layout.
|
|
*/
|
|
updateLayout: function (options) {
|
|
var me = this,
|
|
defer,
|
|
lastBox = me.lastBox,
|
|
isRoot = options && options.isRoot;
|
|
|
|
if (lastBox) {
|
|
// remember that this component's last layout result is invalid and must be
|
|
// recalculated
|
|
lastBox.invalid = true;
|
|
}
|
|
|
|
if (!me.rendered || me.layoutSuspendCount || me.suspendLayout) {
|
|
return;
|
|
}
|
|
|
|
if (me.hidden) {
|
|
Ext.AbstractComponent.cancelLayout(me);
|
|
} else if (typeof isRoot != 'boolean') {
|
|
isRoot = me.isLayoutRoot();
|
|
}
|
|
|
|
// if we aren't the root, see if our ownerLayout will handle it...
|
|
if (isRoot || !me.ownerLayout || !me.ownerLayout.onContentChange(me)) {
|
|
// either we are the root or our ownerLayout doesn't care
|
|
if (!me.isLayoutSuspended()) {
|
|
// we aren't suspended (knew that), but neither is any of our ownerCt's...
|
|
defer = (options && options.hasOwnProperty('defer')) ? options.defer : me.deferLayouts;
|
|
Ext.AbstractComponent.updateLayout(me, defer);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns an object that describes how this component's width and height are managed.
|
|
* All of these objects are shared and should not be modified.
|
|
*
|
|
* @return {Object} The size model for this component.
|
|
* @return {Ext.layout.SizeModel} return.width The {@link Ext.layout.SizeModel size model}
|
|
* for the width.
|
|
* @return {Ext.layout.SizeModel} return.height The {@link Ext.layout.SizeModel size model}
|
|
* for the height.
|
|
*/
|
|
getSizeModel: function (ownerCtSizeModel) {
|
|
var me = this,
|
|
models = Ext.layout.SizeModel,
|
|
ownerContext = me.componentLayout.ownerContext,
|
|
width = me.width,
|
|
height = me.height,
|
|
typeofWidth, typeofHeight,
|
|
hasPixelWidth, hasPixelHeight,
|
|
heightModel, ownerLayout, policy, shrinkWrap, topLevel, widthModel;
|
|
|
|
if (ownerContext) {
|
|
// If we are in the middle of a running layout, always report the current,
|
|
// dynamic size model rather than recompute it. This is not (only) a time
|
|
// saving thing, but a correctness thing since we cannot get the right answer
|
|
// otherwise.
|
|
widthModel = ownerContext.widthModel;
|
|
heightModel = ownerContext.heightModel;
|
|
}
|
|
|
|
if (!widthModel || !heightModel) {
|
|
hasPixelWidth = ((typeofWidth = typeof width) == 'number');
|
|
hasPixelHeight = ((typeofHeight = typeof height) == 'number');
|
|
topLevel = me.floating || !(ownerLayout = me.ownerLayout);
|
|
|
|
// Floating or no owner layout, e.g. rendered using renderTo
|
|
if (topLevel) {
|
|
policy = Ext.layout.Layout.prototype.autoSizePolicy;
|
|
shrinkWrap = me.floating ? 3 : me.shrinkWrap;
|
|
|
|
if (hasPixelWidth) {
|
|
widthModel = models.configured;
|
|
}
|
|
|
|
if (hasPixelHeight) {
|
|
heightModel = models.configured;
|
|
}
|
|
} else {
|
|
policy = ownerLayout.getItemSizePolicy(me, ownerCtSizeModel);
|
|
shrinkWrap = ownerLayout.isItemShrinkWrap(me);
|
|
}
|
|
|
|
if (ownerContext) {
|
|
ownerContext.ownerSizePolicy = policy;
|
|
}
|
|
|
|
shrinkWrap = (shrinkWrap === true) ? 3 : (shrinkWrap || 0); // false->0, true->3
|
|
|
|
// Now that we have shrinkWrap as a 0-3 value, we need to turn off shrinkWrap
|
|
// bits for any dimension that has a configured size not in pixels. These must
|
|
// be read from the DOM.
|
|
//
|
|
if (topLevel && shrinkWrap) {
|
|
if (width && typeofWidth == 'string') {
|
|
shrinkWrap &= 2; // percentage, "30em" or whatever - not width shrinkWrap
|
|
}
|
|
if (height && typeofHeight == 'string') {
|
|
shrinkWrap &= 1; // percentage, "30em" or whatever - not height shrinkWrap
|
|
}
|
|
}
|
|
|
|
if (shrinkWrap !== 3) {
|
|
if (!ownerCtSizeModel) {
|
|
ownerCtSizeModel = me.ownerCt && me.ownerCt.getSizeModel();
|
|
}
|
|
|
|
if (ownerCtSizeModel) {
|
|
shrinkWrap |= (ownerCtSizeModel.width.shrinkWrap ? 1 : 0) | (ownerCtSizeModel.height.shrinkWrap ? 2 : 0);
|
|
}
|
|
}
|
|
|
|
if (!widthModel) {
|
|
if (!policy.setsWidth) {
|
|
if (hasPixelWidth) {
|
|
widthModel = models.configured;
|
|
} else {
|
|
widthModel = (shrinkWrap & 1) ? models.shrinkWrap : models.natural;
|
|
}
|
|
} else if (policy.readsWidth) {
|
|
if (hasPixelWidth) {
|
|
widthModel = models.calculatedFromConfigured;
|
|
} else {
|
|
widthModel = (shrinkWrap & 1) ? models.calculatedFromShrinkWrap :
|
|
models.calculatedFromNatural;
|
|
}
|
|
} else {
|
|
widthModel = models.calculated;
|
|
}
|
|
}
|
|
|
|
if (!heightModel) {
|
|
if (!policy.setsHeight) {
|
|
if (hasPixelHeight) {
|
|
heightModel = models.configured;
|
|
} else {
|
|
heightModel = (shrinkWrap & 2) ? models.shrinkWrap : models.natural;
|
|
}
|
|
} else if (policy.readsHeight) {
|
|
if (hasPixelHeight) {
|
|
heightModel = models.calculatedFromConfigured;
|
|
} else {
|
|
heightModel = (shrinkWrap & 2) ? models.calculatedFromShrinkWrap :
|
|
models.calculatedFromNatural;
|
|
}
|
|
} else {
|
|
heightModel = models.calculated;
|
|
}
|
|
}
|
|
}
|
|
|
|
// We return one of the cached objects with the proper "width" and "height" as the
|
|
// sizeModels we have determined.
|
|
return widthModel.pairsByHeightOrdinal[heightModel.ordinal];
|
|
},
|
|
|
|
isDescendant: function(ancestor) {
|
|
if (ancestor.isContainer) {
|
|
for (var c = this.ownerCt; c; c = c.ownerCt) {
|
|
if (c === ancestor) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* This method needs to be called whenever you change something on this component that requires the Component's
|
|
* layout to be recalculated.
|
|
* @return {Ext.container.Container} this
|
|
*/
|
|
doComponentLayout : function() {
|
|
this.updateLayout();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Forces this component to redo its componentLayout.
|
|
* @deprecated 4.1.0 Use {@link #updateLayout} instead.
|
|
*/
|
|
forceComponentLayout: function () {
|
|
this.updateLayout();
|
|
},
|
|
|
|
// @private
|
|
setComponentLayout : function(layout) {
|
|
var currentLayout = this.componentLayout;
|
|
if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
|
|
currentLayout.setOwner(null);
|
|
}
|
|
this.componentLayout = layout;
|
|
layout.setOwner(this);
|
|
},
|
|
|
|
getComponentLayout : function() {
|
|
var me = this;
|
|
|
|
if (!me.componentLayout || !me.componentLayout.isLayout) {
|
|
me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
|
|
}
|
|
return me.componentLayout;
|
|
},
|
|
|
|
/**
|
|
* Called by the layout system after the Component has been laid out.
|
|
*
|
|
* @param {Number} width The width that was set
|
|
* @param {Number} height The height that was set
|
|
* @param {Number/undefined} oldWidth The old width, or `undefined` if this was the initial layout.
|
|
* @param {Number/undefined} oldHeight The old height, or `undefined` if this was the initial layout.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterComponentLayout: function(width, height, oldWidth, oldHeight) {
|
|
var me = this;
|
|
|
|
if (++me.componentLayoutCounter === 1) {
|
|
me.afterFirstLayout(width, height);
|
|
}
|
|
|
|
if (width !== oldWidth || height !== oldHeight) {
|
|
me.onResize(width, height, oldWidth, oldHeight);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Occurs before `componentLayout` is run. Returning `false` from this method will prevent the `componentLayout` from
|
|
* being executed.
|
|
*
|
|
* @param {Number} adjWidth The box-adjusted width that was set.
|
|
* @param {Number} adjHeight The box-adjusted height that was set.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
beforeComponentLayout: function(width, height) {
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @member Ext.Component
|
|
* 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 #event-move} event.
|
|
* @param {Number/Number[]/Object} x The new left, an array of `[x,y]`, or animation config object containing `x` and `y` properties.
|
|
* @param {Number} [y] The new top.
|
|
* @param {Boolean/Object} [animate] If `true`, the Component is _animated_ into its new position. You may also pass an
|
|
* animation configuration.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setPosition: function(x, y, animate) {
|
|
var me = this,
|
|
pos = me.beforeSetPosition.apply(me, arguments);
|
|
|
|
if (pos && me.rendered) {
|
|
x = pos.x;
|
|
y = pos.y;
|
|
|
|
if (animate) {
|
|
// Proceed only if the new position is different from the current
|
|
// one. We only do these DOM reads in the animate case as we don't
|
|
// want to incur the penalty of read/write on every call to setPosition
|
|
if (x !== me.getLocalX() || y !== me.getLocalY()) {
|
|
me.stopAnimation();
|
|
me.animate(Ext.apply({
|
|
duration: 1000,
|
|
listeners: {
|
|
afteranimate: Ext.Function.bind(me.afterSetPosition, me, [x, y])
|
|
},
|
|
to: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
}, animate));
|
|
}
|
|
} else {
|
|
me.setLocalXY(x, y);
|
|
me.afterSetPosition(x, y);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private Template method called before a Component is positioned.
|
|
*
|
|
* Ensures that the position is adjusted so that the Component is constrained if so configured.
|
|
*/
|
|
beforeSetPosition: function (x, y, animate) {
|
|
var pos, x0;
|
|
|
|
// Decode members of x if x is an array or an object.
|
|
// If it is numeric (including zero), we need do nothing.
|
|
if (x) {
|
|
// Position in first argument as an array of [x, y]
|
|
if (Ext.isNumber(x0 = x[0])) {
|
|
animate = y;
|
|
y = x[1];
|
|
x = x0;
|
|
}
|
|
// Position in first argument as object w/ x & y properties
|
|
else if ((x0 = x.x) !== undefined) {
|
|
animate = y;
|
|
y = x.y;
|
|
x = x0;
|
|
}
|
|
}
|
|
|
|
if (this.constrain || this.constrainHeader) {
|
|
pos = this.calculateConstrainedPosition(null, [x, y], true);
|
|
if (pos) {
|
|
x = pos[0];
|
|
y = pos[1];
|
|
}
|
|
}
|
|
|
|
// Set up the return info and store the position in this object
|
|
pos = {
|
|
x : this.x = x,
|
|
y : this.y = y,
|
|
anim: animate,
|
|
hasX: x !== undefined,
|
|
hasY: y !== undefined
|
|
};
|
|
|
|
return (pos.hasX || pos.hasY) ? pos : null;
|
|
},
|
|
|
|
/**
|
|
* Template method called after a Component has been positioned.
|
|
*
|
|
* @param {Number} x
|
|
* @param {Number} y
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterSetPosition: function(x, y) {
|
|
var me = this;
|
|
me.onPosition(x, y);
|
|
if (me.hasListeners.move) {
|
|
me.fireEvent('move', me, x, y);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called after the component is moved, this method is empty by default but can be implemented by any
|
|
* subclass that needs to perform custom logic after a move occurs.
|
|
*
|
|
* @param {Number} x The new x position.
|
|
* @param {Number} y The new y position.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onPosition: Ext.emptyFn,
|
|
|
|
/**
|
|
* Sets the width of the component. This method fires the {@link #resize} event.
|
|
*
|
|
* @param {Number} width The new width to setThis may be one of:
|
|
*
|
|
* - A Number specifying the new width in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS width style.
|
|
*
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setWidth : function(width) {
|
|
return this.setSize(width);
|
|
},
|
|
|
|
/**
|
|
* Sets the height of the component. This method fires the {@link #resize} event.
|
|
*
|
|
* @param {Number} height The new height to set. This may be one of:
|
|
*
|
|
* - A Number specifying the new height in the {@link #getEl Element}'s {@link Ext.Element#defaultUnit}s (by default, pixels).
|
|
* - A String used to set the CSS height style.
|
|
* - _undefined_ to leave the height unchanged.
|
|
*
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setHeight : function(height) {
|
|
return this.setSize(undefined, height);
|
|
},
|
|
|
|
/**
|
|
* Gets the current size of the component's underlying element.
|
|
* @return {Object} An object containing the element's size `{width: (element width), height: (element height)}`
|
|
*/
|
|
getSize : function() {
|
|
return this.el.getSize();
|
|
},
|
|
|
|
/**
|
|
* Gets the current width of the component's underlying element.
|
|
* @return {Number}
|
|
*/
|
|
getWidth : function() {
|
|
return this.el.getWidth();
|
|
},
|
|
|
|
/**
|
|
* Gets the current height of the component's underlying element.
|
|
* @return {Number}
|
|
*/
|
|
getHeight : function() {
|
|
return this.el.getHeight();
|
|
},
|
|
|
|
/**
|
|
* Gets the {@link Ext.ComponentLoader} for this Component.
|
|
* @return {Ext.ComponentLoader} The loader instance, null if it doesn't exist.
|
|
*/
|
|
getLoader: function(){
|
|
var me = this,
|
|
autoLoad = me.autoLoad ? (Ext.isObject(me.autoLoad) ? me.autoLoad : {url: me.autoLoad}) : null,
|
|
loader = me.loader || autoLoad;
|
|
|
|
if (loader) {
|
|
if (!loader.isLoader) {
|
|
me.loader = new Ext.ComponentLoader(Ext.apply({
|
|
target: me,
|
|
autoLoad: autoLoad
|
|
}, loader));
|
|
} else {
|
|
loader.setTarget(me);
|
|
}
|
|
return me.loader;
|
|
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part
|
|
* of the `dockedItems` collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default)
|
|
* @param {Object} dock The dock position.
|
|
* @param {Boolean} [layoutParent=false] `true` to re-layout parent.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setDocked : function(dock, layoutParent) {
|
|
var me = this;
|
|
|
|
me.dock = dock;
|
|
if (layoutParent && me.ownerCt && me.rendered) {
|
|
me.ownerCt.updateLayout();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {String/Number} border The border, see {@link #border}. If a falsey value is passed
|
|
* the border will be removed.
|
|
*/
|
|
setBorder: function(border, /* private */ targetEl) {
|
|
var me = this,
|
|
initial = !!targetEl;
|
|
|
|
if (me.rendered || initial) {
|
|
if (!initial) {
|
|
targetEl = me.el;
|
|
}
|
|
|
|
if (!border) {
|
|
border = 0;
|
|
} else if (border === true) {
|
|
border = '1px';
|
|
} else {
|
|
border = this.unitizeBox(border);
|
|
}
|
|
targetEl.setStyle('border-width', border);
|
|
if (!initial) {
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
me.border = border;
|
|
},
|
|
|
|
onDestroy : function() {
|
|
var me = this;
|
|
|
|
if (me.monitorResize && Ext.EventManager.resizeEvent) {
|
|
Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
|
|
}
|
|
|
|
// Destroying the floatingItems ZIndexManager will also destroy descendant floating Components
|
|
Ext.destroy(
|
|
me.componentLayout,
|
|
me.loadMask,
|
|
me.floatingDescendants
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Destroys the Component.
|
|
* @since 1.1.0
|
|
*/
|
|
destroy : function() {
|
|
var me = this,
|
|
selectors = me.renderSelectors,
|
|
selector,
|
|
el;
|
|
|
|
if (!me.isDestroyed) {
|
|
if (!me.hasListeners.beforedestroy || me.fireEvent('beforedestroy', me) !== false) {
|
|
me.destroying = true;
|
|
me.beforeDestroy();
|
|
|
|
if (me.floating) {
|
|
delete me.floatParent;
|
|
// A zIndexManager is stamped into a *floating* Component when it is added to a Container.
|
|
// If it has no zIndexManager at render time, it is assigned to the global Ext.WindowManager instance.
|
|
if (me.zIndexManager) {
|
|
me.zIndexManager.unregister(me);
|
|
}
|
|
} else if (me.ownerCt && me.ownerCt.remove) {
|
|
me.ownerCt.remove(me, false);
|
|
}
|
|
|
|
me.stopAnimation();
|
|
me.onDestroy();
|
|
|
|
// Attempt to destroy all plugins
|
|
Ext.destroy(me.plugins);
|
|
|
|
if (me.hasListeners.destroy) {
|
|
me.fireEvent('destroy', me);
|
|
}
|
|
Ext.ComponentManager.unregister(me);
|
|
|
|
me.mixins.state.destroy.call(me);
|
|
|
|
me.clearListeners();
|
|
// make sure we clean up the element references after removing all events
|
|
if (me.rendered) {
|
|
if (!me.preserveElOnDestroy) {
|
|
me.el.remove();
|
|
}
|
|
me.mixins.elementCt.destroy.call(me); // removes childEls
|
|
if (selectors) {
|
|
for (selector in selectors) {
|
|
if (selectors.hasOwnProperty(selector)) {
|
|
el = me[selector];
|
|
if (el) { // in case any other code may have already removed it
|
|
delete me[selector];
|
|
el.remove();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
delete me.el;
|
|
delete me.frameBody;
|
|
delete me.rendered;
|
|
}
|
|
|
|
me.destroying = false;
|
|
me.isDestroyed = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Determines whether this component is the descendant of a particular container.
|
|
* @param {Ext.Container} container
|
|
* @return {Boolean} `true` if the component is the descendant of a particular container, otherwise `false`.
|
|
*/
|
|
isDescendantOf: function(container) {
|
|
return !!this.findParentBy(function(p){
|
|
return p === container;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* A component's hierarchyState is used to keep track of aspects of a component's
|
|
* state that affect its descendants hierarchically like "collapsed" and "hidden".
|
|
* For example, if this.hierarchyState.hidden == true, it means that either this
|
|
* component, or one of its ancestors is hidden.
|
|
*
|
|
* Hierarchical state management is implemented by chaining each component's
|
|
* hierarchyState property to its parent container's hierarchyState property via the
|
|
* prototype. The result is such that if a component's hierarchyState does not have
|
|
* it's own property, it inherits the property from the nearest ancestor that does.
|
|
*
|
|
* To set a hierarchical "hidden" value:
|
|
*
|
|
* this.getHierarchyState().hidden = true;
|
|
*
|
|
* It is important to remember when unsetting hierarchyState properties to delete
|
|
* them instead of just setting them to a falsy value. This ensures that the
|
|
* hierarchyState returns to a state of inheriting the value instead of overriding it
|
|
* To unset the hierarchical "hidden" value:
|
|
*
|
|
* delete this.getHierarchyState().hidden;
|
|
*
|
|
* IMPORTANT! ALWAYS access hierarchyState using this method, not by accessing
|
|
* this.hierarchyState directly. The hierarchyState property does not exist until
|
|
* the first time getHierarchyState() is called. At that point getHierarchyState()
|
|
* walks up the component tree to establish the hierarchyState prototype chain.
|
|
* Additionally the hierarchyState property should NOT be relied upon even after
|
|
* the initial call to getHierarchyState() because it is possible for the
|
|
* hierarchyState to be invalidated. Invalidation typically happens when a component
|
|
* is moved to a new container. In such a case the hierarchy state remains invalid
|
|
* until the next time getHierarchyState() is called on the component or one of its
|
|
* descendants.
|
|
*
|
|
* @private
|
|
*/
|
|
getHierarchyState: function (inner) {
|
|
var me = this,
|
|
hierarchyState = (inner && me.hierarchyStateInner) || me.hierarchyState,
|
|
ownerCt = me.ownerCt,
|
|
parent, layout, hierarchyStateInner, getInner;
|
|
|
|
if (!hierarchyState || hierarchyState.invalid) {
|
|
// Use upward navigational link, not ownerCt.
|
|
// 99% of the time, this will use ownerCt/floatParent.
|
|
// Certain floating components do not have an ownerCt, but they are still linked
|
|
// into a navigational hierarchy. The getRefOwner method normalizes these differences.
|
|
parent = me.getRefOwner();
|
|
|
|
if (ownerCt) {
|
|
// This will only be true if the item is a "child" of its owning container
|
|
// For example, a docked item will not get the inner hierarchy state
|
|
getInner = me.ownerLayout === ownerCt.layout;
|
|
}
|
|
|
|
me.hierarchyState = hierarchyState =
|
|
// chain this component's hierarchyState to that of its parent. If it
|
|
// doesn't have a parent, then chain to the rootHierarchyState. This is
|
|
// done so that when there is a viewport, all component's will inherit
|
|
// from its hierarchyState, even components that are not descendants of
|
|
// the viewport.
|
|
Ext.Object.chain(parent ? parent.getHierarchyState(getInner)
|
|
: Ext.rootHierarchyState);
|
|
|
|
me.initHierarchyState(hierarchyState);
|
|
if ((layout = me.componentLayout).initHierarchyState) {
|
|
layout.initHierarchyState(hierarchyState);
|
|
}
|
|
|
|
if (me.isContainer) {
|
|
me.hierarchyStateInner = hierarchyStateInner = Ext.Object.chain(hierarchyState);
|
|
|
|
layout = me.layout;
|
|
if (layout && layout.initHierarchyState) {
|
|
layout.initHierarchyState(hierarchyStateInner, hierarchyState);
|
|
}
|
|
if (inner) {
|
|
hierarchyState = hierarchyStateInner;
|
|
}
|
|
}
|
|
}
|
|
|
|
return hierarchyState;
|
|
},
|
|
|
|
/**
|
|
* Called by {@link #getHierarchyState} to initialize the hierarchyState the first
|
|
* time it is requested.
|
|
* @private
|
|
*/
|
|
initHierarchyState: function(hierarchyState) {
|
|
var me = this;
|
|
|
|
if (me.collapsed) {
|
|
hierarchyState.collapsed = true;
|
|
}
|
|
if (me.hidden) {
|
|
hierarchyState.hidden = true;
|
|
}
|
|
if (me.collapseImmune) {
|
|
hierarchyState.collapseImmune = true;
|
|
}
|
|
},
|
|
|
|
// **********************************************************************************
|
|
// Begin Positionable methods
|
|
// **********************************************************************************
|
|
|
|
getAnchorToXY: function(el, anchor, local, mySize) {
|
|
return el.getAnchorXY(anchor, local, mySize);
|
|
},
|
|
|
|
getBorderPadding: function() {
|
|
return this.el.getBorderPadding();
|
|
},
|
|
|
|
getLocalX: function() {
|
|
return this.el.getLocalX();
|
|
},
|
|
|
|
getLocalXY: function() {
|
|
return this.el.getLocalXY();
|
|
},
|
|
|
|
getLocalY: function() {
|
|
return this.el.getLocalY();
|
|
},
|
|
|
|
getX: function() {
|
|
return this.el.getX();
|
|
},
|
|
|
|
getXY: function() {
|
|
return this.el.getXY();
|
|
},
|
|
|
|
getY: function() {
|
|
return this.el.getY();
|
|
},
|
|
|
|
setLocalX: function(x) {
|
|
this.el.setLocalX(x);
|
|
},
|
|
|
|
setLocalXY: function(x, y) {
|
|
this.el.setLocalXY(x, y);
|
|
},
|
|
|
|
setLocalY: function(y) {
|
|
this.el.setLocalY(y);
|
|
},
|
|
|
|
setX: function(x, animate) {
|
|
this.el.setX(x, animate);
|
|
},
|
|
|
|
setXY: function(xy, animate) {
|
|
this.el.setXY(xy, animate);
|
|
},
|
|
|
|
setY: function(y, animate) {
|
|
this.el.setY(y, animate);
|
|
}
|
|
|
|
// **********************************************************************************
|
|
// End Positionable methods
|
|
// **********************************************************************************
|
|
}, function() {
|
|
var AbstractComponent = this;
|
|
|
|
AbstractComponent.createAlias({
|
|
on: 'addListener',
|
|
prev: 'previousSibling',
|
|
next: 'nextSibling'
|
|
});
|
|
|
|
/**
|
|
* @inheritdoc Ext.AbstractComponent#resumeLayouts
|
|
* @member Ext
|
|
*/
|
|
Ext.resumeLayouts = function (flush) {
|
|
AbstractComponent.resumeLayouts(flush);
|
|
};
|
|
|
|
/**
|
|
* @inheritdoc Ext.AbstractComponent#suspendLayouts
|
|
* @member Ext
|
|
*/
|
|
Ext.suspendLayouts = function () {
|
|
AbstractComponent.suspendLayouts();
|
|
};
|
|
|
|
/**
|
|
* Utility wrapper that suspends layouts of all components for the duration of a given function.
|
|
* @param {Function} fn The function to execute.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the specified function is executed.
|
|
* @member Ext
|
|
*/
|
|
Ext.batchLayouts = function(fn, scope) {
|
|
AbstractComponent.suspendLayouts();
|
|
// Invoke the function
|
|
fn.call(scope);
|
|
AbstractComponent.resumeLayouts(true);
|
|
};
|
|
});
|
|
|
|
/**
|
|
* This override adds RTL support and the `rtl` config option to AbstactComponent.
|
|
*/
|
|
Ext.define('Ext.rtl.AbstractComponent', {
|
|
override: 'Ext.AbstractComponent',
|
|
|
|
/**
|
|
* @cfg {Boolean} rtl
|
|
* True to layout this component and its descendants in "rtl" (right-to-left) mode.
|
|
* Can be explicitly set to false to override a true value inherited from an ancestor.
|
|
*/
|
|
|
|
initStyles: function(){
|
|
if (this.getHierarchyState().rtl) {
|
|
this.horizontalPosProp = 'right';
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
convertPositionSpec: function(posSpec) {
|
|
// Since anchoring is done based on page level coordinates, we need to invert
|
|
// left and right in the position spec when the direction of the compoent being
|
|
// aligned is not the same as the direction of the viewport/body
|
|
if ((Ext.rootHierarchyState.rtl || false) !== (this.getHierarchyState().rtl || false)) {
|
|
posSpec = posSpec.replace(/l/g, 'tmp').replace(/r/g, 'l').replace(/tmp/g, 'r');
|
|
}
|
|
return posSpec;
|
|
},
|
|
|
|
getAnchorToXY: function(el, anchor, local, mySize) {
|
|
var doc = document,
|
|
pos, scroll, extraX, extraY;
|
|
|
|
if (el.dom == doc.body || el.dom == doc) {
|
|
// anchor the element using the same coordinate system as the viewport or body
|
|
scroll = Ext.rootHierarchyState.rtl ? el.rtlGetScroll() : el.getScroll();
|
|
extraX = scroll.left;
|
|
extraY = scroll.top;
|
|
} else {
|
|
pos = el.getXY();
|
|
extraX = local ? 0 : pos[0];
|
|
extraY = local ? 0 : pos[1];
|
|
}
|
|
|
|
return el.calculateAnchorXY(anchor, extraX, extraY, mySize);
|
|
},
|
|
|
|
getBorderPadding: function() {
|
|
var borderPadding = this.el.getBorderPadding(),
|
|
xBegin;
|
|
|
|
if (this.isParentRtl()) {
|
|
xBegin = borderPadding.xBegin;
|
|
borderPadding.xBegin = borderPadding.xEnd;
|
|
borderPadding.xEnd = xBegin;
|
|
}
|
|
|
|
return borderPadding;
|
|
},
|
|
|
|
getLocalX: function() {
|
|
return this.isLocalRtl() ? this.el.rtlGetLocalX() : this.el.getLocalX();
|
|
},
|
|
|
|
getLocalXY: function() {
|
|
return this.isLocalRtl() ? this.el.rtlGetLocalXY() : this.el.getLocalXY();
|
|
},
|
|
|
|
unitizeBox: function(box) {
|
|
if (this.getHierarchyState().rtl) {
|
|
return Ext.dom.Element.rtlUnitizeBox(box);
|
|
} else {
|
|
return this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
parseBox: function(box) {
|
|
if (this.getHierarchyState().rtl) {
|
|
return Ext.dom.Element.rtlParseBox(box);
|
|
} else {
|
|
return this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
initHierarchyState: function(hierarchyState) {
|
|
this.callParent(arguments);
|
|
var rtl = this.rtl;
|
|
|
|
if (rtl !== undefined) {
|
|
// unlike the other hierarchical properties which should always
|
|
// be inherited from the hierarchy unless true, rtl should only
|
|
// be inherited if undefined, that is if this component instance
|
|
// does not have rtl specified as true or false.
|
|
hierarchyState.rtl = rtl;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns true if this component's local coordinate system is rtl. For normal
|
|
* components this equates to the value of isParentRtl(). Floaters are a bit different
|
|
* because a floater's element can be a childNode of something other than its
|
|
* parent component's element. For floaters we have to read the dom to see if the
|
|
* component's element's parentNode has a css direction value of "rtl".
|
|
* @return {Boolean}
|
|
* @private
|
|
*/
|
|
isLocalRtl: function() {
|
|
var me = this,
|
|
rtl, offsetParent, doc;
|
|
|
|
if (me.floating) {
|
|
if (me._isOffsetParentRtl === undefined) {
|
|
|
|
// position:fixed elements do not report an offsetParent, so fall back to parentNode
|
|
offsetParent = this.el.dom.offsetParent || this.el.dom.parentNode;
|
|
if (offsetParent) {
|
|
doc = document;
|
|
if (offsetParent === doc.documentElement) {
|
|
// the default offsetParent is the body in most browsers,
|
|
// in IE7 strict it is the document element. If this is the case
|
|
// test the body's style, since its direction style is what
|
|
// determines if the page-level coordinate system is rtl.
|
|
offsetParent = doc.body;
|
|
}
|
|
me._isOffsetParentRtl =
|
|
Ext.fly(offsetParent, '_isLocalRtl').isStyle('direction', 'rtl');
|
|
}
|
|
}
|
|
rtl = !!me._isOffsetParentRtl;
|
|
} else {
|
|
rtl = this.isParentRtl();
|
|
}
|
|
|
|
return rtl;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this component's parent container is rtl. Used by rtl positioning
|
|
* methods to determine if the component should be positioned using a right-to-left
|
|
* coordinate system.
|
|
* @return {Boolean}
|
|
* @private
|
|
*/
|
|
isParentRtl: function() {
|
|
var me = this,
|
|
hierarchyState = me.getHierarchyState(),
|
|
isRtl = false,
|
|
myRtl;
|
|
|
|
if (hierarchyState.hasOwnProperty('rtl')) {
|
|
// Temporarily remove this component's rtl property so we can see what the rtl
|
|
// value is on the prototype. A component is only rtl positioned if it is
|
|
// inside of an rtl coordinate system (if one of it's ancestors is rtl). We
|
|
// can't just use ownerCt/floatParent hierarchyState, because components may
|
|
// not have a container, but might still be part of a rtl coordinate system by
|
|
// virtue of the viewport. These components will inherit the correct rtl
|
|
// value from the prototype becuase all hierarchy states inherit from
|
|
// Ext.rootHierarchyState
|
|
myRtl = hierarchyState.rtl;
|
|
delete hierarchyState.rtl;
|
|
}
|
|
|
|
if (hierarchyState.rtl) {
|
|
isRtl = true;
|
|
}
|
|
|
|
if (myRtl !== undefined) {
|
|
// restore this component's original hierarchyState rtl property
|
|
hierarchyState.rtl = myRtl;
|
|
}
|
|
|
|
return isRtl;
|
|
},
|
|
|
|
setLocalX: function(x) {
|
|
return this.isLocalRtl() ? this.el.rtlSetLocalX(x) : this.el.setLocalX(x);
|
|
},
|
|
|
|
setLocalXY: function(x, y) {
|
|
return this.isLocalRtl() ? this.el.rtlSetLocalXY(x, y) : this.el.setLocalXY(x, y);
|
|
},
|
|
|
|
isOppositeRootDirection: function(){
|
|
return !this.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl;
|
|
}
|
|
}, function() {
|
|
Ext.on({
|
|
ready: function() {
|
|
// If the document or body has "direction:rtl" then we set the rtl flag in the
|
|
// root hierarchy state so that the page-level coordinate system will be
|
|
// right-based (similar to using a Viewport with "rtl: true").
|
|
if ((Ext.fly(document.documentElement).isStyle('direction', 'rtl')) ||
|
|
(Ext.getBody().isStyle('direction', 'rtl'))) {
|
|
Ext.rootHierarchyState.rtl = true;
|
|
}
|
|
},
|
|
single: true,
|
|
priority: 1000
|
|
});
|
|
});
|
|
|
|
|
|
Ext.define('Ext.rtl.dom.Element_static', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
statics: {
|
|
rtlUnitizeBox: function(box, units){
|
|
var a = this.addUnits,
|
|
b = this.parseBox(box);
|
|
|
|
// Usual order is trbl, so reverse it
|
|
// to return tlbr
|
|
return a(b.top, units) + ' ' +
|
|
a(b.left, units) + ' ' +
|
|
a(b.bottom, units) + ' ' +
|
|
a(b.right, units);
|
|
},
|
|
|
|
rtlParseBox: function(box){
|
|
var box = Ext.dom.Element.parseBox(box),
|
|
temp;
|
|
|
|
temp = box.left;
|
|
box.left = box.right;
|
|
box.right = temp;
|
|
|
|
return box;
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.dom.Element_scroll', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
rtlGetScroll: function() {
|
|
var me = this,
|
|
dom = me.dom,
|
|
doc = document,
|
|
body = doc.body,
|
|
scroll = me.getScroll(),
|
|
// The left value returned from getScroll() may be a negative number. In rtl
|
|
// mode left should always be reported as a positive number of pixels from the
|
|
// right, so use the absolute value of left.
|
|
left = Math.abs(scroll.left),
|
|
isDocOrBody = (dom === doc || dom === body);
|
|
|
|
if (isDocOrBody ? (3 & me._rtlDocScrollFlag) : (me._rtlScrollFlag === 1)) {
|
|
// If the browser reports scrollLeft as the number of pixels from left
|
|
// (same as ltr) we need to convert it to a rtl position by subtracting it
|
|
// from scrollWidth
|
|
if (isDocOrBody) {
|
|
dom = body;
|
|
}
|
|
|
|
left = dom.scrollWidth - left -
|
|
(isDocOrBody ? Ext.Element.getViewportWidth() : dom.clientWidth);
|
|
}
|
|
scroll.left = left;
|
|
|
|
return scroll;
|
|
},
|
|
|
|
rtlGetScrollLeft: function() {
|
|
return this.rtlGetScroll().left;
|
|
},
|
|
|
|
rtlSetScrollLeft: function(left){
|
|
var me = this;
|
|
|
|
me.dom.scrollLeft = me.rtlNormalizeScrollLeft(left);
|
|
return me;
|
|
},
|
|
|
|
rtlScrollTo: function(side, value, animate) {
|
|
if (side === 'left') {
|
|
value = this.rtlNormalizeScrollLeft(value);
|
|
}
|
|
|
|
return this.scrollTo(side, value, animate);
|
|
},
|
|
|
|
rtlScrollBy: function(deltaX, deltaY, animate) {
|
|
var me = this,
|
|
dom = me.dom,
|
|
left, maxScroll;
|
|
|
|
// Extract args if deltas were passed as an Array.
|
|
if (deltaX.length) {
|
|
animate = deltaY;
|
|
deltaY = deltaX[1];
|
|
deltaX = deltaX[0];
|
|
} else if (typeof deltaX != 'number') { // or an object
|
|
animate = deltaY;
|
|
deltaY = deltaX.y;
|
|
deltaX = deltaX.x;
|
|
}
|
|
|
|
if (deltaX) {
|
|
left = me.rtlNormalizeScrollLeft(
|
|
me.constrainScrollLeft(me.rtlGetScrollLeft() + deltaX)
|
|
);
|
|
|
|
me.scrollTo('left', left, animate);
|
|
}
|
|
if (deltaY) {
|
|
me.scrollTo('top', me.constrainScrollTop(dom.scrollTop + deltaY), animate);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
rtlScroll: function(direction, distance, animate) {
|
|
if (!this.isScrollable()) {
|
|
return false;
|
|
}
|
|
var me = this,
|
|
side = direction === 'r' || direction === 'l' ? 'left' : 'top',
|
|
scrolled = false,
|
|
currentScroll, constrainedScroll;
|
|
|
|
if (direction === 'r') {
|
|
distance = -distance;
|
|
}
|
|
|
|
if (side === 'left') {
|
|
currentScroll = me.rtlGetScrollLeft();
|
|
constrainedScroll = me.constrainScrollLeft(currentScroll + distance);
|
|
} else {
|
|
currentScroll = me.dom.scrollTop;
|
|
constrainedScroll = me.constrainScrollTop(currentScroll + distance);
|
|
}
|
|
|
|
if (constrainedScroll !== currentScroll) {
|
|
this.rtlScrollTo(side, constrainedScroll, animate);
|
|
scrolled = true;
|
|
}
|
|
|
|
return scrolled;
|
|
},
|
|
|
|
rtlNormalizeScrollLeft: function(left){
|
|
var dom = this.dom,
|
|
flag = this._rtlScrollFlag;
|
|
|
|
if (flag === 0) {
|
|
left = -left;
|
|
} else if (flag === 1) {
|
|
left = dom.scrollWidth - left - dom.clientWidth;
|
|
}
|
|
return left;
|
|
}
|
|
|
|
}, function() {
|
|
var Element = this;
|
|
|
|
/*
|
|
* Sets a _rtlScrollFlag property on the Element class prototype indicating how the
|
|
* browser reports scrollLeft on overflowing rtl elements. This method cannot be used
|
|
* reliably on the documentElement or document.body because the behavior of these
|
|
* elements can be different from other elements in some browsers.
|
|
*
|
|
* 0: offset from right (negative number) - firefox
|
|
* 1: offset from left (positive number) - IE6, IE7, IE6 - IE9 quirks, and Webkit
|
|
* 2: offset from right (positive number) - IE8 - IE10 & IE10 quirks
|
|
*/
|
|
function cacheRtlScrollFlag() {
|
|
var el = Ext.getBody().createChild({
|
|
tag: 'div',
|
|
style: 'direction:rtl;position:absolute;overflow:auto;height:100px;width:100px;',
|
|
children: [{
|
|
tag: 'div',
|
|
style: 'height:30px;width:150px;'
|
|
}]
|
|
}),
|
|
dom = el.dom,
|
|
flag = 2;
|
|
|
|
if (dom.scrollLeft === 50) {
|
|
flag = 1;
|
|
} else {
|
|
dom.scrollLeft = -1;
|
|
if (dom.scrollLeft) {
|
|
flag = 0;
|
|
}
|
|
}
|
|
|
|
el.remove();
|
|
Element.prototype._rtlScrollFlag = flag;
|
|
}
|
|
|
|
/*
|
|
* scrollLeft on the document/body is reported differently from ordinary
|
|
* overflowing elements in many browsers (see getRtlScrollFlag).There are 2
|
|
* separate things we have to detect:
|
|
* 1. The element that overflows - when the document overflows some browsers
|
|
* set scrollLeft on the document body (webkit and IE quirks), while other
|
|
* browsers set scrollLeft on the documentElement (all other supported browsers
|
|
* at the time of this writing).
|
|
* 2. The scrollLeft of the overflowing document/body can be one of the
|
|
* following:
|
|
* a. number of pixels offset from right expressed as a negative number
|
|
* (Webkit, Firefox)
|
|
* b. number of pixels offset from right expressed as a positive number
|
|
* (IE8 - IE10 strict mode, and IE10 quirks mode.
|
|
* c. number of pixels offset from left expressed as a positive number
|
|
* (IE6 - IE9 quirks mode, and IE6/IE7 strict mode.
|
|
*
|
|
* The following logic feture detects the handling of scrollLeft and sets the
|
|
* _rtlDocScrollFlag property on this class' prototype as a bit flag which has
|
|
* the following values:
|
|
*
|
|
* 0 - docEl, negative right
|
|
* 1 - docEl, positive left
|
|
* 2 - docEl, positive right
|
|
* 4 - body, negative right
|
|
* 5 - body, positive left
|
|
*/
|
|
function cacheRtlDocScrollFlag() {
|
|
var doc = document,
|
|
docEl = doc.documentElement,
|
|
body = doc.body,
|
|
// flag defaults to body, negative right (webkit) so no detection needed
|
|
// is needed for this scenario
|
|
flag = 4,
|
|
bodyStyle = body.style,
|
|
// save the direction property so we can set it back when we are done.
|
|
direction = bodyStyle.direction,
|
|
el = Ext.getBody().createChild(
|
|
'<div style="height:20000px;width:20000px;"></div>'
|
|
),
|
|
dom = el.dom,
|
|
ltrRight, rtlRight
|
|
|
|
bodyStyle.direction = 'ltr';
|
|
ltrRight = dom.getBoundingClientRect().right;
|
|
|
|
bodyStyle.direction = 'rtl';
|
|
rtlRight = dom.getBoundingClientRect().right;
|
|
|
|
// when the body has vertical overflow some browser continue to show the
|
|
// vertical scrollbar on the right side of the page even in rtl mode.
|
|
Element.prototype._rtlBodyScrollbarOnRight = (ltrRight === rtlRight);
|
|
|
|
// First, check if scrollLeft is a non-zero value on the documentElement or
|
|
// body. This means scrollLeft is a positive number offset from the left.
|
|
if (docEl.scrollLeft > 0) {
|
|
// IE6/7 strict
|
|
flag = 1;
|
|
} else if (body.scrollLeft > 0) {
|
|
// IE6 - IE9 quirks
|
|
flag = 5;
|
|
} else {
|
|
// The next step is to attempt to set scrollLeft values, This allows us to
|
|
// test for non-zero values to see if the value was valid (scrollLeft
|
|
// resets to 0 when a non-valid value is set).
|
|
// attempt to set the documentElement's scrollLeft to a negative number
|
|
docEl.scrollLeft = -1;
|
|
if (docEl.scrollLeft) {
|
|
// it worked! we were able to set a negative scroll left on the
|
|
// documentElement (firefox)
|
|
flag = 0;
|
|
} else {
|
|
// attempt to set the documentElement's scrollLeft to a positive number
|
|
docEl.scrollLeft = 1;
|
|
if (docEl.scrollLeft) {
|
|
// success setting scroll left to a positive number on
|
|
// documentElement (IE8 strict, IE9 strict, and IE10 quirks)
|
|
flag = 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
el.remove();
|
|
if (!direction) {
|
|
// if direction is an empty string, we set it back to "ltr", because once
|
|
// the direction style on the body element is changed to "rtl" in webkit,
|
|
// it becomes permanent, even after it is set back to "", unless it is first
|
|
// explicitly set back to "ltr"
|
|
bodyStyle.direction = 'ltr';
|
|
// read the scroll width before setting the direction back to "".
|
|
// This forces webkit to update its computed direction style to ltr
|
|
body.scrollWidth;
|
|
}
|
|
// set direction back to its original value
|
|
bodyStyle.direction = direction;
|
|
Element.prototype._rtlDocScrollFlag = flag;
|
|
}
|
|
|
|
Ext.on({
|
|
ready: function() {
|
|
// This function attaches to onReady with a priority of 1000 so that we can
|
|
// detect how the browser reports scrollLeft by manipulating the document/body
|
|
// before any components have been rendered to the page.
|
|
cacheRtlDocScrollFlag();
|
|
cacheRtlScrollFlag();
|
|
},
|
|
single: true,
|
|
priority: 1001
|
|
});
|
|
});
|
|
|
|
/**
|
|
* This override adds RTL positioning methods to Ext.dom.Element.
|
|
*/
|
|
Ext.define('Ext.rtl.dom.Element_position', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
_positionTopRight: ['position', 'top', 'right'],
|
|
|
|
statics: {
|
|
getXY: function(el) {
|
|
var doc = document,
|
|
bd = doc.body,
|
|
docEl = doc.documentElement,
|
|
leftBorder = 0,
|
|
topBorder = 0,
|
|
ret = [0,0],
|
|
x, box, scroll;
|
|
|
|
el = Ext.getDom(el);
|
|
|
|
if(el !== doc && el !== bd){
|
|
// IE has the potential to throw when getBoundingClientRect
|
|
// is called on an element not attached to dom
|
|
if (Ext.isIE) {
|
|
try {
|
|
box = el.getBoundingClientRect();
|
|
// In some versions of IE, the documentElement (HTML element)
|
|
// will have a 2px border that gets included, so subtract it off
|
|
topBorder = docEl.clientTop || bd.clientTop;
|
|
leftBorder = docEl.clientLeft || bd.clientLeft;
|
|
} catch (ex) {
|
|
box = { left: 0, top: 0 };
|
|
}
|
|
} else {
|
|
box = el.getBoundingClientRect();
|
|
}
|
|
|
|
doc = Ext.fly(document, '_getXY');
|
|
if (Ext.rootHierarchyState.rtl) {
|
|
scroll = doc.rtlGetScroll();
|
|
x = Ext.Element.getViewportWidth() - box.right + scroll.left;
|
|
} else {
|
|
scroll = doc.getScroll();
|
|
x = box.left + scroll.left;
|
|
}
|
|
ret = [
|
|
Math.round(x - leftBorder),
|
|
Math.round(box.top + scroll.top - topBorder)
|
|
];
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
setXY: function(el, xy) {
|
|
(el = Ext.fly(el, '_setXY')).position();
|
|
|
|
var pts = el.translatePoints(xy),
|
|
style = el.dom.style,
|
|
pos;
|
|
|
|
style[Ext.rootHierarchyState.rtl ? 'left' : 'right'] = 'auto';
|
|
for (pos in pts) {
|
|
if (!isNaN(pts[pos])) {
|
|
style[pos] = pts[pos] + 'px';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getPositioning: function(autoPx){
|
|
var xStyle = Ext.rootHierarchyState.rtl ? 'right' : 'left',
|
|
styles = this.getStyle([xStyle, 'top', 'position', 'z-index']),
|
|
dom = this.dom;
|
|
|
|
if(autoPx) {
|
|
if(styles[xStyle] === 'auto') {
|
|
styles[xStyle] = (xStyle === 'left') ? (dom.offsetLeft + 'px') :
|
|
(dom.offsetParent.offsetWidth - dom.offsetLeft - dom.offsetWidth);
|
|
}
|
|
if(styles.top === 'auto') {
|
|
styles.top = dom.offsetTop + 'px';
|
|
}
|
|
}
|
|
|
|
return styles;
|
|
},
|
|
|
|
rtlGetLocalX: function() {
|
|
var me = this,
|
|
offsetParent = me.dom.offsetParent,
|
|
x = me.getStyle('right');
|
|
|
|
if (!x || x === 'auto') {
|
|
x = 0;
|
|
} else if (me.pxRe.test(x)) {
|
|
x = parseFloat(x);
|
|
} else {
|
|
x = me.getX();
|
|
if (offsetParent) {
|
|
x -= Ext.fly(offsetParent, '_rtlGetLocalX').getX();
|
|
}
|
|
}
|
|
|
|
return x;
|
|
},
|
|
|
|
rtlGetLocalXY: function() {
|
|
var me = this,
|
|
offsetParent = me.dom.offsetParent,
|
|
style = me.getStyle(['right', 'top']),
|
|
x = style.right,
|
|
y = style.top;
|
|
|
|
if (!x || x === 'auto') {
|
|
x = 0;
|
|
} else if (me.pxRe.test(x)) {
|
|
x = parseFloat(x);
|
|
} else {
|
|
x = me.getX();
|
|
if (offsetParent) {
|
|
x -= Ext.fly(offsetParent, '_rtlGetLocalXY').getX();
|
|
}
|
|
}
|
|
|
|
if (!y || y === 'auto') {
|
|
y = 0;
|
|
} else if (me.pxRe.test(y)) {
|
|
y = parseFloat(y);
|
|
} else {
|
|
y = me.getY();
|
|
if (offsetParent) {
|
|
y -= Ext.Element.getY(offsetParent);
|
|
}
|
|
}
|
|
|
|
return [x, y];
|
|
},
|
|
|
|
rtlSetLocalX: function(x) {
|
|
var style = this.dom.style;
|
|
|
|
// clear left style just in case it was previously set by setXY/setLocalXY
|
|
style.left = 'auto';
|
|
style.right = (x === null) ? 'auto' : x + 'px';
|
|
},
|
|
|
|
rtlSetLocalXY: function(x, y) {
|
|
var style = this.dom.style;
|
|
|
|
// clear left style just in case it was previously set by setXY/setLocalXY
|
|
style.left = 'auto';
|
|
|
|
if (x && x.length) {
|
|
y = x[1];
|
|
x = x[0];
|
|
}
|
|
|
|
if (x === null) {
|
|
style.right = 'auto';
|
|
} else if (x !== undefined) {
|
|
style.right = x + 'px';
|
|
}
|
|
|
|
if (y === null) {
|
|
style.top = 'auto';
|
|
} else if (y !== undefined) {
|
|
style.top = y + 'px';
|
|
}
|
|
},
|
|
|
|
rtlSetX: function(x, animate) {
|
|
return this.rtlSetXY([x, this.getY()], animate);
|
|
},
|
|
|
|
rtlSetXY: function(xy, animate) {
|
|
var me = this,
|
|
pts, style, pos;
|
|
|
|
if (!animate || !me.anim) {
|
|
pts = me.rtlTranslatePoints(xy);
|
|
style = me.dom.style;
|
|
|
|
// left position may have been previously set by setXY or setLocalXY
|
|
// so clear it here just in case.
|
|
style.left = 'auto';
|
|
for (pos in pts) {
|
|
if (!isNaN(pts[pos])) {
|
|
style[pos] = pts[pos] + "px";
|
|
}
|
|
}
|
|
} else {
|
|
if (!Ext.isObject(animate)) {
|
|
animate = {};
|
|
}
|
|
me.animate(Ext.applyIf({ to: { x: xy[0], y: xy[1] } }, animate));
|
|
}
|
|
return me;
|
|
},
|
|
|
|
rtlSetY: function(y, animate) {
|
|
return this.rtlSetXY([this.getX(), y], animate);
|
|
},
|
|
|
|
rtlTranslatePoints: function(x, y) {
|
|
var pos = this.rtlTranslateXY(x, y);
|
|
|
|
return {
|
|
right: pos.x,
|
|
top: pos.y
|
|
};
|
|
},
|
|
|
|
rtlTranslateXY: function(x, y) {
|
|
var me = this,
|
|
styles = me.getStyle(me._positionTopRight),
|
|
relative = styles.position == 'relative',
|
|
right = parseFloat(styles.right),
|
|
top = parseFloat(styles.top),
|
|
xy = me.getXY(),
|
|
dom = me.dom,
|
|
doc, body, offsetParentWidth, offsetParent;
|
|
|
|
if (x && x.length) {
|
|
y = x[1];
|
|
x = x[0];
|
|
}
|
|
if (isNaN(right)) {
|
|
doc = document;
|
|
body = doc.body;
|
|
if (dom === body) {
|
|
// translateXY can sometimes be called on the body element.
|
|
// e.g. in Renderable#afterFirstLayout if the "container" is a viewport
|
|
right = 0;
|
|
} else {
|
|
offsetParent = dom.offsetParent;
|
|
offsetParentWidth = (offsetParent &&
|
|
offsetParent !== body && offsetParent !== doc.documentElement) ?
|
|
offsetParent.scrollWidth : Ext.Element.getViewportWidth();
|
|
right = offsetParentWidth - dom.offsetLeft - me.getWidth();
|
|
}
|
|
}
|
|
if (isNaN(top)) {
|
|
top = relative ? 0 : me.dom.offsetTop;
|
|
}
|
|
right = (typeof x == 'number') ? x - xy[0] + right : undefined;
|
|
top = (typeof y == 'number') ? y - xy[1] + top : undefined;
|
|
return {
|
|
x: right,
|
|
y: top
|
|
};
|
|
},
|
|
|
|
setX: function(x, animate) {
|
|
return Ext.rootHierarchyState.rtl ? this.rtlSetX(x, animate) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
setXY: function(xy, animate) {
|
|
return Ext.rootHierarchyState.rtl ? this.rtlSetXY(xy, animate) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
setY: function(y, animate) {
|
|
return Ext.rootHierarchyState.rtl ? this.rtlSetY(y, animate) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
translatePoints: function(x, y) {
|
|
return Ext.rootHierarchyState.rtl ? this.rtlTranslatePoints(x, y) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
translateXY: function(x, y) {
|
|
return Ext.rootHierarchyState.rtl ? this.rtlTranslateXY(x, y) :
|
|
this.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.dom.Element_insertion', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
wrap: function() {
|
|
var parent = this.parent(),
|
|
rtlCls = Ext.baseCSSPrefix + 'rtl',
|
|
ltrCls = Ext.baseCSSPrefix + 'ltr',
|
|
wrapEl = this.callParent(arguments),
|
|
cls;
|
|
|
|
// if the parentNode of the element being wrapped has the "x-rtl" or "x-ltr" css
|
|
// class, then add that class to the wrapper as well. This ensures that descendant
|
|
// and child selectors still apply e.g. ".x-rtl > .x-foo" or ".x-ltr .x-foo"
|
|
if (parent.hasCls(rtlCls)) {
|
|
cls = rtlCls;
|
|
} else if (parent.hasCls(ltrCls)) {
|
|
cls = ltrCls;
|
|
}
|
|
|
|
if (cls) {
|
|
// superclass method may return dom, so use fly() to access the wrap el
|
|
Ext.fly(wrapEl, '_wrap').addCls(cls);
|
|
}
|
|
|
|
return wrapEl;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.dom.Element_anim', {
|
|
override: 'Ext.dom.Element',
|
|
|
|
rtlXAnchors: {
|
|
l: 'r',
|
|
r: 'l'
|
|
},
|
|
|
|
anchorAnimX: function(anchor) {
|
|
if (Ext.rootHierarchyState.rtl) {
|
|
anchor = this.rtlXAnchors[anchor];
|
|
}
|
|
this.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.EventObjectImpl', {
|
|
override: 'Ext.EventObjectImpl',
|
|
|
|
getXY: function() {
|
|
var xy = this.xy;
|
|
|
|
if (!xy) {
|
|
xy = this.callParent();
|
|
// since getXY is a page-level concept, we only need to check the
|
|
// rootHierarchyState once to see if all successive calls to getXY() should have
|
|
// their x-coordinate converted to rtl.
|
|
if (this.rtl || (this.rtl = Ext.rootHierarchyState.rtl)) {
|
|
xy[0] = Ext.Element.getViewportWidth() - xy[0];
|
|
}
|
|
}
|
|
return xy;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* 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's `disabled` flag to `false`
|
|
*
|
|
* - `disable` : The base implementation just sets the plugin's `disabled` flag to `true`
|
|
*/
|
|
Ext.define('Ext.AbstractPlugin', {
|
|
disabled: false,
|
|
|
|
/**
|
|
* @property {Boolean} isPlugin
|
|
* `true` in this class to identify an object as an instantiated Plugin, or subclass thereof.
|
|
*/
|
|
isPlugin: true,
|
|
|
|
/**
|
|
* Instantiates the plugin.
|
|
* @param {Object} [config] Configuration object.
|
|
*/
|
|
constructor: function(config) {
|
|
this.pluginConfig = config;
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
/**
|
|
* Creates clone of the plugin.
|
|
* @param {Object} [overrideCfg] Additional config for the derived plugin.
|
|
*/
|
|
clonePlugin: function(overrideCfg) {
|
|
return new this.self(Ext.apply({}, overrideCfg, this.pluginConfig));
|
|
},
|
|
|
|
/**
|
|
* Sets the component to which this plugin is attached.
|
|
* @param {Ext.Component} cmp Owner component.
|
|
*/
|
|
setCmp: function(cmp) {
|
|
this.cmp = cmp;
|
|
},
|
|
|
|
/**
|
|
* Returns the component to which this plugin is attached.
|
|
* @return {Ext.Component} Owner component.
|
|
*/
|
|
getCmp: function() {
|
|
return this.cmp;
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} pluginId
|
|
* A name for the plugin that can be set at creation time to then retrieve the plugin
|
|
* through {@link Ext.AbstractComponent#getPlugin getPlugin} method. For example:
|
|
*
|
|
* var grid = Ext.create('Ext.grid.Panel', {
|
|
* plugins: [{
|
|
* ptype: 'cellediting',
|
|
* clicksToEdit: 2,
|
|
* pluginId: 'cellplugin'
|
|
* }]
|
|
* });
|
|
*
|
|
* // later on:
|
|
* var plugin = grid.getPlugin('cellplugin');
|
|
*/
|
|
|
|
/**
|
|
* @method
|
|
* The init method is invoked after initComponent method 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 {Ext.Component} client The client Component which owns this plugin.
|
|
*/
|
|
init: Ext.emptyFn,
|
|
|
|
/**
|
|
* @method
|
|
* 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.
|
|
*/
|
|
destroy: Ext.emptyFn,
|
|
|
|
/**
|
|
* 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;
|
|
},
|
|
|
|
/**
|
|
* 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;
|
|
},
|
|
|
|
// Private.
|
|
// Inject a ptype property so that AbstractComponent.findPlugin(ptype) works.
|
|
onClassExtended: function(cls, data, hooks) {
|
|
var alias = data.alias;
|
|
|
|
// No ptype built into the class
|
|
if (alias && !data.ptype) {
|
|
if (Ext.isArray(alias)) {
|
|
alias = alias[0];
|
|
}
|
|
cls.prototype.ptype = alias.split('plugin.')[1];
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An Action is a piece of reusable functionality that can be abstracted out of any particular component so that it
|
|
* can be usefully shared among multiple components. Actions let you share handlers, configuration options and UI
|
|
* updates across any components that support the Action interface (primarily {@link Ext.toolbar.Toolbar},
|
|
* {@link Ext.button.Button} and {@link Ext.menu.Menu} components).
|
|
*
|
|
* Use a single Action instance as the config object for any number of UI Components which share the same configuration. The
|
|
* Action not only supplies the configuration, but allows all Components based upon it to have a common set of methods
|
|
* called at once through a single call to the Action.
|
|
*
|
|
* Any Component that is to be configured with an Action must also support
|
|
* the following methods:
|
|
*
|
|
* - setText(string)
|
|
* - setIconCls(string)
|
|
* - setDisabled(boolean)
|
|
* - setVisible(boolean)
|
|
* - setHandler(function)
|
|
*
|
|
* This allows the Action to control its associated Components.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* // Define the shared Action. Each Component below will have the same
|
|
* // display text and icon, and will display the same message on click.
|
|
* var action = new Ext.Action({
|
|
* {@link #text}: 'Do something',
|
|
* {@link #handler}: function(){
|
|
* Ext.Msg.alert('Click', 'You did something.');
|
|
* },
|
|
* {@link #iconCls}: 'do-something',
|
|
* {@link #itemId}: 'myAction'
|
|
* });
|
|
*
|
|
* var panel = new Ext.panel.Panel({
|
|
* title: 'Actions',
|
|
* width: 500,
|
|
* height: 300,
|
|
* tbar: [
|
|
* // Add the Action directly to a toolbar as a menu button
|
|
* action,
|
|
* {
|
|
* text: 'Action Menu',
|
|
* // Add the Action to a menu as a text item
|
|
* menu: [action]
|
|
* }
|
|
* ],
|
|
* items: [
|
|
* // Add the Action to the panel body as a standard button
|
|
* new Ext.button.Button(action)
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* // Change the text for all components using the Action
|
|
* action.setText('Something else');
|
|
*
|
|
* // Reference an Action through a container using the itemId
|
|
* var btn = panel.getComponent('myAction');
|
|
* var aRef = btn.baseAction;
|
|
* aRef.setText('New text');
|
|
*/
|
|
Ext.define('Ext.Action', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} [text='']
|
|
* The text to set for all components configured by this Action.
|
|
*/
|
|
/**
|
|
* @cfg {String} [iconCls='']
|
|
* The CSS class selector that specifies a background image to be used as the header icon for
|
|
* all components configured by this Action.
|
|
*
|
|
* An example of specifying a custom icon class would be something like:
|
|
*
|
|
* // specify the property in the config for the class:
|
|
* ...
|
|
* iconCls: 'do-something'
|
|
*
|
|
* // css class that specifies background image to be used as the icon image:
|
|
* .do-something { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [disabled=false]
|
|
* True to disable all components configured by this Action, false to enable them.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [hidden=false]
|
|
* True to hide all components configured by this Action, false to show them.
|
|
*/
|
|
/**
|
|
* @cfg {Function} handler
|
|
* The function that will be invoked by each component tied to this Action
|
|
* when the component's primary event is triggered.
|
|
*/
|
|
/**
|
|
* @cfg {String} itemId
|
|
* See {@link Ext.Component}.{@link Ext.Component#itemId itemId}.
|
|
*/
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope (this reference) in which the {@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());
|
|
this.items = [];
|
|
},
|
|
|
|
/*
|
|
* @property {Boolean} isAction
|
|
* `true` in this class to identify an object as an instantiated Action, or subclass thereof.
|
|
*/
|
|
isAction : true,
|
|
|
|
/**
|
|
* Sets the text to be displayed by all components configured by this Action.
|
|
* @param {String} text The text to display
|
|
*/
|
|
setText : function(text){
|
|
this.initialConfig.text = text;
|
|
this.callEach('setText', [text]);
|
|
},
|
|
|
|
/**
|
|
* Gets the text currently displayed by all components configured by this Action.
|
|
*/
|
|
getText : function(){
|
|
return this.initialConfig.text;
|
|
},
|
|
|
|
/**
|
|
* Sets the icon CSS class for all components configured by this Action. The class should supply
|
|
* a background image that will be used as the icon image.
|
|
* @param {String} cls The CSS class supplying the icon image
|
|
*/
|
|
setIconCls : function(cls){
|
|
this.initialConfig.iconCls = cls;
|
|
this.callEach('setIconCls', [cls]);
|
|
},
|
|
|
|
/**
|
|
* Gets the icon CSS class currently used by all components configured by this Action.
|
|
*/
|
|
getIconCls : function(){
|
|
return this.initialConfig.iconCls;
|
|
},
|
|
|
|
/**
|
|
* Sets the disabled state of all components configured by this Action. Shortcut method
|
|
* for {@link #enable} and {@link #disable}.
|
|
* @param {Boolean} disabled True to disable the component, false to enable it
|
|
*/
|
|
setDisabled : function(v){
|
|
this.initialConfig.disabled = v;
|
|
this.callEach('setDisabled', [v]);
|
|
},
|
|
|
|
/**
|
|
* Enables all components configured by this Action.
|
|
*/
|
|
enable : function(){
|
|
this.setDisabled(false);
|
|
},
|
|
|
|
/**
|
|
* Disables all components configured by this Action.
|
|
*/
|
|
disable : function(){
|
|
this.setDisabled(true);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the components using this Action are currently disabled, else returns false.
|
|
*/
|
|
isDisabled : function(){
|
|
return this.initialConfig.disabled;
|
|
},
|
|
|
|
/**
|
|
* Sets the hidden state of all components configured by this Action. Shortcut method
|
|
* for `{@link #hide}` and `{@link #show}`.
|
|
* @param {Boolean} hidden True to hide the component, false to show it.
|
|
*/
|
|
setHidden : function(v){
|
|
this.initialConfig.hidden = v;
|
|
this.callEach('setVisible', [!v]);
|
|
},
|
|
|
|
/**
|
|
* Shows all components configured by this Action.
|
|
*/
|
|
show : function(){
|
|
this.setHidden(false);
|
|
},
|
|
|
|
/**
|
|
* Hides all components configured by this Action.
|
|
*/
|
|
hide : function(){
|
|
this.setHidden(true);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the components configured by this Action are currently hidden, else returns false.
|
|
*/
|
|
isHidden : function(){
|
|
return this.initialConfig.hidden;
|
|
},
|
|
|
|
/**
|
|
* Sets the function that will be called by each Component using this action when its primary event is triggered.
|
|
* @param {Function} fn The function that will be invoked by the action's components. The function
|
|
* will be called with no arguments.
|
|
* @param {Object} scope The scope (this reference) in which the function is executed. Defaults to the Component
|
|
* firing the event.
|
|
*/
|
|
setHandler : function(fn, scope){
|
|
this.initialConfig.handler = fn;
|
|
this.initialConfig.scope = scope;
|
|
this.callEach('setHandler', [fn, scope]);
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for each Component currently tied to this Action. The function passed
|
|
* in should accept a single argument that will be an object that supports the basic Action config/method interface.
|
|
* @param {Function} fn The function to execute for each component
|
|
* @param {Object} scope The scope (this reference) in which the function is executed.
|
|
* Defaults to the Component.
|
|
*/
|
|
each : function(fn, scope){
|
|
Ext.each(this.items, fn, scope);
|
|
},
|
|
|
|
// @private
|
|
callEach : function(fnName, args){
|
|
var items = this.items,
|
|
i = 0,
|
|
len = items.length,
|
|
item;
|
|
|
|
Ext.suspendLayouts();
|
|
for(; i < len; i++){
|
|
item = items[i];
|
|
item[fnName].apply(item, args);
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
},
|
|
|
|
// @private
|
|
addComponent : function(comp){
|
|
this.items.push(comp);
|
|
comp.on('destroy', this.removeComponent, this);
|
|
},
|
|
|
|
// @private
|
|
removeComponent : function(comp){
|
|
Ext.Array.remove(this.items, comp);
|
|
},
|
|
|
|
/**
|
|
* Executes this Action manually using the handler function specified in the original config object
|
|
* or the handler function set with {@link #setHandler}. Any arguments passed to this
|
|
* function will be passed on to the handler function.
|
|
* @param {Object...} args Variable number of arguments passed to the handler function
|
|
*/
|
|
execute : function(){
|
|
this.initialConfig.handler.apply(this.initialConfig.scope || Ext.global, arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
*
|
|
* Simulates an XMLHttpRequest object's methods and properties as returned
|
|
* form the flash polyfill plugin. Used in submitting binary data in browsers that do
|
|
* not support doing so from JavaScript.
|
|
* NOTE: By default this will look for the flash object in the ext directory. When packaging and deploying the app, copy the <tt>ext/plugins</tt> directory and its contents to your root directory. For custom deployments where just the <tt>FlashPlugin.swf</tt> file gets copied (e.g. to <tt>/resources/FlashPlugin.swf</tt>), make sure to notify the framework of the location of the plugin before making the first attempt to post binary data, e.g. in the <tt>launch</tt> method of your app do:
|
|
* <pre><code>
|
|
Ext.flashPluginPath="/resources/FlashPlugin.swf";
|
|
</code></pre>
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.flash.BinaryXhr', {
|
|
|
|
statics: {
|
|
/**
|
|
* Called by the flash plugin once it's installed and open for business.
|
|
* @private
|
|
*/
|
|
flashPluginActivated: function() {
|
|
Ext.data.flash.BinaryXhr.flashPluginActive = true;
|
|
Ext.data.flash.BinaryXhr.flashPlugin = document.getElementById("ext-flash-polyfill");
|
|
Ext.globalEvents.fireEvent("flashready"); // let all pending connections know
|
|
},
|
|
|
|
/**
|
|
* Set to <tt>trut</tt> once the plugin registers and is active.
|
|
* @private
|
|
*/
|
|
flashPluginActive: false,
|
|
|
|
/**
|
|
* Flag to avoid installing the plugin twice.
|
|
* @private
|
|
*/
|
|
flashPluginInjected: false,
|
|
|
|
/**
|
|
* Counts IDs for new connections.
|
|
* @private
|
|
*/
|
|
|
|
connectionIndex: 1,
|
|
|
|
/**
|
|
* Plcaeholder for active connections.
|
|
* @private
|
|
*/
|
|
liveConnections: {},
|
|
|
|
/**
|
|
* Reference to the actual plugin, once activated.
|
|
* @private
|
|
*/
|
|
flashPlugin: null,
|
|
|
|
/**
|
|
* Called by the flash plugin once the state of one of the active connections changes.
|
|
* @param {Number/number} javascriptId the ID of the connection.
|
|
* @param {number} state the state of the connection. Equivalent to readyState numbers in XHR.
|
|
* @param {Object} data optional object containing the returned data, error and status codes.
|
|
* @private
|
|
*/
|
|
onFlashStateChange: function(javascriptId, state, data) {
|
|
var connection;
|
|
// Identify the request this is for
|
|
connection = this.liveConnections[Number(javascriptId)]; // Make sure its a native number
|
|
if (connection) {
|
|
connection.onFlashStateChange(state, data);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds the BinaryXhr object to the tracked connection list and assigns it an ID
|
|
* @param {Ext.data.flash.BinaryXhr} conn the connection to register
|
|
* @return {Number} id
|
|
* @private
|
|
*/
|
|
registerConnection: function(conn) {
|
|
var i = this.connectionIndex;
|
|
this.conectionIndex = this.connectionIndex + 1;
|
|
this.liveConnections[i] = conn;
|
|
return i;
|
|
},
|
|
|
|
/**
|
|
* Injects the flash polyfill plugin to allow posting binary data.
|
|
* This is done in two steps: First we load the javascript loader for flash objects, then we call it to inject the flash object.
|
|
* @private
|
|
*/
|
|
injectFlashPlugin: function() {
|
|
var divTag, pTag, aTag, iTag,
|
|
me=this,
|
|
flashLoaderPath, flashObjectPath;
|
|
// Generate the following HTML set of tags:
|
|
// + '<div id="ext-flash-polyfill">'
|
|
// + '<p>To view this page ensure that Adobe Flash Player version 11.1.0 or greater is installed, and that the FlashPlugin.swf file was correctly placed in the /resources directory.</p>'
|
|
//+ '<a href="http://www.adobe.com/go/getflashplayer"><img src="' + window.location.protocol + '//www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>'
|
|
//+ '</div>'
|
|
|
|
iTag=document.createElement("img");
|
|
iTag.setAttribute("src", window.location.protocol + '//www.adobe.com/images/shared/download_buttons/get_flash_player.gif');
|
|
iTag.setAttribute("alt", "Get Adobe Flash player");
|
|
|
|
aTag=document.createElement("a");
|
|
aTag.setAttribute("href", "http://www.adobe.com/go/getflashplayer");
|
|
aTag.appendChild(iTag);
|
|
|
|
pTag=document.createElement("p");
|
|
pTag.innerHTML="To view this page ensure that Adobe Flash Player version 11.1.0 or greater is installed.";
|
|
|
|
divTag=document.createElement("div");
|
|
divTag.setAttribute("id", "ext-flash-polyfill");
|
|
divTag.appendChild(pTag);
|
|
divTag.appendChild(iTag);
|
|
|
|
Ext.getBody().dom.appendChild(divTag);
|
|
|
|
|
|
|
|
// Now load the flash-loading script
|
|
|
|
flashLoaderPath = [Ext.Loader.getPath('Ext.data.Connection'), '../../../plugins/flash/swfobject.js'].join('/');
|
|
flashObjectPath = "/plugins/flash/FlashPlugin.swf";
|
|
if (Ext.flashPluginPath) {
|
|
flashObjectPath = Ext.flashPluginPath;
|
|
}
|
|
//console.log('LOADING Flash plugin from: ' + flashObjectPath);
|
|
Ext.Loader.loadScript({
|
|
url:flashLoaderPath,
|
|
onLoad: function() {
|
|
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
|
|
var swfVersionStr = "11.4.0";
|
|
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
|
|
var xiSwfUrlStr = "playerProductInstall.swf";
|
|
var flashvars = {};
|
|
var params = {};
|
|
params.quality = "high";
|
|
params.bgcolor = "#ffffff";
|
|
params.allowscriptaccess = "sameDomain";
|
|
params.allowfullscreen = "true";
|
|
var attributes = {};
|
|
attributes.id = "ext-flash-polyfill";
|
|
attributes.name = "polyfill";
|
|
attributes.align = "middle";
|
|
swfobject.embedSWF(
|
|
flashObjectPath, "ext-flash-polyfill",
|
|
"0", "0", // no size so it's not visible.
|
|
swfVersionStr, xiSwfUrlStr,
|
|
flashvars, params, attributes);
|
|
},
|
|
onError: function() {
|
|
},
|
|
scope: me
|
|
});
|
|
Ext.globalEvents.addEvents("flashready"); // we'll fire this one once flash is loaded
|
|
Ext.data.flash.BinaryXhr.flashPluginInjected = true;
|
|
}
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
* @property {number} readyState The connection's simulated readyState. Note that the only supported values are 0, 1 and 4. States 2 and 3 will never be reported.
|
|
*/
|
|
readyState: 0,
|
|
|
|
/**
|
|
* @property {number} status Connection status code returned by flash or the server.
|
|
*/
|
|
status: 0,
|
|
|
|
|
|
/**
|
|
* Status text (if any) returned by flash or the server.
|
|
*/
|
|
statusText: "",
|
|
|
|
/**
|
|
* @property {Array} responseBytes The binary bytes returned.
|
|
*/
|
|
responseBytes: null,
|
|
|
|
/**
|
|
* An ID representing this connection with flash.
|
|
* @private
|
|
*/
|
|
javascriptId: null,
|
|
|
|
|
|
/**
|
|
* Creates a new instance of BinaryXhr.
|
|
*/
|
|
constructor: function (config) {
|
|
// first, make sure flash is loading if needed
|
|
if (!Ext.data.flash.BinaryXhr.flashPluginInjected) {
|
|
Ext.data.flash.BinaryXhr.injectFlashPlugin();
|
|
}
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
me.requestHeaders = {};
|
|
},
|
|
|
|
/**
|
|
* Abort this connection. Sets its readyState to 4.
|
|
*/
|
|
abort: function () {
|
|
var me = this;
|
|
// if complete, nothing to abort
|
|
if (me.readyState == 4) {
|
|
return;
|
|
}
|
|
// Mark as aborted
|
|
me.aborted = true;
|
|
// Remove ourselves from the listeners if flash isn't active yet
|
|
if (!Ext.data.flash.BinaryXhr.flashPluginActive) {
|
|
Ext.globalEvents.removeListener("flashready", me.onFlashReady, me);
|
|
return;
|
|
}
|
|
// Flash is already live, so we should have a javascriptID and should have called flash to get the request going. Cancel:
|
|
Ext.data.flash.BinaryXhr.flashPlugin.abortRequest(me.javascriptId);
|
|
// remove from list
|
|
delete Ext.data.flash.BinaryXhr.liveConnections[me.javascriptId];
|
|
},
|
|
|
|
/**
|
|
* As in XMLHttpRequest.
|
|
*/
|
|
getAllResponseHeaders: function () {
|
|
var headers = [];
|
|
Ext.Object.each(this.responseHeaders, function (name, value) {
|
|
headers.push(name + ': ' + value);
|
|
});
|
|
return headers.join('\x0d\x0a');
|
|
},
|
|
|
|
/**
|
|
* As in XMLHttpRequest.
|
|
*/
|
|
getResponseHeader: function (header) {
|
|
var headers = this.responseHeaders;
|
|
return (headers && headers[header]) || null;
|
|
},
|
|
|
|
/**
|
|
* As in XMLHttpRequest.
|
|
*/
|
|
open: function (method, url, async, user, password) {
|
|
var me = this;
|
|
me.method = method;
|
|
me.url = url;
|
|
me.async = async !== false;
|
|
me.user = user;
|
|
me.password = password;
|
|
|
|
},
|
|
|
|
/**
|
|
* As in XMLHttpRequest.
|
|
*/
|
|
overrideMimeType: function (mimeType) {
|
|
this.mimeType = mimeType;
|
|
},
|
|
|
|
/**
|
|
* Initiate the request.
|
|
* @param {Array} body an array of byte values to send.
|
|
*/
|
|
send: function (body) {
|
|
var me = this;
|
|
me.body = body;
|
|
if (!Ext.data.flash.BinaryXhr.flashPluginActive) {
|
|
Ext.globalEvents.addListener("flashready", me.onFlashReady, me);
|
|
} else {
|
|
this.onFlashReady();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called by send, or once flash is loaded, to actually send the bytes.
|
|
* @private
|
|
*/
|
|
onFlashReady: function() {
|
|
var me = this, req, status;
|
|
me.javascriptId = Ext.data.flash.BinaryXhr.registerConnection(me);
|
|
|
|
// Create the request object we're sending to flash
|
|
req = {
|
|
method: me.method, // ignored since we always POST binary data
|
|
url: me.url,
|
|
user: me.user,
|
|
password: me.password,
|
|
mimeType: me.mimeType,
|
|
requestHeaders: me.requestHeaders,
|
|
body: me.body,
|
|
javascriptId: me.javascriptId
|
|
};
|
|
status = Ext.data.flash.BinaryXhr.flashPlugin.postBinary(req);
|
|
},
|
|
|
|
/**
|
|
* Updates readyState and notifies listeners.
|
|
* @private
|
|
*/
|
|
setReadyState: function (state) {
|
|
var me = this;
|
|
if (me.readyState != state) {
|
|
me.readyState = state;
|
|
me.onreadystatechange();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* As in XMLHttpRequest.
|
|
*/
|
|
setRequestHeader: function (header, value) {
|
|
this.requestHeaders[header] = value;
|
|
},
|
|
|
|
/**
|
|
* As in XMLHttpRequest.
|
|
*/
|
|
onreadystatechange: Ext.emptyFn,
|
|
|
|
/**
|
|
* Parses data returned from flash once a connection is done.
|
|
* @param {Object} data the data object send from Flash.
|
|
* @private
|
|
*/
|
|
parseData: function (data) {
|
|
var me = this;
|
|
// parse data and set up variables so that listeners can use this XHR
|
|
this.status = data.status || 0;
|
|
// we get back no response headers, so fake what we know:
|
|
me.responseHeaders = {};
|
|
if (me.mimeType) {
|
|
me.responseHeaders["content-type"] = me.mimeType;
|
|
}
|
|
if (data.reason == "complete") {
|
|
// Transfer complete and data received
|
|
this.responseBytes = data.data;
|
|
me.responseHeaders["content-length"] = data.data.length;
|
|
} else if (data.reason == "error" || data.reason == "securityError") {
|
|
this.statusText = data.text;
|
|
me.responseHeaders["content-length"] = 0; // we don't get the error response data
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called once flash calls back with updates about the connection
|
|
* @param {Number} state the readyState of the connection.
|
|
* @param {Object} data optional data object.
|
|
* @private
|
|
*/
|
|
onFlashStateChange: function(state, data) {
|
|
var me = this;
|
|
if (state == 4) {
|
|
// parse data and prepare for handing back to initiator
|
|
me.parseData(data);
|
|
// remove from list
|
|
delete Ext.data.flash.BinaryXhr.liveConnections[me.javascriptId];
|
|
}
|
|
me.setReadyState(state); // notify all listeners
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* The Connection class encapsulates a connection to the page's originating domain, allowing requests to be made either
|
|
* to a configured URL, or to a URL specified at request time.
|
|
*
|
|
* Requests made by this class are asynchronous, and will return immediately. No data from the server will be available
|
|
* to the statement immediately following the {@link #request} call. To process returned data, use a success callback
|
|
* in the request options object, or an {@link #requestcomplete event listener}.
|
|
*
|
|
* # File Uploads
|
|
*
|
|
* File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests.
|
|
* Instead the form is submitted in the standard manner with the DOM <form> element temporarily modified to have its
|
|
* target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document but removed
|
|
* after the return data has been gathered.
|
|
*
|
|
* The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to
|
|
* send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to
|
|
* insert the text unchanged into the document body.
|
|
*
|
|
* Characters which are significant to an HTML parser must be sent as HTML entities, so encode `<` as `<`, `&` as
|
|
* `&` etc.
|
|
*
|
|
* The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a
|
|
* responseText property in order to conform to the requirements of event handlers and callbacks.
|
|
*
|
|
* Be aware that file upload packets are sent with the content type multipart/form and some server technologies
|
|
* (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from the
|
|
* packet content.
|
|
*
|
|
* Also note that it's not possible to check the response code of the hidden iframe, so the success handler will ALWAYS fire.
|
|
*
|
|
* # Binary Posts
|
|
*
|
|
* The class supports posting binary data to the server by using native browser capabilities, or a flash polyfill plugin in browsers that do not support native binary posting (e.g. Internet Explorer version 9 or less). A number of limitations exist when the polyfill is used:
|
|
*
|
|
* - Only asynchronous connections are supported.
|
|
* - Only the POST method can be used.
|
|
* - The return data can only be binary for now. Set the {@link Ext.data.Connection#binary binary} parameter to <tt>true</tt>.
|
|
* - Only the 0, 1 and 4 (complete) readyState values will be reported to listeners.
|
|
* - The flash object will be injected at the bottom of the document and should be invisible.
|
|
* - Important: See note about packaing the flash plugin with the app in the documenetation of {@link Ext.data.flash.BinaryXhr BinaryXhr}.
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.Connection', {
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
statics: {
|
|
requestId: 0
|
|
},
|
|
|
|
url: null,
|
|
async: true,
|
|
method: null,
|
|
username: '',
|
|
password: '',
|
|
|
|
/**
|
|
* @cfg {Boolean} disableCaching
|
|
* True to add a unique cache-buster param to GET requests.
|
|
*/
|
|
disableCaching: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} withCredentials
|
|
* True to set `withCredentials = true` on the XHR object
|
|
*/
|
|
withCredentials: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} binary
|
|
* True if the response should be treated as binary data. If true, the binary
|
|
* data will be accessible as a "responseBytes" property on the response object.
|
|
*/
|
|
binary: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} cors
|
|
* True to enable CORS support on the XHR object. Currently the only effect of this option
|
|
* is to use the XDomainRequest object instead of XMLHttpRequest if the browser is IE8 or above.
|
|
*/
|
|
cors: false,
|
|
|
|
isXdr: false,
|
|
|
|
defaultXdrContentType: 'text/plain',
|
|
|
|
/**
|
|
* @cfg {String} disableCachingParam
|
|
* Change the parameter which is sent went disabling caching through a cache buster.
|
|
*/
|
|
disableCachingParam: '_dc',
|
|
|
|
/**
|
|
* @cfg {Number} timeout
|
|
* The timeout in milliseconds to be used for requests.
|
|
*/
|
|
timeout : 30000,
|
|
|
|
/**
|
|
* @cfg {Object} extraParams
|
|
* Any parameters to be appended to the request.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [autoAbort=false]
|
|
* Whether this request should abort any pending requests.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} method
|
|
* The default HTTP method to be used for requests.
|
|
*
|
|
* If not set, but {@link #request} params are present, POST will be used;
|
|
* otherwise, GET will be used.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} defaultHeaders
|
|
* An object containing request headers which are added to each request made by this object.
|
|
*/
|
|
|
|
useDefaultHeader : true,
|
|
defaultPostHeader : 'application/x-www-form-urlencoded; charset=UTF-8',
|
|
useDefaultXhrHeader : true,
|
|
defaultXhrHeader : 'XMLHttpRequest',
|
|
|
|
constructor : function(config) {
|
|
config = config || {};
|
|
Ext.apply(this, config);
|
|
|
|
/**
|
|
* @event beforerequest
|
|
* Fires before a network request is made to retrieve a data object.
|
|
* @param {Ext.data.Connection} conn This Connection object.
|
|
* @param {Object} options The options config object passed to the {@link #request} method.
|
|
*/
|
|
/**
|
|
* @event requestcomplete
|
|
* Fires if the request was successfully completed.
|
|
* @param {Ext.data.Connection} conn This Connection object.
|
|
* @param {Object} response The XHR object containing the response data.
|
|
* See [The XMLHttpRequest Object](http://www.w3.org/TR/XMLHttpRequest/) for details.
|
|
* @param {Object} options The options config object passed to the {@link #request} method.
|
|
*/
|
|
/**
|
|
* @event requestexception
|
|
* Fires if an error HTTP status was returned from the server. This event may also
|
|
* be listened to in the event that a request has timed out or has been aborted.
|
|
* See [HTTP Status Code Definitions](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)
|
|
* for details of HTTP status codes.
|
|
* @param {Ext.data.Connection} conn This Connection object.
|
|
* @param {Object} response The XHR object containing the response data.
|
|
* See [The XMLHttpRequest Object](http://www.w3.org/TR/XMLHttpRequest/) for details.
|
|
* @param {Object} options The options config object passed to the {@link #request} method.
|
|
*/
|
|
this.requests = {};
|
|
this.mixins.observable.constructor.call(this);
|
|
},
|
|
|
|
/**
|
|
* Sends an HTTP request to a remote server.
|
|
*
|
|
* **Important:** Ajax server requests are asynchronous, and this call will
|
|
* return before the response has been received. Process any returned data
|
|
* in a callback function.
|
|
*
|
|
* Ext.Ajax.request({
|
|
* url: 'ajax_demo/sample.json',
|
|
* success: function(response, opts) {
|
|
* var obj = Ext.decode(response.responseText);
|
|
* console.dir(obj);
|
|
* },
|
|
* failure: function(response, opts) {
|
|
* console.log('server-side failure with status code ' + response.status);
|
|
* }
|
|
* });
|
|
*
|
|
* To execute a callback function in the correct scope, use the `scope` option.
|
|
*
|
|
* @param {Object} options An object which may contain the following properties:
|
|
*
|
|
* (The options object may also contain any other property which might be needed to perform
|
|
* postprocessing in a callback because it is passed to callback functions.)
|
|
*
|
|
* @param {String/Function} options.url The URL to which to send the request, or a function
|
|
* to call which returns a URL string. The scope of the function is specified by the `scope` option.
|
|
* Defaults to the configured `url`.
|
|
*
|
|
* @param {Object/String/Function} options.params An object containing properties which are
|
|
* used as parameters to the request, a url encoded string or a function to call to get either. The scope
|
|
* of the function is specified by the `scope` option.
|
|
*
|
|
* @param {String} options.method The HTTP method to use
|
|
* for the request. Defaults to the configured method, or if no method was configured,
|
|
* "GET" if no parameters are being sent, and "POST" if parameters are being sent. Note that
|
|
* the method name is case-sensitive and should be all caps.
|
|
*
|
|
* @param {Function} options.callback The function to be called upon receipt of the HTTP response.
|
|
* The callback is called regardless of success or failure and is passed the following parameters:
|
|
* @param {Object} options.callback.options The parameter to the request call.
|
|
* @param {Boolean} options.callback.success True if the request succeeded.
|
|
* @param {Object} options.callback.response The XMLHttpRequest object containing the response data.
|
|
* See [www.w3.org/TR/XMLHttpRequest/](http://www.w3.org/TR/XMLHttpRequest/) for details about
|
|
* accessing elements of the response.
|
|
*
|
|
* @param {Function} options.success The function to be called upon success of the request.
|
|
* The callback is passed the following parameters:
|
|
* @param {Object} options.success.response The XMLHttpRequest object containing the response data.
|
|
* @param {Object} options.success.options The parameter to the request call.
|
|
*
|
|
* @param {Function} options.failure The function to be called upon failure of the request.
|
|
* The callback is passed the following parameters:
|
|
* @param {Object} options.failure.response The XMLHttpRequest object containing the response data.
|
|
* @param {Object} options.failure.options The parameter to the request call.
|
|
*
|
|
* @param {Object} options.scope The scope in which to execute the callbacks: The "this" object for
|
|
* the callback function. If the `url`, or `params` options were specified as functions from which to
|
|
* draw values, then this also serves as the scope for those function calls. Defaults to the browser
|
|
* window.
|
|
*
|
|
* @param {Number} options.timeout The timeout in milliseconds to be used for this request.
|
|
* Defaults to 30 seconds.
|
|
*
|
|
* @param {Ext.Element/HTMLElement/String} options.form The `<form>` Element or the id of the `<form>`
|
|
* to pull parameters from.
|
|
*
|
|
* @param {Boolean} options.isUpload **Only meaningful when used with the `form` option.**
|
|
*
|
|
* True if the form object is a file upload (will be set automatically if the form was configured
|
|
* with **`enctype`** `"multipart/form-data"`).
|
|
*
|
|
* File uploads are not performed using normal "Ajax" techniques, that is they are **not**
|
|
* performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the
|
|
* DOM `<form>` element temporarily modified to have its [target][] set to refer to a dynamically
|
|
* generated, hidden `<iframe>` which is inserted into the document but removed after the return data
|
|
* has been gathered.
|
|
*
|
|
* The server response is parsed by the browser to create the document for the IFRAME. If the
|
|
* server is using JSON to send the return object, then the [Content-Type][] header must be set to
|
|
* "text/html" in order to tell the browser to insert the text unchanged into the document body.
|
|
*
|
|
* The response text is retrieved from the document, and a fake XMLHttpRequest object is created
|
|
* containing a `responseText` property in order to conform to the requirements of event handlers
|
|
* and callbacks.
|
|
*
|
|
* Be aware that file upload packets are sent with the content type [multipart/form][] and some server
|
|
* technologies (notably JEE) may require some custom processing in order to retrieve parameter names
|
|
* and parameter values from the packet content.
|
|
*
|
|
* [target]: http://www.w3.org/TR/REC-html40/present/frames.html#adef-target
|
|
* [Content-Type]: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17
|
|
* [multipart/form]: http://www.faqs.org/rfcs/rfc2388.html
|
|
*
|
|
* @param {Object} options.headers Request headers to set for the request.
|
|
*
|
|
* @param {Object} options.xmlData XML document to use for the post. Note: This will be used instead
|
|
* of params for the post data. Any params will be appended to the URL.
|
|
*
|
|
* @param {Object/String} options.jsonData JSON data to use as the post. Note: This will be used
|
|
* instead of params for the post data. Any params will be appended to the URL.
|
|
*
|
|
* @param {Array} options.binaryData An array of bytes to submit in binary form. Any params will be appended to the URL. If binaryData is present, you must set {@link Ext.data.Connection#binary binary} to <tt>true</tt> and options.method to <tt>POST</tt>.
|
|
*
|
|
* @param {Boolean} options.disableCaching True to add a unique cache-buster param to GET requests.
|
|
*
|
|
* @param {Boolean} options.withCredentials True to add the withCredentials property to the XHR object
|
|
*
|
|
* @param {Boolean} options.binary True if the response should be treated as binary data. If true, the binary
|
|
* data will be accessible as a "responseBytes" property on the response object.
|
|
*
|
|
* @return {Object} The request object. This may be used to cancel the request.
|
|
*/
|
|
request : function(options) {
|
|
options = options || {};
|
|
var me = this,
|
|
scope = options.scope || window,
|
|
username = options.username || me.username,
|
|
password = options.password || me.password || '',
|
|
async,
|
|
requestOptions,
|
|
request,
|
|
headers,
|
|
xhr;
|
|
if (me.fireEvent('beforerequest', me, options) !== false) {
|
|
|
|
requestOptions = me.setOptions(options, scope);
|
|
|
|
if (me.isFormUpload(options)) {
|
|
me.upload(options.form, requestOptions.url, requestOptions.data, options);
|
|
return null;
|
|
}
|
|
|
|
// if autoabort is set, cancel the current transactions
|
|
if (options.autoAbort || me.autoAbort) {
|
|
me.abort();
|
|
}
|
|
|
|
// create a connection object
|
|
async = options.async !== false ? (options.async || me.async) : false;
|
|
xhr = me.openRequest(options, requestOptions, async, username, password);
|
|
|
|
// XDR doesn't support setting any headers
|
|
if (!me.isXdr) {
|
|
headers = me.setupHeaders(xhr, options, requestOptions.data, requestOptions.params);
|
|
}
|
|
|
|
// create the transaction object
|
|
request = {
|
|
id: ++Ext.data.Connection.requestId,
|
|
xhr: xhr,
|
|
headers: headers,
|
|
options: options,
|
|
async: async,
|
|
binary: options.binary || me.binary,
|
|
timeout: setTimeout(function() {
|
|
request.timedout = true;
|
|
me.abort(request);
|
|
}, options.timeout || me.timeout)
|
|
};
|
|
|
|
me.requests[request.id] = request;
|
|
me.latestId = request.id;
|
|
// bind our statechange listener
|
|
if (async) {
|
|
if (!me.isXdr) {
|
|
xhr.onreadystatechange = Ext.Function.bind(me.onStateChange, me, [request]);
|
|
}
|
|
}
|
|
|
|
if (me.isXdr) {
|
|
me.processXdrRequest(request, xhr);
|
|
}
|
|
|
|
// start the request!
|
|
xhr.send(requestOptions.data);
|
|
if (!async) {
|
|
return me.onComplete(request);
|
|
}
|
|
return request;
|
|
} else {
|
|
Ext.callback(options.callback, options.scope, [options, undefined, undefined]);
|
|
return null;
|
|
}
|
|
},
|
|
|
|
processXdrRequest: function(request, xhr) {
|
|
var me = this;
|
|
|
|
// Mutate the request object as per XDR spec.
|
|
delete request.headers;
|
|
|
|
request.contentType = request.options.contentType || me.defaultXdrContentType;
|
|
|
|
xhr.onload = Ext.Function.bind(me.onStateChange, me, [request, true]);
|
|
xhr.onerror = xhr.ontimeout = Ext.Function.bind(me.onStateChange, me, [request, false]);
|
|
},
|
|
|
|
processXdrResponse: function(response, xhr) {
|
|
// Mutate the response object as per XDR spec.
|
|
response.getAllResponseHeaders = function () {
|
|
return [];
|
|
};
|
|
response.getResponseHeader = function () {
|
|
return '';
|
|
};
|
|
response.contentType = xhr.contentType || this.defaultXdrContentType;
|
|
},
|
|
|
|
/**
|
|
* Uploads a form using a hidden iframe.
|
|
* @param {String/HTMLElement/Ext.Element} form The form to upload
|
|
* @param {String} url The url to post to
|
|
* @param {String} params Any extra parameters to pass
|
|
* @param {Object} options The initial options
|
|
*/
|
|
upload: function(form, url, params, options) {
|
|
form = Ext.getDom(form);
|
|
options = options || {};
|
|
|
|
var id = Ext.id(),
|
|
frame = document.createElement('iframe'),
|
|
hiddens = [],
|
|
encoding = 'multipart/form-data',
|
|
buf = {
|
|
target: form.target,
|
|
method: form.method,
|
|
encoding: form.encoding,
|
|
enctype: form.enctype,
|
|
action: form.action
|
|
},
|
|
addField = function(name, value) {
|
|
hiddenItem = document.createElement('input');
|
|
Ext.fly(hiddenItem).set({
|
|
type: 'hidden',
|
|
value: value,
|
|
name: name
|
|
});
|
|
form.appendChild(hiddenItem);
|
|
hiddens.push(hiddenItem);
|
|
},
|
|
hiddenItem, obj, value, name, vLen, v, hLen, h;
|
|
|
|
/*
|
|
* Originally this behaviour was modified for Opera 10 to apply the secure URL after
|
|
* the frame had been added to the document. It seems this has since been corrected in
|
|
* Opera so the behaviour has been reverted, the URL will be set before being added.
|
|
*/
|
|
Ext.fly(frame).set({
|
|
id: id,
|
|
name: id,
|
|
cls: Ext.baseCSSPrefix + 'hide-display',
|
|
src: Ext.SSL_SECURE_URL
|
|
});
|
|
|
|
document.body.appendChild(frame);
|
|
|
|
// This is required so that IE doesn't pop the response up in a new window.
|
|
if (document.frames) {
|
|
document.frames[id].name = id;
|
|
}
|
|
|
|
Ext.fly(form).set({
|
|
target: id,
|
|
method: 'POST',
|
|
enctype: encoding,
|
|
encoding: encoding,
|
|
action: url || buf.action
|
|
});
|
|
|
|
// add dynamic params
|
|
if (params) {
|
|
obj = Ext.Object.fromQueryString(params) || {};
|
|
|
|
for (name in obj) {
|
|
if (obj.hasOwnProperty(name)) {
|
|
value = obj[name];
|
|
if (Ext.isArray(value)) {
|
|
vLen = value.length;
|
|
for (v = 0; v < vLen; v++) {
|
|
addField(name, value[v]);
|
|
}
|
|
} else {
|
|
addField(name, value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Ext.fly(frame).on('load', Ext.Function.bind(this.onUploadComplete, this, [frame, options]), null, {single: !Ext.isOpera});
|
|
form.submit();
|
|
|
|
Ext.fly(form).set(buf);
|
|
|
|
hLen = hiddens.length;
|
|
|
|
for (h = 0; h < hLen; h++) {
|
|
Ext.removeNode(hiddens[h]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Callback handler for the upload function. After we've submitted the form via the iframe this creates a bogus
|
|
* response object to simulate an XHR and populates its responseText from the now-loaded iframe's document body
|
|
* (or a textarea inside the body). We then clean up by removing the iframe
|
|
*/
|
|
onUploadComplete: function(frame, options) {
|
|
var me = this,
|
|
// bogus response object
|
|
response = {
|
|
responseText: '',
|
|
responseXML: null
|
|
}, callback, success, doc, contentNode;
|
|
|
|
try {
|
|
doc = frame.contentWindow.document || frame.contentDocument || window.frames[frame.id].document;
|
|
// Opera will fire an extraneous load event on about:blank
|
|
// We want to ignore this since the load event will be fired twice
|
|
if (doc) {
|
|
if (Ext.isOpera && doc.location == 'about:blank') {
|
|
return;
|
|
}
|
|
if (doc.body) {
|
|
|
|
// Response sent as Content-Type: text/json or text/plain. Browser will embed in a <pre> element
|
|
// Note: The statement below tests the result of an assignment.
|
|
if ((contentNode = doc.body.firstChild) && /pre/i.test(contentNode.tagName)) {
|
|
response.responseText = contentNode.textContent;
|
|
}
|
|
|
|
// Response sent as Content-Type: text/html. We must still support JSON response wrapped in textarea.
|
|
// Note: The statement below tests the result of an assignment.
|
|
else if ((contentNode = doc.getElementsByTagName('textarea')[0])) {
|
|
response.responseText = contentNode.value;
|
|
}
|
|
// Response sent as Content-Type: text/html with no wrapping. Scrape JSON response out of text
|
|
else {
|
|
response.responseText = doc.body.textContent || doc.body.innerText;
|
|
}
|
|
}
|
|
//in IE the document may still have a body even if returns XML.
|
|
response.responseXML = doc.XMLDocument || doc;
|
|
callback = options.success;
|
|
success = true;
|
|
}
|
|
} catch (e) {
|
|
// Report any error in the message property
|
|
response.responseText = '{success:false,message:"' + Ext.String.trim(e.message || e.description) + '"}';
|
|
callback = options.failure;
|
|
success = false;
|
|
}
|
|
|
|
me.fireEvent('requestcomplete', me, response, options);
|
|
|
|
Ext.callback(callback, options.scope, [response, options]);
|
|
Ext.callback(options.callback, options.scope, [options, success, response]);
|
|
|
|
setTimeout(function() {
|
|
Ext.removeNode(frame);
|
|
}, 100);
|
|
},
|
|
|
|
/**
|
|
* Detects whether the form is intended to be used for an upload.
|
|
* @private
|
|
*/
|
|
isFormUpload: function(options) {
|
|
var form = this.getForm(options);
|
|
if (form) {
|
|
return (options.isUpload || (/multipart\/form-data/i).test(form.getAttribute('enctype')));
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Gets the form object from options.
|
|
* @private
|
|
* @param {Object} options The request options
|
|
* @return {HTMLElement} The form, null if not passed
|
|
*/
|
|
getForm: function(options) {
|
|
return Ext.getDom(options.form) || null;
|
|
},
|
|
|
|
/**
|
|
* Sets various options such as the url, params for the request
|
|
* @param {Object} options The initial options
|
|
* @param {Object} scope The scope to execute in
|
|
* @return {Object} The params for the request
|
|
*/
|
|
setOptions: function(options, scope) {
|
|
var me = this,
|
|
params = options.params || {},
|
|
extraParams = me.extraParams,
|
|
urlParams = options.urlParams,
|
|
url = options.url || me.url,
|
|
jsonData = options.jsonData,
|
|
method,
|
|
disableCache,
|
|
data;
|
|
|
|
|
|
// allow params to be a method that returns the params object
|
|
if (Ext.isFunction(params)) {
|
|
params = params.call(scope, options);
|
|
}
|
|
|
|
// allow url to be a method that returns the actual url
|
|
if (Ext.isFunction(url)) {
|
|
url = url.call(scope, options);
|
|
}
|
|
|
|
url = this.setupUrl(options, url);
|
|
|
|
|
|
// check for xml or json data, and make sure json data is encoded
|
|
data = options.rawData || options.binaryData || options.xmlData || jsonData || null;
|
|
if (jsonData && !Ext.isPrimitive(jsonData)) {
|
|
data = Ext.encode(data);
|
|
}
|
|
// Check for binary data. Transform if needed
|
|
if (options.binaryData) {
|
|
if (me.nativeBinaryPostSupport()) {
|
|
data = (new Uint8Array(options.binaryData));
|
|
if ((Ext.isChrome && Ext.chromeVersion < 22) || Ext.isSafari || Ext.isGecko) {
|
|
data = data.buffer; // send the underlying buffer, not the view, since that's not supported on versions of chrome older than 22
|
|
}
|
|
}
|
|
}
|
|
|
|
// make sure params are a url encoded string and include any extraParams if specified
|
|
if (Ext.isObject(params)) {
|
|
params = Ext.Object.toQueryString(params);
|
|
}
|
|
|
|
if (Ext.isObject(extraParams)) {
|
|
extraParams = Ext.Object.toQueryString(extraParams);
|
|
}
|
|
|
|
params = params + ((extraParams) ? ((params) ? '&' : '') + extraParams : '');
|
|
|
|
urlParams = Ext.isObject(urlParams) ? Ext.Object.toQueryString(urlParams) : urlParams;
|
|
|
|
params = this.setupParams(options, params);
|
|
|
|
// decide the proper method for this request
|
|
method = (options.method || me.method || ((params || data) ? 'POST' : 'GET')).toUpperCase();
|
|
this.setupMethod(options, method);
|
|
|
|
|
|
disableCache = options.disableCaching !== false ? (options.disableCaching || me.disableCaching) : false;
|
|
// if the method is get append date to prevent caching
|
|
if (method === 'GET' && disableCache) {
|
|
url = Ext.urlAppend(url, (options.disableCachingParam || me.disableCachingParam) + '=' + (new Date().getTime()));
|
|
}
|
|
|
|
// if the method is get or there is json/xml data append the params to the url
|
|
if ((method == 'GET' || data) && params) {
|
|
url = Ext.urlAppend(url, params);
|
|
params = null;
|
|
}
|
|
|
|
// allow params to be forced into the url
|
|
if (urlParams) {
|
|
url = Ext.urlAppend(url, urlParams);
|
|
}
|
|
|
|
return {
|
|
url: url,
|
|
method: method,
|
|
data: data || params || null
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Template method for overriding url
|
|
* @template
|
|
* @private
|
|
* @param {Object} options
|
|
* @param {String} url
|
|
* @return {String} The modified url
|
|
*/
|
|
setupUrl: function(options, url) {
|
|
var form = this.getForm(options);
|
|
if (form) {
|
|
url = url || form.action;
|
|
}
|
|
return url;
|
|
},
|
|
|
|
|
|
/**
|
|
* Template method for overriding params
|
|
* @template
|
|
* @private
|
|
* @param {Object} options
|
|
* @param {String} params
|
|
* @return {String} The modified params
|
|
*/
|
|
setupParams: function(options, params) {
|
|
var form = this.getForm(options),
|
|
serializedForm;
|
|
if (form && !this.isFormUpload(options)) {
|
|
serializedForm = Ext.Element.serializeForm(form);
|
|
params = params ? (params + '&' + serializedForm) : serializedForm;
|
|
}
|
|
return params;
|
|
},
|
|
|
|
/**
|
|
* Template method for overriding method
|
|
* @template
|
|
* @private
|
|
* @param {Object} options
|
|
* @param {String} method
|
|
* @return {String} The modified method
|
|
*/
|
|
setupMethod: function(options, method) {
|
|
if (this.isFormUpload(options)) {
|
|
return 'POST';
|
|
}
|
|
return method;
|
|
},
|
|
|
|
/**
|
|
* Setup all the headers for the request
|
|
* @private
|
|
* @param {Object} xhr The xhr object
|
|
* @param {Object} options The options for the request
|
|
* @param {Object} data The data for the request
|
|
* @param {Object} params The params for the request
|
|
*/
|
|
setupHeaders: function(xhr, options, data, params) {
|
|
var me = this,
|
|
headers = Ext.apply({}, options.headers || {}, me.defaultHeaders || {}),
|
|
contentType = me.defaultPostHeader,
|
|
jsonData = options.jsonData,
|
|
xmlData = options.xmlData,
|
|
key,
|
|
header;
|
|
|
|
if (!headers['Content-Type'] && (data || params)) {
|
|
if (data) {
|
|
if (options.rawData) {
|
|
contentType = 'text/plain';
|
|
} else {
|
|
if (xmlData && Ext.isDefined(xmlData)) {
|
|
contentType = 'text/xml';
|
|
} else if (jsonData && Ext.isDefined(jsonData)) {
|
|
contentType = 'application/json';
|
|
}
|
|
}
|
|
}
|
|
headers['Content-Type'] = contentType;
|
|
}
|
|
|
|
if (me.useDefaultXhrHeader && !headers['X-Requested-With']) {
|
|
headers['X-Requested-With'] = me.defaultXhrHeader;
|
|
}
|
|
// set up all the request headers on the xhr object
|
|
try {
|
|
for (key in headers) {
|
|
if (headers.hasOwnProperty(key)) {
|
|
header = headers[key];
|
|
xhr.setRequestHeader(key, header);
|
|
}
|
|
}
|
|
} catch(e) {
|
|
me.fireEvent('exception', key, header);
|
|
}
|
|
return headers;
|
|
},
|
|
|
|
/**
|
|
* Creates the appropriate XHR transport for a given request on this browser. On IE
|
|
* this may be an `XDomainRequest` rather than an `XMLHttpRequest`.
|
|
* @private
|
|
*/
|
|
newRequest: function (options) {
|
|
var me = this,
|
|
xhr;
|
|
|
|
if (options.binaryData) {
|
|
// This is a binary data request. Handle submission differently for differnet browsers
|
|
if (me.nativeBinaryPostSupport()) {
|
|
xhr = this.getXhrInstance(); // On browsers that support this, use the native XHR object
|
|
} else {
|
|
// catch all for all other browser types
|
|
xhr = new Ext.data.flash.BinaryXhr();
|
|
}
|
|
} else if ((options.cors || me.cors) && Ext.isIE && Ext.ieVersion <= 9) {
|
|
xhr = me.getXdrInstance();
|
|
me.isXdr = true;
|
|
} else {
|
|
xhr = me.getXhrInstance();
|
|
}
|
|
|
|
return xhr;
|
|
},
|
|
|
|
/**
|
|
* Creates and opens an appropriate XHR transport for a given request on this browser.
|
|
* This logic is contained in an individual method to allow for overrides to process all
|
|
* of the parameters and options and return a suitable, open connection.
|
|
* @private
|
|
*/
|
|
openRequest: function (options, requestOptions, async, username, password) {
|
|
var me = this,
|
|
xhr = me.newRequest(options);
|
|
|
|
if (username) {
|
|
xhr.open(requestOptions.method, requestOptions.url, async, username, password);
|
|
} else {
|
|
if (me.isXdr) {
|
|
xhr.open(requestOptions.method, requestOptions.url);
|
|
} else {
|
|
xhr.open(requestOptions.method, requestOptions.url, async);
|
|
}
|
|
}
|
|
|
|
if (options.binary || me.binary) {
|
|
if (window.Uint8Array) {
|
|
xhr.responseType = 'arraybuffer';
|
|
} else if (xhr.overrideMimeType) {
|
|
// In some older non-IE browsers, e.g. ff 3.6, that do not
|
|
// support Uint8Array, a mime type override is required so that
|
|
// the unprocessed binary data can be read from the responseText
|
|
// (see createResponse())
|
|
xhr.overrideMimeType('text\/plain; charset=x-user-defined');
|
|
}
|
|
}
|
|
|
|
if (options.withCredentials || me.withCredentials) {
|
|
xhr.withCredentials = true;
|
|
}
|
|
|
|
return xhr;
|
|
},
|
|
|
|
/**
|
|
* Creates the appropriate XDR transport for this browser.
|
|
* - IE 7 and below don't support CORS
|
|
* - IE 8 and 9 support CORS with native XDomainRequest object
|
|
* - IE 10 (and above?) supports CORS with native XMLHttpRequest object
|
|
* @private
|
|
*/
|
|
getXdrInstance: function() {
|
|
var xdr;
|
|
|
|
if (Ext.ieVersion >= 8) {
|
|
xdr = new XDomainRequest();
|
|
} else {
|
|
Ext.Error.raise({
|
|
msg: 'Your browser does not support CORS'
|
|
});
|
|
}
|
|
|
|
return xdr;
|
|
},
|
|
|
|
/**
|
|
* Creates the appropriate XHR transport for this browser.
|
|
* @private
|
|
*/
|
|
getXhrInstance: (function() {
|
|
var options = [function() {
|
|
return new XMLHttpRequest();
|
|
}, function() {
|
|
return new ActiveXObject('MSXML2.XMLHTTP.3.0');
|
|
}, function() {
|
|
return new ActiveXObject('MSXML2.XMLHTTP');
|
|
}, function() {
|
|
return new ActiveXObject('Microsoft.XMLHTTP');
|
|
}], i = 0,
|
|
len = options.length,
|
|
xhr;
|
|
|
|
for (; i < len; ++i) {
|
|
try {
|
|
xhr = options[i];
|
|
xhr();
|
|
break;
|
|
} catch(e) {
|
|
}
|
|
}
|
|
return xhr;
|
|
}()),
|
|
|
|
/**
|
|
* Determines whether this object has a request outstanding.
|
|
* @param {Object} [request] Defaults to the last transaction
|
|
* @return {Boolean} True if there is an outstanding request.
|
|
*/
|
|
isLoading : function(request) {
|
|
if (!request) {
|
|
request = this.getLatest();
|
|
}
|
|
if (!(request && request.xhr)) {
|
|
return false;
|
|
}
|
|
// if there is a connection and readyState is not 0 or 4, or in case of BinaryXHR, not 4
|
|
var state = request.xhr.readyState;
|
|
return ((request.xhr instanceof Ext.data.flash.BinaryXhr) && state != 4) || !(state === 0 || state == 4);
|
|
},
|
|
|
|
/**
|
|
* Aborts an active request.
|
|
* @param {Object} [request] Defaults to the last request
|
|
*/
|
|
abort : function(request) {
|
|
var me = this,
|
|
xhr;
|
|
|
|
if (!request) {
|
|
request = me.getLatest();
|
|
}
|
|
|
|
if (request && me.isLoading(request)) {
|
|
/*
|
|
* Clear out the onreadystatechange here, this allows us
|
|
* greater control, the browser may/may not fire the function
|
|
* depending on a series of conditions.
|
|
*/
|
|
xhr = request.xhr;
|
|
try {
|
|
xhr.onreadystatechange = null;
|
|
} catch (e) {
|
|
// Setting onreadystatechange to null can cause problems in IE, see
|
|
// http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_a_1.html
|
|
xhr.onreadystatechange = Ext.emptyFn;
|
|
}
|
|
xhr.abort();
|
|
me.clearTimeout(request);
|
|
if (!request.timedout) {
|
|
request.aborted = true;
|
|
}
|
|
me.onComplete(request);
|
|
me.cleanup(request);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Aborts all active requests
|
|
*/
|
|
abortAll: function(){
|
|
var requests = this.requests,
|
|
id;
|
|
|
|
for (id in requests) {
|
|
if (requests.hasOwnProperty(id)) {
|
|
this.abort(requests[id]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the most recent request
|
|
* @private
|
|
* @return {Object} The request. Null if there is no recent request
|
|
*/
|
|
getLatest: function(){
|
|
var id = this.latestId,
|
|
request;
|
|
|
|
if (id) {
|
|
request = this.requests[id];
|
|
}
|
|
return request || null;
|
|
},
|
|
|
|
/**
|
|
* Fires when the state of the xhr changes
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
onStateChange : function(request, xdrResult) {
|
|
var me = this;
|
|
|
|
// Using CORS with IE doesn't support readyState so we fake it
|
|
if ((request.xhr && request.xhr.readyState == 4) || me.isXdr) {
|
|
me.clearTimeout(request);
|
|
me.onComplete(request, xdrResult);
|
|
me.cleanup(request);
|
|
Ext.EventManager.idleEvent.fire();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Clears the timeout on the request
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
clearTimeout: function(request) {
|
|
clearTimeout(request.timeout);
|
|
delete request.timeout;
|
|
},
|
|
|
|
/**
|
|
* Cleans up any left over information from the request
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
cleanup: function(request) {
|
|
request.xhr = null;
|
|
delete request.xhr;
|
|
},
|
|
|
|
/**
|
|
* To be called when the request has come back from the server
|
|
* @private
|
|
* @param {Object} request
|
|
* @return {Object} The response
|
|
*/
|
|
onComplete : function(request, xdrResult) {
|
|
var me = this,
|
|
options = request.options,
|
|
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 = me.isXdr ? xdrResult : result.success;
|
|
|
|
if (success) {
|
|
response = me.createResponse(request);
|
|
me.fireEvent('requestcomplete', me, response, options);
|
|
Ext.callback(options.success, options.scope, [response, options]);
|
|
} else {
|
|
if (result.isException || request.aborted || request.timedout) {
|
|
response = me.createException(request);
|
|
} else {
|
|
response = me.createResponse(request);
|
|
}
|
|
me.fireEvent('requestexception', me, response, options);
|
|
Ext.callback(options.failure, options.scope, [response, options]);
|
|
}
|
|
Ext.callback(options.callback, options.scope, [options, success, response]);
|
|
delete me.requests[request.id];
|
|
return response;
|
|
},
|
|
|
|
/**
|
|
* Checks if the response status was successful
|
|
* @param {Number} status The status code
|
|
* @return {Object} An object containing success/status state
|
|
*/
|
|
parseStatus: function(status) {
|
|
// see: https://prototype.lighthouseapp.com/projects/8886/tickets/129-ie-mangles-http-response-status-code-204-to-1223
|
|
status = status == 1223 ? 204 : status;
|
|
|
|
var success = (status >= 200 && status < 300) || status == 304,
|
|
isException = false;
|
|
|
|
if (!success) {
|
|
switch (status) {
|
|
case 12002:
|
|
case 12029:
|
|
case 12030:
|
|
case 12031:
|
|
case 12152:
|
|
case 13030:
|
|
isException = true;
|
|
break;
|
|
}
|
|
}
|
|
return {
|
|
success: success,
|
|
isException: isException
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Creates the response object
|
|
* @private
|
|
* @param {Object} request
|
|
*/
|
|
createResponse : function(request) {
|
|
var me = this,
|
|
xhr = request.xhr,
|
|
isXdr = me.isXdr,
|
|
headers = {},
|
|
lines = isXdr ? [] : xhr.getAllResponseHeaders().replace(/\r\n/g, '\n').split('\n'),
|
|
count = lines.length,
|
|
line, index, key, response, byteArray;
|
|
|
|
while (count--) {
|
|
line = lines[count];
|
|
index = line.indexOf(':');
|
|
if (index >= 0) {
|
|
key = line.substr(0, index).toLowerCase();
|
|
if (line.charAt(index + 1) == ' ') {
|
|
++index;
|
|
}
|
|
headers[key] = line.substr(index + 1);
|
|
}
|
|
}
|
|
|
|
request.xhr = null;
|
|
delete request.xhr;
|
|
|
|
response = {
|
|
request: request,
|
|
requestId: request.id,
|
|
status: xhr.status,
|
|
statusText: xhr.statusText,
|
|
getResponseHeader: function(header) {
|
|
return headers[header.toLowerCase()];
|
|
},
|
|
getAllResponseHeaders: function() {
|
|
return headers;
|
|
}
|
|
};
|
|
|
|
if (isXdr) {
|
|
me.processXdrResponse(response, xhr);
|
|
}
|
|
|
|
if (request.binary) {
|
|
response.responseBytes = me.getByteArray(xhr);
|
|
} else {
|
|
// an error is thrown when trying to access responseText or responseXML
|
|
// on an xhr object with responseType of 'arraybuffer', so only attempt
|
|
// to set these properties in the response if we're not dealing with
|
|
// binary data
|
|
response.responseText = xhr.responseText;
|
|
response.responseXML = xhr.responseXML;
|
|
}
|
|
|
|
// If we don't explicitly tear down the xhr reference, IE6/IE7 will hold this in the closure of the
|
|
// functions created with getResponseHeader/getAllResponseHeaders
|
|
xhr = null;
|
|
return response;
|
|
},
|
|
|
|
/**
|
|
* Creates the exception object
|
|
* @private
|
|
* @param {Object} request
|
|
*/
|
|
createException : function(request) {
|
|
return {
|
|
request : request,
|
|
requestId : request.id,
|
|
status : request.aborted ? -1 : 0,
|
|
statusText : request.aborted ? 'transaction aborted' : 'communication failure',
|
|
aborted: request.aborted,
|
|
timedout: request.timedout
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Gets binary data from the xhr response object and returns it as a byte array
|
|
* @private
|
|
* @param {Object} xhr the xhr response object
|
|
* @return {Uint8Array/Array}
|
|
*/
|
|
getByteArray: function(xhr) {
|
|
var response = xhr.response,
|
|
responseBody = xhr.responseBody,
|
|
byteArray, responseText, len, i;
|
|
|
|
if (xhr instanceof Ext.data.flash.BinaryXhr) {
|
|
// If this was a BinaryXHR request via flash, we already have the bytes ready
|
|
byteArray = xhr.responseBytes;
|
|
} else if (window.Uint8Array) {
|
|
// Modern browsers (including IE10) have a native byte array
|
|
// which can be created by passing the ArrayBuffer (returned as
|
|
// the xhr.response property) to the Uint8Array constructor.
|
|
byteArray = response ? new Uint8Array(response) : [];
|
|
} else if (Ext.isIE9p) {
|
|
// In IE9 and below the responseBody property contains a byte array
|
|
// but it is not directly accessible using javascript.
|
|
// In IE9p we can get the bytes by constructing a VBArray
|
|
// using the responseBody and then converting it to an Array.
|
|
try {
|
|
byteArray = new VBArray(responseBody).toArray();
|
|
} catch(e) {
|
|
// If the binary response is empty, the VBArray constructor will
|
|
// choke on the responseBody. We can't simply do a null check
|
|
// on responseBody because responseBody is always falsy when it
|
|
// contains binary data.
|
|
byteArray = [];
|
|
}
|
|
} else if (Ext.isIE) {
|
|
// IE8 and below also have a VBArray constructor, but throw a
|
|
// "VBArray Expected" error if you try to pass the responseBody to
|
|
// the VBArray constructor.
|
|
// http://msdn.microsoft.com/en-us/library/ye3x9by3%28v=vs.71%29.aspx
|
|
// so we have to use vbscript injection to access the bytes
|
|
if (!this.self.vbScriptInjected) {
|
|
this.injectVBScript();
|
|
}
|
|
getIEByteArray(xhr.responseBody, byteArray = []);
|
|
} else {
|
|
// in other older browsers make a best-effort attempt to read the
|
|
// bytes from responseText
|
|
byteArray = [];
|
|
responseText = xhr.responseText;
|
|
len = responseText.length;
|
|
for (i = 0; i < len; i++) {
|
|
// Some characters have an extra byte 0xF7 in the high order
|
|
// position. Throw away the high order byte and then push the
|
|
// result onto the byteArray.
|
|
byteArray.push(responseText.charCodeAt(i) & 0xFF);
|
|
}
|
|
}
|
|
|
|
return byteArray;
|
|
},
|
|
|
|
/**
|
|
* Injects a vbscript tag containing a 'getIEByteArray' method for reading
|
|
* binary data from an xhr response in IE8 and below.
|
|
* @private
|
|
*/
|
|
injectVBScript: function() {
|
|
var scriptTag = document.createElement('script');
|
|
scriptTag.type = 'text/vbscript';
|
|
scriptTag.text = [
|
|
'Function getIEByteArray(byteArray, out)',
|
|
'Dim len, i',
|
|
'len = LenB(byteArray)',
|
|
'For i = 1 to len',
|
|
'out.push(AscB(MidB(byteArray, i, 1)))',
|
|
'Next',
|
|
'End Function'
|
|
].join('\n');
|
|
Ext.getHead().dom.appendChild(scriptTag);
|
|
this.self.vbScriptInjected = true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {boolean} <tt>true</tt> if the browser can natively post binary data.
|
|
*/
|
|
nativeBinaryPostSupport: function() {
|
|
return Ext.isChrome ||
|
|
(Ext.isSafari && Ext.isDefined(window.Uint8Array)) ||
|
|
(Ext.isGecko && Ext.isDefined(window.Uint8Array));
|
|
}
|
|
|
|
|
|
});
|
|
|
|
/**
|
|
* @class Ext.Ajax
|
|
* @singleton
|
|
* @markdown
|
|
|
|
A singleton instance of an {@link Ext.data.Connection}. This class
|
|
is used to communicate with your server side code. It can be used as follows:
|
|
|
|
Ext.Ajax.request({
|
|
url: 'page.php',
|
|
params: {
|
|
id: 1
|
|
},
|
|
success: function(response){
|
|
var text = response.responseText;
|
|
// process server response here
|
|
}
|
|
});
|
|
|
|
Default options for all requests can be set by changing a property on the Ext.Ajax class:
|
|
|
|
Ext.Ajax.timeout = 60000; // 60 seconds
|
|
|
|
Any options specified in the request method for the Ajax request will override any
|
|
defaults set on the Ext.Ajax class. In the code sample below, the timeout for the
|
|
request will be 60 seconds.
|
|
|
|
Ext.Ajax.timeout = 120000; // 120 seconds
|
|
Ext.Ajax.request({
|
|
url: 'page.aspx',
|
|
timeout: 60000
|
|
});
|
|
|
|
In general, this class will be used for all Ajax requests in your application.
|
|
The main reason for creating a separate {@link Ext.data.Connection} is for a
|
|
series of requests that share common settings that are different to all other
|
|
requests in the application.
|
|
|
|
*/
|
|
Ext.define('Ext.Ajax', {
|
|
extend: Ext.data.Connection ,
|
|
singleton: true,
|
|
|
|
/**
|
|
* @cfg {Object} extraParams @hide
|
|
*/
|
|
/**
|
|
* @cfg {Object} defaultHeaders @hide
|
|
*/
|
|
/**
|
|
* @cfg {String} method @hide
|
|
*/
|
|
/**
|
|
* @cfg {Number} timeout @hide
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} autoAbort @hide
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} disableCaching @hide
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} disableCaching
|
|
* True to add a unique cache-buster param to GET requests. Defaults to true.
|
|
*/
|
|
/**
|
|
* @property {String} url
|
|
* The default URL to be used for requests to the server.
|
|
* If the server receives all requests through one URL, setting this once is easier than
|
|
* entering it on every request.
|
|
*/
|
|
/**
|
|
* @property {Object} extraParams
|
|
* An object containing properties which are used as extra parameters to each request made
|
|
* by this object. Session information and other data that you need
|
|
* to pass with each request are commonly put here.
|
|
*/
|
|
/**
|
|
* @property {Object} defaultHeaders
|
|
* An object containing request headers which are added to each request made by this object.
|
|
*/
|
|
/**
|
|
* @property {String} method
|
|
* The default HTTP method to be used for requests. Note that this is case-sensitive and
|
|
* should be all caps (if not set but params are present will use
|
|
* <tt>"POST"</tt>, otherwise will use <tt>"GET"</tt>.)
|
|
*/
|
|
/**
|
|
* @property {Number} timeout
|
|
* The timeout in milliseconds to be used for requests. Defaults to 30000.
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} autoAbort
|
|
* Whether a new request should abort any pending requests.
|
|
*/
|
|
autoAbort : false
|
|
});
|
|
|
|
/**
|
|
* A mixin to add floating capability to a Component.
|
|
*/
|
|
Ext.define('Ext.util.Floating', {
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} focusOnToFront
|
|
* Specifies whether the floated component should be automatically {@link Ext.Component#method-focus focused} when
|
|
* it is {@link #toFront brought to the front}.
|
|
*/
|
|
focusOnToFront: true,
|
|
|
|
/**
|
|
* @cfg {String/Boolean} shadow
|
|
* Specifies whether the floating component should be given a shadow. Set to true to automatically create an
|
|
* {@link Ext.Shadow}, or a string indicating the shadow's display {@link Ext.Shadow#mode}. Set to false to
|
|
* disable the shadow.
|
|
*/
|
|
shadow: 'sides',
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain
|
|
* True to constrain this Components within its containing element, false to allow it to fall outside of its containing
|
|
* element. By default this Component will be rendered to `document.body`. To render and constrain this Component within
|
|
* another element specify {@link Ext.AbstractComponent#renderTo renderTo}.
|
|
*/
|
|
constrain: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [fixed=false]
|
|
* Configure as `true` to have this Component fixed at its `X, Y` coordinates in the browser viewport, immune
|
|
* to scrolling the document.
|
|
*
|
|
* *Only in browsers that support `position:fixed`*
|
|
*
|
|
* *IE6 and IE7, 8 and 9 quirks do not support `position: fixed`*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} shadowOffset
|
|
* Number of pixels to offset the shadow.
|
|
*/
|
|
|
|
constructor: function (dom) {
|
|
var me = this;
|
|
|
|
// We do not support fixed on legacy browsers.
|
|
me.fixed = me.fixed && !(Ext.isIE6 || Ext.isIEQuirks);
|
|
|
|
me.el = new Ext.dom.Layer(Ext.apply({
|
|
preventSync : true,
|
|
hideMode : me.hideMode,
|
|
hidden : me.hidden,
|
|
shadow : (typeof me.shadow != 'undefined') ? me.shadow : 'sides',
|
|
shadowOffset : me.shadowOffset,
|
|
constrain : false,
|
|
fixed : me.fixed,
|
|
shim : (me.shim === false) ? false : undefined
|
|
}, me.floating), dom);
|
|
|
|
// If modal, and focus navigation not being handled by the FocusManager,
|
|
// catch tab navigation, and loop back in on tab off first or last item.
|
|
if (me.modal && !(Ext.FocusManager && Ext.FocusManager.enabled)) {
|
|
me.mon(me.el, {
|
|
keydown: me.onKeyDown,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
// clickToRaise
|
|
me.mon(me.el, {
|
|
mousedown: me.onMouseDown,
|
|
scope: me
|
|
});
|
|
|
|
// release config object (if it was one)
|
|
me.floating = true;
|
|
|
|
// Register with the configured ownerCt.
|
|
// With this we acquire a floatParent for relative positioning, and a zIndexParent which is an
|
|
// ancestor floater which provides zIndex management.
|
|
me.registerWithOwnerCt();
|
|
|
|
me.initHierarchyEvents();
|
|
},
|
|
|
|
initHierarchyEvents: function() {
|
|
var me = this,
|
|
syncHidden = this.syncHidden;
|
|
|
|
if (!me.hasHierarchyEventListeners) {
|
|
me.mon(me.hierarchyEventSource, {
|
|
hide: syncHidden,
|
|
collapse: syncHidden,
|
|
show: syncHidden,
|
|
expand: syncHidden,
|
|
added: syncHidden,
|
|
scope: me
|
|
});
|
|
me.hasHierarchyEventListeners = true;
|
|
}
|
|
},
|
|
|
|
registerWithOwnerCt: function() {
|
|
var me = this,
|
|
ownerCt = me.ownerCt,
|
|
zip = me.zIndexParent;
|
|
|
|
if (zip) {
|
|
zip.unregisterFloatingItem(me);
|
|
}
|
|
|
|
// Acquire a zIndexParent by traversing the ownerCt axis for the nearest floating ancestor.
|
|
// This is to find a base which can allocate relative z-index values
|
|
zip = me.zIndexParent = me.up('[floating]');
|
|
|
|
// Set the floatParent to the ownertCt if one has been provided.
|
|
// Otherwise use the zIndexParent.
|
|
// Developers must only use ownerCt if there is really a containing relationship.
|
|
me.setFloatParent(ownerCt || zip);
|
|
delete me.ownerCt;
|
|
|
|
if (zip) {
|
|
zip.registerFloatingItem(me);
|
|
} else {
|
|
Ext.WindowManager.register(me);
|
|
}
|
|
},
|
|
|
|
// Listen for TAB events and wrap round if tabbing of either end of the Floater
|
|
onKeyDown: function(e) {
|
|
var me = this,
|
|
shift,
|
|
focusables,
|
|
first,
|
|
last;
|
|
|
|
// If tabbing off either end, wrap round.
|
|
// See Ext.dom.Element.isFocusable
|
|
// Certain browsers always report tabIndex zero in the absence of the tabIndex attribute.
|
|
// Testing the specified property (Standards: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-862529273)
|
|
// Should filter out these cases.
|
|
// The exceptions are IE6 to IE8. In these browsers all elements will yield a tabIndex
|
|
// and therefore all elements will appear to be focusable.
|
|
// This adversely affects modal Floating components.
|
|
// These listen for the TAB key, and then test whether the event target === last focusable
|
|
// or first focusable element, and forcibly to a circular navigation.
|
|
// We cannot know the true first or last focusable element, so this problem still exists for IE6,7,8
|
|
if (e.getKey() == Ext.EventObject.TAB) {
|
|
shift = e.shiftKey;
|
|
focusables = me.el.query(':focusable');
|
|
first = focusables[0];
|
|
last = focusables[focusables.length - 1];
|
|
if (first && last && e.target === (shift ? first : last)) {
|
|
e.stopEvent();
|
|
(shift ? last : first).focus(false, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// Mousedown brings to front, and programatically grabs focus *unless the mousedown was on a focusable element*
|
|
onMouseDown: function (e) {
|
|
var focusTask = this.focusTask;
|
|
|
|
if (this.floating &&
|
|
// get out of here if there is already a pending focus. This usually means
|
|
// that the handler for a mousedown on a child element set the focus on some
|
|
// other component, and we so not want to steal it back. See EXTJSIV-9458
|
|
(!focusTask || !focusTask.id)) {
|
|
// If what was mousedowned upon is going to claim focus anyway, pass preventFocus as true.
|
|
this.toFront(!!e.getTarget(':focusable'));
|
|
}
|
|
},
|
|
|
|
setFloatParent: function(floatParent) {
|
|
var me = this;
|
|
|
|
me.floatParent = floatParent;
|
|
|
|
// If a floating Component is configured to be constrained, but has no configured
|
|
// constrainTo setting, set its constrainTo to be it's ownerCt before rendering.
|
|
if ((me.constrain || me.constrainHeader) && !me.constrainTo) {
|
|
me.constrainTo = floatParent ? floatParent.getTargetEl() : me.container;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
syncShadow : function() {
|
|
if (this.floating) {
|
|
this.el.sync(true);
|
|
}
|
|
},
|
|
|
|
onBeforeFloatLayout: function(){
|
|
this.el.preventSync = true;
|
|
},
|
|
|
|
onAfterFloatLayout: function(){
|
|
delete this.el.preventSync;
|
|
this.syncShadow();
|
|
},
|
|
|
|
/**
|
|
* synchronizes the hidden state of this component with the state of its hierarchy
|
|
* @private
|
|
*/
|
|
syncHidden: function() {
|
|
var me = this,
|
|
hidden = me.hidden || !me.rendered,
|
|
hierarchicallyHidden = me.hierarchicallyHidden = me.isHierarchicallyHidden(),
|
|
pendingShow = me.pendingShow;
|
|
|
|
if (hidden !== hierarchicallyHidden) {
|
|
if (hierarchicallyHidden) {
|
|
me.hide();
|
|
me.pendingShow = true;
|
|
} else if (pendingShow) {
|
|
delete me.pendingShow;
|
|
if (pendingShow.length) {
|
|
me.show.apply(me, pendingShow);
|
|
} else {
|
|
me.show();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// z-index is managed by the zIndexManager and may be overwritten at any time.
|
|
// Returns the next z-index to be used.
|
|
// If this is a Container, then it will have rebased any managed floating Components,
|
|
// and so the next available z-index will be approximately 10000 above that.
|
|
setZIndex: function(index) {
|
|
var me = this;
|
|
|
|
me.el.setZIndex(index);
|
|
|
|
// Next item goes 10 above;
|
|
index += 10;
|
|
|
|
// When a Container with floating descendants has its z-index set, it rebases any floating descendants it is managing.
|
|
// The returned value is a round number approximately 10000 above the last z-index used.
|
|
if (me.floatingDescendants) {
|
|
index = Math.floor(me.floatingDescendants.setBase(index) / 100) * 100 + 10000;
|
|
}
|
|
return index;
|
|
},
|
|
|
|
/**
|
|
* Moves this floating Component into a constrain region.
|
|
*
|
|
* By default, this Component is constrained to be within the container it was added to, or the element it was
|
|
* rendered to.
|
|
*
|
|
* An alternative constraint may be passed.
|
|
* @param {String/HTMLElement/Ext.Element/Ext.util.Region} [constrainTo] The Element or {@link Ext.util.Region Region}
|
|
* into which this Component is to be constrained. Defaults to the element into which this floating Component
|
|
* was rendered.
|
|
*/
|
|
doConstrain: function(constrainTo) {
|
|
var me = this,
|
|
// Calculate the constrained poition.
|
|
// calculateConstrainedPosition will provide a default constraint
|
|
// region if there is no explicit constrainTo, *and* there is no floatParent owner Component.
|
|
xy = me.calculateConstrainedPosition(constrainTo, null, true);
|
|
|
|
// false is returned if no movement is needed
|
|
if (xy) {
|
|
me.setPosition(xy);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Brings this floating Component to the front of any other visible, floating Components managed by the same
|
|
* {@link Ext.ZIndexManager ZIndexManager}
|
|
*
|
|
* If this Component is modal, inserts the modal mask just below this Component in the z-index stack.
|
|
*
|
|
* @param {Boolean} [preventFocus=false] Specify `true` to prevent the Component from being focused.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
toFront: function(preventFocus) {
|
|
var me = this,
|
|
zip = me.zIndexParent,
|
|
preventFocusSetting = me.preventFocusOnActivate;
|
|
|
|
// Find the floating Component which provides the base for this Component's zIndexing.
|
|
// That must move to front to then be able to rebase its zIndex stack and move this to the front
|
|
if (zip && me.bringParentToFront !== false) {
|
|
zip.toFront(true);
|
|
}
|
|
|
|
if (!Ext.isDefined(preventFocus)) {
|
|
preventFocus = !me.focusOnToFront;
|
|
}
|
|
|
|
if (preventFocus) {
|
|
me.preventFocusOnActivate = true;
|
|
}
|
|
if (me.zIndexManager.bringToFront(me, preventFocus)) {
|
|
if (!preventFocus) {
|
|
// Kick off a delayed focus request.
|
|
// If another floating Component is toFronted before the delay expires
|
|
// this will not receive focus.
|
|
me.focus(false, true);
|
|
}
|
|
}
|
|
|
|
// Restore to original setting
|
|
me.preventFocusOnActivate = preventFocusSetting;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* This method is called internally by {@link Ext.ZIndexManager} to signal that a floating Component has either been
|
|
* moved to the top of its zIndex stack, or pushed from the top of its zIndex stack.
|
|
*
|
|
* If a _Window_ is superceded by another Window, deactivating it hides its shadow.
|
|
*
|
|
* This method also fires the {@link Ext.Component#activate activate} or
|
|
* {@link Ext.Component#deactivate deactivate} event depending on which action occurred.
|
|
*
|
|
* @param {Boolean} [active=false] True to activate the Component, false to deactivate it.
|
|
* @param {Ext.Component} [newActive] The newly active Component which is taking over topmost zIndex position.
|
|
*/
|
|
setActive: function(active, newActive) {
|
|
var me = this;
|
|
|
|
if (active) {
|
|
if (me.el.shadow && !me.maximized) {
|
|
me.el.enableShadow(true);
|
|
}
|
|
if (!me.preventFocusOnActivate) {
|
|
me.focus(false, true);
|
|
}
|
|
me.fireEvent('activate', me);
|
|
} else {
|
|
// Only the *Windows* in a zIndex stack share a shadow. All other types of floaters
|
|
// can keep their shadows all the time
|
|
if (me.isWindow && (newActive && newActive.isWindow) && me.hideShadowOnDeactivate) {
|
|
me.el.disableShadow();
|
|
}
|
|
me.fireEvent('deactivate', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sends this Component to the back of (lower z-index than) any other visible windows
|
|
* @return {Ext.Component} this
|
|
*/
|
|
toBack: function() {
|
|
this.zIndexManager.sendToBack(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Center this Component in its container.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
center: function() {
|
|
var me = this,
|
|
xy;
|
|
|
|
if (me.isVisible()) {
|
|
xy = me.getAlignToXY(me.container, 'c-c');
|
|
me.setPagePosition(xy);
|
|
} else {
|
|
me.needsCenter = true;
|
|
}
|
|
return me;
|
|
},
|
|
|
|
onFloatShow: function() {
|
|
if (this.needsCenter) {
|
|
this.center();
|
|
}
|
|
delete this.needsCenter;
|
|
},
|
|
|
|
// @private
|
|
fitContainer: function(animate) {
|
|
var me = this,
|
|
parent = me.floatParent,
|
|
container = parent ? parent.getTargetEl() : me.container,
|
|
newBox = container.getViewSize(false),
|
|
newPosition = parent || (container.dom !== document.body) ?
|
|
// If we are a contained floater, or rendered to a div, maximized position is (0,0)
|
|
[0, 0] :
|
|
// If no parent and rendered to body, align with origin of container el.
|
|
container.getXY();
|
|
|
|
newBox.x = newPosition[0];
|
|
newBox.y = newPosition[1];
|
|
me.setBox(newBox, animate);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.util.Floating', {
|
|
override: 'Ext.util.Floating',
|
|
|
|
|
|
constructor: function() {
|
|
this.callParent(arguments);
|
|
|
|
if (this.isLocalRtl()) {
|
|
// set the rtl property on the Ext.Layer instance so it will use the correct
|
|
// coordinate system when syncing shadow/shim
|
|
this.el.setRtl(true);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Base class for all Ext components.
|
|
*
|
|
* The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
|
|
*
|
|
* ## xtypes
|
|
*
|
|
* Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype
|
|
* like {@link #getXType} and {@link #isXType}. See the [Component Guide][1] for more information on xtypes and the
|
|
* Component hierarchy.
|
|
*
|
|
* ## Finding components
|
|
*
|
|
* All Components are registered with the {@link Ext.ComponentManager} on construction so that they can be referenced at
|
|
* any time via {@link Ext#getCmp Ext.getCmp}, passing the {@link #id}.
|
|
*
|
|
* Additionally the {@link Ext.ComponentQuery} provides a CSS-selectors-like way to look up components by their xtype
|
|
* and many other attributes. For example the following code will find all textfield components inside component with
|
|
* `id: 'myform'`:
|
|
*
|
|
* Ext.ComponentQuery.query('#myform textfield');
|
|
*
|
|
* ## Extending Ext.Component
|
|
*
|
|
* All subclasses of Component may participate in the automated Ext component
|
|
* lifecycle of creation, rendering and destruction which is provided by the {@link Ext.container.Container Container}
|
|
* class. Components may be added to a Container through the {@link Ext.container.Container#cfg-items items} config option
|
|
* at the time the Container is created, or they may be added dynamically via the
|
|
* {@link Ext.container.Container#method-add add} method.
|
|
*
|
|
* All user-developed visual widgets that are required to participate in automated lifecycle and size management should
|
|
* subclass Component.
|
|
*
|
|
* See the Creating new UI controls chapter in [Component Guide][1] for details on how and to either extend
|
|
* or augment Ext JS base classes to create custom Components.
|
|
*
|
|
* ## The Ext.Component class by itself
|
|
*
|
|
* Usually one doesn't need to instantiate the Ext.Component class. There are subclasses which implement
|
|
* specialized use cases, covering most application needs. However it is possible to instantiate a base
|
|
* Component, and it can be rendered to document, or handled by layouts as the child item of a Container:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Component', {
|
|
* html: 'Hello world!',
|
|
* width: 300,
|
|
* height: 200,
|
|
* padding: 20,
|
|
* style: {
|
|
* color: '#FFFFFF',
|
|
* backgroundColor:'#000000'
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* 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 {@link Ext.view.View View},
|
|
* {@link Ext.grid.Panel GridPanel}, or {@link Ext.tree.Panel TreePanel} be used.
|
|
*
|
|
* [1]: #!/guide/components
|
|
*/
|
|
Ext.define('Ext.Component', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['widget.component', 'widget.box'],
|
|
|
|
extend: Ext.AbstractComponent ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
floating: Ext.util.Floating
|
|
},
|
|
|
|
statics: {
|
|
// Collapse/expand directions
|
|
DIRECTION_TOP: 'top',
|
|
DIRECTION_RIGHT: 'right',
|
|
DIRECTION_BOTTOM: 'bottom',
|
|
DIRECTION_LEFT: 'left',
|
|
|
|
VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
|
|
|
|
// RegExp whih specifies characters in an xtype which must be translated to '-' when generating auto IDs.
|
|
// This includes dot, comma and whitespace
|
|
INVALID_ID_CHARS_Re: /[\.,\s]/g
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} resizable
|
|
* Specify as `true` to apply a {@link Ext.resizer.Resizer Resizer} to this Component after rendering.
|
|
*
|
|
* May also be specified as a config object to be passed to the constructor of {@link Ext.resizer.Resizer Resizer}
|
|
* to override any defaults. By default the Component passes its minimum and maximum size, and uses
|
|
* `{@link Ext.resizer.Resizer#dynamic}: false`
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} resizeHandles
|
|
* A valid {@link Ext.resizer.Resizer} handles config string. Only applies when resizable = true.
|
|
*/
|
|
resizeHandles: 'all',
|
|
|
|
/**
|
|
* @cfg {Boolean} [autoScroll=false]
|
|
* `true` to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary,
|
|
* `false` to clip any overflowing content.
|
|
* This should not be combined with {@link #overflowX} or {@link #overflowY}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} overflowX
|
|
* Possible values are:
|
|
* * `'auto'` to enable automatic horizontal scrollbar (overflow-x: 'auto').
|
|
* * `'scroll'` to always enable horizontal scrollbar (overflow-x: 'scroll').
|
|
* The default is overflow-x: 'hidden'. This should not be combined with {@link #autoScroll}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} overflowY
|
|
* Possible values are:
|
|
* * `'auto'` to enable automatic vertical scrollbar (overflow-y: 'auto').
|
|
* * `'scroll'` to always enable vertical scrollbar (overflow-y: 'scroll').
|
|
* The default is overflow-y: 'hidden'. This should not be combined with {@link #autoScroll}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} floating
|
|
* Specify as true to float the Component outside of the document flow using CSS absolute positioning.
|
|
*
|
|
* Components such as {@link Ext.window.Window Window}s and {@link Ext.menu.Menu Menu}s are floating by default.
|
|
*
|
|
* Floating Components that are programatically {@link Ext.Component#method-render rendered} will register
|
|
* themselves with the global {@link Ext.WindowManager ZIndexManager}
|
|
*
|
|
* ### Floating Components as child items of a Container
|
|
*
|
|
* A floating Component may be used as a child item of a Container. This just allows the floating Component to seek
|
|
* a ZIndexManager by examining the ownerCt chain.
|
|
*
|
|
* When configured as floating, Components acquire, at render time, a {@link Ext.ZIndexManager ZIndexManager} which
|
|
* manages a stack of related floating Components. The ZIndexManager brings a single floating Component to the top
|
|
* of its stack when the Component's {@link #toFront} method is called.
|
|
*
|
|
* The ZIndexManager is found by traversing up the {@link #ownerCt} chain to find an ancestor which itself is
|
|
* floating. This is so that descendant floating Components of floating _Containers_ (Such as a ComboBox dropdown
|
|
* within a Window) can have its zIndex managed relative to any siblings, but always **above** that floating
|
|
* ancestor Container.
|
|
*
|
|
* If no floating ancestor is found, a floating Component registers itself with the default {@link Ext.WindowManager
|
|
* ZIndexManager}.
|
|
*
|
|
* Floating components _do not participate in the Container's layout_. Because of this, they are not rendered until
|
|
* you explicitly {@link #method-show} them.
|
|
*
|
|
* After rendering, the ownerCt reference is deleted, and the {@link #floatParent} property is set to the found
|
|
* floating ancestor Container. If no floating ancestor Container was found the {@link #floatParent} property will
|
|
* not be set.
|
|
*/
|
|
floating: false,
|
|
|
|
/**
|
|
* @cfg {String} [defaultAlign="tl-bl?"]
|
|
* The default {@link Ext.util.Positionable#getAlignToXY Ext.Element#getAlignToXY} anchor position value for this menu
|
|
* relative to its element of origin. Used in conjunction with {@link #showBy}.
|
|
*/
|
|
defaultAlign: 'tl-bl?',
|
|
|
|
/**
|
|
* @cfg {Boolean} toFrontOnShow
|
|
* True to automatically call {@link #toFront} when the {@link #method-show} method is called on an already visible,
|
|
* floating component.
|
|
*/
|
|
toFrontOnShow: true,
|
|
|
|
/**
|
|
* @cfg {Ext.util.Region/Ext.Element} constrainTo
|
|
* A {@link Ext.util.Region Region} (or an element from which a Region measurement will be read) which is used
|
|
* to constrain the component. Only applies when the component is floating.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/String} constraintInsets
|
|
* An object or a string (in TRBL order) specifying insets from the configured {@link #constrainTo constrain region}
|
|
* within which this component must be constrained when positioning or sizing.
|
|
* example:
|
|
*
|
|
* constraintInsets: '10 10 10 10' // Constrain with 10px insets from parent
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.ZIndexManager} zIndexManager
|
|
* Only present for {@link #floating} Components after they have been rendered.
|
|
*
|
|
* A reference to the ZIndexManager which is managing this Component's z-index.
|
|
*
|
|
* The {@link Ext.ZIndexManager ZIndexManager} maintains a stack of floating Component z-indices, and also provides
|
|
* a single modal mask which is insert just beneath the topmost visible modal floating Component.
|
|
*
|
|
* Floating Components may be {@link #toFront brought to the front} or {@link #toBack sent to the back} of the
|
|
* z-index stack.
|
|
*
|
|
* This defaults to the global {@link Ext.WindowManager ZIndexManager} for floating Components that are
|
|
* programatically {@link Ext.Component#method-render rendered}.
|
|
*
|
|
* For {@link #floating} Components which are added to a Container, the ZIndexManager is acquired from the first
|
|
* ancestor Container found which is floating. If no floating ancestor is found, the global {@link Ext.WindowManager ZIndexManager} is
|
|
* used.
|
|
*
|
|
* See {@link #floating} and {@link #zIndexParent}
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Container} floatParent
|
|
* **Only present for {@link #floating} Components which were inserted as child items of Containers.**
|
|
*
|
|
* There are other similar relationships such as the {@link Ext.button.Button button} which activates a {@link Ext.button.Button#cfg-menu menu}, or the
|
|
* {@link Ext.menu.Item menu item} which activated a {@link Ext.menu.Item#cfg-menu submenu}, or the
|
|
* {@link Ext.grid.column.Column column header} which activated the column menu.
|
|
*
|
|
* These differences are abstracted away by the {@link #up} method.
|
|
*
|
|
* Floating Components that are programatically {@link Ext.Component#method-render rendered} will not have a `floatParent`
|
|
* property.
|
|
*
|
|
* See {@link #floating} and {@link #zIndexManager}
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Container} zIndexParent
|
|
* Only present for {@link #floating} Components which were inserted as child items of Containers, and which have a floating
|
|
* Container in their containment ancestry.
|
|
*
|
|
* For {@link #floating} Components which are child items of a Container, the zIndexParent will be a floating
|
|
* ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides
|
|
* a {@link Ext.ZIndexManager ZIndexManager} which provides z-indexing services for all its descendant floating
|
|
* Components.
|
|
*
|
|
* Floating Components that are programatically {@link Ext.Component#method-render rendered} will not have a `zIndexParent`
|
|
* property.
|
|
*
|
|
* For example, the dropdown {@link Ext.view.BoundList BoundList} of a ComboBox which is in a Window will have the
|
|
* Window as its `zIndexParent`, and will always show above that Window, wherever the Window is placed in the z-index stack.
|
|
*
|
|
* See {@link #floating} and {@link #zIndexManager}
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} [draggable=false]
|
|
* Specify as true to make a {@link #floating} Component draggable using the Component's encapsulating element as
|
|
* the drag handle.
|
|
*
|
|
* This may also be specified as a config object for the {@link Ext.util.ComponentDragger ComponentDragger} which is
|
|
* instantiated to perform dragging.
|
|
*
|
|
* For example to create a Component which may only be dragged around using a certain internal element as the drag
|
|
* handle, use the delegate option:
|
|
*
|
|
* new Ext.Component({
|
|
* constrain: true,
|
|
* floating: true,
|
|
* style: {
|
|
* backgroundColor: '#fff',
|
|
* border: '1px solid black'
|
|
* },
|
|
* html: '<h1 style="cursor:move">The title</h1><p>The content</p>',
|
|
* draggable: {
|
|
* delegate: 'h1'
|
|
* }
|
|
* }).show();
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [formBind=false]
|
|
* When inside FormPanel, any component configured with `formBind: true` will
|
|
* be enabled/disabled depending on the validity state of the form.
|
|
* See {@link Ext.form.Panel} for more information and example.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} [columnWidth=undefined]
|
|
* Defines the column width inside {@link Ext.layout.container.Column column layout}.
|
|
*
|
|
* Can be specified as a number or as a percentage.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {"north"/"south"/"east"/"west"/"center"} [region=undefined]
|
|
* Defines the region inside {@link Ext.layout.container.Border border layout}.
|
|
*
|
|
* Possible values:
|
|
*
|
|
* - north - Positions component at top.
|
|
* - south - Positions component at bottom.
|
|
* - east - Positions component at right.
|
|
* - west - Positions component at left.
|
|
* - center - Positions component at the remaining space.
|
|
* There **must** be a component with `region: "center"` in every border layout.
|
|
*/
|
|
|
|
hideMode: 'display',
|
|
|
|
offsetsCls: Ext.baseCSSPrefix + 'hide-offsets',
|
|
|
|
bubbleEvents: [],
|
|
|
|
defaultComponentLayoutType: 'autocomponent',
|
|
|
|
//renderTpl: new Ext.XTemplate(
|
|
// '<div id="{id}" class="{baseCls} {cls} {cmpCls}<tpl if="typeof ui !== \'undefined\'"> {uiBase}-{ui}</tpl>"<tpl if="typeof style !== \'undefined\'"> style="{style}"</tpl>></div>', {
|
|
// compiled: true,
|
|
// disableFormats: true
|
|
// }
|
|
//),
|
|
|
|
/**
|
|
* Creates new Component.
|
|
* @param {Ext.Element/String/Object} config The configuration options may be specified as either:
|
|
*
|
|
* - **an element** : it is set as the internal element and its id used as the component id
|
|
* - **a string** : it is assumed to be the id of an existing element and is used as the component id
|
|
* - **anything else** : it is assumed to be a standard config object and is applied to the component
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
config = config || {};
|
|
if (config.initialConfig) {
|
|
|
|
// Being initialized from an Ext.Action instance...
|
|
if (config.isAction) {
|
|
me.baseAction = config;
|
|
}
|
|
config = config.initialConfig;
|
|
// component cloning / action set up
|
|
}
|
|
else if (config.tagName || config.dom || Ext.isString(config)) {
|
|
// element object
|
|
config = {
|
|
applyTo: config,
|
|
id: config.id || config
|
|
};
|
|
}
|
|
|
|
me.callParent([config]);
|
|
|
|
// If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
|
|
// register this Component as one of its items
|
|
if (me.baseAction){
|
|
me.baseAction.addComponent(me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The initComponent template method is an important initialization step for a Component. It is intended to be
|
|
* implemented by each subclass of Ext.Component to provide any needed constructor logic. The
|
|
* initComponent method of the class being created is called first, with each initComponent method
|
|
* up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and,
|
|
* if needed, override the constructor logic of the Component at any step in the hierarchy.
|
|
*
|
|
* The initComponent method **must** contain a call to {@link Ext.Base#callParent callParent} in order
|
|
* to ensure that the parent class' initComponent method is also called.
|
|
*
|
|
* All config options passed to the constructor are applied to `this` before initComponent is called,
|
|
* so you can simply access them with `this.someOption`.
|
|
*
|
|
* The following example demonstrates using a dynamic string for the text of a button at the time of
|
|
* instantiation of the class.
|
|
*
|
|
* Ext.define('DynamicButtonText', {
|
|
* extend: 'Ext.button.Button',
|
|
*
|
|
* initComponent: function() {
|
|
* this.text = new Date();
|
|
* this.renderTo = Ext.getBody();
|
|
* this.callParent();
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.onReady(function() {
|
|
* Ext.create('DynamicButtonText');
|
|
* });
|
|
*
|
|
* @template
|
|
* @protected
|
|
* @since 1.1.0
|
|
*/
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
if (me.listeners) {
|
|
me.on(me.listeners);
|
|
me.listeners = null; //change the value to remove any on prototype
|
|
}
|
|
me.enableBubble(me.bubbleEvents);
|
|
},
|
|
|
|
afterRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
if (!(me.x && me.y) && (me.pageX || me.pageY)) {
|
|
me.setPagePosition(me.pageX, me.pageY);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the overflow on the content element of the component.
|
|
* @param {Boolean} scroll True to allow the Component to auto scroll.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setAutoScroll : function(scroll) {
|
|
var me = this;
|
|
|
|
me.autoScroll = !!scroll;
|
|
|
|
// Scrolling styles must be applied to Component's main element.
|
|
// Layouts which use an innerCt (Box layout), shrinkwrap the innerCt round overflowing content,
|
|
// so the innerCt must be scrolled by the container, it does not scroll content.
|
|
if (me.rendered) {
|
|
me.getOverflowEl().setStyle(me.getOverflowStyle());
|
|
}
|
|
me.updateLayout();
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the overflow x/y on the content element of the component. The x/y overflow
|
|
* values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the
|
|
* value is 'hidden'. Passing null for one of the values will erase the inline style.
|
|
* Passing `undefined` will preserve the current value.
|
|
*
|
|
* @param {String} overflowX The overflow-x value.
|
|
* @param {String} overflowY The overflow-y value.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setOverflowXY: function(overflowX, overflowY) {
|
|
var me = this,
|
|
argCount = arguments.length;
|
|
|
|
if (argCount) {
|
|
me.overflowX = overflowX || '';
|
|
if (argCount > 1) {
|
|
me.overflowY = overflowY || '';
|
|
}
|
|
}
|
|
|
|
// Scrolling styles must be applied to Component's main element.
|
|
// Layouts which use an innerCt (Box layout), shrinkwrap the innerCt round overflowing content,
|
|
// so the innerCt must be scrolled by the container, it does not scroll content.
|
|
if (me.rendered) {
|
|
me.getOverflowEl().setStyle(me.getOverflowStyle());
|
|
}
|
|
me.updateLayout();
|
|
return me;
|
|
},
|
|
|
|
beforeRender: function () {
|
|
var me = this,
|
|
floating = me.floating,
|
|
cls;
|
|
|
|
if (floating) {
|
|
me.addCls(Ext.baseCSSPrefix + 'layer');
|
|
|
|
cls = floating.cls;
|
|
if (cls) {
|
|
me.addCls(cls);
|
|
}
|
|
}
|
|
|
|
return me.callParent();
|
|
},
|
|
|
|
beforeLayout: function(){
|
|
this.callParent(arguments);
|
|
if (this.floating) {
|
|
this.onBeforeFloatLayout();
|
|
}
|
|
},
|
|
|
|
afterComponentLayout: function(){
|
|
this.callParent(arguments);
|
|
if (this.floating) {
|
|
this.onAfterFloatLayout();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
makeFloating : function (dom) {
|
|
this.mixins.floating.constructor.call(this, dom);
|
|
},
|
|
|
|
wrapPrimaryEl: function (dom) {
|
|
if (this.floating) {
|
|
this.makeFloating(dom);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
initResizable: function(resizable) {
|
|
var me = this;
|
|
|
|
resizable = Ext.apply({
|
|
target: me,
|
|
dynamic: false,
|
|
constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : null),
|
|
handles: me.resizeHandles
|
|
}, resizable);
|
|
resizable.target = me;
|
|
me.resizer = new Ext.resizer.Resizer(resizable);
|
|
},
|
|
|
|
getDragEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
initDraggable: function() {
|
|
var me = this,
|
|
|
|
// If we are resizable, and the resizer had to wrap this Component's el (eg an Img)
|
|
// Then we have to create a pseudo-Component out of the resizer to drag that,
|
|
// otherwise, we just drag this Component
|
|
dragTarget = (me.resizer && me.resizer.el !== me.el) ? me.resizerComponent = new Ext.Component({
|
|
el: me.resizer.el,
|
|
rendered: true,
|
|
container: me.container
|
|
}) : me,
|
|
ddConfig = Ext.applyIf({
|
|
el: dragTarget.getDragEl(),
|
|
constrainTo: (me.constrain||me.draggable.constrain) ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.container)) : undefined
|
|
}, me.draggable);
|
|
|
|
// Add extra configs if Component is specified to be constrained
|
|
if (me.constrain || me.constrainDelegate) {
|
|
ddConfig.constrain = me.constrain;
|
|
ddConfig.constrainDelegate = me.constrainDelegate;
|
|
}
|
|
|
|
me.dd = new Ext.util.ComponentDragger(dragTarget, ddConfig);
|
|
},
|
|
|
|
/**
|
|
* Scrolls this Component's {@link #getTargetEl target element} by the passed delta values, optionally animating.
|
|
*
|
|
* All of the following are equivalent:
|
|
*
|
|
* comp.scrollBy(10, 10, true);
|
|
* comp.scrollBy([10, 10], true);
|
|
* comp.scrollBy({ x: 10, y: 10 }, true);
|
|
*
|
|
* @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
|
|
* an object with "x" and "y" properties.
|
|
* @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
|
|
* @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
|
|
*/
|
|
scrollBy: function(deltaX, deltaY, animate) {
|
|
var el;
|
|
|
|
if ((el = this.getTargetEl()) && el.dom) {
|
|
el.scrollBy.apply(el, arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This method allows you to show or hide a LoadMask on top of this component.
|
|
*
|
|
* @param {Boolean/Object/String} load True to show the default LoadMask, a config object that will be passed to the
|
|
* LoadMask constructor, or a message String to show. False to hide the current LoadMask.
|
|
* @param {Boolean} [targetEl=false] True to mask the targetEl of this Component instead of the `this.el`. For example,
|
|
* setting this to true on a Panel will cause only the body to be masked.
|
|
* @return {Ext.LoadMask} The LoadMask instance that has just been shown.
|
|
*/
|
|
setLoading : function(load, targetEl) {
|
|
var me = this,
|
|
config = {
|
|
target: me
|
|
};
|
|
|
|
if (me.rendered) {
|
|
Ext.destroy(me.loadMask);
|
|
me.loadMask = null;
|
|
|
|
if (load !== false && !me.collapsed) {
|
|
if (Ext.isObject(load)) {
|
|
Ext.apply(config, load);
|
|
} else if (Ext.isString(load)) {
|
|
config.msg = load;
|
|
}
|
|
|
|
if (targetEl) {
|
|
Ext.applyIf(config, {
|
|
useTargetEl: true
|
|
});
|
|
}
|
|
me.loadMask = new Ext.LoadMask(config);
|
|
me.loadMask.show();
|
|
}
|
|
}
|
|
return me.loadMask;
|
|
},
|
|
|
|
beforeSetPosition: function () {
|
|
var me = this,
|
|
pos = me.callParent(arguments), // pass all args on for signature decoding
|
|
adj;
|
|
|
|
if (pos) {
|
|
adj = me.adjustPosition(pos.x, pos.y);
|
|
pos.x = adj.x;
|
|
pos.y = adj.y;
|
|
}
|
|
return pos || null;
|
|
},
|
|
|
|
afterSetPosition: function(ax, ay) {
|
|
this.onPosition(ax, ay);
|
|
this.fireEvent('move', this, ax, ay);
|
|
},
|
|
|
|
/**
|
|
* Displays component at specific xy position.
|
|
* A floating component (like a menu) is positioned relative to its ownerCt if any.
|
|
* Useful for popping up a context menu:
|
|
*
|
|
* listeners: {
|
|
* itemcontextmenu: function(view, record, item, index, event, options) {
|
|
* Ext.create('Ext.menu.Menu', {
|
|
* width: 100,
|
|
* height: 100,
|
|
* margin: '0 0 10 0',
|
|
* items: [{
|
|
* text: 'regular item 1'
|
|
* },{
|
|
* text: 'regular item 2'
|
|
* },{
|
|
* text: 'regular item 3'
|
|
* }]
|
|
* }).showAt(event.getXY());
|
|
* }
|
|
* }
|
|
*
|
|
* @param {Number/Number[]} x The new x position or array of `[x,y]`.
|
|
* @param {Number} [y] The new y position
|
|
* @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
|
|
* animation configuration.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
showAt: function(x, y, animate) {
|
|
var me = this;
|
|
|
|
// Not rendered, then animating to a position is meaningless,
|
|
// just set the x,y position and allow show's processing to work.
|
|
if (!me.rendered && (me.autoRender || me.floating)) {
|
|
me.x = x;
|
|
me.y = y;
|
|
return me.show();
|
|
}
|
|
if (me.floating) {
|
|
me.setPosition(x, y, animate);
|
|
} else {
|
|
me.setPagePosition(x, y, animate);
|
|
}
|
|
me.show();
|
|
},
|
|
|
|
/**
|
|
* Shows this component by the specified {@link Ext.Component Component} or {@link Ext.Element Element}.
|
|
* Used when this component is {@link #floating}.
|
|
* @param {Ext.Component/Ext.dom.Element} component The {@link Ext.Component} or {@link Ext.Element} to show the component by.
|
|
* @param {String} [position] Alignment position as used by {@link Ext.util.Positionable#getAlignToXY}.
|
|
* Defaults to `{@link #defaultAlign}`.
|
|
* @param {Number[]} [offsets] Alignment offsets as used by {@link Ext.util.Positionable#getAlignToXY}.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
showBy: function(cmp, pos, off) {
|
|
var me = this;
|
|
|
|
|
|
if (me.floating && cmp) {
|
|
me.show();
|
|
|
|
// Show may have been vetoed
|
|
if (me.rendered && !me.hidden) {
|
|
// Align to Component or Element using alignTo because normal show methods
|
|
// are container-relative, and we must align to the requested element or
|
|
// Component:
|
|
me.alignTo(cmp, pos || me.defaultAlign, off);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the page XY position of the component. To set the left and top instead, use {@link #setPosition}.
|
|
* This method fires the {@link #event-move} event.
|
|
* @param {Number/Number[]} x The new x position or an array of `[x,y]`.
|
|
* @param {Number} [y] The new y position.
|
|
* @param {Boolean/Object} [animate] True to animate the Component into its new position. You may also pass an
|
|
* animation configuration.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
setPagePosition: function(x, y, animate) {
|
|
var me = this,
|
|
p,
|
|
floatParentBox;
|
|
|
|
if (Ext.isArray(x)) {
|
|
y = x[1];
|
|
x = x[0];
|
|
}
|
|
me.pageX = x;
|
|
me.pageY = y;
|
|
|
|
if (me.floating) {
|
|
|
|
// Floating Components which are registered with a Container have to have their x and y properties made relative
|
|
if (me.isContainedFloater()) {
|
|
floatParentBox = me.floatParent.getTargetEl().getViewRegion();
|
|
if (Ext.isNumber(x) && Ext.isNumber(floatParentBox.left)) {
|
|
x -= floatParentBox.left;
|
|
}
|
|
if (Ext.isNumber(y) && Ext.isNumber(floatParentBox.top)) {
|
|
y -= floatParentBox.top;
|
|
}
|
|
} else {
|
|
p = me.el.translateXY(x, y);
|
|
x = p.x;
|
|
y = p.y;
|
|
}
|
|
|
|
me.setPosition(x, y, animate);
|
|
} else {
|
|
p = me.el.translateXY(x, y);
|
|
me.setPosition(p.x, p.y, animate);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
// Utility method to determine if a Component is floating, and has an owning Container whose coordinate system
|
|
// it must be positioned in when using setPosition.
|
|
isContainedFloater: function() {
|
|
return (this.floating && this.floatParent);
|
|
},
|
|
|
|
/**
|
|
* Sets the current box measurements of the component's underlying element.
|
|
* @param {Object} box An object in the format {x, y, width, height}
|
|
* @return {Ext.Component} this
|
|
*/
|
|
updateBox : function(box){
|
|
this.setSize(box.width, box.height);
|
|
this.setPagePosition(box.x, box.y);
|
|
return this;
|
|
},
|
|
|
|
// Include margins
|
|
getOuterSize: function() {
|
|
var el = this.el;
|
|
return {
|
|
width: el.getWidth() + el.getMargin('lr'),
|
|
height: el.getHeight() + el.getMargin('tb')
|
|
};
|
|
},
|
|
|
|
// @private
|
|
adjustPosition: function(x, y) {
|
|
var me = this,
|
|
floatParentBox;
|
|
|
|
// Floating Components being positioned in their ownerCt have to be made absolute.
|
|
if (me.isContainedFloater()) {
|
|
floatParentBox = me.floatParent.getTargetEl().getViewRegion();
|
|
x += floatParentBox.left;
|
|
y += floatParentBox.top;
|
|
}
|
|
|
|
return {
|
|
x: x,
|
|
y: y
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Gets the current XY position of the component's underlying element.
|
|
* @param {Boolean} [local=false] If true the element's left and top are returned instead of page XY.
|
|
* @return {Number[]} The XY position of the element (e.g., [100, 200])
|
|
*/
|
|
getPosition: function(local) {
|
|
var me = this,
|
|
xy,
|
|
isContainedFloater = me.isContainedFloater(),
|
|
floatParentBox;
|
|
|
|
// Local position for non-floaters means element's local position
|
|
if ((local === true) && !isContainedFloater) {
|
|
return [me.getLocalX(), me.getLocalY()];
|
|
}
|
|
|
|
xy = me.getXY();
|
|
|
|
// Local position for floaters means position relative to the container's target element
|
|
if ((local === true) && isContainedFloater) {
|
|
floatParentBox = me.floatParent.getTargetEl().getViewRegion();
|
|
xy[0] -= floatParentBox.left;
|
|
xy[1] -= floatParentBox.top;
|
|
}
|
|
return xy;
|
|
},
|
|
|
|
getId: function() {
|
|
var me = this,
|
|
xtype;
|
|
|
|
if (!me.id) {
|
|
xtype = me.getXType();
|
|
if (xtype) {
|
|
xtype = xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-');
|
|
} else {
|
|
xtype = Ext.name.toLowerCase() + '-comp';
|
|
}
|
|
me.id = xtype + '-' + me.getAutoId();
|
|
}
|
|
return me.id;
|
|
},
|
|
|
|
/**
|
|
* 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}.
|
|
*
|
|
* @param {String/Ext.Element} [animateTarget=null] **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
|
|
* with `floating: true`.** The target from which the Component should animate from while opening.
|
|
* @param {Function} [callback] A callback function to call after the Component is displayed.
|
|
* Only necessary if animation was specified.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
|
|
* Defaults to this Component.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
show: function(animateTarget, cb, scope) {
|
|
var me = this,
|
|
rendered = me.rendered;
|
|
|
|
if (me.hierarchicallyHidden || (me.floating && !rendered && me.isHierarchicallyHidden())) {
|
|
// If this is a hierarchically hidden floating component, we need to stash
|
|
// the arguments to this call so that the call can be deferred until the next
|
|
// time syncHidden() is called.
|
|
if (!rendered) {
|
|
// If the component has not yet been rendered it requires special treatment.
|
|
// Normally, for rendered components we can just set the pendingShow property
|
|
// and syncHidden() listens to events in the hierarchyEventSource and calls
|
|
// show() when this component becomes hierarchically visible. However,
|
|
// if the component has not yet been rendered the hierarchy event listeners
|
|
// have not yet been attached (since Floating is initialized during the
|
|
// render phase. This means we have to initialize the hierarchy event
|
|
// listeners right now to ensure that the component will show itself when
|
|
// it becomes hierarchically visible.
|
|
me.initHierarchyEvents();
|
|
}
|
|
// defer the show call until next syncHidden(), but ignore animateTarget.
|
|
if (arguments.length > 1) {
|
|
arguments[0] = null;
|
|
me.pendingShow = arguments;
|
|
} else {
|
|
me.pendingShow = true;
|
|
}
|
|
} else if (rendered && me.isVisible()) {
|
|
if (me.toFrontOnShow && me.floating) {
|
|
me.toFront();
|
|
}
|
|
} else {
|
|
if (me.fireEvent('beforeshow', me) !== false) {
|
|
me.hidden = false;
|
|
delete this.getHierarchyState().hidden;
|
|
// Render on first show if there is an autoRender config, or if this
|
|
// is a floater (Window, Menu, BoundList etc).
|
|
|
|
// We suspend layouts here because floaters/autoRenders
|
|
// will layout when onShow is called. If the render succeeded,
|
|
// the layout will be trigger inside onShow, so we don't flush
|
|
// in the first block. If, for some reason we couldn't render, then
|
|
// we resume layouts and force a flush because we don't know if something
|
|
// will force it.
|
|
Ext.suspendLayouts();
|
|
if (!rendered && (me.autoRender || me.floating)) {
|
|
me.doAutoRender();
|
|
rendered = me.rendered;
|
|
}
|
|
|
|
if (rendered) {
|
|
me.beforeShow();
|
|
Ext.resumeLayouts();
|
|
me.onShow.apply(me, arguments);
|
|
me.afterShow.apply(me, arguments);
|
|
} else {
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
} else {
|
|
me.onShowVeto();
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
onShowVeto: Ext.emptyFn,
|
|
|
|
/**
|
|
* Invoked before the Component is shown.
|
|
*
|
|
* @method
|
|
* @template
|
|
* @protected
|
|
*/
|
|
beforeShow: Ext.emptyFn,
|
|
|
|
/**
|
|
* Allows addition of behavior to the show operation. After
|
|
* calling the superclass's onShow, the Component will be visible.
|
|
*
|
|
* Override in subclasses where more complex behaviour is needed.
|
|
*
|
|
* Gets passed the same parameters as #show.
|
|
*
|
|
* @param {String/Ext.Element} [animateTarget]
|
|
* @param {Function} [callback]
|
|
* @param {Object} [scope]
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onShow: function() {
|
|
var me = this;
|
|
|
|
me.el.show();
|
|
me.callParent(arguments);
|
|
|
|
// Constraining/containing element may have changed size while this Component was hidden
|
|
if (me.floating) {
|
|
if (me.maximized) {
|
|
me.fitContainer();
|
|
}
|
|
else if (me.constrain) {
|
|
me.doConstrain();
|
|
}
|
|
}
|
|
},
|
|
|
|
getAnimateTarget: function(target){
|
|
target = target || this.animateTarget;
|
|
if (target) {
|
|
target = target.isComponent ? target.getEl() : Ext.get(target);
|
|
}
|
|
return target || null;
|
|
},
|
|
|
|
/**
|
|
* Invoked after the Component is shown (after #onShow is called).
|
|
*
|
|
* Gets passed the same parameters as #show.
|
|
*
|
|
* @param {String/Ext.Element} [animateTarget]
|
|
* @param {Function} [callback]
|
|
* @param {Object} [scope]
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterShow: function(animateTarget, cb, scope) {
|
|
var me = this,
|
|
myEl = me.el,
|
|
fromBox,
|
|
toBox,
|
|
ghostPanel;
|
|
|
|
// Default to configured animate target if none passed
|
|
animateTarget = me.getAnimateTarget(animateTarget);
|
|
|
|
// Need to be able to ghost the Component
|
|
if (!me.ghost) {
|
|
animateTarget = null;
|
|
}
|
|
// If we're animating, kick of an animation of the ghost from the target to the *Element* current box
|
|
if (animateTarget) {
|
|
toBox = {
|
|
x: myEl.getX(),
|
|
y: myEl.getY(),
|
|
width: myEl.dom.offsetWidth,
|
|
height: myEl.dom.offsetHeight
|
|
};
|
|
fromBox = {
|
|
x: animateTarget.getX(),
|
|
y: animateTarget.getY(),
|
|
width: animateTarget.dom.offsetWidth,
|
|
height: animateTarget.dom.offsetHeight
|
|
};
|
|
myEl.addCls(me.offsetsCls);
|
|
ghostPanel = me.ghost();
|
|
ghostPanel.el.stopAnimation();
|
|
|
|
// Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
|
|
ghostPanel.setX(-10000);
|
|
|
|
me.ghostBox = toBox;
|
|
ghostPanel.el.animate({
|
|
from: fromBox,
|
|
to: toBox,
|
|
listeners: {
|
|
afteranimate: function() {
|
|
delete ghostPanel.componentLayout.lastComponentSize;
|
|
me.unghost();
|
|
delete me.ghostBox;
|
|
myEl.removeCls(me.offsetsCls);
|
|
me.onShowComplete(cb, scope);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
me.onShowComplete(cb, scope);
|
|
}
|
|
me.fireHierarchyEvent('show');
|
|
},
|
|
|
|
/**
|
|
* Invoked after the #afterShow method is complete.
|
|
*
|
|
* Gets passed the same `callback` and `scope` parameters that #afterShow received.
|
|
*
|
|
* @param {Function} [callback]
|
|
* @param {Object} [scope]
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onShowComplete: function(cb, scope) {
|
|
var me = this;
|
|
if (me.floating) {
|
|
me.toFront();
|
|
me.onFloatShow();
|
|
}
|
|
Ext.callback(cb, scope || me);
|
|
me.fireEvent('show', me);
|
|
delete me.hiddenByLayout;
|
|
},
|
|
|
|
/**
|
|
* Hides this Component, setting it to invisible using the configured {@link #hideMode}.
|
|
* @param {String/Ext.Element/Ext.Component} [animateTarget=null] **only valid for {@link #cfg-floating} Components
|
|
* such as {@link Ext.window.Window Window}s or {@link Ext.tip.ToolTip ToolTip}s, or regular Components which have
|
|
* been configured with `floating: true`.**. The target to which the Component should animate while hiding.
|
|
* @param {Function} [callback] A callback function to call after the Component is hidden.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
|
|
* Defaults to this Component.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
hide: function(animateTarget, cb, scope) {
|
|
var me = this,
|
|
continueHide;
|
|
|
|
if (me.pendingShow) {
|
|
// If this is a hierarchically hidden floating component with a pending show
|
|
// hide() simply cancels the pending show.
|
|
delete me.pendingShow;
|
|
} if (!(me.rendered && !me.isVisible())) {
|
|
continueHide = (me.fireEvent('beforehide', me) !== false);
|
|
if (me.hierarchicallyHidden || continueHide) {
|
|
me.hidden = true;
|
|
me.getHierarchyState().hidden = true;
|
|
if (me.rendered) {
|
|
me.onHide.apply(me, arguments);
|
|
}
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Possibly animates down to a target element.
|
|
*
|
|
* Allows addition of behavior to the hide operation. After
|
|
* calling the superclass’s onHide, the Component will be hidden.
|
|
*
|
|
* Gets passed the same parameters as #hide.
|
|
*
|
|
* @param {String/Ext.Element/Ext.Component} [animateTarget]
|
|
* @param {Function} [callback]
|
|
* @param {Object} [scope]
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onHide: function(animateTarget, cb, scope) {
|
|
var me = this,
|
|
ghostPanel,
|
|
fromSize,
|
|
toBox;
|
|
|
|
// Default to configured animate target if none passed
|
|
animateTarget = me.getAnimateTarget(animateTarget);
|
|
|
|
// Need to be able to ghost the Component
|
|
if (!me.ghost) {
|
|
animateTarget = null;
|
|
}
|
|
// If we're animating, kick off an animation of the ghost down to the target
|
|
if (animateTarget) {
|
|
toBox = {
|
|
x: animateTarget.getX(),
|
|
y: animateTarget.getY(),
|
|
width: animateTarget.dom.offsetWidth,
|
|
height: animateTarget.dom.offsetHeight
|
|
};
|
|
ghostPanel = me.ghost();
|
|
ghostPanel.el.stopAnimation();
|
|
fromSize = me.getSize();
|
|
ghostPanel.el.animate({
|
|
to: toBox,
|
|
listeners: {
|
|
afteranimate: function() {
|
|
delete ghostPanel.componentLayout.lastComponentSize;
|
|
ghostPanel.el.hide();
|
|
ghostPanel.el.setSize(fromSize);
|
|
me.afterHide(cb, scope);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
me.el.hide();
|
|
if (!animateTarget) {
|
|
me.afterHide(cb, scope);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Invoked after the Component has been hidden.
|
|
*
|
|
* Gets passed the same `callback` and `scope` parameters that #onHide received.
|
|
*
|
|
* @param {Function} [callback]
|
|
* @param {Object} [scope]
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterHide: function(cb, scope) {
|
|
var me = this,
|
|
activeEl = Ext.Element.getActiveElement();
|
|
|
|
me.hiddenByLayout = null;
|
|
|
|
// we are the back-end method of onHide at this level, but our call to our parent
|
|
// may need to be async... so callParent won't quite work here...
|
|
Ext.AbstractComponent.prototype.onHide.call(me);
|
|
|
|
// If hiding a Component which is focused, or contains focus: blur the focused el.
|
|
if (activeEl === me.el || me.el.contains(activeEl)) {
|
|
Ext.fly(activeEl).blur();
|
|
}
|
|
|
|
Ext.callback(cb, scope || me);
|
|
me.fireEvent('hide', me);
|
|
me.fireHierarchyEvent('hide');
|
|
},
|
|
|
|
/**
|
|
* Allows addition of behavior to the destroy operation.
|
|
* After calling the superclass's onDestroy, the Component will be destroyed.
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onDestroy: function() {
|
|
var me = this;
|
|
|
|
// Ensure that any ancillary components are destroyed.
|
|
if (me.rendered) {
|
|
Ext.destroy(
|
|
me.dd,
|
|
me.resizer,
|
|
me.proxy,
|
|
me.proxyWrap,
|
|
me.resizerComponent
|
|
);
|
|
}
|
|
delete me.focusTask;
|
|
me.callParent();
|
|
},
|
|
|
|
deleteMembers: function() {
|
|
var args = arguments,
|
|
len = args.length,
|
|
i = 0;
|
|
for (; i < len; ++i) {
|
|
delete this[args[i]];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Try to focus this component.
|
|
* @param {Boolean} [selectText] If applicable, true to also select the text in this component
|
|
* @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).
|
|
* @param {Function} [callback] Only needed if the `delay` parameter is used. A function to call upon focus.
|
|
* @param {Function} [scope] Only needed if the `delay` parameter is used. The scope (`this` reference) in which to execute the callback.
|
|
* @return {Ext.Component} The focused Component. Usually <code>this</code> Component. Some Containers may
|
|
* delegate focus to a descendant Component ({@link Ext.window.Window Window}s can do this through their
|
|
* {@link Ext.window.Window#defaultFocus defaultFocus} config option.
|
|
*/
|
|
focus: function(selectText, delay, callback, scope) {
|
|
var me = this,
|
|
focusEl,
|
|
focusElDom,
|
|
containerScrollTop;
|
|
|
|
// If delay is wanted, queue a call to this function.
|
|
if (delay) {
|
|
if (!me.focusTask) {
|
|
// One global DelayedTask to assign focus
|
|
// So that the last focus call wins.
|
|
Ext.Component.prototype.focusTask = new Ext.util.DelayedTask(me.focus);
|
|
}
|
|
me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false, callback, scope]);
|
|
return me;
|
|
}
|
|
|
|
// An immediate focus call must cancel any outstanding delayed focus calls.
|
|
if (me.focusTask) {
|
|
me.focusTask.cancel();
|
|
}
|
|
|
|
if (me.rendered && !me.isDestroyed && me.isVisible(true) && (focusEl = me.getFocusEl())) {
|
|
|
|
// getFocusEl might return a Component if a Container wishes to delegate focus to a descendant.
|
|
// Window can do this via its defaultFocus configuration which can reference a Button.
|
|
if (focusEl.isComponent) {
|
|
return focusEl.focus(selectText, delay);
|
|
}
|
|
|
|
// If it was an Element with a dom property
|
|
if ((focusElDom = focusEl.dom)) {
|
|
|
|
// Not a natural focus holding element, add a tab index to make it programatically focusable.
|
|
if (focusEl.needsTabIndex()) {
|
|
focusElDom.tabIndex = -1;
|
|
}
|
|
|
|
if (me.floating) {
|
|
containerScrollTop = me.container.dom.scrollTop;
|
|
}
|
|
|
|
// Focus the element.
|
|
// The focusEl has a DOM focus listener on it which invokes the Component's onFocus method
|
|
// to perform Component-specific focus processing
|
|
focusEl.focus();
|
|
if (selectText === true) {
|
|
focusElDom.select();
|
|
}
|
|
|
|
// Call the callback when focus is done
|
|
Ext.callback(callback, scope);
|
|
}
|
|
|
|
// Focusing a floating Component brings it to the front of its stack.
|
|
// this is performed by its zIndexManager. Pass preventFocus true to avoid recursion.
|
|
if (me.floating) {
|
|
me.toFront(true);
|
|
if (containerScrollTop !== undefined) {
|
|
me.container.dom.scrollTop = containerScrollTop;
|
|
}
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Cancel any deferred focus on this component
|
|
* @protected
|
|
*/
|
|
cancelFocus: function() {
|
|
var task = this.focusTask;
|
|
if (task) {
|
|
task.cancel();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
blur: function() {
|
|
var focusEl;
|
|
if (this.rendered && (focusEl = this.getFocusEl())) {
|
|
focusEl.blur();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// Deprecate 5.0
|
|
getResizeEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// Deprecate 5.0
|
|
getPositionEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// Deprecate 5.0
|
|
getActionEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// Deprecate 5.0
|
|
getVisibilityEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
/*
|
|
* @protected
|
|
* Used by {@link Ext.ComponentQuery ComponentQuery}, and the {@link Ext.AbstractComponent#up up} method to find the
|
|
* owning Component in the linkage hierarchy.
|
|
*
|
|
* By default this returns the Container which contains this Component.
|
|
*
|
|
* This may be overriden by Component authors who implement ownership hierarchies which are not
|
|
* based upon ownerCt, such as BoundLists being owned by Fields or Menus being owned by Buttons.
|
|
*/
|
|
getRefOwner: function() {
|
|
return this.ownerCt || this.floatParent;
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Implements an upward event bubbling policy. By default a Component bubbles events up to its {@link #getRefOwner reference owner}.
|
|
*
|
|
* Component subclasses may implement a different bubbling strategy by overriding this method.
|
|
*/
|
|
getBubbleTarget: function() {
|
|
return this.getRefOwner();
|
|
},
|
|
|
|
// @private
|
|
getContentTarget: function() {
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* Clone the current component using the original config values passed into this instance by default.
|
|
* @param {Object} overrides A new config containing any properties to override in the cloned version.
|
|
* An id property can be passed on this object, otherwise one will be generated to avoid duplicates.
|
|
* @return {Ext.Component} clone The cloned copy of this component
|
|
*/
|
|
cloneConfig: function(overrides) {
|
|
overrides = overrides || {};
|
|
var id = overrides.id || Ext.id(),
|
|
cfg = Ext.applyIf(overrides, this.initialConfig),
|
|
self;
|
|
|
|
cfg.id = id;
|
|
|
|
self = Ext.getClass(this);
|
|
|
|
// prevent dup id
|
|
return new self(cfg);
|
|
},
|
|
|
|
/**
|
|
* Gets the xtype for this component as registered with {@link Ext.ComponentManager}. For a list of all available
|
|
* xtypes, see the {@link Ext.Component} header. Example usage:
|
|
*
|
|
* var t = new Ext.form.field.Text();
|
|
* alert(t.getXType()); // alerts 'textfield'
|
|
*
|
|
* @return {String} The xtype
|
|
*/
|
|
getXType: function() {
|
|
return this.self.xtype;
|
|
},
|
|
|
|
/**
|
|
* Find a container above this component at any level by a custom function. If the passed function returns true, the
|
|
* container will be returned.
|
|
*
|
|
* See also the {@link Ext.Component#up up} method.
|
|
*
|
|
* @param {Function} fn The custom function to call with the arguments (container, this component).
|
|
* @return {Ext.container.Container} The first Container for which the custom function returns true
|
|
*/
|
|
findParentBy: function(fn) {
|
|
var p;
|
|
|
|
// Iterate up the ownerCt chain until there's no ownerCt, or we find an ancestor which matches using the selector function.
|
|
for (p = this.getBubbleTarget(); p && !fn(p, this); p = p.getBubbleTarget()) {
|
|
// do nothing
|
|
}
|
|
return p || null;
|
|
},
|
|
|
|
/**
|
|
* Find a container above this component at any level by xtype or class
|
|
*
|
|
* See also the {@link Ext.Component#up up} method.
|
|
*
|
|
* @param {String/Ext.Class} xtype The xtype string for a component, or the class of the component directly
|
|
* @return {Ext.container.Container} The first Container which matches the given xtype or class
|
|
*/
|
|
findParentByType: function(xtype) {
|
|
return Ext.isFunction(xtype) ?
|
|
this.findParentBy(function(p) {
|
|
return p.constructor === xtype;
|
|
})
|
|
:
|
|
this.up(xtype);
|
|
},
|
|
|
|
/**
|
|
* Bubbles up the component/container heirarchy, calling the specified function with each component. The scope
|
|
* (*this*) of function call will be the scope provided or the current component. The arguments to the function will
|
|
* be the args provided or the current component. If the function returns false at any point, the bubble is stopped.
|
|
*
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope of the function. Defaults to current node.
|
|
* @param {Array} [args] The args to call the function with. Defaults to passing the current component.
|
|
* @return {Ext.Component} this
|
|
*/
|
|
bubble: function(fn, scope, args) {
|
|
var p = this;
|
|
while (p) {
|
|
if (fn.apply(scope || p, args || [p]) === false) {
|
|
break;
|
|
}
|
|
p = p.getBubbleTarget();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getProxy: function() {
|
|
var me = this,
|
|
target;
|
|
|
|
if (!me.proxy) {
|
|
target = Ext.getBody();
|
|
me.proxy = me.el.createProxy(Ext.baseCSSPrefix + 'proxy-el', target, true);
|
|
}
|
|
return me.proxy;
|
|
},
|
|
|
|
/*
|
|
* For more information on the hierarchy events, see the note for the
|
|
* hierarchyEventSource observer defined in the onClassCreated callback.
|
|
*
|
|
* This functionality is contained in Component (as opposed to Container)
|
|
* because a Component can be the ownerCt for a floating component (loadmask),
|
|
* and the loadmask needs to know when its owner is shown/hidden via the
|
|
* hierarchyEventSource so that its hidden state can be synchronized.
|
|
*
|
|
* TODO: merge this functionality with Ext.globalEvents
|
|
*/
|
|
fireHierarchyEvent: function (ename) {
|
|
this.hierarchyEventSource.fireEvent(ename, this);
|
|
},
|
|
|
|
onAdded: function() {
|
|
this.callParent(arguments);
|
|
if (this.hierarchyEventSource.hasListeners.added) {
|
|
this.fireHierarchyEvent('added');
|
|
}
|
|
}
|
|
}, function () {
|
|
/*
|
|
* The observer below is used to be able to detect showing/hiding at various levels
|
|
* in the hierarchy. While it's not particularly expensive to bubble an event up,
|
|
* cascading an event down can be quite costly.
|
|
*
|
|
* The main usage for this is to do with floating components. For example, the load mask
|
|
* is a floating component. The component it is masking may be inside several containers.
|
|
* As such, we need to know when component is hidden, either directly, or via a parent
|
|
* container being hidden. We can subscribe to these events and filter out the appropriate
|
|
* container.
|
|
*/
|
|
this.hierarchyEventSource = this.prototype.hierarchyEventSource = new Ext.util.Observable({ events: {
|
|
hide: true,
|
|
show: true,
|
|
collapse: true,
|
|
expand: true,
|
|
added: true
|
|
}});
|
|
});
|
|
|
|
/**
|
|
* This override provides extra, border layout specific methods for `Ext.Component`. The
|
|
* `Ext.layout.container.Border` class requires this override so that the added functions
|
|
* are only included in a build when `border` layout is used.
|
|
*/
|
|
Ext.define('Ext.layout.container.border.Region', {
|
|
override: 'Ext.Component',
|
|
|
|
/**
|
|
* This method is called by the `Ext.layout.container.Border` class when instances are
|
|
* added as regions to the layout. Since it is valid to add any component to a border
|
|
* layout as a region, this method must be added to `Ext.Component` but is only ever
|
|
* called when that component is owned by a `border` layout.
|
|
* @private
|
|
*/
|
|
initBorderRegion: function () {
|
|
var me = this;
|
|
|
|
if (!me._borderRegionInited) {
|
|
me._borderRegionInited = true;
|
|
|
|
// Now that border regions can have dynamic region/weight, these need to be
|
|
// saved to state as they change:
|
|
me.addStateEvents(['changeregion', 'changeweight']);
|
|
|
|
// We override getState on the instance for a couple reasons. Firstly, since
|
|
// there are very few border regions in an application, the overhead here is
|
|
// not a concern. Secondly, if this method were on the prototype it would
|
|
// impact all components.
|
|
Ext.override(me, {
|
|
getState: function () {
|
|
var state = me.callParent();
|
|
|
|
// Now that border regions can have dynamic region/weight, these need to be saved
|
|
// to state:
|
|
state = me.addPropertyToState(state, 'region');
|
|
state = me.addPropertyToState(state, 'weight');
|
|
|
|
return state;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the owning container if that container uses `border` layout. Otherwise
|
|
* this method returns `null`.
|
|
* @return {Ext.container.Container} The owning border container or `null`.
|
|
* @private
|
|
*/
|
|
getOwningBorderContainer: function () {
|
|
var layout = this.getOwningBorderLayout();
|
|
return layout && layout.owner;
|
|
},
|
|
|
|
/**
|
|
* Returns the owning `border` (`Ext.layout.container.Border`) instance if there is
|
|
* one. Otherwise this method returns `null`.
|
|
* @return {Ext.layout.container.Border} The owning border layout or `null`.
|
|
* @private
|
|
*/
|
|
getOwningBorderLayout: function () {
|
|
// the ownerLayot (if set) may or may not be a border layout
|
|
var layout = this.ownerLayout;
|
|
return (layout && layout.isBorderLayout) ? layout : null;
|
|
},
|
|
|
|
/**
|
|
* This method changes the `region` config property for this border region. This is
|
|
* only valid if this component is in a `border` layout (`Ext.layout.container.Border`).
|
|
* @param {String} region The new `region` value (`"north"`, `"south"`, `"east"` or
|
|
* `"west"`).
|
|
* @return {String} The previous value of the `region` property.
|
|
*/
|
|
setBorderRegion: function (region) {
|
|
var me = this,
|
|
borderLayout,
|
|
old = me.region;
|
|
|
|
if (region !== old) {
|
|
borderLayout = me.getOwningBorderLayout();
|
|
if (borderLayout) {
|
|
var regionFlags = borderLayout.regionFlags[region],
|
|
placeholder = me.placeholder,
|
|
splitter = me.splitter,
|
|
owner = borderLayout.owner,
|
|
regionMeta = borderLayout.regionMeta,
|
|
collapsed = me.collapsed || me.floated,
|
|
delta, items, index;
|
|
|
|
if (me.fireEventArgs('beforechangeregion', [me, region]) === false) {
|
|
return old;
|
|
}
|
|
Ext.suspendLayouts();
|
|
|
|
me.region = region;
|
|
Ext.apply(me, regionFlags);
|
|
|
|
if (me.updateCollapseTool) {
|
|
me.updateCollapseTool();
|
|
}
|
|
|
|
if (splitter) {
|
|
// splitter.region = region; -- we don't set "region" on splitters!
|
|
Ext.apply(splitter, regionFlags);
|
|
splitter.updateOrientation();
|
|
|
|
items = owner.items;
|
|
index = items.indexOf(me);
|
|
if (index >= 0) {
|
|
delta = regionMeta[region].splitterDelta;
|
|
if (items.getAt(index + delta) !== splitter) {
|
|
// splitter is not where we expect it, so move it there
|
|
items.remove(splitter);
|
|
index = items.indexOf(me); // could have changed
|
|
if (delta > 0) {
|
|
++index;
|
|
}
|
|
// else, insert at index and splitter will be before the item
|
|
items.insert(index, splitter);
|
|
|
|
// Now that the splitter is in the right place in me.items,
|
|
// the layout will fix up the DOM childNode to be at the same
|
|
// index as well.
|
|
}
|
|
}
|
|
}
|
|
if (placeholder) {
|
|
// The collapsed item is potentially remembering wrong things (for
|
|
// example, if it was collapsed as a West region and changed to be
|
|
// North). The only simple answer here is to expand/collapse the
|
|
// item (w/o animation).
|
|
if (collapsed) {
|
|
me.expand(false);
|
|
}
|
|
|
|
owner.remove(placeholder);
|
|
me.placeholder = null; // force creation of a new placeholder
|
|
|
|
if (collapsed) {
|
|
me.collapse(null, false);
|
|
}
|
|
}
|
|
|
|
owner.updateLayout();
|
|
Ext.resumeLayouts(true);
|
|
|
|
me.fireEventArgs('changeregion', [me, old]);
|
|
} else {
|
|
me.region = region; // maybe not added yet
|
|
}
|
|
}
|
|
|
|
return old;
|
|
},
|
|
|
|
/**
|
|
* Sets the `weight` config property for this component. This is only valid if this
|
|
* component is in a `border` layout (`Ext.layout.container.Border`).
|
|
* @param {Number} weight The new `weight` value.
|
|
* @return {Number} The previous value of the `weight` property.
|
|
*/
|
|
setRegionWeight: function (weight) {
|
|
var me = this,
|
|
ownerCt = me.getOwningBorderContainer(),
|
|
placeholder = me.placeholder,
|
|
old = me.weight;
|
|
|
|
if (weight !== old) {
|
|
if (me.fireEventArgs('beforechangeweight', [me, weight]) !== false) {
|
|
me.weight = weight;
|
|
if (placeholder) {
|
|
placeholder.weight = weight;
|
|
}
|
|
if (ownerCt) {
|
|
ownerCt.updateLayout();
|
|
}
|
|
me.fireEventArgs('changeweight', [me, old]);
|
|
}
|
|
}
|
|
|
|
return old;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A class used to load remote content to an Element. Sample usage:
|
|
*
|
|
* Ext.get('el').load({
|
|
* url: 'myPage.php',
|
|
* scripts: true,
|
|
* params: {
|
|
* id: 1
|
|
* }
|
|
* });
|
|
*
|
|
* In general this class will not be instanced directly, rather the {@link Ext.Element#method-load} method
|
|
* will be used.
|
|
*/
|
|
Ext.define('Ext.ElementLoader', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
statics: {
|
|
Renderer: {
|
|
Html: function(loader, response, active){
|
|
loader.getTarget().update(response.responseText, active.scripts === true);
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} url (required)
|
|
* The url to retrieve the content from.
|
|
*/
|
|
url: null,
|
|
|
|
/**
|
|
* @cfg {Object} params
|
|
* Any params to be attached to the Ajax request. These parameters will
|
|
* be overridden by any params in the load options.
|
|
*/
|
|
params: null,
|
|
|
|
/**
|
|
* @cfg {Object} baseParams Params that will be attached to every request. These parameters
|
|
* will not be overridden by any params in the load options.
|
|
*/
|
|
baseParams: null,
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} autoLoad
|
|
* True to have the loader make a request as soon as it is created.
|
|
* This argument can also be a set of options that will be passed to {@link #method-load} is called.
|
|
*/
|
|
autoLoad: false,
|
|
|
|
/**
|
|
* @cfg {HTMLElement/Ext.Element/String} target
|
|
* The target element for the loader. It can be the DOM element, the id or an {@link Ext.Element}.
|
|
*/
|
|
target: null,
|
|
|
|
/**
|
|
* @cfg {Boolean/String} loadMask
|
|
* True or a string to show when the element is loading.
|
|
*/
|
|
loadMask: false,
|
|
|
|
/**
|
|
* @cfg {Object} ajaxOptions
|
|
* Any additional options to be passed to the request, for example timeout or headers.
|
|
*/
|
|
ajaxOptions: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} scripts
|
|
* True to parse any inline script tags in the response.
|
|
*/
|
|
scripts: false,
|
|
|
|
/**
|
|
* @cfg {Function} success
|
|
* A function to be called when a load request is successful.
|
|
* Will be called with the following config parameters:
|
|
*
|
|
* - this - The ElementLoader instance.
|
|
* - response - The response object.
|
|
* - options - Ajax options.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} failure A function to be called when a load request fails.
|
|
* Will be called with the following config parameters:
|
|
*
|
|
* - this - The ElementLoader instance.
|
|
* - response - The response object.
|
|
* - options - Ajax options.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} callback A function to be called when a load request finishes.
|
|
* Will be called with the following config parameters:
|
|
*
|
|
* - this - The ElementLoader instance.
|
|
* - success - True if successful request.
|
|
* - response - The response object.
|
|
* - options - Ajax options.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope to execute the {@link #success} and {@link #failure} functions in.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} renderer
|
|
* A custom function to render the content to the element. The function should
|
|
* return false if the renderer could not be applied. The passed parameters are:
|
|
*
|
|
* - The loader
|
|
* - The response
|
|
* - The active request
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} isLoader
|
|
* `true` in this class to identify an object as an instantiated ElementLoader, or subclass thereof.
|
|
*/
|
|
isLoader: true,
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
autoLoad;
|
|
|
|
config = config || {};
|
|
Ext.apply(me, config);
|
|
me.setTarget(me.target);
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeload
|
|
* Fires before a load request is made to the server.
|
|
* Returning false from an event listener can prevent the load
|
|
* from occurring.
|
|
* @param {Ext.ElementLoader} this
|
|
* @param {Object} options The options passed to the request
|
|
*/
|
|
'beforeload',
|
|
|
|
/**
|
|
* @event exception
|
|
* Fires after an unsuccessful load.
|
|
* @param {Ext.ElementLoader} this
|
|
* @param {Object} response The response from the server
|
|
* @param {Object} options The options passed to the request
|
|
*/
|
|
'exception',
|
|
|
|
/**
|
|
* @event load
|
|
* Fires after a successful load.
|
|
* @param {Ext.ElementLoader} this
|
|
* @param {Object} response The response from the server
|
|
* @param {Object} options The options passed to the request
|
|
*/
|
|
'load'
|
|
);
|
|
|
|
// don't pass config because we have already applied it.
|
|
me.mixins.observable.constructor.call(me);
|
|
|
|
if (me.autoLoad) {
|
|
autoLoad = me.autoLoad;
|
|
if (autoLoad === true) {
|
|
autoLoad = {};
|
|
}
|
|
me.load(autoLoad);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets an {@link Ext.Element} as the target of this loader.
|
|
* Note that if the target is changed, any active requests will be aborted.
|
|
* @param {String/HTMLElement/Ext.Element} target The element or its ID.
|
|
*/
|
|
setTarget: function(target){
|
|
var me = this;
|
|
target = Ext.get(target);
|
|
if (me.target && me.target != target) {
|
|
me.abort();
|
|
}
|
|
me.target = target;
|
|
},
|
|
|
|
/**
|
|
* Returns the target of this loader.
|
|
* @return {Ext.Component} The target or null if none exists.
|
|
*/
|
|
getTarget: function(){
|
|
return this.target || null;
|
|
},
|
|
|
|
/**
|
|
* Aborts the active load request
|
|
*/
|
|
abort: function(){
|
|
var active = this.active;
|
|
if (active !== undefined) {
|
|
Ext.Ajax.abort(active.request);
|
|
if (active.mask) {
|
|
this.removeMask();
|
|
}
|
|
delete this.active;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes the mask on the target
|
|
* @private
|
|
*/
|
|
removeMask: function(){
|
|
this.target.unmask();
|
|
},
|
|
|
|
/**
|
|
* Adds the mask on the target
|
|
* @private
|
|
* @param {Boolean/Object} mask The mask configuration
|
|
*/
|
|
addMask: function(mask){
|
|
this.target.mask(mask === true ? null : mask);
|
|
},
|
|
|
|
/**
|
|
* Loads new data from the server.
|
|
* @param {Object} options The options for the request. They can be any configuration option that can be specified for
|
|
* the class, with the exception of the target option. Note that any options passed to the method will override any
|
|
* class defaults.
|
|
*/
|
|
load: function(options) {
|
|
|
|
options = Ext.apply({}, options);
|
|
|
|
var me = this,
|
|
mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
|
|
params = Ext.apply({}, options.params),
|
|
ajaxOptions = Ext.apply({}, options.ajaxOptions),
|
|
callback = options.callback || me.callback,
|
|
scope = options.scope || me.scope || me;
|
|
|
|
Ext.applyIf(ajaxOptions, me.ajaxOptions);
|
|
Ext.applyIf(options, ajaxOptions);
|
|
|
|
Ext.applyIf(params, me.params);
|
|
Ext.apply(params, me.baseParams);
|
|
|
|
Ext.applyIf(options, {
|
|
url: me.url
|
|
});
|
|
|
|
|
|
Ext.apply(options, {
|
|
scope: me,
|
|
params: params,
|
|
callback: me.onComplete
|
|
});
|
|
|
|
if (me.fireEvent('beforeload', me, options) === false) {
|
|
return;
|
|
}
|
|
|
|
if (mask) {
|
|
me.addMask(mask);
|
|
}
|
|
|
|
me.active = {
|
|
options: options,
|
|
mask: mask,
|
|
scope: scope,
|
|
callback: callback,
|
|
success: options.success || me.success,
|
|
failure: options.failure || me.failure,
|
|
renderer: options.renderer || me.renderer,
|
|
scripts: Ext.isDefined(options.scripts) ? options.scripts : me.scripts
|
|
};
|
|
me.active.request = Ext.Ajax.request(options);
|
|
me.setOptions(me.active, options);
|
|
},
|
|
|
|
/**
|
|
* Sets any additional options on the active request
|
|
* @private
|
|
* @param {Object} active The active request
|
|
* @param {Object} options The initial options
|
|
*/
|
|
setOptions: Ext.emptyFn,
|
|
|
|
/**
|
|
* Parses the response after the request completes
|
|
* @private
|
|
* @param {Object} options Ajax options
|
|
* @param {Boolean} success Success status of the request
|
|
* @param {Object} response The response object
|
|
*/
|
|
onComplete: function(options, success, response) {
|
|
var me = this,
|
|
active = me.active,
|
|
scope;
|
|
|
|
if (active) {
|
|
scope = active.scope;
|
|
if (success) {
|
|
success = me.getRenderer(active.renderer).call(me, me, response, active) !== false;
|
|
}
|
|
|
|
if (success) {
|
|
Ext.callback(active.success, scope, [me, response, options]);
|
|
me.fireEvent('load', me, response, options);
|
|
} else {
|
|
Ext.callback(active.failure, scope, [me, response, options]);
|
|
me.fireEvent('exception', me, response, options);
|
|
}
|
|
Ext.callback(active.callback, scope, [me, success, response, options]);
|
|
if (active.mask) {
|
|
me.removeMask();
|
|
}
|
|
}
|
|
|
|
delete me.active;
|
|
},
|
|
|
|
/**
|
|
* Gets the renderer to use
|
|
* @private
|
|
* @param {String/Function} renderer The renderer to use
|
|
* @return {Function} A rendering function to use.
|
|
*/
|
|
getRenderer: function(renderer){
|
|
if (Ext.isFunction(renderer)) {
|
|
return renderer;
|
|
}
|
|
return this.statics().Renderer.Html;
|
|
},
|
|
|
|
/**
|
|
* Automatically refreshes the content over a specified period.
|
|
* @param {Number} interval The interval to refresh in ms.
|
|
* @param {Object} options (optional) The options to pass to the load method. See {@link #method-load}
|
|
*/
|
|
startAutoRefresh: function(interval, options){
|
|
var me = this;
|
|
me.stopAutoRefresh();
|
|
me.autoRefresh = setInterval(function(){
|
|
me.load(options);
|
|
}, interval);
|
|
},
|
|
|
|
/**
|
|
* Clears any auto refresh. See {@link #startAutoRefresh}.
|
|
*/
|
|
stopAutoRefresh: function(){
|
|
clearInterval(this.autoRefresh);
|
|
delete this.autoRefresh;
|
|
},
|
|
|
|
/**
|
|
* Checks whether the loader is automatically refreshing. See {@link #startAutoRefresh}.
|
|
* @return {Boolean} True if the loader is automatically refreshing
|
|
*/
|
|
isAutoRefreshing: function(){
|
|
return Ext.isDefined(this.autoRefresh);
|
|
},
|
|
|
|
/**
|
|
* Destroys the loader. Any active requests will be aborted.
|
|
*/
|
|
destroy: function(){
|
|
var me = this;
|
|
me.stopAutoRefresh();
|
|
delete me.target;
|
|
me.abort();
|
|
me.clearListeners();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is used to load content via Ajax into a {@link Ext.Component}. In general
|
|
* this class will not be instanced directly, rather a loader configuration will be passed to the
|
|
* constructor of the {@link Ext.Component}.
|
|
*
|
|
* ## HTML Renderer
|
|
*
|
|
* By default, the content loaded will be processed as raw html. The response text
|
|
* from the request is taken and added to the component. This can be used in
|
|
* conjunction with the {@link #scripts} option to execute any inline scripts in
|
|
* the resulting content. Using this renderer has the same effect as passing the
|
|
* {@link Ext.Component#html} configuration option.
|
|
*
|
|
* ## Data Renderer
|
|
*
|
|
* This renderer allows content to be added by using JSON data and a {@link Ext.XTemplate}.
|
|
* The content received from the response is passed to the {@link Ext.Component#update} method.
|
|
* This content is run through the attached {@link Ext.Component#tpl} and the data is added to
|
|
* the Component. Using this renderer has the same effect as using the {@link Ext.Component#data}
|
|
* configuration in conjunction with a {@link Ext.Component#tpl}.
|
|
*
|
|
* ## Component Renderer
|
|
*
|
|
* This renderer can only be used with a {@link Ext.container.Container} and subclasses. It allows for
|
|
* Components to be loaded remotely into a Container. The response is expected to be a single/series of
|
|
* {@link Ext.Component} configuration objects. When the response is received, the data is decoded
|
|
* and then passed to {@link Ext.container.Container#method-add}. Using this renderer has the same effect as specifying
|
|
* the {@link Ext.container.Container#cfg-items} configuration on a Container.
|
|
*
|
|
* ## Custom Renderer
|
|
*
|
|
* A custom function can be passed to handle any other special case, see the {@link #renderer} option.
|
|
*
|
|
* ## Example Usage
|
|
*
|
|
* var cmp = Ext.create('Ext.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* tpl: '{firstName} - {lastName}',
|
|
* loader: {
|
|
* url: 'myPage.php',
|
|
* renderer: 'data',
|
|
* params: {
|
|
* userId: 1
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* // call the loader manually (or use autoLoad:true instead)
|
|
* cmp.getLoader().load();
|
|
*/
|
|
Ext.define('Ext.ComponentLoader', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.ElementLoader ,
|
|
|
|
statics: {
|
|
Renderer: {
|
|
Data: function(loader, response, active){
|
|
var success = true;
|
|
try {
|
|
loader.getTarget().update(Ext.decode(response.responseText));
|
|
} catch (e) {
|
|
success = false;
|
|
}
|
|
return success;
|
|
},
|
|
|
|
Component: function(loader, response, active){
|
|
var success = true,
|
|
target = loader.getTarget(),
|
|
items = [];
|
|
|
|
|
|
try {
|
|
items = Ext.decode(response.responseText);
|
|
} catch (e) {
|
|
success = false;
|
|
}
|
|
|
|
if (success) {
|
|
target.suspendLayouts();
|
|
if (active.removeAll) {
|
|
target.removeAll();
|
|
}
|
|
target.add(items);
|
|
target.resumeLayouts(true);
|
|
}
|
|
return success;
|
|
}
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Ext.Component/String} target The target {@link Ext.Component} for the loader.
|
|
* If a string is passed it will be looked up via the id.
|
|
*/
|
|
target: null,
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} loadMask True or a {@link Ext.LoadMask} configuration to enable masking during loading.
|
|
*/
|
|
loadMask: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} scripts True to parse any inline script tags in the response. This only used when using the html
|
|
* {@link #renderer}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Function} renderer
|
|
|
|
The type of content that is to be loaded into, which can be one of 3 types:
|
|
|
|
+ **html** : Loads raw html content, see {@link Ext.Component#html}
|
|
+ **data** : Loads raw html content, see {@link Ext.Component#data}
|
|
+ **component** : Loads child {Ext.Component} instances. This option is only valid when used with a Container.
|
|
|
|
Alternatively, you can pass a function which is called with the following parameters.
|
|
|
|
+ loader - Loader instance
|
|
+ response - The server response
|
|
+ active - The active request
|
|
|
|
The function must return false is loading is not successful. Below is a sample of using a custom renderer:
|
|
|
|
new Ext.Component({
|
|
loader: {
|
|
url: 'myPage.php',
|
|
renderer: function(loader, response, active) {
|
|
var text = response.responseText;
|
|
loader.getTarget().update('The response is ' + text);
|
|
return true;
|
|
}
|
|
}
|
|
});
|
|
*/
|
|
renderer: 'html',
|
|
|
|
/**
|
|
* Set a {Ext.Component} as the target of this loader. Note that if the target is changed,
|
|
* any active requests will be aborted.
|
|
* @param {String/Ext.Component} target The component to be the target of this loader. If a string is passed
|
|
* it will be looked up via its id.
|
|
*/
|
|
setTarget: function(target){
|
|
var me = this;
|
|
|
|
if (Ext.isString(target)) {
|
|
target = Ext.getCmp(target);
|
|
}
|
|
|
|
if (me.target && me.target != target) {
|
|
me.abort();
|
|
}
|
|
me.target = target;
|
|
},
|
|
|
|
// inherit docs
|
|
removeMask: function(){
|
|
this.target.setLoading(false);
|
|
},
|
|
|
|
/**
|
|
* Add the mask on the target
|
|
* @private
|
|
* @param {Boolean/Object} mask The mask configuration
|
|
*/
|
|
addMask: function(mask){
|
|
this.target.setLoading(mask);
|
|
},
|
|
|
|
|
|
setOptions: function(active, options){
|
|
active.removeAll = Ext.isDefined(options.removeAll) ? options.removeAll : this.removeAll;
|
|
},
|
|
|
|
/**
|
|
* Gets the renderer to use
|
|
* @private
|
|
* @param {String/Function} renderer The renderer to use
|
|
* @return {Function} A rendering function to use.
|
|
*/
|
|
getRenderer: function(renderer){
|
|
if (Ext.isFunction(renderer)) {
|
|
return renderer;
|
|
}
|
|
|
|
var renderers = this.statics().Renderer;
|
|
switch (renderer) {
|
|
case 'component':
|
|
return renderers.Component;
|
|
case 'data':
|
|
return renderers.Data;
|
|
default:
|
|
return Ext.ElementLoader.Renderer.Html;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class describes a size determination strategy or algorithm used by the layout
|
|
* system. There are special instances of this class stored as static properties to
|
|
* avoid needless object instantiation. These instances should be treated as readonly.
|
|
*
|
|
* * `calculated`
|
|
* * `configured`
|
|
* * `constrainedMax`
|
|
* * `constrainedMin`
|
|
* * `natural`
|
|
* * `shrinkWrap`
|
|
* * `calculatedFromConfigured`
|
|
* * `calculatedFromNatural`
|
|
* * `calculatedFromShrinkWrap`
|
|
*
|
|
* Using one of these instances is simply:
|
|
*
|
|
* var calculated = Ext.layout.SizeModel.calculated;
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.SizeModel', {
|
|
constructor: function (config) {
|
|
var me = this,
|
|
SizeModel = me.self,
|
|
sizeModelsArray = SizeModel.sizeModelsArray,
|
|
name;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
me[name = me.name] = true; // set the one special flag that matches our name
|
|
|
|
me.fixed = !(me.auto = me.natural || me.shrinkWrap);
|
|
|
|
/**
|
|
* @property {Number} ordinal
|
|
* The 0-based ordinal for this `SizeModel` instance.
|
|
* @readonly
|
|
*/
|
|
sizeModelsArray[me.ordinal = sizeModelsArray.length] =
|
|
SizeModel[name] =
|
|
SizeModel.sizeModels[name] = me;
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* An array of all SizeModel instances.
|
|
* @private
|
|
*/
|
|
sizeModelsArray: [],
|
|
|
|
/**
|
|
* An object containing all SizeModel instances keyed by `name`.
|
|
* @private
|
|
*/
|
|
sizeModels: {}
|
|
},
|
|
|
|
/**
|
|
* @property {String} name
|
|
* The name of this size model (e.g., "calculated").
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} auto
|
|
* True if the size is either `natural` or `shrinkWrap`, otherwise false.
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} calculated
|
|
* True if the size is calculated by the `ownerLayout`.
|
|
* @readonly
|
|
*/
|
|
calculated: false,
|
|
|
|
/**
|
|
* @property {Boolean} configured
|
|
* True if the size is configured (e.g., by a `width` or `minWidth`). The names of
|
|
* configuration properties can be found in the {@link #names} property.
|
|
* @readonly
|
|
*/
|
|
configured: false,
|
|
|
|
/**
|
|
* @property {Boolean} constrainedMax
|
|
* True if the size is constrained by a `maxWidth` or `maxHeight` configuration. This
|
|
* is a flavor of `configured` (since `maxWidth` and `maxHeight` are config options).
|
|
* If true, the {@link #names} property will be defined as well.
|
|
* @readonly
|
|
*/
|
|
constrainedMax: false,
|
|
|
|
/**
|
|
* @property {Boolean} constrainedMin
|
|
* True if the size is constrained by a `minWidth` or `minHeight` configuration. This
|
|
* is a flavor of `configured` (since `minWidth` and `minHeight` are config options).
|
|
* If true, the {@link #names} property will be defined as well.
|
|
* @readonly
|
|
*/
|
|
constrainedMin: false,
|
|
|
|
/**
|
|
* @property {Boolean} fixed
|
|
* True if the size is either `calculated` or `configured`, otherwise false.
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} natural
|
|
* True if the size is determined by CSS and not by content. Such sizes are assumed to
|
|
* be dependent on the container box and measurement occurs on the outer-most element.
|
|
* @readonly
|
|
*/
|
|
natural: false,
|
|
|
|
/**
|
|
* @property {Boolean} shrinkWrap
|
|
* True if the size is determined by content irrespective of the container box.
|
|
* @readonly
|
|
*/
|
|
shrinkWrap: false,
|
|
|
|
/**
|
|
* @property {Boolean} calculatedFromConfigured
|
|
* True if the size is calculated by the `ownerLayout` based on a configured size.
|
|
* @readonly
|
|
*/
|
|
calculatedFromConfigured: false,
|
|
|
|
/**
|
|
* @property {Boolean} calculatedFromNatural
|
|
* True if the size is calculated by the `ownerLayout` based on `natural` size model
|
|
* results.
|
|
* @readonly
|
|
*/
|
|
calculatedFromNatural: false,
|
|
|
|
/**
|
|
* @property {Boolean} calculatedFromShrinkWrap
|
|
* True if the size is calculated by the `ownerLayout` based on `shrinkWrap` size model
|
|
* results.
|
|
* @readonly
|
|
*/
|
|
calculatedFromShrinkWrap: false,
|
|
|
|
/**
|
|
* @property {Object} names An object with the config property names that determine the
|
|
* size.
|
|
* @property {String} names.width The width property name (e.g., 'width').
|
|
* @property {String} names.height The height property name (e.g., 'minHeight').
|
|
* @readonly
|
|
*/
|
|
names: null
|
|
},
|
|
function () {
|
|
var SizeModel = this,
|
|
sizeModelsArray = SizeModel.sizeModelsArray,
|
|
i, j, n, pairs, sizeModel;
|
|
|
|
//-------------------------------------------------------------------------------
|
|
// These are the 4 fundamental size models.
|
|
|
|
new SizeModel({
|
|
name: 'calculated'
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'configured',
|
|
names: { width: 'width', height: 'height' }
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'natural'
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'shrinkWrap'
|
|
});
|
|
|
|
//-------------------------------------------------------------------------------
|
|
// These are the size models are flavors of the above but with some extra detail
|
|
// about their dynamic use.
|
|
|
|
new SizeModel({
|
|
name: 'calculatedFromConfigured',
|
|
configured: true,
|
|
names: { width: 'width', height: 'height' }
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'calculatedFromNatural',
|
|
natural: true
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'calculatedFromShrinkWrap',
|
|
shrinkWrap: true
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'constrainedMax',
|
|
configured: true,
|
|
constrained: true,
|
|
names: { width: 'maxWidth', height: 'maxHeight' }
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'constrainedMin',
|
|
configured: true,
|
|
constrained: true,
|
|
names: { width: 'minWidth', height: 'minHeight' }
|
|
});
|
|
|
|
new SizeModel({
|
|
name: 'constrainedDock',
|
|
configured: true,
|
|
constrained: true,
|
|
constrainedByMin: true,
|
|
names: { width: 'dockConstrainedWidth', height: 'dockConstrainedHeight' }
|
|
});
|
|
|
|
for (i = 0, n = sizeModelsArray.length; i < n; ++i) {
|
|
sizeModel = sizeModelsArray[i];
|
|
|
|
/**
|
|
* An array of objects indexed by the {@link #ordinal} of a height `SizeModel` on
|
|
* a width `SizeModel` to yield an object describing both height and width size
|
|
* models.
|
|
*
|
|
* Used like this:
|
|
*
|
|
* widthModel.pairsByHeightOrdinal[heightModel.ordinal]
|
|
*
|
|
* This provides a reusable object equivalent to the following:
|
|
*
|
|
* {
|
|
* width: widthModel,
|
|
* height: heightModel
|
|
* }
|
|
*
|
|
* @property {Object[]} pairsByHeightOrdinal
|
|
* @property {Ext.layout.SizeModel} pairsByHeightOrdinal.width The `SizeModel` for
|
|
* the width.
|
|
* @property {Ext.layout.SizeModel} pairsByHeightOrdinal.height The `SizeModel` for
|
|
* the height.
|
|
*/
|
|
sizeModel.pairsByHeightOrdinal = pairs = [];
|
|
|
|
for (j = 0; j < n; ++j) {
|
|
pairs.push({
|
|
width: sizeModel,
|
|
height: sizeModelsArray[j]
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is the base for all layout types: component and container.
|
|
* @protected
|
|
*/
|
|
Ext.define('Ext.layout.Layout', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isLayout
|
|
* `true` in this class to identify an object as an instantiated Layout, or subclass thereof.
|
|
* @readonly
|
|
*/
|
|
isLayout: true,
|
|
initialized: false,
|
|
running: false,
|
|
|
|
autoSizePolicy: {
|
|
readsWidth: 1,
|
|
readsHeight: 1,
|
|
setsWidth: 0,
|
|
setsHeight: 0
|
|
},
|
|
|
|
statics: {
|
|
layoutsByType: {},
|
|
|
|
create: function(layout, defaultType) {
|
|
var ClassManager = Ext.ClassManager,
|
|
layoutsByType = this.layoutsByType,
|
|
alias, className, config, layoutClass, type, load;
|
|
|
|
if (!layout || typeof layout === 'string') {
|
|
type = layout || defaultType;
|
|
config = {};
|
|
} else if (layout.isLayout) {
|
|
return layout;
|
|
} else {
|
|
config = layout;
|
|
type = layout.type || defaultType;
|
|
}
|
|
|
|
if (!(layoutClass = layoutsByType[type])) {
|
|
alias = 'layout.' + type;
|
|
className = ClassManager.getNameByAlias(alias);
|
|
|
|
// this is needed to support demand loading of the class
|
|
if (!className) {
|
|
load = true;
|
|
}
|
|
|
|
layoutClass = ClassManager.get(className);
|
|
if (load || !layoutClass) {
|
|
return ClassManager.instantiateByAlias(alias, config || {});
|
|
}
|
|
layoutsByType[type] = layoutClass;
|
|
}
|
|
|
|
return new layoutClass(config);
|
|
}
|
|
},
|
|
|
|
constructor : function(config) {
|
|
var me = this;
|
|
|
|
me.id = Ext.id(null, me.type + '-');
|
|
Ext.apply(me, config);
|
|
me.layoutCount = 0;
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} done Used only during a layout run, this value indicates that a
|
|
* layout has finished its calculations. This flag is set to true prior to the call to
|
|
* {@link #calculate} and should be set to false if this layout has more work to do.
|
|
*/
|
|
|
|
/**
|
|
* Called before any calculation cycles to prepare for layout.
|
|
*
|
|
* This is a write phase and DOM reads should be strictly avoided when overridding
|
|
* this method.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
* @method beginLayout
|
|
*/
|
|
beginLayout: Ext.emptyFn,
|
|
|
|
/**
|
|
* Called before any calculation cycles to reset DOM values and prepare for calculation.
|
|
*
|
|
* This is a write phase and DOM reads should be strictly avoided when overridding
|
|
* this method.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
* @method beginLayoutCycle
|
|
*/
|
|
beginLayoutCycle: function (ownerContext) {
|
|
var me = this,
|
|
context = me.context,
|
|
changed;
|
|
|
|
if (me.lastWidthModel != ownerContext.widthModel) {
|
|
if (me.lastWidthModel) {
|
|
changed = true;
|
|
}
|
|
me.lastWidthModel = ownerContext.widthModel;
|
|
}
|
|
|
|
if (me.lastHeightModel != ownerContext.heightModel) {
|
|
if (me.lastWidthModel) {
|
|
changed = true;
|
|
}
|
|
me.lastHeightModel = ownerContext.heightModel;
|
|
}
|
|
|
|
if (changed) {
|
|
(context = ownerContext.context).clearTriggers(me, false);
|
|
context.clearTriggers(me, true);
|
|
me.triggerCount = 0;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called to perform the calculations for this layout. This method will be called at
|
|
* least once and may be called repeatedly if the {@link #done} property is cleared
|
|
* before return to indicate that this layout is not yet done. The {@link #done} property
|
|
* is always set to `true` before entering this method.
|
|
*
|
|
* This is a read phase and DOM writes should be strictly avoided in derived classes.
|
|
* Instead, DOM writes need to be written to {@link Ext.layout.ContextItem} objects to
|
|
* be flushed at the next opportunity.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
* @method calculate
|
|
* @abstract
|
|
*/
|
|
|
|
/**
|
|
* This method (if implemented) is called at the end of the cycle in which this layout
|
|
* completes (by not setting {@link #done} to `false` in {@link #calculate}). It is
|
|
* possible for the layout to complete and yet become invalid before the end of the cycle,
|
|
* in which case, this method will not be called. It is also possible for this method to
|
|
* be called and then later the layout becomes invalidated. This will result in
|
|
* {@link #calculate} being called again, followed by another call to this method.
|
|
*
|
|
* This is a read phase and DOM writes should be strictly avoided in derived classes.
|
|
* Instead, DOM writes need to be written to {@link Ext.layout.ContextItem} objects to
|
|
* be flushed at the next opportunity.
|
|
*
|
|
* This method need not be implemented by derived classes and, in fact, should only be
|
|
* implemented when needed.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
* @method completeLayout
|
|
*/
|
|
|
|
/**
|
|
* This method (if implemented) is called after all layouts have completed. In most
|
|
* ways this is similar to {@link #completeLayout}. This call can cause this (or any
|
|
* layout) to be become invalid (see {@link Ext.layout.Context#invalidate}), but this
|
|
* is best avoided. This method is intended to be where final reads are made and so it
|
|
* is best to avoid invalidating layouts at this point whenever possible. Even so, this
|
|
* method can be used to perform final checks that may require all other layouts to be
|
|
* complete and then invalidate some results.
|
|
*
|
|
* This is a read phase and DOM writes should be strictly avoided in derived classes.
|
|
* Instead, DOM writes need to be written to {@link Ext.layout.ContextItem} objects to
|
|
* be flushed at the next opportunity.
|
|
*
|
|
* This method need not be implemented by derived classes and, in fact, should only be
|
|
* implemented when needed.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
* @method finalizeLayout
|
|
*/
|
|
|
|
/**
|
|
* This method is called after all layouts are complete and their calculations flushed
|
|
* to the DOM. No further layouts will be run and this method is only called once per
|
|
* layout run. The base component layout caches `lastComponentSize`.
|
|
*
|
|
* This is a write phase and DOM reads should be avoided if possible when overridding
|
|
* this method.
|
|
*
|
|
* This method need not be implemented by derived classes and, in fact, should only be
|
|
* implemented when needed.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
*/
|
|
finishedLayout: function (ownerContext) {
|
|
this.lastWidthModel = ownerContext.widthModel;
|
|
this.lastHeightModel = ownerContext.heightModel;
|
|
this.ownerContext = null;
|
|
},
|
|
|
|
/**
|
|
* This method (if implemented) is called after all layouts are finished, and all have
|
|
* a `lastComponentSize` cached. No further layouts will be run and this method is only
|
|
* called once per layout run. It is the bookend to {@link #beginLayout}.
|
|
*
|
|
* This is a write phase and DOM reads should be avoided if possible when overridding
|
|
* this method. This is the catch-all tail method to a layout and so the rules are more
|
|
* relaxed. Even so, for performance reasons, it is best to avoid reading the DOM. If
|
|
* a read is necessary, consider implementing a {@link #finalizeLayout} method to do the
|
|
* required reads.
|
|
*
|
|
* This method need not be implemented by derived classes and, in fact, should only be
|
|
* implemented when needed.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The context item for the layout's owner
|
|
* component.
|
|
* @method notifyOwner
|
|
*/
|
|
|
|
redoLayout: Ext.emptyFn,
|
|
undoLayout: Ext.emptyFn,
|
|
|
|
getAnimatePolicy: function() {
|
|
return this.animatePolicy;
|
|
},
|
|
|
|
/**
|
|
* Returns an object describing how this layout manages the size of the given component.
|
|
* This method must be implemented by any layout that manages components.
|
|
*
|
|
* @param {Ext.Component} item
|
|
* @return {Ext.layout.SizePolicy} An object describing the sizing done by the layout
|
|
* for this item.
|
|
* @protected
|
|
*/
|
|
getItemSizePolicy: function (item) {
|
|
return this.autoSizePolicy;
|
|
},
|
|
|
|
isItemBoxParent: function (itemContext) {
|
|
return false;
|
|
},
|
|
|
|
isItemLayoutRoot: function (item) {
|
|
var sizeModel = item.getSizeModel(),
|
|
width = sizeModel.width,
|
|
height = sizeModel.height;
|
|
|
|
// If this component has never had a layout and some of its dimensions are set by
|
|
// its ownerLayout, we cannot be the layoutRoot...
|
|
if (!item.componentLayout.lastComponentSize && (width.calculated || height.calculated)) {
|
|
return false;
|
|
}
|
|
|
|
// otherwise an ownerCt whose size is not effected by its content is a root
|
|
return !width.shrinkWrap && !height.shrinkWrap;
|
|
},
|
|
|
|
isItemShrinkWrap: function (item) {
|
|
return item.shrinkWrap;
|
|
},
|
|
|
|
isRunning: function () {
|
|
return !!this.ownerContext;
|
|
},
|
|
|
|
//-----------------------------------------------------
|
|
/*
|
|
* Clears any styles which must be cleared before layout can take place.
|
|
* Only DOM WRITES must be performed at this stage.
|
|
*
|
|
* An entry for the owner's element ID must be created in the layoutContext containing
|
|
* a reference to the target which must be sized/positioned/styled by the layout at
|
|
* the flush stage:
|
|
*
|
|
* {
|
|
* target: me.owner
|
|
* }
|
|
*
|
|
* Component layouts should iterate through managed Elements,
|
|
* pushing an entry for each element:
|
|
*
|
|
* {
|
|
* target: childElement
|
|
* }
|
|
*/
|
|
//-----------------------------------------------------
|
|
|
|
getItemsRenderTree: function (items, renderCfgs) {
|
|
var length = items.length,
|
|
i, item, itemConfig, result;
|
|
|
|
if (length) {
|
|
result = [];
|
|
for (i = 0; i < length; ++i) {
|
|
item = items[i];
|
|
|
|
// If we are being asked to move an already rendered Component, we must not recalculate its renderTree
|
|
// and rerun its render process. The Layout's isValidParent check will ensure that the DOM is moved into place.
|
|
if (!item.rendered) {
|
|
|
|
// If we've already calculated the item's element config, don't calculate it again.
|
|
// This may happen if the rendering process mutates the owning Container's items
|
|
// collection, and Ext.layout.Container#getRenderTree runs through the collection again.
|
|
// Note that the config may be null if a beforerender listener vetoed the operation, so
|
|
// we must compare to undefined.
|
|
if (renderCfgs && (renderCfgs[item.id] !== undefined)) {
|
|
itemConfig = renderCfgs[item.id];
|
|
} else {
|
|
// Perform layout preprocessing in the bulk render path
|
|
this.configureItem(item);
|
|
itemConfig = item.getRenderTree();
|
|
if (renderCfgs) {
|
|
renderCfgs[item.id] = itemConfig;
|
|
}
|
|
}
|
|
|
|
// itemConfig mey be null if a beforerender listener vetoed the operation.
|
|
if (itemConfig) {
|
|
result.push(itemConfig);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
finishRender: Ext.emptyFn,
|
|
|
|
finishRenderItems: function (target, items) {
|
|
var length = items.length,
|
|
i, item;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
item = items[i];
|
|
|
|
// Only postprocess items which are being rendered. deferredRender may mean that only one has been rendered.
|
|
if (item.rendering) {
|
|
|
|
// Tell the item at which index in the Container it is
|
|
item.finishRender(i);
|
|
|
|
this.afterRenderItem(item);
|
|
}
|
|
}
|
|
},
|
|
|
|
renderChildren: function () {
|
|
var me = this,
|
|
items = me.getLayoutItems(),
|
|
target = me.getRenderTarget();
|
|
|
|
me.renderItems(items, target);
|
|
},
|
|
|
|
/**
|
|
* Iterates over all passed items, ensuring they are rendered. If the items are already rendered,
|
|
* also determines if the items are in the proper place in the dom.
|
|
* @protected
|
|
*/
|
|
renderItems : function(items, target) {
|
|
var me = this,
|
|
ln = items.length,
|
|
i = 0,
|
|
item;
|
|
|
|
if (ln) {
|
|
Ext.suspendLayouts();
|
|
for (; i < ln; i++) {
|
|
item = items[i];
|
|
if (item && !item.rendered) {
|
|
me.renderItem(item, target, i);
|
|
} else if (!me.isValidParent(item, target, i)) {
|
|
me.moveItem(item, target, i);
|
|
} else {
|
|
// still need to configure the item, it may have moved in the container.
|
|
me.configureItem(item);
|
|
}
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Validates item is in the proper place in the dom.
|
|
* @protected
|
|
*/
|
|
isValidParent : function(item, target, position) {
|
|
var itemDom = item.el ? item.el.dom : Ext.getDom(item),
|
|
targetDom = (target && target.dom) || target,
|
|
parentNode = itemDom.parentNode,
|
|
className;
|
|
|
|
// If it's resizable+wrapped, the position element is the wrapper.
|
|
if (parentNode) {
|
|
className = parentNode.className;
|
|
if (className && className.indexOf(Ext.baseCSSPrefix + 'resizable-wrap') !== -1) {
|
|
itemDom = itemDom.parentNode;
|
|
}
|
|
}
|
|
|
|
// Test DOM nodes for equality using "===" : http://jsperf.com/dom-equality-test
|
|
if (itemDom && targetDom) {
|
|
if (typeof position == 'number') {
|
|
position = this.getPositionOffset(position);
|
|
return itemDom === targetDom.childNodes[position];
|
|
}
|
|
return itemDom.parentNode === targetDom;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
getPositionOffset: function(position){
|
|
return position;
|
|
},
|
|
|
|
/**
|
|
* Called before an item is rendered to allow the layout to configure the item.
|
|
* @param {Ext.Component} item The item to be configured
|
|
* @protected
|
|
*/
|
|
configureItem: function(item) {
|
|
item.ownerLayout = this;
|
|
},
|
|
|
|
/**
|
|
* Renders the given Component into the target Element.
|
|
* @param {Ext.Component} item The Component to render
|
|
* @param {Ext.dom.Element} target The target Element
|
|
* @param {Number} position The position within the target to render the item to
|
|
* @private
|
|
*/
|
|
renderItem : function(item, target, position) {
|
|
var me = this;
|
|
if (!item.rendered) {
|
|
me.configureItem(item);
|
|
item.render(target, position);
|
|
me.afterRenderItem(item);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Moves Component to the provided target instead.
|
|
* @private
|
|
*/
|
|
moveItem : function(item, target, position) {
|
|
target = target.dom || target;
|
|
if (typeof position == 'number') {
|
|
position = target.childNodes[position];
|
|
}
|
|
target.insertBefore(item.el.dom, position || null);
|
|
item.container = Ext.get(target);
|
|
this.configureItem(item);
|
|
},
|
|
|
|
/**
|
|
* This method is called when a child item changes in some way. By default this calls
|
|
* {@link Ext.AbstractComponent#updateLayout} on this layout's owner.
|
|
*
|
|
* @param {Ext.Component} child The child item that has changed.
|
|
* @return {Boolean} True if this layout has handled the content change.
|
|
*/
|
|
onContentChange: function () {
|
|
this.owner.updateLayout();
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* A one-time initialization method called just before rendering.
|
|
* @protected
|
|
*/
|
|
initLayout : function() {
|
|
this.initialized = true;
|
|
},
|
|
|
|
// @private Sets the layout owner
|
|
setOwner : function(owner) {
|
|
this.owner = owner;
|
|
},
|
|
|
|
/**
|
|
* Returns the set of items to layout (empty by default).
|
|
* @protected
|
|
*/
|
|
getLayoutItems : function() {
|
|
return [];
|
|
},
|
|
|
|
onAdd: function (item) {
|
|
item.ownerLayout = this;
|
|
},
|
|
afterRenderItem: Ext.emptyFn,
|
|
onRemove : Ext.emptyFn,
|
|
onDestroy : Ext.emptyFn,
|
|
|
|
/**
|
|
* Removes layout's itemCls and owning Container's itemCls.
|
|
* Clears the managed dimensions flags
|
|
* @protected
|
|
*/
|
|
afterRemove : function(item) {
|
|
var me = this,
|
|
el = item.el,
|
|
owner = me.owner,
|
|
removeClasses;
|
|
|
|
if (item.rendered) {
|
|
removeClasses = [].concat(me.itemCls || []);
|
|
if (owner.itemCls) {
|
|
removeClasses = Ext.Array.push(removeClasses, owner.itemCls);
|
|
}
|
|
if (removeClasses.length) {
|
|
el.removeCls(removeClasses);
|
|
}
|
|
}
|
|
|
|
delete item.ownerLayout;
|
|
},
|
|
|
|
/**
|
|
* Destroys this layout. This method removes a `targetCls` from the `target`
|
|
* element and calls `onDestroy`.
|
|
*
|
|
* A derived class can override either this method or `onDestroy` but in all
|
|
* cases must call the base class versions of these methods to allow the base class to
|
|
* perform its cleanup.
|
|
*
|
|
* This method (or `onDestroy`) are overridden by subclasses most often to purge
|
|
* event handlers or remove unmanged DOM nodes.
|
|
*
|
|
* @protected
|
|
*/
|
|
destroy : function() {
|
|
var me = this,
|
|
target;
|
|
|
|
if (me.targetCls) {
|
|
target = me.getTarget();
|
|
if (target) {
|
|
target.removeCls(me.targetCls);
|
|
}
|
|
}
|
|
|
|
me.onDestroy();
|
|
},
|
|
|
|
sortWeightedItems: function (items, reverseProp) {
|
|
for (var i = 0, length = items.length; i < length; ++i) {
|
|
items[i].$i = i;
|
|
}
|
|
|
|
Ext.Array.sort(items, function (item1, item2) {
|
|
var ret = item2.weight - item1.weight;
|
|
|
|
if (!ret) {
|
|
ret = item1.$i - item2.$i;
|
|
if (item1[reverseProp]) {
|
|
ret = -ret;
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
});
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
delete items[i].$i;
|
|
}
|
|
}
|
|
}, function () {
|
|
var Layout = this;
|
|
|
|
Layout.prototype.sizeModels = Layout.sizeModels = Ext.layout.SizeModel.sizeModels;
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
Ext.define('Ext.layout.container.Container', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.container'],
|
|
|
|
extend: Ext.layout.Layout ,
|
|
|
|
alternateClassName: 'Ext.layout.ContainerLayout',
|
|
|
|
mixins: {
|
|
elementCt: Ext.util.ElementContainer
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
type: 'container',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} itemCls
|
|
* An optional extra CSS class that will be added to the container. This can be useful for
|
|
* adding customized styles to the container or any of its children using standard CSS
|
|
* rules. See {@link Ext.Component}.{@link Ext.Component#componentCls componentCls} also.
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Called by an owning Panel before the Panel begins its collapse process.
|
|
* Most layouts will not need to override the default Ext.emptyFn implementation.
|
|
*/
|
|
beginCollapse: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* Called by an owning Panel before the Panel begins its expand process.
|
|
* Most layouts will not need to override the default Ext.emptyFn implementation.
|
|
*/
|
|
beginExpand: Ext.emptyFn,
|
|
|
|
/**
|
|
* An object which contains boolean properties specifying which properties are to be
|
|
* animated upon flush of child Component ContextItems. For example, Accordion would
|
|
* have:
|
|
*
|
|
* {
|
|
* y: true,
|
|
* height: true
|
|
* }
|
|
*
|
|
* @private
|
|
*/
|
|
animatePolicy: null,
|
|
|
|
childEls: [
|
|
/**
|
|
* @property {Ext.Element} overflowPadderEl
|
|
* The element used to correct body padding during overflow.
|
|
*/
|
|
'overflowPadderEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'{%this.renderBody(out,values)%}'
|
|
],
|
|
|
|
usesContainerHeight: true,
|
|
usesContainerWidth: true,
|
|
usesHeight: true,
|
|
usesWidth: true,
|
|
|
|
constructor: function () {
|
|
this.callParent(arguments);
|
|
this.mixins.elementCt.constructor.call(this);
|
|
},
|
|
|
|
destroy : function() {
|
|
this.callParent();
|
|
this.mixins.elementCt.destroy.call(this);
|
|
},
|
|
|
|
/**
|
|
* In addition to work done by our base classes, containers benefit from some extra
|
|
* cached data. The following properties are added to the ownerContext:
|
|
*
|
|
* - visibleItems: the result of {@link #getVisibleItems}
|
|
* - childItems: the ContextItem[] for each visible item
|
|
* - targetContext: the ContextItem for the {@link #getTarget} element
|
|
*/
|
|
beginLayout: function (ownerContext) {
|
|
this.callParent(arguments);
|
|
|
|
ownerContext.targetContext = ownerContext.paddingContext = ownerContext.getEl('getTarget', this);
|
|
|
|
this.cacheChildItems(ownerContext);
|
|
},
|
|
|
|
beginLayoutCycle: function (ownerContext, firstCycle) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (firstCycle) {
|
|
if (me.usesContainerHeight) {
|
|
++ownerContext.consumersContainerHeight;
|
|
}
|
|
if (me.usesContainerWidth) {
|
|
++ownerContext.consumersContainerWidth;
|
|
}
|
|
}
|
|
},
|
|
|
|
cacheChildItems: function (ownerContext) {
|
|
var context = ownerContext.context,
|
|
childItems = [],
|
|
items = this.getVisibleItems(),
|
|
length = items.length,
|
|
i;
|
|
|
|
ownerContext.childItems = childItems;
|
|
ownerContext.visibleItems = items;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
childItems.push(context.getCmp(items[i]));
|
|
}
|
|
},
|
|
|
|
cacheElements: function () {
|
|
var owner = this.owner;
|
|
|
|
this.applyChildEls(owner.el, owner.id); // from ElementContainer mixin
|
|
},
|
|
|
|
/**
|
|
* Adds layout's itemCls and owning Container's itemCls
|
|
* @protected
|
|
*/
|
|
configureItem: function(item) {
|
|
var me = this,
|
|
itemCls = me.itemCls,
|
|
ownerItemCls = me.owner.itemCls,
|
|
addClasses;
|
|
|
|
// Effectively callParent but without the function overhead
|
|
item.ownerLayout = me;
|
|
|
|
if (itemCls) {
|
|
// itemCls can be a single clas or an array
|
|
addClasses = typeof itemCls === 'string' ? [itemCls] : itemCls;
|
|
}
|
|
if (ownerItemCls) {
|
|
addClasses = Ext.Array.push(addClasses||[], ownerItemCls);
|
|
}
|
|
if (addClasses) {
|
|
item.addCls(addClasses);
|
|
}
|
|
},
|
|
|
|
doRenderBody: function (out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
this.renderItems(out, renderData);
|
|
this.renderContent(out, renderData);
|
|
},
|
|
|
|
doRenderContainer: function (out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$comp.layout,
|
|
tpl = me.getRenderTpl(),
|
|
data = me.getRenderData();
|
|
|
|
tpl.applyOut(data, out);
|
|
},
|
|
|
|
doRenderItems: function (out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$layout,
|
|
tree = me.getRenderTree();
|
|
|
|
if (tree) {
|
|
Ext.DomHelper.generateMarkup(tree, out);
|
|
}
|
|
},
|
|
|
|
finishRender: function () {
|
|
var me = this,
|
|
target, items;
|
|
|
|
me.callParent();
|
|
|
|
me.cacheElements();
|
|
|
|
target = me.getRenderTarget();
|
|
items = me.getLayoutItems();
|
|
|
|
|
|
me.finishRenderItems(target, items);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called for every layout in the layout context after all the layouts have been finally flushed
|
|
*/
|
|
notifyOwner: function() {
|
|
this.owner.afterLayout(this);
|
|
},
|
|
|
|
/**
|
|
* Returns the container size (that of the target). Only the fixed-sized dimensions can
|
|
* be returned because the shrinkWrap dimensions are based on the contentWidth/Height
|
|
* as determined by the container layout.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The owner's context item.
|
|
* @param {Boolean} [inDom=false] True if the container size must be in the DOM.
|
|
* @return {Object} The size
|
|
* @return {Number} return.width The width
|
|
* @return {Number} return.height The height
|
|
* @protected
|
|
*/
|
|
getContainerSize : function(ownerContext, inDom) {
|
|
// Subtle But Important:
|
|
//
|
|
// We don't want to call getProp/hasProp et.al. unless we in fact need that value
|
|
// for our results! If we call it and don't need it, the layout manager will think
|
|
// we depend on it and will schedule us again should it change.
|
|
|
|
var targetContext = ownerContext.targetContext,
|
|
frameInfo = targetContext.getFrameInfo(),
|
|
padding = ownerContext.paddingContext.getPaddingInfo(),
|
|
got = 0,
|
|
needed = 0,
|
|
gotWidth, gotHeight, width, height;
|
|
|
|
// In an shrinkWrap width/height case, we must not ask for any of these dimensions
|
|
// because they will be determined by contentWidth/Height which is calculated by
|
|
// this layout...
|
|
|
|
// Fit/Card layouts are able to set just the width of children, allowing child's
|
|
// resulting height to autosize the Container.
|
|
// See examples/tabs/tabs.html for an example of this.
|
|
|
|
if (!ownerContext.widthModel.shrinkWrap) {
|
|
++needed;
|
|
width = inDom ? targetContext.getDomProp('width') : targetContext.getProp('width');
|
|
gotWidth = (typeof width == 'number');
|
|
if (gotWidth) {
|
|
++got;
|
|
width -= frameInfo.width + padding.width;
|
|
if (width < 0) {
|
|
width = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!ownerContext.heightModel.shrinkWrap) {
|
|
++needed;
|
|
height = inDom ? targetContext.getDomProp('height') : targetContext.getProp('height');
|
|
gotHeight = (typeof height == 'number');
|
|
if (gotHeight) {
|
|
++got;
|
|
height -= frameInfo.height + padding.height;
|
|
if (height < 0) {
|
|
height = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
width: width,
|
|
height: height,
|
|
needed: needed,
|
|
got: got,
|
|
gotAll: got == needed,
|
|
gotWidth: gotWidth,
|
|
gotHeight: gotHeight
|
|
};
|
|
},
|
|
|
|
// This method is used to offset the DOM position when checking
|
|
// whether the element is a certain child of the target. This is
|
|
// required in cases where the extra elements prepended to the target
|
|
// before any of the items. An example of this is when using labelAlign: 'top'
|
|
// on a field. The label appears first in the DOM before any child items are
|
|
// created, so when we check the position we need to add an extra offset.
|
|
// Containers that create an innerCt are exempt because this new element
|
|
// preserves the order
|
|
getPositionOffset: function(position) {
|
|
if (!this.createsInnerCt) {
|
|
var offset = this.owner.itemNodeOffset;
|
|
if (offset) {
|
|
position += offset;
|
|
}
|
|
}
|
|
return position;
|
|
},
|
|
|
|
/**
|
|
* Returns an array of child components either for a render phase (Performed in the beforeLayout
|
|
* method of the layout's base class), or the layout phase (onLayout).
|
|
* @return {Ext.Component[]} of child components
|
|
*/
|
|
getLayoutItems: function() {
|
|
var owner = this.owner,
|
|
items = owner && owner.items;
|
|
|
|
return (items && items.items) || [];
|
|
},
|
|
|
|
getRenderData: function () {
|
|
var comp = this.owner;
|
|
|
|
return {
|
|
$comp: comp,
|
|
$layout: this,
|
|
ownerId: comp.id
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Returns all items that are rendered
|
|
* @return {Array} All matching items
|
|
*/
|
|
getRenderedItems: function() {
|
|
var me = this,
|
|
target = me.getRenderTarget(),
|
|
items = me.getLayoutItems(),
|
|
ln = items.length,
|
|
renderedItems = [],
|
|
i, item;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
item = items[i];
|
|
if (item.rendered && me.isValidParent(item, target, i)) {
|
|
renderedItems.push(item);
|
|
}
|
|
}
|
|
|
|
return renderedItems;
|
|
},
|
|
|
|
/**
|
|
* Returns the element into which rendering must take place. Defaults to the owner Container's
|
|
* target element.
|
|
*
|
|
* May be overridden in layout managers which implement an inner element.
|
|
*
|
|
* @return {Ext.Element}
|
|
*/
|
|
getRenderTarget: function() {
|
|
return this.owner.getTargetEl();
|
|
},
|
|
|
|
/**
|
|
* Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.
|
|
*
|
|
* May be overridden in Component layout managers which implement a {@link #getRenderTarget component render target} which must only
|
|
* contain child components.
|
|
* @return {Ext.Element}
|
|
*/
|
|
getElementTarget: function() {
|
|
return this.getRenderTarget();
|
|
},
|
|
|
|
getRenderTpl: function () {
|
|
var me = this,
|
|
renderTpl = Ext.XTemplate.getTpl(this, 'renderTpl');
|
|
|
|
// Make sure all standard callout methods for the owner component are placed on the
|
|
// XTemplate instance (but only once please):
|
|
if (!renderTpl.renderContent) {
|
|
me.owner.setupRenderTpl(renderTpl);
|
|
}
|
|
|
|
return renderTpl;
|
|
},
|
|
|
|
getRenderTree: function () {
|
|
var result,
|
|
items = this.owner.items,
|
|
itemsGen,
|
|
renderCfgs = {};
|
|
|
|
do {
|
|
itemsGen = items.generation;
|
|
result = this.getItemsRenderTree(this.getLayoutItems(), renderCfgs);
|
|
} while (items.generation !== itemsGen);
|
|
return result;
|
|
},
|
|
|
|
renderChildren: function () {
|
|
var me = this,
|
|
ownerItems = me.owner.items,
|
|
target = me.getRenderTarget(),
|
|
itemsGen, items;
|
|
|
|
// During the render phase, new items may be added. Specifically, a panel will
|
|
// create a placeholder component during render if required, so we need to catch
|
|
// it here so we can render it.
|
|
do {
|
|
itemsGen = ownerItems.generation;
|
|
items = me.getLayoutItems();
|
|
me.renderItems(items, target);
|
|
} while (ownerItems.generation !== itemsGen);
|
|
},
|
|
|
|
getScrollbarsNeeded: function (width, height, contentWidth, contentHeight) {
|
|
var scrollbarSize = Ext.getScrollbarSize(),
|
|
hasWidth = typeof width == 'number',
|
|
hasHeight = typeof height == 'number',
|
|
needHorz = 0,
|
|
needVert = 0;
|
|
|
|
// No space-consuming scrollbars.
|
|
if (!scrollbarSize.width) {
|
|
return 0;
|
|
}
|
|
if (hasHeight && height < contentHeight) {
|
|
needVert = 2;
|
|
width -= scrollbarSize.width;
|
|
}
|
|
|
|
if (hasWidth && width < contentWidth) {
|
|
needHorz = 1;
|
|
if (!needVert && hasHeight) {
|
|
height -= scrollbarSize.height;
|
|
if (height < contentHeight) {
|
|
needVert = 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
return needVert + needHorz;
|
|
},
|
|
|
|
/**
|
|
* Returns the owner component's resize element.
|
|
* @return {Ext.Element}
|
|
*/
|
|
getTarget: function() {
|
|
return this.owner.getTargetEl();
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Returns all items that are both rendered and visible
|
|
* @return {Array} All matching items
|
|
*/
|
|
getVisibleItems: function() {
|
|
var target = this.getRenderTarget(),
|
|
items = this.getLayoutItems(),
|
|
ln = items.length,
|
|
visibleItems = [],
|
|
i, item;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
item = items[i];
|
|
if (item.rendered && this.isValidParent(item, target, i) && item.hidden !== true) {
|
|
visibleItems.push(item);
|
|
}
|
|
}
|
|
|
|
return visibleItems;
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
var me = this;
|
|
|
|
renderTpl.renderBody = me.doRenderBody;
|
|
renderTpl.renderContainer = me.doRenderContainer;
|
|
renderTpl.renderItems = me.doRenderItems;
|
|
},
|
|
|
|
getContentTarget: function(){
|
|
return this.owner.getDefaultContentTarget();
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @class Ext.layout.container.Auto
|
|
*
|
|
* The AutoLayout is the default layout manager delegated by {@link Ext.container.Container} to
|
|
* render any child Components when no `{@link Ext.container.Container#layout layout}` is configured into
|
|
* a `{@link Ext.container.Container Container}.` AutoLayout provides only a passthrough of any layout calls
|
|
* to any child containers.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Panel', {
|
|
* width: 500,
|
|
* height: 280,
|
|
* title: "AutoLayout Panel",
|
|
* layout: 'auto',
|
|
* renderTo: document.body,
|
|
* items: [{
|
|
* xtype: 'panel',
|
|
* title: 'Top Inner Panel',
|
|
* width: '75%',
|
|
* height: 90
|
|
* },
|
|
* {
|
|
* xtype: 'panel',
|
|
* title: 'Bottom Inner Panel',
|
|
* width: '75%',
|
|
* height: 90
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Auto', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.auto', 'layout.autocontainer'],
|
|
|
|
extend: Ext.layout.container.Container ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'autocontainer',
|
|
|
|
childEls: [
|
|
'outerCt',
|
|
'innerCt',
|
|
'clearEl'
|
|
],
|
|
|
|
/**
|
|
* @cfg {Boolean} [reserveScrollbar=false]
|
|
* Set to `true` to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless
|
|
* of whether a scrollbar is needed.
|
|
*
|
|
* This is useful if content height changes during application usage, but you do not want the calculated width
|
|
* of child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space,
|
|
* and the calculated width of child Components will not change.
|
|
*
|
|
* @example
|
|
* Ext.define('Employee', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'rating', type: 'int'},
|
|
* {name: 'salary', type: 'float'},
|
|
* {name: 'name'}
|
|
* ]
|
|
* });
|
|
*
|
|
* function createFakeData(count) {
|
|
* var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
|
|
* lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
|
|
* ratings = [1, 2, 3, 4, 5],
|
|
* salaries = [100, 400, 900, 1500, 1000000];
|
|
*
|
|
* var data = [];
|
|
* for (var i = 0; i < (count || 25); i++) {
|
|
* var ratingId = Math.floor(Math.random() * ratings.length),
|
|
* salaryId = Math.floor(Math.random() * salaries.length),
|
|
* firstNameId = Math.floor(Math.random() * firstNames.length),
|
|
* lastNameId = Math.floor(Math.random() * lastNames.length),
|
|
*
|
|
* rating = ratings[ratingId],
|
|
* salary = salaries[salaryId],
|
|
* name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
|
|
*
|
|
* data.push({
|
|
* rating: rating,
|
|
* salary: salary,
|
|
* name: name
|
|
* });
|
|
* }
|
|
* store.loadData(data);
|
|
* }
|
|
*
|
|
* // create the Data Store
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* id: 'store',
|
|
* model: 'Employee',
|
|
* proxy: {
|
|
* type: 'memory'
|
|
* }
|
|
* });
|
|
* createFakeData(10);
|
|
*
|
|
* var grid = Ext.create('Ext.grid.Panel', {
|
|
* title: 'Grid loaded with varying number of records',
|
|
* anchor: '100%',
|
|
* store: store,
|
|
* columns: [{
|
|
* xtype: 'rownumberer',
|
|
* width: 40,
|
|
* sortable: false
|
|
* },{
|
|
* text: 'Name',
|
|
* flex: 1,
|
|
* sortable: true,
|
|
* dataIndex: 'name'
|
|
* },{
|
|
* text: 'Rating',
|
|
* width: 125,
|
|
* sortable: true,
|
|
* dataIndex: 'rating'
|
|
* },{
|
|
* text: 'Salary',
|
|
* width: 125,
|
|
* sortable: true,
|
|
* dataIndex: 'salary',
|
|
* align: 'right',
|
|
* renderer: Ext.util.Format.usMoney
|
|
* }]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* renderTo: document.body,
|
|
* width: 800,
|
|
* height: 600,
|
|
* layout: {
|
|
* type: 'anchor',
|
|
* reserveScrollbar: true // There will be a gap even when there's no scrollbar
|
|
* },
|
|
* autoScroll: true,
|
|
* items: grid,
|
|
* tbar: {
|
|
* defaults: {
|
|
* handler: function(b) {
|
|
* createFakeData(b.count);
|
|
* }
|
|
* },
|
|
* items: [{
|
|
* text: '10 Items',
|
|
* count: 10
|
|
* },{
|
|
* text: '100 Items',
|
|
* count: 100
|
|
* },{
|
|
* text: '300 Items',
|
|
* count: 300
|
|
* },{
|
|
* text: '1000 Items',
|
|
* count: 1000
|
|
* },{
|
|
* text: '5000 Items',
|
|
* count: 5000
|
|
* }]
|
|
* }
|
|
* });
|
|
*
|
|
*/
|
|
reserveScrollbar: false,
|
|
|
|
/**
|
|
* @property {Boolean} [managePadding=true]
|
|
* indicates that this layout will correct cross browser padding differences when the
|
|
* container has overflow.
|
|
*
|
|
* In some browsers the right and/or bottom padding of a container is lost when
|
|
* the container has overflow. If managePadding is true the layout will apply the
|
|
* padding to an inner wrapping element instead of the container element that has the
|
|
* overflow so that paddding will be included in the scrollable area.
|
|
* Note: padding will not be managed if it is configured on the container using
|
|
* a style config or css class. In order to be managed, padding must be added to the
|
|
* container using the appropriate {@link Ext.AbstractComponent#contentPaddingProperty
|
|
* contentPaddingProperty}. For {@link Ext.panel.Panel Panels} use
|
|
* {@link Ext.panel.AbstractPanel#bodyPadding}, and for
|
|
* {@link Ext.container.Container Containers}, use
|
|
* {@link Ext.AbstractComponent#padding padding}
|
|
*/
|
|
managePadding: true,
|
|
|
|
/**
|
|
* @property {Boolean} [manageOverflow=false]
|
|
* true to rerun the layout if scrollbars are needed.
|
|
*/
|
|
manageOverflow: false,
|
|
|
|
// Begin with no previous adjustments
|
|
lastOverflowAdjust: {
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
|
|
// Auto layout's renderTpl wraps the content in an outerCt which is used to accomplish
|
|
// the following 3 goals:
|
|
//
|
|
// 1. When the container has a shrink wrapped width and/or height, the outerCt is used
|
|
// to measure the size of the content.
|
|
// 2. When the container has overflow some browsers lose the container's right and/or
|
|
// bottom padding. To fix this, the padding is rendered to the outerCt instead of
|
|
// the container target element. This ensures that the padding is included in the
|
|
// container's scrollWidth/scrollHeight. In Old IE when a table is used, the padding
|
|
// is rendered to the innerCt td element.
|
|
// 3. The outerCt contains the margins of its children, that is to say, it prevents
|
|
// them from collapsing.
|
|
renderTpl: [
|
|
'{% if (!(Ext.isIEQuirks || Ext.isIE7m)) { %}',
|
|
// All browsers that support display:table use this template.
|
|
// An outerCt with display:table shrink-wraps contents, and contains child
|
|
// margins. The table-cell innerCt is required in order to support percentage
|
|
// heights on child elements. Originally the outerCt started out as a div, but
|
|
// was changed to a span to work around an obscure firefox 3.6 bug where
|
|
// placing a Container inside of a fieldset's legend element causes the legend
|
|
// to blow up if the outerCt is a div.
|
|
'<span id="{ownerId}-outerCt" style="display:table;">',
|
|
// height:100% is required on the innerCt in order for percentage-height
|
|
// children to work in IE, firefox, and opera
|
|
'<div id="{ownerId}-innerCt" style="display:table-cell;height:100%;',
|
|
'vertical-align:top;{%this.renderPadding(out, values)%}" class="{innerCtCls}">',
|
|
'{%this.renderBody(out,values)%}',
|
|
'</div>',
|
|
'</span>',
|
|
'{% } else if (values.shrinkWrapWidth) { %}',
|
|
// If the containers width is shrink wrapped a table-based outerCt/innerCt
|
|
// is required in old IE. See getRenderData() for more details on the criteria
|
|
// used to determine if the container has shrink wrapped width.
|
|
'<table id="{ownerId}-outerCt" class="' + Ext.plainTableCls + '">',
|
|
'<tr>',
|
|
'<td id="{ownerId}-innerCt" style="vertical-align:top;padding:0;',
|
|
'{%this.renderPadding(out, values)%}" class="{innerCtCls}">',
|
|
'{%this.renderBody(out,values)%}',
|
|
// clear element to contain the bottom margin of floated last child item
|
|
'<div id="{ownerId}-clearEl" class="', Ext.baseCSSPrefix, 'clear"',
|
|
'role="presentation"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'</table>',
|
|
'{% } else { %}',
|
|
// If the container's width is not shrink wrapped, old IE can get by with
|
|
// divs as the outerCt/innerCt. zoom:1 is required to contain the margins
|
|
// of children. The padding is placed on the outerCt instead of the innerCt.
|
|
// This is to because if the padding was placed on the innerCt, the top
|
|
// margin of the first child item would collapse into the top padding of
|
|
// the innerCt.
|
|
'<div id="{ownerId}-outerCt" style="zoom:1;{%this.renderPadding(out, values)%}">',
|
|
'<div id="{ownerId}-innerCt" style="zoom:1;height:100%;" class="{innerCtCls}">',
|
|
'{%this.renderBody(out,values)%}',
|
|
// clear element to contain the bottom margin of floated last child item
|
|
'<div id="{ownerId}-clearEl" class="', Ext.baseCSSPrefix, 'clear"',
|
|
'role="presentation"></div>',
|
|
'</div>',
|
|
'</div>',
|
|
// set a flag that indicates we are not using a "shrink wrap" template
|
|
'{% values.$layout.isShrinkWrapTpl = false %}',
|
|
'{% } %}'
|
|
],
|
|
|
|
// This template is used for dynamically inserting a table outerCt/innerCt when needed.
|
|
// It should be identical to the table template defined in renderTpl except that it
|
|
// does not have renderBody or clearEl. It is an empty shell so that the contents
|
|
// of an already existing innerCt can be moved into it.
|
|
tableTpl: [
|
|
'<table id="{ownerId}-outerCt" class="' + Ext.plainTableCls + '">',
|
|
'<tr>',
|
|
'<td id="{ownerId}-innerCt" style="vertical-align:top;padding:0;',
|
|
'{%this.renderPadding(out, values)%}" class="{innerCtCls}">',
|
|
'</td>',
|
|
'</tr>',
|
|
'</table>'
|
|
],
|
|
|
|
isShrinkWrapTpl: true,
|
|
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
bottomPadding, overflowYStyle, overflowXStyle, needsTable;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.initContextItems(ownerContext);
|
|
|
|
if (!me.isShrinkWrapTpl) {
|
|
// In most cases the determination to use a table based template is made at
|
|
// render time; however, if the initial determination was incorrect, we may
|
|
// need to dynamically replace the existing outerCt/innerCt with a table
|
|
// (see insertTableCt)
|
|
if (ownerContext.widthModel.shrinkWrap) {
|
|
needsTable = true;
|
|
}
|
|
|
|
// in IE7 strict right padding is lost when there is horizontal overflow
|
|
// unless the outerCt is a table.
|
|
if (Ext.isStrict && Ext.isIE7) {
|
|
overflowXStyle = me.getOverflowXStyle(ownerContext);
|
|
if ((overflowXStyle === 'auto' || overflowXStyle === 'scroll') &&
|
|
ownerContext.paddingContext.getPaddingInfo().right) {
|
|
needsTable = true;
|
|
}
|
|
}
|
|
|
|
if (needsTable) {
|
|
me.insertTableCt(ownerContext);
|
|
}
|
|
}
|
|
|
|
// When using the non-table renderTpl IE7 strict loses bottom padding if there
|
|
// is vertical overflow. To adjust for the loss of padding, we add the bottom
|
|
// padding to the height of the clearEl
|
|
if (!me.isShrinkWrapTpl && Ext.isIE7 && Ext.isStrict && !me.clearElHasPadding) {
|
|
bottomPadding = ownerContext.paddingContext.getPaddingInfo().bottom;
|
|
overflowYStyle = me.getOverflowYStyle(ownerContext);
|
|
if (bottomPadding && (overflowYStyle === 'auto' || overflowYStyle === 'scroll')) {
|
|
me.clearEl.setStyle('height', bottomPadding);
|
|
me.clearElHasPadding = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeLayoutCycle: function(ownerContext){
|
|
var comp = this.owner,
|
|
hierarchyState = comp.hierarchyState,
|
|
hierarchyStateInner = comp.hierarchyStateInner;
|
|
|
|
if (!hierarchyState || hierarchyState.invalid) {
|
|
hierarchyState = comp.getHierarchyState(); // fixes both
|
|
hierarchyStateInner = comp.hierarchyStateInner;
|
|
}
|
|
if (ownerContext.widthModel.shrinkWrap && this.isShrinkWrapTpl) {
|
|
hierarchyStateInner.inShrinkWrapTable = true;
|
|
} else {
|
|
delete hierarchyStateInner.inShrinkWrapTable;
|
|
}
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext) {
|
|
var me = this,
|
|
outerCt = me.outerCt,
|
|
lastOuterCtWidth = me.lastOuterCtWidth || '',
|
|
lastOuterCtHeight = me.lastOuterCtHeight || '',
|
|
lastOuterCtTableLayout = me.lastOuterCtTableLayout || '',
|
|
state = ownerContext.state,
|
|
overflowXStyle, overflowYStyle, outerCtWidth, outerCtHeight, outerCtTableLayout,
|
|
deferWidth, hierarchyStateInner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Default to "shrink wrap styles".
|
|
outerCtWidth = outerCtHeight = outerCtTableLayout = '';
|
|
|
|
if (!ownerContext.widthModel.shrinkWrap && me.isShrinkWrapTpl) {
|
|
// if we're not shrink wrapping width, but we're using a shrink wrap template
|
|
// we need to get the innerCt out of the way to avoid any shrink wrapping
|
|
// effect on child items
|
|
if (Ext.isIE7m && Ext.isStrict) {
|
|
overflowYStyle = me.getOverflowYStyle(ownerContext);
|
|
if (overflowYStyle === 'auto' || overflowYStyle === 'scroll') {
|
|
// IE6/7 strict will have the outerCt's width set by setCtSizeIfNeeded()
|
|
// when the container has potential vertical overflow, so there is
|
|
// no need to set the outerCt's width to 100% here
|
|
deferWidth = true;
|
|
}
|
|
}
|
|
|
|
if (!deferWidth) {
|
|
// fill the available width within the container
|
|
outerCtWidth = '100%';
|
|
}
|
|
hierarchyStateInner = me.owner.hierarchyStateInner;
|
|
// expand no further than the available width, even if contents are wider
|
|
// unless there is a potential for horizontal overflow, then allow
|
|
// the outerCt to expand to the width of the contents
|
|
overflowXStyle = me.getOverflowXStyle(ownerContext);
|
|
outerCtTableLayout = (hierarchyStateInner.inShrinkWrapTable ||
|
|
overflowXStyle === 'auto' ||
|
|
overflowXStyle === 'scroll') ? '' : 'fixed';
|
|
}
|
|
|
|
if (!ownerContext.heightModel.shrinkWrap &&
|
|
!Ext.supports.PercentageHeightOverflowBug) {
|
|
// if we're not shrink wrapping height, we need to get the outerCt out of the
|
|
// way so that percentage height children will be sized correctly. We do this
|
|
// by giving the outerCt a height of '100%' unless the browser is affected by
|
|
// the "percentage height overflow bug", in which case the outerCt will get a
|
|
// pixel height set during the calculate phase after we know the targetEl size.
|
|
outerCtHeight = '100%';
|
|
}
|
|
|
|
// if the outerCt width changed since last time (becuase of a widthModel change)
|
|
// or if we set a pixel width on the outerCt last time to work around a browser-
|
|
// specific bug, we need to set the width of the outerCt
|
|
if ((outerCtWidth !== lastOuterCtWidth) || me.hasOuterCtPxWidth) {
|
|
outerCt.setStyle('width', outerCtWidth);
|
|
me.lastOuterCtWidth = outerCtWidth;
|
|
me.hasOuterCtPxWidth = false;
|
|
}
|
|
|
|
// Set the outerCt table-layout property if different from last time.
|
|
if (outerCtTableLayout !== lastOuterCtTableLayout) {
|
|
outerCt.setStyle('table-layout', outerCtTableLayout);
|
|
me.lastOuterCtTableLayout = outerCtTableLayout;
|
|
}
|
|
|
|
// if the outerCt height changed since last time (becuase of a heightModel change)
|
|
// or if we set a pixel height on the outerCt last time to work around a browser-
|
|
// specific bug, we need to set the height of the outerCt
|
|
if ((outerCtHeight !== lastOuterCtHeight) || me.hasOuterCtPxHeight) {
|
|
outerCt.setStyle('height', outerCtHeight);
|
|
me.lastOuterCtHeight = outerCtHeight;
|
|
me.hasOuterCtPxHeight = false;
|
|
}
|
|
|
|
if (me.hasInnerCtPxHeight) {
|
|
me.innerCt.setStyle('height', '');
|
|
me.hasInnerCtPxHeight = false;
|
|
}
|
|
|
|
// Begin with the scrollbar adjustment that we used last time - this is more likely
|
|
// to be correct than beginning with no adjustment at all, but only if it is not
|
|
// already defined - it may have already been set by invalidate()
|
|
state.overflowAdjust = state.overflowAdjust || me.lastOverflowAdjust;
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
state = ownerContext.state,
|
|
containerSize = me.getContainerSize(ownerContext, true),
|
|
// If subclass has a calculateItems method, call it and cache the result
|
|
calculatedItems = state.calculatedItems ||
|
|
(state.calculatedItems = me.calculateItems ?
|
|
me.calculateItems(ownerContext, containerSize) : true);
|
|
|
|
me.setCtSizeIfNeeded(ownerContext, containerSize);
|
|
|
|
if (calculatedItems && ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
|
|
|
me.calculateContentSize(ownerContext);
|
|
|
|
if (containerSize.gotAll) {
|
|
if (me.manageOverflow && !ownerContext.state.secondPass && !me.reserveScrollbar) {
|
|
me.calculateOverflow(ownerContext, containerSize);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
me.done = false;
|
|
},
|
|
|
|
calculateContentSize: function (ownerContext) {
|
|
var me = this,
|
|
containerDimensions = ((ownerContext.widthModel.shrinkWrap ? 1 : 0) |
|
|
(ownerContext.heightModel.shrinkWrap ? 2 : 0)),
|
|
calcWidth = (containerDimensions & 1) || undefined,
|
|
calcHeight = (containerDimensions & 2) || undefined,
|
|
needed = 0,
|
|
props = ownerContext.props;
|
|
|
|
if (calcWidth) {
|
|
if (isNaN(props.contentWidth)) {
|
|
++needed;
|
|
} else {
|
|
calcWidth = undefined;
|
|
}
|
|
}
|
|
if (calcHeight) {
|
|
if (isNaN(props.contentHeight)) {
|
|
++needed;
|
|
} else {
|
|
calcHeight = undefined;
|
|
}
|
|
}
|
|
|
|
if (needed) {
|
|
if (calcWidth && !ownerContext.setContentWidth(me.measureContentWidth(ownerContext))) {
|
|
me.done = false;
|
|
}
|
|
if (calcHeight && !ownerContext.setContentHeight(me.measureContentHeight(ownerContext))) {
|
|
me.done = false;
|
|
}
|
|
|
|
//if (me.done) {
|
|
// var el = ownerContext.targetContext.el.dom;
|
|
// Ext.log(this.owner.id, '.contentSize: ', contentWidth, 'x', contentHeight,
|
|
// ' => scrollSize: ', el.scrollWidth, 'x', el.scrollHeight);
|
|
//}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles overflow processing for a container. In addition to the ownerContext
|
|
* passed to the {@link #calculate} method, this method also needs the containerSize
|
|
* (the object returned by {@link #getContainerSize}).
|
|
* @protected
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
*/
|
|
calculateOverflow: function (ownerContext) {
|
|
var me = this,
|
|
width, height, scrollbarSize, scrollbars, xauto, yauto, targetEl;
|
|
|
|
// Determine the dimensions that have overflow:auto applied. If these come by
|
|
// way of component config, this does not require a DOM read:
|
|
xauto = (me.getOverflowXStyle(ownerContext) === 'auto');
|
|
yauto = (me.getOverflowYStyle(ownerContext) === 'auto');
|
|
|
|
if (xauto || yauto) {
|
|
scrollbarSize = Ext.getScrollbarSize();
|
|
targetEl = ownerContext.overflowContext.el.dom;
|
|
scrollbars = 0;
|
|
|
|
if (targetEl.scrollWidth > targetEl.clientWidth) {
|
|
// has horizontal scrollbar
|
|
scrollbars |= 1;
|
|
}
|
|
|
|
if (targetEl.scrollHeight > targetEl.clientHeight) {
|
|
// has vertical scrollbar
|
|
scrollbars |= 2;
|
|
}
|
|
|
|
width = (yauto && (scrollbars & 2)) ? scrollbarSize.width : 0;
|
|
height = (xauto && (scrollbars & 1)) ? scrollbarSize.height : 0;
|
|
|
|
if (width !== me.lastOverflowAdjust.width || height !== me.lastOverflowAdjust.height) {
|
|
me.done = false;
|
|
|
|
// we pass overflowAdjust and overflowState in as state for the next
|
|
// cycle (these are discarded if one of our ownerCt's invalidates):
|
|
ownerContext.invalidate({
|
|
state: {
|
|
overflowAdjust: {
|
|
width: width,
|
|
height: height
|
|
},
|
|
overflowState: scrollbars,
|
|
secondPass: true
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
completeLayout: function(ownerContext) {
|
|
this.lastOverflowAdjust = ownerContext.state.overflowAdjust;
|
|
},
|
|
|
|
doRenderPadding: function(out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$layout,
|
|
owner = renderData.$layout.owner,
|
|
padding = owner[owner.contentPaddingProperty];
|
|
|
|
if (me.managePadding && padding) {
|
|
out.push('padding:', owner.unitizeBox(padding));
|
|
}
|
|
},
|
|
|
|
finishedLayout: function (ownerContext) {
|
|
var innerCt = this.innerCt;
|
|
|
|
this.callParent(arguments);
|
|
|
|
if (Ext.isIEQuirks || Ext.isIE8m) {
|
|
// IE6/7/quirks need a repaint to fix various rendering issues. TODO: narrow
|
|
// down the specific issues that require a repaint.
|
|
// IE8 strict needs a repaint to render percentage sized child items.
|
|
innerCt.repaint();
|
|
}
|
|
|
|
if (Ext.isOpera) {
|
|
// Opera also needs a repaint to render percentage sized child items. but
|
|
// the normal repaint() method doesn't seem to do the trick, but tweaking
|
|
// the position property in combination with reading scrollWidth does.
|
|
innerCt.setStyle('position', 'relative');
|
|
innerCt.dom.scrollWidth;
|
|
innerCt.setStyle('position', '');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the container size (that of the target). Only the fixed-sized dimensions can
|
|
* be returned because the shrinkWrap dimensions are based on the contentWidth/Height
|
|
* as determined by the container layout.
|
|
*
|
|
* If the {@link #calculateOverflow} method is used and if {@link #manageOverflow} is
|
|
* true, this will adjust the width/height by the size of scrollbars.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The owner's context item.
|
|
* @param {Boolean} [inDom=false] True if the container size must be in the DOM.
|
|
* @return {Object} The size
|
|
* @return {Number} return.width The width
|
|
* @return {Number} return.height The height
|
|
* @protected
|
|
*/
|
|
getContainerSize : function(ownerContext, inDom) {
|
|
// Subtle But Important:
|
|
//
|
|
// We don't want to call getProp/hasProp et.al. unless we in fact need that value
|
|
// for our results! If we call it and don't need it, the layout manager will think
|
|
// we depend on it and will schedule us again should it change.
|
|
|
|
var size = this.callParent(arguments),
|
|
overflowAdjust = ownerContext.state.overflowAdjust;
|
|
|
|
if (overflowAdjust) {
|
|
size.width -= overflowAdjust.width;
|
|
size.height -= overflowAdjust.height;
|
|
}
|
|
|
|
return size;
|
|
},
|
|
|
|
getRenderData: function() {
|
|
var owner = this.owner,
|
|
data = this.callParent();
|
|
|
|
// The shrinkWrapWidth data property is used by the renderTpl to determine if
|
|
// a table-based outerCt/innerCt is required in old IE. There are currently 2
|
|
// container configs that turn on the table at render time:
|
|
//
|
|
// 1. shrinkWrap:[1/3/true] on the container's initial config. There
|
|
// are two reasons one would want to use this config:
|
|
// a) If the container's width is initially shrink wrapped.
|
|
// b) If the container is not initially shrink wrapped and it is known
|
|
// at creation time that it will be shrink wrapped at some point
|
|
// after the initial layout cycle, then it is recommended to
|
|
// use the shrinkWrap config to initially configure the container
|
|
// with shrink wrapped width so that the layout does not have to
|
|
// dynamically insert a table after initial render.
|
|
//
|
|
// 2. If the container's "floating" config is set to true, and the container
|
|
// does not have a configured width, we can be relatively certain at render
|
|
// time that the container will be shrink wrapped at layout time, so
|
|
// we go ahead and initially render using a table.
|
|
if ((Ext.isIEQuirks || Ext.isIE7m) && // old IE
|
|
((owner.shrinkWrap & 1) || // shrink wrap width (handles value of 1, 3, or true)
|
|
(owner.floating && !owner.width))) { // floating container with no configured width
|
|
data.shrinkWrapWidth = true;
|
|
}
|
|
|
|
return data;
|
|
},
|
|
|
|
// Overridden method from Ext.layout.container.Container.
|
|
// Used in the beforeLayout method to render all items into.
|
|
getRenderTarget: function() {
|
|
return this.innerCt;
|
|
},
|
|
|
|
// Overridden method from Ext.layout.container.Container.
|
|
// Used by Container classes to insert special DOM elements which must exist in addition to the child components
|
|
getElementTarget: function() {
|
|
return this.innerCt;
|
|
},
|
|
|
|
/**
|
|
* Returns the overflow-x style of the render target.
|
|
* Note: If overflow is configured on a container using style or css class this method
|
|
* will read the dom the first time it is called. It is therefore preferable for
|
|
* performance reasons to use the autoScroll or overflowX config when horizontal
|
|
* overflow is desired.
|
|
* @protected
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
* @return {String}
|
|
*/
|
|
getOverflowXStyle: function(ownerContext) {
|
|
return ownerContext.overflowXStyle ||
|
|
(ownerContext.overflowXStyle = this.owner.scrollFlags.overflowX || ownerContext.overflowContext.getStyle('overflow-x'));
|
|
},
|
|
|
|
/**
|
|
* Returns the overflow-y style of the render target.
|
|
* Note: If overflow is configured on a container using style or css class this method
|
|
* will read the dom the first time it is called. It is therefore preferable for
|
|
* performance reasons to use the autoScroll or overflowY config when vertical
|
|
* overflow is desired.
|
|
* @protected
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
* @return {String}
|
|
*/
|
|
getOverflowYStyle: function(ownerContext) {
|
|
return ownerContext.overflowYStyle ||
|
|
(ownerContext.overflowYStyle = this.owner.scrollFlags.overflowY || ownerContext.overflowContext.getStyle('overflow-y'));
|
|
},
|
|
|
|
initContextItems: function(ownerContext) {
|
|
var me = this,
|
|
target = ownerContext.target,
|
|
customOverflowEl = me.owner.customOverflowEl;
|
|
|
|
ownerContext.outerCtContext = ownerContext.getEl('outerCt', me);
|
|
ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);
|
|
|
|
if (customOverflowEl) {
|
|
ownerContext.overflowContext = ownerContext.getEl(customOverflowEl);
|
|
} else {
|
|
ownerContext.overflowContext = ownerContext.targetContext;
|
|
}
|
|
|
|
if (target[target.contentPaddingProperty] !== undefined) {
|
|
// If padding was defined using the contentPaddingProperty, we render the
|
|
// the padding to the innerCt or outerCt (depending on the template that is
|
|
// being used), so we need to set the paddingContext accordingly.
|
|
// Otherwise we leave paddingContext as set by Container layout (defaults to
|
|
// the targetContext)
|
|
ownerContext.paddingContext = me.isShrinkWrapTpl ?
|
|
ownerContext.innerCtContext : ownerContext.outerCtContext;
|
|
}
|
|
},
|
|
|
|
initLayout: function() {
|
|
var me = this,
|
|
scrollbarWidth = Ext.getScrollbarSize().width,
|
|
owner = me.owner;
|
|
|
|
me.callParent();
|
|
|
|
// Create a default lastOverflowAdjust based upon scrolling configuration.
|
|
// If the Container is to overflow, or we *always* reserve space for a scrollbar
|
|
// then reserve space for a vertical scrollbar
|
|
if (scrollbarWidth && me.manageOverflow && !me.hasOwnProperty('lastOverflowAdjust')) {
|
|
if (owner.autoScroll || me.reserveScrollbar) {
|
|
me.lastOverflowAdjust = {
|
|
width: scrollbarWidth,
|
|
height: 0
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* In some cases a table-based outerCt/innerCt is required in old IE (see renderTpl).
|
|
* Most of the time this is determined at render time, however its possible that
|
|
* we made the wrong determination at render time and now that the layout is in
|
|
* progress we need a table. If so, this method should be called to replace the
|
|
* existing outerCt with a new table outerCt, and move the child elements to the new
|
|
* innerCt.
|
|
* @private
|
|
*/
|
|
insertTableCt: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
i = 0,
|
|
renderTpl, fragment, childNodes, childLength, targetEl;
|
|
|
|
// get the table-based renderTpl
|
|
renderTpl = Ext.XTemplate.getTpl(this, 'tableTpl');
|
|
renderTpl.renderPadding = me.doRenderPadding
|
|
|
|
// To avoid unnecessary reflows, remove the innerCt from the dom
|
|
// before operating on its children.
|
|
me.outerCt.dom.removeChild(me.innerCt.dom);
|
|
// create a document fragment to move all the childNodes to, so that
|
|
// they can be batch appended to the new innerCt
|
|
fragment = document.createDocumentFragment();
|
|
childNodes = me.innerCt.dom.childNodes;
|
|
childLength = childNodes.length;
|
|
// append all the children to the document fragment
|
|
for (; i < childLength; i++) {
|
|
fragment.appendChild(childNodes[0]);
|
|
}
|
|
// process the table template and insert it into the target el
|
|
targetEl = me.getTarget();
|
|
targetEl.dom.innerHTML = renderTpl.apply({
|
|
$layout: me,
|
|
ownerId: me.owner.id
|
|
});
|
|
|
|
// append the document fragment containing the childNodes to the new innerCt
|
|
targetEl.down('td').dom.appendChild(fragment);
|
|
// reconfigure childEls to point to the new template's elements
|
|
// we need to do this after the childNodes are appended to the new innerCt
|
|
// because the clearEl is one of the childNodes
|
|
me.applyChildEls(owner.el, owner.id)
|
|
// set the flag that indicates we are using a "shrink wrap" template.
|
|
// this needs to be done before reinitializeing the context items so that
|
|
// the paddingContext will be configured correctly.
|
|
me.isShrinkWrapTpl = true;
|
|
// since we have new childEls we need to reinitialize the context items
|
|
ownerContext.removeEl(me.outerCt);
|
|
ownerContext.removeEl(me.innerCt);
|
|
me.initContextItems(ownerContext);
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
// contentHeight includes padding, but not border, framing or margins
|
|
var contentHeight = this.outerCt.getHeight(),
|
|
target = ownerContext.target;
|
|
|
|
if (this.managePadding && (target[target.contentPaddingProperty] === undefined)) {
|
|
// if padding was not configured using the appropriate contentPaddingProperty
|
|
// then the padding will not be on the paddingContext, and therfore not included
|
|
// in the outerCt measurement, so we need to read the padding from the
|
|
// targetContext
|
|
contentHeight += ownerContext.targetContext.getPaddingInfo().height;
|
|
}
|
|
return contentHeight;
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
var dom, style, old, contentWidth, target;
|
|
|
|
// In the newer Chrome versions, it won't measure the
|
|
// width correctly without repainting the inner
|
|
// cell in some circumstances.
|
|
if (this.chromeCellMeasureBug) {
|
|
dom = this.innerCt.dom;
|
|
style = dom.style;
|
|
old = style.display;
|
|
|
|
if (old == 'table-cell') {
|
|
style.display = '';
|
|
dom.offsetWidth;
|
|
style.display = old;
|
|
}
|
|
}
|
|
|
|
// contentWidth includes padding, but not border, framing or margins
|
|
contentWidth = this.outerCt.getWidth();
|
|
target = ownerContext.target;
|
|
|
|
if (this.managePadding && (target[target.contentPaddingProperty] === undefined)) {
|
|
// if padding was not configured using the appropriate contentPaddingProperty
|
|
// then the padding will not be on the paddingContext, and therfore not included
|
|
// in the outerCt measurement, so we need to read the padding from the
|
|
// targetContext
|
|
contentWidth += ownerContext.targetContext.getPaddingInfo().width;
|
|
}
|
|
return contentWidth;
|
|
},
|
|
|
|
/**
|
|
* This method sets the height and/or width of the outerCt/innerCt to adjust for the
|
|
* following browser-specific issues:
|
|
*
|
|
* 1. In IE6 and 7 strict if we are using the shrink wrap template, and the outerCt
|
|
* has a 100% width (because the container is not shrink wrapping width currently),
|
|
* and the target element has a vertical scrollbar, the browser disregards the
|
|
* scrollbar when sizing the width of the outerCt. This can result in the target
|
|
* element gaining a horizontal scrollbar. We fix this issue by setting a pixel
|
|
* width on the outerCt
|
|
*
|
|
* 2. In IE quirks when using the "non shrink wrap" template, a long non-breaking word
|
|
* can cause the outerCt's width to expand beyond the width of its container. This
|
|
* behavior is desired if the container has the potential for horizontal overflow,
|
|
* but can cause text to be hidden if the container's overflow is hidden. To prevent
|
|
* this from happening we give the outerCt a fixed width in IE quirks when the
|
|
* container does not have horizontal overflow.
|
|
*
|
|
* 3. In some browsers a percentage-height element ignores the horizontal scrollbar
|
|
* of its parent (see Ext.supports.PercentageHeightOverflowBug). If the browser is
|
|
* affected by this bug the outerCt needs a pixel height in order to support
|
|
* percentage-height children when not shrink-wrapping height. If the browser is not
|
|
* affected by this bug, a height of 100% is assigned to the outerCt (see
|
|
* beginLayoutCycle).
|
|
*
|
|
* 4. In IE6/7 strict when using the "shrink wrap" template, percentage heights on
|
|
* children do not work unless the innerCt td has a height set. We can't use height
|
|
* 100% on the innerCt because conent-box sizing will cause any top/bottom padding to
|
|
* be added to the height. The solution is to set a pixel height on the innerCt.
|
|
|
|
* 5. IE8 strict mode has a bug with percentage height children. if the innerCt has
|
|
* a height of 100%, has padding, and has a child item with a percentage height, that
|
|
* child item will be sized as a percentage of the parent's height plus padding height.
|
|
* In other words, a child with height:50% would have its height caclulated thusly:
|
|
* (parentHeight + parentPaddingHeight) * 0.5
|
|
* To fix this, we have to give the innerCt a pixel height.
|
|
*
|
|
* 6. In IE7 strict if we're using the "non shrink wrap" template, and the target
|
|
* element has overflow-y:auto, the outerCt reserves space for the target element's
|
|
* vertical scrollbar even when there is no vertical scrollbar. This is fixed by
|
|
* setting the targetEl's overflow property to "hidden" and then back to "auto".
|
|
*
|
|
* @protected
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
* @param {Object} containerSize
|
|
*/
|
|
setCtSizeIfNeeded: function(ownerContext, containerSize) {
|
|
var me = this,
|
|
width = containerSize.width,
|
|
height = containerSize.height,
|
|
padding = ownerContext.paddingContext.getPaddingInfo(),
|
|
targetEl = me.getTarget(),
|
|
overflowXStyle = me.getOverflowXStyle(ownerContext),
|
|
overflowYStyle = me.getOverflowYStyle(ownerContext),
|
|
canOverflowX = (overflowXStyle === 'auto' || overflowXStyle === 'scroll'),
|
|
canOverflowY = (overflowYStyle === 'auto' || overflowYStyle === 'scroll'),
|
|
scrollbarSize = Ext.getScrollbarSize(),
|
|
isShrinkWrapTpl = me.isShrinkWrapTpl,
|
|
manageOverflow = me.manageOverflow,
|
|
overflowStyleName, needsOuterHeight, needsInnerHeight, needsInnerCtPaddingHeight;
|
|
|
|
if (width && !ownerContext.widthModel.shrinkWrap &&
|
|
// shrink wrap outerCt needs pixel width in IE6/7 strict because 100% width
|
|
// on the outerCt causes it to overlap the vertical scrollbar
|
|
((Ext.isIE7m && Ext.isStrict && isShrinkWrapTpl && canOverflowY) ||
|
|
// non shrink wrap tpl outerCt in IE quirks needs pixel width to prevent
|
|
// non-breaking text from causing the outerCt to expand beyond the width
|
|
// of its container.
|
|
(Ext.isIEQuirks && !isShrinkWrapTpl && !canOverflowX))) {
|
|
|
|
if (!manageOverflow) {
|
|
// If we're not managing overflow, the containerSize will not account for
|
|
// vertical scrollbar width, so we need to see if there is a vertical
|
|
// scrollbar and subtract its width
|
|
if (canOverflowY && (targetEl.dom.scrollHeight > targetEl.dom.clientHeight)) {
|
|
// has vertical scrollbar
|
|
width -= scrollbarSize.width;
|
|
}
|
|
}
|
|
|
|
ownerContext.outerCtContext.setProp('width', width + padding.width);
|
|
me.hasOuterCtPxWidth = true;
|
|
}
|
|
|
|
if (height && !ownerContext.heightModel.shrinkWrap) {
|
|
if (Ext.supports.PercentageHeightOverflowBug) {
|
|
// set a pixel height on the outerCt if the browser ignores horizontal
|
|
// scrollbar when rendering percentage-height elements
|
|
needsOuterHeight = true;
|
|
}
|
|
if (((Ext.isIE8 && Ext.isStrict) ||
|
|
Ext.isIE7m && Ext.isStrict && isShrinkWrapTpl)) {
|
|
// When using a shrink wrap template and not shrink wrapping, we set a
|
|
// pixel height on the innerCt to support percentage height children in
|
|
// IE6/7/8 strict.
|
|
needsInnerHeight = true;
|
|
// Do not add padding to the innerCt height in IE8 to prevent percentage-
|
|
// height children from adding padding height in their height calculation.
|
|
needsInnerCtPaddingHeight = !Ext.isIE8;
|
|
}
|
|
|
|
if ((needsOuterHeight || needsInnerHeight) && canOverflowX &&
|
|
(targetEl.dom.scrollWidth > targetEl.dom.clientWidth)) {
|
|
// adjust the height for scrollbar size since it's not accounted for
|
|
// in the containerSize.
|
|
// IE8 in what passes for "standards" mode does not tolerate -ve sizes
|
|
height = Math.max(height - scrollbarSize.height, 0);
|
|
}
|
|
|
|
if (needsOuterHeight) {
|
|
ownerContext.outerCtContext.setProp('height', height + padding.height);
|
|
me.hasOuterCtPxHeight = true;
|
|
}
|
|
|
|
if (needsInnerHeight) {
|
|
if (needsInnerCtPaddingHeight) {
|
|
height += padding.height;
|
|
}
|
|
ownerContext.innerCtContext.setProp('height', height);
|
|
me.hasInnerCtPxHeight = true;
|
|
}
|
|
}
|
|
|
|
if (Ext.isIE7 && Ext.isStrict && !isShrinkWrapTpl && (overflowYStyle === 'auto')) {
|
|
// IE7 strict has an insane bug where an auto-width element reserves
|
|
// space for its parent's vertical scrollbar if the parent has
|
|
// overflow-y:auto; even when no scrollbar is present. To workaround
|
|
// this issue we can set overflow-y to 'hidden' and then back to 'auto'.
|
|
// If we have vertical overflow, however, tweaking overflow-y can cause an
|
|
// illegitimate horizontal scrollbar to appear. So we have to tweak overflow-x
|
|
// instead if the overflow-x style is "auto"
|
|
overflowStyleName = (overflowXStyle === 'auto') ? 'overflow-x' : 'overflow-y';
|
|
targetEl.setStyle(overflowStyleName, 'hidden');
|
|
targetEl.setStyle(overflowStyleName, 'auto');
|
|
}
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
this.callParent(arguments);
|
|
|
|
renderTpl.renderPadding = this.doRenderPadding;
|
|
},
|
|
|
|
getContentTarget: function(){
|
|
return this.innerCt;
|
|
}
|
|
|
|
}, function(){
|
|
this.prototype.chromeCellMeasureBug = Ext.isChrome && Ext.chromeVersion >= 26;
|
|
});
|
|
|
|
/**
|
|
* A class that manages a group of {@link Ext.Component#floating} Components and provides z-order management,
|
|
* and Component activation behavior, including masking below the active (topmost) Component.
|
|
*
|
|
* {@link Ext.Component#floating Floating} Components which are rendered directly into the document (such as
|
|
* {@link Ext.window.Window Window}s) which are {@link Ext.Component#method-show show}n are managed by a
|
|
* {@link Ext.WindowManager global instance}.
|
|
*
|
|
* {@link Ext.Component#floating Floating} Components which are descendants of {@link Ext.Component#floating floating}
|
|
* *Containers* (for example a {@link 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. Therefore
|
|
* ComboBox dropdowns within Windows will have managed z-indices guaranteed to be correct, relative to the Window.
|
|
*/
|
|
Ext.define('Ext.ZIndexManager', {
|
|
alternateClassName: 'Ext.WindowGroup',
|
|
|
|
statics: {
|
|
zBase : 9000
|
|
},
|
|
|
|
constructor: function(container) {
|
|
var me = this;
|
|
|
|
me.list = {};
|
|
me.zIndexStack = [];
|
|
me.front = null;
|
|
|
|
if (container) {
|
|
|
|
// This is the ZIndexManager for an Ext.container.Container, base its zseed on the zIndex of the Container's element
|
|
if (container.isContainer) {
|
|
container.on('resize', me._onContainerResize, me);
|
|
me.zseed = Ext.Number.from(me.rendered ? container.getEl().getStyle('zIndex') : undefined, me.getNextZSeed());
|
|
// The containing element we will be dealing with (eg masking) is the content target
|
|
me.targetEl = container.getTargetEl();
|
|
me.container = container;
|
|
}
|
|
// This is the ZIndexManager for a DOM element
|
|
else {
|
|
Ext.EventManager.onWindowResize(me._onContainerResize, me);
|
|
me.zseed = me.getNextZSeed();
|
|
me.targetEl = Ext.get(container);
|
|
}
|
|
}
|
|
// No container passed means we are the global WindowManager. Our target is the doc body.
|
|
// DOM must be ready to collect that ref.
|
|
else {
|
|
Ext.EventManager.onWindowResize(me._onContainerResize, me);
|
|
me.zseed = me.getNextZSeed();
|
|
Ext.onDocumentReady(function() {
|
|
me.targetEl = Ext.getBody();
|
|
});
|
|
}
|
|
},
|
|
|
|
getNextZSeed: function() {
|
|
return (Ext.ZIndexManager.zBase += 10000);
|
|
},
|
|
|
|
setBase: function(baseZIndex) {
|
|
this.zseed = baseZIndex;
|
|
var result = this.assignZIndices();
|
|
this._activateLast();
|
|
return result;
|
|
},
|
|
|
|
// @private
|
|
assignZIndices: function() {
|
|
var a = this.zIndexStack,
|
|
len = a.length,
|
|
i = 0,
|
|
zIndex = this.zseed,
|
|
comp,
|
|
topModal;
|
|
|
|
for (; i < len; i++) {
|
|
comp = a[i];
|
|
if (comp && !comp.hidden) {
|
|
|
|
// Setting the zIndex of a Component returns the topmost zIndex consumed by
|
|
// that Component.
|
|
// If it's just a plain floating Component such as a BoundList, then the
|
|
// return value is the passed value plus 10, ready for the next item.
|
|
// If a floating *Container* has its zIndex set, it re-orders its managed
|
|
// floating children, starting from that new base, and returns a value 10000 above
|
|
// the highest zIndex which it allocates.
|
|
zIndex = comp.setZIndex(zIndex);
|
|
if (comp.modal) {
|
|
topModal = comp;
|
|
}
|
|
}
|
|
}
|
|
|
|
// If we encountered a modal in our reassigment, ensure our modal mask is just below it.
|
|
if (topModal) {
|
|
this._showModalMask(topModal)
|
|
}
|
|
return zIndex;
|
|
},
|
|
|
|
// @private
|
|
_setActiveChild: function(comp, oldFront) {
|
|
var front = this.front,
|
|
oldPreventFocus = comp.preventFocusOnActivate;
|
|
|
|
if (comp !== front) {
|
|
|
|
if (front && !front.destroying) {
|
|
front.setActive(false, comp);
|
|
}
|
|
this.front = comp;
|
|
if (comp && comp != oldFront) {
|
|
|
|
// If the previously active comp did not take focus, then do not disturb focus state by focusing the new front
|
|
comp.preventFocusOnActivate = comp.preventFocusOnActivate || oldFront && (oldFront.preventFocusOnActivate || !oldFront.focusOnToFront);
|
|
|
|
comp.setActive(true);
|
|
|
|
// If the modal mask was utilized by the outgoing front component, reposition it.
|
|
if (comp.modal) {
|
|
this._showModalMask(comp);
|
|
}
|
|
|
|
// Restore the new front's focusing flag
|
|
comp.preventFocusOnActivate = oldPreventFocus;
|
|
}
|
|
}
|
|
},
|
|
|
|
onComponentHide: function(comp){
|
|
this._activateLast();
|
|
},
|
|
|
|
// @private
|
|
_activateLast: function() {
|
|
var me = this,
|
|
stack = me.zIndexStack,
|
|
i = stack.length - 1,
|
|
comp;
|
|
|
|
// Go down through the z-index stack.
|
|
// Activate the next visible one down.
|
|
// If that was modal, then we're done
|
|
for (; i >= 0 && stack[i].hidden; --i);
|
|
|
|
// The loop found a visible floater to activate
|
|
if ((comp = stack[i])) {
|
|
me._setActiveChild(comp, me.front);
|
|
if (comp.modal) {
|
|
return;
|
|
}
|
|
}
|
|
// No other floater to activate, just deactivate the current one
|
|
else {
|
|
if (me.front && !me.front.destroying) {
|
|
me.front.setActive(false);
|
|
}
|
|
me.front = null;
|
|
}
|
|
|
|
// If the new top one was not modal, keep going down to find the next visible
|
|
// modal one to shift the modal mask down under
|
|
for (; i >= 0; --i) {
|
|
comp = stack[i];
|
|
// If we find a visible modal further down the zIndex stack, move the mask to just under it.
|
|
if (comp.isVisible() && comp.modal) {
|
|
me._showModalMask(comp);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// No visible modal Component was found in the run down the stack.
|
|
// So hide the modal mask
|
|
me._hideModalMask();
|
|
},
|
|
|
|
_showModalMask: function(comp) {
|
|
var me = this,
|
|
zIndex = comp.el.getStyle('zIndex') - 4,
|
|
maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : comp.container,
|
|
mask = me.mask,
|
|
shim = me.maskShim,
|
|
viewSize;
|
|
|
|
if (!mask) {
|
|
if (Ext.isIE6) {
|
|
shim = me.maskShim = Ext.getBody().createChild({
|
|
tag: 'iframe',
|
|
cls : Ext.baseCSSPrefix + 'shim ' + Ext.baseCSSPrefix + 'mask-shim'
|
|
});
|
|
shim.setVisibilityMode(Ext.Element.DISPLAY);
|
|
}
|
|
|
|
// Create the mask at zero size so that it does not affect upcoming target measurements.
|
|
mask = me.mask = Ext.getBody().createChild({
|
|
cls: Ext.baseCSSPrefix + 'mask',
|
|
style: 'height:0;width:0'
|
|
});
|
|
mask.setVisibilityMode(Ext.Element.DISPLAY);
|
|
mask.on('click', me._onMaskClick, me);
|
|
}
|
|
|
|
mask.maskTarget = maskTarget;
|
|
viewSize = me.getMaskBox();
|
|
|
|
if (shim) {
|
|
shim.setStyle('zIndex', zIndex);
|
|
shim.show();
|
|
shim.setBox(viewSize);
|
|
}
|
|
mask.setStyle('zIndex', zIndex);
|
|
|
|
// setting mask box before showing it in an IE7 strict iframe within a quirks page
|
|
// can cause body scrolling [EXTJSIV-6219]
|
|
mask.show();
|
|
mask.setBox(viewSize);
|
|
},
|
|
|
|
_hideModalMask: function() {
|
|
var mask = this.mask,
|
|
maskShim = this.maskShim;
|
|
|
|
if (mask && mask.isVisible()) {
|
|
mask.maskTarget = undefined;
|
|
mask.hide();
|
|
if (maskShim) {
|
|
maskShim.hide();
|
|
}
|
|
}
|
|
},
|
|
|
|
_onMaskClick: function() {
|
|
if (this.front) {
|
|
this.front.focus();
|
|
}
|
|
},
|
|
|
|
getMaskBox: function(){
|
|
var maskTarget = this.mask.maskTarget;
|
|
if (maskTarget.dom === document.body) {
|
|
return {
|
|
height: Math.max(document.body.scrollHeight, Ext.dom.Element.getDocumentHeight()),
|
|
width: Math.max(document.body.scrollWidth, document.documentElement.clientWidth),
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
} else {
|
|
return maskTarget.getBox();
|
|
}
|
|
},
|
|
|
|
_onContainerResize: function() {
|
|
var me = this,
|
|
mask = me.mask,
|
|
maskShim = me.maskShim,
|
|
viewSize;
|
|
|
|
if (mask && mask.isVisible()) {
|
|
|
|
// At the new container size, the mask might be *causing* the scrollbar, so to find the valid
|
|
// client size to mask, we must temporarily unmask the parent node.
|
|
mask.hide();
|
|
if (maskShim) {
|
|
maskShim.hide();
|
|
}
|
|
|
|
viewSize = me.getMaskBox();
|
|
if (maskShim) {
|
|
maskShim.setSize(viewSize);
|
|
maskShim.show();
|
|
}
|
|
mask.setSize(viewSize);
|
|
mask.show();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Registers a floating {@link Ext.Component} with this ZIndexManager. This should not
|
|
* need to be called under normal circumstances. Floating Components (such as Windows,
|
|
* BoundLists and Menus) are automatically registered with a
|
|
* {@link Ext.Component#zIndexManager zIndexManager} at render time.
|
|
*
|
|
* Where this may be useful is moving Windows between two ZIndexManagers. For example,
|
|
* to bring the Ext.MessageBox dialog under the same manager as the Desktop's
|
|
* ZIndexManager in the desktop sample app:
|
|
*
|
|
* MyDesktop.getDesktop().getManager().register(Ext.MessageBox);
|
|
*
|
|
* @param {Ext.Component} comp The Component to register.
|
|
*/
|
|
register : function(comp) {
|
|
var me = this,
|
|
compAfterHide = comp.afterHide;
|
|
|
|
if (comp.zIndexManager) {
|
|
comp.zIndexManager.unregister(comp);
|
|
}
|
|
comp.zIndexManager = me;
|
|
|
|
me.list[comp.id] = comp;
|
|
me.zIndexStack.push(comp);
|
|
|
|
// Hook into Component's afterHide processing
|
|
comp.afterHide = function() {
|
|
compAfterHide.apply(comp, arguments);
|
|
me.onComponentHide(comp);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Unregisters a {@link Ext.Component} from this ZIndexManager. This should not
|
|
* need to be called. Components are automatically unregistered upon destruction.
|
|
* See {@link #register}.
|
|
* @param {Ext.Component} comp The Component to unregister.
|
|
*/
|
|
unregister : function(comp) {
|
|
var me = this,
|
|
list = me.list;
|
|
|
|
delete comp.zIndexManager;
|
|
if (list && list[comp.id]) {
|
|
delete list[comp.id];
|
|
|
|
// Relinquish control of Component's afterHide processing
|
|
delete comp.afterHide;
|
|
Ext.Array.remove(me.zIndexStack, comp);
|
|
|
|
// Destruction requires that the topmost visible floater be activated. Same as hiding.
|
|
me._activateLast();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets a registered Component by id.
|
|
* @param {String/Object} id The id of the Component or a {@link Ext.Component} instance
|
|
* @return {Ext.Component}
|
|
*/
|
|
get : function(id) {
|
|
return id.isComponent ? id : this.list[id];
|
|
},
|
|
|
|
/**
|
|
* Brings the specified Component to the front of any other active Components in this ZIndexManager.
|
|
* @param {String/Object} comp The id of the Component or a {@link Ext.Component} instance
|
|
* @return {Boolean} True if the dialog was brought to the front, else false
|
|
* if it was already in front
|
|
*/
|
|
bringToFront : function(comp, preventFocus) {
|
|
var me = this,
|
|
result = false,
|
|
zIndexStack = me.zIndexStack;
|
|
|
|
comp = me.get(comp);
|
|
if (comp !== me.front) {
|
|
Ext.Array.remove(zIndexStack, comp);
|
|
if (comp.preventBringToFront) {
|
|
// this takes care of cases where a load mask should be displayed under a floated component
|
|
zIndexStack.unshift(comp);
|
|
} else {
|
|
// the default behavior is to push onto the stack
|
|
zIndexStack.push(comp);
|
|
}
|
|
|
|
me.assignZIndices();
|
|
|
|
// Activate new topmost
|
|
if (!preventFocus) {
|
|
me._activateLast();
|
|
}
|
|
result = true;
|
|
me.front = comp;
|
|
|
|
// If new topmost is modal, ensure the mask is there
|
|
if (comp.modal) {
|
|
me._showModalMask(comp);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Sends the specified Component to the back of other active Components in this ZIndexManager.
|
|
* @param {String/Object} comp The id of the Component or a {@link Ext.Component} instance
|
|
* @return {Ext.Component} The Component
|
|
*/
|
|
sendToBack : function(comp) {
|
|
var me = this;
|
|
|
|
comp = me.get(comp);
|
|
Ext.Array.remove(me.zIndexStack, comp);
|
|
me.zIndexStack.unshift(comp);
|
|
me.assignZIndices();
|
|
this._activateLast();
|
|
return comp;
|
|
},
|
|
|
|
/**
|
|
* Hides all Components managed by this ZIndexManager.
|
|
*/
|
|
hideAll : function() {
|
|
var list = this.list,
|
|
item,
|
|
id;
|
|
|
|
for (id in list) {
|
|
if (list.hasOwnProperty(id)) {
|
|
item = list[id];
|
|
if (item.isComponent && item.isVisible()) {
|
|
item.hide();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Temporarily hides all currently visible managed Components. This is for when
|
|
* dragging a Window which may manage a set of floating descendants in its ZIndexManager;
|
|
* they should all be hidden just for the duration of the drag.
|
|
*/
|
|
hide: function() {
|
|
var i = 0,
|
|
stack = this.zIndexStack,
|
|
len = stack.length,
|
|
comp;
|
|
|
|
this.tempHidden = [];
|
|
for (; i < len; i++) {
|
|
comp = stack[i];
|
|
if (comp.isVisible()) {
|
|
this.tempHidden.push(comp);
|
|
comp.el.hide();
|
|
comp.hidden = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Restores temporarily hidden managed Components to visibility.
|
|
*/
|
|
show: function() {
|
|
var i = 0,
|
|
tempHidden = this.tempHidden,
|
|
len = tempHidden ? tempHidden.length : 0,
|
|
comp;
|
|
|
|
for (; i < len; i++) {
|
|
comp = tempHidden[i];
|
|
comp.el.show();
|
|
comp.hidden = false;
|
|
comp.setPosition(comp.x, comp.y);
|
|
}
|
|
delete this.tempHidden;
|
|
},
|
|
|
|
/**
|
|
* Gets the currently-active Component in this ZIndexManager.
|
|
* @return {Ext.Component} The active Component
|
|
*/
|
|
getActive : function() {
|
|
return this.front;
|
|
},
|
|
|
|
/**
|
|
* Returns zero or more Components in this ZIndexManager using the custom search function passed to this method.
|
|
* The function should accept a single {@link Ext.Component} reference as its only argument and should
|
|
* return true if the Component matches the search criteria, otherwise it should return false.
|
|
* @param {Function} fn The search function
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed.
|
|
* Defaults to the Component being tested. That gets passed to the function if not specified.
|
|
* @return {Array} An array of zero or more matching windows
|
|
*/
|
|
getBy : function(fn, scope) {
|
|
var r = [],
|
|
i = 0,
|
|
stack = this.zIndexStack,
|
|
len = stack.length,
|
|
comp;
|
|
|
|
for (; i < len; i++) {
|
|
comp = stack[i];
|
|
if (fn.call(scope||comp, comp) !== false) {
|
|
r.push(comp);
|
|
}
|
|
}
|
|
return r;
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for every Component in this ZIndexManager, passing each
|
|
* Component as the only parameter. Returning false from the function will stop the iteration.
|
|
* @param {Function} fn The function to execute for each item
|
|
* @param {Object} [scope] The scope (this reference) in which the function
|
|
* is executed. Defaults to the current Component in the iteration.
|
|
*/
|
|
each : function(fn, scope) {
|
|
var list = this.list,
|
|
id,
|
|
comp;
|
|
|
|
for (id in list) {
|
|
if (list.hasOwnProperty(id)) {
|
|
comp = list[id];
|
|
if (comp.isComponent && fn.call(scope || comp, comp) === false) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for every Component in this ZIndexManager, passing each
|
|
* Component as the only parameter. Returning false from the function will stop the iteration.
|
|
* The components are passed to the function starting at the bottom and proceeding to the top.
|
|
* @param {Function} fn The function to execute for each item
|
|
* @param {Object} scope (optional) The scope (this reference) in which the function
|
|
* is executed. Defaults to the current Component in the iteration.
|
|
*/
|
|
eachBottomUp: function (fn, scope) {
|
|
var stack = this.zIndexStack,
|
|
i = 0,
|
|
len = stack.length,
|
|
comp;
|
|
|
|
for (; i < len; i++) {
|
|
comp = stack[i];
|
|
if (comp.isComponent && fn.call(scope || comp, comp) === false) {
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for every Component in this ZIndexManager, passing each
|
|
* Component as the only parameter. Returning false from the function will stop the iteration.
|
|
* The components are passed to the function starting at the top and proceeding to the bottom.
|
|
* @param {Function} fn The function to execute for each item
|
|
* @param {Object} [scope] The scope (this reference) in which the function
|
|
* is executed. Defaults to the current Component in the iteration.
|
|
*/
|
|
eachTopDown: function (fn, scope) {
|
|
var stack = this.zIndexStack,
|
|
i = stack.length,
|
|
comp;
|
|
|
|
for (; i-- > 0; ) {
|
|
comp = stack[i];
|
|
if (comp.isComponent && fn.call(scope || comp, comp) === false) {
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
destroy: function() {
|
|
var me = this,
|
|
list = me.list,
|
|
comp,
|
|
id;
|
|
|
|
for (id in list) {
|
|
if (list.hasOwnProperty(id)) {
|
|
comp = list[id];
|
|
|
|
if (comp.isComponent) {
|
|
comp.destroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
delete me.zIndexStack;
|
|
delete me.list;
|
|
delete me.container;
|
|
delete me.targetEl;
|
|
}
|
|
}, function() {
|
|
/**
|
|
* @class Ext.WindowManager
|
|
* @extends Ext.ZIndexManager
|
|
*
|
|
* The default global floating Component group that is available automatically.
|
|
*
|
|
* This manages instances of floating Components which were rendered programatically without
|
|
* being added to a {@link Ext.container.Container Container}, and for floating Components
|
|
* which were added into non-floating Containers.
|
|
*
|
|
* *Floating* Containers create their own instance of ZIndexManager, and floating Components
|
|
* added at any depth below there are managed by that ZIndexManager.
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.WindowManager = Ext.WindowMgr = new this();
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* A mixin for providing query related methods for {@link Ext.ComponentQuery} for components that
|
|
* implement getRefItems.
|
|
*/
|
|
Ext.define('Ext.Queryable', {
|
|
|
|
isQueryable: true,
|
|
|
|
/**
|
|
* Retrieves all descendant components which match the passed selector.
|
|
* Executes an Ext.ComponentQuery.query using this container as its root.
|
|
* @param {String} [selector] Selector complying to an Ext.ComponentQuery selector.
|
|
* If no selector is specified all items will be returned.
|
|
* @return {Ext.Component[]} Components which matched the selector
|
|
*/
|
|
query : function(selector) {
|
|
selector = selector || '*';
|
|
return Ext.ComponentQuery.query(selector, this);
|
|
},
|
|
|
|
/**
|
|
* Retrieves all descendant components which match the passed function.
|
|
* The function should return false for components that are to be
|
|
* excluded from the selection.
|
|
* @param {Function} fn The matcher function. It will be called with a single argument,
|
|
* the component being tested.
|
|
* @param {Object} [scope] The scope in which to run the function. If not specified,
|
|
* it will default to the active component.
|
|
* @return {Ext.Component[]} Components matched by the passed function
|
|
*/
|
|
queryBy: function(fn, scope) {
|
|
var out = [],
|
|
items = this.getRefItems(true),
|
|
i = 0,
|
|
len = items.length,
|
|
item;
|
|
|
|
for (; i < len; ++i) {
|
|
item = items[i];
|
|
if (fn.call(scope || item, item) !== false) {
|
|
out.push(item);
|
|
}
|
|
}
|
|
return out;
|
|
},
|
|
|
|
/**
|
|
* Finds a component at any level under this container matching the id/itemId.
|
|
* This is a shorthand for calling ct.down('#' + id);
|
|
* @param {String} id The id to find
|
|
* @return {Ext.Component} The matching id, null if not found
|
|
*/
|
|
queryById: function(id){
|
|
return this.down('#' + id);
|
|
},
|
|
|
|
/**
|
|
* Retrieves the first direct child of this container which matches the passed selector or component.
|
|
* The passed in selector must comply with an Ext.ComponentQuery selector, or it can be an actual Ext.Component.
|
|
* @param {String/Ext.Component} [selector] An Ext.ComponentQuery selector. If no selector is
|
|
* specified, the first child will be returned.
|
|
* @return Ext.Component The matching child Ext.Component (or `null` if no match was found).
|
|
*/
|
|
child: function (selector) {
|
|
if (selector && selector.isComponent) {
|
|
selector = '#' + Ext.escapeId(selector.getItemId());
|
|
}
|
|
|
|
selector = selector || '';
|
|
return this.query('> ' + selector)[0] || null;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the first descendant of this container which matches the passed selector.
|
|
* The passed in selector must comply with an Ext.ComponentQuery selector, or it can be an actual Ext.Component.
|
|
* @param {String/Ext.Component} [selector] An Ext.ComponentQuery selector or Ext.Component. If no selector is
|
|
* specified, the first child will be returned.
|
|
* @return Ext.Component The matching descendant Ext.Component (or `null` if no match was found).
|
|
*/
|
|
down: function (selector) {
|
|
if (selector && selector.isComponent) {
|
|
selector = '#' + Ext.escapeId(selector.getItemId());
|
|
}
|
|
|
|
selector = selector || '';
|
|
return this.query(selector)[0] || null;
|
|
},
|
|
|
|
getRefItems: function(){
|
|
return [];
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* This class is intended to be extended or created via the {@link Ext.Component#componentLayout layout}
|
|
* configuration property. See {@link Ext.Component#componentLayout} for additional details.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.Component', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.Layout ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'component',
|
|
|
|
isComponentLayout: true,
|
|
|
|
nullBox: {},
|
|
|
|
usesContentHeight: true,
|
|
usesContentWidth: true,
|
|
usesHeight: true,
|
|
usesWidth: true,
|
|
|
|
beginLayoutCycle: function (ownerContext, firstCycle) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
ownerCtContext = ownerContext.ownerCtContext,
|
|
heightModel = ownerContext.heightModel,
|
|
widthModel = ownerContext.widthModel,
|
|
body = owner.el.dom === document.body,
|
|
lastBox = owner.lastBox || me.nullBox,
|
|
lastSize = owner.el.lastBox || me.nullBox,
|
|
dirty = !body,
|
|
ownerLayout, v, widthName, heightName;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (firstCycle) {
|
|
if (me.usesContentWidth) {
|
|
++ownerContext.consumersContentWidth;
|
|
}
|
|
if (me.usesContentHeight) {
|
|
++ownerContext.consumersContentHeight;
|
|
}
|
|
if (me.usesWidth) {
|
|
++ownerContext.consumersWidth;
|
|
}
|
|
if (me.usesHeight) {
|
|
++ownerContext.consumersHeight;
|
|
}
|
|
|
|
if (ownerCtContext && !ownerCtContext.hasRawContent) {
|
|
ownerLayout = owner.ownerLayout;
|
|
|
|
if (ownerLayout.usesWidth) {
|
|
++ownerContext.consumersWidth;
|
|
}
|
|
if (ownerLayout.usesHeight) {
|
|
++ownerContext.consumersHeight;
|
|
}
|
|
}
|
|
}
|
|
|
|
// we want to publish configured dimensions as early as possible and since this is
|
|
// a write phase...
|
|
|
|
if (widthModel.configured) {
|
|
// If the owner.el is the body, owner.width is not dirty (we don't want to write
|
|
// it to the body el). For other el's, the width may already be correct in the
|
|
// DOM (e.g., it is rendered in the markup initially). If the width is not
|
|
// correct in the DOM, this is only going to be the case on the first cycle.
|
|
widthName = widthModel.names.width;
|
|
|
|
if (!body) {
|
|
dirty = firstCycle ? owner[widthName] !== lastSize.width
|
|
: widthModel.constrained;
|
|
}
|
|
|
|
ownerContext.setWidth(owner[widthName], dirty);
|
|
} else if (ownerContext.isTopLevel) {
|
|
if (widthModel.calculated) {
|
|
v = lastBox.width;
|
|
ownerContext.setWidth(v, /*dirty=*/v != lastSize.width);
|
|
}
|
|
|
|
v = lastBox.x;
|
|
ownerContext.setProp('x', v, /*dirty=*/v != lastSize.x);
|
|
}
|
|
|
|
if (heightModel.configured) {
|
|
heightName = heightModel.names.height;
|
|
|
|
if (!body) {
|
|
dirty = firstCycle ? owner[heightName] !== lastSize.height
|
|
: heightModel.constrained;
|
|
}
|
|
|
|
ownerContext.setHeight(owner[heightName], dirty);
|
|
} else if (ownerContext.isTopLevel) {
|
|
if (heightModel.calculated) {
|
|
v = lastBox.height;
|
|
ownerContext.setHeight(v, v != lastSize.height);
|
|
}
|
|
|
|
v = lastBox.y;
|
|
ownerContext.setProp('y', v, /*dirty=*/v != lastSize.y);
|
|
}
|
|
},
|
|
|
|
finishedLayout: function(ownerContext) {
|
|
var me = this,
|
|
elementChildren = ownerContext.children,
|
|
owner = me.owner,
|
|
len, i, elContext, lastBox, props;
|
|
|
|
// NOTE: In the code below we cannot use getProp because that will generate a layout dependency
|
|
|
|
// Set lastBox on managed child Elements.
|
|
// So that ContextItem.constructor can snag the lastBox for use by its undo method.
|
|
if (elementChildren) {
|
|
len = elementChildren.length;
|
|
for (i = 0; i < len; i++) {
|
|
elContext = elementChildren[i];
|
|
elContext.el.lastBox = elContext.props;
|
|
}
|
|
}
|
|
|
|
// Cache the size from which we are changing so that notifyOwner can notify the owningComponent with all essential information
|
|
ownerContext.previousSize = me.lastComponentSize;
|
|
|
|
// Cache the currently layed out size
|
|
me.lastComponentSize = owner.el.lastBox = props = ownerContext.props;
|
|
|
|
// lastBox is a copy of the defined props to allow save/restore of these (panel
|
|
// collapse needs this)
|
|
lastBox = owner.lastBox || (owner.lastBox = {});
|
|
lastBox.x = props.x;
|
|
lastBox.y = props.y;
|
|
lastBox.width = props.width;
|
|
lastBox.height = props.height;
|
|
lastBox.invalid = false;
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
notifyOwner: function(ownerContext) {
|
|
var me = this,
|
|
currentSize = me.lastComponentSize,
|
|
prevSize = ownerContext.previousSize,
|
|
args = [currentSize.width, currentSize.height];
|
|
|
|
if (prevSize) {
|
|
args.push(prevSize.width, prevSize.height);
|
|
}
|
|
|
|
// Call afterComponentLayout passing new size, and only passing old size if there *was* an old size.
|
|
me.owner.afterComponentLayout.apply(me.owner, args);
|
|
},
|
|
|
|
/**
|
|
* Returns the owner component's resize element.
|
|
* @return {Ext.Element}
|
|
*/
|
|
getTarget : function() {
|
|
return this.owner.el;
|
|
},
|
|
|
|
/**
|
|
* Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.
|
|
*
|
|
* May be overridden in Component layout managers which implement an inner element.
|
|
* @return {Ext.Element}
|
|
*/
|
|
getRenderTarget : function() {
|
|
return this.owner.el;
|
|
},
|
|
|
|
cacheTargetInfo: function(ownerContext) {
|
|
var me = this,
|
|
targetInfo = me.targetInfo,
|
|
target;
|
|
|
|
if (!targetInfo) {
|
|
target = ownerContext.getEl('getTarget', me);
|
|
|
|
me.targetInfo = targetInfo = {
|
|
padding: target.getPaddingInfo(),
|
|
border: target.getBorderInfo()
|
|
};
|
|
}
|
|
|
|
return targetInfo;
|
|
},
|
|
|
|
measureAutoDimensions: function (ownerContext, dimensions) {
|
|
// Subtle But Important:
|
|
//
|
|
// We don't want to call getProp/hasProp et.al. unless we in fact need that value
|
|
// for our results! If we call it and don't need it, the layout manager will think
|
|
// we depend on it and will schedule us again should it change.
|
|
|
|
var me = this,
|
|
owner = me.owner,
|
|
containerLayout = owner.layout,
|
|
heightModel = ownerContext.heightModel,
|
|
widthModel = ownerContext.widthModel,
|
|
boxParent = ownerContext.boxParent,
|
|
isBoxParent = ownerContext.isBoxParent,
|
|
props = ownerContext.props,
|
|
isContainer,
|
|
ret = {
|
|
gotWidth: false,
|
|
gotHeight: false,
|
|
isContainer: (isContainer = !ownerContext.hasRawContent)
|
|
},
|
|
hv = dimensions || 3,
|
|
zeroWidth, zeroHeight,
|
|
needed = 0,
|
|
got = 0,
|
|
ready, size, temp;
|
|
|
|
// Note: this method is called *a lot*, so we have to be careful not to waste any
|
|
// time or make useless calls or, especially, read the DOM when we can avoid it.
|
|
|
|
//---------------------------------------------------------------------
|
|
// Width
|
|
|
|
if (widthModel.shrinkWrap && ownerContext.consumersContentWidth) {
|
|
++needed;
|
|
zeroWidth = !(hv & 1);
|
|
|
|
if (isContainer) {
|
|
// as a componentLayout for a container, we rely on the container layout to
|
|
// produce contentWidth...
|
|
if (zeroWidth) {
|
|
ret.contentWidth = 0;
|
|
ret.gotWidth = true;
|
|
++got;
|
|
} else if ((ret.contentWidth = ownerContext.getProp('contentWidth')) !== undefined) {
|
|
ret.gotWidth = true;
|
|
++got;
|
|
}
|
|
} else {
|
|
size = props.contentWidth;
|
|
|
|
if (typeof size == 'number') { // if (already determined)
|
|
ret.contentWidth = size;
|
|
ret.gotWidth = true;
|
|
++got;
|
|
} else {
|
|
if (zeroWidth) {
|
|
ready = true;
|
|
} else if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
|
ready = false;
|
|
} else if (isBoxParent || !boxParent || boxParent.widthModel.shrinkWrap) {
|
|
// if we have no boxParent, we are ready, but a shrinkWrap boxParent
|
|
// artificially provides width early in the measurement process so
|
|
// we are ready to go in that case as well...
|
|
ready = true;
|
|
} else {
|
|
// lastly, we have a boxParent that will be given a width, so we
|
|
// can wait for that width to be set in order to properly measure
|
|
// whatever is inside...
|
|
ready = boxParent.hasDomProp('width');
|
|
}
|
|
|
|
if (ready) {
|
|
if (zeroWidth) {
|
|
temp = 0;
|
|
} else if (containerLayout && containerLayout.measureContentWidth) {
|
|
// Allow the container layout to do the measurement since it
|
|
// may have a better idea of how to do it even with no items:
|
|
temp = containerLayout.measureContentWidth(ownerContext);
|
|
} else {
|
|
temp = me.measureContentWidth(ownerContext);
|
|
}
|
|
|
|
if (!isNaN(ret.contentWidth = temp)) {
|
|
ownerContext.setContentWidth(temp, true);
|
|
ret.gotWidth = true;
|
|
++got;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (widthModel.natural && ownerContext.consumersWidth) {
|
|
++needed;
|
|
size = props.width;
|
|
// zeroWidth does not apply
|
|
|
|
if (typeof size == 'number') { // if (already determined)
|
|
ret.width = size;
|
|
ret.gotWidth = true;
|
|
++got;
|
|
} else {
|
|
if (isBoxParent || !boxParent) {
|
|
ready = true;
|
|
} else {
|
|
// lastly, we have a boxParent that will be given a width, so we
|
|
// can wait for that width to be set in order to properly measure
|
|
// whatever is inside...
|
|
ready = boxParent.hasDomProp('width');
|
|
}
|
|
|
|
if (ready) {
|
|
if (!isNaN(ret.width = me.measureOwnerWidth(ownerContext))) {
|
|
ownerContext.setWidth(ret.width, false);
|
|
ret.gotWidth = true;
|
|
++got;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//---------------------------------------------------------------------
|
|
// Height
|
|
|
|
if (heightModel.shrinkWrap && ownerContext.consumersContentHeight) {
|
|
++needed;
|
|
zeroHeight = !(hv & 2);
|
|
|
|
if (isContainer) {
|
|
// don't ask unless we need to know...
|
|
if (zeroHeight) {
|
|
ret.contentHeight = 0;
|
|
ret.gotHeight = true;
|
|
++got;
|
|
} else if ((ret.contentHeight = ownerContext.getProp('contentHeight')) !== undefined) {
|
|
ret.gotHeight = true;
|
|
++got;
|
|
}
|
|
} else {
|
|
size = props.contentHeight;
|
|
|
|
if (typeof size == 'number') { // if (already determined)
|
|
ret.contentHeight = size;
|
|
ret.gotHeight = true;
|
|
++got;
|
|
} else {
|
|
if (zeroHeight) {
|
|
ready = true;
|
|
} else if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
|
ready = false;
|
|
} else if (owner.noWrap) {
|
|
ready = true;
|
|
} else if (!widthModel.shrinkWrap) {
|
|
// fixed width, so we need the width to determine the height...
|
|
ready = (ownerContext.bodyContext || ownerContext).hasDomProp('width');// && (!ownerContext.bodyContext || ownerContext.bodyContext.hasDomProp('width'));
|
|
} else if (isBoxParent || !boxParent || boxParent.widthModel.shrinkWrap) {
|
|
// if we have no boxParent, we are ready, but an autoWidth boxParent
|
|
// artificially provides width early in the measurement process so
|
|
// we are ready to go in that case as well...
|
|
ready = true;
|
|
} else {
|
|
// lastly, we have a boxParent that will be given a width, so we
|
|
// can wait for that width to be set in order to properly measure
|
|
// whatever is inside...
|
|
ready = boxParent.hasDomProp('width');
|
|
}
|
|
|
|
if (ready) {
|
|
if (zeroHeight) {
|
|
temp = 0;
|
|
} else if (containerLayout && containerLayout.measureContentHeight) {
|
|
// Allow the container layout to do the measurement since it
|
|
// may have a better idea of how to do it even with no items:
|
|
temp = containerLayout.measureContentHeight(ownerContext);
|
|
} else {
|
|
temp = me.measureContentHeight(ownerContext);
|
|
}
|
|
|
|
if (!isNaN(ret.contentHeight = temp)) {
|
|
ownerContext.setContentHeight(temp, true);
|
|
ret.gotHeight = true;
|
|
++got;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (heightModel.natural && ownerContext.consumersHeight) {
|
|
++needed;
|
|
size = props.height;
|
|
// zeroHeight does not apply
|
|
|
|
if (typeof size == 'number') { // if (already determined)
|
|
ret.height = size;
|
|
ret.gotHeight = true;
|
|
++got;
|
|
} else {
|
|
if (isBoxParent || !boxParent) {
|
|
ready = true;
|
|
} else {
|
|
// lastly, we have a boxParent that will be given a width, so we
|
|
// can wait for that width to be set in order to properly measure
|
|
// whatever is inside...
|
|
ready = boxParent.hasDomProp('width');
|
|
}
|
|
|
|
if (ready) {
|
|
if (!isNaN(ret.height = me.measureOwnerHeight(ownerContext))) {
|
|
ownerContext.setHeight(ret.height, false);
|
|
ret.gotHeight = true;
|
|
++got;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (boxParent) {
|
|
ownerContext.onBoxMeasured();
|
|
}
|
|
|
|
ret.gotAll = got == needed;
|
|
// see if we can avoid calling this method by storing something on ownerContext.
|
|
return ret;
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
// contentWidth includes padding, but not border, framing or margins
|
|
return ownerContext.el.getWidth() - ownerContext.getFrameInfo().width;
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
// contentHeight includes padding, but not border, framing or margins
|
|
return ownerContext.el.getHeight() - ownerContext.getFrameInfo().height;
|
|
},
|
|
|
|
measureOwnerHeight: function (ownerContext) {
|
|
return ownerContext.el.getHeight();
|
|
},
|
|
|
|
measureOwnerWidth: function (ownerContext) {
|
|
return ownerContext.el.getWidth();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The class is the default component layout for {@link Ext.Component} when no explicit
|
|
* `{@link Ext.Component#componentLayout componentLayout}` is configured.
|
|
*
|
|
* This class uses template methods to perform the individual aspects of measurement,
|
|
* calculation and publication of results. The methods called depend on the component's
|
|
* {@link Ext.AbstractComponent#getSizeModel size model}.
|
|
*
|
|
* ## configured / calculated
|
|
*
|
|
* In either of these size models, the dimension of the outer element is of a known size.
|
|
* The size is found in the `ownerContext` (the {@link Ext.layout.ContextItem} for the owner
|
|
* component) as either "width" or "height". This value, if available, is passed to the
|
|
* `publishInnerWidth` or `publishInnerHeight` method, respectively.
|
|
*
|
|
* ## shrinkWrap
|
|
*
|
|
* When a dimension uses the `shrinkWrap` size model, that means the content is measured,
|
|
* then the outer (owner) size is calculated and published.
|
|
*
|
|
* For example, for a shrinkWrap width, the following sequence of calls are made:
|
|
*
|
|
* - `Ext.layout.component.Component#measureContentWidth`
|
|
* - `publishOwnerWidth`
|
|
* - `calculateOwnerWidthFromContentWidth`
|
|
* - `publishInnerWidth` (in the event of hitting a min/maxWidth constraint)
|
|
*
|
|
* ## natural
|
|
*
|
|
* When a dimension uses the `natural` size model, the measurement is made on the outer
|
|
* (owner) element. This size is then used to determine the content area in much the same
|
|
* way as if the outer element had a `configured` or `calculated` size model.
|
|
*
|
|
* - `Ext.layout.component.Component#measureOwnerWidth`
|
|
* - `publishInnerWidth`
|
|
*
|
|
* @protected
|
|
*/
|
|
Ext.define('Ext.layout.component.Auto', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.autocomponent',
|
|
|
|
extend: Ext.layout.component.Component ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'autocomponent',
|
|
|
|
/**
|
|
* @cfg {Boolean} [setHeightInDom=false]
|
|
* @protected
|
|
* When publishing height of an auto Component, it is usually not written to the DOM.
|
|
* Setting this to `true` overrides this behaviour.
|
|
*/
|
|
setHeightInDom: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [setWidthInDom=false]
|
|
* @protected
|
|
* When publishing width of an auto Component, it is usually not written to the DOM.
|
|
* Setting this to `true` overrides this behaviour.
|
|
*/
|
|
setWidthInDom: false,
|
|
|
|
waitForOuterHeightInDom: false,
|
|
waitForOuterWidthInDom: false,
|
|
|
|
beginLayoutCycle: function(ownerContext, firstCycle){
|
|
var me = this,
|
|
lastWidthModel = me.lastWidthModel,
|
|
lastHeightModel = me.lastHeightModel,
|
|
el = me.owner.el;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
|
|
el.setWidth(null);
|
|
}
|
|
|
|
if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
|
|
el.setHeight(null);
|
|
}
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
measurement = me.measureAutoDimensions(ownerContext),
|
|
heightModel = ownerContext.heightModel,
|
|
widthModel = ownerContext.widthModel,
|
|
width, height;
|
|
|
|
// It is generally important to process widths before heights, since widths can
|
|
// often effect heights...
|
|
if (measurement.gotWidth) {
|
|
if (widthModel.shrinkWrap) {
|
|
me.publishOwnerWidth(ownerContext, measurement.contentWidth);
|
|
} else if (me.publishInnerWidth) {
|
|
me.publishInnerWidth(ownerContext, measurement.width);
|
|
}
|
|
} else if (!widthModel.auto && me.publishInnerWidth) {
|
|
width = me.waitForOuterWidthInDom ? ownerContext.getDomProp('width')
|
|
: ownerContext.getProp('width');
|
|
if (width === undefined) {
|
|
me.done = false;
|
|
} else {
|
|
me.publishInnerWidth(ownerContext, width);
|
|
}
|
|
}
|
|
|
|
if (measurement.gotHeight) {
|
|
if (heightModel.shrinkWrap) {
|
|
me.publishOwnerHeight(ownerContext, measurement.contentHeight);
|
|
} else if (me.publishInnerHeight) {
|
|
me.publishInnerHeight(ownerContext, measurement.height);
|
|
}
|
|
} else if (!heightModel.auto && me.publishInnerHeight) {
|
|
height = me.waitForOuterHeightInDom ? ownerContext.getDomProp('height')
|
|
: ownerContext.getProp('height');
|
|
if (height === undefined) {
|
|
me.done = false;
|
|
} else {
|
|
me.publishInnerHeight(ownerContext, height);
|
|
}
|
|
}
|
|
|
|
if (!measurement.gotAll) {
|
|
me.done = false;
|
|
}
|
|
},
|
|
|
|
calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
|
|
return contentHeight + ownerContext.getFrameInfo().height;
|
|
},
|
|
|
|
calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
|
|
return contentWidth + ownerContext.getFrameInfo().width;
|
|
},
|
|
|
|
publishOwnerHeight: function (ownerContext, contentHeight) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
height = me.calculateOwnerHeightFromContentHeight(ownerContext, contentHeight),
|
|
constrainedHeight, dirty, heightModel;
|
|
|
|
if (isNaN(height)) {
|
|
me.done = false;
|
|
} else {
|
|
constrainedHeight = Ext.Number.constrain(height, owner.minHeight, owner.maxHeight);
|
|
|
|
if (constrainedHeight == height) {
|
|
dirty = me.setHeightInDom;
|
|
} else {
|
|
heightModel = me.sizeModels[
|
|
(constrainedHeight < height) ? 'constrainedMax' : 'constrainedMin'];
|
|
height = constrainedHeight;
|
|
|
|
if (ownerContext.heightModel.calculatedFromShrinkWrap) {
|
|
// Don't bother to invalidate since that will come soon... but we need
|
|
// to signal our ownerLayout that we need an invalidate to actually
|
|
// make good on the determined (constrained) size!
|
|
ownerContext.heightModel = heightModel;
|
|
} else {
|
|
ownerContext.invalidate({ heightModel: heightModel });
|
|
}
|
|
}
|
|
|
|
ownerContext.setHeight(height, dirty);
|
|
}
|
|
},
|
|
|
|
publishOwnerWidth: function (ownerContext, contentWidth) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
width = me.calculateOwnerWidthFromContentWidth(ownerContext, contentWidth),
|
|
constrainedWidth, dirty, widthModel;
|
|
|
|
if (isNaN(width)) {
|
|
me.done = false;
|
|
} else {
|
|
constrainedWidth = Ext.Number.constrain(width, owner.minWidth, owner.maxWidth);
|
|
|
|
if (constrainedWidth == width) {
|
|
dirty = me.setWidthInDom;
|
|
} else {
|
|
widthModel = me.sizeModels[
|
|
(constrainedWidth < width) ? 'constrainedMax' : 'constrainedMin'];
|
|
width = constrainedWidth;
|
|
|
|
if (ownerContext.widthModel.calculatedFromShrinkWrap) {
|
|
// Don't bother to invalidate since that will come soon... but we need
|
|
// to signal our ownerLayout that we need an invalidate to actually
|
|
// make good on the determined (constrained) size!
|
|
ownerContext.widthModel = widthModel;
|
|
} else {
|
|
ownerContext.invalidate({ widthModel: widthModel });
|
|
}
|
|
}
|
|
|
|
ownerContext.setWidth(width, dirty);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An abstract base class which provides shared methods for Containers across the Sencha product line.
|
|
*
|
|
* Please refer to sub class's documentation
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.container.AbstractContainer', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.Component ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
queryable: Ext.Queryable
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
renderTpl: '{%this.renderContainer(out,values)%}',
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* **Important**: In order for child items to be correctly sized and
|
|
* positioned, typically a layout manager **must** be specified through
|
|
* the `layout` configuration option.
|
|
*
|
|
* The sizing and positioning of child {@link #cfg-items} is the responsibility of
|
|
* the Container's layout manager which creates and manages the type of layout
|
|
* you have in mind. For example:
|
|
*
|
|
* If the layout configuration is not explicitly specified for
|
|
* a general purpose container (e.g. Container or Panel) the
|
|
* {@link Ext.layout.container.Auto default layout manager} will be used
|
|
* which does nothing but render child components sequentially into the
|
|
* Container (no sizing or positioning will be performed in this situation).
|
|
*
|
|
* **layout** may be specified as either as an Object or as a String:
|
|
*
|
|
* ## Specify as an Object
|
|
*
|
|
* Example usage:
|
|
*
|
|
* layout: {
|
|
* type: 'vbox',
|
|
* align: 'left'
|
|
* }
|
|
*
|
|
* - **type**
|
|
*
|
|
* The layout type to be used for this container. If not specified,
|
|
* a default {@link Ext.layout.container.Auto} will be created and used.
|
|
*
|
|
* Valid layout <code>type</code> values are listed in {@link Ext.enums.Layout}.
|
|
*
|
|
* - Layout specific configuration properties
|
|
*
|
|
* Additional layout specific configuration properties may also be
|
|
* specified. For complete details regarding the valid config options for
|
|
* each layout type, see the layout class corresponding to the `type`
|
|
* specified.
|
|
*
|
|
* ## Specify as a String
|
|
*
|
|
* Example usage:
|
|
*
|
|
* layout: 'vbox'
|
|
*
|
|
* - **layout**
|
|
*
|
|
* The layout `type` to be used for this container (see {@link Ext.enums.Layout}
|
|
* for list of valid values).
|
|
*
|
|
* Additional layout specific configuration properties. For complete
|
|
* details regarding the valid config options for each layout type, see the
|
|
* layout class corresponding to the `layout` specified.
|
|
*
|
|
* ## Configuring the default layout type
|
|
*
|
|
* If a certain Container class has a default layout (For example a {@link Ext.toolbar.Toolbar Toolbar}
|
|
* with a default `Box` layout), then to simply configure the default layout,
|
|
* use an object, but without the `type` property:
|
|
*
|
|
*
|
|
* xtype: 'toolbar',
|
|
* layout: {
|
|
* pack: 'center'
|
|
* }
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Number} activeItem
|
|
* A string component id or the numeric index of the component that should be
|
|
* initially activated within the container's layout on render. For example,
|
|
* activeItem: 'item-1' or activeItem: 0 (index 0 = the first item in the
|
|
* container's collection). activeItem only applies to layout styles that can
|
|
* display items one at a time (like {@link Ext.layout.container.Card} and
|
|
* {@link Ext.layout.container.Fit}).
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} items
|
|
* A single item, or an array of child Components to be added to this container
|
|
*
|
|
* **Unless configured with a {@link #layout}, a Container simply renders child
|
|
* Components serially into its encapsulating element and performs no sizing or
|
|
* positioning upon them.**
|
|
*
|
|
* Example:
|
|
*
|
|
* // specifying a single item
|
|
* items: {...},
|
|
* layout: 'fit', // The single items is sized to fit
|
|
*
|
|
* // specifying multiple items
|
|
* items: [{...}, {...}],
|
|
* layout: 'hbox', // The items are arranged horizontally
|
|
*
|
|
* Each item may be:
|
|
*
|
|
* - A {@link Ext.Component Component}
|
|
* - A Component configuration object
|
|
*
|
|
* If a configuration object is specified, the actual type of Component to be
|
|
* instantiated my be indicated by using the {@link Ext.Component#xtype xtype} option.
|
|
*
|
|
* Every Component class has its own {@link Ext.Component#xtype xtype}.
|
|
*
|
|
* If an {@link Ext.Component#xtype xtype} is not explicitly specified, the
|
|
* {@link #defaultType} for the Container is used, which by default is usually `panel`.
|
|
*
|
|
* # Notes:
|
|
*
|
|
* Ext uses lazy rendering. Child Components will only be rendered
|
|
* should it become necessary. Items are automatically laid out when they are first
|
|
* shown (no sizing is done while hidden), or in response to a {@link #doLayout} call.
|
|
*
|
|
* Do not specify {@link Ext.panel.Panel#contentEl contentEl} or
|
|
* {@link Ext.panel.Panel#html html} with `items`.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/Function} defaults
|
|
* This option is a means of applying default settings to all added items whether added
|
|
* through the {@link #cfg-items} config or via the {@link #method-add} or {@link #insert} methods.
|
|
*
|
|
* Defaults are applied to both config objects and instantiated components conditionally
|
|
* so as not to override existing properties in the item (see {@link Ext#applyIf}).
|
|
*
|
|
* If the defaults option is specified as a function, then the function will be called
|
|
* using this Container as the scope (`this` reference) and passing the added item as
|
|
* the first parameter. Any resulting object from that call is then applied to the item
|
|
* as default properties.
|
|
*
|
|
* For example, to automatically apply padding to the body of each of a set of
|
|
* contained {@link Ext.panel.Panel} items, you could pass:
|
|
* `defaults: {bodyStyle:'padding:15px'}`.
|
|
*
|
|
* Usage:
|
|
*
|
|
* defaults: { // defaults are applied to items, not the container
|
|
* autoScroll: true
|
|
* },
|
|
* items: [
|
|
* // default will not be applied here, panel1 will be autoScroll: false
|
|
* {
|
|
* xtype: 'panel',
|
|
* id: 'panel1',
|
|
* autoScroll: false
|
|
* },
|
|
* // this component will have autoScroll: true
|
|
* new Ext.panel.Panel({
|
|
* id: 'panel2'
|
|
* })
|
|
* ]
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} suspendLayout
|
|
* If true, suspend calls to doLayout. Useful when batching multiple adds to a container
|
|
* and not passing them as multiple arguments or an array.
|
|
*/
|
|
suspendLayout : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [autoDestroy=true]
|
|
* If true the container will automatically destroy any contained component that is removed
|
|
* from it, else destruction must be handled manually.
|
|
* @since 2.3.0
|
|
*/
|
|
autoDestroy : true,
|
|
|
|
/**
|
|
* @cfg {String} [defaultType="panel"]
|
|
* The default {@link Ext.Component xtype} of child Components to create in this Container when
|
|
* a child item is specified as a raw configuration object, rather than as an instantiated Component.
|
|
* @since 2.3.0
|
|
*/
|
|
defaultType: 'panel',
|
|
|
|
/**
|
|
* @cfg {Boolean} [detachOnRemove=true]
|
|
* True to move any component to the {@link Ext#getDetachedBody detachedBody} when the component is
|
|
* removed from this container. This option is only applicable when the component is not destroyed while
|
|
* being removed, see {@link #autoDestroy} and {@link #method-remove}. If this option is set to false, the DOM
|
|
* of the component will remain in the current place until it is explicitly moved.
|
|
*/
|
|
detachOnRemove: true,
|
|
|
|
/*
|
|
* @property {Boolean} isContainer
|
|
* `true` in this class to identify an object as an instantiated Container, or subclass thereof.
|
|
*/
|
|
isContainer : true,
|
|
|
|
/**
|
|
* @property {Number} layoutCounter
|
|
* The number of container layout calls made on this object.
|
|
* @private
|
|
*/
|
|
layoutCounter : 0,
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'container',
|
|
|
|
/**
|
|
* @cfg {String[]} bubbleEvents
|
|
* An array of events that, when fired, should be bubbled to any parent container.
|
|
* See {@link Ext.util.Observable#enableBubble}.
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
defaultLayoutType: 'auto',
|
|
|
|
// @private
|
|
initComponent : function(){
|
|
var me = this;
|
|
me.addEvents(
|
|
/**
|
|
* @event afterlayout
|
|
* Fires when the components in this container are arranged by the associated layout manager.
|
|
* @param {Ext.container.Container} this
|
|
* @param {Ext.layout.container.Container} layout The ContainerLayout implementation for this container
|
|
* @since 2.3.0
|
|
*/
|
|
'afterlayout',
|
|
/**
|
|
* @event beforeadd
|
|
* Fires before any {@link Ext.Component} is added or inserted into the container.
|
|
* A handler can return false to cancel the add.
|
|
* @param {Ext.container.Container} this
|
|
* @param {Ext.Component} component The component being added
|
|
* @param {Number} index The index at which the component will be added to the container's items collection
|
|
* @since 2.3.0
|
|
*/
|
|
'beforeadd',
|
|
/**
|
|
* @event beforeremove
|
|
* Fires before any {@link Ext.Component} is removed from the container. A handler can return
|
|
* false to cancel the remove.
|
|
* @param {Ext.container.Container} this
|
|
* @param {Ext.Component} component The component being removed
|
|
* @since 2.3.0
|
|
*/
|
|
'beforeremove',
|
|
/**
|
|
* @event add
|
|
* Fires after any {@link Ext.Component} is added or inserted into the container.
|
|
*
|
|
* **This event bubbles:** 'add' will also be fired when Component is added to any of
|
|
* the child containers or their childern or ...
|
|
* @param {Ext.container.Container} this
|
|
* @param {Ext.Component} component The component that was added
|
|
* @param {Number} index The index at which the component was added to the container's items collection
|
|
* @since 2.3.0
|
|
*/
|
|
'add',
|
|
/**
|
|
* @event remove
|
|
* Fires after any {@link Ext.Component} is removed from the container.
|
|
*
|
|
* **This event bubbles:** 'remove' will also be fired when Component is removed from any of
|
|
* the child containers or their children or ...
|
|
* @param {Ext.container.Container} this
|
|
* @param {Ext.Component} component The component that was removed
|
|
* @since 2.3.0
|
|
*/
|
|
'remove'
|
|
);
|
|
|
|
me.callParent();
|
|
|
|
me.getLayout();
|
|
me.initItems();
|
|
},
|
|
|
|
// @private
|
|
initItems : function() {
|
|
var me = this,
|
|
items = me.items;
|
|
|
|
/**
|
|
* The MixedCollection containing all the child items of this container.
|
|
* @property items
|
|
* @type Ext.util.AbstractMixedCollection
|
|
* @since 2.3.0
|
|
*/
|
|
me.items = new Ext.util.AbstractMixedCollection(false, me.getComponentId);
|
|
me.floatingItems = new Ext.util.MixedCollection(false, me.getComponentId);
|
|
|
|
if (items) {
|
|
if (!Ext.isArray(items)) {
|
|
items = [items];
|
|
}
|
|
|
|
me.add(items);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the focus holder element associated with this Container. By default, this is the Container's target
|
|
* element. Subclasses which use embedded focusable elements (such as Window and Button) should override this for use
|
|
* by the {@link #method-focus} method.
|
|
* @returns {Ext.Element} the focus holding element.
|
|
*/
|
|
getFocusEl: function() {
|
|
return this.getTargetEl();
|
|
},
|
|
|
|
finishRenderChildren: function () {
|
|
this.callParent();
|
|
|
|
var layout = this.getLayout();
|
|
|
|
if (layout) {
|
|
layout.finishRender();
|
|
}
|
|
},
|
|
|
|
beforeRender: function () {
|
|
var me = this,
|
|
layout = me.getLayout(),
|
|
targetCls;
|
|
|
|
me.callParent();
|
|
|
|
if (!layout.initialized) {
|
|
layout.initLayout();
|
|
}
|
|
|
|
targetCls = layout.targetCls;
|
|
|
|
if (targetCls) {
|
|
me.applyTargetCls(targetCls);
|
|
}
|
|
},
|
|
|
|
// The targetCls is a CSS class that the layout needs added to the targetEl. The targetEl is where the container's
|
|
// children are rendered and is usually just the main el. Some containers (e.g. panels) use a body instead.
|
|
//
|
|
// In general, if a class overrides getTargetEl it will also need to override this method. This is necessary to
|
|
// avoid a post-render step to add the targetCls.
|
|
applyTargetCls: function(targetCls) {
|
|
this.addCls(targetCls);
|
|
},
|
|
|
|
afterComponentLayout: function() {
|
|
var floaters = this.floatingItems.items,
|
|
floaterCount = floaters.length,
|
|
i, floater
|
|
|
|
this.callParent(arguments);
|
|
|
|
// Contained, unrendered, autoShow items must be shown upon next layout of the Container
|
|
for (i = 0; i < floaterCount; i++) {
|
|
floater = floaters[i];
|
|
if (!floater.rendered && floater.autoShow) {
|
|
floater.show();
|
|
}
|
|
}
|
|
},
|
|
|
|
onPosition: function() {
|
|
this.callParent(arguments);
|
|
this.repositionFloatingItems();
|
|
},
|
|
|
|
onResize: function() {
|
|
this.callParent(arguments);
|
|
this.repositionFloatingItems();
|
|
},
|
|
|
|
repositionFloatingItems: function() {
|
|
var floaters = this.floatingItems.items,
|
|
floaterCount = floaters.length,
|
|
i, floater;
|
|
|
|
// Ensure correct positioning of floated children before calling superclass
|
|
for (i = 0; i < floaterCount; i++) {
|
|
floater = floaters[i];
|
|
if (floater.el && !floater.hidden) {
|
|
floater.setPosition(floater.x, floater.y);
|
|
}
|
|
}
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
this.callParent(arguments);
|
|
this.getLayout().setupRenderTpl(renderTpl);
|
|
},
|
|
|
|
// @private
|
|
getDefaultContentTarget: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// @private
|
|
getContentTarget: function(){
|
|
return this.getLayout().getContentTarget();
|
|
},
|
|
|
|
// @private
|
|
setLayout : function(layout) {
|
|
var currentLayout = this.layout;
|
|
|
|
if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
|
|
currentLayout.setOwner(null);
|
|
}
|
|
|
|
this.layout = layout;
|
|
layout.setOwner(this);
|
|
},
|
|
|
|
/**
|
|
* Returns the {@link Ext.layout.container.Container layout} instance currently associated with this Container.
|
|
* If a layout has not been instantiated yet, that is done first
|
|
* @return {Ext.layout.container.Container} The layout
|
|
*/
|
|
getLayout : function() {
|
|
var me = this;
|
|
if (!me.layout || !me.layout.isLayout) {
|
|
// Pass any configured in layout property, defaulting to the prototype's layout property, falling back to Auto.
|
|
me.setLayout(Ext.layout.Layout.create(me.layout, me.self.prototype.layout || me.defaultLayoutType));
|
|
}
|
|
|
|
return me.layout;
|
|
},
|
|
|
|
/**
|
|
* Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts
|
|
* form most cases.
|
|
* @return {Ext.container.Container} this
|
|
* @since 2.3.0
|
|
*/
|
|
doLayout : function() {
|
|
this.updateLayout();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Invoked after the Container has laid out (and rendered if necessary)
|
|
* its child Components.
|
|
*
|
|
* @param {Ext.layout.container.Container} layout
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterLayout : function(layout) {
|
|
var me = this;
|
|
++me.layoutCounter;
|
|
if (me.hasListeners.afterlayout) {
|
|
me.fireEvent('afterlayout', me, layout);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
prepareItems : function(items, applyDefaults) {
|
|
// Create an Array which does not refer to the passed array.
|
|
// The passed array is a reference to a user's config object and MUST NOT be mutated.
|
|
if (Ext.isArray(items)) {
|
|
items = items.slice();
|
|
} else {
|
|
items = [items];
|
|
}
|
|
|
|
// Make sure defaults are applied and item is initialized
|
|
var me = this,
|
|
i = 0,
|
|
len = items.length,
|
|
item;
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
if (item == null) {
|
|
Ext.Array.erase(items, i, 1);
|
|
--i;
|
|
--len;
|
|
} else {
|
|
if (applyDefaults) {
|
|
item = this.applyDefaults(item);
|
|
}
|
|
|
|
// Tell the item we're in a container during construction
|
|
item.isContained = me;
|
|
items[i] = me.lookupComponent(item);
|
|
// need to delete both in case item was a config
|
|
delete item.isContained;
|
|
delete items[i].isContained;
|
|
}
|
|
}
|
|
|
|
return items;
|
|
},
|
|
|
|
// @private
|
|
applyDefaults : function(config) {
|
|
var defaults = this.defaults;
|
|
|
|
if (defaults) {
|
|
if (Ext.isFunction(defaults)) {
|
|
defaults = defaults.call(this, config);
|
|
}
|
|
|
|
if (Ext.isString(config)) {
|
|
config = Ext.ComponentManager.get(config);
|
|
}
|
|
Ext.applyIf(config, defaults);
|
|
}
|
|
return config;
|
|
},
|
|
|
|
// @private
|
|
lookupComponent : function(comp) {
|
|
return (typeof comp == 'string') ? Ext.ComponentManager.get(comp)
|
|
: Ext.ComponentManager.create(comp, this.defaultType);
|
|
},
|
|
|
|
// @private - used as the key lookup function for the items collection
|
|
getComponentId : function(comp) {
|
|
return comp.getItemId && comp.getItemId();
|
|
},
|
|
|
|
/**
|
|
* Adds {@link Ext.Component Component}(s) to this Container.
|
|
*
|
|
* ## Description:
|
|
*
|
|
* - Fires the {@link #beforeadd} event before adding.
|
|
* - The Container's {@link #defaults default config values} will be applied
|
|
* accordingly (see `{@link #defaults}` for details).
|
|
* - Fires the `{@link #event-add}` event after the component has been added.
|
|
*
|
|
* ## Notes:
|
|
*
|
|
* If the Container is __already rendered__ when `add`
|
|
* is called, it will render the newly added Component into its content area.
|
|
*
|
|
* **If** the Container was configured with a size-managing {@link #layout} manager,
|
|
* the Container will recalculate its internal layout at this time too.
|
|
*
|
|
* Note that the default layout manager simply renders child Components sequentially
|
|
* into the content area and thereafter performs no sizing.
|
|
*
|
|
* If adding multiple new child Components, pass them as an array to the `add` method,
|
|
* so that only one layout recalculation is performed.
|
|
*
|
|
* tb = new {@link Ext.toolbar.Toolbar}({
|
|
* renderTo: document.body
|
|
* }); // toolbar is rendered
|
|
* // add multiple items.
|
|
* // ({@link #defaultType} for {@link Ext.toolbar.Toolbar Toolbar} is 'button')
|
|
* tb.add([{text:'Button 1'}, {text:'Button 2'}]);
|
|
*
|
|
* To inject components between existing ones, use the {@link #insert} method.
|
|
*
|
|
* ## Warning:
|
|
*
|
|
* Components directly managed by the BorderLayout layout manager may not be removed
|
|
* or added. See the Notes for {@link Ext.layout.container.Border BorderLayout} for
|
|
* more details.
|
|
*
|
|
* @param {Ext.Component[]|Object[]/Ext.Component.../Object...} component
|
|
* Either one or more Components to add or an Array of Components to add.
|
|
* See `{@link #cfg-items}` for additional information.
|
|
*
|
|
* @return {Ext.Component[]/Ext.Component} The Components that were added.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
add : function() {
|
|
var me = this,
|
|
args = Ext.Array.slice(arguments),
|
|
index = (typeof args[0] == 'number') ? args.shift() : -1,
|
|
layout = me.getLayout(),
|
|
addingArray, items, i, length, item, pos, ret;
|
|
|
|
if (args.length == 1 && Ext.isArray(args[0])) {
|
|
items = args[0];
|
|
addingArray = true;
|
|
} else {
|
|
items = args;
|
|
}
|
|
|
|
if (me.rendered) {
|
|
Ext.suspendLayouts(); // suspend layouts while adding items...
|
|
}
|
|
|
|
ret = items = me.prepareItems(items, true);
|
|
length = items.length;
|
|
|
|
if (!addingArray && length == 1) { // an array of 1 should still return an array...
|
|
ret = items[0];
|
|
}
|
|
|
|
// loop
|
|
for (i = 0; i < length; i++) {
|
|
item = items[i];
|
|
|
|
pos = (index < 0) ? me.items.length : (index + i);
|
|
|
|
// Floating Components are not added into the items collection, but to a separate floatingItems collection
|
|
if (item.floating) {
|
|
me.floatingItems.add(item);
|
|
item.onAdded(me, pos);
|
|
|
|
if (me.hasListeners.add) {
|
|
me.fireEvent('add', me, item, pos);
|
|
}
|
|
} else if ((!me.hasListeners.beforeadd || me.fireEvent('beforeadd', me, item, pos) !== false) && me.onBeforeAdd(item) !== false) {
|
|
me.items.insert(pos, item);
|
|
item.onAdded(me, pos);
|
|
me.onAdd(item, pos);
|
|
layout.onAdd(item, pos);
|
|
|
|
if (me.hasListeners.add) {
|
|
me.fireEvent('add', me, item, pos);
|
|
}
|
|
}
|
|
}
|
|
|
|
// We need to update our layout after adding all passed items
|
|
me.updateLayout();
|
|
if (me.rendered) {
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* This method is invoked after a new Component has been added. It
|
|
* is passed the Component which has been added. This method may
|
|
* be used to update any internal structure which may depend upon
|
|
* the state of the child items.
|
|
*
|
|
* @param {Ext.Component} component
|
|
* @param {Number} position
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onAdd : Ext.emptyFn,
|
|
|
|
/**
|
|
* This method is invoked after a new Component has been
|
|
* removed. It is passed the Component which has been
|
|
* removed. This method may be used to update any internal
|
|
* structure which may depend upon the state of the child items.
|
|
*
|
|
* @param {Ext.Component} component
|
|
* @param {Boolean} autoDestroy
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onRemove : Ext.emptyFn,
|
|
|
|
/**
|
|
* Inserts a Component into this Container at a specified index. Fires the
|
|
* {@link #beforeadd} event before inserting, then fires the {@link #event-add}
|
|
* event after the Component has been inserted.
|
|
*
|
|
* @param {Number} index The index at which the Component will be inserted
|
|
* into the Container's items collection
|
|
*
|
|
* @param {Ext.Component/Object} component The child Component to insert.
|
|
*
|
|
* Ext uses lazy rendering, and will only render the inserted Component should
|
|
* it become necessary.
|
|
*
|
|
* A Component config object may be passed in order to avoid the overhead of
|
|
* constructing a real Component object if lazy rendering might mean that the
|
|
* inserted Component will not be rendered immediately. To take advantage of
|
|
* this 'lazy instantiation', set the {@link Ext.Component#xtype} config
|
|
* property to the registered type of the Component wanted.
|
|
*
|
|
* For a list of all available xtypes, see {@link Ext.enums.Widget}.
|
|
*
|
|
* @return {Ext.Component} component The Component (or config object) that was
|
|
* inserted with the Container's default config values applied.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
insert : function(index, comp) {
|
|
var compIdx;
|
|
if (comp && comp.isComponent) {
|
|
compIdx = this.items.indexOf(comp);
|
|
if (compIdx !== -1) {
|
|
return this.move(compIdx, index);
|
|
}
|
|
}
|
|
return this.add(index, comp);
|
|
},
|
|
|
|
/**
|
|
* Moves a Component within the Container
|
|
* @param {Number/Ext.Component} fromIdx The index/component to move.
|
|
* @param {Number} toIdx The new index for the Component.
|
|
* @return {Ext.Component} component The Component that was moved.
|
|
*/
|
|
move : function(fromIdx, toIdx) {
|
|
var items = this.items,
|
|
item;
|
|
|
|
if (fromIdx.isComponent) {
|
|
fromIdx = items.indexOf(fromIdx);
|
|
}
|
|
item = items.removeAt(fromIdx);
|
|
if (item === false) {
|
|
return false;
|
|
}
|
|
items.insert(toIdx, item);
|
|
this.onMove(item, fromIdx, toIdx);
|
|
this.updateLayout();
|
|
return item;
|
|
},
|
|
|
|
onMove: Ext.emptyFn,
|
|
|
|
/**
|
|
* This method is invoked before adding a new child Component. It
|
|
* is passed the new Component, and may be used to modify the
|
|
* Component, or prepare the Container in some way. Returning
|
|
* false aborts the add operation.
|
|
*
|
|
* @param {Ext.Component} item
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onBeforeAdd : function(item) {
|
|
// Remove from current container if it's not us.
|
|
if (item.ownerCt && item.ownerCt !== this) {
|
|
item.ownerCt.remove(item, false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes a component from this container. Fires the {@link #beforeremove} event
|
|
* before removing, then fires the {@link #event-remove} event after the component has
|
|
* been removed.
|
|
*
|
|
* @param {Ext.Component/String} component The component reference or id to remove.
|
|
*
|
|
* @param {Boolean} [autoDestroy] True to automatically invoke the removed Component's
|
|
* {@link Ext.Component#method-destroy} function.
|
|
*
|
|
* Defaults to the value of this Container's {@link #autoDestroy} config.
|
|
*
|
|
* @return {Ext.Component} component The Component that was removed.
|
|
* @since 2.3.0
|
|
*/
|
|
remove : function(comp, autoDestroy) {
|
|
var me = this,
|
|
c = me.getComponent(comp);
|
|
|
|
if (c && (!me.hasListeners.beforeremove || me.fireEvent('beforeremove', me, c) !== false)) {
|
|
me.doRemove(c, autoDestroy);
|
|
if (me.hasListeners.remove) {
|
|
me.fireEvent('remove', me, c);
|
|
}
|
|
|
|
if (!me.destroying && !c.floating) {
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
|
|
return c;
|
|
},
|
|
|
|
// @private
|
|
doRemove : function(component, doDestroy) {
|
|
// Ensure the flag is set correctly
|
|
doDestroy = doDestroy === true || (doDestroy !== false && this.autoDestroy);
|
|
|
|
var me = this,
|
|
layout = me.layout,
|
|
hasLayout = layout && me.rendered,
|
|
|
|
// isDestroying flag is true if the removal is taking place as part of destruction, OR if removal is intended to *cause* destruction
|
|
isDestroying = component.destroying || doDestroy,
|
|
floating = component.floating;
|
|
|
|
if (floating) {
|
|
me.floatingItems.remove(component);
|
|
} else {
|
|
me.items.remove(component);
|
|
}
|
|
|
|
// Inform ownerLayout of removal before deleting the ownerLayout & ownerCt references in the onRemoved call
|
|
if (hasLayout && !floating) {
|
|
// Removing a component from a running layout has to cancel the layout
|
|
if (layout.running) {
|
|
Ext.AbstractComponent.cancelLayout(component, isDestroying);
|
|
}
|
|
layout.onRemove(component, isDestroying);
|
|
}
|
|
|
|
component.onRemoved(isDestroying);
|
|
|
|
me.onRemove(component, isDestroying);
|
|
|
|
// Destroy if we were explicitly told to, or we're defaulting to our autoDestroy configuration
|
|
if (doDestroy) {
|
|
component.destroy();
|
|
}
|
|
// Only have the layout perform remove postprocessing if the Component is not being destroyed
|
|
else {
|
|
if (hasLayout && !floating) {
|
|
layout.afterRemove(component);
|
|
}
|
|
if (me.detachOnRemove && component.rendered) {
|
|
me.detachComponent(component);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Detach a component from the DOM
|
|
detachComponent: function(component){
|
|
Ext.getDetachedBody().appendChild(component.getEl());
|
|
},
|
|
|
|
/**
|
|
* Removes all components from this container.
|
|
* @param {Boolean} [autoDestroy] True to automatically invoke the removed
|
|
* Component's {@link Ext.Component#method-destroy} function.
|
|
* Defaults to the value of this Container's {@link #autoDestroy} config.
|
|
* @return {Ext.Component[]} Array of the removed components
|
|
* @since 2.3.0
|
|
*/
|
|
removeAll : function(autoDestroy) {
|
|
var me = this,
|
|
removeItems = me.items.items.slice().concat(me.floatingItems.items),
|
|
items = [],
|
|
i = 0,
|
|
len = removeItems.length,
|
|
item;
|
|
|
|
// Suspend Layouts while we remove multiple items from the container
|
|
me.suspendLayouts();
|
|
for (; i < len; i++) {
|
|
item = removeItems[i];
|
|
me.remove(item, autoDestroy);
|
|
|
|
if (item.ownerCt !== me) {
|
|
items.push(item);
|
|
}
|
|
}
|
|
|
|
// Resume Layouts now that all items have been removed and do a single layout (if we removed anything!)
|
|
me.resumeLayouts(!!len);
|
|
return items;
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Used by {@link Ext.ComponentQuery ComponentQuery}, {@link #child} and {@link #down} to retrieve all of the items
|
|
* which can potentially be considered a child of this Container.
|
|
*
|
|
* This may be overriden by Components which have ownership of Components
|
|
* that are not contained in the {@link #property-items} collection.
|
|
*
|
|
* NOTE: IMPORTANT note for maintainers:
|
|
* Items are returned in tree traversal order. Each item is appended to the result array
|
|
* followed by the results of that child's getRefItems call.
|
|
* Floating child items are appended after internal child items.
|
|
*/
|
|
getRefItems : function(deep) {
|
|
var me = this,
|
|
items = me.items.items,
|
|
len = items.length,
|
|
i = 0,
|
|
item,
|
|
result = [];
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
result[result.length] = item;
|
|
if (deep && item.getRefItems) {
|
|
result.push.apply(result, item.getRefItems(true));
|
|
}
|
|
}
|
|
|
|
// Append floating items to the list.
|
|
items = me.floatingItems.items;
|
|
len = items.length;
|
|
for (i = 0; i < len; i++) {
|
|
item = items[i];
|
|
result[result.length] = item;
|
|
if (deep && item.getRefItems) {
|
|
result.push.apply(result, item.getRefItems(true));
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Cascades down the component/container heirarchy from this component (passed in
|
|
* the first call), calling the specified function with each component. The scope
|
|
* (this reference) of the function call will be the scope provided or the current
|
|
* component. The arguments to the function will be the args provided or the current
|
|
* component. If the function returns false at any point, the cascade is stopped on
|
|
* that branch.
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope of the function (defaults to current component)
|
|
* @param {Array} [args] The args to call the function with. The current component
|
|
* always passed as the last argument.
|
|
* @return {Ext.Container} this
|
|
* @since 2.3.0
|
|
*/
|
|
cascade : function(fn, scope, origArgs){
|
|
var me = this,
|
|
cs = me.items ? me.items.items : [],
|
|
len = cs.length,
|
|
i = 0,
|
|
c,
|
|
args = origArgs ? origArgs.concat(me) : [me],
|
|
componentIndex = args.length - 1;
|
|
|
|
if (fn.apply(scope || me, args) !== false) {
|
|
for (; i < len; i++){
|
|
c = cs[i];
|
|
if (c.cascade) {
|
|
c.cascade(fn, scope, origArgs);
|
|
} else {
|
|
args[componentIndex] = c;
|
|
fn.apply(scope || cs, args);
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Determines whether **this Container** is an ancestor of the passed Component.
|
|
* This will return `true` if the passed Component is anywhere within the subtree
|
|
* beneath this Container.
|
|
* @param {Ext.Component} possibleDescendant The Component to test for presence
|
|
* within this Container's subtree.
|
|
*/
|
|
isAncestor: function(possibleDescendant) {
|
|
while (possibleDescendant) {
|
|
if (possibleDescendant.ownerCt === this) {
|
|
return true;
|
|
}
|
|
possibleDescendant = possibleDescendant.ownerCt;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Examines this container's {@link #property-items} **property** and gets a direct child
|
|
* component of this container.
|
|
*
|
|
* @param {String/Number} comp This parameter may be any of the following:
|
|
*
|
|
* - a **String** : representing the {@link Ext.Component#itemId itemId}
|
|
* or {@link Ext.Component#id id} of the child component.
|
|
* - a **Number** : representing the position of the child component
|
|
* within the {@link #property-items} **property**
|
|
*
|
|
* For additional information see {@link Ext.util.MixedCollection#get}.
|
|
*
|
|
* @return {Ext.Component} The component (if found).
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
getComponent : function(comp) {
|
|
if (Ext.isObject(comp)) {
|
|
comp = comp.getItemId();
|
|
}
|
|
|
|
var c = this.items.get(comp);
|
|
|
|
// Only allow finding by index on the main items container
|
|
if (!c && typeof comp != 'number') {
|
|
c = this.floatingItems.get(comp);
|
|
}
|
|
|
|
return c;
|
|
},
|
|
|
|
/**
|
|
* Determines whether the passed Component is either an immediate child of this Container,
|
|
* or whether it is a descendant.
|
|
*
|
|
* @param {Ext.Component} comp The Component to test.
|
|
* @param {Boolean} [deep=false] Pass `true` to test for the Component being a descendant at any level.
|
|
* @return {Boolean} `true` if the passed Component is contained at the specified level.
|
|
*/
|
|
contains: function(comp, deep) {
|
|
var result = false;
|
|
if (deep) {
|
|
this.cascade(function(c) {
|
|
// Only test if the item is a container
|
|
if (c.contains && c.contains(comp)) {
|
|
result = true;
|
|
return false;
|
|
}
|
|
});
|
|
return result;
|
|
} else {
|
|
return this.items.contains(comp) || this.floatingItems.contains(comp);
|
|
}
|
|
},
|
|
|
|
nextChild: function(child, selector) {
|
|
var me = this,
|
|
result,
|
|
childIndex = me.items.indexOf(child);
|
|
|
|
if (childIndex !== -1) {
|
|
result = selector ? Ext.ComponentQuery(selector, me.items.items.slice(childIndex + 1)) : me.items.getAt(childIndex + 1);
|
|
if (!result && me.ownerCt) {
|
|
result = me.ownerCt.nextChild(me, selector);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
prevChild: function(child, selector) {
|
|
var me = this,
|
|
result,
|
|
childIndex = me.items.indexOf(child);
|
|
|
|
if (childIndex !== -1) {
|
|
result = selector ? Ext.ComponentQuery(selector, me.items.items.slice(childIndex + 1)) : me.items.getAt(childIndex + 1);
|
|
if (!result && me.ownerCt) {
|
|
result = me.ownerCt.nextChild(me, selector);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// @private
|
|
// Enable all immediate children that was previously disabled
|
|
// Override enable because onEnable only gets called when rendered
|
|
enable: function() {
|
|
this.callParent(arguments);
|
|
|
|
var itemsToDisable = this.getChildItemsToDisable(),
|
|
length = itemsToDisable.length,
|
|
item, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
item = itemsToDisable[i];
|
|
|
|
if (item.resetDisable) {
|
|
item.enable();
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
// Inherit docs
|
|
// Disable all immediate children that was previously disabled
|
|
// Override disable because onDisable only gets called when rendered
|
|
disable: function() {
|
|
this.callParent(arguments);
|
|
|
|
var itemsToDisable = this.getChildItemsToDisable(),
|
|
length = itemsToDisable.length,
|
|
item, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
item = itemsToDisable[i];
|
|
|
|
if (item.resetDisable !== false && !item.disabled) {
|
|
item.disable();
|
|
item.resetDisable = true;
|
|
}
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Gets a list of child components to enable/disable when the container is
|
|
* enabled/disabled
|
|
* @private
|
|
* @return {Ext.Component[]} Items to be enabled/disabled
|
|
*/
|
|
getChildItemsToDisable: function(){
|
|
return this.query('[isFormField],button');
|
|
},
|
|
|
|
// @private
|
|
// @since 2.3.0
|
|
beforeDestroy : function() {
|
|
var me = this,
|
|
items = me.items,
|
|
floatingItems = me.floatingItems,
|
|
c;
|
|
|
|
if (items) {
|
|
while ((c = items.first())) {
|
|
me.doRemove(c, true);
|
|
}
|
|
}
|
|
|
|
if (floatingItems) {
|
|
while ((c = floatingItems.first())) {
|
|
me.doRemove(c, true);
|
|
}
|
|
}
|
|
|
|
Ext.destroy(
|
|
me.layout
|
|
);
|
|
me.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Base class for any Ext.Component that may contain other Components. Containers handle the basic behavior of
|
|
* containing items, namely adding, inserting and removing items.
|
|
*
|
|
* The most commonly used Container classes are Ext.panel.Panel, Ext.window.Window and
|
|
* Ext.tab.Panel. If you do not need the capabilities offered by the aforementioned classes you can create a
|
|
* lightweight Container to be encapsulated by an HTML element to your specifications by using the
|
|
* {@link Ext.Component#autoEl autoEl} config option.
|
|
*
|
|
* The code below illustrates how to explicitly create a Container:
|
|
*
|
|
* @example
|
|
* // Explicitly create a Container
|
|
* Ext.create('Ext.container.Container', {
|
|
* layout: {
|
|
* type: 'hbox'
|
|
* },
|
|
* width: 400,
|
|
* renderTo: Ext.getBody(),
|
|
* border: 1,
|
|
* style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
|
|
* defaults: {
|
|
* labelWidth: 80,
|
|
* // implicitly create Container by specifying xtype
|
|
* xtype: 'datefield',
|
|
* flex: 1,
|
|
* style: {
|
|
* padding: '10px'
|
|
* }
|
|
* },
|
|
* items: [{
|
|
* xtype: 'datefield',
|
|
* name: 'startDate',
|
|
* fieldLabel: 'Start date'
|
|
* },{
|
|
* xtype: 'datefield',
|
|
* name: 'endDate',
|
|
* fieldLabel: 'End date'
|
|
* }]
|
|
* });
|
|
*
|
|
* ## Layout
|
|
*
|
|
* Container classes delegate the rendering of child Components to a layout manager class which must be configured into
|
|
* the Container using the `{@link #layout}` configuration property.
|
|
*
|
|
* When either specifying child `{@link #cfg-items}` of a Container, or dynamically {@link #method-add adding} Components to a
|
|
* Container, remember to consider how you wish the Container to arrange those child elements, and whether those child
|
|
* elements need to be sized using one of Ext's built-in `{@link #layout}` schemes. By default, Containers use the
|
|
* {@link Ext.layout.container.Auto Auto} scheme which only renders child components, appending them one after the other
|
|
* inside the Container, and **does not apply any sizing** at all.
|
|
*
|
|
* A common mistake is when a developer neglects to specify a `{@link #layout}` (e.g. widgets like GridPanels or
|
|
* TreePanels are added to Containers for which no `{@link #layout}` has been specified). If a Container is left to
|
|
* use the default {@link Ext.layout.container.Auto Auto} scheme, none of its child components will be resized, or changed in
|
|
* any way when the Container is resized.
|
|
*
|
|
* Certain layout managers allow dynamic addition of child components. Those that do include
|
|
* Ext.layout.container.Card, Ext.layout.container.Anchor, Ext.layout.container.VBox,
|
|
* Ext.layout.container.HBox, and Ext.layout.container.Table. For example:
|
|
*
|
|
* // Create the GridPanel.
|
|
* var myNewGrid = Ext.create('Ext.grid.Panel', {
|
|
* store: myStore,
|
|
* headers: myHeaders,
|
|
* title: 'Results', // the title becomes the title of the tab
|
|
* });
|
|
*
|
|
* myTabPanel.add(myNewGrid); // {@link Ext.tab.Panel} implicitly uses {@link Ext.layout.container.Card Card}
|
|
* myTabPanel.{@link Ext.tab.Panel#setActiveTab setActiveTab}(myNewGrid);
|
|
*
|
|
* The example above adds a newly created GridPanel to a TabPanel. Note that a TabPanel uses {@link
|
|
* Ext.layout.container.Card} as its layout manager which means all its child items are sized to {@link
|
|
* Ext.layout.container.Fit fit} exactly into its client area.
|
|
*
|
|
* **_Overnesting is a common problem_**. An example of overnesting occurs when a GridPanel is added to a TabPanel by
|
|
* wrapping the GridPanel _inside_ a wrapping Panel (that has no `{@link #layout}` specified) and then add that
|
|
* wrapping Panel to the TabPanel. The point to realize is that a GridPanel **is** a Component which can be added
|
|
* directly to a Container. If the wrapping Panel has no `{@link #layout}` configuration, then the overnested
|
|
* GridPanel will not be sized as expected.
|
|
*
|
|
* ## Adding via remote configuration
|
|
*
|
|
* A server side script can be used to add Components which are generated dynamically on the server. An example of
|
|
* adding a GridPanel to a TabPanel where the GridPanel is generated by the server based on certain parameters:
|
|
*
|
|
* // execute an Ajax request to invoke server side script:
|
|
* Ext.Ajax.request({
|
|
* url: 'gen-invoice-grid.php',
|
|
* // send additional parameters to instruct server script
|
|
* params: {
|
|
* startDate: Ext.getCmp('start-date').getValue(),
|
|
* endDate: Ext.getCmp('end-date').getValue()
|
|
* },
|
|
* // process the response object to add it to the TabPanel:
|
|
* success: function(xhr) {
|
|
* var newComponent = eval(xhr.responseText); // see discussion below
|
|
* myTabPanel.add(newComponent); // add the component to the TabPanel
|
|
* myTabPanel.setActiveTab(newComponent);
|
|
* },
|
|
* failure: function() {
|
|
* Ext.Msg.alert("Grid create failed", "Server communication failure");
|
|
* }
|
|
* });
|
|
*
|
|
* The server script needs to return a JSON representation of a configuration object, which, when decoded will return a
|
|
* config object with an {@link Ext.Component#xtype xtype}. The server might return the following JSON:
|
|
*
|
|
* {
|
|
* "xtype": 'grid',
|
|
* "title": 'Invoice Report',
|
|
* "store": {
|
|
* "model": 'Invoice',
|
|
* "proxy": {
|
|
* "type": 'ajax',
|
|
* "url": 'get-invoice-data.php',
|
|
* "reader": {
|
|
* "type": 'json'
|
|
* "record": 'transaction',
|
|
* "idProperty": 'id',
|
|
* "totalRecords": 'total'
|
|
* })
|
|
* },
|
|
* "autoLoad": {
|
|
* "params": {
|
|
* "startDate": '01/01/2008',
|
|
* "endDate": '01/31/2008'
|
|
* }
|
|
* }
|
|
* },
|
|
* "headers": [
|
|
* {"header": "Customer", "width": 250, "dataIndex": 'customer', "sortable": true},
|
|
* {"header": "Invoice Number", "width": 120, "dataIndex": 'invNo', "sortable": true},
|
|
* {"header": "Invoice Date", "width": 100, "dataIndex": 'date', "renderer": Ext.util.Format.dateRenderer('M d, y'), "sortable": true},
|
|
* {"header": "Value", "width": 120, "dataIndex": 'value', "renderer": 'usMoney', "sortable": true}
|
|
* ]
|
|
* }
|
|
*
|
|
* When the above code fragment is passed through the `eval` function in the success handler of the Ajax request, the
|
|
* result will be a config object which, when added to a Container, will cause instantiation of a GridPanel. **Be sure
|
|
* that the Container is configured with a layout which sizes and positions the child items to your requirements.**
|
|
*
|
|
* **Note:** since the code above is _generated_ by a server script, the `autoLoad` params 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.
|
|
*/
|
|
Ext.define('Ext.container.Container', {
|
|
extend: Ext.container.AbstractContainer ,
|
|
alias: 'widget.container',
|
|
alternateClassName: 'Ext.Container',
|
|
|
|
/**
|
|
* Return the immediate child Component in which the passed element is located.
|
|
* @param {Ext.Element/HTMLElement/String} el The element to test (or ID of element).
|
|
* @param {Boolean} deep If `true`, returns the deepest descendant Component which contains the passed element.
|
|
* @return {Ext.Component} The child item which contains the passed element.
|
|
*/
|
|
getChildByElement: function(el, deep) {
|
|
var item,
|
|
itemEl,
|
|
i = 0,
|
|
it = this.getRefItems(),
|
|
ln = it.length;
|
|
|
|
el = Ext.getDom(el);
|
|
for (; i < ln; i++) {
|
|
item = it[i];
|
|
itemEl = item.getEl();
|
|
if (itemEl && ((itemEl.dom === el) || itemEl.contains(el))) {
|
|
return (deep && item.getChildByElement) ? item.getChildByElement(el, deep) : item;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Component layout for editors
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.container.Editor', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.editor',
|
|
|
|
extend: Ext.layout.container.Container ,
|
|
|
|
/* End Definitions */
|
|
|
|
autoSizeDefault: {
|
|
width: 'field',
|
|
height: 'field'
|
|
},
|
|
|
|
sizePolicies: {
|
|
// indexed by autoSize.width
|
|
$: {
|
|
// indexed by autoSize.height
|
|
$: {
|
|
readsWidth: 1,
|
|
readsHeight: 1,
|
|
setsWidth: 0,
|
|
setsHeight: 0
|
|
},
|
|
boundEl: {
|
|
readsWidth: 1,
|
|
readsHeight: 0,
|
|
setsWidth: 0,
|
|
setsHeight: 1
|
|
}
|
|
},
|
|
|
|
boundEl: {
|
|
// indexed by autoSize.height
|
|
$: {
|
|
readsWidth: 0,
|
|
readsHeight: 1,
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
},
|
|
boundEl: {
|
|
readsWidth: 0,
|
|
readsHeight: 0,
|
|
setsWidth: 1,
|
|
setsHeight: 1
|
|
}
|
|
}
|
|
},
|
|
|
|
getItemSizePolicy: function (item) {
|
|
var me = this,
|
|
autoSize = me.owner.autoSize,
|
|
key = autoSize && autoSize.width,
|
|
policy = me.sizePolicies;
|
|
|
|
policy = policy[key] || policy.$;
|
|
|
|
key = autoSize && autoSize.height;
|
|
policy = policy[key] || policy.$;
|
|
|
|
return policy;
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
autoSize = owner.autoSize,
|
|
fieldWidth,
|
|
fieldHeight;
|
|
|
|
if (autoSize === true) {
|
|
autoSize = me.autoSizeDefault;
|
|
}
|
|
|
|
// Calculate size of both Editor, and its owned Field
|
|
if (autoSize) {
|
|
fieldWidth = me.getDimension(owner, autoSize.width, 'getWidth', owner.width);
|
|
fieldHeight = me.getDimension(owner, autoSize.height, 'getHeight', owner.height);
|
|
}
|
|
|
|
// Set Field size
|
|
ownerContext.childItems[0].setSize(fieldWidth, fieldHeight);
|
|
|
|
// Bypass validity checking. Container layouts should not usually set their owner's size.
|
|
ownerContext.setWidth(fieldWidth);
|
|
ownerContext.setHeight(fieldHeight);
|
|
|
|
// This is a Container layout, so publish content size
|
|
ownerContext.setContentSize(fieldWidth || owner.field.getWidth(),
|
|
fieldHeight || owner.field.getHeight());
|
|
},
|
|
|
|
getDimension: function(owner, type, getMethod, ownerSize){
|
|
switch (type) {
|
|
// Size to boundEl's dimension
|
|
case 'boundEl':
|
|
return owner.boundEl[getMethod]();
|
|
|
|
// Auto size (shrink wrap the Field's size
|
|
case 'field':
|
|
return undefined;
|
|
|
|
// Size to the Editor's configured size
|
|
default:
|
|
return ownerSize;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The Editor class is used to provide inline editing for elements on the page. The editor
|
|
* is backed by a {@link Ext.form.field.Field} that will be displayed to edit the underlying content.
|
|
* The editor is a floating Component, when the editor is shown it is automatically aligned to
|
|
* display over the top of the bound element it is editing. The Editor contains several options
|
|
* for how to handle key presses:
|
|
*
|
|
* - {@link #completeOnEnter}
|
|
* - {@link #cancelOnEsc}
|
|
* - {@link #swallowKeys}
|
|
*
|
|
* It also has options for how to use the value once the editor has been activated:
|
|
*
|
|
* - {@link #revertInvalid}
|
|
* - {@link #ignoreNoChange}
|
|
* - {@link #updateEl}
|
|
*
|
|
* Sample usage:
|
|
*
|
|
* var editor = new Ext.Editor({
|
|
* updateEl: true, // update the innerHTML of the bound element when editing completes
|
|
* field: {
|
|
* xtype: 'textfield'
|
|
* }
|
|
* });
|
|
* var el = Ext.get('my-text'); // The element to 'edit'
|
|
* editor.startEdit(el); // The value of the field will be taken as the innerHTML of the element.
|
|
*
|
|
* {@img Ext.Editor/Ext.Editor.png Ext.Editor component}
|
|
*
|
|
*/
|
|
Ext.define('Ext.Editor', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.container.Container ,
|
|
|
|
alias: 'widget.editor',
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
layout: 'editor',
|
|
|
|
/**
|
|
* @cfg {Ext.form.field.Field} field
|
|
* The Field object (or descendant) or config object for field
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} allowBlur
|
|
* True to {@link #completeEdit complete the editing process} if in edit mode when the
|
|
* field is blurred.
|
|
*/
|
|
allowBlur: true,
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} autoSize
|
|
* True for the editor to automatically adopt the size of the underlying field. Otherwise, an object
|
|
* can be passed to indicate where to get each dimension. The available properties are 'boundEl' and
|
|
* 'field'. If a dimension is not specified, it will use the underlying height/width specified on
|
|
* the editor object.
|
|
* Examples:
|
|
*
|
|
* autoSize: true // The editor will be sized to the height/width of the field
|
|
*
|
|
* height: 21,
|
|
* autoSize: {
|
|
* width: 'boundEl' // The width will be determined by the width of the boundEl, the height from the editor (21)
|
|
* }
|
|
*
|
|
* autoSize: {
|
|
* width: 'field', // Width from the field
|
|
* height: 'boundEl' // Height from the boundEl
|
|
* }
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} revertInvalid
|
|
* True to automatically revert the field value and cancel the edit when the user completes an edit and the field
|
|
* validation fails
|
|
*/
|
|
revertInvalid: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [ignoreNoChange=false]
|
|
* True to skip the edit completion process (no save, no events fired) if the user completes an edit and
|
|
* the value has not changed. Applies only to string values - edits for other data types
|
|
* will never be ignored.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [hideEl=true]
|
|
* False to keep the bound element visible while the editor is displayed
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} value
|
|
* The data value of the underlying field
|
|
*/
|
|
value : '',
|
|
|
|
/**
|
|
* @cfg {String} alignment
|
|
* The position to align to (see {@link Ext.util.Positionable#alignTo} for more details).
|
|
*/
|
|
alignment: 'c-c?',
|
|
|
|
/**
|
|
* @cfg {Number[]} offsets
|
|
* The offsets to use when aligning (see {@link Ext.util.Positionable#alignTo} for more details.
|
|
*/
|
|
offsets: [0, 0],
|
|
|
|
/**
|
|
* @cfg {Boolean/String} shadow
|
|
* "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow.
|
|
*/
|
|
shadow : 'frame',
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain
|
|
* True to constrain the editor to the viewport
|
|
*/
|
|
constrain : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} swallowKeys
|
|
* Handle the keydown/keypress events so they don't propagate
|
|
*/
|
|
swallowKeys : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} completeOnEnter
|
|
* True to complete the edit when the enter key is pressed.
|
|
*/
|
|
completeOnEnter : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} cancelOnEsc
|
|
* True to cancel the edit when the escape key is pressed.
|
|
*/
|
|
cancelOnEsc : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} updateEl
|
|
* True to update the innerHTML of the bound element when the update completes
|
|
*/
|
|
updateEl : false,
|
|
|
|
// Do not participate in the ZIndexManager's focus switching operations.
|
|
// When an editor is hidden, the ZIndexManager will not automatically activate
|
|
// the last visible floater on the stack.
|
|
focusOnToFront: false,
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} [parentEl=document.body]
|
|
* An element to render to.
|
|
*/
|
|
|
|
// private overrides
|
|
hidden: true,
|
|
baseCls: Ext.baseCSSPrefix + 'editor',
|
|
|
|
initComponent : function() {
|
|
var me = this,
|
|
field = me.field = Ext.ComponentManager.create(me.field, 'textfield');
|
|
|
|
Ext.apply(field, {
|
|
inEditor: true,
|
|
msgTarget: field.msgTarget == 'title' ? 'title' : 'qtip'
|
|
});
|
|
me.mon(field, {
|
|
scope: me,
|
|
blur: me.onFieldBlur,
|
|
specialkey: me.onSpecialKey
|
|
});
|
|
|
|
if (field.grow) {
|
|
me.mon(field, 'autosize', me.onFieldAutosize, me, {delay: 1});
|
|
}
|
|
me.floating = {
|
|
constrain: me.constrain
|
|
};
|
|
me.items = field;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforestartedit
|
|
* Fires when editing is initiated, but before the value changes. Editing can be canceled by returning
|
|
* false from the handler of this event.
|
|
* @param {Ext.Editor} this
|
|
* @param {Ext.Element} boundEl The underlying element bound to this editor
|
|
* @param {Object} value The field value being set
|
|
*/
|
|
'beforestartedit',
|
|
|
|
/**
|
|
* @event startedit
|
|
* Fires when this editor is displayed
|
|
* @param {Ext.Editor} this
|
|
* @param {Ext.Element} boundEl The underlying element bound to this editor
|
|
* @param {Object} value The starting field value
|
|
*/
|
|
'startedit',
|
|
|
|
/**
|
|
* @event beforecomplete
|
|
* Fires after a change has been made to the field, but before the change is reflected in the underlying
|
|
* field. Saving the change to the field can be canceled by returning false from the handler of this event.
|
|
* Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
|
|
* event will not fire since no edit actually occurred.
|
|
* @param {Ext.Editor} this
|
|
* @param {Object} value The current field value
|
|
* @param {Object} startValue The original field value
|
|
*/
|
|
'beforecomplete',
|
|
/**
|
|
* @event complete
|
|
* Fires after editing is complete and any changed value has been written to the underlying field.
|
|
* @param {Ext.Editor} this
|
|
* @param {Object} value The current field value
|
|
* @param {Object} startValue The original field value
|
|
*/
|
|
'complete',
|
|
/**
|
|
* @event canceledit
|
|
* Fires after editing has been canceled and the editor's value has been reset.
|
|
* @param {Ext.Editor} this
|
|
* @param {Object} value The user-entered field value that was discarded
|
|
* @param {Object} startValue The original field value that was set back into the editor after cancel
|
|
*/
|
|
'canceledit',
|
|
/**
|
|
* @event specialkey
|
|
* Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check
|
|
* {@link Ext.EventObject#getKey} to determine which key was pressed.
|
|
* @param {Ext.Editor} this
|
|
* @param {Ext.form.field.Field} field The field attached to this editor
|
|
* @param {Ext.EventObject} event The event object
|
|
*/
|
|
'specialkey'
|
|
);
|
|
},
|
|
|
|
// private
|
|
onFieldAutosize: function(){
|
|
this.updateLayout();
|
|
},
|
|
|
|
// private
|
|
afterRender : function(ct, position) {
|
|
var me = this,
|
|
field = me.field,
|
|
inputEl = field.inputEl;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Ensure the field doesn't get submitted as part of any form
|
|
if (inputEl) {
|
|
inputEl.dom.name = '';
|
|
if (me.swallowKeys) {
|
|
inputEl.swallowEvent([
|
|
'keypress', // *** Opera
|
|
'keydown' // *** all other browsers
|
|
]);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
onSpecialKey : function(field, event) {
|
|
var me = this,
|
|
key = event.getKey(),
|
|
complete = me.completeOnEnter && key == event.ENTER,
|
|
cancel = me.cancelOnEsc && key == event.ESC;
|
|
|
|
if (complete || cancel) {
|
|
event.stopEvent();
|
|
// Must defer this slightly to prevent exiting edit mode before the field's own
|
|
// key nav can handle the enter key, e.g. selecting an item in a combobox list
|
|
Ext.defer(function() {
|
|
if (complete) {
|
|
me.completeEdit();
|
|
} else {
|
|
me.cancelEdit();
|
|
}
|
|
if (field.triggerBlur) {
|
|
field.triggerBlur(event);
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
me.fireEvent('specialkey', me, field, event);
|
|
},
|
|
|
|
/**
|
|
* Starts the editing process and shows the editor.
|
|
* @param {String/HTMLElement/Ext.Element} el The element to edit
|
|
* @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
|
|
* to the innerHTML of el.
|
|
*/
|
|
startEdit : function(el, value) {
|
|
var me = this,
|
|
field = me.field;
|
|
|
|
me.completeEdit();
|
|
me.boundEl = Ext.get(el);
|
|
value = Ext.isDefined(value) ? value : Ext.String.trim(me.boundEl.dom.innerText || me.boundEl.dom.innerHTML);
|
|
|
|
if (!me.rendered) {
|
|
// Render to the ownerCt's element
|
|
// Being floating, we do not need to use the actual layout's target.
|
|
// Indeed, it's better if we do not so that we do not interfere with layout's child management,
|
|
// especially with CellEditors in the element of a TablePanel.
|
|
if (me.ownerCt) {
|
|
me.parentEl = me.ownerCt.el;
|
|
me.parentEl.position();
|
|
}
|
|
me.render(me.parentEl || document.body);
|
|
}
|
|
|
|
if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
|
|
me.startValue = value;
|
|
me.show();
|
|
// temporarily suspend events on field to prevent the "change" event from firing when reset() and setValue() are called
|
|
field.suspendEvents();
|
|
field.reset();
|
|
field.setValue(value);
|
|
field.resumeEvents();
|
|
me.realign(true);
|
|
field.focus();
|
|
if (field.autoSize) {
|
|
field.autoSize();
|
|
}
|
|
me.editing = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Realigns the editor to the bound field based on the current alignment config value.
|
|
* @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
|
|
*/
|
|
realign : function(autoSize) {
|
|
var me = this;
|
|
if (autoSize === true) {
|
|
me.updateLayout();
|
|
}
|
|
me.alignTo(me.boundEl, me.alignment, me.offsets);
|
|
},
|
|
|
|
/**
|
|
* Ends the editing process, persists the changed value to the underlying field, and hides the editor.
|
|
* @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after edit
|
|
*/
|
|
completeEdit : function(remainVisible) {
|
|
var me = this,
|
|
field = me.field,
|
|
value;
|
|
|
|
if (!me.editing) {
|
|
return;
|
|
}
|
|
|
|
// Assert combo values first
|
|
if (field.assertValue) {
|
|
field.assertValue();
|
|
}
|
|
|
|
value = me.getValue();
|
|
if (!field.isValid()) {
|
|
if (me.revertInvalid !== false) {
|
|
me.cancelEdit(remainVisible);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (String(value) === String(me.startValue) && me.ignoreNoChange) {
|
|
me.hideEdit(remainVisible);
|
|
return;
|
|
}
|
|
|
|
if (me.fireEvent('beforecomplete', me, value, me.startValue) !== false) {
|
|
// Grab the value again, may have changed in beforecomplete
|
|
value = me.getValue();
|
|
if (me.updateEl && me.boundEl) {
|
|
me.boundEl.update(value);
|
|
}
|
|
me.hideEdit(remainVisible);
|
|
me.fireEvent('complete', me, value, me.startValue);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onShow : function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
if (me.hideEl !== false) {
|
|
me.boundEl.hide();
|
|
}
|
|
me.fireEvent('startedit', me, me.boundEl, me.startValue);
|
|
},
|
|
|
|
/**
|
|
* Cancels the editing process and hides the editor without persisting any changes. The field value will be
|
|
* reverted to the original starting value.
|
|
* @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor visible after cancel
|
|
*/
|
|
cancelEdit : function(remainVisible) {
|
|
var me = this,
|
|
startValue = me.startValue,
|
|
field = me.field,
|
|
value;
|
|
|
|
if (me.editing) {
|
|
value = me.getValue();
|
|
// temporarily suspend events on field to prevent the "change" event from firing when setValue() is called
|
|
field.suspendEvents();
|
|
me.setValue(startValue);
|
|
field.resumeEvents();
|
|
me.hideEdit(remainVisible);
|
|
me.fireEvent('canceledit', me, value, startValue);
|
|
}
|
|
},
|
|
|
|
// private
|
|
hideEdit: function(remainVisible) {
|
|
if (remainVisible !== true) {
|
|
this.editing = false;
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
// private
|
|
onFieldBlur : function(field, e) {
|
|
var me = this,
|
|
target = Ext.Element.getActiveElement();
|
|
|
|
// selectSameEditor flag allows the same editor to be started without onFieldBlur firing on itself
|
|
if(me.allowBlur === true && me.editing && me.selectSameEditor !== true) {
|
|
me.completeEdit();
|
|
}
|
|
|
|
// If newly active element is focusable, prevent reacquisition of focus by editor owner
|
|
if (Ext.fly(target).isFocusable() || target.getAttribute('tabIndex')) {
|
|
target.focus();
|
|
}
|
|
},
|
|
|
|
// private
|
|
onHide : function() {
|
|
var me = this,
|
|
field = me.field;
|
|
|
|
if (me.editing) {
|
|
me.completeEdit();
|
|
return;
|
|
}
|
|
// Fields which mimic blur have to be told to fire t heir blur events.
|
|
// All other types of field are automatically blurred when an ancestor hides.
|
|
if (field.hasFocus && field.triggerBlur) {
|
|
field.triggerBlur();
|
|
}
|
|
if (field.collapse) {
|
|
field.collapse();
|
|
}
|
|
|
|
//field.hide();
|
|
if (me.hideEl !== false) {
|
|
me.boundEl.show();
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Sets the data value of the editor
|
|
* @param {Object} value Any valid value supported by the underlying field
|
|
*/
|
|
setValue : function(value) {
|
|
this.field.setValue(value);
|
|
},
|
|
|
|
/**
|
|
* Gets the data value of the editor
|
|
* @return {Object} The data value
|
|
*/
|
|
getValue : function() {
|
|
return this.field.getValue();
|
|
},
|
|
|
|
beforeDestroy : function() {
|
|
var me = this;
|
|
|
|
Ext.destroy(me.field);
|
|
delete me.field;
|
|
delete me.parentEl;
|
|
delete me.boundEl;
|
|
|
|
me.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Handles mapping key events to handling functions for an element or a Component. One KeyMap can be used for multiple
|
|
* actions.
|
|
*
|
|
* A KeyMap must be configured with a {@link #target} as an event source which may be an Element or a Component.
|
|
*
|
|
* If the target is an element, then the `keydown` event will trigger the invocation of {@link #binding}s.
|
|
*
|
|
* It is possible to configure the KeyMap with a custom {@link #eventName} to listen for. This may be useful when the
|
|
* {@link #target} is a Component.
|
|
*
|
|
* The KeyMap's event handling requires that the first parameter passed is a key event. So if the Component's event
|
|
* signature is different, specify a {@link #processEvent} configuration which accepts the event's parameters and
|
|
* returns a key event.
|
|
*
|
|
* Functions specified in {@link #binding}s are called with this signature : `(String key, Ext.EventObject e)` (if the
|
|
* match is a multi-key combination the callback will still be called only once). A KeyMap can also handle a string
|
|
* representation of keys. By default KeyMap starts enabled.
|
|
*
|
|
* Usage:
|
|
*
|
|
* // map one key by key code
|
|
* var map = new Ext.util.KeyMap({
|
|
* target: "my-element",
|
|
* key: 13, // or Ext.EventObject.ENTER
|
|
* fn: myHandler,
|
|
* scope: myObject
|
|
* });
|
|
*
|
|
* // map multiple keys to one action by string
|
|
* var map = new Ext.util.KeyMap({
|
|
* target: "my-element",
|
|
* key: "a\r\n\t",
|
|
* fn: myHandler,
|
|
* scope: myObject
|
|
* });
|
|
*
|
|
* // map multiple keys to multiple actions by strings and array of codes
|
|
* var map = new Ext.util.KeyMap({
|
|
* target: "my-element",
|
|
* binding: [{
|
|
* key: [10,13],
|
|
* fn: function(){ alert("Return was pressed"); }
|
|
* }, {
|
|
* key: "abc",
|
|
* fn: function(){ alert('a, b or c was pressed'); }
|
|
* }, {
|
|
* key: "\t",
|
|
* ctrl:true,
|
|
* shift:true,
|
|
* fn: function(){ alert('Control + shift + tab was pressed.'); }
|
|
* }]
|
|
* });
|
|
*
|
|
* Since 4.1.0, KeyMaps can bind to Components and process key-based events fired by Components.
|
|
*
|
|
* To bind to a Component, use the single parameter form of constructor and include the Component event name
|
|
* to listen for, and a `processEvent` implementation which returns the key event for further processing by
|
|
* the KeyMap:
|
|
*
|
|
* var map = new Ext.util.KeyMap({
|
|
* target: myGridView,
|
|
* eventName: 'itemkeydown',
|
|
* processEvent: function(view, record, node, index, event) {
|
|
*
|
|
* // Load the event with the extra information needed by the mappings
|
|
* event.view = view;
|
|
* event.store = view.getStore();
|
|
* event.record = record;
|
|
* event.index = index;
|
|
* return event;
|
|
* },
|
|
* binding: {
|
|
* key: Ext.EventObject.DELETE,
|
|
* fn: function(keyCode, e) {
|
|
* e.store.remove(e.record);
|
|
*
|
|
* // Attempt to select the record that's now in its place
|
|
* e.view.getSelectionModel().select(e.index);
|
|
* e.view.el.focus();
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.util.KeyMap', {
|
|
alternateClassName: 'Ext.KeyMap',
|
|
|
|
/**
|
|
* @cfg {Ext.Component/Ext.Element/HTMLElement/String} target
|
|
* The object on which to listen for the event specified by the {@link #eventName} config option.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/Object[][]} binding
|
|
* Either a single object describing a handling function for s specified key (or set of keys), or
|
|
* an array of such objects.
|
|
* @cfg {String/String[]} binding.key A single keycode or an array of keycodes to handle
|
|
* @cfg {Boolean} binding.shift True to handle key only when shift is pressed, False to handle the
|
|
* key only when shift is not pressed (defaults to undefined)
|
|
* @cfg {Boolean} binding.ctrl True to handle key only when ctrl is pressed, False to handle the
|
|
* key only when ctrl is not pressed (defaults to undefined)
|
|
* @cfg {Boolean} binding.alt True to handle key only when alt is pressed, False to handle the key
|
|
* only when alt is not pressed (defaults to undefined)
|
|
* @cfg {Function} binding.handler The function to call when KeyMap finds the expected key combination
|
|
* @cfg {Function} binding.fn Alias of handler (for backwards-compatibility)
|
|
* @cfg {Object} binding.scope The scope of the callback function
|
|
* @cfg {String} binding.defaultEventAction A default action to apply to the event. Possible values
|
|
* are: stopEvent, stopPropagation, preventDefault. If no value is set no action is performed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} [processEventScope=this]
|
|
* The scope (`this` context) in which the {@link #processEvent} method is executed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [ignoreInputFields=false]
|
|
* Configure this as `true` if there are any input fields within the {@link #target}, and this KeyNav
|
|
* should not process events from input fields, (`<input>, <textarea> and elements with `contentEditable="true"`)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} eventName
|
|
* The event to listen for to pick up key events.
|
|
*/
|
|
eventName: 'keydown',
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
// Handle legacy arg list in which the first argument is the target.
|
|
// TODO: Deprecate in V5
|
|
if ((arguments.length !== 1) || (typeof config === 'string') || config.dom || config.tagName || config === document || config.isComponent) {
|
|
me.legacyConstructor.apply(me, arguments);
|
|
return;
|
|
}
|
|
|
|
Ext.apply(me, config);
|
|
me.bindings = [];
|
|
|
|
if (!me.target.isComponent) {
|
|
me.target = Ext.get(me.target);
|
|
}
|
|
|
|
if (me.binding) {
|
|
me.addBinding(me.binding);
|
|
} else if (config.key) {
|
|
me.addBinding(config);
|
|
}
|
|
me.enable();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Old constructor signature
|
|
* @param {String/HTMLElement/Ext.Element/Ext.Component} el The element or its ID, or Component to bind to
|
|
* @param {Object} binding The binding (see {@link #addBinding})
|
|
* @param {String} [eventName="keydown"] The event to bind to
|
|
*/
|
|
legacyConstructor: function(el, binding, eventName){
|
|
var me = this;
|
|
|
|
Ext.apply(me, {
|
|
target: Ext.get(el),
|
|
eventName: eventName || me.eventName,
|
|
bindings: []
|
|
});
|
|
if (binding) {
|
|
me.addBinding(binding);
|
|
}
|
|
me.enable();
|
|
},
|
|
|
|
/**
|
|
* Add a new binding to this KeyMap.
|
|
*
|
|
* Usage:
|
|
*
|
|
* // Create a KeyMap
|
|
* var map = new Ext.util.KeyMap(document, {
|
|
* key: Ext.EventObject.ENTER,
|
|
* fn: handleKey,
|
|
* scope: this
|
|
* });
|
|
*
|
|
* //Add a new binding to the existing KeyMap later
|
|
* map.addBinding({
|
|
* key: 'abc',
|
|
* shift: true,
|
|
* fn: handleKey,
|
|
* scope: this
|
|
* });
|
|
*
|
|
* @param {Object/Object[]} binding A single KeyMap config or an array of configs.
|
|
* The following config object properties are supported:
|
|
* @param {String/Array} binding.key A single keycode or an array of keycodes to handle.
|
|
* @param {Boolean} binding.shift True to handle key only when shift is pressed,
|
|
* False to handle the keyonly when shift is not pressed (defaults to undefined).
|
|
* @param {Boolean} binding.ctrl True to handle key only when ctrl is pressed,
|
|
* False to handle the key only when ctrl is not pressed (defaults to undefined).
|
|
* @param {Boolean} binding.alt True to handle key only when alt is pressed,
|
|
* False to handle the key only when alt is not pressed (defaults to undefined).
|
|
* @param {Function} binding.handler The function to call when KeyMap finds the
|
|
* expected key combination.
|
|
* @param {Function} binding.fn Alias of handler (for backwards-compatibility).
|
|
* @param {Object} binding.scope The scope of the callback function.
|
|
* @param {String} binding.defaultEventAction A default action to apply to the event.
|
|
* Possible values are: stopEvent, stopPropagation, preventDefault. If no value is
|
|
* set no action is performed..
|
|
*/
|
|
addBinding : function(binding){
|
|
var me = this,
|
|
keyCode = binding.key,
|
|
i,
|
|
len;
|
|
|
|
if (me.processing) {
|
|
me.bindings = bindings.slice(0);
|
|
}
|
|
|
|
if (Ext.isArray(binding)) {
|
|
for (i = 0, len = binding.length; i < len; i++) {
|
|
me.addBinding(binding[i]);
|
|
}
|
|
return;
|
|
}
|
|
|
|
me.bindings.push(Ext.apply({
|
|
keyCode: me.processKeys(keyCode)
|
|
}, binding));
|
|
},
|
|
|
|
/**
|
|
* Remove a binding from this KeyMap.
|
|
* @param {Object} binding See {@link #addBinding for options}
|
|
*/
|
|
removeBinding: function(binding){
|
|
var me = this,
|
|
bindings = me.bindings,
|
|
len = bindings.length,
|
|
i, item, keys;
|
|
|
|
if (me.processing) {
|
|
me.bindings = bindings.slice(0);
|
|
}
|
|
|
|
keys = me.processKeys(binding.key);
|
|
for (i = 0; i < len; ++i) {
|
|
item = bindings[i];
|
|
if (item.fn === binding.fn && item.scope === binding.scope) {
|
|
if (binding.alt == item.alt && binding.crtl == item.crtl && binding.shift == item.shift) {
|
|
if (Ext.Array.equals(item.keyCode, keys)) {
|
|
Ext.Array.erase(me.bindings, i, 1);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
processKeys: function(keyCode){
|
|
var processed = false,
|
|
key, keys, keyString, len, i;
|
|
|
|
if (Ext.isString(keyCode)) {
|
|
keys = [];
|
|
keyString = keyCode.toUpperCase();
|
|
|
|
for (i = 0, len = keyString.length; i < len; ++i){
|
|
keys.push(keyString.charCodeAt(i));
|
|
}
|
|
keyCode = keys;
|
|
processed = true;
|
|
}
|
|
|
|
if (!Ext.isArray(keyCode)) {
|
|
keyCode = [keyCode];
|
|
}
|
|
|
|
if (!processed) {
|
|
for (i = 0, len = keyCode.length; i < len; ++i) {
|
|
key = keyCode[i];
|
|
if (Ext.isString(key)) {
|
|
keyCode[i] = key.toUpperCase().charCodeAt(0);
|
|
}
|
|
}
|
|
}
|
|
return keyCode;
|
|
},
|
|
|
|
/**
|
|
* Process the {@link #eventName event} from the {@link #target}.
|
|
* @private
|
|
* @param {Ext.EventObject} event
|
|
*/
|
|
handleTargetEvent: (function() {
|
|
var tagRe = /input|textarea/i;
|
|
|
|
return function(event) {
|
|
var me = this,
|
|
bindings, i, len,
|
|
target, contentEditable;
|
|
|
|
if (me.enabled) { //just in case
|
|
bindings = me.bindings;
|
|
i = 0;
|
|
len = bindings.length;
|
|
|
|
// Process the event
|
|
event = me.processEvent.apply(me||me.processEventScope, arguments);
|
|
|
|
// Ignore events from input fields if configured to do so
|
|
if (me.ignoreInputFields) {
|
|
target = event.target;
|
|
contentEditable = target.contentEditable;
|
|
// contentEditable will default to inherit if not specified, only check if the
|
|
// attribute has been set or explicitly set to true
|
|
// http://html5doctor.com/the-contenteditable-attribute/
|
|
if (tagRe.test(target.tagName) || (contentEditable === '' || contentEditable === 'true')) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// If the processor does not return a keyEvent, we can't process it.
|
|
// Allow them to return false to cancel processing of the event
|
|
if (!event.getKey) {
|
|
return event;
|
|
}
|
|
me.processing = true;
|
|
for(; i < len; ++i){
|
|
me.processBinding(bindings[i], event);
|
|
}
|
|
me.processing = false;
|
|
}
|
|
}
|
|
}()),
|
|
|
|
/**
|
|
* @cfg {Function} processEvent
|
|
* An optional event processor function which accepts the argument list provided by the
|
|
* {@link #eventName configured event} of the {@link #target}, and returns a keyEvent for processing by the KeyMap.
|
|
*
|
|
* This may be useful when the {@link #target} is a Component with s complex event signature, where the event is not
|
|
* the first parameter. Extra information from the event arguments may be injected into the event for use by the handler
|
|
* functions before returning it.
|
|
*/
|
|
processEvent: Ext.identityFn,
|
|
|
|
/**
|
|
* Process a particular binding and fire the handler if necessary.
|
|
* @private
|
|
* @param {Object} binding The binding information
|
|
* @param {Ext.EventObject} event
|
|
*/
|
|
processBinding: function(binding, event){
|
|
if (this.checkModifiers(binding, event)) {
|
|
var key = event.getKey(),
|
|
handler = binding.fn || binding.handler,
|
|
scope = binding.scope || this,
|
|
keyCode = binding.keyCode,
|
|
defaultEventAction = binding.defaultEventAction,
|
|
i,
|
|
len,
|
|
keydownEvent = new Ext.EventObjectImpl(event);
|
|
|
|
|
|
for (i = 0, len = keyCode.length; i < len; ++i) {
|
|
if (key === keyCode[i]) {
|
|
if (handler.call(scope, key, event) !== true && defaultEventAction) {
|
|
keydownEvent[defaultEventAction]();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Check if the modifiers on the event match those on the binding
|
|
* @private
|
|
* @param {Object} binding
|
|
* @param {Ext.EventObject} event
|
|
* @return {Boolean} True if the event matches the binding
|
|
*/
|
|
checkModifiers: function(binding, e) {
|
|
var keys = ['shift', 'ctrl', 'alt'],
|
|
i = 0,
|
|
len = keys.length,
|
|
val, key;
|
|
|
|
for (; i < len; ++i){
|
|
key = keys[i];
|
|
val = binding[key];
|
|
if (!(val === undefined || (val === e[key + 'Key']))) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Shorthand for adding a single key listener.
|
|
*
|
|
* @param {Number/Number[]/Object} key Either the numeric key code, array of key codes or an object with the
|
|
* following options: `{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}`
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope (`this` reference) in which the function is executed.
|
|
* Defaults to the browser window.
|
|
*/
|
|
on: function(key, fn, scope) {
|
|
var keyCode, shift, ctrl, alt;
|
|
if (Ext.isObject(key) && !Ext.isArray(key)) {
|
|
keyCode = key.key;
|
|
shift = key.shift;
|
|
ctrl = key.ctrl;
|
|
alt = key.alt;
|
|
} else {
|
|
keyCode = key;
|
|
}
|
|
this.addBinding({
|
|
key: keyCode,
|
|
shift: shift,
|
|
ctrl: ctrl,
|
|
alt: alt,
|
|
fn: fn,
|
|
scope: scope
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Shorthand for removing a single key listener.
|
|
*
|
|
* @param {Number/Number[]/Object} key Either the numeric key code, array of key codes or an object with the
|
|
* following options: `{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}`
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope (`this` reference) in which the function is executed.
|
|
* Defaults to the browser window.
|
|
*/
|
|
un: function(key, fn, scope) {
|
|
var keyCode, shift, ctrl, alt;
|
|
if (Ext.isObject(key) && !Ext.isArray(key)) {
|
|
keyCode = key.key;
|
|
shift = key.shift;
|
|
ctrl = key.ctrl;
|
|
alt = key.alt;
|
|
} else {
|
|
keyCode = key;
|
|
}
|
|
this.removeBinding({
|
|
key: keyCode,
|
|
shift: shift,
|
|
ctrl: ctrl,
|
|
alt: alt,
|
|
fn: fn,
|
|
scope: scope
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns true if this KeyMap is enabled
|
|
* @return {Boolean}
|
|
*/
|
|
isEnabled : function() {
|
|
return this.enabled;
|
|
},
|
|
|
|
/**
|
|
* Enables this KeyMap
|
|
*/
|
|
enable: function() {
|
|
var me = this;
|
|
|
|
if (!me.enabled) {
|
|
me.target.on(me.eventName, me.handleTargetEvent, me);
|
|
me.enabled = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disable this KeyMap
|
|
*/
|
|
disable: function() {
|
|
var me = this;
|
|
|
|
if (me.enabled) {
|
|
me.target.removeListener(me.eventName, me.handleTargetEvent, me);
|
|
me.enabled = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Convenience function for setting disabled/enabled by boolean.
|
|
* @param {Boolean} disabled
|
|
*/
|
|
setDisabled : function(disabled) {
|
|
if (disabled) {
|
|
this.disable();
|
|
} else {
|
|
this.enable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Destroys the KeyMap instance and removes all handlers.
|
|
* @param {Boolean} removeTarget True to also remove the {@link #target}
|
|
*/
|
|
destroy: function(removeTarget) {
|
|
var me = this,
|
|
target = me.target;
|
|
|
|
me.bindings = [];
|
|
me.disable();
|
|
if (removeTarget === true) {
|
|
if (target.isComponent) {
|
|
target.destroy();
|
|
} else {
|
|
target.remove();
|
|
}
|
|
}
|
|
delete me.target;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind navigation keys to
|
|
* function calls that will get called when the keys are pressed, providing an easy way to implement custom navigation
|
|
* schemes for any UI component.
|
|
*
|
|
* The following are all of the possible keys that can be implemented: enter, space, left, right, up, down, tab, esc,
|
|
* pageUp, pageDown, del, backspace, home, end.
|
|
*
|
|
* Usage:
|
|
*
|
|
* var nav = new Ext.util.KeyNav({
|
|
* target : "my-element",
|
|
* left : function(e){
|
|
* this.moveLeft(e.ctrlKey);
|
|
* },
|
|
* right : function(e){
|
|
* this.moveRight(e.ctrlKey);
|
|
* },
|
|
* enter : function(e){
|
|
* this.save();
|
|
* },
|
|
*
|
|
* // Binding may be a function specifiying fn, scope and defaultAction
|
|
* esc: {
|
|
* fn: this.onEsc,
|
|
* defaultEventAction: false
|
|
* },
|
|
* scope : this
|
|
* });
|
|
*/
|
|
Ext.define('Ext.util.KeyNav', {
|
|
alternateClassName: 'Ext.KeyNav',
|
|
|
|
|
|
|
|
statics: {
|
|
keyOptions: {
|
|
left: 37,
|
|
right: 39,
|
|
up: 38,
|
|
down: 40,
|
|
space: 32,
|
|
pageUp: 33,
|
|
pageDown: 34,
|
|
del: 46,
|
|
backspace: 8,
|
|
home: 36,
|
|
end: 35,
|
|
enter: 13,
|
|
esc: 27,
|
|
tab: 9
|
|
}
|
|
},
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
if (arguments.length === 2) {
|
|
me.legacyConstructor.apply(me, arguments);
|
|
return;
|
|
}
|
|
me.setConfig(config);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Old constructor signature.
|
|
* @param {String/HTMLElement/Ext.Element} el The element or its ID to bind to
|
|
* @param {Object} config The config
|
|
*/
|
|
legacyConstructor: function(el, config) {
|
|
this.setConfig(Ext.apply({
|
|
target: el
|
|
}, config));
|
|
},
|
|
|
|
/**
|
|
* Sets up a configuration for the KeyNav.
|
|
* @private
|
|
* @param {Object} config A configuration object as specified in the constructor.
|
|
*/
|
|
setConfig: function(config) {
|
|
var me = this,
|
|
keymapCfg = {
|
|
target: config.target,
|
|
ignoreInputFields: config.ignoreInputFields,
|
|
eventName: me.getKeyEvent('forceKeyDown' in config ? config.forceKeyDown : me.forceKeyDown, config.eventName)
|
|
},
|
|
map, keyCodes, defaultScope, keyName, binding;
|
|
|
|
if (me.map) {
|
|
me.map.destroy();
|
|
}
|
|
|
|
if (config.processEvent) {
|
|
keymapCfg.processEvent = config.processEvent;
|
|
keymapCfg.processEventScope = config.processEventScope||me;
|
|
}
|
|
|
|
// If they specified a KeyMap to use, use it
|
|
if (config.keyMap) {
|
|
map = me.map = config.keyMap;
|
|
}
|
|
// Otherwise, create one, and remember to destroy it on destroy
|
|
else {
|
|
map = me.map = new Ext.util.KeyMap(keymapCfg);
|
|
me.destroyKeyMap = true;
|
|
}
|
|
keyCodes = Ext.util.KeyNav.keyOptions;
|
|
defaultScope = config.scope || me;
|
|
|
|
for (keyName in keyCodes) {
|
|
if (keyCodes.hasOwnProperty(keyName)) {
|
|
|
|
// There is a property named after a key name.
|
|
// It may be a function or an binding spec containing handler, scope and defaultAction configs
|
|
if (binding = config[keyName]) {
|
|
if (typeof binding === 'function') {
|
|
binding = {
|
|
handler: binding,
|
|
defaultEventAction: (config.defaultEventAction !== undefined) ? config.defaultEventAction : me.defaultEventAction
|
|
};
|
|
}
|
|
map.addBinding({
|
|
key: keyCodes[keyName],
|
|
handler: Ext.Function.bind(me.handleEvent, binding.scope||defaultScope, binding.handler||binding.fn, true),
|
|
defaultEventAction: (binding.defaultEventAction !== undefined) ? binding.defaultEventAction : me.defaultEventAction
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
map.disable();
|
|
if (!config.disabled) {
|
|
map.enable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method for filtering out the map argument
|
|
* @private
|
|
* @param {Number} keyCode
|
|
* @param {Ext.EventObject} event
|
|
* @param {Object} options Contains the handler to call
|
|
*/
|
|
handleEvent: function(keyCode, event, handler){
|
|
return handler.call(this, event);
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} disabled
|
|
* True to disable this KeyNav instance.
|
|
*/
|
|
disabled: false,
|
|
|
|
/**
|
|
* @cfg {String} defaultEventAction
|
|
* The method to call on the {@link Ext.EventObject} after this KeyNav intercepts a key. Valid values are {@link
|
|
* Ext.EventObject#stopEvent}, {@link Ext.EventObject#preventDefault} and {@link Ext.EventObject#stopPropagation}.
|
|
*
|
|
* If a falsy value is specified, no method is called on the key event.
|
|
*/
|
|
defaultEventAction: "stopEvent",
|
|
|
|
/**
|
|
* @cfg {Boolean} forceKeyDown
|
|
* Handle the keydown event instead of keypress. KeyNav automatically does this for IE since IE does not propagate
|
|
* special keys on keypress, but setting this to true will force other browsers to also handle keydown instead of
|
|
* keypress.
|
|
*/
|
|
forceKeyDown: false,
|
|
|
|
/**
|
|
* @cfg {Ext.Component/Ext.Element/HTMLElement/String} target
|
|
* The object on which to listen for the event specified by the {@link #eventName} config option.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} eventName
|
|
* The event to listen for to pick up key events.
|
|
*/
|
|
eventName: 'keypress',
|
|
|
|
/**
|
|
* @cfg {Function} processEvent
|
|
* An optional event processor function which accepts the argument list provided by the {@link #eventName configured
|
|
* event} of the {@link #target}, and returns a keyEvent for processing by the KeyMap.
|
|
*
|
|
* This may be useful when the {@link #target} is a Component with s complex event signature. Extra information from
|
|
* the event arguments may be injected into the event for use by the handler functions before returning it.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} [processEventScope=this]
|
|
* The scope (`this` context) in which the {@link #processEvent} method is executed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [ignoreInputFields=false]
|
|
* Configure this as `true` if there are any input fields within the {@link #target}, and this KeyNav
|
|
* should not process events from input fields, (`<input>, <textarea> and elements with `contentEditable="true"`)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.util.KeyMap} [keyMap]
|
|
* An optional pre-existing {@link Ext.util.KeyMap KeyMap} to use to listen for key events. If not specified,
|
|
* one is created.
|
|
*/
|
|
|
|
/**
|
|
* Destroy this KeyNav.
|
|
* @param {Boolean} removeEl Pass `true` to remove the element associated with this KeyNav.
|
|
*/
|
|
destroy: function(removeEl) {
|
|
if (this.destroyKeyMap) {
|
|
this.map.destroy(removeEl);
|
|
}
|
|
delete this.map;
|
|
},
|
|
|
|
/**
|
|
* Enables this KeyNav.
|
|
*/
|
|
enable: function() {
|
|
// this.map will be removed if destroyed
|
|
if (this.map) {
|
|
this.map.enable();
|
|
this.disabled = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disables this KeyNav.
|
|
*/
|
|
disable: function() {
|
|
// this.map will be removed if destroyed
|
|
if (this.map) {
|
|
this.map.disable();
|
|
}
|
|
this.disabled = true;
|
|
},
|
|
|
|
/**
|
|
* Convenience function for setting disabled/enabled by boolean.
|
|
* @param {Boolean} disabled
|
|
*/
|
|
setDisabled : function(disabled) {
|
|
this.map.setDisabled(disabled);
|
|
this.disabled = disabled;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Determines the event to bind to listen for keys. Defaults to the {@link #eventName} value, but
|
|
* may be overridden the {@link #forceKeyDown} setting.
|
|
*
|
|
* The useKeyDown option on the EventManager modifies the default {@link #eventName} to be `keydown`,
|
|
* but a configured {@link #eventName} takes priority over this.
|
|
*
|
|
* @return {String} The type of event to listen for.
|
|
*/
|
|
getKeyEvent: function(forceKeyDown, configuredEventName) {
|
|
if (forceKeyDown || (Ext.EventManager.useKeyDown && !configuredEventName)) {
|
|
return 'keydown';
|
|
} else {
|
|
return configuredEventName||this.eventName;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The FocusManager is responsible for globally:
|
|
*
|
|
* 1. Managing component focus
|
|
* 2. Providing basic keyboard navigation
|
|
* 3. (optional) Provide a visual cue for focused components, in the form of a focus ring/frame.
|
|
*
|
|
* To activate the FocusManager, simply call `Ext.FocusManager.enable();`. In turn, you may
|
|
* deactivate the FocusManager by subsequently calling `Ext.FocusManager.disable();`. The
|
|
* FocusManager is disabled by default.
|
|
*
|
|
* To enable the optional focus frame, pass `true` or `{focusFrame: true}` to {@link #method-enable}.
|
|
*
|
|
* Another feature of the FocusManager is to provide basic keyboard focus navigation scoped to any {@link Ext.container.Container}
|
|
* that would like to have navigation between its child {@link Ext.Component}'s.
|
|
*
|
|
* @author Jarred Nicholls <jarred@sencha.com>
|
|
* @docauthor Jarred Nicholls <jarred@sencha.com>
|
|
*/
|
|
Ext.define('Ext.FocusManager', {
|
|
singleton: true,
|
|
alternateClassName: ['Ext.FocusMgr' ],
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @property {Boolean} enabled
|
|
* Whether or not the FocusManager is currently enabled
|
|
*/
|
|
enabled: false,
|
|
|
|
/**
|
|
* @property {Ext.Component} focusedCmp
|
|
* The currently focused component.
|
|
*/
|
|
|
|
focusElementCls: Ext.baseCSSPrefix + 'focus-element',
|
|
|
|
focusFrameCls: Ext.baseCSSPrefix + 'focus-frame',
|
|
|
|
/**
|
|
* @property {String[]} whitelist
|
|
* A list of xtypes that should ignore certain navigation input keys and
|
|
* allow for the default browser event/behavior. These input keys include:
|
|
*
|
|
* 1. Backspace
|
|
* 2. Delete
|
|
* 3. Left
|
|
* 4. Right
|
|
* 5. Up
|
|
* 6. Down
|
|
*
|
|
* The FocusManager will not attempt to navigate when a component is an xtype (or descendents thereof)
|
|
* that belongs to this whitelist. E.g., an {@link Ext.form.field.Text} should allow
|
|
* the user to move the input cursor left and right, and to delete characters, etc.
|
|
*/
|
|
whitelist: [
|
|
'textfield'
|
|
],
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
CQ = Ext.ComponentQuery;
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforecomponentfocus
|
|
* Fires before a component becomes focused. Return `false` to prevent
|
|
* the component from gaining focus.
|
|
* @param {Ext.FocusManager} fm A reference to the FocusManager singleton
|
|
* @param {Ext.Component} cmp The component that is being focused
|
|
* @param {Ext.Component} previousCmp The component that was previously focused,
|
|
* or `undefined` if there was no previously focused component.
|
|
*/
|
|
'beforecomponentfocus',
|
|
|
|
/**
|
|
* @event componentfocus
|
|
* Fires after a component becomes focused.
|
|
* @param {Ext.FocusManager} fm A reference to the FocusManager singleton
|
|
* @param {Ext.Component} cmp The component that has been focused
|
|
* @param {Ext.Component} previousCmp The component that was previously focused,
|
|
* or `undefined` if there was no previously focused component.
|
|
*/
|
|
'componentfocus',
|
|
|
|
/**
|
|
* @event disable
|
|
* Fires when the FocusManager is disabled
|
|
* @param {Ext.FocusManager} fm A reference to the FocusManager singleton
|
|
*/
|
|
'disable',
|
|
|
|
/**
|
|
* @event enable
|
|
* Fires when the FocusManager is enabled
|
|
* @param {Ext.FocusManager} fm A reference to the FocusManager singleton
|
|
*/
|
|
'enable'
|
|
);
|
|
|
|
me.focusTask = new Ext.util.DelayedTask(me.handleComponentFocus, me);
|
|
|
|
// Gain control on Component focus, blur, hide and destroy
|
|
Ext.override(Ext.AbstractComponent, {
|
|
onFocus: function() {
|
|
this.callParent(arguments);
|
|
if (me.enabled && this.hasFocus) {
|
|
Array.prototype.unshift.call(arguments, this);
|
|
me.onComponentFocus.apply(me, arguments);
|
|
}
|
|
},
|
|
onBlur: function() {
|
|
this.callParent(arguments);
|
|
if (me.enabled && !this.hasFocus) {
|
|
Array.prototype.unshift.call(arguments, this);
|
|
me.onComponentBlur.apply(me, arguments);
|
|
}
|
|
},
|
|
onDestroy: function() {
|
|
this.callParent(arguments);
|
|
if (me.enabled) {
|
|
Array.prototype.unshift.call(arguments, this);
|
|
me.onComponentDestroy.apply(me, arguments);
|
|
}
|
|
}
|
|
});
|
|
Ext.override(Ext.Component, {
|
|
afterHide: function() {
|
|
this.callParent(arguments);
|
|
if (me.enabled) {
|
|
Array.prototype.unshift.call(arguments, this);
|
|
me.onComponentHide.apply(me, arguments);
|
|
}
|
|
}
|
|
});
|
|
// Setup KeyNav that's bound to document to catch all
|
|
// unhandled/bubbled key events for navigation
|
|
me.keyNav = new Ext.util.KeyNav(Ext.getDoc(), {
|
|
disabled: true,
|
|
scope: me,
|
|
|
|
backspace: me.focusLast,
|
|
enter: me.navigateIn,
|
|
esc: me.navigateOut,
|
|
tab: me.navigateSiblings,
|
|
space: me.navigateIn,
|
|
del: me.focusLast,
|
|
left: me.navigateSiblings,
|
|
right: me.navigateSiblings,
|
|
down: me.navigateSiblings,
|
|
up: me.navigateSiblings
|
|
});
|
|
|
|
me.focusData = {};
|
|
me.subscribers = new Ext.util.HashMap();
|
|
me.focusChain = {};
|
|
|
|
// Setup some ComponentQuery pseudos
|
|
Ext.apply(CQ.pseudos, {
|
|
// Return the single next focusable sibling from the current idx in either direction (step -1 or 1)
|
|
nextFocus: function(cmps, idx, step) {
|
|
step = step || 1;
|
|
idx = parseInt(idx, 10);
|
|
|
|
var len = cmps.length,
|
|
i = idx, c;
|
|
|
|
for (;;) {
|
|
// Increment index, and loop round if off either end
|
|
if ((i += step) >= len) {
|
|
i = 0;
|
|
} else if (i < 0) {
|
|
i = len - 1;
|
|
}
|
|
|
|
// As soon as we loop back to the starting index, give up, there are no focusable siblings.
|
|
if (i === idx) {
|
|
return [];
|
|
}
|
|
|
|
// If we have found a focusable sibling, return it
|
|
if ((c = cmps[i]).isFocusable()) {
|
|
return [c];
|
|
}
|
|
}
|
|
|
|
return [];
|
|
},
|
|
|
|
prevFocus: function(cmps, idx) {
|
|
return this.nextFocus(cmps, idx, -1);
|
|
},
|
|
|
|
root: function(cmps) {
|
|
var len = cmps.length,
|
|
results = [],
|
|
i = 0,
|
|
c;
|
|
|
|
for (; i < len; i++) {
|
|
c = cmps[i];
|
|
if (!c.ownerCt) {
|
|
results.push(c);
|
|
}
|
|
}
|
|
|
|
return results;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Adds the specified xtype to the {@link #whitelist}.
|
|
* @param {String/String[]} xtype Adds the xtype(s) to the {@link #whitelist}.
|
|
*/
|
|
addXTypeToWhitelist: function(xtype) {
|
|
var me = this;
|
|
|
|
if (Ext.isArray(xtype)) {
|
|
Ext.Array.forEach(xtype, me.addXTypeToWhitelist, me);
|
|
return;
|
|
}
|
|
|
|
if (!Ext.Array.contains(me.whitelist, xtype)) {
|
|
me.whitelist.push(xtype);
|
|
}
|
|
},
|
|
|
|
clearComponent: function(cmp) {
|
|
clearTimeout(this.cmpFocusDelay);
|
|
if (!cmp.isDestroyed) {
|
|
cmp.blur();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disables the FocusManager by turning of all automatic focus management and keyboard navigation
|
|
*/
|
|
disable: function() {
|
|
var me = this;
|
|
|
|
if (!me.enabled) {
|
|
return;
|
|
}
|
|
|
|
delete me.options;
|
|
me.enabled = false;
|
|
|
|
me.removeDOM();
|
|
|
|
// Stop handling key navigation
|
|
me.keyNav.disable();
|
|
|
|
me.fireEvent('disable', me);
|
|
},
|
|
|
|
/**
|
|
* Enables the FocusManager by turning on all automatic focus management and keyboard navigation
|
|
* @param {Boolean/Object} options Either `true`/`false` to turn on the focus frame, or an object
|
|
* with the following options:
|
|
* @param {Boolean} [options.focusFrame=false] `true` to show the focus frame around a component when it is focused.
|
|
*/
|
|
enable: function(options) {
|
|
var me = this;
|
|
|
|
if (options === true) {
|
|
options = { focusFrame: true };
|
|
}
|
|
me.options = options = options || {};
|
|
|
|
if (me.enabled) {
|
|
return;
|
|
}
|
|
|
|
// When calling addFocusListener on Containers, the FocusManager must be enabled, otherwise it won't do it.
|
|
me.enabled = true;
|
|
me.initDOM(options);
|
|
|
|
// Start handling key navigation
|
|
me.keyNav.enable();
|
|
|
|
// Finally, let's focus our global focus el so we start fresh
|
|
me.focusEl.focus();
|
|
delete me.focusedCmp;
|
|
|
|
me.fireEvent('enable', me);
|
|
},
|
|
|
|
focusLast: function(e) {
|
|
var me = this;
|
|
|
|
if (me.isWhitelisted(me.focusedCmp)) {
|
|
return true;
|
|
}
|
|
|
|
// Go back to last focused item
|
|
if (me.previousFocusedCmp) {
|
|
me.previousFocusedCmp.focus();
|
|
}
|
|
},
|
|
|
|
getRootComponents: function() {
|
|
var CQ = Ext.ComponentQuery,
|
|
inline = CQ.query(':focusable:root:not([floating])'),
|
|
floating = CQ.query(':focusable:root[floating]');
|
|
|
|
// Floating items should go to the top of our root stack, and be ordered
|
|
// by their z-index (highest first)
|
|
floating.sort(function(a, b) {
|
|
return a.el.getZIndex() > b.el.getZIndex();
|
|
});
|
|
|
|
return floating.concat(inline);
|
|
},
|
|
|
|
initDOM: function(options) {
|
|
var me = this,
|
|
cls = me.focusFrameCls,
|
|
needListeners = Ext.ComponentQuery.query('{getFocusEl()}:not([focusListenerAdded])'),
|
|
i = 0, len = needListeners.length;
|
|
|
|
if (!Ext.isReady) {
|
|
return Ext.onReady(me.initDOM, me);
|
|
}
|
|
|
|
// When we are enabled, we must ensure that all Components which return a focusEl that is *not naturally focusable*
|
|
// have focus/blur listeners enabled to then trigger onFocus/onBlur handling so that we get to know about their focus action.
|
|
// These listeners are not added at initialization unless the FocusManager is enabled at that time.
|
|
for (; i < len; i++) {
|
|
needListeners[i].addFocusListener();
|
|
}
|
|
|
|
// Make the document body the global focus element
|
|
if (!me.focusEl) {
|
|
me.focusEl = Ext.getBody();
|
|
me.focusEl.dom.tabIndex = -1;
|
|
}
|
|
|
|
// Create global focus frame
|
|
if (!me.focusFrame && options.focusFrame) {
|
|
me.focusFrame = Ext.getBody().createChild({
|
|
cls: cls,
|
|
children: [
|
|
{ cls: cls + '-top' },
|
|
{ cls: cls + '-bottom' },
|
|
{ cls: cls + '-left' },
|
|
{ cls: cls + '-right' }
|
|
],
|
|
style: 'top: -100px; left: -100px;'
|
|
});
|
|
me.focusFrame.setVisibilityMode(Ext.Element.DISPLAY);
|
|
me.focusFrame.hide().setLocalXY(0, 0);
|
|
}
|
|
},
|
|
|
|
isWhitelisted: function(cmp) {
|
|
return cmp && Ext.Array.some(this.whitelist, function(x) {
|
|
return cmp.isXType(x);
|
|
});
|
|
},
|
|
|
|
navigateIn: function(e) {
|
|
var me = this,
|
|
focusedCmp = me.focusedCmp,
|
|
defaultRoot,
|
|
firstChild;
|
|
|
|
if (me.isWhitelisted(focusedCmp)) {
|
|
return true;
|
|
}
|
|
|
|
if (!focusedCmp) {
|
|
// No focus yet, so focus the first root cmp on the page
|
|
defaultRoot = me.getRootComponents()[0];
|
|
if (defaultRoot) {
|
|
// If the default root is based upon the body, then it will already be focused, and will not fire a focus event to
|
|
// trigger its own onFocus processing, so we have to programatically blur it first.
|
|
if (defaultRoot.getFocusEl() === me.focusEl) {
|
|
me.focusEl.blur();
|
|
}
|
|
defaultRoot.focus();
|
|
}
|
|
} else {
|
|
// Drill into child ref items of the focused cmp, if applicable.
|
|
// This works for any Component with a getRefItems implementation.
|
|
firstChild = focusedCmp.hasFocus ? Ext.ComponentQuery.query('>:focusable', focusedCmp)[0] : focusedCmp;
|
|
if (firstChild) {
|
|
firstChild.focus();
|
|
} else {
|
|
// Let's try to fire a click event, as if it came from the mouse
|
|
if (Ext.isFunction(focusedCmp.onClick)) {
|
|
e.button = 0;
|
|
focusedCmp.onClick(e);
|
|
if (focusedCmp.isVisible(true)) {
|
|
focusedCmp.focus();
|
|
} else {
|
|
me.navigateOut();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
navigateOut: function(e) {
|
|
var me = this,
|
|
parent;
|
|
|
|
if (!me.focusedCmp || !(parent = me.focusedCmp.up(':focusable'))) {
|
|
me.focusEl.focus();
|
|
} else {
|
|
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) {
|
|
var me = this,
|
|
src = source || me,
|
|
key = e.getKey(),
|
|
EO = Ext.EventObject,
|
|
goBack = e.shiftKey || key == EO.LEFT || key == EO.UP,
|
|
checkWhitelist = key == EO.LEFT || key == EO.RIGHT || key == EO.UP || key == EO.DOWN,
|
|
nextSelector = goBack ? 'prev' : 'next',
|
|
idx, next, focusedCmp, siblings;
|
|
|
|
focusedCmp = (src.focusedCmp && src.focusedCmp.comp) || src.focusedCmp;
|
|
if (!focusedCmp && !parent) {
|
|
return true;
|
|
}
|
|
|
|
if (checkWhitelist && me.isWhitelisted(focusedCmp)) {
|
|
return true;
|
|
}
|
|
|
|
// If no focused Component, or a root level one was focused, then siblings are root components.
|
|
if (!focusedCmp || focusedCmp.is(':root')) {
|
|
siblings = me.getRootComponents();
|
|
} else {
|
|
// Else if the focused component has a parent, get siblings from there
|
|
parent = parent || focusedCmp.up();
|
|
if (parent) {
|
|
siblings = parent.getRefItems();
|
|
}
|
|
}
|
|
|
|
|
|
// Navigate if we have found siblings.
|
|
if (siblings) {
|
|
idx = focusedCmp ? Ext.Array.indexOf(siblings, focusedCmp) : -1;
|
|
next = Ext.ComponentQuery.query(':' + nextSelector + 'Focus(' + idx + ')', siblings)[0];
|
|
if (next && focusedCmp !== next) {
|
|
next.focus();
|
|
return next;
|
|
}
|
|
}
|
|
},
|
|
|
|
onComponentBlur: function(cmp, e) {
|
|
var me = this;
|
|
|
|
if (me.focusedCmp === cmp) {
|
|
me.previousFocusedCmp = cmp;
|
|
delete me.focusedCmp;
|
|
}
|
|
|
|
if (me.focusFrame) {
|
|
me.focusFrame.hide();
|
|
}
|
|
},
|
|
|
|
onComponentFocus: function(cmp, e) {
|
|
var me = this,
|
|
chain = me.focusChain,
|
|
parent;
|
|
|
|
if (!cmp.isFocusable()) {
|
|
me.clearComponent(cmp);
|
|
|
|
// Check our focus chain, so we don't run into a never ending recursion
|
|
// If we've attempted (unsuccessfully) to focus this component before,
|
|
// then we're caught in a loop of child->parent->...->child and we
|
|
// need to cut the loop off rather than feed into it.
|
|
if (chain[cmp.id]) {
|
|
return;
|
|
}
|
|
|
|
// Try to focus the parent instead
|
|
parent = cmp.up();
|
|
if (parent) {
|
|
// Add component to our focus chain to detect infinite focus loop
|
|
// before we fire off an attempt to focus our parent.
|
|
// See the comments above.
|
|
chain[cmp.id] = true;
|
|
parent.focus();
|
|
}
|
|
|
|
return;
|
|
}
|
|
// Clear our focus chain when we have a focusable component
|
|
me.focusChain = {};
|
|
|
|
// Capture the focusEl to frame now.
|
|
// Button returns its encapsulating element during the focus phase
|
|
// So that element gets styled and framed.
|
|
me.focusTask.delay(10, null, null, [cmp, cmp.getFocusEl()]);
|
|
},
|
|
|
|
handleComponentFocus: function(cmp, focusEl) {
|
|
var me = this,
|
|
cls,
|
|
ff,
|
|
box,
|
|
bt,
|
|
bl,
|
|
bw,
|
|
bh,
|
|
ft,
|
|
fb,
|
|
fl,
|
|
fr;
|
|
|
|
if (me.fireEvent('beforecomponentfocus', me, cmp, me.previousFocusedCmp) === false) {
|
|
me.clearComponent(cmp);
|
|
return;
|
|
}
|
|
|
|
me.focusedCmp = cmp;
|
|
|
|
// If we have a focus frame, show it around the focused component
|
|
if (me.shouldShowFocusFrame(cmp)) {
|
|
cls = '.' + me.focusFrameCls + '-';
|
|
ff = me.focusFrame;
|
|
|
|
// focusEl may in fact be a descendant component to which to delegate focus
|
|
box = (focusEl.dom ? focusEl : focusEl.el).getBox();
|
|
|
|
// Size the focus frame's t/b/l/r according to the box
|
|
// This leaves a hole in the middle of the frame so user
|
|
// interaction w/ the mouse can continue
|
|
bt = box.top;
|
|
bl = box.left;
|
|
bw = box.width;
|
|
bh = box.height;
|
|
ft = ff.child(cls + 'top');
|
|
fb = ff.child(cls + 'bottom');
|
|
fl = ff.child(cls + 'left');
|
|
fr = ff.child(cls + 'right');
|
|
|
|
ft.setWidth(bw).setLocalXY(bl, bt);
|
|
fb.setWidth(bw).setLocalXY(bl, bt + bh - 2);
|
|
fl.setHeight(bh - 2).setLocalXY(bl, bt + 2);
|
|
fr.setHeight(bh - 2).setLocalXY(bl + bw - 2, bt + 2);
|
|
|
|
ff.show();
|
|
}
|
|
|
|
me.fireEvent('componentfocus', me, cmp, me.previousFocusedCmp);
|
|
},
|
|
|
|
onComponentHide: function(cmp) {
|
|
var me = this,
|
|
cmpHadFocus = false,
|
|
focusedCmp = me.focusedCmp,
|
|
parent;
|
|
|
|
if (focusedCmp) {
|
|
// See if the Component being hidden was the focused Component, or owns the focused Component
|
|
// In these cases, focus needs to be removed from the focused Component to the nearest focusable ancestor
|
|
cmpHadFocus = cmp.hasFocus || (cmp.isContainer && cmp.isAncestor(me.focusedCmp));
|
|
}
|
|
|
|
me.clearComponent(cmp);
|
|
|
|
// Move focus onto the nearest focusable ancestor, or this is there is none
|
|
if (cmpHadFocus && (parent = cmp.up(':focusable'))) {
|
|
parent.focus();
|
|
} else {
|
|
me.focusEl.focus();
|
|
}
|
|
},
|
|
|
|
onComponentDestroy: function() {
|
|
|
|
},
|
|
|
|
removeDOM: function() {
|
|
var me = this;
|
|
|
|
// If we are still enabled globally, or there are still subscribers
|
|
// then we will halt here, since our DOM stuff is still being used
|
|
if (me.enabled || me.subscribers.length) {
|
|
return;
|
|
}
|
|
|
|
Ext.destroy(
|
|
me.focusFrame
|
|
);
|
|
delete me.focusEl;
|
|
delete me.focusFrame;
|
|
},
|
|
|
|
/**
|
|
* Removes the specified xtype from the {@link #whitelist}.
|
|
* @param {String/String[]} xtype Removes the xtype(s) from the {@link #whitelist}.
|
|
*/
|
|
removeXTypeFromWhitelist: function(xtype) {
|
|
var me = this;
|
|
|
|
if (Ext.isArray(xtype)) {
|
|
Ext.Array.forEach(xtype, me.removeXTypeFromWhitelist, me);
|
|
return;
|
|
}
|
|
|
|
Ext.Array.remove(me.whitelist, xtype);
|
|
},
|
|
|
|
setupSubscriberKeys: function(container, keys) {
|
|
var me = this,
|
|
el = container.getFocusEl(),
|
|
scope = keys.scope,
|
|
handlers = {
|
|
backspace: me.focusLast,
|
|
enter: me.navigateIn,
|
|
esc: me.navigateOut,
|
|
scope: me
|
|
},
|
|
|
|
navSiblings = function(e) {
|
|
if (me.focusedCmp === container) {
|
|
// Root the sibling navigation to this container, so that we
|
|
// can automatically dive into the container, rather than forcing
|
|
// the user to hit the enter key to dive in.
|
|
return me.navigateSiblings(e, me, container);
|
|
} else {
|
|
return me.navigateSiblings(e);
|
|
}
|
|
};
|
|
|
|
Ext.iterate(keys, function(key, cb) {
|
|
handlers[key] = function(e) {
|
|
var ret = navSiblings(e);
|
|
|
|
if (Ext.isFunction(cb) && cb.call(scope || container, e, ret) === true) {
|
|
return true;
|
|
}
|
|
|
|
return ret;
|
|
};
|
|
}, me);
|
|
|
|
return new Ext.util.KeyNav(el, handlers);
|
|
},
|
|
|
|
shouldShowFocusFrame: function(cmp) {
|
|
var me = this,
|
|
opts = me.options || {};
|
|
|
|
// Do not show a focus frame if
|
|
// 1. We are configured not to.
|
|
// 2. No Component was passed
|
|
if (!me.focusFrame || !cmp) {
|
|
return false;
|
|
}
|
|
|
|
// Global trumps
|
|
if (opts.focusFrame) {
|
|
return true;
|
|
}
|
|
|
|
if (me.focusData[cmp.id].focusFrame) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Simple helper class for easily creating image components. This renders an image tag to
|
|
* the DOM with the configured src.
|
|
*
|
|
* {@img Ext.Img/Ext.Img.png Ext.Img component}
|
|
*
|
|
* ## Example usage:
|
|
*
|
|
* var changingImage = Ext.create('Ext.Img', {
|
|
* src: 'http://www.sencha.com/img/20110215-feat-html5.png',
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* // change the src of the image programmatically
|
|
* changingImage.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');
|
|
*
|
|
* By default, only an img element is rendered and that is this component's primary
|
|
* {@link Ext.AbstractComponent#getEl element}. If the {@link Ext.AbstractComponent#autoEl} property
|
|
* is other than 'img' (the default), the a child img element will be added to the primary
|
|
* element. This can be used to create a wrapper element around the img.
|
|
*
|
|
* ## Wrapping the img in a div:
|
|
*
|
|
* var wrappedImage = Ext.create('Ext.Img', {
|
|
* src: 'http://www.sencha.com/img/20110215-feat-html5.png',
|
|
* autoEl: 'div', // wrap in a div
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.Img', {
|
|
extend: Ext.Component ,
|
|
alias: ['widget.image', 'widget.imagecomponent'],
|
|
|
|
autoEl: 'img',
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'img',
|
|
|
|
/**
|
|
* @cfg {String} src
|
|
* The image src.
|
|
*/
|
|
src: '',
|
|
|
|
/**
|
|
* @cfg {String} alt
|
|
* The descriptive text for non-visual UI description.
|
|
*/
|
|
alt: '',
|
|
|
|
/**
|
|
* @cfg {String} title
|
|
* Specifies addtional information about the image.
|
|
*/
|
|
title: '',
|
|
|
|
/**
|
|
* @cfg {String} imgCls
|
|
* Optional CSS classes to add to the img element.
|
|
*/
|
|
imgCls: '',
|
|
|
|
/**
|
|
* @cfg {Number/String} glyph
|
|
* A numeric unicode character code to serve as the image. If this option is used
|
|
* The image will be rendered using a div with innerHTML set to the html entity
|
|
* for the given character code. The default font-family for glyphs can be set
|
|
* globally using {@link Ext#setGlyphFontFamily Ext.setGlyphFontFamily()}. Alternatively,
|
|
* this config option accepts a string with the charCode and font-family separated by
|
|
* the `@` symbol. For example '65@My Font Family'.
|
|
*/
|
|
|
|
initComponent: function() {
|
|
if (this.glyph) {
|
|
this.autoEl = 'div';
|
|
}
|
|
this.callParent();
|
|
},
|
|
|
|
getElConfig: function() {
|
|
var me = this,
|
|
config = me.callParent(),
|
|
glyphFontFamily = Ext._glyphFontFamily,
|
|
glyph = me.glyph,
|
|
img, glyphParts;
|
|
|
|
// It is sometimes helpful (like in a panel header icon) to have the img wrapped
|
|
// by a div. If our autoEl is not 'img' then we just add an img child to the el.
|
|
if (me.autoEl == 'img') {
|
|
img = config;
|
|
} else if (me.glyph) {
|
|
if (typeof glyph === 'string') {
|
|
glyphParts = glyph.split('@');
|
|
glyph = glyphParts[0];
|
|
glyphFontFamily = glyphParts[1];
|
|
}
|
|
config.html = '&#' + glyph + ';';
|
|
if (glyphFontFamily) {
|
|
config.style = 'font-family:' + glyphFontFamily;
|
|
}
|
|
} else {
|
|
config.cn = [img = {
|
|
tag: 'img',
|
|
id: me.id + '-img'
|
|
}];
|
|
}
|
|
|
|
if (img) {
|
|
if (me.imgCls) {
|
|
img.cls = (img.cls ? img.cls + ' ' : '') + me.imgCls;
|
|
}
|
|
|
|
img.src = me.src || Ext.BLANK_IMAGE_URL;
|
|
}
|
|
|
|
if (me.alt) {
|
|
(img || config).alt = me.alt;
|
|
}
|
|
if (me.title) {
|
|
(img || config).title = me.title;
|
|
}
|
|
|
|
return config;
|
|
},
|
|
|
|
onRender: function () {
|
|
var me = this,
|
|
el;
|
|
|
|
me.callParent(arguments);
|
|
|
|
el = me.el;
|
|
me.imgEl = (me.autoEl == 'img') ? el : el.getById(me.id + '-img');
|
|
},
|
|
|
|
onDestroy: function () {
|
|
Ext.destroy(this.imgEl);
|
|
this.imgEl = null;
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* Updates the {@link #src} of the image.
|
|
* @param {String} src
|
|
*/
|
|
setSrc: function(src) {
|
|
var me = this,
|
|
imgEl = me.imgEl;
|
|
|
|
me.src = src;
|
|
|
|
if (imgEl) {
|
|
imgEl.dom.src = src || Ext.BLANK_IMAGE_URL;
|
|
}
|
|
},
|
|
|
|
setGlyph: function(glyph) {
|
|
var me = this,
|
|
glyphFontFamily = Ext._glyphFontFamily,
|
|
glyphParts, dom;
|
|
|
|
if (glyph != me.glyph) {
|
|
if (typeof glyph === 'string') {
|
|
glyphParts = glyph.split('@');
|
|
glyph = glyphParts[0];
|
|
glyphFontFamily = glyphParts[1];
|
|
}
|
|
|
|
dom = me.el.dom;
|
|
|
|
dom.innerHTML = '&#' + glyph + ';';
|
|
if (glyphFontFamily) {
|
|
dom.style = 'font-family:' + glyphFontFamily;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is used as a mixin.
|
|
*
|
|
* This class is to be used to provide basic methods for binding/unbinding stores to other
|
|
* classes. In general it will not be used directly.
|
|
*/
|
|
Ext.define('Ext.util.Bindable', {
|
|
|
|
/**
|
|
* Binds a store to this instance.
|
|
* @param {Ext.data.AbstractStore/String} [store] The store to bind or ID of the store.
|
|
* When no store given (or when `null` or `undefined` passed), unbinds the existing store.
|
|
*/
|
|
bindStore: function(store, initial, propertyName) {
|
|
// Private params
|
|
// @param {Boolean} [initial=false] True to not remove listeners from existing store.
|
|
// @param {String} [propertyName="store"] The property in this object under which to cache the passed Store.
|
|
propertyName = propertyName || 'store';
|
|
|
|
var me = this,
|
|
oldStore = me[propertyName];
|
|
|
|
if (!initial && oldStore) {
|
|
// Perform implementation-specific unbinding operations *before* possible Store destruction.
|
|
me.onUnbindStore(oldStore, initial, propertyName);
|
|
|
|
if (store !== oldStore && oldStore.autoDestroy) {
|
|
oldStore.destroyStore();
|
|
} else {
|
|
me.unbindStoreListeners(oldStore);
|
|
}
|
|
}
|
|
if (store) {
|
|
store = Ext.data.StoreManager.lookup(store);
|
|
me.bindStoreListeners(store);
|
|
me.onBindStore(store, initial, propertyName);
|
|
}
|
|
me[propertyName] = store || null;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Gets the current store instance.
|
|
* @return {Ext.data.AbstractStore} The store, null if one does not exist.
|
|
*/
|
|
getStore: function(){
|
|
return this.store;
|
|
},
|
|
|
|
/**
|
|
* Unbinds listeners from this component to the store. By default it will remove
|
|
* anything bound by the bindStoreListeners method, however it can be overridden
|
|
* in a subclass to provide any more complicated handling.
|
|
* @protected
|
|
* @param {Ext.data.AbstractStore} store The store to unbind from
|
|
*/
|
|
unbindStoreListeners: function(store) {
|
|
// Can be overridden in the subclass for more complex removal
|
|
var listeners = this.storeListeners;
|
|
if (listeners) {
|
|
store.un(listeners);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Binds listeners for this component to the store. By default it will add
|
|
* anything bound by the getStoreListeners method, however it can be overridden
|
|
* in a subclass to provide any more complicated handling.
|
|
* @protected
|
|
* @param {Ext.data.AbstractStore} store The store to bind to
|
|
*/
|
|
bindStoreListeners: function(store) {
|
|
// Can be overridden in the subclass for more complex binding
|
|
var me = this,
|
|
listeners = Ext.apply({}, me.getStoreListeners(store));
|
|
|
|
if (!listeners.scope) {
|
|
listeners.scope = me;
|
|
}
|
|
me.storeListeners = listeners;
|
|
store.on(listeners);
|
|
},
|
|
|
|
/**
|
|
* Gets the listeners to bind to a new store.
|
|
* @protected
|
|
* @param {Ext.data.Store} store The Store which is being bound to for which a listeners object should be returned.
|
|
* @return {Object} The listeners to be bound to the store in object literal form. The scope
|
|
* may be omitted, it is assumed to be the current instance.
|
|
*/
|
|
getStoreListeners: Ext.emptyFn,
|
|
|
|
/**
|
|
* Template method, it is called when an existing store is unbound
|
|
* from the current instance.
|
|
* @protected
|
|
* @param {Ext.data.AbstractStore} store The store being unbound
|
|
* @param {Boolean} initial True if this store is being bound as initialization of the instance.
|
|
*/
|
|
onUnbindStore: Ext.emptyFn,
|
|
|
|
/**
|
|
* Template method, it is called when a new store is bound
|
|
* to the current instance.
|
|
* @protected
|
|
* @param {Ext.data.AbstractStore} store The store being bound
|
|
* @param {Boolean} initial True if this store is being bound as initialization of the instance.
|
|
*/
|
|
onBindStore: Ext.emptyFn
|
|
});
|
|
|
|
/**
|
|
* A modal, floating Component which may be shown above a specified {@link Ext.Component Component} while loading data.
|
|
* When shown, the configured owning Component will be covered with a modality mask, and the LoadMask's {@link #msg} will be
|
|
* displayed centered, accompanied by a spinner image.
|
|
*
|
|
* If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with
|
|
* the Store's loading process.
|
|
*
|
|
* Because this is a floating Component, its z-index will be managed by the global {@link Ext.WindowManager ZIndexManager}
|
|
* object, and upon show, it will place itsef at the top of the hierarchy.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* // Basic mask:
|
|
* var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});
|
|
* myMask.show();
|
|
*/
|
|
Ext.define('Ext.LoadMask', {
|
|
|
|
extend: Ext.Component ,
|
|
|
|
alias: 'widget.loadmask',
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
floating: Ext.util.Floating ,
|
|
bindable: Ext.util.Bindable
|
|
},
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Ext.Component} target The Component you wish to mask. The the mask will be automatically sized
|
|
* upon Component resize, and the message box will be kept centered.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.data.Store} store
|
|
* Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
|
|
* hidden on either load success, or load fail.
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} [msg="Loading..."]
|
|
* The text to display in a centered loading message box.
|
|
*/
|
|
msg : 'Loading...',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} [msgCls="x-mask-loading"]
|
|
* The CSS class to apply to the loading message element.
|
|
*/
|
|
msgCls : Ext.baseCSSPrefix + 'mask-loading',
|
|
|
|
/**
|
|
* @cfg {String} [maskCls="x-mask"]
|
|
* The CSS class to apply to the mask element
|
|
*/
|
|
maskCls: Ext.baseCSSPrefix + 'mask',
|
|
|
|
/**
|
|
* @cfg {Boolean} [useMsg=true]
|
|
* Whether or not to use a loading message class or simply mask the bound element.
|
|
*/
|
|
useMsg: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [useTargetEl=false]
|
|
* True to mask the {@link Ext.Component#getTargetEl targetEl} of the bound Component. By default,
|
|
* the {@link Ext.Component#getEl el} will be masked.
|
|
*/
|
|
useTargetEl: false,
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'mask-msg',
|
|
|
|
childEls: [
|
|
'msgEl',
|
|
'msgTextEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<div id="{id}-msgEl" class="{[values.$comp.msgCls]} ',
|
|
Ext.baseCSSPrefix, 'mask-msg-inner{childElCls}">',
|
|
'<div id="{id}-msgTextEl" class="', Ext.baseCSSPrefix ,'mask-msg-text',
|
|
'{childElCls}"></div>',
|
|
'</div>'
|
|
],
|
|
|
|
// @private Obviously, it's floating.
|
|
floating: {
|
|
shadow: 'frame'
|
|
},
|
|
|
|
// @private Masks are not focusable
|
|
focusOnToFront: false,
|
|
|
|
// When we put the load mask to the front of it's owner, we generally don't want to also bring the owning
|
|
// component to the front.
|
|
bringParentToFront: false,
|
|
|
|
/**
|
|
* Creates new LoadMask.
|
|
* @param {Object} [config] The config object.
|
|
*/
|
|
constructor : function(config) {
|
|
var me = this,
|
|
comp;
|
|
|
|
if (arguments.length === 2) {
|
|
comp = config;
|
|
config = arguments[1];
|
|
} else {
|
|
comp = config.target;
|
|
}
|
|
|
|
// Element support to be deprecated
|
|
if (!comp.isComponent) {
|
|
comp = Ext.get(comp);
|
|
this.isElement = true;
|
|
}
|
|
|
|
me.ownerCt = comp;
|
|
if (!this.isElement) {
|
|
me.bindComponent(comp);
|
|
}
|
|
me.callParent([config]);
|
|
|
|
if (me.store) {
|
|
me.bindStore(me.store, true);
|
|
}
|
|
},
|
|
|
|
bindComponent: function(comp) {
|
|
var me = this,
|
|
listeners = {
|
|
scope: this,
|
|
resize: me.sizeMask,
|
|
added: me.onComponentAdded,
|
|
removed: me.onComponentRemoved
|
|
};
|
|
|
|
if (comp.floating) {
|
|
listeners.move = me.sizeMask;
|
|
me.activeOwner = comp;
|
|
} else if (comp.ownerCt) {
|
|
me.onComponentAdded(comp.ownerCt);
|
|
} else {
|
|
// if the target comp is non-floating and under a floating comp don't bring the load mask to the front of the stack
|
|
me.preventBringToFront = true;
|
|
}
|
|
|
|
me.mon(comp, listeners);
|
|
|
|
// subscribe to the observer that manages the hierarchy
|
|
me.mon(me.hierarchyEventSource, {
|
|
show: me.onContainerShow,
|
|
hide: me.onContainerHide,
|
|
expand: me.onContainerExpand,
|
|
collapse: me.onContainerCollapse,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
onComponentAdded: function(owner) {
|
|
var me = this;
|
|
delete me.activeOwner;
|
|
me.floatParent = owner;
|
|
if (!owner.floating) {
|
|
owner = owner.up('[floating]');
|
|
}
|
|
if (owner) {
|
|
me.activeOwner = owner;
|
|
me.mon(owner, 'move', me.sizeMask, me);
|
|
} else {
|
|
me.preventBringToFront = true;
|
|
}
|
|
owner = me.floatParent.ownerCt;
|
|
if (me.rendered && me.isVisible() && owner) {
|
|
me.floatOwner = owner;
|
|
me.mon(owner, 'afterlayout', me.sizeMask, me, {single: true});
|
|
}
|
|
},
|
|
|
|
onComponentRemoved: function(owner) {
|
|
var me = this,
|
|
activeOwner = me.activeOwner,
|
|
floatOwner = me.floatOwner;
|
|
|
|
if (activeOwner) {
|
|
me.mun(activeOwner, 'move', me.sizeMask, me);
|
|
}
|
|
if (floatOwner) {
|
|
me.mun(floatOwner, 'afterlayout', me.sizeMask, me);
|
|
}
|
|
delete me.activeOwner;
|
|
delete me.floatOwner;
|
|
},
|
|
|
|
afterRender: function() {
|
|
this.callParent(arguments);
|
|
this.container = this.floatParent.getContentTarget();
|
|
},
|
|
|
|
onContainerShow: function(container) {
|
|
if (this.isActiveContainer(container)) {
|
|
this.onComponentShow();
|
|
}
|
|
},
|
|
|
|
onContainerHide: function(container) {
|
|
if (this.isActiveContainer(container)) {
|
|
this.onComponentHide();
|
|
}
|
|
},
|
|
|
|
onContainerExpand: function(container) {
|
|
if (this.isActiveContainer(container)) {
|
|
this.onComponentShow();
|
|
}
|
|
},
|
|
|
|
onContainerCollapse: function(container) {
|
|
if (this.isActiveContainer(container)) {
|
|
this.onComponentHide();
|
|
}
|
|
},
|
|
|
|
isActiveContainer: function(container) {
|
|
return this.isDescendantOf(container);
|
|
},
|
|
|
|
onComponentHide: function() {
|
|
var me = this;
|
|
|
|
if (me.rendered && me.isVisible()) {
|
|
me.hide();
|
|
me.showNext = true;
|
|
}
|
|
},
|
|
|
|
onComponentShow: function() {
|
|
if (this.showNext) {
|
|
this.show();
|
|
}
|
|
delete this.showNext;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.
|
|
*/
|
|
sizeMask: function() {
|
|
var me = this,
|
|
target;
|
|
|
|
if (me.rendered && me.isVisible()) {
|
|
me.center();
|
|
|
|
target = me.getMaskTarget();
|
|
me.getMaskEl().show().setSize(target.getSize()).alignTo(target, 'tl-tl');
|
|
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Changes the data store bound to this LoadMask.
|
|
* @param {Ext.data.Store} store The store to bind to this LoadMask
|
|
*/
|
|
bindStore : function(store, initial) {
|
|
var me = this;
|
|
me.mixins.bindable.bindStore.apply(me, arguments);
|
|
store = me.store;
|
|
if (store && store.isLoading()) {
|
|
me.onBeforeLoad();
|
|
}
|
|
},
|
|
|
|
getStoreListeners: function(store) {
|
|
var load = this.onLoad,
|
|
beforeLoad = this.onBeforeLoad,
|
|
result = {
|
|
// Fired when a range is requested for rendering that is not in the cache
|
|
cachemiss: beforeLoad,
|
|
|
|
// Fired when a range for rendering which was previously missing from the cache is loaded
|
|
cachefilled: load
|
|
};
|
|
|
|
// Only need to mask on load if the proxy is asynchronous - ie: Ajax/JsonP
|
|
if (!store.proxy.isSynchronous) {
|
|
result.beforeLoad = beforeLoad;
|
|
result.load = load;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
onDisable : function() {
|
|
this.callParent(arguments);
|
|
if (this.loading) {
|
|
this.onLoad();
|
|
}
|
|
},
|
|
|
|
getOwner: function() {
|
|
return this.ownerCt || this.floatParent;
|
|
},
|
|
|
|
getMaskTarget: function() {
|
|
var owner = this.getOwner();
|
|
return this.useTargetEl ? owner.getTargetEl() : owner.getEl();
|
|
},
|
|
|
|
// @private
|
|
onBeforeLoad : function() {
|
|
var me = this,
|
|
owner = me.getOwner(),
|
|
origin;
|
|
|
|
if (!me.disabled) {
|
|
me.loading = true;
|
|
// If the owning Component has not been layed out, defer so that the ZIndexManager
|
|
// gets to read its layed out size when sizing the modal mask
|
|
if (owner.componentLayoutCounter) {
|
|
me.maybeShow();
|
|
} else {
|
|
// The code below is a 'run-once' interceptor.
|
|
origin = owner.afterComponentLayout;
|
|
owner.afterComponentLayout = function() {
|
|
owner.afterComponentLayout = origin;
|
|
origin.apply(owner, arguments);
|
|
me.maybeShow();
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
maybeShow: function() {
|
|
var me = this,
|
|
owner = me.getOwner();
|
|
|
|
if (!owner.isVisible(true)) {
|
|
me.showNext = true;
|
|
}
|
|
else if (me.loading && owner.rendered) {
|
|
me.show();
|
|
}
|
|
},
|
|
|
|
getMaskEl: function(){
|
|
var me = this;
|
|
return me.maskEl || (me.maskEl = me.el.insertSibling({
|
|
cls: me.maskCls,
|
|
style: {
|
|
zIndex: me.el.getStyle('zIndex') - 2
|
|
}
|
|
}, 'before'));
|
|
},
|
|
|
|
onShow: function() {
|
|
var me = this,
|
|
msgEl = me.msgEl;
|
|
|
|
me.callParent(arguments);
|
|
me.loading = true;
|
|
|
|
if (me.useMsg) {
|
|
msgEl.show();
|
|
me.msgTextEl.update(me.msg);
|
|
} else {
|
|
msgEl.parent().hide();
|
|
}
|
|
},
|
|
|
|
hide: function() {
|
|
// Element support to be deprecated
|
|
if (this.isElement) {
|
|
this.ownerCt.unmask();
|
|
this.fireEvent('hide', this);
|
|
return;
|
|
}
|
|
delete this.showNext;
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
onHide: function() {
|
|
this.callParent();
|
|
this.getMaskEl().hide();
|
|
},
|
|
|
|
show: function() {
|
|
// Element support to be deprecated
|
|
if (this.isElement) {
|
|
this.ownerCt.mask(this.useMsg ? this.msg : '', this.msgCls);
|
|
this.fireEvent('show', this);
|
|
return;
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
afterShow: function() {
|
|
this.callParent(arguments);
|
|
this.sizeMask();
|
|
},
|
|
|
|
setZIndex: function(index) {
|
|
var me = this,
|
|
owner = me.activeOwner;
|
|
|
|
if (owner) {
|
|
// it seems silly to add 1 to have it subtracted in the call below,
|
|
// but this allows the x-mask el to have the correct z-index (same as the component)
|
|
// so instead of directly changing the zIndexStack just get the z-index of the owner comp
|
|
index = parseInt(owner.el.getStyle('zIndex'), 10) + 1;
|
|
}
|
|
|
|
me.getMaskEl().setStyle('zIndex', index - 1);
|
|
return me.mixins.floating.setZIndex.apply(me, arguments);
|
|
},
|
|
|
|
// @private
|
|
onLoad : function() {
|
|
this.loading = false;
|
|
this.hide();
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this;
|
|
|
|
if (me.isElement) {
|
|
me.ownerCt.unmask();
|
|
}
|
|
|
|
Ext.destroy(me.maskEl);
|
|
me.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Associations enable you to express relationships between different {@link Ext.data.Model Models}. Let's say we're
|
|
* writing an ecommerce system where Users can make Orders - there's a relationship between these Models that we can
|
|
* express like this:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email'],
|
|
*
|
|
* hasMany: {model: 'Order', name: 'orders'}
|
|
* });
|
|
*
|
|
* Ext.define('Order', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'user_id', 'status', 'price'],
|
|
*
|
|
* belongsTo: 'User'
|
|
* });
|
|
*
|
|
* We've set up two models - User and Order - and told them about each other. You can set up as many associations on
|
|
* each Model as you need using the two default types - {@link Ext.data.HasManyAssociation hasMany} and {@link
|
|
* Ext.data.BelongsToAssociation belongsTo}. There's much more detail on the usage of each of those inside their
|
|
* documentation pages. If you're not familiar with Models already, {@link Ext.data.Model there is plenty on those too}.
|
|
*
|
|
* **Further Reading**
|
|
*
|
|
* - {@link Ext.data.association.HasMany hasMany associations}
|
|
* - {@link Ext.data.association.BelongsTo belongsTo associations}
|
|
* - {@link Ext.data.association.HasOne hasOne associations}
|
|
* - {@link Ext.data.Model using Models}
|
|
*
|
|
* # Self association models
|
|
*
|
|
* We can also have models that create parent/child associations between the same type. Below is an example, where
|
|
* groups can be nested inside other groups:
|
|
*
|
|
* // Server Data
|
|
* {
|
|
* "groups": {
|
|
* "id": 10,
|
|
* "parent_id": 100,
|
|
* "name": "Main Group",
|
|
* "parent_group": {
|
|
* "id": 100,
|
|
* "parent_id": null,
|
|
* "name": "Parent Group"
|
|
* },
|
|
* "nested" : {
|
|
* "child_groups": [{
|
|
* "id": 2,
|
|
* "parent_id": 10,
|
|
* "name": "Child Group 1"
|
|
* },{
|
|
* "id": 3,
|
|
* "parent_id": 10,
|
|
* "name": "Child Group 2"
|
|
* },{
|
|
* "id": 4,
|
|
* "parent_id": 10,
|
|
* "name": "Child Group 3"
|
|
* }]
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* // Client code
|
|
* Ext.define('Group', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'parent_id', 'name'],
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url: 'data.json',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'groups'
|
|
* }
|
|
* },
|
|
* associations: [{
|
|
* type: 'hasMany',
|
|
* model: 'Group',
|
|
* primaryKey: 'id',
|
|
* foreignKey: 'parent_id',
|
|
* autoLoad: true,
|
|
* associationKey: 'nested.child_groups' // read child data from nested.child_groups
|
|
* }, {
|
|
* type: 'belongsTo',
|
|
* model: 'Group',
|
|
* primaryKey: 'id',
|
|
* foreignKey: 'parent_id',
|
|
* associationKey: 'parent_group' // read parent data from parent_group
|
|
* }]
|
|
* });
|
|
*
|
|
* Ext.onReady(function(){
|
|
*
|
|
* Group.load(10, {
|
|
* success: function(group){
|
|
* console.log(group.getGroup().get('name'));
|
|
*
|
|
* group.groups().each(function(rec){
|
|
* console.log(rec.get('name'));
|
|
* });
|
|
* }
|
|
* });
|
|
*
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.association.Association', {
|
|
alternateClassName: 'Ext.data.Association',
|
|
/**
|
|
* @cfg {String} ownerModel
|
|
* The string name of the model that owns the association.
|
|
*
|
|
* **NB!** This config is required when instantiating the Association directly.
|
|
* However, it cannot be used at all when defining the association as a config
|
|
* object inside Model, because the name of the model itself will be supplied
|
|
* automatically as the value of this config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} associatedModel
|
|
* The string name of the model that is being associated with.
|
|
*
|
|
* **NB!** This config is required when instantiating the Association directly.
|
|
* When defining the association as a config object inside Model, the #model
|
|
* configuration will shadow this config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} model
|
|
* The string name of the model that is being associated with.
|
|
*
|
|
* This config option is to be used when defining the association as a config
|
|
* object within Model. The value is then mapped to #associatedModel when
|
|
* Association is instantiated inside Model.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} primaryKey
|
|
* The name of the primary key on the associated model. In general this will be the
|
|
* {@link Ext.data.Model#idProperty} of the Model.
|
|
*/
|
|
primaryKey: 'id',
|
|
|
|
/**
|
|
* @cfg {Ext.data.reader.Reader} reader
|
|
* A special reader to read associated data
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} associationKey
|
|
* The name of the property in the data to read the association from. Defaults to the name of the associated model.
|
|
*/
|
|
|
|
associationKeyFunction : null,
|
|
|
|
defaultReaderType: 'json',
|
|
|
|
isAssociation: true,
|
|
|
|
initialConfig: null,
|
|
|
|
statics: {
|
|
AUTO_ID: 1000,
|
|
|
|
create: function(association){
|
|
if (Ext.isString(association)) {
|
|
association = {
|
|
type: association
|
|
};
|
|
}
|
|
|
|
switch (association.type) {
|
|
case 'belongsTo':
|
|
return new Ext.data.association.BelongsTo(association);
|
|
case 'hasMany':
|
|
return new Ext.data.association.HasMany(association);
|
|
case 'hasOne':
|
|
return new Ext.data.association.HasOne(association);
|
|
//TODO Add this back when it's fixed
|
|
// case 'polymorphic':
|
|
// return Ext.create('Ext.data.PolymorphicAssociation', association);
|
|
default:
|
|
}
|
|
return association;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates the Association object.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, config);
|
|
|
|
var me = this,
|
|
types = Ext.ModelManager.types,
|
|
ownerName = config.ownerModel,
|
|
associatedName = config.associatedModel,
|
|
ownerModel = types[ownerName],
|
|
associatedModel = types[associatedName],
|
|
associationKey = config.associationKey,
|
|
keyReIdx;
|
|
|
|
if (associationKey) {
|
|
keyReIdx = String(associationKey).search(/[\[\.]/);
|
|
|
|
if (keyReIdx >= 0) {
|
|
me.associationKeyFunction = Ext.functionFactory('obj', 'return obj' + (keyReIdx > 0 ? '.' : '') + associationKey);
|
|
}
|
|
}
|
|
|
|
me.initialConfig = config;
|
|
|
|
|
|
me.ownerModel = ownerModel;
|
|
me.associatedModel = associatedModel;
|
|
|
|
/**
|
|
* @property {String} ownerName
|
|
* The name of the model that 'owns' the association
|
|
*/
|
|
|
|
/**
|
|
* @property {String} associatedName
|
|
* The name of the model is on the other end of the association (e.g. if a User model hasMany Orders, this is
|
|
* 'Order')
|
|
*/
|
|
|
|
Ext.applyIf(me, {
|
|
ownerName : ownerName,
|
|
associatedName: associatedName
|
|
});
|
|
|
|
me.associationId = 'association' + (++me.statics().AUTO_ID);
|
|
},
|
|
|
|
/**
|
|
* Get a specialized reader for reading associated data
|
|
* @return {Ext.data.reader.Reader} The reader, null if not supplied
|
|
*/
|
|
getReader: function(){
|
|
var me = this,
|
|
reader = me.reader,
|
|
model = me.associatedModel;
|
|
|
|
if (reader) {
|
|
if (Ext.isString(reader)) {
|
|
reader = {
|
|
type: reader
|
|
};
|
|
}
|
|
if (reader.isReader) {
|
|
reader.setModel(model);
|
|
} else {
|
|
Ext.applyIf(reader, {
|
|
model: model,
|
|
type : me.defaultReaderType
|
|
});
|
|
}
|
|
me.reader = Ext.createByAlias('reader.' + reader.type, reader);
|
|
}
|
|
return me.reader || null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.ModelManager
|
|
|
|
The ModelManager keeps track of all {@link Ext.data.Model} types defined in your application.
|
|
|
|
__Creating Model Instances__
|
|
|
|
Model instances can be created by using the {@link Ext#create Ext.create} method. Ext.create replaces
|
|
the deprecated {@link #create Ext.ModelManager.create} method. It is also possible to create a model instance
|
|
this by using the Model type directly. The following 3 snippets are equivalent:
|
|
|
|
Ext.define('User', {
|
|
extend: 'Ext.data.Model',
|
|
fields: ['first', 'last']
|
|
});
|
|
|
|
// method 1, create using Ext.create (recommended)
|
|
Ext.create('User', {
|
|
first: 'Ed',
|
|
last: 'Spencer'
|
|
});
|
|
|
|
// method 2, create through the manager (deprecated)
|
|
Ext.ModelManager.create({
|
|
first: 'Ed',
|
|
last: 'Spencer'
|
|
}, 'User');
|
|
|
|
// method 3, create on the type directly
|
|
new User({
|
|
first: 'Ed',
|
|
last: 'Spencer'
|
|
});
|
|
|
|
__Accessing Model Types__
|
|
|
|
A reference to a Model type can be obtained by using the {@link #getModel} function. Since models types
|
|
are normal classes, you can access the type directly. The following snippets are equivalent:
|
|
|
|
Ext.define('User', {
|
|
extend: 'Ext.data.Model',
|
|
fields: ['first', 'last']
|
|
});
|
|
|
|
// method 1, access model type through the manager
|
|
var UserType = Ext.ModelManager.getModel('User');
|
|
|
|
// method 2, reference the type directly
|
|
var UserType = User;
|
|
|
|
* @markdown
|
|
* @singleton
|
|
*/
|
|
Ext.define('Ext.ModelManager', {
|
|
extend: Ext.AbstractManager ,
|
|
alternateClassName: 'Ext.ModelMgr',
|
|
|
|
|
|
singleton: true,
|
|
|
|
typeName: 'mtype',
|
|
|
|
/**
|
|
* Private stack of associations that must be created once their associated model has been defined
|
|
* @property {Ext.data.association.Association[]} associationStack
|
|
*/
|
|
associationStack: [],
|
|
|
|
/**
|
|
* Registers a model definition. All model plugins marked with isDefault: true are bootstrapped
|
|
* immediately, as are any addition plugins defined in the model config.
|
|
* @private
|
|
*/
|
|
registerType: function(name, config) {
|
|
var proto = config.prototype,
|
|
model;
|
|
if (proto && proto.isModel) {
|
|
// registering an already defined model
|
|
model = config;
|
|
} else {
|
|
// passing in a configuration
|
|
if (!config.extend) {
|
|
config.extend = 'Ext.data.Model';
|
|
}
|
|
model = Ext.define(name, config);
|
|
}
|
|
this.types[name] = model;
|
|
return model;
|
|
},
|
|
|
|
/**
|
|
* Unregisters a model definition. Generally used by stores with implicit model classes.
|
|
* @private
|
|
*/
|
|
unregisterType: function(name) {
|
|
delete this.types[name];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Private callback called whenever a model has just been defined. This sets up any associations
|
|
* that were waiting for the given model to be defined
|
|
* @param {Function} model The model that was just created
|
|
*/
|
|
onModelDefined: function(model) {
|
|
var stack = this.associationStack,
|
|
length = stack.length,
|
|
create = [],
|
|
association, i, created;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
association = stack[i];
|
|
|
|
if (association.associatedModel == model.modelName) {
|
|
create.push(association);
|
|
}
|
|
}
|
|
|
|
for (i = 0, length = create.length; i < length; i++) {
|
|
created = create[i];
|
|
this.types[created.ownerModel].prototype.associations.add(Ext.data.association.Association.create(created));
|
|
Ext.Array.remove(stack, created);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Registers an association where one of the models defined doesn't exist yet.
|
|
* The ModelManager will check when new models are registered if it can link them
|
|
* together
|
|
* @private
|
|
* @param {Ext.data.association.Association} association The association
|
|
*/
|
|
registerDeferredAssociation: function(association){
|
|
this.associationStack.push(association);
|
|
},
|
|
|
|
/**
|
|
* Returns the {@link Ext.data.Model} class for a given model name
|
|
* @param {String/Object} id The classname of the model or the model class itself.
|
|
* @return {Ext.data.Model} a model class.
|
|
*/
|
|
getModel: function(id) {
|
|
var model = id;
|
|
if (typeof model == 'string') {
|
|
model = this.types[model];
|
|
}
|
|
return model;
|
|
},
|
|
|
|
/**
|
|
* Creates a new instance of a Model using the given data. Deprecated, instead use Ext.create:
|
|
*
|
|
* Ext.create('User', {
|
|
* first: 'Ed',
|
|
* last: 'Spencer'
|
|
* });
|
|
*
|
|
* @deprecated 4.1 Use {@link Ext#create Ext.create} instead.
|
|
*
|
|
* @param {Object} data Data to initialize the Model's fields with
|
|
* @param {String} name The name of the model to create
|
|
* @param {Number} id (Optional) unique id of the Model instance (see {@link Ext.data.Model})
|
|
*/
|
|
create: function(config, name, id) {
|
|
var Con = typeof name == 'function' ? name : this.types[name || config.name];
|
|
|
|
return new Con(config, id);
|
|
}
|
|
}, function() {
|
|
|
|
/**
|
|
* Old way for creating Model classes. Instead use:
|
|
*
|
|
* Ext.define("MyModel", {
|
|
* extend: "Ext.data.Model",
|
|
* fields: []
|
|
* });
|
|
*
|
|
* @param {String} name Name of the Model class.
|
|
* @param {Object} config A configuration object for the Model you wish to create.
|
|
* @return {Ext.data.Model} The newly registered Model
|
|
* @member Ext
|
|
* @deprecated 4.0.0 Use {@link Ext#define} instead.
|
|
*/
|
|
Ext.regModel = function() {
|
|
return this.ModelManager.registerType.apply(this.ModelManager, arguments);
|
|
};
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.ProgressBar', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.progressbar'],
|
|
|
|
extend: Ext.layout.component.Auto ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'progressbar',
|
|
|
|
beginLayout: function (ownerContext) {
|
|
var me = this,
|
|
i, textEls;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (!ownerContext.textEls) {
|
|
textEls = me.owner.textEl; // an Ext.Element or CompositeList (raw DOM el's)
|
|
|
|
if (textEls.isComposite) {
|
|
ownerContext.textEls = [];
|
|
textEls = textEls.elements;
|
|
for (i = textEls.length; i--; ) {
|
|
ownerContext.textEls[i] = ownerContext.getEl(Ext.get(textEls[i]));
|
|
}
|
|
} else {
|
|
ownerContext.textEls = [ ownerContext.getEl('textEl') ];
|
|
}
|
|
}
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
i, textEls, width;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (Ext.isNumber(width = ownerContext.getProp('width'))) {
|
|
width -= ownerContext.getBorderInfo().width;
|
|
textEls = ownerContext.textEls;
|
|
|
|
for (i = textEls.length; i--; ) {
|
|
textEls[i].setWidth(width);
|
|
}
|
|
} else {
|
|
me.done = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
|
|
*
|
|
* In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the progress bar
|
|
* as needed from your own code. This method is most appropriate when you want to show progress throughout an operation
|
|
* that has predictable points of interest at which you can update the control.
|
|
*
|
|
* In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it once the
|
|
* operation is complete. You can optionally have the progress bar wait for a specific amount of time and then clear
|
|
* itself. Automatic mode is most appropriate for timed operations or asynchronous operations in which you have no need
|
|
* for indicating intermediate progress.
|
|
*
|
|
* @example
|
|
* var p = Ext.create('Ext.ProgressBar', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 300
|
|
* });
|
|
*
|
|
* // Wait for 5 seconds, then update the status el (progress bar will auto-reset)
|
|
* p.wait({
|
|
* interval: 500, //bar will move fast!
|
|
* duration: 50000,
|
|
* increment: 15,
|
|
* text: 'Updating...',
|
|
* scope: this,
|
|
* fn: function(){
|
|
* p.updateText('Done!');
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.ProgressBar', {
|
|
extend: Ext.Component ,
|
|
alias: 'widget.progressbar',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Number} [value=0]
|
|
* A floating point value between 0 and 1 (e.g., .5)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} textEl
|
|
* The element to render the progress text to (defaults to the progress bar's internal text element)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} id
|
|
* The progress bar element's id (defaults to an auto-generated id)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-progress']
|
|
* The base CSS class to apply to the progress bar's wrapper element.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'progress',
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} animate
|
|
* True to animate the progress bar during transitions, or an animation configuration
|
|
* (see the {@link #method-animate} method for details).
|
|
*/
|
|
animate: false,
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The text shown in the progress bar.
|
|
*/
|
|
text: '',
|
|
|
|
// private
|
|
waitTimer: null,
|
|
|
|
childEls: [
|
|
'bar'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<tpl if="internalText">',
|
|
'<div class="{baseCls}-text {baseCls}-text-back">{text}</div>',
|
|
'</tpl>',
|
|
'<div id="{id}-bar" class="{baseCls}-bar {baseCls}-bar-{ui}" style="width:{percentage}%">',
|
|
'<tpl if="internalText">',
|
|
'<div class="{baseCls}-text">',
|
|
'<div>{text}</div>',
|
|
'</div>',
|
|
'</tpl>',
|
|
'</div>'
|
|
],
|
|
|
|
componentLayout: 'progressbar',
|
|
|
|
// private
|
|
initComponent: function() {
|
|
this.callParent();
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event update
|
|
* Fires after each update interval
|
|
* @param {Ext.ProgressBar} this
|
|
* @param {Number} value The current progress value
|
|
* @param {String} text The current progress text
|
|
*/
|
|
"update"
|
|
);
|
|
},
|
|
|
|
initRenderData: function() {
|
|
var me = this;
|
|
return Ext.apply(me.callParent(), {
|
|
internalText : !me.hasOwnProperty('textEl'),
|
|
text : me.text || ' ',
|
|
percentage : me.value ? me.value * 100 : 0
|
|
});
|
|
},
|
|
|
|
onRender : function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// External text display
|
|
if (me.textEl) {
|
|
me.textEl = Ext.get(me.textEl);
|
|
me.updateText(me.text);
|
|
}
|
|
// Inline text display
|
|
else {
|
|
// This produces a composite w/2 el's (which is why we cannot use childEls or
|
|
// renderSelectors):
|
|
me.textEl = me.el.select('.' + me.baseCls + '-text');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates the progress bar value, and optionally its text. If the text argument is not specified, any existing text
|
|
* value will be unchanged. To blank out existing text, pass ''. Note that even if the progress bar value exceeds 1,
|
|
* it will never automatically reset -- you are responsible for determining when the progress is complete and
|
|
* calling {@link #reset} to clear and/or hide the control.
|
|
* @param {Number} [value=0] A floating point value between 0 and 1 (e.g., .5)
|
|
* @param {String} [text=''] The string to display in the progress text element
|
|
* @param {Boolean} [animate=false] Whether to animate the transition of the progress bar. If this value is not
|
|
* specified, the default for the class is used
|
|
* @return {Ext.ProgressBar} this
|
|
*/
|
|
updateProgress: function(value, text, animate) {
|
|
var me = this,
|
|
oldValue = me.value;
|
|
|
|
me.value = value || 0;
|
|
if (text) {
|
|
me.updateText(text);
|
|
}
|
|
if (me.rendered && !me.isDestroyed) {
|
|
if (animate === true || (animate !== false && me.animate)) {
|
|
me.bar.stopAnimation();
|
|
me.bar.animate(Ext.apply({
|
|
from: {
|
|
width: (oldValue * 100) + '%'
|
|
},
|
|
to: {
|
|
width: (me.value * 100) + '%'
|
|
}
|
|
}, me.animate));
|
|
} else {
|
|
me.bar.setStyle('width', (me.value * 100) + '%');
|
|
}
|
|
}
|
|
me.fireEvent('update', me, me.value, text);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Updates the progress bar text. If specified, textEl will be updated, otherwise the progress bar itself will
|
|
* display the updated text.
|
|
* @param {String} [text=''] The string to display in the progress text element
|
|
* @return {Ext.ProgressBar} this
|
|
*/
|
|
updateText: function(text) {
|
|
var me = this;
|
|
|
|
me.text = text;
|
|
if (me.rendered) {
|
|
me.textEl.update(me.text);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
applyText : function(text) {
|
|
this.updateText(text);
|
|
},
|
|
|
|
getText: function(){
|
|
return this.text;
|
|
},
|
|
|
|
/**
|
|
* Initiates an auto-updating progress bar. A duration can be specified, in which case the progress bar will
|
|
* automatically reset after a fixed amount of time and optionally call a callback function if specified. If no
|
|
* duration is passed in, then the progress bar will run indefinitely and must be manually cleared by calling
|
|
* {@link #reset}.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* var p = new Ext.ProgressBar({
|
|
* renderTo: 'my-el'
|
|
* });
|
|
*
|
|
* //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
|
|
* var p = Ext.create('Ext.ProgressBar', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 300
|
|
* });
|
|
*
|
|
* //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
|
|
* p.wait({
|
|
* interval: 500, //bar will move fast!
|
|
* duration: 50000,
|
|
* increment: 15,
|
|
* text: 'Updating...',
|
|
* scope: this,
|
|
* fn: function(){
|
|
* p.updateText('Done!');
|
|
* }
|
|
* });
|
|
*
|
|
* //Or update indefinitely until some async action completes, then reset manually
|
|
* p.wait();
|
|
* myAction.on('complete', function(){
|
|
* p.reset();
|
|
* p.updateText('Done!');
|
|
* });
|
|
*
|
|
* @param {Object} config (optional) Configuration options
|
|
* @param {Number} config.duration The length of time in milliseconds that the progress bar should
|
|
* run before resetting itself (defaults to undefined, in which case it will run indefinitely
|
|
* until reset is called)
|
|
* @param {Number} config.interval The length of time in milliseconds between each progress update
|
|
* (defaults to 1000 ms)
|
|
* @param {Boolean} config.animate Whether to animate the transition of the progress bar. If this
|
|
* value is not specified, the default for the class is used.
|
|
* @param {Number} config.increment The number of progress update segments to display within the
|
|
* progress bar (defaults to 10). If the bar reaches the end and is still updating, it will
|
|
* automatically wrap back to the beginning.
|
|
* @param {String} config.text Optional text to display in the progress bar element (defaults to '').
|
|
* @param {Function} config.fn A callback function to execute after the progress bar finishes auto-
|
|
* updating. The function will be called with no arguments. This function will be ignored if
|
|
* duration is not specified since in that case the progress bar can only be stopped programmatically,
|
|
* so any required function should be called by the same code after it resets the progress bar.
|
|
* @param {Object} config.scope The scope that is passed to the callback function (only applies when
|
|
* duration and fn are both passed).
|
|
* @return {Ext.ProgressBar} this
|
|
*/
|
|
wait: function(o) {
|
|
var me = this, scope;
|
|
|
|
if (!me.waitTimer) {
|
|
scope = me;
|
|
o = o || {};
|
|
me.updateText(o.text);
|
|
me.waitTimer = Ext.TaskManager.start({
|
|
run: function(i){
|
|
var inc = o.increment || 10;
|
|
i -= 1;
|
|
me.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
|
|
},
|
|
interval: o.interval || 1000,
|
|
duration: o.duration,
|
|
onStop: function(){
|
|
if (o.fn) {
|
|
o.fn.apply(o.scope || me);
|
|
}
|
|
me.reset();
|
|
},
|
|
scope: scope
|
|
});
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the progress bar is currently in a {@link #wait} operation
|
|
* @return {Boolean} True if waiting, else false
|
|
*/
|
|
isWaiting: function(){
|
|
return this.waitTimer !== null;
|
|
},
|
|
|
|
/**
|
|
* Resets the progress bar value to 0 and text to empty string. If hide = true, the progress bar will also be hidden
|
|
* (using the {@link #hideMode} property internally).
|
|
* @param {Boolean} [hide=false] True to hide the progress bar.
|
|
* @return {Ext.ProgressBar} this
|
|
*/
|
|
reset: function(hide){
|
|
var me = this;
|
|
|
|
me.updateProgress(0);
|
|
me.clearTimer();
|
|
if (hide === true) {
|
|
me.hide();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// private
|
|
clearTimer: function(){
|
|
var me = this;
|
|
|
|
if (me.waitTimer) {
|
|
me.waitTimer.onStop = null; //prevent recursion
|
|
Ext.TaskManager.stop(me.waitTimer);
|
|
me.waitTimer = null;
|
|
}
|
|
},
|
|
|
|
onDestroy: function(){
|
|
var me = this,
|
|
bar = me.bar;
|
|
|
|
me.clearTimer();
|
|
if (me.rendered) {
|
|
if (me.textEl.isComposite) {
|
|
me.textEl.clear();
|
|
}
|
|
Ext.destroyMembers(me, 'textEl', 'progressBar');
|
|
if (bar && me.animate) {
|
|
bar.stopAnimation();
|
|
}
|
|
}
|
|
me.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private utility class that manages the internal Shadow cache.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.ShadowPool', {
|
|
singleton: true,
|
|
|
|
|
|
markup: (function() {
|
|
return Ext.String.format(
|
|
'<div class="{0}{1}-shadow" role="presentation"></div>',
|
|
Ext.baseCSSPrefix,
|
|
Ext.isIE && !Ext.supports.CSS3BoxShadow ? 'ie' : 'css'
|
|
);
|
|
}()),
|
|
|
|
shadows: [],
|
|
|
|
pull: function() {
|
|
var sh = this.shadows.shift();
|
|
if (!sh) {
|
|
sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, this.markup));
|
|
sh.autoBoxAdjust = false;
|
|
}
|
|
return sh;
|
|
},
|
|
|
|
push: function(sh) {
|
|
this.shadows.push(sh);
|
|
},
|
|
|
|
reset: function() {
|
|
var shadows = [].concat(this.shadows),
|
|
s,
|
|
sLen = shadows.length;
|
|
|
|
for (s = 0; s < sLen; s++) {
|
|
shadows[s].remove();
|
|
}
|
|
|
|
this.shadows = [];
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Simple class that can provide a shadow effect for any element. Note that the element
|
|
* MUST be absolutely positioned, and the shadow does not provide any shimming. This
|
|
* should be used only in simple cases - for more advanced functionality that can also
|
|
* provide the same shadow effect, see the {@link Ext.Layer} class.
|
|
*/
|
|
Ext.define('Ext.Shadow', {
|
|
|
|
|
|
localXYNames: {
|
|
get: 'getLocalXY',
|
|
set: 'setLocalXY'
|
|
},
|
|
|
|
/**
|
|
* Creates new Shadow.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this,
|
|
adjusts,
|
|
offset,
|
|
rad;
|
|
|
|
Ext.apply(me, config);
|
|
if (!Ext.isString(me.mode)) {
|
|
me.mode = me.defaultMode;
|
|
}
|
|
offset = me.offset;
|
|
rad = Math.floor(offset / 2);
|
|
me.opacity = 50;
|
|
switch (me.mode.toLowerCase()) {
|
|
// all this hideous nonsense calculates the various offsets for shadows
|
|
case "drop":
|
|
if (Ext.supports.CSS3BoxShadow) {
|
|
adjusts = {
|
|
t: offset,
|
|
l: offset,
|
|
h: -offset,
|
|
w: -offset
|
|
};
|
|
}
|
|
else {
|
|
adjusts = {
|
|
t: -rad,
|
|
l: -rad,
|
|
h: -rad,
|
|
w: -rad
|
|
};
|
|
}
|
|
break;
|
|
case "sides":
|
|
if (Ext.supports.CSS3BoxShadow) {
|
|
adjusts = {
|
|
t: offset,
|
|
l: 0,
|
|
h: -offset,
|
|
w: 0
|
|
};
|
|
}
|
|
else {
|
|
adjusts = {
|
|
t: - (1 + rad),
|
|
l: 1 + rad - 2 * offset,
|
|
h: -1,
|
|
w: rad - 1
|
|
};
|
|
}
|
|
break;
|
|
case "frame":
|
|
if (Ext.supports.CSS3BoxShadow) {
|
|
adjusts = {
|
|
t: 0,
|
|
l: 0,
|
|
h: 0,
|
|
w: 0
|
|
};
|
|
}
|
|
else {
|
|
adjusts = {
|
|
t: 1 + rad - 2 * offset,
|
|
l: 1 + rad - 2 * offset,
|
|
h: offset - rad - 1,
|
|
w: offset - rad - 1
|
|
};
|
|
}
|
|
break;
|
|
case "bottom":
|
|
if (Ext.supports.CSS3BoxShadow) {
|
|
adjusts = {
|
|
t: offset,
|
|
l: 0,
|
|
h: -offset,
|
|
w: 0
|
|
};
|
|
}
|
|
else {
|
|
adjusts = {
|
|
t: offset,
|
|
l: 0,
|
|
h: 0,
|
|
w: 0
|
|
};
|
|
}
|
|
break;
|
|
}
|
|
me.adjusts = adjusts;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;
|
|
* @return {Number[]} Top, right, bottom and left shadow size.
|
|
*/
|
|
getShadowSize: function() {
|
|
var me = this,
|
|
offset = me.el ? me.offset : 0,
|
|
result = [offset, offset, offset, offset],
|
|
mode = me.mode.toLowerCase();
|
|
|
|
// There are only offsets if the shadow element is present.
|
|
if (me.el && mode !== 'frame') {
|
|
result[0] = 0;
|
|
if (mode == 'drop') {
|
|
result[3] = 0;
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} mode
|
|
* The shadow display mode. Supports the following options:
|
|
*
|
|
* - sides : Shadow displays on both sides and bottom only
|
|
* - frame : Shadow displays equally on all four sides
|
|
* - drop : Traditional bottom-right drop shadow
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} offset
|
|
* The number of pixels to offset the shadow from the element
|
|
*/
|
|
offset: 4,
|
|
|
|
// private
|
|
defaultMode: "drop",
|
|
|
|
// private - CSS property to use to set the box shadow
|
|
boxShadowProperty: (function() {
|
|
var property = 'boxShadow',
|
|
style = document.documentElement.style;
|
|
|
|
if (!('boxShadow' in style)) {
|
|
if ('WebkitBoxShadow' in style) {
|
|
// Safari prior to version 5.1 and Chrome prior to version 10
|
|
property = 'WebkitBoxShadow';
|
|
}
|
|
else if ('MozBoxShadow' in style) {
|
|
// FF 3.5 & 3.6
|
|
property = 'MozBoxShadow';
|
|
}
|
|
}
|
|
|
|
return property;
|
|
}()),
|
|
|
|
/**
|
|
* Displays the shadow under the target element
|
|
* @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
|
|
*/
|
|
show: function(target) {
|
|
var me = this,
|
|
index, xy;
|
|
|
|
target = Ext.get(target);
|
|
|
|
// DOM reads first...
|
|
index = (parseInt(target.getStyle("z-index"), 10) - 1) || 0;
|
|
xy = target[me.localXYNames.get]();
|
|
|
|
// DOM writes...
|
|
if (!me.el) {
|
|
me.el = Ext.ShadowPool.pull();
|
|
// Shadow elements are shared, so fix position to match current owner
|
|
if (me.fixed) {
|
|
me.el.dom.style.position = 'fixed';
|
|
} else {
|
|
me.el.dom.style.position = '';
|
|
}
|
|
if (me.el.dom.nextSibling != target.dom) {
|
|
me.el.insertBefore(target);
|
|
}
|
|
}
|
|
me.el.setStyle("z-index", me.zIndex || index);
|
|
if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
|
|
me.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
|
|
}
|
|
me.realign(
|
|
xy[0],
|
|
xy[1],
|
|
target.dom.offsetWidth,
|
|
target.dom.offsetHeight
|
|
);
|
|
me.el.dom.style.display = "block";
|
|
},
|
|
|
|
/**
|
|
* Returns true if the shadow is visible, else false
|
|
*/
|
|
isVisible: function() {
|
|
return this.el ? true: false;
|
|
},
|
|
|
|
/**
|
|
* Direct alignment when values are already available. Show must be called at least once before
|
|
* calling this method to ensure it is initialized.
|
|
* @param {Number} left The target element left position
|
|
* @param {Number} top The target element top position
|
|
* @param {Number} width The target element width
|
|
* @param {Number} height The target element height
|
|
*/
|
|
realign: function(l, t, targetWidth, targetHeight) {
|
|
if (!this.el) {
|
|
return;
|
|
}
|
|
var adjusts = this.adjusts,
|
|
el = this.el,
|
|
targetStyle = el.dom.style,
|
|
shadowWidth,
|
|
shadowHeight,
|
|
sws,
|
|
shs;
|
|
|
|
el[this.localXYNames.set](l + adjusts.l, t + adjusts.t);
|
|
shadowWidth = Math.max(targetWidth + adjusts.w, 0);
|
|
shadowHeight = Math.max(targetHeight + adjusts.h, 0);
|
|
sws = shadowWidth + "px";
|
|
shs = shadowHeight + "px";
|
|
if (targetStyle.width != sws || targetStyle.height != shs) {
|
|
targetStyle.width = sws;
|
|
targetStyle.height = shs;
|
|
|
|
if (Ext.supports.CSS3BoxShadow) {
|
|
targetStyle[this.boxShadowProperty] = '0 0 ' + (this.offset + 2) + 'px #888';
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides this shadow
|
|
*/
|
|
hide: function() {
|
|
var me = this;
|
|
|
|
if (me.el) {
|
|
me.el.dom.style.display = "none";
|
|
Ext.ShadowPool.push(me.el);
|
|
delete me.el;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adjust the z-index of this shadow
|
|
* @param {Number} zindex The new z-index
|
|
*/
|
|
setZIndex: function(z) {
|
|
this.zIndex = z;
|
|
if (this.el) {
|
|
this.el.setStyle("z-index", z);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the opacity of the shadow
|
|
* @param {Number} opacity The opacity
|
|
*/
|
|
setOpacity: function(opacity){
|
|
if (this.el) {
|
|
if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
|
|
opacity = Math.floor(opacity * 100 / 2) / 100;
|
|
}
|
|
this.opacity = opacity;
|
|
this.el.setOpacity(opacity);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is a base class for an event domain. In the context of MVC, an "event domain"
|
|
* is one or more base classes that fire events to which a Controller wants to listen. A
|
|
* controller listens to events by describing the selectors for events of interest to it.
|
|
*
|
|
* Matching selectors to the firer of an event is one key aspect that defines an event
|
|
* domain. All event domain instances must provide a `match` method that tests selectors
|
|
* against the event firer.
|
|
*
|
|
* When an event domain instance is created (typically as a `singleton`), its `type`
|
|
* property is used to catalog the domain in the
|
|
* {@link Ext.app.EventDomain#instances Ext.app.EventDomain.instances} map.
|
|
*
|
|
* There are five event domains provided by default:
|
|
*
|
|
* - {@link Ext.app.domain.Component Component domain}. This is the primary event domain that
|
|
* has been available since Ext JS MVC was introduced. This domain is defined as any class that
|
|
* extends {@link Ext.Component}, where the selectors use
|
|
* {@link Ext.ComponentQuery#query Ext.ComponentQuery}.
|
|
* - {@link Ext.app.domain.Global Global domain}. This domain provides Controllers with access
|
|
* to events fired from {@link Ext#globalEvents} Observable instance. These events represent
|
|
* the state of the application as a whole, and are always anonymous. Because of this, Global
|
|
* domain does not provide selectors at all.
|
|
* - {@link Ext.app.domain.Controller Controller domain}. This domain includes all classes
|
|
* that extend {@link Ext.app.Controller}. Events fired by Controllers will be available
|
|
* within this domain; selectors are either Controller's {@link Ext.app.Controller#id id} or
|
|
* '*' wildcard for any Controller.
|
|
* - {@link Ext.app.domain.Store Store domain}. This domain is for classes extending
|
|
* {@link Ext.data.AbstractStore}. Selectors are either Store's
|
|
* {@link Ext.data.AbstractStore#storeId storeId} or '*' wildcard for any Store.
|
|
* - {@link Ext.app.domain.Direct Direct domain}. This domain includes all classes that extend
|
|
* {@link Ext.direct.Provider}. Selectors are either Provider's {@link Ext.direct.Provider#id id}
|
|
* or '*' wildcard for any Provider. This domain is optional and will be loaded only if
|
|
* {@link Ext.direct.Manager} singleton is required in your application.
|
|
*
|
|
* @protected
|
|
*/
|
|
|
|
Ext.define('Ext.app.EventDomain', {
|
|
|
|
|
|
|
|
|
|
statics: {
|
|
/**
|
|
* An object map containing `Ext.app.EventDomain` instances keyed by the value
|
|
* of their `type` property.
|
|
*/
|
|
instances: {}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} idProperty Name of the identifier property for this event domain.
|
|
*/
|
|
|
|
isEventDomain: true,
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
Ext.app.EventDomain.instances[me.type] = me;
|
|
|
|
me.bus = {};
|
|
me.monitoredClasses = [];
|
|
},
|
|
|
|
/**
|
|
* This method dispatches an event fired by an object monitored by this domain. This
|
|
* is not called directly but is called by interceptors injected by the `monitor` method.
|
|
*
|
|
* @param {Object} target The firer of the event.
|
|
* @param {String} ev The event being fired.
|
|
* @param {Array} args The arguments for the event. This array **does not** include the event name.
|
|
* That has already been sliced off because this class intercepts the {@link Ext.util.Observable#fireEventArgs fireEventArgs}
|
|
* method which takes an array as the event's argument list.
|
|
*
|
|
* @return {Boolean} `false` if any listener returned `false`, otherwise `true`.
|
|
*
|
|
* @private
|
|
*/
|
|
dispatch: function(target, ev, args) {
|
|
var me = this,
|
|
bus = me.bus,
|
|
selectors = bus[ev],
|
|
selector, controllers, id, events, event, i, ln;
|
|
|
|
if (!selectors) {
|
|
return true;
|
|
}
|
|
|
|
// Loop over all the selectors that are bound to this event
|
|
for (selector in selectors) {
|
|
// Check if the target matches the selector
|
|
if (selectors.hasOwnProperty(selector) && me.match(target, selector)) {
|
|
// Loop over all the controllers that are bound to this selector
|
|
controllers = selectors[selector];
|
|
|
|
for (id in controllers) {
|
|
if (controllers.hasOwnProperty(id)) {
|
|
// Loop over all the events that are bound to this selector
|
|
events = controllers[id];
|
|
|
|
for (i = 0, ln = events.length; i < ln; i++) {
|
|
event = events[i];
|
|
|
|
// Fire the event!
|
|
if (event.fire.apply(event, args) === false) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* This method adds listeners on behalf of a controller. This method is passed an
|
|
* object that is keyed by selectors. The value of these is also an object but now
|
|
* keyed by event name. For example:
|
|
*
|
|
* domain.listen({
|
|
* 'some[selector]': {
|
|
* click: function() { ... }
|
|
* },
|
|
*
|
|
* 'other selector': {
|
|
* change: {
|
|
* fn: function() { ... },
|
|
* delay: 10
|
|
* }
|
|
* }
|
|
*
|
|
* }, controller);
|
|
*
|
|
* @param {Object} selectors Config object containing selectors and listeners.
|
|
*
|
|
* @private
|
|
*/
|
|
listen: function(selectors, controller) {
|
|
var me = this,
|
|
bus = me.bus,
|
|
idProperty = me.idProperty,
|
|
monitoredClasses = me.monitoredClasses,
|
|
monitoredClassesCount = monitoredClasses.length,
|
|
i, tree, list, selector, options, listener, scope, event, listeners, ev;
|
|
|
|
for (selector in selectors) {
|
|
if (selectors.hasOwnProperty(selector) && (listeners = selectors[selector])) {
|
|
if (idProperty) {
|
|
|
|
selector = selector === '*' ? selector : selector.substring(1);
|
|
}
|
|
|
|
for (ev in listeners) {
|
|
if (listeners.hasOwnProperty(ev)) {
|
|
options = null;
|
|
listener = listeners[ev];
|
|
scope = controller;
|
|
event = new Ext.util.Event(controller, ev);
|
|
|
|
// Normalize the listener
|
|
if (Ext.isObject(listener)) {
|
|
options = listener;
|
|
listener = options.fn;
|
|
scope = options.scope || controller;
|
|
|
|
delete options.fn;
|
|
delete options.scope;
|
|
}
|
|
|
|
if (typeof listener === 'string') {
|
|
listener = scope[listener];
|
|
}
|
|
event.addListener(listener, scope, options);
|
|
|
|
for (i = monitoredClassesCount; i-- > 0;) {
|
|
monitoredClasses[i].hasListeners._incr_(ev);
|
|
}
|
|
|
|
// Create the bus tree if it is not there yet
|
|
tree = bus[ev] || (bus[ev] = {});
|
|
tree = tree[selector] || (tree[selector] = {});
|
|
list = tree[controller.id] || (tree[controller.id] = []);
|
|
|
|
// Push our listener in our bus
|
|
list.push(event);
|
|
}
|
|
} //end inner loop
|
|
}
|
|
} //end outer loop
|
|
},
|
|
|
|
/**
|
|
* This method matches the firer of the event (the `target`) to the given `selector`.
|
|
* Default matching is very simple: a match is true when selector equals target's
|
|
* {@link #cfg-idProperty idProperty}, or when selector is '*' wildcard to match any
|
|
* target.
|
|
*
|
|
* @param {Object} target The firer of the event.
|
|
* @param {String} selector The selector to which to match the `target`.
|
|
*
|
|
* @return {Boolean} `true` if the `target` matches the `selector`.
|
|
*
|
|
* @protected
|
|
*/
|
|
match: function(target, selector) {
|
|
var idProperty = this.idProperty;
|
|
|
|
if (idProperty) {
|
|
return selector === '*' || target[idProperty] === selector;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* This method is called by the derived class to monitor `fireEvent` calls. Any call
|
|
* to `fireEvent` on the target Observable will be intercepted and dispatched to any
|
|
* listening Controllers. Assuming the original `fireEvent` method does not return
|
|
* `false`, the event is passed to the `dispatch` method of this object.
|
|
*
|
|
* This is typically called in the `constructor` of derived classes.
|
|
*
|
|
* @param {Ext.Class} observable The Observable to monitor for events.
|
|
*
|
|
* @protected
|
|
*/
|
|
monitor: function(observable) {
|
|
var domain = this,
|
|
prototype = observable.isInstance ? observable : observable.prototype,
|
|
fireEventArgs = prototype.fireEventArgs;
|
|
|
|
domain.monitoredClasses.push(observable);
|
|
|
|
prototype.fireEventArgs = function(ev, args) {
|
|
var ret = fireEventArgs.apply(this, arguments);
|
|
|
|
if (ret !== false) {
|
|
ret = domain.dispatch(this, ev, args);
|
|
}
|
|
|
|
return ret;
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Removes all of a controller's attached listeners.
|
|
*
|
|
* @param {String} controllerId The id of the controller.
|
|
*
|
|
* @private
|
|
*/
|
|
unlisten: function(controllerId) {
|
|
var bus = this.bus,
|
|
controllers, ev, selector, selectors;
|
|
|
|
for (ev in bus) {
|
|
if (bus.hasOwnProperty(ev) && (selectors = bus[ev])) {
|
|
for (selector in selectors) {
|
|
controllers = selectors[selector];
|
|
delete controllers[controllerId]; // harmless if !hasOwnProperty
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class implements the component event domain. All classes extending from
|
|
* {@link Ext.Component} are included in this domain. The matching criteria uses
|
|
* {@link Ext.ComponentQuery}.
|
|
*
|
|
* @protected
|
|
*/
|
|
Ext.define('Ext.app.domain.Component', {
|
|
extend: Ext.app.EventDomain ,
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
type: 'component',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
me.monitor(Ext.Component);
|
|
},
|
|
|
|
match: function(target, selector) {
|
|
return target.is(selector);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class manages event dispatching for Controllers. The details of connecting classes
|
|
* to this dispatching mechanism is delegated to {@link Ext.app.EventDomain} instances.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.app.EventBus', {
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
constructor: function() {
|
|
var me = this,
|
|
domains = Ext.app.EventDomain.instances;
|
|
|
|
me.callParent();
|
|
|
|
me.domains = domains;
|
|
me.bus = domains.component.bus; // compat
|
|
},
|
|
|
|
/**
|
|
* Adds a set of component event listeners for a controller. To work with event domains
|
|
* other than component, see {@link #listen}.
|
|
*
|
|
* @param {Object} selectors Config object containing selectors and listeners.
|
|
* @param {Ext.app.Controller} controller The listening controller instance.
|
|
*/
|
|
control: function(selectors, controller) {
|
|
return this.domains.component.listen(selectors, controller);
|
|
},
|
|
|
|
/**
|
|
* Adds a set of event domain listeners for a controller. For more information on event
|
|
* domains, see {@link Ext.app.EventDomain} and {@link Ext.app.Controller}.
|
|
*
|
|
* @param {Object} to Config object containing domains, selectors and listeners.
|
|
* @param {Ext.app.Controller} controller The listening controller instance.
|
|
*/
|
|
listen: function(to, controller) {
|
|
var domains = this.domains,
|
|
domain;
|
|
|
|
for (domain in to) {
|
|
if (to.hasOwnProperty(domain)) {
|
|
domains[domain].listen(to[domain], controller);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes all of a controller's attached listeners.
|
|
*
|
|
* @param {String} controllerId The id of the controller.
|
|
*/
|
|
unlisten: function(controllerId) {
|
|
var domains = Ext.app.EventDomain.instances,
|
|
domain;
|
|
|
|
for (domain in domains) {
|
|
domains[domain].unlisten(controllerId);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Evan Trimboli <evan@sencha.com>
|
|
*
|
|
* Contains a collection of all stores that are created that have an identifier. An identifier can be assigned by
|
|
* setting the {@link Ext.data.AbstractStore#storeId storeId} property. When a store is in the StoreManager, it can be
|
|
* referred to via it's identifier:
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* model: 'SomeModel',
|
|
* storeId: 'myStore'
|
|
* });
|
|
*
|
|
* var store = Ext.data.StoreManager.lookup('myStore');
|
|
*
|
|
* Also note that the {@link #lookup} method is aliased to {@link Ext#getStore} for convenience.
|
|
*
|
|
* If a store is registered with the StoreManager, you can also refer to the store by it's identifier when registering
|
|
* it with any Component that consumes data from a store:
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* model: 'SomeModel',
|
|
* storeId: 'myStore'
|
|
* });
|
|
*
|
|
* Ext.create('Ext.view.View', {
|
|
* store: 'myStore',
|
|
* // other configuration here
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.StoreManager', {
|
|
extend: Ext.util.MixedCollection ,
|
|
alternateClassName: ['Ext.StoreMgr', 'Ext.data.StoreMgr', 'Ext.StoreManager'],
|
|
singleton: true,
|
|
|
|
|
|
/**
|
|
* @cfg {Object} listeners
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* Registers one or more Stores with the StoreManager. You do not normally need to register stores manually. Any
|
|
* store initialized with a {@link Ext.data.Store#storeId} will be auto-registered.
|
|
* @param {Ext.data.Store...} stores Any number of Store instances
|
|
*/
|
|
register : function() {
|
|
for (var i = 0, s; (s = arguments[i]); i++) {
|
|
this.add(s);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unregisters one or more Stores with the StoreManager
|
|
* @param {String/Object...} stores Any number of Store instances or ID-s
|
|
*/
|
|
unregister : function() {
|
|
for (var i = 0, s; (s = arguments[i]); i++) {
|
|
this.remove(this.lookup(s));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets a registered Store by id
|
|
* @param {String/Object} store The id of the Store, or a Store instance, or a store configuration
|
|
* @return {Ext.data.Store}
|
|
*/
|
|
lookup : function(store) {
|
|
// handle the case when we are given an array or an array of arrays.
|
|
if (Ext.isArray(store)) {
|
|
var fields = ['field1'],
|
|
expand = !Ext.isArray(store[0]),
|
|
data = store,
|
|
i,
|
|
len;
|
|
|
|
if(expand){
|
|
data = [];
|
|
for (i = 0, len = store.length; i < len; ++i) {
|
|
data.push([store[i]]);
|
|
}
|
|
} else {
|
|
for(i = 2, len = store[0].length; i <= len; ++i){
|
|
fields.push('field' + i);
|
|
}
|
|
}
|
|
return new Ext.data.ArrayStore({
|
|
data : data,
|
|
fields: fields,
|
|
autoDestroy: true,
|
|
autoCreated: true,
|
|
expanded: expand
|
|
});
|
|
}
|
|
|
|
if (Ext.isString(store)) {
|
|
// store id
|
|
return this.get(store);
|
|
} else {
|
|
// store instance or store config
|
|
return Ext.data.AbstractStore.create(store);
|
|
}
|
|
},
|
|
|
|
// getKey implementation for MixedCollection
|
|
getKey : function(o) {
|
|
return o.storeId;
|
|
}
|
|
}, function() {
|
|
/**
|
|
* Creates a new store for the given id and config, then registers it with the {@link Ext.data.StoreManager Store Manager}.
|
|
* Sample usage:
|
|
*
|
|
* Ext.regStore('AllUsers', {
|
|
* model: 'User'
|
|
* });
|
|
*
|
|
* // the store can now easily be used throughout the application
|
|
* new Ext.List({
|
|
* store: 'AllUsers',
|
|
* ... other config
|
|
* });
|
|
*
|
|
* @param {String} id The id to set on the new store
|
|
* @param {Object} config The store config
|
|
* @member Ext
|
|
* @method regStore
|
|
*/
|
|
Ext.regStore = function(name, config) {
|
|
var store;
|
|
|
|
if (Ext.isObject(name)) {
|
|
config = name;
|
|
} else {
|
|
config.storeId = name;
|
|
}
|
|
|
|
if (config instanceof Ext.data.Store) {
|
|
store = config;
|
|
} else {
|
|
store = new Ext.data.Store(config);
|
|
}
|
|
|
|
return Ext.data.StoreManager.register(store);
|
|
};
|
|
|
|
/**
|
|
* Shortcut to {@link Ext.data.StoreManager#lookup}.
|
|
* @member Ext
|
|
* @method getStore
|
|
* @inheritdoc Ext.data.StoreManager#lookup
|
|
*/
|
|
Ext.getStore = function(name) {
|
|
return Ext.data.StoreManager.lookup(name);
|
|
};
|
|
});
|
|
|
|
/**
|
|
* This class implements the global event domain. This domain represents event fired from
|
|
* {@link Ext#globalEvents} Observable instance. No selectors are supported for this domain.
|
|
*
|
|
* @protected
|
|
*/
|
|
Ext.define('Ext.app.domain.Global', {
|
|
extend: Ext.app.EventDomain ,
|
|
singleton: true,
|
|
|
|
type: 'global',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
me.monitor(Ext.globalEvents);
|
|
},
|
|
|
|
/**
|
|
* This method adds listeners on behalf of a controller. Since Global domain does not
|
|
* support selectors, we skip this layer and just accept an object keyed by events.
|
|
* For example:
|
|
*
|
|
* domain.listen({
|
|
* idle: function() { ... },
|
|
* afterlayout: {
|
|
* fn: function() { ... },
|
|
* delay: 10
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Object} listeners Config object containing listeners.
|
|
*
|
|
* @private
|
|
*/
|
|
listen: function(listeners, controller) {
|
|
// Parent method requires selectors so we just wrap passed listeners
|
|
// in a dummy selector
|
|
this.callParent([{ global: listeners }, controller]);
|
|
},
|
|
|
|
match: function() {
|
|
return true;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Simple wrapper class that represents a set of records returned by a Proxy.
|
|
*/
|
|
Ext.define('Ext.data.ResultSet', {
|
|
/**
|
|
* @cfg {Boolean} loaded
|
|
* True if the records have already been loaded. This is only meaningful when dealing with
|
|
* SQL-backed proxies.
|
|
*/
|
|
loaded: true,
|
|
|
|
/**
|
|
* @cfg {Number} count
|
|
* The number of records in this ResultSet. Note that total may differ from this number.
|
|
*/
|
|
count: 0,
|
|
|
|
/**
|
|
* @cfg {Number} total
|
|
* The total number of records reported by the data source. This ResultSet may form a subset of
|
|
* those records (see {@link #count}).
|
|
*/
|
|
total: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} success
|
|
* True if the ResultSet loaded successfully, false if any errors were encountered.
|
|
*/
|
|
success: false,
|
|
|
|
/**
|
|
* @cfg {Ext.data.Model[]} records (required)
|
|
* The array of record instances.
|
|
*/
|
|
|
|
/**
|
|
* Creates the resultSet
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, config);
|
|
|
|
/**
|
|
* @property {Number} totalRecords
|
|
* Copy of this.total.
|
|
* @deprecated Will be removed in Ext JS 5.0. Use {@link #total} instead.
|
|
*/
|
|
this.totalRecords = this.total;
|
|
|
|
if (config.count === undefined) {
|
|
this.count = this.records.length;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Readers are used to interpret data to be loaded into a {@link Ext.data.Model Model} instance or a {@link
|
|
* Ext.data.Store Store} - often in response to an AJAX request. In general there is usually no need to create
|
|
* a Reader instance directly, since a Reader is almost always used together with a {@link Ext.data.proxy.Proxy Proxy},
|
|
* and is configured using the Proxy's {@link Ext.data.proxy.Proxy#cfg-reader reader} configuration property:
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url : 'users.json',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'users'
|
|
* }
|
|
* },
|
|
* });
|
|
*
|
|
* The above reader is configured to consume a JSON string that looks something like this:
|
|
*
|
|
* {
|
|
* "success": true,
|
|
* "users": [
|
|
* { "name": "User 1" },
|
|
* { "name": "User 2" }
|
|
* ]
|
|
* }
|
|
*
|
|
*
|
|
* # Loading Nested Data
|
|
*
|
|
* Readers have the ability to automatically load deeply-nested data objects based on the {@link Ext.data.association.Association
|
|
* associations} configured on each Model. Below is an example demonstrating the flexibility of these associations in a
|
|
* fictional CRM system which manages a User, their Orders, OrderItems and Products. First we'll define the models:
|
|
*
|
|
* Ext.define("User", {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* 'id', 'name'
|
|
* ],
|
|
*
|
|
* hasMany: {model: 'Order', name: 'orders'},
|
|
*
|
|
* proxy: {
|
|
* type: 'rest',
|
|
* url : 'users.json',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'users'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define("Order", {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* 'id', 'total'
|
|
* ],
|
|
*
|
|
* hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
|
|
* belongsTo: 'User'
|
|
* });
|
|
*
|
|
* Ext.define("OrderItem", {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* 'id', 'price', 'quantity', 'order_id', 'product_id'
|
|
* ],
|
|
*
|
|
* belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
|
|
* });
|
|
*
|
|
* Ext.define("Product", {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* 'id', 'name'
|
|
* ],
|
|
*
|
|
* hasMany: 'OrderItem'
|
|
* });
|
|
*
|
|
* This may be a lot to take in - basically a User has many Orders, each of which is composed of several OrderItems.
|
|
* Finally, each OrderItem has a single Product. This allows us to consume data like this:
|
|
*
|
|
* {
|
|
* "users": [
|
|
* {
|
|
* "id": 123,
|
|
* "name": "Ed",
|
|
* "orders": [
|
|
* {
|
|
* "id": 50,
|
|
* "total": 100,
|
|
* "order_items": [
|
|
* {
|
|
* "id" : 20,
|
|
* "price" : 40,
|
|
* "quantity": 2,
|
|
* "product" : {
|
|
* "id": 1000,
|
|
* "name": "MacBook Pro"
|
|
* }
|
|
* },
|
|
* {
|
|
* "id" : 21,
|
|
* "price" : 20,
|
|
* "quantity": 3,
|
|
* "product" : {
|
|
* "id": 1001,
|
|
* "name": "iPhone"
|
|
* }
|
|
* }
|
|
* ]
|
|
* }
|
|
* ]
|
|
* }
|
|
* ]
|
|
* }
|
|
*
|
|
* The JSON response is deeply nested - it returns all Users (in this case just 1 for simplicity's sake), all of the
|
|
* Orders for each User (again just 1 in this case), all of the OrderItems for each Order (2 order items in this case),
|
|
* and finally the Product associated with each OrderItem. Now we can read the data and use it as follows:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: "User"
|
|
* });
|
|
*
|
|
* store.load({
|
|
* callback: function() {
|
|
* //the user that was loaded
|
|
* var user = store.first();
|
|
*
|
|
* console.log("Orders for " + user.get('name') + ":")
|
|
*
|
|
* //iterate over the Orders for each User
|
|
* user.orders().each(function(order) {
|
|
* console.log("Order ID: " + order.getId() + ", which contains items:");
|
|
*
|
|
* //iterate over the OrderItems for each Order
|
|
* order.orderItems().each(function(orderItem) {
|
|
* //we know that the Product data is already loaded, so we can use the synchronous getProduct
|
|
* //usually, we would use the asynchronous version (see {@link Ext.data.association.BelongsTo})
|
|
* var product = orderItem.getProduct();
|
|
*
|
|
* console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
|
|
* });
|
|
* });
|
|
* }
|
|
* });
|
|
*
|
|
* Running the code above results in the following:
|
|
*
|
|
* Orders for Ed:
|
|
* Order ID: 50, which contains items:
|
|
* 2 orders of MacBook Pro
|
|
* 3 orders of iPhone
|
|
*/
|
|
Ext.define('Ext.data.reader.Reader', {
|
|
|
|
alternateClassName: ['Ext.data.Reader', 'Ext.data.DataReader'],
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} idProperty
|
|
* Name of the property within a row object that contains a record identifier value. Defaults to the id of the
|
|
* model. If an idProperty is explicitly specified it will take precedence over idProperty defined on the model.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [totalProperty="total"]
|
|
* Name of the property from which to retrieve the total number of records in the dataset. This is only needed if
|
|
* the whole dataset is not passed in one go, but is being paged from the remote server.
|
|
*/
|
|
totalProperty: 'total',
|
|
|
|
/**
|
|
* @cfg {String} [successProperty="success"]
|
|
* Name of the property from which to retrieve the `success` attribute, the value of which indicates
|
|
* whether a given request succeeded or failed (typically a boolean or 'true'|'false'). See
|
|
* {@link Ext.data.proxy.Server}.{@link Ext.data.proxy.Server#exception exception} for additional information.
|
|
*/
|
|
successProperty: 'success',
|
|
|
|
/**
|
|
* @cfg {String} [root]
|
|
* The name of the property which contains the data items corresponding to the Model(s) for which this
|
|
* Reader is configured. For JSON reader it's a property name (or a dot-separated list of property names
|
|
* if the root is nested). For XML reader it's a CSS selector. For Array reader the root is not applicable
|
|
* since the data is assumed to be a single-level array of arrays.
|
|
*
|
|
* By default the natural root of the data will be used: the root JSON array, the root XML element, or the array.
|
|
*
|
|
* The data packet value for this property should be an empty array to clear the data or show no data.
|
|
*/
|
|
root: '',
|
|
|
|
/**
|
|
* @cfg {String} messageProperty
|
|
* The name of the property which contains a response message. This property is optional.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [implicitIncludes=true]
|
|
* True to automatically parse models nested within other models in a response object. See the
|
|
* Ext.data.reader.Reader intro docs for full explanation.
|
|
*/
|
|
implicitIncludes: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [readRecordsOnFailure=true]
|
|
* True to extract the records from a data packet even if the {@link #successProperty} returns false.
|
|
*/
|
|
readRecordsOnFailure: true,
|
|
|
|
/**
|
|
* @property {Object} metaData
|
|
* The raw meta data that was most recently read, if any. Meta data can include existing
|
|
* Reader config options like {@link #idProperty}, {@link #totalProperty}, etc. that get
|
|
* automatically applied to the Reader, and those can still be accessed directly from the Reader
|
|
* if needed. However, meta data is also often used to pass other custom data to be processed
|
|
* by application code. For example, it is common when reconfiguring the data model of a grid to
|
|
* also pass a corresponding column model config to be applied to the grid. Any such data will
|
|
* not get applied to the Reader directly (it just gets passed through and is ignored by Ext).
|
|
* This metaData property gives you access to all meta data that was passed, including any such
|
|
* custom data ignored by the reader.
|
|
*
|
|
* This is a read-only property, and it will get replaced each time a new meta data object is
|
|
* passed to the reader. Note that typically you would handle proxy's
|
|
* {@link Ext.data.proxy.Proxy#metachange metachange} event which passes this exact same meta
|
|
* object to listeners. However this property is available if it's more convenient to access it
|
|
* via the reader directly in certain cases.
|
|
* @readonly
|
|
*/
|
|
|
|
/*
|
|
* @property {Boolean} isReader
|
|
* `true` in this class to identify an object as an instantiated Reader, or subclass thereof.
|
|
*/
|
|
isReader: true,
|
|
|
|
// Private flag to the generated convertRecordData function to indicate whether to apply Field default
|
|
// values to fields for which no value is present in the raw data.
|
|
// This is set to false by a Server Proxy which is reading the response from a "create" or "update" operation.
|
|
applyDefaults: true,
|
|
|
|
lastFieldGeneration: null,
|
|
|
|
/**
|
|
* Creates new Reader.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
me.fieldCount = 0;
|
|
me.model = Ext.ModelManager.getModel(me.model);
|
|
|
|
// Extractors can only be calculated if the fields MixedCollection has been set.
|
|
// A Model may only complete its setup (set the prototype properties) after asynchronous loading
|
|
// which would mean that there may be no "fields"
|
|
// If this happens, the load callback will call proxy.setModel which calls reader.setModel which
|
|
// triggers buildExtractors.
|
|
if (me.model && me.model.prototype.fields) {
|
|
me.buildExtractors();
|
|
}
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event
|
|
* Fires when the reader receives improperly encoded data from the server
|
|
* @param {Ext.data.reader.Reader} reader A reference to this reader
|
|
* @param {XMLHttpRequest} response The XMLHttpRequest response object
|
|
* @param {Ext.data.ResultSet} error The error object
|
|
*/
|
|
'exception'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Sets a new model for the reader.
|
|
* @private
|
|
* @param {Object} model The model to set.
|
|
* @param {Boolean} setOnProxy True to also set on the Proxy, if one is configured
|
|
*/
|
|
setModel: function(model, setOnProxy) {
|
|
var me = this;
|
|
|
|
me.model = Ext.ModelManager.getModel(model);
|
|
if (model) {
|
|
me.buildExtractors(true);
|
|
}
|
|
|
|
if (setOnProxy && me.proxy) {
|
|
me.proxy.setModel(me.model, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reads the given response object. This method normalizes the different types of response object that may be passed to it.
|
|
* If it's an XMLHttpRequest object, hand off to the subclass' {@link #getResponseData} method.
|
|
* Else, hand off the reading of records to the {@link #readRecords} method.
|
|
* @param {Object} response The response object. This may be either an XMLHttpRequest object or a plain JS object
|
|
* @return {Ext.data.ResultSet} The parsed or default ResultSet object
|
|
*/
|
|
read: function(response) {
|
|
var data;
|
|
|
|
if (response) {
|
|
data = response.responseText ? this.getResponseData(response) : this.readRecords(response);
|
|
}
|
|
|
|
return data || this.nullResultSet;
|
|
},
|
|
|
|
/**
|
|
* Abstracts common functionality used by all Reader subclasses. Each subclass is expected to call this function
|
|
* before running its own logic and returning the Ext.data.ResultSet instance. For most Readers additional
|
|
* processing should not be needed.
|
|
* @param {Object} data The raw data object
|
|
* @return {Ext.data.ResultSet} A ResultSet object
|
|
*/
|
|
readRecords: function(data) {
|
|
var me = this,
|
|
success,
|
|
recordCount,
|
|
records,
|
|
root,
|
|
total,
|
|
value,
|
|
message;
|
|
|
|
/*
|
|
* We check here whether fields collection has changed since the last read.
|
|
* This works around an issue when a Model is used for both a Tree and another
|
|
* source, because the tree decorates the model with extra fields and it causes
|
|
* issues because the readers aren't notified.
|
|
*/
|
|
if (me.lastFieldGeneration !== me.model.prototype.fields.generation) {
|
|
me.buildExtractors(true);
|
|
}
|
|
|
|
/**
|
|
* @property {Object} rawData
|
|
* The raw data object that was last passed to {@link #readRecords}. Stored for further processing if needed.
|
|
*/
|
|
me.rawData = data;
|
|
|
|
data = me.getData(data);
|
|
|
|
success = true;
|
|
recordCount = 0;
|
|
records = [];
|
|
|
|
if (me.successProperty) {
|
|
value = me.getSuccess(data);
|
|
if (value === false || value === 'false') {
|
|
success = false;
|
|
}
|
|
}
|
|
|
|
if (me.messageProperty) {
|
|
message = me.getMessage(data);
|
|
}
|
|
|
|
|
|
// Only try and extract other data if call was successful
|
|
if (me.readRecordsOnFailure || success) {
|
|
// If we pass an array as the data, we dont use getRoot on the data.
|
|
// Instead the root equals to the data.
|
|
root = Ext.isArray(data) ? data : me.getRoot(data);
|
|
|
|
if (root) {
|
|
total = root.length;
|
|
}
|
|
|
|
if (me.totalProperty) {
|
|
value = parseInt(me.getTotal(data), 10);
|
|
if (!isNaN(value)) {
|
|
total = value;
|
|
}
|
|
}
|
|
|
|
if (root) {
|
|
records = me.extractData(root);
|
|
recordCount = records.length;
|
|
}
|
|
}
|
|
|
|
return new Ext.data.ResultSet({
|
|
total : total || recordCount,
|
|
count : recordCount,
|
|
records: records,
|
|
success: success,
|
|
message: message
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns extracted, type-cast rows of data.
|
|
* @param {Object[]/Object} root from server response
|
|
* @return {Array} An array of records containing the extracted data
|
|
* @private
|
|
*/
|
|
extractData : function(root) {
|
|
var me = this,
|
|
Model = me.model,
|
|
length = root.length,
|
|
records = new Array(length),
|
|
convertedValues, node, record, i;
|
|
|
|
if (!root.length && Ext.isObject(root)) {
|
|
root = [root];
|
|
length = 1;
|
|
}
|
|
|
|
for (i = 0; i < length; i++) {
|
|
node = root[i];
|
|
if (node.isModel) {
|
|
// If we're given a model instance in the data, just push it on
|
|
// without doing any conversion
|
|
records[i] = node;
|
|
} else {
|
|
// Create a record with an empty data object.
|
|
// Populate that data object by extracting and converting field values from raw data.
|
|
// Must pass the ID to use because we pass no data for the constructor to pluck an ID from
|
|
records[i] = record = new Model(undefined, me.getId(node), node, convertedValues = {});
|
|
|
|
// If the server did not include an id in the response data, the Model constructor will mark the record as phantom.
|
|
// We need to set phantom to false here because records created from a server response using a reader by definition are not phantom records.
|
|
record.phantom = false;
|
|
|
|
// Use generated function to extract all fields at once
|
|
me.convertRecordData(convertedValues, node, record);
|
|
|
|
if (me.implicitIncludes && record.associations.length) {
|
|
me.readAssociated(record, node);
|
|
}
|
|
}
|
|
}
|
|
|
|
return records;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Loads a record's associations from the data object. This prepopulates hasMany and belongsTo associations
|
|
* on the record provided.
|
|
* @param {Ext.data.Model} record The record to load associations for
|
|
* @param {Object} data The data object
|
|
* @return {String} Return value description
|
|
*/
|
|
readAssociated: function(record, data) {
|
|
var associations = record.associations.items,
|
|
i = 0,
|
|
length = associations.length,
|
|
association, associationData, proxy, reader;
|
|
|
|
for (; i < length; i++) {
|
|
association = associations[i];
|
|
associationData = this.getAssociatedDataRoot(data, association.associationKeyFunction || association.associationKey || association.name);
|
|
|
|
if (associationData) {
|
|
reader = association.getReader();
|
|
if (!reader) {
|
|
proxy = association.associatedModel.getProxy();
|
|
// if the associated model has a Reader already, use that, otherwise attempt to create a sensible one
|
|
if (proxy) {
|
|
reader = proxy.getReader();
|
|
} else {
|
|
reader = new this.constructor({
|
|
model: association.associatedName
|
|
});
|
|
}
|
|
}
|
|
association.read(record, reader, associationData);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Used internally by {@link #readAssociated}. Given a data object (which could be json, xml etc) for a specific
|
|
* record, this should return the relevant part of that data for the given association name. If a complex
|
|
* mapping, this will traverse arrays and objects to resolve the data.
|
|
* @param {Object} data The raw data object
|
|
* @param {String} associationName The name of the association to get data for (uses associationKey if present)
|
|
* @return {Object} The root
|
|
*/
|
|
getAssociatedDataRoot: function(data, associationName) {
|
|
if (Ext.isFunction(associationName)) {
|
|
return associationName(data);
|
|
}
|
|
|
|
return data[associationName];
|
|
},
|
|
|
|
getFields: function() {
|
|
return this.model.prototype.fields.items;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* By default this function just returns what is passed to it. It can be overridden in a subclass
|
|
* to return something else. See XmlReader for an example.
|
|
* @param {Object} data The data object
|
|
* @return {Object} The normalized data object
|
|
*/
|
|
getData: Ext.identityFn,
|
|
|
|
/**
|
|
* @private
|
|
* This will usually need to be implemented in a subclass. Given a generic data object (the type depends on the type
|
|
* of data we are reading), this function should return the object as configured by the Reader's 'root' meta data config.
|
|
* See XmlReader's getRoot implementation for an example. By default the same data object will simply be returned.
|
|
* @param {Object} data The data object
|
|
* @return {Object} The same data object
|
|
*/
|
|
getRoot: Ext.identityFn,
|
|
|
|
/**
|
|
* Takes a raw response object (as passed to the {@link #read} method) and returns the useful data
|
|
* segment from it. This must be implemented by each subclass.
|
|
* @param {Object} response The response object
|
|
* @return {Ext.data.ResultSet} A ResultSet object
|
|
*/
|
|
getResponseData: function(response) {
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Reconfigures the meta data tied to this Reader
|
|
*/
|
|
onMetaChange : function(meta) {
|
|
var me = this,
|
|
fields = meta.fields || me.getFields(),
|
|
newModel,
|
|
clientIdProperty;
|
|
|
|
// save off the raw meta data
|
|
me.metaData = meta;
|
|
|
|
// set any reader-specific configs from meta if available
|
|
me.root = meta.root || me.root;
|
|
me.idProperty = meta.idProperty || me.idProperty;
|
|
me.totalProperty = meta.totalProperty || me.totalProperty;
|
|
me.successProperty = meta.successProperty || me.successProperty;
|
|
me.messageProperty = meta.messageProperty || me.messageProperty;
|
|
clientIdProperty = meta.clientIdProperty;
|
|
|
|
if (me.model) {
|
|
me.model.setFields(fields, me.idProperty, clientIdProperty);
|
|
me.setModel(me.model, true);
|
|
}
|
|
else {
|
|
newModel = Ext.define("Ext.data.reader.Json-Model" + Ext.id(), {
|
|
extend: 'Ext.data.Model',
|
|
fields: fields,
|
|
clientIdProperty: clientIdProperty
|
|
});
|
|
if (me.idProperty) {
|
|
// We only do this if the reader actually has a custom idProperty set,
|
|
// otherwise let the model use its own default value. It is valid for
|
|
// the reader idProperty to be undefined, in which case it will use the
|
|
// model's idProperty (in getIdProperty()).
|
|
newModel.idProperty = me.idProperty;
|
|
}
|
|
me.setModel(newModel, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get the idProperty to use for extracting data
|
|
* @private
|
|
* @return {String} The id property **if any**
|
|
*/
|
|
getIdProperty: function() {
|
|
var idField = this.model.prototype.idField,
|
|
idProperty = this.idProperty;
|
|
|
|
if (!idProperty && idField && (idProperty = idField.mapping) == null) {
|
|
idProperty = idField.name;
|
|
}
|
|
return idProperty;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This builds optimized functions for retrieving record data and meta data from an object.
|
|
* Subclasses may need to implement their own getRoot function.
|
|
* @param {Boolean} [force=false] True to automatically remove existing extractor functions first
|
|
*/
|
|
buildExtractors: function(force) {
|
|
var me = this,
|
|
idProp = me.getIdProperty(),
|
|
totalProp = me.totalProperty,
|
|
successProp = me.successProperty,
|
|
messageProp = me.messageProperty,
|
|
accessor;
|
|
|
|
if (force === true) {
|
|
delete me.convertRecordData;
|
|
}
|
|
|
|
if (me.convertRecordData) {
|
|
return;
|
|
}
|
|
|
|
//build the extractors for all the meta data
|
|
if (totalProp) {
|
|
me.getTotal = me.createAccessor(totalProp);
|
|
}
|
|
|
|
if (successProp) {
|
|
me.getSuccess = me.createAccessor(successProp);
|
|
}
|
|
|
|
if (messageProp) {
|
|
me.getMessage = me.createAccessor(messageProp);
|
|
}
|
|
|
|
// Generate a getter for the raw identifying property if any
|
|
if (idProp) {
|
|
accessor = me.createAccessor(idProp);
|
|
me.getId = function(record) {
|
|
var id = accessor.call(me, record);
|
|
return (id === undefined || id === '') ? null : id;
|
|
};
|
|
} else {
|
|
me.getId = function() {
|
|
return null;
|
|
};
|
|
}
|
|
me.convertRecordData = me.buildRecordDataExtractor();
|
|
me.lastFieldGeneration = me.model.prototype.fields.generation;
|
|
},
|
|
|
|
recordDataExtractorTemplate : [
|
|
'var me = this\n',
|
|
' ,fields = me.model.prototype.fields\n',
|
|
' ,value\n',
|
|
' ,internalId\n',
|
|
'<tpl for="fields">',
|
|
' ,__field{#} = fields.map["{name}"]\n',
|
|
'</tpl>', ';\n',
|
|
|
|
'return function(dest, source, record) {\n',
|
|
'<tpl for="fields">',
|
|
'{% var fieldAccessExpression = this.createFieldAccessExpression(values, "__field" + xindex, "source");',
|
|
' if (fieldAccessExpression) { %}',
|
|
// createFieldAccessExpression must be implemented in subclasses to extract data from the source object in the correct way
|
|
' value = {[ this.createFieldAccessExpression(values, "__field" + xindex, "source") ]};\n',
|
|
|
|
// Code for processing a source property when a custom convert is defined
|
|
'<tpl if="hasCustomConvert">',
|
|
' dest["{name}"] = value === undefined ? __field{#}.convert(__field{#}.defaultValue, record) : __field{#}.convert(value, record);\n',
|
|
|
|
// Code for processing a source property when there is a default value
|
|
'<tpl elseif="defaultValue !== undefined">',
|
|
' if (value === undefined) {\n',
|
|
' if (me.applyDefaults) {\n',
|
|
'<tpl if="convert">',
|
|
' dest["{name}"] = __field{#}.convert(__field{#}.defaultValue, record);\n',
|
|
'<tpl else>',
|
|
' dest["{name}"] = __field{#}.defaultValue\n',
|
|
'</tpl>',
|
|
' };\n',
|
|
' } else {\n',
|
|
'<tpl if="convert">',
|
|
' dest["{name}"] = __field{#}.convert(value, record);\n',
|
|
'<tpl else>',
|
|
' dest["{name}"] = value;\n',
|
|
'</tpl>',
|
|
' };\n',
|
|
|
|
// Code for processing a source property value when there is no default value
|
|
'<tpl else>',
|
|
' if (value !== undefined) {\n',
|
|
'<tpl if="convert">',
|
|
' dest["{name}"] = __field{#}.convert(value, record);\n',
|
|
'<tpl else>',
|
|
' dest["{name}"] = value;\n',
|
|
'</tpl>',
|
|
' }\n',
|
|
'</tpl>',
|
|
|
|
// For when createFieldExpression yielded nothing.
|
|
// There's no mapping - the field is not intended to be read from server data.
|
|
// This is the case with NodeInterface fields.
|
|
'{% } else { %}',
|
|
'<tpl if="defaultValue !== undefined">',
|
|
'<tpl if="convert">',
|
|
' dest["{name}"] = __field{#}.convert(__field{#}.defaultValue, record);\n',
|
|
'<tpl else>',
|
|
' dest["{name}"] = __field{#}.defaultValue\n',
|
|
'</tpl>',
|
|
'</tpl>',
|
|
'{% } %}',
|
|
'</tpl>',
|
|
|
|
// set the client id as the internalId of the record.
|
|
// clientId handles the case where a client side record did not previously exist on the server,
|
|
// so the server is passing back a client id that can be used to pair the server side record up with the client record
|
|
'<tpl if="clientIdProp">',
|
|
' if (record && (internalId = {[ this.createFieldAccessExpression(\{mapping: values.clientIdProp\}, null, "source") ]})) {\n',
|
|
' record.{["internalId"]} = internalId;\n',
|
|
' }\n',
|
|
'</tpl>',
|
|
|
|
'};'
|
|
],
|
|
|
|
/**
|
|
* @private
|
|
* Return a function which will read a raw row object in the format this Reader accepts, and populates
|
|
* a record's data object with converted data values.
|
|
*
|
|
* The returned function must be passed the following parameters:
|
|
*
|
|
* - dest A record's empty data object into which the new field value properties are injected.
|
|
* - source A raw row data object of whatever type this Reader consumes
|
|
* - record The record which is being populated.
|
|
*
|
|
*/
|
|
buildRecordDataExtractor: function() {
|
|
var me = this,
|
|
modelProto = me.model.prototype,
|
|
templateData = {
|
|
clientIdProp: modelProto.clientIdProperty,
|
|
fields: modelProto.fields.items
|
|
};
|
|
|
|
me.recordDataExtractorTemplate.createFieldAccessExpression = function() {
|
|
return me.createFieldAccessExpression.apply(me,arguments);
|
|
};
|
|
|
|
// Here we are creating a new Function and invoking it immediately in the scope of this Reader
|
|
// It declares several vars capturing the configured context of this Reader, and returns a function
|
|
// which, when passed a record data object, a raw data row in the format this Reader is configured to read,
|
|
// and the record which is being created, will populate the record's data object from the raw row data.
|
|
return Ext.functionFactory(me.recordDataExtractorTemplate.apply(templateData)).call(me);
|
|
},
|
|
|
|
destroyReader: function() {
|
|
var me = this;
|
|
delete me.proxy;
|
|
delete me.model;
|
|
delete me.convertRecordData;
|
|
delete me.getId;
|
|
delete me.getTotal;
|
|
delete me.getSuccess;
|
|
delete me.getMessage;
|
|
}
|
|
}, function() {
|
|
var proto = this.prototype;
|
|
Ext.apply(proto, {
|
|
// Private. Empty ResultSet to return when response is falsy (null|undefined|empty string)
|
|
nullResultSet: new Ext.data.ResultSet({
|
|
total : 0,
|
|
count : 0,
|
|
records: [],
|
|
success: true,
|
|
message: ''
|
|
}),
|
|
recordDataExtractorTemplate: new Ext.XTemplate(proto.recordDataExtractorTemplate)
|
|
});
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format. This usually
|
|
* happens as a result of loading a Store - for example we might create something like this:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email']
|
|
* });
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url : 'users.json',
|
|
* reader: {
|
|
* type: 'json'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* The example above creates a 'User' model. Models are explained in the {@link Ext.data.Model Model} docs if you're
|
|
* not already familiar with them.
|
|
*
|
|
* We created the simplest type of JSON Reader possible by simply telling our {@link Ext.data.Store Store}'s
|
|
* {@link Ext.data.proxy.Proxy Proxy} that we want a JSON Reader. The Store automatically passes the configured model to the
|
|
* Store, so it is as if we passed this instead:
|
|
*
|
|
* reader: {
|
|
* type : 'json',
|
|
* model: 'User'
|
|
* }
|
|
*
|
|
* The reader we set up is ready to read data from our server - at the moment it will accept a response like this:
|
|
*
|
|
* [
|
|
* {
|
|
* "id": 1,
|
|
* "name": "Ed Spencer",
|
|
* "email": "ed@sencha.com"
|
|
* },
|
|
* {
|
|
* "id": 2,
|
|
* "name": "Abe Elias",
|
|
* "email": "abe@sencha.com"
|
|
* }
|
|
* ]
|
|
*
|
|
* ## Reading other JSON formats
|
|
*
|
|
* If you already have your JSON format defined and it doesn't look quite like what we have above, you can usually
|
|
* pass JsonReader a couple of configuration options to make it parse your format. For example, we can use the
|
|
* {@link #cfg-root} configuration to parse data that comes back like this:
|
|
*
|
|
* {
|
|
* "users": [
|
|
* {
|
|
* "id": 1,
|
|
* "name": "Ed Spencer",
|
|
* "email": "ed@sencha.com"
|
|
* },
|
|
* {
|
|
* "id": 2,
|
|
* "name": "Abe Elias",
|
|
* "email": "abe@sencha.com"
|
|
* }
|
|
* ]
|
|
* }
|
|
*
|
|
* To parse this we just pass in a {@link #root} configuration that matches the 'users' above:
|
|
*
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'users'
|
|
* }
|
|
*
|
|
* Sometimes the JSON structure is even more complicated. Document databases like CouchDB often provide metadata
|
|
* around each record inside a nested structure like this:
|
|
*
|
|
* {
|
|
* "total": 122,
|
|
* "offset": 0,
|
|
* "users": [
|
|
* {
|
|
* "id": "ed-spencer-1",
|
|
* "value": 1,
|
|
* "user": {
|
|
* "id": 1,
|
|
* "name": "Ed Spencer",
|
|
* "email": "ed@sencha.com"
|
|
* }
|
|
* }
|
|
* ]
|
|
* }
|
|
*
|
|
* In the case above the record data is nested an additional level inside the "users" array as each "user" item has
|
|
* additional metadata surrounding it ('id' and 'value' in this case). To parse data out of each "user" item in the
|
|
* JSON above we need to specify the {@link #record} configuration like this:
|
|
*
|
|
* reader: {
|
|
* type : 'json',
|
|
* root : 'users',
|
|
* record: 'user'
|
|
* }
|
|
*
|
|
* ## Response MetaData
|
|
*
|
|
* The server can return metadata in its response, in addition to the record data, that describe attributes
|
|
* of the data set itself or are used to reconfigure the Reader. To pass metadata in the response you simply
|
|
* add a `metaData` attribute to the root of the response data. The metaData attribute can contain anything,
|
|
* but supports a specific set of properties that are handled by the Reader if they are present:
|
|
*
|
|
* - {@link #root}: the property name of the root response node containing the record data
|
|
* - {@link #idProperty}: property name for the primary key field of the data
|
|
* - {@link #totalProperty}: property name for the total number of records in the data
|
|
* - {@link #successProperty}: property name for the success status of the response
|
|
* - {@link #messageProperty}: property name for an optional response message
|
|
* - {@link Ext.data.Model#cfg-fields fields}: Config used to reconfigure the Model's fields before converting the
|
|
* response data into records
|
|
*
|
|
* An initial Reader configuration containing all of these properties might look like this ("fields" would be
|
|
* included in the Model definition, not shown):
|
|
*
|
|
* reader: {
|
|
* type : 'json',
|
|
* root : 'root',
|
|
* idProperty : 'id',
|
|
* totalProperty : 'total',
|
|
* successProperty: 'success',
|
|
* messageProperty: 'message'
|
|
* }
|
|
*
|
|
* If you were to pass a response object containing attributes different from those initially defined above, you could
|
|
* use the `metaData` attribute to reconifgure the Reader on the fly. For example:
|
|
*
|
|
* {
|
|
* "count": 1,
|
|
* "ok": true,
|
|
* "msg": "Users found",
|
|
* "users": [{
|
|
* "userId": 123,
|
|
* "name": "Ed Spencer",
|
|
* "email": "ed@sencha.com"
|
|
* }],
|
|
* "metaData": {
|
|
* "root": "users",
|
|
* "idProperty": 'userId',
|
|
* "totalProperty": 'count',
|
|
* "successProperty": 'ok',
|
|
* "messageProperty": 'msg'
|
|
* }
|
|
* }
|
|
*
|
|
* You can also place any other arbitrary data you need into the `metaData` attribute which will be ignored by the Reader,
|
|
* but will be accessible via the Reader's {@link #metaData} property (which is also passed to listeners via the Proxy's
|
|
* {@link Ext.data.proxy.Proxy#metachange metachange} event (also relayed by the {@link Ext.data.AbstractStore#metachange
|
|
* store}). Application code can then process the passed metadata in any way it chooses.
|
|
*
|
|
* A simple example for how this can be used would be customizing the fields for a Model that is bound to a grid. By passing
|
|
* the `fields` property the Model will be automatically updated by the Reader internally, but that change will not be
|
|
* reflected automatically in the grid unless you also update the column configuration. You could do this manually, or you
|
|
* could simply pass a standard grid {@link Ext.panel.Table#columns column} config object as part of the `metaData` attribute
|
|
* and then pass that along to the grid. Here's a very simple example for how that could be accomplished:
|
|
*
|
|
* // response format:
|
|
* {
|
|
* ...
|
|
* "metaData": {
|
|
* "fields": [
|
|
* { "name": "userId", "type": "int" },
|
|
* { "name": "name", "type": "string" },
|
|
* { "name": "birthday", "type": "date", "dateFormat": "Y-j-m" },
|
|
* ],
|
|
* "columns": [
|
|
* { "text": "User ID", "dataIndex": "userId", "width": 40 },
|
|
* { "text": "User Name", "dataIndex": "name", "flex": 1 },
|
|
* { "text": "Birthday", "dataIndex": "birthday", "flex": 1, "format": 'Y-j-m', "xtype": "datecolumn" }
|
|
* ]
|
|
* }
|
|
* }
|
|
*
|
|
* The Reader will automatically read the meta fields config and rebuild the Model based on the new fields, but to handle
|
|
* the new column configuration you would need to handle the metadata within the application code. This is done simply enough
|
|
* by handling the metachange event on either the store or the proxy, e.g.:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* ...
|
|
* listeners: {
|
|
* 'metachange': function(store, meta) {
|
|
* myGrid.reconfigure(store, meta.columns);
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.reader.Json', {
|
|
extend: Ext.data.reader.Reader ,
|
|
alternateClassName: 'Ext.data.JsonReader',
|
|
alias : 'reader.json',
|
|
|
|
root: '',
|
|
|
|
/**
|
|
* @cfg {String} record The optional location within the JSON response that the record data itself can be found at.
|
|
* See the JsonReader intro docs for more details. This is not often needed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [metaProperty="metaData"]
|
|
* Name of the property from which to retrieve the `metaData` attribute. See {@link #metaData}.
|
|
*/
|
|
metaProperty: 'metaData',
|
|
|
|
/**
|
|
* @cfg {Boolean} useSimpleAccessors True to ensure that field names/mappings are treated as literals when
|
|
* reading values.
|
|
*
|
|
* For example, by default, using the mapping "foo.bar.baz" will try and read a property foo from the root, then a property bar
|
|
* from foo, then a property baz from bar. Setting the simple accessors to true will read the property with the name
|
|
* "foo.bar.baz" direct from the root object.
|
|
*/
|
|
useSimpleAccessors: false,
|
|
|
|
/**
|
|
* Reads a JSON object and returns a ResultSet. Uses the internal getTotal and getSuccess extractors to
|
|
* retrieve meta data from the response, and extractData to turn the JSON data into model instances.
|
|
* @param {Object} data The raw JSON data
|
|
* @return {Ext.data.ResultSet} A ResultSet containing model instances and meta data about the results
|
|
*/
|
|
readRecords: function(data) {
|
|
var me = this,
|
|
meta;
|
|
|
|
//this has to be before the call to super because we use the meta data in the superclass readRecords
|
|
if (me.getMeta) {
|
|
meta = me.getMeta(data);
|
|
if (meta) {
|
|
me.onMetaChange(meta);
|
|
}
|
|
} else if (data.metaData) {
|
|
me.onMetaChange(data.metaData);
|
|
}
|
|
|
|
/**
|
|
* @property {Object} jsonData
|
|
* A copy of this.rawData.
|
|
* @deprecated Will be removed in Ext JS 5.0. This is just a copy of this.rawData - use that instead.
|
|
*/
|
|
me.jsonData = data;
|
|
return me.callParent([data]);
|
|
},
|
|
|
|
//inherit docs
|
|
getResponseData: function(response) {
|
|
var data, error;
|
|
|
|
try {
|
|
data = Ext.decode(response.responseText);
|
|
return this.readRecords(data);
|
|
} catch (ex) {
|
|
error = new Ext.data.ResultSet({
|
|
total : 0,
|
|
count : 0,
|
|
records: [],
|
|
success: false,
|
|
message: ex.message
|
|
});
|
|
|
|
this.fireEvent('exception', this, response, error);
|
|
|
|
Ext.Logger.warn('Unable to parse the JSON returned by the server');
|
|
|
|
return error;
|
|
}
|
|
},
|
|
|
|
//inherit docs
|
|
buildExtractors : function() {
|
|
var me = this,
|
|
metaProp = me.metaProperty;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.root) {
|
|
me.getRoot = me.createAccessor(me.root);
|
|
} else {
|
|
me.getRoot = Ext.identityFn;
|
|
}
|
|
|
|
if (metaProp) {
|
|
me.getMeta = me.createAccessor(metaProp);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* We're just preparing the data for the superclass by pulling out the record objects we want. If a {@link #record}
|
|
* was specified we have to pull those out of the larger JSON object, which is most of what this function is doing
|
|
* @param {Object} root The JSON root node
|
|
* @return {Ext.data.Model[]} The records
|
|
*/
|
|
extractData: function(root) {
|
|
var recordName = this.record,
|
|
data = [],
|
|
length, i;
|
|
|
|
if (recordName) {
|
|
length = root.length;
|
|
|
|
if (!length && Ext.isObject(root)) {
|
|
length = 1;
|
|
root = [root];
|
|
}
|
|
|
|
for (i = 0; i < length; i++) {
|
|
data[i] = root[i][recordName];
|
|
}
|
|
} else {
|
|
data = root;
|
|
}
|
|
return this.callParent([data]);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @method
|
|
* Returns an accessor function for the given property string. Gives support for properties such as the following:
|
|
*
|
|
* - 'someProperty'
|
|
* - 'some.property'
|
|
* - '["someProperty"]'
|
|
* - 'values[0]'
|
|
*
|
|
* This is used by {@link #buildExtractors} to create optimized extractor functions for properties that are looked
|
|
* up directly on the source object (e.g. {@link #successProperty}, {@link #messageProperty}, etc.).
|
|
*/
|
|
createAccessor: (function() {
|
|
var re = /[\[\.]/;
|
|
|
|
return function(expr) {
|
|
if (Ext.isEmpty(expr)) {
|
|
return Ext.emptyFn;
|
|
}
|
|
if (Ext.isFunction(expr)) {
|
|
return expr;
|
|
}
|
|
if (this.useSimpleAccessors !== true) {
|
|
var i = String(expr).search(re);
|
|
if (i >= 0) {
|
|
return Ext.functionFactory('obj', 'return obj' + (i > 0 ? '.' : '') + expr);
|
|
}
|
|
}
|
|
return function(obj) {
|
|
return obj[expr];
|
|
};
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* @private
|
|
* @method
|
|
* Returns an accessor expression for the passed Field. Gives support for properties such as the following:
|
|
*
|
|
* - 'someProperty'
|
|
* - 'some.property'
|
|
* - '["someProperty"]'
|
|
* - 'values[0]'
|
|
*
|
|
* This is used by {@link #buildRecordDataExtractor} to create optimized extractor expressions when converting raw
|
|
* data into model instances. This method is used at the field level to dynamically map values to model fields.
|
|
*/
|
|
createFieldAccessExpression: (function() {
|
|
var re = /[\[\.]/;
|
|
|
|
return function(field, fieldVarName, dataName) {
|
|
var mapping = field.mapping,
|
|
hasMap = mapping || mapping === 0,
|
|
map = hasMap ? mapping : field.name,
|
|
result,
|
|
operatorIndex;
|
|
|
|
// mapping: false means that the Field will never be read from server data.
|
|
if (mapping === false) {
|
|
return;
|
|
}
|
|
|
|
if (typeof map === 'function') {
|
|
result = fieldVarName + '.mapping(' + dataName + ', this)';
|
|
} else if (this.useSimpleAccessors === true || ((operatorIndex = String(map).search(re)) < 0)) {
|
|
if (!hasMap || isNaN(map)) {
|
|
// If we don't provide a mapping, we may have a field name that is numeric
|
|
map = '"' + map + '"';
|
|
}
|
|
result = dataName + "[" + map + "]";
|
|
} else if (operatorIndex === 0) {
|
|
// If it matched at index 0 then it must be bracket syntax (e.g. ["foo"]). In this case simply
|
|
// join the two, e.g. 'field["foo"]':
|
|
result = dataName + map;
|
|
} else {
|
|
// If it matched at index > 0 it must be either dot syntax (e.g. field.foo) or a values array
|
|
// item (e.g. values[0]). For the latter, we can simply concatenate the values reference to
|
|
// the source directly like 'field.values[0]'. For dot notation we have to support arbitrary
|
|
// levels (field.foo.bar), any of which could be null or undefined, so we have to create the
|
|
// returned value such that the references will be assigned defensively in the calling code.
|
|
// The output should look like 'field.foo && field.foo.bar' in that case.
|
|
var parts = map.split('.'),
|
|
len = parts.length,
|
|
i = 1,
|
|
tempResult = dataName + '.' + parts[0],
|
|
buffer = [tempResult]; // for 'field.values[0]' this will be the returned result
|
|
|
|
for (; i < len; i++) {
|
|
tempResult += '.' + parts[i];
|
|
buffer.push(tempResult);
|
|
}
|
|
result = buffer.join(' && ');
|
|
}
|
|
return result;
|
|
};
|
|
}())
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Base Writer class used by most subclasses of {@link Ext.data.proxy.Server}. This class is responsible for taking a
|
|
* set of {@link Ext.data.Operation} objects and a {@link Ext.data.Request} object and modifying that request based on
|
|
* the Operations.
|
|
*
|
|
* For example a Ext.data.writer.Json would format the Operations and their {@link Ext.data.Model} instances based on
|
|
* the config options passed to the JsonWriter's constructor.
|
|
*
|
|
* Writers are not needed for any kind of local storage - whether via a {@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}.
|
|
*
|
|
* # Dates
|
|
* Before sending dates to the server, they can be formatted using one of the {@link Ext.Date} formats.
|
|
* These formats can be specified both on the field and the writer itself. In terms of precedence, from highest to lowest:
|
|
*
|
|
* - {@link #dateFormat Writer.dateFormat} The writer dateFormat will always have the highest precedence
|
|
* - {@link Ext.data.Field#dateWriteFormat} The dateWriteFormat will be used if no format is specified on the writer
|
|
* - {@link Ext.data.Field#dateFormat Field.dateFormat}/{@link Ext.data.Field#dateReadFormat Field.dateReadFormat}
|
|
* Finally, if none of the above options are specified the field will be formatted using the format that was used to read the date from the server.
|
|
*/
|
|
Ext.define('Ext.data.writer.Writer', {
|
|
alias: 'writer.base',
|
|
alternateClassName: ['Ext.data.DataWriter', 'Ext.data.Writer'],
|
|
|
|
/**
|
|
* @cfg {Boolean} writeAllFields
|
|
* True to write all fields from the record to the server. If set to false it will only send the fields that were
|
|
* modified. Note that any fields that have {@link Ext.data.Field#persist} set to false will still be ignored.
|
|
*/
|
|
writeAllFields: true,
|
|
|
|
/**
|
|
* @cfg {String} dateFormat
|
|
* This is used for each field of type date in the model to format the value before
|
|
* it is sent to the server.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} nameProperty
|
|
* This property is used to read the key for each value that will be sent to the server. For example:
|
|
*
|
|
* Ext.define('Person', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [{
|
|
* name: 'first',
|
|
* mapping: 'firstName'
|
|
* }, {
|
|
* name: 'last',
|
|
* mapping: 'lastName'
|
|
* }, {
|
|
* name: 'age'
|
|
* }]
|
|
* });
|
|
* new Ext.data.writer.Writer({
|
|
* writeAllFields: true,
|
|
* nameProperty: 'mapping'
|
|
* });
|
|
*
|
|
* // This will be sent to the server
|
|
* {
|
|
* firstName: 'first name value',
|
|
* lastName: 'last name value',
|
|
* age: 1
|
|
* }
|
|
*
|
|
* If the value is not present, the field name will always be used.
|
|
*/
|
|
nameProperty: 'name',
|
|
|
|
/**
|
|
* @cfg {Boolean} [writeRecordId]
|
|
* By default, each record's id is always included in the output for non-phantom records since in most
|
|
* cases the id will be required on the server to process the record action. This is helpful since the id
|
|
* will normally not be modified, and so would not be sent to the server unless {@link #writeAllFields}
|
|
* was explicitly enabled.
|
|
*
|
|
* However, there are cases where it is not desirable for the record id to be passed in the data directly.
|
|
* For example, when using a RESTful API the record id would typically be appended to the url instead.
|
|
*/
|
|
writeRecordId: true,
|
|
|
|
/*
|
|
* @property {Boolean} isWriter
|
|
* `true` in this class to identify an object as an instantiated Writer, or subclass thereof.
|
|
*/
|
|
isWriter: true,
|
|
|
|
/**
|
|
* Creates new Writer.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
/**
|
|
* Prepares a Proxy's Ext.data.Request object
|
|
* @param {Ext.data.Request} request The request object
|
|
* @return {Ext.data.Request} The modified request object
|
|
*/
|
|
write: function(request) {
|
|
var operation = request.operation,
|
|
records = operation.records || [],
|
|
len = records.length,
|
|
i = 0,
|
|
data = [];
|
|
|
|
for (; i < len; i++) {
|
|
data.push(this.getRecordData(records[i], operation));
|
|
}
|
|
return this.writeRecords(request, data);
|
|
},
|
|
|
|
/**
|
|
* Formats the data for each record before sending it to the server. This
|
|
* method should be overridden to format the data in a way that differs from the default.
|
|
* @param {Ext.data.Model} record The record that we are writing to the server.
|
|
* @param {Ext.data.Operation} [operation] An operation object.
|
|
* @return {Object} An object literal of name/value keys to be written to the server.
|
|
* By default this method returns the data property on the record.
|
|
*/
|
|
getRecordData: function(record, operation) {
|
|
var isPhantom = record.phantom === true,
|
|
writeAll = this.writeAllFields || isPhantom,
|
|
fields = record.fields,
|
|
fieldItems = fields.items,
|
|
data = {},
|
|
clientIdProperty = record.clientIdProperty,
|
|
changes,
|
|
field,
|
|
key,
|
|
mappedIdProperty,
|
|
f, fLen;
|
|
|
|
if (writeAll) {
|
|
fLen = fieldItems.length;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
field = fieldItems[f];
|
|
if (field.persist) {
|
|
this.writeValue(data, field, record);
|
|
}
|
|
}
|
|
} else {
|
|
// Only write the changes
|
|
changes = record.getChanges();
|
|
for (key in changes) {
|
|
if (changes.hasOwnProperty(key)) {
|
|
field = fields.get(key);
|
|
if (field.persist) {
|
|
this.writeValue(data, field, record);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (isPhantom) {
|
|
if (clientIdProperty && operation && operation.records.length > 1) {
|
|
// include clientId for phantom records, if multiple records are being written to the server in one operation.
|
|
// The server can then return the clientId with each record so the operation can match the server records with the client records
|
|
data[clientIdProperty] = record.internalId;
|
|
}
|
|
} else if (this.writeRecordId) {
|
|
// Make sure that if a mapping is in place the mapped id name is used instead of the default field name.
|
|
mappedIdProperty = fields.get(record.idProperty)[this.nameProperty] || record.idProperty;
|
|
data[mappedIdProperty] = record.getId();
|
|
}
|
|
|
|
return data;
|
|
},
|
|
|
|
writeValue: function(data, field, record){
|
|
var name = field[this.nameProperty],
|
|
dateFormat = this.dateFormat || field.dateWriteFormat || field.dateFormat,
|
|
value = record.get(field.name);
|
|
|
|
// Allow the nameProperty to yield a numeric value which may be zero.
|
|
// For example, using a field's numeric mapping to write an array for output.
|
|
if (name == null) {
|
|
name = field.name;
|
|
}
|
|
|
|
if (field.serialize) {
|
|
data[name] = field.serialize(value, record);
|
|
} else if (field.type === Ext.data.Types.DATE && dateFormat && Ext.isDate(value)) {
|
|
data[name] = Ext.Date.format(value, dateFormat);
|
|
} else {
|
|
data[name] = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.writer.Json
|
|
|
|
This class is used to write {@link Ext.data.Model} data to the server in a JSON format.
|
|
The {@link #allowSingle} configuration can be set to false to force the records to always be
|
|
encoded in an array, even if there is only a single record being sent.
|
|
|
|
* @markdown
|
|
*/
|
|
Ext.define('Ext.data.writer.Json', {
|
|
extend: Ext.data.writer.Writer ,
|
|
alternateClassName: 'Ext.data.JsonWriter',
|
|
alias: 'writer.json',
|
|
|
|
/**
|
|
* @cfg {String} root The HTTP parameter name by which JSON encoded records will be passed to the server if the
|
|
* {@link #encode} option is `true`.
|
|
*/
|
|
root: undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} [encode=false] Configure `true` to send record data (all record fields if {@link #writeAllFields} is `true`)
|
|
* as a JSON encoded HTTP parameter named by the {@link #root} configuration.
|
|
*
|
|
* The encode option should only be set to true when a {@link #root} is defined, because the values will be
|
|
* sent as part of the request parameters as opposed to a raw post. The root will be the name of the parameter
|
|
* sent to the server.
|
|
*/
|
|
encode: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowSingle=true] Configure with `false` to ensure that records are always wrapped in an array, even if there is only
|
|
* one record being sent. When there is more than one record, they will always be encoded into an array.
|
|
*/
|
|
allowSingle: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [expandData=false] By default, when dot-delimited field {@link #nameProperty mappings} are
|
|
* used (e.g. `name: 'myProperty', mapping: 'my.nested.property'`) the writer will simply output a flat data
|
|
* object containing the mapping string literal as the property name (e.g. `{ 'my.nested.property': 'foo' }`).
|
|
*
|
|
* Mappings are used to map incoming nested JSON to flat Ext models. In many case, the data output by the
|
|
* writer should preferrably match the original nested data format. Setting this config to `true` will ensure
|
|
* that the output will instead look like `{ my: { nested: { property: 'foo' }}}`. The output is generated
|
|
* by {@link #getExpandedData}, which can optionally be overridden to apply more customized logic.
|
|
*/
|
|
expandData: false,
|
|
|
|
/**
|
|
* @protected
|
|
* The Reader classes support dot-delimited data mappings for extracting nested raw data into fields, so the
|
|
* writer must support converting the flat {@link Ext.data.Model} structure back into the original nested data
|
|
* format. Using the same mappings when available, the Writer will simply split each delimiter into a nested
|
|
* object in the output, which should exactly match the input format. For example, record data like this:
|
|
*
|
|
* my.nested.property: 'foo',
|
|
* my.nested.another: 'bar',
|
|
* my.somethingElse: 123
|
|
*
|
|
* should write out as...
|
|
*
|
|
* my: {
|
|
* nested: {
|
|
* property: 'foo',
|
|
* another: 'bar
|
|
* },
|
|
* somethingElse: 123
|
|
* }
|
|
*
|
|
* This behavior is governed by the {@link #expandData} config. By default, this option is `false` for
|
|
* compatibility reasons, and will output a flat structure matching the flat record format. Setting this config
|
|
* to `true` will enable the expanded mapping behavior as shown here. This method could also be overridden
|
|
* to provide an even more customized output data structure.
|
|
*/
|
|
getExpandedData: function(data) {
|
|
var dataLength = data.length,
|
|
i = 0,
|
|
item,
|
|
prop,
|
|
nameParts,
|
|
j,
|
|
tempObj,
|
|
|
|
toObject = function(name, value) {
|
|
var o = {};
|
|
o[name] = value;
|
|
return o;
|
|
};
|
|
|
|
for (; i < dataLength; i++) {
|
|
item = data[i];
|
|
|
|
for (prop in item) {
|
|
if (item.hasOwnProperty(prop)) {
|
|
// e.g. my.nested.property: 'foo'
|
|
nameParts = prop.split('.');
|
|
j = nameParts.length - 1;
|
|
|
|
if (j > 0) {
|
|
// Initially this will be the value 'foo'.
|
|
// Equivalent to rec['my.nested.property']
|
|
tempObj = item[prop];
|
|
|
|
for (; j > 0; j--) {
|
|
// Starting with the value above, we loop inside out, assigning the
|
|
// current object as the value for the parent name. Work all
|
|
// the way up until only the root name is left to assign.
|
|
tempObj = toObject(nameParts[j], tempObj);
|
|
}
|
|
|
|
// At this point we'll have all child properties rolled up into a single
|
|
// object like `{ nested: { property: 'foo' }}`. Now add the root name
|
|
// (e.g. 'my') to the record data if needed (do not overwrite existing):
|
|
item[nameParts[0]] = item[nameParts[0]] || {};
|
|
// Since there could be duplicate names at any level of the nesting be sure
|
|
// to merge rather than assign when setting the object as the value:
|
|
Ext.Object.merge(item[nameParts[0]], tempObj);
|
|
// Finally delete the original mapped property from the record
|
|
delete item[prop];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
|
|
//inherit docs
|
|
writeRecords: function(request, data) {
|
|
var root = this.root;
|
|
|
|
if (this.expandData) {
|
|
data = this.getExpandedData(data);
|
|
}
|
|
|
|
if (this.allowSingle && data.length === 1) {
|
|
// convert to single object format
|
|
data = data[0];
|
|
}
|
|
|
|
if (this.encode) {
|
|
if (root) {
|
|
// sending as a param, need to encode
|
|
request.params[root] = Ext.encode(data);
|
|
} else {
|
|
}
|
|
} else {
|
|
// send as jsonData
|
|
request.jsonData = request.jsonData || {};
|
|
if (root) {
|
|
request.jsonData[root] = data;
|
|
} else {
|
|
request.jsonData = data;
|
|
}
|
|
}
|
|
return request;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Proxies are used by {@link Ext.data.Store Stores} to handle the loading and saving of {@link Ext.data.Model Model}
|
|
* data. Usually developers will not need to create or interact with proxies directly.
|
|
*
|
|
* # Types of Proxy
|
|
*
|
|
* There are two main types of Proxy - {@link Ext.data.proxy.Client Client} and {@link Ext.data.proxy.Server Server}.
|
|
* The Client proxies save their data locally and include the following subclasses:
|
|
*
|
|
* - {@link Ext.data.proxy.LocalStorage LocalStorageProxy} - saves its data to localStorage if the browser supports it
|
|
* - {@link Ext.data.proxy.SessionStorage SessionStorageProxy} - saves its data to sessionStorage if the browsers supports it
|
|
* - {@link Ext.data.proxy.Memory MemoryProxy} - holds data in memory only, any data is lost when the page is refreshed
|
|
*
|
|
* The Server proxies save their data by sending requests to some remote server. These proxies include:
|
|
*
|
|
* - {@link Ext.data.proxy.Ajax Ajax} - sends requests to a server on the same domain
|
|
* - {@link Ext.data.proxy.JsonP JsonP} - uses JSON-P to send requests to a server on a different domain
|
|
* - {@link Ext.data.proxy.Rest Rest} - uses RESTful HTTP methods (GET/PUT/POST/DELETE) to communicate with server
|
|
* - {@link Ext.data.proxy.Direct Direct} - uses {@link Ext.direct.Manager} to send requests
|
|
*
|
|
* Proxies operate on the principle that all operations performed are either Create, Read, Update or Delete. These four
|
|
* operations are mapped to the methods {@link #create}, {@link #read}, {@link #update} and {@link #destroy}
|
|
* respectively. Each Proxy subclass implements these functions.
|
|
*
|
|
* The CRUD methods each expect an {@link Ext.data.Operation Operation} object as the sole argument. The Operation
|
|
* encapsulates information about the action the Store wishes to perform, the {@link Ext.data.Model model} instances
|
|
* that are to be modified, etc. See the {@link Ext.data.Operation Operation} documentation for more details. Each CRUD
|
|
* method also accepts a callback function to be called asynchronously on completion.
|
|
*
|
|
* Proxies also support batching of Operations via a {@link Ext.data.Batch batch} object, invoked by the {@link #batch}
|
|
* method.
|
|
*/
|
|
Ext.define('Ext.data.proxy.Proxy', {
|
|
alias: 'proxy.proxy',
|
|
alternateClassName: ['Ext.data.DataProxy', 'Ext.data.Proxy'],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} batchOrder
|
|
* Comma-separated ordering 'create', 'update' and 'destroy' actions when batching. Override this to set a different
|
|
* order for the batched CRUD actions to be executed in. Defaults to 'create,update,destroy'.
|
|
*/
|
|
batchOrder: 'create,update,destroy',
|
|
|
|
/**
|
|
* @cfg {Boolean} batchActions
|
|
* True to batch actions of a particular type when synchronizing the store. Defaults to true.
|
|
*/
|
|
batchActions: true,
|
|
|
|
/**
|
|
* @cfg {String} defaultReaderType
|
|
* The default registered reader type. Defaults to 'json'.
|
|
* @private
|
|
*/
|
|
defaultReaderType: 'json',
|
|
|
|
/**
|
|
* @cfg {String} defaultWriterType
|
|
* The default registered writer type. Defaults to 'json'.
|
|
* @private
|
|
*/
|
|
defaultWriterType: 'json',
|
|
|
|
/**
|
|
* @cfg {String/Ext.data.Model} model
|
|
* The name of the Model to tie to this Proxy. Can be either the string name of the Model, or a reference to the
|
|
* Model constructor. Required.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/String/Ext.data.reader.Reader} reader
|
|
* The Ext.data.reader.Reader to use to decode the server's response or data read from client. This can either be a
|
|
* Reader instance, a config object or just a valid Reader type name (e.g. 'json', 'xml').
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/String/Ext.data.writer.Writer} writer
|
|
* The Ext.data.writer.Writer to use to encode any request sent to the server or saved to client. This can either be
|
|
* a Writer instance, a config object or just a valid Writer type name (e.g. 'json', 'xml').
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} isProxy
|
|
* `true` in this class to identify an object as an instantiated Proxy, or subclass thereof.
|
|
*/
|
|
isProxy: true,
|
|
|
|
/**
|
|
* @property {Boolean} [isSynchronous=false]
|
|
* Identifies the proxy as (a)synchronous.
|
|
*/
|
|
isSynchronous: false,
|
|
|
|
/**
|
|
* Creates the Proxy
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
config = config || {};
|
|
me.proxyConfig = config;
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
if (me.model !== undefined && !(me.model instanceof Ext.data.Model)) {
|
|
me.setModel(me.model);
|
|
} else {
|
|
if (me.reader) {
|
|
me.setReader(me.reader);
|
|
}
|
|
|
|
if (me.writer) {
|
|
me.setWriter(me.writer);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @event metachange
|
|
* Fires when this proxy's reader provides new metadata. Metadata usually consists
|
|
* of new field definitions, but can include any configuration data required by an
|
|
* application, and can be processed as needed in the event handler.
|
|
* This event is currently only fired for JsonReaders. Note that this event is also
|
|
* propagated by {@link Ext.data.Store}, which is typically where it would be handled.
|
|
* @param {Ext.data.proxy.Proxy} this
|
|
* @param {Object} meta The JSON metadata
|
|
*/
|
|
},
|
|
|
|
/**
|
|
* Sets the model associated with this proxy. This will only usually be called by a Store
|
|
*
|
|
* @param {String/Ext.data.Model} model The new model. Can be either the model name string,
|
|
* or a reference to the model's constructor
|
|
* @param {Boolean} setOnStore Sets the new model on the associated Store, if one is present
|
|
*/
|
|
setModel: function(model, setOnStore) {
|
|
var me = this;
|
|
|
|
me.model = Ext.ModelManager.getModel(model);
|
|
|
|
me.setReader(this.reader);
|
|
me.setWriter(this.writer);
|
|
|
|
if (setOnStore && me.store) {
|
|
me.store.setModel(me.model);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the model attached to this Proxy
|
|
* @return {Ext.data.Model} The model
|
|
*/
|
|
getModel: function() {
|
|
return this.model;
|
|
},
|
|
|
|
/**
|
|
* Sets the Proxy's Reader by string, config object or Reader instance
|
|
*
|
|
* @param {String/Object/Ext.data.reader.Reader} reader The new Reader, which can be either a type string,
|
|
* a configuration object or an Ext.data.reader.Reader instance
|
|
* @return {Ext.data.reader.Reader} The attached Reader object
|
|
*/
|
|
setReader: function(reader) {
|
|
var me = this,
|
|
needsCopy = true,
|
|
current = me.reader;
|
|
|
|
if (reader === undefined || typeof reader == 'string') {
|
|
reader = {
|
|
type: reader
|
|
};
|
|
needsCopy = false;
|
|
}
|
|
|
|
if (reader.isReader) {
|
|
reader.setModel(me.model);
|
|
} else {
|
|
if (needsCopy) {
|
|
reader = Ext.apply({}, reader);
|
|
}
|
|
Ext.applyIf(reader, {
|
|
proxy: me,
|
|
model: me.model,
|
|
type : me.defaultReaderType
|
|
});
|
|
|
|
reader = Ext.createByAlias('reader.' + reader.type, reader);
|
|
}
|
|
|
|
if (reader !== current && reader.onMetaChange) {
|
|
reader.onMetaChange = Ext.Function.createSequence(reader.onMetaChange, this.onMetaChange, this);
|
|
}
|
|
|
|
me.reader = reader;
|
|
return me.reader;
|
|
},
|
|
|
|
/**
|
|
* Returns the reader currently attached to this proxy instance
|
|
* @return {Ext.data.reader.Reader} The Reader instance
|
|
*/
|
|
getReader: function() {
|
|
return this.reader;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called each time the reader's onMetaChange is called so that the proxy can fire the metachange event
|
|
*/
|
|
onMetaChange: function(meta) {
|
|
this.fireEvent('metachange', this, meta);
|
|
},
|
|
|
|
/**
|
|
* Sets the Proxy's Writer by string, config object or Writer instance
|
|
*
|
|
* @param {String/Object/Ext.data.writer.Writer} writer The new Writer, which can be either a type string,
|
|
* a configuration object or an Ext.data.writer.Writer instance
|
|
* @return {Ext.data.writer.Writer} The attached Writer object
|
|
*/
|
|
setWriter: function(writer) {
|
|
var me = this,
|
|
needsCopy = true;
|
|
|
|
if (writer === undefined || typeof writer == 'string') {
|
|
writer = {
|
|
type: writer
|
|
};
|
|
needsCopy = false;
|
|
}
|
|
|
|
if (!writer.isWriter) {
|
|
if (needsCopy) {
|
|
writer = Ext.apply({}, writer);
|
|
}
|
|
Ext.applyIf(writer, {
|
|
model: me.model,
|
|
type : me.defaultWriterType
|
|
});
|
|
|
|
writer = Ext.createByAlias('writer.' + writer.type, writer);
|
|
}
|
|
|
|
me.writer = writer;
|
|
|
|
return me.writer;
|
|
},
|
|
|
|
/**
|
|
* Returns the writer currently attached to this proxy instance
|
|
* @return {Ext.data.writer.Writer} The Writer instance
|
|
*/
|
|
getWriter: function() {
|
|
return this.writer;
|
|
},
|
|
|
|
/**
|
|
* Performs the given create operation.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
create: Ext.emptyFn,
|
|
|
|
/**
|
|
* Performs the given read operation.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
read: Ext.emptyFn,
|
|
|
|
/**
|
|
* Performs the given update operation.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
update: Ext.emptyFn,
|
|
|
|
/**
|
|
* Performs the given destroy operation.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
destroy: Ext.emptyFn,
|
|
|
|
/**
|
|
* Performs a batch of {@link Ext.data.Operation Operations}, in the order specified by {@link #batchOrder}. Used
|
|
* internally by {@link Ext.data.Store}'s {@link Ext.data.Store#sync sync} method. Example usage:
|
|
*
|
|
* myProxy.batch({
|
|
* create : [myModel1, myModel2],
|
|
* update : [myModel3],
|
|
* destroy: [myModel4, myModel5]
|
|
* });
|
|
*
|
|
* Where the myModel* above are {@link Ext.data.Model Model} instances - in this case 1 and 2 are new instances and
|
|
* have not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been
|
|
* saved but should now be destroyed.
|
|
*
|
|
* Note that the previous version of this method took 2 arguments (operations and listeners). While this is still
|
|
* supported for now, the current signature is now a single `options` argument that can contain both operations and
|
|
* listeners, in addition to other options. The multi-argument signature will likely be deprecated in a future release.
|
|
*
|
|
* @param {Object} options Object containing one or more properties supported by the batch method:
|
|
*
|
|
* @param {Object} options.operations Object containing the Model instances to act upon, keyed by action name
|
|
*
|
|
* @param {Object} [options.listeners] Event listeners object passed straight through to the Batch -
|
|
* see {@link Ext.data.Batch} for details
|
|
*
|
|
* @param {Ext.data.Batch/Object} [options.batch] A {@link Ext.data.Batch} object (or batch config to apply
|
|
* to the created batch). If unspecified a default batch will be auto-created.
|
|
*
|
|
* @param {Function} [options.callback] The function to be called upon completion of processing the batch.
|
|
* The callback is called regardless of success or failure and is passed the following parameters:
|
|
* @param {Ext.data.Batch} options.callback.batch The {@link Ext.data.Batch batch} that was processed,
|
|
* containing all operations in their current state after processing
|
|
* @param {Object} options.callback.options The options argument that was originally passed into batch
|
|
*
|
|
* @param {Function} [options.success] The function to be called upon successful completion of the batch. The
|
|
* success function is called only if no exceptions were reported in any operations. If one or more exceptions
|
|
* occurred then the `failure` function will be called instead. The success function is called
|
|
* with the following parameters:
|
|
* @param {Ext.data.Batch} options.success.batch The {@link Ext.data.Batch batch} that was processed,
|
|
* containing all operations in their current state after processing
|
|
* @param {Object} options.success.options The options argument that was originally passed into batch
|
|
*
|
|
* @param {Function} [options.failure] The function to be called upon unsuccessful completion of the batch. The
|
|
* failure function is called when one or more operations returns an exception during processing (even if some
|
|
* operations were also successful). In this case you can check the batch's {@link Ext.data.Batch#exceptions
|
|
* exceptions} array to see exactly which operations had exceptions. The failure function is called with the
|
|
* following parameters:
|
|
* @param {Ext.data.Batch} options.failure.batch The {@link Ext.data.Batch batch} that was processed,
|
|
* containing all operations in their current state after processing
|
|
* @param {Object} options.failure.options The options argument that was originally passed into batch
|
|
*
|
|
* @param {Object} [options.scope] The scope in which to execute any callbacks (i.e. the `this` object inside
|
|
* the callback, success and/or failure functions). Defaults to the proxy.
|
|
*
|
|
* @return {Ext.data.Batch} The newly created Batch
|
|
*/
|
|
batch: function(options, /* deprecated */listeners) {
|
|
var me = this,
|
|
useBatch = me.batchActions,
|
|
batch,
|
|
records,
|
|
actions, aLen, action, a, r, rLen, record;
|
|
|
|
if (options.operations === undefined) {
|
|
// the old-style (operations, listeners) signature was called
|
|
// so convert to the single options argument syntax
|
|
options = {
|
|
operations: options,
|
|
listeners: listeners
|
|
};
|
|
}
|
|
|
|
if (options.batch) {
|
|
if (Ext.isDefined(options.batch.runOperation)) {
|
|
batch = Ext.applyIf(options.batch, {
|
|
proxy: me,
|
|
listeners: {}
|
|
});
|
|
}
|
|
} else {
|
|
options.batch = {
|
|
proxy: me,
|
|
listeners: options.listeners || {}
|
|
};
|
|
}
|
|
|
|
if (!batch) {
|
|
batch = new Ext.data.Batch(options.batch);
|
|
}
|
|
|
|
batch.on('complete', Ext.bind(me.onBatchComplete, me, [options], 0));
|
|
|
|
actions = me.batchOrder.split(',');
|
|
aLen = actions.length;
|
|
|
|
for (a = 0; a < aLen; a++) {
|
|
action = actions[a];
|
|
records = options.operations[action];
|
|
|
|
if (records) {
|
|
if (useBatch) {
|
|
batch.add(new Ext.data.Operation({
|
|
action : action,
|
|
records : records
|
|
}));
|
|
} else {
|
|
rLen = records.length;
|
|
|
|
for (r = 0; r < rLen; r++) {
|
|
record = records[r];
|
|
|
|
batch.add(new Ext.data.Operation({
|
|
action : action,
|
|
records : [record]
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
batch.start();
|
|
return batch;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* The internal callback that the proxy uses to call any specified user callbacks after completion of a batch
|
|
*/
|
|
onBatchComplete: function(batchOptions, batch) {
|
|
var scope = batchOptions.scope || this;
|
|
|
|
if (batch.hasException) {
|
|
if (Ext.isFunction(batchOptions.failure)) {
|
|
Ext.callback(batchOptions.failure, scope, [batch, batchOptions]);
|
|
}
|
|
} else if (Ext.isFunction(batchOptions.success)) {
|
|
Ext.callback(batchOptions.success, scope, [batch, batchOptions]);
|
|
}
|
|
|
|
if (Ext.isFunction(batchOptions.callback)) {
|
|
Ext.callback(batchOptions.callback, scope, [batch, batchOptions]);
|
|
}
|
|
},
|
|
|
|
clone: function() {
|
|
return new this.self(this.proxyConfig);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Represents a single read or write operation performed by a {@link Ext.data.proxy.Proxy Proxy}. Operation objects are
|
|
* used to enable communication between Stores and Proxies. Application developers should rarely need to interact with
|
|
* Operation objects directly.
|
|
*
|
|
* Several Operations can be batched together in a {@link Ext.data.Batch batch}.
|
|
*/
|
|
Ext.define('Ext.data.Operation', {
|
|
/**
|
|
* @cfg {Boolean} synchronous
|
|
* True if this Operation is to be executed synchronously. This property is inspected by a
|
|
* {@link Ext.data.Batch Batch} to see if a series of Operations can be executed in parallel or not.
|
|
*/
|
|
synchronous: true,
|
|
|
|
/**
|
|
* @cfg {String} action
|
|
* The action being performed by this Operation. Should be one of 'create', 'read', 'update' or 'destroy'.
|
|
*/
|
|
action: undefined,
|
|
|
|
/**
|
|
* @cfg {Ext.util.Filter[]} filters
|
|
* Optional array of filter objects. Only applies to 'read' actions.
|
|
*/
|
|
filters: undefined,
|
|
|
|
/**
|
|
* @cfg {Ext.util.Sorter[]} sorters
|
|
* Optional array of sorter objects. Only applies to 'read' actions.
|
|
*/
|
|
sorters: undefined,
|
|
|
|
/**
|
|
* @cfg {Ext.util.Grouper[]} groupers
|
|
* Optional grouping configuration. Only applies to 'read' actions where grouping is desired.
|
|
*/
|
|
groupers: undefined,
|
|
|
|
/**
|
|
* @cfg {Number} start
|
|
* The start index (offset), used in paging when running a 'read' action.
|
|
*/
|
|
start: undefined,
|
|
|
|
/**
|
|
* @cfg {Number} limit
|
|
* The number of records to load. Used on 'read' actions when paging is being used.
|
|
*/
|
|
limit: undefined,
|
|
|
|
/**
|
|
* @cfg {Ext.data.Batch} batch
|
|
* The batch that this Operation is a part of.
|
|
*/
|
|
batch: undefined,
|
|
|
|
/**
|
|
* @cfg {Object} params
|
|
* Parameters to pass along with the request when performing the operation.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} callback
|
|
* Function to execute when operation completed.
|
|
* @cfg {Ext.data.Model[]} callback.records Array of records.
|
|
* @cfg {Ext.data.Operation} callback.operation The Operation itself.
|
|
* @cfg {Boolean} callback.success True when operation completed successfully.
|
|
*/
|
|
callback: undefined,
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* Scope for the {@link #callback} function.
|
|
*/
|
|
scope: undefined,
|
|
|
|
/**
|
|
* @property {Boolean} started
|
|
* The start status of this Operation. Use {@link #isStarted}.
|
|
* @readonly
|
|
* @private
|
|
*/
|
|
started: false,
|
|
|
|
/**
|
|
* @property {Boolean} running
|
|
* The run status of this Operation. Use {@link #isRunning}.
|
|
* @readonly
|
|
* @private
|
|
*/
|
|
running: false,
|
|
|
|
/**
|
|
* @property {Boolean} complete
|
|
* The completion status of this Operation. Use {@link #isComplete}.
|
|
* @readonly
|
|
* @private
|
|
*/
|
|
complete: false,
|
|
|
|
/**
|
|
* @property {Boolean} success
|
|
* Whether the Operation was successful or not. This starts as undefined and is set to true
|
|
* or false by the Proxy that is executing the Operation. It is also set to false by {@link #setException}. Use
|
|
* {@link #wasSuccessful} to query success status.
|
|
* @readonly
|
|
* @private
|
|
*/
|
|
success: undefined,
|
|
|
|
/**
|
|
* @property {Boolean} exception
|
|
* The exception status of this Operation. Use {@link #hasException} and see {@link #getError}.
|
|
* @readonly
|
|
* @private
|
|
*/
|
|
exception: false,
|
|
|
|
/**
|
|
* @property {String/Object} error
|
|
* The error object passed when {@link #setException} was called. This could be any object or primitive.
|
|
* @private
|
|
*/
|
|
error: undefined,
|
|
|
|
/**
|
|
* @property {RegExp} actionCommitRecordsRe
|
|
* The RegExp used to categorize actions that require record commits.
|
|
*/
|
|
actionCommitRecordsRe: /^(?:create|update)$/i,
|
|
|
|
/**
|
|
* @property {RegExp} actionSkipSyncRe
|
|
* The RegExp used to categorize actions that skip local record synchronization. This defaults
|
|
* to match 'destroy'.
|
|
*/
|
|
actionSkipSyncRe: /^destroy$/i,
|
|
|
|
/**
|
|
* Creates new Operation object.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, config || {});
|
|
},
|
|
|
|
/**
|
|
* This method is called to commit data to this instance's records given the records in
|
|
* the server response. This is followed by calling {@link Ext.data.Model#commit} on all
|
|
* those records (for 'create' and 'update' actions).
|
|
*
|
|
* If this {@link #action} is 'destroy', any server records are ignored and the
|
|
* {@link Ext.data.Model#commit} method is not called.
|
|
*
|
|
* @param {Ext.data.Model[]} serverRecords An array of {@link Ext.data.Model} objects returned by
|
|
* the server.
|
|
* @markdown
|
|
*/
|
|
commitRecords: function(serverRecords) {
|
|
var me = this,
|
|
commitRecords = me.actionCommitRecordsRe.test(me.action),
|
|
mc, index, clientRecords, serverRec, clientRec, i, len,
|
|
modifiedFields, recordModifiedFields;
|
|
|
|
if (!me.actionSkipSyncRe.test(me.action)) {
|
|
clientRecords = me.records;
|
|
|
|
if (clientRecords && clientRecords.length) {
|
|
|
|
// If we plan to commit the records modified by the server's return records
|
|
// we collect all the fields which were modified as a result.
|
|
// This is so that a modifiedFields array can be passed into the commit codepath
|
|
// so that minimal UI updating can be applied.
|
|
if (commitRecords) {
|
|
recordModifiedFields = [];
|
|
}
|
|
if (clientRecords.length > 1) {
|
|
// If this operation has multiple records, client records need to be matched up with server records
|
|
// so that any data returned from the server can be updated in the client records. If we don't have
|
|
// a clientIdProperty specified on the model and we've done a create, just assume the data is returned in order.
|
|
// If it's an update, the records should already have an id which should match what the server returns.
|
|
if (me.action == 'update' || clientRecords[0].clientIdProperty) {
|
|
mc = new Ext.util.MixedCollection();
|
|
mc.addAll(serverRecords);
|
|
|
|
for (index = clientRecords.length; index--; ) {
|
|
clientRec = clientRecords[index];
|
|
serverRec = mc.findBy(me.matchClientRec, clientRec);
|
|
|
|
// Replace client record data with server record data
|
|
modifiedFields = clientRec.copyFrom(serverRec);
|
|
|
|
// If we plan to commit the records, collect modified field list for each record
|
|
if (commitRecords) {
|
|
recordModifiedFields.push(modifiedFields);
|
|
}
|
|
}
|
|
} else {
|
|
for (i = 0, len = clientRecords.length; i < len; ++i) {
|
|
clientRec = clientRecords[i];
|
|
serverRec = serverRecords[i];
|
|
if (clientRec && serverRec) {
|
|
modifiedFields = me.updateRecord(clientRec, serverRec);
|
|
|
|
// If we plan to commit the records, collect modified field list for each record
|
|
if (commitRecords) {
|
|
recordModifiedFields.push(modifiedFields);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
// operation only has one record, so just match the first client record up with the first server record
|
|
modifiedFields = me.updateRecord(clientRecords[0], serverRecords[0]);
|
|
|
|
// If we plan to commit the records, collect modified field list for each record
|
|
if (commitRecords) {
|
|
recordModifiedFields[0] = modifiedFields;
|
|
}
|
|
}
|
|
|
|
if (commitRecords) {
|
|
for (index = clientRecords.length; index--; ) {
|
|
|
|
// Pass array of field names which were modified as a result of the server's reply
|
|
// In a grid, this avoids full row refreshes when the record returns unmodified.
|
|
// See Ext.view.Table#shouldUpdateCell
|
|
clientRecords[index].commit(false, recordModifiedFields[index]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
updateRecord: function(clientRec, serverRec) {
|
|
// if the client record is not a phantom, make sure the ids match before replacing the client data with server data.
|
|
if (serverRec && (clientRec.phantom || clientRec.getId() === serverRec.getId())) {
|
|
return clientRec.copyFrom(serverRec);
|
|
}
|
|
|
|
// ID could not be matched up, no fields were modified.
|
|
return [];
|
|
},
|
|
|
|
// Private.
|
|
// Record matching function used by commitRecords
|
|
// IMPORTANT: This is called in the scope of the clientRec being matched
|
|
matchClientRec: function(record) {
|
|
var clientRec = this,
|
|
clientRecordId = clientRec.getId();
|
|
|
|
if(clientRecordId && record.getId() === clientRecordId) {
|
|
return true;
|
|
}
|
|
// if the server record cannot be found by id, find by internalId.
|
|
// this allows client records that did not previously exist on the server
|
|
// to be updated with the correct server id and data.
|
|
return record.internalId === clientRec.internalId;
|
|
},
|
|
|
|
/**
|
|
* Marks the Operation as started.
|
|
*/
|
|
setStarted: function() {
|
|
this.started = true;
|
|
this.running = true;
|
|
},
|
|
|
|
/**
|
|
* Marks the Operation as completed.
|
|
*/
|
|
setCompleted: function() {
|
|
this.complete = true;
|
|
this.running = false;
|
|
},
|
|
|
|
/**
|
|
* Marks the Operation as successful.
|
|
*/
|
|
setSuccessful: function() {
|
|
this.success = true;
|
|
},
|
|
|
|
/**
|
|
* Marks the Operation as having experienced an exception. Can be supplied with an option error message/object.
|
|
* @param {String/Object} error (optional) error string/object
|
|
*/
|
|
setException: function(error) {
|
|
this.exception = true;
|
|
this.success = false;
|
|
this.running = false;
|
|
this.error = error;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this Operation encountered an exception (see also {@link #getError})
|
|
* @return {Boolean} True if there was an exception
|
|
*/
|
|
hasException: function() {
|
|
return this.exception === true;
|
|
},
|
|
|
|
/**
|
|
* Returns the error string or object that was set using {@link #setException}
|
|
* @return {String/Object} The error object
|
|
*/
|
|
getError: function() {
|
|
return this.error;
|
|
},
|
|
|
|
/**
|
|
* Returns the {@link Ext.data.Model record}s associated with this operation. For read operations the records as set by the {@link Ext.data.proxy.Proxy Proxy} will be returned (returns `null` if the proxy has not yet set the records).
|
|
* For create, update, and destroy operations the operation's initially configured records will be returned, although the proxy may modify these records' data at some point after the operation is initialized.
|
|
* @return {Ext.data.Model[]}
|
|
*/
|
|
getRecords: function() {
|
|
var resultSet = this.getResultSet();
|
|
return this.records || (resultSet ? resultSet.records : null);
|
|
},
|
|
|
|
/**
|
|
* Returns the ResultSet object (if set by the Proxy). This object will contain the {@link Ext.data.Model model}
|
|
* instances as well as meta data such as number of instances fetched, number available etc
|
|
* @return {Ext.data.ResultSet} The ResultSet object
|
|
*/
|
|
getResultSet: function() {
|
|
return this.resultSet;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the Operation has been started. Note that the Operation may have started AND completed, see
|
|
* {@link #isRunning} to test if the Operation is currently running.
|
|
* @return {Boolean} True if the Operation has started
|
|
*/
|
|
isStarted: function() {
|
|
return this.started === true;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the Operation has been started but has not yet completed.
|
|
* @return {Boolean} True if the Operation is currently running
|
|
*/
|
|
isRunning: function() {
|
|
return this.running === true;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the Operation has been completed
|
|
* @return {Boolean} True if the Operation is complete
|
|
*/
|
|
isComplete: function() {
|
|
return this.complete === true;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the Operation has completed and was successful
|
|
* @return {Boolean} True if successful
|
|
*/
|
|
wasSuccessful: function() {
|
|
return this.isComplete() && this.success === true;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Associates this Operation with a Batch
|
|
* @param {Ext.data.Batch} batch The batch
|
|
*/
|
|
setBatch: function(batch) {
|
|
this.batch = batch;
|
|
},
|
|
|
|
/**
|
|
* Checks whether this operation should cause writing to occur.
|
|
* @return {Boolean} Whether the operation should cause a write to occur.
|
|
*/
|
|
allowWrite: function() {
|
|
return this.action != 'read';
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* AbstractStore is a superclass of {@link Ext.data.Store} and {@link Ext.data.TreeStore}. It's never used directly,
|
|
* but offers a set of methods used by both of those subclasses.
|
|
*
|
|
* We've left it here in the docs for reference purposes, but unless you need to make a whole new type of Store, what
|
|
* you're probably looking for is {@link Ext.data.Store}. If you're still interested, here's a brief description of what
|
|
* AbstractStore is and is not.
|
|
*
|
|
* AbstractStore provides the basic configuration for anything that can be considered a Store. It expects to be
|
|
* given a {@link Ext.data.Model Model} that represents the type of data in the Store. It also expects to be given a
|
|
* {@link Ext.data.proxy.Proxy Proxy} that handles the loading of data into the Store.
|
|
*
|
|
* AbstractStore provides a few helpful methods such as {@link #method-load} and {@link #sync}, which load and save data
|
|
* respectively, passing the requests through the configured {@link #proxy}. Both built-in Store subclasses add extra
|
|
* behavior to each of these functions. Note also that each AbstractStore subclass has its own way of storing data -
|
|
* 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.
|
|
*
|
|
* 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 Ext.data.Store#remoteSort remoteSort} and
|
|
* {@link Ext.data.Store#remoteFilter remoteFilter} config options. For more information see the {@link #sort} and
|
|
* {@link Ext.data.Store#filter filter} methods.
|
|
*/
|
|
Ext.define('Ext.data.AbstractStore', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable ,
|
|
sortable: Ext.util.Sortable
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* Creates a store from config object.
|
|
*
|
|
* @param {Object/Ext.data.AbstractStore} store A config for
|
|
* the store to be created. It may contain a `type` field
|
|
* which defines the particular type of store to create.
|
|
*
|
|
* Alteratively passing an actual store to this method will
|
|
* just return it, no changes made.
|
|
*
|
|
* @return {Ext.data.AbstractStore} The created store.
|
|
* @static
|
|
*/
|
|
create: function(store) {
|
|
if (!store.isStore) {
|
|
if (!store.type) {
|
|
store.type = 'store';
|
|
}
|
|
store = Ext.createByAlias('store.' + store.type, store);
|
|
}
|
|
return store;
|
|
}
|
|
},
|
|
|
|
onClassExtended: function(cls, data, hooks) {
|
|
var model = data.model,
|
|
onBeforeClassCreated;
|
|
|
|
if (typeof model == 'string') {
|
|
onBeforeClassCreated = hooks.onBeforeCreated;
|
|
|
|
hooks.onBeforeCreated = function() {
|
|
var me = this,
|
|
args = arguments;
|
|
|
|
Ext.require(model, function() {
|
|
onBeforeClassCreated.apply(me, args);
|
|
});
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} remoteSort
|
|
* True to defer any sorting operation to the server. If false, sorting is done locally on the client.
|
|
*/
|
|
remoteSort : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} remoteFilter
|
|
* True to defer any filtering operation to the server. If false, filtering is done locally on the client.
|
|
*/
|
|
remoteFilter: false,
|
|
|
|
/**
|
|
* @cfg {String/Ext.data.proxy.Proxy/Object} proxy
|
|
* The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance -
|
|
* see {@link #setProxy} for details.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} autoLoad
|
|
* If data is not specified, and if autoLoad is true or an Object, this store's load method is automatically called
|
|
* after creation. If the value of autoLoad is an Object, this Object will be passed to the store's load method.
|
|
* @since 2.3.0
|
|
*/
|
|
autoLoad: undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} autoSync
|
|
* True to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.
|
|
*/
|
|
autoSync: false,
|
|
|
|
/**
|
|
* @cfg {String} batchUpdateMode
|
|
* Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's
|
|
* internal representation of the data after each operation of the batch has completed, 'complete' will wait until
|
|
* the entire batch has been completed before updating the Store's data. 'complete' is a good choice for local
|
|
* storage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency.
|
|
*/
|
|
batchUpdateMode: 'operation',
|
|
|
|
/**
|
|
* @cfg {Boolean} filterOnLoad
|
|
* If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired.
|
|
* Defaults to true, ignored if {@link Ext.data.Store#remoteFilter remoteFilter} is true
|
|
*/
|
|
filterOnLoad: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} sortOnLoad
|
|
* If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired.
|
|
* Defaults to true, igored if {@link Ext.data.Store#remoteSort remoteSort} is true
|
|
*/
|
|
sortOnLoad: true,
|
|
|
|
/**
|
|
* @property {Boolean} implicitModel
|
|
* True if a model was created implicitly for this Store. This happens if a fields array is passed to the Store's
|
|
* constructor instead of a model constructor or name.
|
|
* @private
|
|
*/
|
|
implicitModel: false,
|
|
|
|
/**
|
|
* @property {String} defaultProxyType
|
|
* The string type of the Proxy to create if none is specified. This defaults to creating a
|
|
* {@link Ext.data.proxy.Memory memory proxy}.
|
|
*/
|
|
defaultProxyType: 'memory',
|
|
|
|
/**
|
|
* @property {Boolean} isDestroyed
|
|
* True if the Store has already been destroyed. If this is true, the reference to Store should be deleted
|
|
* as it will not function correctly any more.
|
|
* @since 3.4.0
|
|
*/
|
|
isDestroyed: false,
|
|
|
|
/**
|
|
* @property {Boolean} isStore
|
|
* `true` in this class to identify an object as an instantiated Store, or subclass thereof.
|
|
*/
|
|
isStore: true,
|
|
|
|
/**
|
|
* @cfg {String} storeId
|
|
* Unique identifier for this store. If present, this Store will be registered with the {@link Ext.data.StoreManager},
|
|
* making it easy to reuse elsewhere.
|
|
*
|
|
* Note that when store is instatiated by Controller, the storeId will be overridden by the name of the store.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object[]} fields
|
|
* This may be used in place of specifying a {@link #model} configuration. The fields should be a
|
|
* set of {@link Ext.data.Field} configuration objects. The store will automatically create a {@link Ext.data.Model}
|
|
* with these fields. In general this configuration option should only be used for simple stores like
|
|
* a two-field store of ComboBox. For anything more complicated, such as specifying a particular id property or
|
|
* associations, a {@link Ext.data.Model} should be defined and specified for the {@link #model}
|
|
* config.
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} model
|
|
* Name of the {@link Ext.data.Model Model} associated with this store.
|
|
* The string is used as an argument for {@link Ext.ModelManager#getModel}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object[]/Function[]} filters
|
|
* Array of {@link Ext.util.Filter Filters} for this store. Can also be passed array of
|
|
* functions which will be used as the {@link Ext.util.Filter#filterFn filterFn} config
|
|
* for filters:
|
|
*
|
|
* filters: [
|
|
* function(item) {
|
|
* return item.weight > 0;
|
|
* }
|
|
* ]
|
|
*
|
|
* To filter after the grid is loaded use the {@link Ext.data.Store#filterBy filterBy} function.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [statefulFilters=false]
|
|
* Configure as `true` to have the filters saved when a client {@link Ext.grid.Panel grid} saves its state.
|
|
*/
|
|
|
|
sortRoot: 'data',
|
|
|
|
//documented above
|
|
constructor: function(config) {
|
|
var me = this,
|
|
filters;
|
|
|
|
/**
|
|
* @event add
|
|
* Fired when a Model instance has been added to this Store.
|
|
* @param {Ext.data.Store} store The store
|
|
* @param {Ext.data.Model[]} records The Model instances that were added
|
|
* @param {Number} index The index at which the instances were inserted
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event remove
|
|
* Fired when a Model instance has been removed from this Store.
|
|
*
|
|
* **If many records may be removed in one go, then it is more efficient to listen for the {@link #event-bulkremove} event
|
|
* and perform any processing for a bulk remove than to listen for this {@link #event-remove} event.**
|
|
* @param {Ext.data.Store} store The Store object
|
|
* @param {Ext.data.Model} record The record that was removed
|
|
* @param {Number} index The index of the record that was removed
|
|
* @param {Boolean} isMove `true` if the child node is being removed so it can be moved to another position in this Store.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event bulkremove
|
|
* Fired at the *end* of the {@link Ext.data.Store#method-remove remove} method when all records in the passed array have been removed.
|
|
*
|
|
* If many records may be removed in one go, then it is more efficient to listen for this event
|
|
* and perform any processing for a bulk remove than to listen for many {@link #event-remove} events.
|
|
* @param {Ext.data.Store} store The Store object
|
|
* @param {Ext.data.Model[]} records The array of records that were removed (In the order they appear in the Store)
|
|
* @param {Number[]} indexes The indexes of the records that were removed
|
|
* @param {Boolean} isMove `true` if the child nodes are being removed so they can be moved to another position in this Store.
|
|
*/
|
|
|
|
/**
|
|
* @event update
|
|
* Fires when a Model instance has been updated.
|
|
* @param {Ext.data.Store} this
|
|
* @param {Ext.data.Model} record The Model instance that was updated
|
|
* @param {String} operation The update operation being performed. Value may be one of:
|
|
*
|
|
* Ext.data.Model.EDIT
|
|
* Ext.data.Model.REJECT
|
|
* Ext.data.Model.COMMIT
|
|
* @param {String[]} modifiedFieldNames Array of field names changed during edit.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event datachanged
|
|
* Fires whenever the records in the Store have changed in some way - this could include adding or removing
|
|
* records, or updating the data in existing records
|
|
* @param {Ext.data.Store} this The data store
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event refresh
|
|
* Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a
|
|
* widget that is using this Store as a Record cache should refresh its view.
|
|
* @param {Ext.data.Store} this The data store
|
|
*/
|
|
|
|
/**
|
|
* @event beforeload
|
|
* Fires before a request is made for a new data object. If the beforeload handler returns false the load
|
|
* action will be canceled.
|
|
* @param {Ext.data.Store} store This Store
|
|
* @param {Ext.data.Operation} operation The Ext.data.Operation object that will be passed to the Proxy to
|
|
* load the Store
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event load
|
|
* Fires whenever the store reads data from a remote data source.
|
|
* @param {Ext.data.Store} this
|
|
* @param {Ext.data.Model[]} records An array of records
|
|
* @param {Boolean} successful True if the operation was successful.
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
/**
|
|
* @event write
|
|
* Fires whenever a successful write has been made via the configured {@link #proxy Proxy}
|
|
* @param {Ext.data.Store} store This Store
|
|
* @param {Ext.data.Operation} operation The {@link Ext.data.Operation Operation} object that was used in
|
|
* the write
|
|
* @since 3.4.0
|
|
*/
|
|
|
|
/**
|
|
* @event beforesync
|
|
* Fired before a call to {@link #sync} is executed. Return false from any listener to cancel the sync
|
|
* @param {Object} options Hash of all records to be synchronized, broken down into create, update and destroy
|
|
*/
|
|
/**
|
|
* @event clear
|
|
* Fired after the {@link #removeAll} method is called.
|
|
* @param {Ext.data.Store} this
|
|
* @since 1.1.0
|
|
*/
|
|
/**
|
|
* @event metachange
|
|
* Fires when this store's underlying reader (available via the proxy) provides new metadata.
|
|
* Metadata usually consists of new field definitions, but can include any configuration data
|
|
* required by an application, and can be processed as needed in the event handler.
|
|
* This event is currently only fired for JsonReaders.
|
|
* @param {Ext.data.Store} this
|
|
* @param {Object} meta The JSON metadata
|
|
* @since 1.1.0
|
|
*/
|
|
|
|
Ext.apply(me, config);
|
|
// don't use *config* anymore from here on... use *me* instead...
|
|
|
|
/**
|
|
* Temporary cache in which removed model instances are kept until successfully synchronised with a Proxy,
|
|
* at which point this is cleared.
|
|
* @protected
|
|
* @property {Ext.data.Model[]} removed
|
|
*/
|
|
me.removed = [];
|
|
|
|
me.mixins.observable.constructor.apply(me, arguments);
|
|
|
|
|
|
me.model = Ext.ModelManager.getModel(me.model);
|
|
|
|
/**
|
|
* @property {Object} modelDefaults
|
|
* @private
|
|
* A set of default values to be applied to every model instance added via {@link Ext.data.Store#insert insert} or created
|
|
* via {@link Ext.data.Store#createModel createModel}. This is used internally by associations to set foreign keys and
|
|
* other fields. See the Association classes source code for examples. This should not need to be used by application developers.
|
|
*/
|
|
Ext.applyIf(me, {
|
|
modelDefaults: null
|
|
});
|
|
|
|
//Supports the 3.x style of simply passing an array of fields to the store, implicitly creating a model
|
|
if (!me.model && me.fields) {
|
|
me.model = Ext.define('Ext.data.Store.ImplicitModel-' + (me.storeId || Ext.id()), {
|
|
extend: 'Ext.data.Model',
|
|
fields: me.fields,
|
|
proxy: me.proxy || me.defaultProxyType
|
|
});
|
|
|
|
delete me.fields;
|
|
|
|
me.implicitModel = true;
|
|
}
|
|
|
|
|
|
//ensures that the Proxy is instantiated correctly
|
|
me.setProxy(me.proxy || me.model.getProxy());
|
|
|
|
if (!me.disableMetaChangeEvent) {
|
|
me.proxy.on('metachange', me.onMetaChange, me);
|
|
}
|
|
|
|
if (me.id && !me.storeId) {
|
|
me.storeId = me.id;
|
|
delete me.id;
|
|
}
|
|
|
|
if (me.storeId) {
|
|
Ext.data.StoreManager.register(me);
|
|
}
|
|
|
|
me.mixins.sortable.initSortable.call(me);
|
|
|
|
/**
|
|
* @property {Ext.util.MixedCollection} filters
|
|
* The collection of {@link Ext.util.Filter Filters} currently applied to this Store
|
|
*/
|
|
filters = me.decodeFilters(me.filters);
|
|
me.filters = new Ext.util.MixedCollection();
|
|
me.filters.addAll(filters);
|
|
},
|
|
|
|
/**
|
|
* Sets the Store's Proxy by string, config object or Proxy instance
|
|
* @param {String/Object/Ext.data.proxy.Proxy} proxy The new Proxy, which can be either a type string, a configuration object
|
|
* or an Ext.data.proxy.Proxy instance
|
|
* @return {Ext.data.proxy.Proxy} The attached Proxy object
|
|
*/
|
|
setProxy: function(proxy) {
|
|
var me = this;
|
|
|
|
if (proxy instanceof Ext.data.proxy.Proxy) {
|
|
proxy.setModel(me.model);
|
|
} else {
|
|
if (Ext.isString(proxy)) {
|
|
proxy = {
|
|
type: proxy
|
|
};
|
|
}
|
|
Ext.applyIf(proxy, {
|
|
model: me.model
|
|
});
|
|
|
|
proxy = Ext.createByAlias('proxy.' + proxy.type, proxy);
|
|
}
|
|
|
|
me.proxy = proxy;
|
|
|
|
return me.proxy;
|
|
},
|
|
|
|
/**
|
|
* Returns the proxy currently attached to this proxy instance
|
|
* @return {Ext.data.proxy.Proxy} The Proxy instance
|
|
*/
|
|
getProxy: function() {
|
|
return this.proxy;
|
|
},
|
|
|
|
// private
|
|
onMetaChange: function(proxy, meta) {
|
|
this.fireEvent('metachange', this, meta);
|
|
},
|
|
|
|
//saves any phantom records
|
|
create: function(data, options) {
|
|
var me = this,
|
|
instance = Ext.ModelManager.create(Ext.applyIf(data, me.modelDefaults), me.model.modelName),
|
|
operation;
|
|
|
|
options = options || {};
|
|
|
|
Ext.applyIf(options, {
|
|
action : 'create',
|
|
records: [instance]
|
|
});
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
me.proxy.create(operation, me.onProxyWrite, me);
|
|
|
|
return instance;
|
|
},
|
|
|
|
read: function() {
|
|
return this.load.apply(this, arguments);
|
|
},
|
|
|
|
update: function(options) {
|
|
var me = this,
|
|
operation;
|
|
options = options || {};
|
|
|
|
Ext.applyIf(options, {
|
|
action : 'update',
|
|
records: me.getUpdatedRecords()
|
|
});
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
return me.proxy.update(operation, me.onProxyWrite, me);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Callback for any write Operation over the Proxy. Updates the Store's MixedCollection to reflect
|
|
* the updates provided by the Proxy
|
|
*/
|
|
onProxyWrite: function(operation) {
|
|
var me = this,
|
|
success = operation.wasSuccessful(),
|
|
records = operation.getRecords();
|
|
|
|
switch (operation.action) {
|
|
case 'create':
|
|
me.onCreateRecords(records, operation, success);
|
|
break;
|
|
case 'update':
|
|
me.onUpdateRecords(records, operation, success);
|
|
break;
|
|
case 'destroy':
|
|
me.onDestroyRecords(records, operation, success);
|
|
break;
|
|
}
|
|
|
|
if (success) {
|
|
me.fireEvent('write', me, operation);
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
//this is a callback that would have been passed to the 'create', 'update' or 'destroy' function and is optional
|
|
Ext.callback(operation.callback, operation.scope || me, [records, operation, success]);
|
|
},
|
|
|
|
// may be implemented by store subclasses
|
|
onCreateRecords: Ext.emptyFn,
|
|
|
|
// may be implemented by store subclasses
|
|
onUpdateRecords: Ext.emptyFn,
|
|
|
|
/**
|
|
* Removes any records when a write is returned from the server.
|
|
* @private
|
|
* @param {Ext.data.Model[]} records The array of removed records
|
|
* @param {Ext.data.Operation} operation The operation that just completed
|
|
* @param {Boolean} success True if the operation was successful
|
|
*/
|
|
onDestroyRecords: function(records, operation, success) {
|
|
if (success) {
|
|
this.removed = [];
|
|
}
|
|
},
|
|
|
|
// tells the attached proxy to destroy the given records
|
|
// @since 3.4.0
|
|
destroy: function(options) {
|
|
var me = this,
|
|
operation;
|
|
|
|
options = options || {};
|
|
|
|
Ext.applyIf(options, {
|
|
action : 'destroy',
|
|
records: me.getRemovedRecords()
|
|
});
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
return me.proxy.destroy(operation, me.onProxyWrite, me);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Attached as the 'operationcomplete' event listener to a proxy's Batch object. By default just calls through
|
|
* to onProxyWrite.
|
|
*/
|
|
onBatchOperationComplete: function(batch, operation) {
|
|
return this.onProxyWrite(operation);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Attached as the 'complete' event listener to a proxy's Batch object. Iterates over the batch operations
|
|
* and updates the Store's internal data MixedCollection.
|
|
*/
|
|
onBatchComplete: function(batch, operation) {
|
|
var me = this,
|
|
operations = batch.operations,
|
|
length = operations.length,
|
|
i;
|
|
|
|
me.suspendEvents();
|
|
|
|
for (i = 0; i < length; i++) {
|
|
me.onProxyWrite(operations[i]);
|
|
}
|
|
|
|
me.resumeEvents();
|
|
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onBatchException: function(batch, operation) {
|
|
// //decide what to do... could continue with the next operation
|
|
// batch.start();
|
|
//
|
|
// //or retry the last operation
|
|
// batch.retry();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Filter function for new records.
|
|
*/
|
|
filterNew: function(item) {
|
|
// only want phantom records that are valid
|
|
return item.phantom === true && item.isValid();
|
|
},
|
|
|
|
/**
|
|
* Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not
|
|
* yet been saved on this Store (this happens when adding a non-phantom record from another Store into this one)
|
|
* @return {Ext.data.Model[]} The Model instances
|
|
*/
|
|
getNewRecords: function() {
|
|
return [];
|
|
},
|
|
|
|
/**
|
|
* Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy
|
|
* @return {Ext.data.Model[]} The updated Model instances
|
|
*/
|
|
getUpdatedRecords: function() {
|
|
return [];
|
|
},
|
|
|
|
/**
|
|
* Gets all {@link Ext.data.Model records} added or updated since the last commit. Note that the order of records
|
|
* returned is not deterministic and does not indicate the order in which records were modified. Note also that
|
|
* removed records are not included (use {@link #getRemovedRecords} for that).
|
|
* @return {Ext.data.Model[]} The added and updated Model instances
|
|
*/
|
|
getModifiedRecords : function(){
|
|
return [].concat(this.getNewRecords(), this.getUpdatedRecords());
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Filter function for updated records.
|
|
*/
|
|
filterUpdated: function(item) {
|
|
// only want dirty records, not phantoms that are valid
|
|
return item.dirty === true && item.phantom !== true && item.isValid();
|
|
},
|
|
|
|
/**
|
|
* Returns any records that have been removed from the store but not yet destroyed on the proxy.
|
|
* @return {Ext.data.Model[]} The removed Model instances
|
|
*/
|
|
getRemovedRecords: function() {
|
|
return this.removed;
|
|
},
|
|
|
|
filter: function(filters, value) {
|
|
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Normalizes an array of filter objects, ensuring that they are all Ext.util.Filter instances
|
|
* @param {Object[]} filters The filters array
|
|
* @return {Ext.util.Filter[]} Array of Ext.util.Filter objects
|
|
*/
|
|
decodeFilters: function(filters) {
|
|
if (!Ext.isArray(filters)) {
|
|
if (filters === undefined) {
|
|
filters = [];
|
|
} else {
|
|
filters = [filters];
|
|
}
|
|
}
|
|
|
|
var length = filters.length,
|
|
Filter = Ext.util.Filter,
|
|
config, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
config = filters[i];
|
|
|
|
if (!(config instanceof Filter)) {
|
|
Ext.apply(config, {
|
|
root: 'data'
|
|
});
|
|
|
|
//support for 3.x style filters where a function can be defined as 'fn'
|
|
if (config.fn) {
|
|
config.filterFn = config.fn;
|
|
}
|
|
|
|
//support a function to be passed as a filter definition
|
|
if (typeof config == 'function') {
|
|
config = {
|
|
filterFn: config
|
|
};
|
|
}
|
|
|
|
filters[i] = new Filter(config);
|
|
}
|
|
}
|
|
|
|
return filters;
|
|
},
|
|
|
|
clearFilter: function(supressEvent) {
|
|
|
|
},
|
|
|
|
isFiltered: function() {
|
|
|
|
},
|
|
|
|
filterBy: function(fn, scope) {
|
|
|
|
},
|
|
|
|
/**
|
|
* Synchronizes the store with its {@link #proxy}. This asks the proxy to batch together any new, updated
|
|
* and deleted records in the store, updating the store's internal representation of the records
|
|
* as each operation completes.
|
|
*
|
|
* @param {Object} [options] Object containing one or more properties supported by the sync method (these get
|
|
* passed along to the underlying proxy's {@link Ext.data.Proxy#batch batch} method):
|
|
*
|
|
* @param {Ext.data.Batch/Object} [options.batch] A {@link Ext.data.Batch} object (or batch config to apply
|
|
* to the created batch). If unspecified a default batch will be auto-created as needed.
|
|
*
|
|
* @param {Function} [options.callback] The function to be called upon completion of the sync.
|
|
* The callback is called regardless of success or failure and is passed the following parameters:
|
|
* @param {Ext.data.Batch} options.callback.batch The {@link Ext.data.Batch batch} that was processed,
|
|
* containing all operations in their current state after processing
|
|
* @param {Object} options.callback.options The options argument that was originally passed into sync
|
|
*
|
|
* @param {Function} [options.success] The function to be called upon successful completion of the sync. The
|
|
* success function is called only if no exceptions were reported in any operations. If one or more exceptions
|
|
* occurred then the failure function will be called instead. The success function is called
|
|
* with the following parameters:
|
|
* @param {Ext.data.Batch} options.success.batch The {@link Ext.data.Batch batch} that was processed,
|
|
* containing all operations in their current state after processing
|
|
* @param {Object} options.success.options The options argument that was originally passed into sync
|
|
*
|
|
* @param {Function} [options.failure] The function to be called upon unsuccessful completion of the sync. The
|
|
* failure function is called when one or more operations returns an exception during processing (even if some
|
|
* operations were also successful). In this case you can check the batch's {@link Ext.data.Batch#exceptions
|
|
* exceptions} array to see exactly which operations had exceptions. The failure function is called with the
|
|
* following parameters:
|
|
* @param {Ext.data.Batch} options.failure.batch The {@link Ext.data.Batch} that was processed, containing all
|
|
* operations in their current state after processing
|
|
* @param {Object} options.failure.options The options argument that was originally passed into sync
|
|
*
|
|
* @param {Object} [options.scope] The scope in which to execute any callbacks (i.e. the `this` object inside
|
|
* the callback, success and/or failure functions). Defaults to the store's proxy.
|
|
*
|
|
* @return {Ext.data.Store} this
|
|
*/
|
|
sync: function(options) {
|
|
var me = this,
|
|
operations = {},
|
|
toCreate = me.getNewRecords(),
|
|
toUpdate = me.getUpdatedRecords(),
|
|
toDestroy = me.getRemovedRecords(),
|
|
needsSync = false;
|
|
|
|
if (toCreate.length > 0) {
|
|
operations.create = toCreate;
|
|
needsSync = true;
|
|
}
|
|
|
|
if (toUpdate.length > 0) {
|
|
operations.update = toUpdate;
|
|
needsSync = true;
|
|
}
|
|
|
|
if (toDestroy.length > 0) {
|
|
operations.destroy = toDestroy;
|
|
needsSync = true;
|
|
}
|
|
|
|
if (needsSync && me.fireEvent('beforesync', operations) !== false) {
|
|
options = options || {};
|
|
|
|
me.proxy.batch(Ext.apply(options, {
|
|
operations: operations,
|
|
listeners: me.getBatchListeners()
|
|
}));
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns an object which is passed in as the listeners argument to proxy.batch inside this.sync.
|
|
* This is broken out into a separate function to allow for customisation of the listeners
|
|
* @return {Object} The listeners object
|
|
*/
|
|
getBatchListeners: function() {
|
|
var me = this,
|
|
listeners = {
|
|
scope: me,
|
|
exception: me.onBatchException
|
|
};
|
|
|
|
if (me.batchUpdateMode == 'operation') {
|
|
listeners.operationcomplete = me.onBatchOperationComplete;
|
|
} else {
|
|
listeners.complete = me.onBatchComplete;
|
|
}
|
|
|
|
return listeners;
|
|
},
|
|
|
|
/**
|
|
* Saves all pending changes via the configured {@link #proxy}. Use {@link #sync} instead.
|
|
* @deprecated 4.0.0 Will be removed in the next major version
|
|
*/
|
|
save: function() {
|
|
return this.sync.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Loads the Store using its configured {@link #proxy}.
|
|
* @param {Object} options (optional) config object. This is passed into the {@link Ext.data.Operation Operation}
|
|
* object that is created and then sent to the proxy's {@link Ext.data.proxy.Proxy#read} function
|
|
*
|
|
* @return {Ext.data.Store} this
|
|
* @since 1.1.0
|
|
*/
|
|
load: function(options) {
|
|
var me = this,
|
|
operation;
|
|
|
|
options = Ext.apply({
|
|
action: 'read',
|
|
filters: me.filters.items,
|
|
sorters: me.getSorters()
|
|
}, options);
|
|
me.lastOptions = options;
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
if (me.fireEvent('beforeload', me, operation) !== false) {
|
|
me.loading = true;
|
|
me.proxy.read(operation, me.onProxyLoad, me);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Reloads the store using the last options passed to the {@link #method-load} method.
|
|
* @param {Object} options A config object which contains options which may override the options passed to the previous load call.
|
|
*/
|
|
reload: function(options) {
|
|
return this.load(Ext.apply(this.lastOptions, options));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* A model instance should call this method on the Store it has been {@link Ext.data.Model#join joined} to.
|
|
* @param {Ext.data.Model} record The model instance that was edited
|
|
* @param {String[]} modifiedFieldNames Array of field names changed during edit.
|
|
* @since 3.4.0
|
|
*/
|
|
afterEdit : function(record, modifiedFieldNames) {
|
|
var me = this,
|
|
i, shouldSync;
|
|
|
|
if (me.autoSync && !me.autoSyncSuspended) {
|
|
for (i = modifiedFieldNames.length; i--;) {
|
|
// only sync if persistent fields were modified
|
|
if (record.fields.get(modifiedFieldNames[i]).persist) {
|
|
shouldSync = true;
|
|
break;
|
|
}
|
|
}
|
|
if (shouldSync) {
|
|
me.sync();
|
|
}
|
|
}
|
|
me.onUpdate(record, Ext.data.Model.EDIT, modifiedFieldNames);
|
|
me.fireEvent('update', me, record, Ext.data.Model.EDIT, modifiedFieldNames);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* A model instance should call this method on the Store it has been {@link Ext.data.Model#join joined} to..
|
|
* @param {Ext.data.Model} record The model instance that was edited
|
|
* @since 3.4.0
|
|
*/
|
|
afterReject : function(record) {
|
|
// Must pass the 5th param (modifiedFieldNames) as null, otherwise the
|
|
// event firing machinery appends the listeners "options" object to the arg list
|
|
// which may get used as the modified fields array by a handler.
|
|
// This array is used for selective grid cell updating by Grid View.
|
|
// Null will be treated as though all cells need updating.
|
|
this.onUpdate(record, Ext.data.Model.REJECT, null);
|
|
this.fireEvent('update', this, record, Ext.data.Model.REJECT, null);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* A model instance should call this method on the Store it has been {@link Ext.data.Model#join joined} to.
|
|
* @param {Ext.data.Model} record The model instance that was edited
|
|
* @since 3.4.0
|
|
*/
|
|
afterCommit : function(record, modifiedFieldNames) {
|
|
if (!modifiedFieldNames) {
|
|
modifiedFieldNames = null;
|
|
}
|
|
this.onUpdate(record, Ext.data.Model.COMMIT, modifiedFieldNames);
|
|
this.fireEvent('update', this, record, Ext.data.Model.COMMIT, modifiedFieldNames);
|
|
},
|
|
|
|
onUpdate: Ext.emptyFn,
|
|
|
|
onIdChanged: function(model, oldId, newId, oldInternalId){
|
|
this.fireEvent('idchanged', this, model, oldId, newId, oldInternalId);
|
|
},
|
|
|
|
// private
|
|
destroyStore: function() {
|
|
var implicitModelName,
|
|
me = this;
|
|
|
|
if (!me.isDestroyed) {
|
|
me.clearListeners();
|
|
if (me.storeId) {
|
|
Ext.data.StoreManager.unregister(me);
|
|
}
|
|
me.clearData();
|
|
me.data = me.tree = me.sorters = me.filters = me.groupers = null;
|
|
if (me.reader) {
|
|
me.reader.destroyReader();
|
|
}
|
|
me.proxy = me.reader = me.writer = null;
|
|
me.isDestroyed = true;
|
|
|
|
if (me.implicitModel) {
|
|
implicitModelName = Ext.getClassName(me.model);
|
|
Ext.undefine(implicitModelName);
|
|
Ext.ModelManager.unregisterType(implicitModelName);
|
|
} else {
|
|
me.model = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the grouping, sorting and filtered state of this Store.
|
|
*/
|
|
getState: function() {
|
|
var me = this,
|
|
hasState,
|
|
result,
|
|
hasGroupers = !!me.groupers,
|
|
groupers = [],
|
|
sorters = [],
|
|
filters = [];
|
|
|
|
if (hasGroupers) {
|
|
me.groupers.each(function(g) {
|
|
groupers[groupers.length] = g.serialize();
|
|
hasState = true;
|
|
});
|
|
}
|
|
|
|
if (me.sorters) {
|
|
// Create sorters config array.
|
|
me.sorters.each(function(s) {
|
|
// Sorters collection gets groupers prepended to it, so do not duplicate
|
|
if (hasGroupers && !me.groupers.contains(s)) {
|
|
sorters[sorters.length] = s.serialize();
|
|
hasState = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Because we do not provide a filter changing mechanism, only statify the filters if they opt in.
|
|
// Otherwise filters would get "stuck".
|
|
if (me.filters && me.statefulFilters) {
|
|
me.filters.each(function(f) {
|
|
filters[filters.length] = f.serialize();
|
|
hasState = true;
|
|
});
|
|
}
|
|
|
|
// If there is any state to save, return it as an object
|
|
if (hasState) {
|
|
result = {};
|
|
if (groupers.length) {
|
|
result.groupers = groupers;
|
|
}
|
|
if (sorters.length) {
|
|
result.sorters = sorters;
|
|
}
|
|
if (filters.length) {
|
|
result.filters = filters;
|
|
}
|
|
return result;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Restores state to the passed state
|
|
*/
|
|
applyState: function(state) {
|
|
var me = this,
|
|
hasSorters = !!me.sorters,
|
|
hasGroupers = !!me.groupers,
|
|
hasFilters = !!me.filters,
|
|
locallySorted;
|
|
|
|
if (hasGroupers && state.groupers) {
|
|
me.groupers.clear();
|
|
me.groupers.addAll(me.decodeGroupers(state.groupers));
|
|
}
|
|
|
|
if (hasSorters && state.sorters) {
|
|
me.sorters.clear();
|
|
me.sorters.addAll(me.decodeSorters(state.sorters));
|
|
}
|
|
|
|
if (hasFilters && state.filters) {
|
|
me.filters.clear();
|
|
me.filters.addAll(me.decodeFilters(state.filters));
|
|
}
|
|
|
|
if (hasSorters && hasGroupers) {
|
|
// Sorters collection gets groupers prepended to it
|
|
me.sorters.insert(0, me.groupers.getRange());
|
|
}
|
|
|
|
// Data manipulated by the server - reload
|
|
if (me.autoLoad && (me.remoteSort || me.remoteGroup || me.remoteFilter)) {
|
|
if (me.autoLoad === true) {
|
|
me.reload();
|
|
} else {
|
|
me.reload(me.autoLoad);
|
|
}
|
|
}
|
|
|
|
// If we have local filters, filter the data
|
|
if (hasFilters && me.filters.length && !me.remoteFilter) {
|
|
me.filter();
|
|
locallySorted = me.sortOnFilter;
|
|
}
|
|
|
|
// If we have local sorters, and the data is not already sorted by a sortOnFilter operation, then sort.
|
|
if (hasSorters && me.sorters.length && !me.remoteSort && !locallySorted) {
|
|
me.sort();
|
|
}
|
|
},
|
|
|
|
// private
|
|
doSort: function(sorterFn) {
|
|
var me = this;
|
|
if (me.remoteSort) {
|
|
//the load function will pick up the new sorters and request the sorted data from the proxy
|
|
me.load();
|
|
} else {
|
|
me.data.sortBy(sorterFn);
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
me.fireEvent('sort', me, me.sorters.getRange());
|
|
},
|
|
|
|
// to be implemented by subclasses
|
|
clearData: Ext.emptyFn,
|
|
|
|
// to be implemented by subclasses
|
|
getCount: Ext.emptyFn,
|
|
|
|
// to be implemented by subclasses
|
|
getById: Ext.emptyFn,
|
|
|
|
/**
|
|
* Removes all records from the store. This method does a "fast remove",
|
|
* individual remove events are not called. The {@link #clear} event is
|
|
* fired upon completion.
|
|
* @method
|
|
* @since 1.1.0
|
|
*/
|
|
removeAll: Ext.emptyFn,
|
|
// individual store subclasses should implement a "fast" remove
|
|
// and fire a clear event afterwards
|
|
|
|
/**
|
|
* Returns true if the Store is currently performing a load operation
|
|
* @return {Boolean} True if the Store is currently loading
|
|
*/
|
|
isLoading: function() {
|
|
return !!this.loading;
|
|
},
|
|
|
|
/**
|
|
* Suspends automatically syncing the Store with its Proxy. Only applicable if {@link #autoSync} is `true`
|
|
*/
|
|
suspendAutoSync: function() {
|
|
this.autoSyncSuspended = true;
|
|
},
|
|
|
|
/**
|
|
* Resumes automatically syncing the Store with its Proxy. Only applicable if {@link #autoSync} is `true`
|
|
*/
|
|
resumeAutoSync: function() {
|
|
this.autoSyncSuspended = false;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* This class implements the data store event domain. All classes extending from
|
|
* {@link Ext.data.AbstractStore} are included in this domain. The selectors are simply
|
|
* store id's or the wildcard "*" to match any store.
|
|
*
|
|
* @protected
|
|
*/
|
|
|
|
Ext.define('Ext.app.domain.Store', {
|
|
extend: Ext.app.EventDomain ,
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
type: 'store',
|
|
idProperty: 'storeId',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
me.monitor(Ext.data.AbstractStore);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Controllers are the glue that binds an application together. All they really do is listen for events (usually from
|
|
* views) and take some action. Here's how we might create a Controller to manage Users:
|
|
*
|
|
* Ext.define('MyApp.controller.Users', {
|
|
* extend: 'Ext.app.Controller',
|
|
*
|
|
* init: function() {
|
|
* console.log('Initialized Users! This happens before ' +
|
|
* 'the Application launch() function is called');
|
|
* }
|
|
* });
|
|
*
|
|
* The init function is a special method that is called when your application boots. It is called before the
|
|
* {@link Ext.app.Application Application}'s launch function is executed so gives a hook point to run any code before
|
|
* your Viewport is created.
|
|
*
|
|
* The init function is a great place to set up how your controller interacts with the view, and is usually used in
|
|
* conjunction with another Controller function - {@link Ext.app.Controller#control control}. The control function
|
|
* makes it easy to listen to events on your view classes and take some action with a handler function. Let's update
|
|
* our Users controller to tell us when the panel is rendered:
|
|
*
|
|
* Ext.define('MyApp.controller.Users', {
|
|
* extend: 'Ext.app.Controller',
|
|
*
|
|
* init: function() {
|
|
* this.control({
|
|
* 'viewport > panel': {
|
|
* render: this.onPanelRendered
|
|
* }
|
|
* });
|
|
* },
|
|
*
|
|
* onPanelRendered: function() {
|
|
* console.log('The panel was rendered');
|
|
* }
|
|
* });
|
|
*
|
|
* We've updated the init function to use {@link Ext.app.Controller#control control method} to set up listeners on views
|
|
* in our application. The control method uses the ComponentQuery engine to quickly and easily get references to components
|
|
* on the page. If you are not familiar with ComponentQuery yet, be sure to check out the
|
|
* {@link Ext.ComponentQuery documentation}. In brief though, it allows us to pass a CSS-like selector that will find
|
|
* every matching component on the page.
|
|
*
|
|
* In our init function above we supplied 'viewport > panel', which translates to "find me every Panel that is a direct
|
|
* child of a Viewport". We then supplied an object that maps event names (just 'render' in this case) to handler
|
|
* functions. The overall effect is that whenever any component that matches our selector fires a 'render' event, our
|
|
* onPanelRendered function is called.
|
|
*
|
|
* ## Event domains
|
|
*
|
|
* In Ext JS 4.2, we introduced the concept of event domains. In terms of MVC, an event domain
|
|
* is one or more base classes that fire events to which a Controller wants to listen. Besides
|
|
* Component event domain that encompass {@link Ext.Component}-descended Views, Controllers now
|
|
* can listen to events from data Stores, Ext.Direct Providers, other Controllers, and Ext.globalEvents.
|
|
* This feature provides a way to communicate between parts of the whole application without the need
|
|
* to bind controllers together tightly, and allows to develop and test application parts in isolation.
|
|
*
|
|
* See usage examples in {@link #listen} method documentation.
|
|
*
|
|
* ## Using refs
|
|
*
|
|
* One of the most useful parts of Controllers is the ref system. These use the {@link Ext.ComponentQuery} to
|
|
* make it really easy to get references to Views on your page. Let's look at an example of this now:
|
|
*
|
|
* Ext.define('MyApp.controller.Users', {
|
|
* extend: 'Ext.app.Controller',
|
|
*
|
|
* refs: [{
|
|
* ref: 'list',
|
|
* selector: 'grid'
|
|
* }],
|
|
*
|
|
* init: function() {
|
|
* this.control({
|
|
* 'button': {
|
|
* click: this.refreshGrid
|
|
* }
|
|
* });
|
|
* },
|
|
*
|
|
* refreshGrid: function() {
|
|
* this.getList().store.load();
|
|
* }
|
|
* });
|
|
*
|
|
* This example assumes the existence of a {@link Ext.grid.Panel Grid} on the page, which contains a single button to
|
|
* refresh the Grid when clicked. In our refs array, we set up a reference to the grid. There are two parts to this -
|
|
* the 'selector', which is a {@link Ext.ComponentQuery ComponentQuery} selector which finds any grid on the page and
|
|
* assigns it to the reference 'list'.
|
|
*
|
|
* By giving the reference a name, we get a number of things for free. The first is the getList function that we use in
|
|
* the refreshGrid method above. This is generated automatically by the Controller based on the name of our ref, which
|
|
* was capitalized and prepended with get to go from 'list' to 'getList'.
|
|
*
|
|
* The way this works is that the first time getList is called by your code, the ComponentQuery selector is run and the
|
|
* first component that matches the selector ('grid' in this case) will be returned. All future calls to getList will
|
|
* use a cached reference to that grid. Usually it is advised to use a specific ComponentQuery selector that will only
|
|
* match a single View in your application (in the case above our selector will match any grid on the page).
|
|
*
|
|
* Bringing it all together, our init function is called when the application boots, at which time we call this.control
|
|
* to listen to any click on a {@link Ext.button.Button button} and call our refreshGrid function (again, this will
|
|
* match any button on the page so we advise a more specific selector than just 'button', but have left it this way for
|
|
* simplicity). When the button is clicked we use out getList function to refresh the grid.
|
|
*
|
|
* You can create any number of refs and control any number of components this way, simply adding more functions to
|
|
* your Controller as you go. For an example of real-world usage of Controllers see the Feed Viewer example in the
|
|
* examples/app/feed-viewer folder in the SDK download.
|
|
*
|
|
* ## Generated getter methods
|
|
*
|
|
* Refs aren't the only thing that generate convenient getter methods. Controllers often have to deal with Models and
|
|
* Stores so the framework offers a couple of easy ways to get access to those too. Let's look at another example:
|
|
*
|
|
* Ext.define('MyApp.controller.Users', {
|
|
* extend: 'Ext.app.Controller',
|
|
*
|
|
* models: ['User'],
|
|
* stores: ['AllUsers', 'AdminUsers'],
|
|
*
|
|
* init: function() {
|
|
* var User, allUsers, ed;
|
|
*
|
|
* User = this.getUserModel();
|
|
* allUsers = this.getAllUsersStore();
|
|
*
|
|
* ed = new User({ name: 'Ed' });
|
|
* allUsers.add(ed);
|
|
* }
|
|
* });
|
|
*
|
|
* By specifying Models and Stores that the Controller cares about, it again dynamically loads them from the appropriate
|
|
* locations (app/model/User.js, app/store/AllUsers.js and app/store/AdminUsers.js in this case) and creates getter
|
|
* functions for them all. The example above will create a new User model instance and add it to the AllUsers Store.
|
|
* Of course, you could do anything in this function but in this case we just did something simple to demonstrate the
|
|
* functionality.
|
|
*
|
|
* ## Further Reading
|
|
*
|
|
* 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
|
|
*/
|
|
Ext.define('Ext.app.Controller', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} id The id of this controller. You can use this id when dispatching.
|
|
*/
|
|
|
|
statics: {
|
|
strings: {
|
|
model: {
|
|
getter: 'getModel',
|
|
upper: 'Model'
|
|
},
|
|
|
|
view: {
|
|
getter: 'getView',
|
|
upper: 'View'
|
|
},
|
|
|
|
controller: {
|
|
getter: 'getController',
|
|
upper: 'Controller'
|
|
},
|
|
|
|
store: {
|
|
getter: 'getStore',
|
|
upper: 'Store'
|
|
}
|
|
},
|
|
|
|
controllerRegex: /^(.*)\.controller\./,
|
|
|
|
createGetter: function(baseGetter, name) {
|
|
return function () {
|
|
return this[baseGetter](name);
|
|
};
|
|
},
|
|
|
|
getGetterName: function(name, kindUpper) {
|
|
var fn = 'get',
|
|
parts = name.split('.'),
|
|
numParts = parts.length,
|
|
index;
|
|
|
|
// Handle namespaced class names. E.g. feed.Add becomes getFeedAddView etc.
|
|
for (index = 0; index < numParts; index++) {
|
|
fn += Ext.String.capitalize(parts[index]);
|
|
}
|
|
|
|
fn += kindUpper;
|
|
|
|
return fn;
|
|
},
|
|
|
|
/**
|
|
* This method is called like so:
|
|
*
|
|
* Ext.app.Controller.processDependencies(proto, requiresArray, 'MyApp', 'model', [
|
|
* 'User',
|
|
* 'Item',
|
|
* 'Foo@Common.model',
|
|
* 'Bar.Baz@Common.model'
|
|
* ]);
|
|
*
|
|
* Required dependencies are added to requiresArray.
|
|
*
|
|
* @private
|
|
*/
|
|
processDependencies: function(cls, requires, namespace, kind, names) {
|
|
if (!names || !names.length) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
strings = me.strings[kind],
|
|
o, absoluteName, shortName, name, j, subLn, getterName, getter;
|
|
|
|
if (!Ext.isArray(names)) {
|
|
names = [names];
|
|
}
|
|
|
|
for (j = 0, subLn = names.length; j < subLn; j++) {
|
|
name = names[j];
|
|
o = me.getFullName(name, kind, namespace);
|
|
absoluteName = o.absoluteName;
|
|
shortName = o.shortName;
|
|
|
|
requires.push(absoluteName);
|
|
getterName = me.getGetterName(shortName, strings.upper);
|
|
cls[getterName] = getter = me.createGetter(strings.getter, name);
|
|
|
|
// Application class will init the controller getters
|
|
if (kind !== 'controller') {
|
|
// This marker allows the constructor to easily/cheaply identify the
|
|
// generated getter methods since they all need to be called to get
|
|
// things initialized. We use a property name that deliberately does
|
|
// not work with dot-access to reduce any chance of collision.
|
|
getter['Ext.app.getter'] = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
getFullName: function(name, kind, namespace) {
|
|
var shortName = name,
|
|
sep, absoluteName;
|
|
|
|
if ((sep = name.indexOf('@')) > 0) {
|
|
// The unambiguous syntax is Model@Name.space (or "space.Model@Name")
|
|
// which contains both the short name ("Model" or "space.Model") and
|
|
// the full name (Name.space.Model).
|
|
//
|
|
shortName = name.substring(0, sep); // "Model"
|
|
absoluteName = name.substring(sep + 1) + '.' + shortName; // ex: "Name.space.Model"
|
|
}
|
|
// Deciding if a class name must be qualified:
|
|
//
|
|
// 1 - if the name doesn't contain a dot, we must qualify it
|
|
//
|
|
// 2 - the name may be a qualified name of a known class, but:
|
|
//
|
|
// 2.1 - in runtime, the loader may not know the class - specially in
|
|
// production - so we must check the class manager
|
|
//
|
|
// 2.2 - in build time, the class manager may not know the class, but
|
|
// the loader does, so we check the second one (the loader check
|
|
// assures it's really a class, and not a namespace, so we can
|
|
// have 'Books.controller.Books', and requesting a controller
|
|
// called Books will not be underqualified)
|
|
//
|
|
else if (name.indexOf('.') > 0 && (Ext.ClassManager.isCreated(name) ||
|
|
Ext.Loader.isAClassNameWithAKnownPrefix(name))) {
|
|
absoluteName = name;
|
|
}
|
|
else {
|
|
|
|
if (namespace) {
|
|
absoluteName = namespace + '.' + kind + '.' + name;
|
|
shortName = name;
|
|
}
|
|
else {
|
|
absoluteName = name;
|
|
}
|
|
}
|
|
|
|
return {
|
|
absoluteName: absoluteName,
|
|
shortName: shortName
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The {@link Ext.app.Application} for this controller.
|
|
*
|
|
* @property {Ext.app.Application}
|
|
* @readonly
|
|
*/
|
|
application: null,
|
|
|
|
/**
|
|
* @cfg {String/String[]} models
|
|
* Array of models to require from AppName.model namespace. For example:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
* models: ['User', 'Vehicle']
|
|
* });
|
|
*
|
|
* This is equivalent of:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
* requires: ['MyApp.model.User', 'MyApp.model.Vehicle'],
|
|
*
|
|
* getUserModel: function() {
|
|
* return this.getModel("User");
|
|
* },
|
|
*
|
|
* getVehicleModel: function() {
|
|
* return this.getModel("Vehicle");
|
|
* }
|
|
* });
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/String[]} views
|
|
* Array of views to require from AppName.view namespace and to generate getter methods for.
|
|
* For example:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
* views: ['List', 'Detail']
|
|
* });
|
|
*
|
|
* This is equivalent of:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
* requires: ['MyApp.view.List', 'MyApp.view.Detail'],
|
|
*
|
|
* getListView: function() {
|
|
* return this.getView("List");
|
|
* },
|
|
*
|
|
* getDetailView: function() {
|
|
* return this.getView("Detail");
|
|
* }
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/String[]} stores
|
|
* Array of stores to require from AppName.store namespace and to generate getter methods for.
|
|
* For example:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
* stores: ['Users', 'Vehicles']
|
|
* });
|
|
*
|
|
* This is equivalent to:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
*
|
|
* requires: [
|
|
* 'MyApp.store.Users',
|
|
* 'MyApp.store.Vehicles'
|
|
* ]
|
|
*
|
|
* getUsersStore: function() {
|
|
* return this.getStore("Users");
|
|
* },
|
|
*
|
|
* getVehiclesStore: function() {
|
|
* return this.getStore("Vehicles");
|
|
* }
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object[]} refs
|
|
* Array of configs to build up references to views on page. For example:
|
|
*
|
|
* Ext.define("MyApp.controller.Foo", {
|
|
* extend: "Ext.app.Controller",
|
|
*
|
|
* refs: [{
|
|
* ref: 'list',
|
|
* selector: 'grid'
|
|
* }],
|
|
* });
|
|
*
|
|
* This will add method `getList` to the controller which will internally use
|
|
* Ext.ComponentQuery to reference the grid component on page.
|
|
*
|
|
* The following fields can be used in ref definition:
|
|
*
|
|
* - `ref` - name of the reference.
|
|
* - `selector` - Ext.ComponentQuery selector to access the component.
|
|
* - `autoCreate` - True to create the component automatically if not found on page.
|
|
* - `forceCreate` - Forces the creation of the component every time reference is accessed
|
|
* (when `get<REFNAME>` is called).
|
|
* - `xtype` - Used to create component by its xtype with autoCreate or forceCreate. If
|
|
* you don't provide xtype, an Ext.Component instance will be created.
|
|
*/
|
|
|
|
onClassExtended: function(cls, data, hooks) {
|
|
var onBeforeClassCreated = hooks.onBeforeCreated;
|
|
|
|
hooks.onBeforeCreated = function(cls, data) {
|
|
var Controller = Ext.app.Controller,
|
|
ctrlRegex = Controller.controllerRegex,
|
|
requires = [],
|
|
className, namespace, requires, proto, match;
|
|
|
|
proto = cls.prototype;
|
|
|
|
/*
|
|
* Namespace resolution is tricky business: we should know what namespace
|
|
* this Controller descendant belongs to, or model/store/view dependency
|
|
* resolution will be either ambiguous or plainly not possible. To avoid
|
|
* guessing games we try to look for a forward hint ($namespace) that
|
|
* Application class sets when its onClassExtended gets processed; if that
|
|
* fails we try to deduce namespace from class name.
|
|
*
|
|
* Note that for Ext.app.Application, Controller.onClassExtended gets executed
|
|
* *before* Application.onClassExtended so we have to delay namespace handling
|
|
* until after Application.onClassExtended kicks in, hence it is done in this hook.
|
|
*/
|
|
className = Ext.getClassName(cls);
|
|
namespace = data.$namespace ||
|
|
Ext.app.getNamespace(className) ||
|
|
((match = ctrlRegex.exec(className)) && match[1]);
|
|
|
|
if (namespace) {
|
|
proto.$namespace = namespace;
|
|
}
|
|
|
|
Controller.processDependencies(proto, requires, namespace, 'model', data.models);
|
|
Controller.processDependencies(proto, requires, namespace, 'view', data.views);
|
|
Controller.processDependencies(proto, requires, namespace, 'store', data.stores);
|
|
Controller.processDependencies(proto, requires, namespace, 'controller', data.controllers);
|
|
|
|
Ext.require(requires, Ext.Function.pass(onBeforeClassCreated, arguments, this));
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Creates new Controller.
|
|
*
|
|
* @param {Object} [config] Configuration object.
|
|
*/
|
|
constructor: function (config) {
|
|
var me = this;
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
if (me.refs) {
|
|
me.ref(me.refs);
|
|
}
|
|
|
|
me.eventbus = Ext.app.EventBus;
|
|
|
|
me.initAutoGetters();
|
|
},
|
|
|
|
initAutoGetters: function() {
|
|
var proto = this.self.prototype,
|
|
prop, fn;
|
|
|
|
for (prop in proto) {
|
|
fn = proto[prop];
|
|
|
|
// Look for the marker placed on the getters by processDependencies so that
|
|
// we can know what to call cheaply:
|
|
if (fn && fn['Ext.app.getter']) {
|
|
fn.call(this);
|
|
}
|
|
}
|
|
},
|
|
|
|
doInit: function(app) {
|
|
var me = this;
|
|
|
|
if (!me._initialized) {
|
|
me.init(app);
|
|
me._initialized = true;
|
|
}
|
|
},
|
|
|
|
finishInit: function(app) {
|
|
var me = this,
|
|
controllers = me.controllers,
|
|
controller, i, l;
|
|
|
|
if (me._initialized && controllers && controllers.length) {
|
|
for (i = 0, l = controllers.length; i < l; i++) {
|
|
controller = me.getController(controllers[i]);
|
|
controller.finishInit(app);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* A template method that is called when your application boots. It is called before the
|
|
* {@link Ext.app.Application Application}'s launch function is executed so gives a hook point
|
|
* to run any code before your Viewport is created.
|
|
*
|
|
* @param {Ext.app.Application} application
|
|
*
|
|
* @template
|
|
*/
|
|
init: Ext.emptyFn,
|
|
|
|
/**
|
|
* A template method like {@link #init}, but called after the viewport is created.
|
|
* This is called after the {@link Ext.app.Application#launch launch} method of Application
|
|
* is executed.
|
|
*
|
|
* @param {Ext.app.Application} application
|
|
*
|
|
* @template
|
|
*/
|
|
onLaunch: Ext.emptyFn,
|
|
|
|
ref: function(refs) {
|
|
var me = this,
|
|
i = 0,
|
|
length = refs.length,
|
|
info, ref, fn;
|
|
|
|
refs = Ext.Array.from(refs);
|
|
|
|
me.references = me.references || [];
|
|
|
|
for (; i < length; i++) {
|
|
info = refs[i];
|
|
ref = info.ref;
|
|
fn = 'get' + Ext.String.capitalize(ref);
|
|
|
|
if (!me[fn]) {
|
|
me[fn] = Ext.Function.pass(me.getRef, [ref, info], me);
|
|
}
|
|
me.references.push(ref.toLowerCase());
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Registers one or more {@link #refs references}.
|
|
*
|
|
* @param {Object/Object[]} refs
|
|
*/
|
|
addRef: function(refs) {
|
|
this.ref(refs);
|
|
},
|
|
|
|
getRef: function(ref, info, config) {
|
|
var me = this,
|
|
refCache = me.refCache || (me.refCache = {}),
|
|
cached = refCache[ref];
|
|
|
|
info = info || {};
|
|
config = config || {};
|
|
|
|
Ext.apply(info, config);
|
|
|
|
if (info.forceCreate) {
|
|
return Ext.ComponentManager.create(info, 'component');
|
|
}
|
|
|
|
if (!cached) {
|
|
if (info.selector) {
|
|
refCache[ref] = cached = Ext.ComponentQuery.query(info.selector)[0];
|
|
}
|
|
|
|
if (!cached && info.autoCreate) {
|
|
refCache[ref] = cached = Ext.ComponentManager.create(info, 'component');
|
|
}
|
|
|
|
if (cached) {
|
|
cached.on('beforedestroy', function() {
|
|
refCache[ref] = null;
|
|
});
|
|
}
|
|
}
|
|
|
|
return cached;
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if a {@link #refs reference} is registered.
|
|
*
|
|
* @return {Boolean}
|
|
*/
|
|
hasRef: function(ref) {
|
|
var references = this.references;
|
|
return references && Ext.Array.indexOf(references, ref.toLowerCase()) !== -1;
|
|
},
|
|
|
|
/**
|
|
* 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');
|
|
* }
|
|
* });
|
|
*
|
|
* Or alternatively one call `control` with two arguments:
|
|
*
|
|
* this.control('useredit button[action=save]', {
|
|
* click: this.updateUser
|
|
* });
|
|
*
|
|
* 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] Config for listeners.
|
|
*/
|
|
control: function(selectors, listeners, controller) {
|
|
var me = this,
|
|
ctrl = controller,
|
|
obj;
|
|
|
|
if (Ext.isString(selectors)) {
|
|
obj = {};
|
|
obj[selectors] = listeners;
|
|
}
|
|
else {
|
|
obj = selectors;
|
|
ctrl = listeners;
|
|
}
|
|
|
|
me.eventbus.control(obj, ctrl || me);
|
|
},
|
|
|
|
/**
|
|
* Adds listeners to different event sources (also called "event domains"). The
|
|
* primary event domain is that of components, but there are also other event domains:
|
|
* {@link Ext.app.domain.Global Global} domain that intercepts events fired from
|
|
* {@link Ext#globalEvents} Observable instance, {@link Ext.app.domain.Controller Controller}
|
|
* domain can be used to listen to events fired by other Controllers,
|
|
* {@link Ext.app.domain.Store Store} domain gives access to Store events, and
|
|
* {@link Ext.app.domain.Direct Direct} domain can be used with Ext.Direct Providers
|
|
* to listen to their events.
|
|
*
|
|
* To listen to "bar" events fired by a controller with id="foo":
|
|
*
|
|
* Ext.define('AM.controller.Users', {
|
|
* init: function() {
|
|
* this.listen({
|
|
* controller: {
|
|
* '#foo': {
|
|
* bar: this.onFooBar
|
|
* }
|
|
* }
|
|
* });
|
|
* },
|
|
* ...
|
|
* });
|
|
*
|
|
* To listen to "bar" events fired by any controller, and "baz" events
|
|
* fired by Store with storeId="baz":
|
|
*
|
|
* Ext.define('AM.controller.Users', {
|
|
* init: function() {
|
|
* this.listen({
|
|
* controller: {
|
|
* '*': {
|
|
* bar: this.onAnyControllerBar
|
|
* }
|
|
* },
|
|
* store: {
|
|
* '#baz': {
|
|
* baz: this.onStoreBaz
|
|
* }
|
|
* }
|
|
* });
|
|
* },
|
|
* ...
|
|
* });
|
|
*
|
|
* To listen to "idle" events fired by {@link Ext#globalEvents} when other event
|
|
* processing is complete and Ext JS is about to return control to the browser:
|
|
*
|
|
* Ext.define('AM.controller.Users', {
|
|
* init: function() {
|
|
* this.listen({
|
|
* global: { // Global events are always fired
|
|
* idle: this.onIdle // from the same object, so there
|
|
* } // are no selectors
|
|
* });
|
|
* }
|
|
* });
|
|
*
|
|
* As this relates to components, the following example:
|
|
*
|
|
* Ext.define('AM.controller.Users', {
|
|
* init: function() {
|
|
* this.listen({
|
|
* component: {
|
|
* 'useredit button[action=save]': {
|
|
* click: this.updateUser
|
|
* }
|
|
* }
|
|
* });
|
|
* },
|
|
* ...
|
|
* });
|
|
*
|
|
* Is equivalent to:
|
|
*
|
|
* Ext.define('AM.controller.Users', {
|
|
* init: function() {
|
|
* this.control({
|
|
* 'useredit button[action=save]': {
|
|
* click: this.updateUser
|
|
* }
|
|
* });
|
|
* },
|
|
* ...
|
|
* });
|
|
*
|
|
* Of course, these can all be combined in a single call and used instead of
|
|
* `control`, like so:
|
|
*
|
|
* Ext.define('AM.controller.Users', {
|
|
* init: function() {
|
|
* this.listen({
|
|
* global: {
|
|
* idle: this.onIdle
|
|
* },
|
|
* controller: {
|
|
* '*': {
|
|
* foobar: this.onAnyFooBar
|
|
* },
|
|
* '#foo': {
|
|
* bar: this.onFooBar
|
|
* }
|
|
* },
|
|
* component: {
|
|
* 'useredit button[action=save]': {
|
|
* click: this.updateUser
|
|
* }
|
|
* },
|
|
* store: {
|
|
* '#qux': {
|
|
* load: this.onQuxLoad
|
|
* }
|
|
* }
|
|
* });
|
|
* },
|
|
* ...
|
|
* });
|
|
*
|
|
* @param {Object} to Config object containing domains, selectors and listeners.
|
|
*/
|
|
listen: function (to, controller) {
|
|
this.eventbus.listen(to, controller || this);
|
|
},
|
|
|
|
/**
|
|
* Returns instance of a {@link Ext.app.Controller Controller} with the given id.
|
|
* When controller doesn't exist yet, it's created. Note that this method depends
|
|
* on Application instance and will return undefined when Application is not
|
|
* accessible. The only exception is when this Controller instance's id is requested;
|
|
* in that case we always return the instance even if Application is no available.
|
|
*
|
|
* @param {String} id
|
|
*
|
|
* @return {Ext.app.Controller} controller instance or undefined.
|
|
*/
|
|
getController: function(id) {
|
|
var me = this,
|
|
app = me.application;
|
|
|
|
if (id === me.id) {
|
|
return me;
|
|
}
|
|
|
|
return app && app.getController(id);
|
|
},
|
|
|
|
/**
|
|
* Returns instance of a {@link Ext.data.Store Store} with the given name.
|
|
* When store doesn't exist yet, it's created.
|
|
*
|
|
* @param {String} name
|
|
*
|
|
* @return {Ext.data.Store} a store instance.
|
|
*/
|
|
getStore: function(name) {
|
|
var storeId, store;
|
|
|
|
storeId = (name.indexOf('@') == -1) ? name : name.split('@')[0];
|
|
store = Ext.StoreManager.get(storeId);
|
|
|
|
if (!store) {
|
|
name = Ext.app.Controller.getFullName(name, 'store', this.$namespace);
|
|
|
|
if (name) {
|
|
store = Ext.create(name.absoluteName, {
|
|
storeId: storeId
|
|
});
|
|
}
|
|
}
|
|
|
|
return store;
|
|
},
|
|
|
|
/**
|
|
* Returns a {@link Ext.data.Model Model} class with the given name.
|
|
* A shorthand for using {@link Ext.ModelManager#getModel}.
|
|
*
|
|
* @param {String} name
|
|
*
|
|
* @return {Ext.data.Model} a model class.
|
|
*/
|
|
getModel: function(model) {
|
|
var name = Ext.app.Controller.getFullName(model, 'model', this.$namespace);
|
|
|
|
return name && Ext.ModelManager.getModel(name.absoluteName);
|
|
},
|
|
|
|
/**
|
|
* Returns a View class with the given name. To create an instance of the view,
|
|
* you can use it like it's used by Application to create the Viewport:
|
|
*
|
|
* this.getView('Viewport').create();
|
|
*
|
|
* @param {String} name
|
|
*
|
|
* @return {Ext.Base} a view class.
|
|
*/
|
|
getView: function(view) {
|
|
var name = Ext.app.Controller.getFullName(view, 'view', this.$namespace);
|
|
|
|
return name && Ext.ClassManager.get(name.absoluteName);
|
|
},
|
|
|
|
/**
|
|
* Returns the base {@link Ext.app.Application} for this controller.
|
|
*
|
|
* @return {Ext.app.Application} the application
|
|
*/
|
|
getApplication: function() {
|
|
return this.application;
|
|
}
|
|
});
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Ext.define('Ext.container.DockingContainer', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
isDockingContainer: true,
|
|
|
|
/**
|
|
* @event dockedadd
|
|
* Fires when any {@link Ext.Component} is added or inserted as a docked item.
|
|
* @param {Ext.panel.Panel} this
|
|
* @param {Ext.Component} component The component being added
|
|
* @param {Number} index The index at which the component will be added docked items collection
|
|
*/
|
|
|
|
/**
|
|
* @event dockedremove
|
|
* Fires when any {@link Ext.Component} is removed from the docked items.
|
|
* @param {Ext.panel.Panel} this
|
|
* @param {Ext.Component} component The component being removed
|
|
*/
|
|
|
|
/**
|
|
* @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:
|
|
*
|
|
* Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
|
|
*
|
|
* 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:
|
|
*
|
|
* 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();
|
|
* }
|
|
*
|
|
* 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 = Ext.applyIf({ top: 10 }, this.defaultDockWeights);
|
|
*
|
|
* this.callParent();
|
|
* }
|
|
*/
|
|
defaultDockWeights: {
|
|
top: { render: 1, visual: 1 },
|
|
left: { render: 3, visual: 5 },
|
|
right: { render: 5, visual: 7 },
|
|
bottom: { render: 7, visual: 3 }
|
|
},
|
|
|
|
// @private
|
|
// Values to decide which side of the body element docked items must go
|
|
// This overides any weight. A left/top will *always* sort before a right/bottom
|
|
// regardless of any weight value. Weights sort at either side of the "body" dividing point.
|
|
dockOrder: {
|
|
top: -1,
|
|
left: -1,
|
|
right: 1,
|
|
bottom: 1
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Number of dock 'left' and 'right' items.
|
|
*/
|
|
horizontalDocks: 0,
|
|
|
|
/**
|
|
* Adds docked item(s) to the container.
|
|
*
|
|
* @param {Object/Object[]} component The Component or array of components to add. The components
|
|
* must include a 'dock' parameter on each component to indicate where it should be docked
|
|
* ('top', 'right', 'bottom', 'left').
|
|
* @param {Number} [pos] The index at which the Component will be added
|
|
* @return {Ext.Component[]} The added components.
|
|
*/
|
|
addDocked : function(items, pos) {
|
|
var me = this,
|
|
i = 0,
|
|
item, length;
|
|
|
|
items = me.prepareItems(items);
|
|
length = items.length;
|
|
|
|
for (; i < length; i++) {
|
|
item = items[i];
|
|
item.dock = item.dock || 'top';
|
|
if (item.dock === 'left' || item.dock === 'right') {
|
|
me.horizontalDocks++;
|
|
}
|
|
|
|
if (pos !== undefined) {
|
|
i += pos;
|
|
me.dockedItems.insert(i, item);
|
|
} else {
|
|
me.dockedItems.add(item);
|
|
}
|
|
|
|
item.onAdded(me, i);
|
|
if (me.hasListeners.dockedadd) {
|
|
me.fireEvent('dockedadd', me, item, i);
|
|
}
|
|
if (me.onDockedAdd !== Ext.emptyFn) {
|
|
me.onDockedAdd(item);
|
|
}
|
|
}
|
|
|
|
if (me.rendered && !me.suspendLayout) {
|
|
me.updateLayout();
|
|
}
|
|
return items;
|
|
},
|
|
|
|
destroyDockedItems: function(){
|
|
var dockedItems = this.dockedItems,
|
|
c;
|
|
|
|
if (dockedItems) {
|
|
while ((c = dockedItems.first())) {
|
|
this.removeDocked(c, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
doRenderDockedItems: function (out, renderData, after) {
|
|
// Careful! This method is bolted on to the frameTpl and renderTpl so all we get for
|
|
// context is the renderData! The "this" pointer is either the frameTpl or the
|
|
// renderTpl instance!
|
|
|
|
// Due to framing, we will be called in two different ways: in the frameTpl or in
|
|
// the renderTpl. The frameTpl version enters via doRenderFramingDockedItems which
|
|
// sets "$skipDockedItems" on the renderTpl's renderData.
|
|
//
|
|
var me = renderData.$comp,
|
|
layout = me.componentLayout,
|
|
items,
|
|
tree;
|
|
|
|
if (layout.getDockedItems && !renderData.$skipDockedItems) {
|
|
items = layout.getDockedItems('render', !after);
|
|
tree = items && layout.getItemsRenderTree(items);
|
|
|
|
if (tree) {
|
|
Ext.DomHelper.generateMarkup(tree, out);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finds a docked component by id, itemId or position. Also see {@link #getDockedItems}
|
|
* @param {String/Number} comp The id, itemId or position of the docked component (see {@link Ext.panel.AbstractPanel#getComponent getComponent} for details)
|
|
* @return {Ext.Component} The docked component (if found)
|
|
*/
|
|
getDockedComponent: function(comp) {
|
|
if (Ext.isObject(comp)) {
|
|
comp = comp.getItemId();
|
|
}
|
|
return this.dockedItems.get(comp);
|
|
},
|
|
|
|
/**
|
|
* Retrieves an array of all currently docked Components.
|
|
*
|
|
* For example to find a toolbar that has been docked at top:
|
|
*
|
|
* panel.getDockedItems('toolbar[dock="top"]');
|
|
*
|
|
* @param {String} selector A {@link Ext.ComponentQuery ComponentQuery} selector string to filter the returned items.
|
|
* @param {Boolean} beforeBody An optional flag to limit the set of items to only those
|
|
* before the body (true) or after the body (false). All components are returned by
|
|
* default.
|
|
* @return {Ext.Component[]} The array of docked components meeting the specified criteria.
|
|
*/
|
|
getDockedItems : function(selector, beforeBody) {
|
|
var dockedItems = this.getComponentLayout().getDockedItems('render', beforeBody);
|
|
|
|
if (selector && dockedItems.length) {
|
|
dockedItems = Ext.ComponentQuery.query(selector, dockedItems);
|
|
}
|
|
|
|
return dockedItems;
|
|
},
|
|
|
|
getDockingRefItems: function(deep, containerItems) {
|
|
// deep fetches the docked items and their descendants using '*' and then '* *'
|
|
var selector = deep && '*,* *',
|
|
// start with only the top/left docked items (and maybe their children)
|
|
dockedItems = this.getDockedItems(selector, true),
|
|
items;
|
|
|
|
// push container items (and maybe their children) after top/left docked items:
|
|
dockedItems.push.apply(dockedItems, containerItems);
|
|
|
|
// push right/bottom docked items (and maybe their children) after container items:
|
|
items = this.getDockedItems(selector, false);
|
|
dockedItems.push.apply(dockedItems, items);
|
|
|
|
return dockedItems;
|
|
},
|
|
|
|
initDockingItems: function() {
|
|
var me = this,
|
|
items = me.dockedItems;
|
|
|
|
me.dockedItems = new Ext.util.AbstractMixedCollection(false, me.getComponentId);
|
|
if (items) {
|
|
me.addDocked(items);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts docked item(s) to the panel at the indicated position.
|
|
* @param {Number} pos The index at which the Component will be inserted
|
|
* @param {Object/Object[]} component The Component or array of components to add. The components
|
|
* must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right',
|
|
* 'bottom', 'left').
|
|
*/
|
|
insertDocked : function(pos, items) {
|
|
this.addDocked(items, pos);
|
|
},
|
|
|
|
// Placeholder empty functions
|
|
/**
|
|
* Invoked after a docked item is added to the Panel.
|
|
* @param {Ext.Component} component
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onDockedAdd : Ext.emptyFn,
|
|
/**
|
|
* Invoked after a docked item is removed from the Panel.
|
|
* @param {Ext.Component} component
|
|
* @template
|
|
* @protected
|
|
*/
|
|
onDockedRemove : Ext.emptyFn,
|
|
|
|
/**
|
|
* Removes the docked item from the panel.
|
|
* @param {Ext.Component} item The Component to remove.
|
|
* @param {Boolean} autoDestroy (optional) Destroy the component after removal.
|
|
*/
|
|
removeDocked : function(item, autoDestroy) {
|
|
var me = this,
|
|
layout,
|
|
hasLayout;
|
|
|
|
autoDestroy = autoDestroy === true || (autoDestroy !== false && me.autoDestroy);
|
|
if (!me.dockedItems.contains(item)) {
|
|
return item;
|
|
}
|
|
if (item.dock === 'left' || item.dock === 'right') {
|
|
me.horizontalDocks--;
|
|
}
|
|
|
|
layout = me.componentLayout;
|
|
hasLayout = layout && me.rendered;
|
|
|
|
if (hasLayout) {
|
|
layout.onRemove(item);
|
|
}
|
|
|
|
me.dockedItems.remove(item);
|
|
// destroying flag is true if the removal is taking place as part of destruction, OR if removal is intended to *cause* destruction
|
|
item.onRemoved(item.destroying || autoDestroy);
|
|
me.onDockedRemove(item);
|
|
|
|
if (autoDestroy) {
|
|
item.destroy();
|
|
} else if (hasLayout) {
|
|
// not destroying, make any layout related removals
|
|
layout.afterRemove(item);
|
|
}
|
|
|
|
if (me.hasListeners.dockedremove) {
|
|
me.fireEvent('dockedremove', me, item);
|
|
}
|
|
|
|
if (!me.destroying && !me.suspendLayout) {
|
|
me.updateLayout();
|
|
}
|
|
|
|
return item;
|
|
},
|
|
|
|
setupDockingRenderTpl: function (renderTpl) {
|
|
renderTpl.renderDockedItems = this.doRenderDockedItems;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
|
|
* the right-justified button container.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Toolbar Fill Example',
|
|
* width: 300,
|
|
* height: 200,
|
|
* tbar : [
|
|
* 'Item 1',
|
|
* { xtype: 'tbfill' },
|
|
* 'Item 2'
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.toolbar.Fill', {
|
|
extend: Ext.Component ,
|
|
alias: 'widget.tbfill',
|
|
alternateClassName: 'Ext.Toolbar.Fill',
|
|
/**
|
|
* @property {Boolean} isFill
|
|
* `true` in this class to identify an object as an instantiated Fill, or subclass thereof.
|
|
*/
|
|
isFill : true,
|
|
flex: 1
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* Base class for Box Layout overflow handlers. These specialized classes are invoked when a Box Layout
|
|
* (either an HBox or a VBox) has child items that are either too wide (for HBox) or too tall (for VBox)
|
|
* for its container.
|
|
*/
|
|
Ext.define('Ext.layout.container.boxOverflow.None', {
|
|
alternateClassName: 'Ext.layout.boxOverflow.None',
|
|
|
|
constructor: function(layout, config) {
|
|
this.layout = layout;
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
handleOverflow: Ext.emptyFn,
|
|
|
|
clearOverflow: Ext.emptyFn,
|
|
|
|
beginLayout: Ext.emptyFn,
|
|
beginLayoutCycle: Ext.emptyFn,
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
plan = ownerContext.state.boxPlan,
|
|
overflow;
|
|
|
|
if (plan && plan.tooNarrow) {
|
|
overflow = me.handleOverflow(ownerContext);
|
|
|
|
if (overflow) {
|
|
if (overflow.reservedSpace) {
|
|
me.layout.publishInnerCtSize(ownerContext, overflow.reservedSpace);
|
|
}
|
|
|
|
// TODO: If we need to use the code below then we will need to pass along
|
|
// the new targetSize as state and use it calculate somehow...
|
|
//
|
|
//if (overflow.recalculate) {
|
|
// ownerContext.invalidate({
|
|
// state: {
|
|
// overflow: overflow
|
|
// }
|
|
// });
|
|
//}
|
|
}
|
|
} else {
|
|
me.clearOverflow();
|
|
}
|
|
},
|
|
|
|
completeLayout: Ext.emptyFn,
|
|
|
|
finishedLayout: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.layout.owner,
|
|
hiddens,
|
|
hiddenCount;
|
|
|
|
// Only count hidden children if someone is interested when the overflow state changes
|
|
if (owner.hasListeners.overflowchange) {
|
|
hiddens = owner.query('>[hidden]');
|
|
hiddenCount = hiddens.length;
|
|
if (hiddenCount !== me.lastHiddenCount) {
|
|
owner.fireEvent('overflowchange', me.lastHiddenCount, hiddenCount, hiddens);
|
|
me.lastHiddenCount = hiddenCount;
|
|
}
|
|
}
|
|
},
|
|
|
|
onRemove: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* Normalizes an item reference, string id or numerical index into a reference to the item
|
|
* @param {Ext.Component/String/Number} item The item reference, id or index
|
|
* @return {Ext.Component} The item
|
|
*/
|
|
getItem: function(item) {
|
|
return this.layout.owner.getComponent(item);
|
|
},
|
|
|
|
getOwnerType: function(owner){
|
|
var type;
|
|
if (owner.isToolbar) {
|
|
type = 'toolbar';
|
|
} else if (owner.isTabBar) {
|
|
type = 'tabbar';
|
|
} else if (owner.isMenu) {
|
|
type = 'menu';
|
|
} else {
|
|
type = owner.getXType();
|
|
}
|
|
|
|
return type;
|
|
},
|
|
|
|
getPrefixConfig: Ext.emptyFn,
|
|
getSuffixConfig: Ext.emptyFn,
|
|
getOverflowCls: function() {
|
|
return '';
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The base class that other non-interacting Toolbar Item classes should extend in order to
|
|
* get some basic common toolbar item functionality.
|
|
*/
|
|
Ext.define('Ext.toolbar.Item', {
|
|
extend: Ext.Component ,
|
|
alias: 'widget.tbitem',
|
|
alternateClassName: 'Ext.Toolbar.Item',
|
|
enable:Ext.emptyFn,
|
|
disable:Ext.emptyFn,
|
|
focus:Ext.emptyFn
|
|
/**
|
|
* @cfg {String} overflowText
|
|
* Text to be used for the menu if the item is overflowed.
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* A simple class that adds a vertical separator bar between toolbar items (css class: 'x-toolbar-separator').
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Toolbar Separator Example',
|
|
* width: 300,
|
|
* height: 200,
|
|
* tbar : [
|
|
* 'Item 1',
|
|
* { xtype: 'tbseparator' },
|
|
* 'Item 2'
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.toolbar.Separator', {
|
|
extend: Ext.toolbar.Item ,
|
|
alias: 'widget.tbseparator',
|
|
alternateClassName: 'Ext.Toolbar.Separator',
|
|
baseCls: Ext.baseCSSPrefix + 'toolbar-separator',
|
|
focusable: false
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.button.Manager', {
|
|
singleton: true,
|
|
|
|
alternateClassName: 'Ext.ButtonToggleManager',
|
|
|
|
groups: {},
|
|
|
|
pressedButton: null,
|
|
|
|
buttonSelector: '.' + Ext.baseCSSPrefix + 'btn',
|
|
|
|
init: function() {
|
|
var me = this;
|
|
if (!me.initialized) {
|
|
Ext.getDoc().on({
|
|
keydown: me.onDocumentKeyDown,
|
|
mouseup: me.onDocumentMouseUp,
|
|
scope: me
|
|
});
|
|
me.initialized = true;
|
|
}
|
|
},
|
|
|
|
// Buttons must react to SPACE and ENTER to trigger the click handler.
|
|
// Now that they are `<a>` elements, we use a keydown listener.
|
|
onDocumentKeyDown: function(e) {
|
|
var k = e.getKey(),
|
|
btn;
|
|
|
|
// SPACE and ENTER trigger a click
|
|
if (k === e.SPACE || k === e.ENTER) {
|
|
|
|
// Look for a Button's encapsulating element
|
|
btn = e.getTarget(this.buttonSelector);
|
|
|
|
// If found, fire the Button's onClick
|
|
if (btn) {
|
|
Ext.getCmp(btn.id).onClick(e);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Called by buton instances.
|
|
// Track the button which was mousedowned upon so that the next *document* mouseup can be delivered to it
|
|
// in case mouse is moved outside of button element.
|
|
onButtonMousedown: function(button, e) {
|
|
var pressed = this.pressedButton;
|
|
if (pressed) {
|
|
pressed.onMouseUp(e);
|
|
}
|
|
this.pressedButton = button;
|
|
},
|
|
|
|
onDocumentMouseUp: function(e) {
|
|
var pressed = this.pressedButton;
|
|
|
|
if (pressed) {
|
|
pressed.onMouseUp(e);
|
|
this.pressedButton = null;
|
|
}
|
|
},
|
|
|
|
toggleGroup: function(btn, state) {
|
|
if (state) {
|
|
var g = this.groups[btn.toggleGroup],
|
|
length = g.length,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
if (g[i] !== btn) {
|
|
g[i].toggle(false);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
register: function(btn) {
|
|
var me = this,
|
|
groups = this.groups,
|
|
group = groups[btn.toggleGroup];
|
|
|
|
me.init();
|
|
if (!btn.toggleGroup) {
|
|
return;
|
|
}
|
|
|
|
if (!group) {
|
|
group = groups[btn.toggleGroup] = [];
|
|
}
|
|
group.push(btn);
|
|
btn.on('toggle', me.toggleGroup, me);
|
|
},
|
|
|
|
unregister: function(btn) {
|
|
if (!btn.toggleGroup) {
|
|
return;
|
|
}
|
|
var me = this,
|
|
group = me.groups[btn.toggleGroup];
|
|
|
|
if (group) {
|
|
Ext.Array.remove(group, btn);
|
|
btn.un('toggle', me.toggleGroup, me);
|
|
}
|
|
},
|
|
|
|
// Gets the pressed button in the passed group or null
|
|
// @param {String} group
|
|
// @return {Ext.button.Button}
|
|
getPressed: function(group) {
|
|
var g = this.groups[group],
|
|
i = 0,
|
|
len;
|
|
|
|
if (g) {
|
|
for (len = g.length; i < len; i++) {
|
|
if (g[i].pressed === true) {
|
|
return g[i];
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides a common registry of all menus on a page.
|
|
* @singleton
|
|
*/
|
|
Ext.define('Ext.menu.Manager', {
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
alternateClassName: 'Ext.menu.MenuMgr',
|
|
|
|
|
|
|
|
menuSelector: '.' + Ext.baseCSSPrefix + 'menu',
|
|
|
|
menus: {},
|
|
groups: {},
|
|
attached: false,
|
|
lastShow: new Date(),
|
|
|
|
init: function() {
|
|
var me = this;
|
|
|
|
me.active = new Ext.util.MixedCollection();
|
|
Ext.getDoc().addKeyListener(27, function() {
|
|
if (me.active.length > 0) {
|
|
me.hideAll();
|
|
}
|
|
}, me);
|
|
},
|
|
|
|
/**
|
|
* Hides all menus that are currently visible
|
|
* @return {Boolean} success True if any active menus were hidden.
|
|
*/
|
|
hideAll: function() {
|
|
var active = this.active,
|
|
menus, m, mLen;
|
|
|
|
if (active && active.length > 0) {
|
|
menus = Ext.Array.slice(active.items);
|
|
mLen = menus.length;
|
|
|
|
for (m = 0; m < mLen; m++) {
|
|
menus[m].hide();
|
|
}
|
|
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
onHide: function(m) {
|
|
var me = this,
|
|
active = me.active;
|
|
active.remove(m);
|
|
if (active.length < 1) {
|
|
Ext.getDoc().un('mousedown', me.onMouseDown, me);
|
|
me.attached = false;
|
|
}
|
|
},
|
|
|
|
onShow: function(m) {
|
|
var me = this,
|
|
active = me.active,
|
|
attached = me.attached;
|
|
|
|
me.lastShow = new Date();
|
|
active.add(m);
|
|
if (!attached) {
|
|
Ext.getDoc().on('mousedown', me.onMouseDown, me, {
|
|
// On IE we have issues with the menu stealing focus at certain points
|
|
// during the head, so give it a short buffer
|
|
buffer: Ext.isIE9m ? 10 : undefined
|
|
});
|
|
me.attached = true;
|
|
}
|
|
m.toFront();
|
|
},
|
|
|
|
onBeforeHide: function(m) {
|
|
if (m.activeChild) {
|
|
m.activeChild.hide();
|
|
}
|
|
if (m.autoHideTimer) {
|
|
clearTimeout(m.autoHideTimer);
|
|
delete m.autoHideTimer;
|
|
}
|
|
},
|
|
|
|
onBeforeShow: function(m) {
|
|
var active = this.active,
|
|
parentMenu = m.parentMenu;
|
|
|
|
active.remove(m);
|
|
if (!parentMenu && !m.allowOtherMenus) {
|
|
this.hideAll();
|
|
}
|
|
else if (parentMenu && parentMenu.activeChild && m != parentMenu.activeChild) {
|
|
parentMenu.activeChild.hide();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onMouseDown: function(e) {
|
|
var me = this,
|
|
active = me.active,
|
|
lastShow = me.lastShow,
|
|
doHide = true;
|
|
|
|
if (Ext.Date.getElapsed(lastShow) > 50 && active.length > 0 && !e.getTarget(me.menuSelector)) {
|
|
// Because we use a buffer in IE, the target may have been removed from the
|
|
// DOM by the time we get here, so the selector will never find the menu. In this
|
|
// case, it's safer to not hide than menus than to do so
|
|
if (Ext.isIE9m && !Ext.getDoc().contains(e.target)) {
|
|
doHide = false;
|
|
}
|
|
if (doHide) {
|
|
me.hideAll();
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
register: function(menu) {
|
|
var me = this;
|
|
|
|
if (!me.active) {
|
|
me.init();
|
|
}
|
|
|
|
if (menu.floating) {
|
|
me.menus[menu.id] = menu;
|
|
menu.on({
|
|
beforehide: me.onBeforeHide,
|
|
hide: me.onHide,
|
|
beforeshow: me.onBeforeShow,
|
|
show: me.onShow,
|
|
scope: me
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns a {@link Ext.menu.Menu} object
|
|
* @param {String/Object} menu The string menu id, an existing menu object reference, or a Menu config that will
|
|
* be used to generate and return a new Menu this.
|
|
* @return {Ext.menu.Menu} The specified menu, or null if none are found
|
|
*/
|
|
get: function(menu) {
|
|
var menus = this.menus;
|
|
|
|
if (typeof menu == 'string') { // menu id
|
|
if (!menus) { // not initialized, no menus to return
|
|
return null;
|
|
}
|
|
return menus[menu];
|
|
} else if (menu.isMenu) { // menu instance
|
|
return menu;
|
|
} else if (Ext.isArray(menu)) { // array of menu items
|
|
return new Ext.menu.Menu({items:menu});
|
|
} else { // otherwise, must be a config
|
|
return Ext.ComponentManager.create(menu, 'menu');
|
|
}
|
|
},
|
|
|
|
// @private
|
|
unregister: function(menu) {
|
|
var me = this,
|
|
menus = me.menus,
|
|
active = me.active;
|
|
|
|
delete menus[menu.id];
|
|
active.remove(menu);
|
|
menu.un({
|
|
beforehide: me.onBeforeHide,
|
|
hide: me.onHide,
|
|
beforeshow: me.onBeforeShow,
|
|
show: me.onShow,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
// @private
|
|
registerCheckable: function(menuItem) {
|
|
var groups = this.groups,
|
|
groupId = menuItem.group;
|
|
|
|
if (groupId) {
|
|
if (!groups[groupId]) {
|
|
groups[groupId] = [];
|
|
}
|
|
|
|
groups[groupId].push(menuItem);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
unregisterCheckable: function(menuItem) {
|
|
var groups = this.groups,
|
|
groupId = menuItem.group;
|
|
|
|
if (groupId) {
|
|
Ext.Array.remove(groups[groupId], menuItem);
|
|
}
|
|
},
|
|
|
|
onCheckChange: function(menuItem, state) {
|
|
var groups = this.groups,
|
|
groupId = menuItem.group,
|
|
i = 0,
|
|
group, ln, curr;
|
|
|
|
if (groupId && state) {
|
|
group = groups[groupId];
|
|
ln = group.length;
|
|
for (; i < ln; i++) {
|
|
curr = group[i];
|
|
if (curr != menuItem) {
|
|
curr.setChecked(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A wrapper class which can be applied to any element. Fires a "click" event while the
|
|
* mouse is pressed. The interval between firings may be specified in the config but
|
|
* defaults to 20 milliseconds.
|
|
*
|
|
* Optionally, a CSS class may be applied to the element during the time it is pressed.
|
|
*/
|
|
Ext.define('Ext.util.ClickRepeater', {
|
|
extend: Ext.util.Observable ,
|
|
|
|
/**
|
|
* Creates new ClickRepeater.
|
|
* @param {String/HTMLElement/Ext.Element} el The element or its ID to listen on
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor : function(el, config){
|
|
var me = this;
|
|
|
|
me.el = Ext.get(el);
|
|
me.el.unselectable();
|
|
|
|
Ext.apply(me, config);
|
|
|
|
me.callParent();
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event mousedown
|
|
* Fires when the mouse button is depressed.
|
|
* @param {Ext.util.ClickRepeater} this
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
"mousedown",
|
|
/**
|
|
* @event click
|
|
* Fires on a specified interval during the time the element is pressed.
|
|
* @param {Ext.util.ClickRepeater} this
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
"click",
|
|
/**
|
|
* @event mouseup
|
|
* Fires when the mouse key is released.
|
|
* @param {Ext.util.ClickRepeater} this
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
"mouseup"
|
|
);
|
|
|
|
if(!me.disabled){
|
|
me.disabled = true;
|
|
me.enable();
|
|
}
|
|
|
|
// allow inline handler
|
|
if(me.handler){
|
|
me.on("click", me.handler, me.scope || me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} el
|
|
* The element to act as a button.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} pressedCls
|
|
* A CSS class name to be applied to the element while pressed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} accelerate
|
|
* True if autorepeating should start slowly and accelerate.
|
|
* "interval" and "delay" are ignored.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} interval
|
|
* The interval between firings of the "click" event (in milliseconds).
|
|
*/
|
|
interval : 20,
|
|
|
|
/**
|
|
* @cfg {Number} delay
|
|
* The initial delay before the repeating event begins firing.
|
|
* Similar to an autorepeat key delay.
|
|
*/
|
|
delay: 250,
|
|
|
|
/**
|
|
* @cfg {Boolean} preventDefault
|
|
* True to prevent the default click event
|
|
*/
|
|
preventDefault : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} stopDefault
|
|
* True to stop the default click event
|
|
*/
|
|
stopDefault : false,
|
|
|
|
timer : 0,
|
|
|
|
/**
|
|
* Enables the repeater and allows events to fire.
|
|
*/
|
|
enable: function(){
|
|
if(this.disabled){
|
|
this.el.on('mousedown', this.handleMouseDown, this);
|
|
// IE versions will detect clicks as in sequence as dblclicks
|
|
// if they happen in quick succession
|
|
if (Ext.isIE && !(Ext.isIE10p || (Ext.isStrict && Ext.isIE9))){
|
|
this.el.on('dblclick', this.handleDblClick, this);
|
|
}
|
|
if(this.preventDefault || this.stopDefault){
|
|
this.el.on('click', this.eventOptions, this);
|
|
}
|
|
}
|
|
this.disabled = false;
|
|
},
|
|
|
|
/**
|
|
* Disables the repeater and stops events from firing.
|
|
*/
|
|
disable: function(/* private */ force){
|
|
if(force || !this.disabled){
|
|
clearTimeout(this.timer);
|
|
if(this.pressedCls){
|
|
this.el.removeCls(this.pressedCls);
|
|
}
|
|
Ext.getDoc().un('mouseup', this.handleMouseUp, this);
|
|
this.el.removeAllListeners();
|
|
}
|
|
this.disabled = true;
|
|
},
|
|
|
|
/**
|
|
* Convenience function for setting disabled/enabled by boolean.
|
|
* @param {Boolean} disabled
|
|
*/
|
|
setDisabled: function(disabled){
|
|
this[disabled ? 'disable' : 'enable']();
|
|
},
|
|
|
|
eventOptions: function(e){
|
|
if(this.preventDefault){
|
|
e.preventDefault();
|
|
}
|
|
if(this.stopDefault){
|
|
e.stopEvent();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
destroy : function() {
|
|
this.disable(true);
|
|
Ext.destroy(this.el);
|
|
this.clearListeners();
|
|
},
|
|
|
|
handleDblClick : function(e){
|
|
clearTimeout(this.timer);
|
|
this.el.blur();
|
|
|
|
this.fireEvent("mousedown", this, e);
|
|
this.fireEvent("click", this, e);
|
|
},
|
|
|
|
// @private
|
|
handleMouseDown : function(e){
|
|
clearTimeout(this.timer);
|
|
this.el.blur();
|
|
if(this.pressedCls){
|
|
this.el.addCls(this.pressedCls);
|
|
}
|
|
this.mousedownTime = new Date();
|
|
|
|
Ext.getDoc().on("mouseup", this.handleMouseUp, this);
|
|
this.el.on("mouseout", this.handleMouseOut, this);
|
|
|
|
this.fireEvent("mousedown", this, e);
|
|
this.fireEvent("click", this, e);
|
|
|
|
// Do not honor delay or interval if acceleration wanted.
|
|
if (this.accelerate) {
|
|
this.delay = 400;
|
|
}
|
|
|
|
// Re-wrap the event object in a non-shared object, so it doesn't lose its context if
|
|
// the global shared EventObject gets a new Event put into it before the timer fires.
|
|
e = new Ext.EventObjectImpl(e);
|
|
|
|
this.timer = Ext.defer(this.click, this.delay || this.interval, this, [e]);
|
|
},
|
|
|
|
// @private
|
|
click : function(e){
|
|
this.fireEvent("click", this, e);
|
|
this.timer = Ext.defer(this.click, this.accelerate ?
|
|
this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
|
|
400,
|
|
-390,
|
|
12000) :
|
|
this.interval, this, [e]);
|
|
},
|
|
|
|
easeOutExpo : function (t, b, c, d) {
|
|
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
|
},
|
|
|
|
// @private
|
|
handleMouseOut : function(){
|
|
clearTimeout(this.timer);
|
|
if(this.pressedCls){
|
|
this.el.removeCls(this.pressedCls);
|
|
}
|
|
this.el.on("mouseover", this.handleMouseReturn, this);
|
|
},
|
|
|
|
// @private
|
|
handleMouseReturn : function(){
|
|
this.el.un("mouseover", this.handleMouseReturn, this);
|
|
if(this.pressedCls){
|
|
this.el.addCls(this.pressedCls);
|
|
}
|
|
this.click();
|
|
},
|
|
|
|
// @private
|
|
handleMouseUp : function(e){
|
|
clearTimeout(this.timer);
|
|
this.el.un("mouseover", this.handleMouseReturn, this);
|
|
this.el.un("mouseout", this.handleMouseOut, this);
|
|
Ext.getDoc().un("mouseup", this.handleMouseUp, this);
|
|
if(this.pressedCls){
|
|
this.el.removeCls(this.pressedCls);
|
|
}
|
|
this.fireEvent("mouseup", this, e);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Component layout for buttons
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.Button', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.button'],
|
|
|
|
extend: Ext.layout.component.Auto ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'button',
|
|
|
|
htmlRE: /<.*>/,
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
text = owner.text;
|
|
|
|
me.callParent(arguments);
|
|
ownerContext.btnWrapContext = ownerContext.getEl('btnWrap');
|
|
ownerContext.btnElContext = ownerContext.getEl('btnEl');
|
|
ownerContext.btnInnerElContext = ownerContext.getEl('btnInnerEl');
|
|
ownerContext.btnIconElContext = ownerContext.getEl('btnIconEl');
|
|
|
|
if (text && me.htmlRE.test(text)) {
|
|
ownerContext.isHtmlText = true;
|
|
// If the text contains HTML tag(s) we need to account for the possibility
|
|
// of multi-line-text. We have to remove the default line-height set by the
|
|
// stylesheet so that we can allow the browser to measure the natural
|
|
// height of the html content.
|
|
owner.btnInnerEl.setStyle('line-height', 'normal');
|
|
owner.btnInnerEl.setStyle('padding-top', '');
|
|
}
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext) {
|
|
var owner = this.owner,
|
|
lastWidthModel = this.lastWidthModel;
|
|
|
|
this.callParent(arguments);
|
|
|
|
if (lastWidthModel && !this.lastWidthModel.shrinkWrap &&
|
|
ownerContext.widthModel.shrinkWrap) {
|
|
// clear any heights we set last time around if needed
|
|
owner.btnWrap.setStyle('height', '');
|
|
owner.btnEl.setStyle('height', '');
|
|
owner.btnInnerEl.setStyle('line-height', '');
|
|
}
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
btnElContext = ownerContext.btnElContext,
|
|
btnInnerElContext = ownerContext.btnInnerElContext,
|
|
btnWrapContext = ownerContext.btnWrapContext,
|
|
mmax = Math.max,
|
|
ownerHeight, contentHeight, btnElHeight, innerElHeight;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (ownerContext.heightModel.shrinkWrap) {
|
|
// Buttons that have a shrink-wrapped height usually do not need any layout
|
|
// adjustments beause their layout is handled in CSS. An exception is made
|
|
// for buttons that contain html tags in their "text". These buttons need
|
|
// special handling to vertically center the inner element inside the button.
|
|
|
|
// measure the btnEl (the anchor element) to determine the available
|
|
// height for centering the inner element.
|
|
btnElHeight = owner.btnEl.getHeight();
|
|
if (ownerContext.isHtmlText) {
|
|
me.centerInnerEl(
|
|
ownerContext,
|
|
btnElHeight
|
|
);
|
|
me.ieCenterIcon(ownerContext, btnElHeight);
|
|
}
|
|
} else {
|
|
// Buttons with configured or calculated heights may need to stretch their
|
|
// inner elements to fit.
|
|
ownerHeight = ownerContext.getProp('height');
|
|
|
|
// If height is 0, skip out all this
|
|
if (ownerHeight) {
|
|
// contentHeight is the total available height inside the button's padding
|
|
// and framing
|
|
contentHeight = ownerHeight - ownerContext.getFrameInfo().height - ownerContext.getPaddingInfo().height;
|
|
|
|
// The btnElHeight is the total available height to be shared by the button's
|
|
// icon and text. For standard buttons this is the same as the contentHeight
|
|
// but must be adjusted for arrow height if the button has an arrow.
|
|
btnElHeight = contentHeight;
|
|
if ((owner.menu || owner.split) && owner.arrowAlign === 'bottom') {
|
|
// If the button has an arrow, subtract its size from the btnElHeight
|
|
// padding to account for the possibility of an arrow
|
|
btnElHeight -= btnWrapContext.getPaddingInfo().bottom;
|
|
}
|
|
|
|
// The innerElHeight is the total vertical space available for vertically
|
|
// centering the button text. By default this is the same as btnElHeight
|
|
// but it must be adjusted by the icon size if the button has a top
|
|
// or bottom icon.
|
|
innerElHeight = btnElHeight;
|
|
if ((owner.icon || owner.iconCls || owner.glyph) &&
|
|
(owner.iconAlign === 'top' || owner.iconAlign === 'bottom')) {
|
|
innerElHeight -= btnInnerElContext.getPaddingInfo().height;
|
|
}
|
|
|
|
btnWrapContext.setProp('height', mmax(0, contentHeight));
|
|
btnElContext.setProp('height', mmax(0, btnElHeight));
|
|
// ensure the button's text is vertically centered
|
|
if (ownerContext.isHtmlText) {
|
|
// if the button text contains html it must be vertically centered
|
|
// by measuring it and adding top padding.
|
|
me.centerInnerEl(ownerContext, btnElHeight);
|
|
} else {
|
|
// if the button text does not contain html we can just center it
|
|
// using line-height to avoid the extra measurement that happens
|
|
// inside of centerInnerEl() since multi-line text is not a possiblity
|
|
btnInnerElContext.setProp('line-height', mmax(0, innerElHeight) + 'px');
|
|
}
|
|
me.ieCenterIcon(ownerContext, btnElHeight);
|
|
} else if (ownerHeight !== 0) {
|
|
// Only fail if height was undefined, since it could be 0
|
|
me.done = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
centerInnerEl: function(ownerContext, btnElHeight) {
|
|
var me = this,
|
|
btnInnerElContext = ownerContext.btnInnerElContext,
|
|
innerElHeight = me.owner.btnInnerEl.getHeight();
|
|
|
|
if (ownerContext.heightModel.shrinkWrap && (btnElHeight < innerElHeight)) {
|
|
// if the natural height of the html content is greater than the height
|
|
// of the button element (the anchor el), then expand the button element
|
|
// to fit
|
|
ownerContext.btnElContext.setHeight(innerElHeight);
|
|
} else if (btnElHeight > innerElHeight) {
|
|
// if the natural height of the html content is smaller than the height
|
|
// of the button element then we need to pad the top of the btnInnerEl
|
|
// so that it is vertically centered within the btnEl
|
|
btnInnerElContext.setProp(
|
|
'padding-top',
|
|
Math.round((btnElHeight - innerElHeight) / 2) +
|
|
// if the inner element already has top padding, as is the case
|
|
// when the button has a top-aligned icon, then add the existing
|
|
// padding to the padding adjustment.
|
|
btnInnerElContext.getPaddingInfo().top
|
|
);
|
|
}
|
|
},
|
|
|
|
ieCenterIcon: function(ownerContext, btnElHeight) {
|
|
var iconAlign = this.owner.iconAlign;
|
|
|
|
if ((Ext.isIEQuirks || Ext.isIE6) &&
|
|
(iconAlign === 'left' || iconAlign === 'right')) {
|
|
// Normally right/left aligned icon elements are vertically stretched using
|
|
// top:0, bottom:0, and the icon is vertically centered inside this element
|
|
// using background-position. This technique for vertical centering does not
|
|
// work in IE6 and IE quirks, so the stylesheet sets a fixed height on the
|
|
// icon element in these browsers. If the layout changes the height of the
|
|
// button the height of the icon element must also be modified.
|
|
ownerContext.btnIconElContext.setHeight(btnElHeight);
|
|
}
|
|
},
|
|
|
|
publishInnerWidth: function(ownerContext, width) {
|
|
if (this.owner.getFrameInfo().table) {
|
|
// if the framing template uses a table, we need to set the width of the
|
|
// inner element. Otherwise long text may stretch the element past its
|
|
// allowable width in IE.
|
|
ownerContext.btnInnerElContext.setWidth(
|
|
width -
|
|
// the inner el must be sized inside the owner's framing and padding
|
|
ownerContext.getFrameInfo().width - ownerContext.getPaddingInfo().width -
|
|
// There may also be padding on the btnWrap el, e.g. tab with close icon
|
|
// or button with arrow. This reduces the inner el size even further.
|
|
ownerContext.btnWrapContext.getPaddingInfo().width
|
|
);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* 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,
|
|
* 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.
|
|
*
|
|
* 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: {
|
|
shared: null,
|
|
/**
|
|
* Measures the size of the specified text
|
|
* @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
|
|
* that can affect the size of the rendered text
|
|
* @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)}`
|
|
* @static
|
|
*/
|
|
measure: function(el, text, fixedWidth){
|
|
var me = this,
|
|
shared = me.shared;
|
|
|
|
if(!shared){
|
|
shared = me.shared = new me(el, fixedWidth);
|
|
}
|
|
shared.bind(el);
|
|
shared.setFixedWidth(fixedWidth || 'auto');
|
|
return shared.getSize(text);
|
|
},
|
|
|
|
/**
|
|
* Destroy the TextMetrics instance created by {@link #measure}.
|
|
* @static
|
|
*/
|
|
destroy: function(){
|
|
var me = this;
|
|
Ext.destroy(me.shared);
|
|
me.shared = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates new TextMetrics.
|
|
* @param {String/HTMLElement/Ext.Element} bindTo The element or its ID to bind to.
|
|
* @param {Number} [fixedWidth] A fixed width to apply to the measuring element.
|
|
*/
|
|
constructor: function(bindTo, fixedWidth){
|
|
var me = this,
|
|
measure = Ext.getBody().createChild({
|
|
cls: Ext.baseCSSPrefix + 'textmetrics'
|
|
});
|
|
|
|
me.measure = measure;
|
|
if (bindTo) {
|
|
me.bind(bindTo);
|
|
}
|
|
|
|
measure.position('absolute');
|
|
measure.setLocalXY(-1000, -1000);
|
|
measure.hide();
|
|
|
|
if (fixedWidth) {
|
|
measure.setWidth(fixedWidth);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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)}`
|
|
*/
|
|
getSize: function(text){
|
|
var measure = this.measure,
|
|
size;
|
|
|
|
measure.update(text);
|
|
size = measure.getSize();
|
|
measure.update('');
|
|
return size;
|
|
},
|
|
|
|
/**
|
|
* Binds this TextMetrics instance to a new element
|
|
* @param {String/HTMLElement/Ext.Element} el The element or its ID.
|
|
*/
|
|
bind: function(el){
|
|
var me = this;
|
|
|
|
me.el = Ext.get(el);
|
|
me.measure.setStyle(
|
|
me.el.getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Sets a fixed width on the internal measurement element. If the text will be multiline, you have
|
|
* to set a fixed width in order to accurately measure the text height.
|
|
* @param {Number} width The width to set on the element
|
|
*/
|
|
setFixedWidth : function(width){
|
|
this.measure.setWidth(width);
|
|
},
|
|
|
|
/**
|
|
* Returns the measured width of the specified text
|
|
* @param {String} text The text to measure
|
|
* @return {Number} width The width in pixels
|
|
*/
|
|
getWidth : function(text){
|
|
this.measure.dom.style.width = 'auto';
|
|
return this.getSize(text).width;
|
|
},
|
|
|
|
/**
|
|
* Returns the measured height of the specified text
|
|
* @param {String} text The text to measure
|
|
* @return {Number} height The height in pixels
|
|
*/
|
|
getHeight : function(text){
|
|
return this.getSize(text).height;
|
|
},
|
|
|
|
/**
|
|
* Destroy this instance
|
|
*/
|
|
destroy: function(){
|
|
var me = this;
|
|
me.measure.remove();
|
|
delete me.el;
|
|
delete me.measure;
|
|
}
|
|
}, function(){
|
|
Ext.Element.addMethods({
|
|
/**
|
|
* 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] The minumum value to return.
|
|
* @param {Number} [max] The maximum value to return.
|
|
* @return {Number} The text width in pixels.
|
|
* @member Ext.dom.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);
|
|
}
|
|
});
|
|
});
|
|
|
|
/**
|
|
* @docauthor Robert Dougan <rob@sencha.com>
|
|
*
|
|
* Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
|
|
* {@link #iconCls icons}, {@link #cfg-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}. Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Button', {
|
|
* text: 'Click me',
|
|
* renderTo: Ext.getBody(),
|
|
* handler: function() {
|
|
* alert('You clicked the button!');
|
|
* }
|
|
* });
|
|
*
|
|
* The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler}
|
|
* method. Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Button', {
|
|
* text : 'Dynamic Handler Button',
|
|
* renderTo: Ext.getBody(),
|
|
* handler : function() {
|
|
* // this button will spit out a different number every time you click it.
|
|
* // so firstly we must check if that number is already set:
|
|
* if (this.clickCount) {
|
|
* // looks like the property is already set, so lets just add 1 to that number and alert the user
|
|
* this.clickCount++;
|
|
* alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
|
|
* } else {
|
|
* // if the clickCount property is not set, we will set it and alert the user
|
|
* this.clickCount = 1;
|
|
* alert('You just clicked the button for the first time!\n\nTry pressing it again..');
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* A button within a container:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Container', {
|
|
* renderTo: Ext.getBody(),
|
|
* items : [
|
|
* {
|
|
* xtype: 'button',
|
|
* text : 'My Button'
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* A useful option of Button is the {@link #scale} configuration. This configuration has three different options:
|
|
*
|
|
* - `'small'`
|
|
* - `'medium'`
|
|
* - `'large'`
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Button', {
|
|
* renderTo: document.body,
|
|
* text : 'Click me',
|
|
* scale : 'large'
|
|
* });
|
|
*
|
|
* Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Button', {
|
|
* renderTo: Ext.getBody(),
|
|
* text: 'Click Me',
|
|
* enableToggle: true
|
|
* });
|
|
*
|
|
* You can assign a menu to a button by using the {@link #cfg-menu} configuration. This standard configuration
|
|
* can either be a reference to a {@link Ext.menu.Menu menu} object, a {@link Ext.menu.Menu menu} id or a
|
|
* {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically
|
|
* added to the button. You can change the alignment of the arrow using the {@link #arrowAlign} configuration
|
|
* on button. Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Button', {
|
|
* text : 'Menu button',
|
|
* renderTo : Ext.getBody(),
|
|
* arrowAlign: 'bottom',
|
|
* menu : [
|
|
* {text: 'Item 1'},
|
|
* {text: 'Item 2'},
|
|
* {text: 'Item 3'},
|
|
* {text: 'Item 4'}
|
|
* ]
|
|
* });
|
|
*
|
|
* Using listeners, you can easily listen to events fired by any component, using the {@link #listeners}
|
|
* configuration or using the {@link #addListener} method. Button has a variety of different listeners:
|
|
*
|
|
* - `click`
|
|
* - `toggle`
|
|
* - `mouseover`
|
|
* - `mouseout`
|
|
* - `mouseshow`
|
|
* - `menuhide`
|
|
* - `menutriggerover`
|
|
* - `menutriggerout`
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Button', {
|
|
* text : 'Button',
|
|
* renderTo : Ext.getBody(),
|
|
* listeners: {
|
|
* click: function() {
|
|
* // this == the button, as we are in the local scope
|
|
* this.setText('I was clicked!');
|
|
* },
|
|
* mouseover: function() {
|
|
* // set a new config which says we moused over, if not already set
|
|
* if (!this.mousedOver) {
|
|
* this.mousedOver = true;
|
|
* alert('You moused over a button!\n\nI wont do this again.');
|
|
* }
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.button.Button', {
|
|
|
|
/* Begin Definitions */
|
|
alias: 'widget.button',
|
|
extend: Ext.Component ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
queryable: Ext.Queryable
|
|
},
|
|
|
|
alternateClassName: 'Ext.Button',
|
|
/* End Definitions */
|
|
|
|
/*
|
|
* @property {Boolean} isAction
|
|
* `true` in this class to identify an object as an instantiated Button, or subclass thereof.
|
|
*/
|
|
isButton: true,
|
|
componentLayout: 'button',
|
|
|
|
/**
|
|
* @property {Boolean} hidden
|
|
* True if this button is hidden.
|
|
* @readonly
|
|
*/
|
|
hidden: false,
|
|
|
|
/**
|
|
* @property {Boolean} disabled
|
|
* True if this button is disabled.
|
|
* @readonly
|
|
*/
|
|
disabled: false,
|
|
|
|
/**
|
|
* @property {Boolean} pressed
|
|
* True if this button is pressed (only if enableToggle = true).
|
|
* @readonly
|
|
*/
|
|
pressed: false,
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The button text to be used as innerHTML (html tags are accepted).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* The path to an image to display in the button.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} handler
|
|
* A function called when the button is clicked (can be used instead of click event).
|
|
* @cfg {Ext.button.Button} handler.button This button.
|
|
* @cfg {Ext.EventObject} handler.e The click event.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} minWidth
|
|
* The minimum width for this button (used to give a set of buttons a common width).
|
|
* See also {@link Ext.panel.Panel}.{@link Ext.panel.Panel#minButtonWidth minButtonWidth}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} tooltip
|
|
* The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or
|
|
* QuickTips config object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [hidden=false]
|
|
* True to start hidden.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [disabled=false]
|
|
* True to start disabled.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [pressed=false]
|
|
* True to start pressed (only if enableToggle = true)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} toggleGroup
|
|
* The group this toggle button is a member of (only 1 per group can be pressed). If a toggleGroup
|
|
* is specified, the {@link #enableToggle} configuration will automatically be set to true.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} [repeat=false]
|
|
* True to repeat fire the click event while the mouse is down. This can also be a
|
|
* {@link Ext.util.ClickRepeater ClickRepeater} config object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} tabIndex
|
|
* Set a DOM tabIndex for this button.
|
|
*/
|
|
tabIndex: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowDepress=true]
|
|
* False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableToggle=false]
|
|
* True to enable pressed/not pressed toggling. If a {@link #toggleGroup} is specified, this
|
|
* option will be set to true.
|
|
*/
|
|
enableToggle: false,
|
|
|
|
/**
|
|
* @cfg {Function} toggleHandler
|
|
* Function called when a Button with {@link #enableToggle} set to true is clicked.
|
|
* @cfg {Ext.button.Button} toggleHandler.button This button.
|
|
* @cfg {Boolean} toggleHandler.state The next state of the Button, true means pressed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.menu.Menu/String/Object} menu
|
|
* Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} menuAlign
|
|
* The position to align the menu to (see {@link Ext.util.Positionable#alignTo} for more details).
|
|
*/
|
|
menuAlign: 'tl-bl?',
|
|
|
|
/**
|
|
* @cfg {Boolean} showEmptyMenu
|
|
* True to force an attached {@link #cfg-menu} with no items to be shown when clicking
|
|
* this button. By default, the menu will not show if it is empty.
|
|
*/
|
|
showEmptyMenu: false,
|
|
|
|
/**
|
|
* @cfg {String} textAlign
|
|
* The text alignment for this button (center, left, right).
|
|
*/
|
|
textAlign: 'center',
|
|
|
|
/**
|
|
* @cfg {String} overflowText
|
|
* If used in a {@link Ext.toolbar.Toolbar Toolbar}, the text to be used if this item is shown in the overflow menu.
|
|
* See also {@link Ext.toolbar.Item}.`{@link Ext.toolbar.Item#overflowText overflowText}`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* A css class which sets a background image to be used as the icon for this button.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} glyph
|
|
* A numeric unicode character code to use as the icon for this button. The default
|
|
* font-family for glyphs can be set globally using
|
|
* {@link Ext#setGlyphFontFamily Ext.setGlyphFontFamily()}. Alternatively, this
|
|
* config option accepts a string with the charCode and font-family separated by the
|
|
* `@` symbol. For example '65@My Font Family'.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} clickEvent
|
|
* The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
|
|
*/
|
|
clickEvent: 'click',
|
|
|
|
/**
|
|
* @cfg {Boolean} preventDefault
|
|
* True to prevent the default action when the {@link #clickEvent} is processed.
|
|
*/
|
|
preventDefault: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} handleMouseEvents
|
|
* False to disable visual cues on mouseover, mouseout and mousedown.
|
|
*/
|
|
handleMouseEvents: true,
|
|
|
|
/**
|
|
* @cfg {String} tooltipType
|
|
* The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.
|
|
*/
|
|
tooltipType: 'qtip',
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-btn']
|
|
* The base CSS class to add to all buttons.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'btn',
|
|
|
|
/**
|
|
* @cfg {String} pressedCls
|
|
* The CSS class to add to a button when it is in the pressed state.
|
|
*/
|
|
pressedCls: 'pressed',
|
|
|
|
/**
|
|
* @cfg {String} overCls
|
|
* The CSS class to add to a button when it is in the over (hovered) state.
|
|
*/
|
|
overCls: 'over',
|
|
|
|
/**
|
|
* @cfg {String} focusCls
|
|
* The CSS class to add to a button when it is in the focussed state.
|
|
*/
|
|
focusCls: 'focus',
|
|
|
|
/**
|
|
* @cfg {String} menuActiveCls
|
|
* The CSS class to add to a button when it's menu is active.
|
|
*/
|
|
menuActiveCls: 'menu-active',
|
|
|
|
/**
|
|
* @cfg {String} href
|
|
* The URL to open when the button is clicked. Specifying this config causes the Button to be
|
|
* rendered with the specified URL as the `href` attribute of its `<a>` Element.
|
|
*
|
|
* This is better than specifying a click handler of
|
|
*
|
|
* function() { window.location = "http://www.sencha.com" }
|
|
*
|
|
* because the UI will provide meaningful hints to the user as to what to expect upon clicking
|
|
* the button, and will also allow the user to open in a new tab or window, bookmark or drag the URL, or directly save
|
|
* the URL stream to disk.
|
|
*
|
|
* See also the {@link #hrefTarget} config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [hrefTarget="_blank"]
|
|
* The target attribute to use for the underlying anchor. Only used if the {@link #href}
|
|
* property is specified.
|
|
*/
|
|
hrefTarget: '_blank',
|
|
|
|
/**
|
|
* @cfg {Boolean} destroyMenu
|
|
* Whether or not to destroy any associated menu when this button is destroyed. The menu
|
|
* will be destroyed unless this is explicitly set to false.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} baseParams
|
|
* An object literal of parameters to pass to the url when the {@link #href} property is specified.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} params
|
|
* An object literal of parameters to pass to the url when the {@link #href} property is specified. Any params
|
|
* override {@link #baseParams}. New params can be set using the {@link #setParams} method.
|
|
*/
|
|
|
|
childEls: [
|
|
'btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl'
|
|
],
|
|
|
|
// We have to keep "unselectable" attribute on all elements because it's not inheritable.
|
|
// Without it, clicking anywhere on a button disrupts current selection and cursor position
|
|
// in HtmlEditor.
|
|
renderTpl: [
|
|
'<span id="{id}-btnWrap" class="{baseCls}-wrap',
|
|
'<tpl if="splitCls"> {splitCls}</tpl>',
|
|
'{childElCls}" unselectable="on">',
|
|
'<span id="{id}-btnEl" class="{baseCls}-button">',
|
|
'<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}',
|
|
'{childElCls}" unselectable="on">',
|
|
'{text}',
|
|
'</span>',
|
|
'<span role="img" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}',
|
|
'{childElCls} {glyphCls}" unselectable="on" style="',
|
|
'<tpl if="iconUrl">background-image:url({iconUrl});</tpl>',
|
|
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
|
|
'<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl"> </tpl>',
|
|
'</span>',
|
|
'</span>',
|
|
'</span>',
|
|
// if "closable" (tab) add a close element icon
|
|
'<tpl if="closable">',
|
|
'<span id="{id}-closeEl" class="{baseCls}-close-btn" title="{closeText}" tabIndex="0"></span>',
|
|
'</tpl>'
|
|
],
|
|
|
|
/**
|
|
* @cfg {"small"/"medium"/"large"} scale
|
|
* The size of the Button. Three values are allowed:
|
|
*
|
|
* - 'small' - Results in the button element being 16px high.
|
|
* - 'medium' - Results in the button element being 24px high.
|
|
* - 'large' - Results in the button element being 32px high.
|
|
*/
|
|
scale: 'small',
|
|
|
|
/**
|
|
* @private
|
|
* An array of allowed scales.
|
|
*/
|
|
allowedScales: ['small', 'medium', 'large'],
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope (**this** reference) in which the `{@link #handler}` and `{@link #toggleHandler}` is executed.
|
|
* Defaults to this Button.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} iconAlign
|
|
* The side of the Button box to render the icon. Four values are allowed:
|
|
*
|
|
* - 'top'
|
|
* - 'right'
|
|
* - 'bottom'
|
|
* - 'left'
|
|
*/
|
|
iconAlign: 'left',
|
|
|
|
/**
|
|
* @cfg {String} arrowAlign
|
|
* The side of the Button box to render the arrow if the button has an associated {@link #cfg-menu}. Two
|
|
* values are allowed:
|
|
*
|
|
* - 'right'
|
|
* - 'bottom'
|
|
*/
|
|
arrowAlign: 'right',
|
|
|
|
/**
|
|
* @cfg {String} arrowCls
|
|
* The className used for the inner arrow element if the button has a menu.
|
|
*/
|
|
arrowCls: 'arrow',
|
|
|
|
/**
|
|
* @property {Ext.Template} template
|
|
* A {@link Ext.Template Template} used to create the Button's DOM structure.
|
|
*
|
|
* Instances, or subclasses which need a different DOM structure may provide a different template layout in
|
|
* conjunction with an implementation of {@link #getTemplateArgs}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* A CSS class string to apply to the button's main element.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.menu.Menu} menu
|
|
* The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #cfg-menu} config
|
|
* option.
|
|
*/
|
|
|
|
maskOnDisable: false,
|
|
|
|
shrinkWrap: 3,
|
|
|
|
frame: true,
|
|
|
|
// A reusable object used by getTriggerRegion to avoid excessive object creation.
|
|
_triggerRegion: {},
|
|
|
|
// inherit docs
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
// the autoEl object can't be on the prototype because we add tabIndex and href
|
|
// properties to it conditionally.
|
|
me.autoEl = {
|
|
tag: 'a',
|
|
role: 'button',
|
|
hidefocus: 'on',
|
|
unselectable: 'on'
|
|
};
|
|
|
|
// Ensure no selection happens
|
|
me.addCls('x-unselectable');
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event click
|
|
* Fires when this button is clicked, before the configured {@link #handler} is invoked. Execution of the
|
|
* {@link #handler} may be vetoed by returning <code>false</code> to this event.
|
|
* @param {Ext.button.Button} this
|
|
* @param {Event} e The click event
|
|
*/
|
|
'click',
|
|
|
|
/**
|
|
* @event toggle
|
|
* Fires when the 'pressed' state of this button changes (only if enableToggle = true)
|
|
* @param {Ext.button.Button} this
|
|
* @param {Boolean} pressed
|
|
*/
|
|
'toggle',
|
|
|
|
/**
|
|
* @event mouseover
|
|
* Fires when the mouse hovers over the button
|
|
* @param {Ext.button.Button} this
|
|
* @param {Event} e The event object
|
|
*/
|
|
'mouseover',
|
|
|
|
/**
|
|
* @event mouseout
|
|
* Fires when the mouse exits the button
|
|
* @param {Ext.button.Button} this
|
|
* @param {Event} e The event object
|
|
*/
|
|
'mouseout',
|
|
|
|
/**
|
|
* @event menushow
|
|
* If this button has a menu, this event fires when it is shown
|
|
* @param {Ext.button.Button} this
|
|
* @param {Ext.menu.Menu} menu
|
|
*/
|
|
'menushow',
|
|
|
|
/**
|
|
* @event menuhide
|
|
* If this button has a menu, this event fires when it is hidden
|
|
* @param {Ext.button.Button} this
|
|
* @param {Ext.menu.Menu} menu
|
|
*/
|
|
'menuhide',
|
|
|
|
/**
|
|
* @event menutriggerover
|
|
* If this button has a menu, this event fires when the mouse enters the menu triggering element
|
|
* @param {Ext.button.Button} this
|
|
* @param {Ext.menu.Menu} menu
|
|
* @param {Event} e
|
|
*/
|
|
'menutriggerover',
|
|
|
|
/**
|
|
* @event menutriggerout
|
|
* If this button has a menu, this event fires when the mouse leaves the menu triggering element
|
|
* @param {Ext.button.Button} this
|
|
* @param {Ext.menu.Menu} menu
|
|
* @param {Event} e
|
|
*/
|
|
'menutriggerout',
|
|
|
|
/**
|
|
* @event textchange
|
|
* Fired when the button's text is changed by the {@link #setText} method.
|
|
* @param {Ext.button.Button} this
|
|
* @param {String} oldText
|
|
* @param {String} newText
|
|
*/
|
|
'textchange',
|
|
|
|
/**
|
|
* @event iconchange
|
|
* Fired when the button's icon is changed by the {@link #setIcon} or {@link #setIconCls} methods.
|
|
* @param {Ext.button.Button} this
|
|
* @param {String} oldIcon
|
|
* @param {String} newIcon
|
|
*/
|
|
'iconchange',
|
|
|
|
/**
|
|
* @event glyphchange
|
|
* Fired when the button's glyph is changed by the {@link #setGlyph} method.
|
|
* @param {Ext.button.Button} this
|
|
* @param {Number/String} newGlyph
|
|
* @param {Number/String} oldGlyph
|
|
*/
|
|
'glyphchange'
|
|
);
|
|
|
|
if (me.menu) {
|
|
// Flag that we'll have a splitCls
|
|
me.split = true;
|
|
|
|
// retrieve menu by id or instantiate instance if needed
|
|
me.menu = Ext.menu.Manager.get(me.menu);
|
|
|
|
// Use ownerButton as the upward link. Menus *must have no ownerCt* - they are global floaters.
|
|
// Upward navigation is done using the up() method.
|
|
me.menu.ownerButton = me;
|
|
}
|
|
|
|
// Accept url as a synonym for href
|
|
if (me.url) {
|
|
me.href = me.url;
|
|
}
|
|
|
|
// preventDefault defaults to false for links
|
|
if (me.href && !me.hasOwnProperty('preventDefault')) {
|
|
me.preventDefault = false;
|
|
}
|
|
|
|
if (Ext.isString(me.toggleGroup) && me.toggleGroup !== '') {
|
|
me.enableToggle = true;
|
|
}
|
|
|
|
if (me.html && !me.text) {
|
|
me.text = me.html;
|
|
delete me.html;
|
|
}
|
|
|
|
me.glyphCls = me.baseCls + '-glyph';
|
|
},
|
|
|
|
// inherit docs
|
|
getActionEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// inherit docs
|
|
getFocusEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
// See comments in onFocus
|
|
onDisable: function(){
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
setComponentCls: function() {
|
|
var me = this,
|
|
cls = me.getComponentCls();
|
|
|
|
if (!Ext.isEmpty(me.oldCls)) {
|
|
me.removeClsWithUI(me.oldCls);
|
|
me.removeClsWithUI(me.pressedCls);
|
|
}
|
|
|
|
me.oldCls = cls;
|
|
me.addClsWithUI(cls);
|
|
},
|
|
|
|
getComponentCls: function() {
|
|
var me = this,
|
|
cls;
|
|
|
|
// Check whether the button has an icon or not, and if it has an icon, what is the alignment
|
|
if (me.iconCls || me.icon || me.glyph) {
|
|
cls = [me.text ? 'icon-text-' + me.iconAlign : 'icon'];
|
|
} else if (me.text) {
|
|
cls = ['noicon'];
|
|
} else {
|
|
cls = [];
|
|
}
|
|
|
|
if (me.pressed) {
|
|
cls[cls.length] = me.pressedCls;
|
|
}
|
|
return cls;
|
|
},
|
|
|
|
beforeRender: function () {
|
|
var me = this,
|
|
autoEl = me.autoEl,
|
|
href = me.getHref(),
|
|
hrefTarget = me.hrefTarget;
|
|
|
|
if (!me.disabled) {
|
|
autoEl.tabIndex = me.tabIndex;
|
|
}
|
|
|
|
if (href) {
|
|
autoEl.href = href;
|
|
if (hrefTarget) {
|
|
autoEl.target = hrefTarget;
|
|
}
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
// Add all needed classes to the protoElement.
|
|
me.oldCls = me.getComponentCls();
|
|
me.addClsWithUI(me.oldCls);
|
|
|
|
// Apply the renderData to the template args
|
|
Ext.applyIf(me.renderData, me.getTemplateArgs());
|
|
},
|
|
|
|
// @private
|
|
onRender: function() {
|
|
var me = this,
|
|
addOnclick,
|
|
btn,
|
|
btnListeners;
|
|
|
|
me.doc = Ext.getDoc();
|
|
me.callParent(arguments);
|
|
|
|
// Set btn as a local variable for easy access
|
|
btn = me.el;
|
|
|
|
if (me.tooltip) {
|
|
me.setTooltip(me.tooltip, true);
|
|
}
|
|
|
|
// Add the mouse events to the button
|
|
if (me.handleMouseEvents) {
|
|
btnListeners = {
|
|
scope: me,
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut,
|
|
mousedown: me.onMouseDown
|
|
};
|
|
if (me.split) {
|
|
btnListeners.mousemove = me.onMouseMove;
|
|
}
|
|
} else {
|
|
btnListeners = {
|
|
scope: me
|
|
};
|
|
}
|
|
|
|
// Check if the button has a menu
|
|
if (me.menu) {
|
|
me.mon(me.menu, {
|
|
scope: me,
|
|
show: me.onMenuShow,
|
|
hide: me.onMenuHide
|
|
});
|
|
|
|
me.keyMap = new Ext.util.KeyMap({
|
|
target: me.el,
|
|
key: Ext.EventObject.DOWN,
|
|
handler: me.onDownKey,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
// Check if it is a repeat button
|
|
if (me.repeat) {
|
|
me.mon(new Ext.util.ClickRepeater(btn, Ext.isObject(me.repeat) ? me.repeat: {}), 'click', me.onRepeatClick, me);
|
|
} else {
|
|
|
|
// If the activation event already has a handler, make a note to add the handler later
|
|
if (btnListeners[me.clickEvent]) {
|
|
addOnclick = true;
|
|
} else {
|
|
btnListeners[me.clickEvent] = me.onClick;
|
|
}
|
|
}
|
|
|
|
// Add whatever button listeners we need
|
|
me.mon(btn, btnListeners);
|
|
|
|
// If the listeners object had an entry for our clickEvent, add a listener now
|
|
if (addOnclick) {
|
|
me.mon(btn, me.clickEvent, me.onClick, me);
|
|
}
|
|
|
|
Ext.button.Manager.register(me);
|
|
},
|
|
|
|
/**
|
|
* This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} used to
|
|
* create this Button's DOM structure.
|
|
*
|
|
* Instances or subclasses which use a different Template to create a different DOM structure may need to provide
|
|
* their own implementation of this method.
|
|
* @protected
|
|
*
|
|
* @return {Object} Substitution data for a Template. The default implementation which provides data for the default
|
|
* {@link #template} returns an Object containing the following properties:
|
|
* @return {String} return.innerCls A CSS class to apply to the button's text element.
|
|
* @return {String} return.splitCls A CSS class to determine the presence and position of an arrow icon.
|
|
* (`'x-btn-arrow'` or `'x-btn-arrow-bottom'` or `''`)
|
|
* @return {String} return.iconUrl The url for the button icon.
|
|
* @return {String} return.iconCls The CSS class for the button icon.
|
|
* @return {String} return.glyph The glyph to use as the button icon.
|
|
* @return {String} return.glyphCls The CSS class to use for the glyph element.
|
|
* @return {String} return.glyphFontFamily The CSS font-family to use for the glyph element.
|
|
* @return {String} return.text The {@link #text} to display ion the Button.
|
|
*/
|
|
getTemplateArgs: function() {
|
|
var me = this,
|
|
glyph = me.glyph,
|
|
glyphFontFamily = Ext._glyphFontFamily,
|
|
glyphParts;
|
|
|
|
if (typeof glyph === 'string') {
|
|
glyphParts = glyph.split('@');
|
|
glyph = glyphParts[0];
|
|
glyphFontFamily = glyphParts[1];
|
|
}
|
|
|
|
return {
|
|
innerCls : me.getInnerCls(),
|
|
splitCls : me.getSplitCls(),
|
|
iconUrl : me.icon,
|
|
iconCls : me.iconCls,
|
|
glyph: glyph,
|
|
glyphCls: glyph ? me.glyphCls : '',
|
|
glyphFontFamily: glyphFontFamily,
|
|
text : me.text || ' '
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Sets the href of the embedded anchor element to the passed URL.
|
|
*
|
|
* Also appends any configured {@link #cfg-baseParams} and parameters set through {@link #setParams}.
|
|
* @param {String} href The URL to set in the anchor element.
|
|
*
|
|
*/
|
|
setHref: function(href) {
|
|
this.href = href;
|
|
this.el.dom.href = this.getHref();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* If there is a configured href for this Button, returns the href with parameters appended.
|
|
* @return {String/Boolean} The href string with parameters appended.
|
|
*/
|
|
getHref: function() {
|
|
var me = this,
|
|
href = me.href;
|
|
|
|
return href ? Ext.urlAppend(href, Ext.Object.toQueryString(Ext.apply({}, me.params, me.baseParams))) : false;
|
|
},
|
|
|
|
/**
|
|
* Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.
|
|
*
|
|
* **Only valid if the Button was originally configured with a {@link #href}**
|
|
*
|
|
* @param {Object} params Parameters to use in the href URL.
|
|
*/
|
|
setParams: function(params) {
|
|
this.params = params;
|
|
this.el.dom.href = this.getHref();
|
|
},
|
|
|
|
getSplitCls: function() {
|
|
var me = this;
|
|
return me.split ? (me.baseCls + '-' + me.arrowCls) + ' ' + (me.baseCls + '-' + me.arrowCls + '-' + me.arrowAlign) : '';
|
|
},
|
|
|
|
getInnerCls: function() {
|
|
return this.textAlign ? this.baseCls + '-inner-' + this.textAlign : '';
|
|
},
|
|
|
|
/**
|
|
* Sets the background image (inline style) of the button. This method also changes the value of the {@link #icon}
|
|
* config internally.
|
|
* @param {String} icon The path to an image to display in the button
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
setIcon: function(icon) {
|
|
icon = icon || '';
|
|
var me = this,
|
|
btnIconEl = me.btnIconEl,
|
|
oldIcon = me.icon || '';
|
|
|
|
me.icon = icon;
|
|
if (icon != oldIcon) {
|
|
if (btnIconEl) {
|
|
btnIconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
|
|
me.setComponentCls();
|
|
if (me.didIconStateChange(oldIcon, icon)) {
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
me.fireEvent('iconchange', me, oldIcon, icon);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the CSS class that provides a background image to use as the button's icon. This method also changes the
|
|
* value of the {@link #iconCls} config internally.
|
|
* @param {String} cls The CSS class providing the icon image
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
setIconCls: function(cls) {
|
|
cls = cls || '';
|
|
var me = this,
|
|
btnIconEl = me.btnIconEl,
|
|
oldCls = me.iconCls || '';
|
|
|
|
me.iconCls = cls;
|
|
if (oldCls != cls) {
|
|
if (btnIconEl) {
|
|
// Remove the previous iconCls from the button
|
|
btnIconEl.removeCls(oldCls);
|
|
btnIconEl.addCls(cls);
|
|
me.setComponentCls();
|
|
if (me.didIconStateChange(oldCls, cls)) {
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
me.fireEvent('iconchange', me, oldCls, cls);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets this button's glyph
|
|
* @param {Number/String} glyph the numeric charCode or string charCode/font-family.
|
|
* This parameter expects a format consistent with that of {@link #glyph}
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
setGlyph: function(glyph) {
|
|
glyph = glyph || 0;
|
|
var me = this,
|
|
btnIconEl = me.btnIconEl,
|
|
oldGlyph = me.glyph,
|
|
fontFamily, glyphParts;
|
|
|
|
me.glyph = glyph;
|
|
|
|
if (btnIconEl) {
|
|
if (typeof glyph === 'string') {
|
|
glyphParts = glyph.split('@');
|
|
glyph = glyphParts[0];
|
|
fontFamily = glyphParts[1] || Ext._glyphFontFamily;
|
|
}
|
|
|
|
if (!glyph) {
|
|
btnIconEl.dom.innerHTML = '';
|
|
} else if (oldGlyph != glyph) {
|
|
btnIconEl.dom.innerHTML = '&#' + glyph + ';';
|
|
}
|
|
|
|
if (fontFamily) {
|
|
btnIconEl.setStyle('font-family', fontFamily);
|
|
}
|
|
}
|
|
|
|
me.fireEvent('glyphchange', me, me.glyph, oldGlyph);
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the tooltip for this Button.
|
|
*
|
|
* @param {String/Object} tooltip This may be:
|
|
*
|
|
* - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
|
|
* - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}.
|
|
*
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
setTooltip: function(tooltip, initial) {
|
|
var me = this;
|
|
|
|
if (me.rendered) {
|
|
if (!initial || !tooltip) {
|
|
me.clearTip();
|
|
}
|
|
if (tooltip) {
|
|
if (Ext.quickTipsActive && Ext.isObject(tooltip)) {
|
|
Ext.tip.QuickTipManager.register(Ext.apply({
|
|
target: me.el.id
|
|
},
|
|
tooltip));
|
|
me.tooltip = tooltip;
|
|
} else {
|
|
me.el.dom.setAttribute(me.getTipAttr(), tooltip);
|
|
}
|
|
}
|
|
} else {
|
|
me.tooltip = tooltip;
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the text alignment for this button.
|
|
* @param {String} align The new alignment of the button text. See {@link #textAlign}.
|
|
*/
|
|
setTextAlign: function(align) {
|
|
var me = this,
|
|
btnEl = me.btnEl;
|
|
|
|
if (btnEl) {
|
|
btnEl.removeCls(me.baseCls + '-inner-' + me.textAlign);
|
|
btnEl.addCls(me.baseCls + '-inner-' + align);
|
|
}
|
|
me.textAlign = align;
|
|
return me;
|
|
},
|
|
|
|
getTipAttr: function(){
|
|
return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
|
|
},
|
|
|
|
// @private
|
|
getRefItems: function(deep){
|
|
var menu = this.menu,
|
|
items;
|
|
|
|
if (menu) {
|
|
items = menu.getRefItems(deep);
|
|
items.unshift(menu);
|
|
}
|
|
return items || [];
|
|
},
|
|
|
|
// @private
|
|
clearTip: function() {
|
|
var me = this,
|
|
el = me.el;
|
|
|
|
if (Ext.quickTipsActive && Ext.isObject(me.tooltip)) {
|
|
Ext.tip.QuickTipManager.unregister(el);
|
|
} else {
|
|
el.dom.removeAttribute(me.getTipAttr());
|
|
}
|
|
},
|
|
|
|
// @private
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
if (me.rendered) {
|
|
me.clearTip();
|
|
}
|
|
if (me.menu && me.destroyMenu !== false) {
|
|
Ext.destroy(me.menu);
|
|
}
|
|
Ext.destroy(me.btnInnerEl, me.repeater);
|
|
me.callParent();
|
|
},
|
|
|
|
// @private
|
|
onDestroy: function() {
|
|
var me = this;
|
|
if (me.rendered) {
|
|
me.doc.un('mouseover', me.monitorMouseOver, me);
|
|
delete me.doc;
|
|
|
|
Ext.destroy(me.keyMap);
|
|
delete me.keyMap;
|
|
}
|
|
Ext.button.Manager.unregister(me);
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* Assigns this Button's click handler
|
|
* @param {Function} handler The function to call when the button is clicked
|
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
|
|
* Defaults to this Button.
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
setHandler: function(handler, scope) {
|
|
this.handler = handler;
|
|
this.scope = scope;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Sets this Button's text
|
|
* @param {String} text The button text
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
setText: function(text) {
|
|
text = text || '';
|
|
var me = this,
|
|
oldText = me.text || '';
|
|
|
|
if (text != oldText) {
|
|
me.text = text;
|
|
if (me.rendered) {
|
|
me.btnInnerEl.update(text || ' ');
|
|
me.setComponentCls();
|
|
if (Ext.isStrict && Ext.isIE8) {
|
|
// weird repaint issue causes it to not resize
|
|
me.el.repaint();
|
|
}
|
|
me.updateLayout();
|
|
}
|
|
me.fireEvent('textchange', me, oldText, text);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Checks if the icon/iconCls changed from being empty to having a value, or having a value to being empty.
|
|
* @private
|
|
* @param {String} old The old icon/iconCls
|
|
* @param {String} current The current icon/iconCls
|
|
* @return {Boolean} True if the icon state changed
|
|
*/
|
|
didIconStateChange: function(old, current) {
|
|
var currentEmpty = Ext.isEmpty(current);
|
|
return Ext.isEmpty(old) ? !currentEmpty : currentEmpty;
|
|
},
|
|
|
|
/**
|
|
* Gets the text for this Button
|
|
* @return {String} The button text
|
|
*/
|
|
getText: function() {
|
|
return this.text;
|
|
},
|
|
|
|
/**
|
|
* If a state it passed, it becomes the pressed state otherwise the current state is toggled.
|
|
* @param {Boolean} [state] Force a particular state
|
|
* @param {Boolean} [suppressEvent=false] True to stop events being fired when calling this method.
|
|
* @return {Ext.button.Button} this
|
|
*/
|
|
toggle: function(state, suppressEvent) {
|
|
var me = this;
|
|
state = state === undefined ? !me.pressed: !!state;
|
|
if (state !== me.pressed) {
|
|
if (me.rendered) {
|
|
me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
|
|
}
|
|
me.pressed = state;
|
|
if (!suppressEvent) {
|
|
me.fireEvent('toggle', me, state);
|
|
Ext.callback(me.toggleHandler, me.scope || me, [me, state]);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
maybeShowMenu: function(){
|
|
var me = this;
|
|
if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
|
|
me.showMenu(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows this button's menu (if it has one)
|
|
*/
|
|
showMenu: function(/* private */ fromEvent) {
|
|
var me = this,
|
|
menu = me.menu;
|
|
|
|
if (me.rendered) {
|
|
if (me.tooltip && Ext.quickTipsActive && me.getTipAttr() != 'title') {
|
|
Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.el);
|
|
}
|
|
if (menu.isVisible()) {
|
|
menu.hide();
|
|
}
|
|
|
|
if (!fromEvent || me.showEmptyMenu || menu.items.getCount() > 0) {
|
|
menu.showBy(me.el, me.menuAlign);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Hides this button's menu (if it has one)
|
|
*/
|
|
hideMenu: function() {
|
|
if (this.hasVisibleMenu()) {
|
|
this.menu.hide();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the button has a menu and it is visible
|
|
* @return {Boolean}
|
|
*/
|
|
hasVisibleMenu: function() {
|
|
var menu = this.menu;
|
|
return menu && menu.rendered && menu.isVisible();
|
|
},
|
|
|
|
// @private
|
|
onRepeatClick: function(repeat, e) {
|
|
this.onClick(e);
|
|
},
|
|
|
|
// @private
|
|
onClick: function(e) {
|
|
var me = this;
|
|
if (me.preventDefault || (me.disabled && me.getHref()) && e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
// Can be triggered by ENTER or SPACE keydown events which set the button property.
|
|
// Only veto event handling if it's a mouse event with an alternative button.
|
|
if (e.type !== 'keydown' && e.button !== 0) {
|
|
return;
|
|
}
|
|
if (!me.disabled) {
|
|
me.doToggle();
|
|
me.maybeShowMenu();
|
|
me.fireHandler(e);
|
|
}
|
|
},
|
|
|
|
fireHandler: function(e) {
|
|
var me = this,
|
|
handler = me.handler;
|
|
|
|
if (me.fireEvent('click', me, e) !== false) {
|
|
if (handler) {
|
|
handler.call(me.scope || me, me, e);
|
|
}
|
|
}
|
|
},
|
|
|
|
doToggle: function() {
|
|
var me = this;
|
|
if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
|
|
me.toggle();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private mouseover handler called when a mouseover event occurs anywhere within the encapsulating element.
|
|
* The targets are interrogated to see what is being entered from where.
|
|
* @param e
|
|
*/
|
|
onMouseOver: function(e) {
|
|
var me = this;
|
|
if (!me.disabled && !e.within(me.el, true, true)) {
|
|
me.onMouseEnter(e);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -
|
|
* or the mouse leaves the encapsulating element.
|
|
* The targets are interrogated to see what is being exited to where.
|
|
* @param e
|
|
*/
|
|
onMouseOut: function(e) {
|
|
var me = this;
|
|
if (!e.within(me.el, true, true)) {
|
|
if (me.overMenuTrigger) {
|
|
me.onMenuTriggerOut(e);
|
|
}
|
|
me.onMouseLeave(e);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* mousemove handler called when the mouse moves anywhere within the encapsulating element.
|
|
* The position is checked to determine if the mouse is entering or leaving the trigger area. Using
|
|
* mousemove to check this is more resource intensive than we'd like, but it is necessary because
|
|
* the trigger area does not line up exactly with sub-elements so we don't always get mouseover/out
|
|
* events when needed. In the future we should consider making the trigger a separate element that
|
|
* is absolutely positioned and sized over the trigger area.
|
|
*/
|
|
onMouseMove: function(e) {
|
|
var me = this,
|
|
el = me.el,
|
|
over = me.overMenuTrigger,
|
|
overPosition, triggerRegion;
|
|
|
|
if (me.split) {
|
|
overPosition = (me.arrowAlign === 'right') ?
|
|
e.getX() - me.getX() : e.getY() - el.getY();
|
|
triggerRegion = me.getTriggerRegion();
|
|
|
|
if (overPosition > triggerRegion.begin && overPosition < triggerRegion.end) {
|
|
if (!over) {
|
|
me.onMenuTriggerOver(e);
|
|
}
|
|
} else {
|
|
if (over) {
|
|
me.onMenuTriggerOut(e);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns an object containing `begin` and `end` properties that indicate the
|
|
* left/right bounds of a right trigger or the top/bottom bounds of a bottom trigger.
|
|
* @return {Object}
|
|
*/
|
|
getTriggerRegion: function() {
|
|
var me = this,
|
|
region = me._triggerRegion,
|
|
triggerSize = me.getTriggerSize(),
|
|
btnSize = me.arrowAlign === 'right' ? me.getWidth() : me.getHeight();
|
|
|
|
region.begin = btnSize - triggerSize;
|
|
region.end = btnSize;
|
|
return region;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Measures the size of the trigger area for menu and split buttons. Will be a width for
|
|
* a right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement.
|
|
*/
|
|
getTriggerSize: function() {
|
|
var me = this,
|
|
size = me.triggerSize,
|
|
side, sideFirstLetter;
|
|
|
|
if (size == null) { // Same as (size === null || size === undefined)
|
|
side = me.arrowAlign;
|
|
sideFirstLetter = side.charAt(0);
|
|
size = me.triggerSize = me.el.getFrameWidth(sideFirstLetter) + me.getBtnWrapFrameWidth(sideFirstLetter)
|
|
if (me.frameSize) {
|
|
size = me.triggerSize += me.frameSize[side];
|
|
}
|
|
}
|
|
return size;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getBtnWrapFrameWidth: function(side) {
|
|
return this.btnWrap.getFrameWidth(side);
|
|
},
|
|
|
|
addOverCls: function() {
|
|
if (!this.disabled) {
|
|
this.addClsWithUI(this.overCls);
|
|
}
|
|
},
|
|
removeOverCls: function() {
|
|
this.removeClsWithUI(this.overCls);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* virtual mouseenter handler called when it is detected that the mouseout event
|
|
* signified the mouse entering the encapsulating element.
|
|
* @param e
|
|
*/
|
|
onMouseEnter: function(e) {
|
|
// overCls is handled by AbstractComponent
|
|
this.fireEvent('mouseover', this, e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* virtual mouseleave handler called when it is detected that the mouseover event
|
|
* signified the mouse entering the encapsulating element.
|
|
* @param e
|
|
*/
|
|
onMouseLeave: function(e) {
|
|
// overCls is handled by AbstractComponent
|
|
this.fireEvent('mouseout', this, e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* virtual mouseenter handler called when it is detected that the mouseover event
|
|
* signified the mouse entering the arrow area of the button - the `<em>`.
|
|
* @param e
|
|
*/
|
|
onMenuTriggerOver: function(e) {
|
|
var me = this,
|
|
arrowTip = me.arrowTooltip;
|
|
|
|
me.overMenuTrigger = true;
|
|
// We don't have a separate arrow element, so we only add the tip attribute if
|
|
// we're over that part of the button
|
|
if (me.split && arrowTip) {
|
|
me.btnWrap.dom.setAttribute(me.getTipAttr(), arrowTip);
|
|
}
|
|
me.fireEvent('menutriggerover', me, me.menu, e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* virtual mouseleave handler called when it is detected that the mouseout event
|
|
* signified the mouse leaving the arrow area of the button - the `<em>`.
|
|
* @param e
|
|
*/
|
|
onMenuTriggerOut: function(e) {
|
|
var me = this;
|
|
delete me.overMenuTrigger;
|
|
// See onMenuTriggerOver
|
|
if (me.split && me.arrowTooltip) {
|
|
me.btnWrap.dom.setAttribute(me.getTipAttr(), '');
|
|
}
|
|
me.fireEvent('menutriggerout', me, me.menu, e);
|
|
},
|
|
|
|
// inherit docs
|
|
enable: function(silent) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.removeClsWithUI('disabled');
|
|
if (me.rendered) {
|
|
me.el.dom.setAttribute('tabIndex', me.tabIndex);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
// inherit docs
|
|
disable: function(silent) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.addClsWithUI('disabled');
|
|
me.removeClsWithUI(me.overCls);
|
|
if (me.rendered) {
|
|
me.el.dom.removeAttribute('tabIndex');
|
|
}
|
|
|
|
// IE renders disabled text by layering gray text on top of white text, offset by 1 pixel. Normally this is fine
|
|
// but in some circumstances (such as using formBind) it gets confused and renders them side by side instead.
|
|
if (me.btnInnerEl && Ext.isIE7m) {
|
|
me.btnInnerEl.repaint();
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Method to change the scale of the button. See {@link #scale} for allowed configurations.
|
|
* @param {String} scale The scale to change to.
|
|
*/
|
|
setScale: function(scale) {
|
|
var me = this,
|
|
ui = me.ui.replace('-' + me.scale, '');
|
|
|
|
//check if it is an allowed scale
|
|
if (!Ext.Array.contains(me.allowedScales, scale)) {
|
|
throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')');
|
|
}
|
|
|
|
me.scale = scale;
|
|
me.setUI(ui);
|
|
},
|
|
|
|
// inherit docs
|
|
setUI: function(ui) {
|
|
var me = this;
|
|
|
|
//we need to append the scale to the UI, if not already done
|
|
if (me.scale && !ui.match(me.scale)) {
|
|
ui = ui + '-' + me.scale;
|
|
}
|
|
|
|
me.callParent([ui]);
|
|
|
|
// Set all the state classNames, as they need to include the UI
|
|
// me.disabledCls += ' ' + me.baseCls + '-' + me.ui + '-disabled';
|
|
},
|
|
|
|
|
|
// @private
|
|
onMouseDown: function(e) {
|
|
var me = this;
|
|
|
|
if (Ext.isIE) {
|
|
// In IE the use of unselectable on the button's elements causes the element
|
|
// to not receive focus, even when it is directly clicked.
|
|
me.getFocusEl().focus();
|
|
}
|
|
|
|
if (!me.disabled && e.button === 0) {
|
|
Ext.button.Manager.onButtonMousedown(me, e);
|
|
me.addClsWithUI(me.pressedCls);
|
|
}
|
|
},
|
|
// @private
|
|
onMouseUp: function(e) {
|
|
var me = this;
|
|
if (e.button === 0) {
|
|
if (!me.pressed) {
|
|
me.removeClsWithUI(me.pressedCls);
|
|
}
|
|
}
|
|
},
|
|
// @private
|
|
onMenuShow: function(e) {
|
|
var me = this;
|
|
me.ignoreNextClick = 0;
|
|
me.addClsWithUI(me.menuActiveCls);
|
|
me.fireEvent('menushow', me, me.menu);
|
|
},
|
|
|
|
// @private
|
|
onMenuHide: function(e) {
|
|
var me = this;
|
|
me.removeClsWithUI(me.menuActiveCls);
|
|
me.ignoreNextClick = Ext.defer(me.restoreClick, 250, me);
|
|
me.fireEvent('menuhide', me, me.menu);
|
|
me.focus();
|
|
},
|
|
|
|
// @private
|
|
restoreClick: function() {
|
|
this.ignoreNextClick = 0;
|
|
},
|
|
|
|
// @private
|
|
onDownKey: function(k, e) {
|
|
var me = this;
|
|
|
|
if (me.menu && !me.disabled) {
|
|
me.showMenu();
|
|
e.stopEvent();
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.container.boxOverflow.Menu', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.container.boxOverflow.None ,
|
|
|
|
alternateClassName: 'Ext.layout.boxOverflow.Menu',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} triggerButtonCls
|
|
* CSS class added to the Button which shows the overflow menu.
|
|
*/
|
|
|
|
/**
|
|
* @property {String} noItemsMenuText
|
|
* HTML fragment to render into the toolbar overflow menu if there are no items to display
|
|
*/
|
|
noItemsMenuText : '<div class="' + Ext.baseCSSPrefix + 'toolbar-no-items">(None)</div>',
|
|
|
|
constructor: function(layout) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.triggerButtonCls = me.triggerButtonCls || Ext.baseCSSPrefix + 'box-menu-after';
|
|
/**
|
|
* @property {Array} menuItems
|
|
* Array of all items that are currently hidden and should go into the dropdown menu
|
|
*/
|
|
me.menuItems = [];
|
|
},
|
|
|
|
beginLayout: function (ownerContext) {
|
|
this.callParent(arguments);
|
|
|
|
// Before layout, we need to re-show all items which we may have hidden due to a
|
|
// previous overflow...
|
|
this.clearOverflow(ownerContext);
|
|
},
|
|
|
|
beginLayoutCycle: function (ownerContext, firstCycle) {
|
|
this.callParent(arguments);
|
|
|
|
if (!firstCycle) {
|
|
// if we are being re-run, we need to clear any overflow from the last run and
|
|
// recache the childItems collection
|
|
this.clearOverflow(ownerContext);
|
|
|
|
this.layout.cacheChildItems(ownerContext);
|
|
}
|
|
},
|
|
|
|
onRemove: function(comp){
|
|
Ext.Array.remove(this.menuItems, comp);
|
|
},
|
|
|
|
// We don't define a prefix in menu overflow.
|
|
getSuffixConfig: function() {
|
|
var me = this,
|
|
layout = me.layout,
|
|
owner = layout.owner,
|
|
oid = owner.id;
|
|
|
|
/**
|
|
* @private
|
|
* @property {Ext.menu.Menu} menu
|
|
* The expand menu - holds items for every item that cannot be shown
|
|
* because the container is currently not large enough.
|
|
*/
|
|
me.menu = new Ext.menu.Menu({
|
|
listeners: {
|
|
scope: me,
|
|
beforeshow: me.beforeMenuShow
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* @property {Ext.button.Button} menuTrigger
|
|
* The expand button which triggers the overflow menu to be shown
|
|
*/
|
|
me.menuTrigger = new Ext.button.Button({
|
|
id: oid + '-menu-trigger',
|
|
cls: Ext.layout.container.Box.prototype.innerCls + ' ' + me.triggerButtonCls + ' ' + Ext.baseCSSPrefix + 'toolbar-item',
|
|
plain: owner.usePlainButtons,
|
|
ownerCt: owner, // To enable the Menu to ascertain a valid zIndexManager owner in the same tree
|
|
ownerLayout: layout,
|
|
iconCls: Ext.baseCSSPrefix + me.getOwnerType(owner) + '-more-icon',
|
|
ui: owner instanceof Ext.toolbar.Toolbar ? 'default-toolbar' : 'default',
|
|
menu: me.menu,
|
|
// Menu will be empty when we're showing it because we populate items after
|
|
showEmptyMenu: true,
|
|
getSplitCls: function() { return '';}
|
|
});
|
|
|
|
return me.menuTrigger.getRenderTree();
|
|
},
|
|
|
|
getOverflowCls: function() {
|
|
return Ext.baseCSSPrefix + this.layout.direction + '-box-overflow-body';
|
|
},
|
|
|
|
handleOverflow: function(ownerContext) {
|
|
var me = this,
|
|
layout = me.layout,
|
|
names = layout.names,
|
|
plan = ownerContext.state.boxPlan,
|
|
posArgs = [null, null];
|
|
|
|
me.showTrigger(ownerContext);
|
|
|
|
// Center the menuTrigger button only if we are not vertical.
|
|
// TODO: Should we emulate align: 'middle' like this, or should we 'stretchmax' the menuTrigger?
|
|
if (me.layout.direction !== 'vertical') {
|
|
posArgs[names.heightIndex] = (plan.maxSize - me.menuTrigger[names.getHeight]()) / 2;
|
|
me.menuTrigger.setPosition.apply(me.menuTrigger, posArgs);
|
|
}
|
|
|
|
return {
|
|
reservedSpace: me.triggerTotalWidth
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Finishes the render operation of the trigger Button.
|
|
* @private
|
|
*/
|
|
captureChildElements: function() {
|
|
var me = this,
|
|
menuTrigger = me.menuTrigger,
|
|
names = me.layout.names;
|
|
|
|
// The rendering flag is set when getRenderTree is called which we do when returning markup string for the owning layout's "suffix"
|
|
if (menuTrigger.rendering) {
|
|
menuTrigger.finishRender();
|
|
me.triggerTotalWidth = menuTrigger[names.getWidth]() + menuTrigger.el.getMargin(names.parallelMargins);
|
|
}
|
|
},
|
|
|
|
_asLayoutRoot: { isRoot: true },
|
|
|
|
/**
|
|
* @private
|
|
* Called by the layout, when it determines that there is no overflow.
|
|
* Also called as an interceptor to the layout's onLayout method to reshow
|
|
* previously hidden overflowing items.
|
|
*/
|
|
clearOverflow: function(ownerContext) {
|
|
var me = this,
|
|
items = me.menuItems,
|
|
item,
|
|
i = 0,
|
|
length = items.length,
|
|
owner = me.layout.owner,
|
|
asLayoutRoot = me._asLayoutRoot;
|
|
|
|
owner.suspendLayouts();
|
|
me.captureChildElements();
|
|
me.hideTrigger();
|
|
owner.resumeLayouts();
|
|
|
|
for (; i < length; i++) {
|
|
item = items[i];
|
|
|
|
// What we are doing here is preventing the layout bubble from invalidating our
|
|
// owner component. We need just the button to be added to the layout run.
|
|
item.suspendLayouts();
|
|
item.show();
|
|
item.resumeLayouts(asLayoutRoot);
|
|
}
|
|
|
|
items.length = 0;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Shows the overflow trigger when enableOverflow is set to true and the items
|
|
* in the layout are too wide to fit in the space available
|
|
*/
|
|
showTrigger: function(ownerContext) {
|
|
var me = this,
|
|
layout = me.layout,
|
|
owner = layout.owner,
|
|
names = layout.names,
|
|
startProp = names.x,
|
|
sizeProp = names.width,
|
|
plan = ownerContext.state.boxPlan,
|
|
available = plan.targetSize[sizeProp],
|
|
childItems = ownerContext.childItems,
|
|
len = childItems.length,
|
|
menuTrigger = me.menuTrigger,
|
|
childContext,
|
|
comp, i, props;
|
|
|
|
// We don't want the menuTrigger.show to cause owner's layout to be invalidated, so
|
|
// we force just the button to be invalidated and added to the current run.
|
|
menuTrigger.suspendLayouts();
|
|
menuTrigger.show();
|
|
menuTrigger.resumeLayouts(me._asLayoutRoot);
|
|
|
|
available -= me.triggerTotalWidth;
|
|
|
|
owner.suspendLayouts();
|
|
|
|
// Hide all items which are off the end, and store them to allow them to be restored
|
|
// before each layout operation.
|
|
me.menuItems.length = 0;
|
|
for (i = 0; i < len; i++) {
|
|
childContext = childItems[i];
|
|
props = childContext.props;
|
|
if (props[startProp] + props[sizeProp] > available) {
|
|
comp = childContext.target;
|
|
me.menuItems.push(comp);
|
|
comp.hide();
|
|
}
|
|
}
|
|
|
|
owner.resumeLayouts();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
hideTrigger: function() {
|
|
var menuTrigger = this.menuTrigger;
|
|
if (menuTrigger) {
|
|
menuTrigger.hide();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called before the overflow menu is shown. This constructs the menu's items, caching them for as long as it can.
|
|
*/
|
|
beforeMenuShow: function(menu) {
|
|
var me = this,
|
|
items = me.menuItems,
|
|
i = 0,
|
|
len = items.length,
|
|
item,
|
|
prev,
|
|
needsSep = function(group, prev){
|
|
return group.isXType('buttongroup') && !(prev instanceof Ext.toolbar.Separator);
|
|
};
|
|
|
|
menu.suspendLayouts();
|
|
me.clearMenu();
|
|
menu.removeAll();
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
|
|
// Do not show a separator as a first item
|
|
if (!i && (item instanceof Ext.toolbar.Separator)) {
|
|
continue;
|
|
}
|
|
if (prev && (needsSep(item, prev) || needsSep(prev, item))) {
|
|
menu.add('-');
|
|
}
|
|
|
|
me.addComponentToMenu(menu, item);
|
|
prev = item;
|
|
}
|
|
|
|
// put something so the menu isn't empty if no compatible items found
|
|
if (menu.items.length < 1) {
|
|
menu.add(me.noItemsMenuText);
|
|
}
|
|
menu.resumeLayouts();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a menu config for a given component. This config is used to create a menu item
|
|
* to be added to the expander menu
|
|
* @param {Ext.Component} component The component to create the config for
|
|
* @param {Boolean} hideOnClick Passed through to the menu item
|
|
*/
|
|
createMenuConfig : function(component, hideOnClick) {
|
|
var me = this,
|
|
config = Ext.apply({}, component.initialConfig),
|
|
group = component.toggleGroup;
|
|
|
|
Ext.copyTo(config, component, [
|
|
'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu', 'tabIndex'
|
|
]);
|
|
|
|
Ext.apply(config, {
|
|
text : component.overflowText || component.text,
|
|
hideOnClick: hideOnClick,
|
|
destroyMenu: false,
|
|
listeners : {}
|
|
});
|
|
|
|
// Clone must have same value, and must sync original's value on change
|
|
if (component.isFormField) {
|
|
config.value = component.getValue();
|
|
|
|
// Sync the original component's value when the clone changes value.
|
|
// This intentionally overwrites any developer-configured change listener on the clone.
|
|
// That's because we monitor the clone's change event, and sync the
|
|
// original field by calling setValue, so the original field's change
|
|
// event will still fire.
|
|
config.listeners.change = function(c, newVal, oldVal) {
|
|
component.setValue(newVal);
|
|
}
|
|
}
|
|
|
|
// ToggleButtons become CheckItems
|
|
else if (group || component.enableToggle) {
|
|
Ext.apply(config, {
|
|
hideOnClick: false,
|
|
group : group,
|
|
checked: component.pressed,
|
|
handler: function(item, e) {
|
|
component.onClick(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Buttons may have their text or icon changed - this must be propagated to the clone in the overflow menu
|
|
if (component.isButton && !component.changeListenersAdded) {
|
|
component.on({
|
|
textchange: me.onButtonAttrChange,
|
|
iconchange: me.onButtonAttrChange,
|
|
toggle: me.onButtonToggle
|
|
});
|
|
component.changeListenersAdded = true;
|
|
}
|
|
|
|
// Typically margins are used to separate items in a toolbar
|
|
// but don't really make a lot of sense in a menu, so we strip
|
|
// them out here.
|
|
delete config.margin;
|
|
delete config.ownerCt;
|
|
delete config.xtype;
|
|
delete config.id;
|
|
delete config.itemId;
|
|
return config;
|
|
},
|
|
|
|
onButtonAttrChange: function(btn) {
|
|
var clone = btn.overflowClone;
|
|
clone.suspendLayouts();
|
|
clone.setText(btn.text);
|
|
clone.setIcon(btn.icon);
|
|
clone.setIconCls(btn.iconCls);
|
|
clone.resumeLayouts(true);
|
|
},
|
|
|
|
onButtonToggle: function(btn, state) {
|
|
// Keep the clone in sync with the original if necessary
|
|
if (btn.overflowClone.checked !== state) {
|
|
btn.overflowClone.setChecked(state);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.
|
|
* @param {Ext.menu.Menu} menu The menu to add to
|
|
* @param {Ext.Component} component The component to add
|
|
* TODO: Implement overrides in Ext.layout.container.boxOverflow which create overrides
|
|
* for SplitButton, Button, ButtonGroup, and TextField. And a generic one for Component
|
|
* which create clones suitable for use in an overflow menu.
|
|
*/
|
|
addComponentToMenu : function(menu, component) {
|
|
var me = this,
|
|
i, items, iLen;
|
|
|
|
if (component instanceof Ext.toolbar.Separator) {
|
|
menu.add('-');
|
|
} else if (component.isComponent) {
|
|
if (component.isXType('splitbutton')) {
|
|
component.overflowClone = menu.add(me.createMenuConfig(component, true));
|
|
|
|
} else if (component.isXType('button')) {
|
|
component.overflowClone = menu.add(me.createMenuConfig(component, !component.menu));
|
|
|
|
} else if (component.isXType('buttongroup')) {
|
|
items = component.items.items;
|
|
iLen = items.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
me.addComponentToMenu(menu, items[i]);
|
|
}
|
|
} else {
|
|
component.overflowClone = menu.add(Ext.create(Ext.getClassName(component), me.createMenuConfig(component)));
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Deletes the sub-menu of each item in the expander menu. Submenus are created for items such as
|
|
* splitbuttons and buttongroups, where the Toolbar item cannot be represented by a single menu item
|
|
*/
|
|
clearMenu : function() {
|
|
var menu = this.menu,
|
|
items, i, iLen, item;
|
|
|
|
if (menu && menu.items) {
|
|
items = menu.items.items;
|
|
iLen = items.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
item = items[i];
|
|
if (item.setMenu) {
|
|
item.setMenu(null);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
destroy: function() {
|
|
var trigger = this.menuTrigger;
|
|
|
|
if (trigger && !this.layout.owner.items.contains(trigger)) {
|
|
// Ensure we delete the ownerCt if it's not in the items
|
|
// so we don't get spurious container remove warnings.
|
|
delete trigger.ownerCt;
|
|
}
|
|
Ext.destroy(this.menu, trigger);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.container.boxOverflow.Scroller', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.container.boxOverflow.None ,
|
|
|
|
alternateClassName: 'Ext.layout.boxOverflow.Scroller',
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Boolean} animateScroll
|
|
* True to animate the scrolling of items within the layout (ignored if enableScroll is false)
|
|
*/
|
|
animateScroll: false,
|
|
|
|
/**
|
|
* @cfg {Number} scrollIncrement
|
|
* The number of pixels to scroll by on scroller click
|
|
*/
|
|
scrollIncrement: 20,
|
|
|
|
/**
|
|
* @cfg {Number} wheelIncrement
|
|
* The number of pixels to increment on mouse wheel scrolling.
|
|
*/
|
|
wheelIncrement: 10,
|
|
|
|
/**
|
|
* @cfg {Number} scrollRepeatInterval
|
|
* Number of milliseconds between each scroll while a scroller button is held down
|
|
*/
|
|
scrollRepeatInterval: 60,
|
|
|
|
/**
|
|
* @cfg {Number} scrollDuration
|
|
* Number of milliseconds that each scroll animation lasts
|
|
*/
|
|
scrollDuration: 400,
|
|
|
|
/**
|
|
* @cfg {String} beforeCtCls
|
|
* CSS class added to the beforeCt element. This is the element that holds any special items such as scrollers,
|
|
* which must always be present at the leftmost edge of the Container
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} afterCtCls
|
|
* CSS class added to the afterCt element. This is the element that holds any special items such as scrollers,
|
|
* which must always be present at the rightmost edge of the Container
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [scrollerCls='x-box-scroller']
|
|
* CSS class added to both scroller elements if enableScroll is used
|
|
*/
|
|
scrollerCls: Ext.baseCSSPrefix + 'box-scroller',
|
|
|
|
/**
|
|
* @cfg {String} beforeScrollerCls
|
|
* CSS class added to the left scroller element if enableScroll is used
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} afterScrollerCls
|
|
* CSS class added to the right scroller element if enableScroll is used
|
|
*/
|
|
|
|
constructor: function(layout, config) {
|
|
var me = this;
|
|
|
|
me.layout = layout;
|
|
Ext.apply(me, config || {});
|
|
|
|
// Dont pass the config so that it is not applied to 'this' again
|
|
me.mixins.observable.constructor.call(me);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event scroll
|
|
* @param {Ext.layout.container.boxOverflow.Scroller} scroller The layout scroller
|
|
* @param {Number} newPosition The new position of the scroller
|
|
* @param {Boolean/Object} animate If animating or not. If true, it will be a animation configuration, else it will be false
|
|
*/
|
|
'scroll'
|
|
);
|
|
me.scrollPosition = 0;
|
|
me.scrollSize = 0;
|
|
},
|
|
|
|
getPrefixConfig: function() {
|
|
var me = this,
|
|
layout = me.layout,
|
|
owner = layout.owner,
|
|
cls;
|
|
|
|
me.initCSSClasses();
|
|
cls = Ext.layout.container.Box.prototype.innerCls + ' ' + me.beforeCtCls;
|
|
if (owner.plain) {
|
|
// Add plain class for components that need separate "plain" styling (e.g. tab bar)
|
|
cls += ' ' + me.scrollerCls + '-plain';
|
|
}
|
|
return {
|
|
cls: cls,
|
|
cn : {
|
|
id : owner.id + layout.names.beforeScrollerSuffix,
|
|
cls: me.scrollerCls + ' ' + me.beforeScrollerCls,
|
|
style: 'display:none'
|
|
}
|
|
};
|
|
},
|
|
|
|
getSuffixConfig: function() {
|
|
var me = this,
|
|
layout = me.layout,
|
|
owner = layout.owner,
|
|
cls = Ext.layout.container.Box.prototype.innerCls + ' ' + me.afterCtCls;
|
|
|
|
if (owner.plain) {
|
|
// Add plain class for components that need separate "plain" styling (e.g. tab bar)
|
|
cls += ' ' + me.scrollerCls + '-plain';
|
|
}
|
|
return {
|
|
cls: cls,
|
|
cn : {
|
|
id : owner.id + layout.names.afterScrollerSuffix,
|
|
cls: me.scrollerCls + ' ' + me.afterScrollerCls,
|
|
style: 'display:none'
|
|
}
|
|
};
|
|
},
|
|
|
|
getOverflowCls: function() {
|
|
return Ext.baseCSSPrefix + this.layout.direction + '-box-overflow-body';
|
|
},
|
|
|
|
initCSSClasses: function() {
|
|
var me = this,
|
|
prefix = Ext.baseCSSPrefix,
|
|
layout = me.layout,
|
|
names = layout.names,
|
|
beforeXName = names.beforeX,
|
|
afterXName = names.afterX,
|
|
type = me.getOwnerType(layout.owner);
|
|
|
|
me.beforeCtCls = me.beforeCtCls || prefix + 'box-scroller-' + beforeXName;
|
|
me.afterCtCls = me.afterCtCls || prefix + 'box-scroller-' + afterXName;
|
|
|
|
me.beforeScrollerCls = me.beforeScrollerCls || prefix + type + '-scroll-' + beforeXName;
|
|
me.afterScrollerCls = me.afterScrollerCls || prefix + type + '-scroll-' + afterXName;
|
|
},
|
|
|
|
beginLayout: function (ownerContext) {
|
|
var layout = this.layout;
|
|
|
|
ownerContext.innerCtScrollPos = this.getScrollPosition();
|
|
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
completeLayout: function(ownerContext) {
|
|
var me = this,
|
|
plan = ownerContext.state.boxPlan,
|
|
names = me.layout.names,
|
|
last;
|
|
|
|
// If there is overflow...
|
|
if (plan && plan.tooNarrow) {
|
|
last = ownerContext.childItems[ownerContext.childItems.length - 1];
|
|
|
|
// capture this before callParent since it calls handle/clearOverflow:
|
|
me.scrollSize = last.props[names.x] + last.props[names.width];
|
|
me.updateScrollButtons();
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
finishedLayout: function(ownerContext) {
|
|
var me = this,
|
|
layout = me.layout,
|
|
scrollPos = Math.min(me.getMaxScrollPosition(), ownerContext.innerCtScrollPos);
|
|
|
|
layout.innerCt[layout.names.setScrollLeft](scrollPos);
|
|
},
|
|
|
|
handleOverflow: function(ownerContext) {
|
|
var me = this,
|
|
methodName = me.layout.names.getWidth;
|
|
|
|
me.showScrollers();
|
|
return {
|
|
reservedSpace: me.beforeCt[methodName]() + me.afterCt[methodName]()
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Gets references to the beforeCt and afterCt elements if they have not already been captured
|
|
* and creates click handlers for them.
|
|
*/
|
|
captureChildElements: function() {
|
|
var me = this,
|
|
el = me.layout.owner.el,
|
|
before, after, hoverCls, pressedSuffix, pressedCls, hoverSuffix;
|
|
|
|
// Grab the scroll click receiving elements
|
|
if (!me.beforeCt) {
|
|
hoverSuffix = '-hover';
|
|
pressedSuffix = '-pressed';
|
|
hoverCls = me.scrollerCls + hoverSuffix;
|
|
pressedCls = me.scrollerCls + pressedSuffix;
|
|
before = me.beforeScroller = el.getById(me.layout.owner.id + '-before-scroller');
|
|
after = me.afterScroller = el.getById(me.layout.owner.id + '-after-scroller');
|
|
me.beforeCt = before.up('');
|
|
me.afterCt = after.up('');
|
|
me.createWheelListener();
|
|
|
|
before.addClsOnOver(hoverCls);
|
|
before.addClsOnOver(me.beforeScrollerCls + hoverSuffix);
|
|
before.addClsOnClick(pressedCls);
|
|
before.addClsOnClick(me.beforeScrollerCls + pressedSuffix);
|
|
after.addClsOnOver(hoverCls);
|
|
after.addClsOnOver(me.afterScrollerCls + hoverSuffix);
|
|
after.addClsOnClick(pressedCls);
|
|
after.addClsOnClick(me.afterScrollerCls + pressedSuffix);
|
|
|
|
before.setVisibilityMode(Ext.Element.DISPLAY);
|
|
after.setVisibilityMode(Ext.Element.DISPLAY);
|
|
|
|
me.beforeRepeater = new Ext.util.ClickRepeater(before, {
|
|
interval: me.scrollRepeatInterval,
|
|
handler : me.scrollLeft,
|
|
scope : me
|
|
});
|
|
|
|
me.afterRepeater = new Ext.util.ClickRepeater(after, {
|
|
interval: me.scrollRepeatInterval,
|
|
handler : me.scrollRight,
|
|
scope : me
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets up an listener to scroll on the layout's innerCt mousewheel event
|
|
*/
|
|
createWheelListener: function() {
|
|
var me = this;
|
|
me.layout.innerCt.on({
|
|
mousewheel: function(e) {
|
|
me.scrollBy(me.getWheelDelta(e) * me.wheelIncrement * -1, false);
|
|
},
|
|
stopEvent: true
|
|
});
|
|
},
|
|
|
|
getWheelDelta: function (e) {
|
|
return e.getWheelDelta();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
clearOverflow: function () {
|
|
this.hideScrollers();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Shows the scroller elements in the beforeCt and afterCt. Creates the scrollers first if they are not already
|
|
* present.
|
|
*/
|
|
showScrollers: function() {
|
|
var me = this;
|
|
|
|
me.captureChildElements();
|
|
me.beforeScroller.show();
|
|
me.afterScroller.show();
|
|
me.layout.owner.addClsWithUI(me.layout.direction === 'vertical' ? 'vertical-scroller' : 'scroller');
|
|
// TODO - this may invalidates data in the ContextItem's styleCache
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Hides the scroller elements in the beforeCt and afterCt
|
|
*/
|
|
hideScrollers: function() {
|
|
var me = this;
|
|
|
|
if (me.beforeScroller !== undefined) {
|
|
me.beforeScroller.hide();
|
|
me.afterScroller.hide();
|
|
me.layout.owner.removeClsWithUI(me.layout.direction === 'vertical' ? 'vertical-scroller' : 'scroller');
|
|
// TODO - this may invalidates data in the ContextItem's styleCache
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
destroy: function() {
|
|
var me = this;
|
|
|
|
Ext.destroy(me.beforeRepeater, me.afterRepeater, me.beforeScroller, me.afterScroller, me.beforeCt, me.afterCt);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Scrolls left or right by the number of pixels specified
|
|
* @param {Number} delta Number of pixels to scroll to the right by. Use a negative number to scroll left
|
|
*/
|
|
scrollBy: function(delta, animate) {
|
|
this.scrollTo(this.getScrollPosition() + delta, animate);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @return {Object} Object passed to scrollTo when scrolling
|
|
*/
|
|
getScrollAnim: function() {
|
|
return {
|
|
duration: this.scrollDuration,
|
|
callback: this.updateScrollButtons,
|
|
scope : this
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Enables or disables each scroller button based on the current scroll position
|
|
*/
|
|
updateScrollButtons: function() {
|
|
var me = this,
|
|
beforeMeth,
|
|
afterMeth,
|
|
beforeCls,
|
|
afterCls,
|
|
disabledCls,
|
|
suffix = '-disabled';
|
|
|
|
if (me.beforeScroller == null || me.afterScroller == null) {
|
|
return;
|
|
}
|
|
|
|
beforeMeth = me.atExtremeBefore() ? 'addCls' : 'removeCls';
|
|
afterMeth = me.atExtremeAfter() ? 'addCls' : 'removeCls';
|
|
disabledCls = me.scrollerCls + suffix;
|
|
beforeCls = [disabledCls, me.beforeScrollerCls + suffix];
|
|
afterCls = [disabledCls, me.afterScrollerCls + suffix];
|
|
|
|
me.beforeScroller[beforeMeth](beforeCls);
|
|
me.afterScroller[afterMeth](afterCls);
|
|
me.scrolling = false;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Scrolls to the left by the configured amount
|
|
*/
|
|
scrollLeft: function() {
|
|
this.scrollBy(-this.scrollIncrement, false);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Scrolls to the right by the configured amount
|
|
*/
|
|
scrollRight: function() {
|
|
this.scrollBy(this.scrollIncrement, false);
|
|
},
|
|
|
|
/**
|
|
* Returns the current scroll position of the innerCt element
|
|
* @return {Number} The current scroll position
|
|
*/
|
|
getScrollPosition: function(){
|
|
var me = this,
|
|
layout = me.layout,
|
|
result;
|
|
|
|
// Until we actually scroll, the scroll[Top|Left] is stored as zero to avoid DOM
|
|
// hits, after that it's NaN.
|
|
if (isNaN(me.scrollPosition)) {
|
|
result = layout.innerCt[layout.names.getScrollLeft]();
|
|
} else {
|
|
result = me.scrollPosition;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the maximum value we can scrollTo
|
|
* @return {Number} The max scroll value
|
|
*/
|
|
getMaxScrollPosition: function() {
|
|
var me = this,
|
|
layout = me.layout,
|
|
maxScrollPos = me.scrollSize - layout.innerCt[layout.names.getWidth]();
|
|
|
|
return (maxScrollPos < 0) ? 0 : maxScrollPos;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns true if the innerCt scroll is already at its left-most point
|
|
* @return {Boolean} True if already at furthest left point
|
|
*/
|
|
atExtremeBefore: function() {
|
|
return !this.getScrollPosition();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns true if the innerCt scroll is already at its right-most point
|
|
* @return {Boolean} True if already at furthest right point
|
|
*/
|
|
atExtremeAfter: function() {
|
|
return this.getScrollPosition() >= this.getMaxScrollPosition();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Scrolls to the given position. Performs bounds checking.
|
|
* @param {Number} position The position to scroll to. This is constrained.
|
|
* @param {Boolean} animate True to animate. If undefined, falls back to value of this.animateScroll
|
|
*/
|
|
scrollTo: function(position, animate) {
|
|
var me = this,
|
|
layout = me.layout,
|
|
names = layout.names,
|
|
oldPosition = me.getScrollPosition(),
|
|
newPosition = Ext.Number.constrain(position, 0, me.getMaxScrollPosition());
|
|
|
|
if (newPosition != oldPosition && !me.scrolling) {
|
|
me.scrollPosition = NaN;
|
|
if (animate === undefined) {
|
|
animate = me.animateScroll;
|
|
}
|
|
|
|
layout.innerCt[names.scrollTo](names.beforeScrollX, newPosition, animate ? me.getScrollAnim() : false);
|
|
if (animate) {
|
|
me.scrolling = true;
|
|
} else {
|
|
me.updateScrollButtons();
|
|
}
|
|
me.fireEvent('scroll', me, newPosition, animate ? me.getScrollAnim() : false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Scrolls to the given component.
|
|
* @param {String/Number/Ext.Component} item The item to scroll to. Can be a numerical index, component id
|
|
* or a reference to the component itself.
|
|
* @param {Boolean} animate True to animate the scrolling
|
|
*/
|
|
scrollToItem: function(item, animate) {
|
|
var me = this,
|
|
layout = me.layout,
|
|
owner = layout.owner,
|
|
names = layout.names,
|
|
visibility,
|
|
box,
|
|
newPos;
|
|
|
|
item = me.getItem(item);
|
|
if (item !== undefined) {
|
|
if (item == owner.items.first()) {
|
|
newPos = 0
|
|
} else if (item === owner.items.last()) {
|
|
newPos = me.getMaxScrollPosition();
|
|
} else {
|
|
visibility = me.getItemVisibility(item);
|
|
if (!visibility.fullyVisible) {
|
|
box = item.getBox(false, true);
|
|
newPos = box[names.x];
|
|
if (visibility.hiddenEnd) {
|
|
newPos -= (me.layout.innerCt[names.getWidth]() - box[names.width]);
|
|
}
|
|
}
|
|
}
|
|
if (newPos !== undefined) {
|
|
me.scrollTo(newPos, animate);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* For a given item in the container, return an object with information on whether the item is visible
|
|
* with the current innerCt scroll value.
|
|
* @param {Ext.Component} item The item
|
|
* @return {Object} Values for fullyVisible, hiddenStart and hiddenEnd
|
|
*/
|
|
getItemVisibility: function(item) {
|
|
var me = this,
|
|
box = me.getItem(item).getBox(true, true),
|
|
layout = me.layout,
|
|
names = layout.names,
|
|
itemStart = box[names.x],
|
|
itemEnd = itemStart + box[names.width],
|
|
scrollStart = me.getScrollPosition(),
|
|
scrollEnd = scrollStart + layout.innerCt[names.getWidth]();
|
|
|
|
return {
|
|
hiddenStart : itemStart < scrollStart,
|
|
hiddenEnd : itemEnd > scrollEnd,
|
|
fullyVisible: itemStart > scrollStart && itemEnd < scrollEnd
|
|
};
|
|
}
|
|
});
|
|
|
|
// @require Ext.CompositeElement
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.Offset', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
statics: {
|
|
fromObject: function(obj) {
|
|
return new this(obj.x, obj.y);
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function(x, y) {
|
|
this.x = (x != null && !isNaN(x)) ? x : 0;
|
|
this.y = (y != null && !isNaN(y)) ? y : 0;
|
|
|
|
return this;
|
|
},
|
|
|
|
copy: function() {
|
|
return new Ext.util.Offset(this.x, this.y);
|
|
},
|
|
|
|
copyFrom: function(p) {
|
|
this.x = p.x;
|
|
this.y = p.y;
|
|
},
|
|
|
|
toString: function() {
|
|
return "Offset[" + this.x + "," + this.y + "]";
|
|
},
|
|
|
|
equals: function(offset) {
|
|
|
|
return (this.x == offset.x && this.y == offset.y);
|
|
},
|
|
|
|
round: function(to) {
|
|
if (!isNaN(to)) {
|
|
var factor = Math.pow(10, to);
|
|
this.x = Math.round(this.x * factor) / factor;
|
|
this.y = Math.round(this.y * factor) / factor;
|
|
} else {
|
|
this.x = Math.round(this.x);
|
|
this.y = Math.round(this.y);
|
|
}
|
|
},
|
|
|
|
isZero: function() {
|
|
return this.x == 0 && this.y == 0;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
statics: {
|
|
/**
|
|
* @static
|
|
* Retrieves an Ext.util.Region for a particular element.
|
|
* @param {String/HTMLElement/Ext.Element} el An element ID, htmlElement or Ext.Element representing an element in the document.
|
|
* @returns {Ext.util.Region} region
|
|
*/
|
|
getRegion: function(el) {
|
|
return Ext.fly(el).getRegion();
|
|
},
|
|
|
|
/**
|
|
* @static
|
|
* Creates a Region from a "box" Object which contains four numeric properties `top`, `right`, `bottom` and `left`.
|
|
* @param {Object} o An object with `top`, `right`, `bottom` and `left` properties.
|
|
* @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);
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* 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;
|
|
me.y = me.top = me[1] = t;
|
|
me.right = r;
|
|
me.bottom = b;
|
|
me.x = me.left = me[0] = l;
|
|
},
|
|
|
|
/**
|
|
* Checks if this region completely contains the region that is passed in.
|
|
* @param {Ext.util.Region} region
|
|
* @return {Boolean}
|
|
*/
|
|
contains : function(region) {
|
|
var me = this;
|
|
return (region.x >= me.x &&
|
|
region.right <= me.right &&
|
|
region.y >= me.y &&
|
|
region.bottom <= me.bottom);
|
|
|
|
},
|
|
|
|
/**
|
|
* Checks if this region intersects the region passed in.
|
|
* @param {Ext.util.Region} region
|
|
* @return {Ext.util.Region/Boolean} Returns the intersected region or false if there is no intersection.
|
|
*/
|
|
intersect : function(region) {
|
|
var me = this,
|
|
t = Math.max(me.y, region.y),
|
|
r = Math.min(me.right, region.right),
|
|
b = Math.min(me.bottom, region.bottom),
|
|
l = Math.max(me.x, region.x);
|
|
|
|
if (b > t && r > l) {
|
|
return new this.self(t, r, b, l);
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the smallest region that contains the current AND targetRegion.
|
|
* @param {Ext.util.Region} region
|
|
* @return {Ext.util.Region} a new region
|
|
*/
|
|
union : function(region) {
|
|
var me = this,
|
|
t = Math.min(me.y, region.y),
|
|
r = Math.max(me.right, region.right),
|
|
b = Math.max(me.bottom, region.bottom),
|
|
l = Math.min(me.x, region.x);
|
|
|
|
return new this.self(t, r, b, l);
|
|
},
|
|
|
|
/**
|
|
* Modifies the current region to be constrained to the targetRegion.
|
|
* @param {Ext.util.Region} targetRegion
|
|
* @return {Ext.util.Region} this
|
|
*/
|
|
constrainTo : function(r) {
|
|
var me = this,
|
|
constrain = Ext.Number.constrain;
|
|
me.top = me.y = constrain(me.top, r.y, r.bottom);
|
|
me.bottom = constrain(me.bottom, r.y, r.bottom);
|
|
me.left = me.x = constrain(me.left, r.x, r.right);
|
|
me.right = constrain(me.right, r.x, r.right);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Modifies the current region to be adjusted by offsets.
|
|
* @param {Number} top top offset
|
|
* @param {Number} right right offset
|
|
* @param {Number} bottom bottom offset
|
|
* @param {Number} left left offset
|
|
* @return {Ext.util.Region} this
|
|
*/
|
|
adjust : function(t, r, b, l) {
|
|
var me = this;
|
|
me.top = me.y += t;
|
|
me.left = me.x += l;
|
|
me.right += r;
|
|
me.bottom += b;
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Get the offset amount of a point outside the region
|
|
* @param {String} [axis]
|
|
* @param {Ext.util.Point} [p] the point
|
|
* @return {Ext.util.Offset}
|
|
*/
|
|
getOutOfBoundOffset: function(axis, p) {
|
|
if (!Ext.isObject(axis)) {
|
|
if (axis == 'x') {
|
|
return this.getOutOfBoundOffsetX(p);
|
|
} else {
|
|
return this.getOutOfBoundOffsetY(p);
|
|
}
|
|
} else {
|
|
p = axis;
|
|
var d = new Ext.util.Offset();
|
|
d.x = this.getOutOfBoundOffsetX(p.x);
|
|
d.y = this.getOutOfBoundOffsetY(p.y);
|
|
return d;
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Get the offset amount on the x-axis
|
|
* @param {Number} p the offset
|
|
* @return {Number}
|
|
*/
|
|
getOutOfBoundOffsetX: function(p) {
|
|
if (p <= this.x) {
|
|
return this.x - p;
|
|
} else if (p >= this.right) {
|
|
return this.right - p;
|
|
}
|
|
|
|
return 0;
|
|
},
|
|
|
|
/**
|
|
* Get the offset amount on the y-axis
|
|
* @param {Number} p the offset
|
|
* @return {Number}
|
|
*/
|
|
getOutOfBoundOffsetY: function(p) {
|
|
if (p <= this.y) {
|
|
return this.y - p;
|
|
} else if (p >= this.bottom) {
|
|
return this.bottom - p;
|
|
}
|
|
|
|
return 0;
|
|
},
|
|
|
|
/**
|
|
* Check whether the point / offset is out of bound
|
|
* @param {String} [axis]
|
|
* @param {Ext.util.Point/Number} [p] the point / offset
|
|
* @return {Boolean}
|
|
*/
|
|
isOutOfBound: function(axis, p) {
|
|
if (!Ext.isObject(axis)) {
|
|
if (axis == 'x') {
|
|
return this.isOutOfBoundX(p);
|
|
} else {
|
|
return this.isOutOfBoundY(p);
|
|
}
|
|
} else {
|
|
p = axis;
|
|
return (this.isOutOfBoundX(p.x) || this.isOutOfBoundY(p.y));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Check whether the offset is out of bound in the x-axis
|
|
* @param {Number} p the offset
|
|
* @return {Boolean}
|
|
*/
|
|
isOutOfBoundX: function(p) {
|
|
return (p < this.x || p > this.right);
|
|
},
|
|
|
|
/**
|
|
* Check whether the offset is out of bound in the y-axis
|
|
* @param {Number} p the offset
|
|
* @return {Boolean}
|
|
*/
|
|
isOutOfBoundY: function(p) {
|
|
return (p < this.y || p > this.bottom);
|
|
},
|
|
|
|
/**
|
|
* Restrict a point within the region by a certain factor.
|
|
* @param {String} [axis]
|
|
* @param {Ext.util.Point/Ext.util.Offset/Object} [p]
|
|
* @param {Number} [factor]
|
|
* @return {Ext.util.Point/Ext.util.Offset/Object/Number}
|
|
* @private
|
|
*/
|
|
restrict: function(axis, p, factor) {
|
|
if (Ext.isObject(axis)) {
|
|
var newP;
|
|
|
|
factor = p;
|
|
p = axis;
|
|
|
|
if (p.copy) {
|
|
newP = p.copy();
|
|
}
|
|
else {
|
|
newP = {
|
|
x: p.x,
|
|
y: p.y
|
|
};
|
|
}
|
|
|
|
newP.x = this.restrictX(p.x, factor);
|
|
newP.y = this.restrictY(p.y, factor);
|
|
return newP;
|
|
} else {
|
|
if (axis == 'x') {
|
|
return this.restrictX(p, factor);
|
|
} else {
|
|
return this.restrictY(p, factor);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Restrict an offset within the region by a certain factor, on the x-axis
|
|
* @param {Number} p
|
|
* @param {Number} [factor=1] The factor.
|
|
* @return {Number}
|
|
* @private
|
|
*/
|
|
restrictX : function(p, factor) {
|
|
if (!factor) {
|
|
factor = 1;
|
|
}
|
|
|
|
if (p <= this.x) {
|
|
p -= (p - this.x) * factor;
|
|
}
|
|
else if (p >= this.right) {
|
|
p -= (p - this.right) * factor;
|
|
}
|
|
return p;
|
|
},
|
|
|
|
/**
|
|
* Restrict an offset within the region by a certain factor, on the y-axis
|
|
* @param {Number} p
|
|
* @param {Number} [factor] The factor, defaults to 1
|
|
* @return {Number}
|
|
* @private
|
|
*/
|
|
restrictY : function(p, factor) {
|
|
if (!factor) {
|
|
factor = 1;
|
|
}
|
|
|
|
if (p <= this.y) {
|
|
p -= (p - this.y) * factor;
|
|
}
|
|
else if (p >= this.bottom) {
|
|
p -= (p - this.bottom) * factor;
|
|
}
|
|
return p;
|
|
},
|
|
|
|
/**
|
|
* Get the width / height of this region
|
|
* @return {Object} an object with width and height properties
|
|
* @private
|
|
*/
|
|
getSize: function() {
|
|
return {
|
|
width: this.right - this.x,
|
|
height: this.bottom - this.y
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Create a copy of this Region.
|
|
* @return {Ext.util.Region}
|
|
*/
|
|
copy: function() {
|
|
return new this.self(this.y, this.right, this.bottom, this.x);
|
|
},
|
|
|
|
/**
|
|
* Copy the values of another Region to this Region
|
|
* @param {Ext.util.Region} p The region to copy from.
|
|
* @return {Ext.util.Region} This Region
|
|
*/
|
|
copyFrom: function(p) {
|
|
var me = this;
|
|
me.top = me.y = me[1] = p.y;
|
|
me.right = p.right;
|
|
me.bottom = p.bottom;
|
|
me.left = me.x = me[0] = p.x;
|
|
|
|
return this;
|
|
},
|
|
|
|
/*
|
|
* Dump this to an eye-friendly string, great for debugging
|
|
* @return {String}
|
|
*/
|
|
toString: function() {
|
|
return "Region[" + this.top + "," + this.right + "," + this.bottom + "," + this.left + "]";
|
|
},
|
|
|
|
/**
|
|
* Translate this region by the given offset amount
|
|
* @param {Ext.util.Offset/Object} x Object containing the `x` and `y` properties.
|
|
* Or the x value is using the two argument form.
|
|
* @param {Number} y The y value unless using an Offset object.
|
|
* @return {Ext.util.Region} this This Region
|
|
*/
|
|
translateBy: function(x, y) {
|
|
if (arguments.length == 1) {
|
|
y = x.y;
|
|
x = x.x;
|
|
}
|
|
var me = this;
|
|
me.top = me.y += y;
|
|
me.right += x;
|
|
me.bottom += y;
|
|
me.left = me.x += x;
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Round all the properties of this region
|
|
* @return {Ext.util.Region} this This Region
|
|
*/
|
|
round: function() {
|
|
var me = this;
|
|
me.top = me.y = Math.round(me.y);
|
|
me.right = Math.round(me.right);
|
|
me.bottom = Math.round(me.bottom);
|
|
me.left = me.x = Math.round(me.x);
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Check whether this region is equivalent to the given region
|
|
* @param {Ext.util.Region} region The region to compare with
|
|
* @return {Boolean}
|
|
*/
|
|
equals: function(region) {
|
|
return (this.top == region.top && this.right == region.right && this.bottom == region.bottom && this.left == region.left);
|
|
}
|
|
});
|
|
|
|
/*
|
|
* This is a derivative of the similarly named class in the YUI Library.
|
|
* The original license:
|
|
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
* Code licensed under the BSD License:
|
|
* http://developer.yahoo.net/yui/license.txt
|
|
*/
|
|
|
|
|
|
/**
|
|
* DragDropManager is a singleton that tracks the element interaction for
|
|
* all DragDrop items in the window. Generally, you will not call
|
|
* this class directly, but it does have helper methods that could
|
|
* be useful in your DragDrop implementations.
|
|
*/
|
|
Ext.define('Ext.dd.DragDropManager', {
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
// shorter ClassName, to save bytes and use internally
|
|
alternateClassName: ['Ext.dd.DragDropMgr', 'Ext.dd.DDM'],
|
|
|
|
/**
|
|
* @property {String[]} ids
|
|
* Two dimensional Array of registered DragDrop objects. The first
|
|
* dimension is the DragDrop item group, the second the DragDrop
|
|
* object.
|
|
* @private
|
|
*/
|
|
ids: {},
|
|
|
|
/**
|
|
* @property {String[]} handleIds
|
|
* Array of element ids defined as drag handles. Used to determine
|
|
* if the element that generated the mousedown event is actually the
|
|
* handle and not the html element itself.
|
|
* @private
|
|
*/
|
|
handleIds: {},
|
|
|
|
/**
|
|
* @property {Ext.dd.DragDrop} dragCurrent
|
|
* the DragDrop object that is currently being dragged
|
|
* @private
|
|
*/
|
|
dragCurrent: null,
|
|
|
|
/**
|
|
* @property {Ext.dd.DragDrop[]} dragOvers
|
|
* the DragDrop object(s) that are being hovered over
|
|
* @private
|
|
*/
|
|
dragOvers: {},
|
|
|
|
/**
|
|
* @property {Number} deltaX
|
|
* the X distance between the cursor and the object being dragged
|
|
* @private
|
|
*/
|
|
deltaX: 0,
|
|
|
|
/**
|
|
* @property {Number} deltaY
|
|
* the Y distance between the cursor and the object being dragged
|
|
* @private
|
|
*/
|
|
deltaY: 0,
|
|
|
|
/**
|
|
* @property {Boolean} preventDefault
|
|
* Flag to determine if we should prevent the default behavior of the
|
|
* events we define. By default this is true, but this can be set to
|
|
* false if you need the default behavior (not recommended)
|
|
*/
|
|
preventDefault: true,
|
|
|
|
/**
|
|
* @property {Boolean} stopPropagation
|
|
* Flag to determine if we should stop the propagation of the events
|
|
* we generate. This is true by default but you may want to set it to
|
|
* false if the html element contains other features that require the
|
|
* mouse click.
|
|
*/
|
|
stopPropagation: true,
|
|
|
|
/**
|
|
* Internal flag that is set to true when drag and drop has been
|
|
* intialized
|
|
* @property initialized
|
|
* @private
|
|
*/
|
|
initialized: false,
|
|
|
|
/**
|
|
* All drag and drop can be disabled.
|
|
* @property locked
|
|
* @private
|
|
*/
|
|
locked: false,
|
|
|
|
/**
|
|
* Called the first time an element is registered.
|
|
* @private
|
|
*/
|
|
init: function() {
|
|
this.initialized = true;
|
|
},
|
|
|
|
/**
|
|
* @property {Number} POINT
|
|
* In point mode, drag and drop interaction is defined by the
|
|
* location of the cursor during the drag/drop
|
|
*/
|
|
POINT: 0,
|
|
|
|
/**
|
|
* @property {Number} INTERSECT
|
|
* In intersect mode, drag and drop interaction is defined by the
|
|
* overlap of two or more drag and drop objects.
|
|
*/
|
|
INTERSECT: 1,
|
|
|
|
/**
|
|
* @property {Number} mode
|
|
* The current drag and drop mode. Default: POINT
|
|
*/
|
|
mode: 0,
|
|
|
|
/**
|
|
* @property {Boolean} [notifyOccluded=false]
|
|
* This config is only provided to provide old, usually unwanted drag/drop behaviour.
|
|
*
|
|
* From ExtJS 4.1.0 onwards, when drop targets are contained in floating, absolutely positioned elements
|
|
* such as in {@link Ext.window.Window Windows}, which may overlap each other, `over` and `drop` events
|
|
* are only delivered to the topmost drop target at the mouse position.
|
|
*
|
|
* If all targets below that in zIndex order should also receive notifications, set
|
|
* `notifyOccluded` to `true`.
|
|
*/
|
|
notifyOccluded: false,
|
|
|
|
/**
|
|
* @property {String} dragCls
|
|
* @readonly
|
|
* Class to add to the {@link Ext.dd.DragDrop#getDragEl dragged element} of a DragDrop instance.
|
|
*/
|
|
dragCls: Ext.baseCSSPrefix + 'dd-drag-current',
|
|
|
|
/**
|
|
* Runs method on all drag and drop objects
|
|
* @private
|
|
*/
|
|
_execOnAll: function(sMethod, args) {
|
|
var i, j, oDD;
|
|
for (i in this.ids) {
|
|
for (j in this.ids[i]) {
|
|
oDD = this.ids[i][j];
|
|
if (! this.isTypeOfDD(oDD)) {
|
|
continue;
|
|
}
|
|
oDD[sMethod].apply(oDD, args);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Drag and drop initialization. Sets up the global event handlers
|
|
* @private
|
|
*/
|
|
_onLoad: function() {
|
|
|
|
this.init();
|
|
|
|
var Event = Ext.EventManager;
|
|
Event.on(document, "mouseup", this.handleMouseUp, this, true);
|
|
Event.on(document, "mousemove", this.handleMouseMove, this, true);
|
|
Event.on(window, "unload", this._onUnload, this, true);
|
|
Event.on(window, "resize", this._onResize, this, true);
|
|
// Event.on(window, "mouseout", this._test);
|
|
|
|
},
|
|
|
|
/**
|
|
* Reset constraints on all drag and drop objs
|
|
* @private
|
|
*/
|
|
_onResize: function(e) {
|
|
this._execOnAll("resetConstraints", []);
|
|
},
|
|
|
|
/**
|
|
* Lock all drag and drop functionality
|
|
*/
|
|
lock: function() { this.locked = true; },
|
|
|
|
/**
|
|
* Unlock all drag and drop functionality
|
|
*/
|
|
unlock: function() { this.locked = false; },
|
|
|
|
/**
|
|
* Is drag and drop locked?
|
|
* @return {Boolean} True if drag and drop is locked, false otherwise.
|
|
*/
|
|
isLocked: function() { return this.locked; },
|
|
|
|
/**
|
|
* @property {Object} locationCache
|
|
* Location cache that is set for all drag drop objects when a drag is
|
|
* initiated, cleared when the drag is finished.
|
|
* @private
|
|
*/
|
|
locationCache: {},
|
|
|
|
/**
|
|
* @property {Boolean} useCache
|
|
* Set useCache to false if you want to force object the lookup of each
|
|
* drag and drop linked element constantly during a drag.
|
|
*/
|
|
useCache: true,
|
|
|
|
/**
|
|
* @property {Number} clickPixelThresh
|
|
* The number of pixels that the mouse needs to move after the
|
|
* mousedown before the drag is initiated. Default=3;
|
|
*/
|
|
clickPixelThresh: 3,
|
|
|
|
/**
|
|
* @property {Number} clickTimeThresh
|
|
* The number of milliseconds after the mousedown event to initiate the
|
|
* drag if we don't get a mouseup event. Default=350
|
|
*/
|
|
clickTimeThresh: 350,
|
|
|
|
/**
|
|
* @property {Boolean} dragThreshMet
|
|
* Flag that indicates that either the drag pixel threshold or the
|
|
* mousdown time threshold has been met
|
|
* @private
|
|
*/
|
|
dragThreshMet: false,
|
|
|
|
/**
|
|
* @property {Object} clickTimeout
|
|
* Timeout used for the click time threshold
|
|
* @private
|
|
*/
|
|
clickTimeout: null,
|
|
|
|
/**
|
|
* @property {Number} startX
|
|
* The X position of the mousedown event stored for later use when a
|
|
* drag threshold is met.
|
|
* @private
|
|
*/
|
|
startX: 0,
|
|
|
|
/**
|
|
* @property {Number} startY
|
|
* The Y position of the mousedown event stored for later use when a
|
|
* drag threshold is met.
|
|
* @private
|
|
*/
|
|
startY: 0,
|
|
|
|
/**
|
|
* Each DragDrop instance must be registered with the DragDropManager.
|
|
* This is executed in DragDrop.init()
|
|
* @param {Ext.dd.DragDrop} oDD the DragDrop object to register
|
|
* @param {String} sGroup the name of the group this element belongs to
|
|
*/
|
|
regDragDrop: function(oDD, sGroup) {
|
|
if (!this.initialized) { this.init(); }
|
|
|
|
if (!this.ids[sGroup]) {
|
|
this.ids[sGroup] = {};
|
|
}
|
|
this.ids[sGroup][oDD.id] = oDD;
|
|
},
|
|
|
|
/**
|
|
* Removes the supplied dd instance from the supplied group. Executed
|
|
* by DragDrop.removeFromGroup, so don't call this function directly.
|
|
* @private
|
|
*/
|
|
removeDDFromGroup: function(oDD, sGroup) {
|
|
if (!this.ids[sGroup]) {
|
|
this.ids[sGroup] = {};
|
|
}
|
|
|
|
var obj = this.ids[sGroup];
|
|
if (obj && obj[oDD.id]) {
|
|
delete obj[oDD.id];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unregisters a drag and drop item. This is executed in
|
|
* DragDrop.unreg, use that method instead of calling this directly.
|
|
* @private
|
|
*/
|
|
_remove: function(oDD) {
|
|
for (var g in oDD.groups) {
|
|
if (g && this.ids[g] && this.ids[g][oDD.id]) {
|
|
delete this.ids[g][oDD.id];
|
|
}
|
|
}
|
|
delete this.handleIds[oDD.id];
|
|
},
|
|
|
|
/**
|
|
* Each DragDrop handle element must be registered. This is done
|
|
* automatically when executing DragDrop.setHandleElId()
|
|
* @param {String} sDDId the DragDrop id this element is a handle for
|
|
* @param {String} sHandleId the id of the element that is the drag
|
|
* handle
|
|
*/
|
|
regHandle: function(sDDId, sHandleId) {
|
|
if (!this.handleIds[sDDId]) {
|
|
this.handleIds[sDDId] = {};
|
|
}
|
|
this.handleIds[sDDId][sHandleId] = sHandleId;
|
|
},
|
|
|
|
/**
|
|
* Utility function to determine if a given element has been
|
|
* registered as a drag drop item.
|
|
* @param {String} id the element id to check
|
|
* @return {Boolean} true if this element is a DragDrop item,
|
|
* false otherwise
|
|
*/
|
|
isDragDrop: function(id) {
|
|
return ( this.getDDById(id) ) ? true : false;
|
|
},
|
|
|
|
/**
|
|
* Returns the drag and drop instances that are in all groups the
|
|
* passed in instance belongs to.
|
|
* @param {Ext.dd.DragDrop} p_oDD the obj to get related data for
|
|
* @param {Boolean} bTargetsOnly if true, only return targetable objs
|
|
* @return {Ext.dd.DragDrop[]} the related instances
|
|
*/
|
|
getRelated: function(p_oDD, bTargetsOnly) {
|
|
var oDDs = [],
|
|
i, j, dd;
|
|
for (i in p_oDD.groups) {
|
|
for (j in this.ids[i]) {
|
|
dd = this.ids[i][j];
|
|
if (! this.isTypeOfDD(dd)) {
|
|
continue;
|
|
}
|
|
if (!bTargetsOnly || dd.isTarget) {
|
|
oDDs[oDDs.length] = dd;
|
|
}
|
|
}
|
|
}
|
|
|
|
return oDDs;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the specified dd target is a legal target for
|
|
* the specifice drag obj
|
|
* @param {Ext.dd.DragDrop} oDD the drag obj
|
|
* @param {Ext.dd.DragDrop} oTargetDD the target
|
|
* @return {Boolean} true if the target is a legal target for the
|
|
* dd obj
|
|
*/
|
|
isLegalTarget: function (oDD, oTargetDD) {
|
|
var targets = this.getRelated(oDD, true),
|
|
i, len;
|
|
for (i=0, len=targets.length;i<len;++i) {
|
|
if (targets[i].id == oTargetDD.id) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* My goal is to be able to transparently determine if an object is
|
|
* typeof DragDrop, and the exact subclass of DragDrop. typeof
|
|
* returns "object", oDD.constructor.toString() always returns
|
|
* "DragDrop" and not the name of the subclass. So for now it just
|
|
* evaluates a well-known variable in DragDrop.
|
|
* @param {Object} the object to evaluate
|
|
* @return {Boolean} true if typeof oDD = DragDrop
|
|
*/
|
|
isTypeOfDD: function (oDD) {
|
|
return (oDD && oDD.__ygDragDrop);
|
|
},
|
|
|
|
/**
|
|
* Utility function to determine if a given element has been
|
|
* registered as a drag drop handle for the given Drag Drop object.
|
|
* @param {String} id the element id to check
|
|
* @return {Boolean} true if this element is a DragDrop handle, false
|
|
* otherwise
|
|
*/
|
|
isHandle: function(sDDId, sHandleId) {
|
|
return ( this.handleIds[sDDId] &&
|
|
this.handleIds[sDDId][sHandleId] );
|
|
},
|
|
|
|
/**
|
|
* Returns the DragDrop instance for a given id
|
|
* @param {String} id the id of the DragDrop object
|
|
* @return {Ext.dd.DragDrop} the drag drop object, null if it is not found
|
|
*/
|
|
getDDById: function(id) {
|
|
var i, dd;
|
|
for (i in this.ids) {
|
|
dd = this.ids[i][id];
|
|
if (dd instanceof Ext.dd.DDTarget) {
|
|
return dd;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Fired after a registered DragDrop object gets the mousedown event.
|
|
* Sets up the events required to track the object being dragged
|
|
* @param {Event} e the event
|
|
* @param {Ext.dd.DragDrop} oDD the DragDrop object being dragged
|
|
* @private
|
|
*/
|
|
handleMouseDown: function(e, oDD) {
|
|
var me = this,
|
|
el;
|
|
|
|
if (Ext.quickTipsActive){
|
|
Ext.tip.QuickTipManager.ddDisable();
|
|
}
|
|
if (me.dragCurrent){
|
|
// the original browser mouseup wasn't handled (e.g. outside FF browser window)
|
|
// so clean up first to avoid breaking the next drag
|
|
me.handleMouseUp(e);
|
|
}
|
|
|
|
me.currentTarget = e.getTarget();
|
|
me.dragCurrent = oDD;
|
|
|
|
el = oDD.getEl();
|
|
|
|
// We use this to handle an issue where a mouseup will not be detected
|
|
// if the mouseup event happens outside of the browser window. When the
|
|
// mouse comes back, any drag will still be active
|
|
// http://msdn.microsoft.com/en-us/library/ms537630(VS.85).aspx
|
|
if (Ext.isIE9m && el.setCapture) {
|
|
el.setCapture();
|
|
}
|
|
|
|
// track start position
|
|
me.startX = e.getPageX();
|
|
me.startY = e.getPageY();
|
|
|
|
me.deltaX = me.startX - el.offsetLeft;
|
|
me.deltaY = me.startY - el.offsetTop;
|
|
|
|
me.dragThreshMet = false;
|
|
|
|
me.clickTimeout = setTimeout(
|
|
function() {
|
|
me.startDrag(me.startX, me.startY);
|
|
},
|
|
me.clickTimeThresh
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Fired when either the drag pixel threshold or the mousedown hold
|
|
* time threshold has been met.
|
|
* @param {Number} x the X position of the original mousedown
|
|
* @param {Number} y the Y position of the original mousedown
|
|
*/
|
|
startDrag: function(x, y) {
|
|
var me = this,
|
|
current = me.dragCurrent,
|
|
dragEl;
|
|
|
|
clearTimeout(me.clickTimeout);
|
|
if (current) {
|
|
current.b4StartDrag(x, y);
|
|
current.startDrag(x, y);
|
|
dragEl = current.getDragEl();
|
|
|
|
// Add current drag class to dragged element
|
|
if (dragEl) {
|
|
Ext.fly(dragEl).addCls(me.dragCls);
|
|
}
|
|
}
|
|
me.dragThreshMet = true;
|
|
},
|
|
|
|
/**
|
|
* Internal function to handle the mouseup event. Will be invoked
|
|
* from the context of the document.
|
|
* @param {Event} e the event
|
|
* @private
|
|
*/
|
|
handleMouseUp: function(e) {
|
|
var me = this;
|
|
|
|
if (Ext.quickTipsActive){
|
|
Ext.tip.QuickTipManager.ddEnable();
|
|
}
|
|
if (!me.dragCurrent) {
|
|
return;
|
|
}
|
|
|
|
// See setCapture call in handleMouseDown
|
|
if (Ext.isIE && document.releaseCapture) {
|
|
document.releaseCapture();
|
|
}
|
|
|
|
clearTimeout(me.clickTimeout);
|
|
|
|
if (me.dragThreshMet) {
|
|
me.fireEvents(e, true);
|
|
}
|
|
|
|
me.stopDrag(e);
|
|
|
|
me.stopEvent(e);
|
|
},
|
|
|
|
/**
|
|
* Utility to stop event propagation and event default, if these
|
|
* features are turned on.
|
|
* @param {Event} e the event as returned by this.getEvent()
|
|
*/
|
|
stopEvent: function(e) {
|
|
if (this.stopPropagation) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
if (this.preventDefault) {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Internal function to clean up event handlers after the drag
|
|
* operation is complete
|
|
* @param {Event} e the event
|
|
* @private
|
|
*/
|
|
stopDrag: function(e) {
|
|
var me = this,
|
|
current = me.dragCurrent,
|
|
dragEl;
|
|
|
|
// Fire the drag end event for the item that was dragged
|
|
if (current) {
|
|
if (me.dragThreshMet) {
|
|
|
|
// Remove current drag class from dragged element
|
|
dragEl = current.getDragEl();
|
|
if (dragEl) {
|
|
Ext.fly(dragEl).removeCls(me.dragCls);
|
|
}
|
|
|
|
current.b4EndDrag(e);
|
|
current.endDrag(e);
|
|
}
|
|
|
|
me.dragCurrent.onMouseUp(e);
|
|
}
|
|
|
|
me.dragCurrent = null;
|
|
me.dragOvers = {};
|
|
},
|
|
|
|
/**
|
|
* Internal function to handle the mousemove event. Will be invoked
|
|
* from the context of the html element.
|
|
*
|
|
* TODO: figure out what we can do about mouse events lost when the
|
|
* user drags objects beyond the window boundary. Currently we can
|
|
* detect this in internet explorer by verifying that the mouse is
|
|
* down during the mousemove event. Firefox doesn't give us the
|
|
* button state on the mousemove event.
|
|
*
|
|
* @param {Event} e the event
|
|
* @private
|
|
*/
|
|
handleMouseMove: function(e) {
|
|
var me = this,
|
|
current = me.dragCurrent,
|
|
diffX,
|
|
diffY;
|
|
|
|
if (!current) {
|
|
return true;
|
|
}
|
|
|
|
if (!me.dragThreshMet) {
|
|
diffX = Math.abs(me.startX - e.getPageX());
|
|
diffY = Math.abs(me.startY - e.getPageY());
|
|
if (diffX > me.clickPixelThresh || diffY > me.clickPixelThresh) {
|
|
me.startDrag(me.startX, me.startY);
|
|
}
|
|
}
|
|
|
|
if (me.dragThreshMet) {
|
|
current.b4Drag(e);
|
|
current.onDrag(e);
|
|
if (!current.moveOnly) {
|
|
me.fireEvents(e, false);
|
|
}
|
|
}
|
|
|
|
me.stopEvent(e);
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Iterates over all of the DragDrop elements to find ones we are
|
|
* hovering over or dropping on
|
|
* @param {Event} e the event
|
|
* @param {Boolean} isDrop is this a drop op or a mouseover op?
|
|
* @private
|
|
*/
|
|
fireEvents: function(e, isDrop) {
|
|
var me = this,
|
|
dragCurrent = me.dragCurrent,
|
|
dragEl,
|
|
oldDragElTop,
|
|
mousePoint = e.getPoint(),
|
|
overTarget,
|
|
overTargetEl,
|
|
allTargets = [],
|
|
oldOvers = [], // cache the previous dragOver array
|
|
outEvts = [],
|
|
overEvts = [],
|
|
dropEvts = [],
|
|
enterEvts = [],
|
|
xy,
|
|
needsSort,
|
|
i,
|
|
len,
|
|
sGroup;
|
|
|
|
// If the user did the mouse up outside of the window, we could
|
|
// get here even though we have ended the drag.
|
|
if (!dragCurrent || dragCurrent.isLocked()) {
|
|
return;
|
|
}
|
|
|
|
// If we need to use the current mousemove target to find the over el,
|
|
// but pointer-events is not supported, AND the delta position does not place the mouse outside of the dragEl,
|
|
// temporarily move the dragEl away, and fake the mousemove target by using document.elementFromPoint
|
|
// while it's out of the way.
|
|
// The pointer events implementation is bugged in IE9/10 and opera, so fallback even if they report that they support it.
|
|
// IE8m do not support it so they will auto fall back
|
|
if (!me.notifyOccluded && (!Ext.supports.PointerEvents || Ext.isIE10m || Ext.isOpera) && !(dragCurrent.deltaX < 0 || dragCurrent.deltaY < 0)) {
|
|
dragEl = dragCurrent.getDragEl();
|
|
oldDragElTop = dragEl.style.top;
|
|
dragEl.style.top = '-10000px';
|
|
xy = e.getXY();
|
|
e.target = document.elementFromPoint(xy[0], xy[1]);
|
|
dragEl.style.top = oldDragElTop;
|
|
}
|
|
|
|
// Check to see if the object(s) we were hovering over is no longer
|
|
// being hovered over so we can fire the onDragOut event
|
|
for (i in me.dragOvers) {
|
|
|
|
overTarget = me.dragOvers[i];
|
|
|
|
if (!me.isTypeOfDD(overTarget)) {
|
|
continue;
|
|
}
|
|
|
|
// If notifyOccluded set, we use mouse position
|
|
if (me.notifyOccluded) {
|
|
if (!this.isOverTarget(mousePoint, overTarget, me.mode)) {
|
|
outEvts.push(overTarget);
|
|
}
|
|
}
|
|
// Otherwise we use event source of the mousemove event
|
|
else {
|
|
if (!e.within(overTarget.getEl())) {
|
|
outEvts.push(overTarget);
|
|
}
|
|
}
|
|
|
|
oldOvers[i] = true;
|
|
delete me.dragOvers[i];
|
|
}
|
|
|
|
// Collect all targets which are members of the same ddGoups that the dragCurrent is a member of, and which may recieve mouseover and drop notifications.
|
|
// This is preparatory to seeing which one(s) we are currently over
|
|
// Begin by iterating through the ddGroups of which the dragCurrent is a member
|
|
for (sGroup in dragCurrent.groups) {
|
|
|
|
if ("string" != typeof sGroup) {
|
|
continue;
|
|
}
|
|
|
|
// Loop over the registered members of each group, testing each as a potential target
|
|
for (i in me.ids[sGroup]) {
|
|
overTarget = me.ids[sGroup][i];
|
|
|
|
// The target is valid if it is a DD type
|
|
// And it's got a DOM element
|
|
// And it's configured to be a drop target
|
|
// And it's not locked
|
|
// And the DOM element is fully visible with no hidden ancestors
|
|
// And it's either not the dragCurrent, or, if it is, tha dragCurrent is configured to not ignore itself.
|
|
if (me.isTypeOfDD(overTarget) &&
|
|
(overTargetEl = overTarget.getEl()) &&
|
|
(overTarget.isTarget) &&
|
|
(!overTarget.isLocked()) &&
|
|
(Ext.fly(overTargetEl).isVisible(true)) &&
|
|
((overTarget != dragCurrent) || (dragCurrent.ignoreSelf === false))) {
|
|
|
|
// If notifyOccluded set, we use mouse position
|
|
if (me.notifyOccluded) {
|
|
|
|
// Only sort by zIndex if there were some which had a floating zIndex value
|
|
if ((overTarget.zIndex = me.getZIndex(overTargetEl)) !== -1) {
|
|
needsSort = true;
|
|
}
|
|
allTargets.push(overTarget);
|
|
}
|
|
// Otherwise we use event source of the mousemove event
|
|
else {
|
|
if (e.within(overTarget.getEl())) {
|
|
allTargets.push(overTarget);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// If there were floating targets, sort the highest zIndex to the top
|
|
if (needsSort) {
|
|
Ext.Array.sort(allTargets, me.byZIndex);
|
|
}
|
|
|
|
// Loop through possible targets, notifying the one(s) we are over.
|
|
// Usually we only deliver events to the topmost.
|
|
for (i = 0, len = allTargets.length; i < len; i++) {
|
|
overTarget = allTargets[i];
|
|
|
|
// If we are over the overTarget, queue it up to recieve an event of whatever type we are handling
|
|
if (me.isOverTarget(mousePoint, overTarget, me.mode)) {
|
|
// look for drop interactions
|
|
if (isDrop) {
|
|
dropEvts.push( overTarget );
|
|
// look for drag enter and drag over interactions
|
|
} else {
|
|
|
|
// initial drag over: dragEnter fires
|
|
if (!oldOvers[overTarget.id]) {
|
|
enterEvts.push( overTarget );
|
|
// subsequent drag overs: dragOver fires
|
|
} else {
|
|
overEvts.push( overTarget );
|
|
}
|
|
me.dragOvers[overTarget.id] = overTarget;
|
|
}
|
|
|
|
// Unless this DragDropManager has been explicitly configured to deliver events to multiple targets, then we are done.
|
|
if (!me.notifyOccluded) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (me.mode) {
|
|
if (outEvts.length) {
|
|
dragCurrent.b4DragOut(e, outEvts);
|
|
dragCurrent.onDragOut(e, outEvts);
|
|
}
|
|
|
|
if (enterEvts.length) {
|
|
dragCurrent.onDragEnter(e, enterEvts);
|
|
}
|
|
|
|
if (overEvts.length) {
|
|
dragCurrent.b4DragOver(e, overEvts);
|
|
dragCurrent.onDragOver(e, overEvts);
|
|
}
|
|
|
|
if (dropEvts.length) {
|
|
dragCurrent.b4DragDrop(e, dropEvts);
|
|
dragCurrent.onDragDrop(e, dropEvts);
|
|
}
|
|
|
|
} else {
|
|
// fire dragout events
|
|
for (i=0, len=outEvts.length; i<len; ++i) {
|
|
dragCurrent.b4DragOut(e, outEvts[i].id);
|
|
dragCurrent.onDragOut(e, outEvts[i].id);
|
|
}
|
|
|
|
// fire enter events
|
|
for (i=0,len=enterEvts.length; i<len; ++i) {
|
|
// dc.b4DragEnter(e, oDD.id);
|
|
dragCurrent.onDragEnter(e, enterEvts[i].id);
|
|
}
|
|
|
|
// fire over events
|
|
for (i=0,len=overEvts.length; i<len; ++i) {
|
|
dragCurrent.b4DragOver(e, overEvts[i].id);
|
|
dragCurrent.onDragOver(e, overEvts[i].id);
|
|
}
|
|
|
|
// fire drop events
|
|
for (i=0, len=dropEvts.length; i<len; ++i) {
|
|
dragCurrent.b4DragDrop(e, dropEvts[i].id);
|
|
dragCurrent.onDragDrop(e, dropEvts[i].id);
|
|
}
|
|
|
|
}
|
|
|
|
// notify about a drop that did not find a target
|
|
if (isDrop && !dropEvts.length) {
|
|
dragCurrent.onInvalidDrop(e);
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Collects the z-index of the passed element, looking up the parentNode axis to find an absolutely positioned ancestor
|
|
* which is able to yield a z-index. If found to be not absolutely positionedm returns -1.
|
|
*
|
|
* This is used when sorting potential drop targets into z-index order so that only the topmost receives `over` and `drop` events.
|
|
*
|
|
* @return {Number} The z-index of the element, or of its topmost absolutely positioned ancestor. Returns -1 if the element is not
|
|
* absolutely positioned.
|
|
*/
|
|
getZIndex: function(element) {
|
|
var body = document.body,
|
|
z,
|
|
zIndex = -1;
|
|
|
|
element = Ext.getDom(element);
|
|
while (element !== body) {
|
|
if (!isNaN(z = Number(Ext.fly(element).getStyle('zIndex')))) {
|
|
zIndex = z;
|
|
}
|
|
element = element.parentNode;
|
|
}
|
|
return zIndex;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Utility method to pass to {@link Ext.Array#sort} when sorting potential drop targets by z-index.
|
|
*/
|
|
byZIndex: function(d1, d2) {
|
|
return d1.zIndex < d2.zIndex;
|
|
},
|
|
|
|
/**
|
|
* Helper function for getting the best match from the list of drag
|
|
* and drop objects returned by the drag and drop events when we are
|
|
* in INTERSECT mode. It returns either the first object that the
|
|
* cursor is over, or the object that has the greatest overlap with
|
|
* the dragged element.
|
|
* @param {Ext.dd.DragDrop[]} dds The array of drag and drop objects
|
|
* targeted
|
|
* @return {Ext.dd.DragDrop} The best single match
|
|
*/
|
|
getBestMatch: function(dds) {
|
|
var winner = null,
|
|
len = dds.length,
|
|
i, dd;
|
|
// Return null if the input is not what we expect
|
|
//if (!dds || !dds.length || dds.length == 0) {
|
|
// winner = null;
|
|
// If there is only one item, it wins
|
|
//} else if (dds.length == 1) {
|
|
|
|
|
|
if (len == 1) {
|
|
winner = dds[0];
|
|
} else {
|
|
// Loop through the targeted items
|
|
for (i=0; i<len; ++i) {
|
|
dd = dds[i];
|
|
// If the cursor is over the object, it wins. If the
|
|
// cursor is over multiple matches, the first one we come
|
|
// to wins.
|
|
if (dd.cursorIsOver) {
|
|
winner = dd;
|
|
break;
|
|
// Otherwise the object with the most overlap wins
|
|
} else {
|
|
if (!winner ||
|
|
winner.overlap.getArea() < dd.overlap.getArea()) {
|
|
winner = dd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return winner;
|
|
},
|
|
|
|
/**
|
|
* Refreshes the cache of the top-left and bottom-right points of the
|
|
* drag and drop objects in the specified group(s). This is in the
|
|
* format that is stored in the drag and drop instance, so typical
|
|
* usage is:
|
|
*
|
|
* Ext.dd.DragDropManager.refreshCache(ddinstance.groups);
|
|
*
|
|
* Alternatively:
|
|
*
|
|
* Ext.dd.DragDropManager.refreshCache({group1:true, group2:true});
|
|
*
|
|
* TODO: this really should be an indexed array. Alternatively this
|
|
* method could accept both.
|
|
*
|
|
* @param {Object} groups an associative array of groups to refresh
|
|
*/
|
|
refreshCache: function(groups) {
|
|
var sGroup, i, oDD, loc;
|
|
for (sGroup in groups) {
|
|
if ("string" != typeof sGroup) {
|
|
continue;
|
|
}
|
|
for (i in this.ids[sGroup]) {
|
|
oDD = this.ids[sGroup][i];
|
|
|
|
if (this.isTypeOfDD(oDD)) {
|
|
// if (this.isTypeOfDD(oDD) && oDD.isTarget) {
|
|
loc = this.getLocation(oDD);
|
|
if (loc) {
|
|
this.locationCache[oDD.id] = loc;
|
|
} else {
|
|
delete this.locationCache[oDD.id];
|
|
// this will unregister the drag and drop object if
|
|
// the element is not in a usable state
|
|
// oDD.unreg();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This checks to make sure an element exists and is in the DOM. The
|
|
* main purpose is to handle cases where innerHTML is used to remove
|
|
* drag and drop objects from the DOM. IE provides an 'unspecified
|
|
* error' when trying to access the offsetParent of such an element
|
|
* @param {HTMLElement} el the element to check
|
|
* @return {Boolean} true if the element looks usable
|
|
*/
|
|
verifyEl: function(el) {
|
|
if (el) {
|
|
var parent;
|
|
if(Ext.isIE){
|
|
try{
|
|
parent = el.offsetParent;
|
|
}catch(e){}
|
|
}else{
|
|
parent = el.offsetParent;
|
|
}
|
|
if (parent) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Returns a Region object containing the drag and drop element's position
|
|
* and size, including the padding configured for it
|
|
* @param {Ext.dd.DragDrop} oDD the drag and drop object to get the location for.
|
|
* @return {Ext.util.Region} a Region object representing the total area
|
|
* the element occupies, including any padding
|
|
* the instance is configured for.
|
|
*/
|
|
getLocation: function(oDD) {
|
|
if (! this.isTypeOfDD(oDD)) {
|
|
return null;
|
|
}
|
|
|
|
//delegate getLocation method to the
|
|
//drag and drop target.
|
|
if (oDD.getRegion) {
|
|
return oDD.getRegion();
|
|
}
|
|
|
|
var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
|
|
|
|
try {
|
|
pos= Ext.Element.getXY(el);
|
|
} catch (e) { }
|
|
|
|
if (!pos) {
|
|
return null;
|
|
}
|
|
|
|
x1 = pos[0];
|
|
x2 = x1 + el.offsetWidth;
|
|
y1 = pos[1];
|
|
y2 = y1 + el.offsetHeight;
|
|
|
|
t = y1 - oDD.padding[0];
|
|
r = x2 + oDD.padding[1];
|
|
b = y2 + oDD.padding[2];
|
|
l = x1 - oDD.padding[3];
|
|
|
|
return new Ext.util.Region(t, r, b, l);
|
|
},
|
|
|
|
/**
|
|
* Checks the cursor location to see if it over the target
|
|
* @param {Ext.util.Point} pt The point to evaluate
|
|
* @param {Ext.dd.DragDrop} oTarget the DragDrop object we are inspecting
|
|
* @return {Boolean} true if the mouse is over the target
|
|
* @private
|
|
*/
|
|
isOverTarget: function(pt, oTarget, intersect) {
|
|
// use cache if available
|
|
var loc = this.locationCache[oTarget.id],
|
|
dc,
|
|
pos,
|
|
el,
|
|
curRegion,
|
|
overlap;
|
|
|
|
if (!loc || !this.useCache) {
|
|
loc = this.getLocation(oTarget);
|
|
this.locationCache[oTarget.id] = loc;
|
|
}
|
|
|
|
if (!loc) {
|
|
return false;
|
|
}
|
|
|
|
oTarget.cursorIsOver = loc.contains( pt );
|
|
|
|
// DragDrop is using this as a sanity check for the initial mousedown
|
|
// in this case we are done. In POINT mode, if the drag obj has no
|
|
// contraints, we are also done. Otherwise we need to evaluate the
|
|
// location of the target as related to the actual location of the
|
|
// dragged element.
|
|
dc = this.dragCurrent;
|
|
if (!dc || !dc.getTargetCoord ||
|
|
(!intersect && !dc.constrainX && !dc.constrainY)) {
|
|
return oTarget.cursorIsOver;
|
|
}
|
|
|
|
oTarget.overlap = null;
|
|
|
|
// Get the current location of the drag element, this is the
|
|
// location of the mouse event less the delta that represents
|
|
// where the original mousedown happened on the element. We
|
|
// need to consider constraints and ticks as well.
|
|
pos = dc.getTargetCoord(pt.x, pt.y);
|
|
|
|
el = dc.getDragEl();
|
|
curRegion = new Ext.util.Region(pos.y,
|
|
pos.x + el.offsetWidth,
|
|
pos.y + el.offsetHeight,
|
|
pos.x
|
|
);
|
|
|
|
overlap = curRegion.intersect(loc);
|
|
|
|
if (overlap) {
|
|
oTarget.overlap = overlap;
|
|
return (intersect) ? true : oTarget.cursorIsOver;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* unload event handler
|
|
* @private
|
|
*/
|
|
_onUnload: function(e, me) {
|
|
Ext.dd.DragDropManager.unregAll();
|
|
},
|
|
|
|
/**
|
|
* Cleans up the drag and drop events and objects.
|
|
* @private
|
|
*/
|
|
unregAll: function() {
|
|
|
|
if (this.dragCurrent) {
|
|
this.stopDrag();
|
|
this.dragCurrent = null;
|
|
}
|
|
|
|
this._execOnAll("unreg", []);
|
|
|
|
for (var i in this.elementCache) {
|
|
delete this.elementCache[i];
|
|
}
|
|
|
|
this.elementCache = {};
|
|
this.ids = {};
|
|
},
|
|
|
|
/**
|
|
* @property {Object} elementCache
|
|
* A cache of DOM elements
|
|
* @private
|
|
*/
|
|
elementCache: {},
|
|
|
|
/**
|
|
* Get the wrapper for the DOM element specified
|
|
* @param {String} id the id of the element to get
|
|
* @return {Ext.dd.DragDropManager.ElementWrapper} the wrapped element
|
|
* @private
|
|
* @deprecated This wrapper isn't that useful
|
|
*/
|
|
getElWrapper: function(id) {
|
|
var oWrapper = this.elementCache[id];
|
|
if (!oWrapper || !oWrapper.el) {
|
|
oWrapper = this.elementCache[id] =
|
|
new this.ElementWrapper(Ext.getDom(id));
|
|
}
|
|
return oWrapper;
|
|
},
|
|
|
|
/**
|
|
* Returns the actual DOM element
|
|
* @param {String} id the id of the elment to get
|
|
* @return {Object} The element
|
|
* @deprecated use Ext.lib.Ext.getDom instead
|
|
*/
|
|
getElement: function(id) {
|
|
return Ext.getDom(id);
|
|
},
|
|
|
|
/**
|
|
* Returns the style property for the DOM element (i.e.,
|
|
* document.getElById(id).style)
|
|
* @param {String} id the id of the elment to get
|
|
* @return {Object} The style property of the element
|
|
*/
|
|
getCss: function(id) {
|
|
var el = Ext.getDom(id);
|
|
return (el) ? el.style : null;
|
|
},
|
|
|
|
/**
|
|
* @class Ext.dd.DragDropManager.ElementWrapper
|
|
* Deprecated inner class for cached elements.
|
|
* @private
|
|
* @deprecated This wrapper isn't that useful
|
|
*/
|
|
ElementWrapper: function(el) {
|
|
/** The element */
|
|
this.el = el || null;
|
|
/** The element id */
|
|
this.id = this.el && el.id;
|
|
/** A reference to the style property */
|
|
this.css = this.el && el.style;
|
|
},
|
|
|
|
// Continue class docs
|
|
/** @class Ext.dd.DragDropElement */
|
|
|
|
/**
|
|
* Returns the X position of an html element
|
|
* @param {HTMLElement} el the element for which to get the position
|
|
* @return {Number} the X coordinate
|
|
*/
|
|
getPosX: function(el) {
|
|
return Ext.Element.getX(el);
|
|
},
|
|
|
|
/**
|
|
* Returns the Y position of an html element
|
|
* @param {HTMLElement} el the element for which to get the position
|
|
* @return {Number} the Y coordinate
|
|
*/
|
|
getPosY: function(el) {
|
|
return Ext.Element.getY(el);
|
|
},
|
|
|
|
/**
|
|
* Swap two nodes. In IE, we use the native method, for others we
|
|
* emulate the IE behavior
|
|
* @param {HTMLElement} n1 the first node to swap
|
|
* @param {HTMLElement} n2 the other node to swap
|
|
*/
|
|
swapNode: function(n1, n2) {
|
|
if (n1.swapNode) {
|
|
n1.swapNode(n2);
|
|
} else {
|
|
var p = n2.parentNode,
|
|
s = n2.nextSibling;
|
|
|
|
if (s == n1) {
|
|
p.insertBefore(n1, n2);
|
|
} else if (n2 == n1.nextSibling) {
|
|
p.insertBefore(n2, n1);
|
|
} else {
|
|
n1.parentNode.replaceChild(n2, n1);
|
|
p.insertBefore(n1, s);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the current scroll position
|
|
* @private
|
|
*/
|
|
getScroll: function () {
|
|
var doc = window.document,
|
|
docEl = doc.documentElement,
|
|
body = doc.body,
|
|
top = 0,
|
|
left = 0;
|
|
|
|
if (Ext.isGecko4) {
|
|
top = window.scrollYOffset;
|
|
left = window.scrollXOffset;
|
|
} else {
|
|
if (docEl && (docEl.scrollTop || docEl.scrollLeft)) {
|
|
top = docEl.scrollTop;
|
|
left = docEl.scrollLeft;
|
|
} else if (body) {
|
|
top = body.scrollTop;
|
|
left = body.scrollLeft;
|
|
}
|
|
}
|
|
return {
|
|
top: top,
|
|
left: left
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Returns the specified element style property
|
|
* @param {HTMLElement} el the element
|
|
* @param {String} styleProp the style property
|
|
* @return {String} The value of the style property
|
|
*/
|
|
getStyle: function(el, styleProp) {
|
|
return Ext.fly(el).getStyle(styleProp);
|
|
},
|
|
|
|
/**
|
|
* Gets the scrollTop
|
|
* @return {Number} the document's scrollTop
|
|
*/
|
|
getScrollTop: function () {
|
|
return this.getScroll().top;
|
|
},
|
|
|
|
/**
|
|
* Gets the scrollLeft
|
|
* @return {Number} the document's scrollTop
|
|
*/
|
|
getScrollLeft: function () {
|
|
return this.getScroll().left;
|
|
},
|
|
|
|
/**
|
|
* Sets the x/y position of an element to the location of the
|
|
* target element.
|
|
* @param {HTMLElement} moveEl The element to move
|
|
* @param {HTMLElement} targetEl The position reference element
|
|
*/
|
|
moveToEl: function (moveEl, targetEl) {
|
|
var aCoord = Ext.Element.getXY(targetEl);
|
|
Ext.Element.setXY(moveEl, aCoord);
|
|
},
|
|
|
|
/**
|
|
* Numeric array sort function
|
|
* @param {Number} a
|
|
* @param {Number} b
|
|
* @returns {Number} positive, negative or 0
|
|
*/
|
|
numericSort: function(a, b) {
|
|
return (a - b);
|
|
},
|
|
|
|
/**
|
|
* @property {Number} _timeoutCount
|
|
* Internal counter
|
|
* @private
|
|
*/
|
|
_timeoutCount: 0,
|
|
|
|
/**
|
|
* Trying to make the load order less important. Without this we get
|
|
* an error if this file is loaded before the Event Utility.
|
|
* @private
|
|
*/
|
|
_addListeners: function() {
|
|
if ( document ) {
|
|
this._onLoad();
|
|
} else {
|
|
if (this._timeoutCount <= 2000) {
|
|
setTimeout(this._addListeners, 10);
|
|
if (document && document.body) {
|
|
this._timeoutCount += 1;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Recursively searches the immediate parent and all child nodes for
|
|
* the handle element in order to determine wheter or not it was
|
|
* clicked.
|
|
* @param {HTMLElement} node the html element to inspect
|
|
*/
|
|
handleWasClicked: function(node, id) {
|
|
if (this.isHandle(id, node.id)) {
|
|
return true;
|
|
} else {
|
|
// check to see if this is a text node child of the one we want
|
|
var p = node.parentNode;
|
|
|
|
while (p) {
|
|
if (this.isHandle(id, p.id)) {
|
|
return true;
|
|
} else {
|
|
p = p.parentNode;
|
|
}
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}, function() {
|
|
this._addListeners();
|
|
});
|
|
|
|
/**
|
|
* Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.
|
|
*/
|
|
Ext.define('Ext.layout.container.Box', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.box'],
|
|
extend: Ext.layout.container.Container ,
|
|
alternateClassName: 'Ext.layout.BoxLayout',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Object} defaultMargins
|
|
* If the individual contained items do not have a margins property specified or margin specified via CSS, the
|
|
* default margins from this property will be applied to each item.
|
|
*
|
|
* This property may be specified as an object containing margins to apply in the format:
|
|
*
|
|
* {
|
|
* top: (top margin),
|
|
* right: (right margin),
|
|
* bottom: (bottom margin),
|
|
* left: (left margin)
|
|
* }
|
|
*
|
|
* This property may also be specified as a string containing space-separated, numeric margin values. The order of
|
|
* the sides associated with each value matches the way CSS processes margin values:
|
|
*
|
|
* - If there is only one value, it applies to all sides.
|
|
* - If there are two values, the top and bottom borders are set to the first value and the right and left are
|
|
* set to the second.
|
|
* - If there are three values, the top is set to the first value, the left and right are set to the second,
|
|
* and the bottom is set to the third.
|
|
* - If there are four values, they apply to the top, right, bottom, and left, respectively.
|
|
*/
|
|
defaultMargins: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} padding
|
|
* Sets the padding to be applied to all child items managed by this layout.
|
|
*
|
|
* This property must be specified as a string containing space-separated, numeric padding values. The order of the
|
|
* sides associated with each value matches the way CSS processes padding values:
|
|
*
|
|
* - If there is only one value, it applies to all sides.
|
|
* - If there are two values, the top and bottom borders are set to the first value and the right and left are
|
|
* set to the second.
|
|
* - If there are three values, the top is set to the first value, the left and right are set to the second,
|
|
* and the bottom is set to the third.
|
|
* - If there are four values, they apply to the top, right, bottom, and left, respectively.
|
|
*/
|
|
padding: 0,
|
|
|
|
/**
|
|
* @cfg {String} pack
|
|
* Controls how the child items of the container are packed together. Acceptable configuration values for this
|
|
* property are:
|
|
*
|
|
* - **start** - child items are packed together at **left** (HBox) or **top** (VBox) side of container (*default**)
|
|
* - **center** - child items are packed together at **mid-width** (HBox) or **mid-height** (VBox) of container
|
|
* - **end** - child items are packed together at **right** (HBox) or **bottom** (VBox) side of container
|
|
*/
|
|
pack: 'start',
|
|
|
|
/**
|
|
* @cfg {Number} flex
|
|
* This configuration option is to be applied to **child items** of the container managed by this layout. Each child
|
|
* item with a flex property will be flexed (horizontally in `hbox`, vertically in `vbox`) according to each item's
|
|
* **relative** flex value compared to the sum of all items with a flex value specified. Any child items that have
|
|
* either a `flex = 0` or `flex = undefined` will not be 'flexed' (the initial size will not be changed).
|
|
*/
|
|
flex: undefined,
|
|
|
|
/**
|
|
* @cfg {String/Ext.Component} stretchMaxPartner
|
|
* Allows stretchMax calculation to take into account the max perpendicular size (height for HBox layout and width
|
|
* for VBox layout) of another Box layout when calculating its maximum perpendicular child size.
|
|
*
|
|
* If specified as a string, this may be either a known Container ID, or a ComponentQuery selector which is rooted
|
|
* at this layout's Container (ie, to find a sibling, use `"^>#siblingItemId`).
|
|
*/
|
|
stretchMaxPartner: undefined,
|
|
|
|
alignRoundingMethod: 'round',
|
|
|
|
type: 'box',
|
|
scrollOffset: 0,
|
|
itemCls: Ext.baseCSSPrefix + 'box-item',
|
|
targetCls: Ext.baseCSSPrefix + 'box-layout-ct',
|
|
targetElCls: Ext.baseCSSPrefix + 'box-target',
|
|
innerCls: Ext.baseCSSPrefix + 'box-inner',
|
|
|
|
// availableSpaceOffset is used to adjust the availableWidth, typically used
|
|
// to reserve space for a scrollbar
|
|
availableSpaceOffset: 0,
|
|
|
|
// whether or not to reserve the availableSpaceOffset in layout calculations
|
|
reserveOffset: true,
|
|
|
|
manageMargins: true,
|
|
|
|
createsInnerCt: true,
|
|
|
|
childEls: [
|
|
'innerCt',
|
|
'targetEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'{%var oc,l=values.$comp.layout,oh=l.overflowHandler;',
|
|
'if (oh.getPrefixConfig!==Ext.emptyFn) {',
|
|
'if(oc=oh.getPrefixConfig())dh.generateMarkup(oc, out)',
|
|
'}%}',
|
|
'<div id="{ownerId}-innerCt" class="{[l.innerCls]} {[oh.getOverflowCls()]}" role="presentation">',
|
|
'<div id="{ownerId}-targetEl" class="{targetElCls}">',
|
|
'{%this.renderBody(out, values)%}',
|
|
'</div>',
|
|
'</div>',
|
|
'{%if (oh.getSuffixConfig!==Ext.emptyFn) {',
|
|
'if(oc=oh.getSuffixConfig())dh.generateMarkup(oc, out)',
|
|
'}%}',
|
|
{
|
|
disableFormats: true,
|
|
definitions: 'var dh=Ext.DomHelper;'
|
|
}
|
|
],
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
type;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// The sort function needs access to properties in this, so must be bound.
|
|
me.flexSortFn = Ext.Function.bind(me.flexSort, me);
|
|
|
|
me.initOverflowHandler();
|
|
|
|
type = typeof me.padding;
|
|
if (type == 'string' || type == 'number') {
|
|
me.padding = Ext.util.Format.parseBox(me.padding);
|
|
me.padding.height = me.padding.top + me.padding.bottom;
|
|
me.padding.width = me.padding.left + me.padding.right;
|
|
}
|
|
},
|
|
|
|
// Matches: `<spaces>digits[.digits]<spaces>%<spaces>`
|
|
// Captures: `digits[.digits]`
|
|
_percentageRe: /^\s*(\d+(?:\.\d*)?)\s*[%]\s*$/,
|
|
|
|
getItemSizePolicy: function (item, ownerSizeModel) {
|
|
var me = this,
|
|
policy = me.sizePolicy,
|
|
align = me.align,
|
|
flex = item.flex,
|
|
key = align,
|
|
names = me.names,
|
|
width = item[names.width],
|
|
height = item[names.height],
|
|
percentageRe = me._percentageRe,
|
|
percentageWidth = percentageRe.test(width),
|
|
isStretch = (align == 'stretch'),
|
|
isStretchMax = (align == 'stretchmax'),
|
|
constrain = me.constrainAlign;
|
|
|
|
// Getting the size model is expensive, so we only want to do so if we really need it
|
|
if (!ownerSizeModel && (isStretch || flex || percentageWidth || (constrain && !isStretchMax))) {
|
|
ownerSizeModel = me.owner.getSizeModel();
|
|
}
|
|
|
|
if (isStretch) {
|
|
// If we are height.shrinkWrap, we behave as if we were stretchmax (for more
|
|
// details, see beginLayoutCycle)...
|
|
if (!percentageRe.test(height) && ownerSizeModel[names.height].shrinkWrap) {
|
|
key = 'stretchmax';
|
|
// We leave %age height as stretch since it will not participate in the
|
|
// stretchmax size calculation. This avoid running such a child in its
|
|
// shrinkWrap mode prior to supplying the calculated size.
|
|
}
|
|
} else if (!isStretchMax) {
|
|
if (percentageRe.test(height)) {
|
|
// Height %ages are calculated based on container size, so they are the
|
|
// same as align=stretch for this purpose...
|
|
key = 'stretch';
|
|
} else if (constrain && !ownerSizeModel[names.height].shrinkWrap) {
|
|
// Same functionality as stretchmax, only the max is going to be the size
|
|
// of the container, not the largest item
|
|
key = 'stretchmax';
|
|
} else {
|
|
key = '';
|
|
}
|
|
}
|
|
|
|
if (flex || percentageWidth) {
|
|
// If we are width.shrinkWrap, we won't be flexing since that requires a
|
|
// container width...
|
|
if (!ownerSizeModel[names.width].shrinkWrap) {
|
|
policy = policy.flex; // both flex and %age width are calculated
|
|
}
|
|
}
|
|
|
|
return policy[key];
|
|
},
|
|
|
|
flexSort: function (a, b) {
|
|
// We need to sort the flexed items to ensure that we have
|
|
// the items with max/min width first since when we set the
|
|
// values we may have the value constrained, so we need to
|
|
// react accordingly. Precedence is given from the largest
|
|
// value through to the smallest value
|
|
var maxWidthName = this.names.maxWidth,
|
|
minWidthName = this.names.minWidth,
|
|
infiniteValue = Infinity,
|
|
aTarget = a.target,
|
|
bTarget = b.target,
|
|
result = 0,
|
|
aMin, bMin, aMax, bMax,
|
|
hasMin, hasMax;
|
|
|
|
aMax = aTarget[maxWidthName] || infiniteValue;
|
|
bMax = bTarget[maxWidthName] || infiniteValue;
|
|
aMin = aTarget[minWidthName] || 0;
|
|
bMin = bTarget[minWidthName] || 0;
|
|
|
|
hasMin = isFinite(aMin) || isFinite(bMin);
|
|
hasMax = isFinite(aMax) || isFinite(bMax);
|
|
|
|
if (hasMin || hasMax) {
|
|
if (hasMax) {
|
|
result = aMax - bMax;
|
|
}
|
|
|
|
// If the result is 0, it means either
|
|
// a) hasMax was false
|
|
// b) The max values were the same
|
|
if (result === 0 && hasMin) {
|
|
result = bMin - aMin;
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
isItemBoxParent: function (itemContext) {
|
|
return true;
|
|
},
|
|
|
|
isItemShrinkWrap: function (item) {
|
|
return true;
|
|
},
|
|
|
|
roundFlex: function(width) {
|
|
return Math.ceil(width);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called by an owning Panel before the Panel begins its collapse process.
|
|
* Most layouts will not need to override the default Ext.emptyFn implementation.
|
|
*/
|
|
beginCollapse: function(child) {
|
|
var me = this;
|
|
|
|
if (me.direction === 'vertical' && child.collapsedVertical()) {
|
|
child.collapseMemento.capture(['flex']);
|
|
delete child.flex;
|
|
} else if (me.direction === 'horizontal' && child.collapsedHorizontal()) {
|
|
child.collapseMemento.capture(['flex']);
|
|
delete child.flex;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called by an owning Panel before the Panel begins its expand process.
|
|
* Most layouts will not need to override the default Ext.emptyFn implementation.
|
|
*/
|
|
beginExpand: function(child) {
|
|
|
|
// Restores the flex if we used to be flexed before
|
|
child.collapseMemento.restore(['flex']);
|
|
},
|
|
|
|
beginLayout: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
smp = owner.stretchMaxPartner,
|
|
style = me.innerCt.dom.style,
|
|
names = me.names;
|
|
|
|
ownerContext.boxNames = names;
|
|
|
|
// this must happen before callParent to allow the overflow handler to do its work
|
|
// that can effect the childItems collection...
|
|
me.overflowHandler.beginLayout(ownerContext);
|
|
|
|
// get the contextItem for our stretchMax buddy:
|
|
if (typeof smp === 'string') {
|
|
smp = Ext.getCmp(smp) || owner.query(smp)[0];
|
|
}
|
|
|
|
ownerContext.stretchMaxPartner = smp && ownerContext.context.getCmp(smp);
|
|
|
|
me.callParent(arguments);
|
|
|
|
ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);
|
|
|
|
// Capture whether the owning Container is scrolling in the parallel direction
|
|
me.scrollParallel = owner.scrollFlags[names.x];
|
|
|
|
// Capture whether the owning Container is scrolling in the perpendicular direction
|
|
me.scrollPerpendicular = owner.scrollFlags[names.y];
|
|
|
|
// If we *are* scrolling parallel, capture the scroll position of the encapsulating element
|
|
if (me.scrollParallel) {
|
|
me.scrollPos = owner.getTargetEl().dom[names.scrollLeft];
|
|
}
|
|
|
|
// Don't allow sizes burned on to the innerCt to influence measurements.
|
|
style.width = '';
|
|
style.height = '';
|
|
},
|
|
|
|
beginLayoutCycle: function (ownerContext, firstCycle) {
|
|
var me = this,
|
|
align = me.align,
|
|
names = ownerContext.boxNames,
|
|
pack = me.pack,
|
|
heightModelName = names.heightModel;
|
|
|
|
// this must happen before callParent to allow the overflow handler to do its work
|
|
// that can effect the childItems collection...
|
|
me.overflowHandler.beginLayoutCycle(ownerContext, firstCycle);
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Cache several of our string concat/compare results (since width/heightModel can
|
|
// change if we are invalidated, we cannot do this in beginLayout)
|
|
|
|
ownerContext.parallelSizeModel = ownerContext[names.widthModel];
|
|
ownerContext.perpendicularSizeModel = ownerContext[heightModelName];
|
|
|
|
ownerContext.boxOptions = {
|
|
align: align = {
|
|
stretch: align == 'stretch',
|
|
stretchmax: align == 'stretchmax',
|
|
center: align == names.center,
|
|
bottom: align == names.afterY
|
|
},
|
|
pack: pack = {
|
|
center: pack == 'center',
|
|
end: pack == 'end'
|
|
}
|
|
};
|
|
|
|
// Consider an hbox w/stretch which means "assign all items the container's height".
|
|
// The spirit of this request is make all items the same height, but when shrinkWrap
|
|
// height is also requested, the height of the tallest item determines the height.
|
|
// This is exactly what the stretchmax option does, so we jiggle the flags here to
|
|
// act as if stretchmax were requested.
|
|
|
|
if (align.stretch && ownerContext.perpendicularSizeModel.shrinkWrap) {
|
|
align.stretchmax = true;
|
|
align.stretch = false;
|
|
}
|
|
|
|
// This is handy for knowing that we might need to apply height %ages
|
|
align.nostretch = !(align.stretch || align.stretchmax);
|
|
|
|
// In our example hbox, packing items to the right (end) or center can only work if
|
|
// there is a container width. So, if we are shrinkWrap, we just turn off the pack
|
|
// options for the run.
|
|
|
|
if (ownerContext.parallelSizeModel.shrinkWrap) {
|
|
pack.center = pack.end = false;
|
|
}
|
|
|
|
me.cacheFlexes(ownerContext);
|
|
|
|
// We set the width of the target el equal to the width of the innerCt
|
|
// when the layout cycle is finished, so we need to clear the width here
|
|
// to prevent the children from being crushed.
|
|
// IE needs it because of its scrollIntoView bug: https://sencha.jira.com/browse/EXTJSIV-6520
|
|
// Webkit needs it because of its mouse drag bug: https://sencha.jira.com/browse/EXTJSIV-5962
|
|
// FF needs it because of a vertical tab bug: https://sencha.jira.com/browse/EXTJSIV-8614
|
|
me.targetEl.setWidth(20000);
|
|
},
|
|
|
|
/**
|
|
* This method is called to (re)cache our understanding of flexes. This happens during beginLayout and may need to
|
|
* be called again if the flexes are changed during the layout (e.g., like ColumnLayout).
|
|
* @param {Object} ownerContext
|
|
* @protected
|
|
*/
|
|
cacheFlexes: function (ownerContext) {
|
|
var me = this,
|
|
names = ownerContext.boxNames,
|
|
widthModelName = names.widthModel,
|
|
heightModelName = names.heightModel,
|
|
nostretch = ownerContext.boxOptions.align.nostretch,
|
|
totalFlex = 0,
|
|
childItems = ownerContext.childItems,
|
|
i = childItems.length,
|
|
flexedItems = [],
|
|
minWidth = 0,
|
|
minWidthName = names.minWidth,
|
|
percentageRe = me._percentageRe,
|
|
percentageWidths = 0,
|
|
percentageHeights = 0,
|
|
child, childContext, flex, match;
|
|
|
|
while (i--) {
|
|
childContext = childItems[i];
|
|
child = childContext.target;
|
|
|
|
// check widthModel to see if we are the sizing layout. If so, copy the flex
|
|
// from the item to the contextItem and add it to totalFlex
|
|
//
|
|
if (childContext[widthModelName].calculated) {
|
|
childContext.flex = flex = child.flex;
|
|
if (flex) {
|
|
totalFlex += flex;
|
|
flexedItems.push(childContext);
|
|
minWidth += child[minWidthName] || 0;
|
|
} else { // a %age width...
|
|
match = percentageRe.exec(child[names.width]);
|
|
childContext.percentageParallel = parseFloat(match[1]) / 100;
|
|
++percentageWidths;
|
|
}
|
|
}
|
|
// the above means that "childContext.flex" is properly truthy/falsy, which is
|
|
// often times quite convenient...
|
|
|
|
if (nostretch && childContext[heightModelName].calculated) {
|
|
// the only reason we would be calculated height in this case is due to a
|
|
// height %age...
|
|
match = percentageRe.exec(child[names.height]);
|
|
childContext.percentagePerpendicular = parseFloat(match[1]) / 100;
|
|
++percentageHeights;
|
|
}
|
|
}
|
|
|
|
ownerContext.flexedItems = flexedItems;
|
|
ownerContext.flexedMinSize = minWidth;
|
|
ownerContext.totalFlex = totalFlex;
|
|
ownerContext.percentageWidths = percentageWidths;
|
|
ownerContext.percentageHeights = percentageHeights;
|
|
|
|
// The flexed boxes need to be sorted in ascending order of maxSize to work properly
|
|
// so that unallocated space caused by maxWidth being less than flexed width can be
|
|
// reallocated to subsequent flexed boxes.
|
|
Ext.Array.sort(flexedItems, me.flexSortFn);
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
targetSize = me.getContainerSize(ownerContext),
|
|
names = ownerContext.boxNames,
|
|
state = ownerContext.state,
|
|
plan = state.boxPlan || (state.boxPlan = {}),
|
|
targetContext = ownerContext.targetContext;
|
|
|
|
plan.targetSize = targetSize;
|
|
|
|
// If we are not widthModel.shrinkWrap, we need the width before we can lay out boxes:
|
|
if (!ownerContext.parallelSizeModel.shrinkWrap && !targetSize[names.gotWidth]) {
|
|
me.done = false;
|
|
return;
|
|
}
|
|
|
|
if (!state.parallelDone) {
|
|
state.parallelDone = me.calculateParallel(ownerContext, names, plan);
|
|
}
|
|
|
|
if (!state.perpendicularDone) {
|
|
state.perpendicularDone = me.calculatePerpendicular(ownerContext, names, plan);
|
|
}
|
|
|
|
if (state.parallelDone && state.perpendicularDone) {
|
|
// Fix for left and right docked Components in a dock component layout. This is for docked Headers and docked Toolbars.
|
|
// Older Microsoft browsers do not size a position:absolute element's width to match its content.
|
|
// So in this case, in the publishInnerCtSize method we may need to adjust the size of the owning Container's element explicitly based upon
|
|
// the discovered max width. So here we put a calculatedWidth property in the metadata to facilitate this.
|
|
if (me.owner.dock && (Ext.isIE7m || Ext.isIEQuirks) && !me.owner.width && !me.horizontal) {
|
|
plan.isIEVerticalDock = true;
|
|
plan.calculatedWidth = plan.maxSize + ownerContext.getPaddingInfo().width + ownerContext.getFrameInfo().width;
|
|
if (targetContext !== ownerContext) {
|
|
// targetContext can have additional padding, e.g. vertically
|
|
// oriented toolbar body element has a few px of left or right padding
|
|
// to make room for the tab strip.
|
|
plan.calculatedWidth += targetContext.getPaddingInfo().width;
|
|
}
|
|
}
|
|
|
|
me.publishInnerCtSize(ownerContext, me.reserveOffset ? me.availableSpaceOffset : 0);
|
|
|
|
// Calculate stretchmax only if there is >1 child item, or there is a stretchMaxPartner wanting the info
|
|
if (me.done && (ownerContext.childItems.length > 1 || ownerContext.stretchMaxPartner) && ownerContext.boxOptions.align.stretchmax && !state.stretchMaxDone) {
|
|
me.calculateStretchMax(ownerContext, names, plan);
|
|
state.stretchMaxDone = true;
|
|
}
|
|
me.overflowHandler.calculate(ownerContext);
|
|
} else {
|
|
me.done = false;
|
|
}
|
|
},
|
|
|
|
calculateParallel: function(ownerContext, names, plan) {
|
|
var me = this,
|
|
widthName = names.width,
|
|
childItems = ownerContext.childItems,
|
|
beforeXName = names.beforeX,
|
|
afterXName = names.afterX,
|
|
setWidthName = names.setWidth,
|
|
childItemsLength = childItems.length,
|
|
flexedItems = ownerContext.flexedItems,
|
|
flexedItemsLength = flexedItems.length,
|
|
pack = ownerContext.boxOptions.pack,
|
|
padding = me.padding,
|
|
containerWidth = plan.targetSize[widthName],
|
|
totalMargin = 0,
|
|
left = padding[beforeXName],
|
|
nonFlexWidth = left + padding[afterXName] + me.scrollOffset +
|
|
(me.reserveOffset ? me.availableSpaceOffset : 0),
|
|
scrollbarWidth = Ext.getScrollbarSize()[names.width],
|
|
i, childMargins, remainingWidth, remainingFlex, childContext, flex, flexedWidth,
|
|
contentWidth, mayNeedScrollbarAdjust, childWidth, percentageSpace;
|
|
|
|
// We may need to add scrollbar size to parallel size if
|
|
// Scrollbars take up space
|
|
// and we are scrolling in the perpendicular direction
|
|
// and shrinkWrapping in the parallel direction,
|
|
// and NOT stretching perpendicular dimensions to fit
|
|
// and NOT shrinkWrapping in the perpendicular direction
|
|
if (scrollbarWidth &&
|
|
me.scrollPerpendicular &&
|
|
ownerContext.parallelSizeModel.shrinkWrap &&
|
|
!ownerContext.boxOptions.align.stretch &&
|
|
!ownerContext.perpendicularSizeModel.shrinkWrap) {
|
|
|
|
// If its possible that we may need to add scrollbar size to the parallel size
|
|
// then we need to wait until the perpendicular size has been determined,
|
|
// so that we know if there is a scrollbar.
|
|
if (!ownerContext.state.perpendicularDone) {
|
|
return false;
|
|
}
|
|
mayNeedScrollbarAdjust = true;
|
|
}
|
|
|
|
// Gather the total size taken up by non-flexed items:
|
|
for (i = 0; i < childItemsLength; ++i) {
|
|
childContext = childItems[i];
|
|
childMargins = childContext.marginInfo || childContext.getMarginInfo();
|
|
|
|
totalMargin += childMargins[widthName];
|
|
|
|
if (!childContext[names.widthModel].calculated) {
|
|
childWidth = childContext.getProp(widthName);
|
|
nonFlexWidth += childWidth; // min/maxWidth safe
|
|
if (isNaN(nonFlexWidth)) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
nonFlexWidth += totalMargin;
|
|
if (ownerContext.percentageWidths) {
|
|
percentageSpace = containerWidth - totalMargin;
|
|
if (isNaN(percentageSpace)) {
|
|
return false;
|
|
}
|
|
|
|
for (i = 0; i < childItemsLength; ++i) {
|
|
childContext = childItems[i];
|
|
if (childContext.percentageParallel) {
|
|
childWidth = Math.ceil(percentageSpace * childContext.percentageParallel);
|
|
childWidth = childContext.setWidth(childWidth);
|
|
nonFlexWidth += childWidth;
|
|
}
|
|
}
|
|
}
|
|
|
|
// if we get here, we have all the childWidths for non-flexed items...
|
|
|
|
if (ownerContext.parallelSizeModel.shrinkWrap) {
|
|
plan.availableSpace = 0;
|
|
plan.tooNarrow = false;
|
|
} else {
|
|
plan.availableSpace = containerWidth - nonFlexWidth;
|
|
|
|
// If we're going to need space for a parallel scrollbar, then we need to redo the perpendicular measurements
|
|
plan.tooNarrow = plan.availableSpace < ownerContext.flexedMinSize;
|
|
if (plan.tooNarrow && Ext.getScrollbarSize()[names.height] && me.scrollParallel && ownerContext.state.perpendicularDone) {
|
|
ownerContext.state.perpendicularDone = false;
|
|
for (i = 0; i < childItemsLength; ++i) {
|
|
childItems[i].invalidate();
|
|
}
|
|
}
|
|
}
|
|
|
|
contentWidth = nonFlexWidth;
|
|
remainingWidth = plan.availableSpace;
|
|
remainingFlex = ownerContext.totalFlex;
|
|
|
|
// Calculate flexed item sizes:
|
|
for (i = 0; i < flexedItemsLength; i++) {
|
|
childContext = flexedItems[i];
|
|
flex = childContext.flex;
|
|
flexedWidth = me.roundFlex((flex / remainingFlex) * remainingWidth);
|
|
flexedWidth = childContext[setWidthName](flexedWidth); // constrained
|
|
|
|
// due to minWidth constraints, it may be that flexedWidth > remainingWidth
|
|
|
|
contentWidth += flexedWidth;
|
|
// Remaining space has already had margins subtracted, so just subtract size
|
|
remainingWidth = Math.max(0, remainingWidth - flexedWidth); // no negatives!
|
|
remainingFlex -= flex;
|
|
}
|
|
|
|
if (pack.center) {
|
|
left += remainingWidth / 2;
|
|
|
|
// If content is too wide to pack to center, do not allow the centering calculation to place it off the left edge.
|
|
if (left < 0) {
|
|
left = 0;
|
|
}
|
|
} else if (pack.end) {
|
|
left += remainingWidth;
|
|
}
|
|
|
|
// Assign parallel position for the boxes:
|
|
for (i = 0; i < childItemsLength; ++i) {
|
|
childContext = childItems[i];
|
|
childMargins = childContext.marginInfo; // already cached by first loop
|
|
|
|
left += childMargins[beforeXName];
|
|
|
|
childContext.setProp(names.x, left);
|
|
|
|
// We can read directly from "props.width" because we have already properly
|
|
// requested it in the calculation of nonFlexedWidths or we calculated it.
|
|
// We cannot call getProp because that would be inappropriate for flexed items
|
|
// and we don't need any extra function call overhead:
|
|
left += childMargins[afterXName] + childContext.props[widthName];
|
|
}
|
|
|
|
contentWidth += ownerContext.targetContext.getPaddingInfo()[widthName];
|
|
|
|
// Stash the contentWidth on the state so that it can always be accessed later in the calculation
|
|
ownerContext.state.contentWidth = contentWidth;
|
|
|
|
// if there is perpendicular overflow, the published parallel content size includes
|
|
// the size of the perpendicular scrollbar.
|
|
if (mayNeedScrollbarAdjust &&
|
|
(ownerContext.peek(names.contentHeight) > plan.targetSize[names.height])) {
|
|
contentWidth += scrollbarWidth;
|
|
ownerContext[names.hasOverflowY] = true;
|
|
|
|
// tell the component layout to set the parallel size in the dom
|
|
ownerContext.target.componentLayout[names.setWidthInDom] = true;
|
|
|
|
// IE8 in what passes for "strict" mode will not create a scrollbar if
|
|
// there is just the *exactly correct* spare space created for it. We
|
|
// have to force that to happen once all the styles have been flushed
|
|
// to the DOM (see completeLayout):
|
|
ownerContext[names.invalidateScrollY] = Ext.isStrict && Ext.isIE8;
|
|
}
|
|
ownerContext[names.setContentWidth](contentWidth);
|
|
|
|
return true;
|
|
},
|
|
|
|
calculatePerpendicular: function(ownerContext, names, plan) {
|
|
var me = this,
|
|
heightShrinkWrap = ownerContext.perpendicularSizeModel.shrinkWrap,
|
|
targetSize = plan.targetSize,
|
|
childItems = ownerContext.childItems,
|
|
childItemsLength = childItems.length,
|
|
mmax = Math.max,
|
|
heightName = names.height,
|
|
setHeightName = names.setHeight,
|
|
beforeYName = names.beforeY,
|
|
topPositionName = names.y,
|
|
padding = me.padding,
|
|
top = padding[beforeYName],
|
|
availHeight = targetSize[heightName] - top - padding[names.afterY],
|
|
align = ownerContext.boxOptions.align,
|
|
isStretch = align.stretch, // never true if heightShrinkWrap (see beginLayoutCycle)
|
|
isStretchMax = align.stretchmax,
|
|
isCenter = align.center,
|
|
isBottom = align.bottom,
|
|
constrain = me.constrainAlign,
|
|
maxHeight = 0,
|
|
hasPercentageSizes = 0,
|
|
onBeforeInvalidateChild = me.onBeforeConstrainInvalidateChild,
|
|
onAfterInvalidateChild = me.onAfterConstrainInvalidateChild,
|
|
scrollbarHeight = Ext.getScrollbarSize().height,
|
|
childTop, i, childHeight, childMargins, diff, height, childContext,
|
|
stretchMaxPartner, stretchMaxChildren, shrinkWrapParallelOverflow,
|
|
percentagePerpendicular;
|
|
|
|
if (isStretch || ((isCenter || isBottom) && !heightShrinkWrap)) {
|
|
if (isNaN(availHeight)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// If the intention is to horizontally scroll child components, but the container is too narrow,
|
|
// then:
|
|
// if we are shrinkwrapping height:
|
|
// Set a flag because we are going to expand the height taken by the perpendicular dimension to accommodate the scrollbar
|
|
// else
|
|
// We must allow for the parallel scrollbar to intrude into the height
|
|
if (me.scrollParallel && plan.tooNarrow) {
|
|
if (heightShrinkWrap) {
|
|
shrinkWrapParallelOverflow = true;
|
|
} else {
|
|
availHeight -= scrollbarHeight;
|
|
plan.targetSize[heightName] -= scrollbarHeight;
|
|
}
|
|
}
|
|
|
|
if (isStretch) {
|
|
height = availHeight; // never heightShrinkWrap...
|
|
} else {
|
|
for (i = 0; i < childItemsLength; i++) {
|
|
childContext = childItems[i];
|
|
childMargins = (childContext.marginInfo || childContext.getMarginInfo())[heightName];
|
|
|
|
if (!(percentagePerpendicular = childContext.percentagePerpendicular)) {
|
|
childHeight = childContext.getProp(heightName);
|
|
} else {
|
|
++hasPercentageSizes;
|
|
if (heightShrinkWrap) {
|
|
// height %age items cannot contribute to maxHeight... they are going
|
|
// to be a %age of that maxHeight!
|
|
continue;
|
|
} else {
|
|
childHeight = percentagePerpendicular * availHeight - childMargins;
|
|
childHeight = childContext[names.setHeight](childHeight);
|
|
}
|
|
}
|
|
|
|
// Summary:
|
|
// 1) Not shrink wrapping height, so the height is not determined by the children
|
|
// 2) Constrain is set
|
|
// 3) The child item is shrink wrapping
|
|
// 4) It execeeds the max
|
|
if (!heightShrinkWrap && constrain && childContext[names.heightModel].shrinkWrap && childHeight > availHeight) {
|
|
childContext.invalidate({
|
|
before: onBeforeInvalidateChild,
|
|
after: onAfterInvalidateChild,
|
|
layout: me,
|
|
childHeight: availHeight,
|
|
names: names
|
|
});
|
|
|
|
// By invalidating the height, it could mean the width can change, so we need
|
|
// to recalculate in the parallel direction.
|
|
ownerContext.state.parallelDone = false;
|
|
}
|
|
|
|
// Max perpendicular measurement (used for stretchmax) must take the min perpendicular size of each child into account in case any fall short.
|
|
if (isNaN(maxHeight = mmax(maxHeight, childHeight + childMargins,
|
|
childContext.target[names.minHeight] || 0))) {
|
|
return false; // heightShrinkWrap || isCenter || isStretchMax ??
|
|
}
|
|
}
|
|
|
|
// If there is going to be a parallel scrollbar maxHeight must include it to the outside world.
|
|
// ie: a stretchmaxPartner, and the setContentHeight
|
|
if (shrinkWrapParallelOverflow) {
|
|
maxHeight += scrollbarHeight;
|
|
ownerContext[names.hasOverflowX] = true;
|
|
|
|
// tell the component layout to set the perpendicular size in the dom
|
|
ownerContext.target.componentLayout[names.setHeightInDom] = true;
|
|
|
|
// IE8 in what passes for "strict" mode will not create a scrollbar if
|
|
// there is just the *exactly correct* spare space created for it. We
|
|
// have to force that to happen once all the styles have been flushed
|
|
// to the DOM (see completeLayout):
|
|
ownerContext[names.invalidateScrollX] = Ext.isStrict && Ext.isIE8;
|
|
}
|
|
|
|
// If we are associated with another box layout, grab its maxChildHeight
|
|
// This must happen before we calculate and publish our contentHeight
|
|
stretchMaxPartner = ownerContext.stretchMaxPartner;
|
|
if (stretchMaxPartner) {
|
|
// Publish maxChildHeight as soon as it has been calculated for our partner:
|
|
ownerContext.setProp('maxChildHeight', maxHeight);
|
|
stretchMaxChildren = stretchMaxPartner.childItems;
|
|
// Only wait for maxChildHeight if our partner has visible items:
|
|
if (stretchMaxChildren && stretchMaxChildren.length) {
|
|
maxHeight = mmax(maxHeight, stretchMaxPartner.getProp('maxChildHeight'));
|
|
if (isNaN(maxHeight)) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
ownerContext[names.setContentHeight](maxHeight + me.padding[heightName] +
|
|
ownerContext.targetContext.getPaddingInfo()[heightName]);
|
|
|
|
// We have to publish the contentHeight with the additional scrollbarHeight
|
|
// to encourage our container to accomodate it, but we must remove the height
|
|
// of the scrollbar as we go to sizing or centering the children.
|
|
if (shrinkWrapParallelOverflow) {
|
|
maxHeight -= scrollbarHeight;
|
|
}
|
|
plan.maxSize = maxHeight;
|
|
|
|
if (isStretchMax) {
|
|
height = maxHeight;
|
|
} else if (isCenter || isBottom || hasPercentageSizes) {
|
|
if (constrain) {
|
|
height = heightShrinkWrap ? maxHeight : availHeight;
|
|
} else {
|
|
height = heightShrinkWrap ? maxHeight : mmax(availHeight, maxHeight);
|
|
}
|
|
|
|
// 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 publishInnerCtSize method explicitly
|
|
// adds the border widths to the set size of the innerCt.
|
|
height -= ownerContext.innerCtContext.getBorderInfo()[heightName];
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < childItemsLength; i++) {
|
|
childContext = childItems[i];
|
|
childMargins = childContext.marginInfo || childContext.getMarginInfo();
|
|
|
|
childTop = top + childMargins[beforeYName];
|
|
|
|
if (isStretch) {
|
|
childContext[setHeightName](height - childMargins[heightName]);
|
|
} else {
|
|
percentagePerpendicular = childContext.percentagePerpendicular;
|
|
if (heightShrinkWrap && percentagePerpendicular) {
|
|
childMargins = childContext.marginInfo || childContext.getMarginInfo();
|
|
childHeight = percentagePerpendicular * height - childMargins[heightName];
|
|
childHeight = childContext.setHeight(childHeight);
|
|
}
|
|
|
|
if (isCenter) {
|
|
diff = height - childContext.props[heightName];
|
|
if (diff > 0) {
|
|
childTop = top + Math[me.alignRoundingMethod](diff / 2);
|
|
}
|
|
} else if (isBottom) {
|
|
childTop = mmax(0, height - childTop - childContext.props[heightName]);
|
|
}
|
|
}
|
|
|
|
childContext.setProp(topPositionName, childTop);
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
onBeforeConstrainInvalidateChild: function(childContext, options){
|
|
// NOTE: No "this" pointer in here...
|
|
var heightModelName = options.names.heightModel;
|
|
if (!childContext[heightModelName].constrainedMin) {
|
|
// if the child hit a min constraint, it needs to be at its configured size, so
|
|
// we leave the sizeModel alone
|
|
childContext[heightModelName] = Ext.layout.SizeModel.calculated;
|
|
}
|
|
},
|
|
|
|
onAfterConstrainInvalidateChild: function(childContext, options){
|
|
// NOTE: No "this" pointer in here...
|
|
var names = options.names;
|
|
|
|
// We use 0 here because we know the size exceeds the available size.
|
|
// This was chosen on purpose, even for align: 'bottom', because it doesn't
|
|
// make practical sense to place the item at the bottom and then have it overflow
|
|
// over the top of the container, since it's not possible to scroll to it. As such,
|
|
// we always put the component at the top to follow normal document flow.
|
|
childContext.setProp(names.beforeY, 0);
|
|
if (childContext[names.heightModel].calculated) {
|
|
childContext[names.setHeight](options.childHeight);
|
|
}
|
|
},
|
|
|
|
calculateStretchMax: function (ownerContext, names, plan) {
|
|
var me = this,
|
|
heightName = names.height,
|
|
widthName = names.width,
|
|
childItems = ownerContext.childItems,
|
|
length = childItems.length,
|
|
height = plan.maxSize,
|
|
onBeforeStretchMaxInvalidateChild = me.onBeforeStretchMaxInvalidateChild,
|
|
onAfterStretchMaxInvalidateChild = me.onAfterStretchMaxInvalidateChild,
|
|
childContext, props, i, childHeight;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
|
|
props = childContext.props;
|
|
childHeight = height - childContext.getMarginInfo()[heightName];
|
|
|
|
if (childHeight != props[heightName] || // if (wrong height ...
|
|
childContext[names.heightModel].constrained) { // ...or needs invalidation)
|
|
// When we invalidate a child, since we won't be around to size or position
|
|
// it, we include an after callback that will be run after the invalidate
|
|
// that will (re)do that work. The good news here is that we can read the
|
|
// results of all that from the childContext props.
|
|
//
|
|
// We also include a before callback to change the sizeModel to calculated
|
|
// prior to the layout being invoked.
|
|
childContext.invalidate({
|
|
before: onBeforeStretchMaxInvalidateChild,
|
|
after: onAfterStretchMaxInvalidateChild,
|
|
layout: me,
|
|
// passing this data avoids a 'scope' and its Function.bind
|
|
childWidth: props[widthName],
|
|
// subtract margins from the maximum value
|
|
childHeight: childHeight,
|
|
childX: props.x,
|
|
childY: props.y,
|
|
names: names
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
onBeforeStretchMaxInvalidateChild: function (childContext, options) {
|
|
// NOTE: No "this" pointer in here...
|
|
var heightModelName = options.names.heightModel;
|
|
|
|
// Change the childItem to calculated (i.e., "set by ownerCt"). The component layout
|
|
// of the child can course-correct (like dock layout does for a collapsed panel),
|
|
// so we must make these changes here before that layout's beginLayoutCycle is
|
|
// called.
|
|
if (!childContext[heightModelName].constrainedMax) {
|
|
// if the child hit a max constraint, it needs to be at its configured size, so
|
|
// we leave the sizeModel alone...
|
|
childContext[heightModelName] = Ext.layout.SizeModel.calculated;
|
|
}
|
|
},
|
|
|
|
onAfterStretchMaxInvalidateChild: function (childContext, options) {
|
|
// NOTE: No "this" pointer in here...
|
|
var names = options.names,
|
|
childHeight = options.childHeight,
|
|
childWidth = options.childWidth;
|
|
|
|
childContext.setProp('x', options.childX);
|
|
childContext.setProp('y', options.childY);
|
|
|
|
if (childContext[names.heightModel].calculated) {
|
|
// We need to respect a child that is still not calculated (such as a collapsed
|
|
// panel)...
|
|
childContext[names.setHeight](childHeight);
|
|
}
|
|
|
|
if (childContext[names.widthModel].calculated) {
|
|
childContext[names.setWidth](childWidth);
|
|
}
|
|
},
|
|
|
|
completeLayout: function(ownerContext) {
|
|
var me = this,
|
|
names = ownerContext.boxNames,
|
|
invalidateScrollX = ownerContext.invalidateScrollX,
|
|
invalidateScrollY = ownerContext.invalidateScrollY,
|
|
dom, el, overflowX, overflowY, styles;
|
|
|
|
me.overflowHandler.completeLayout(ownerContext);
|
|
|
|
if (invalidateScrollX || invalidateScrollY) {
|
|
el = me.getTarget();
|
|
dom = el.dom;
|
|
styles = dom.style;
|
|
|
|
if (invalidateScrollX) {
|
|
// get computed style to see if we are 'auto'
|
|
overflowX = el.getStyle('overflowX');
|
|
if (overflowX == 'auto') {
|
|
// capture the inline style (if any) so we can restore it later:
|
|
overflowX = styles.overflowX;
|
|
styles.overflowX = 'scroll'; // force the scrollbar to appear
|
|
} else {
|
|
invalidateScrollX = false; // no work really since not 'auto'
|
|
}
|
|
}
|
|
|
|
if (invalidateScrollY) {
|
|
// get computed style to see if we are 'auto'
|
|
overflowY = el.getStyle('overflowY');
|
|
if (overflowY == 'auto') {
|
|
// capture the inline style (if any) so we can restore it later:
|
|
overflowY = styles.overflowY;
|
|
styles.overflowY = 'scroll'; // force the scrollbar to appear
|
|
} else {
|
|
invalidateScrollY = false; // no work really since not 'auto'
|
|
}
|
|
}
|
|
|
|
if (invalidateScrollX || invalidateScrollY) { // if (some form of 'auto' in play)
|
|
// force a reflow...
|
|
dom.scrollWidth;
|
|
|
|
if (invalidateScrollX) {
|
|
styles.overflowX = overflowX; // restore inline style
|
|
}
|
|
if (invalidateScrollY) {
|
|
styles.overflowY = overflowY; // restore inline style
|
|
}
|
|
}
|
|
}
|
|
|
|
// If we are scrolling parallel, restore the saved scroll position
|
|
if (me.scrollParallel) {
|
|
me.owner.getTargetEl().dom[names.scrollLeft] = me.scrollPos;
|
|
}
|
|
},
|
|
|
|
finishedLayout: function(ownerContext) {
|
|
this.overflowHandler.finishedLayout(ownerContext);
|
|
this.callParent(arguments);
|
|
|
|
// Fix for an obscure webkit bug (EXTJSIV-5962) caused by the targetEl's 20000px
|
|
// width. We set a very large width on the targetEl at the beginning of the
|
|
// layout cycle to prevent any "crushing" effect on the child items, however
|
|
// in some cases the very large width makes it possible to scroll the innerCt
|
|
// by dragging on certain child elements. To prevent this from happening we ensure
|
|
// that the targetEl's width is the same as the innerCt.
|
|
// IE needs it because of its scrollIntoView bug: https://sencha.jira.com/browse/EXTJSIV-6520
|
|
// Webkit needs it because of its mouse drag bug: https://sencha.jira.com/browse/EXTJSIV-5962
|
|
// FF needs it because of a vertical tab bug: https://sencha.jira.com/browse/EXTJSIV-8614
|
|
this.targetEl.setWidth(ownerContext.innerCtContext.props.width);
|
|
},
|
|
|
|
publishInnerCtSize: function(ownerContext, reservedSpace) {
|
|
var me = this,
|
|
names = ownerContext.boxNames,
|
|
heightName = names.height,
|
|
widthName = names.width,
|
|
align = ownerContext.boxOptions.align,
|
|
dock = me.owner.dock,
|
|
padding = me.padding,
|
|
plan = ownerContext.state.boxPlan,
|
|
targetSize = plan.targetSize,
|
|
height = targetSize[heightName],
|
|
innerCtContext = ownerContext.innerCtContext,
|
|
innerCtWidth = (ownerContext.parallelSizeModel.shrinkWrap || (plan.tooNarrow && me.scrollParallel)
|
|
? ownerContext.state.contentWidth - ownerContext.targetContext.getPaddingInfo()[widthName]
|
|
: targetSize[widthName]) - (reservedSpace || 0),
|
|
innerCtHeight;
|
|
|
|
if (align.stretch) {
|
|
innerCtHeight = height;
|
|
} else {
|
|
innerCtHeight = plan.maxSize + padding[names.beforeY] + padding[names.afterY] + innerCtContext.getBorderInfo()[heightName];
|
|
|
|
if (!ownerContext.perpendicularSizeModel.shrinkWrap && (align.center || align.bottom)) {
|
|
innerCtHeight = Math.max(height, innerCtHeight);
|
|
}
|
|
}
|
|
|
|
innerCtContext[names.setWidth](innerCtWidth);
|
|
innerCtContext[names.setHeight](innerCtHeight);
|
|
|
|
// If unable to publish both dimensions, this layout needs to run again
|
|
if (isNaN(innerCtWidth + innerCtHeight)) {
|
|
me.done = false;
|
|
}
|
|
|
|
// If a calculated width has been found (this only happens for widthModel.shrinkWrap
|
|
// vertical docked Components in old Microsoft browsers) then, if the Component has
|
|
// not assumed the size of its content, set it to do so.
|
|
//
|
|
// We MUST pass the dirty flag to get that into the DOM, and because we are a Container
|
|
// layout, and not really supposed to perform sizing, we must also use the force flag.
|
|
if (plan.calculatedWidth && (dock == 'left' || dock == 'right')) {
|
|
// TODO: setting the owner size should be the job of the component layout.
|
|
ownerContext.setWidth(plan.calculatedWidth, true, true);
|
|
}
|
|
},
|
|
|
|
onRemove: function(comp){
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (me.overflowHandler) {
|
|
me.overflowHandler.onRemove(comp);
|
|
}
|
|
if (comp.layoutMarginCap == me.id) {
|
|
delete comp.layoutMarginCap;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
initOverflowHandler: function() {
|
|
var me = this,
|
|
handler = me.overflowHandler,
|
|
handlerType,
|
|
constructor;
|
|
|
|
if (typeof handler == 'string') {
|
|
handler = {
|
|
type: handler
|
|
};
|
|
}
|
|
|
|
handlerType = 'None';
|
|
if (handler && handler.type !== undefined) {
|
|
handlerType = handler.type;
|
|
}
|
|
|
|
constructor = Ext.layout.container.boxOverflow[handlerType];
|
|
if (constructor[me.type]) {
|
|
constructor = constructor[me.type];
|
|
}
|
|
|
|
me.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.' + handlerType, me, handler);
|
|
},
|
|
|
|
// Overridden method from Ext.layout.container.Container.
|
|
// Used in the beforeLayout method to render all items into.
|
|
getRenderTarget: function() {
|
|
return this.targetEl;
|
|
},
|
|
|
|
// Overridden method from Ext.layout.container.Container.
|
|
// Used by Container classes to insert special DOM elements which must exist in addition to the child components
|
|
getElementTarget: function() {
|
|
return this.innerCt;
|
|
},
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.innerCt, this.overflowHandler);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
getRenderData: function() {
|
|
var data = this.callParent();
|
|
|
|
data.targetElCls = this.targetElCls;
|
|
|
|
return data;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
|
|
* space between child items containing a numeric `flex` configuration.
|
|
*
|
|
* This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Panel', {
|
|
* width: 500,
|
|
* height: 300,
|
|
* title: "HBoxLayout Panel",
|
|
* layout: {
|
|
* type: 'hbox',
|
|
* align: 'stretch'
|
|
* },
|
|
* renderTo: document.body,
|
|
* items: [{
|
|
* xtype: 'panel',
|
|
* title: 'Inner Panel One',
|
|
* flex: 2
|
|
* },{
|
|
* xtype: 'panel',
|
|
* title: 'Inner Panel Two',
|
|
* flex: 1
|
|
* },{
|
|
* xtype: 'panel',
|
|
* title: 'Inner Panel Three',
|
|
* flex: 1
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.HBox', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.hbox'],
|
|
extend: Ext.layout.container.Box ,
|
|
alternateClassName: 'Ext.layout.HBoxLayout',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} align
|
|
* Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
|
|
*
|
|
* - **top** : **Default** child items are aligned vertically at the **top** of the container.
|
|
* - **middle** : child items are aligned vertically in the **middle** of the container.
|
|
* - **bottom** : child items are aligned vertically at the **bottom** of the container.
|
|
* - **stretch** : child items are stretched vertically to fill the height of the container.
|
|
* - **stretchmax** : child items are stretched vertically to the height of the largest item.
|
|
*/
|
|
align: 'top', // top, middle, stretch, strechmax
|
|
|
|
/**
|
|
* @cfg {"round"/"floor"/"ceil"} [alignRoundingMethod='round'] The Math method to use
|
|
* for rounding fractional pixels when `{@link #align}:middle` is used.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} constrainAlign
|
|
* Limits the size of {@link #align aligned} components to the size of the container under certain circumstances.
|
|
* Firstly, the container height must not be determined by the height of the child components. Secondly, the child
|
|
* components must have their height {@link Ext.AbstractComponent#shrinkWrap shrinkwrapped}.
|
|
*/
|
|
constrainAlign: false,
|
|
|
|
type : 'hbox',
|
|
|
|
direction: 'horizontal',
|
|
|
|
horizontal: true,
|
|
|
|
names: {
|
|
// parallel
|
|
beforeX: 'left',
|
|
beforeScrollX: 'left',
|
|
beforeScrollerSuffix: '-before-scroller',
|
|
afterScrollerSuffix: '-after-scroller',
|
|
leftCap: 'Left',
|
|
afterX: 'right',
|
|
width: 'width',
|
|
contentWidth: 'contentWidth',
|
|
minWidth: 'minWidth',
|
|
maxWidth: 'maxWidth',
|
|
widthCap: 'Width',
|
|
widthModel: 'widthModel',
|
|
widthIndex: 0,
|
|
x: 'x',
|
|
scrollLeft: 'scrollLeft',
|
|
overflowX: 'overflowX',
|
|
hasOverflowX: 'hasOverflowX',
|
|
invalidateScrollX: 'invalidateScrollX',
|
|
parallelMargins: 'lr',
|
|
|
|
// perpendicular
|
|
center: 'middle',
|
|
beforeY: 'top',
|
|
afterY: 'bottom',
|
|
height: 'height',
|
|
contentHeight: 'contentHeight',
|
|
minHeight: 'minHeight',
|
|
maxHeight: 'maxHeight',
|
|
heightCap: 'Height',
|
|
heightModel: 'heightModel',
|
|
heightIndex: 1,
|
|
y: 'y',
|
|
overflowY: 'overflowY',
|
|
hasOverflowY: 'hasOverflowY',
|
|
invalidateScrollY: 'invalidateScrollY',
|
|
perpendicularMargins: 'tb',
|
|
|
|
// Methods
|
|
getWidth: 'getWidth',
|
|
getHeight: 'getHeight',
|
|
setWidth: 'setWidth',
|
|
setHeight: 'setHeight',
|
|
gotWidth: 'gotWidth',
|
|
gotHeight: 'gotHeight',
|
|
setContentWidth: 'setContentWidth',
|
|
setContentHeight: 'setContentHeight',
|
|
setWidthInDom: 'setWidthInDom',
|
|
setHeightInDom: 'setHeightInDom',
|
|
getScrollLeft: 'getScrollLeft',
|
|
setScrollLeft: 'setScrollLeft',
|
|
scrollTo: 'scrollTo'
|
|
},
|
|
|
|
sizePolicy: {
|
|
flex: {
|
|
'': {
|
|
readsWidth : 0,
|
|
readsHeight: 1,
|
|
setsWidth : 1,
|
|
setsHeight : 0
|
|
},
|
|
stretch: {
|
|
readsWidth : 0,
|
|
readsHeight: 0,
|
|
setsWidth : 1,
|
|
setsHeight : 1
|
|
},
|
|
stretchmax: {
|
|
readsWidth : 0,
|
|
readsHeight: 1,
|
|
setsWidth : 1,
|
|
setsHeight : 1
|
|
}
|
|
},
|
|
'': {
|
|
readsWidth : 1,
|
|
readsHeight: 1,
|
|
setsWidth : 0,
|
|
setsHeight : 0
|
|
},
|
|
stretch: {
|
|
readsWidth : 1,
|
|
readsHeight: 0,
|
|
setsWidth : 0,
|
|
setsHeight : 1
|
|
},
|
|
stretchmax: {
|
|
readsWidth : 1,
|
|
readsHeight: 1,
|
|
setsWidth : 0,
|
|
setsHeight : 1
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A layout that arranges items vertically down a Container. This layout optionally divides available vertical space
|
|
* between child items containing a numeric `flex` configuration.
|
|
*
|
|
* This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Panel', {
|
|
* width: 500,
|
|
* height: 400,
|
|
* title: "VBoxLayout Panel",
|
|
* layout: {
|
|
* type: 'vbox',
|
|
* align: 'center'
|
|
* },
|
|
* renderTo: document.body,
|
|
* items: [{
|
|
* xtype: 'panel',
|
|
* title: 'Inner Panel One',
|
|
* width: 250,
|
|
* flex: 2
|
|
* },
|
|
* {
|
|
* xtype: 'panel',
|
|
* title: 'Inner Panel Two',
|
|
* width: 250,
|
|
* flex: 4
|
|
* },
|
|
* {
|
|
* xtype: 'panel',
|
|
* title: 'Inner Panel Three',
|
|
* width: '50%',
|
|
* flex: 4
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.VBox', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.vbox'],
|
|
extend: Ext.layout.container.Box ,
|
|
alternateClassName: 'Ext.layout.VBoxLayout',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} align
|
|
* Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
|
|
*
|
|
* - **left** : **Default** child items are aligned horizontally at the **left** side of the container.
|
|
* - **center** : child items are aligned horizontally at the **mid-width** of the container.
|
|
* - **right** : child items are aligned horizontally at the **right** of the container.
|
|
* - **stretch** : child items are stretched horizontally to fill the width of the container.
|
|
* - **stretchmax** : child items are stretched horizontally to the size of the largest item.
|
|
*/
|
|
align : 'left', // left, center, stretch, strechmax
|
|
|
|
/**
|
|
* @cfg {"round"/"floor"/"ceil"} [alignRoundingMethod='round'] The Math method to use
|
|
* for rounding fractional pixels when `{@link #align}:center` is used.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} constrainAlign
|
|
* Limits the size of {@link #align aligned} components to the size of the container under certain circumstances.
|
|
* Firstly, the container width must not be determined by the width of the child components. Secondly, the child
|
|
* components must have their width {@link Ext.AbstractComponent#shrinkWrap shrinkwrapped}.
|
|
*/
|
|
constrainAlign: false,
|
|
|
|
type: 'vbox',
|
|
|
|
direction: 'vertical',
|
|
|
|
horizontal: false,
|
|
|
|
names: {
|
|
// parallel
|
|
beforeX: 'top',
|
|
beforeScrollX: 'top',
|
|
beforeScrollerSuffix: '-before-scroller',
|
|
afterScrollerSuffix: '-after-scroller',
|
|
leftCap: 'Top',
|
|
afterX: 'bottom',
|
|
width: 'height',
|
|
contentWidth: 'contentHeight',
|
|
minWidth: 'minHeight',
|
|
maxWidth: 'maxHeight',
|
|
widthCap: 'Height',
|
|
widthModel: 'heightModel',
|
|
widthIndex: 1,
|
|
x: 'y',
|
|
scrollLeft: 'scrollTop',
|
|
overflowX: 'overflowY',
|
|
hasOverflowX: 'hasOverflowY',
|
|
invalidateScrollX: 'invalidateScrollY',
|
|
parallelMargins: 'tb',
|
|
|
|
// perpendicular
|
|
center: 'center',
|
|
beforeY: 'left',
|
|
afterY: 'right',
|
|
height: 'width',
|
|
contentHeight: 'contentWidth',
|
|
minHeight: 'minWidth',
|
|
maxHeight: 'maxWidth',
|
|
heightCap: 'Width',
|
|
heightModel: 'widthModel',
|
|
heightIndex: 0,
|
|
y: 'x',
|
|
overflowY: 'overflowX',
|
|
hasOverflowY: 'hasOverflowX',
|
|
invalidateScrollY: 'invalidateScrollX',
|
|
perpendicularMargins: 'lr',
|
|
|
|
// Methods
|
|
getWidth: 'getHeight',
|
|
getHeight: 'getWidth',
|
|
setWidth: 'setHeight',
|
|
setHeight: 'setWidth',
|
|
gotWidth: 'gotHeight',
|
|
gotHeight: 'gotWidth',
|
|
setContentWidth: 'setContentHeight',
|
|
setContentHeight: 'setContentWidth',
|
|
setWidthInDom: 'setHeightInDom',
|
|
setHeightInDom: 'setWidthInDom',
|
|
getScrollLeft: 'getScrollTop',
|
|
setScrollLeft: 'setScrollTop',
|
|
scrollTo: 'scrollTo'
|
|
},
|
|
|
|
sizePolicy: {
|
|
flex: {
|
|
'': {
|
|
readsWidth : 1,
|
|
readsHeight: 0,
|
|
setsWidth : 0,
|
|
setsHeight : 1
|
|
},
|
|
stretch: {
|
|
readsWidth : 0,
|
|
readsHeight: 0,
|
|
setsWidth : 1,
|
|
setsHeight : 1
|
|
},
|
|
stretchmax: {
|
|
readsWidth : 1,
|
|
readsHeight: 0,
|
|
setsWidth : 1,
|
|
setsHeight : 1
|
|
}
|
|
},
|
|
'': {
|
|
readsWidth : 1,
|
|
readsHeight: 1,
|
|
setsWidth : 0,
|
|
setsHeight : 0
|
|
},
|
|
stretch: {
|
|
readsWidth : 0,
|
|
readsHeight: 1,
|
|
setsWidth : 1,
|
|
setsHeight : 0
|
|
},
|
|
stretchmax: {
|
|
readsWidth : 1,
|
|
readsHeight: 1,
|
|
setsWidth : 1,
|
|
setsHeight : 0
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Basic Toolbar class. Although the {@link Ext.container.Container#defaultType defaultType} for
|
|
* Toolbar is {@link Ext.button.Button button}, Toolbar elements (child items for the Toolbar container)
|
|
* may be virtually any type of Component. Toolbar elements can be created explicitly via their
|
|
* constructors, or implicitly via their xtypes, and can be {@link #method-add}ed dynamically.
|
|
*
|
|
* ## Some items have shortcut strings for creation:
|
|
*
|
|
* | Shortcut | xtype | Class | Description
|
|
* |:---------|:--------------|:------------------------------|:---------------------------------------------------
|
|
* | '->' | `tbfill` | {@link Ext.toolbar.Fill} | begin using the right-justified button container
|
|
* | '-' | `tbseparator` | {@link Ext.toolbar.Separator} | add a vertical separator bar between toolbar items
|
|
* | ' ' | `tbspacer` | {@link Ext.toolbar.Spacer} | add horizontal space between elements
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.toolbar.Toolbar', {
|
|
* renderTo: document.body,
|
|
* width : 500,
|
|
* items: [
|
|
* {
|
|
* // xtype: 'button', // default for Toolbars
|
|
* text: 'Button'
|
|
* },
|
|
* {
|
|
* xtype: 'splitbutton',
|
|
* text : 'Split Button'
|
|
* },
|
|
* // begin using the right-justified button container
|
|
* '->', // same as { xtype: 'tbfill' }
|
|
* {
|
|
* xtype : 'textfield',
|
|
* name : 'field1',
|
|
* emptyText: 'enter search term'
|
|
* },
|
|
* // add a vertical separator bar between toolbar items
|
|
* '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
|
|
* 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
|
|
* { xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
|
|
* 'text 2',
|
|
* { xtype: 'tbspacer', width: 50 }, // add a 50px space
|
|
* 'text 3'
|
|
* ]
|
|
* });
|
|
*
|
|
* Toolbars have {@link #method-enable} and {@link #method-disable} methods which when called, will
|
|
* enable/disable all items within your toolbar.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.toolbar.Toolbar', {
|
|
* renderTo: document.body,
|
|
* width : 400,
|
|
* items: [
|
|
* {
|
|
* text: 'Button'
|
|
* },
|
|
* {
|
|
* xtype: 'splitbutton',
|
|
* text : 'Split Button'
|
|
* },
|
|
* '->',
|
|
* {
|
|
* xtype : 'textfield',
|
|
* name : 'field1',
|
|
* emptyText: 'enter search term'
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* Example
|
|
*
|
|
* @example
|
|
* var enableBtn = Ext.create('Ext.button.Button', {
|
|
* text : 'Enable All Items',
|
|
* disabled: true,
|
|
* scope : this,
|
|
* handler : function() {
|
|
* //disable the enable button and enable the disable button
|
|
* enableBtn.disable();
|
|
* disableBtn.enable();
|
|
*
|
|
* //enable the toolbar
|
|
* toolbar.enable();
|
|
* }
|
|
* });
|
|
*
|
|
* var disableBtn = Ext.create('Ext.button.Button', {
|
|
* text : 'Disable All Items',
|
|
* scope : this,
|
|
* handler : function() {
|
|
* //enable the enable button and disable button
|
|
* disableBtn.disable();
|
|
* enableBtn.enable();
|
|
*
|
|
* //disable the toolbar
|
|
* toolbar.disable();
|
|
* }
|
|
* });
|
|
*
|
|
* var toolbar = Ext.create('Ext.toolbar.Toolbar', {
|
|
* renderTo: document.body,
|
|
* width : 400,
|
|
* margin : '5 0 0 0',
|
|
* items : [enableBtn, disableBtn]
|
|
* });
|
|
*
|
|
* Adding items to and removing items from a toolbar is as simple as calling the {@link #method-add}
|
|
* and {@link #method-remove} methods. There is also a {@link #removeAll} method
|
|
* which remove all items within the toolbar.
|
|
*
|
|
* @example
|
|
* var toolbar = Ext.create('Ext.toolbar.Toolbar', {
|
|
* renderTo: document.body,
|
|
* width : 700,
|
|
* items: [
|
|
* {
|
|
* text: 'Example Button'
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* var addedItems = [];
|
|
*
|
|
* Ext.create('Ext.toolbar.Toolbar', {
|
|
* renderTo: document.body,
|
|
* width : 700,
|
|
* margin : '5 0 0 0',
|
|
* items : [
|
|
* {
|
|
* text : 'Add a button',
|
|
* scope : this,
|
|
* handler: function() {
|
|
* var text = prompt('Please enter the text for your button:');
|
|
* addedItems.push(toolbar.add({
|
|
* text: text
|
|
* }));
|
|
* }
|
|
* },
|
|
* {
|
|
* text : 'Add a text item',
|
|
* scope : this,
|
|
* handler: function() {
|
|
* var text = prompt('Please enter the text for your item:');
|
|
* addedItems.push(toolbar.add(text));
|
|
* }
|
|
* },
|
|
* {
|
|
* text : 'Add a toolbar separator',
|
|
* scope : this,
|
|
* handler: function() {
|
|
* addedItems.push(toolbar.add('-'));
|
|
* }
|
|
* },
|
|
* {
|
|
* text : 'Add a toolbar spacer',
|
|
* scope : this,
|
|
* handler: function() {
|
|
* addedItems.push(toolbar.add('->'));
|
|
* }
|
|
* },
|
|
* '->',
|
|
* {
|
|
* text : 'Remove last inserted item',
|
|
* scope : this,
|
|
* handler: function() {
|
|
* if (addedItems.length) {
|
|
* toolbar.remove(addedItems.pop());
|
|
* } else if (toolbar.items.length) {
|
|
* toolbar.remove(toolbar.items.last());
|
|
* } else {
|
|
* alert('No items in the toolbar');
|
|
* }
|
|
* }
|
|
* },
|
|
* {
|
|
* text : 'Remove all items',
|
|
* scope : this,
|
|
* handler: function() {
|
|
* toolbar.removeAll();
|
|
* }
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* @constructor
|
|
* Creates a new Toolbar
|
|
* @param {Object/Object[]} config A config object or an array of buttons to {@link #method-add}
|
|
* @docauthor Robert Dougan <rob@sencha.com>
|
|
*/
|
|
Ext.define('Ext.toolbar.Toolbar', {
|
|
extend: Ext.container.Container ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alias: 'widget.toolbar',
|
|
alternateClassName: 'Ext.Toolbar',
|
|
|
|
/**
|
|
* @property {Boolean} isToolbar
|
|
* `true` in this class to identify an object as an instantiated Toolbar, or subclass thereof.
|
|
*/
|
|
isToolbar: true,
|
|
baseCls : Ext.baseCSSPrefix + 'toolbar',
|
|
ariaRole : 'toolbar',
|
|
|
|
defaultType: 'button',
|
|
|
|
/**
|
|
* @cfg {Boolean} vertical
|
|
* Set to `true` to make the toolbar vertical. The layout will become a `vbox`.
|
|
*/
|
|
vertical: false,
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* This class assigns a default layout (`layout: 'hbox'`).
|
|
* Developers _may_ override this configuration option if another layout
|
|
* is required (the constructor must be passed a configuration object in this
|
|
* case instead of an array).
|
|
* See {@link Ext.container.Container#layout} for additional information.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} enableOverflow
|
|
* Configure true to make the toolbar provide a button which activates a dropdown Menu to show
|
|
* items which overflow the Toolbar's width.
|
|
*/
|
|
enableOverflow: false,
|
|
|
|
/**
|
|
* @cfg {String} menuTriggerCls
|
|
* Configure the icon class of the overflow button.
|
|
*/
|
|
menuTriggerCls: Ext.baseCSSPrefix + 'toolbar-more-icon',
|
|
|
|
/**
|
|
* @cfg {String} defaultButtonUI
|
|
* A default {@link Ext.Component#ui ui} to use for {@link Ext.button.Button Button} items
|
|
*/
|
|
|
|
// @private
|
|
trackMenus: true,
|
|
|
|
itemCls: Ext.baseCSSPrefix + 'toolbar-item',
|
|
|
|
statics: {
|
|
shortcuts: {
|
|
'-' : 'tbseparator',
|
|
' ' : 'tbspacer'
|
|
},
|
|
|
|
shortcutsHV: {
|
|
// horizontal
|
|
0: {
|
|
'->': { xtype: 'tbfill', height: 0 }
|
|
},
|
|
// vertical
|
|
1: {
|
|
'->': { xtype: 'tbfill', width: 0 }
|
|
}
|
|
}
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
// check for simplified (old-style) overflow config:
|
|
if (!me.layout && me.enableOverflow) {
|
|
me.layout = { overflowHandler: 'Menu' };
|
|
}
|
|
|
|
if (me.dock === 'right' || me.dock === 'left') {
|
|
me.vertical = true;
|
|
}
|
|
|
|
me.layout = Ext.applyIf(Ext.isString(me.layout) ? {
|
|
type: me.layout
|
|
} : me.layout || {}, {
|
|
type: me.vertical ? 'vbox' : 'hbox',
|
|
align: me.vertical ? 'stretchmax' : 'middle'
|
|
});
|
|
|
|
if (me.vertical) {
|
|
me.addClsWithUI('vertical');
|
|
}
|
|
|
|
// @TODO: remove this hack and implement a more general solution
|
|
if (me.ui === 'footer') {
|
|
me.ignoreBorderManagement = true;
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
/**
|
|
* @event overflowchange
|
|
* Fires after the overflow state has changed.
|
|
* @param {Number} lastHiddenCount The number of overflowing items that used to be hidden.
|
|
* @param {Number} hiddenCount The number of overflowing items that are hidden now.
|
|
* @param {Array} The hidden items
|
|
*/
|
|
me.addEvents('overflowchange');
|
|
},
|
|
|
|
getRefItems: function(deep) {
|
|
var me = this,
|
|
items = me.callParent(arguments),
|
|
layout = me.layout,
|
|
handler;
|
|
|
|
if (deep && me.enableOverflow) {
|
|
handler = layout.overflowHandler;
|
|
if (handler && handler.menu) {
|
|
items = items.concat(handler.menu.getRefItems(deep));
|
|
}
|
|
}
|
|
return items;
|
|
},
|
|
|
|
/**
|
|
* Adds element(s) to the toolbar -- this function takes a variable number of
|
|
* arguments of mixed type and adds them to the toolbar.
|
|
*
|
|
* **Note**: See the notes within {@link Ext.container.Container#method-add}.
|
|
*
|
|
* @param {Ext.Component.../Object.../String.../HTMLElement...} args The following types of arguments are all valid:
|
|
*
|
|
* - `{@link Ext.button.Button config}`: A valid button config object
|
|
* - `HtmlElement`: Any standard HTML element
|
|
* - `Field`: Any form field
|
|
* - `Item`: Any subclass of {@link Ext.toolbar.Item}
|
|
* - `String`: Any generic string (gets wrapped in a {@link Ext.toolbar.TextItem}).
|
|
*
|
|
* Note that there are a few special strings that are treated differently as explained next:
|
|
*
|
|
* - `'-'`: Creates a separator element
|
|
* - `' '`: Creates a spacer element
|
|
* - `'->'`: Creates a fill element
|
|
*
|
|
* @return {Ext.Component[]/Ext.Component} The Components that were added.
|
|
*
|
|
* @method add
|
|
*/
|
|
|
|
/**
|
|
* Inserts a Component into this Container at a specified index.
|
|
*
|
|
* @param {Number} index The index at which the Component will be inserted.
|
|
* @param {Ext.Component/Object/String/HTMLElement} component
|
|
* See {@link #method-add} method for overview of possible values.
|
|
* @return {Ext.Component} The component that was inserted.
|
|
* @method insert
|
|
*/
|
|
|
|
// @private
|
|
lookupComponent: function(c) {
|
|
var args = arguments;
|
|
if (typeof c == 'string') {
|
|
var T = Ext.toolbar.Toolbar,
|
|
shortcut = T.shortcutsHV[this.vertical ? 1 : 0][c] || T.shortcuts[c];
|
|
|
|
if (typeof shortcut == 'string') {
|
|
c = {
|
|
xtype: shortcut
|
|
};
|
|
} else if (shortcut) {
|
|
c = Ext.apply({}, shortcut);
|
|
} else {
|
|
c = {
|
|
xtype: 'tbtext',
|
|
text: c
|
|
};
|
|
}
|
|
|
|
this.applyDefaults(c);
|
|
|
|
// See: EXTJSIV-7578
|
|
args = [c];
|
|
}
|
|
|
|
return this.callParent(args);
|
|
},
|
|
|
|
// @private
|
|
applyDefaults: function(c) {
|
|
if (!Ext.isString(c)) {
|
|
c = this.callParent(arguments);
|
|
}
|
|
return c;
|
|
},
|
|
|
|
// @private
|
|
trackMenu: function(item, remove) {
|
|
if (this.trackMenus && item.menu) {
|
|
var method = remove ? 'mun' : 'mon',
|
|
me = this;
|
|
|
|
me[method](item, 'mouseover', me.onButtonOver, me);
|
|
me[method](item, 'menushow', me.onButtonMenuShow, me);
|
|
me[method](item, 'menuhide', me.onButtonMenuHide, me);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onBeforeAdd: function(component) {
|
|
var me = this,
|
|
isButton = component.isButton;
|
|
|
|
if (isButton && me.defaultButtonUI && component.ui === 'default' &&
|
|
!component.hasOwnProperty('ui')) {
|
|
component.ui = me.defaultButtonUI;
|
|
} else if ((isButton || component.isFormField) && me.ui !== 'footer') {
|
|
component.ui = component.ui + '-toolbar';
|
|
component.addCls(component.baseCls + '-toolbar');
|
|
}
|
|
|
|
// Any separators needs to know if is vertical or not
|
|
if (component instanceof Ext.toolbar.Separator) {
|
|
component.setUI((me.vertical) ? 'vertical' : 'horizontal');
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
onAdd: function(component) {
|
|
this.callParent(arguments);
|
|
this.trackMenu(component);
|
|
},
|
|
|
|
// @private
|
|
onRemove: function(c) {
|
|
this.callParent(arguments);
|
|
this.trackMenu(c, true);
|
|
},
|
|
|
|
getChildItemsToDisable: function() {
|
|
return this.items.getRange();
|
|
},
|
|
|
|
// @private
|
|
onButtonOver: function(btn){
|
|
if (this.activeMenuBtn && this.activeMenuBtn != btn) {
|
|
this.activeMenuBtn.hideMenu();
|
|
btn.showMenu();
|
|
this.activeMenuBtn = btn;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onButtonMenuShow: function(btn) {
|
|
this.activeMenuBtn = btn;
|
|
},
|
|
|
|
// @private
|
|
onButtonMenuHide: function(btn) {
|
|
delete this.activeMenuBtn;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This ComponentLayout handles docking for Panels. It takes care of panels that are
|
|
* part of a ContainerLayout that sets this Panel's size and Panels that are part of
|
|
* an AutoContainerLayout in which this panel get his height based of the CSS or
|
|
* or its content.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.Dock', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.component.Component ,
|
|
|
|
alias: 'layout.dock',
|
|
|
|
alternateClassName: 'Ext.layout.component.AbstractDock',
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'dock',
|
|
|
|
horzAxisProps: {
|
|
name: 'horz',
|
|
oppositeName: 'vert',
|
|
dockBegin: 'left',
|
|
dockEnd: 'right',
|
|
horizontal: true,
|
|
marginBegin: 'margin-left',
|
|
maxSize: 'maxWidth',
|
|
minSize: 'minWidth',
|
|
pos: 'x',
|
|
setSize: 'setWidth',
|
|
shrinkWrapDock: 'shrinkWrapDockWidth',
|
|
size: 'width',
|
|
sizeModel: 'widthModel'
|
|
},
|
|
|
|
vertAxisProps: {
|
|
name: 'vert',
|
|
oppositeName: 'horz',
|
|
dockBegin: 'top',
|
|
dockEnd: 'bottom',
|
|
horizontal: false,
|
|
marginBegin: 'margin-top',
|
|
maxSize: 'maxHeight',
|
|
minSize: 'minHeight',
|
|
pos: 'y',
|
|
setSize: 'setHeight',
|
|
shrinkWrapDock: 'shrinkWrapDockHeight',
|
|
size: 'height',
|
|
sizeModel: 'heightModel'
|
|
},
|
|
|
|
initializedBorders: -1,
|
|
|
|
horizontalCollapsePolicy: { width: true, x: true },
|
|
|
|
verticalCollapsePolicy: { height: true, y: true },
|
|
|
|
finishRender: function () {
|
|
var me = this,
|
|
target, items;
|
|
|
|
me.callParent();
|
|
|
|
target = me.getRenderTarget();
|
|
items = me.getDockedItems();
|
|
|
|
me.finishRenderItems(target, items);
|
|
},
|
|
|
|
isItemBoxParent: function (itemContext) {
|
|
return true;
|
|
},
|
|
|
|
isItemShrinkWrap: function (item) {
|
|
return true;
|
|
},
|
|
|
|
noBorderClasses: [
|
|
Ext.baseCSSPrefix + 'docked-noborder-top',
|
|
Ext.baseCSSPrefix + 'docked-noborder-right',
|
|
Ext.baseCSSPrefix + 'docked-noborder-bottom',
|
|
Ext.baseCSSPrefix + 'docked-noborder-left'
|
|
],
|
|
|
|
noBorderClassesSides: {
|
|
top: Ext.baseCSSPrefix + 'docked-noborder-top',
|
|
right: Ext.baseCSSPrefix + 'docked-noborder-right',
|
|
bottom: Ext.baseCSSPrefix + 'docked-noborder-bottom',
|
|
left: Ext.baseCSSPrefix + 'docked-noborder-left'
|
|
},
|
|
|
|
borderWidthProps: {
|
|
top: 'border-top-width',
|
|
right: 'border-right-width',
|
|
bottom: 'border-bottom-width',
|
|
left: 'border-left-width'
|
|
},
|
|
|
|
handleItemBorders: function() {
|
|
var me = this,
|
|
owner = me.owner,
|
|
borders, docked,
|
|
lastItems = me.lastDockedItems,
|
|
oldBorders = me.borders,
|
|
currentGeneration = owner.dockedItems.generation,
|
|
noBorderClassesSides = me.noBorderClassesSides,
|
|
borderWidthProps = me.borderWidthProps,
|
|
i, ln, item, dock, side,
|
|
collapsed = me.collapsed;
|
|
|
|
if (me.initializedBorders == currentGeneration || (owner.border && !owner.manageBodyBorders)) {
|
|
return;
|
|
}
|
|
|
|
me.initializedBorders = currentGeneration;
|
|
|
|
// Borders have to be calculated using expanded docked item collection.
|
|
me.collapsed = false;
|
|
me.lastDockedItems = docked = me.getLayoutItems();
|
|
me.collapsed = collapsed;
|
|
|
|
borders = { top: [], right: [], bottom: [], left: [] };
|
|
|
|
for (i = 0, ln = docked.length; i < ln; i++) {
|
|
item = docked[i];
|
|
dock = item.dock;
|
|
|
|
if (item.ignoreBorderManagement) {
|
|
continue;
|
|
}
|
|
|
|
if (!borders[dock].satisfied) {
|
|
borders[dock].push(item);
|
|
borders[dock].satisfied = true;
|
|
}
|
|
|
|
if (!borders.top.satisfied && dock !== 'bottom') {
|
|
borders.top.push(item);
|
|
}
|
|
if (!borders.right.satisfied && dock !== 'left') {
|
|
borders.right.push(item);
|
|
}
|
|
if (!borders.bottom.satisfied && dock !== 'top') {
|
|
borders.bottom.push(item);
|
|
}
|
|
if (!borders.left.satisfied && dock !== 'right') {
|
|
borders.left.push(item);
|
|
}
|
|
}
|
|
|
|
if (lastItems) {
|
|
for (i = 0, ln = lastItems.length; i < ln; i++) {
|
|
item = lastItems[i];
|
|
if (!item.isDestroyed && !item.ignoreBorderManagement && !owner.manageBodyBorders) {
|
|
item.removeCls(me.noBorderClasses);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (oldBorders) {
|
|
for (side in oldBorders) {
|
|
if (owner.manageBodyBorders && oldBorders[side].satisfied) {
|
|
owner.setBodyStyle(borderWidthProps[side], '');
|
|
}
|
|
}
|
|
}
|
|
|
|
for (side in borders) {
|
|
ln = borders[side].length;
|
|
if (!owner.manageBodyBorders) {
|
|
for (i = 0; i < ln; i++) {
|
|
borders[side][i].addCls(noBorderClassesSides[side]);
|
|
}
|
|
if ((!borders[side].satisfied && !owner.bodyBorder) || owner.bodyBorder === false) {
|
|
owner.addBodyCls(noBorderClassesSides[side]);
|
|
}
|
|
}
|
|
else if (borders[side].satisfied) {
|
|
owner.setBodyStyle(borderWidthProps[side], '1px');
|
|
}
|
|
}
|
|
|
|
me.borders = borders;
|
|
},
|
|
|
|
beforeLayoutCycle: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
shrinkWrap = me.sizeModels.shrinkWrap,
|
|
shrinkWrapDock = owner.shrinkWrapDock,
|
|
collapsedHorz, collapsedVert;
|
|
|
|
if (owner.collapsed) {
|
|
if (owner.collapsedVertical()) {
|
|
collapsedVert = true;
|
|
ownerContext.measureDimensions = 1;
|
|
} else {
|
|
collapsedHorz = true;
|
|
ownerContext.measureDimensions = 2;
|
|
}
|
|
}
|
|
|
|
ownerContext.collapsedVert = collapsedVert;
|
|
ownerContext.collapsedHorz = collapsedHorz;
|
|
|
|
// If we are collapsed, we want to auto-layout using the placeholder/expander
|
|
// instead of the normal items/dockedItems. This must be done here since we could
|
|
// be in a box layout w/stretchmax which sets the width/heightModel to allow it to
|
|
// control the size.
|
|
if (collapsedVert) {
|
|
ownerContext.heightModel = shrinkWrap;
|
|
} else if (collapsedHorz) {
|
|
ownerContext.widthModel = shrinkWrap;
|
|
}
|
|
|
|
shrinkWrapDock = shrinkWrapDock === true ? 3 : (shrinkWrapDock || 0);
|
|
ownerContext.shrinkWrapDockHeight = (shrinkWrapDock & 1) && ownerContext.heightModel.shrinkWrap;
|
|
ownerContext.shrinkWrapDockWidth = (shrinkWrapDock & 2) && ownerContext.widthModel.shrinkWrap;
|
|
},
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
docked = me.getLayoutItems(),
|
|
layoutContext = ownerContext.context,
|
|
dockedItemCount = docked.length,
|
|
dockedItems, i, item, itemContext, offsets,
|
|
collapsed, dock;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Cache the children as ContextItems (like a Container). Also setup to handle
|
|
// collapsed state:
|
|
collapsed = owner.getCollapsed();
|
|
if (collapsed !== me.lastCollapsedState && Ext.isDefined(me.lastCollapsedState)) {
|
|
// If we are collapsing...
|
|
if (me.owner.collapsed) {
|
|
ownerContext.isCollapsingOrExpanding = 1;
|
|
// Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken by the layout.
|
|
owner.addClsWithUI(owner.collapsedCls);
|
|
} else {
|
|
ownerContext.isCollapsingOrExpanding = 2;
|
|
// Remove the collapsed class now, before layout calculations are done.
|
|
owner.removeClsWithUI(owner.collapsedCls);
|
|
ownerContext.lastCollapsedState = me.lastCollapsedState;
|
|
}
|
|
}
|
|
me.lastCollapsedState = collapsed;
|
|
|
|
ownerContext.dockedItems = dockedItems = [];
|
|
|
|
for (i = 0; i < dockedItemCount; i++) {
|
|
item = docked[i];
|
|
if (item.rendered) {
|
|
dock = item.dock;
|
|
itemContext = layoutContext.getCmp(item);
|
|
itemContext.dockedAt = { x: 0, y: 0 };
|
|
itemContext.offsets = offsets = Ext.Element.parseBox(item.offsets || 0);
|
|
itemContext.horizontal = dock == 'top' || dock == 'bottom';
|
|
offsets.width = offsets.left + offsets.right;
|
|
offsets.height = offsets.top + offsets.bottom;
|
|
dockedItems.push(itemContext);
|
|
}
|
|
}
|
|
|
|
ownerContext.bodyContext = ownerContext.getEl('body');
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext) {
|
|
var me = this,
|
|
docked = ownerContext.dockedItems,
|
|
len = docked.length,
|
|
owner = me.owner,
|
|
frameBody = owner.frameBody,
|
|
lastHeightModel = me.lastHeightModel,
|
|
i, item, dock;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.owner.manageHeight) {
|
|
// Reset in case manageHeight gets turned on during lifecycle.
|
|
// See below for why display could be set to non-default value.
|
|
if (me.lastBodyDisplay) {
|
|
owner.body.dom.style.display = me.lastBodyDisplay = '';
|
|
}
|
|
} else {
|
|
// When manageHeight is false, the body stretches the outer el by using wide margins to force it to
|
|
// accommodate the docked items. When overflow is visible (when panel is resizable and has embedded handles),
|
|
// the body must be inline-block so as not to collapse its margins
|
|
if (me.lastBodyDisplay !== 'inline-block') {
|
|
owner.body.dom.style.display = me.lastBodyDisplay = 'inline-block';
|
|
}
|
|
|
|
if (lastHeightModel && lastHeightModel.shrinkWrap &&
|
|
!ownerContext.heightModel.shrinkWrap) {
|
|
owner.body.dom.style.marginBottom = '';
|
|
}
|
|
}
|
|
|
|
if (ownerContext.widthModel.auto) {
|
|
if (ownerContext.widthModel.shrinkWrap) {
|
|
owner.el.setWidth(null);
|
|
}
|
|
owner.body.setWidth(null);
|
|
if (frameBody) {
|
|
frameBody.setWidth(null);
|
|
}
|
|
}
|
|
if (ownerContext.heightModel.auto) {
|
|
owner.body.setHeight(null);
|
|
//owner.el.setHeight(null); Disable this for now
|
|
if (frameBody) {
|
|
frameBody.setHeight(null);
|
|
}
|
|
}
|
|
|
|
// Each time we begin (2nd+ would be due to invalidate) we need to publish the
|
|
// known contentWidth/Height if we are collapsed:
|
|
if (ownerContext.collapsedVert) {
|
|
ownerContext.setContentHeight(0);
|
|
} else if (ownerContext.collapsedHorz) {
|
|
ownerContext.setContentWidth(0);
|
|
}
|
|
|
|
// dock: 'right' items, when a panel gets narrower get "squished". Moving them to
|
|
// left:0px avoids this!
|
|
for (i = 0; i < len; i++) {
|
|
item = docked[i].target;
|
|
dock = item.dock;
|
|
|
|
if (dock == 'right') {
|
|
item.setLocalX(0);
|
|
} else if (dock != 'left') {
|
|
continue;
|
|
}
|
|
|
|
// TODO - clear width/height?
|
|
}
|
|
},
|
|
|
|
calculate: function (ownerContext) {
|
|
var me = this,
|
|
measure = me.measureAutoDimensions(ownerContext, ownerContext.measureDimensions),
|
|
state = ownerContext.state,
|
|
horzDone = state.horzDone,
|
|
vertDone = state.vertDone,
|
|
bodyContext = ownerContext.bodyContext,
|
|
framing, horz, vert, forward, backward;
|
|
|
|
// make sure we can use these value w/o calling methods to get them
|
|
ownerContext.borderInfo || ownerContext.getBorderInfo();
|
|
ownerContext.paddingInfo || ownerContext.getPaddingInfo();
|
|
ownerContext.frameInfo || ownerContext.getFrameInfo();
|
|
bodyContext.borderInfo || bodyContext.getBorderInfo();
|
|
bodyContext.paddingInfo || bodyContext.getPaddingInfo();
|
|
|
|
// On CSS3 browsers, the border and padding frame the outer el. On non-CSS3
|
|
// browsers, the outer el has no border or padding - all that appears on the
|
|
// framing elements as padding and height. In CSS3, the border size effects the
|
|
// origin of the dockedItems but the padding does not (so that must be added in
|
|
// most of the time). In non-CSS3 mode, the dockedItems are outside the framing:
|
|
//
|
|
// ... top / left dockedItems ...
|
|
// <div id="...-ml" style="padding-left: border-radius-left;">
|
|
// <div id="...-mr" style="padding-right: border-radius-right;">
|
|
// <div id="...-mc" style="padding: extra;">
|
|
// ... body ...
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// ... bottom / right dockedItems ...
|
|
//
|
|
// For the sake of sanity, we perform all the calculations in CSS3 mode. We test
|
|
// for the presence of non-CSS3 framing only when necessary.
|
|
//
|
|
if (!ownerContext.frameBorder) {
|
|
if (!(framing = ownerContext.framing)) {
|
|
ownerContext.frameBorder = ownerContext.borderInfo;
|
|
ownerContext.framePadding = ownerContext.paddingInfo;
|
|
} else {
|
|
// These values match what they would have been in CSS3.
|
|
ownerContext.frameBorder = framing.border;
|
|
ownerContext.framePadding = framing.padding;
|
|
}
|
|
}
|
|
|
|
// Start the axes so they are ready to proceed inwards (fixed-size) or outwards
|
|
// (shrinkWrap) and stash key property names as well:
|
|
horz = !horzDone &&
|
|
me.createAxis(ownerContext, measure.contentWidth, ownerContext.widthModel,
|
|
me.horzAxisProps, ownerContext.collapsedHorz);
|
|
vert = !vertDone &&
|
|
me.createAxis(ownerContext, measure.contentHeight, ownerContext.heightModel,
|
|
me.vertAxisProps, ownerContext.collapsedVert);
|
|
|
|
// We iterate forward and backward over the dockedItems at the same time based on
|
|
// whether an axis is shrinkWrap or fixed-size. For a fixed-size axis, the outer box
|
|
// axis is allocated to docked items in forward order and is reduced accordingly.
|
|
// To handle a shrinkWrap axis, the box starts at the inner (body) size and is used to
|
|
// size docked items in backwards order. This is because the last docked item shares
|
|
// an edge with the body. The item size is used to adjust the shrinkWrap axis outwards
|
|
// until the first docked item (at the outermost edge) is processed. This backwards
|
|
// order ensures that docked items never get an incorrect size for any dimension.
|
|
for (forward = 0, backward = ownerContext.dockedItems.length; backward--; ++forward) {
|
|
if (horz) {
|
|
me.dockChild(ownerContext, horz, backward, forward);
|
|
}
|
|
if (vert) {
|
|
me.dockChild(ownerContext, vert, backward, forward);
|
|
}
|
|
}
|
|
|
|
if (horz && me.finishAxis(ownerContext, horz)) {
|
|
state.horzDone = horzDone = horz;
|
|
}
|
|
|
|
if (vert && me.finishAxis(ownerContext, vert)) {
|
|
state.vertDone = vertDone = vert;
|
|
}
|
|
|
|
// Once all items are docked, the final size of the outer panel or inner body can
|
|
// be determined. If we can determine both width and height, we are done.
|
|
if (horzDone && vertDone && me.finishConstraints(ownerContext, horzDone, vertDone)) {
|
|
// Size information is published as we dock items but position is hard to do
|
|
// that way (while avoiding published multiple times) so we publish all the
|
|
// positions at the end.
|
|
me.finishPositions(ownerContext, horzDone, vertDone);
|
|
} else {
|
|
me.done = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates an axis object given the particulars. The process starts by placing the
|
|
* dockedItems in an idealized box where this method is called once for each side.
|
|
* The ideal box is defined by the CSS3 border and padding values (which account for
|
|
* the influence of border-radius). The origin (the (0,0) point) of the ideal box is
|
|
* the top-left edge of the border or the border-box. Normal dockedItems are placed
|
|
* inside this box at an offset to clear the border and padding and sit properly in
|
|
* the panel next to the body.
|
|
*
|
|
* The origin has to be started differently if the axis is in shrinkWrap mode. When
|
|
* shrink-wrapping an axis, the axis starts at the edge of the body and expands
|
|
* outwards as items are docked. This means the ideal (0,0) for shrinkWrap is on the
|
|
* top-left corner of the body.
|
|
*
|
|
* The following diagram illustrates this using the vertical axis.
|
|
*
|
|
* +---------------------------+ 10px (border)
|
|
* | |
|
|
* | xxxxxxxxxxxxxxxxxxxxxxx | 5px (padding) shrinkWrap other
|
|
* | +=====================+ | -50 15
|
|
* | | Header | | 30px
|
|
* | | | |
|
|
* | +=====================+ |
|
|
* | +---------------------+ | -20 45
|
|
* | | tbar | | 20 px
|
|
* | +---------------------+ |
|
|
* | +---------------------+ | 0 65
|
|
* | | Body | | 100px
|
|
* | | | |
|
|
* | | | |
|
|
* | +---------------------+ |
|
|
* | +---------------------+ | 100 165
|
|
* | | bbar | | 15px
|
|
* | +---------------------+ |
|
|
* | xxxxxxxxxxxxxxxxxxxxxxx | 5px
|
|
* | |
|
|
* +---------------------------+ 10px
|
|
*
|
|
* These are sufficient to determine sizes of things, but to finalize this process
|
|
* and assign proper positions, the tentative coordinates have to be adjusted by an
|
|
* amount appropriate for the item. Because dockedItems are position:absolute, they
|
|
* sit inside the border and so must be adjusted for padding. The body is different
|
|
* because it is position:relative and so it naturally sits inside the padding and
|
|
* the padding must not be included in its position.
|
|
*
|
|
* Headers and footers that use `ignoreParentFrame` interact with this process by
|
|
* moving themselves outside the border and padding. So in the above diagram, the
|
|
* Header would move up by 15px and *everything else* would move up by 10px. When
|
|
* shrinkWrap is taking place, the 10px of border on the top is removed from the
|
|
* height as well.
|
|
*
|
|
* The bbar behaves slightly different when it is `ignoreParentFrame`. In shrinkWrap
|
|
* mode, it alone would move down by the padding and the bottom border would not be
|
|
* included in the height. Otherwise, the bbar would be moved down 15px (since the
|
|
* edge is fixed) and the next dockedItem would be placed at, or the body would be
|
|
* stretched down to, 5px (padding) pixels above the bbar.
|
|
*
|
|
* @private
|
|
*/
|
|
createAxis: function (ownerContext, contentSize, sizeModel, axisProps, collapsedAxis) {
|
|
var me = this,
|
|
begin = 0,
|
|
owner = me.owner,
|
|
maxSize = owner[axisProps.maxSize],
|
|
minSize = owner[axisProps.minSize] || 0,
|
|
dockBegin = axisProps.dockBegin,
|
|
dockEnd = axisProps.dockEnd,
|
|
posProp = axisProps.pos,
|
|
sizeProp = axisProps.size,
|
|
hasMaxSize = maxSize != null, // exactly the same as "maxSize !== null && maxSize !== undefined"
|
|
shrinkWrap = sizeModel.shrinkWrap,
|
|
bodyContext, framing, padding, end;
|
|
|
|
if (shrinkWrap) {
|
|
// End position before adding docks around the content is content size plus the body borders in this axis.
|
|
// If collapsed in this axis, the body borders will not be shown.
|
|
if (collapsedAxis) {
|
|
end = 0;
|
|
} else {
|
|
bodyContext = ownerContext.bodyContext;
|
|
end = contentSize + bodyContext.borderInfo[sizeProp];
|
|
}
|
|
} else {
|
|
framing = ownerContext.frameBorder;
|
|
padding = ownerContext.framePadding;
|
|
|
|
begin = framing[dockBegin] + padding[dockBegin];
|
|
end = ownerContext.getProp(sizeProp) - (framing[dockEnd] + padding[dockEnd]);
|
|
}
|
|
|
|
return {
|
|
shrinkWrap: sizeModel.shrinkWrap,
|
|
sizeModel: sizeModel,
|
|
// An axis tracks start and end+1 px positions. eg 0 to 10 for 10px high
|
|
initialBegin: begin,
|
|
begin: begin,
|
|
end: end,
|
|
collapsed: collapsedAxis,
|
|
horizontal: axisProps.horizontal,
|
|
ignoreFrameBegin: null,
|
|
ignoreFrameEnd: null,
|
|
initialSize: end - begin,
|
|
maxChildSize: 0,
|
|
hasMinMaxConstraints: (minSize || hasMaxSize) && sizeModel.shrinkWrap,
|
|
minSize: minSize,
|
|
maxSize: hasMaxSize ? maxSize : 1e9,
|
|
bodyPosProp: me.owner.manageHeight ? posProp : axisProps.marginBegin,
|
|
dockBegin: dockBegin, // 'left' or 'top'
|
|
dockEnd: dockEnd, // 'right' or 'end'
|
|
posProp: posProp, // 'x' or 'y'
|
|
sizeProp: sizeProp, // 'width' or 'height'
|
|
setSize: axisProps.setSize,
|
|
shrinkWrapDock: ownerContext[axisProps.shrinkWrapDock],
|
|
sizeModelName: axisProps.sizeModel,
|
|
dockedPixelsEnd: 0
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Docks a child item on the specified axis. This boils down to determining if the item
|
|
* is docked at the "beginning" of the axis ("left" if horizontal, "top" if vertical),
|
|
* the "end" of the axis ("right" if horizontal, "bottom" if vertical) or stretches
|
|
* along the axis ("top" or "bottom" if horizontal, "left" or "right" if vertical). It
|
|
* also has to differentiate between fixed and shrinkWrap sized dimensions.
|
|
* @private
|
|
*/
|
|
dockChild: function (ownerContext, axis, backward, forward) {
|
|
var me = this,
|
|
itemContext = ownerContext.dockedItems[axis.shrinkWrap ? backward : forward],
|
|
item = itemContext.target,
|
|
dock = item.dock, // left/top/right/bottom
|
|
sizeProp = axis.sizeProp,
|
|
pos, size;
|
|
|
|
if (item.ignoreParentFrame && ownerContext.isCollapsingOrExpanding) {
|
|
// collapsed window header margins may differ from expanded window header margins
|
|
// so we need to make sure the old cached values are not used in axis calculations
|
|
itemContext.clearMarginCache();
|
|
}
|
|
|
|
itemContext.marginInfo || itemContext.getMarginInfo(); // get marginInfo ready
|
|
|
|
if (dock == axis.dockBegin) {
|
|
if (axis.shrinkWrap) {
|
|
pos = me.dockOutwardBegin(ownerContext, itemContext, item, axis);
|
|
} else {
|
|
pos = me.dockInwardBegin(ownerContext, itemContext, item, axis);
|
|
}
|
|
} else if (dock == axis.dockEnd) {
|
|
if (axis.shrinkWrap) {
|
|
pos = me.dockOutwardEnd(ownerContext, itemContext, item, axis);
|
|
} else {
|
|
pos = me.dockInwardEnd(ownerContext, itemContext, item, axis);
|
|
}
|
|
} else {
|
|
if (axis.shrinkWrapDock) {
|
|
// we are still shrinkwrapping transversely... so we need to include the
|
|
// size of this item in the max calculation
|
|
size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp];
|
|
axis.maxChildSize = Math.max(axis.maxChildSize, size);
|
|
pos = 0;
|
|
} else {
|
|
pos = me.dockStretch(ownerContext, itemContext, item, axis);
|
|
}
|
|
}
|
|
|
|
itemContext.dockedAt[axis.posProp] = pos;
|
|
},
|
|
|
|
/**
|
|
* Docks an item on a fixed-size axis at the "beginning". The "beginning" of the horizontal
|
|
* axis is "left" and the vertical is "top". For a fixed-size axis, the size works from
|
|
* the outer element (the panel) towards the body.
|
|
* @private
|
|
*/
|
|
dockInwardBegin: function (ownerContext, itemContext, item, axis) {
|
|
var pos = axis.begin,
|
|
sizeProp = axis.sizeProp,
|
|
ignoreParentFrame = item.ignoreParentFrame,
|
|
delta,
|
|
size,
|
|
dock;
|
|
|
|
if (ignoreParentFrame) {
|
|
axis.ignoreFrameBegin = itemContext;
|
|
dock = item.dock;
|
|
|
|
// We need to move everything up by the border-width.
|
|
delta = ownerContext.frameBorder[dock];
|
|
|
|
// We need to move the header "up" by the padding as well.
|
|
pos -= delta + ownerContext.framePadding[dock];
|
|
}
|
|
|
|
if (!item.overlay) {
|
|
size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp];
|
|
axis.begin += size;
|
|
if (ignoreParentFrame) {
|
|
axis.begin -= delta;
|
|
}
|
|
}
|
|
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* Docks an item on a fixed-size axis at the "end". The "end" of the horizontal axis is
|
|
* "right" and the vertical is "bottom".
|
|
* @private
|
|
*/
|
|
dockInwardEnd: function (ownerContext, itemContext, item, axis) {
|
|
var sizeProp = axis.sizeProp,
|
|
size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp],
|
|
pos = axis.end - size,
|
|
frameEnd;
|
|
|
|
if (!item.overlay) {
|
|
axis.end = pos;
|
|
}
|
|
|
|
if (item.ignoreParentFrame) {
|
|
axis.ignoreFrameEnd = itemContext;
|
|
frameEnd = ownerContext.frameBorder[item.dock];
|
|
pos += frameEnd + ownerContext.framePadding[item.dock];
|
|
axis.end += frameEnd;
|
|
}
|
|
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* Docks an item on a shrinkWrap axis at the "beginning". The "beginning" of the horizontal
|
|
* axis is "left" and the vertical is "top". For a shrinkWrap axis, the size works from
|
|
* the body outward to the outermost element (the panel).
|
|
*
|
|
* During the docking process, coordinates are allowed to be negative. We start with the
|
|
* body at (0,0) so items docked "top" or "left" will simply be assigned negative x/y. In
|
|
* the {@link #finishPositions} method these are corrected and framing is added. This way
|
|
* the correction is applied as a simple translation of delta x/y on all coordinates to
|
|
* bring the origin back to (0,0).
|
|
* @private
|
|
*/
|
|
dockOutwardBegin: function (ownerContext, itemContext, item, axis) {
|
|
var pos = axis.begin,
|
|
sizeProp = axis.sizeProp,
|
|
size;
|
|
|
|
if (axis.collapsed) {
|
|
axis.ignoreFrameBegin = axis.ignoreFrameEnd = itemContext;
|
|
} else if (item.ignoreParentFrame) {
|
|
axis.ignoreFrameBegin = itemContext;
|
|
}
|
|
// NOTE - When shrinkWrapping an ignoreParentFrame, this must be the last item
|
|
// on the axis. Since that is so, we let finishAxis take this in to account.
|
|
|
|
if (!item.overlay) {
|
|
size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp];
|
|
pos -= size;
|
|
axis.begin = pos;
|
|
}
|
|
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* Docks an item on a shrinkWrap axis at the "end". The "end" of the horizontal axis is
|
|
* "right" and the vertical is "bottom".
|
|
* @private
|
|
*/
|
|
dockOutwardEnd: function (ownerContext, itemContext, item, axis) {
|
|
var pos = axis.end,
|
|
sizeProp = axis.sizeProp,
|
|
size;
|
|
|
|
size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp];
|
|
|
|
if (axis.collapsed) {
|
|
axis.ignoreFrameBegin = axis.ignoreFrameEnd = itemContext;
|
|
} else if (item.ignoreParentFrame) {
|
|
axis.ignoreFrameEnd = itemContext;
|
|
}
|
|
// NOTE - When shrinkWrapping an ignoreParentFrame, this must be the last item
|
|
// on the axis. Since that is so, we let finishAxis take this in to account.
|
|
|
|
if (!item.overlay) {
|
|
axis.end = pos + size;
|
|
axis.dockedPixelsEnd += size;
|
|
}
|
|
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* Docks an item that might stretch across an axis. This is done for dock "top" and
|
|
* "bottom" items on the horizontal axis and dock "left" and "right" on the vertical.
|
|
* @private
|
|
*/
|
|
dockStretch: function (ownerContext, itemContext, item, axis) {
|
|
var dock = item.dock, // left/top/right/bottom (also used to index padding/border)
|
|
sizeProp = axis.sizeProp, // 'width' or 'height'
|
|
horizontal = dock == 'top' || dock == 'bottom',
|
|
border = ownerContext.frameBorder,
|
|
offsets = itemContext.offsets,
|
|
padding = ownerContext.framePadding,
|
|
endProp = horizontal ? 'right' : 'bottom',
|
|
startProp = horizontal ? 'left' : 'top',
|
|
pos = axis.begin + offsets[startProp],
|
|
margin, size;
|
|
|
|
if (item.stretch !== false) {
|
|
size = axis.end - pos - offsets[endProp];
|
|
|
|
if (item.ignoreParentFrame) {
|
|
// In CSS3, the border and padding need to be ignored specifically. In
|
|
// non-CSS3 / framing mode, the border and padding will be 0 **but** the
|
|
// header is not rendered inside the framing elements and so we do not
|
|
// want to do anything anyway!
|
|
pos -= padding[startProp] + border[startProp];
|
|
size += padding[sizeProp] + border[sizeProp];
|
|
}
|
|
|
|
margin = itemContext.marginInfo;
|
|
size -= margin[sizeProp];
|
|
|
|
itemContext[axis.setSize](size);
|
|
}
|
|
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* Finishes the calculation of an axis by determining its size. In non-shrink-wrap
|
|
* cases, this is also where we set the body size.
|
|
* @private
|
|
*/
|
|
finishAxis: function (ownerContext, axis) {
|
|
// If the maxChildSize is NaN it means at some point we tried to determine
|
|
// The size of a docked item but we couldn't, so just jump out straight
|
|
// away before doing any other processing
|
|
if (isNaN(axis.maxChildSize)) {
|
|
return false;
|
|
}
|
|
|
|
var axisBegin = axis.begin,
|
|
size = axis.end - axisBegin,
|
|
collapsed = axis.collapsed,
|
|
setSizeMethod = axis.setSize,
|
|
beginName = axis.dockBegin, // left or top
|
|
endName = axis.dockEnd, // right or bottom
|
|
padding = ownerContext.framePadding,
|
|
border = ownerContext.frameBorder,
|
|
borderBegin = border[beginName],
|
|
framing = ownerContext.framing,
|
|
framingBegin = framing && framing[beginName],
|
|
// The padding is in play unless the axis is collapsed.
|
|
paddingBegin = collapsed ? 0 : padding[beginName],
|
|
sizeProp = axis.sizeProp,
|
|
ignoreFrameBegin = axis.ignoreFrameBegin,
|
|
ignoreFrameEnd = axis.ignoreFrameEnd,
|
|
bodyContext = ownerContext.bodyContext,
|
|
extraPaddingBegin = Math.max(borderBegin + paddingBegin - framingBegin, 0),
|
|
bodyPos, bodySize, delta, dirty;
|
|
|
|
if (axis.shrinkWrap) {
|
|
// Since items docked left/top on a shrinkWrap axis go into negative coordinates,
|
|
// we apply a delta to all coordinates to adjust their relative origin back to
|
|
// a (0,0) inside the border.
|
|
|
|
bodySize = axis.initialSize;
|
|
|
|
if (framing) {
|
|
// In CSS3 mode, things are compartively simple because "framing" is just
|
|
// borders and padding. In non-CSS3 mode, however, the framing elements
|
|
// are given a size equal to the max of the border-width and border-radius
|
|
// and this pushes the body down accordingly. Further, the dockedItems are
|
|
// all rendered outside the framing elements, so their origin equals the
|
|
// ideal box origin. To translate this to match CSS3, we have to add on
|
|
// the border-top.
|
|
|
|
delta = -axisBegin + borderBegin + paddingBegin;
|
|
bodyPos = delta - framingBegin - extraPaddingBegin;
|
|
} else {
|
|
bodyPos = -axisBegin;
|
|
delta = bodyPos + paddingBegin;
|
|
}
|
|
|
|
if (!collapsed) {
|
|
size += padding[sizeProp];
|
|
}
|
|
|
|
if (ignoreFrameBegin) {
|
|
// When some component ignores the begin framing, we move everything "up"
|
|
// by that amount of framing. We also do not include that amount of the
|
|
// framing in the shrinkWrap size.
|
|
delta -= borderBegin;
|
|
bodyPos -= borderBegin;
|
|
|
|
// The item ignoring the framing must also escape the padding. Since the
|
|
// axis.delta includes the padding and we want to apply this to only the
|
|
// one item, we just poke its dockedAt.x/y property so that when we add
|
|
// axis.begin the padding will cancel out. (Note: when we are collapsed
|
|
// paddingBegin will be 0).
|
|
|
|
ignoreFrameBegin.dockedAt[axis.posProp] -= paddingBegin;
|
|
} else {
|
|
size += borderBegin;
|
|
}
|
|
|
|
if (collapsed) {
|
|
// in this case "ignoreFrameBegin === ignoreFrameEnd" so we can take the
|
|
// special cases out of the mix here...
|
|
} else if (ignoreFrameEnd) {
|
|
// When a component ignores the end framing, we simply move it further
|
|
// "down" by the end padding and we do not add the end framing to the
|
|
// shrinkWrap size.
|
|
ignoreFrameEnd.dockedAt[axis.posProp] += padding[endName];
|
|
} else {
|
|
size += border[endName];
|
|
}
|
|
|
|
axis.size = size; // we have to wait for min/maxWidth/Height processing
|
|
|
|
if (!axis.horizontal && !this.owner.manageHeight) {
|
|
// the height of the bodyEl will give the proper height to the outerEl so
|
|
// we don't need to set heights in the DOM
|
|
dirty = false;
|
|
}
|
|
} else {
|
|
// For a fixed-size axis, we started at the outer box and already have the
|
|
// proper origin... almost... except for the owner's border.
|
|
if (framing) {
|
|
// since dockedItems are rendered outside the framing, they have the
|
|
// proper origin already:
|
|
delta = 0;
|
|
bodyPos = axisBegin - framingBegin - extraPaddingBegin;
|
|
} else {
|
|
delta = -borderBegin;
|
|
bodyPos = axisBegin - paddingBegin - borderBegin;
|
|
}
|
|
|
|
// Body size is remaining space between ends of Axis.
|
|
bodySize = size;
|
|
}
|
|
|
|
axis.delta = delta;
|
|
bodyContext[setSizeMethod](bodySize, dirty);
|
|
bodyContext.setProp(axis.bodyPosProp, bodyPos);
|
|
|
|
return !isNaN(size);
|
|
},
|
|
|
|
beforeInvalidateShrinkWrapDock: function(itemContext, options){
|
|
var sizeModelName = options.axis.sizeModelName;
|
|
if (!itemContext[sizeModelName].constrainedMin) {
|
|
// if the child hit a min constraint, it needs to be at its configured size, so
|
|
// we leave the sizeModel alone
|
|
itemContext[sizeModelName] = Ext.layout.SizeModel.calculated;
|
|
}
|
|
},
|
|
|
|
afterInvalidateShrinkWrapDock: function(itemContext, options){
|
|
var axis = options.axis,
|
|
me = options.layout,
|
|
pos;
|
|
|
|
if (itemContext[axis.sizeModelName].calculated) {
|
|
pos = me.dockStretch(options.ownerContext, itemContext, itemContext.target, axis);
|
|
itemContext.setProp(axis.posProp, axis.delta + pos);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finishes processing of each axis by applying the min/max size constraints.
|
|
* @private
|
|
*/
|
|
finishConstraints: function (ownerContext, horz, vert) {
|
|
var me = this,
|
|
sizeModels = me.sizeModels,
|
|
publishWidth = horz.shrinkWrap,
|
|
publishHeight = vert.shrinkWrap,
|
|
owner = me.owner,
|
|
dirty, height, width, heightModel, widthModel, size,
|
|
minSize, maxSize, maxChildSize, desiredSize;
|
|
|
|
// In these calculations, maxChildSize will only be > 0 in the scenario where
|
|
// we are dock shrink wrapping in that direction, otherwise it is not measured.
|
|
// As such, the additions are done to simplify the logic, even though in most
|
|
// cases, it will have no impact on the overall result.
|
|
|
|
if (publishWidth) {
|
|
size = horz.size;
|
|
minSize = horz.collapsed ? 0 : horz.minSize;
|
|
maxSize = horz.maxSize;
|
|
maxChildSize = horz.maxChildSize;
|
|
desiredSize = Math.max(size, maxChildSize);
|
|
|
|
if (desiredSize > maxSize) {
|
|
widthModel = sizeModels.constrainedMax;
|
|
width = maxSize;
|
|
} else if (desiredSize < minSize) {
|
|
widthModel = sizeModels.constrainedMin;
|
|
width = minSize;
|
|
} else if (size < maxChildSize) {
|
|
widthModel = sizeModels.constrainedDock;
|
|
owner.dockConstrainedWidth = width = maxChildSize;
|
|
} else {
|
|
width = size;
|
|
}
|
|
}
|
|
|
|
if (publishHeight) {
|
|
size = vert.size;
|
|
minSize = vert.collapsed ? 0 : vert.minSize;
|
|
maxSize = vert.maxSize;
|
|
maxChildSize = vert.maxChildSize;
|
|
// For vertical docks, their weighting means the height is affected by top/bottom
|
|
// docked items, so we need to subtract them here
|
|
desiredSize = Math.max(size, maxChildSize + size - vert.initialSize);
|
|
|
|
if (desiredSize > maxSize) {
|
|
heightModel = sizeModels.constrainedMax;
|
|
height = maxSize;
|
|
} else if (desiredSize < minSize) {
|
|
heightModel = sizeModels.constrainedMin;
|
|
height = minSize;
|
|
} else if (size < maxChildSize) {
|
|
heightModel = sizeModels.constrainedDock;
|
|
owner.dockConstrainedHeight = height = maxChildSize;
|
|
} else {
|
|
if (!ownerContext.collapsedVert && !owner.manageHeight) {
|
|
// height of the outerEl is provided by the height (including margins)
|
|
// of the bodyEl, so this value does not need to be written to the DOM
|
|
dirty = false;
|
|
|
|
// so long as we set top and bottom margins on the bodyEl!
|
|
ownerContext.bodyContext.setProp('margin-bottom', vert.dockedPixelsEnd);
|
|
}
|
|
|
|
height = size;
|
|
}
|
|
}
|
|
|
|
// Handle the constraints...
|
|
|
|
if (widthModel || heightModel) {
|
|
// See ContextItem#init for an analysis of why this case is special. Basically,
|
|
// in this case, we only know the width and the height could be anything.
|
|
if (widthModel && heightModel &&
|
|
widthModel.constrainedMax && heightModel.constrainedByMin) {
|
|
ownerContext.invalidate({ widthModel: widthModel });
|
|
return false;
|
|
}
|
|
|
|
// To process a width or height other than that to which we have shrinkWrapped,
|
|
// we need to invalidate our component and carry forward w/these constrains...
|
|
// unless the ownerLayout wants these results and will invalidate us anyway.
|
|
if (!ownerContext.widthModel.calculatedFromShrinkWrap &&
|
|
!ownerContext.heightModel.calculatedFromShrinkWrap) {
|
|
// nope, just us to handle the constraint...
|
|
ownerContext.invalidate({ widthModel: widthModel, heightModel: heightModel });
|
|
return false;
|
|
}
|
|
|
|
// We have a constraint to deal with, so we just adjust the size models and
|
|
// allow the ownerLayout to invalidate us with its contribution to our final
|
|
// size...
|
|
} else {
|
|
// We're not invalidating, the ownerContext, so if we're shrink wrapping we'll need to
|
|
// tell any docked items to invalidate themselves if necessary.'
|
|
me.invalidateAxes(ownerContext, horz, vert);
|
|
|
|
}
|
|
|
|
// we only publish the sizes if we are not invalidating the result...
|
|
|
|
if (publishWidth) {
|
|
ownerContext.setWidth(width);
|
|
if (widthModel) {
|
|
ownerContext.widthModel = widthModel; // important to the ownerLayout
|
|
}
|
|
}
|
|
if (publishHeight) {
|
|
ownerContext.setHeight(height, dirty);
|
|
if (heightModel) {
|
|
ownerContext.heightModel = heightModel; // important to the ownerLayout
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
*
|
|
* The default weighting of docked items produces this arrangement:
|
|
*
|
|
* +--------------------------------------------+
|
|
* | Top 1 |
|
|
* +--------------------------------------------+
|
|
* | Top 2 |
|
|
* +-----+-----+--------------------+-----+-----+
|
|
* | | | | | |
|
|
* | | | | | |
|
|
* | | | | R | R |
|
|
* | L | L | | I | I |
|
|
* | E | E | | G | G |
|
|
* | F | F | | H | H |
|
|
* | T | T | | T | T |
|
|
* | | | | | |
|
|
* | 2 | 1 | | 1 | 2 |
|
|
* | | | | | |
|
|
* | | | | | |
|
|
* +-----+-----+--------------------+-----+-----+
|
|
* | Bottom 1 |
|
|
* +--------------------------------------------+
|
|
* | Bottom 2 |
|
|
* +--------------------------------------------+
|
|
*
|
|
* So when we are shrinkWrapDock on the horizontal, the stretch size for top/bottom
|
|
* docked items is the final axis size. For the vertical axis, however, the stretch
|
|
*
|
|
*/
|
|
invalidateAxes: function(ownerContext, horz, vert){
|
|
var before = this.beforeInvalidateShrinkWrapDock,
|
|
after = this.afterInvalidateShrinkWrapDock,
|
|
horzSize = horz.end - horz.begin,
|
|
vertSize = vert.initialSize,
|
|
invalidateHorz = horz.shrinkWrapDock && horz.maxChildSize < horzSize,
|
|
invalidateVert = vert.shrinkWrapDock && vert.maxChildSize < vertSize,
|
|
dockedItems, len, i, itemContext, itemSize, isHorz, axis, sizeProp;
|
|
|
|
if (invalidateHorz || invalidateVert) {
|
|
if (invalidateVert) {
|
|
// For vertical, we need to reset the initial position because they are affected
|
|
// by the horizontally docked items
|
|
vert.begin = vert.initialBegin;
|
|
vert.end = vert.begin + vert.initialSize;
|
|
}
|
|
dockedItems = ownerContext.dockedItems;
|
|
for (i = 0, len = dockedItems.length; i < len; ++i) {
|
|
itemContext = dockedItems[i];
|
|
isHorz = itemContext.horizontal;
|
|
axis = null;
|
|
if (invalidateHorz && isHorz) {
|
|
sizeProp = horz.sizeProp;
|
|
itemSize = horzSize;
|
|
axis = horz;
|
|
} else if (invalidateVert && !isHorz) {
|
|
sizeProp = vert.sizeProp;
|
|
itemSize = vertSize;
|
|
axis = vert;
|
|
}
|
|
|
|
if (axis) {
|
|
// subtract any margins
|
|
itemSize -= itemContext.getMarginInfo()[sizeProp];
|
|
if (itemSize !== itemContext.props[sizeProp]) {
|
|
itemContext.invalidate({
|
|
before: before,
|
|
after: after,
|
|
axis: axis,
|
|
ownerContext: ownerContext,
|
|
layout: this
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finishes the calculation by setting positions on the body and all of the items.
|
|
* @private
|
|
*/
|
|
finishPositions: function (ownerContext, horz, vert) {
|
|
var dockedItems = ownerContext.dockedItems,
|
|
length = dockedItems.length,
|
|
deltaX = horz.delta,
|
|
deltaY = vert.delta,
|
|
index, itemContext;
|
|
|
|
for (index = 0; index < length; ++index) {
|
|
itemContext = dockedItems[index];
|
|
|
|
itemContext.setProp('x', deltaX + itemContext.dockedAt.x);
|
|
itemContext.setProp('y', deltaY + itemContext.dockedAt.y);
|
|
}
|
|
},
|
|
|
|
finishedLayout: function(ownerContext) {
|
|
var me = this,
|
|
target = ownerContext.target;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (!ownerContext.animatePolicy) {
|
|
if (ownerContext.isCollapsingOrExpanding === 1) {
|
|
target.afterCollapse(false);
|
|
} else if (ownerContext.isCollapsingOrExpanding === 2) {
|
|
target.afterExpand(false);
|
|
}
|
|
}
|
|
},
|
|
|
|
getAnimatePolicy: function(ownerContext) {
|
|
var me = this,
|
|
lastCollapsedState, policy;
|
|
|
|
if (ownerContext.isCollapsingOrExpanding == 1) {
|
|
lastCollapsedState = me.lastCollapsedState;
|
|
} else if (ownerContext.isCollapsingOrExpanding == 2) {
|
|
lastCollapsedState = ownerContext.lastCollapsedState;
|
|
}
|
|
|
|
if (lastCollapsedState == 'left' || lastCollapsedState == 'right') {
|
|
policy = me.horizontalCollapsePolicy;
|
|
} else if (lastCollapsedState == 'top' || lastCollapsedState == 'bottom') {
|
|
policy = me.verticalCollapsePolicy;
|
|
}
|
|
|
|
return policy;
|
|
},
|
|
|
|
/**
|
|
* Retrieve an ordered and/or filtered array of all docked Components.
|
|
* @param {String} [order='render'] The desired ordering of the items ('render' or 'visual').
|
|
* @param {Boolean} [beforeBody] An optional flag to limit the set of items to only those
|
|
* before the body (true) or after the body (false). All components are returned by
|
|
* default.
|
|
* @return {Ext.Component[]} An array of components.
|
|
* @protected
|
|
*/
|
|
getDockedItems: function(order, beforeBody) {
|
|
var me = this,
|
|
renderedOnly = (order === 'visual'),
|
|
all = renderedOnly ? Ext.ComponentQuery.query('[rendered]', me.owner.dockedItems.items) : me.owner.dockedItems.items,
|
|
sort = all && all.length && order !== false,
|
|
renderOrder,
|
|
dock, dockedItems, i, isBefore, length;
|
|
|
|
if (beforeBody == null) {
|
|
dockedItems = sort && !renderedOnly ? all.slice() : all;
|
|
} else {
|
|
dockedItems = [];
|
|
|
|
for (i = 0, length = all.length; i < length; ++i) {
|
|
dock = all[i].dock;
|
|
isBefore = (dock == 'top' || dock == 'left');
|
|
if (beforeBody ? isBefore : !isBefore) {
|
|
dockedItems.push(all[i]);
|
|
}
|
|
}
|
|
|
|
sort = sort && dockedItems.length;
|
|
}
|
|
|
|
if (sort) {
|
|
renderOrder = (order = order || 'render') == 'render';
|
|
Ext.Array.sort(dockedItems, function(a, b) {
|
|
var aw,
|
|
bw;
|
|
|
|
// If the two items are on opposite sides of the body, they must not be sorted by any weight value:
|
|
// For rendering purposes, left/top *always* sorts before right/bottom
|
|
if (renderOrder && ((aw = me.owner.dockOrder[a.dock]) !== (bw = me.owner.dockOrder[b.dock]))) {
|
|
|
|
// The two dockOrder values cancel out when two items are on opposite sides.
|
|
if (!(aw + bw)) {
|
|
return aw - bw;
|
|
}
|
|
}
|
|
|
|
aw = me.getItemWeight(a, order);
|
|
bw = me.getItemWeight(b, order);
|
|
if ((aw !== undefined) && (bw !== undefined)) {
|
|
return aw - bw;
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
return dockedItems || [];
|
|
},
|
|
|
|
getItemWeight: function (item, order) {
|
|
var weight = item.weight || this.owner.defaultDockWeights[item.dock];
|
|
return weight[order] || weight;
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Returns an array containing all the **visible** docked items inside this layout's owner Panel
|
|
* @return {Array} An array containing all the **visible** docked items of the Panel
|
|
*/
|
|
getLayoutItems : function() {
|
|
var me = this,
|
|
items,
|
|
itemCount,
|
|
item,
|
|
i,
|
|
result;
|
|
|
|
if (me.owner.collapsed) {
|
|
result = me.owner.getCollapsedDockedItems();
|
|
} else {
|
|
items = me.getDockedItems('visual');
|
|
itemCount = items.length;
|
|
result = [];
|
|
for (i = 0; i < itemCount; i++) {
|
|
item = items[i];
|
|
if (!item.hidden) {
|
|
result.push(item);
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Content size includes padding but not borders, so subtract them off
|
|
measureContentWidth: function (ownerContext) {
|
|
var bodyContext = ownerContext.bodyContext;
|
|
return bodyContext.el.getWidth() - bodyContext.getBorderInfo().width;
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
var bodyContext = ownerContext.bodyContext;
|
|
return bodyContext.el.getHeight() - bodyContext.getBorderInfo().height;
|
|
},
|
|
|
|
redoLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner;
|
|
|
|
// If we are collapsing...
|
|
if (ownerContext.isCollapsingOrExpanding == 1) {
|
|
if (owner.reExpander) {
|
|
owner.reExpander.el.show();
|
|
}
|
|
// Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken by the layout.
|
|
owner.addClsWithUI(owner.collapsedCls);
|
|
ownerContext.redo(true);
|
|
} else if (ownerContext.isCollapsingOrExpanding == 2) {
|
|
// Remove the collapsed class now, before layout calculations are done.
|
|
owner.removeClsWithUI(owner.collapsedCls);
|
|
ownerContext.bodyContext.redo();
|
|
}
|
|
},
|
|
|
|
// @private override inherited.
|
|
// We need to render in the correct order, top/left before bottom/right
|
|
renderChildren: function() {
|
|
var me = this,
|
|
items = me.getDockedItems(),
|
|
target = me.getRenderTarget();
|
|
|
|
me.handleItemBorders();
|
|
|
|
me.renderItems(items, target);
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Render the top and left docked items before any existing DOM nodes in our render target,
|
|
* and then render the right and bottom docked items after. This is important, for such things
|
|
* as tab stops and ARIA readers, that the DOM nodes are in a meaningful order.
|
|
* Our collection of docked items will already be ordered via Panel.getDockedItems().
|
|
*/
|
|
renderItems: function(items, target) {
|
|
var me = this,
|
|
dockedItemCount = items.length,
|
|
itemIndex = 0,
|
|
correctPosition = 0,
|
|
staticNodeCount = 0,
|
|
targetNodes = me.getRenderTarget().dom.childNodes,
|
|
targetChildCount = targetNodes.length,
|
|
i, j, targetChildNode, item;
|
|
|
|
// Calculate the number of DOM nodes in our target that are not our docked items
|
|
for (i = 0, j = 0; i < targetChildCount; i++) {
|
|
targetChildNode = targetNodes[i];
|
|
if (Ext.fly(targetChildNode).hasCls(Ext.baseCSSPrefix + 'resizable-handle')) {
|
|
break;
|
|
}
|
|
for (j = 0; j < dockedItemCount; j++) {
|
|
item = items[j];
|
|
if (item.rendered && item.el.dom === targetChildNode) {
|
|
break;
|
|
}
|
|
}
|
|
// Walked off the end of the docked items without matching the found child node;
|
|
// Then it's a static node.
|
|
if (j === dockedItemCount) {
|
|
staticNodeCount++;
|
|
}
|
|
}
|
|
|
|
// Now we go through our docked items and render/move them
|
|
for (; itemIndex < dockedItemCount; itemIndex++, correctPosition++) {
|
|
item = items[itemIndex];
|
|
|
|
// If we're now at the first right/bottom docked item, we jump over the body element.
|
|
//
|
|
// TODO: This is affected if users provide custom weight values to their
|
|
// docked items, which puts it out of (t,l,r,b) order. Avoiding a second
|
|
// sort operation here, for now, in the name of performance. getDockedItems()
|
|
// needs the sort operation not just for this layout-time rendering, but
|
|
// also for getRefItems() to return a logical ordering (FocusManager, CQ, et al).
|
|
if (itemIndex === correctPosition && (item.dock === 'right' || item.dock === 'bottom')) {
|
|
correctPosition += staticNodeCount;
|
|
}
|
|
|
|
// Same logic as Layout.renderItems()
|
|
if (item && !item.rendered) {
|
|
me.renderItem(item, target, correctPosition);
|
|
}
|
|
else if (!me.isValidParent(item, target, correctPosition)) {
|
|
me.moveItem(item, target, correctPosition);
|
|
}
|
|
}
|
|
},
|
|
|
|
undoLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner;
|
|
|
|
// If we are collapsing...
|
|
if (ownerContext.isCollapsingOrExpanding == 1) {
|
|
|
|
// We do not want to see the re-expander header until the final collapse is complete
|
|
if (owner.reExpander) {
|
|
owner.reExpander.el.hide();
|
|
}
|
|
// Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken by the layout.
|
|
owner.removeClsWithUI(owner.collapsedCls);
|
|
ownerContext.undo(true);
|
|
} else if (ownerContext.isCollapsingOrExpanding == 2) {
|
|
// Remove the collapsed class now, before layout calculations are done.
|
|
owner.addClsWithUI(owner.collapsedCls);
|
|
ownerContext.bodyContext.undo();
|
|
}
|
|
},
|
|
|
|
sizePolicy: {
|
|
nostretch: {
|
|
setsWidth: 0,
|
|
setsHeight: 0
|
|
},
|
|
|
|
horz: { // item goes horizontally (top or bottom docked)
|
|
shrinkWrap: {
|
|
// This is how we manage the width of a top/bottom docked item when its
|
|
// shrinkWrapWidth and ours need to be maxed (calculatedFromShrinkWrap)
|
|
setsWidth: 1,
|
|
setsHeight: 0,
|
|
readsWidth: 1
|
|
},
|
|
stretch: {
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
}
|
|
},
|
|
|
|
vert: { // item goes vertically (left or right docked)
|
|
shrinkWrap: {
|
|
setsWidth: 0,
|
|
setsHeight: 1,
|
|
readsHeight: 1
|
|
},
|
|
stretch: {
|
|
setsWidth: 0,
|
|
setsHeight: 1
|
|
}
|
|
},
|
|
|
|
stretchV: {
|
|
setsWidth: 0,
|
|
setsHeight: 1
|
|
},
|
|
|
|
// Circular dependency with partial auto-sized panels:
|
|
//
|
|
// If we have an autoHeight docked item being stretched horizontally (top/bottom),
|
|
// that stretching will determine its width and its width must be set before its
|
|
// autoHeight can be determined. If that item is docked in an autoWidth panel, the
|
|
// body will need its height set before it can determine its width, but the height
|
|
// of the docked item is needed to subtract from the panel height in order to set
|
|
// the body height.
|
|
//
|
|
// This same pattern occurs with autoHeight panels with autoWidth docked items on
|
|
// left or right. If the panel is fully auto or fully fixed, these problems don't
|
|
// come up because there is no dependency between the dimensions.
|
|
//
|
|
// Cutting the Gordian Knot: In these cases, we have to allow something to measure
|
|
// itself without full context. This is OK as long as the managed dimension doesn't
|
|
// effect the auto-dimension, which is often the case for things like toolbars. The
|
|
// managed dimension only effects overflow handlers and such and does not change the
|
|
// auto-dimension. To encourage the item to measure itself without waiting for the
|
|
// managed dimension, we have to tell it that the layout will also be reading that
|
|
// dimension. This is similar to how stretchmax works.
|
|
|
|
autoStretchH: {
|
|
readsWidth: 1,
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
},
|
|
autoStretchV: {
|
|
readsHeight: 1,
|
|
setsWidth: 0,
|
|
setsHeight: 1
|
|
}
|
|
},
|
|
|
|
getItemSizePolicy: function (item, ownerSizeModel) {
|
|
var me = this,
|
|
policy = me.sizePolicy,
|
|
shrinkWrapDock = me.owner.shrinkWrapDock,
|
|
dock, vertical;
|
|
|
|
if (item.stretch === false) {
|
|
return policy.nostretch;
|
|
}
|
|
|
|
dock = item.dock;
|
|
vertical = (dock == 'left' || dock == 'right');
|
|
|
|
shrinkWrapDock = shrinkWrapDock === true ? 3 : (shrinkWrapDock || 0);
|
|
if (vertical) {
|
|
policy = policy.vert;
|
|
shrinkWrapDock = shrinkWrapDock & 1;
|
|
} else {
|
|
policy = policy.horz;
|
|
shrinkWrapDock = shrinkWrapDock & 2;
|
|
}
|
|
|
|
if (shrinkWrapDock) {
|
|
// Getting the size model is expensive, so only do so if we really need it
|
|
if (!ownerSizeModel) {
|
|
ownerSizeModel = me.owner.getSizeModel();
|
|
}
|
|
if (ownerSizeModel[vertical ? 'height' : 'width'].shrinkWrap) {
|
|
return policy.shrinkWrap;
|
|
}
|
|
}
|
|
|
|
return policy.stretch;
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* We are overriding the Ext.layout.Layout configureItem method to also add a class that
|
|
* indicates the position of the docked item. We use the itemCls (x-docked) as a prefix.
|
|
* An example of a class added to a dock: right item is x-docked-right
|
|
* @param {Ext.Component} item The item we are configuring
|
|
*/
|
|
configureItem : function(item, pos) {
|
|
this.callParent(arguments);
|
|
|
|
item.addCls(Ext.baseCSSPrefix + 'docked');
|
|
item.addClsWithUI(this.getDockCls(item.dock));
|
|
},
|
|
|
|
/**
|
|
* Get's the css class name for a given dock position.
|
|
* @param {String} dock `top`, `right`, `bottom`, or `left`
|
|
* @return {String}
|
|
* @private
|
|
*/
|
|
getDockCls: function(dock) {
|
|
return 'docked-' + dock;
|
|
},
|
|
|
|
afterRemove : function(item) {
|
|
this.callParent(arguments);
|
|
if (this.itemCls) {
|
|
item.el.removeCls(this.itemCls + '-' + item.dock);
|
|
}
|
|
var dom = item.el.dom;
|
|
|
|
if (!item.destroying && dom) {
|
|
dom.parentNode.removeChild(dom);
|
|
}
|
|
this.childrenChanged = true;
|
|
},
|
|
|
|
/**
|
|
* This object is indexed by a component's `baseCls` to yield another object which
|
|
* is then indexed by the component's `ui` to produce an array of CSS class names.
|
|
* This array is indexed in the same manner as the `noBorderClassTable` and indicates
|
|
* the a particular edge of a docked item or the body element is actually "collapsed"
|
|
* with the component's outer border.
|
|
* @private
|
|
*/
|
|
borderCollapseMap: {
|
|
/*
|
|
'x-panel': {
|
|
'default': []
|
|
}
|
|
*/
|
|
},
|
|
|
|
/**
|
|
* Returns the array of class names to add to a docked item or body element when for
|
|
* the edges that should collapse with the outer component border. Basically, the
|
|
* panel's outer border must look visually like a contiguous border but may need to
|
|
* be realized by using the border of docked items and/or the body. This class name
|
|
* allows the border color and width to be controlled accordingly and distinctly from
|
|
* the border of the docked item or body element when it is not having its border
|
|
* collapsed.
|
|
* @private
|
|
*/
|
|
getBorderCollapseTable: function () {
|
|
var me = this,
|
|
map = me.borderCollapseMap,
|
|
owner = me.owner,
|
|
baseCls = owner.baseCls,
|
|
ui = owner.ui,
|
|
table;
|
|
|
|
map = map[baseCls] || (map[baseCls] = {});
|
|
table = map[ui];
|
|
|
|
if (!table) {
|
|
baseCls += '-' + ui + '-outer-border-';
|
|
map[ui] = table = [
|
|
0, // TRBL
|
|
baseCls + 'l', // 0001 = 1
|
|
baseCls + 'b', // 0010 = 2
|
|
baseCls + 'bl', // 0011 = 3
|
|
baseCls + 'r', // 0100 = 4
|
|
baseCls + 'rl', // 0101 = 5
|
|
baseCls + 'rb', // 0110 = 6
|
|
baseCls + 'rbl', // 0111 = 7
|
|
baseCls + 't', // 1000 = 8
|
|
baseCls + 'tl', // 1001 = 9
|
|
baseCls + 'tb', // 1010 = 10
|
|
baseCls + 'tbl', // 1011 = 11
|
|
baseCls + 'tr', // 1100 = 12
|
|
baseCls + 'trl', // 1101 = 13
|
|
baseCls + 'trb', // 1110 = 14
|
|
baseCls + 'trbl' // 1111 = 15
|
|
];
|
|
}
|
|
|
|
return table;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.panel.AbstractPanel
|
|
* @private
|
|
*
|
|
* A base class which provides methods common to Panel classes across the Sencha product range.
|
|
*
|
|
* Please refer to sub class's documentation
|
|
*/
|
|
Ext.define('Ext.panel.AbstractPanel', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.container.Container ,
|
|
|
|
mixins: {
|
|
docking: Ext.container.DockingContainer
|
|
},
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} [baseCls=x-panel]
|
|
* The base CSS class to apply to this panel's element.
|
|
* @since 2.3.0
|
|
*/
|
|
baseCls : Ext.baseCSSPrefix + 'panel',
|
|
|
|
/**
|
|
* @cfg {Number/String} bodyPadding
|
|
* A shortcut for setting a padding style on the body element. The value can either be
|
|
* a number to be applied to all sides, or a normal css string describing padding.
|
|
* Defaults to <code>undefined</code>.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} bodyBorder
|
|
* A shortcut to add or remove the border on the body of a panel. In the classic theme
|
|
* this only applies to a panel which has the {@link #frame} configuration set to `true`.
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @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,
|
|
* an object containing style property name/value pairs or a function that returns such a string or object.
|
|
* For example, these two formats are interpreted to be equivalent:<pre><code>
|
|
bodyStyle: 'background:#ffc; padding:10px;'
|
|
|
|
bodyStyle: {
|
|
background: '#ffc',
|
|
padding: '10px'
|
|
}
|
|
* </code></pre>
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/String[]} bodyCls
|
|
* A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element.
|
|
* The following examples are all valid:<pre><code>
|
|
bodyCls: 'foo'
|
|
bodyCls: 'foo bar'
|
|
bodyCls: ['foo', 'bar']
|
|
* </code></pre>
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} isPanel
|
|
* `true` in this class to identify an object as an instantiated Panel, or subclass thereof.
|
|
*/
|
|
isPanel: true,
|
|
|
|
/**
|
|
* @property {Ext.dom.Element} body
|
|
* The Panel's body {@link Ext.dom.Element Element} which may be used to contain HTML content.
|
|
* The content may be specified in the {@link #html} config, or it may be loaded using the
|
|
* {@link #loader} config. Read-only.
|
|
*
|
|
* If this is used to load visible HTML elements in either way, then
|
|
* the Panel may not be used as a Layout for hosting nested Panels.
|
|
*
|
|
* If this Panel is intended to be used as the host of a Layout (See {@link #layout}
|
|
* then the body Element must not be loaded or changed - it is under the control
|
|
* of the Panel's Layout.
|
|
*
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {String} [contentPaddingProperty='bodyPadding']
|
|
* @inheritdoc
|
|
*/
|
|
contentPaddingProperty: 'bodyPadding',
|
|
|
|
/**
|
|
* @cfg {Boolean/Number} shrinkWrapDock
|
|
* Allows for this panel to include the {@link #dockedItems} when trying to determine the overall
|
|
* size of the panel. This option is only applicable when this panel is also shrink wrapping in the
|
|
* same dimensions. See {@link Ext.AbstractComponent#shrinkWrap} for an explanation of the configuration options.
|
|
*/
|
|
shrinkWrapDock: false,
|
|
|
|
componentLayout: 'dock',
|
|
|
|
childEls: [
|
|
'body'
|
|
],
|
|
|
|
renderTpl: [
|
|
// If this Panel is framed, the framing template renders the docked items round the frame
|
|
'{% this.renderDockedItems(out,values,0); %}',
|
|
// This empty div solves an IE6/7/Quirks problem where the margin-top on the bodyEl
|
|
// is ignored. Best we can figure, this is triggered by the previousSibling being
|
|
// position absolute (a docked item). The goal is to use margins to position the
|
|
// bodyEl rather than left/top since that allows us to avoid writing a height on the
|
|
// panel and the body. This in turn allows CSS height to expand or contract the
|
|
// panel during things like portlet dragging where we want to avoid running a ton
|
|
// of layouts during the drag operation.
|
|
// This empty div also has to be relatively positioned, otherwise it crashes IE6-9 Quirks
|
|
// when panel is rendered in a table-based layout.
|
|
(Ext.isIE7m || Ext.isIEQuirks) ? '<div style="position:relative"></div>' : '',
|
|
'<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
|
|
' {baseCls}-body-{ui}<tpl if="uiCls">',
|
|
'<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
|
|
'</tpl>{childElCls}"',
|
|
'<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
|
|
'{%this.renderContainer(out,values);%}',
|
|
'</div>',
|
|
'{% this.renderDockedItems(out,values,1); %}'
|
|
],
|
|
|
|
bodyPosProps: {
|
|
x: 'x',
|
|
y: 'y'
|
|
},
|
|
|
|
// TODO: Move code examples into product-specific files. The code snippet below is Touch only.
|
|
/**
|
|
* @cfg {Object/Object[]} dockedItems
|
|
* A component or series of components to be added as docked items to this panel.
|
|
* The docked items can be docked to either the top, right, left or bottom of a panel.
|
|
* This is typically used for things like toolbars or tab bars:
|
|
* <pre><code>
|
|
var panel = new Ext.panel.Panel({
|
|
fullscreen: true,
|
|
dockedItems: [{
|
|
xtype: 'toolbar',
|
|
dock: 'top',
|
|
items: [{
|
|
text: 'Docked to the top'
|
|
}]
|
|
}]
|
|
});</code></pre>
|
|
*/
|
|
|
|
// @since 2.3.0
|
|
border: true,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
emptyArray: [],
|
|
|
|
initComponent : function() {
|
|
this.initBorderProps();
|
|
this.callParent();
|
|
},
|
|
|
|
initBorderProps: function() {
|
|
var me = this;
|
|
|
|
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;
|
|
}
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
this.destroyDockedItems();
|
|
this.callParent();
|
|
},
|
|
|
|
// @private
|
|
initItems : function() {
|
|
this.callParent();
|
|
this.initDockingItems();
|
|
},
|
|
|
|
/**
|
|
* 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
|
|
* @private
|
|
*/
|
|
initRenderData: function() {
|
|
var me = this,
|
|
data = me.callParent();
|
|
|
|
me.initBodyStyles();
|
|
me.protoBody.writeTo(data);
|
|
delete me.protoBody;
|
|
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Attempts a default component lookup (see {@link Ext.container.Container#getComponent}). If the component is not found in the normal
|
|
* items, the dockedItems are searched and the matched component (if any) returned (see {@link #getDockedComponent}). Note that docked
|
|
* items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.
|
|
* @param {String/Number} comp The component id, itemId or position to find
|
|
* @return {Ext.Component} The component (if found)
|
|
* @since 2.3.0
|
|
*/
|
|
getComponent: function(comp) {
|
|
var component = this.callParent(arguments);
|
|
if (component === undefined && !Ext.isNumber(comp)) {
|
|
// If the arg is a numeric index skip docked items
|
|
component = this.getDockedComponent(comp);
|
|
}
|
|
return component;
|
|
},
|
|
|
|
getProtoBody: function () {
|
|
var me = this,
|
|
body = me.protoBody;
|
|
|
|
if (!body) {
|
|
me.protoBody = body = new Ext.util.ProtoElement({
|
|
cls: me.bodyCls,
|
|
style: me.bodyStyle,
|
|
clsProp: 'bodyCls',
|
|
styleProp: 'bodyStyle',
|
|
styleIsText: true
|
|
});
|
|
}
|
|
|
|
return body;
|
|
},
|
|
|
|
/**
|
|
* Parses the {@link #bodyStyle} config if available to create a style string that will be applied to the body element.
|
|
* This also includes {@link #bodyPadding} and {@link #bodyBorder} if available.
|
|
* @return {String} A CSS style string with body styles, padding and border.
|
|
* @private
|
|
*/
|
|
initBodyStyles: function() {
|
|
var me = this,
|
|
body = me.getProtoBody();
|
|
|
|
if (me.bodyPadding !== undefined) {
|
|
if (me.layout.managePadding) {
|
|
// If the container layout manages padding, the layout will apply the
|
|
// padding to an inner element rather than the body element. The
|
|
// assumed intent is for the configured padding to override any padding
|
|
// that is applied to the body element via stylesheet rules. It is
|
|
// therefore necessary to set the body element's padding to "0".
|
|
body.setStyle('padding', 0);
|
|
} else {
|
|
body.setStyle('padding', this.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding));
|
|
}
|
|
}
|
|
me.initBodyBorder();
|
|
},
|
|
|
|
initBodyBorder: function() {
|
|
var me = this;
|
|
|
|
if (me.frame && me.bodyBorder) {
|
|
if (!Ext.isNumber(me.bodyBorder)) {
|
|
me.bodyBorder = 1;
|
|
}
|
|
me.getProtoBody().setStyle('border-width', this.unitizeBox(me.bodyBorder));
|
|
}
|
|
},
|
|
|
|
getCollapsedDockedItems: function () {
|
|
var me = this;
|
|
return me.header === false || me.collapseMode == 'placeholder' ? me.emptyArray : [ me.getReExpander() ];
|
|
},
|
|
|
|
/**
|
|
* Sets the body style according to the passed parameters.
|
|
* @param {Mixed} style A full style specification string, or object, or the name of a style property to set.
|
|
* @param {String} value If the first param was a style property name, the style property value.
|
|
* @return {Ext.panel.Panel} this
|
|
*/
|
|
setBodyStyle: function(style, value) {
|
|
var me = this,
|
|
body = me.rendered ? me.body : me.getProtoBody();
|
|
|
|
if (Ext.isFunction(style)) {
|
|
style = style();
|
|
}
|
|
if (arguments.length == 1) {
|
|
if (Ext.isString(style)) {
|
|
style = Ext.Element.parseStyles(style);
|
|
}
|
|
body.setStyle(style);
|
|
} else {
|
|
body.setStyle(style, value);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Adds a CSS class to the body element. If not rendered, the class will
|
|
* be added when the panel is rendered.
|
|
* @param {String} cls The class to add
|
|
* @return {Ext.panel.Panel} this
|
|
*/
|
|
addBodyCls: function(cls) {
|
|
var me = this,
|
|
body = me.rendered ? me.body : me.getProtoBody();
|
|
|
|
body.addCls(cls);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Removes a CSS class from the body element.
|
|
* @param {String} cls The class to remove
|
|
* @return {Ext.panel.Panel} this
|
|
*/
|
|
removeBodyCls: function(cls) {
|
|
var me = this,
|
|
body = me.rendered ? me.body : me.getProtoBody();
|
|
|
|
body.removeCls(cls);
|
|
return me;
|
|
},
|
|
|
|
// inherit docs
|
|
addUIClsToElement: function(cls) {
|
|
var me = this,
|
|
result = me.callParent(arguments);
|
|
|
|
me.addBodyCls([Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls]);
|
|
return result;
|
|
},
|
|
|
|
// inherit docs
|
|
removeUIClsFromElement: function(cls) {
|
|
var me = this,
|
|
result = me.callParent(arguments);
|
|
|
|
me.removeBodyCls([Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls]);
|
|
return result;
|
|
},
|
|
|
|
// inherit docs
|
|
addUIToElement: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.addBodyCls(me.baseCls + '-body-' + me.ui);
|
|
},
|
|
|
|
// inherit docs
|
|
removeUIFromElement: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.removeBodyCls(me.baseCls + '-body-' + me.ui);
|
|
},
|
|
|
|
// @private
|
|
getTargetEl : function() {
|
|
return this.body;
|
|
},
|
|
|
|
applyTargetCls: function(targetCls) {
|
|
this.getProtoBody().addCls(targetCls);
|
|
},
|
|
|
|
getRefItems: function(deep) {
|
|
var items = this.callParent(arguments);
|
|
|
|
return this.getDockingRefItems(deep, items);
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
this.callParent(arguments);
|
|
this.setupDockingRenderTpl(renderTpl);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Simple header class which is used for on {@link Ext.panel.Panel} and {@link Ext.window.Window}.
|
|
*/
|
|
Ext.define('Ext.panel.Header', {
|
|
extend: Ext.container.Container ,
|
|
|
|
alias: 'widget.header',
|
|
|
|
/**
|
|
* @property {Boolean} isHeader
|
|
* `true` in this class to identify an object as an instantiated Header, or subclass thereof.
|
|
*/
|
|
isHeader : true,
|
|
defaultType : 'tool',
|
|
indicateDrag : false,
|
|
weight : -1,
|
|
componentLayout: 'body',
|
|
|
|
/**
|
|
* @cfg {String} [titleAlign]
|
|
* The alignment of the title text within the available space between the
|
|
* icon and the tools.
|
|
*
|
|
* May be `"left"`, `"right"` or `"center"`. Defaults to the browser's natural
|
|
* behavior depending on the css direction property - `"left"` when direction
|
|
* is ltr and `"right"` when direction is rtl
|
|
* (see {@link Ext.AbstractComponent#rtl}).
|
|
*/
|
|
|
|
childEls: [
|
|
'body'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<div id="{id}-body" class="{headerCls}-body {baseCls}-body {bodyCls} {bodyTargetCls}',
|
|
'<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>"',
|
|
'<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
|
|
'{%this.renderContainer(out,values)%}',
|
|
'</div>'
|
|
],
|
|
|
|
headingTpl: [
|
|
// unselectable="on" is required for Opera, other browsers inherit unselectability from the header
|
|
'<span id="{id}-textEl" class="{headerCls}-text {cls}-text {cls}-text-{ui}" unselectable="on">{title}</span>'
|
|
],
|
|
|
|
shrinkWrap: 3,
|
|
|
|
/**
|
|
* @cfg {String} title
|
|
* The title text to display.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} [titlePosition]
|
|
* The ordinal position among the header items (tools and other components specified using the {@link #cfg-items} config)
|
|
* at which the title component is inserted. See {@link Ext.panel.Panel#cfg-header Panel's header config}.
|
|
*
|
|
* If not specified, the title is inserted after any {@link #cfg-items}, but *before* any {@link Ext.panel.Panel#tools}.
|
|
*
|
|
* Note that if an {@link #icon} or {@link #iconCls} has been configured, then the icon component will be the
|
|
* first item before all specified tools or {@link #cfg-items}. This configuration does not include the icon.
|
|
*/
|
|
titlePosition: 0,
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* CSS class for an icon in the header. Used for displaying an icon to the left of a title.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* Path to image for an icon in the header. Used for displaying an icon to the left of a title.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} glyph
|
|
* A numeric unicode character code to use as the icon for the panel header. The
|
|
* default font-family for glyphs can be set globally using
|
|
* {@link Ext#setGlyphFontFamily Ext.setGlyphFontFamily()}. Alternatively, this
|
|
* config option accepts a string with the charCode and font-family separated by the
|
|
* `@` symbol. For example '65@My Font Family'.
|
|
*/
|
|
|
|
// a class for styling that is shared between panel and window headers
|
|
headerCls: Ext.baseCSSPrefix + 'header',
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
hasPosition = me.hasOwnProperty('titlePosition'),
|
|
items = me.items,
|
|
titlePosition = hasPosition ? me.titlePosition : (items ? items.length : 0),
|
|
uiClasses = [me.orientation, me.getDockName()],
|
|
ownerCt = me.ownerCt;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event click
|
|
* Fires when the header is clicked. This event will not be fired
|
|
* if the click was on a {@link Ext.panel.Tool}
|
|
* @param {Ext.panel.Header} this
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'click',
|
|
|
|
/**
|
|
* @event dblclick
|
|
* Fires when the header is double clicked. This event will not
|
|
* be fired if the click was on a {@link Ext.panel.Tool}
|
|
* @param {Ext.panel.Header} this
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'dblclick'
|
|
);
|
|
|
|
me.indicateDragCls = me.headerCls + '-draggable';
|
|
me.title = me.title || ' ';
|
|
me.tools = me.tools || [];
|
|
items = me.items = (items ? Ext.Array.slice(items) : []);
|
|
me.orientation = me.orientation || 'horizontal';
|
|
me.dock = (me.dock) ? me.dock : (me.orientation == 'horizontal') ? 'top' : 'left';
|
|
|
|
if (ownerCt ? (!ownerCt.border && !ownerCt.frame) : !me.border) {
|
|
uiClasses.push(me.orientation + '-noborder');
|
|
}
|
|
me.addClsWithUI(uiClasses);
|
|
me.addCls([me.headerCls, me.headerCls + '-' + me.orientation]);
|
|
|
|
if (me.indicateDrag) {
|
|
me.addCls(me.indicateDragCls);
|
|
}
|
|
|
|
// Add Icon
|
|
if (me.iconCls || me.icon || me.glyph) {
|
|
me.initIconCmp();
|
|
// If we didn't provide a position or items, the icon should
|
|
// appear before the title
|
|
if (!hasPosition && !items.length) {
|
|
++titlePosition;
|
|
}
|
|
items.push(me.iconCmp);
|
|
}
|
|
|
|
// Add Title
|
|
me.titleCmp = new Ext.Component({
|
|
ariaRole : 'heading',
|
|
focusable : false,
|
|
noWrap : true,
|
|
flex : 1,
|
|
rtl : me.rtl,
|
|
id : me.id + '_hd',
|
|
style : me.titleAlign ? ('text-align:' + me.titleAlign) : '',
|
|
cls : me.headerCls + '-text-container ' +
|
|
me.baseCls + '-text-container ' +
|
|
me.baseCls + '-text-container-' + me.ui,
|
|
renderTpl : me.getTpl('headingTpl'),
|
|
renderData: {
|
|
title: me.title,
|
|
cls : me.baseCls,
|
|
headerCls: me.headerCls,
|
|
ui : me.ui
|
|
},
|
|
childEls : ['textEl'],
|
|
autoEl: {
|
|
// Required for Opera
|
|
unselectable: 'on'
|
|
},
|
|
listeners: {
|
|
render: me.onTitleRender,
|
|
scope: me
|
|
}
|
|
});
|
|
me.layout = (me.orientation == 'vertical') ? {
|
|
type : 'vbox',
|
|
align: 'center',
|
|
alignRoundingMethod: 'ceil'
|
|
} : {
|
|
type : 'hbox',
|
|
align: 'middle',
|
|
alignRoundingMethod: 'floor'
|
|
};
|
|
|
|
// Add Tools
|
|
Ext.Array.push(items, me.tools);
|
|
// Clear the tools so we can have only the instances. Intentional mutation of passed in array
|
|
// Owning code in Panel uses this array as its pubic tools property.
|
|
me.tools.length = 0;
|
|
me.callParent();
|
|
|
|
if (items.length < titlePosition) {
|
|
titlePosition = items.length;
|
|
}
|
|
me.titlePosition = titlePosition;
|
|
|
|
// Insert the titleComponent at the specified position
|
|
me.insert(titlePosition, me.titleCmp);
|
|
|
|
me.on({
|
|
dblclick: me.onDblClick,
|
|
click: me.onClick,
|
|
element: 'el',
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
initIconCmp: function() {
|
|
var me = this,
|
|
cls = [me.headerCls + '-icon', me.baseCls + '-icon', me.iconCls],
|
|
cfg;
|
|
|
|
if (me.glyph) {
|
|
cls.push(me.baseCls + '-glyph');
|
|
}
|
|
|
|
cfg = {
|
|
focusable: false,
|
|
src: Ext.BLANK_IMAGE_URL,
|
|
cls: cls,
|
|
baseCls: me.baseCls + '-icon',
|
|
id: me.id + '-iconEl',
|
|
iconCls: me.iconCls,
|
|
glyph: me.glyph
|
|
};
|
|
|
|
if (!Ext.isEmpty(me.icon)) {
|
|
delete cfg.iconCls;
|
|
cfg.src = me.icon;
|
|
}
|
|
|
|
me.iconCmp = new Ext.Img(cfg);
|
|
},
|
|
|
|
beforeRender: function() {
|
|
this.protoEl.unselectable();
|
|
this.callParent();
|
|
},
|
|
|
|
afterLayout: function() {
|
|
var me = this,
|
|
frameBR, frameTR, frameTL, xPos;
|
|
|
|
if (me.orientation === 'vertical') {
|
|
me.adjustTitlePosition();
|
|
frameTR = me.frameTR;
|
|
if (frameTR) {
|
|
// The corners sprite currently requires knowledge of the vertical header's
|
|
// width to correctly set the background position of the bottom right corner.
|
|
// TODO: rearrange the sprite so that this can be done with pure css.
|
|
frameBR = me.frameBR;
|
|
frameTL = me.frameTL;
|
|
xPos = (me.getWidth() - frameTR.getPadding('r') -
|
|
((frameTL) ? frameTL.getPadding('l') : me.el.getBorderWidth('l'))) + 'px';
|
|
frameBR.setStyle('background-position-x', xPos);
|
|
frameTR.setStyle('background-position-x', xPos);
|
|
}
|
|
if (Ext.isIE7 && Ext.isStrict && me.frame) {
|
|
// EXTJSIV-7283: framed header background is initally off in IE7 strict
|
|
// unless we repaint
|
|
me.el.repaint();
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeLayout: function () {
|
|
this.callParent();
|
|
this.syncBeforeAfterTitleClasses();
|
|
},
|
|
|
|
adjustTitlePosition: function() {
|
|
var titleCmp = this.titleCmp,
|
|
titleEl;
|
|
|
|
if (!Ext.isIE9m && titleCmp) { // some Headers don't have a titleCmp, e.g. TabBar
|
|
// In IE9 and below we use a BasicImage filter to rotate the title
|
|
// element 90 degrees. The result is that what was the bottom left
|
|
// corner is positioned exactly where the top left corner was
|
|
// originally. Since this is the desired result, no additional
|
|
// positioning is needed in IE9 and below. In modern browsers,
|
|
// however, we use transform: rotate(90deg) to rotate the element.
|
|
// CSS3 also provides a way to specify the position the rotated element
|
|
// by changing the axis on which it is rotated using the transform-origin
|
|
// property, but the required transform origin varies based on the
|
|
// elements size, and would require some complex math to calculate.
|
|
// To achieve the desired rotated position in modern browsers we use
|
|
// a transform-origin of "0, 0" which means the top left corner of
|
|
// the element is the rotation axis. After rotating 90 degrees we
|
|
// simply move the element to the right by the same number of pixels
|
|
// as its width.
|
|
titleEl = titleCmp.el;
|
|
titleEl.setStyle('left', titleEl.getWidth() + 'px');
|
|
}
|
|
},
|
|
|
|
onTitleRender: function() {
|
|
if (this.orientation === 'vertical') {
|
|
this.titleCmp.el.setVertical(90);
|
|
}
|
|
},
|
|
|
|
// inherit docs
|
|
addUIClsToElement: function(cls) {
|
|
var me = this,
|
|
result = me.callParent(arguments),
|
|
classes = [me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls],
|
|
array, i;
|
|
|
|
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) {
|
|
var me = this,
|
|
result = me.callParent(arguments),
|
|
classes = [me.baseCls + '-body-' + cls, me.baseCls + '-body-' + me.ui + '-' + cls],
|
|
array, i;
|
|
|
|
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() {
|
|
var me = this,
|
|
array, cls;
|
|
|
|
me.callParent(arguments);
|
|
|
|
cls = me.baseCls + '-body-' + me.ui;
|
|
if (me.rendered) {
|
|
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 (me.titleCmp && me.titleCmp.rendered) {
|
|
me.titleCmp.addCls(me.baseCls + '-text-container-' + me.ui);
|
|
}
|
|
},
|
|
|
|
// inherit docs
|
|
removeUIFromElement: function() {
|
|
var me = this,
|
|
array, cls;
|
|
|
|
me.callParent(arguments);
|
|
|
|
cls = me.baseCls + '-body-' + me.ui;
|
|
if (me.rendered) {
|
|
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.removeCls(me.baseCls + '-text-container-' + me.ui);
|
|
}
|
|
},
|
|
|
|
onClick: function(e) {
|
|
this.fireClickEvent('click', e);
|
|
},
|
|
|
|
onDblClick: function(e){
|
|
this.fireClickEvent('dblclick', e);
|
|
},
|
|
|
|
fireClickEvent: function(type, e){
|
|
var toolCls = '.' + Ext.panel.Tool.prototype.baseCls;
|
|
if (!e.getTarget(toolCls)) {
|
|
this.fireEvent(type, this, e);
|
|
}
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
getTargetEl: function() {
|
|
return this.body || this.frameBody || this.el;
|
|
},
|
|
|
|
applyTargetCls: function(targetCls) {
|
|
this.bodyTargetCls = targetCls;
|
|
},
|
|
|
|
/**
|
|
* Sets the title of the header.
|
|
* @param {String} title The title to be set
|
|
*/
|
|
setTitle: function(title) {
|
|
var me = this,
|
|
titleCmp = me.titleCmp;
|
|
|
|
me.title = title;
|
|
if (titleCmp.rendered) {
|
|
titleCmp.textEl.update(me.title || ' ');
|
|
titleCmp.updateLayout();
|
|
} else {
|
|
me.titleCmp.on({
|
|
render: function() {
|
|
me.setTitle(title);
|
|
},
|
|
single: true
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Used when shrink wrapping a Panel to either content width or header width.
|
|
* This returns the minimum width required to display the header, icon and tools.
|
|
* **This is only intended for use with horizontal headers.**
|
|
*/
|
|
getMinWidth: function() {
|
|
var me = this,
|
|
textEl = me.titleCmp.textEl.dom,
|
|
result,
|
|
tools = me.tools,
|
|
l, i;
|
|
|
|
// Measure text width as inline element so it doesn't stretch
|
|
textEl.style.display = 'inline';
|
|
result = textEl.offsetWidth;
|
|
textEl.style.display = '';
|
|
|
|
// Add tools width
|
|
if (tools && (l = tools.length)) {
|
|
for (i = 0; i < l; i++) {
|
|
if (tools[i].el) {
|
|
result += tools[i].el.dom.offsetWidth;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add iconWidth
|
|
if (me.iconCmp) {
|
|
result += me.iconCmp.el.dom.offsetWidth;
|
|
}
|
|
|
|
// Return with some space between title and tools/end of header.
|
|
return result + 10;
|
|
},
|
|
|
|
/**
|
|
* Sets the CSS class that provides the icon image for this header. This method will replace any existing
|
|
* icon class if one has already been set.
|
|
* @param {String} cls The new CSS class name
|
|
*/
|
|
setIconCls: function(cls) {
|
|
var me = this,
|
|
isEmpty = !cls || !cls.length,
|
|
iconCmp = me.iconCmp;
|
|
|
|
me.iconCls = cls;
|
|
if (!me.iconCmp && !isEmpty) {
|
|
me.initIconCmp();
|
|
me.insert(0, me.iconCmp);
|
|
} else if (iconCmp) {
|
|
if (isEmpty) {
|
|
me.iconCmp.destroy();
|
|
delete me.iconCmp;
|
|
} else {
|
|
iconCmp.removeCls(iconCmp.iconCls);
|
|
iconCmp.addCls(cls);
|
|
iconCmp.iconCls = cls;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the image path that provides the icon image for this header. This method will replace any existing
|
|
* icon if one has already been set.
|
|
* @param {String} icon The new icon path
|
|
*/
|
|
setIcon: function(icon) {
|
|
var me = this,
|
|
isEmpty = !icon || !icon.length,
|
|
iconCmp = me.iconCmp;
|
|
|
|
me.icon = icon;
|
|
if (!me.iconCmp && !isEmpty) {
|
|
me.initIconCmp();
|
|
me.insert(0, me.iconCmp);
|
|
} else if (iconCmp) {
|
|
if (isEmpty) {
|
|
me.iconCmp.destroy();
|
|
delete me.iconCmp;
|
|
} else {
|
|
iconCmp.setSrc(me.icon);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets glyph that provides the icon image for this header. This method will replace any existing
|
|
* glyph if one has already been set.
|
|
* @param {Number/String} glyph the numeric charCode or string charCode/font-family.
|
|
* This parameter expects a format consistent with that of {@link #glyph}
|
|
*/
|
|
setGlyph: function(glyph) {
|
|
var me = this,
|
|
iconCmp = me.iconCmp;
|
|
|
|
if (!me.iconCmp) {
|
|
me.initIconCmp();
|
|
me.insert(0, me.iconCmp);
|
|
} else if (iconCmp) {
|
|
if (glyph) {
|
|
me.iconCmp.setGlyph(glyph);
|
|
} else {
|
|
me.iconCmp.destroy();
|
|
delete me.iconCmp;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the tools for this header.
|
|
* @return {Ext.panel.Tool[]} The tools
|
|
*/
|
|
getTools: function(){
|
|
return this.tools.slice();
|
|
},
|
|
|
|
/**
|
|
* Add a tool to the header
|
|
* @param {Object} tool
|
|
*/
|
|
addTool: function(tool) {
|
|
// Even though the defaultType is tool, it may be changed,
|
|
// so let's be safe and forcibly specify tool
|
|
this.add(Ext.ComponentManager.create(tool, 'tool'));
|
|
},
|
|
|
|
syncBeforeAfterTitleClasses: function() {
|
|
var me = this,
|
|
items = me.items,
|
|
childItems = items.items,
|
|
titlePosition = me.titlePosition,
|
|
itemCount = childItems.length,
|
|
itemGeneration = items.generation,
|
|
syncGen = me.syncBeforeAfterGen,
|
|
afterCls, beforeCls, i, item;
|
|
|
|
if (syncGen === itemGeneration) {
|
|
return;
|
|
}
|
|
me.syncBeforeAfterGen = itemGeneration;
|
|
|
|
for (i = 0; i < itemCount; ++i) {
|
|
item = childItems[i];
|
|
|
|
afterCls = item.afterTitleCls || (item.afterTitleCls = item.baseCls + '-after-title')
|
|
beforeCls = item.beforeTitleCls || (item.beforeTitleCls = item.baseCls + '-before-title')
|
|
|
|
if (!me.title || i < titlePosition) {
|
|
if (syncGen) {
|
|
item.removeCls(afterCls);
|
|
} // else first time we won't need to remove anything...
|
|
item.addCls(beforeCls);
|
|
} else if (i > titlePosition) {
|
|
if (syncGen) {
|
|
item.removeCls(beforeCls);
|
|
}
|
|
item.addCls(afterCls);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Set up the `tools.<tool type>` link in the owning Panel.
|
|
* @param component
|
|
* @param index
|
|
*/
|
|
onAdd: function(component, index) {
|
|
var tools = this.tools;
|
|
this.callParent(arguments);
|
|
if (component.isTool) {
|
|
tools.push(component);
|
|
tools[component.type] = component;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Add bodyCls to the renderData object
|
|
* @return {Object} Object with keys and values that are going to be applied to the renderTpl
|
|
* @private
|
|
*/
|
|
initRenderData: function() {
|
|
return Ext.applyIf(this.callParent(), {
|
|
bodyCls: this.bodyCls,
|
|
bodyTargetCls: this.bodyTargetCls,
|
|
headerCls: this.headerCls
|
|
});
|
|
},
|
|
|
|
getDockName: function() {
|
|
return this.dock;
|
|
},
|
|
|
|
getFramingInfoCls: function(){
|
|
var me = this,
|
|
cls = me.callParent(),
|
|
owner = me.ownerCt;
|
|
|
|
if (!me.expanding && (owner && owner.collapsed) || me.isCollapsedExpander) {
|
|
cls += '-' + owner.collapsedCls;
|
|
}
|
|
return cls + '-' + me.dock;
|
|
}
|
|
});
|
|
|
|
/*
|
|
* This is a derivative of the similarly named class in the YUI Library.
|
|
* The original license:
|
|
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
* Code licensed under the BSD License:
|
|
* http://developer.yahoo.net/yui/license.txt
|
|
*/
|
|
|
|
|
|
/**
|
|
* 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:
|
|
*
|
|
* - 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}.
|
|
*
|
|
* This class should not be instantiated until the onload event to ensure that
|
|
* the associated elements are available.
|
|
* The following would define a DragDrop obj that would interact with any
|
|
* other DragDrop obj in the "group1" group:
|
|
*
|
|
* 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);
|
|
* }
|
|
*
|
|
*/
|
|
Ext.define('Ext.dd.DragDrop', {
|
|
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} ignoreSelf
|
|
* Set to false to enable a DragDrop object to fire drag events while dragging
|
|
* over its own Element. Defaults to true - DragDrop objects do not by default
|
|
* fire drag events to themselves.
|
|
*/
|
|
|
|
/**
|
|
* @property {String} id
|
|
* The id of the element associated with this object. This is what we
|
|
* refer to as the "linked element" because the size and position of
|
|
* this element is used to determine when the drag and drop objects have
|
|
* interacted.
|
|
*/
|
|
id: null,
|
|
|
|
/**
|
|
* @property {Object} config
|
|
* Configuration attributes passed into the constructor
|
|
*/
|
|
config: null,
|
|
|
|
/**
|
|
* @property {String} dragElId
|
|
* The id of the element that will be dragged. By default this is same
|
|
* as the linked element, but could be changed to another element. Ex:
|
|
* Ext.dd.DDProxy
|
|
* @private
|
|
*/
|
|
dragElId: null,
|
|
|
|
/**
|
|
* @property {String} handleElId
|
|
* The ID of the element that initiates the drag operation. By default
|
|
* this is the linked element, but could be changed to be a child of this
|
|
* element. This lets us do things like only starting the drag when the
|
|
* header element within the linked html element is clicked.
|
|
* @private
|
|
*/
|
|
handleElId: null,
|
|
|
|
/**
|
|
* @property {Object} invalidHandleTypes
|
|
* An object who's property names identify HTML tags to be considered invalid as drag handles.
|
|
* A non-null property value identifies the tag as invalid. Defaults to the
|
|
* following value which prevents drag operations from being initiated by `<a>` elements:
|
|
*
|
|
* {
|
|
* A: "A"
|
|
* }
|
|
*/
|
|
invalidHandleTypes: null,
|
|
|
|
/**
|
|
* @property {Object} invalidHandleIds
|
|
* An object who's property names identify the IDs of elements to be considered invalid as drag handles.
|
|
* A non-null property value identifies the ID as invalid. For example, to prevent
|
|
* dragging from being initiated on element ID "foo", use:
|
|
*
|
|
* {
|
|
* foo: true
|
|
* }
|
|
*/
|
|
invalidHandleIds: null,
|
|
|
|
/**
|
|
* @property {String[]} invalidHandleClasses
|
|
* An Array of CSS class names for elements to be considered in valid as drag handles.
|
|
*/
|
|
invalidHandleClasses: null,
|
|
|
|
/**
|
|
* @property {Number} startPageX
|
|
* The linked element's absolute X position at the time the drag was
|
|
* started
|
|
* @private
|
|
*/
|
|
startPageX: 0,
|
|
|
|
/**
|
|
* @property {Number} startPageY
|
|
* The linked element's absolute X position at the time the drag was
|
|
* started
|
|
* @private
|
|
*/
|
|
startPageY: 0,
|
|
|
|
/**
|
|
* @property {Object} groups
|
|
* The group defines a logical collection of DragDrop objects that are
|
|
* related. Instances only get events when interacting with other
|
|
* DragDrop object in the same group. This lets us define multiple
|
|
* groups using a single DragDrop subclass if we want.
|
|
*
|
|
* An object in the format {'group1':true, 'group2':true}
|
|
*/
|
|
groups: null,
|
|
|
|
/**
|
|
* @property {Boolean} locked
|
|
* Individual drag/drop instances can be locked. This will prevent
|
|
* onmousedown start drag.
|
|
* @private
|
|
*/
|
|
locked: false,
|
|
|
|
/**
|
|
* Locks this instance
|
|
*/
|
|
lock: function() {
|
|
this.locked = true;
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} moveOnly
|
|
* When set to true, other DD objects in cooperating DDGroups do not receive
|
|
* notification events when this DD object is dragged over them.
|
|
*/
|
|
moveOnly: false,
|
|
|
|
/**
|
|
* Unlocks this instace
|
|
*/
|
|
unlock: function() {
|
|
this.locked = false;
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} isTarget
|
|
* By default, all instances can be a drop target. This can be disabled by
|
|
* setting isTarget to false.
|
|
*/
|
|
isTarget: true,
|
|
|
|
/**
|
|
* @property {Number[]} padding
|
|
* The padding configured for this drag and drop object for calculating
|
|
* the drop zone intersection with this object.
|
|
* An array containing the 4 padding values: [top, right, bottom, left]
|
|
*/
|
|
padding: null,
|
|
|
|
/**
|
|
* @property _domRef
|
|
* Cached reference to the linked element
|
|
* @private
|
|
*/
|
|
_domRef: null,
|
|
|
|
/**
|
|
* @property __ygDragDrop
|
|
* Internal typeof flag
|
|
* @private
|
|
*/
|
|
__ygDragDrop: true,
|
|
|
|
/**
|
|
* @property {Boolean} constrainX
|
|
* Set to true when horizontal contraints are applied
|
|
* @private
|
|
*/
|
|
constrainX: false,
|
|
|
|
/**
|
|
* @property {Boolean} constrainY
|
|
* Set to true when vertical contraints are applied
|
|
* @private
|
|
*/
|
|
constrainY: false,
|
|
|
|
/**
|
|
* @property {Number} minX
|
|
* The left constraint
|
|
* @private
|
|
*/
|
|
minX: 0,
|
|
|
|
/**
|
|
* @property {Number} maxX
|
|
* The right constraint
|
|
* @private
|
|
*/
|
|
maxX: 0,
|
|
|
|
/**
|
|
* @property {Number} minY
|
|
* The up constraint
|
|
* @private
|
|
*/
|
|
minY: 0,
|
|
|
|
/**
|
|
* @property {Number} maxY
|
|
* The down constraint
|
|
* @private
|
|
*/
|
|
maxY: 0,
|
|
|
|
/**
|
|
* @property {Boolean} maintainOffset
|
|
* Maintain offsets when we resetconstraints. Set to true when you want
|
|
* the position of the element relative to its parent to stay the same
|
|
* when the page changes
|
|
*/
|
|
maintainOffset: false,
|
|
|
|
/**
|
|
* @property {Number[]} xTicks
|
|
* Array of pixel locations the element will snap to if we specified a
|
|
* horizontal graduation/interval. This array is generated automatically
|
|
* when you define a tick interval.
|
|
*/
|
|
xTicks: null,
|
|
|
|
/**
|
|
* @property {Number[]} yTicks
|
|
* Array of pixel locations the element will snap to if we specified a
|
|
* vertical graduation/interval. This array is generated automatically
|
|
* when you define a tick interval.
|
|
*/
|
|
yTicks: null,
|
|
|
|
/**
|
|
* @property {Boolean} primaryButtonOnly
|
|
* By default the drag and drop instance will only respond to the primary
|
|
* button click (left button for a right-handed mouse). Set to true to
|
|
* allow drag and drop to start with any mouse click that is propogated
|
|
* by the browser
|
|
*/
|
|
primaryButtonOnly: true,
|
|
|
|
/**
|
|
* @property {Boolean} available
|
|
* The available property is false until the linked dom element is accessible.
|
|
*/
|
|
available: false,
|
|
|
|
/**
|
|
* @property {Boolean} hasOuterHandles
|
|
* By default, drags can only be initiated if the mousedown occurs in the
|
|
* 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. Defaults to false.
|
|
*/
|
|
hasOuterHandles: false,
|
|
|
|
/**
|
|
* Code that executes immediately before the startDrag event
|
|
* @private
|
|
*/
|
|
b4StartDrag: function(x, y) { },
|
|
|
|
/**
|
|
* Abstract method called after a drag/drop object is clicked
|
|
* and the drag or mousedown time thresholds have beeen met.
|
|
* @param {Number} x X click location
|
|
* @param {Number} y Y click location
|
|
*/
|
|
startDrag: function(x, y) { /* override this */ },
|
|
|
|
/**
|
|
* Code that executes immediately before the onDrag event
|
|
* @private
|
|
*/
|
|
b4Drag: function(e) { },
|
|
|
|
/**
|
|
* Abstract method called during the onMouseMove event while dragging an
|
|
* object.
|
|
* @param {Event} e the mousemove event
|
|
*/
|
|
onDrag: function(e) { /* override this */ },
|
|
|
|
/**
|
|
* Abstract method called when this element fist begins hovering over
|
|
* another DragDrop obj
|
|
* @param {Event} e the mousemove event
|
|
* @param {String/Ext.dd.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.
|
|
*/
|
|
onDragEnter: function(e, id) { /* override this */ },
|
|
|
|
/**
|
|
* Code that executes immediately before the onDragOver event
|
|
* @private
|
|
*/
|
|
b4DragOver: function(e) { },
|
|
|
|
/**
|
|
* Abstract method called when this element is hovering over another
|
|
* DragDrop obj
|
|
* @param {Event} e the mousemove event
|
|
* @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
|
|
* id this is hovering over. In INTERSECT mode, an array of dd items
|
|
* being hovered over.
|
|
*/
|
|
onDragOver: function(e, id) { /* override this */ },
|
|
|
|
/**
|
|
* Code that executes immediately before the onDragOut event
|
|
* @private
|
|
*/
|
|
b4DragOut: function(e) { },
|
|
|
|
/**
|
|
* Abstract method called when we are no longer hovering over an element
|
|
* @param {Event} e the mousemove event
|
|
* @param {String/Ext.dd.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.
|
|
*/
|
|
onDragOut: function(e, id) { /* override this */ },
|
|
|
|
/**
|
|
* Code that executes immediately before the onDragDrop event
|
|
* @private
|
|
*/
|
|
b4DragDrop: function(e) { },
|
|
|
|
/**
|
|
* Abstract method called when this item is dropped on another DragDrop
|
|
* obj
|
|
* @param {Event} e the mouseup event
|
|
* @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element
|
|
* id this was dropped on. In INTERSECT mode, an array of dd items this
|
|
* was dropped on.
|
|
*/
|
|
onDragDrop: function(e, id) { /* override this */ },
|
|
|
|
/**
|
|
* Abstract method called when this item is dropped on an area with no
|
|
* drop target
|
|
* @param {Event} e the mouseup event
|
|
*/
|
|
onInvalidDrop: function(e) { /* override this */ },
|
|
|
|
/**
|
|
* Code that executes immediately before the endDrag event
|
|
* @private
|
|
*/
|
|
b4EndDrag: function(e) { },
|
|
|
|
/**
|
|
* 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
|
|
* @param {Event} e the mousedown event
|
|
* @private
|
|
*/
|
|
b4MouseDown: function(e) { },
|
|
|
|
/**
|
|
* Called when a drag/drop obj gets a mousedown
|
|
* @param {Event} e the mousedown event
|
|
*/
|
|
onMouseDown: function(e) { /* override this */ },
|
|
|
|
/**
|
|
* Called when a drag/drop obj gets a mouseup
|
|
* @param {Event} e the mouseup event
|
|
*/
|
|
onMouseUp: function(e) { /* override this */ },
|
|
|
|
/**
|
|
* Override the onAvailable method to do what is needed after the initial
|
|
* position was determined.
|
|
*/
|
|
onAvailable: function () {
|
|
},
|
|
|
|
/**
|
|
* @property {Object} defaultPadding
|
|
* Provides default constraint padding to "constrainTo" elements.
|
|
*/
|
|
defaultPadding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
},
|
|
|
|
/**
|
|
* Initializes the drag drop object's constraints to restrict movement to a certain element.
|
|
*
|
|
* 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.Element} object:
|
|
*
|
|
* Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
|
|
* startDrag : function(){
|
|
* this.constrainTo("parent-id");
|
|
* }
|
|
* });
|
|
*
|
|
* @param {String/HTMLElement/Ext.Element} constrainTo The element or element ID 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}`
|
|
* @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
|
|
*/
|
|
constrainTo : function(constrainTo, pad, inContent){
|
|
if(Ext.isNumber(pad)){
|
|
pad = {left: pad, right:pad, top:pad, bottom:pad};
|
|
}
|
|
pad = pad || this.defaultPadding;
|
|
var b = Ext.get(this.getEl()).getBox(),
|
|
ce = Ext.get(constrainTo),
|
|
s = ce.getScroll(),
|
|
c,
|
|
cd = ce.dom,
|
|
xy,
|
|
topSpace,
|
|
leftSpace;
|
|
if(cd == document.body){
|
|
c = { x: s.left, y: s.top, width: Ext.Element.getViewWidth(), height: Ext.Element.getViewHeight()};
|
|
}else{
|
|
xy = ce.getXY();
|
|
c = {x : xy[0], y: xy[1], width: cd.clientWidth, height: cd.clientHeight};
|
|
}
|
|
|
|
topSpace = b.y - c.y;
|
|
leftSpace = b.x - c.x;
|
|
|
|
this.resetConstraints();
|
|
this.setXConstraint(leftSpace - (pad.left||0), // left
|
|
c.width - leftSpace - b.width - (pad.right||0), //right
|
|
this.xTickSize
|
|
);
|
|
this.setYConstraint(topSpace - (pad.top||0), //top
|
|
c.height - topSpace - b.height - (pad.bottom||0), //bottom
|
|
this.yTickSize
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Returns a reference to the linked element
|
|
* @return {HTMLElement} the html element
|
|
*/
|
|
getEl: function() {
|
|
if (!this._domRef) {
|
|
this._domRef = Ext.getDom(this.id);
|
|
}
|
|
|
|
return this._domRef;
|
|
},
|
|
|
|
/**
|
|
* 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
|
|
* @return {HTMLElement} the html element
|
|
*/
|
|
getDragEl: function() {
|
|
return Ext.getDom(this.dragElId);
|
|
},
|
|
|
|
/**
|
|
* Sets up the DragDrop object. Must be called in the constructor of any
|
|
* Ext.dd.DragDrop subclass
|
|
* @param {String} id the id of the linked element
|
|
* @param {String} sGroup the group of related items
|
|
* @param {Object} config configuration attributes
|
|
*/
|
|
init: function(id, sGroup, config) {
|
|
this.initTarget(id, sGroup, config);
|
|
Ext.EventManager.on(this.id, "mousedown", this.handleMouseDown, this);
|
|
// Ext.EventManager.on(this.id, "selectstart", Event.preventDefault);
|
|
},
|
|
|
|
/**
|
|
* Initializes Targeting functionality only... the object does not
|
|
* get a mousedown handler.
|
|
* @param {String} id the id of the linked element
|
|
* @param {String} sGroup the group of related items
|
|
* @param {Object} config configuration attributes
|
|
*/
|
|
initTarget: function(id, sGroup, config) {
|
|
// configuration attributes
|
|
this.config = config || {};
|
|
|
|
// create a local reference to the drag and drop manager
|
|
this.DDMInstance = Ext.dd.DragDropManager;
|
|
// initialize the groups array
|
|
this.groups = {};
|
|
|
|
// assume that we have an element reference instead of an id if the
|
|
// parameter is not a string
|
|
if (typeof id !== "string") {
|
|
id = Ext.id(id);
|
|
}
|
|
|
|
// set the id
|
|
this.id = id;
|
|
|
|
// add to an interaction group
|
|
this.addToGroup((sGroup) ? sGroup : "default");
|
|
|
|
// We don't want to register this as the handle with the manager
|
|
// so we just set the id rather than calling the setter.
|
|
this.handleElId = id;
|
|
|
|
// the linked element is the element that gets dragged by default
|
|
this.setDragElId(id);
|
|
|
|
// by default, clicked anchors will not start drag operations.
|
|
this.invalidHandleTypes = { A: "A" };
|
|
this.invalidHandleIds = {};
|
|
this.invalidHandleClasses = [];
|
|
|
|
this.applyConfig();
|
|
|
|
this.handleOnAvailable();
|
|
},
|
|
|
|
/**
|
|
* Applies the configuration parameters that were passed into the constructor.
|
|
* This is supposed to happen at each level through the inheritance chain. So
|
|
* 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.
|
|
*/
|
|
applyConfig: function() {
|
|
|
|
// configurable properties:
|
|
// padding, isTarget, maintainOffset, primaryButtonOnly
|
|
this.padding = this.config.padding || [0, 0, 0, 0];
|
|
this.isTarget = (this.config.isTarget !== false);
|
|
this.maintainOffset = (this.config.maintainOffset);
|
|
this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
|
|
|
|
},
|
|
|
|
/**
|
|
* Executed when the linked element is available
|
|
* @private
|
|
*/
|
|
handleOnAvailable: function() {
|
|
this.available = true;
|
|
this.resetConstraints();
|
|
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.
|
|
* @param {Number} iTop Top pad
|
|
* @param {Number} iRight Right pad
|
|
* @param {Number} iBot Bot pad
|
|
* @param {Number} iLeft Left pad
|
|
*/
|
|
setPadding: function(iTop, iRight, iBot, iLeft) {
|
|
// this.padding = [iLeft, iRight, iTop, iBot];
|
|
if (!iRight && 0 !== iRight) {
|
|
this.padding = [iTop, iTop, iTop, iTop];
|
|
} else if (!iBot && 0 !== iBot) {
|
|
this.padding = [iTop, iRight, iTop, iRight];
|
|
} else {
|
|
this.padding = [iTop, iRight, iBot, iLeft];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Stores the initial placement of the linked element.
|
|
* @param {Number} diffX the X offset, default 0
|
|
* @param {Number} diffY the Y offset, default 0
|
|
*/
|
|
setInitPosition: function(diffX, diffY) {
|
|
var el = this.getEl(),
|
|
dx, dy, p;
|
|
|
|
if (!this.DDMInstance.verifyEl(el)) {
|
|
return;
|
|
}
|
|
|
|
dx = diffX || 0;
|
|
dy = diffY || 0;
|
|
|
|
p = Ext.Element.getXY( el );
|
|
|
|
this.initPageX = p[0] - dx;
|
|
this.initPageY = p[1] - dy;
|
|
|
|
this.lastPageX = p[0];
|
|
this.lastPageY = p[1];
|
|
|
|
this.setStartPosition(p);
|
|
},
|
|
|
|
/**
|
|
* Sets the start position of the element. This is set when the obj
|
|
* is initialized, the reset when a drag is started.
|
|
* @param pos current position (from previous lookup)
|
|
* @private
|
|
*/
|
|
setStartPosition: function(pos) {
|
|
var p = pos || Ext.Element.getXY( this.getEl() );
|
|
this.deltaSetXY = null;
|
|
|
|
this.startPageX = p[0];
|
|
this.startPageY = p[1];
|
|
},
|
|
|
|
/**
|
|
* 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.
|
|
* @param {String} sGroup the name of the group
|
|
*/
|
|
addToGroup: function(sGroup) {
|
|
this.groups[sGroup] = true;
|
|
this.DDMInstance.regDragDrop(this, sGroup);
|
|
},
|
|
|
|
/**
|
|
* Removes this instance from the supplied interaction group
|
|
* @param {String} sGroup The group to drop
|
|
*/
|
|
removeFromGroup: function(sGroup) {
|
|
if (this.groups[sGroup]) {
|
|
delete this.groups[sGroup];
|
|
}
|
|
|
|
this.DDMInstance.removeDDFromGroup(this, sGroup);
|
|
},
|
|
|
|
/**
|
|
* Allows you to specify that an element other than the linked element
|
|
* will be moved with the cursor during a drag
|
|
* @param {String} id the id of the element that will be used to initiate the drag
|
|
*/
|
|
setDragElId: function(id) {
|
|
this.dragElId = id;
|
|
},
|
|
|
|
/**
|
|
* Allows you to specify a child of the linked element that should be
|
|
* used to initiate the drag operation. An example of this would be if
|
|
* you have a content div with text and links. Clicking anywhere in the
|
|
* 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.
|
|
* @param {String} id the id of the element that will be used to
|
|
* initiate the drag.
|
|
*/
|
|
setHandleElId: function(id) {
|
|
if (typeof id !== "string") {
|
|
id = Ext.id(id);
|
|
}
|
|
this.handleElId = id;
|
|
this.DDMInstance.regHandle(this.id, id);
|
|
},
|
|
|
|
/**
|
|
* Allows you to set an element outside of the linked element as a drag
|
|
* handle
|
|
* @param {String} id the id of the element that will be used to initiate the drag
|
|
*/
|
|
setOuterHandleElId: function(id) {
|
|
if (typeof id !== "string") {
|
|
id = Ext.id(id);
|
|
}
|
|
Ext.EventManager.on(id, "mousedown", this.handleMouseDown, this);
|
|
this.setHandleElId(id);
|
|
|
|
this.hasOuterHandles = true;
|
|
},
|
|
|
|
/**
|
|
* Removes all drag and drop hooks for this element
|
|
*/
|
|
unreg: function() {
|
|
Ext.EventManager.un(this.id, "mousedown", this.handleMouseDown, this);
|
|
this._domRef = null;
|
|
this.DDMInstance._remove(this);
|
|
},
|
|
|
|
/**
|
|
* Destroy this DragDrop instance
|
|
*/
|
|
destroy : function(){
|
|
this.unreg();
|
|
},
|
|
|
|
/**
|
|
* Returns true if this instance is locked, or the drag drop mgr is locked
|
|
* (meaning that all drag/drop is disabled on the page.)
|
|
* @return {Boolean} true if this obj or all drag/drop is locked, else
|
|
* false
|
|
*/
|
|
isLocked: function() {
|
|
return (this.DDMInstance.isLocked() || this.locked);
|
|
},
|
|
|
|
/**
|
|
* Called when this object is clicked
|
|
* @param {Event} e
|
|
* @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj)
|
|
* @private
|
|
*/
|
|
handleMouseDown: function(e, oDD){
|
|
var me = this;
|
|
|
|
if ((me.primaryButtonOnly && e.button != 0) || me.isLocked()) {
|
|
return;
|
|
}
|
|
|
|
me.DDMInstance.refreshCache(me.groups);
|
|
|
|
if (me.hasOuterHandles || me.DDMInstance.isOverTarget(e.getPoint(), me)) {
|
|
if (me.clickValidator(e)) {
|
|
// set the initial element position
|
|
me.setStartPosition();
|
|
me.b4MouseDown(e);
|
|
me.onMouseDown(e);
|
|
|
|
me.DDMInstance.handleMouseDown(e, me);
|
|
|
|
me.DDMInstance.stopEvent(e);
|
|
}
|
|
}
|
|
},
|
|
|
|
clickValidator: function(e) {
|
|
var target = e.getTarget();
|
|
return ( this.isValidHandleChild(target) &&
|
|
(this.id == this.handleElId ||
|
|
this.DDMInstance.handleWasClicked(target, this.id)) );
|
|
},
|
|
|
|
/**
|
|
* Allows you to specify a tag name that should not start a drag operation
|
|
* 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
|
|
*/
|
|
addInvalidHandleType: function(tagName) {
|
|
var type = tagName.toUpperCase();
|
|
this.invalidHandleTypes[type] = type;
|
|
},
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
addInvalidHandleId: function(id) {
|
|
if (typeof id !== "string") {
|
|
id = Ext.id(id);
|
|
}
|
|
this.invalidHandleIds[id] = id;
|
|
},
|
|
|
|
/**
|
|
* Lets you specify a css class of elements that will not initiate a drag
|
|
* @param {String} cssClass the class of the elements you wish to ignore
|
|
*/
|
|
addInvalidHandleClass: function(cssClass) {
|
|
this.invalidHandleClasses.push(cssClass);
|
|
},
|
|
|
|
/**
|
|
* Unsets an excluded tag name set by addInvalidHandleType
|
|
* @param {String} tagName the type of element to unexclude
|
|
*/
|
|
removeInvalidHandleType: function(tagName) {
|
|
var type = tagName.toUpperCase();
|
|
// this.invalidHandleTypes[type] = null;
|
|
delete this.invalidHandleTypes[type];
|
|
},
|
|
|
|
/**
|
|
* Unsets an invalid handle id
|
|
* @param {String} id the id of the element to re-enable
|
|
*/
|
|
removeInvalidHandleId: function(id) {
|
|
if (typeof id !== "string") {
|
|
id = Ext.id(id);
|
|
}
|
|
delete this.invalidHandleIds[id];
|
|
},
|
|
|
|
/**
|
|
* Unsets an invalid css class
|
|
* @param {String} cssClass the class of the element(s) you wish to
|
|
* re-enable
|
|
*/
|
|
removeInvalidHandleClass: function(cssClass) {
|
|
for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
|
|
if (this.invalidHandleClasses[i] == cssClass) {
|
|
delete this.invalidHandleClasses[i];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks the tag exclusion list to see if this click should be ignored
|
|
* @param {HTMLElement} node the HTMLElement to evaluate
|
|
* @return {Boolean} true if this is a valid tag type, false if not
|
|
*/
|
|
isValidHandleChild: function(node) {
|
|
|
|
var valid = true,
|
|
nodeName,
|
|
i, len;
|
|
// var n = (node.nodeName == "#text") ? node.parentNode : node;
|
|
try {
|
|
nodeName = node.nodeName.toUpperCase();
|
|
} catch(e) {
|
|
nodeName = node.nodeName;
|
|
}
|
|
valid = valid && !this.invalidHandleTypes[nodeName];
|
|
valid = valid && !this.invalidHandleIds[node.id];
|
|
|
|
for (i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
|
|
valid = !Ext.fly(node).hasCls(this.invalidHandleClasses[i]);
|
|
}
|
|
|
|
|
|
return valid;
|
|
|
|
},
|
|
|
|
/**
|
|
* Creates the array of horizontal tick marks if an interval was specified
|
|
* in setXConstraint().
|
|
* @private
|
|
*/
|
|
setXTicks: function(iStartX, iTickSize) {
|
|
this.xTicks = [];
|
|
this.xTickSize = iTickSize;
|
|
|
|
var tickMap = {},
|
|
i;
|
|
|
|
for (i = this.initPageX; i >= this.minX; i = i - iTickSize) {
|
|
if (!tickMap[i]) {
|
|
this.xTicks[this.xTicks.length] = i;
|
|
tickMap[i] = true;
|
|
}
|
|
}
|
|
|
|
for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
|
|
if (!tickMap[i]) {
|
|
this.xTicks[this.xTicks.length] = i;
|
|
tickMap[i] = true;
|
|
}
|
|
}
|
|
|
|
Ext.Array.sort(this.xTicks, this.DDMInstance.numericSort);
|
|
},
|
|
|
|
/**
|
|
* Creates the array of vertical tick marks if an interval was specified in
|
|
* setYConstraint().
|
|
* @private
|
|
*/
|
|
setYTicks: function(iStartY, iTickSize) {
|
|
this.yTicks = [];
|
|
this.yTickSize = iTickSize;
|
|
|
|
var tickMap = {},
|
|
i;
|
|
|
|
for (i = this.initPageY; i >= this.minY; i = i - iTickSize) {
|
|
if (!tickMap[i]) {
|
|
this.yTicks[this.yTicks.length] = i;
|
|
tickMap[i] = true;
|
|
}
|
|
}
|
|
|
|
for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
|
|
if (!tickMap[i]) {
|
|
this.yTicks[this.yTicks.length] = i;
|
|
tickMap[i] = true;
|
|
}
|
|
}
|
|
|
|
Ext.Array.sort(this.yTicks, this.DDMInstance.numericSort);
|
|
},
|
|
|
|
/**
|
|
* 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.
|
|
* @param {Number} iLeft the number of pixels the element can move to the left
|
|
* @param {Number} iRight the number of pixels the element can move to the
|
|
* right
|
|
* @param {Number} iTickSize (optional) parameter for specifying that the
|
|
* element should move iTickSize pixels at a time.
|
|
*/
|
|
setXConstraint: function(iLeft, iRight, iTickSize) {
|
|
this.leftConstraint = iLeft;
|
|
this.rightConstraint = iRight;
|
|
|
|
this.minX = this.initPageX - iLeft;
|
|
this.maxX = this.initPageX + iRight;
|
|
if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
|
|
|
|
this.constrainX = true;
|
|
},
|
|
|
|
/**
|
|
* Clears any constraints applied to this instance. Also clears ticks
|
|
* since they can't exist independent of a constraint at this time.
|
|
*/
|
|
clearConstraints: function() {
|
|
this.constrainX = false;
|
|
this.constrainY = false;
|
|
this.clearTicks();
|
|
},
|
|
|
|
/**
|
|
* Clears any tick interval defined for this instance
|
|
*/
|
|
clearTicks: function() {
|
|
this.xTicks = null;
|
|
this.yTicks = null;
|
|
this.xTickSize = 0;
|
|
this.yTickSize = 0;
|
|
},
|
|
|
|
/**
|
|
* 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.
|
|
* @param {Number} iUp the number of pixels the element can move up
|
|
* @param {Number} iDown the number of pixels the element can move down
|
|
* @param {Number} iTickSize (optional) parameter for specifying that the
|
|
* element should move iTickSize pixels at a time.
|
|
*/
|
|
setYConstraint: function(iUp, iDown, iTickSize) {
|
|
this.topConstraint = iUp;
|
|
this.bottomConstraint = iDown;
|
|
|
|
this.minY = this.initPageY - iUp;
|
|
this.maxY = this.initPageY + iDown;
|
|
if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
|
|
|
|
this.constrainY = true;
|
|
|
|
},
|
|
|
|
/**
|
|
* Must be called if you manually reposition a dd element.
|
|
* @param {Boolean} maintainOffset
|
|
*/
|
|
resetConstraints: function() {
|
|
// Maintain offsets if necessary
|
|
if (this.initPageX || this.initPageX === 0) {
|
|
// figure out how much this thing has moved
|
|
var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0,
|
|
dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
|
|
|
|
this.setInitPosition(dx, dy);
|
|
|
|
// This is the first time we have detected the element's position
|
|
} else {
|
|
this.setInitPosition();
|
|
}
|
|
|
|
if (this.constrainX) {
|
|
this.setXConstraint( this.leftConstraint,
|
|
this.rightConstraint,
|
|
this.xTickSize );
|
|
}
|
|
|
|
if (this.constrainY) {
|
|
this.setYConstraint( this.topConstraint,
|
|
this.bottomConstraint,
|
|
this.yTickSize );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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.
|
|
* @param {Number} val where we want to place the object
|
|
* @param {Number[]} tickArray sorted array of valid points
|
|
* @return {Number} the closest tick
|
|
* @private
|
|
*/
|
|
getTick: function(val, tickArray) {
|
|
if (!tickArray) {
|
|
// If tick interval is not defined, it is effectively 1 pixel,
|
|
// so we return the value passed to us.
|
|
return val;
|
|
} else if (tickArray[0] >= val) {
|
|
// The value is lower than the first tick, so we return the first
|
|
// tick.
|
|
return tickArray[0];
|
|
} else {
|
|
var i, len, next, diff1, diff2;
|
|
for (i=0, len=tickArray.length; i<len; ++i) {
|
|
next = i + 1;
|
|
if (tickArray[next] && tickArray[next] >= val) {
|
|
diff1 = val - tickArray[i];
|
|
diff2 = tickArray[next] - val;
|
|
return (diff2 > diff1) ? tickArray[i] : tickArray[next];
|
|
}
|
|
}
|
|
|
|
// The value is larger than the last tick, so we return the last
|
|
// tick.
|
|
return tickArray[tickArray.length - 1];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* toString method
|
|
* @return {String} string representation of the dd obj
|
|
*/
|
|
toString: function() {
|
|
return ("DragDrop " + this.id);
|
|
}
|
|
|
|
});
|
|
|
|
/*
|
|
* This is a derivative of the similarly named class in the YUI Library.
|
|
* The original license:
|
|
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
* Code licensed under the BSD License:
|
|
* http://developer.yahoo.net/yui/license.txt
|
|
*/
|
|
|
|
|
|
/**
|
|
* A DragDrop implementation where the linked element follows the
|
|
* mouse cursor during a drag.
|
|
*/
|
|
Ext.define('Ext.dd.DD', {
|
|
extend: Ext.dd.DragDrop ,
|
|
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} scroll
|
|
* When set to true, the utility automatically tries to scroll the browser
|
|
* window when a drag and drop element is dragged near the viewport boundary.
|
|
*/
|
|
scroll: true,
|
|
|
|
/**
|
|
* Sets the pointer offset to the distance between the linked element's top
|
|
* left corner and the location the element was clicked.
|
|
* @param {Number} iPageX the X coordinate of the click
|
|
* @param {Number} iPageY the Y coordinate of the click
|
|
*/
|
|
autoOffset: function(iPageX, iPageY) {
|
|
var x = iPageX - this.startPageX,
|
|
y = iPageY - this.startPageY;
|
|
this.setDelta(x, y);
|
|
},
|
|
|
|
/**
|
|
* Sets the pointer offset. You can call this directly to force the
|
|
* offset to be in a particular location (e.g., pass in 0,0 to set it
|
|
* to the center of the object)
|
|
* @param {Number} iDeltaX the distance from the left
|
|
* @param {Number} iDeltaY the distance from the top
|
|
*/
|
|
setDelta: function(iDeltaX, iDeltaY) {
|
|
this.deltaX = iDeltaX;
|
|
this.deltaY = iDeltaY;
|
|
},
|
|
|
|
/**
|
|
* Sets the drag element to the location of the mousedown or click event,
|
|
* maintaining the cursor location relative to the location on the element
|
|
* that was clicked. Override this if you want to place the element in a
|
|
* location other than where the cursor is.
|
|
* @param {Number} iPageX the X coordinate of the mousedown or drag event
|
|
* @param {Number} iPageY the Y coordinate of the mousedown or drag event
|
|
*/
|
|
setDragElPos: function(iPageX, iPageY) {
|
|
// the first time we do this, we are going to check to make sure
|
|
// the element has css positioning
|
|
|
|
var el = this.getDragEl();
|
|
this.alignElWithMouse(el, iPageX, iPageY);
|
|
},
|
|
|
|
/**
|
|
* Sets the element to the location of the mousedown or click event,
|
|
* maintaining the cursor location relative to the location on the element
|
|
* that was clicked. Override this if you want to place the element in a
|
|
* location other than where the cursor is.
|
|
* @param {HTMLElement} el the element to move
|
|
* @param {Number} iPageX the X coordinate of the mousedown or drag event
|
|
* @param {Number} iPageY the Y coordinate of the mousedown or drag event
|
|
*/
|
|
alignElWithMouse: function(el, iPageX, iPageY) {
|
|
var oCoord = this.getTargetCoord(iPageX, iPageY),
|
|
fly = el.dom ? el : Ext.fly(el, '_dd'),
|
|
elSize = fly.getSize(),
|
|
EL = Ext.Element,
|
|
vpSize,
|
|
aCoord,
|
|
newLeft,
|
|
newTop;
|
|
|
|
if (!this.deltaSetXY) {
|
|
vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
|
|
aCoord = [
|
|
Math.max(0, Math.min(oCoord.x, vpSize.width - elSize.width)),
|
|
Math.max(0, Math.min(oCoord.y, vpSize.height - elSize.height))
|
|
];
|
|
fly.setXY(aCoord);
|
|
newLeft = this.getLocalX(fly);
|
|
newTop = fly.getLocalY();
|
|
this.deltaSetXY = [newLeft - oCoord.x, newTop - oCoord.y];
|
|
} else {
|
|
vpSize = this.cachedViewportSize;
|
|
this.setLocalXY(
|
|
fly,
|
|
Math.max(0, Math.min(oCoord.x + this.deltaSetXY[0], vpSize.width - elSize.width)),
|
|
Math.max(0, Math.min(oCoord.y + this.deltaSetXY[1], vpSize.height - elSize.height))
|
|
);
|
|
}
|
|
|
|
this.cachePosition(oCoord.x, oCoord.y);
|
|
this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
|
|
return oCoord;
|
|
},
|
|
|
|
/**
|
|
* Saves the most recent position so that we can reset the constraints and
|
|
* tick marks on-demand. We need to know this so that we can calculate the
|
|
* number of pixels the element is offset from its original position.
|
|
*
|
|
* @param {Number} [iPageX] the current x position (this just makes it so we
|
|
* don't have to look it up again)
|
|
* @param {Number} [iPageY] the current y position (this just makes it so we
|
|
* don't have to look it up again)
|
|
*/
|
|
cachePosition: function(iPageX, iPageY) {
|
|
if (iPageX) {
|
|
this.lastPageX = iPageX;
|
|
this.lastPageY = iPageY;
|
|
} else {
|
|
var aCoord = Ext.Element.getXY(this.getEl());
|
|
this.lastPageX = aCoord[0];
|
|
this.lastPageY = aCoord[1];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Auto-scroll the window if the dragged object has been moved beyond the
|
|
* visible window boundary.
|
|
* @param {Number} x the drag element's x position
|
|
* @param {Number} y the drag element's y position
|
|
* @param {Number} h the height of the drag element
|
|
* @param {Number} w the width of the drag element
|
|
* @private
|
|
*/
|
|
autoScroll: function(x, y, h, w) {
|
|
|
|
if (this.scroll) {
|
|
// The client height
|
|
var clientH = Ext.Element.getViewHeight(),
|
|
// The client width
|
|
clientW = Ext.Element.getViewWidth(),
|
|
// The amt scrolled down
|
|
st = this.DDMInstance.getScrollTop(),
|
|
// The amt scrolled right
|
|
sl = this.DDMInstance.getScrollLeft(),
|
|
// Location of the bottom of the element
|
|
bot = h + y,
|
|
// Location of the right of the element
|
|
right = w + x,
|
|
// The distance from the cursor to the bottom of the visible area,
|
|
// adjusted so that we don't scroll if the cursor is beyond the
|
|
// element drag constraints
|
|
toBot = (clientH + st - y - this.deltaY),
|
|
// The distance from the cursor to the right of the visible area
|
|
toRight = (clientW + sl - x - this.deltaX),
|
|
// How close to the edge the cursor must be before we scroll
|
|
// var thresh = (document.all) ? 100 : 40;
|
|
thresh = 40,
|
|
// How many pixels to scroll per autoscroll op. This helps to reduce
|
|
// clunky scrolling. IE is more sensitive about this ... it needs this
|
|
// value to be higher.
|
|
scrAmt = (document.all) ? 80 : 30;
|
|
|
|
// Scroll down if we are near the bottom of the visible page and the
|
|
// obj extends below the crease
|
|
if ( bot > clientH && toBot < thresh ) {
|
|
window.scrollTo(sl, st + scrAmt);
|
|
}
|
|
|
|
// Scroll up if the window is scrolled down and the top of the object
|
|
// goes above the top border
|
|
if ( y < st && st > 0 && y - st < thresh ) {
|
|
window.scrollTo(sl, st - scrAmt);
|
|
}
|
|
|
|
// Scroll right if the obj is beyond the right border and the cursor is
|
|
// near the border.
|
|
if ( right > clientW && toRight < thresh ) {
|
|
window.scrollTo(sl + scrAmt, st);
|
|
}
|
|
|
|
// Scroll left if the window has been scrolled to the right and the obj
|
|
// extends past the left border
|
|
if ( x < sl && sl > 0 && x - sl < thresh ) {
|
|
window.scrollTo(sl - scrAmt, st);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finds the location the element should be placed if we want to move
|
|
* it to where the mouse location less the click offset would place us.
|
|
* @param {Number} iPageX the X coordinate of the click
|
|
* @param {Number} iPageY the Y coordinate of the click
|
|
* @return {Object} An object that contains the coordinates (Object.x and Object.y)
|
|
* @return {Number} return.x
|
|
* @return {Number} return.y
|
|
* @private
|
|
*/
|
|
getTargetCoord: function(iPageX, iPageY) {
|
|
var x = iPageX - this.deltaX,
|
|
y = iPageY - this.deltaY;
|
|
|
|
if (this.constrainX) {
|
|
if (x < this.minX) {
|
|
x = this.minX;
|
|
}
|
|
if (x > this.maxX) {
|
|
x = this.maxX;
|
|
}
|
|
}
|
|
|
|
if (this.constrainY) {
|
|
if (y < this.minY) {
|
|
y = this.minY;
|
|
}
|
|
if (y > this.maxY) {
|
|
y = this.maxY;
|
|
}
|
|
}
|
|
|
|
x = this.getTick(x, this.xTicks);
|
|
y = this.getTick(y, this.yTicks);
|
|
|
|
|
|
return {x: x, y: y};
|
|
},
|
|
|
|
/**
|
|
* Sets up config options specific to this class. Overrides
|
|
* Ext.dd.DragDrop, but all versions of this method through the
|
|
* inheritance chain are called
|
|
*/
|
|
applyConfig: function() {
|
|
this.callParent();
|
|
this.scroll = (this.config.scroll !== false);
|
|
},
|
|
|
|
/**
|
|
* Event that fires prior to the onMouseDown event. Overrides
|
|
* Ext.dd.DragDrop.
|
|
*/
|
|
b4MouseDown: function(e) {
|
|
// this.resetConstraints();
|
|
this.autoOffset(e.getPageX(), e.getPageY());
|
|
},
|
|
|
|
/**
|
|
* Event that fires prior to the onDrag event. Overrides
|
|
* Ext.dd.DragDrop.
|
|
*/
|
|
b4Drag: function(e) {
|
|
this.setDragElPos(e.getPageX(), e.getPageY());
|
|
},
|
|
|
|
toString: function() {
|
|
return ("DD " + this.id);
|
|
},
|
|
|
|
getLocalX: function(el) {
|
|
return el.getLocalX();
|
|
},
|
|
|
|
setLocalXY: function(el, x, y) {
|
|
el.setLocalXY(x, y);
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////////////////////
|
|
// Debugging ygDragDrop events that can be overridden
|
|
//////////////////////////////////////////////////////////////////////////
|
|
/*
|
|
startDrag: function(x, y) {
|
|
},
|
|
|
|
onDrag: function(e) {
|
|
},
|
|
|
|
onDragEnter: function(e, id) {
|
|
},
|
|
|
|
onDragOver: function(e, id) {
|
|
},
|
|
|
|
onDragOut: function(e, id) {
|
|
},
|
|
|
|
onDragDrop: function(e, id) {
|
|
},
|
|
|
|
endDrag: function(e) {
|
|
}
|
|
|
|
*/
|
|
|
|
});
|
|
|
|
/*
|
|
* This is a derivative of the similarly named class in the YUI Library.
|
|
* The original license:
|
|
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
* Code licensed under the BSD License:
|
|
* http://developer.yahoo.net/yui/license.txt
|
|
*/
|
|
|
|
/**
|
|
* 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
|
|
* element, and moved to the exact location of the linked element.
|
|
*
|
|
* 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.
|
|
*/
|
|
Ext.define('Ext.dd.DDProxy', {
|
|
extend: Ext.dd.DD ,
|
|
|
|
statics: {
|
|
/**
|
|
* The default drag frame div id
|
|
* @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);
|
|
this.initFrame();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} resizeFrame
|
|
* By default we resize the drag frame to be the same size as the element
|
|
* we want to drag (this is to get the frame effect). We can turn it off
|
|
* if we want a different behavior.
|
|
*/
|
|
resizeFrame: true,
|
|
|
|
/**
|
|
* @property {Boolean} centerFrame
|
|
* By default the frame is positioned exactly where the drag element is, so
|
|
* we use the cursor offset provided by Ext.dd.DD. Another option that works only if
|
|
* you do not have constraints on the obj is to have the drag frame centered
|
|
* around the cursor. Set centerFrame to true for this effect.
|
|
*/
|
|
centerFrame: false,
|
|
|
|
/**
|
|
* Creates the proxy element if it does not yet exist
|
|
*/
|
|
createFrame: function() {
|
|
var self = this,
|
|
body = document.body,
|
|
div,
|
|
s;
|
|
|
|
if (!body || !body.firstChild) {
|
|
setTimeout( function() { self.createFrame(); }, 50 );
|
|
return;
|
|
}
|
|
|
|
div = this.getDragEl();
|
|
|
|
if (!div) {
|
|
div = document.createElement("div");
|
|
div.id = this.dragElId;
|
|
s = div.style;
|
|
|
|
s.position = "absolute";
|
|
s.visibility = "hidden";
|
|
s.cursor = "move";
|
|
s.border = "2px solid #aaa";
|
|
s.zIndex = 999;
|
|
|
|
// appendChild can blow up IE if invoked prior to the window load event
|
|
// while rendering a table. It is possible there are other scenarios
|
|
// that would cause this to happen as well.
|
|
body.insertBefore(div, body.firstChild);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initialization for the drag frame element. Must be called in the
|
|
* constructor of all subclasses
|
|
*/
|
|
initFrame: function() {
|
|
this.createFrame();
|
|
},
|
|
|
|
applyConfig: function() {
|
|
this.callParent();
|
|
|
|
this.resizeFrame = (this.config.resizeFrame !== false);
|
|
this.centerFrame = (this.config.centerFrame);
|
|
this.setDragElId(this.config.dragElId || Ext.dd.DDProxy.dragElId);
|
|
},
|
|
|
|
/**
|
|
* Resizes the drag frame to the dimensions of the clicked object, positions
|
|
* it over the object, and finally displays it
|
|
* @param {Number} iPageX X click position
|
|
* @param {Number} iPageY Y click position
|
|
* @private
|
|
*/
|
|
showFrame: function(iPageX, iPageY) {
|
|
var el = this.getEl(),
|
|
dragEl = this.getDragEl(),
|
|
s = dragEl.style;
|
|
|
|
this._resizeProxy();
|
|
|
|
if (this.centerFrame) {
|
|
this.setDelta( Math.round(parseInt(s.width, 10)/2),
|
|
Math.round(parseInt(s.height, 10)/2) );
|
|
}
|
|
|
|
this.setDragElPos(iPageX, iPageY);
|
|
|
|
Ext.fly(dragEl).show();
|
|
},
|
|
|
|
/**
|
|
* The proxy is automatically resized to the dimensions of the linked
|
|
* element when a drag is initiated, unless resizeFrame is set to false
|
|
* @private
|
|
*/
|
|
_resizeProxy: function() {
|
|
if (this.resizeFrame) {
|
|
var el = this.getEl();
|
|
Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
|
|
}
|
|
},
|
|
|
|
// overrides Ext.dd.DragDrop
|
|
b4MouseDown: function(e) {
|
|
var x = e.getPageX(),
|
|
y = e.getPageY();
|
|
this.autoOffset(x, y);
|
|
this.setDragElPos(x, y);
|
|
},
|
|
|
|
// overrides Ext.dd.DragDrop
|
|
b4StartDrag: function(x, y) {
|
|
// show the drag frame
|
|
this.showFrame(x, y);
|
|
},
|
|
|
|
// overrides Ext.dd.DragDrop
|
|
b4EndDrag: function(e) {
|
|
Ext.fly(this.getDragEl()).hide();
|
|
},
|
|
|
|
// overrides Ext.dd.DragDrop
|
|
// By default we try to move the element to the last location of the frame.
|
|
// This is so that the default behavior mirrors that of Ext.dd.DD.
|
|
endDrag: function(e) {
|
|
|
|
var lel = this.getEl(),
|
|
del = this.getDragEl();
|
|
|
|
// Show the drag frame briefly so we can get its position
|
|
del.style.visibility = "";
|
|
|
|
this.beforeMove();
|
|
// Hide the linked element before the move to get around a Safari
|
|
// rendering bug.
|
|
lel.style.visibility = "hidden";
|
|
Ext.dd.DDM.moveToEl(lel, del);
|
|
del.style.visibility = "hidden";
|
|
lel.style.visibility = "";
|
|
|
|
this.afterDrag();
|
|
},
|
|
|
|
beforeMove : function(){
|
|
|
|
},
|
|
|
|
afterDrag : function(){
|
|
|
|
},
|
|
|
|
toString: function() {
|
|
return ("DDProxy " + this.id);
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* A specialized floating Component 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.
|
|
*/
|
|
Ext.define('Ext.dd.StatusProxy', {
|
|
extend: Ext.Component ,
|
|
animRepair: false,
|
|
|
|
childEls: [
|
|
'ghost'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<div class="' + Ext.baseCSSPrefix + 'dd-drop-icon"></div>' +
|
|
'<div id="{id}-ghost" class="' + Ext.baseCSSPrefix + 'dd-drag-ghost"></div>'
|
|
],
|
|
|
|
repairCls: Ext.baseCSSPrefix + 'dd-drag-repair',
|
|
|
|
/**
|
|
* Creates new StatusProxy.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
config = config || {};
|
|
|
|
Ext.apply(me, {
|
|
hideMode: 'visibility',
|
|
hidden: true,
|
|
floating: true,
|
|
id: me.id || Ext.id(),
|
|
cls: Ext.baseCSSPrefix + 'dd-drag-proxy ' + this.dropNotAllowed,
|
|
shadow: config.shadow || false,
|
|
renderTo: Ext.getDetachedBody()
|
|
});
|
|
me.callParent(arguments);
|
|
this.dropStatus = this.dropNotAllowed;
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} dropAllowed
|
|
* The CSS class to apply to the status element when drop is allowed.
|
|
*/
|
|
dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
|
|
|
|
/**
|
|
* @cfg {String} dropNotAllowed
|
|
* The CSS class to apply to the status element when drop is not allowed.
|
|
*/
|
|
dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
|
|
|
|
/**
|
|
* Updates the proxy's visual element to indicate the status of whether or not drop is allowed
|
|
* over the current target element.
|
|
* @param {String} cssClass The css class for the new drop status indicator image
|
|
*/
|
|
setStatus : function(cssClass){
|
|
cssClass = cssClass || this.dropNotAllowed;
|
|
if (this.dropStatus != cssClass) {
|
|
this.el.replaceCls(this.dropStatus, cssClass);
|
|
this.dropStatus = cssClass;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Resets the status indicator to the default dropNotAllowed value
|
|
* @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
|
|
*/
|
|
reset : function(clearGhost){
|
|
var me = this,
|
|
clsPrefix = Ext.baseCSSPrefix + 'dd-drag-proxy ';
|
|
|
|
me.el.replaceCls(clsPrefix + me.dropAllowed, clsPrefix + me.dropNotAllowed);
|
|
me.dropStatus = me.dropNotAllowed;
|
|
if (clearGhost) {
|
|
me.ghost.update('');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates the contents of the ghost element
|
|
* @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a
|
|
* DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first).
|
|
*/
|
|
update : function(html){
|
|
if (typeof html == "string") {
|
|
this.ghost.update(html);
|
|
} else {
|
|
this.ghost.update("");
|
|
html.style.margin = "0";
|
|
this.ghost.dom.appendChild(html);
|
|
}
|
|
var el = this.ghost.dom.firstChild;
|
|
if (el) {
|
|
Ext.fly(el).setStyle('float', 'none');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the ghost element
|
|
* @return {Ext.Element} el
|
|
*/
|
|
getGhost : function(){
|
|
return this.ghost;
|
|
},
|
|
|
|
/**
|
|
* Hides the proxy
|
|
* @param {Boolean} clear True to reset the status and clear the ghost contents,
|
|
* false to preserve them
|
|
*/
|
|
hide : function(clear) {
|
|
this.callParent();
|
|
if (clear) {
|
|
this.reset(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Stops the repair animation if it's currently running
|
|
*/
|
|
stop : function(){
|
|
if (this.anim && this.anim.isAnimated && this.anim.isAnimated()) {
|
|
this.anim.stop();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Force the Layer to sync its shadow and shim positions to the element
|
|
*/
|
|
sync : function(){
|
|
this.el.sync();
|
|
},
|
|
|
|
/**
|
|
* Causes the proxy to return to its position of origin via an animation.
|
|
* Should be called after an invalid drop operation by the item being dragged.
|
|
* @param {Number[]} xy The XY position of the element ([x, y])
|
|
* @param {Function} callback The function to call after the repair is complete.
|
|
* @param {Object} scope The scope (`this` reference) in which the callback function is executed.
|
|
* Defaults to the browser window.
|
|
*/
|
|
repair : function(xy, callback, scope) {
|
|
var me = this;
|
|
|
|
me.callback = callback;
|
|
me.scope = scope;
|
|
if (xy && me.animRepair !== false) {
|
|
me.el.addCls(me.repairCls);
|
|
me.el.hideUnders(true);
|
|
me.anim = me.el.animate({
|
|
duration: me.repairDuration || 500,
|
|
easing: 'ease-out',
|
|
to: {
|
|
x: xy[0],
|
|
y: xy[1]
|
|
},
|
|
stopAnimation: true,
|
|
callback: me.afterRepair,
|
|
scope: me
|
|
});
|
|
} else {
|
|
me.afterRepair();
|
|
}
|
|
},
|
|
|
|
// private
|
|
afterRepair : function() {
|
|
var me = this;
|
|
|
|
me.hide(true);
|
|
me.el.removeCls(me.repairCls);
|
|
if (typeof me.callback == "function") {
|
|
me.callback.call(me.scope || me);
|
|
}
|
|
delete me.callback;
|
|
delete me.scope;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A simple class that provides the basic implementation needed to make any element draggable.
|
|
*/
|
|
Ext.define('Ext.dd.DragSource', {
|
|
extend: Ext.dd.DDProxy ,
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {String} ddGroup
|
|
* A named drag drop group to which this object belongs. If a group is specified, then this object will only
|
|
* interact with other drag drop objects in the same group.
|
|
*/
|
|
|
|
/**
|
|
* @property {Object} dragData
|
|
* This property contains the data representing the dragged object. This data is set up by the implementation of the
|
|
* {@link #getDragData} method. It must contain a ddel property, but can contain any other data according to the
|
|
* application's needs.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} dropAllowed
|
|
* The CSS class returned to the drag source when drop is allowed.
|
|
*/
|
|
dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
|
|
/**
|
|
* @cfg {String} dropNotAllowed
|
|
* The CSS class returned to the drag source when drop is not allowed.
|
|
*/
|
|
dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
|
|
|
|
/**
|
|
* @cfg {Boolean} animRepair
|
|
* If true, animates the proxy element back to the position of the handle element used to trigger the drag.
|
|
*/
|
|
animRepair: true,
|
|
|
|
/**
|
|
* @cfg {String} repairHighlightColor
|
|
* The color to use when visually highlighting the drag source in the afterRepair
|
|
* method after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without
|
|
* a preceding '#'.
|
|
*/
|
|
repairHighlightColor: 'c3daf9',
|
|
|
|
/**
|
|
* Creates new drag-source.
|
|
* @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(el, config) {
|
|
this.el = Ext.get(el);
|
|
if(!this.dragData){
|
|
this.dragData = {};
|
|
}
|
|
|
|
Ext.apply(this, config);
|
|
|
|
if(!this.proxy){
|
|
this.proxy = new Ext.dd.StatusProxy({
|
|
id: this.el.id + '-drag-status-proxy',
|
|
animRepair: this.animRepair
|
|
});
|
|
}
|
|
this.callParent([this.el.dom, this.ddGroup || this.group,
|
|
{dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}]);
|
|
|
|
this.dragging = false;
|
|
},
|
|
|
|
/**
|
|
* Returns the data object associated with this drag source
|
|
* @return {Object} data An object containing arbitrary data
|
|
*/
|
|
getDragData : function(e){
|
|
return this.dragData;
|
|
},
|
|
|
|
// @private
|
|
onDragEnter : function(e, id){
|
|
var target = Ext.dd.DragDropManager.getDDById(id),
|
|
status;
|
|
this.cachedTarget = target;
|
|
if (this.beforeDragEnter(target, e, id) !== false) {
|
|
if (target.isNotifyTarget) {
|
|
status = target.notifyEnter(this, e, this.dragData);
|
|
this.proxy.setStatus(status);
|
|
} else {
|
|
this.proxy.setStatus(this.dropAllowed);
|
|
}
|
|
|
|
if (this.afterDragEnter) {
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* when the dragged item enters the drop target by providing an implementation.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @method afterDragEnter
|
|
*/
|
|
this.afterDragEnter(target, e, id);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* before the dragged item enters the drop target and optionally cancel the onDragEnter.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @return {Boolean} isValid True if the drag event is valid, else false to cancel
|
|
* @template
|
|
*/
|
|
beforeDragEnter: function(target, e, id) {
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
onDragOver: function(e, id) {
|
|
var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id),
|
|
status;
|
|
if (this.beforeDragOver(target, e, id) !== false) {
|
|
if(target.isNotifyTarget){
|
|
status = target.notifyOver(this, e, this.dragData);
|
|
this.proxy.setStatus(status);
|
|
}
|
|
|
|
if (this.afterDragOver) {
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* while the dragged item is over the drop target by providing an implementation.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @method afterDragOver
|
|
*/
|
|
this.afterDragOver(target, e, id);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* while the dragged item is over the drop target and optionally cancel the onDragOver.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @return {Boolean} isValid True if the drag event is valid, else false to cancel
|
|
* @template
|
|
*/
|
|
beforeDragOver: function(target, e, id) {
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
onDragOut: function(e, id) {
|
|
var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
|
|
if (this.beforeDragOut(target, e, id) !== false) {
|
|
if (target.isNotifyTarget) {
|
|
target.notifyOut(this, e, this.dragData);
|
|
}
|
|
this.proxy.reset();
|
|
if (this.afterDragOut) {
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* after the dragged item is dragged out of the target without dropping.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @method afterDragOut
|
|
*/
|
|
this.afterDragOut(target, e, id);
|
|
}
|
|
}
|
|
this.cachedTarget = null;
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action before the dragged
|
|
* item is dragged out of the target without dropping, and optionally cancel the onDragOut.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @return {Boolean} isValid True if the drag event is valid, else false to cancel
|
|
* @template
|
|
*/
|
|
beforeDragOut: function(target, e, id){
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
onDragDrop: function(e, id){
|
|
var target = this.cachedTarget || Ext.dd.DragDropManager.getDDById(id);
|
|
if (this.beforeDragDrop(target, e, id) !== false) {
|
|
if (target.isNotifyTarget) {
|
|
if (target.notifyDrop(this, e, this.dragData) !== false) { // valid drop?
|
|
this.onValidDrop(target, e, id);
|
|
} else {
|
|
this.onInvalidDrop(target, e, id);
|
|
}
|
|
} else {
|
|
this.onValidDrop(target, e, id);
|
|
}
|
|
|
|
if (this.afterDragDrop) {
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* after a valid drag drop has occurred by providing an implementation.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dropped element
|
|
* @method afterDragDrop
|
|
*/
|
|
this.afterDragDrop(target, e, id);
|
|
}
|
|
}
|
|
delete this.cachedTarget;
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action before the dragged
|
|
* item is dropped onto the target and optionally cancel the onDragDrop.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
|
|
* @template
|
|
*/
|
|
beforeDragDrop: function(target, e, id){
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
onValidDrop: function(target, e, id){
|
|
this.hideProxy();
|
|
if(this.afterValidDrop){
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* after a valid drop has occurred by providing an implementation.
|
|
* @param {Object} target The target DD
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dropped element
|
|
* @method afterValidDrop
|
|
*/
|
|
this.afterValidDrop(target, e, id);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getRepairXY: function(e, data){
|
|
return this.el.getXY();
|
|
},
|
|
|
|
// @private
|
|
onInvalidDrop: function(target, e, id) {
|
|
// This method may be called by the DragDropManager.
|
|
// To preserve backwards compat, it only passes the event object
|
|
// Here we correct the arguments.
|
|
var me = this;
|
|
|
|
if (!e) {
|
|
e = target;
|
|
target = null;
|
|
id = e.getTarget().id;
|
|
}
|
|
if (me.beforeInvalidDrop(target, e, id) !== false) {
|
|
if (me.cachedTarget) {
|
|
if(me.cachedTarget.isNotifyTarget){
|
|
me.cachedTarget.notifyOut(me, e, me.dragData);
|
|
}
|
|
me.cacheTarget = null;
|
|
}
|
|
me.proxy.repair(me.getRepairXY(e, me.dragData), me.afterRepair, me);
|
|
|
|
if (me.afterInvalidDrop) {
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* after an invalid drop has occurred by providing an implementation.
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dropped element
|
|
* @method afterInvalidDrop
|
|
*/
|
|
me.afterInvalidDrop(e, id);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
afterRepair: function() {
|
|
var me = this;
|
|
if (Ext.enableFx) {
|
|
me.el.highlight(me.repairHighlightColor);
|
|
}
|
|
me.dragging = false;
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action after an invalid
|
|
* drop has occurred.
|
|
* @param {Ext.dd.DragDrop} target The drop target
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dragged element
|
|
* @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
|
|
* @template
|
|
*/
|
|
beforeInvalidDrop: function(target, e, id) {
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
handleMouseDown: function(e) {
|
|
if (this.dragging) {
|
|
return;
|
|
}
|
|
var data = this.getDragData(e);
|
|
if (data && this.onBeforeDrag(data, e) !== false) {
|
|
this.dragData = data;
|
|
this.proxy.stop();
|
|
this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action before the initial
|
|
* drag event begins and optionally cancel it.
|
|
* @param {Object} data An object containing arbitrary data to be shared with drop targets
|
|
* @param {Event} e The event object
|
|
* @return {Boolean} isValid True if the drag event is valid, else false to cancel
|
|
* @template
|
|
*/
|
|
onBeforeDrag: function(data, e){
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action once the initial
|
|
* drag event has begun. The drag cannot be canceled from this function.
|
|
* @param {Number} x The x position of the click on the dragged object
|
|
* @param {Number} y The y position of the click on the dragged object
|
|
* @method
|
|
* @template
|
|
*/
|
|
onStartDrag: Ext.emptyFn,
|
|
|
|
alignElWithMouse: function() {
|
|
this.proxy.ensureAttachedToBody(true);
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
startDrag: function(x, y) {
|
|
this.proxy.reset();
|
|
this.proxy.hidden = false;
|
|
this.dragging = true;
|
|
this.proxy.update("");
|
|
this.onInitDrag(x, y);
|
|
this.proxy.show();
|
|
},
|
|
|
|
// @private
|
|
onInitDrag: function(x, y) {
|
|
var clone = this.el.dom.cloneNode(true);
|
|
clone.id = Ext.id(); // prevent duplicate ids
|
|
this.proxy.update(clone);
|
|
this.onStartDrag(x, y);
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Returns the drag source's underlying {@link Ext.dd.StatusProxy}
|
|
* @return {Ext.dd.StatusProxy} proxy The StatusProxy
|
|
*/
|
|
getProxy: function() {
|
|
return this.proxy;
|
|
},
|
|
|
|
/**
|
|
* Hides the drag source's {@link Ext.dd.StatusProxy}
|
|
*/
|
|
hideProxy: function() {
|
|
this.proxy.hide();
|
|
this.proxy.reset(true);
|
|
this.dragging = false;
|
|
},
|
|
|
|
// @private
|
|
triggerCacheRefresh: function() {
|
|
Ext.dd.DDM.refreshCache(this.groups);
|
|
},
|
|
|
|
// @private
|
|
b4EndDrag: function(e) {
|
|
},
|
|
|
|
// @private
|
|
endDrag : function(e){
|
|
this.onEndDrag(this.dragData, e);
|
|
},
|
|
|
|
// @private
|
|
onEndDrag : function(data, e){
|
|
},
|
|
|
|
// @private
|
|
autoOffset : function(x, y) {
|
|
this.setDelta(-12, -20);
|
|
},
|
|
|
|
destroy: function(){
|
|
this.callParent();
|
|
Ext.destroy(this.proxy);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.panel.Proxy', {
|
|
|
|
alternateClassName: 'Ext.dd.PanelProxy',
|
|
|
|
/**
|
|
* @cfg {Boolean} [moveOnDrag=true]
|
|
* True to move the panel to the dragged position when dropped
|
|
*/
|
|
moveOnDrag: true,
|
|
|
|
/**
|
|
* Creates new panel proxy.
|
|
* @param {Ext.panel.Panel} panel The {@link Ext.panel.Panel} to proxy for
|
|
* @param {Object} [config] Config object
|
|
*/
|
|
constructor: function(panel, config){
|
|
var me = this;
|
|
|
|
/**
|
|
* @property panel
|
|
* @type Ext.panel.Panel
|
|
*/
|
|
me.panel = panel;
|
|
me.id = me.panel.id +'-ddproxy';
|
|
Ext.apply(me, config);
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} insertProxy
|
|
* True to insert a placeholder proxy element while dragging the panel, false to drag with no proxy.
|
|
* Most Panels are not absolute positioned and therefore we need to reserve this space.
|
|
*/
|
|
insertProxy: true,
|
|
|
|
// private overrides
|
|
setStatus: Ext.emptyFn,
|
|
reset: Ext.emptyFn,
|
|
update: Ext.emptyFn,
|
|
stop: Ext.emptyFn,
|
|
sync: Ext.emptyFn,
|
|
|
|
/**
|
|
* Gets the proxy's element
|
|
* @return {Ext.Element} The proxy's element
|
|
*/
|
|
getEl: function(){
|
|
return this.ghost.el;
|
|
},
|
|
|
|
/**
|
|
* Gets the proxy's ghost Panel
|
|
* @return {Ext.panel.Panel} The proxy's ghost Panel
|
|
*/
|
|
getGhost: function(){
|
|
return this.ghost;
|
|
},
|
|
|
|
/**
|
|
* Gets the proxy element. This is the element that represents where the
|
|
* Panel was before we started the drag operation.
|
|
* @return {Ext.Element} The proxy's element
|
|
*/
|
|
getProxy: function(){
|
|
return this.proxy;
|
|
},
|
|
|
|
/**
|
|
* Hides the proxy
|
|
*/
|
|
hide : function(){
|
|
var me = this;
|
|
|
|
if (me.ghost) {
|
|
if (me.proxy) {
|
|
me.proxy.remove();
|
|
delete me.proxy;
|
|
}
|
|
|
|
// Unghost the Panel, do not move the Panel to where the ghost was
|
|
me.panel.unghost(null, me.moveOnDrag);
|
|
delete me.ghost;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows the proxy
|
|
*/
|
|
show: function(){
|
|
var me = this,
|
|
panelSize;
|
|
|
|
if (!me.ghost) {
|
|
panelSize = me.panel.getSize();
|
|
me.panel.el.setVisibilityMode(Ext.Element.DISPLAY);
|
|
me.ghost = me.panel.ghost();
|
|
if (me.insertProxy) {
|
|
// bc Panels aren't absolute positioned we need to take up the space
|
|
// of where the panel previously was
|
|
me.proxy = me.panel.el.insertSibling({cls: Ext.baseCSSPrefix + 'panel-dd-spacer'});
|
|
me.proxy.setSize(panelSize);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
repair: function(xy, callback, scope) {
|
|
this.hide();
|
|
Ext.callback(callback, scope || this);
|
|
},
|
|
|
|
/**
|
|
* Moves the proxy to a different position in the DOM. This is typically
|
|
* called while dragging the Panel to keep the proxy sync'd to the Panel's
|
|
* location.
|
|
* @param {HTMLElement} parentNode The proxy's parent DOM node
|
|
* @param {HTMLElement} [before] The sibling node before which the
|
|
* proxy should be inserted. Defaults to the parent's last child if not
|
|
* specified.
|
|
*/
|
|
moveProxy : function(parentNode, before){
|
|
if (this.proxy) {
|
|
parentNode.insertBefore(this.proxy.dom, before);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* DD implementation for Panels.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.panel.DD', {
|
|
extend: Ext.dd.DragSource ,
|
|
|
|
|
|
constructor : function(panel, cfg){
|
|
var me = this;
|
|
|
|
me.panel = panel;
|
|
me.dragData = {panel: panel};
|
|
me.panelProxy = new Ext.panel.Proxy(panel, cfg);
|
|
me.proxy = me.panelProxy.proxy;
|
|
|
|
me.callParent([panel.el, cfg]);
|
|
me.setupEl(panel);
|
|
},
|
|
|
|
setupEl: function(panel){
|
|
var me = this,
|
|
header = panel.header,
|
|
el = panel.body;
|
|
|
|
if (header) {
|
|
me.setHandleElId(header.id);
|
|
el = header.el;
|
|
}
|
|
if (el) {
|
|
el.setStyle('cursor', 'move');
|
|
me.scroll = false;
|
|
} else {
|
|
// boxready fires after first layout, so we'll definitely be rendered
|
|
panel.on('boxready', me.setupEl, me, {single: true});
|
|
}
|
|
},
|
|
|
|
showFrame: Ext.emptyFn,
|
|
startDrag: Ext.emptyFn,
|
|
|
|
b4StartDrag: function(x, y) {
|
|
this.panelProxy.show();
|
|
},
|
|
|
|
b4MouseDown: function(e) {
|
|
var x = e.getPageX(),
|
|
y = e.getPageY();
|
|
|
|
this.autoOffset(x, y);
|
|
},
|
|
|
|
onInitDrag : function(x, y){
|
|
this.onStartDrag(x, y);
|
|
return true;
|
|
},
|
|
|
|
createFrame : Ext.emptyFn,
|
|
|
|
getDragEl : function(e){
|
|
var ghost = this.panelProxy.ghost;
|
|
if (ghost) {
|
|
return ghost.el.dom;
|
|
}
|
|
},
|
|
|
|
endDrag : function(e){
|
|
this.panelProxy.hide();
|
|
this.panel.saveState();
|
|
},
|
|
|
|
autoOffset : function(x, y) {
|
|
x -= this.startPageX;
|
|
y -= this.startPageY;
|
|
this.setDelta(x, y);
|
|
},
|
|
|
|
// Override this, we don't want to repair on an "invalid" drop, the panel
|
|
// should main it's position
|
|
onInvalidDrop: function(target, e, id) {
|
|
var me = this;
|
|
|
|
if (me.beforeInvalidDrop(target, e, id) !== false) {
|
|
if (me.cachedTarget) {
|
|
if(me.cachedTarget.isNotifyTarget){
|
|
me.cachedTarget.notifyOut(me, e, me.dragData);
|
|
}
|
|
me.cacheTarget = null;
|
|
}
|
|
|
|
if (me.afterInvalidDrop) {
|
|
/**
|
|
* An empty function by default, but provided so that you can perform a custom action
|
|
* after an invalid drop has occurred by providing an implementation.
|
|
* @param {Event} e The event object
|
|
* @param {String} id The id of the dropped element
|
|
* @method afterInvalidDrop
|
|
*/
|
|
me.afterInvalidDrop(e, id);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @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, prefix) {
|
|
src[prefix ? prefix + prop : prop] = target[prop];
|
|
}
|
|
|
|
function removeOne (src, target, prop) {
|
|
delete src[prop];
|
|
}
|
|
|
|
function restoreOne (src, target, prop, prefix) {
|
|
var name = prefix ? prefix + prop : prop,
|
|
value = src[name];
|
|
|
|
if (value || src.hasOwnProperty(name)) {
|
|
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, prefix) {
|
|
if (src) {
|
|
if (Ext.isArray(props)) {
|
|
var p, pLen = props.length;
|
|
for (p = 0; p < pLen; p++) {
|
|
doOne(src, target, props[p], prefix);
|
|
}
|
|
} else {
|
|
doOne(src, target, props, prefix);
|
|
}
|
|
}
|
|
}
|
|
|
|
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/String[]} 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/String[]} props The property or array of properties to capture.
|
|
* @param {Object} target The object from which to capture properties.
|
|
*/
|
|
capture: function (props, target, prefix) {
|
|
var me = this;
|
|
doMany(captureOne, me.data || (me.data = {}), target || me.target, props, prefix);
|
|
},
|
|
|
|
/**
|
|
* Removes the specified properties from this memento. These properties will not be
|
|
* restored later without re-capturing their values.
|
|
* @param {String/String[]} 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/String[]} 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, prefix) {
|
|
doMany(restoreOne, this.data, target || this.target, props, prefix);
|
|
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,
|
|
data = me.data,
|
|
prop;
|
|
|
|
for (prop in data) {
|
|
if (data.hasOwnProperty(prop)) {
|
|
restoreValue(t, prop, data[prop]);
|
|
}
|
|
}
|
|
|
|
if (clear !== false) {
|
|
delete me.data;
|
|
}
|
|
}
|
|
};
|
|
}()));
|
|
|
|
/**
|
|
* Panel is a container that has specific functionality and structural components that make it the perfect building
|
|
* block for application-oriented user interfaces.
|
|
*
|
|
* Panels are, by virtue of their inheritance from {@link Ext.container.Container}, capable of being configured with a
|
|
* {@link Ext.container.Container#layout layout}, and containing child Components.
|
|
*
|
|
* When either specifying child {@link #cfg-items} of a Panel, or dynamically {@link Ext.container.Container#method-add adding}
|
|
* Components to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether those
|
|
* child elements need to be sized using one of Ext's built-in `{@link Ext.container.Container#layout layout}`
|
|
* schemes. By default, Panels use the {@link Ext.layout.container.Auto Auto} scheme. This simply renders child
|
|
* components, appending them one after the other inside the Container, and **does not apply any sizing** at all.
|
|
*
|
|
* {@img Ext.panel.Panel/panel.png Panel components}
|
|
*
|
|
* A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate {@link
|
|
* Ext.panel.Header header}, {@link #fbar footer} and body sections.
|
|
*
|
|
* Panel also provides built-in {@link #collapsible collapsible, expandable} and {@link #closable} behavior. Panels can
|
|
* be easily dropped into any {@link Ext.container.Container Container} or layout, and the layout and rendering pipeline
|
|
* is {@link Ext.container.Container#method-add completely managed by the framework}.
|
|
*
|
|
* **Note:** By default, the `{@link #closable close}` header tool _destroys_ the Panel resulting in removal of the
|
|
* Panel and the destruction of any descendant Components. This makes the Panel object, and all its descendants
|
|
* **unusable**. To enable the close tool to simply _hide_ a Panel for later re-use, configure the Panel with
|
|
* `{@link #closeAction closeAction}: 'hide'`.
|
|
*
|
|
* Usually, Panels are used as constituents within an application, in which case, they would be used as child items of
|
|
* Containers, and would themselves use Ext.Components as child {@link #cfg-items}. However to illustrate simply rendering a
|
|
* Panel into the document, here's how to do it:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Hello',
|
|
* width: 200,
|
|
* html: '<p>World!</p>',
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a
|
|
* constituent part of a Container:
|
|
*
|
|
* @example
|
|
* var filterPanel = Ext.create('Ext.panel.Panel', {
|
|
* bodyPadding: 5, // Don't want content to crunch against the borders
|
|
* width: 300,
|
|
* title: 'Filters',
|
|
* items: [{
|
|
* xtype: 'datefield',
|
|
* fieldLabel: 'Start date'
|
|
* }, {
|
|
* xtype: 'datefield',
|
|
* fieldLabel: 'End date'
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* Note that the Panel above is configured to render into the document and assigned a size. In a real world scenario,
|
|
* the Panel will often be added inside a Container which will use a {@link #layout} to render, size and position its
|
|
* child Components.
|
|
*
|
|
* Panels will often use specific {@link #layout}s to provide an application with shape and structure by containing and
|
|
* arranging child Components:
|
|
*
|
|
* @example
|
|
* var resultsPanel = Ext.create('Ext.panel.Panel', {
|
|
* title: 'Results',
|
|
* width: 600,
|
|
* height: 400,
|
|
* renderTo: Ext.getBody(),
|
|
* layout: {
|
|
* type: 'vbox', // Arrange child items vertically
|
|
* align: 'stretch', // Each takes up full width
|
|
* padding: 5
|
|
* },
|
|
* items: [{ // Results grid specified as a config object with an xtype of 'grid'
|
|
* xtype: 'grid',
|
|
* columns: [{header: 'Column One'}], // One header just for show. There's no data,
|
|
* store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
|
|
* flex: 1 // Use 1/3 of Container's height (hint to Box layout)
|
|
* }, {
|
|
* xtype: 'splitter' // A splitter between the two child items
|
|
* }, { // Details Panel specified as a config object (no xtype defaults to 'panel').
|
|
* title: 'Details',
|
|
* bodyPadding: 5,
|
|
* items: [{
|
|
* fieldLabel: 'Data item',
|
|
* xtype: 'textfield'
|
|
* }], // An array of form fields
|
|
* flex: 2 // Use 2/3 of Container's height (hint to Box layout)
|
|
* }]
|
|
* });
|
|
*
|
|
* The example illustrates one possible method of displaying search results. The Panel contains a grid with the
|
|
* resulting data arranged in rows. Each selected row may be displayed in detail in the Panel below. The {@link
|
|
* Ext.layout.container.VBox vbox} layout is used to arrange the two vertically. It is configured to stretch child items
|
|
* horizontally to full width. Child items may either be configured with a numeric height, or with a `flex` value to
|
|
* distribute available space proportionately.
|
|
*
|
|
* This Panel itself may be a child item of, for exaple, a {@link Ext.tab.Panel} which will size its child items to fit
|
|
* within its content area.
|
|
*
|
|
* 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.
|
|
*/
|
|
Ext.define('Ext.panel.Panel', {
|
|
extend: Ext.panel.AbstractPanel ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alias: 'widget.panel',
|
|
alternateClassName: 'Ext.Panel',
|
|
|
|
/**
|
|
* @cfg {String} collapsedCls
|
|
* A CSS class to add to the panel's element after it has been collapsed.
|
|
*/
|
|
collapsedCls: 'collapsed',
|
|
|
|
/**
|
|
* @cfg {Boolean} animCollapse
|
|
* `true` to animate the transition when the panel is collapsed, `false` to skip the animation (defaults to `true`
|
|
* if the {@link Ext.fx.Anim} class is available, otherwise `false`). May also be specified as the animation
|
|
* duration in milliseconds.
|
|
*/
|
|
animCollapse: Ext.enableFx,
|
|
|
|
/**
|
|
* @cfg {Number} minButtonWidth
|
|
* Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default
|
|
* value for the {@link Ext.button.Button#minWidth} config of each Button added to the **footer toolbar** via the
|
|
* {@link #fbar} or {@link #buttons} configurations. It will be ignored for buttons that have a minWidth configured
|
|
* some other way, e.g. in their own config object or via the {@link Ext.container.Container#defaults defaults} of
|
|
* their parent container.
|
|
*/
|
|
minButtonWidth: 75,
|
|
|
|
/**
|
|
* @cfg {Boolean} collapsed
|
|
* `true` to render the panel collapsed, `false` to render it expanded.
|
|
*/
|
|
collapsed: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} collapseFirst
|
|
* `true` to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in
|
|
* the panel's title bar, `false` to render it last.
|
|
*/
|
|
collapseFirst: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} hideCollapseTool
|
|
* `true` to hide the expand/collapse toggle button when `{@link #collapsible} == true`, `false` to display it.
|
|
*/
|
|
hideCollapseTool: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} titleCollapse
|
|
* `true` to allow expanding and collapsing the panel (when `{@link #collapsible} = true`) by clicking anywhere in
|
|
* the header bar, `false`) to allow it only by clicking to tool button). When a panel is used in a
|
|
* {@link Ext.layout.container.Border border layout}, the {@link #floatable} option can influence the behavior of collapsing.
|
|
*/
|
|
titleCollapse: undefined,
|
|
|
|
/**
|
|
* @cfg {String} collapseMode
|
|
* **Important: this config is only effective for {@link #collapsible} Panels which are direct child items of a
|
|
* {@link Ext.layout.container.Border border layout}.**
|
|
*
|
|
* When _not_ a direct child item of a {@link Ext.layout.container.Border border layout}, then the Panel's header
|
|
* remains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header
|
|
* (orientated correctly depending on the {@link #collapseDirection}) will be inserted to show a the title and a re-
|
|
* expand tool.
|
|
*
|
|
* When a child item of a {@link Ext.layout.container.Border border layout}, this config has three possible values:
|
|
*
|
|
* - `undefined` - When collapsed, a placeholder {@link Ext.panel.Header Header} is injected into the layout to
|
|
* represent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.
|
|
*
|
|
* - `"header"` - The Panel collapses to leave its header visible as when not inside a
|
|
* {@link Ext.layout.container.Border border layout}.
|
|
*
|
|
* - `"mini"` - The Panel collapses without a visible header.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.Component/Object} placeholder
|
|
* **Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a
|
|
* {@link Ext.layout.container.Border border layout} when not using the `'header'` {@link #collapseMode}.**
|
|
*
|
|
* **Optional.** A Component (or config object for a Component) to show in place of this Panel when this Panel is
|
|
* collapsed by a {@link Ext.layout.container.Border border layout}. Defaults to a generated {@link Ext.panel.Header
|
|
* Header} containing a {@link Ext.panel.Tool Tool} to re-expand the Panel.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} floatable
|
|
* **Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a
|
|
* {@link Ext.layout.container.Border border layout}.**
|
|
*
|
|
* true to allow clicking a collapsed Panel's {@link #placeholder} to display the Panel floated above the layout,
|
|
* false to force the user to fully expand a collapsed region by clicking the expand button to see it again.
|
|
*/
|
|
floatable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} 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 the header tool button
|
|
* area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool.
|
|
* When a panel is used in a {@link Ext.layout.container.Border border layout}, the {@link #floatable} option
|
|
* can influence the behavior of collapsing.
|
|
* See {@link #collapseMode} and {@link #collapseDirection}
|
|
*/
|
|
collapsible: undefined,
|
|
|
|
/**
|
|
* @cfg {String} collapseDirection
|
|
* The direction to collapse the Panel when the toggle button is clicked.
|
|
*
|
|
* Defaults to the {@link #headerPosition}
|
|
*
|
|
* **Important: This config is _ignored_ for {@link #collapsible} Panels which are direct child items of a {@link
|
|
* Ext.layout.container.Border border layout}.**
|
|
*
|
|
* Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} closable
|
|
* True to display the 'close' tool button and allow the user to close the window, false to hide the button and
|
|
* disallow closing the window.
|
|
*
|
|
* By default, when close is requested by clicking the close button in the header, the {@link #method-close} method will be
|
|
* called. This will _{@link Ext.Component#method-destroy destroy}_ the Panel and its content meaning that it may not be
|
|
* reused.
|
|
*
|
|
* To make closing a Panel _hide_ the Panel so that it may be reused, set {@link #closeAction} to 'hide'.
|
|
*/
|
|
closable: false,
|
|
|
|
/**
|
|
* @cfg {String} closeAction
|
|
* The action to take when the close header tool is clicked:
|
|
*
|
|
* - **`'{@link #method-destroy}'`** :
|
|
*
|
|
* {@link #method-remove remove} the window from the DOM and {@link Ext.Component#method-destroy destroy} it and all descendant
|
|
* Components. The window will **not** be available to be redisplayed via the {@link #method-show} method.
|
|
*
|
|
* - **`'{@link #method-hide}'`** :
|
|
*
|
|
* {@link #method-hide} the window by setting visibility to hidden and applying negative offsets. The window will be
|
|
* available to be redisplayed via the {@link #method-show} method.
|
|
*
|
|
* **Note:** This behavior has changed! setting *does* affect the {@link #method-close} method which will invoke the
|
|
* approriate closeAction.
|
|
*/
|
|
closeAction: 'destroy',
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} dockedItems
|
|
* A component or series of components to be added as docked items to this panel. The docked items can be docked to
|
|
* either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:
|
|
*
|
|
* var panel = new Ext.panel.Panel({
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'top',
|
|
* items: [{
|
|
* text: 'Docked to the top'
|
|
* }]
|
|
* }]
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} placeholderCollapseHideMode
|
|
* The {@link Ext.dom.Element#setVisibilityMode mode} for hiding collapsed panels when
|
|
* using {@link #collapseMode} "placeholder".
|
|
*/
|
|
placeholderCollapseHideMode: Ext.Element.VISIBILITY,
|
|
|
|
/**
|
|
* @cfg {Boolean} preventHeader
|
|
* @deprecated 4.1.0 Use {@link #header} instead.
|
|
* Prevent a Header from being created and shown.
|
|
*/
|
|
preventHeader: false,
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} [header]
|
|
* Pass as `false` to prevent a Header from being created and shown.
|
|
*
|
|
* Pass as a config object (optionally containing an `xtype`) to custom-configure this Panel's header.
|
|
*
|
|
* See {@link Ext.panel.Header} for all the options that may be specified here.
|
|
*
|
|
* A {@link Ext.panel.Header panel header} is a {@link Ext.container.Container} which contains the Panel's {@link #title} and {@link #tools}.
|
|
* You may also configure the Panel's `header` option with its own child items which go *before* the {@link #tools}
|
|
*
|
|
* By default the panel {@link #title} is inserted after items configured in this config, but before any tools.
|
|
* To insert the title at any point in the full array, specify the {@link Ext.panel.Header #titlePosition} config:
|
|
*
|
|
* new Ext.panel.Panel({
|
|
* title: 'Test',
|
|
* tools: [{
|
|
* type: 'refresh
|
|
* }, {
|
|
* type: 'help'
|
|
* }],
|
|
* titlePosition: 2 // Title will come AFTER the two tools
|
|
* ...
|
|
* });
|
|
*
|
|
*/
|
|
header: undefined,
|
|
|
|
/**
|
|
* @cfg {String} headerPosition
|
|
* Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
|
|
*/
|
|
headerPosition: 'top',
|
|
|
|
/**
|
|
* @cfg {Boolean} frame
|
|
* True to apply a frame to the panel.
|
|
*/
|
|
frame: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} frameHeader
|
|
* True to apply a frame to the panel panels header (if 'frame' is true).
|
|
*/
|
|
frameHeader: true,
|
|
|
|
/**
|
|
* @cfg {Object[]/Ext.panel.Tool[]} tools
|
|
* An array of {@link Ext.panel.Tool} configs/instances to be added to the header tool area. The tools are stored as
|
|
* child components of the header container. They can be accessed using {@link #down} and {#query}, as well as the
|
|
* other component methods. The toggle tool is automatically created if {@link #collapsible} is set to true.
|
|
*
|
|
* Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the
|
|
* visual button. Any required functionality must be provided by adding handlers that implement the necessary
|
|
* behavior.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* tools:[{
|
|
* type:'refresh',
|
|
* tooltip: 'Refresh form Data',
|
|
* // hidden:true,
|
|
* handler: function(event, toolEl, panelHeader) {
|
|
* // refresh logic
|
|
* }
|
|
* },
|
|
* {
|
|
* type:'help',
|
|
* tooltip: 'Get Help',
|
|
* callback: function(panel, tool, event) {
|
|
* // show help here
|
|
* }
|
|
* }]
|
|
*
|
|
* The difference between `handler` and `callback` is the signature. For details on
|
|
* the distinction, see {@link Ext.panel.Tool}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [title='']
|
|
* The title text to be used to display in the {@link Ext.panel.Header panel header}. When a
|
|
* `title` is specified the {@link Ext.panel.Header} will automatically be created and displayed unless
|
|
* {@link #header} is set to `false`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [titleAlign]
|
|
* The alignment of the title text within the available space between the
|
|
* icon and the tools.
|
|
*
|
|
* May be `"left"`, `"right"` or `"center"`. Defaults to the browser's natural
|
|
* behavior depending on the css direction property - `"left"` when direction
|
|
* is ltr and `"right"` when direction is rtl
|
|
* (see {@link Ext.AbstractComponent#rtl}).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [manageHeight=true] When true, the dock component layout writes
|
|
* height information to the panel's DOM elements based on its shrink wrap height
|
|
* calculation. This ensures that the browser respects the calculated height.
|
|
* When false, the dock component layout will not write heights on the panel or its
|
|
* body element. In some simple layout cases, not writing the heights to the DOM may
|
|
* be desired because this allows the browser to respond to direct DOM manipulations
|
|
* (like animations).
|
|
*/
|
|
manageHeight: true,
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* CSS class for an icon in the header. Used for displaying an icon to the left of a title.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* Path to image for an icon in the header. Used for displaying an icon to the left of a title.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} glyph
|
|
* @inheritdoc Ext.panel.Header#glyph
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} headerOverCls
|
|
* Optional CSS class to apply to the header element on mouseover
|
|
*/
|
|
|
|
/**
|
|
* @override
|
|
* @cfg {Boolean} constrain
|
|
* True to constrain the panel within its containing element, false to allow it to fall outside of its containing
|
|
* element. By default floating components such as Windows will be rendered to `document.body`. To render and constrain the window within
|
|
* another element specify {@link #renderTo}. Optionally the header only can be constrained
|
|
* using {@link #constrainHeader}.
|
|
*/
|
|
constrain: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} constrainHeader
|
|
* True to constrain the panel header within its containing element (allowing the panel body to fall outside of
|
|
* its containing element) or false to allow the header to fall outside its containing element.
|
|
* Optionally the entire panel can be constrained using {@link #constrain}.
|
|
*/
|
|
constrainHeader: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [simpleDrag=false]
|
|
* When {@link #cfg-draggable} is `true`, Specify this as `true` to cause the `draggable` config
|
|
* to work the same as it does in {@link Ext.window.Window Window}. This Panel
|
|
* just becomes movable. No DragDrop instances receive any notifications.
|
|
* For example:
|
|
*
|
|
* @example
|
|
* var win = Ext.create('widget.window', {
|
|
* height: 300,
|
|
* width: 300,
|
|
* title: 'Constraining Window',
|
|
* closable: false,
|
|
* items: {
|
|
* title: "Floating Panel",
|
|
* width: 100,
|
|
* height: 100,
|
|
* floating: true,
|
|
* draggable: true,
|
|
* constrain: true,
|
|
* simpleDrag: true
|
|
* }
|
|
* });
|
|
* win.show();
|
|
* // Floating components begin life hidden
|
|
* win.child('[title=Floating Panel]').show();
|
|
*
|
|
*/
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.addEvents(
|
|
|
|
/**
|
|
* @event beforeclose
|
|
* Fires before the user closes the panel. Return false from any listener to stop the close event being
|
|
* fired
|
|
* @param {Ext.panel.Panel} panel The Panel object
|
|
*/
|
|
'beforeclose',
|
|
|
|
/**
|
|
* @event close
|
|
* Fires when the user closes the panel.
|
|
* @param {Ext.panel.Panel} panel The Panel object
|
|
*/
|
|
'close',
|
|
|
|
/**
|
|
* @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
|
|
*
|
|
* @param {Boolean} animate True if the collapse is animated, else false.
|
|
*/
|
|
"beforecollapse",
|
|
|
|
/**
|
|
* @event expand
|
|
* Fires after this Panel has expanded.
|
|
* @param {Ext.panel.Panel} p The Panel that has been expanded.
|
|
*/
|
|
"expand",
|
|
|
|
/**
|
|
* @event collapse
|
|
* Fires after this Panel has collapsed.
|
|
* @param {Ext.panel.Panel} p The Panel that has been collapsed.
|
|
*/
|
|
"collapse",
|
|
|
|
/**
|
|
* @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.
|
|
*/
|
|
'titlechange',
|
|
|
|
/**
|
|
* @event iconchange
|
|
* Fires after the Panel icon has been set or changed.
|
|
* @param {Ext.panel.Panel} p The Panel which has the icon changed.
|
|
* @param {String} newIcon The path to the new icon image.
|
|
* @param {String} oldIcon The path to the previous panel icon image.
|
|
*/
|
|
'iconchange',
|
|
|
|
/**
|
|
* @event iconclschange
|
|
* Fires after the Panel iconCls has been set or changed.
|
|
* @param {Ext.panel.Panel} p The Panel which has the iconCls changed.
|
|
* @param {String} newIconCls The new iconCls.
|
|
* @param {String} oldIconCls The previous panel iconCls.
|
|
*/
|
|
'iconclschange',
|
|
|
|
/**
|
|
* @event glyphchange
|
|
* Fired when the Panel glyph has been changed by the {@link #setGlyph} method.
|
|
* @param {Ext.panel.Panel} this
|
|
* @param {Number/String} newGlyph
|
|
* @param {Number/String} oldGlyph
|
|
*/
|
|
'glyphchange',
|
|
|
|
/**
|
|
* @event float
|
|
* Fires after a collapsed Panel has been "floated" by clicking on
|
|
* it's header. Only applicable when the Panel is an item in a
|
|
* {@link Ext.layout.container.Border Border Layout}.
|
|
*/
|
|
'float',
|
|
|
|
/**
|
|
* @event unfloat
|
|
* Fires after a "floated" Panel has returned to it's collapsed state
|
|
* as a result of the mouse leaving the Panel. Only applicable when
|
|
* the Panel is an item in a
|
|
* {@link Ext.layout.container.Border Border Layout}.
|
|
*/
|
|
'unfloat'
|
|
);
|
|
|
|
if (me.collapsible) {
|
|
// Save state on these two events.
|
|
this.addStateEvents(['expand', 'collapse']);
|
|
}
|
|
if (me.unstyled) {
|
|
me.setUI('plain');
|
|
}
|
|
|
|
if (me.frame) {
|
|
me.setUI(me.ui + '-framed');
|
|
}
|
|
|
|
// Backwards compatibility
|
|
me.bridgeToolbars();
|
|
|
|
me.callParent();
|
|
me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
|
|
|
|
// Used to track hidden content elements during collapsed state
|
|
me.hiddenOnCollapse = new Ext.dom.CompositeElement();
|
|
|
|
},
|
|
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
Ext.destroy(
|
|
me.placeholder,
|
|
me.ghostPanel,
|
|
me.dd
|
|
);
|
|
me.callParent();
|
|
},
|
|
|
|
initAria: function() {
|
|
this.callParent();
|
|
this.initHeaderAria();
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
initHeaderAria: function() {
|
|
var me = this,
|
|
el = me.el,
|
|
header = me.header;
|
|
if (el && header) {
|
|
el.dom.setAttribute('aria-labelledby', header.titleCmp.id);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the {@link Ext.panel.Header Header} for this panel.
|
|
*/
|
|
getHeader: function() {
|
|
return this.header;
|
|
},
|
|
|
|
/**
|
|
* Set a title for the panel's header. See {@link Ext.panel.Header#title}.
|
|
* @param {String} newTitle
|
|
*/
|
|
setTitle: function(newTitle) {
|
|
var me = this,
|
|
oldTitle = me.title,
|
|
header = me.header,
|
|
reExpander = me.reExpander,
|
|
placeholder = me.placeholder;
|
|
|
|
me.title = newTitle;
|
|
|
|
if (header) {
|
|
if (header.isHeader) {
|
|
header.setTitle(newTitle);
|
|
} else {
|
|
header.title = newTitle;
|
|
}
|
|
} else if (me.rendered) {
|
|
me.updateHeader();
|
|
}
|
|
|
|
if (reExpander) {
|
|
reExpander.setTitle(newTitle);
|
|
}
|
|
|
|
if (placeholder && placeholder.setTitle) {
|
|
placeholder.setTitle(newTitle);
|
|
}
|
|
|
|
me.fireEvent('titlechange', me, newTitle, oldTitle);
|
|
},
|
|
|
|
/**
|
|
* Set the iconCls for the panel's header. See {@link Ext.panel.Header#iconCls}. It will fire the
|
|
* {@link #iconclschange} event after completion.
|
|
* @param {String} newIconCls The new CSS class name
|
|
*/
|
|
setIconCls: function(newIconCls) {
|
|
var me = this,
|
|
oldIconCls = me.iconCls,
|
|
header = me.header,
|
|
placeholder = me.placeholder;
|
|
|
|
me.iconCls = newIconCls;
|
|
|
|
if (header) {
|
|
if (header.isHeader) {
|
|
header.setIconCls(newIconCls);
|
|
} else {
|
|
header.iconCls = newIconCls;
|
|
}
|
|
} else {
|
|
me.updateHeader();
|
|
}
|
|
|
|
if (placeholder && placeholder.setIconCls) {
|
|
placeholder.setIconCls(newIconCls);
|
|
}
|
|
|
|
me.fireEvent('iconclschange', me, newIconCls, oldIconCls);
|
|
},
|
|
|
|
/**
|
|
* Set the icon for the panel's header. See {@link Ext.panel.Header#icon}. It will fire the
|
|
* {@link #iconchange} event after completion.
|
|
* @param {String} newIcon The new icon path
|
|
*/
|
|
setIcon: function(newIcon) {
|
|
var me = this,
|
|
oldIcon = me.icon,
|
|
header = me.header,
|
|
placeholder = me.placeholder;
|
|
|
|
me.icon = newIcon;
|
|
|
|
if (header) {
|
|
if (header.isHeader) {
|
|
header.setIcon(newIcon);
|
|
} else {
|
|
header.icon = newIcon;
|
|
}
|
|
} else {
|
|
me.updateHeader();
|
|
}
|
|
|
|
if (placeholder && placeholder.setIcon) {
|
|
placeholder.setIcon(newIcon);
|
|
}
|
|
|
|
me.fireEvent('iconchange', me, newIcon, oldIcon);
|
|
},
|
|
|
|
/**
|
|
* Set the glyph for the panel's header. See {@link Ext.panel.Header#glyph}. It will
|
|
* fire the {@link #glyphchange} event after completion.
|
|
* @param {Number/String} newGlyph The new glyph
|
|
* This parameter expects a format consistent with that of {@link #glyph}
|
|
*/
|
|
setGlyph: function(newGlyph) {
|
|
var me = this,
|
|
oldGlyph = me.glyph,
|
|
header = me.header,
|
|
placeholder = me.placeholder;
|
|
|
|
me.glyph = newGlyph;
|
|
|
|
if (header) {
|
|
if (header.isHeader) {
|
|
header.setGlyph(newGlyph);
|
|
} else {
|
|
header.glyph = newGlyph;
|
|
}
|
|
} else {
|
|
me.updateHeader();
|
|
}
|
|
|
|
if (placeholder && placeholder.setGlyph) {
|
|
placeholder.setIcon(newGlyph);
|
|
}
|
|
|
|
me.fireEvent('glyphchange', me, newGlyph, oldGlyph);
|
|
},
|
|
|
|
bridgeToolbars: function() {
|
|
var me = this,
|
|
docked = [],
|
|
fbar,
|
|
fbarDefaults,
|
|
minButtonWidth = me.minButtonWidth;
|
|
|
|
function initToolbar (toolbar, pos, useButtonAlign) {
|
|
if (Ext.isArray(toolbar)) {
|
|
toolbar = {
|
|
xtype: 'toolbar',
|
|
items: toolbar
|
|
};
|
|
}
|
|
else if (!toolbar.xtype) {
|
|
toolbar.xtype = 'toolbar';
|
|
}
|
|
toolbar.dock = pos;
|
|
if (pos == 'left' || pos == 'right') {
|
|
toolbar.vertical = true;
|
|
}
|
|
|
|
// Legacy support for buttonAlign (only used by buttons/fbar)
|
|
if (useButtonAlign) {
|
|
toolbar.layout = Ext.applyIf(toolbar.layout || {}, {
|
|
// default to 'end' (right-aligned) if me.buttonAlign is undefined or invalid
|
|
pack: { left:'start', center:'center' }[me.buttonAlign] || 'end'
|
|
});
|
|
}
|
|
return toolbar;
|
|
}
|
|
|
|
// Short-hand toolbars (tbar, bbar and fbar plus new lbar and rbar):
|
|
|
|
/**
|
|
* @cfg {String} buttonAlign
|
|
* 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 prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you
|
|
* would add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} tbar
|
|
* Convenience config. Short for 'Top Bar'.
|
|
*
|
|
* tbar: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
*
|
|
* is equivalent to
|
|
*
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'top',
|
|
* items: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
* }]
|
|
*/
|
|
if (me.tbar) {
|
|
docked.push(initToolbar(me.tbar, 'top'));
|
|
me.tbar = null;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} bbar
|
|
* Convenience config. Short for 'Bottom Bar'.
|
|
*
|
|
* bbar: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
*
|
|
* is equivalent to
|
|
*
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'bottom',
|
|
* items: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
* }]
|
|
*/
|
|
if (me.bbar) {
|
|
docked.push(initToolbar(me.bbar, 'bottom'));
|
|
me.bbar = null;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} buttons
|
|
* Convenience config used for adding buttons docked to the bottom of the panel. This is a
|
|
* synonym for the {@link #fbar} config.
|
|
*
|
|
* buttons: [
|
|
* { text: 'Button 1' }
|
|
* ]
|
|
*
|
|
* is equivalent to
|
|
*
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'bottom',
|
|
* ui: 'footer',
|
|
* defaults: {minWidth: {@link #minButtonWidth}},
|
|
* items: [
|
|
* { xtype: 'component', flex: 1 },
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
* }]
|
|
*
|
|
* The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
|
|
* each of the buttons in the buttons toolbar.
|
|
*/
|
|
if (me.buttons) {
|
|
me.fbar = me.buttons;
|
|
me.buttons = null;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} fbar
|
|
* Convenience config used for adding items to the bottom of the panel. Short for Footer Bar.
|
|
*
|
|
* fbar: [
|
|
* { type: 'button', text: 'Button 1' }
|
|
* ]
|
|
*
|
|
* is equivalent to
|
|
*
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'bottom',
|
|
* ui: 'footer',
|
|
* defaults: {minWidth: {@link #minButtonWidth}},
|
|
* items: [
|
|
* { xtype: 'component', flex: 1 },
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
* }]
|
|
*
|
|
* The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
|
|
* each of the buttons in the fbar.
|
|
*/
|
|
if (me.fbar) {
|
|
fbar = initToolbar(me.fbar, 'bottom', true); // only we useButtonAlign
|
|
fbar.ui = 'footer';
|
|
|
|
// Apply the minButtonWidth config to buttons in the toolbar
|
|
if (minButtonWidth) {
|
|
fbarDefaults = fbar.defaults;
|
|
fbar.defaults = function(config) {
|
|
var defaults = fbarDefaults || {};
|
|
if ((!config.xtype || config.xtype === 'button' || (config.isComponent && config.isXType('button'))) &&
|
|
!('minWidth' in defaults)) {
|
|
defaults = Ext.apply({minWidth: minButtonWidth}, defaults);
|
|
}
|
|
return defaults;
|
|
};
|
|
}
|
|
|
|
docked.push(fbar);
|
|
me.fbar = null;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} lbar
|
|
* Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).
|
|
*
|
|
* lbar: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
*
|
|
* is equivalent to
|
|
*
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'left',
|
|
* items: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
* }]
|
|
*/
|
|
if (me.lbar) {
|
|
docked.push(initToolbar(me.lbar, 'left'));
|
|
me.lbar = null;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Object/Object[]} rbar
|
|
* Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).
|
|
*
|
|
* rbar: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
*
|
|
* is equivalent to
|
|
*
|
|
* dockedItems: [{
|
|
* xtype: 'toolbar',
|
|
* dock: 'right',
|
|
* items: [
|
|
* { xtype: 'button', text: 'Button 1' }
|
|
* ]
|
|
* }]
|
|
*/
|
|
if (me.rbar) {
|
|
docked.push(initToolbar(me.rbar, 'right'));
|
|
me.rbar = null;
|
|
}
|
|
|
|
if (me.dockedItems) {
|
|
if (!Ext.isArray(me.dockedItems)) {
|
|
me.dockedItems = [me.dockedItems];
|
|
}
|
|
me.dockedItems = me.dockedItems.concat(docked);
|
|
} else {
|
|
me.dockedItems = docked;
|
|
}
|
|
},
|
|
|
|
isPlaceHolderCollapse: function(){
|
|
return this.collapseMode == 'placeholder';
|
|
},
|
|
|
|
onBoxReady: function(){
|
|
this.callParent();
|
|
if (this.collapsed) {
|
|
this.setHiddenDocked();
|
|
}
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this,
|
|
wasCollapsed;
|
|
|
|
me.callParent();
|
|
|
|
// Add class-specific header tools.
|
|
// Panel adds collapsible and closable.
|
|
me.initTools();
|
|
|
|
// Dock the header/title unless we are configured specifically not to create a header
|
|
if (!(me.preventHeader || (me.header === false))) {
|
|
me.updateHeader();
|
|
}
|
|
|
|
// If we are rendering collapsed, we still need to save and modify various configs
|
|
if (me.collapsed) {
|
|
if (me.isPlaceHolderCollapse()) {
|
|
if (!me.hidden) {
|
|
me.setHiddenState(true);
|
|
|
|
// This will insert the placeholder Component into the ownerCt's child collection
|
|
// Its getRenderTree call which is calling this will then iterate again and
|
|
// recreate the child items array to include the new Component. Prevent the first
|
|
// collapse from firing
|
|
me.preventCollapseFire = true;
|
|
me.placeholderCollapse();
|
|
delete me.preventCollapseFire;
|
|
wasCollapsed = me.collapsed;
|
|
|
|
// Temporarily clear the flag so that the header is rendered with a collapse tool in it.
|
|
// Placeholder collapse panels never really collapse, they just hide. The tool is always
|
|
// a collapse tool.
|
|
me.collapsed = false;
|
|
}
|
|
} else {
|
|
me.beginCollapse();
|
|
me.addClsWithUI(me.collapsedCls);
|
|
}
|
|
}
|
|
|
|
// Restore the flag if we are being rendered initially placeholder collapsed.
|
|
if (wasCollapsed) {
|
|
me.collapsed = wasCollapsed;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Tools are a Panel-specific capabilty.
|
|
* Panel uses initTools. Subclasses may contribute tools by implementing addTools.
|
|
*/
|
|
initTools: function() {
|
|
var me = this,
|
|
tools = me.tools,
|
|
i, tool;
|
|
|
|
me.tools = [];
|
|
for (i = tools && tools.length; i; ) {
|
|
--i;
|
|
me.tools[i] = tool = tools[i];
|
|
tool.toolOwner = me;
|
|
}
|
|
|
|
// Add a collapse tool unless configured to not show a collapse tool
|
|
// or to not even show a header.
|
|
if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
|
|
me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
|
|
me.collapseTool = me.expandTool = Ext.widget({
|
|
xtype: 'tool',
|
|
handler: me.toggleCollapse,
|
|
scope: me
|
|
});
|
|
|
|
me.updateCollapseTool();
|
|
// Prepend collapse tool is configured to do so.
|
|
if (me.collapseFirst) {
|
|
me.tools.unshift(me.collapseTool);
|
|
}
|
|
}
|
|
|
|
// Add subclass-specific tools.
|
|
me.addTools();
|
|
|
|
// Make Panel closable.
|
|
if (me.closable) {
|
|
me.addClsWithUI('closable');
|
|
me.addTool(Ext.widget({
|
|
xtype : 'tool',
|
|
type: 'close',
|
|
handler: Ext.Function.bind(me.close, me, [])
|
|
}));
|
|
}
|
|
|
|
// Append collapse tool if needed.
|
|
if (me.collapseTool && !me.collapseFirst) {
|
|
me.addTool(me.collapseTool);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @template
|
|
* Template method to be implemented in subclasses to add their tools after the collapsible tool.
|
|
*/
|
|
addTools: Ext.emptyFn,
|
|
|
|
updateCollapseTool: function () {
|
|
var me = this,
|
|
collapseTool = me.collapseTool;
|
|
|
|
if (collapseTool) {
|
|
if (me.collapsed && !me.isPlaceHolderCollapse()) {
|
|
collapseTool.setType('expand-' + me.getOppositeDirection(me.collapseDirection));
|
|
} else {
|
|
collapseTool.setType('collapse-' + me.collapseDirection);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Closes the Panel. By default, this method, removes it from the DOM, {@link Ext.Component#method-destroy destroy}s the
|
|
* Panel object and all its descendant Components. The {@link #beforeclose beforeclose} event is fired before the
|
|
* close happens and will cancel the close action if it returns false.
|
|
*
|
|
* **Note:** This method is also affected by the {@link #closeAction} setting. For more explicit control use
|
|
* {@link #method-destroy} and {@link #method-hide} methods.
|
|
*/
|
|
close: function() {
|
|
if (this.fireEvent('beforeclose', this) !== false) {
|
|
this.doClose();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
doClose: function() {
|
|
this.fireEvent('close', this);
|
|
this[this.closeAction]();
|
|
},
|
|
|
|
/**
|
|
* Create, hide, or show the header component as appropriate based on the current config.
|
|
* @private
|
|
* @param {Boolean} force True to force the header to be created
|
|
*/
|
|
updateHeader: function(force) {
|
|
var me = this,
|
|
header = me.header,
|
|
title = me.title,
|
|
tools = me.tools,
|
|
icon = me.icon || me.iconCls,
|
|
vertical = me.headerPosition === 'left' || me.headerPosition === 'right';
|
|
|
|
if (Ext.isObject(header) || (header !== false && (force || (title || icon) || (tools && tools.length) || (me.collapsible && !me.titleCollapse)))) {
|
|
if (header && header.isHeader) {
|
|
header.show();
|
|
} else {
|
|
// Apply the header property to the header config
|
|
header = me.header = Ext.widget(Ext.apply({
|
|
xtype : 'header',
|
|
title : title,
|
|
titleAlign : me.titleAlign,
|
|
orientation : vertical ? 'vertical' : 'horizontal',
|
|
dock : me.headerPosition || 'top',
|
|
textCls : me.headerTextCls,
|
|
iconCls : me.iconCls,
|
|
icon : me.icon,
|
|
glyph : me.glyph,
|
|
baseCls : me.baseCls + '-header',
|
|
tools : tools,
|
|
ui : me.ui,
|
|
id : me.id + '_header',
|
|
overCls: me.headerOverCls,
|
|
indicateDrag: me.draggable,
|
|
frame : (me.frame || me.alwaysFramed) && me.frameHeader,
|
|
ignoreParentFrame : me.frame || me.overlapHeader,
|
|
ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
|
|
ownerCt : me,
|
|
listeners : me.collapsible && me.titleCollapse ? {
|
|
click: me.toggleCollapse,
|
|
scope: me
|
|
} : null
|
|
}, me.header));
|
|
// Header's onAdd mutates the tools array.
|
|
// It replaces tool configs at each index with the instantiated tool
|
|
// It also injects the tool instances as properties keyed by their type.
|
|
me.addDocked(header, 0);
|
|
}
|
|
me.initHeaderAria();
|
|
} else if (header) {
|
|
header.hide();
|
|
}
|
|
},
|
|
|
|
// @inheritdoc
|
|
setUI: function(ui) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.header && me.header.rendered) {
|
|
me.header.setUI(ui);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getDefaultContentTarget: function() {
|
|
return this.body;
|
|
},
|
|
|
|
getTargetEl: function() {
|
|
var me = this;
|
|
return me.body || me.protoBody || me.frameBody || me.el;
|
|
},
|
|
|
|
// the overrides below allow for collapsed regions inside the border layout to be hidden
|
|
|
|
// @inheritdoc
|
|
isVisible: function(deep){
|
|
var me = this;
|
|
if (me.collapsed && me.placeholder) {
|
|
return me.placeholder.isVisible(deep);
|
|
}
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
// @inheritdoc
|
|
onHide: function() {
|
|
var me = this;
|
|
if (me.collapsed && me.placeholder) {
|
|
me.placeholder.hide();
|
|
} else {
|
|
me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
// @inheritdoc
|
|
onShow: function() {
|
|
var me = this;
|
|
if (me.collapsed && me.isPlaceHolderCollapse()) {
|
|
// force hidden back to true, since this gets set by the layout
|
|
me.setHiddenState(true);
|
|
me.placeholderCollapse();
|
|
} else {
|
|
me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
onRemoved: function(destroying) {
|
|
var me = this;
|
|
|
|
// If we are removed but not being destroyed, ensure our placeholder is also removed but not destroyed
|
|
// If we are being destroyed, our destroy processing will destroy the placeholder.
|
|
// Must run before callParent because that breaks the ownerCt link
|
|
if (me.placeholder && !destroying) {
|
|
me.ownerCt.remove(me.placeholder, false);
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Add tools to this panel
|
|
* @param {Object[]/Ext.panel.Tool[]} tools The tools to add
|
|
*/
|
|
addTool: function(tools) {
|
|
if (!Ext.isArray(tools)) {
|
|
tools = [tools];
|
|
}
|
|
|
|
var me = this,
|
|
header = me.header,
|
|
t,
|
|
tLen = tools.length,
|
|
tool;
|
|
|
|
for (t = 0; t < tLen; t++) {
|
|
tool = tools[t];
|
|
tool.toolOwner = me;
|
|
|
|
if (header && header.isHeader) {
|
|
header.addTool(tool);
|
|
} else {
|
|
// only modify the tools array if the header isn't created,
|
|
// otherwise, defer to the header to manage
|
|
me.tools.push(tool);
|
|
}
|
|
}
|
|
|
|
me.updateHeader();
|
|
},
|
|
|
|
getOppositeDirection: function(d) {
|
|
var c = Ext.Component;
|
|
switch (d) {
|
|
case c.DIRECTION_TOP:
|
|
return c.DIRECTION_BOTTOM;
|
|
case c.DIRECTION_RIGHT:
|
|
return c.DIRECTION_LEFT;
|
|
case c.DIRECTION_BOTTOM:
|
|
return c.DIRECTION_TOP;
|
|
case c.DIRECTION_LEFT:
|
|
return c.DIRECTION_RIGHT;
|
|
}
|
|
},
|
|
|
|
getWidthAuthority: function() {
|
|
if (this.collapsed && this.collapsedHorizontal()) {
|
|
return 1; // the panel determine's its own width
|
|
}
|
|
|
|
return this.callParent();
|
|
},
|
|
|
|
getHeightAuthority: function() {
|
|
if (this.collapsed && this.collapsedVertical()) {
|
|
return 1; // the panel determine's its own height
|
|
}
|
|
|
|
return this.callParent();
|
|
},
|
|
|
|
collapsedHorizontal: function () {
|
|
var dir = this.getCollapsed();
|
|
return dir === 'left' || dir === 'right';
|
|
},
|
|
|
|
collapsedVertical: function () {
|
|
var dir = this.getCollapsed();
|
|
return dir === 'top' || dir === 'bottom';
|
|
},
|
|
|
|
restoreDimension: function(){
|
|
var dir = this.collapseDirection;
|
|
// If we're collapsing top/bottom, we want to restore the height
|
|
// If we're collapsing left/right, we want to restore the width
|
|
return (dir === 'top' || dir === 'bottom') ? 'height' : 'width';
|
|
},
|
|
|
|
/**
|
|
* Returns the current collapsed state of the panel.
|
|
* @return {Boolean/String} False when not collapsed, otherwise the value of {@link #collapseDirection}.
|
|
*/
|
|
getCollapsed: function() {
|
|
var me = this;
|
|
// The collapsed flag, when the Panel is collapsed acts as the direction in which the collapse took
|
|
// place. It can still be tested as truthy/falsy if only a truth value is required.
|
|
if (me.collapsed === true) {
|
|
return me.collapseDirection;
|
|
}
|
|
return me.collapsed;
|
|
},
|
|
|
|
getState: function() {
|
|
var me = this,
|
|
state = me.callParent(),
|
|
memento;
|
|
|
|
state = me.addPropertyToState(state, 'collapsed');
|
|
|
|
// If a collapse has taken place, use remembered values as the dimensions.
|
|
if (me.collapsed) {
|
|
memento = me.collapseMemento;
|
|
memento = memento && memento.data;
|
|
|
|
if (me.collapsedVertical()) {
|
|
if (state) {
|
|
delete state.height;
|
|
}
|
|
if (memento) {
|
|
state = me.addPropertyToState(state, 'height', memento.height);
|
|
}
|
|
} else {
|
|
if (state) {
|
|
delete state.width;
|
|
}
|
|
if (memento) {
|
|
state = me.addPropertyToState(state, 'width', memento.width);
|
|
}
|
|
}
|
|
}
|
|
|
|
return state;
|
|
},
|
|
|
|
findReExpander: function (direction) {
|
|
var me = this,
|
|
c = Ext.Component,
|
|
dockedItems = me.dockedItems.items,
|
|
dockedItemCount = dockedItems.length,
|
|
comp, i;
|
|
|
|
// never use the header if we're in collapseMode mini
|
|
if (me.collapseMode === 'mini') {
|
|
return;
|
|
}
|
|
|
|
switch (direction) {
|
|
case c.DIRECTION_TOP:
|
|
case c.DIRECTION_BOTTOM:
|
|
|
|
// Attempt to find a reExpander Component (docked in a horizontal orientation)
|
|
// Also, collect all other docked items which we must hide after collapse.
|
|
for (i = 0; i < dockedItemCount; i++) {
|
|
comp = dockedItems[i];
|
|
if (!comp.hidden) {
|
|
if (comp.isHeader && (!comp.dock || comp.dock === 'top' || comp.dock === 'bottom')) {
|
|
return comp;
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
|
|
case c.DIRECTION_LEFT:
|
|
case c.DIRECTION_RIGHT:
|
|
|
|
// Attempt to find a reExpander Component (docked in a vecrtical orientation)
|
|
// Also, collect all other docked items which we must hide after collapse.
|
|
for (i = 0; i < dockedItemCount; i++) {
|
|
comp = dockedItems[i];
|
|
if (!comp.hidden) {
|
|
if (comp.isHeader && (comp.dock === 'left' || comp.dock === 'right')) {
|
|
return comp;
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
|
|
default:
|
|
throw('Panel#findReExpander must be passed a valid collapseDirection');
|
|
}
|
|
},
|
|
|
|
getReExpander: function (direction) {
|
|
var me = this,
|
|
collapseDir = direction || me.collapseDirection,
|
|
reExpander = me.reExpander || me.findReExpander(collapseDir);
|
|
|
|
me.expandDirection = me.getOppositeDirection(collapseDir);
|
|
|
|
if (!reExpander) {
|
|
// We did not find a Header of the required orientation: create one.
|
|
me.reExpander = reExpander = me.createReExpander(collapseDir, {
|
|
dock: collapseDir,
|
|
cls: Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed',
|
|
isCollapsedExpander: true
|
|
});
|
|
|
|
me.dockedItems.insert(0, reExpander);
|
|
}
|
|
return reExpander;
|
|
},
|
|
|
|
createReExpander: function(direction, defaults) {
|
|
var me = this,
|
|
isLeft = direction === 'left',
|
|
isRight = direction === 'right',
|
|
isVertical = isLeft || isRight,
|
|
result = Ext.apply({
|
|
hideMode: 'offsets',
|
|
title: me.title || ' ',
|
|
titleAlign: me.titleAlign,
|
|
orientation: isVertical ? 'vertical' : 'horizontal',
|
|
textCls: me.headerTextCls,
|
|
icon: me.icon,
|
|
iconCls: me.iconCls,
|
|
glyph: me.glyph,
|
|
baseCls: me.self.prototype.baseCls + '-header',
|
|
ui: me.ui,
|
|
frame: me.frame && me.frameHeader,
|
|
ignoreParentFrame: me.frame || me.overlapHeader,
|
|
indicateDrag: me.draggable,
|
|
collapseImmune: true,
|
|
ownerCt: me.ownerCt,
|
|
ownerLayout: me.componentLayout,
|
|
margin: me.margin
|
|
}, defaults);
|
|
|
|
// If we're in mini mode, set the placeholder size to only 1px since
|
|
// we don't need it to show up.
|
|
if (me.collapseMode === 'mini') {
|
|
if (isVertical) {
|
|
result.width = 1;
|
|
} else {
|
|
result.height = 1;
|
|
}
|
|
}
|
|
|
|
// Create the re expand tool
|
|
// For UI consistency reasons, collapse:left reExpanders, and region: 'west' placeHolders
|
|
// have the re expand tool at the *top* with a bit of space.
|
|
if (!me.hideCollapseTool) {
|
|
if (isLeft || (isRight && me.isPlaceHolderCollapse())) {
|
|
// adjust the title position if the collapse tool needs to be at the
|
|
// top of a vertical header
|
|
result.titlePosition = 1;
|
|
}
|
|
result.tools = [{
|
|
xtype: 'tool',
|
|
type: 'expand-' + me.getOppositeDirection(direction),
|
|
uiCls: ['top'],
|
|
handler: me.toggleCollapse,
|
|
scope: me
|
|
}];
|
|
}
|
|
result = new Ext.panel.Header(result);
|
|
result.addClsWithUI(me.getHeaderCollapsedClasses(result));
|
|
return result;
|
|
},
|
|
|
|
// @private
|
|
// Create the class array to add to the Header when collpsed.
|
|
getHeaderCollapsedClasses: function(header) {
|
|
var me = this,
|
|
collapsedCls = me.collapsedCls,
|
|
collapsedClasses;
|
|
|
|
collapsedClasses = [ collapsedCls, collapsedCls + '-' + header.getDockName()];
|
|
if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
|
|
collapsedClasses.push(collapsedCls + '-border-' + header.getDockName());
|
|
}
|
|
return collapsedClasses;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called before the change from default, configured state into the collapsed state.
|
|
* This method may be called at render time to enable rendering in an initially collapsed state,
|
|
* or at runtime when an existing, fully layed out Panel may be collapsed.
|
|
* It basically saves configs which need to be clobbered for the duration of the collapsed state.
|
|
*/
|
|
beginCollapse: function() {
|
|
var me = this,
|
|
lastBox = me.lastBox,
|
|
rendered = me.rendered,
|
|
collapseMemento = me.collapseMemento || (me.collapseMemento = new Ext.util.Memento(me)),
|
|
sizeModel = me.getSizeModel(),
|
|
header = me.header,
|
|
reExpander;
|
|
|
|
// 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).
|
|
// Additionally, the panel may have a shrink wrapped width and/or height. For shrinkWrapped
|
|
// panels this can be problematic, since a collapsed, shrink-wrapped panel has no way
|
|
// of determining its width (or height if the collapse direction is horizontal). It is
|
|
// therefore necessary to capture both the width and height regardless of collapse direction.
|
|
// This allows us to set a configured width or height on the panel when it is collapsed,
|
|
// and it will be restored to an unconfigured-width shrinkWrapped state on expand.
|
|
collapseMemento.capture(['height', 'minHeight', 'width', 'minWidth']);
|
|
if (lastBox) {
|
|
collapseMemento.capture(me.restoreDimension(), lastBox, 'last.');
|
|
}
|
|
// If the panel has a shrinkWrapped height/width and is already rendered, configure its width/height as its calculated width/height,
|
|
// so that the collapsed header will have the same width or height as the panel did before it was collapsed.
|
|
// If the shrinkWrapped panel has not yet been rendered, as will be the case when a panel is initially configured with
|
|
// collapsed:true, we attempt to use the configured width/height, and fall back to minWidth or minHeight if
|
|
// width/height has not been configured, and fall back to a value of 100 if a minWidth/minHeight has not been configured.
|
|
if (me.collapsedVertical()) {
|
|
if (sizeModel.width.shrinkWrap) {
|
|
me.width = rendered ? me.getWidth() : me.width || me.minWidth || 100;
|
|
}
|
|
delete me.height;
|
|
me.minHeight = 0;
|
|
} else if (me.collapsedHorizontal()) {
|
|
if (sizeModel.height.shrinkWrap) {
|
|
me.height = rendered ? me.getHeight() : me.height || me.minHeight || 100;
|
|
}
|
|
delete me.width;
|
|
me.minWidth = 0;
|
|
}
|
|
|
|
if (me.ownerCt) {
|
|
me.ownerCt.getLayout().beginCollapse(me);
|
|
}
|
|
|
|
// Get a reExpander header. This will return the Panel Header if the Header is in the correct orientation
|
|
// If we are using the Header as the reExpander, change its UI to collapsed state
|
|
if (!me.isPlaceHolderCollapse() && header !== false) {
|
|
if (header === (reExpander = me.getReExpander())) {
|
|
header.collapseImmune = true;
|
|
header.getHierarchyState().collapseImmune = true;
|
|
header.addClsWithUI(me.getHeaderCollapsedClasses(header));
|
|
|
|
// Ensure that the reExpander has the correct framing applied.
|
|
if (header.rendered) {
|
|
header.updateFrame();
|
|
}
|
|
} else if (reExpander.el) {
|
|
// We're going to use a temporary reExpander: show it.
|
|
reExpander.el.show();
|
|
reExpander.hidden = false;
|
|
}
|
|
}
|
|
if (me.resizer) {
|
|
me.resizer.disable();
|
|
}
|
|
},
|
|
|
|
beginExpand: function() {
|
|
var me = this,
|
|
lastBox = me.lastBox,
|
|
collapseMemento = me.collapseMemento,
|
|
restoreDimension = this.restoreDimension(),
|
|
header = me.header,
|
|
reExpander;
|
|
|
|
if (collapseMemento) {
|
|
collapseMemento.restore(['minHeight', 'minWidth', restoreDimension]);
|
|
if (lastBox) {
|
|
collapseMemento.restore(restoreDimension, true, lastBox, 'last.');
|
|
}
|
|
}
|
|
|
|
if (me.ownerCt) {
|
|
me.ownerCt.getLayout().beginExpand(me);
|
|
}
|
|
|
|
if (!me.isPlaceHolderCollapse() && header !== false) {
|
|
// If we have been using our Header as the reExpander then restore the Header to expanded UI
|
|
if (header === (reExpander = me.getReExpander())) {
|
|
delete header.collapseImmune;
|
|
delete header.getHierarchyState().collapseImmune;
|
|
header.removeClsWithUI(me.getHeaderCollapsedClasses(header));
|
|
|
|
// Ensure that the reExpander has the correct framing applied.
|
|
if (header.rendered) {
|
|
header.expanding = true;
|
|
header.updateFrame();
|
|
delete header.expanding;
|
|
}
|
|
} else {
|
|
// We've been using a temporary reExpander: hide it.
|
|
reExpander.hidden = true;
|
|
reExpander.el.hide();
|
|
}
|
|
}
|
|
if (me.resizer) {
|
|
me.resizer.enable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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 {String} [direction] The direction to collapse towards. Must be one of
|
|
*
|
|
* - Ext.Component.DIRECTION_TOP
|
|
* - Ext.Component.DIRECTION_RIGHT
|
|
* - Ext.Component.DIRECTION_BOTTOM
|
|
* - Ext.Component.DIRECTION_LEFT
|
|
*
|
|
* Defaults to {@link #collapseDirection}.
|
|
*
|
|
* @param {Boolean} [animate] True to animate the transition, else false
|
|
* (defaults to the value of the {@link #animCollapse} panel config). May
|
|
* also be specified as the animation duration in milliseconds.
|
|
* @return {Ext.panel.Panel} this
|
|
*/
|
|
collapse: function(direction, animate) {
|
|
var me = this,
|
|
collapseDir = direction || me.collapseDirection,
|
|
ownerCt = me.ownerCt;
|
|
|
|
if (me.isCollapsingOrExpanding) {
|
|
return me;
|
|
}
|
|
|
|
if (arguments.length < 2) {
|
|
animate = me.animCollapse;
|
|
}
|
|
|
|
if (me.collapsed || me.fireEvent('beforecollapse', me, direction, animate) === false) {
|
|
return me;
|
|
}
|
|
|
|
if (ownerCt && me.isPlaceHolderCollapse()) {
|
|
return me.placeholderCollapse(direction, animate);
|
|
}
|
|
|
|
me.collapsed = collapseDir;
|
|
me.beginCollapse();
|
|
|
|
me.getHierarchyState().collapsed = true;
|
|
me.fireHierarchyEvent('collapse');
|
|
|
|
return me.doCollapseExpand(1, animate);
|
|
},
|
|
|
|
doCollapseExpand: function (flags, animate) {
|
|
var me = this,
|
|
originalAnimCollapse = me.animCollapse,
|
|
ownerLayout = me.ownerLayout;
|
|
|
|
// we need to temporarily set animCollapse to the animate value here because ContextItem
|
|
// uses the animCollapse property to determine if the collapse/expand should be animated
|
|
me.animCollapse = animate;
|
|
|
|
// Flag used by the layout ContextItem to impose an animation policy based upon the
|
|
// collapse direction and the animCollapse setting.
|
|
me.isCollapsingOrExpanding = flags;
|
|
|
|
// The x-animating-size class sets overflow:hidden so that overflowing
|
|
// content is clipped during animation.
|
|
if (animate) {
|
|
me.addCls(Ext.baseCSSPrefix + 'animating-size');
|
|
}
|
|
|
|
if (ownerLayout && !animate) {
|
|
ownerLayout.onContentChange(me);
|
|
} else {
|
|
me.updateLayout({ isRoot: true });
|
|
}
|
|
|
|
// set animCollapse back to its original value
|
|
me.animCollapse = originalAnimCollapse;
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Invoked after the Panel is Collapsed.
|
|
*
|
|
* @param {Boolean} animated
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterCollapse: function(animated) {
|
|
var me = this,
|
|
ownerLayout = me.ownerLayout;
|
|
|
|
me.isCollapsingOrExpanding = 0;
|
|
me.updateCollapseTool();
|
|
|
|
// The x-animating-size class sets overflow:hidden so that overflowing
|
|
// content is clipped during animation.
|
|
if (animated) {
|
|
me.removeCls(Ext.baseCSSPrefix + 'animating-size');
|
|
}
|
|
|
|
if (ownerLayout && animated) {
|
|
ownerLayout.onContentChange(me);
|
|
}
|
|
|
|
me.setHiddenDocked();
|
|
me.fireEvent('collapse', me);
|
|
},
|
|
|
|
setHiddenDocked: function(){
|
|
// Hide Panel content except reExpander using visibility to prevent focusing of contained elements.
|
|
// Track what we hide to re-show on expand
|
|
var me = this,
|
|
toHide = me.hiddenOnCollapse,
|
|
items = me.getDockedItems(),
|
|
len = items.length,
|
|
i = 0,
|
|
item, reExpander;
|
|
|
|
if (me.header !== false) {
|
|
reExpander = me.getReExpander();
|
|
}
|
|
|
|
toHide.add(me.body);
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
if (item && item !== reExpander && item.el) {
|
|
toHide.add(item.el);
|
|
}
|
|
}
|
|
toHide.setStyle('visibility', 'hidden');
|
|
},
|
|
|
|
restoreHiddenDocked: function(){
|
|
var toShow = this.hiddenOnCollapse;
|
|
// Re-show Panel content which was hidden after collapse.
|
|
toShow.setStyle('visibility', '');
|
|
toShow.clear();
|
|
},
|
|
|
|
getPlaceholder: function(direction) {
|
|
var me = this,
|
|
collapseDir = direction || me.collapseDirection,
|
|
listeners = null,
|
|
placeholder = me.placeholder,
|
|
floatable = me.floatable,
|
|
titleCollapse = me.titleCollapse;
|
|
|
|
if (!placeholder) {
|
|
if (floatable || (me.collapsible && titleCollapse)) {
|
|
listeners = {
|
|
click: {
|
|
// titleCollapse needs to take precedence over floatable
|
|
fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
|
|
element: 'el',
|
|
scope: me
|
|
}
|
|
};
|
|
}
|
|
|
|
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
|
|
id: me.id + '-placeholder',
|
|
listeners: listeners
|
|
}));
|
|
}
|
|
|
|
// User created placeholder was passed in
|
|
if (!placeholder.placeholderFor) {
|
|
// Handle the case of a placeholder config
|
|
if (!placeholder.isComponent) {
|
|
me.placeholder = placeholder = me.lookupComponent(placeholder);
|
|
}
|
|
Ext.applyIf(placeholder, {
|
|
margins: me.margins,
|
|
placeholderFor: me
|
|
});
|
|
|
|
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
|
|
}
|
|
|
|
return placeholder;
|
|
},
|
|
|
|
placeholderCollapse: function(direction, animate) {
|
|
var me = this,
|
|
ownerCt = me.ownerCt,
|
|
collapseDir = direction || me.collapseDirection,
|
|
floatCls = Ext.baseCSSPrefix + 'border-region-slide-in',
|
|
placeholder = me.getPlaceholder(collapseDir),
|
|
slideInDirection;
|
|
|
|
me.isCollapsingOrExpanding = 1;
|
|
|
|
// Upcoming layout run will ignore this Component
|
|
me.setHiddenState(true);
|
|
me.collapsed = collapseDir;
|
|
|
|
if (placeholder.rendered) {
|
|
// We may have been added to another Container from that in which we rendered the placeholder
|
|
if (placeholder.el.dom.parentNode !== me.el.dom.parentNode) {
|
|
me.el.dom.parentNode.insertBefore(placeholder.el.dom, me.el.dom);
|
|
}
|
|
|
|
placeholder.hidden = false;
|
|
placeholder.el.show();
|
|
ownerCt.updateLayout();
|
|
} else {
|
|
ownerCt.insert(ownerCt.items.indexOf(me), placeholder);
|
|
}
|
|
|
|
if (me.rendered) {
|
|
// We MUST NOT hide using display because that resets all scroll information.
|
|
me.el.setVisibilityMode(me.placeholderCollapseHideMode);
|
|
if (animate) {
|
|
me.el.addCls(floatCls);
|
|
placeholder.el.hide();
|
|
slideInDirection = me.convertCollapseDir(collapseDir);
|
|
|
|
me.el.slideOut(slideInDirection, {
|
|
preserveScroll: true,
|
|
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
|
|
listeners: {
|
|
afteranimate: function() {
|
|
me.el.removeCls(floatCls);
|
|
/* We need to show the element so that slideIn will work correctly. However, if we leave it
|
|
visible then it can be seen before the animation starts, causing a flicker. The solution,
|
|
borrowed from date picker, is to hide it using display none. The slideIn effect includes
|
|
a call to fixDisplay() that will undo the display none at the appropriate time.
|
|
*/
|
|
placeholder.el.show().setStyle('display', 'none').slideIn(slideInDirection, {
|
|
easing: 'linear',
|
|
duration: 100,
|
|
listeners: {
|
|
afteranimate: function() {
|
|
placeholder.focus();
|
|
me.isCollapsingOrExpanding = 0;
|
|
me.fireEvent('collapse', me);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
me.el.hide();
|
|
me.isCollapsingOrExpanding = 0;
|
|
me.fireEvent('collapse', me);
|
|
}
|
|
} else {
|
|
me.isCollapsingOrExpanding = 0;
|
|
if (!me.preventCollapseFire) {
|
|
me.fireEvent('collapse', me);
|
|
}
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
floatCollapsedPanel: function() {
|
|
var me = this,
|
|
placeholder = me.placeholder,
|
|
ps = placeholder.getSize(),
|
|
myBox,
|
|
floatCls = Ext.baseCSSPrefix + 'border-region-slide-in',
|
|
collapsed = me.collapsed,
|
|
layoutOwner = me.ownerCt || me,
|
|
slideDirection;
|
|
|
|
if (me.isSliding) {
|
|
return;
|
|
}
|
|
|
|
// Already floated
|
|
if (me.el.hasCls(floatCls)) {
|
|
me.slideOutFloatedPanel();
|
|
return;
|
|
}
|
|
me.isSliding = true;
|
|
|
|
// Lay out in fully expanded mode to ensure we are at the correct size, and collect our expanded box
|
|
placeholder.el.hide();
|
|
placeholder.hidden = true;
|
|
me.el.show();
|
|
me.setHiddenState(false);
|
|
me.collapsed = false;
|
|
layoutOwner.updateLayout();
|
|
myBox = me.getBox(false, true);
|
|
|
|
// Then go back immediately to collapsed state from which to initiate the float into view.
|
|
placeholder.el.show();
|
|
placeholder.hidden = false;
|
|
me.el.hide();
|
|
me.setHiddenState(true);
|
|
me.collapsed = collapsed;
|
|
layoutOwner.updateLayout();
|
|
|
|
me.slideOutTask = me.slideOutTask || new Ext.util.DelayedTask(me.slideOutFloatedPanel, me);
|
|
placeholder.el.on('mouseleave', me.onMouseLeaveFloated, me);
|
|
me.el.on('mouseleave', me.onMouseLeaveFloated, me);
|
|
placeholder.el.on('mouseenter', me.onMouseEnterFloated, me);
|
|
me.el.on('mouseenter', me.onMouseEnterFloated, me);
|
|
|
|
me.el.addCls(floatCls);
|
|
me.floated = true;
|
|
|
|
// Hide collapse tool in header if there is one (we might be headerless)
|
|
if (me.collapseTool) {
|
|
me.collapseTool.el.hide();
|
|
}
|
|
|
|
switch (me.collapsed) {
|
|
case 'top':
|
|
me.setLocalXY(myBox.x, myBox.y + ps.height - 1);
|
|
break;
|
|
case 'right':
|
|
me.setLocalXY(myBox.x - ps.width + 1, myBox.y);
|
|
break;
|
|
case 'bottom':
|
|
me.setLocalXY(myBox.x, myBox.y - ps.height + 1);
|
|
break;
|
|
case 'left':
|
|
me.setLocalXY(myBox.x + ps.width - 1, myBox.y);
|
|
break;
|
|
}
|
|
slideDirection = me.convertCollapseDir(me.collapsed);
|
|
|
|
// Remember how we are really collapsed so we can restore it, but also so we can
|
|
// become a layoutRoot while we are floated:
|
|
me.floatedFromCollapse = me.collapsed;
|
|
me.collapsed = false;
|
|
me.setHiddenState(false);
|
|
|
|
me.el.slideIn(slideDirection, {
|
|
preserveScroll: true,
|
|
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
|
|
listeners: {
|
|
afteranimate: function() {
|
|
me.isSliding = false;
|
|
me.fireEvent('float', me);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
onMouseLeaveFloated: function(e) {
|
|
this.slideOutTask.delay(500);
|
|
},
|
|
|
|
onMouseEnterFloated: function(e) {
|
|
this.slideOutTask.cancel();
|
|
},
|
|
|
|
isLayoutRoot: function() {
|
|
if (this.floatedFromCollapse) {
|
|
return true;
|
|
}
|
|
return this.callParent();
|
|
},
|
|
|
|
slideOutFloatedPanel: function() {
|
|
var me = this,
|
|
compEl = this.el,
|
|
collapseDirection;
|
|
|
|
if (me.isSliding || me.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
me.isSliding = true;
|
|
me.floated = false;
|
|
|
|
me.slideOutFloatedPanelBegin();
|
|
|
|
if (typeof me.collapsed == 'string') {
|
|
collapseDirection = me.convertCollapseDir(me.collapsed);
|
|
}
|
|
|
|
compEl.slideOut(collapseDirection, {
|
|
preserveScroll: true,
|
|
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
|
|
listeners: {
|
|
afteranimate: function() {
|
|
me.slideOutFloatedPanelEnd();
|
|
// this would be in slideOutFloatedPanelEnd except that the only other
|
|
// caller removes this cls later
|
|
me.el.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* This method begins the slide out of the floated panel.
|
|
* @private
|
|
*/
|
|
slideOutFloatedPanelBegin: function() {
|
|
var me = this,
|
|
placeholderEl = me.placeholder.el,
|
|
el = me.el;
|
|
|
|
me.collapsed = me.floatedFromCollapse;
|
|
me.setHiddenState(true);
|
|
me.floatedFromCollapse = null;
|
|
|
|
// Remove mouse leave/enter monitors
|
|
placeholderEl.un('mouseleave', me.onMouseLeaveFloated, me);
|
|
el.un('mouseleave', me.onMouseLeaveFloated, me);
|
|
placeholderEl.un('mouseenter', me.onMouseEnterFloated, me);
|
|
el.un('mouseenter', me.onMouseEnterFloated, me);
|
|
},
|
|
|
|
/**
|
|
* This method cleans up after the slide out of the floated panel.
|
|
* @private
|
|
*/
|
|
slideOutFloatedPanelEnd: function() {
|
|
var me = this;
|
|
|
|
if (me.collapseTool) {
|
|
me.collapseTool.el.show();
|
|
}
|
|
me.slideOutTask.cancel();
|
|
me.isSliding = false;
|
|
me.fireEvent('unfloat', me);
|
|
},
|
|
|
|
/**
|
|
* Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will
|
|
* cancel the expand action if it returns false.
|
|
* @param {Boolean} [animate] True to animate the transition, else false
|
|
* (defaults to the value of the {@link #animCollapse} panel config). May
|
|
* also be specified as the animation duration in milliseconds.
|
|
* @return {Ext.panel.Panel} this
|
|
*/
|
|
expand: function(animate) {
|
|
var me = this;
|
|
|
|
if (me.isCollapsingOrExpanding) {
|
|
return me;
|
|
}
|
|
|
|
if (!arguments.length) {
|
|
animate = me.animCollapse;
|
|
}
|
|
|
|
if (!me.collapsed && !me.floatedFromCollapse) {
|
|
return me;
|
|
}
|
|
|
|
if (me.fireEvent('beforeexpand', me, animate) === false) {
|
|
return me;
|
|
}
|
|
|
|
delete this.getHierarchyState().collapsed;
|
|
|
|
if (me.isPlaceHolderCollapse()) {
|
|
return me.placeholderExpand(animate);
|
|
}
|
|
|
|
me.restoreHiddenDocked();
|
|
me.beginExpand();
|
|
me.collapsed = false;
|
|
|
|
return me.doCollapseExpand(2, animate);
|
|
},
|
|
|
|
placeholderExpand: function(animate) {
|
|
var me = this,
|
|
collapseDir = me.collapsed,
|
|
floatCls = Ext.baseCSSPrefix + 'border-region-slide-in',
|
|
finalPos,
|
|
floatedPos,
|
|
center = me.ownerLayout ? me.ownerLayout.centerRegion: null;
|
|
|
|
// Layouts suspended - don't bother with animation shenanigans
|
|
if (Ext.AbstractComponent.layoutSuspendCount) {
|
|
animate = false;
|
|
}
|
|
|
|
if (me.floatedFromCollapse) {
|
|
floatedPos = me.getPosition(true);
|
|
// these are the same cleanups performed by the normal slideOut mechanism:
|
|
me.slideOutFloatedPanelBegin();
|
|
me.slideOutFloatedPanelEnd();
|
|
me.floated = false;
|
|
}
|
|
|
|
if (animate) {
|
|
|
|
// Expand me and hide the placeholder
|
|
Ext.suspendLayouts();
|
|
me.placeholder.hide();
|
|
me.el.show();
|
|
me.collapsed = false;
|
|
me.setHiddenState(false);
|
|
|
|
// Stop the center region from moving when layed out without the placeholder there.
|
|
// Unless we are expanding from a floated out situation. In that case, it's layed out immediately.
|
|
if (center && !floatedPos) {
|
|
center.hidden = true;
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
center.hidden = false;
|
|
me.el.addCls(floatCls);
|
|
|
|
// At this point, this Panel is arranged in its correct, expanded layout.
|
|
// The center region has not been affected because it has been flagged as hidden.
|
|
//
|
|
// If we are proceeding from floated, the center region has also been arranged
|
|
// in its new layout to accommodate this expansion, so no further layout is needed, just
|
|
// element animation.
|
|
//
|
|
// If we are proceeding from fully collapsed, the center region has *not* been relayed out because
|
|
// the UI look and feel dictates that it stays stable until the expanding panel has slid in all the
|
|
// way, and *then* it snaps into place.
|
|
|
|
me.isCollapsingOrExpanding = 2;
|
|
|
|
// Floated, move it back to the floated pos, and thence into the correct place
|
|
if (floatedPos) {
|
|
finalPos = me.getXY();
|
|
me.setLocalXY(floatedPos[0], floatedPos[1]);
|
|
me.setXY([finalPos[0], finalPos[1]], {
|
|
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
|
|
listeners: {
|
|
afteranimate: function() {
|
|
me.el.removeCls(floatCls);
|
|
me.isCollapsingOrExpanding = 0;
|
|
me.fireEvent('expand', me);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// Not floated, slide it in to the correct place
|
|
else {
|
|
me.el.hide();
|
|
me.placeholder.el.show();
|
|
me.placeholder.hidden = false;
|
|
|
|
// Slide this Component's el back into place, after which we lay out AGAIN
|
|
me.setHiddenState(false);
|
|
me.el.slideIn(me.convertCollapseDir(collapseDir), {
|
|
preserveScroll: true,
|
|
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
|
|
listeners: {
|
|
afteranimate: function() {
|
|
// the ordering of these two lines appears to be important in
|
|
// IE9. There is an odd expand issue in IE 9 in the border layout
|
|
// example that causes the index1 child of the south dock region
|
|
// to get 'hidden' after a collapse / expand cycle. See
|
|
// EXTJSIV-5318 for details
|
|
me.el.removeCls(floatCls);
|
|
me.placeholder.hide();
|
|
|
|
// The center region has been left in its larger size, so a layout is needed now
|
|
me.updateLayout();
|
|
|
|
me.isCollapsingOrExpanding = 0;
|
|
me.fireEvent('expand', me);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
} else {
|
|
me.floated = me.collapsed = false;
|
|
me.el.removeCls(floatCls);
|
|
Ext.suspendLayouts();
|
|
me.placeholder.hide();
|
|
me.show();
|
|
Ext.resumeLayouts(true);
|
|
me.fireEvent('expand', me);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Invoked after the Panel is Expanded.
|
|
*
|
|
* @param {Boolean} animated
|
|
*
|
|
* @template
|
|
* @protected
|
|
*/
|
|
afterExpand: function(animated) {
|
|
var me = this,
|
|
ownerLayout = me.ownerLayout;
|
|
|
|
me.isCollapsingOrExpanding = 0;
|
|
me.updateCollapseTool();
|
|
|
|
// The x-animating-size class sets overflow:hidden so that overflowing
|
|
// content is clipped during animation.
|
|
if (animated) {
|
|
me.removeCls(Ext.baseCSSPrefix + 'animating-size');
|
|
}
|
|
|
|
if (ownerLayout && animated) {
|
|
ownerLayout.onContentChange(me);
|
|
}
|
|
|
|
me.fireEvent('expand', me);
|
|
me.fireHierarchyEvent('expand');
|
|
},
|
|
|
|
// @inheritdoc
|
|
setBorder: function(border, targetEl) {
|
|
if (targetEl) {
|
|
// skip out here, the panel will set the border on the body/header during rendering
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
header = me.header;
|
|
|
|
if (!border) {
|
|
border = 0;
|
|
} else if (border === true) {
|
|
border = '1px';
|
|
} else {
|
|
border = me.unitizeBox(border);
|
|
}
|
|
|
|
if (header) {
|
|
if (header.isHeader) {
|
|
header.setBorder(border);
|
|
} else {
|
|
header.border = border;
|
|
}
|
|
}
|
|
|
|
if (me.rendered && me.bodyBorder !== false) {
|
|
me.body.setStyle('border-width', border);
|
|
}
|
|
me.updateLayout();
|
|
|
|
me.border = border;
|
|
},
|
|
|
|
/**
|
|
* Shortcut for performing an {@link #method-expand} or {@link #method-collapse} based on the current state of the panel.
|
|
* @return {Ext.panel.Panel} this
|
|
*/
|
|
toggleCollapse: function() {
|
|
return (this.collapsed || this.floatedFromCollapse) ? this.expand() : this.collapse();
|
|
},
|
|
|
|
// @private
|
|
getKeyMap : function() {
|
|
return this.keyMap || (this.keyMap = new Ext.util.KeyMap(Ext.apply({
|
|
target: this.el
|
|
}, this.keys)));
|
|
},
|
|
|
|
// @private
|
|
initDraggable : function() {
|
|
|
|
// For just simple dragging like Windows
|
|
if (this.simpleDrag) {
|
|
this.initSimpleDraggable();
|
|
}
|
|
// For DD package aware dragging of Panels
|
|
else {
|
|
/**
|
|
* @property {Ext.dd.DragSource/Ext.util.ComponentDragger} dd
|
|
*
|
|
* Only present if this Panel has been configured with {@link #cfg-draggable} `true`.
|
|
*
|
|
* ##Simple dragging##
|
|
*
|
|
* If this Panel is configured {@link #cfg-simpleDrag} `true` (the default is `false`), this property
|
|
* will reference an instance of {@link Ext.util.ComponentDragger} (A subclass of
|
|
* {@link Ext.dd.DragTracker DragTracker}) which handles moving the Panel's DOM Element,
|
|
* and constraining according to the {@link #constrain} and {@link #constrainHeader} .
|
|
*
|
|
* This object fires various events during its lifecycle and during a drag operation.
|
|
*
|
|
* ##Complex dragging interacting with other DragDrop instances##
|
|
*
|
|
* By default, this property in a {@link #cfg-draggable} Panel will contain an instance of {@link
|
|
* Ext.dd.DragSource} which handles dragging the Panel.
|
|
*
|
|
* The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} in order to
|
|
* supply behaviour for each stage of the drag/drop process. See {@link #cfg-draggable}.
|
|
*/
|
|
this.dd = new Ext.panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Override Component.initDraggable.
|
|
* Panel (and subclasses) use the header element as the delegate.
|
|
*/
|
|
initSimpleDraggable: function() {
|
|
var me = this,
|
|
ddConfig, dd;
|
|
|
|
if (!me.header) {
|
|
me.updateHeader(true);
|
|
}
|
|
|
|
/*
|
|
* Check the header here again. If for whatever reason it wasn't created in
|
|
* updateHeader (we were configured with header: false) then we'll just ignore the rest since the
|
|
* header acts as the drag handle.
|
|
*/
|
|
if (me.header) {
|
|
ddConfig = Ext.applyIf({
|
|
el: me.el,
|
|
delegate: '#' + Ext.escapeId(me.header.id)
|
|
}, me.draggable);
|
|
|
|
// Add extra configs if Window is specified to be constrained
|
|
if (me.constrain || me.constrainHeader) {
|
|
ddConfig.constrain = me.constrain;
|
|
ddConfig.constrainDelegate = me.constrainHeader;
|
|
ddConfig.constrainTo = me.constrainTo || me.container;
|
|
}
|
|
|
|
dd = me.dd = new Ext.util.ComponentDragger(this, ddConfig);
|
|
me.relayEvents(dd, ['dragstart', 'drag', 'dragend']);
|
|
if (me.maximized) {
|
|
dd.disable();
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// helper function for ghost
|
|
ghostTools : function() {
|
|
var tools = [],
|
|
header = this.header,
|
|
headerTools = header ? header.query('tool[hidden=false]') : [],
|
|
t, tLen, tool;
|
|
|
|
if (headerTools.length) {
|
|
t = 0;
|
|
tLen = headerTools.length;
|
|
|
|
for (; t < tLen; t++) {
|
|
tool = headerTools[t];
|
|
|
|
// Some tools can be full components, and copying them into the ghost
|
|
// actually removes them from the owning panel. You could also potentially
|
|
// end up with duplicate DOM ids as well. To avoid any issues we just make
|
|
// a simple bare-minimum clone of each tool for ghosting purposes.
|
|
tools.push({
|
|
type: tool.type
|
|
});
|
|
}
|
|
} else {
|
|
tools = [{
|
|
type: 'placeholder'
|
|
}];
|
|
}
|
|
return tools;
|
|
},
|
|
|
|
// @private
|
|
// used for dragging
|
|
ghost: function(cls) {
|
|
var me = this,
|
|
ghostPanel = me.ghostPanel,
|
|
box = me.getBox(),
|
|
header;
|
|
|
|
if (!ghostPanel) {
|
|
ghostPanel = new Ext.panel.Panel({
|
|
renderTo: Ext.getBody(),
|
|
floating: {
|
|
shadow: false
|
|
},
|
|
frame: me.frame && !me.alwaysFramed,
|
|
alwaysFramed: me.alwaysFramed,
|
|
overlapHeader: me.overlapHeader,
|
|
headerPosition: me.headerPosition,
|
|
baseCls: me.baseCls,
|
|
cls: me.baseCls + '-ghost ' + (cls ||'')
|
|
});
|
|
me.ghostPanel = ghostPanel;
|
|
} else {
|
|
ghostPanel.el.show();
|
|
}
|
|
me.ghostPanel.hidden = false;
|
|
ghostPanel.floatParent = me.floatParent;
|
|
if (me.floating) {
|
|
ghostPanel.zIndexManager.assignZIndices();
|
|
} else {
|
|
ghostPanel.toFront();
|
|
}
|
|
if (!(me.preventHeader || (me.header === false))) {
|
|
header = ghostPanel.header;
|
|
// restore options
|
|
if (header) {
|
|
header.suspendLayouts();
|
|
Ext.Array.forEach(header.query('tool'), header.remove, header);
|
|
header.resumeLayouts();
|
|
}
|
|
ghostPanel.addTool(me.ghostTools());
|
|
ghostPanel.setTitle(me.title);
|
|
|
|
if (me.iconCls) {
|
|
ghostPanel.setIconCls(me.iconCls);
|
|
} else if (me.icon) {
|
|
ghostPanel.setIcon(me.icon);
|
|
} else if (me.glyph) {
|
|
ghostPanel.setGlyph(me.glyph);
|
|
}
|
|
|
|
ghostPanel.header.addCls(Ext.baseCSSPrefix + 'header-ghost');
|
|
}
|
|
|
|
ghostPanel.setPagePosition(box.x, box.y);
|
|
ghostPanel.setSize(box.width, box.height);
|
|
me.el.hide();
|
|
return ghostPanel;
|
|
},
|
|
|
|
// @private
|
|
unghost: function(show, matchPosition) {
|
|
var me = this;
|
|
if (!me.ghostPanel) {
|
|
return;
|
|
}
|
|
if (show !== false) {
|
|
// Show el first, so that position adjustment in setPagePosition
|
|
// will work when relative positioned elements have their XY read.
|
|
me.el.show();
|
|
if (matchPosition !== false) {
|
|
me.setPagePosition(me.ghostPanel.getXY());
|
|
if (me.hideMode == 'offsets') {
|
|
// clear the hidden style because we just repositioned
|
|
delete me.el.hideModeStyles;
|
|
}
|
|
}
|
|
Ext.defer(me.focus, 10, me);
|
|
}
|
|
me.ghostPanel.el.hide();
|
|
me.ghostPanel.hidden = true;
|
|
},
|
|
|
|
beginDrag: function() {
|
|
if (this.floatingDescendants) {
|
|
this.floatingDescendants.hide();
|
|
}
|
|
},
|
|
|
|
endDrag: function() {
|
|
if (this.floatingDescendants) {
|
|
this.floatingDescendants.show();
|
|
}
|
|
},
|
|
|
|
initResizable: function() {
|
|
this.callParent(arguments);
|
|
if (this.collapsed) {
|
|
this.resizer.disable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* converts a collapsdDir into an anchor argument for Element.slideIn
|
|
* overridden in rtl mode to switch "l" and "r"
|
|
*/
|
|
convertCollapseDir: function(collapseDir) {
|
|
return collapseDir.substr(0, 1);
|
|
}
|
|
}, function() {
|
|
this.prototype.animCollapse = Ext.enableFx;
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
* @xtype tip
|
|
*/
|
|
Ext.define('Ext.tip.Tip', {
|
|
extend: Ext.panel.Panel ,
|
|
|
|
alternateClassName: 'Ext.Tip',
|
|
|
|
/**
|
|
* @cfg {Boolean} [closable=false]
|
|
* True to render a close tool button into the tooltip header.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} [width='auto']
|
|
* Width in pixels of the tip. Width will be ignored if it
|
|
* exceeds the bounds of {@link #minWidth} or {@link #maxWidth}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} minWidth
|
|
* The minimum width of the tip in pixels.
|
|
*/
|
|
minWidth : 40,
|
|
/**
|
|
* @cfg {Number} maxWidth
|
|
* The maximum width of the tip in pixels. The maximum supported value is 500.
|
|
*/
|
|
maxWidth : 500,
|
|
/**
|
|
* @cfg {Boolean/String} shadow
|
|
* `true` or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
|
|
* for bottom-right shadow.
|
|
*/
|
|
shadow : "sides",
|
|
|
|
/**
|
|
* @cfg {String} defaultAlign
|
|
* **Experimental**. The default {@link Ext.util.Positionable#alignTo} anchor position value
|
|
* for this tip relative to its element of origin.
|
|
*/
|
|
defaultAlign : "tl-bl?",
|
|
/**
|
|
* @cfg {Boolean} constrainPosition
|
|
* If `true`, then the tooltip will be automatically constrained to stay within
|
|
* the browser viewport.
|
|
*/
|
|
constrainPosition : true,
|
|
|
|
// private panel overrides
|
|
autoRender: true,
|
|
hidden: true,
|
|
baseCls: Ext.baseCSSPrefix + 'tip',
|
|
floating: {
|
|
shadow: true,
|
|
shim: true
|
|
},
|
|
focusOnToFront: false,
|
|
|
|
/**
|
|
* @cfg {String} closeAction
|
|
* The action to take when the close header tool is clicked:
|
|
*
|
|
* - **{@link #method-destroy}** : {@link #method-remove remove} the window from the DOM and
|
|
* {@link Ext.Component#method-destroy destroy} it and all descendant Components. The
|
|
* window will **not** be available to be redisplayed via the {@link #method-show} method.
|
|
*
|
|
* - **{@link #method-hide}** : **Default.** {@link #method-hide} the window by setting visibility
|
|
* to hidden and applying negative offsets. The window will be available to be
|
|
* redisplayed via the {@link #method-show} method.
|
|
*
|
|
* **Note:** This behavior has changed! setting *does* affect the {@link #method-close} method
|
|
* which will invoke the approriate closeAction.
|
|
*/
|
|
closeAction: 'hide',
|
|
|
|
ariaRole: 'tooltip',
|
|
|
|
// Flag to Renderable to always look up the framing styles for this Component
|
|
alwaysFramed: true,
|
|
|
|
frameHeader: false,
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.floating = Ext.apply( {}, {
|
|
shadow: me.shadow,
|
|
constrain: me.constrainPosition
|
|
}, me.self.prototype.floating);
|
|
me.callParent(arguments);
|
|
|
|
// Or in the deprecated config. Floating.doConstrain only constrains if the constrain property is truthy.
|
|
me.constrain = me.constrain || me.constrainPosition;
|
|
},
|
|
|
|
/**
|
|
* Shows this tip at the specified XY position. Example usage:
|
|
*
|
|
* // Show the tip at x:50 and y:100
|
|
* tip.showAt([50,100]);
|
|
*
|
|
* @param {Number[]} xy An array containing the x and y coordinates
|
|
*/
|
|
showAt : function(xy){
|
|
var me = this;
|
|
this.callParent(arguments);
|
|
// Show may have been vetoed.
|
|
if (me.isVisible()) {
|
|
me.setPagePosition(xy[0], xy[1]);
|
|
if (me.constrainPosition || me.constrain) {
|
|
me.doConstrain();
|
|
}
|
|
me.toFront(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Set Tip draggable using base Component's draggability.
|
|
*/
|
|
initDraggable : function(){
|
|
var me = this;
|
|
me.draggable = {
|
|
el: me.getDragEl(),
|
|
delegate: me.header.el,
|
|
constrain: me,
|
|
constrainTo: me.el.dom.parentNode
|
|
};
|
|
// Important: Bypass Panel's initDraggable. Call direct to Component's implementation.
|
|
Ext.Component.prototype.initDraggable.call(me);
|
|
},
|
|
|
|
// Tip does not ghost. Drag is "live"
|
|
ghost: undefined,
|
|
unghost: undefined
|
|
});
|
|
|
|
/**
|
|
* 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
|
|
* of when it is automatically shown and hidden.
|
|
*
|
|
* This implementation does **not** have a built-in method of automatically populating the tooltip's
|
|
* text based on the target element; you must either configure a fixed {@link #html} value for each
|
|
* ToolTip instance, or implement custom logic (e.g. in a {@link #beforeshow} event listener) to
|
|
* generate the appropriate tooltip content on the fly. See {@link Ext.tip.QuickTip} for a more
|
|
* convenient way of automatically populating and configuring a tooltip based on specific DOM
|
|
* attributes of each target element.
|
|
*
|
|
* # Basic Example
|
|
*
|
|
* var tip = Ext.create('Ext.tip.ToolTip', {
|
|
* target: 'clearButton',
|
|
* html: 'Press this button to clear the form'
|
|
* });
|
|
*
|
|
* {@img Ext.tip.ToolTip/Ext.tip.ToolTip1.png Basic Ext.tip.ToolTip}
|
|
*
|
|
* # 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
|
|
* ToolTip instances. To do this, point the {@link #target} config to a common ancestor of all the
|
|
* elements, and then set the {@link #delegate} config to a CSS selector that will select all the
|
|
* appropriate sub-elements.
|
|
*
|
|
* When using delegation, it is likely that you will want to programmatically change the content
|
|
* of the ToolTip based on each delegate element; you can do this by implementing a custom
|
|
* listener for the {@link #beforeshow} event. Example:
|
|
*
|
|
* 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()
|
|
* });
|
|
*
|
|
* var view = grid.getView();
|
|
* var tip = Ext.create('Ext.tip.ToolTip', {
|
|
* // The overall target element.
|
|
* target: view.el,
|
|
* // Each grid row causes its own separate 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') + '"');
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* {@img Ext.tip.ToolTip/Ext.tip.ToolTip2.png Ext.tip.ToolTip with delegation}
|
|
*
|
|
* # 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}
|
|
*
|
|
* # 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}
|
|
*
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*/
|
|
Ext.define('Ext.tip.ToolTip', {
|
|
extend: Ext.tip.Tip ,
|
|
alias: 'widget.tooltip',
|
|
alternateClassName: 'Ext.ToolTip',
|
|
/**
|
|
* @property {HTMLElement} triggerElement
|
|
* When a ToolTip is configured with the `{@link #delegate}`
|
|
* option to cause selected child elements of the `{@link #target}`
|
|
* Element to each trigger a separate show event, this property is set to
|
|
* the DOM element which triggered the show.
|
|
*/
|
|
/**
|
|
* @cfg {HTMLElement/Ext.Element/String} target
|
|
* The target element or string id to monitor for mouseover events to trigger
|
|
* showing this ToolTip.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [autoHide=true]
|
|
* True to automatically hide the tooltip after the
|
|
* mouse exits the target element or after the `{@link #dismissDelay}`
|
|
* has expired if set. If `{@link #closable} = true`
|
|
* a close tool button will be rendered into the tooltip header.
|
|
*/
|
|
autoHide: true,
|
|
|
|
/**
|
|
* @cfg {Number} showDelay
|
|
* Delay in milliseconds before the tooltip displays after the mouse enters the target element.
|
|
*/
|
|
showDelay: 500,
|
|
/**
|
|
* @cfg {Number} hideDelay
|
|
* Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides.
|
|
* Set to 0 for the tooltip to hide immediately.
|
|
*/
|
|
hideDelay: 200,
|
|
/**
|
|
* @cfg {Number} dismissDelay
|
|
* Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set
|
|
* dismissDelay = 0.
|
|
*/
|
|
dismissDelay: 5000,
|
|
/**
|
|
* @cfg {Number[]} [mouseOffset=[15,18]]
|
|
* An XY offset from the mouse position where the tooltip should be shown.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} trackMouse
|
|
* True to have the tooltip follow the mouse as it moves over the target element.
|
|
*/
|
|
trackMouse: false,
|
|
/**
|
|
* @cfg {String} anchor
|
|
* If specified, indicates that the tip should be anchored to a
|
|
* particular side of the target element or mouse pointer ("top", "right", "bottom",
|
|
* or "left"), with an arrow pointing back at the target or mouse pointer. If
|
|
* {@link #constrainPosition} is enabled, this will be used as a preferred value
|
|
* only and may be flipped as needed.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} anchorToTarget
|
|
* True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates.
|
|
* When `anchorToTarget` is true, use `{@link #defaultAlign}` to control tooltip alignment to the
|
|
* target element. When `anchorToTarget` is false, use `{@link #anchor}` instead to control alignment.
|
|
*/
|
|
anchorToTarget: true,
|
|
/**
|
|
* @cfg {Number} anchorOffset
|
|
* A numeric pixel value used to offset the default position of the anchor arrow. When the anchor
|
|
* 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, `anchorOffset` will be used as
|
|
* a vertical offset.
|
|
*/
|
|
anchorOffset: 0,
|
|
/**
|
|
* @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
|
|
targetCounter: 0,
|
|
quickShowInterval: 250,
|
|
|
|
// @private
|
|
initComponent: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.lastActive = new Date();
|
|
me.setTarget(me.target);
|
|
me.origAnchor = me.anchor;
|
|
},
|
|
|
|
// @private
|
|
onRender: function(ct, position) {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();
|
|
me.anchorEl = me.el.createChild({
|
|
cls: Ext.baseCSSPrefix + 'tip-anchor ' + me.anchorCls
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
|
|
* @param {String/HTMLElement/Ext.Element} t The Element, HtmlElement, or ID of an element to bind to
|
|
*/
|
|
setTarget: function(target) {
|
|
var me = this,
|
|
t = Ext.get(target),
|
|
tg;
|
|
|
|
if (me.target) {
|
|
tg = Ext.get(me.target);
|
|
me.mun(tg, 'mouseover', me.onTargetOver, me);
|
|
me.mun(tg, 'mouseout', me.onTargetOut, me);
|
|
me.mun(tg, 'mousemove', me.onMouseMove, me);
|
|
}
|
|
|
|
me.target = t;
|
|
if (t) {
|
|
|
|
me.mon(t, {
|
|
// TODO - investigate why IE6/7 seem to fire recursive resize in e.getXY
|
|
// breaking QuickTip#onTargetOver (EXTJSIV-1608)
|
|
freezeEvent: true,
|
|
|
|
mouseover: me.onTargetOver,
|
|
mouseout: me.onTargetOut,
|
|
mousemove: me.onMouseMove,
|
|
scope: me
|
|
});
|
|
}
|
|
if (me.anchor) {
|
|
me.anchorTarget = me.target;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onMouseMove: function(e) {
|
|
var me = this,
|
|
t = me.delegate ? e.getTarget(me.delegate) : me.triggerElement = true,
|
|
xy;
|
|
if (t) {
|
|
me.targetXY = e.getXY();
|
|
if (t === me.triggerElement) {
|
|
if (!me.hidden && me.trackMouse) {
|
|
xy = me.getTargetXY();
|
|
if (me.constrainPosition) {
|
|
xy = me.el.adjustForConstraints(xy, me.el.parent());
|
|
}
|
|
me.setPagePosition(xy);
|
|
}
|
|
} else {
|
|
me.hide();
|
|
me.lastActive = new Date(0);
|
|
me.onTargetOver(e);
|
|
}
|
|
} else if ((!me.closable && me.isVisible()) && me.autoHide !== false) {
|
|
me.hide();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getTargetXY: function() {
|
|
var me = this,
|
|
mouseOffset,
|
|
offsets, xy, dw, dh, de, bd, scrollX, scrollY, axy, sz, constrainPosition;
|
|
if (me.delegate) {
|
|
me.anchorTarget = me.triggerElement;
|
|
}
|
|
if (me.anchor) {
|
|
me.targetCounter++;
|
|
offsets = me.getOffsets();
|
|
xy = (me.anchorToTarget && !me.trackMouse) ? me.getAlignToXY(me.anchorTarget, me.getAnchorAlign()) : me.targetXY;
|
|
dw = Ext.Element.getViewWidth() - 5;
|
|
dh = Ext.Element.getViewHeight() - 5;
|
|
de = document.documentElement;
|
|
bd = document.body;
|
|
scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5;
|
|
scrollY = (de.scrollTop || bd.scrollTop || 0) + 5;
|
|
axy = [xy[0] + offsets[0], xy[1] + offsets[1]];
|
|
sz = me.getSize();
|
|
constrainPosition = me.constrainPosition;
|
|
|
|
me.anchorEl.removeCls(me.anchorCls);
|
|
|
|
if (me.targetCounter < 2 && constrainPosition) {
|
|
if (axy[0] < scrollX) {
|
|
if (me.anchorToTarget) {
|
|
me.defaultAlign = 'l-r';
|
|
if (me.mouseOffset) {
|
|
me.mouseOffset[0] *= -1;
|
|
}
|
|
}
|
|
me.anchor = 'left';
|
|
return me.getTargetXY();
|
|
}
|
|
if (axy[0] + sz.width > dw) {
|
|
if (me.anchorToTarget) {
|
|
me.defaultAlign = 'r-l';
|
|
if (me.mouseOffset) {
|
|
me.mouseOffset[0] *= -1;
|
|
}
|
|
}
|
|
me.anchor = 'right';
|
|
return me.getTargetXY();
|
|
}
|
|
if (axy[1] < scrollY) {
|
|
if (me.anchorToTarget) {
|
|
me.defaultAlign = 't-b';
|
|
if (me.mouseOffset) {
|
|
me.mouseOffset[1] *= -1;
|
|
}
|
|
}
|
|
me.anchor = 'top';
|
|
return me.getTargetXY();
|
|
}
|
|
if (axy[1] + sz.height > dh) {
|
|
if (me.anchorToTarget) {
|
|
me.defaultAlign = 'b-t';
|
|
if (me.mouseOffset) {
|
|
me.mouseOffset[1] *= -1;
|
|
}
|
|
}
|
|
me.anchor = 'bottom';
|
|
return me.getTargetXY();
|
|
}
|
|
}
|
|
|
|
me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();
|
|
me.anchorEl.addCls(me.anchorCls);
|
|
me.targetCounter = 0;
|
|
return axy;
|
|
} else {
|
|
mouseOffset = me.getMouseOffset();
|
|
return (me.targetXY) ? [me.targetXY[0] + mouseOffset[0], me.targetXY[1] + mouseOffset[1]] : mouseOffset;
|
|
}
|
|
},
|
|
|
|
getMouseOffset: function() {
|
|
var me = this,
|
|
offset = me.anchor ? [0, 0] : [15, 18];
|
|
if (me.mouseOffset) {
|
|
offset[0] += me.mouseOffset[0];
|
|
offset[1] += me.mouseOffset[1];
|
|
}
|
|
return offset;
|
|
},
|
|
|
|
// @private
|
|
getAnchorPosition: function() {
|
|
var me = this,
|
|
m;
|
|
if (me.anchor) {
|
|
me.tipAnchor = me.anchor.charAt(0);
|
|
} else {
|
|
m = me.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
|
|
me.tipAnchor = m[1].charAt(0);
|
|
}
|
|
|
|
switch (me.tipAnchor) {
|
|
case 't':
|
|
return 'top';
|
|
case 'b':
|
|
return 'bottom';
|
|
case 'r':
|
|
return 'right';
|
|
}
|
|
return 'left';
|
|
},
|
|
|
|
// @private
|
|
getAnchorAlign: function() {
|
|
switch (this.anchor) {
|
|
case 'top':
|
|
return 'tl-bl';
|
|
case 'left':
|
|
return 'tl-tr';
|
|
case 'right':
|
|
return 'tr-tl';
|
|
default:
|
|
return 'bl-tl';
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getOffsets: function() {
|
|
var me = this,
|
|
mouseOffset,
|
|
offsets,
|
|
ap = me.getAnchorPosition().charAt(0);
|
|
if (me.anchorToTarget && !me.trackMouse) {
|
|
switch (ap) {
|
|
case 't':
|
|
offsets = [0, 9];
|
|
break;
|
|
case 'b':
|
|
offsets = [0, -13];
|
|
break;
|
|
case 'r':
|
|
offsets = [ - 13, 0];
|
|
break;
|
|
default:
|
|
offsets = [9, 0];
|
|
break;
|
|
}
|
|
} else {
|
|
switch (ap) {
|
|
case 't':
|
|
offsets = [ - 15 - me.anchorOffset, 30];
|
|
break;
|
|
case 'b':
|
|
offsets = [ - 19 - me.anchorOffset, -13 - me.el.dom.offsetHeight];
|
|
break;
|
|
case 'r':
|
|
offsets = [ - 15 - me.el.dom.offsetWidth, -13 - me.anchorOffset];
|
|
break;
|
|
default:
|
|
offsets = [25, -13 - me.anchorOffset];
|
|
break;
|
|
}
|
|
}
|
|
mouseOffset = me.getMouseOffset();
|
|
offsets[0] += mouseOffset[0];
|
|
offsets[1] += mouseOffset[1];
|
|
|
|
return offsets;
|
|
},
|
|
|
|
// @private
|
|
onTargetOver: function(e) {
|
|
var me = this,
|
|
delegate = me.delegate,
|
|
t;
|
|
|
|
if (me.disabled || e.within(me.target.dom, true)) {
|
|
return;
|
|
}
|
|
t = delegate ? e.getTarget(delegate) : true;
|
|
if (t) {
|
|
me.triggerElement = t;
|
|
me.triggerEvent = e;
|
|
me.clearTimer('hide');
|
|
me.targetXY = e.getXY();
|
|
me.delayShow();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
delayShow: function() {
|
|
var me = this;
|
|
if (me.hidden && !me.showTimer) {
|
|
if (Ext.Date.getElapsed(me.lastActive) < me.quickShowInterval) {
|
|
me.show();
|
|
} else {
|
|
me.showTimer = Ext.defer(me.showFromDelay, me.showDelay, me);
|
|
}
|
|
}
|
|
else if (!me.hidden && me.autoHide !== false) {
|
|
me.show();
|
|
}
|
|
},
|
|
|
|
showFromDelay: function(){
|
|
this.fromDelayShow = true;
|
|
this.show();
|
|
delete this.fromDelayShow;
|
|
},
|
|
|
|
onShowVeto: function(){
|
|
this.callParent();
|
|
delete this.triggerElement;
|
|
this.clearTimer('show');
|
|
},
|
|
|
|
// @private
|
|
onTargetOut: function(e) {
|
|
var me = this,
|
|
triggerEl = me.triggerElement,
|
|
// If we don't have a delegate, then the target is set
|
|
// to true, so set it to the main target.
|
|
target = triggerEl === true ? me.target : triggerEl;
|
|
|
|
// If disabled, moving within the current target, ignore the mouseout
|
|
// EventObject.within is the only correct way to determine this.
|
|
if (me.disabled || !triggerEl || e.within(target, true)) {
|
|
return;
|
|
}
|
|
if (me.showTimer) {
|
|
me.clearTimer('show');
|
|
me.triggerElement = null;
|
|
}
|
|
if (me.autoHide !== false) {
|
|
me.delayHide();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
delayHide: function() {
|
|
var me = this;
|
|
if (!me.hidden && !me.hideTimer) {
|
|
me.hideTimer = Ext.defer(me.hide, me.hideDelay, me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides this tooltip if visible.
|
|
*/
|
|
hide: function() {
|
|
var me = this;
|
|
me.clearTimer('dismiss');
|
|
me.lastActive = new Date();
|
|
if (me.anchorEl) {
|
|
me.anchorEl.hide();
|
|
}
|
|
me.callParent(arguments);
|
|
delete me.triggerElement;
|
|
},
|
|
|
|
/**
|
|
* Shows this tooltip at the current event target XY position.
|
|
*/
|
|
show: function() {
|
|
var me = this;
|
|
|
|
// Show this Component first, so that sizing can be calculated
|
|
// pre-show it off screen so that the el will have dimensions
|
|
this.callParent();
|
|
if (this.hidden === false) {
|
|
me.setPagePosition(-10000, -10000);
|
|
|
|
if (me.anchor) {
|
|
me.anchor = me.origAnchor;
|
|
}
|
|
|
|
if (!me.calledFromShowAt) {
|
|
me.showAt(me.getTargetXY());
|
|
}
|
|
|
|
if (me.anchor) {
|
|
me.syncAnchor();
|
|
me.anchorEl.show();
|
|
} else {
|
|
me.anchorEl.hide();
|
|
}
|
|
}
|
|
},
|
|
|
|
// @inheritdoc
|
|
showAt: function(xy) {
|
|
var me = this;
|
|
me.lastActive = new Date();
|
|
me.clearTimers();
|
|
me.calledFromShowAt = true;
|
|
|
|
// Only call if this is hidden. May have been called from show above.
|
|
if (!me.isVisible()) {
|
|
this.callParent(arguments);
|
|
}
|
|
|
|
// Show may have been vetoed.
|
|
if (me.isVisible()) {
|
|
me.setPagePosition(xy[0], xy[1]);
|
|
if (me.constrainPosition || me.constrain) {
|
|
me.doConstrain();
|
|
}
|
|
me.toFront(true);
|
|
me.el.sync(true);
|
|
if (me.dismissDelay && me.autoHide !== false) {
|
|
me.dismissTimer = Ext.defer(me.hide, me.dismissDelay, me);
|
|
}
|
|
if (me.anchor) {
|
|
me.syncAnchor();
|
|
if (!me.anchorEl.isVisible()) {
|
|
me.anchorEl.show();
|
|
}
|
|
} else {
|
|
me.anchorEl.hide();
|
|
}
|
|
}
|
|
delete me.calledFromShowAt;
|
|
},
|
|
|
|
// @private
|
|
syncAnchor: function() {
|
|
var me = this,
|
|
anchorPos,
|
|
targetPos,
|
|
offset;
|
|
switch (me.tipAnchor.charAt(0)) {
|
|
case 't':
|
|
anchorPos = 'b';
|
|
targetPos = 'tl';
|
|
offset = [20 + me.anchorOffset, 1];
|
|
break;
|
|
case 'r':
|
|
anchorPos = 'l';
|
|
targetPos = 'tr';
|
|
offset = [ - 1, 12 + me.anchorOffset];
|
|
break;
|
|
case 'b':
|
|
anchorPos = 't';
|
|
targetPos = 'bl';
|
|
offset = [20 + me.anchorOffset, -1];
|
|
break;
|
|
default:
|
|
anchorPos = 'r';
|
|
targetPos = 'tl';
|
|
offset = [1, 12 + me.anchorOffset];
|
|
break;
|
|
}
|
|
me.anchorEl.alignTo(me.el, anchorPos + '-' + targetPos, offset);
|
|
me.anchorEl.setStyle('z-index', parseInt(me.el.getZIndex(), 10) || 0 + 1).setVisibilityMode(Ext.Element.DISPLAY);
|
|
},
|
|
|
|
// @private
|
|
setPagePosition: function(x, y) {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (me.anchor) {
|
|
me.syncAnchor();
|
|
}
|
|
},
|
|
|
|
_timerNames: {},
|
|
// @private
|
|
clearTimer: function (name) {
|
|
var me = this,
|
|
names = me._timerNames,
|
|
propName = names[name] || (names[name] = name + 'Timer'),
|
|
timer = me[propName];
|
|
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
me[propName] = null;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
clearTimers: function() {
|
|
var me = this;
|
|
me.clearTimer('show');
|
|
me.clearTimer('dismiss');
|
|
me.clearTimer('hide');
|
|
},
|
|
|
|
// @private
|
|
onShow: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
me.mon(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);
|
|
},
|
|
|
|
// @private
|
|
onHide: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
me.mun(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);
|
|
},
|
|
|
|
// @private
|
|
onDocMouseDown: function(e) {
|
|
var me = this;
|
|
if (!me.closable && !e.within(me.el.dom)) {
|
|
me.disable();
|
|
Ext.defer(me.doEnable, 100, me);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
doEnable: function() {
|
|
if (!this.isDestroyed) {
|
|
this.enable();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onDisable: function() {
|
|
this.callParent();
|
|
this.clearTimers();
|
|
this.hide();
|
|
},
|
|
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
me.clearTimers();
|
|
Ext.destroy(me.anchorEl);
|
|
delete me.anchorEl;
|
|
delete me.target;
|
|
delete me.anchorTarget;
|
|
delete me.triggerElement;
|
|
me.callParent();
|
|
},
|
|
|
|
// @private
|
|
onDestroy: function() {
|
|
Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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 documentation for
|
|
* additional usage details and examples.
|
|
*/
|
|
Ext.define('Ext.tip.QuickTip', {
|
|
extend: Ext.tip.ToolTip ,
|
|
alias: 'widget.quicktip',
|
|
alternateClassName: 'Ext.QuickTip',
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} target
|
|
* The target HTMLElement, {@link Ext.Element} or id to associate with this Quicktip.
|
|
*
|
|
* Defaults to the document.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} interceptTitles
|
|
* `true` to automatically use the element's DOM title value if available.
|
|
*/
|
|
interceptTitles : false,
|
|
|
|
// Force creation of header Component
|
|
title: ' ',
|
|
|
|
// @private
|
|
tagConfig : {
|
|
namespace : 'data-',
|
|
attribute : 'qtip',
|
|
width : 'qwidth',
|
|
target : 'target',
|
|
title : 'qtitle',
|
|
hide : 'hide',
|
|
cls : 'qclass',
|
|
align : 'qalign',
|
|
anchor : 'anchor',
|
|
showDelay: 'qshowDelay'
|
|
},
|
|
|
|
// @private
|
|
initComponent : function(){
|
|
var me = this;
|
|
|
|
me.target = me.target || Ext.getDoc();
|
|
me.targets = me.targets || {};
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* Configures a new quick tip instance and assigns it to a target element.
|
|
*
|
|
* For example usage, see the {@link Ext.tip.QuickTipManager} class header.
|
|
*
|
|
* @param {Object} config The config object with the following properties:
|
|
* @param config.autoHide
|
|
* @param config.cls
|
|
* @param config.dismissDelay overrides the singleton value
|
|
* @param config.target required
|
|
* @param config.text required
|
|
* @param config.title
|
|
* @param config.width
|
|
*/
|
|
register : function(config){
|
|
var configs = Ext.isArray(config) ? config : arguments,
|
|
i = 0,
|
|
len = configs.length,
|
|
target, j, targetLen;
|
|
|
|
for (; i < len; i++) {
|
|
config = configs[i];
|
|
target = config.target;
|
|
if (target) {
|
|
if (Ext.isArray(target)) {
|
|
for (j = 0, targetLen = target.length; j < targetLen; j++) {
|
|
this.targets[Ext.id(target[j])] = config;
|
|
}
|
|
} else{
|
|
this.targets[Ext.id(target)] = config;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes this quick tip from its element and destroys it.
|
|
* @param {String/HTMLElement/Ext.Element} el The element from which the quick tip
|
|
* is to be removed or ID of the element.
|
|
*/
|
|
unregister : function(el){
|
|
delete this.targets[Ext.id(el)];
|
|
},
|
|
|
|
/**
|
|
* Hides a visible tip or cancels an impending show for a particular element.
|
|
* @param {String/HTMLElement/Ext.Element} el The element that is the target of
|
|
* the tip or ID of the element.
|
|
*/
|
|
cancelShow: function(el){
|
|
var me = this,
|
|
activeTarget = me.activeTarget;
|
|
|
|
el = Ext.get(el).dom;
|
|
if (me.isVisible()) {
|
|
if (activeTarget && activeTarget.el == el) {
|
|
me.hide();
|
|
}
|
|
} else if (activeTarget && activeTarget.el == el) {
|
|
me.clearTimer('show');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Reads the tip text from the closest node to the event target which contains the
|
|
* attribute we are configured to look for. Returns an object containing the text
|
|
* from the attribute, and the target element from which the text was read.
|
|
*/
|
|
getTipCfg: function(e) {
|
|
var t = e.getTarget(),
|
|
titleText = t.title,
|
|
cfg;
|
|
|
|
if (this.interceptTitles && titleText && Ext.isString(titleText)) {
|
|
t.qtip = titleText;
|
|
t.removeAttribute("title");
|
|
e.preventDefault();
|
|
return {
|
|
text: titleText
|
|
};
|
|
}
|
|
else {
|
|
cfg = this.tagConfig;
|
|
t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
|
|
if (t) {
|
|
return {
|
|
target: t,
|
|
text: t.getAttribute(cfg.namespace + cfg.attribute)
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onTargetOver : function(e){
|
|
var me = this,
|
|
target = e.getTarget(me.delegate),
|
|
hasShowDelay,
|
|
delay,
|
|
elTarget,
|
|
cfg,
|
|
ns,
|
|
tipConfig,
|
|
autoHide,
|
|
targets, targetEl, value, key;
|
|
|
|
if (me.disabled) {
|
|
return;
|
|
}
|
|
|
|
// TODO - this causes "e" to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
|
|
// was changed to include freezeEvent. The issue seems to be a nested 'resize' event
|
|
// that smashed Ext.EventObject.
|
|
me.targetXY = e.getXY();
|
|
|
|
// If the over target was filtered out by the delegate selector, or is not an HTMLElement, or is the <html> or the <body>, then return
|
|
if(!target || target.nodeType !== 1 || target == document.documentElement || target == document.body){
|
|
return;
|
|
}
|
|
|
|
if (me.activeTarget && ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
|
|
// We may have started a delayed show where we have an active target.
|
|
// If the timer is yet to be fired, but the mouse moves, it will try to
|
|
// show it immediately. If the attribute has been removed from the element,
|
|
// we want to cancel the show.
|
|
if (me.targetTextEmpty()) {
|
|
me.onShowVeto();
|
|
delete me.activeTarget;
|
|
} else {
|
|
me.clearTimer('hide');
|
|
me.show();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (target) {
|
|
targets = me.targets;
|
|
|
|
for (key in targets) {
|
|
if (targets.hasOwnProperty(key)) {
|
|
value = targets[key];
|
|
|
|
targetEl = Ext.fly(value.target);
|
|
if (targetEl && (targetEl.dom === target || targetEl.contains(target))) {
|
|
elTarget = targetEl.dom;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (elTarget) {
|
|
me.activeTarget = me.targets[elTarget.id];
|
|
me.activeTarget.el = target;
|
|
me.anchor = me.activeTarget.anchor;
|
|
if (me.anchor) {
|
|
me.anchorTarget = target;
|
|
}
|
|
hasShowDelay = parseInt(me.activeTarget.showDelay, 10);
|
|
if (hasShowDelay) {
|
|
delay = me.showDelay;
|
|
me.showDelay = hasShowDelay;
|
|
}
|
|
me.delayShow();
|
|
if (hasShowDelay) {
|
|
me.showDelay = delay;
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Should be a fly.
|
|
elTarget = Ext.fly(target, '_quicktip-target');
|
|
cfg = me.tagConfig;
|
|
ns = cfg.namespace;
|
|
tipConfig = me.getTipCfg(e);
|
|
|
|
if (tipConfig) {
|
|
|
|
// getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
|
|
// Change our target element to match that from which the tip text attribute was read.
|
|
if (tipConfig.target) {
|
|
target = tipConfig.target;
|
|
elTarget = Ext.fly(target, '_quicktip-target');
|
|
}
|
|
autoHide = elTarget.getAttribute(ns + cfg.hide);
|
|
|
|
me.activeTarget = {
|
|
el: target,
|
|
text: tipConfig.text,
|
|
width: +elTarget.getAttribute(ns + cfg.width) || null,
|
|
autoHide: autoHide != "user" && autoHide !== 'false',
|
|
title: elTarget.getAttribute(ns + cfg.title),
|
|
cls: elTarget.getAttribute(ns + cfg.cls),
|
|
align: elTarget.getAttribute(ns + cfg.align),
|
|
showDelay: parseInt(elTarget.getAttribute(ns + cfg.showDelay), 10)
|
|
};
|
|
me.anchor = elTarget.getAttribute(ns + cfg.anchor);
|
|
if (me.anchor) {
|
|
me.anchorTarget = target;
|
|
}
|
|
hasShowDelay = parseInt(me.activeTarget.showDelay, 10);
|
|
if (hasShowDelay) {
|
|
delay = me.showDelay;
|
|
me.showDelay = hasShowDelay;
|
|
}
|
|
me.delayShow();
|
|
if (hasShowDelay) {
|
|
me.showDelay = delay;
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onTargetOut : function(e){
|
|
var me = this,
|
|
active = me.activeTarget,
|
|
hasHideDelay,
|
|
delay;
|
|
|
|
// If moving within the current target, and it does not have a new tip, ignore the mouseout
|
|
// EventObject.within is the only correct way to determine this.
|
|
if (active && e.within(me.activeTarget.el) && !me.getTipCfg(e)) {
|
|
return;
|
|
}
|
|
|
|
me.clearTimer('show');
|
|
delete me.activeTarget;
|
|
if (me.autoHide !== false) {
|
|
hasHideDelay = active && parseInt(active.hideDelay, 10);
|
|
if (hasHideDelay) {
|
|
delay = me.hideDelay;
|
|
me.hideDelay = hasHideDelay;
|
|
}
|
|
me.delayHide();
|
|
if (hasHideDelay) {
|
|
me.hideDelay = delay;
|
|
}
|
|
}
|
|
},
|
|
|
|
targetTextEmpty: function(){
|
|
var me = this,
|
|
target = me.activeTarget,
|
|
cfg = me.tagConfig,
|
|
el, text;
|
|
|
|
if (target) {
|
|
el = target.el;
|
|
if (el) {
|
|
text = el.getAttribute(cfg.namespace + cfg.attribute);
|
|
// Note that the quicktip could also have been registered with the QuickTipManager.
|
|
// If this was the case, then we don't want to veto showing it.
|
|
// Simply do a lookup in the registered targets collection.
|
|
if (!text && !me.targets[target.target]) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
show: function(){
|
|
var me = this,
|
|
fromDelay = me.fromDelayShow;
|
|
|
|
// We're coming from a delayed show, so check whether
|
|
// the attribute has been removed before we show it
|
|
if (fromDelay && me.targetTextEmpty()) {
|
|
me.onShowVeto();
|
|
delete me.activeTarget;
|
|
return;
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// @inheritdoc
|
|
showAt : function(xy){
|
|
var me = this,
|
|
target = me.activeTarget,
|
|
header = me.header,
|
|
cls;
|
|
|
|
if (target) {
|
|
if (!me.rendered) {
|
|
me.render(Ext.getBody());
|
|
me.activeTarget = target;
|
|
}
|
|
me.suspendLayouts();
|
|
if (target.title) {
|
|
me.setTitle(target.title);
|
|
header.show();
|
|
} else if (header) {
|
|
header.hide();
|
|
}
|
|
me.update(target.text);
|
|
me.autoHide = target.autoHide;
|
|
me.dismissDelay = target.dismissDelay || me.dismissDelay;
|
|
if (target.mouseOffset) {
|
|
xy[0] += target.mouseOffset[0];
|
|
xy[1] += target.mouseOffset[1];
|
|
}
|
|
|
|
cls = me.lastCls;
|
|
if (cls) {
|
|
me.removeCls(cls);
|
|
delete me.lastCls;
|
|
}
|
|
|
|
cls = target.cls;
|
|
if (cls) {
|
|
me.addCls(cls);
|
|
me.lastCls = cls;
|
|
}
|
|
|
|
me.setWidth(target.width);
|
|
|
|
if (me.anchor) {
|
|
me.constrainPosition = false;
|
|
} else if (target.align) { // TODO: this doesn't seem to work consistently
|
|
xy = me.getAlignToXY(target.el, target.align);
|
|
me.constrainPosition = false;
|
|
}else{
|
|
me.constrainPosition = true;
|
|
}
|
|
me.resumeLayouts(true);
|
|
}
|
|
me.callParent([xy]);
|
|
},
|
|
|
|
// @inheritdoc
|
|
hide: function(){
|
|
delete this.activeTarget;
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides attractive and customizable tooltips for any element. The QuickTips
|
|
* singleton is used to configure and manage tooltips globally for multiple elements
|
|
* in a generic manner. To create individual tooltips with maximum customizability,
|
|
* you should consider either {@link Ext.tip.Tip} or {@link Ext.tip.ToolTip}.
|
|
*
|
|
* Quicktips can be configured via tag attributes directly in markup, or by
|
|
* registering quick tips programmatically via the {@link #register} method.
|
|
*
|
|
* The singleton's instance of {@link Ext.tip.QuickTip} is available via
|
|
* {@link #getQuickTip}, and supports all the methods, and all the all the
|
|
* configuration properties of Ext.tip.QuickTip. These settings will apply to all
|
|
* tooltips shown by the singleton.
|
|
*
|
|
* Below is the summary of the configuration properties which can be used.
|
|
* For detailed descriptions see the config options for the
|
|
* {@link Ext.tip.QuickTip QuickTip} class
|
|
*
|
|
* ## QuickTips singleton configs (all are optional)
|
|
*
|
|
* - `dismissDelay`
|
|
* - `hideDelay`
|
|
* - `maxWidth`
|
|
* - `minWidth`
|
|
* - `showDelay`
|
|
* - `trackMouse`
|
|
*
|
|
* ## Target element configs (optional unless otherwise noted)
|
|
*
|
|
* - `autoHide`
|
|
* - `cls`
|
|
* - `dismissDelay` (overrides singleton value)
|
|
* - `target` (required)
|
|
* - `text` (required)
|
|
* - `title`
|
|
* - `width`
|
|
*
|
|
* Here is an example showing how some of these config options could be used:
|
|
*
|
|
* @example
|
|
* // Init the singleton. Any tag-based quick tips will start working.
|
|
* Ext.tip.QuickTipManager.init();
|
|
*
|
|
* // Apply a set of config properties to the singleton
|
|
* Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
|
|
* maxWidth: 200,
|
|
* minWidth: 100,
|
|
* showDelay: 50 // Show 50ms after entering target
|
|
* });
|
|
*
|
|
* // Create a small panel to add a quick tip to
|
|
* Ext.create('Ext.container.Container', {
|
|
* id: 'quickTipContainer',
|
|
* width: 200,
|
|
* height: 150,
|
|
* style: {
|
|
* backgroundColor:'#000000'
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
*
|
|
* // Manually register a quick tip for a specific element
|
|
* Ext.tip.QuickTipManager.register({
|
|
* target: 'quickTipContainer',
|
|
* title: 'My Tooltip',
|
|
* text: 'This tooltip was added in code',
|
|
* width: 100,
|
|
* dismissDelay: 10000 // Hide after 10 seconds hover
|
|
* });
|
|
*
|
|
* To register a quick tip in markup, you simply add one or more of the valid QuickTip
|
|
* attributes prefixed with the **data-** namespace. The HTML element itself is
|
|
* automatically set as the quick tip target. Here is the summary of supported attributes
|
|
* (optional unless otherwise noted):
|
|
*
|
|
* - `hide`: Specifying "user" is equivalent to setting autoHide = false.
|
|
* Any other value will be the same as autoHide = true.
|
|
* - `qclass`: A CSS class to be applied to the quick tip
|
|
* (equivalent to the 'cls' target element config).
|
|
* - `qtip (required)`: The quick tip text (equivalent to the 'text' target element config).
|
|
* - `qtitle`: The quick tip title (equivalent to the 'title' target element config).
|
|
* - `qwidth`: The quick tip width (equivalent to the 'width' target element config).
|
|
*
|
|
* Here is an example of configuring an HTML element to display a tooltip from markup:
|
|
*
|
|
* // Add a quick tip to an HTML button
|
|
* <input type="button" value="OK" data-qtitle="OK Button" data-qwidth="100"
|
|
* data-qtip="This is a quick tip from markup!"></input>
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.define('Ext.tip.QuickTipManager', {
|
|
|
|
singleton: true,
|
|
alternateClassName: 'Ext.QuickTips',
|
|
disabled: false,
|
|
|
|
/**
|
|
* Initializes the global QuickTips instance and prepare any quick tips.
|
|
* @param {Boolean} [autoRender=true] True to render the QuickTips container
|
|
* immediately to preload images.
|
|
* @param {Object} [config] config object for the created QuickTip. By
|
|
* default, the {@link Ext.tip.QuickTip QuickTip} class is instantiated, but this can
|
|
* be changed by supplying an xtype property or a className property in this object.
|
|
* All other properties on this object are configuration for the created component.
|
|
*/
|
|
init : function (autoRender, config) {
|
|
var me = this;
|
|
|
|
if (!me.tip) {
|
|
if (!Ext.isReady) {
|
|
Ext.onReady(function(){
|
|
Ext.tip.QuickTipManager.init(autoRender, config);
|
|
});
|
|
return;
|
|
}
|
|
|
|
var tipConfig = Ext.apply({ disabled: me.disabled, id: 'ext-quicktips-tip' }, config),
|
|
className = tipConfig.className,
|
|
xtype = tipConfig.xtype;
|
|
|
|
if (className) {
|
|
delete tipConfig.className;
|
|
} else if (xtype) {
|
|
className = 'widget.' + xtype;
|
|
delete tipConfig.xtype;
|
|
}
|
|
|
|
if (autoRender !== false) {
|
|
tipConfig.renderTo = document.body;
|
|
|
|
}
|
|
|
|
me.tip = Ext.create(className || 'Ext.tip.QuickTip', tipConfig);
|
|
|
|
// private.
|
|
// Need a globally accessble way of testing whether QuickTipsManager is both loaded AND initialized.
|
|
Ext.quickTipsActive = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Destroys the QuickTips instance.
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.tip);
|
|
this.tip = undefined;
|
|
},
|
|
|
|
// Protected method called by the dd classes
|
|
ddDisable : function() {
|
|
var me = this,
|
|
tip = me.tip;
|
|
|
|
// don't disable it if we don't need to
|
|
if (tip && !me.disabled) {
|
|
tip.disable();
|
|
}
|
|
},
|
|
|
|
// Protected method called by the dd classes
|
|
ddEnable : function() {
|
|
var me = this,
|
|
tip = me.tip;
|
|
|
|
// only enable it if it hasn't been disabled
|
|
if (tip && !me.disabled) {
|
|
tip.enable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Enables quick tips globally.
|
|
*/
|
|
enable : function(){
|
|
var me = this,
|
|
tip = me.tip;
|
|
|
|
if (tip) {
|
|
tip.enable();
|
|
}
|
|
me.disabled = false;
|
|
},
|
|
|
|
/**
|
|
* Disables quick tips globally.
|
|
*/
|
|
disable : function(){
|
|
var me = this,
|
|
tip = me.tip;
|
|
|
|
if(tip){
|
|
tip.disable();
|
|
}
|
|
me.disabled = true;
|
|
},
|
|
|
|
/**
|
|
* Returns true if quick tips are enabled, else false.
|
|
* @return {Boolean}
|
|
*/
|
|
isEnabled : function(){
|
|
var tip = this.tip;
|
|
|
|
return tip !== undefined && !tip.disabled;
|
|
},
|
|
|
|
/**
|
|
* Gets the single {@link Ext.tip.QuickTip QuickTip} instance used to show tips
|
|
* from all registered elements.
|
|
* @return {Ext.tip.QuickTip}
|
|
*/
|
|
getQuickTip : function(){
|
|
return this.tip;
|
|
},
|
|
|
|
/**
|
|
* Configures a new quick tip instance and assigns it to a target element. See
|
|
* {@link Ext.tip.QuickTip#register} for details.
|
|
* @param {Object} config The config object
|
|
*/
|
|
register : function(){
|
|
var tip = this.tip;
|
|
|
|
tip.register.apply(tip, arguments);
|
|
},
|
|
|
|
/**
|
|
* Removes any registered quick tip from the target element and destroys it.
|
|
* @param {String/HTMLElement/Ext.Element} el The element from which the quick tip
|
|
* is to be removed or ID of the element.
|
|
*/
|
|
unregister : function(){
|
|
var tip = this.tip;
|
|
|
|
tip.unregister.apply(tip, arguments);
|
|
},
|
|
|
|
/**
|
|
* Alias of {@link #register}.
|
|
* @inheritdoc Ext.tip.QuickTipManager#register
|
|
*/
|
|
tips : function(){
|
|
var tip = this.tip;
|
|
|
|
tip.register.apply(tip, arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Represents an Ext JS 4 application, which is typically a single page app using a {@link Ext.container.Viewport Viewport}.
|
|
* A typical Ext.app.Application might look like this:
|
|
*
|
|
* Ext.application({
|
|
* name: 'MyApp',
|
|
* launch: function() {
|
|
* Ext.create('Ext.container.Viewport', {
|
|
* items: {
|
|
* html: 'My App'
|
|
* }
|
|
* });
|
|
* }
|
|
* });
|
|
*
|
|
* This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such
|
|
* as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances
|
|
* of colliding global variables. The MyApp global will also have a getApplication method to get a reference to
|
|
* the current application:
|
|
*
|
|
* var app = MyApp.getApplication();
|
|
*
|
|
* When the page is ready and all of your JavaScript has loaded, your Application's {@link #launch} function is called,
|
|
* at which time you can run the code that starts your app. Usually this consists of creating a Viewport, as we do in
|
|
* the example above.
|
|
*
|
|
* # Telling Application about the rest of the app
|
|
*
|
|
* Because an Ext.app.Application represents an entire app, we should tell it about the other parts of the app - namely
|
|
* the Models, Views and Controllers that are bundled with the application. Let's say we have a blog management app; we
|
|
* might have Models and Controllers for Posts and Comments, and Views for listing, adding and editing Posts and Comments.
|
|
* Here's how we'd tell our Application about all these things:
|
|
*
|
|
* Ext.application({
|
|
* name: 'Blog',
|
|
* models: ['Post', 'Comment'],
|
|
* controllers: ['Posts', 'Comments'],
|
|
*
|
|
* launch: function() {
|
|
* ...
|
|
* }
|
|
* });
|
|
*
|
|
* Note that we didn't actually list the Views directly in the Application itself. This is because Views are managed by
|
|
* Controllers, so it makes sense to keep those dependencies there. The Application will load each of the specified
|
|
* Controllers using the pathing conventions laid out in the [application architecture guide][mvc] - in this case
|
|
* expecting the controllers to reside in app/controller/Posts.js and app/controller/Comments.js. In turn, each
|
|
* Controller simply needs to list the Views it uses and they will be automatically loaded. Here's how our Posts
|
|
* controller like be defined:
|
|
*
|
|
* Ext.define('MyApp.controller.Posts', {
|
|
* extend: 'Ext.app.Controller',
|
|
* views: ['posts.List', 'posts.Edit'],
|
|
*
|
|
* //the rest of the Controller here
|
|
* });
|
|
*
|
|
* Because we told our Application about our Models and Controllers, and our Controllers about their Views, Ext JS will
|
|
* automatically load all of our app files for us. This means we don't have to manually add script tags into our html
|
|
* files whenever we add a new class, but more importantly it enables us to create a minimized build of our entire
|
|
* application using Sencha Cmd.
|
|
*
|
|
* # Deriving from Ext.app.Application
|
|
*
|
|
* Typically, applications do not derive directly from Ext.app.Application. Rather, the
|
|
* configuration passed to `Ext.application` mimics what you might do in a derived class.
|
|
* In some cases, however, it can be desirable to share logic by using a derived class
|
|
* from `Ext.app.Application`.
|
|
*
|
|
* Derivation works as you would expect, but using the derived class should still be the
|
|
* job of the `Ext.application` method.
|
|
*
|
|
* Ext.define('MyApp.app.Application', {
|
|
* extend: 'Ext.app.Application',
|
|
* name: 'MyApp',
|
|
* ...
|
|
* });
|
|
*
|
|
* Ext.application('MyApp.app.Application');
|
|
*
|
|
* For more information about writing Ext JS 4 applications, please see the [application architecture guide][mvc].
|
|
*
|
|
* [mvc]: #/guide/application_architecture
|
|
*
|
|
* @docauthor Ed Spencer
|
|
*/
|
|
Ext.define('Ext.app.Application', {
|
|
extend: Ext.app.Controller ,
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {String} name
|
|
* The name of your application. This will also be the namespace for your views, controllers
|
|
* models and stores. Don't use spaces or special characters in the name. **Application name
|
|
* is mandatory**.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/String[]} controllers
|
|
* Names of controllers that the app uses.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope to execute the {@link #launch} function in. Defaults to the Application instance.
|
|
*/
|
|
scope: undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableQuickTips
|
|
* True to automatically set up Ext.tip.QuickTip support.
|
|
*/
|
|
enableQuickTips: true,
|
|
|
|
/**
|
|
* @cfg {String} appFolder
|
|
* The path to the directory which contains all application's classes.
|
|
* This path will be registered via {@link Ext.Loader#setPath} for the namespace specified
|
|
* in the {@link #name name} config.
|
|
*/
|
|
appFolder: 'app',
|
|
// NOTE - this config has to be processed by Ext.application
|
|
|
|
/**
|
|
* @cfg {String} appProperty
|
|
* The name of a property to be assigned to the main namespace to gain a reference to
|
|
* this application. Can be set to an empty value to prevent the reference from
|
|
* being created
|
|
*
|
|
* Ext.application({
|
|
* name: 'MyApp',
|
|
* appProperty: 'myProp',
|
|
*
|
|
* launch: function() {
|
|
* console.log(MyApp.myProp === this);
|
|
* }
|
|
* });
|
|
*/
|
|
appProperty: 'app',
|
|
|
|
/**
|
|
* @cfg {String/String[]} [namespaces]
|
|
*
|
|
* The list of namespace prefixes used in the application to resolve dependencies
|
|
* like Views and Stores:
|
|
*
|
|
* Ext.application({
|
|
* name: 'MyApp',
|
|
*
|
|
* namespaces: ['Common.code'],
|
|
*
|
|
* controllers: [ 'Common.code.controller.Foo', 'Bar' ]
|
|
* });
|
|
*
|
|
* Ext.define('Common.code.controller.Foo', {
|
|
* extend: 'Ext.app.Controller',
|
|
*
|
|
* models: ['Foo'], // Loads Common.code.model.Foo
|
|
* views: ['Bar'] // Loads Common.code.view.Bar
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.controller.Bar', {
|
|
* extend: 'Ext.app.Controller',
|
|
*
|
|
* models: ['Foo'], // Loads MyApp.model.Foo
|
|
* views: ['Bar'] // Loads MyApp.view.Bar
|
|
* });
|
|
*
|
|
* You don't need to include main namespace (MyApp), it will be added to the list
|
|
* automatically.
|
|
*/
|
|
namespaces: [],
|
|
|
|
/**
|
|
* @cfg {Boolean} [autoCreateViewport=false]
|
|
* True to automatically load and instantiate AppName.view.Viewport before firing the launch
|
|
* function.
|
|
*/
|
|
autoCreateViewport: false,
|
|
|
|
/**
|
|
* @cfg {Object} paths
|
|
* Additional load paths to add to Ext.Loader.
|
|
* See {@link Ext.Loader#paths} config for more details.
|
|
*/
|
|
paths: null,
|
|
|
|
onClassExtended: function(cls, data, hooks) {
|
|
var Controller = Ext.app.Controller,
|
|
proto = cls.prototype,
|
|
requires = [],
|
|
onBeforeClassCreated, paths, namespace, ns, appFolder;
|
|
|
|
// Ordinary inheritance does not work here so we collect
|
|
// necessary data from current class data and its superclass
|
|
namespace = data.name || cls.superclass.name;
|
|
appFolder = data.appFolder || cls.superclass.appFolder;
|
|
|
|
if (namespace) {
|
|
data.$namespace = namespace;
|
|
Ext.app.addNamespaces(namespace);
|
|
}
|
|
|
|
if (data.namespaces) {
|
|
Ext.app.addNamespaces(data.namespaces);
|
|
}
|
|
|
|
if (!data['paths processed']) {
|
|
if (namespace && appFolder) {
|
|
Ext.Loader.setPath(namespace, appFolder);
|
|
}
|
|
|
|
paths = data.paths;
|
|
|
|
if (paths) {
|
|
for (ns in paths) {
|
|
if (paths.hasOwnProperty(ns)) {
|
|
Ext.Loader.setPath(ns, paths[ns]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
delete data['paths processed'];
|
|
}
|
|
|
|
if (data.autoCreateViewport) {
|
|
|
|
Controller.processDependencies(proto, requires, namespace, 'view', ['Viewport']);
|
|
}
|
|
|
|
// Any "requires" also have to be processed before we fire up the App instance.
|
|
if (requires.length) {
|
|
onBeforeClassCreated = hooks.onBeforeCreated;
|
|
|
|
hooks.onBeforeCreated = function(cls, data) {
|
|
var args = Ext.Array.clone(arguments);
|
|
|
|
Ext.require(requires, function () {
|
|
return onBeforeClassCreated.apply(this, args);
|
|
});
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates new Application.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.doInit(me);
|
|
|
|
me.initNamespace();
|
|
me.initControllers();
|
|
me.onBeforeLaunch();
|
|
|
|
me.finishInitControllers();
|
|
},
|
|
|
|
initNamespace: function() {
|
|
var me = this,
|
|
appProperty = me.appProperty,
|
|
ns;
|
|
|
|
ns = Ext.namespace(me.name);
|
|
|
|
if (ns) {
|
|
ns.getApplication = function() {
|
|
return me;
|
|
};
|
|
|
|
if (appProperty) {
|
|
if (!ns[appProperty]) {
|
|
ns[appProperty] = me;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
initControllers: function() {
|
|
var me = this,
|
|
controllers = Ext.Array.from(me.controllers);
|
|
|
|
me.controllers = new Ext.util.MixedCollection();
|
|
|
|
for (var i = 0, ln = controllers.length; i < ln; i++) {
|
|
me.getController(controllers[i]);
|
|
}
|
|
},
|
|
|
|
finishInitControllers: function() {
|
|
var me = this,
|
|
controllers, i, l;
|
|
|
|
controllers = me.controllers.getRange();
|
|
|
|
for (i = 0, l = controllers.length; i < l; i++) {
|
|
controllers[i].finishInit(me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @method
|
|
* @template
|
|
* Called automatically when the page has completely loaded. This is an empty function that should be
|
|
* overridden by each application that needs to take action on page load.
|
|
* @param {String} profile The detected application profile
|
|
* @return {Boolean} By default, the Application will dispatch to the configured startup controller and
|
|
* action immediately after running the launch function. Return false to prevent this behavior.
|
|
*/
|
|
launch: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onBeforeLaunch: function() {
|
|
var me = this,
|
|
controllers, c, cLen, controller;
|
|
|
|
if (me.enableQuickTips) {
|
|
me.initQuickTips();
|
|
}
|
|
|
|
if (me.autoCreateViewport) {
|
|
me.initViewport();
|
|
}
|
|
|
|
me.launch.call(me.scope || me);
|
|
me.launched = true;
|
|
me.fireEvent('launch', me);
|
|
|
|
controllers = me.controllers.items;
|
|
cLen = controllers.length;
|
|
|
|
for (c = 0; c < cLen; c++) {
|
|
controller = controllers[c];
|
|
controller.onLaunch(me);
|
|
}
|
|
},
|
|
|
|
getModuleClassName: function(name, kind) {
|
|
return Ext.app.Controller.getFullName(name, kind, this.name).absoluteName;
|
|
},
|
|
|
|
initQuickTips: function() {
|
|
Ext.tip.QuickTipManager.init();
|
|
},
|
|
|
|
initViewport: function() {
|
|
var viewport = this.getView('Viewport');
|
|
|
|
if (viewport) {
|
|
viewport.create();
|
|
}
|
|
},
|
|
|
|
getController: function(name) {
|
|
var me = this,
|
|
controllers = me.controllers,
|
|
className, controller;
|
|
|
|
controller = controllers.get(name);
|
|
|
|
if (!controller) {
|
|
className = me.getModuleClassName(name, 'controller');
|
|
|
|
controller = Ext.create(className, {
|
|
application: me,
|
|
id: name
|
|
});
|
|
|
|
controllers.add(controller);
|
|
|
|
if (me._initialized) {
|
|
controller.doInit(me);
|
|
}
|
|
}
|
|
|
|
return controller;
|
|
},
|
|
|
|
getApplication: function() {
|
|
return this;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.tip.QuickTipManager', {
|
|
override: 'Ext.tip.QuickTipManager',
|
|
|
|
init: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.tip.on('beforeshow', me.onBeforeFirstShow, me, { single: true });
|
|
},
|
|
|
|
onBeforeFirstShow: function(tip) {
|
|
// The rtl override for AbstractComponent reads the DOM for floating components to
|
|
// determine if their local coordinate system is RTL and caches the value. If
|
|
// QuickTipManager.init() is called before the Viewport has been rendered then the
|
|
// cached value may be incorrect. Clear the cached value so that the next call to
|
|
// isLocalRtl() will read the DOM again.
|
|
tip._isOffsetParentRtl = undefined;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.panel.Panel', {
|
|
override: 'Ext.panel.Panel',
|
|
|
|
rtlCollapseDirs: {
|
|
top: 'top',
|
|
right: 'left',
|
|
bottom: 'bottom',
|
|
left: 'right'
|
|
},
|
|
|
|
convertCollapseDir: function(collapseDir) {
|
|
if (!!Ext.rootHierarchyState.rtl !== this.isLocalRtl()) {
|
|
collapseDir = this.rtlCollapseDirs[collapseDir];
|
|
}
|
|
return this.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.dd.DD', {
|
|
override: 'Ext.dd.DD',
|
|
|
|
// used be alignElWithMouse to get the local x coordinate adjusted for rtl mode if
|
|
// the page-level coordinate system is rtl.
|
|
getLocalX: function(el) {
|
|
return Ext.rootHierarchyState.rtl ? el.rtlGetLocalX() : el.getLocalX();
|
|
},
|
|
|
|
// setLocalXY is used by alignElWithMouse to avoid the overhead that would be incurred
|
|
// by using setXY to calculate left/right/top styles from page coordinates. Since the
|
|
// coordinates that go into the calculation are page-level, we need to use rtl local
|
|
// coordinates if the page-level coordinate system is rtl.
|
|
setLocalXY: function(el, x, y) {
|
|
Ext.rootHierarchyState.rtl ? el.rtlSetLocalXY(x, y) : el.setLocalXY(x, y);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.panel.Header', {
|
|
override: 'Ext.panel.Header',
|
|
|
|
rtlPositions: {
|
|
top: 'top',
|
|
right: 'left',
|
|
bottom: 'bottom',
|
|
left: 'right'
|
|
},
|
|
|
|
adjustTitlePosition: function() {
|
|
var titleCmp = this.titleCmp,
|
|
titleEl, width;
|
|
|
|
if (!Ext.isIE9m && titleCmp) { // some Headers don't have a titleCmp, e.g. TabBar
|
|
// in browsers that use css3 transform to rotate text we have to
|
|
// adjust the element's position after rotating. See comment in overridden
|
|
// method for details.
|
|
titleEl = titleCmp.el;
|
|
width = titleEl.getWidth();
|
|
if (this.isParentRtl()) {
|
|
// in rtl mode we rotate 270 instead of 90 degrees with a transform
|
|
// origin of the top right corner so moving the element right by the
|
|
// same number of pixels as its width results in the correct positioning.
|
|
titleEl.setStyle('right', width + 'px');
|
|
} else if (!Ext.isIE9m) {
|
|
titleEl.setStyle('left', width + 'px');
|
|
}
|
|
}
|
|
},
|
|
|
|
onTitleRender: function() {
|
|
if (this.orientation === 'vertical') {
|
|
this.titleCmp.el.setVertical(this.isParentRtl() ? 270 : 90);
|
|
}
|
|
},
|
|
|
|
getDockName: function() {
|
|
var me = this,
|
|
dock = me.dock;
|
|
|
|
return me.isParentRtl() ? me.rtlPositions[dock] : dock
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @override Ext.rtl.layout.component.Dock
|
|
* This override adds RTL support to Ext.layout.component.Dock.
|
|
*/
|
|
Ext.define('Ext.rtl.layout.component.Dock', {
|
|
override: 'Ext.layout.component.Dock',
|
|
|
|
rtlPositions: {
|
|
top: 'top',
|
|
right: 'left',
|
|
bottom: 'bottom',
|
|
left: 'right'
|
|
},
|
|
|
|
getDockCls: function(dock) {
|
|
// When in RTL mode it is necessary to reverse "left" and "right" css class names.
|
|
// We have to do it this way (as opposed to using css overrides) because of the
|
|
// !important border-width rules, e.g.:
|
|
// .x-docked-left { border-right-width: 0 !important; }
|
|
return 'docked-' +
|
|
(this.owner.getHierarchyState().rtl ? this.rtlPositions[dock] : dock);
|
|
},
|
|
|
|
// Neptune + RTL :)
|
|
|
|
getBorderClassTable: function () {
|
|
var me = this;
|
|
|
|
if (!me.borderTablesInited) {
|
|
me.initBorderTables();
|
|
}
|
|
|
|
return me.owner.getHierarchyState().rtl ? me.noBorderClassTableRtl
|
|
: me.noBorderClassTableLtr;
|
|
},
|
|
|
|
getBorderCollapseTable: function () {
|
|
var me = this,
|
|
table = me.callParent();
|
|
|
|
if (!table.rtl) {
|
|
me.setupBorderTable(table, table.rtl = []);
|
|
}
|
|
|
|
return me.owner.getHierarchyState().rtl ? table.rtl : table;
|
|
},
|
|
|
|
initBorderTables: function () {
|
|
var me = Ext.layout.component.Dock.prototype,
|
|
ltr = me.noBorderClassTable,
|
|
rtl = [];
|
|
|
|
me.setupBorderTable(ltr, rtl);
|
|
|
|
me.noBorderClassTableLtr = ltr;
|
|
me.noBorderClassTableRtl = rtl;
|
|
|
|
me.borderTablesInited = true;
|
|
},
|
|
|
|
setupBorderTable: function (ltr, rtl) {
|
|
// TRBL
|
|
rtl[0] = ltr[0]; // 0000
|
|
rtl[1] = ltr[4]; // 0001 = 1 ==> 0100 = 4
|
|
rtl[2] = ltr[2]; // 0010 = 2 ==> same
|
|
rtl[3] = ltr[6]; // 0011 = 3 ==> 0110 = 6
|
|
rtl[4] = ltr[1]; // 0100 = 4 ==> 0001 = 1
|
|
rtl[5] = ltr[5]; // 0101 = 5 ==> same
|
|
rtl[6] = ltr[3]; // 0110 = 6 ==> 0011 = 3
|
|
rtl[7] = ltr[7]; // 0111 = 7 ==> same
|
|
rtl[8] = ltr[8]; // 1000 = 8 ==> same
|
|
rtl[9] = ltr[12]; // 1001 = 9 ==> 1100 = 12
|
|
rtl[10] = ltr[10]; // 1010 = 10 ==> same
|
|
rtl[11] = ltr[14]; // 1011 = 11 ==> 1110 = 14
|
|
rtl[12] = ltr[9]; // 1100 = 12 ==> 1001 = 9
|
|
rtl[13] = ltr[13]; // 1101 = 13 ==> same
|
|
rtl[14] = ltr[11]; // 1110 = 14 ==> 1011 = 11
|
|
rtl[15] = ltr[15]; // 1111 = 15 ==> same
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.VBox', {
|
|
override: 'Ext.layout.container.VBox',
|
|
|
|
rtlNames: {
|
|
beforeY: 'right',
|
|
afterY: 'left',
|
|
scrollTo: 'rtlScrollTo'
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.HBox', {
|
|
override: 'Ext.layout.container.HBox',
|
|
|
|
rtlNames: {
|
|
beforeX: 'right',
|
|
afterX: 'left',
|
|
getScrollLeft: 'rtlGetScrollLeft',
|
|
setScrollLeft: 'rtlSetScrollLeft',
|
|
scrollTo: 'rtlScrollTo',
|
|
beforeScrollerSuffix: '-after-scroller',
|
|
afterScrollerSuffix: '-before-scroller'
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.Box', {
|
|
override: 'Ext.layout.container.Box',
|
|
|
|
initLayout: function() {
|
|
var me = this;
|
|
|
|
if (me.owner.getHierarchyState().rtl) {
|
|
me.names = Ext.Object.chain(me.names);
|
|
Ext.apply(me.names, me.rtlNames);
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
getRenderData: function () {
|
|
var renderData = this.callParent();
|
|
|
|
if (this.owner.getHierarchyState().rtl) {
|
|
renderData.targetElCls =
|
|
(renderData.targetElCls || '') + ' ' + Ext.baseCSSPrefix + 'rtl';
|
|
}
|
|
|
|
return renderData;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.boxOverflow.Scroller', {
|
|
override: 'Ext.layout.container.boxOverflow.Scroller',
|
|
|
|
getWheelDelta: function(e) {
|
|
var layout = this.layout,
|
|
delta = e.getWheelDelta();
|
|
|
|
if (layout.direction === 'horizontal' && layout.owner.getHierarchyState().rtl) {
|
|
delta = -delta;
|
|
}
|
|
|
|
return delta;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.boxOverflow.Menu', {
|
|
override: 'Ext.layout.container.boxOverflow.Menu',
|
|
|
|
getSuffixConfig: function(isFromRTL) {
|
|
if (isFromRTL) {
|
|
return this.callParent();
|
|
} else {
|
|
return this.getPrefixConfig(true);
|
|
}
|
|
},
|
|
|
|
getPrefixConfig: function(isFromRTL) {
|
|
if (isFromRTL) {
|
|
return this.callParent();
|
|
} else {
|
|
return this.getSuffixConfig(true);
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.button.Button', {
|
|
override: 'Ext.button.Button',
|
|
|
|
getBtnWrapFrameWidth: function(side) {
|
|
if (this.getHierarchyState().rtl && side === 'r') {
|
|
side = 'l';
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
getTriggerRegion: function() {
|
|
var me = this,
|
|
region = me._triggerRegion;
|
|
|
|
if (!Ext.rootHierarchyState.rtl !== !this.getHierarchyState().rtl
|
|
&& me.arrowAlign === 'right') {
|
|
region.begin = 0;
|
|
region.end = me.getTriggerSize();
|
|
} else {
|
|
region = me.callParent();
|
|
}
|
|
|
|
return region;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class implements the controller event domain. All classes extending from
|
|
* {@link Ext.app.Controller} are included in this domain. The selectors are simply id's or the
|
|
* wildcard "*" to match any controller.
|
|
*
|
|
* @protected
|
|
*/
|
|
Ext.define('Ext.app.domain.Controller', {
|
|
extend: Ext.app.EventDomain ,
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
type: 'controller',
|
|
idProperty: 'id',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
me.monitor(Ext.app.Controller);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Ext.direct.Provider is an abstract class meant to be extended.
|
|
*
|
|
* For example Ext JS implements the following subclasses:
|
|
*
|
|
* Provider
|
|
* |
|
|
* +---{@link Ext.direct.JsonProvider JsonProvider}
|
|
* |
|
|
* +---{@link Ext.direct.PollingProvider PollingProvider}
|
|
* |
|
|
* +---{@link Ext.direct.RemotingProvider RemotingProvider}
|
|
*
|
|
* @abstract
|
|
*/
|
|
Ext.define('Ext.direct.Provider', {
|
|
alias: 'direct.provider',
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
isProvider: true,
|
|
|
|
/**
|
|
* @cfg {String} id
|
|
* The unique id of the provider (defaults to an {@link Ext#id auto-assigned id}).
|
|
* You should assign an id if you need to be able to access the provider later and you do
|
|
* not have an object reference available, for example:
|
|
*
|
|
* Ext.direct.Manager.addProvider({
|
|
* type: 'polling',
|
|
* url: 'php/poll.php',
|
|
* id: 'poll-provider'
|
|
* });
|
|
* var p = {@link Ext.direct.Manager}.{@link Ext.direct.Manager#getProvider getProvider}('poll-provider');
|
|
* p.disconnect();
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String[]} relayedEvents
|
|
* List of Provider events that should be relayed by {@link Ext.direct.Manager}.
|
|
* 'data' event is always relayed.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
Ext.applyIf(me, {
|
|
id: Ext.id(null, 'provider-')
|
|
});
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event connect
|
|
* Fires when the Provider connects to the server-side
|
|
*
|
|
* @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
|
|
*/
|
|
'connect',
|
|
|
|
/**
|
|
* @event disconnect
|
|
* Fires when the Provider disconnects from the server-side
|
|
*
|
|
* @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
|
|
*/
|
|
'disconnect',
|
|
|
|
/**
|
|
* @event data
|
|
* Fires when the Provider receives data from the server-side
|
|
*
|
|
* @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
|
|
* @param {Ext.direct.Event} e The Ext.direct.Event type that occurred.
|
|
*/
|
|
'data',
|
|
|
|
/**
|
|
* @event exception
|
|
* Fires when the Provider receives an exception from the server-side
|
|
*/
|
|
'exception'
|
|
);
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
},
|
|
|
|
/**
|
|
* Returns whether or not the server-side is currently connected.
|
|
* Abstract method for subclasses to implement.
|
|
* @template
|
|
*/
|
|
isConnected: function() {
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Abstract method for subclasses to implement.
|
|
* @template
|
|
*/
|
|
connect: Ext.emptyFn,
|
|
|
|
/**
|
|
* Abstract method for subclasses to implement.
|
|
* @template
|
|
*/
|
|
disconnect: Ext.emptyFn
|
|
});
|
|
|
|
/**
|
|
* This class implements the Ext.Direct event domain. All classes extending from
|
|
* {@link Ext.direct.Provider} are included in this domain. The selectors are simply provider
|
|
* id's or the wildcard "*" to match any provider.
|
|
*
|
|
* @protected
|
|
*/
|
|
|
|
Ext.define('Ext.app.domain.Direct', {
|
|
extend: Ext.app.EventDomain ,
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
type: 'direct',
|
|
idProperty: 'id',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
me.monitor(Ext.direct.Provider);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event
|
|
* of the button. Typically this would be used to display a dropdown menu that provides additional options to the
|
|
* primary button action, but any custom handler can provide the arrowclick implementation. Example usage:
|
|
*
|
|
* @example
|
|
* // display a dropdown menu:
|
|
* Ext.create('Ext.button.Split', {
|
|
* renderTo: Ext.getBody(),
|
|
* text: 'Options',
|
|
* // handle a click on the button itself
|
|
* handler: function() {
|
|
* alert("The button was clicked");
|
|
* },
|
|
* menu: new Ext.menu.Menu({
|
|
* items: [
|
|
* // these will render as dropdown menu items when the arrow is clicked:
|
|
* {text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
|
|
* {text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
|
|
* ]
|
|
* })
|
|
* });
|
|
*
|
|
* Instead of showing a menu, you can provide any type of custom functionality you want when the dropdown
|
|
* arrow is clicked:
|
|
*
|
|
* Ext.create('Ext.button.Split', {
|
|
* renderTo: 'button-ct',
|
|
* text: 'Options',
|
|
* handler: optionsHandler,
|
|
* arrowHandler: myCustomHandler
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.button.Split', {
|
|
|
|
/* Begin Definitions */
|
|
alias: 'widget.splitbutton',
|
|
|
|
extend: Ext.button.Button ,
|
|
alternateClassName: 'Ext.SplitButton',
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Function} arrowHandler
|
|
* A function called when the arrow button is clicked (can be used instead of click event)
|
|
* @cfg {Ext.button.Split} arrowHandler.this
|
|
* @cfg {Event} arrowHandler.e The click event.
|
|
*/
|
|
/**
|
|
* @cfg {String} arrowTooltip
|
|
* The title attribute of the arrow.
|
|
*/
|
|
|
|
// @private
|
|
arrowCls : 'split',
|
|
split : true,
|
|
|
|
// @private
|
|
initComponent : function(){
|
|
this.callParent();
|
|
/**
|
|
* @event arrowclick
|
|
* Fires when this button's arrow is clicked.
|
|
* @param {Ext.button.Split} this
|
|
* @param {Event} e The click event.
|
|
*/
|
|
this.addEvents("arrowclick");
|
|
},
|
|
|
|
/**
|
|
* Sets this button's arrow click handler.
|
|
* @param {Function} handler The function to call when the arrow is clicked.
|
|
* @param {Object} scope (optional) Scope for the function passed above.
|
|
*/
|
|
setArrowHandler : function(handler, scope){
|
|
this.arrowHandler = handler;
|
|
this.scope = scope;
|
|
},
|
|
|
|
// @private
|
|
onClick : function(e, t) {
|
|
var me = this;
|
|
|
|
e.preventDefault();
|
|
if (!me.disabled) {
|
|
if (me.overMenuTrigger) {
|
|
me.maybeShowMenu();
|
|
me.fireEvent("arrowclick", me, e);
|
|
if (me.arrowHandler) {
|
|
me.arrowHandler.call(me.scope || me, me, e);
|
|
}
|
|
} else {
|
|
me.doToggle();
|
|
me.fireHandler(e);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically
|
|
* cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
|
|
* {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
|
|
* button displays the dropdown menu just like a normal SplitButton. Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.button.Cycle', {
|
|
* showText: true,
|
|
* prependText: 'View as ',
|
|
* renderTo: Ext.getBody(),
|
|
* menu: {
|
|
* id: 'view-type-menu',
|
|
* items: [{
|
|
* text: 'text only',
|
|
* iconCls: 'view-text',
|
|
* checked: true
|
|
* },{
|
|
* text: 'HTML',
|
|
* iconCls: 'view-html'
|
|
* }]
|
|
* },
|
|
* changeHandler: function(cycleBtn, activeItem) {
|
|
* Ext.Msg.alert('Change View', activeItem.text);
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.button.Cycle', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'widget.cycle',
|
|
|
|
extend: Ext.button.Split ,
|
|
alternateClassName: 'Ext.CycleButton',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Object[]} items
|
|
* An array of {@link Ext.menu.CheckItem} **config** objects to be used when creating the button's menu items (e.g.,
|
|
* `{text:'Foo', iconCls:'foo-icon'}`)
|
|
*
|
|
* @deprecated 4.0 Use the {@link #cfg-menu} config instead. All menu items will be created as
|
|
* {@link Ext.menu.CheckItem CheckItems}.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [showText=false]
|
|
* True to display the active item's text as the button text. The Button will show its
|
|
* configured {@link #text} if this config is omitted.
|
|
*/
|
|
/**
|
|
* @cfg {String} [prependText='']
|
|
* A static string to prepend before the active item's text when displayed as the button's text (only applies when
|
|
* showText = true).
|
|
*/
|
|
/**
|
|
* @cfg {Function} changeHandler
|
|
* A callback function that will be invoked each time the active menu item in the button's menu has changed. If this
|
|
* callback is not supplied, the SplitButton will instead fire the {@link #change} event on active item change. The
|
|
* changeHandler function will be called with the following argument list: (SplitButton this, Ext.menu.CheckItem
|
|
* item)
|
|
*/
|
|
/**
|
|
* @cfg {String} forceIcon
|
|
* A css class which sets an image to be used as the static icon for this button. This icon will always be displayed
|
|
* regardless of which item is selected in the dropdown list. This overrides the default behavior of changing the
|
|
* button's icon to match the selected item's icon on change.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} forceGlyph
|
|
* The charCode to be used as the static icon for this button. This icon will always be
|
|
* displayed regardless of which item is selected in the dropdown list. This override
|
|
* the default behavior of changing the button's icon to match the selected item's icon
|
|
* on change. This property expects a format consistent with that of {@link #glyph}
|
|
*/
|
|
/**
|
|
* @property {Ext.menu.Menu} menu
|
|
* The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the
|
|
* available choices.
|
|
*/
|
|
|
|
// @private
|
|
getButtonText: function(item) {
|
|
var me = this,
|
|
text = '';
|
|
|
|
if (item && me.showText === true) {
|
|
if (me.prependText) {
|
|
text += me.prependText;
|
|
}
|
|
text += item.text;
|
|
return text;
|
|
}
|
|
return me.text;
|
|
},
|
|
|
|
/**
|
|
* Sets the button's active menu item.
|
|
* @param {Ext.menu.CheckItem} item The item to activate
|
|
* @param {Boolean} [suppressEvent=false] True to prevent the button's change event from firing.
|
|
*/
|
|
setActiveItem: function(item, suppressEvent) {
|
|
var me = this;
|
|
|
|
if (!Ext.isObject(item)) {
|
|
item = me.menu.getComponent(item);
|
|
}
|
|
if (item) {
|
|
if (!me.rendered) {
|
|
me.text = me.getButtonText(item);
|
|
me.iconCls = item.iconCls;
|
|
me.glyph = item.glyph;
|
|
} else {
|
|
me.setText(me.getButtonText(item));
|
|
me.setIconCls(item.iconCls);
|
|
me.setGlyph(item.glyph);
|
|
}
|
|
me.activeItem = item;
|
|
if (!item.checked) {
|
|
item.setChecked(true, false);
|
|
}
|
|
if (me.forceIcon) {
|
|
me.setIconCls(me.forceIcon);
|
|
}
|
|
if (me.forceGlyph) {
|
|
me.setGlyph(me.forceGlyph);
|
|
}
|
|
if (!suppressEvent) {
|
|
me.fireEvent('change', me, item);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the currently active menu item.
|
|
* @return {Ext.menu.CheckItem} The active item
|
|
*/
|
|
getActiveItem: function() {
|
|
return this.activeItem;
|
|
},
|
|
|
|
// @private
|
|
initComponent: function() {
|
|
var me = this,
|
|
checked = 0,
|
|
items,
|
|
i, iLen, item;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event change
|
|
* Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function is
|
|
* set on this CycleButton, it will be called instead on active item change and this change event will not
|
|
* be fired.
|
|
* @param {Ext.button.Cycle} this
|
|
* @param {Ext.menu.CheckItem} item The menu item that was selected
|
|
*/
|
|
"change"
|
|
);
|
|
|
|
if (me.changeHandler) {
|
|
me.on('change', me.changeHandler, me.scope || me);
|
|
delete me.changeHandler;
|
|
}
|
|
|
|
// Allow them to specify a menu config which is a standard Button config.
|
|
// Remove direct use of "items" in 5.0.
|
|
items = (me.menu.items || []).concat(me.items || []);
|
|
me.menu = Ext.applyIf({
|
|
cls: Ext.baseCSSPrefix + 'cycle-menu',
|
|
items: []
|
|
}, me.menu);
|
|
|
|
iLen = items.length;
|
|
|
|
// Convert all items to CheckItems
|
|
for (i = 0; i < iLen; i++) {
|
|
item = items[i];
|
|
|
|
item = Ext.applyIf({
|
|
group : me.id,
|
|
itemIndex : i,
|
|
checkHandler : me.checkHandler,
|
|
scope : me,
|
|
checked : item.checked || false
|
|
}, item);
|
|
|
|
me.menu.items.push(item);
|
|
|
|
if (item.checked) {
|
|
checked = i;
|
|
}
|
|
}
|
|
|
|
me.itemCount = me.menu.items.length;
|
|
me.callParent(arguments);
|
|
me.on('click', me.toggleSelected, me);
|
|
me.setActiveItem(checked, me);
|
|
|
|
// If configured with a fixed width, the cycling will center a different child item's text each click. Prevent this.
|
|
if (me.width && me.showText) {
|
|
me.addCls(Ext.baseCSSPrefix + 'cycle-fixed-width');
|
|
}
|
|
},
|
|
|
|
// @private
|
|
checkHandler: function(item, pressed) {
|
|
if (pressed) {
|
|
this.setActiveItem(item);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This is normally called internally on button click, but can be called externally to advance the button's active
|
|
* item programmatically to the next one in the menu. If the current item is the last one in the menu the active
|
|
* item will be set to the first item in the menu.
|
|
*/
|
|
toggleSelected: function() {
|
|
var me = this,
|
|
m = me.menu,
|
|
checkItem;
|
|
|
|
checkItem = me.activeItem.next(':not([disabled])') || m.items.getAt(0);
|
|
checkItem.setChecked(true);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.Callout
|
|
* A mixin providing callout functionality for Ext.chart.series.Series.
|
|
*/
|
|
Ext.define('Ext.chart.Callout', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function(config) {
|
|
if (config.callouts) {
|
|
config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, {
|
|
color: "#000",
|
|
font: "11px Helvetica, sans-serif"
|
|
});
|
|
this.callouts = Ext.apply(this.callouts || {}, config.callouts);
|
|
this.calloutsArray = [];
|
|
}
|
|
},
|
|
|
|
renderCallouts: function() {
|
|
if (!this.callouts) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
items = me.items,
|
|
animate = me.chart.animate,
|
|
config = me.callouts,
|
|
styles = config.styles,
|
|
group = me.calloutsArray,
|
|
store = me.chart.getChartStore(),
|
|
len = store.getCount(),
|
|
ratio = items.length / len,
|
|
previouslyPlacedCallouts = [],
|
|
i,
|
|
count,
|
|
j,
|
|
p,
|
|
item,
|
|
label,
|
|
storeItem,
|
|
display;
|
|
|
|
for (i = 0, count = 0; i < len; i++) {
|
|
for (j = 0; j < ratio; j++) {
|
|
item = items[count];
|
|
label = group[count];
|
|
storeItem = store.getAt(i);
|
|
|
|
display = (!config.filter || config.filter(storeItem));
|
|
|
|
if (!display && !label) {
|
|
count++;
|
|
continue;
|
|
}
|
|
|
|
if (!label) {
|
|
group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count);
|
|
}
|
|
for (p in label) {
|
|
if (label[p] && label[p].setAttributes) {
|
|
label[p].setAttributes(styles, true);
|
|
}
|
|
}
|
|
if (!display) {
|
|
for (p in label) {
|
|
if (label[p]) {
|
|
if (label[p].setAttributes) {
|
|
label[p].setAttributes({
|
|
hidden: true
|
|
}, true);
|
|
} else if(label[p].setVisible) {
|
|
label[p].setVisible(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (config && config.renderer) {
|
|
config.renderer(label, storeItem);
|
|
}
|
|
me.onPlaceCallout(label, storeItem, item, i, display, animate,
|
|
j, count, previouslyPlacedCallouts);
|
|
previouslyPlacedCallouts.push(label);
|
|
count++;
|
|
}
|
|
}
|
|
this.hideCallouts(count);
|
|
},
|
|
|
|
onCreateCallout: function(storeItem, item, i, display) {
|
|
var me = this,
|
|
group = me.calloutsGroup,
|
|
config = me.callouts,
|
|
styles = (config ? config.styles : undefined),
|
|
width = (styles ? styles.width : 0),
|
|
height = (styles ? styles.height : 0),
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
calloutObj = {
|
|
//label: false,
|
|
//box: false,
|
|
lines: false
|
|
};
|
|
|
|
calloutObj.lines = surface.add(Ext.apply({},
|
|
{
|
|
type: 'path',
|
|
path: 'M0,0',
|
|
stroke: me.getLegendColor() || '#555'
|
|
},
|
|
styles));
|
|
|
|
if (config.items) {
|
|
calloutObj.panel = new Ext.Panel({
|
|
style: "position: absolute;",
|
|
width: width,
|
|
height: height,
|
|
items: config.items,
|
|
renderTo: chart.el
|
|
});
|
|
}
|
|
|
|
return calloutObj;
|
|
},
|
|
|
|
hideCallouts: function(index) {
|
|
var calloutsArray = this.calloutsArray,
|
|
len = calloutsArray.length,
|
|
co,
|
|
p;
|
|
while (len-->index) {
|
|
co = calloutsArray[len];
|
|
for (p in co) {
|
|
if (co[p]) {
|
|
co[p].hide(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A composite Sprite handles a group of sprites with common methods to a sprite
|
|
* such as `hide`, `show`, `setAttributes`. These methods are applied to the set of sprites
|
|
* added to the group.
|
|
*
|
|
* CompositeSprite extends {@link Ext.util.MixedCollection} so you can use the same methods
|
|
* in `MixedCollection` to iterate through sprites, add and remove elements, etc.
|
|
*
|
|
* In order to create a CompositeSprite, one has to provide a handle to the surface where it is
|
|
* rendered:
|
|
*
|
|
* var group = Ext.create('Ext.draw.CompositeSprite', {
|
|
* surface: drawComponent.surface
|
|
* });
|
|
*
|
|
* Then just by using `MixedCollection` methods it's possible to add {@link Ext.draw.Sprite}s:
|
|
*
|
|
* group.add(sprite1);
|
|
* group.add(sprite2);
|
|
* group.add(sprite3);
|
|
*
|
|
* And then apply common Sprite methods to them:
|
|
*
|
|
* group.setAttributes({
|
|
* fill: '#f00'
|
|
* }, true);
|
|
*/
|
|
Ext.define('Ext.draw.CompositeSprite', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.util.MixedCollection ,
|
|
mixins: {
|
|
animate: Ext.util.Animate
|
|
},
|
|
autoDestroy: false,
|
|
|
|
/* End Definitions */
|
|
isCompositeSprite: true,
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
config = config || {};
|
|
Ext.apply(me, config);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.draw.Sprite#mousedown
|
|
*/
|
|
'mousedown',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.draw.Sprite#mouseup
|
|
*/
|
|
'mouseup',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.draw.Sprite#mouseover
|
|
*/
|
|
'mouseover',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.draw.Sprite#mouseout
|
|
*/
|
|
'mouseout',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.draw.Sprite#click
|
|
*/
|
|
'click'
|
|
);
|
|
me.id = Ext.id(null, 'ext-sprite-group-');
|
|
me.callParent();
|
|
},
|
|
|
|
// @private
|
|
onClick: function(e) {
|
|
this.fireEvent('click', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseUp: function(e) {
|
|
this.fireEvent('mouseup', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseDown: function(e) {
|
|
this.fireEvent('mousedown', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseOver: function(e) {
|
|
this.fireEvent('mouseover', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseOut: function(e) {
|
|
this.fireEvent('mouseout', e);
|
|
},
|
|
|
|
attachEvents: function(o) {
|
|
var me = this;
|
|
|
|
o.on({
|
|
scope: me,
|
|
mousedown: me.onMouseDown,
|
|
mouseup: me.onMouseUp,
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut,
|
|
click: me.onClick
|
|
});
|
|
},
|
|
|
|
// Inherit docs from MixedCollection
|
|
add: function(key, o) {
|
|
var result = this.callParent(arguments);
|
|
this.attachEvents(result);
|
|
return result;
|
|
},
|
|
|
|
insert: function(index, key, o) {
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
// Inherit docs from MixedCollection
|
|
remove: function(o) {
|
|
var me = this;
|
|
|
|
o.un({
|
|
scope: me,
|
|
mousedown: me.onMouseDown,
|
|
mouseup: me.onMouseUp,
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut,
|
|
click: me.onClick
|
|
});
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Returns the group bounding box.
|
|
* Behaves like {@link Ext.draw.Sprite#getBBox} method.
|
|
* @return {Object} an object with x, y, width, and height properties.
|
|
*/
|
|
getBBox: function() {
|
|
var i = 0,
|
|
sprite,
|
|
bb,
|
|
items = this.items,
|
|
len = this.length,
|
|
infinity = Infinity,
|
|
minX = infinity,
|
|
maxHeight = -infinity,
|
|
minY = infinity,
|
|
maxWidth = -infinity,
|
|
maxWidthBBox, maxHeightBBox;
|
|
|
|
for (; i < len; i++) {
|
|
sprite = items[i];
|
|
if (sprite.el && ! sprite.bboxExcluded) {
|
|
bb = sprite.getBBox();
|
|
minX = Math.min(minX, bb.x);
|
|
minY = Math.min(minY, bb.y);
|
|
maxHeight = Math.max(maxHeight, bb.height + bb.y);
|
|
maxWidth = Math.max(maxWidth, bb.width + bb.x);
|
|
}
|
|
}
|
|
|
|
return {
|
|
x: minX,
|
|
y: minY,
|
|
height: maxHeight - minY,
|
|
width: maxWidth - minX
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Iterates through all sprites calling `setAttributes` on each one. For more information {@link Ext.draw.Sprite}
|
|
* provides a description of the attributes that can be set with this method.
|
|
* @param {Object} attrs Attributes to be changed on the sprite.
|
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
|
* @return {Ext.draw.CompositeSprite} this
|
|
*/
|
|
setAttributes: function(attrs, redraw) {
|
|
var i = 0,
|
|
items = this.items,
|
|
len = this.length;
|
|
|
|
for (; i < len; i++) {
|
|
items[i].setAttributes(attrs, redraw);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Hides all sprites. If `true` is passed then a redraw will be forced for each sprite.
|
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
|
* @return {Ext.draw.CompositeSprite} this
|
|
*/
|
|
hide: function(redraw) {
|
|
var i = 0,
|
|
items = this.items,
|
|
len = this.length;
|
|
|
|
for (; i < len; i++) {
|
|
items[i].hide(redraw);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Shows all sprites. If `true` is passed then a redraw will be forced for each sprite.
|
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
|
* @return {Ext.draw.CompositeSprite} this
|
|
*/
|
|
show: function(redraw) {
|
|
var i = 0,
|
|
items = this.items,
|
|
len = this.length;
|
|
|
|
for (; i < len; i++) {
|
|
items[i].show(redraw);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Force redraw of all sprites.
|
|
*/
|
|
redraw: function() {
|
|
var me = this,
|
|
i = 0,
|
|
items = me.items,
|
|
surface = me.getSurface(),
|
|
len = me.length;
|
|
|
|
if (surface) {
|
|
for (; i < len; i++) {
|
|
surface.renderItem(items[i]);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets style for all sprites.
|
|
* @param {String} style CSS Style definition.
|
|
*/
|
|
setStyle: function(obj) {
|
|
var i = 0,
|
|
items = this.items,
|
|
len = this.length,
|
|
item, el;
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
el = item.el;
|
|
if (el) {
|
|
el.setStyle(obj);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds class to all sprites.
|
|
* @param {String} cls CSS class name
|
|
*/
|
|
addCls: function(obj) {
|
|
var i = 0,
|
|
items = this.items,
|
|
surface = this.getSurface(),
|
|
len = this.length;
|
|
|
|
if (surface) {
|
|
for (; i < len; i++) {
|
|
surface.addCls(items[i], obj);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes class from all sprites.
|
|
* @param {String} cls CSS class name
|
|
*/
|
|
removeCls: function(obj) {
|
|
var i = 0,
|
|
items = this.items,
|
|
surface = this.getSurface(),
|
|
len = this.length;
|
|
|
|
if (surface) {
|
|
for (; i < len; i++) {
|
|
surface.removeCls(items[i], obj);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Grab the surface from the items
|
|
* @private
|
|
* @return {Ext.draw.Surface} The surface, null if not found
|
|
*/
|
|
getSurface: function(){
|
|
var first = this.first();
|
|
if (first) {
|
|
return first.surface;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Destroys this CompositeSprite.
|
|
*/
|
|
destroy: function(){
|
|
var me = this,
|
|
surface = me.getSurface(),
|
|
destroySprites = me.autoDestroy,
|
|
item;
|
|
|
|
if (surface) {
|
|
while (me.getCount() > 0) {
|
|
item = me.first();
|
|
me.remove(item);
|
|
surface.remove(item, destroySprites);
|
|
}
|
|
}
|
|
me.clearListeners();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Surface is an interface to render methods inside {@link Ext.draw.Component}.
|
|
*
|
|
* Most of the Surface methods are abstract and they have a concrete implementation
|
|
* in {@link Ext.draw.engine.Vml VML} or {@link Ext.draw.engine.Svg SVG} engines.
|
|
*
|
|
* A Surface contains methods to render {@link Ext.draw.Sprite sprites}, get bounding
|
|
* boxes of sprites, add sprites to the canvas, initialize other graphic components, etc.
|
|
*
|
|
* ## Adding sprites to surface
|
|
*
|
|
* One of the most used methods for this class is the {@link #add} method, to add Sprites to
|
|
* the surface. For example:
|
|
*
|
|
* drawComponent.surface.add({
|
|
* type: 'circle',
|
|
* fill: '#ffc',
|
|
* radius: 100,
|
|
* x: 100,
|
|
* y: 100
|
|
* });
|
|
*
|
|
* The configuration object passed in the `add` method is the same as described in the
|
|
* {@link Ext.draw.Sprite} class documentation.
|
|
*
|
|
* Sprites can also be added to surface by setting their surface config at creation time:
|
|
*
|
|
* var sprite = Ext.create('Ext.draw.Sprite', {
|
|
* type: 'circle',
|
|
* fill: '#ff0',
|
|
* surface: drawComponent.surface,
|
|
* radius: 5
|
|
* });
|
|
*
|
|
* In order to properly apply properties and render the sprite we have to
|
|
* `show` the sprite setting the option `redraw` to `true`:
|
|
*
|
|
* sprite.show(true);
|
|
*
|
|
*/
|
|
Ext.define('Ext.draw.Surface', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
|
|
separatorRe: /[, ]+/,
|
|
|
|
enginePriority: ['Svg', 'Vml'],
|
|
|
|
statics: {
|
|
/**
|
|
* Creates and returns a new concrete Surface instance appropriate for the current environment.
|
|
* @param {Object} config Initial configuration for the Surface instance
|
|
* @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 || this.prototype.enginePriority;
|
|
|
|
var i = 0,
|
|
len = enginePriority.length;
|
|
|
|
for (; i < len; i++) {
|
|
if (Ext.supports[enginePriority[i]]) {
|
|
return Ext.create('Ext.draw.engine.' + enginePriority[i], config);
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Exports a {@link Ext.draw.Surface surface} in a different format.
|
|
* The surface may be exported to an SVG string, using the
|
|
* {@link Ext.draw.engine.SvgExporter}. It may also be exported
|
|
* as an image using the {@link Ext.draw.engine.ImageExporter ImageExporter}.
|
|
* Note that this requires sending data to a remote server to process
|
|
* the SVG into an image, see the {@link Ext.draw.engine.ImageExporter} for
|
|
* more details.
|
|
* @param {Ext.draw.Surface} surface The surface to export.
|
|
* @param {Object} [config] The configuration to be passed to the exporter.
|
|
* See the export method for the appropriate exporter for the relevant
|
|
* configuration options
|
|
* @return {Object} See the return types for the appropriate exporter
|
|
* @static
|
|
*/
|
|
save: function(surface, config) {
|
|
config = config || {};
|
|
var exportTypes = {
|
|
'image/png': 'Image',
|
|
'image/jpeg': 'Image',
|
|
'image/svg+xml': 'Svg'
|
|
},
|
|
prefix = exportTypes[config.type] || 'Svg',
|
|
exporter = Ext.draw.engine[prefix + 'Exporter'];
|
|
|
|
return exporter.generate(surface, config);
|
|
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
// @private
|
|
availableAttrs: {
|
|
blur: 0,
|
|
"clip-rect": "0 0 1e9 1e9",
|
|
cursor: "default",
|
|
cx: 0,
|
|
cy: 0,
|
|
'dominant-baseline': 'auto',
|
|
fill: "none",
|
|
"fill-opacity": 1,
|
|
font: '10px "Arial"',
|
|
"font-family": '"Arial"',
|
|
"font-size": "10",
|
|
"font-style": "normal",
|
|
"font-weight": 400,
|
|
gradient: "",
|
|
height: 0,
|
|
hidden: false,
|
|
href: "http://sencha.com/",
|
|
opacity: 1,
|
|
path: "M0,0",
|
|
radius: 0,
|
|
rx: 0,
|
|
ry: 0,
|
|
scale: "1 1",
|
|
src: "",
|
|
stroke: "none",
|
|
"stroke-dasharray": "",
|
|
"stroke-linecap": "butt",
|
|
"stroke-linejoin": "butt",
|
|
"stroke-miterlimit": 0,
|
|
"stroke-opacity": 1,
|
|
"stroke-width": 1,
|
|
target: "_blank",
|
|
text: "",
|
|
"text-anchor": "middle",
|
|
title: "Ext Draw",
|
|
width: 0,
|
|
x: 0,
|
|
y: 0,
|
|
zIndex: 0
|
|
},
|
|
|
|
/**
|
|
* @cfg {Number} height
|
|
* The height of this component in pixels (defaults to auto).
|
|
*/
|
|
/**
|
|
* @cfg {Number} width
|
|
* The width of this component in pixels (defaults to auto).
|
|
*/
|
|
|
|
container: undefined,
|
|
height: 352,
|
|
width: 512,
|
|
x: 0,
|
|
y: 0,
|
|
|
|
/**
|
|
* @cfg {Ext.draw.Sprite[]} items
|
|
* Array of sprites or sprite config objects to add initially to the surface.
|
|
*/
|
|
|
|
/**
|
|
* @private Flag indicating that the surface implementation requires sprites to be maintained
|
|
* in order of their zIndex. Impls that don't require this can set it to false.
|
|
*/
|
|
orderSpritesByZIndex: true,
|
|
|
|
|
|
/**
|
|
* Creates new Surface.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
config = config || {};
|
|
Ext.apply(me, config);
|
|
|
|
me.domRef = Ext.getDoc().dom;
|
|
|
|
me.customAttributes = {};
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event
|
|
* Fires when a mousedown is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mousedown',
|
|
/**
|
|
* @event
|
|
* Fires when a mouseup is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mouseup',
|
|
/**
|
|
* @event
|
|
* Fires when a mouseover is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mouseover',
|
|
/**
|
|
* @event
|
|
* Fires when a mouseout is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mouseout',
|
|
/**
|
|
* @event
|
|
* Fires when a mousemove is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mousemove',
|
|
/**
|
|
* @event
|
|
* Fires when a mouseenter is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mouseenter',
|
|
/**
|
|
* @event
|
|
* Fires when a mouseleave is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'mouseleave',
|
|
/**
|
|
* @event
|
|
* Fires when a click is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'click',
|
|
/**
|
|
* @event
|
|
* Fires when a dblclick is detected within the surface.
|
|
* @param {Ext.EventObject} e An object encapsulating the DOM event.
|
|
*/
|
|
'dblclick'
|
|
);
|
|
|
|
me.mixins.observable.constructor.call(me);
|
|
|
|
me.getId();
|
|
me.initGradients();
|
|
me.initItems();
|
|
if (me.renderTo) {
|
|
me.render(me.renderTo);
|
|
delete me.renderTo;
|
|
}
|
|
me.initBackground(config.background);
|
|
},
|
|
|
|
// @private called to initialize components in the surface
|
|
// this is dependent on the underlying implementation.
|
|
initSurface: Ext.emptyFn,
|
|
|
|
// @private called to setup the surface to render an item
|
|
//this is dependent on the underlying implementation.
|
|
renderItem: Ext.emptyFn,
|
|
|
|
// @private
|
|
renderItems: Ext.emptyFn,
|
|
|
|
// @private
|
|
setViewBox: function (x, y, width, height) {
|
|
if (isFinite(x) && isFinite(y) && isFinite(width) && isFinite(height)) {
|
|
this.viewBox = {x: x, y: y, width: width, height: height};
|
|
this.applyViewBox();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.addCls(sprite, 'x-visible');
|
|
*
|
|
* @param {Object} sprite The sprite to add the class to.
|
|
* @param {String/String[]} className The CSS class to add, or an array of classes
|
|
* @method
|
|
*/
|
|
addCls: Ext.emptyFn,
|
|
|
|
/**
|
|
* Removes one or more CSS classes from the element.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.removeCls(sprite, 'x-visible');
|
|
*
|
|
* @param {Object} sprite The sprite to remove the class from.
|
|
* @param {String/String[]} className The CSS class to remove, or an array of classes
|
|
* @method
|
|
*/
|
|
removeCls: Ext.emptyFn,
|
|
|
|
/**
|
|
* Sets CSS style attributes to an element.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.setStyle(sprite, {
|
|
* 'cursor': 'pointer'
|
|
* });
|
|
*
|
|
* @param {Object} sprite The sprite to add, or an array of classes to
|
|
* @param {Object} styles An Object with CSS styles.
|
|
* @method
|
|
*/
|
|
setStyle: Ext.emptyFn,
|
|
|
|
// @private
|
|
initGradients: function() {
|
|
if (this.hasOwnProperty('gradients')) {
|
|
var gradients = this.gradients,
|
|
fn = this.addGradient,
|
|
g, gLen;
|
|
|
|
if (gradients) {
|
|
for (g = 0, gLen = gradients.length; g < gLen; g++) {
|
|
if (fn.call(this, gradients[g], g, gLen) === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
initItems: function() {
|
|
var items = this.items;
|
|
this.items = new Ext.draw.CompositeSprite();
|
|
this.items.autoDestroy = true;
|
|
this.groups = new Ext.draw.CompositeSprite();
|
|
if (items) {
|
|
this.add(items);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
initBackground: function(config) {
|
|
var me = this,
|
|
width = me.width,
|
|
height = me.height,
|
|
gradientId, gradient;
|
|
if (Ext.isString(config)) {
|
|
config = {
|
|
fill : config
|
|
};
|
|
}
|
|
if (config) {
|
|
if (config.gradient) {
|
|
gradient = config.gradient;
|
|
gradientId = gradient.id;
|
|
me.addGradient(gradient);
|
|
me.background = me.add({
|
|
type: 'rect',
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
fill: 'url(#' + gradientId + ')',
|
|
zIndex: -1
|
|
});
|
|
} else if (config.fill) {
|
|
me.background = me.add({
|
|
type: 'rect',
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
fill: config.fill,
|
|
zIndex: -1
|
|
});
|
|
} else if (config.image) {
|
|
me.background = me.add({
|
|
type: 'image',
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
src: config.image,
|
|
zIndex: -1
|
|
});
|
|
}
|
|
// prevent me.background to jeopardize me.items.getBBox
|
|
me.background.bboxExcluded = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the size of the surface. Accomodates the background (if any) to fit the new size too.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.setSize(500, 500);
|
|
*
|
|
* This method is generally called when also setting the size of the draw Component.
|
|
*
|
|
* @param {Number} w The new width of the canvas.
|
|
* @param {Number} h The new height of the canvas.
|
|
*/
|
|
setSize: function(w, h) {
|
|
this.applyViewBox();
|
|
},
|
|
|
|
// @private
|
|
scrubAttrs: function(sprite) {
|
|
var i,
|
|
attrs = {},
|
|
exclude = {},
|
|
sattr = sprite.attr;
|
|
for (i in sattr) {
|
|
// Narrow down attributes to the main set
|
|
if (this.translateAttrs.hasOwnProperty(i)) {
|
|
// Translated attr
|
|
attrs[this.translateAttrs[i]] = sattr[i];
|
|
exclude[this.translateAttrs[i]] = true;
|
|
}
|
|
else if (this.availableAttrs.hasOwnProperty(i) && !exclude[i]) {
|
|
// Passtrhough attr
|
|
attrs[i] = sattr[i];
|
|
}
|
|
}
|
|
return attrs;
|
|
},
|
|
|
|
// @private
|
|
onClick: function(e) {
|
|
this.processEvent('click', e);
|
|
},
|
|
|
|
// @private
|
|
onDblClick: function(e) {
|
|
this.processEvent('dblclick', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseUp: function(e) {
|
|
this.processEvent('mouseup', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseDown: function(e) {
|
|
this.processEvent('mousedown', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseOver: function(e) {
|
|
this.processEvent('mouseover', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseOut: function(e) {
|
|
this.processEvent('mouseout', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseMove: function(e) {
|
|
this.fireEvent('mousemove', e);
|
|
},
|
|
|
|
// @private
|
|
onMouseEnter: Ext.emptyFn,
|
|
|
|
// @private
|
|
onMouseLeave: Ext.emptyFn,
|
|
|
|
/**
|
|
* 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
|
|
* 'renderTo' in its config). For more information on how to create gradients in the Chart
|
|
* configuration object please refer to {@link Ext.chart.Chart}.
|
|
*
|
|
* 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.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.addGradient({
|
|
* id: 'gradientId',
|
|
* angle: 45,
|
|
* stops: {
|
|
* 0: {
|
|
* color: '#555'
|
|
* },
|
|
* 100: {
|
|
* color: '#ddd'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Object} gradient A gradient config.
|
|
* @method
|
|
*/
|
|
addGradient: Ext.emptyFn,
|
|
|
|
/**
|
|
* Adds a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be
|
|
* passed into this method.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.add({
|
|
* type: 'circle',
|
|
* fill: '#ffc',
|
|
* radius: 100,
|
|
* x: 100,
|
|
* y: 100
|
|
* });
|
|
*
|
|
* @param {Ext.draw.Sprite[]/Ext.draw.Sprite...} args One or more Sprite objects or configs.
|
|
* @return {Ext.draw.Sprite[]/Ext.draw.Sprite} The sprites added.
|
|
*/
|
|
add: function() {
|
|
var args = Array.prototype.slice.call(arguments),
|
|
sprite,
|
|
hasMultipleArgs = args.length > 1,
|
|
items,
|
|
results,
|
|
i,
|
|
ln,
|
|
item;
|
|
|
|
if (hasMultipleArgs || Ext.isArray(args[0])) {
|
|
items = hasMultipleArgs ? args : args[0];
|
|
results = [];
|
|
|
|
for (i = 0, ln = items.length; i < ln; i++) {
|
|
item = items[i];
|
|
item = this.add(item);
|
|
results.push(item);
|
|
}
|
|
|
|
return results;
|
|
}
|
|
sprite = this.prepareItems(args[0], true)[0];
|
|
this.insertByZIndex(sprite);
|
|
this.onAdd(sprite);
|
|
return sprite;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Inserts a given sprite into the correct position in the items collection, according to
|
|
* its zIndex. It will be inserted at the end of an existing series of sprites with the same or
|
|
* lower zIndex. By ensuring sprites are always ordered, this allows surface subclasses to render
|
|
* the sprites in the correct order for proper z-index stacking.
|
|
* @param {Ext.draw.Sprite} sprite
|
|
* @return {Number} the sprite's new index in the list
|
|
*/
|
|
insertByZIndex: function(sprite) {
|
|
var me = this,
|
|
sprites = me.items.items,
|
|
len = sprites.length,
|
|
ceil = Math.ceil,
|
|
zIndex = sprite.attr.zIndex,
|
|
idx = len,
|
|
high = idx - 1,
|
|
low = 0,
|
|
otherZIndex;
|
|
|
|
if (me.orderSpritesByZIndex && len && zIndex < sprites[high].attr.zIndex) {
|
|
// Find the target index via a binary search for speed
|
|
while (low <= high) {
|
|
idx = ceil((low + high) / 2);
|
|
otherZIndex = sprites[idx].attr.zIndex;
|
|
if (otherZIndex > zIndex) {
|
|
high = idx - 1;
|
|
}
|
|
else if (otherZIndex < zIndex) {
|
|
low = idx + 1;
|
|
}
|
|
else {
|
|
break;
|
|
}
|
|
}
|
|
// Step forward to the end of a sequence of the same or lower z-index
|
|
while (idx < len && sprites[idx].attr.zIndex <= zIndex) {
|
|
idx++;
|
|
}
|
|
}
|
|
|
|
me.items.insert(idx, sprite);
|
|
return idx;
|
|
},
|
|
|
|
onAdd: function(sprite) {
|
|
var group = sprite.group,
|
|
draggable = sprite.draggable,
|
|
groups, ln, i;
|
|
if (group) {
|
|
groups = [].concat(group);
|
|
ln = groups.length;
|
|
for (i = 0; i < ln; i++) {
|
|
group = groups[i];
|
|
this.getGroup(group).add(sprite);
|
|
}
|
|
delete sprite.group;
|
|
}
|
|
if (draggable) {
|
|
sprite.initDraggable();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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();
|
|
*
|
|
* @param {Ext.draw.Sprite} sprite
|
|
* @param {Boolean} destroySprite
|
|
*/
|
|
remove: function(sprite, destroySprite) {
|
|
if (sprite) {
|
|
this.items.remove(sprite);
|
|
|
|
var groups = [].concat(this.groups.items),
|
|
gLen = groups.length,
|
|
g;
|
|
|
|
for (g = 0; g < gLen; g++) {
|
|
groups[g].remove(sprite);
|
|
}
|
|
|
|
sprite.onRemove();
|
|
if (destroySprite === true) {
|
|
sprite.destroy();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes all sprites from the surface, optionally destroying the sprites in the process.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.removeAll();
|
|
*
|
|
* @param {Boolean} destroySprites Whether to destroy all sprites when removing them.
|
|
*/
|
|
removeAll: function(destroySprites) {
|
|
var items = this.items.items,
|
|
ln = items.length,
|
|
i;
|
|
for (i = ln - 1; i > -1; i--) {
|
|
this.remove(items[i], destroySprites);
|
|
}
|
|
},
|
|
|
|
onRemove: Ext.emptyFn,
|
|
|
|
onDestroy: Ext.emptyFn,
|
|
|
|
/**
|
|
* @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 || 1, // Avoid problems in division
|
|
height = me.height || 1,
|
|
viewBoxX, viewBoxY, viewBoxWidth, viewBoxHeight,
|
|
relativeHeight, relativeWidth, size;
|
|
|
|
if (viewBox && (width || height)) {
|
|
viewBoxX = viewBox.x;
|
|
viewBoxY = viewBox.y;
|
|
viewBoxWidth = viewBox.width;
|
|
viewBoxHeight = viewBox.height;
|
|
relativeHeight = height / viewBoxHeight;
|
|
relativeWidth = width / viewBoxWidth;
|
|
size = Math.min(relativeWidth, relativeHeight);
|
|
|
|
if (viewBoxWidth * size < width) {
|
|
viewBoxX -= (width - viewBoxWidth * size) / 2 / size;
|
|
}
|
|
if (viewBoxHeight * size < height) {
|
|
viewBoxY -= (height - viewBoxHeight * size) / 2 / size;
|
|
}
|
|
|
|
me.viewBoxShift = {
|
|
dx: -viewBoxX,
|
|
dy: -viewBoxY,
|
|
scale: size
|
|
};
|
|
|
|
if (me.background) {
|
|
me.background.setAttributes(Ext.apply({}, {
|
|
x: viewBoxX,
|
|
y: viewBoxY,
|
|
width: width / size,
|
|
height: height / size
|
|
}, { hidden: false }), true);
|
|
}
|
|
} else {
|
|
if (me.background && width && height) {
|
|
me.background.setAttributes(Ext.apply({x: 0, y: 0, width: width, height: height}, { hidden: false }), true);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
getBBox: function (sprite, isWithoutTransform) {
|
|
var realPath = this["getPath" + sprite.type](sprite);
|
|
if (isWithoutTransform) {
|
|
sprite.bbox.plain = sprite.bbox.plain || Ext.draw.Draw.pathDimensions(realPath);
|
|
return sprite.bbox.plain;
|
|
}
|
|
if (sprite.dirtyTransform) {
|
|
this.applyTransformations(sprite, true);
|
|
}
|
|
sprite.bbox.transform = sprite.bbox.transform || Ext.draw.Draw.pathDimensions(Ext.draw.Draw.mapPath(realPath, sprite.matrix));
|
|
return sprite.bbox.transform;
|
|
},
|
|
|
|
transformToViewBox: function (x, y) {
|
|
if (this.viewBoxShift) {
|
|
var me = this, shift = me.viewBoxShift;
|
|
return [x / shift.scale - shift.dx, y / shift.scale - shift.dy];
|
|
} else {
|
|
return [x, y];
|
|
}
|
|
},
|
|
|
|
// @private
|
|
applyTransformations: function(sprite, onlyMatrix) {
|
|
if (sprite.type == 'text') {
|
|
// TODO: getTextBBox function always take matrix into account no matter whether `isWithoutTransform` is true. Fix that.
|
|
sprite.bbox.transform = 0;
|
|
this.transform(sprite, false);
|
|
}
|
|
|
|
|
|
sprite.dirtyTransform = false;
|
|
|
|
var me = this,
|
|
attr = sprite.attr;
|
|
|
|
if (attr.translation.x != null || attr.translation.y != null) {
|
|
me.translate(sprite);
|
|
}
|
|
if (attr.scaling.x != null || attr.scaling.y != null) {
|
|
me.scale(sprite);
|
|
}
|
|
if (attr.rotation.degrees != null) {
|
|
me.rotate(sprite);
|
|
}
|
|
|
|
sprite.bbox.transform = 0;
|
|
this.transform(sprite, onlyMatrix);
|
|
sprite.transformations = [];
|
|
},
|
|
|
|
// @private
|
|
rotate: function (sprite) {
|
|
var bbox,
|
|
deg = sprite.attr.rotation.degrees,
|
|
centerX = sprite.attr.rotation.x,
|
|
centerY = sprite.attr.rotation.y;
|
|
if (!Ext.isNumber(centerX) || !Ext.isNumber(centerY)) {
|
|
bbox = this.getBBox(sprite, true);
|
|
centerX = !Ext.isNumber(centerX) ? bbox.x + bbox.width / 2 : centerX;
|
|
centerY = !Ext.isNumber(centerY) ? bbox.y + bbox.height / 2 : centerY;
|
|
}
|
|
sprite.transformations.push({
|
|
type: "rotate",
|
|
degrees: deg,
|
|
x: centerX,
|
|
y: centerY
|
|
});
|
|
},
|
|
|
|
// @private
|
|
translate: function(sprite) {
|
|
var x = sprite.attr.translation.x || 0,
|
|
y = sprite.attr.translation.y || 0;
|
|
sprite.transformations.push({
|
|
type: "translate",
|
|
x: x,
|
|
y: y
|
|
});
|
|
},
|
|
|
|
// @private
|
|
scale: function(sprite) {
|
|
var bbox,
|
|
x = sprite.attr.scaling.x || 1,
|
|
y = sprite.attr.scaling.y || 1,
|
|
centerX = sprite.attr.scaling.centerX,
|
|
centerY = sprite.attr.scaling.centerY;
|
|
|
|
if (!Ext.isNumber(centerX) || !Ext.isNumber(centerY)) {
|
|
bbox = this.getBBox(sprite, true);
|
|
centerX = !Ext.isNumber(centerX) ? bbox.x + bbox.width / 2 : centerX;
|
|
centerY = !Ext.isNumber(centerY) ? bbox.y + bbox.height / 2 : centerY;
|
|
}
|
|
sprite.transformations.push({
|
|
type: "scale",
|
|
x: x,
|
|
y: y,
|
|
centerX: centerX,
|
|
centerY: centerY
|
|
});
|
|
},
|
|
|
|
// @private
|
|
rectPath: function (x, y, w, h, r) {
|
|
if (r) {
|
|
return [["M", x + r, y], ["l", w - r * 2, 0], ["a", r, r, 0, 0, 1, r, r], ["l", 0, h - r * 2], ["a", r, r, 0, 0, 1, -r, r], ["l", r * 2 - w, 0], ["a", r, r, 0, 0, 1, -r, -r], ["l", 0, r * 2 - h], ["a", r, r, 0, 0, 1, r, -r], ["z"]];
|
|
}
|
|
return [["M", x, y], ["l", w, 0], ["l", 0, h], ["l", -w, 0], ["z"]];
|
|
},
|
|
|
|
// @private
|
|
ellipsePath: function (x, y, rx, ry) {
|
|
if (ry == null) {
|
|
ry = rx;
|
|
}
|
|
return [["M", x, y], ["m", 0, -ry], ["a", rx, ry, 0, 1, 1, 0, 2 * ry], ["a", rx, ry, 0, 1, 1, 0, -2 * ry], ["z"]];
|
|
},
|
|
|
|
// @private
|
|
getPathpath: function (el) {
|
|
return el.attr.path;
|
|
},
|
|
|
|
// @private
|
|
getPathcircle: function (el) {
|
|
var a = el.attr;
|
|
return this.ellipsePath(a.x, a.y, a.radius, a.radius);
|
|
},
|
|
|
|
// @private
|
|
getPathellipse: function (el) {
|
|
var a = el.attr;
|
|
return this.ellipsePath(a.x, a.y,
|
|
a.radiusX || (a.width / 2) || 0,
|
|
a.radiusY || (a.height / 2) || 0);
|
|
},
|
|
|
|
// @private
|
|
getPathrect: function (el) {
|
|
var a = el.attr;
|
|
return this.rectPath(a.x || 0, a.y || 0, a.width || 0, a.height || 0, a.r || 0);
|
|
},
|
|
|
|
// @private
|
|
getPathimage: function (el) {
|
|
var a = el.attr;
|
|
return this.rectPath(a.x || 0, a.y || 0, a.width, a.height);
|
|
},
|
|
|
|
// @private
|
|
getPathtext: function (el) {
|
|
var bbox = this.getBBoxText(el);
|
|
return this.rectPath(bbox.x, bbox.y, bbox.width, bbox.height);
|
|
},
|
|
|
|
createGroup: function(id) {
|
|
var group = this.groups.get(id);
|
|
if (!group) {
|
|
group = new Ext.draw.CompositeSprite({
|
|
surface: this
|
|
});
|
|
group.id = id || Ext.id(null, 'ext-surface-group-');
|
|
this.groups.add(group);
|
|
}
|
|
return group;
|
|
},
|
|
|
|
/**
|
|
* Returns a new group or an existent group associated with the current surface.
|
|
* The group returned is a {@link Ext.draw.CompositeSprite} group.
|
|
*
|
|
* For example:
|
|
*
|
|
* var spriteGroup = drawComponent.surface.getGroup('someGroupId');
|
|
*
|
|
* @param {String} id The unique identifier of the group.
|
|
* @return {Object} The {@link Ext.draw.CompositeSprite}.
|
|
*/
|
|
getGroup: function(id) {
|
|
var group;
|
|
if (typeof id == "string") {
|
|
group = this.groups.get(id);
|
|
if (!group) {
|
|
group = this.createGroup(id);
|
|
}
|
|
} else {
|
|
group = id;
|
|
}
|
|
return group;
|
|
},
|
|
|
|
// @private
|
|
prepareItems: function(items, applyDefaults) {
|
|
items = [].concat(items);
|
|
// Make sure defaults are applied and item is initialized
|
|
var item, i, ln;
|
|
for (i = 0, ln = items.length; i < ln; i++) {
|
|
item = items[i];
|
|
if (!(item instanceof Ext.draw.Sprite)) {
|
|
// Temporary, just take in configs...
|
|
item.surface = this;
|
|
items[i] = this.createItem(item);
|
|
} else {
|
|
item.surface = this;
|
|
}
|
|
}
|
|
return items;
|
|
},
|
|
|
|
/**
|
|
* Changes the text in the sprite element. The sprite must be a `text` sprite.
|
|
* This method can also be called from {@link Ext.draw.Sprite}.
|
|
*
|
|
* For example:
|
|
*
|
|
* var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');
|
|
*
|
|
* @param {Object} sprite The Sprite to change the text.
|
|
* @param {String} text The new text to be set.
|
|
* @method
|
|
*/
|
|
setText: Ext.emptyFn,
|
|
|
|
// @private Creates an item and appends it to the surface. Called
|
|
// as an internal method when calling `add`.
|
|
createItem: Ext.emptyFn,
|
|
|
|
/**
|
|
* Retrieves the id of this component.
|
|
* Will autogenerate an id if one has not already been set.
|
|
*/
|
|
getId: function() {
|
|
return this.id || (this.id = Ext.id(null, 'ext-surface-'));
|
|
},
|
|
|
|
/**
|
|
* Destroys the surface. This is done by removing all components from it and
|
|
* also removing its reference to a DOM element.
|
|
*
|
|
* For example:
|
|
*
|
|
* drawComponent.surface.destroy();
|
|
*/
|
|
destroy: function() {
|
|
var me = this;
|
|
delete me.domRef;
|
|
if (me.background) {
|
|
me.background.destroy();
|
|
}
|
|
me.removeAll(true);
|
|
Ext.destroy(me.groups.items);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.layout.component.Draw
|
|
* @private
|
|
*
|
|
*/
|
|
|
|
Ext.define('Ext.layout.component.Draw', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.draw',
|
|
|
|
extend: Ext.layout.component.Auto ,
|
|
|
|
setHeightInDom: true,
|
|
|
|
setWidthInDom: true,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'draw',
|
|
|
|
measureContentWidth : function (ownerContext) {
|
|
var target = ownerContext.target,
|
|
paddingInfo = ownerContext.getPaddingInfo(),
|
|
bbox = this.getBBox(ownerContext);
|
|
|
|
if (!target.viewBox) {
|
|
if (target.autoSize) {
|
|
return bbox.width + paddingInfo.width;
|
|
} else {
|
|
return bbox.x + bbox.width + paddingInfo.width;
|
|
}
|
|
} else {
|
|
if (ownerContext.heightModel.shrinkWrap) {
|
|
return paddingInfo.width;
|
|
} else {
|
|
return bbox.width / bbox.height * (ownerContext.getProp('contentHeight') - paddingInfo.height) + paddingInfo.width;
|
|
}
|
|
}
|
|
},
|
|
|
|
measureContentHeight : function (ownerContext) {
|
|
var target = ownerContext.target,
|
|
paddingInfo = ownerContext.getPaddingInfo(),
|
|
bbox = this.getBBox(ownerContext);
|
|
|
|
if (!ownerContext.target.viewBox) {
|
|
if (target.autoSize) {
|
|
return bbox.height + paddingInfo.height;
|
|
} else {
|
|
return bbox.y + bbox.height + paddingInfo.height;
|
|
}
|
|
} else {
|
|
if (ownerContext.widthModel.shrinkWrap) {
|
|
return paddingInfo.height;
|
|
} else {
|
|
return bbox.height / bbox.width * (ownerContext.getProp('contentWidth') - paddingInfo.width) + paddingInfo.height;
|
|
}
|
|
}
|
|
},
|
|
|
|
getBBox: function(ownerContext) {
|
|
var bbox = ownerContext.surfaceBBox;
|
|
if (!bbox) {
|
|
bbox = ownerContext.target.surface.items.getBBox();
|
|
// If the surface is empty, we'll get these values, normalize them
|
|
if (bbox.width === -Infinity && bbox.height === -Infinity) {
|
|
bbox.width = bbox.height = bbox.x = bbox.y = 0;
|
|
}
|
|
ownerContext.surfaceBBox = bbox;
|
|
}
|
|
return bbox;
|
|
},
|
|
|
|
publishInnerWidth: function (ownerContext, width) {
|
|
ownerContext.setContentWidth(width - ownerContext.getFrameInfo().width, true);
|
|
},
|
|
|
|
publishInnerHeight: function (ownerContext, height) {
|
|
ownerContext.setContentHeight(height - ownerContext.getFrameInfo().height, true);
|
|
},
|
|
|
|
finishedLayout: function (ownerContext) {
|
|
// TODO: Is there a better way doing this?
|
|
var props = ownerContext.props,
|
|
paddingInfo = ownerContext.getPaddingInfo();
|
|
|
|
// We don't want the cost of getProps, so we just use the props data... this is ok
|
|
// because all the props have been calculated by this time
|
|
this.owner.setSurfaceSize(props.contentWidth - paddingInfo.width, props.contentHeight - paddingInfo.height);
|
|
|
|
// calls afterComponentLayout, so we want the surface to be sized before that:
|
|
this.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The Draw Component is a surface in which sprites can be rendered. The Draw Component
|
|
* manages and holds an {@link Ext.draw.Surface} instance where
|
|
* {@link Ext.draw.Sprite Sprites} can be appended.
|
|
*
|
|
* One way to create a draw component is:
|
|
*
|
|
* @example
|
|
* var drawComponent = Ext.create('Ext.draw.Component', {
|
|
* viewBox: false,
|
|
* items: [{
|
|
* type: 'circle',
|
|
* fill: '#79BB3F',
|
|
* radius: 100,
|
|
* x: 100,
|
|
* y: 100
|
|
* }]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.Window', {
|
|
* width: 215,
|
|
* height: 235,
|
|
* layout: 'fit',
|
|
* items: [drawComponent]
|
|
* }).show();
|
|
*
|
|
* In this case we created a draw component and added a {@link Ext.draw.Sprite sprite} to it.
|
|
* The {@link Ext.draw.Sprite#type type} of the sprite is `circle` so if you run this code you'll see a yellow-ish
|
|
* circle in a Window. When setting `viewBox` to `false` we are responsible for setting the object's position and
|
|
* dimensions accordingly.
|
|
*
|
|
* You can also add sprites by using the surface's add method:
|
|
*
|
|
* drawComponent.surface.add({
|
|
* type: 'circle',
|
|
* fill: '#79BB3F',
|
|
* radius: 100,
|
|
* x: 100,
|
|
* y: 100
|
|
* });
|
|
*
|
|
* ## Larger example
|
|
*
|
|
* @example
|
|
* var drawComponent = Ext.create('Ext.draw.Component', {
|
|
* width: 800,
|
|
* height: 600,
|
|
* renderTo: document.body
|
|
* }), surface = drawComponent.surface;
|
|
*
|
|
* surface.add([{
|
|
* type: 'circle',
|
|
* radius: 10,
|
|
* fill: '#f00',
|
|
* x: 10,
|
|
* y: 10,
|
|
* group: 'circles'
|
|
* }, {
|
|
* type: 'circle',
|
|
* radius: 10,
|
|
* fill: '#0f0',
|
|
* x: 50,
|
|
* y: 50,
|
|
* group: 'circles'
|
|
* }, {
|
|
* type: 'circle',
|
|
* radius: 10,
|
|
* fill: '#00f',
|
|
* x: 100,
|
|
* y: 100,
|
|
* group: 'circles'
|
|
* }, {
|
|
* type: 'rect',
|
|
* width: 20,
|
|
* height: 20,
|
|
* fill: '#f00',
|
|
* x: 10,
|
|
* y: 10,
|
|
* group: 'rectangles'
|
|
* }, {
|
|
* type: 'rect',
|
|
* width: 20,
|
|
* height: 20,
|
|
* fill: '#0f0',
|
|
* x: 50,
|
|
* y: 50,
|
|
* group: 'rectangles'
|
|
* }, {
|
|
* type: 'rect',
|
|
* width: 20,
|
|
* height: 20,
|
|
* fill: '#00f',
|
|
* x: 100,
|
|
* y: 100,
|
|
* group: 'rectangles'
|
|
* }]);
|
|
*
|
|
* // Get references to my groups
|
|
* circles = surface.getGroup('circles');
|
|
* rectangles = surface.getGroup('rectangles');
|
|
*
|
|
* // Animate the circles down
|
|
* circles.animate({
|
|
* duration: 1000,
|
|
* to: {
|
|
* translate: {
|
|
* y: 200
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* // Animate the rectangles across
|
|
* rectangles.animate({
|
|
* duration: 1000,
|
|
* to: {
|
|
* translate: {
|
|
* x: 200
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* For more information on Sprites, the core elements added to a draw component's surface,
|
|
* refer to the {@link Ext.draw.Sprite} documentation.
|
|
*/
|
|
Ext.define('Ext.draw.Component', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'widget.draw',
|
|
|
|
extend: Ext.Component ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String[]} enginePriority
|
|
* Defines the priority order for which Surface implementation to use. The first
|
|
* one supported by the current environment will be used.
|
|
*/
|
|
enginePriority: ['Svg', 'Vml'],
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'surface',
|
|
|
|
componentLayout: 'draw',
|
|
|
|
/**
|
|
* @cfg {Boolean} viewBox
|
|
* Turn on view box support which will scale and position items in the draw component to fit to the component while
|
|
* maintaining aspect ratio. Note that this scaling can override other sizing settings on your items.
|
|
*/
|
|
viewBox: true,
|
|
|
|
shrinkWrap: 3,
|
|
|
|
/**
|
|
* @cfg {Boolean} autoSize
|
|
* Turn on autoSize support which will set the bounding div's size to the natural size of the contents.
|
|
*/
|
|
autoSize: false,
|
|
|
|
/**
|
|
* @cfg {Object[]} gradients (optional) Define a set of gradients that can be used as `fill` property in sprites.
|
|
* The gradients array is an array of objects with the following properties:
|
|
*
|
|
* - `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
|
|
*
|
|
* ## Example
|
|
*
|
|
* gradients: [{
|
|
* id: 'gradientId',
|
|
* angle: 45,
|
|
* stops: {
|
|
* 0: {
|
|
* color: '#555'
|
|
* },
|
|
* 100: {
|
|
* color: '#ddd'
|
|
* }
|
|
* }
|
|
* }, {
|
|
* id: 'gradientId2',
|
|
* angle: 0,
|
|
* stops: {
|
|
* 0: {
|
|
* color: '#590'
|
|
* },
|
|
* 20: {
|
|
* color: '#599'
|
|
* },
|
|
* 100: {
|
|
* color: '#ddd'
|
|
* }
|
|
* }
|
|
* }]
|
|
*
|
|
* Then the sprites can use `gradientId` and `gradientId2` by setting the fill attributes to those ids, for example:
|
|
*
|
|
* sprite.setAttributes({
|
|
* fill: 'url(#gradientId)'
|
|
* }, true);
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.draw.Sprite[]} items
|
|
* Array of sprites or sprite config objects to add initially to the surface.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.draw.Surface} surface
|
|
* The Surface instance managed by this component.
|
|
*/
|
|
|
|
initComponent: function() {
|
|
this.callParent(arguments);
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#mousedown
|
|
*/
|
|
'mousedown',
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#mouseup
|
|
*/
|
|
'mouseup',
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#mousemove
|
|
*/
|
|
'mousemove',
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#mouseenter
|
|
*/
|
|
'mouseenter',
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#mouseleave
|
|
*/
|
|
'mouseleave',
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#click
|
|
*/
|
|
'click',
|
|
/**
|
|
* @event
|
|
* Event forwarded from {@link Ext.draw.Surface surface}.
|
|
* @inheritdoc Ext.draw.Surface#dblclick
|
|
*/
|
|
'dblclick'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Create the Surface on initial render
|
|
*/
|
|
onRender: function() {
|
|
var me = this,
|
|
viewBox = me.viewBox,
|
|
autoSize = me.autoSize,
|
|
bbox, items, width, height, x, y;
|
|
me.callParent(arguments);
|
|
|
|
if (me.createSurface() !== false) {
|
|
items = me.surface.items;
|
|
|
|
if (viewBox || autoSize) {
|
|
bbox = items.getBBox();
|
|
width = bbox.width;
|
|
height = bbox.height;
|
|
x = bbox.x;
|
|
y = bbox.y;
|
|
if (me.viewBox) {
|
|
me.surface.setViewBox(x, y, width, height);
|
|
} else {
|
|
me.autoSizeSurface();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
autoSizeSurface: function() {
|
|
var bbox = this.surface.items.getBBox();
|
|
this.setSurfaceSize(bbox.width, bbox.height);
|
|
},
|
|
|
|
setSurfaceSize: function (width, height) {
|
|
this.surface.setSize(width, height);
|
|
if (this.autoSize) {
|
|
var bbox = this.surface.items.getBBox();
|
|
this.surface.setViewBox(bbox.x, bbox.y - (+Ext.isOpera), width, height);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Create the Surface instance. Resolves the correct Surface implementation to
|
|
* instantiate based on the 'enginePriority' config. Once the Surface instance is
|
|
* created you can use the handle to that instance to add sprites. For example:
|
|
*
|
|
* drawComponent.surface.add(sprite);
|
|
*
|
|
* @private
|
|
*/
|
|
createSurface: function() {
|
|
var me = this,
|
|
cfg = Ext.applyIf({
|
|
renderTo: me.el,
|
|
height: me.height,
|
|
width: me.width,
|
|
items: me.items
|
|
}, me.initialConfig), surface;
|
|
|
|
// ensure we remove any listeners to prevent duplicate events since we refire them below
|
|
delete cfg.listeners;
|
|
if (!cfg.gradients) {
|
|
cfg.gradients = me.gradients;
|
|
}
|
|
surface = Ext.draw.Surface.create(cfg, me.enginePriority);
|
|
if (!surface) {
|
|
// In case we cannot create a surface, return false so we can stop
|
|
return false;
|
|
}
|
|
me.surface = surface;
|
|
|
|
|
|
function refire(eventName) {
|
|
return function(e) {
|
|
me.fireEvent(eventName, e);
|
|
};
|
|
}
|
|
|
|
surface.on({
|
|
scope: me,
|
|
mouseup: refire('mouseup'),
|
|
mousedown: refire('mousedown'),
|
|
mousemove: refire('mousemove'),
|
|
mouseenter: refire('mouseenter'),
|
|
mouseleave: refire('mouseleave'),
|
|
click: refire('click'),
|
|
dblclick: refire('dblclick')
|
|
});
|
|
},
|
|
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Clean up the Surface instance on component destruction
|
|
*/
|
|
onDestroy: function() {
|
|
Ext.destroy(this.surface);
|
|
this.callParent(arguments);
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.theme.Theme
|
|
*
|
|
* Provides chart theming.
|
|
*
|
|
* Used as mixins by Ext.chart.Chart.
|
|
*/
|
|
Ext.chart = Ext.chart || {};
|
|
|
|
Ext.define('Ext.chart.theme.Theme', (
|
|
|
|
// This callback is executed right after when the class is created. This scope refers to the newly created class itself
|
|
function() {
|
|
/* Theme constructor: takes either a complex object with styles like:
|
|
|
|
{
|
|
axis: {
|
|
fill: '#000',
|
|
'stroke-width': 1
|
|
},
|
|
axisLabelTop: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisLabelLeft: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisLabelRight: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisLabelBottom: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisTitleTop: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisTitleLeft: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisTitleRight: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
axisTitleBottom: {
|
|
fill: '#000',
|
|
font: '11px Arial'
|
|
},
|
|
series: {
|
|
'stroke-width': 1
|
|
},
|
|
seriesLabel: {
|
|
font: '12px Arial',
|
|
fill: '#333'
|
|
},
|
|
marker: {
|
|
stroke: '#555',
|
|
fill: '#000',
|
|
radius: 3,
|
|
size: 3
|
|
},
|
|
seriesThemes: [{
|
|
fill: '#C6DBEF'
|
|
}, {
|
|
fill: '#9ECAE1'
|
|
}, {
|
|
fill: '#6BAED6'
|
|
}, {
|
|
fill: '#4292C6'
|
|
}, {
|
|
fill: '#2171B5'
|
|
}, {
|
|
fill: '#084594'
|
|
}],
|
|
markerThemes: [{
|
|
fill: '#084594',
|
|
type: 'circle'
|
|
}, {
|
|
fill: '#2171B5',
|
|
type: 'cross'
|
|
}, {
|
|
fill: '#4292C6',
|
|
type: 'plus'
|
|
}]
|
|
}
|
|
|
|
...or also takes just an array of colors and creates the complex object:
|
|
|
|
{
|
|
colors: ['#aaa', '#bcd', '#eee']
|
|
}
|
|
|
|
...or takes just a base color and makes a theme from it
|
|
|
|
{
|
|
baseColor: '#bce'
|
|
}
|
|
|
|
To create a new theme you may add it to the Themes object:
|
|
|
|
Ext.chart.theme.MyNewTheme = Ext.extend(Object, {
|
|
constructor: function(config) {
|
|
Ext.chart.theme.call(this, config, {
|
|
baseColor: '#mybasecolor'
|
|
});
|
|
}
|
|
});
|
|
|
|
//Proposal:
|
|
Ext.chart.theme.MyNewTheme = Ext.chart.createTheme('#basecolor');
|
|
|
|
...and then to use it provide the name of the theme (as a lower case string) in the chart config.
|
|
|
|
{
|
|
theme: 'mynewtheme'
|
|
}
|
|
*/
|
|
|
|
(function() {
|
|
Ext.chart.theme = function(config, base) {
|
|
config = config || {};
|
|
var i = 0, d = Ext.Date.now(), l, colors, color,
|
|
seriesThemes, markerThemes,
|
|
seriesTheme, markerTheme,
|
|
key, gradients = [],
|
|
midColor, midL;
|
|
|
|
if (config.baseColor) {
|
|
midColor = Ext.draw.Color.fromString(config.baseColor);
|
|
midL = midColor.getHSL()[2];
|
|
if (midL < 0.15) {
|
|
midColor = midColor.getLighter(0.3);
|
|
} else if (midL < 0.3) {
|
|
midColor = midColor.getLighter(0.15);
|
|
} else if (midL > 0.85) {
|
|
midColor = midColor.getDarker(0.3);
|
|
} else if (midL > 0.7) {
|
|
midColor = midColor.getDarker(0.15);
|
|
}
|
|
config.colors = [ midColor.getDarker(0.3).toString(),
|
|
midColor.getDarker(0.15).toString(),
|
|
midColor.toString(),
|
|
midColor.getLighter(0.15).toString(),
|
|
midColor.getLighter(0.3).toString()];
|
|
|
|
delete config.baseColor;
|
|
}
|
|
if (config.colors) {
|
|
colors = config.colors.slice();
|
|
markerThemes = base.markerThemes;
|
|
seriesThemes = base.seriesThemes;
|
|
l = colors.length;
|
|
base.colors = colors;
|
|
for (; i < l; i++) {
|
|
color = colors[i];
|
|
markerTheme = markerThemes[i] || {};
|
|
seriesTheme = seriesThemes[i] || {};
|
|
markerTheme.fill = seriesTheme.fill = markerTheme.stroke = seriesTheme.stroke = color;
|
|
markerThemes[i] = markerTheme;
|
|
seriesThemes[i] = seriesTheme;
|
|
}
|
|
base.markerThemes = markerThemes.slice(0, l);
|
|
base.seriesThemes = seriesThemes.slice(0, l);
|
|
//the user is configuring something in particular (either markers, series or pie slices)
|
|
}
|
|
for (key in base) {
|
|
if (key in config) {
|
|
if (Ext.isObject(config[key]) && Ext.isObject(base[key])) {
|
|
Ext.apply(base[key], config[key]);
|
|
} else {
|
|
base[key] = config[key];
|
|
}
|
|
}
|
|
}
|
|
if (config.useGradients) {
|
|
colors = base.colors || (function () {
|
|
var ans = [];
|
|
for (i = 0, seriesThemes = base.seriesThemes, l = seriesThemes.length; i < l; i++) {
|
|
ans.push(seriesThemes[i].fill || seriesThemes[i].stroke);
|
|
}
|
|
return ans;
|
|
}());
|
|
for (i = 0, l = colors.length; i < l; i++) {
|
|
midColor = Ext.draw.Color.fromString(colors[i]);
|
|
if (midColor) {
|
|
color = midColor.getDarker(0.1).toString();
|
|
midColor = midColor.toString();
|
|
key = 'theme-' + midColor.substr(1) + '-' + color.substr(1) + '-' + d;
|
|
gradients.push({
|
|
id: key,
|
|
angle: 45,
|
|
stops: {
|
|
0: {
|
|
color: midColor.toString()
|
|
},
|
|
100: {
|
|
color: color.toString()
|
|
}
|
|
}
|
|
});
|
|
colors[i] = 'url(#' + key + ')';
|
|
}
|
|
}
|
|
base.gradients = gradients;
|
|
base.colors = colors;
|
|
}
|
|
/*
|
|
base.axis = Ext.apply(base.axis || {}, config.axis || {});
|
|
base.axisLabel = Ext.apply(base.axisLabel || {}, config.axisLabel || {});
|
|
base.axisTitle = Ext.apply(base.axisTitle || {}, config.axisTitle || {});
|
|
*/
|
|
Ext.apply(this, base);
|
|
};
|
|
}());
|
|
|
|
return {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
theme: 'Base',
|
|
themeAttrs: false,
|
|
|
|
initTheme: function(theme) {
|
|
var me = this,
|
|
themes = Ext.chart.theme,
|
|
key, gradients;
|
|
if (theme) {
|
|
theme = theme.split(':');
|
|
for (key in themes) {
|
|
if (key == theme[0]) {
|
|
gradients = theme[1] == 'gradients';
|
|
me.themeAttrs = new themes[key]({
|
|
useGradients: gradients
|
|
});
|
|
if (gradients) {
|
|
me.gradients = me.themeAttrs.gradients;
|
|
}
|
|
if (me.themeAttrs.background) {
|
|
me.background = me.themeAttrs.background;
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
})());
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.chart.MaskLayer', {
|
|
extend: Ext.Component ,
|
|
|
|
constructor: function(config) {
|
|
config = Ext.apply(config || {}, {
|
|
style: 'position:absolute;background-color:#ff9;cursor:crosshair;opacity:0.5;border:1px solid #00f;'
|
|
});
|
|
this.callParent([config]);
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.addEvents(
|
|
'mousedown',
|
|
'mouseup',
|
|
'mousemove',
|
|
'mouseenter',
|
|
'mouseleave'
|
|
);
|
|
},
|
|
|
|
initDraggable: function() {
|
|
this.callParent(arguments);
|
|
this.dd.onStart = function (e) {
|
|
var me = this,
|
|
comp = me.comp;
|
|
|
|
// Cache the start [X, Y] array
|
|
this.startPosition = comp.getPosition(true);
|
|
|
|
// If client Component has a ghost method to show a lightweight version of itself
|
|
// then use that as a drag proxy unless configured to liveDrag.
|
|
if (comp.ghost && !comp.liveDrag) {
|
|
me.proxy = comp.ghost();
|
|
me.dragTarget = me.proxy.header.el;
|
|
}
|
|
|
|
// Set the constrainTo Region before we start dragging.
|
|
if (me.constrain || me.constrainDelegate) {
|
|
me.constrainTo = me.calculateConstrainRegion();
|
|
}
|
|
};
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Defines a mask for a chart's series.
|
|
* The 'chart' member must be set prior to rendering.
|
|
*
|
|
* A Mask can be used to select a certain region in a chart.
|
|
* When enabled, the `select` event will be triggered when a
|
|
* region is selected by the mask, allowing the user to perform
|
|
* other tasks like zooming on that region, etc.
|
|
*
|
|
* In order to use the mask one has to set the Chart `mask` option to
|
|
* `true`, `vertical` or `horizontal`. Then a possible configuration for the
|
|
* listener could be:
|
|
*
|
|
* items: {
|
|
* xtype: 'chart',
|
|
* animate: true,
|
|
* store: store1,
|
|
* mask: 'horizontal',
|
|
* listeners: {
|
|
* select: {
|
|
* fn: function(me, selection) {
|
|
* me.setZoom(selection);
|
|
* me.mask.hide();
|
|
* }
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* In this example we zoom the chart to that particular region. You can also get
|
|
* a handle to a mask instance from the chart object. The `chart.mask` element is a
|
|
* `Ext.Panel`.
|
|
*
|
|
*/
|
|
Ext.define('Ext.chart.Mask', {
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean/String} mask
|
|
* Enables selecting a region on chart. True to enable any selection,
|
|
* 'horizontal' or 'vertical' to restrict the selection to X or Y axis.
|
|
*
|
|
* The mask in itself will do nothing but fire 'select' event.
|
|
* See {@link Ext.chart.Mask} for example.
|
|
*/
|
|
|
|
/**
|
|
* Creates new Mask.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
me.addEvents('select');
|
|
|
|
if (config) {
|
|
Ext.apply(me, config);
|
|
}
|
|
if (me.enableMask) {
|
|
me.on('afterrender', function() {
|
|
//create a mask layer component
|
|
var comp = new Ext.chart.MaskLayer({
|
|
renderTo: me.el,
|
|
hidden: true
|
|
});
|
|
comp.el.on({
|
|
'mousemove': function(e) {
|
|
me.onMouseMove(e);
|
|
},
|
|
'mouseup': function(e) {
|
|
me.onMouseUp(e);
|
|
}
|
|
});
|
|
comp.initDraggable();
|
|
me.maskType = me.mask;
|
|
me.mask = comp;
|
|
me.maskSprite = me.surface.add({
|
|
type: 'path',
|
|
path: ['M', 0, 0],
|
|
zIndex: 1001,
|
|
opacity: 0.6,
|
|
hidden: true,
|
|
stroke: '#00f',
|
|
cursor: 'crosshair'
|
|
});
|
|
}, me, { single: true });
|
|
}
|
|
},
|
|
|
|
onMouseUp: function(e) {
|
|
var me = this,
|
|
bbox = me.bbox || me.chartBBox,
|
|
sel;
|
|
me.maskMouseDown = false;
|
|
me.mouseDown = false;
|
|
if (me.mouseMoved) {
|
|
me.handleMouseEvent(e);
|
|
me.mouseMoved = false;
|
|
sel = me.maskSelection;
|
|
me.fireEvent('select', me, {
|
|
x: sel.x - bbox.x,
|
|
y: sel.y - bbox.y,
|
|
width: sel.width,
|
|
height: sel.height
|
|
});
|
|
}
|
|
},
|
|
|
|
onMouseDown: function(e) {
|
|
this.handleMouseEvent(e);
|
|
},
|
|
|
|
onMouseMove: function(e) {
|
|
this.handleMouseEvent(e);
|
|
},
|
|
|
|
handleMouseEvent: function(e) {
|
|
var me = this,
|
|
mask = me.maskType,
|
|
bbox = me.bbox || me.chartBBox,
|
|
x = bbox.x,
|
|
y = bbox.y,
|
|
math = Math,
|
|
floor = math.floor,
|
|
abs = math.abs,
|
|
min = math.min,
|
|
max = math.max,
|
|
height = floor(y + bbox.height),
|
|
width = floor(x + bbox.width),
|
|
staticX = e.getPageX() - me.el.getX(),
|
|
staticY = e.getPageY() - me.el.getY(),
|
|
maskMouseDown = me.maskMouseDown,
|
|
path;
|
|
|
|
staticX = max(staticX, x);
|
|
staticY = max(staticY, y);
|
|
staticX = min(staticX, width);
|
|
staticY = min(staticY, height);
|
|
|
|
if (e.type === 'mousedown') {
|
|
// remember the cursor location
|
|
me.mouseDown = true;
|
|
me.mouseMoved = false;
|
|
me.maskMouseDown = {
|
|
x: staticX,
|
|
y: staticY
|
|
};
|
|
}
|
|
else {
|
|
// mousedown or mouseup:
|
|
// track the cursor to display the selection
|
|
me.mouseMoved = me.mouseDown;
|
|
if (maskMouseDown && me.mouseDown) {
|
|
if (mask == 'horizontal') {
|
|
staticY = y;
|
|
maskMouseDown.y = height;
|
|
}
|
|
else if (mask == 'vertical') {
|
|
staticX = x;
|
|
maskMouseDown.x = width;
|
|
}
|
|
width = maskMouseDown.x - staticX;
|
|
height = maskMouseDown.y - staticY;
|
|
path = ['M', staticX, staticY, 'l', width, 0, 0, height, -width, 0, 'z'];
|
|
me.maskSelection = {
|
|
x: (width > 0 ? staticX : staticX + width) + me.el.getX(),
|
|
y: (height > 0 ? staticY : staticY + height) + me.el.getY(),
|
|
width: abs(width),
|
|
height: abs(height)
|
|
};
|
|
me.mask.updateBox(me.maskSelection);
|
|
me.mask.show();
|
|
me.maskSprite.setAttributes({
|
|
hidden: true
|
|
}, true);
|
|
}
|
|
else {
|
|
if (mask == 'horizontal') {
|
|
path = ['M', staticX, y, 'L', staticX, height];
|
|
}
|
|
else if (mask == 'vertical') {
|
|
path = ['M', x, staticY, 'L', width, staticY];
|
|
}
|
|
else {
|
|
path = ['M', staticX, y, 'L', staticX, height, 'M', x, staticY, 'L', width, staticY];
|
|
}
|
|
me.maskSprite.setAttributes({
|
|
path: path,
|
|
'stroke-width': mask === true ? 1 : 1,
|
|
hidden: false
|
|
}, true);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
onMouseLeave: function(e) {
|
|
var me = this;
|
|
me.mouseMoved = false;
|
|
me.mouseDown = false;
|
|
me.maskMouseDown = false;
|
|
me.mask.hide();
|
|
me.maskSprite.hide(true);
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @class Ext.chart.Navigation
|
|
*
|
|
* Handles panning and zooming capabilities.
|
|
*
|
|
* Used as mixin by Ext.chart.Chart.
|
|
*/
|
|
Ext.define('Ext.chart.Navigation', {
|
|
|
|
/**
|
|
* Zooms the chart to the specified selection range.
|
|
* Can be used with a selection mask. For example:
|
|
*
|
|
* items: {
|
|
* xtype: 'chart',
|
|
* animate: true,
|
|
* store: store1,
|
|
* mask: 'horizontal',
|
|
* listeners: {
|
|
* select: {
|
|
* fn: function(me, selection) {
|
|
* me.setZoom(selection);
|
|
* me.mask.hide();
|
|
* }
|
|
* }
|
|
* }
|
|
* }
|
|
*/
|
|
setZoom: function(zoomConfig) {
|
|
var me = this,
|
|
axesItems = me.axes.items,
|
|
i, ln, axis,
|
|
bbox = me.chartBBox,
|
|
xScale = bbox.width,
|
|
yScale = bbox.height,
|
|
zoomArea = {
|
|
x : zoomConfig.x - me.el.getX(),
|
|
y : zoomConfig.y - me.el.getY(),
|
|
width : zoomConfig.width,
|
|
height : zoomConfig.height
|
|
},
|
|
zoomer, ends, from, to, store, count, step, length, horizontal;
|
|
|
|
for (i = 0, ln = axesItems.length; i < ln; i++) {
|
|
axis = axesItems[i];
|
|
horizontal = (axis.position == 'bottom' || axis.position == 'top');
|
|
if (axis.type == 'Category') {
|
|
if (!store) {
|
|
store = me.getChartStore();
|
|
count = store.data.items.length;
|
|
}
|
|
zoomer = zoomArea;
|
|
length = axis.length;
|
|
step = Math.round(length / count);
|
|
if (horizontal) {
|
|
from = (zoomer.x ? Math.floor(zoomer.x / step) + 1 : 0);
|
|
to = (zoomer.x + zoomer.width) / step;
|
|
} else {
|
|
from = (zoomer.y ? Math.floor(zoomer.y / step) + 1 : 0);
|
|
to = (zoomer.y + zoomer.height) / step;
|
|
}
|
|
}
|
|
else {
|
|
zoomer = {
|
|
x : zoomArea.x / xScale,
|
|
y : zoomArea.y / yScale,
|
|
width : zoomArea.width / xScale,
|
|
height : zoomArea.height / yScale
|
|
}
|
|
ends = axis.calcEnds();
|
|
if (horizontal) {
|
|
from = (ends.to - ends.from) * zoomer.x + ends.from;
|
|
to = (ends.to - ends.from) * zoomer.width + from;
|
|
} else {
|
|
to = (ends.to - ends.from) * (1 - zoomer.y) + ends.from;
|
|
from = to - (ends.to - ends.from) * zoomer.height;
|
|
}
|
|
}
|
|
axis.minimum = from;
|
|
axis.maximum = to;
|
|
if (horizontal) {
|
|
if (axis.doConstrain && me.maskType != 'vertical') {
|
|
axis.doConstrain();
|
|
}
|
|
}
|
|
else {
|
|
if (axis.doConstrain && me.maskType != 'horizontal') {
|
|
axis.doConstrain();
|
|
}
|
|
}
|
|
}
|
|
me.redraw(false);
|
|
},
|
|
|
|
/**
|
|
* Restores the zoom to the original value. This can be used to reset
|
|
* the previous zoom state set by `setZoom`. For example:
|
|
*
|
|
* myChart.restoreZoom();
|
|
*/
|
|
restoreZoom: function() {
|
|
var me = this,
|
|
axesItems = me.axes.items,
|
|
i, ln, axis;
|
|
|
|
me.setSubStore(null);
|
|
for (i = 0, ln = axesItems.length; i < ln; i++) {
|
|
axis = axesItems[i];
|
|
delete axis.minimum;
|
|
delete axis.maximum;
|
|
}
|
|
me.redraw(false);
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.chart.Shape', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
singleton: true,
|
|
|
|
/* End Definitions */
|
|
|
|
circle: function (surface, opts) {
|
|
return surface.add(Ext.apply({
|
|
type: 'circle',
|
|
x: opts.x,
|
|
y: opts.y,
|
|
stroke: null,
|
|
radius: opts.radius
|
|
}, opts));
|
|
},
|
|
line: function (surface, opts) {
|
|
return surface.add(Ext.apply({
|
|
type: 'rect',
|
|
x: opts.x - opts.radius,
|
|
y: opts.y - opts.radius,
|
|
height: 2 * opts.radius,
|
|
width: 2 * opts.radius / 5
|
|
}, opts));
|
|
},
|
|
square: function (surface, opts) {
|
|
return surface.add(Ext.applyIf({
|
|
type: 'rect',
|
|
x: opts.x - opts.radius,
|
|
y: opts.y - opts.radius,
|
|
height: 2 * opts.radius,
|
|
width: 2 * opts.radius,
|
|
radius: null
|
|
}, opts));
|
|
},
|
|
triangle: function (surface, opts) {
|
|
opts.radius *= 1.75;
|
|
return surface.add(Ext.apply({
|
|
type: 'path',
|
|
stroke: null,
|
|
path: "M".concat(opts.x, ",", opts.y, "m0-", opts.radius * 0.58, "l", opts.radius * 0.5, ",", opts.radius * 0.87, "-", opts.radius, ",0z")
|
|
}, opts));
|
|
},
|
|
diamond: function (surface, opts) {
|
|
var r = opts.radius;
|
|
r *= 1.5;
|
|
return surface.add(Ext.apply({
|
|
type: 'path',
|
|
stroke: null,
|
|
path: ["M", opts.x, opts.y - r, "l", r, r, -r, r, -r, -r, r, -r, "z"]
|
|
}, opts));
|
|
},
|
|
cross: function (surface, opts) {
|
|
var r = opts.radius;
|
|
r = r / 1.7;
|
|
return surface.add(Ext.apply({
|
|
type: 'path',
|
|
stroke: null,
|
|
path: "M".concat(opts.x - r, ",", opts.y, "l", [-r, -r, r, -r, r, r, r, -r, r, r, -r, r, r, r, -r, r, -r, -r, -r, r, -r, -r, "z"])
|
|
}, opts));
|
|
},
|
|
plus: function (surface, opts) {
|
|
var r = opts.radius / 1.3;
|
|
return surface.add(Ext.apply({
|
|
type: 'path',
|
|
stroke: null,
|
|
path: "M".concat(opts.x - r / 2, ",", opts.y - r / 2, "l", [0, -r, r, 0, 0, r, r, 0, 0, r, -r, 0, 0, r, -r, 0, 0, -r, -r, 0, 0, -r, "z"])
|
|
}, opts));
|
|
},
|
|
arrow: function (surface, opts) {
|
|
var r = opts.radius;
|
|
return surface.add(Ext.apply({
|
|
type: 'path',
|
|
path: "M".concat(opts.x - r * 0.7, ",", opts.y - r * 0.4, "l", [r * 0.6, 0, 0, -r * 0.4, r, r * 0.8, -r, r * 0.8, 0, -r * 0.4, -r * 0.6, 0], "z")
|
|
}, opts));
|
|
},
|
|
drop: function (surface, x, y, text, size, angle) {
|
|
size = size || 30;
|
|
angle = angle || 0;
|
|
surface.add({
|
|
type: 'path',
|
|
path: ['M', x, y, 'l', size, 0, 'A', size * 0.4, size * 0.4, 0, 1, 0, x + size * 0.7, y - size * 0.7, 'z'],
|
|
fill: '#000',
|
|
stroke: 'none',
|
|
rotate: {
|
|
degrees: 22.5 - angle,
|
|
x: x,
|
|
y: y
|
|
}
|
|
});
|
|
angle = (angle + 90) * Math.PI / 180;
|
|
surface.add({
|
|
type: 'text',
|
|
x: x + size * Math.sin(angle) - 10, // Shift here, Not sure why.
|
|
y: y + size * Math.cos(angle) + 5,
|
|
text: text,
|
|
'font-size': size * 12 / 40,
|
|
stroke: 'none',
|
|
fill: '#fff'
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.LegendItem
|
|
* A single item of a legend (marker plus label)
|
|
*/
|
|
Ext.define('Ext.chart.LegendItem', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.draw.CompositeSprite ,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
// Controls Series visibility
|
|
hiddenSeries: false,
|
|
|
|
// These are cached for quick lookups
|
|
label: undefined,
|
|
|
|
// Position of the item, relative to the upper-left corner of the legend box
|
|
x: 0,
|
|
y: 0,
|
|
zIndex: 500,
|
|
|
|
// checks to make sure that a unit size follows the bold keyword in the font style value
|
|
boldRe: /bold\s\d{1,}.*/i,
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
this.createLegend(config);
|
|
},
|
|
|
|
/**
|
|
* Creates all the individual sprites for this legend item
|
|
*/
|
|
createLegend: function(config) {
|
|
var me = this,
|
|
series = me.series,
|
|
index = config.yFieldIndex;
|
|
|
|
me.label = me.createLabel(config);
|
|
me.createSeriesMarkers(config);
|
|
|
|
me.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
|
|
me.yFieldIndex = index;
|
|
|
|
// Add event listeners
|
|
me.on('mouseover', me.onMouseOver, me);
|
|
me.on('mouseout', me.onMouseOut, me);
|
|
me.on('mousedown', me.onMouseDown, me);
|
|
|
|
if (!series.visibleInLegend(index)) {
|
|
me.hiddenSeries = true;
|
|
me.label.setAttributes({
|
|
opacity: 0.5
|
|
}, true);
|
|
};
|
|
|
|
// Relative to 0,0 at first so that the bbox is calculated correctly
|
|
me.updatePosition({ x: 0, y: 0 });
|
|
},
|
|
|
|
/**
|
|
* @private Retrieves text to be displayed as item label.
|
|
*/
|
|
getLabelText: function() {
|
|
var me = this,
|
|
series = me.series,
|
|
idx = me.yFieldIndex;
|
|
|
|
function getSeriesProp(name) {
|
|
var val = series[name];
|
|
return (Ext.isArray(val) ? val[idx] : val);
|
|
}
|
|
|
|
return getSeriesProp('title') || getSeriesProp('yField');
|
|
},
|
|
|
|
/**
|
|
* @private Creates label sprite.
|
|
*/
|
|
createLabel: function(config) {
|
|
var me = this,
|
|
legend = me.legend;
|
|
|
|
return me.add('label', me.surface.add({
|
|
type: 'text',
|
|
x: 20,
|
|
y: 0,
|
|
zIndex: (me.zIndex || 0) + 2,
|
|
fill: legend.labelColor,
|
|
font: legend.labelFont,
|
|
text: me.getLabelText(),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}));
|
|
},
|
|
|
|
/**
|
|
* @private Creates Series marker Sprites.
|
|
*/
|
|
createSeriesMarkers: function(config) {
|
|
var me = this,
|
|
index = config.yFieldIndex,
|
|
series = me.series,
|
|
seriesType = series.type,
|
|
surface = me.surface,
|
|
z = me.zIndex;
|
|
|
|
// Line series - display as short line with optional marker in the middle
|
|
if (seriesType === 'line' || seriesType === 'scatter') {
|
|
if(seriesType === 'line') {
|
|
var seriesStyle = Ext.apply(series.seriesStyle, series.style);
|
|
me.drawLine(0.5, 0.5, 16.5, 0.5, z, seriesStyle, index);
|
|
};
|
|
|
|
if (series.showMarkers || seriesType === 'scatter') {
|
|
var markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
|
|
fill: series.getLegendColor(index)
|
|
});
|
|
me.drawMarker(8.5, 0.5, z, markerConfig);
|
|
}
|
|
}
|
|
// All other series types - display as filled box
|
|
else {
|
|
me.drawFilledBox(12, 12, z, index);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Creates line sprite for Line series.
|
|
*/
|
|
drawLine: function(fromX, fromY, toX, toY, z, seriesStyle, index) {
|
|
var me = this,
|
|
surface = me.surface,
|
|
series = me.series;
|
|
|
|
return me.add('line', surface.add({
|
|
type: 'path',
|
|
path: 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY,
|
|
zIndex: (z || 0) + 2,
|
|
"stroke-width": series.lineWidth,
|
|
"stroke-linejoin": "round",
|
|
"stroke-dasharray": series.dash,
|
|
stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}));
|
|
},
|
|
|
|
/**
|
|
* @private Creates series-shaped marker for Line and Scatter series.
|
|
*/
|
|
drawMarker: function(x, y, z, markerConfig) {
|
|
var me = this,
|
|
surface = me.surface,
|
|
series = me.series;
|
|
|
|
return me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
|
|
fill: markerConfig.fill,
|
|
x: x,
|
|
y: y,
|
|
zIndex: (z || 0) + 2,
|
|
radius: markerConfig.radius || markerConfig.size,
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}));
|
|
},
|
|
|
|
/**
|
|
* @private Creates box-shaped marker for all series but Line and Scatter.
|
|
*/
|
|
drawFilledBox: function(width, height, z, index) {
|
|
var me = this,
|
|
surface = me.surface,
|
|
series = me.series;
|
|
|
|
return me.add('box', surface.add({
|
|
type: 'rect',
|
|
zIndex: (z || 0) + 2,
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
fill: series.getLegendColor(index),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}));
|
|
},
|
|
|
|
/**
|
|
* @private Draws label in bold when mouse cursor is over the item.
|
|
*/
|
|
onMouseOver: function() {
|
|
var me = this;
|
|
|
|
me.label.setStyle({
|
|
'font-weight': 'bold'
|
|
});
|
|
me.series._index = me.yFieldIndex;
|
|
me.series.highlightItem();
|
|
},
|
|
|
|
/**
|
|
* @private Draws label in normal when mouse cursor leaves the item.
|
|
*/
|
|
onMouseOut: function() {
|
|
var me = this,
|
|
legend = me.legend,
|
|
boldRe = me.boldRe;
|
|
|
|
me.label.setStyle({
|
|
'font-weight': legend.labelFont && boldRe.test(legend.labelFont) ? 'bold' : 'normal'
|
|
});
|
|
me.series._index = me.yFieldIndex;
|
|
me.series.unHighlightItem();
|
|
},
|
|
|
|
/**
|
|
* @private Toggles Series visibility upon mouse click on the item.
|
|
*/
|
|
onMouseDown: function() {
|
|
var me = this,
|
|
index = me.yFieldIndex;
|
|
|
|
if (!me.hiddenSeries) {
|
|
me.series.hideAll(index);
|
|
me.label.setAttributes({
|
|
opacity: 0.5
|
|
}, true);
|
|
} else {
|
|
me.series.showAll(index);
|
|
me.label.setAttributes({
|
|
opacity: 1
|
|
}, true);
|
|
}
|
|
me.hiddenSeries = !me.hiddenSeries;
|
|
me.legend.chart.redraw();
|
|
},
|
|
|
|
/**
|
|
* Update the positions of all this item's sprites to match the root position
|
|
* of the legend box.
|
|
* @param {Object} relativeTo (optional) If specified, this object's 'x' and 'y' values will be used
|
|
* as the reference point for the relative positioning. Defaults to the Legend.
|
|
*/
|
|
updatePosition: function(relativeTo) {
|
|
var me = this,
|
|
items = me.items,
|
|
ln = items.length,
|
|
i = 0,
|
|
item;
|
|
if (!relativeTo) {
|
|
relativeTo = me.legend;
|
|
}
|
|
for (; i < ln; i++) {
|
|
item = items[i];
|
|
switch (item.type) {
|
|
case 'text':
|
|
item.setAttributes({
|
|
x: 20 + relativeTo.x + me.x,
|
|
y: relativeTo.y + me.y
|
|
}, true);
|
|
break;
|
|
case 'rect':
|
|
item.setAttributes({
|
|
translate: {
|
|
x: relativeTo.x + me.x,
|
|
y: relativeTo.y + me.y - 6
|
|
}
|
|
}, true);
|
|
break;
|
|
default:
|
|
item.setAttributes({
|
|
translate: {
|
|
x: relativeTo.x + me.x,
|
|
y: relativeTo.y + me.y
|
|
}
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.Legend
|
|
*
|
|
* Defines a legend for a chart's series.
|
|
* The 'chart' member must be set prior to rendering.
|
|
* The legend class displays a list of legend items each of them related with a
|
|
* series being rendered. In order to render the legend item of the proper series
|
|
* the series configuration object must have `showInLegend` set to true.
|
|
*
|
|
* The legend configuration object accepts a `position` as parameter.
|
|
* The `position` parameter can be `left`, `right`
|
|
* `top` or `bottom`. For example:
|
|
*
|
|
* legend: {
|
|
* position: 'right'
|
|
* },
|
|
*
|
|
* ## Example
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
|
|
* { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
|
|
* { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
|
|
* { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
|
|
* { 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* animate: true,
|
|
* store: store,
|
|
* shadow: true,
|
|
* theme: 'Category1',
|
|
* legend: {
|
|
* position: 'top'
|
|
* },
|
|
* axes: [
|
|
* {
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* title: 'Sample Values',
|
|
* grid: {
|
|
* odd: {
|
|
* opacity: 1,
|
|
* fill: '#ddd',
|
|
* stroke: '#bbb',
|
|
* 'stroke-width': 1
|
|
* }
|
|
* },
|
|
* minimum: 0,
|
|
* adjustMinimumByMajorUnit: 0
|
|
* },
|
|
* {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics',
|
|
* grid: true,
|
|
* label: {
|
|
* rotate: {
|
|
* degrees: 315
|
|
* }
|
|
* }
|
|
* }
|
|
* ],
|
|
* series: [{
|
|
* type: 'area',
|
|
* highlight: false,
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* style: {
|
|
* opacity: 0.93
|
|
* }
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.chart.Legend', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Boolean} visible
|
|
* Whether or not the legend should be displayed.
|
|
*/
|
|
visible: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} update
|
|
* If set to true the legend will be refreshed when the chart is.
|
|
* This is useful to update the legend items if series are
|
|
* added/removed/updated from the chart. Default is true.
|
|
*/
|
|
update: true,
|
|
|
|
/**
|
|
* @cfg {String} position
|
|
* The position of the legend in relation to the chart. One of: "top",
|
|
* "bottom", "left", "right", or "float". If set to "float", then the legend
|
|
* box will be positioned at the point denoted by the x and y parameters.
|
|
*/
|
|
position: 'bottom',
|
|
|
|
/**
|
|
* @cfg {Number} x
|
|
* X-position of the legend box. Used directly if position is set to "float", otherwise
|
|
* it will be calculated dynamically.
|
|
*/
|
|
x: 0,
|
|
|
|
/**
|
|
* @cfg {Number} y
|
|
* Y-position of the legend box. Used directly if position is set to "float", otherwise
|
|
* it will be calculated dynamically.
|
|
*/
|
|
y: 0,
|
|
|
|
/**
|
|
* @cfg {String} labelColor
|
|
* Color to be used for the legend labels, eg '#000'
|
|
*/
|
|
labelColor: '#000',
|
|
|
|
/**
|
|
* @cfg {String} labelFont
|
|
* Font to be used for the legend labels, eg '12px Helvetica'
|
|
*/
|
|
labelFont: '12px Helvetica, sans-serif',
|
|
|
|
/**
|
|
* @cfg {String} boxStroke
|
|
* Style of the stroke for the legend box
|
|
*/
|
|
boxStroke: '#000',
|
|
|
|
/**
|
|
* @cfg {String} boxStrokeWidth
|
|
* Width of the stroke for the legend box
|
|
*/
|
|
boxStrokeWidth: 1,
|
|
|
|
/**
|
|
* @cfg {String} boxFill
|
|
* Fill style for the legend box
|
|
*/
|
|
boxFill: '#FFF',
|
|
|
|
/**
|
|
* @cfg {Number} itemSpacing
|
|
* Amount of space between legend items
|
|
*/
|
|
itemSpacing: 10,
|
|
|
|
/**
|
|
* @cfg {Number} padding
|
|
* Amount of padding between the legend box's border and its items
|
|
*/
|
|
padding: 5,
|
|
|
|
// @private
|
|
width: 0,
|
|
// @private
|
|
height: 0,
|
|
|
|
/**
|
|
* @cfg {Number} boxZIndex
|
|
* Sets the z-index for the legend. Defaults to 100.
|
|
*/
|
|
boxZIndex: 100,
|
|
|
|
/**
|
|
* Creates new Legend.
|
|
* @param {Object} config (optional) Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
if (config) {
|
|
Ext.apply(me, config);
|
|
}
|
|
me.items = [];
|
|
/**
|
|
* Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.
|
|
* @type {Boolean}
|
|
*/
|
|
me.isVertical = ("left|right|float".indexOf(me.position) !== -1);
|
|
|
|
// cache these here since they may get modified later on
|
|
me.origX = me.x;
|
|
me.origY = me.y;
|
|
},
|
|
|
|
/**
|
|
* @private Create all the sprites for the legend
|
|
*/
|
|
create: function() {
|
|
var me = this,
|
|
seriesItems = me.chart.series.items,
|
|
i, ln, series;
|
|
|
|
me.createBox();
|
|
|
|
if (me.rebuild !== false) {
|
|
me.createItems();
|
|
}
|
|
|
|
if (!me.created && me.isDisplayed()) {
|
|
me.created = true;
|
|
|
|
// Listen for changes to series titles to trigger regeneration of the legend
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
series.on('titlechange', me.redraw, me);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Redraws the Legend
|
|
*/
|
|
redraw: function() {
|
|
var me = this;
|
|
|
|
me.create();
|
|
me.updatePosition();
|
|
},
|
|
|
|
/**
|
|
* @private Determine whether the legend should be displayed. Looks at the legend's 'visible' config,
|
|
* and also the 'showInLegend' config for each of the series.
|
|
*/
|
|
isDisplayed: function() {
|
|
return this.visible && this.chart.series.findIndex('showInLegend', true) !== -1;
|
|
},
|
|
|
|
/**
|
|
* @private Create the series markers and labels
|
|
*/
|
|
createItems: function() {
|
|
var me = this,
|
|
seriesItems = me.chart.series.items,
|
|
items = me.items,
|
|
fields, i, li, j, lj, series, item;
|
|
|
|
//remove all legend items
|
|
me.removeItems();
|
|
|
|
// Create all the item labels
|
|
for (i = 0, li = seriesItems.length; i < li; i++) {
|
|
series = seriesItems[i];
|
|
|
|
if (series.showInLegend) {
|
|
fields = [].concat(series.yField);
|
|
|
|
for (j = 0, lj = fields.length; j < lj; j++) {
|
|
item = me.createLegendItem(series, j);
|
|
items.push(item);
|
|
}
|
|
}
|
|
}
|
|
|
|
me.alignItems();
|
|
},
|
|
|
|
/**
|
|
* @private Removes all legend items.
|
|
*/
|
|
removeItems: function() {
|
|
var me = this,
|
|
items = me.items,
|
|
len = items ? items.length : 0,
|
|
i;
|
|
|
|
if (len) {
|
|
for (i = 0; i < len; i++) {
|
|
items[i].destroy();
|
|
}
|
|
}
|
|
|
|
//empty array
|
|
items.length = [];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Positions all items within Legend box.
|
|
*/
|
|
alignItems: function() {
|
|
var me = this,
|
|
padding = me.padding,
|
|
vertical = me.isVertical,
|
|
mfloor = Math.floor,
|
|
dim, maxWidth, maxHeight, totalWidth, totalHeight;
|
|
|
|
dim = me.updateItemDimensions();
|
|
|
|
maxWidth = dim.maxWidth;
|
|
maxHeight = dim.maxHeight;
|
|
totalWidth = dim.totalWidth;
|
|
totalHeight = dim.totalHeight;
|
|
|
|
// Store the collected dimensions for later
|
|
me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
|
|
me.height = mfloor((vertical ? totalHeight : maxHeight) + padding * 2);
|
|
},
|
|
|
|
updateItemDimensions: function() {
|
|
var me = this,
|
|
items = me.items,
|
|
padding = me.padding,
|
|
itemSpacing = me.itemSpacing,
|
|
maxWidth = 0,
|
|
maxHeight = 0,
|
|
totalWidth = 0,
|
|
totalHeight = 0,
|
|
vertical = me.isVertical,
|
|
mfloor = Math.floor,
|
|
mmax = Math.max,
|
|
spacing = 0,
|
|
i, l, item, bbox, width, height;
|
|
|
|
// Collect item dimensions and position each one
|
|
// properly in relation to the previous item
|
|
for (i = 0, l = items.length; i < l; i++) {
|
|
item = items[i];
|
|
|
|
bbox = item.getBBox();
|
|
|
|
//always measure from x=0, since not all markers go all the way to the left
|
|
width = bbox.width;
|
|
height = bbox.height;
|
|
|
|
spacing = (i === 0 ? 0 : itemSpacing);
|
|
|
|
// Set the item's position relative to the legend box
|
|
item.x = padding + mfloor(vertical ? 0 : totalWidth + spacing);
|
|
item.y = padding + mfloor(vertical ? totalHeight + spacing : 0) + height / 2;
|
|
|
|
// Collect cumulative dimensions
|
|
totalWidth += spacing + width;
|
|
totalHeight += spacing + height;
|
|
maxWidth = mmax(maxWidth, width);
|
|
maxHeight = mmax(maxHeight, height);
|
|
}
|
|
|
|
return {
|
|
totalWidth: totalWidth,
|
|
totalHeight: totalHeight,
|
|
maxWidth: maxWidth,
|
|
maxHeight: maxHeight
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private Creates single Legend Item
|
|
*/
|
|
createLegendItem: function(series, yFieldIndex) {
|
|
var me = this;
|
|
|
|
return new Ext.chart.LegendItem({
|
|
legend: me,
|
|
series: series,
|
|
surface: me.chart.surface,
|
|
yFieldIndex: yFieldIndex
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private Get the bounds for the legend's outer box
|
|
*/
|
|
getBBox: function() {
|
|
var me = this;
|
|
return {
|
|
x: Math.round(me.x) - me.boxStrokeWidth / 2,
|
|
y: Math.round(me.y) - me.boxStrokeWidth / 2,
|
|
width: me.width + me.boxStrokeWidth,
|
|
height: me.height + me.boxStrokeWidth
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private Create the box around the legend items
|
|
*/
|
|
createBox: function() {
|
|
var me = this,
|
|
box, bbox;
|
|
|
|
if (me.boxSprite) {
|
|
me.boxSprite.destroy();
|
|
}
|
|
|
|
bbox = me.getBBox();
|
|
//if some of the dimensions are NaN this means that we
|
|
//cannot set a specific width/height for the legend
|
|
//container. One possibility for this is that there are
|
|
//actually no items to show in the legend, and the legend
|
|
//should be hidden.
|
|
if (isNaN(bbox.width) || isNaN(bbox.height)) {
|
|
me.boxSprite = false;
|
|
return;
|
|
}
|
|
|
|
box = me.boxSprite = me.chart.surface.add(Ext.apply({
|
|
type: 'rect',
|
|
stroke: me.boxStroke,
|
|
"stroke-width": me.boxStrokeWidth,
|
|
fill: me.boxFill,
|
|
zIndex: me.boxZIndex
|
|
}, bbox));
|
|
|
|
box.redraw();
|
|
},
|
|
|
|
/**
|
|
* @private Calculates Legend position with respect to other Chart elements.
|
|
*/
|
|
calcPosition: function() {
|
|
var me = this,
|
|
x, y,
|
|
legendWidth = me.width,
|
|
legendHeight = me.height,
|
|
chart = me.chart,
|
|
chartBBox = chart.chartBBox,
|
|
insets = chart.insetPadding,
|
|
chartWidth = chartBBox.width - (insets * 2),
|
|
chartHeight = chartBBox.height - (insets * 2),
|
|
chartX = chartBBox.x + insets,
|
|
chartY = chartBBox.y + insets,
|
|
surface = chart.surface,
|
|
mfloor = Math.floor;
|
|
|
|
// Find the position based on the dimensions
|
|
switch(me.position) {
|
|
case "left":
|
|
x = insets;
|
|
y = mfloor(chartY + chartHeight / 2 - legendHeight / 2);
|
|
break;
|
|
case "right":
|
|
x = mfloor(surface.width - legendWidth) - insets;
|
|
y = mfloor(chartY + chartHeight / 2 - legendHeight / 2);
|
|
break;
|
|
case "top":
|
|
x = mfloor(chartX + chartWidth / 2 - legendWidth / 2);
|
|
y = insets;
|
|
break;
|
|
case "bottom":
|
|
x = mfloor(chartX + chartWidth / 2 - legendWidth / 2);
|
|
y = mfloor(surface.height - legendHeight) - insets;
|
|
break;
|
|
default:
|
|
x = mfloor(me.origX) + insets;
|
|
y = mfloor(me.origY) + insets;
|
|
}
|
|
|
|
return { x: x, y: y };
|
|
},
|
|
|
|
/**
|
|
* @private Update the position of all the legend's sprites to match its current x/y values
|
|
*/
|
|
updatePosition: function() {
|
|
var me = this,
|
|
items = me.items,
|
|
pos, i, l, bbox;
|
|
|
|
if (me.isDisplayed()) {
|
|
// Find the position based on the dimensions
|
|
pos = me.calcPosition();
|
|
|
|
me.x = pos.x;
|
|
me.y = pos.y;
|
|
|
|
// Update the position of each item
|
|
for (i = 0, l = items.length; i < l; i++) {
|
|
items[i].updatePosition();
|
|
}
|
|
|
|
bbox = me.getBBox();
|
|
|
|
//if some of the dimensions are NaN this means that we
|
|
//cannot set a specific width/height for the legend
|
|
//container. One possibility for this is that there are
|
|
//actually no items to show in the legend, and the legend
|
|
//should be hidden.
|
|
if (isNaN(bbox.width) || isNaN(bbox.height)) {
|
|
if (me.boxSprite) {
|
|
me.boxSprite.hide(true);
|
|
}
|
|
}
|
|
else {
|
|
if (!me.boxSprite) {
|
|
me.createBox();
|
|
}
|
|
|
|
// Update the position of the outer box
|
|
me.boxSprite.setAttributes(bbox, true);
|
|
me.boxSprite.show(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/** toggle
|
|
* @param {Boolean} show Whether to show or hide the legend.
|
|
*
|
|
*/
|
|
toggle: function(show) {
|
|
var me = this,
|
|
i = 0,
|
|
items = me.items,
|
|
len = items.length;
|
|
|
|
if (me.boxSprite) {
|
|
if (show) {
|
|
me.boxSprite.show(true);
|
|
} else {
|
|
me.boxSprite.hide(true);
|
|
}
|
|
}
|
|
|
|
for (; i < len; ++i) {
|
|
if (show) {
|
|
items[i].show(true);
|
|
} else {
|
|
items[i].hide(true);
|
|
}
|
|
}
|
|
|
|
me.visible = show;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides default colors for non-specified things. Should be sub-classed when creating new themes.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.chart.theme.Base', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function(config) {
|
|
var ident = Ext.identityFn;
|
|
Ext.chart.theme.call(this, config, {
|
|
background: false,
|
|
axis: {
|
|
stroke: '#444',
|
|
'stroke-width': 1
|
|
},
|
|
axisLabelTop: {
|
|
fill: '#444',
|
|
font: '12px Arial, Helvetica, sans-serif',
|
|
spacing: 2,
|
|
padding: 5,
|
|
renderer: ident
|
|
},
|
|
axisLabelRight: {
|
|
fill: '#444',
|
|
font: '12px Arial, Helvetica, sans-serif',
|
|
spacing: 2,
|
|
padding: 5,
|
|
renderer: ident
|
|
},
|
|
axisLabelBottom: {
|
|
fill: '#444',
|
|
font: '12px Arial, Helvetica, sans-serif',
|
|
spacing: 2,
|
|
padding: 5,
|
|
renderer: ident
|
|
},
|
|
axisLabelLeft: {
|
|
fill: '#444',
|
|
font: '12px Arial, Helvetica, sans-serif',
|
|
spacing: 2,
|
|
padding: 5,
|
|
renderer: ident
|
|
},
|
|
axisTitleTop: {
|
|
font: 'bold 18px Arial',
|
|
fill: '#444'
|
|
},
|
|
axisTitleRight: {
|
|
font: 'bold 18px Arial',
|
|
fill: '#444',
|
|
rotate: {
|
|
x:0, y:0,
|
|
degrees: 270
|
|
}
|
|
},
|
|
axisTitleBottom: {
|
|
font: 'bold 18px Arial',
|
|
fill: '#444'
|
|
},
|
|
axisTitleLeft: {
|
|
font: 'bold 18px Arial',
|
|
fill: '#444',
|
|
rotate: {
|
|
x:0, y:0,
|
|
degrees: 270
|
|
}
|
|
},
|
|
series: {
|
|
'stroke-width': 0
|
|
},
|
|
seriesLabel: {
|
|
font: '12px Arial',
|
|
fill: '#333'
|
|
},
|
|
marker: {
|
|
stroke: '#555',
|
|
radius: 3,
|
|
size: 3
|
|
},
|
|
colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
|
|
seriesThemes: [{
|
|
fill: "#115fa6"
|
|
}, {
|
|
fill: "#94ae0a"
|
|
}, {
|
|
fill: "#a61120"
|
|
}, {
|
|
fill: "#ff8809"
|
|
}, {
|
|
fill: "#ffd13e"
|
|
}, {
|
|
fill: "#a61187"
|
|
}, {
|
|
fill: "#24ad9a"
|
|
}, {
|
|
fill: "#7c7474"
|
|
}, {
|
|
fill: "#115fa6"
|
|
}, {
|
|
fill: "#94ae0a"
|
|
}, {
|
|
fill: "#a61120"
|
|
}, {
|
|
fill: "#ff8809"
|
|
}, {
|
|
fill: "#ffd13e"
|
|
}, {
|
|
fill: "#a61187"
|
|
}, {
|
|
fill: "#24ad9a"
|
|
}, {
|
|
fill: "#7c7474"
|
|
}, {
|
|
fill: "#a66111"
|
|
}],
|
|
markerThemes: [{
|
|
fill: "#115fa6",
|
|
type: 'circle'
|
|
}, {
|
|
fill: "#94ae0a",
|
|
type: 'cross'
|
|
}, {
|
|
fill: "#115fa6",
|
|
type: 'plus'
|
|
}, {
|
|
fill: "#94ae0a",
|
|
type: 'circle'
|
|
}, {
|
|
fill: "#a61120",
|
|
type: 'cross'
|
|
}]
|
|
});
|
|
}
|
|
}, function() {
|
|
var palette = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'],
|
|
names = ['Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow'],
|
|
i = 0, j = 0, l = palette.length, themes = Ext.chart.theme,
|
|
categories = [['#f0a50a', '#c20024', '#2044ba', '#810065', '#7eae29'],
|
|
['#6d9824', '#87146e', '#2a9196', '#d39006', '#1e40ac'],
|
|
['#fbbc29', '#ce2e4e', '#7e0062', '#158b90', '#57880e'],
|
|
['#ef5773', '#fcbd2a', '#4f770d', '#1d3eaa', '#9b001f'],
|
|
['#7eae29', '#fdbe2a', '#910019', '#27b4bc', '#d74dbc'],
|
|
['#44dce1', '#0b2592', '#996e05', '#7fb325', '#b821a1']],
|
|
cats = categories.length;
|
|
|
|
//Create themes from base colors
|
|
for (; i < l; i++) {
|
|
themes[names[i]] = (function(color) {
|
|
return Ext.extend(themes.Base, {
|
|
constructor: function(config) {
|
|
themes.Base.prototype.constructor.call(this, Ext.apply({
|
|
baseColor: color
|
|
}, config));
|
|
}
|
|
});
|
|
}(palette[i]));
|
|
}
|
|
|
|
//Create theme from color array
|
|
for (i = 0; i < cats; i++) {
|
|
themes['Category' + (i + 1)] = (function(category) {
|
|
return Ext.extend(themes.Base, {
|
|
constructor: function(config) {
|
|
themes.Base.prototype.constructor.call(this, Ext.apply({
|
|
colors: category
|
|
}, config));
|
|
}
|
|
});
|
|
}(categories[i]));
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Charts provide a flexible way to achieve a wide range of data visualization capablitities.
|
|
* Each Chart gets its data directly from a {@link Ext.data.Store Store}, and automatically
|
|
* updates its display whenever data in the Store changes. In addition, the look and feel
|
|
* of a Chart can be customized using {@link Ext.chart.theme.Theme Theme}s.
|
|
*
|
|
* ## Creating a Simple Chart
|
|
*
|
|
* Every Chart has three key parts - a {@link Ext.data.Store Store} that contains the data,
|
|
* an array of {@link Ext.chart.axis.Axis Axes} which define the boundaries of the Chart,
|
|
* and one or more {@link Ext.chart.series.Series Series} to handle the visual rendering of the data points.
|
|
*
|
|
* ### 1. Creating a Store
|
|
*
|
|
* The first step is to create a {@link Ext.data.Model Model} that represents the type of
|
|
* data that will be displayed in the Chart. For example the data for a chart that displays
|
|
* a weather forecast could be represented as a series of "WeatherPoint" data points with
|
|
* two fields - "temperature", and "date":
|
|
*
|
|
* Ext.define('WeatherPoint', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['temperature', 'date']
|
|
* });
|
|
*
|
|
* Next a {@link Ext.data.Store Store} must be created. The store contains a collection of "WeatherPoint" Model instances.
|
|
* The data could be loaded dynamically, but for sake of ease this example uses inline data:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'WeatherPoint',
|
|
* data: [
|
|
* { temperature: 58, date: new Date(2011, 1, 1, 8) },
|
|
* { temperature: 63, date: new Date(2011, 1, 1, 9) },
|
|
* { temperature: 73, date: new Date(2011, 1, 1, 10) },
|
|
* { temperature: 78, date: new Date(2011, 1, 1, 11) },
|
|
* { temperature: 81, date: new Date(2011, 1, 1, 12) }
|
|
* ]
|
|
* });
|
|
*
|
|
* For additional information on Models and Stores please refer to the [Data Guide](#/guide/data).
|
|
*
|
|
* ### 2. Creating the Chart object
|
|
*
|
|
* Now that a Store has been created it can be used in a Chart:
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 400,
|
|
* height: 300,
|
|
* store: store
|
|
* });
|
|
*
|
|
* That's all it takes to create a Chart instance that is backed by a Store.
|
|
* However, if the above code is run in a browser, a blank screen will be displayed.
|
|
* This is because the two pieces that are responsible for the visual display,
|
|
* the Chart's {@link #cfg-axes axes} and {@link #cfg-series series}, have not yet been defined.
|
|
*
|
|
* ### 3. Configuring the Axes
|
|
*
|
|
* {@link Ext.chart.axis.Axis Axes} are the lines that define the boundaries of the data points that a Chart can display.
|
|
* This example uses one of the most common Axes configurations - a horizontal "x" axis, and a vertical "y" axis:
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* ...
|
|
* axes: [
|
|
* {
|
|
* title: 'Temperature',
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['temperature'],
|
|
* minimum: 0,
|
|
* maximum: 100
|
|
* },
|
|
* {
|
|
* title: 'Time',
|
|
* type: 'Time',
|
|
* position: 'bottom',
|
|
* fields: ['date'],
|
|
* dateFormat: 'ga'
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* The "Temperature" axis is a vertical {@link Ext.chart.axis.Numeric Numeric Axis} and is positioned on the left edge of the Chart.
|
|
* It represents the bounds of the data contained in the "WeatherPoint" Model's "temperature" field that was
|
|
* defined above. The minimum value for this axis is "0", and the maximum is "100".
|
|
*
|
|
* The horizontal axis is a {@link Ext.chart.axis.Time Time Axis} and is positioned on the bottom edge of the Chart.
|
|
* It represents the bounds of the data contained in the "WeatherPoint" Model's "date" field.
|
|
* The {@link Ext.chart.axis.Time#cfg-dateFormat dateFormat}
|
|
* configuration tells the Time Axis how to format it's labels.
|
|
*
|
|
* Here's what the Chart looks like now that it has its Axes configured:
|
|
*
|
|
* {@img Ext.chart.Chart/Ext.chart.Chart1.png Chart Axes}
|
|
*
|
|
* ### 4. Configuring the Series
|
|
*
|
|
* The final step in creating a simple Chart is to configure one or more {@link Ext.chart.series.Series Series}.
|
|
* Series are responsible for the visual representation of the data points contained in the Store.
|
|
* This example only has one Series:
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* ...
|
|
* axes: [
|
|
* ...
|
|
* ],
|
|
* series: [
|
|
* {
|
|
* type: 'line',
|
|
* xField: 'date',
|
|
* yField: 'temperature'
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* This Series is a {@link Ext.chart.series.Line Line Series}, and it uses the "date" and "temperature" fields
|
|
* from the "WeatherPoint" Models in the Store to plot its data points:
|
|
*
|
|
* {@img Ext.chart.Chart/Ext.chart.Chart2.png Line Series}
|
|
*
|
|
* See the [Line Charts Example](#!/example/charts/Charts.html) for a live demo.
|
|
*
|
|
* ## Themes
|
|
*
|
|
* The color scheme for a Chart can be easily changed using the {@link #cfg-theme theme} configuration option:
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* ...
|
|
* theme: 'Green',
|
|
* ...
|
|
* });
|
|
*
|
|
* {@img Ext.chart.Chart/Ext.chart.Chart3.png Green Theme}
|
|
*
|
|
* For more information on Charts please refer to the [Charting Guide](#/guide/charting).
|
|
*/
|
|
Ext.define('Ext.chart.Chart', {
|
|
extend: Ext.draw.Component ,
|
|
|
|
alias: 'widget.chart',
|
|
|
|
mixins: {
|
|
themeManager: Ext.chart.theme.Theme ,
|
|
mask: Ext.chart.Mask ,
|
|
navigation: Ext.chart.Navigation ,
|
|
bindable: Ext.util.Bindable ,
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
// @private
|
|
viewBox: false,
|
|
|
|
/**
|
|
* @cfg {String} theme
|
|
* The name of the theme to be used. A theme defines the colors and other visual displays of tick marks
|
|
* on axis, text, title text, line colors, marker colors and styles, etc. Possible theme values are 'Base', 'Green',
|
|
* 'Sky', 'Red', 'Purple', 'Blue', 'Yellow' and also six category themes 'Category1' to 'Category6'. Default value
|
|
* is 'Base'.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} animate
|
|
* True for the default animation (easing: 'ease' and duration: 500) or a standard animation config
|
|
* object to be used for default chart animations. Defaults to false.
|
|
*/
|
|
animate: false,
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} legend
|
|
* True for the default legend display or a legend config object. Defaults to false.
|
|
*/
|
|
legend: false,
|
|
|
|
/**
|
|
* @cfg {Number} insetPadding
|
|
* The amount of inset padding in pixels for the chart. Defaults to 10.
|
|
*/
|
|
insetPadding: 10,
|
|
|
|
/**
|
|
* @cfg {Object/Boolean} background
|
|
* The chart background. This can be a gradient object, image, or color. Defaults to false for no
|
|
* background. For example, if `background` were to be a color we could set the object as
|
|
*
|
|
* background: {
|
|
* //color string
|
|
* fill: '#ccc'
|
|
* }
|
|
*
|
|
* You can specify an image by using:
|
|
*
|
|
* background: {
|
|
* image: 'http://path.to.image/'
|
|
* }
|
|
*
|
|
* Also you can specify a gradient by using the gradient object syntax:
|
|
*
|
|
* background: {
|
|
* gradient: {
|
|
* id: 'gradientId',
|
|
* angle: 45,
|
|
* stops: {
|
|
* 0: {
|
|
* color: '#555'
|
|
* }
|
|
* 100: {
|
|
* color: '#ddd'
|
|
* }
|
|
* }
|
|
* }
|
|
* }
|
|
*/
|
|
background: false,
|
|
|
|
/**
|
|
* @cfg {Object[]} gradients
|
|
* Define a set of gradients that can be used as `fill` property in sprites. The gradients array is an
|
|
* array of objects with the following properties:
|
|
*
|
|
* - **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:
|
|
*
|
|
* gradients: [{
|
|
* id: 'gradientId',
|
|
* angle: 45,
|
|
* stops: {
|
|
* 0: {
|
|
* color: '#555'
|
|
* },
|
|
* 100: {
|
|
* color: '#ddd'
|
|
* }
|
|
* }
|
|
* }, {
|
|
* id: 'gradientId2',
|
|
* angle: 0,
|
|
* stops: {
|
|
* 0: {
|
|
* color: '#590'
|
|
* },
|
|
* 20: {
|
|
* color: '#599'
|
|
* },
|
|
* 100: {
|
|
* color: '#ddd'
|
|
* }
|
|
* }
|
|
* }]
|
|
*
|
|
* Then the sprites can use `gradientId` and `gradientId2` by setting the fill attributes to those ids, for example:
|
|
*
|
|
* sprite.setAttributes({
|
|
* fill: 'url(#gradientId)'
|
|
* }, true);
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.data.Store} store
|
|
* The store that supplies data to this chart.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.chart.series.Series[]} series
|
|
* Array of {@link Ext.chart.series.Series Series} instances or config objects. For example:
|
|
*
|
|
* series: [{
|
|
* type: 'column',
|
|
* axis: 'left',
|
|
* listeners: {
|
|
* 'afterrender': function() {
|
|
* console('afterrender');
|
|
* }
|
|
* },
|
|
* xField: 'category',
|
|
* yField: 'data1'
|
|
* }]
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.chart.axis.Axis[]} axes
|
|
* Array of {@link Ext.chart.axis.Axis Axis} instances or config objects. For example:
|
|
*
|
|
* axes: [{
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1'],
|
|
* title: 'Number of Hits',
|
|
* minimum: 0,
|
|
* //one minor tick between two major ticks
|
|
* minorTickSteps: 1
|
|
* }, {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Month of the Year'
|
|
* }]
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
defaultAnim;
|
|
|
|
config = Ext.apply({}, config);
|
|
me.initTheme(config.theme || me.theme);
|
|
if (me.gradients) {
|
|
Ext.apply(config, { gradients: me.gradients });
|
|
}
|
|
if (me.background) {
|
|
Ext.apply(config, { background: me.background });
|
|
}
|
|
if (config.animate) {
|
|
defaultAnim = {
|
|
easing: 'ease',
|
|
duration: 500
|
|
};
|
|
if (Ext.isObject(config.animate)) {
|
|
config.animate = Ext.applyIf(config.animate, defaultAnim);
|
|
}
|
|
else {
|
|
config.animate = defaultAnim;
|
|
}
|
|
}
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
if (config.enableMask) {
|
|
me.mixins.mask.constructor.call(me);
|
|
}
|
|
me.mixins.navigation.constructor.call(me);
|
|
me.callParent([config]);
|
|
},
|
|
|
|
getChartStore: function(){
|
|
return this.substore || this.store;
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
axes,
|
|
series;
|
|
me.callParent();
|
|
me.addEvents(
|
|
'itemmousedown',
|
|
'itemmouseup',
|
|
'itemmouseover',
|
|
'itemmouseout',
|
|
'itemclick',
|
|
'itemdblclick',
|
|
'itemdragstart',
|
|
'itemdrag',
|
|
'itemdragend',
|
|
/**
|
|
* @event beforerefresh
|
|
* Fires before a refresh to the chart data is called. If the beforerefresh handler returns false the
|
|
* {@link #event-refresh} action will be cancelled.
|
|
* @param {Ext.chart.Chart} this
|
|
*/
|
|
'beforerefresh',
|
|
/**
|
|
* @event refresh
|
|
* Fires after the chart data has been refreshed.
|
|
* @param {Ext.chart.Chart} this
|
|
*/
|
|
'refresh'
|
|
);
|
|
Ext.applyIf(me, {
|
|
zoom: {
|
|
width: 1,
|
|
height: 1,
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
});
|
|
me.maxGutters = { left: 0, right: 0, bottom: 0, top: 0 };
|
|
me.store = Ext.data.StoreManager.lookup(me.store);
|
|
axes = me.axes;
|
|
me.axes = new Ext.util.MixedCollection(false, function(a) { return a.position; });
|
|
if (axes) {
|
|
me.axes.addAll(axes);
|
|
}
|
|
series = me.series;
|
|
me.series = new Ext.util.MixedCollection(false, function(a) { return a.seriesId || (a.seriesId = Ext.id(null, 'ext-chart-series-')); });
|
|
if (series) {
|
|
me.series.addAll(series);
|
|
}
|
|
if (me.legend !== false) {
|
|
me.legend = new Ext.chart.Legend(Ext.applyIf({chart:me}, me.legend));
|
|
}
|
|
|
|
me.on({
|
|
mousemove: me.onMouseMove,
|
|
mouseleave: me.onMouseLeave,
|
|
mousedown: me.onMouseDown,
|
|
mouseup: me.onMouseUp,
|
|
click: me.onClick,
|
|
dblclick: me.onDblClick,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
// @private overrides the component method to set the correct dimensions to the chart.
|
|
afterComponentLayout: function(width, height, oldWidth, oldHeight) {
|
|
var me = this;
|
|
if (Ext.isNumber(width) && Ext.isNumber(height)) {
|
|
if (width !== oldWidth || height !== oldHeight) {
|
|
me.curWidth = width;
|
|
me.curHeight = height;
|
|
me.redraw(true);
|
|
me.needsRedraw = false;
|
|
} else if (me.needsRedraw) {
|
|
me.redraw();
|
|
me.needsRedraw = false;
|
|
}
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Redraws the chart. If animations are set this will animate the chart too.
|
|
* @param {Boolean} resize (optional) flag which changes the default origin points of the chart for animations.
|
|
*/
|
|
redraw: function(resize) {
|
|
var me = this,
|
|
seriesItems = me.series.items,
|
|
seriesLen = seriesItems.length,
|
|
axesItems = me.axes.items,
|
|
axesLen = axesItems.length,
|
|
themeIndex = 0,
|
|
i, item,
|
|
chartBBox = me.chartBBox = {
|
|
x: 0,
|
|
y: 0,
|
|
height: me.curHeight,
|
|
width: me.curWidth
|
|
},
|
|
legend = me.legend,
|
|
series;
|
|
|
|
me.surface.setSize(chartBBox.width, chartBBox.height);
|
|
// Instantiate Series and Axes
|
|
for (i = 0; i < seriesLen; i++) {
|
|
item = seriesItems[i];
|
|
if (!item.initialized) {
|
|
series = me.initializeSeries(item, i, themeIndex);
|
|
} else {
|
|
series = item;
|
|
}
|
|
// Allow the series to react to a redraw, for example, a pie series
|
|
// backed by a remote data set needs to build legend labels correctly
|
|
series.onRedraw();
|
|
// For things like stacked bar charts, a single series can consume
|
|
// multiple colors from the index, so we compensate for it here
|
|
if (Ext.isArray(item.yField)) {
|
|
themeIndex += item.yField.length;
|
|
} else {
|
|
++themeIndex;
|
|
}
|
|
}
|
|
for (i = 0; i < axesLen; i++) {
|
|
item = axesItems[i];
|
|
if (!item.initialized) {
|
|
me.initializeAxis(item);
|
|
}
|
|
}
|
|
//process all views (aggregated data etc) on stores
|
|
//before rendering.
|
|
for (i = 0; i < axesLen; i++) {
|
|
axesItems[i].processView();
|
|
}
|
|
for (i = 0; i < axesLen; i++) {
|
|
axesItems[i].drawAxis(true);
|
|
}
|
|
|
|
// Create legend if not already created
|
|
if (legend !== false && legend.visible) {
|
|
if (legend.update || !legend.created) {
|
|
legend.create();
|
|
}
|
|
}
|
|
|
|
// Place axes properly, including influence from each other
|
|
me.alignAxes();
|
|
|
|
// Reposition legend based on new axis alignment
|
|
if (legend !== false && legend.visible) {
|
|
legend.updatePosition();
|
|
}
|
|
|
|
// Find the max gutters
|
|
me.getMaxGutters();
|
|
|
|
// Draw axes and series
|
|
me.resizing = !!resize;
|
|
|
|
for (i = 0; i < axesLen; i++) {
|
|
axesItems[i].drawAxis();
|
|
}
|
|
for (i = 0; i < seriesLen; i++) {
|
|
me.drawCharts(seriesItems[i]);
|
|
}
|
|
me.resizing = false;
|
|
},
|
|
|
|
// @private set the store after rendering the chart.
|
|
afterRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.categoryNames) {
|
|
me.setCategoryNames(me.categoryNames);
|
|
}
|
|
|
|
me.bindStore(me.store, true);
|
|
me.refresh();
|
|
|
|
if (me.surface.engine === 'Vml') {
|
|
me.on('added', me.onAddedVml, me);
|
|
me.mon(me.hierarchyEventSource, 'added', me.onContainerAddedVml, me);
|
|
}
|
|
},
|
|
|
|
// When using a vml surface we need to redraw when this chart or one of its ancestors
|
|
// is moved to a new container after render, because moving the vml chart causes the
|
|
// vml elements to go haywire, some displaing incorrectly or not displaying at all.
|
|
// This appears to be caused by the component being moved to the detached body element
|
|
// before being added to the new container.
|
|
onAddedVml: function() {
|
|
this.needsRedraw = true; // redraw after component layout
|
|
},
|
|
|
|
onContainerAddedVml: function(container) {
|
|
if (this.isDescendantOf(container)) {
|
|
this.needsRedraw = true; // redraw after component layout
|
|
}
|
|
},
|
|
|
|
// @private get x and y position of the mouse cursor.
|
|
getEventXY: function(e) {
|
|
var me = this,
|
|
box = this.surface.getRegion(),
|
|
pageXY = e.getXY(),
|
|
x = pageXY[0] - box.left,
|
|
y = pageXY[1] - box.top;
|
|
return [x, y];
|
|
},
|
|
|
|
onClick: function(e) {
|
|
this.handleClick('itemclick', e);
|
|
},
|
|
|
|
onDblClick: function(e) {
|
|
this.handleClick('itemdblclick', e);
|
|
},
|
|
|
|
// @private wrap the mouse down position to delegate the event to the series.
|
|
handleClick: function(name, e) {
|
|
var me = this,
|
|
position = me.getEventXY(e),
|
|
seriesItems = me.series.items,
|
|
i, ln, series,
|
|
item;
|
|
|
|
// Ask each series if it has an item corresponding to (not necessarily exactly
|
|
// on top of) the current mouse coords. Fire itemclick event.
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
if (Ext.draw.Draw.withinBox(position[0], position[1], series.bbox)) {
|
|
if (series.getItemForPoint) {
|
|
item = series.getItemForPoint(position[0], position[1]);
|
|
if (item) {
|
|
series.fireEvent(name, item);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private wrap the mouse down position to delegate the event to the series.
|
|
onMouseDown: function(e) {
|
|
var me = this,
|
|
position = me.getEventXY(e),
|
|
seriesItems = me.series.items,
|
|
i, ln, series,
|
|
item;
|
|
|
|
if (me.enableMask) {
|
|
me.mixins.mask.onMouseDown.call(me, e);
|
|
}
|
|
// Ask each series if it has an item corresponding to (not necessarily exactly
|
|
// on top of) the current mouse coords. Fire itemmousedown event.
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
if (Ext.draw.Draw.withinBox(position[0], position[1], series.bbox)) {
|
|
if (series.getItemForPoint) {
|
|
item = series.getItemForPoint(position[0], position[1]);
|
|
if (item) {
|
|
series.fireEvent('itemmousedown', item);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private wrap the mouse up event to delegate it to the series.
|
|
onMouseUp: function(e) {
|
|
var me = this,
|
|
position = me.getEventXY(e),
|
|
seriesItems = me.series.items,
|
|
i, ln, series,
|
|
item;
|
|
|
|
if (me.enableMask) {
|
|
me.mixins.mask.onMouseUp.call(me, e);
|
|
}
|
|
// Ask each series if it has an item corresponding to (not necessarily exactly
|
|
// on top of) the current mouse coords. Fire itemmouseup event.
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
if (Ext.draw.Draw.withinBox(position[0], position[1], series.bbox)) {
|
|
if (series.getItemForPoint) {
|
|
item = series.getItemForPoint(position[0], position[1]);
|
|
if (item) {
|
|
series.fireEvent('itemmouseup', item);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private wrap the mouse move event so it can be delegated to the series.
|
|
onMouseMove: function(e) {
|
|
var me = this,
|
|
position = me.getEventXY(e),
|
|
seriesItems = me.series.items,
|
|
i, ln, series,
|
|
item, last, storeItem, storeField;
|
|
|
|
|
|
if (me.enableMask) {
|
|
me.mixins.mask.onMouseMove.call(me, e);
|
|
}
|
|
// Ask each series if it has an item corresponding to (not necessarily exactly
|
|
// on top of) the current mouse coords. Fire itemmouseover/out events.
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
if (Ext.draw.Draw.withinBox(position[0], position[1], series.bbox)) {
|
|
if (series.getItemForPoint) {
|
|
item = series.getItemForPoint(position[0], position[1]);
|
|
last = series._lastItemForPoint;
|
|
storeItem = series._lastStoreItem;
|
|
storeField = series._lastStoreField;
|
|
|
|
|
|
if (item !== last || item && (item.storeItem != storeItem || item.storeField != storeField)) {
|
|
if (last) {
|
|
series.fireEvent('itemmouseout', last);
|
|
delete series._lastItemForPoint;
|
|
delete series._lastStoreField;
|
|
delete series._lastStoreItem;
|
|
}
|
|
if (item) {
|
|
series.fireEvent('itemmouseover', item);
|
|
series._lastItemForPoint = item;
|
|
series._lastStoreItem = item.storeItem;
|
|
series._lastStoreField = item.storeField;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
last = series._lastItemForPoint;
|
|
if (last) {
|
|
series.fireEvent('itemmouseout', last);
|
|
delete series._lastItemForPoint;
|
|
delete series._lastStoreField;
|
|
delete series._lastStoreItem;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private handle mouse leave event.
|
|
onMouseLeave: function(e) {
|
|
var me = this,
|
|
seriesItems = me.series.items,
|
|
i, ln, series;
|
|
|
|
if (me.enableMask) {
|
|
me.mixins.mask.onMouseLeave.call(me, e);
|
|
}
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
delete series._lastItemForPoint;
|
|
}
|
|
},
|
|
|
|
// @private buffered refresh for when we update the store
|
|
delayRefresh: function() {
|
|
var me = this;
|
|
if (!me.refreshTask) {
|
|
me.refreshTask = new Ext.util.DelayedTask(me.refresh, me);
|
|
}
|
|
me.refreshTask.delay(me.refreshBuffer);
|
|
},
|
|
|
|
// @private
|
|
refresh: function() {
|
|
var me = this;
|
|
|
|
if (me.rendered && me.curWidth !== undefined && me.curHeight !== undefined) {
|
|
if (!me.isVisible(true)) {
|
|
if (!me.refreshPending) {
|
|
me.setShowListeners('mon');
|
|
me.refreshPending = true;
|
|
}
|
|
return;
|
|
}
|
|
if (me.fireEvent('beforerefresh', me) !== false) {
|
|
me.redraw();
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
}
|
|
},
|
|
|
|
onShow: function(){
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (me.refreshPending) {
|
|
me.delayRefresh();
|
|
me.setShowListeners('mun');
|
|
}
|
|
delete me.refreshPending;
|
|
},
|
|
|
|
setShowListeners: function(method){
|
|
var me = this;
|
|
me[method](me.hierarchyEventSource, {
|
|
scope: me,
|
|
single: true,
|
|
show: me.forceRefresh,
|
|
expand: me.forceRefresh
|
|
});
|
|
},
|
|
|
|
doRefresh: function(){
|
|
// Data in the main store has changed, clear the sub store
|
|
this.setSubStore(null);
|
|
this.refresh();
|
|
},
|
|
|
|
forceRefresh: function(container) {
|
|
var me = this;
|
|
if (me.isDescendantOf(container) && me.refreshPending) {
|
|
// Add unbind here, because either expand/show could be fired,
|
|
// so be sure to unbind the listener that didn't
|
|
me.setShowListeners('mun');
|
|
me.delayRefresh();
|
|
}
|
|
delete me.refreshPending;
|
|
},
|
|
|
|
bindStore: function(store, initial) {
|
|
var me = this;
|
|
me.mixins.bindable.bindStore.apply(me, arguments);
|
|
if (me.store && !initial) {
|
|
me.refresh();
|
|
}
|
|
},
|
|
|
|
getStoreListeners: function() {
|
|
var refresh = this.doRefresh,
|
|
delayRefresh = this.delayRefresh;
|
|
|
|
return {
|
|
refresh: refresh,
|
|
add: delayRefresh,
|
|
bulkremove: delayRefresh,
|
|
update: delayRefresh,
|
|
clear: refresh
|
|
};
|
|
},
|
|
|
|
setSubStore: function(subStore){
|
|
this.substore = subStore;
|
|
},
|
|
|
|
// @private Create Axis
|
|
initializeAxis: function(axis) {
|
|
var me = this,
|
|
chartBBox = me.chartBBox,
|
|
w = chartBBox.width,
|
|
h = chartBBox.height,
|
|
x = chartBBox.x,
|
|
y = chartBBox.y,
|
|
themeAttrs = me.themeAttrs,
|
|
config = {
|
|
chart: me
|
|
};
|
|
if (themeAttrs) {
|
|
config.axisStyle = Ext.apply({}, themeAttrs.axis);
|
|
config.axisLabelLeftStyle = Ext.apply({}, themeAttrs.axisLabelLeft);
|
|
config.axisLabelRightStyle = Ext.apply({}, themeAttrs.axisLabelRight);
|
|
config.axisLabelTopStyle = Ext.apply({}, themeAttrs.axisLabelTop);
|
|
config.axisLabelBottomStyle = Ext.apply({}, themeAttrs.axisLabelBottom);
|
|
config.axisTitleLeftStyle = Ext.apply({}, themeAttrs.axisTitleLeft);
|
|
config.axisTitleRightStyle = Ext.apply({}, themeAttrs.axisTitleRight);
|
|
config.axisTitleTopStyle = Ext.apply({}, themeAttrs.axisTitleTop);
|
|
config.axisTitleBottomStyle = Ext.apply({}, themeAttrs.axisTitleBottom);
|
|
}
|
|
switch (axis.position) {
|
|
case 'top':
|
|
Ext.apply(config, {
|
|
length: w,
|
|
width: h,
|
|
x: x,
|
|
y: y
|
|
});
|
|
break;
|
|
case 'bottom':
|
|
Ext.apply(config, {
|
|
length: w,
|
|
width: h,
|
|
x: x,
|
|
y: h
|
|
});
|
|
break;
|
|
case 'left':
|
|
Ext.apply(config, {
|
|
length: h,
|
|
width: w,
|
|
x: x,
|
|
y: h
|
|
});
|
|
break;
|
|
case 'right':
|
|
Ext.apply(config, {
|
|
length: h,
|
|
width: w,
|
|
x: w,
|
|
y: h
|
|
});
|
|
break;
|
|
}
|
|
if (!axis.chart) {
|
|
Ext.apply(config, axis);
|
|
axis = me.axes.replace(Ext.createByAlias('axis.' + axis.type.toLowerCase(), config));
|
|
} else {
|
|
Ext.apply(axis, config);
|
|
}
|
|
axis.initialized = true;
|
|
},
|
|
|
|
|
|
/**
|
|
* @private Get initial insets; override to provide different defaults.
|
|
*/
|
|
getInsets: function() {
|
|
var me = this,
|
|
insetPadding = me.insetPadding;
|
|
|
|
return {
|
|
top: insetPadding,
|
|
right: insetPadding,
|
|
bottom: insetPadding,
|
|
left: insetPadding
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private Calculate insets for the Chart.
|
|
*/
|
|
calculateInsets: function() {
|
|
var me = this,
|
|
legend = me.legend,
|
|
axes = me.axes,
|
|
edges = ['top', 'right', 'bottom', 'left'],
|
|
insets, i, l, edge, isVertical, axis, bbox;
|
|
|
|
function getAxis(edge) {
|
|
var i = axes.findIndex('position', edge);
|
|
return (i < 0) ? null : axes.getAt(i);
|
|
}
|
|
|
|
insets = me.getInsets();
|
|
|
|
// Find the space needed by axes and legend as a positive inset from each edge
|
|
for (i = 0, l = edges.length; i < l; i++) {
|
|
edge = edges[i];
|
|
|
|
isVertical = (edge === 'left' || edge === 'right');
|
|
axis = getAxis(edge);
|
|
|
|
// Add legend size if it's on this edge
|
|
if (legend !== false) {
|
|
if (legend.position === edge) {
|
|
bbox = legend.getBBox();
|
|
insets[edge] += (isVertical ? bbox.width : bbox.height) + me.insetPadding;
|
|
}
|
|
}
|
|
|
|
// Add axis size if there's one on this edge only if it has been
|
|
//drawn before.
|
|
if (axis && axis.bbox) {
|
|
bbox = axis.bbox;
|
|
insets[edge] += (isVertical ? bbox.width : bbox.height);
|
|
}
|
|
};
|
|
|
|
return insets;
|
|
},
|
|
|
|
/**
|
|
* @private Adjust the dimensions and positions of each axis and the chart body area after accounting
|
|
* for the space taken up on each side by the axes and legend.
|
|
* This code is taken from Ext.chart.Chart and refactored to provide better flexibility.
|
|
*/
|
|
alignAxes: function() {
|
|
var me = this,
|
|
axesItems = me.axes.items,
|
|
insets, chartBBox, i, l, axis, pos, isVertical;
|
|
|
|
insets = me.calculateInsets();
|
|
|
|
// Build the chart bbox based on the collected inset values
|
|
chartBBox = {
|
|
x: insets.left,
|
|
y: insets.top,
|
|
width: me.curWidth - insets.left - insets.right,
|
|
height: me.curHeight - insets.top - insets.bottom
|
|
};
|
|
me.chartBBox = chartBBox;
|
|
|
|
// Go back through each axis and set its length and position based on the
|
|
// corresponding edge of the chartBBox
|
|
for (i = 0, l = axesItems.length; i < l; i++) {
|
|
axis = axesItems[i];
|
|
pos = axis.position;
|
|
isVertical = pos === 'left' || pos === 'right';
|
|
|
|
axis.x = (pos === 'right' ? chartBBox.x + chartBBox.width : chartBBox.x);
|
|
axis.y = (pos === 'top' ? chartBBox.y : chartBBox.y + chartBBox.height);
|
|
axis.width = (isVertical ? chartBBox.width : chartBBox.height);
|
|
axis.length = (isVertical ? chartBBox.height : chartBBox.width);
|
|
};
|
|
},
|
|
|
|
// @private initialize the series.
|
|
initializeSeries: function(series, idx, themeIndex) {
|
|
var me = this,
|
|
themeAttrs = me.themeAttrs,
|
|
seriesObj, markerObj, seriesThemes, st,
|
|
markerThemes, colorArrayStyle = [],
|
|
isInstance = (series instanceof Ext.chart.series.Series).
|
|
i = 0, l, config;
|
|
|
|
if (!series.initialized) {
|
|
config = {
|
|
chart: me,
|
|
seriesId: series.seriesId
|
|
};
|
|
if (themeAttrs) {
|
|
seriesThemes = themeAttrs.seriesThemes;
|
|
markerThemes = themeAttrs.markerThemes;
|
|
seriesObj = Ext.apply({}, themeAttrs.series);
|
|
markerObj = Ext.apply({}, themeAttrs.marker);
|
|
config.seriesStyle = Ext.apply(seriesObj, seriesThemes[themeIndex % seriesThemes.length]);
|
|
config.seriesLabelStyle = Ext.apply({}, themeAttrs.seriesLabel);
|
|
config.markerStyle = Ext.apply(markerObj, markerThemes[themeIndex % markerThemes.length]);
|
|
if (themeAttrs.colors) {
|
|
config.colorArrayStyle = themeAttrs.colors;
|
|
} else {
|
|
colorArrayStyle = [];
|
|
for (l = seriesThemes.length; i < l; i++) {
|
|
st = seriesThemes[i];
|
|
if (st.fill || st.stroke) {
|
|
colorArrayStyle.push(st.fill || st.stroke);
|
|
}
|
|
}
|
|
if (colorArrayStyle.length) {
|
|
config.colorArrayStyle = colorArrayStyle;
|
|
}
|
|
}
|
|
config.seriesIdx = idx;
|
|
config.themeIdx = themeIndex;
|
|
}
|
|
|
|
if (isInstance) {
|
|
Ext.applyIf(series, config);
|
|
}
|
|
else {
|
|
Ext.applyIf(config, series);
|
|
series = me.series.replace(Ext.createByAlias('series.' + series.type.toLowerCase(), config));
|
|
}
|
|
}
|
|
|
|
if (series.initialize) {
|
|
series.initialize();
|
|
}
|
|
series.initialized = true;
|
|
return series;
|
|
},
|
|
|
|
// @private
|
|
getMaxGutters: function() {
|
|
var me = this,
|
|
seriesItems = me.series.items,
|
|
i, ln, series, gutters,
|
|
lowerH = 0, upperH = 0, lowerV = 0, upperV = 0;
|
|
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
gutters = seriesItems[i].getGutters();
|
|
if (gutters) {
|
|
if (gutters.verticalAxis) {
|
|
lowerV = Math.max(lowerV, gutters.lower);
|
|
upperV = Math.max(upperV, gutters.upper);
|
|
}
|
|
else {
|
|
lowerH = Math.max(lowerH, gutters.lower);
|
|
upperH = Math.max(upperH, gutters.upper);
|
|
}
|
|
}
|
|
}
|
|
me.maxGutters = {
|
|
left: lowerH,
|
|
right: upperH,
|
|
bottom: lowerV,
|
|
top: upperV
|
|
};
|
|
},
|
|
|
|
// @private draw axis.
|
|
drawAxis: function(axis) {
|
|
axis.drawAxis();
|
|
},
|
|
|
|
// @private draw series.
|
|
drawCharts: function(series) {
|
|
series.triggerafterrender = false;
|
|
series.drawSeries();
|
|
if (!this.animate) {
|
|
series.fireEvent('afterrender');
|
|
}
|
|
},
|
|
/**
|
|
* Saves the chart by either triggering a download or returning a string containing the chart data
|
|
* as SVG. The action depends on the export type specified in the passed configuration. The chart
|
|
* will be exported using either the {@link Ext.draw.engine.SvgExporter} or the {@link Ext.draw.engine.ImageExporter}
|
|
* classes.
|
|
*
|
|
* Possible export types:
|
|
*
|
|
* - 'image/png'
|
|
* - 'image/jpeg',
|
|
* - 'image/svg+xml'
|
|
*
|
|
* If 'image/svg+xml' is specified, the SvgExporter will be used.
|
|
* If 'image/png' or 'image/jpeg' are specified, the ImageExporter will be used. This exporter
|
|
* must post the SVG data to a remote server to have the data processed, see the {@link Ext.draw.engine.ImageExporter}
|
|
* for more details.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* chart.save({
|
|
* type: 'image/png'
|
|
* });
|
|
*
|
|
* **Important**: By default, chart data is sent to a server operated
|
|
* by Sencha to do data processing. You may change this default by
|
|
* setting the {@link Ext.draw.engine.ImageExporter#defaultUrl defaultUrl} of the {@link Ext.draw.engine.ImageExporter} class.
|
|
* In addition, please note that this service only creates PNG images.
|
|
*
|
|
* @param {Object} [config] The configuration to be passed to the exporter.
|
|
* See the export method for the appropriate exporter for the relevant
|
|
* configuration options
|
|
* @return {Object} See the return types for the appropriate exporter
|
|
*/
|
|
save: function(config){
|
|
return Ext.draw.Surface.save(this.surface, config);
|
|
},
|
|
// @private remove gently.
|
|
destroy: function() {
|
|
Ext.destroy(this.surface);
|
|
this.bindStore(null);
|
|
this.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.Highlight
|
|
* A mixin providing highlight functionality for Ext.chart.series.Series.
|
|
*/
|
|
Ext.define('Ext.chart.Highlight', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} [highlight=false] Set to `true` to enable highlighting using the {@link #highlightCfg default highlight attributes}.
|
|
*
|
|
* Can also be an object with style properties (i.e fill, stroke, stroke-width, radius) which are may override the {@link #highlightCfg default highlight attributes}.
|
|
*/
|
|
highlight: false,
|
|
|
|
/**
|
|
* @property {Object} highlightCfg The default properties to apply as a highight. Value is
|
|
*
|
|
* {
|
|
* fill: '#fdd',
|
|
* "stroke-width": 5,
|
|
* stroke: "#f55'
|
|
* }
|
|
*/
|
|
highlightCfg : {
|
|
fill: '#fdd',
|
|
"stroke-width": 5,
|
|
stroke: '#f55'
|
|
},
|
|
|
|
constructor: function(config) {
|
|
// If configured with a highlight object, apply to to *a local copy of* this class's highlightCfg. Do not mutate the prototype's copy.
|
|
if (config.highlight && (typeof config.highlight !== 'boolean')) { //is an object
|
|
this.highlightCfg = Ext.merge({}, this.highlightCfg, config.highlight);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Highlight the given series item.
|
|
* @param {Object} item Info about the item; same format as returned by #getItemForPoint.
|
|
*/
|
|
highlightItem: function(item) {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
sprite = item.sprite,
|
|
opts = Ext.merge({}, me.highlightCfg, me.highlight),
|
|
surface = me.chart.surface,
|
|
animate = me.chart.animate,
|
|
p, from, to, pi;
|
|
|
|
if (!me.highlight || !sprite || sprite._highlighted) {
|
|
return;
|
|
}
|
|
if (sprite._anim) {
|
|
sprite._anim.paused = true;
|
|
}
|
|
sprite._highlighted = true;
|
|
if (!sprite._defaults) {
|
|
sprite._defaults = Ext.apply({}, sprite.attr);
|
|
from = {};
|
|
to = {};
|
|
// TODO: Clean up code below.
|
|
for (p in opts) {
|
|
if (! (p in sprite._defaults)) {
|
|
sprite._defaults[p] = surface.availableAttrs[p];
|
|
}
|
|
from[p] = sprite._defaults[p];
|
|
to[p] = opts[p];
|
|
if (Ext.isObject(opts[p])) {
|
|
from[p] = {};
|
|
to[p] = {};
|
|
Ext.apply(sprite._defaults[p], sprite.attr[p]);
|
|
Ext.apply(from[p], sprite._defaults[p]);
|
|
for (pi in sprite._defaults[p]) {
|
|
if (! (pi in opts[p])) {
|
|
to[p][pi] = from[p][pi];
|
|
} else {
|
|
to[p][pi] = opts[p][pi];
|
|
}
|
|
}
|
|
for (pi in opts[p]) {
|
|
if (! (pi in to[p])) {
|
|
to[p][pi] = opts[p][pi];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
sprite._from = from;
|
|
sprite._to = to;
|
|
sprite._endStyle = to;
|
|
}
|
|
if (animate) {
|
|
sprite._anim = new Ext.fx.Anim({
|
|
target: sprite,
|
|
from: sprite._from,
|
|
to: sprite._to,
|
|
duration: 150
|
|
});
|
|
} else {
|
|
sprite.setAttributes(sprite._to, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Un-highlight any existing highlights
|
|
*/
|
|
unHighlightItem: function() {
|
|
if (!this.highlight || !this.items) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
items = me.items,
|
|
len = items.length,
|
|
opts = Ext.merge({}, me.highlightCfg, me.highlight),
|
|
animate = me.chart.animate,
|
|
i = 0,
|
|
obj, p, sprite;
|
|
for (; i < len; i++) {
|
|
if (!items[i]) {
|
|
continue;
|
|
}
|
|
sprite = items[i].sprite;
|
|
if (sprite && sprite._highlighted) {
|
|
if (sprite._anim) {
|
|
sprite._anim.paused = true;
|
|
}
|
|
obj = {};
|
|
for (p in opts) {
|
|
if (Ext.isObject(sprite._defaults[p])) {
|
|
obj[p] = Ext.apply({}, sprite._defaults[p]);
|
|
}
|
|
else {
|
|
obj[p] = sprite._defaults[p];
|
|
}
|
|
}
|
|
if (animate) {
|
|
//sprite._to = obj;
|
|
sprite._endStyle = obj;
|
|
sprite._anim = new Ext.fx.Anim({
|
|
target: sprite,
|
|
to: obj,
|
|
duration: 150
|
|
});
|
|
}
|
|
else {
|
|
sprite.setAttributes(obj, true);
|
|
}
|
|
delete sprite._highlighted;
|
|
//delete sprite._defaults;
|
|
}
|
|
}
|
|
},
|
|
|
|
cleanHighlights: function() {
|
|
if (!this.highlight) {
|
|
return;
|
|
}
|
|
|
|
var group = this.group,
|
|
markerGroup = this.markerGroup,
|
|
i = 0,
|
|
l;
|
|
for (l = group.getCount(); i < l; i++) {
|
|
delete group.getAt(i)._defaults;
|
|
}
|
|
if (markerGroup) {
|
|
for (l = markerGroup.getCount(); i < l; i++) {
|
|
delete markerGroup.getAt(i)._defaults;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Labels is a mixin to the Series class. Labels methods are implemented
|
|
* in each of the Series (Pie, Bar, etc) for label creation and placement.
|
|
*
|
|
* The 2 methods that must be implemented by the Series are:
|
|
*
|
|
* - {@link #onCreateLabel}
|
|
* - {@link #onPlaceLabel}
|
|
*
|
|
* The application can override these methods to control the style and
|
|
* location of the labels. For instance, to display the labels in green and
|
|
* add a '+' symbol when the value of a Line series exceeds 50:
|
|
*
|
|
* Ext.define('Ext.chart.series.MyLine', {
|
|
* extend: 'Ext.chart.series.Line',
|
|
* alias: ['series.myline', 'Ext.chart.series.MyLine'],
|
|
* type: 'MYLINE',
|
|
*
|
|
* onPlaceLabel: function(label, storeItem, item, i, display, animate){
|
|
* if (storeItem.data.y >= 50) {
|
|
* label.setAttributes({
|
|
* fill: '#080',
|
|
* text: "+" + storeItem.data.y
|
|
* }, true);
|
|
* }
|
|
* return this.callParent(arguments);
|
|
* }
|
|
* });
|
|
*
|
|
* Note that for simple effects, like the example above, it is simpler
|
|
* for the application to provide a label.renderer function in the config:
|
|
*
|
|
* label: {
|
|
* renderer: function(value, label, storeItem, item, i, display, animate, index) {
|
|
* if (value >= 50) {
|
|
* label.setAttributes({fill:'#080'});
|
|
* value = "+" + value;
|
|
* }
|
|
* return value;
|
|
* }
|
|
* }
|
|
*
|
|
* The rule of thumb is that to customize the value and modify simple visual attributes, it
|
|
* is simpler to use a renderer function, while overridding `onCreateLabel` and `onPlaceLabel`
|
|
* allows the application to take entire control over the labels.
|
|
*
|
|
*/
|
|
Ext.define('Ext.chart.Label', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @method onCreateLabel
|
|
* @template
|
|
*
|
|
* Called each time a new label is created.
|
|
*
|
|
* **Note:** This method must be implemented in Series that mixes
|
|
* in this Label mixin.
|
|
*
|
|
* @param {Ext.data.Model} storeItem The element of the store that is
|
|
* related to the sprite.
|
|
* @param {Object} item The item related to the sprite.
|
|
* An item is an object containing the position of the shape
|
|
* used to describe the visualization and also pointing to the
|
|
* actual shape (circle, rectangle, path, etc).
|
|
* @param {Number} i The index of the element created
|
|
* (i.e the first created label, second created label, etc).
|
|
* @param {String} display The label.display type.
|
|
* May be `false` if the label is hidden
|
|
* @return {Ext.draw.Sprite} The created sprite that will draw the label.
|
|
*/
|
|
|
|
/**
|
|
* @method onPlaceLabel
|
|
* @template
|
|
*
|
|
* Called for updating the position of the label.
|
|
*
|
|
* **Note:** This method must be implemented in Series that mixes
|
|
* in this Label mixin.
|
|
*
|
|
* @param {Ext.draw.Sprite} label The sprite that draws the label.
|
|
* @param {Ext.data.Model} storeItem The element of the store
|
|
* that is related to the sprite.
|
|
* @param {Object} item The item related to the
|
|
* sprite. An item is an object containing the position of
|
|
* the shape used to describe the visualization and also
|
|
* pointing to the actual shape (circle, rectangle, path, etc).
|
|
* @param {Number} i The index of the element to be updated
|
|
* (i.e. whether it is the first, second, third from the
|
|
* labelGroup)
|
|
* @param {String} display The label.display type.
|
|
* May be `false` if the label is hidden
|
|
* @param {Boolean} animate A boolean value to set or unset
|
|
* animations for the labels.
|
|
* @param {Number} index The series index.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} label
|
|
* Object with the following properties:
|
|
*
|
|
* @cfg {String} label.display
|
|
*
|
|
* Specifies the presence and position of the labels. The possible values depend on the chart type.
|
|
* For Line and Scatter charts: "under" | "over" | "rotate".
|
|
* For Bar and Column charts: "insideStart" | "insideEnd" | "outside".
|
|
* For Pie charts: "outside" | "rotate".
|
|
* For all charts: "none" hides the labels and "middle" is reserved for future use.
|
|
* On stacked Bar and stacked Column charts, if 'stackedDisplay' is set, the values
|
|
* "over" or "under" can be passed internally to {@link #onCreateLabel} and {@link #onPlaceLabel}
|
|
* (however they cannot be used by the application as config values for label.display).
|
|
*
|
|
* Default value: 'none'.
|
|
*
|
|
* @cfg {String} label.stackedDisplay
|
|
*
|
|
* The type of label we want to display as a summary on a stacked
|
|
* bar or a stacked column. If set to 'total', the total amount
|
|
* of all the stacked values is displayed on top of the column.
|
|
* If set to 'balances', the total amount of the positive values
|
|
* is displayed on top of the column and the total amount of the
|
|
* negative values is displayed at the bottom.
|
|
*
|
|
* Default value: 'none'.
|
|
*
|
|
* @cfg {String} label.color
|
|
*
|
|
* The color of the label text.
|
|
*
|
|
* Default value: '#000' (black).
|
|
*
|
|
* @cfg {Boolean} label.contrast
|
|
*
|
|
* True to render the label in contrasting color with the backround of a column
|
|
* in a Bar chart or of a slice in a Pie chart. The label color should be specified
|
|
* in hex values (eg. '#f00' or '#ff0000'), not as a CSS color name (eg. 'red').
|
|
*
|
|
* Default value: false.
|
|
*
|
|
* @cfg {String|String[]} label.field
|
|
*
|
|
* The name(s) of the field(s) to be displayed in the labels. If your chart has 3 series
|
|
* that correspond to the fields 'a', 'b', and 'c' of your model and you only want to
|
|
* display labels for the series 'c', you must still provide an array `[null, null, 'c']`.
|
|
*
|
|
* Default value: 'name'.
|
|
*
|
|
* @cfg {Number} label.minMargin
|
|
*
|
|
* Specifies the minimum distance from a label to the origin of
|
|
* the visualization. This parameter is useful when using
|
|
* PieSeries width variable pie slice lengths.
|
|
*
|
|
* Default value: 50.
|
|
*
|
|
* @cfg {String} label.font
|
|
*
|
|
* The font used for the labels.
|
|
*
|
|
* Default value: `"11px Helvetica, sans-serif"`.
|
|
*
|
|
* @cfg {String} label.orientation
|
|
*
|
|
* Either "horizontal" or "vertical".
|
|
*
|
|
* Default value: `"horizontal"`.
|
|
*
|
|
* @cfg {Function} label.renderer
|
|
*
|
|
* Optional function for formatting the label into a displayable value.
|
|
*
|
|
* The arguments to the method are:
|
|
*
|
|
* - *`value`* The value
|
|
* - *`label`*, *`storeItem`*, *`item`*, *`i`*, *`display`*, *`animate`*, *`index`*
|
|
*
|
|
* Same arguments as {@link #onPlaceLabel}.
|
|
*
|
|
* Default value: `function(v) { return v; }`
|
|
*/
|
|
|
|
// @private a regex to parse url type colors.
|
|
colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
|
|
|
|
// @private the mixin constructor. Used internally by Series.
|
|
constructor: function(config) {
|
|
var me = this;
|
|
me.label = Ext.applyIf(me.label || {},
|
|
{
|
|
display: "none",
|
|
stackedDisplay: "none",
|
|
color: "#000",
|
|
field: "name",
|
|
minMargin: 50,
|
|
font: "11px Helvetica, sans-serif",
|
|
orientation: "horizontal",
|
|
renderer: Ext.identityFn
|
|
});
|
|
|
|
if (me.label.display !== 'none') {
|
|
me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
|
|
}
|
|
},
|
|
|
|
// @private a method to render all labels in the labelGroup
|
|
renderLabels: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
gradients = chart.gradients,
|
|
items = me.items,
|
|
animate = chart.animate,
|
|
config = me.label,
|
|
display = config.display,
|
|
stackedDisplay = config.stackedDisplay,
|
|
format = config.renderer,
|
|
color = config.color,
|
|
field = [].concat(config.field),
|
|
group = me.labelsGroup,
|
|
groupLength = (group || 0) && group.length,
|
|
store = me.chart.getChartStore(),
|
|
len = store.getCount(),
|
|
itemLength = (items || 0) && items.length,
|
|
ratio = itemLength / len,
|
|
gradientsCount = (gradients || 0) && gradients.length,
|
|
Color = Ext.draw.Color,
|
|
hides = [],
|
|
gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
|
|
storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString,
|
|
total, totalPositive, totalNegative, topText, bottomText;
|
|
|
|
if (display == 'none' || !group) {
|
|
return;
|
|
}
|
|
// no items displayed, hide all labels
|
|
if(itemLength == 0){
|
|
while(groupLength--) {
|
|
hides.push(groupLength);
|
|
}
|
|
} else {
|
|
for (i = 0, count = 0, groupIndex = 0; i < len; i++) {
|
|
index = 0;
|
|
for (j = 0; j < ratio; j++) {
|
|
item = items[count];
|
|
label = group.getAt(groupIndex);
|
|
storeItem = store.getAt(i);
|
|
//check the excludes
|
|
while(this.__excludes && this.__excludes[index]) {
|
|
index++;
|
|
}
|
|
|
|
if (!item && label) {
|
|
label.hide(true);
|
|
groupIndex++;
|
|
}
|
|
|
|
if (item && field[j]) {
|
|
if (!label) {
|
|
label = me.onCreateLabel(storeItem, item, i, display);
|
|
if (!label) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// set color (the app can override it in onPlaceLabel)
|
|
label.setAttributes({
|
|
fill: String(color)
|
|
}, true);
|
|
|
|
// position the label
|
|
me.onPlaceLabel(label, storeItem, item, i, display, animate, index);
|
|
groupIndex++;
|
|
|
|
// set contrast
|
|
if (config.contrast && item.sprite) {
|
|
sprite = item.sprite;
|
|
//set the color string to the color to be set, only read the
|
|
// _endStyle/_to if we're animating, otherwise they're not relevant
|
|
if (animate && sprite._endStyle) {
|
|
colorString = sprite._endStyle.fill;
|
|
} else if (animate && 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) {
|
|
colorString = colorString.match(me.colorStringRe)[1];
|
|
for (k = 0; k < gradientsCount; k++) {
|
|
gradient = gradients[k];
|
|
if (gradient.id == colorString) {
|
|
//avg color stops
|
|
colorStop = 0; colorStopTotal = 0;
|
|
for (colorStopIndex in gradient.stops) {
|
|
colorStop++;
|
|
colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
|
|
}
|
|
spriteBrightness = (colorStopTotal / colorStop) / 255;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
spriteBrightness = spriteColor.getGrayscale() / 255;
|
|
}
|
|
if (label.isOutside) {
|
|
spriteBrightness = 1;
|
|
}
|
|
labelColor = Color.fromString(label.attr.fill || label.attr.color).getHSL();
|
|
labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
|
|
label.setAttributes({
|
|
fill: String(Color.fromHSL.apply({}, labelColor))
|
|
}, true);
|
|
}
|
|
|
|
// display totals on stacked charts
|
|
if (me.stacked && stackedDisplay && (item.totalPositiveValues || item.totalNegativeValues)) {
|
|
totalPositive = (item.totalPositiveValues || 0);
|
|
totalNegative = (item.totalNegativeValues || 0);
|
|
total = totalPositive + totalNegative;
|
|
|
|
if (stackedDisplay == 'total') {
|
|
topText = format(total);
|
|
} else if (stackedDisplay == 'balances') {
|
|
if (totalPositive == 0 && totalNegative == 0) {
|
|
topText = format(0);
|
|
} else {
|
|
topText = format(totalPositive);
|
|
bottomText = format(totalNegative);
|
|
}
|
|
}
|
|
|
|
if (topText) {
|
|
label = group.getAt(groupIndex);
|
|
if (!label) {
|
|
label = me.onCreateLabel(storeItem, item, i, 'over');
|
|
}
|
|
labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
|
|
label.setAttributes({
|
|
text: topText,
|
|
style: config.font,
|
|
fill: String(Color.fromHSL.apply({}, labelColor))
|
|
}, true);
|
|
me.onPlaceLabel(label, storeItem, item, i, 'over', animate, index);
|
|
groupIndex ++;
|
|
}
|
|
|
|
if (bottomText) {
|
|
label = group.getAt(groupIndex);
|
|
if (!label) {
|
|
label = me.onCreateLabel(storeItem, item, i, 'under');
|
|
}
|
|
labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
|
|
label.setAttributes({
|
|
text: bottomText,
|
|
style: config.font,
|
|
fill: String(Color.fromHSL.apply({}, labelColor))
|
|
}, true);
|
|
me.onPlaceLabel(label, storeItem, item, i, 'under', animate, index);
|
|
groupIndex ++;
|
|
}
|
|
}
|
|
}
|
|
count++;
|
|
index++;
|
|
}
|
|
}
|
|
groupLength = group.length;
|
|
|
|
while(groupLength > groupIndex){
|
|
hides.push(groupIndex);
|
|
groupIndex++;
|
|
}
|
|
}
|
|
me.hideLabels(hides);
|
|
},
|
|
|
|
hideLabels: function(hides){
|
|
var labelsGroup = this.labelsGroup,
|
|
hlen = !!hides && hides.length;
|
|
|
|
if (!labelsGroup) {
|
|
return;
|
|
}
|
|
|
|
if (hlen === false) {
|
|
hlen = labelsGroup.getCount();
|
|
while (hlen--) {
|
|
labelsGroup.getAt(hlen).hide(true);
|
|
}
|
|
} else {
|
|
while(hlen--) {
|
|
labelsGroup.getAt(hides[hlen]).hide(true);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.chart.TipSurface', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.draw.Component ,
|
|
|
|
/* End Definitions */
|
|
|
|
spriteArray: false,
|
|
renderFirst: true,
|
|
|
|
constructor: function(config) {
|
|
this.callParent([config]);
|
|
if (config.sprites) {
|
|
this.spriteArray = [].concat(config.sprites);
|
|
delete config.sprites;
|
|
}
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this,
|
|
i = 0,
|
|
l = 0,
|
|
sp,
|
|
sprites;
|
|
this.callParent(arguments);
|
|
sprites = me.spriteArray;
|
|
if (me.renderFirst && sprites) {
|
|
me.renderFirst = false;
|
|
for (l = sprites.length; i < l; i++) {
|
|
sp = me.surface.add(sprites[i]);
|
|
sp.setAttributes({
|
|
hidden: false
|
|
},
|
|
true);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.Tip
|
|
* Provides tips for Ext.chart.series.Series.
|
|
*/
|
|
Ext.define('Ext.chart.Tip', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
surface,
|
|
sprites,
|
|
tipSurface;
|
|
if (config.tips) {
|
|
me.tipTimeout = null;
|
|
me.tipConfig = Ext.apply({}, config.tips, {
|
|
renderer: Ext.emptyFn,
|
|
constrainPosition: true,
|
|
autoHide: true
|
|
});
|
|
me.tooltip = new Ext.tip.ToolTip(me.tipConfig);
|
|
me.chart.surface.on('mousemove', me.tooltip.onMouseMove, me.tooltip);
|
|
me.chart.surface.on('mouseleave', function() {
|
|
me.hideTip();
|
|
});
|
|
if (me.tipConfig.surface) {
|
|
//initialize a surface
|
|
surface = me.tipConfig.surface;
|
|
sprites = surface.sprites;
|
|
tipSurface = new Ext.chart.TipSurface({
|
|
id: 'tipSurfaceComponent',
|
|
sprites: sprites
|
|
});
|
|
if (surface.width && surface.height) {
|
|
tipSurface.setSize(surface.width, surface.height);
|
|
}
|
|
me.tooltip.add(tipSurface);
|
|
me.spriteTip = tipSurface;
|
|
}
|
|
}
|
|
},
|
|
|
|
showTip: function(item) {
|
|
var me = this,
|
|
tooltip,
|
|
spriteTip,
|
|
tipConfig,
|
|
trackMouse,
|
|
sprite,
|
|
surface,
|
|
surfaceExt,
|
|
pos,
|
|
x,
|
|
y;
|
|
if (!me.tooltip) {
|
|
return;
|
|
}
|
|
clearTimeout(me.tipTimeout);
|
|
tooltip = me.tooltip;
|
|
spriteTip = me.spriteTip;
|
|
tipConfig = me.tipConfig;
|
|
trackMouse = tooltip.trackMouse;
|
|
if (!trackMouse) {
|
|
tooltip.trackMouse = true;
|
|
sprite = item.sprite;
|
|
surface = sprite.surface;
|
|
surfaceExt = Ext.get(surface.getId());
|
|
if (surfaceExt) {
|
|
pos = surfaceExt.getXY();
|
|
x = pos[0] + (sprite.attr.x || 0) + (sprite.attr.translation && sprite.attr.translation.x || 0);
|
|
y = pos[1] + (sprite.attr.y || 0) + (sprite.attr.translation && sprite.attr.translation.y || 0);
|
|
tooltip.targetXY = [x, y];
|
|
}
|
|
}
|
|
if (spriteTip) {
|
|
tipConfig.renderer.call(tooltip, item.storeItem, item, spriteTip.surface);
|
|
} else {
|
|
tipConfig.renderer.call(tooltip, item.storeItem, item);
|
|
}
|
|
tooltip.show();
|
|
tooltip.trackMouse = trackMouse;
|
|
},
|
|
|
|
hideTip: function(item) {
|
|
var tooltip = this.tooltip;
|
|
if (!tooltip) {
|
|
return;
|
|
}
|
|
clearTimeout(this.tipTimeout);
|
|
this.tipTimeout = setTimeout(function() {
|
|
tooltip.hide();
|
|
}, 0);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.axis.Abstract
|
|
* Base class for all axis classes.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.chart.axis.Abstract', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Ext.chart.Label} label
|
|
* The config for chart label.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String[]} fields
|
|
* The fields of model to bind to this axis.
|
|
*
|
|
* For example if you have a data set of lap times per car, each having the fields:
|
|
* `'carName'`, `'avgSpeed'`, `'maxSpeed'`. Then you might want to show the data on chart
|
|
* with `['carName']` on Name axis and `['avgSpeed', 'maxSpeed']` on Speed axis.
|
|
*/
|
|
|
|
/**
|
|
* Creates new Axis.
|
|
* @param {Object} config (optional) Config options.
|
|
*/
|
|
constructor: function(config) {
|
|
config = config || {};
|
|
|
|
var me = this,
|
|
pos = config.position || 'left';
|
|
|
|
pos = pos.charAt(0).toUpperCase() + pos.substring(1);
|
|
//axisLabel(Top|Bottom|Right|Left)Style
|
|
config.label = Ext.apply(config['axisLabel' + pos + 'Style'] || {}, config.label || {});
|
|
config.axisTitleStyle = Ext.apply(config['axisTitle' + pos + 'Style'] || {}, config.labelTitle || {});
|
|
Ext.apply(me, config);
|
|
me.fields = Ext.Array.from(me.fields);
|
|
this.callParent();
|
|
me.labels = [];
|
|
me.getId();
|
|
me.labelGroup = me.chart.surface.getGroup(me.axisId + "-labels");
|
|
},
|
|
|
|
alignment: null,
|
|
grid: false,
|
|
steps: 10,
|
|
x: 0,
|
|
y: 0,
|
|
minValue: 0,
|
|
maxValue: 0,
|
|
|
|
getId: function() {
|
|
return this.axisId || (this.axisId = Ext.id(null, 'ext-axis-'));
|
|
},
|
|
|
|
/*
|
|
Called to process a view i.e to make aggregation and filtering over
|
|
a store creating a substore to be used to render the axis. Since many axes
|
|
may do different things on the data and we want the final result of all these
|
|
operations to be rendered we need to call processView on all axes before drawing
|
|
them.
|
|
*/
|
|
processView: Ext.emptyFn,
|
|
|
|
drawAxis: Ext.emptyFn,
|
|
addDisplayAndLabels: Ext.emptyFn
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.axis.Axis
|
|
*
|
|
* Defines axis for charts. The axis position, type, style can be configured.
|
|
* The axes are defined in an axes array of configuration objects where the type,
|
|
* field, grid and other configuration options can be set. To know more about how
|
|
* to create a Chart please check the Chart class documentation. Here's an example for the axes part:
|
|
* An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:
|
|
*
|
|
* axes: [{
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1', 'data2', 'data3'],
|
|
* title: 'Number of Hits',
|
|
* grid: {
|
|
* odd: {
|
|
* opacity: 1,
|
|
* fill: '#ddd',
|
|
* stroke: '#bbb',
|
|
* 'stroke-width': 1
|
|
* }
|
|
* },
|
|
* minimum: 0
|
|
* }, {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Month of the Year',
|
|
* grid: true,
|
|
* label: {
|
|
* rotate: {
|
|
* degrees: 315
|
|
* }
|
|
* }
|
|
* }]
|
|
*
|
|
* In this case we use a `Numeric` axis for displaying the values of the Area series and a `Category` axis for displaying the names of
|
|
* the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart.
|
|
* Both the category and numeric axes have `grid` set, which means that horizontal and vertical lines will cover the chart background. In the
|
|
* category axis the labels will be rotated so they can fit the space better.
|
|
*/
|
|
Ext.define('Ext.chart.axis.Axis', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.axis.Abstract ,
|
|
|
|
alternateClassName: 'Ext.chart.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',
|
|
* 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.
|
|
* If a number of major ticks is forced, it wont search for pretty numbers at the ticks.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} minorTickSteps
|
|
* The number of small ticks between two major ticks. Default is zero.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} title
|
|
* The title for the Axis
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} hidden
|
|
* `true` to hide the axis.
|
|
*/
|
|
hidden: false,
|
|
|
|
// @private force min/max values from store
|
|
forceMinMax: false,
|
|
|
|
/**
|
|
* @cfg {Number} dashSize
|
|
* The size of the dash marker. Default's 3.
|
|
*/
|
|
dashSize: 3,
|
|
|
|
/**
|
|
* @cfg {String} position
|
|
* Where to set the axis. Available options are `left`, `bottom`, `right`, `top`. Default's `bottom`.
|
|
*/
|
|
position: 'bottom',
|
|
|
|
// @private
|
|
skipFirst: false,
|
|
|
|
/**
|
|
* @cfg {Number} length
|
|
* Offset axis position. Default's 0.
|
|
*/
|
|
length: 0,
|
|
|
|
/**
|
|
* @cfg {Number} width
|
|
* Offset axis width. Default's 0.
|
|
*/
|
|
width: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} adjustEnd
|
|
* Whether to adjust the label at the end of the axis.
|
|
*/
|
|
adjustEnd: true,
|
|
|
|
majorTickSteps: false,
|
|
|
|
nullGutters: { lower: 0, upper: 0, verticalAxis: undefined },
|
|
|
|
// @private
|
|
applyData: Ext.emptyFn,
|
|
|
|
getRange: function () {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
series = chart.series.items,
|
|
position = me.position,
|
|
axes,
|
|
seriesClasses = Ext.chart.series,
|
|
aggregations = [],
|
|
min = Infinity, max = -Infinity,
|
|
vertical = me.position === 'left' || me.position === 'right' || me.position === 'radial',
|
|
i, ln, ln2, j, k, dataLength = data.length, aggregates,
|
|
countedFields = {},
|
|
allFields = {},
|
|
excludable = true,
|
|
fields, fieldMap, record, field, value;
|
|
|
|
fields = me.fields;
|
|
for (j = 0, ln = fields.length; j < ln; j++) {
|
|
allFields[fields[j]] = true;
|
|
}
|
|
|
|
for (i = 0, ln = series.length; i < ln; i++) {
|
|
if (series[i].seriesIsHidden) {
|
|
continue;
|
|
}
|
|
if (!series[i].getAxesForXAndYFields) {
|
|
continue;
|
|
}
|
|
axes = series[i].getAxesForXAndYFields();
|
|
if (axes.xAxis && axes.xAxis !== position && axes.yAxis && axes.yAxis !== position) {
|
|
// The series doesn't use this axis.
|
|
continue;
|
|
}
|
|
|
|
if (seriesClasses.Bar && series[i] instanceof seriesClasses.Bar && !series[i].column) {
|
|
// If this is a horizontal bar series, then flip xField and yField.
|
|
fields = vertical ? Ext.Array.from(series[i].xField) : Ext.Array.from(series[i].yField);
|
|
} else {
|
|
fields = vertical ? Ext.Array.from(series[i].yField) : Ext.Array.from(series[i].xField);
|
|
}
|
|
|
|
if (me.fields.length) {
|
|
for (j = 0, ln2 = fields.length; j < ln2; j++) {
|
|
if (allFields[fields[j]]) {
|
|
break;
|
|
}
|
|
}
|
|
if (j == ln2) {
|
|
// Not matching fields, skipping this series.
|
|
continue;
|
|
}
|
|
}
|
|
|
|
if (aggregates = series[i].stacked) {
|
|
// If this is a bar/column series, then it will be aggregated if it is of the same direction of the axis.
|
|
if (seriesClasses.Bar && series[i] instanceof seriesClasses.Bar) {
|
|
if (series[i].column != vertical) {
|
|
aggregates = false;
|
|
excludable = false;
|
|
}
|
|
}
|
|
// Otherwise it is stacked vertically
|
|
else if (!vertical) {
|
|
aggregates = false;
|
|
excludable = false;
|
|
}
|
|
}
|
|
|
|
|
|
if (aggregates) {
|
|
fieldMap = {};
|
|
for (j = 0; j < fields.length; j++) {
|
|
if (excludable && series[i].__excludes && series[i].__excludes[j]) {
|
|
continue;
|
|
}
|
|
if (!allFields[fields[j]]) {
|
|
Ext.Logger.warn('Field `' + fields[j] + '` is not included in the ' + position + ' axis config.');
|
|
}
|
|
allFields[fields[j]] = fieldMap[fields[j]] = true;
|
|
}
|
|
aggregations.push({
|
|
fields: fieldMap,
|
|
positiveValue: 0,
|
|
negativeValue: 0
|
|
});
|
|
} else {
|
|
|
|
if (!fields || fields.length == 0) {
|
|
fields = me.fields;
|
|
}
|
|
for (j = 0; j < fields.length; j++) {
|
|
if (excludable && series[i].__excludes && series[i].__excludes[j]) {
|
|
continue;
|
|
}
|
|
allFields[fields[j]] = countedFields[fields[j]] = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < dataLength; i++) {
|
|
record = data[i];
|
|
for (k = 0; k < aggregations.length; k++) {
|
|
aggregations[k].positiveValue = 0;
|
|
aggregations[k].negativeValue = 0;
|
|
}
|
|
for (field in allFields) {
|
|
value = record.get(field);
|
|
if (me.type == 'Time' && typeof value == "string") {
|
|
value = Date.parse(value);
|
|
}
|
|
if (isNaN(value)) {
|
|
continue;
|
|
}
|
|
if (value === undefined) {
|
|
value = 0;
|
|
} else {
|
|
value = Number(value);
|
|
}
|
|
if (countedFields[field]) {
|
|
if (min > value) {
|
|
min = value;
|
|
}
|
|
if (max < value) {
|
|
max = value;
|
|
}
|
|
}
|
|
for (k = 0; k < aggregations.length; k++) {
|
|
if (aggregations[k].fields[field]) {
|
|
|
|
if (value >= 0) {
|
|
aggregations[k].positiveValue += value;
|
|
if (max < aggregations[k].positiveValue) {
|
|
max = aggregations[k].positiveValue;
|
|
}
|
|
// If any aggregation is actually hit, then the min value should be at most 0.
|
|
if (min > 0) {
|
|
min = 0;
|
|
}
|
|
} else {
|
|
aggregations[k].negativeValue += value;
|
|
if (min > aggregations[k].negativeValue) {
|
|
min = aggregations[k].negativeValue;
|
|
}
|
|
// If any aggregation is actually hit, then the max value should be at least 0.
|
|
if (max < 0) {
|
|
max = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!isFinite(max)) {
|
|
max = me.prevMax || 0;
|
|
}
|
|
if (!isFinite(min)) {
|
|
min = me.prevMin || 0;
|
|
}
|
|
|
|
if (typeof min === 'number') {
|
|
min = Ext.Number.correctFloat(min);
|
|
}
|
|
|
|
if (typeof max === 'number') {
|
|
max = Ext.Number.correctFloat(max);
|
|
}
|
|
|
|
//normalize min max for snapEnds.
|
|
if (min != max && (max != Math.floor(max) || min != Math.floor(min))) {
|
|
min = Math.floor(min);
|
|
max = Math.floor(max) + 1;
|
|
}
|
|
|
|
if (!isNaN(me.minimum)) {
|
|
min = me.minimum;
|
|
}
|
|
|
|
if (!isNaN(me.maximum)) {
|
|
max = me.maximum;
|
|
}
|
|
|
|
if (min >= max) {
|
|
// snapEnds will return NaN if max >= min;
|
|
min = Math.floor(min);
|
|
max = min + 1;
|
|
}
|
|
|
|
return {min: min, max: max};
|
|
},
|
|
|
|
// @private creates a structure with start, end and step points.
|
|
calcEnds: function () {
|
|
var me = this,
|
|
range = me.getRange(),
|
|
min = range.min,
|
|
max = range.max,
|
|
steps, prettyNumbers, out, changedRange;
|
|
|
|
steps = (Ext.isNumber(me.majorTickSteps) ? me.majorTickSteps + 1 : me.steps);
|
|
prettyNumbers = !(Ext.isNumber(me.maximum) && Ext.isNumber(me.minimum) && Ext.isNumber(me.majorTickSteps) && me.majorTickSteps > 0);
|
|
|
|
out = Ext.draw.Draw.snapEnds(min, max, steps, prettyNumbers);
|
|
|
|
if (Ext.isNumber(me.maximum)) {
|
|
out.to = me.maximum;
|
|
changedRange = true;
|
|
}
|
|
if (Ext.isNumber(me.minimum)) {
|
|
out.from = me.minimum;
|
|
changedRange = true;
|
|
}
|
|
if (me.adjustMaximumByMajorUnit) {
|
|
out.to = Math.ceil(out.to / out.step) * out.step;
|
|
changedRange = true;
|
|
}
|
|
if (me.adjustMinimumByMajorUnit) {
|
|
out.from = Math.floor(out.from / out.step) * out.step;
|
|
changedRange = true;
|
|
}
|
|
|
|
if (changedRange) {
|
|
out.steps = Math.ceil((out.to - out.from) / out.step);
|
|
}
|
|
|
|
me.prevMin = (min == max ? 0 : min);
|
|
me.prevMax = max;
|
|
return out;
|
|
},
|
|
|
|
|
|
/**
|
|
* Renders the axis into the screen and updates its position.
|
|
*/
|
|
drawAxis: function (init) {
|
|
var me = this,
|
|
i,
|
|
x = me.x,
|
|
y = me.y,
|
|
dashSize = me.dashSize,
|
|
length = me.length,
|
|
position = me.position,
|
|
verticalAxis = (position == 'left' || position == 'right'),
|
|
inflections = [],
|
|
calcLabels = (me.isNumericAxis),
|
|
stepCalcs = me.applyData(),
|
|
step = stepCalcs.step,
|
|
steps = stepCalcs.steps,
|
|
stepsArray = Ext.isArray(steps),
|
|
from = stepCalcs.from,
|
|
to = stepCalcs.to,
|
|
// If we have a single item, to - from will be 0.
|
|
axisRange = (to - from) || 1,
|
|
trueLength,
|
|
currentX,
|
|
currentY,
|
|
path,
|
|
subDashesX = me.minorTickSteps || 0,
|
|
subDashesY = me.minorTickSteps || 0,
|
|
dashesX = Math.max(subDashesX + 1, 0),
|
|
dashesY = Math.max(subDashesY + 1, 0),
|
|
dashDirection = (position == 'left' || position == 'top' ? -1 : 1),
|
|
dashLength = dashSize * dashDirection,
|
|
series = me.chart.series.items,
|
|
firstSeries = series[0],
|
|
gutters = firstSeries ? firstSeries.nullGutters : me.nullGutters,
|
|
padding,
|
|
subDashes,
|
|
subDashValue,
|
|
delta = 0,
|
|
stepCount = 0,
|
|
tick, axes, ln, val, begin, end;
|
|
|
|
me.from = from;
|
|
me.to = to;
|
|
|
|
// If there is nothing to show, then leave.
|
|
if (me.hidden || (from > to)) {
|
|
return;
|
|
}
|
|
|
|
// If no steps are specified (for instance if the store is empty), then leave.
|
|
if ((stepsArray && (steps.length == 0)) || (!stepsArray && isNaN(step))) {
|
|
return;
|
|
}
|
|
|
|
if (stepsArray) {
|
|
// Clean the array of steps:
|
|
// First remove the steps that are out of bounds.
|
|
steps = Ext.Array.filter(steps, function(elem, index, array) {
|
|
return (+elem > +me.from && +elem < +me.to);
|
|
}, this);
|
|
|
|
// Then add bounds on each side.
|
|
steps = Ext.Array.union([me.from], steps, [me.to]);
|
|
}
|
|
else {
|
|
// Build the array of steps out of the fixed-value 'step'.
|
|
steps = new Array;
|
|
for (val = +me.from; val < +me.to; val += step) {
|
|
steps.push(val);
|
|
}
|
|
steps.push(+me.to);
|
|
}
|
|
stepCount = steps.length;
|
|
|
|
|
|
// Get the gutters for this series
|
|
for (i = 0, ln = series.length; i < ln; i++) {
|
|
if (series[i].seriesIsHidden) {
|
|
continue;
|
|
}
|
|
if (!series[i].getAxesForXAndYFields) {
|
|
continue;
|
|
}
|
|
axes = series[i].getAxesForXAndYFields();
|
|
if (!axes.xAxis || !axes.yAxis || (axes.xAxis === position) || (axes.yAxis === position)) {
|
|
gutters = series[i].getGutters();
|
|
if ((gutters.verticalAxis !== undefined) && (gutters.verticalAxis != verticalAxis)) {
|
|
// This series has gutters that don't apply to the direction of this axis
|
|
// (for instance, gutters for Bars apply to the vertical axis while gutters
|
|
// for Columns apply to the horizontal axis). Since there is no gutter, the
|
|
// padding is all that is left to take into account.
|
|
padding = series[i].getPadding();
|
|
if (verticalAxis) {
|
|
gutters = { lower: padding.bottom, upper: padding.top, verticalAxis: true };
|
|
} else {
|
|
gutters = { lower: padding.left, upper: padding.right, verticalAxis: false };
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Draw the major ticks
|
|
|
|
if (calcLabels) {
|
|
me.labels = [];
|
|
}
|
|
|
|
if (gutters) {
|
|
if (verticalAxis) {
|
|
currentX = Math.floor(x);
|
|
path = ["M", currentX + 0.5, y, "l", 0, -length];
|
|
trueLength = length - (gutters.lower + gutters.upper);
|
|
|
|
for (tick = 0; tick < stepCount; tick++) {
|
|
currentY = y - gutters.lower - (steps[tick] - steps[0]) * trueLength / axisRange;
|
|
path.push("M", currentX, Math.floor(currentY) + 0.5, "l", dashLength * 2, 0);
|
|
|
|
inflections.push([ currentX, Math.floor(currentY) ]);
|
|
|
|
if (calcLabels) {
|
|
me.labels.push(steps[tick]);
|
|
}
|
|
}
|
|
} else {
|
|
currentY = Math.floor(y);
|
|
path = ["M", x, currentY + 0.5, "l", length, 0];
|
|
trueLength = length - (gutters.lower + gutters.upper);
|
|
|
|
for (tick = 0; tick < stepCount; tick++) {
|
|
currentX = x + gutters.lower + (steps[tick] - steps[0]) * trueLength / axisRange;
|
|
path.push("M", Math.floor(currentX) + 0.5, currentY, "l", 0, dashLength * 2 + 1);
|
|
|
|
inflections.push([ Math.floor(currentX), currentY ]);
|
|
|
|
if (calcLabels) {
|
|
me.labels.push(steps[tick]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Draw the minor ticks
|
|
|
|
// If 'minorTickSteps' is...
|
|
// - A number: it contains the number of minor ticks between 2 major ticks.
|
|
// - An array with 2 numbers: it contains a date interval like [Ext.Date.DAY,2].
|
|
// - An array with a single number: it contains the value of a minor tick.
|
|
subDashes = (verticalAxis ? subDashesY : subDashesX);
|
|
if (Ext.isArray(subDashes)) {
|
|
if (subDashes.length == 2) {
|
|
subDashValue = +Ext.Date.add(new Date(), subDashes[0], subDashes[1]) - Date.now();
|
|
} else {
|
|
subDashValue = subDashes[0];
|
|
}
|
|
}
|
|
else {
|
|
if (Ext.isNumber(subDashes) && subDashes > 0) {
|
|
subDashValue = step / (subDashes + 1);
|
|
}
|
|
}
|
|
|
|
if (gutters && subDashValue) {
|
|
for (tick = 0; tick < stepCount - 1; tick++) {
|
|
begin = +steps[tick];
|
|
end = +steps[tick+1];
|
|
if (verticalAxis) {
|
|
for (value = begin + subDashValue; value < end; value += subDashValue) {
|
|
currentY = y - gutters.lower - (value - steps[0]) * trueLength / axisRange;
|
|
path.push("M", currentX, Math.floor(currentY) + 0.5, "l", dashLength, 0);
|
|
}
|
|
}
|
|
else {
|
|
for (value = begin + subDashValue; value < end; value += subDashValue) {
|
|
currentX = x + gutters.upper + (value - steps[0]) * trueLength / axisRange;
|
|
path.push("M", Math.floor(currentX) + 0.5, currentY, "l", 0, dashLength + 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Render
|
|
|
|
if (!me.axis) {
|
|
me.axis = me.chart.surface.add(Ext.apply({
|
|
type: 'path',
|
|
path: path
|
|
}, me.axisStyle));
|
|
}
|
|
me.axis.setAttributes({
|
|
path: path
|
|
}, true);
|
|
me.inflections = inflections;
|
|
if (!init && me.grid) {
|
|
me.drawGrid();
|
|
}
|
|
me.axisBBox = me.axis.getBBox();
|
|
me.drawLabel();
|
|
},
|
|
|
|
/**
|
|
* Renders an horizontal and/or vertical grid into the Surface.
|
|
*/
|
|
drawGrid: function () {
|
|
var me = this,
|
|
surface = me.chart.surface,
|
|
grid = me.grid,
|
|
odd = grid.odd,
|
|
even = grid.even,
|
|
inflections = me.inflections,
|
|
ln = inflections.length - ((odd || even) ? 0 : 1),
|
|
position = me.position,
|
|
maxGutters = me.chart.maxGutters,
|
|
width = me.width - 2,
|
|
point, prevPoint,
|
|
i = 1,
|
|
path = [], styles, lineWidth, dlineWidth,
|
|
oddPath = [], evenPath = [];
|
|
|
|
if (((maxGutters.bottom !== 0 || maxGutters.top !== 0) && (position == 'left' || position == 'right')) ||
|
|
((maxGutters.left !== 0 || maxGutters.right !== 0) && (position == 'top' || position == 'bottom'))) {
|
|
i = 0;
|
|
ln++;
|
|
}
|
|
for (; i < ln; i++) {
|
|
point = inflections[i];
|
|
prevPoint = inflections[i - 1];
|
|
if (odd || even) {
|
|
path = (i % 2) ? oddPath : evenPath;
|
|
styles = ((i % 2) ? odd : even) || {};
|
|
lineWidth = (styles.lineWidth || styles['stroke-width'] || 0) / 2;
|
|
dlineWidth = 2 * lineWidth;
|
|
if (position == 'left') {
|
|
path.push("M", prevPoint[0] + 1 + lineWidth, prevPoint[1] + 0.5 - lineWidth,
|
|
"L", prevPoint[0] + 1 + width - lineWidth, prevPoint[1] + 0.5 - lineWidth,
|
|
"L", point[0] + 1 + width - lineWidth, point[1] + 0.5 + lineWidth,
|
|
"L", point[0] + 1 + lineWidth, point[1] + 0.5 + lineWidth, "Z");
|
|
}
|
|
else if (position == 'right') {
|
|
path.push("M", prevPoint[0] - lineWidth, prevPoint[1] + 0.5 - lineWidth,
|
|
"L", prevPoint[0] - width + lineWidth, prevPoint[1] + 0.5 - lineWidth,
|
|
"L", point[0] - width + lineWidth, point[1] + 0.5 + lineWidth,
|
|
"L", point[0] - lineWidth, point[1] + 0.5 + lineWidth, "Z");
|
|
}
|
|
else if (position == 'top') {
|
|
path.push("M", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] + 1 + lineWidth,
|
|
"L", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] + 1 + width - lineWidth,
|
|
"L", point[0] + 0.5 - lineWidth, point[1] + 1 + width - lineWidth,
|
|
"L", point[0] + 0.5 - lineWidth, point[1] + 1 + lineWidth, "Z");
|
|
}
|
|
else {
|
|
path.push("M", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] - lineWidth,
|
|
"L", prevPoint[0] + 0.5 + lineWidth, prevPoint[1] - width + lineWidth,
|
|
"L", point[0] + 0.5 - lineWidth, point[1] - width + lineWidth,
|
|
"L", point[0] + 0.5 - lineWidth, point[1] - lineWidth, "Z");
|
|
}
|
|
} else {
|
|
if (position == 'left') {
|
|
path = path.concat(["M", point[0] + 0.5, point[1] + 0.5, "l", width, 0]);
|
|
}
|
|
else if (position == 'right') {
|
|
path = path.concat(["M", point[0] - 0.5, point[1] + 0.5, "l", -width, 0]);
|
|
}
|
|
else if (position == 'top') {
|
|
path = path.concat(["M", point[0] + 0.5, point[1] + 0.5, "l", 0, width]);
|
|
}
|
|
else {
|
|
path = path.concat(["M", point[0] + 0.5, point[1] - 0.5, "l", 0, -width]);
|
|
}
|
|
}
|
|
}
|
|
if (odd || even) {
|
|
if (oddPath.length) {
|
|
if (!me.gridOdd && oddPath.length) {
|
|
me.gridOdd = surface.add({
|
|
type: 'path',
|
|
path: oddPath
|
|
});
|
|
}
|
|
me.gridOdd.setAttributes(Ext.apply({
|
|
path: oddPath,
|
|
hidden: false
|
|
}, odd || {}), true);
|
|
}
|
|
if (evenPath.length) {
|
|
if (!me.gridEven) {
|
|
me.gridEven = surface.add({
|
|
type: 'path',
|
|
path: evenPath
|
|
});
|
|
}
|
|
me.gridEven.setAttributes(Ext.apply({
|
|
path: evenPath,
|
|
hidden: false
|
|
}, even || {}), true);
|
|
}
|
|
}
|
|
else {
|
|
if (path.length) {
|
|
if (!me.gridLines) {
|
|
me.gridLines = me.chart.surface.add({
|
|
type: 'path',
|
|
path: path,
|
|
"stroke-width": me.lineWidth || 1,
|
|
stroke: me.gridColor || '#ccc'
|
|
});
|
|
}
|
|
me.gridLines.setAttributes({
|
|
hidden: false,
|
|
path: path
|
|
}, true);
|
|
}
|
|
else if (me.gridLines) {
|
|
me.gridLines.hide(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getOrCreateLabel: function (i, text) {
|
|
var me = this,
|
|
labelGroup = me.labelGroup,
|
|
textLabel = labelGroup.getAt(i),
|
|
surface = me.chart.surface;
|
|
if (textLabel) {
|
|
if (text != textLabel.attr.text) {
|
|
textLabel.setAttributes(Ext.apply({
|
|
text: text
|
|
}, me.label), true);
|
|
textLabel._bbox = textLabel.getBBox();
|
|
}
|
|
}
|
|
else {
|
|
textLabel = surface.add(Ext.apply({
|
|
group: labelGroup,
|
|
type: 'text',
|
|
x: 0,
|
|
y: 0,
|
|
text: text
|
|
}, me.label));
|
|
surface.renderItem(textLabel);
|
|
textLabel._bbox = textLabel.getBBox();
|
|
}
|
|
//get untransformed bounding box
|
|
if (me.label.rotation) {
|
|
textLabel.setAttributes({
|
|
rotation: {
|
|
degrees: 0
|
|
}
|
|
}, true);
|
|
textLabel._ubbox = textLabel.getBBox();
|
|
textLabel.setAttributes(me.label, true);
|
|
} else {
|
|
textLabel._ubbox = textLabel._bbox;
|
|
}
|
|
return textLabel;
|
|
},
|
|
|
|
rect2pointArray: function (sprite) {
|
|
var surface = this.chart.surface,
|
|
rect = surface.getBBox(sprite, true),
|
|
p1 = [rect.x, rect.y],
|
|
p1p = p1.slice(),
|
|
p2 = [rect.x + rect.width, rect.y],
|
|
p2p = p2.slice(),
|
|
p3 = [rect.x + rect.width, rect.y + rect.height],
|
|
p3p = p3.slice(),
|
|
p4 = [rect.x, rect.y + rect.height],
|
|
p4p = p4.slice(),
|
|
matrix = sprite.matrix;
|
|
//transform the points
|
|
p1[0] = matrix.x.apply(matrix, p1p);
|
|
p1[1] = matrix.y.apply(matrix, p1p);
|
|
|
|
p2[0] = matrix.x.apply(matrix, p2p);
|
|
p2[1] = matrix.y.apply(matrix, p2p);
|
|
|
|
p3[0] = matrix.x.apply(matrix, p3p);
|
|
p3[1] = matrix.y.apply(matrix, p3p);
|
|
|
|
p4[0] = matrix.x.apply(matrix, p4p);
|
|
p4[1] = matrix.y.apply(matrix, p4p);
|
|
return [p1, p2, p3, p4];
|
|
},
|
|
|
|
intersect: function (l1, l2) {
|
|
var r1 = this.rect2pointArray(l1),
|
|
r2 = this.rect2pointArray(l2);
|
|
return !!Ext.draw.Draw.intersect(r1, r2).length;
|
|
},
|
|
|
|
drawHorizontalLabels: function () {
|
|
var me = this,
|
|
labelConf = me.label,
|
|
floor = Math.floor,
|
|
max = Math.max,
|
|
axes = me.chart.axes,
|
|
insetPadding = me.chart.insetPadding,
|
|
gutters = me.chart.maxGutters,
|
|
position = me.position,
|
|
inflections = me.inflections,
|
|
ln = inflections.length,
|
|
labels = me.labels,
|
|
maxHeight = 0,
|
|
ratio,
|
|
bbox, point, prevLabel, prevLabelId,
|
|
adjustEnd = me.adjustEnd,
|
|
hasLeft = axes.findIndex('position', 'left') != -1,
|
|
hasRight = axes.findIndex('position', 'right') != -1,
|
|
textLabel, text,
|
|
last, x, y, i, firstLabel;
|
|
|
|
last = ln - 1;
|
|
//get a reference to the first text label dimensions
|
|
point = inflections[0];
|
|
firstLabel = me.getOrCreateLabel(0, me.label.renderer(labels[0]));
|
|
ratio = Math.floor(Math.abs(Math.sin(labelConf.rotate && (labelConf.rotate.degrees * Math.PI / 180) || 0)));
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
point = inflections[i];
|
|
text = me.label.renderer(labels[i]);
|
|
textLabel = me.getOrCreateLabel(i, text);
|
|
bbox = textLabel._bbox;
|
|
maxHeight = max(maxHeight, bbox.height + me.dashSize + me.label.padding);
|
|
x = floor(point[0] - (ratio ? bbox.height : bbox.width) / 2);
|
|
if (adjustEnd && gutters.left == 0 && gutters.right == 0) {
|
|
if (i == 0 && !hasLeft) {
|
|
x = point[0];
|
|
}
|
|
else if (i == last && !hasRight) {
|
|
x = Math.min(x, point[0] - bbox.width + insetPadding);
|
|
}
|
|
}
|
|
if (position == 'top') {
|
|
y = point[1] - (me.dashSize * 2) - me.label.padding - (bbox.height / 2);
|
|
}
|
|
else {
|
|
y = point[1] + (me.dashSize * 2) + me.label.padding + (bbox.height / 2);
|
|
}
|
|
|
|
textLabel.setAttributes({
|
|
hidden: false,
|
|
x: x,
|
|
y: y
|
|
}, true);
|
|
|
|
// Skip label if there isn't available minimum space
|
|
if (i != 0 && (me.intersect(textLabel, prevLabel)
|
|
|| me.intersect(textLabel, firstLabel))) {
|
|
if (i === last && prevLabelId !== 0) {
|
|
prevLabel.hide(true);
|
|
} else {
|
|
textLabel.hide(true);
|
|
continue;
|
|
}
|
|
}
|
|
|
|
prevLabel = textLabel;
|
|
prevLabelId = i;
|
|
}
|
|
|
|
return maxHeight;
|
|
},
|
|
|
|
drawVerticalLabels: function () {
|
|
var me = this,
|
|
inflections = me.inflections,
|
|
position = me.position,
|
|
ln = inflections.length,
|
|
chart = me.chart,
|
|
insetPadding = chart.insetPadding,
|
|
labels = me.labels,
|
|
maxWidth = 0,
|
|
max = Math.max,
|
|
floor = Math.floor,
|
|
ceil = Math.ceil,
|
|
axes = me.chart.axes,
|
|
gutters = me.chart.maxGutters,
|
|
bbox, point, prevLabel, prevLabelId,
|
|
hasTop = axes.findIndex('position', 'top') != -1,
|
|
hasBottom = axes.findIndex('position', 'bottom') != -1,
|
|
adjustEnd = me.adjustEnd,
|
|
textLabel, text,
|
|
last = ln - 1, x, y, i;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
point = inflections[i];
|
|
text = me.label.renderer(labels[i]);
|
|
textLabel = me.getOrCreateLabel(i, text);
|
|
bbox = textLabel._bbox;
|
|
|
|
maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
|
|
y = point[1];
|
|
if (adjustEnd && (gutters.bottom + gutters.top) < bbox.height / 2) {
|
|
if (i == last && !hasTop) {
|
|
y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
|
|
}
|
|
else if (i == 0 && !hasBottom) {
|
|
y = me.y + gutters.bottom - floor(bbox.height / 2);
|
|
}
|
|
}
|
|
if (position == 'left') {
|
|
x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
|
|
}
|
|
else {
|
|
x = point[0] + me.dashSize + me.label.padding + 2;
|
|
}
|
|
textLabel.setAttributes(Ext.apply({
|
|
hidden: false,
|
|
x: x,
|
|
y: y
|
|
}, me.label), true);
|
|
// Skip label if there isn't available minimum space
|
|
if (i != 0 && me.intersect(textLabel, prevLabel)) {
|
|
if (i === last && prevLabelId !== 0) {
|
|
prevLabel.hide(true);
|
|
} else {
|
|
textLabel.hide(true);
|
|
continue;
|
|
}
|
|
}
|
|
prevLabel = textLabel;
|
|
prevLabelId = i;
|
|
}
|
|
|
|
return maxWidth;
|
|
},
|
|
|
|
/**
|
|
* Renders the labels in the axes.
|
|
*/
|
|
drawLabel: function () {
|
|
var me = this,
|
|
position = me.position,
|
|
labelGroup = me.labelGroup,
|
|
inflections = me.inflections,
|
|
maxWidth = 0,
|
|
maxHeight = 0,
|
|
ln, i;
|
|
|
|
if (position == 'left' || position == 'right') {
|
|
maxWidth = me.drawVerticalLabels();
|
|
} else {
|
|
maxHeight = me.drawHorizontalLabels();
|
|
}
|
|
|
|
// Hide unused bars
|
|
ln = labelGroup.getCount();
|
|
i = inflections.length;
|
|
for (; i < ln; i++) {
|
|
labelGroup.getAt(i).hide(true);
|
|
}
|
|
|
|
me.bbox = {};
|
|
Ext.apply(me.bbox, me.axisBBox);
|
|
me.bbox.height = maxHeight;
|
|
me.bbox.width = maxWidth;
|
|
if (Ext.isString(me.title)) {
|
|
me.drawTitle(maxWidth, maxHeight);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates the {@link #title} of this axis.
|
|
* @param {String} title
|
|
*/
|
|
setTitle: function (title) {
|
|
this.title = title;
|
|
this.drawLabel();
|
|
},
|
|
|
|
// @private draws the title for the axis.
|
|
drawTitle: function (maxWidth, maxHeight) {
|
|
var me = this,
|
|
position = me.position,
|
|
surface = me.chart.surface,
|
|
displaySprite = me.displaySprite,
|
|
title = me.title,
|
|
rotate = (position == 'left' || position == 'right'),
|
|
x = me.x,
|
|
y = me.y,
|
|
base, bbox, pad;
|
|
|
|
if (displaySprite) {
|
|
displaySprite.setAttributes({text: title}, true);
|
|
} else {
|
|
base = {
|
|
type: 'text',
|
|
x: 0,
|
|
y: 0,
|
|
text: title
|
|
};
|
|
displaySprite = me.displaySprite = surface.add(Ext.apply(base, me.axisTitleStyle, me.labelTitle));
|
|
surface.renderItem(displaySprite);
|
|
}
|
|
bbox = displaySprite.getBBox();
|
|
pad = me.dashSize + me.label.padding;
|
|
|
|
if (rotate) {
|
|
y -= ((me.length / 2) - (bbox.height / 2));
|
|
if (position == 'left') {
|
|
x -= (maxWidth + pad + (bbox.width / 2));
|
|
}
|
|
else {
|
|
x += (maxWidth + pad + bbox.width - (bbox.width / 2));
|
|
}
|
|
me.bbox.width += bbox.width + 10;
|
|
}
|
|
else {
|
|
x += (me.length / 2) - (bbox.width * 0.5);
|
|
if (position == 'top') {
|
|
y -= (maxHeight + pad + (bbox.height * 0.3));
|
|
}
|
|
else {
|
|
y += (maxHeight + pad + (bbox.height * 0.8));
|
|
}
|
|
me.bbox.height += bbox.height + 10;
|
|
}
|
|
displaySprite.setAttributes({
|
|
translate: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
}, true);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.axis.Category
|
|
*
|
|
* A type of axis that displays items in categories. This axis is generally used to
|
|
* display categorical information like names of items, month names, quarters, etc.
|
|
* but no quantitative values. For that other type of information `Number`
|
|
* axis are more suitable.
|
|
*
|
|
* As with other axis you can set the position of the axis and its title. For example:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
|
|
* {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
|
|
* {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
|
|
* {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
|
|
* {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* store: store,
|
|
* axes: [{
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* title: 'Sample Values',
|
|
* grid: {
|
|
* odd: {
|
|
* opacity: 1,
|
|
* fill: '#ddd',
|
|
* stroke: '#bbb',
|
|
* 'stroke-width': 1
|
|
* }
|
|
* },
|
|
* minimum: 0,
|
|
* adjustMinimumByMajorUnit: 0
|
|
* }, {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics',
|
|
* grid: true,
|
|
* label: {
|
|
* rotate: {
|
|
* degrees: 315
|
|
* }
|
|
* }
|
|
* }],
|
|
* series: [{
|
|
* type: 'area',
|
|
* highlight: false,
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* style: {
|
|
* opacity: 0.93
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* In this example with set the category axis to the bottom of the surface, bound the axis to
|
|
* the `name` property and set as title _Month of the Year_.
|
|
*/
|
|
Ext.define('Ext.chart.axis.Category', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.axis.Axis ,
|
|
|
|
alternateClassName: 'Ext.chart.CategoryAxis',
|
|
|
|
alias: 'axis.category',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} categoryNames
|
|
* A list of category names to display along this axis.
|
|
*/
|
|
categoryNames: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} calculateCategoryCount
|
|
* Indicates whether or not to calculate the number of categories (ticks and
|
|
* labels) when there is not enough room to display all labels on the axis.
|
|
* If set to true, the axis will determine the number of categories to plot.
|
|
* If not, all categories will be plotted.
|
|
*/
|
|
calculateCategoryCount: false,
|
|
|
|
// @private constrains to datapoints between minimum and maximum only
|
|
doConstrain: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
items = store.data.items,
|
|
series = chart.series.items,
|
|
seriesLength = series.length,
|
|
data = [], i
|
|
|
|
for (i = 0; i < seriesLength; i++) {
|
|
if (series[i].type === 'bar' && series[i].stacked) {
|
|
// Do not constrain stacked bar chart.
|
|
return;
|
|
}
|
|
}
|
|
|
|
for (i = me.minimum; i < me.maximum; i++) {
|
|
data.push(items[i]);
|
|
}
|
|
|
|
chart.setSubStore(new Ext.data.Store({
|
|
model: store.model,
|
|
data: data
|
|
}));
|
|
},
|
|
|
|
// @private creates an array of labels to be used when rendering.
|
|
setLabels: function() {
|
|
var store = this.chart.getChartStore(),
|
|
data = store.data.items,
|
|
d, dLen, record,
|
|
fields = this.fields,
|
|
ln = fields.length,
|
|
labels,
|
|
name,
|
|
i;
|
|
|
|
labels = this.labels = [];
|
|
for (d = 0, dLen = data.length; d < dLen; d++) {
|
|
record = data[d];
|
|
for (i = 0; i < ln; i++) {
|
|
name = record.get(fields[i]);
|
|
labels.push(name);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private calculates labels positions and marker positions for rendering.
|
|
applyData: function() {
|
|
this.callParent();
|
|
this.setLabels();
|
|
var count = this.chart.getChartStore().getCount();
|
|
return {
|
|
from: 0,
|
|
to: count - 1,
|
|
power: 1,
|
|
step: 1,
|
|
steps: count - 1
|
|
};
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.axis.Gauge
|
|
*
|
|
* Gauge Axis is the axis to be used with a Gauge series. The Gauge axis
|
|
* displays numeric data from an interval defined by the `minimum`, `maximum` and
|
|
* `step` configuration properties. The placement of the numeric data can be changed
|
|
* by altering the `margin` option that is set to `10` by default.
|
|
*
|
|
* A possible configuration for this axis would look like:
|
|
*
|
|
* axes: [{
|
|
* type: 'gauge',
|
|
* position: 'gauge',
|
|
* minimum: 0,
|
|
* maximum: 100,
|
|
* steps: 10,
|
|
* margin: 7
|
|
* }],
|
|
*/
|
|
Ext.define('Ext.chart.axis.Gauge', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.axis.Abstract ,
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Number} minimum (required)
|
|
* The minimum value of the interval to be displayed in the axis.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} maximum (required)
|
|
* The maximum value of the interval to be displayed in the axis.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} steps (required)
|
|
* The number of steps and tick marks to add to the interval.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} [margin=10]
|
|
* The offset positioning of the tick marks and labels in pixels.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} title
|
|
* The title for the Axis.
|
|
*/
|
|
|
|
position: 'gauge',
|
|
|
|
alias: 'axis.gauge',
|
|
|
|
drawAxis: function(init) {
|
|
var chart = this.chart,
|
|
surface = chart.surface,
|
|
bbox = chart.chartBBox,
|
|
centerX = bbox.x + (bbox.width / 2),
|
|
centerY = bbox.y + bbox.height,
|
|
margin = this.margin || 10,
|
|
rho = Math.min(bbox.width, 2 * bbox.height) /2 + margin,
|
|
sprites = [], sprite,
|
|
steps = this.steps,
|
|
i, pi = Math.PI,
|
|
cos = Math.cos,
|
|
sin = Math.sin;
|
|
|
|
if (this.sprites && !chart.resizing) {
|
|
this.drawLabel();
|
|
return;
|
|
}
|
|
|
|
if (this.margin >= 0) {
|
|
if (!this.sprites) {
|
|
//draw circles
|
|
for (i = 0; i <= steps; i++) {
|
|
sprite = surface.add({
|
|
type: 'path',
|
|
path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
|
|
centerY + (rho - margin) * sin(i / steps * pi - pi),
|
|
'L', centerX + rho * cos(i / steps * pi - pi),
|
|
centerY + rho * sin(i / steps * pi - pi), 'Z'],
|
|
stroke: '#ccc'
|
|
});
|
|
sprite.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
sprites.push(sprite);
|
|
}
|
|
} else {
|
|
sprites = this.sprites;
|
|
//draw circles
|
|
for (i = 0; i <= steps; i++) {
|
|
sprites[i].setAttributes({
|
|
path: ['M', centerX + (rho - margin) * cos(i / steps * pi - pi),
|
|
centerY + (rho - margin) * sin(i / steps * pi - pi),
|
|
'L', centerX + rho * cos(i / steps * pi - pi),
|
|
centerY + rho * sin(i / steps * pi - pi), 'Z'],
|
|
stroke: '#ccc'
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
this.sprites = sprites;
|
|
this.drawLabel();
|
|
if (this.title) {
|
|
this.drawTitle();
|
|
}
|
|
},
|
|
|
|
drawTitle: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
bbox = chart.chartBBox,
|
|
labelSprite = me.titleSprite,
|
|
labelBBox;
|
|
|
|
if (!labelSprite) {
|
|
me.titleSprite = labelSprite = surface.add(Ext.apply({
|
|
type: 'text',
|
|
zIndex: 2
|
|
}, me.axisTitleStyle, me.labelTitle));
|
|
}
|
|
labelSprite.setAttributes(Ext.apply({
|
|
text: me.title
|
|
}, me.label || {}), true);
|
|
labelBBox = labelSprite.getBBox();
|
|
labelSprite.setAttributes({
|
|
x: bbox.x + (bbox.width / 2) - (labelBBox.width / 2),
|
|
y: bbox.y + bbox.height - (labelBBox.height / 2) - 4
|
|
}, true);
|
|
},
|
|
|
|
/**
|
|
* Updates the {@link #title} of this axis.
|
|
* @param {String} title
|
|
*/
|
|
setTitle: function(title) {
|
|
this.title = title;
|
|
this.drawTitle();
|
|
},
|
|
|
|
drawLabel: function() {
|
|
var chart = this.chart,
|
|
surface = chart.surface,
|
|
bbox = chart.chartBBox,
|
|
centerX = bbox.x + (bbox.width / 2),
|
|
centerY = bbox.y + bbox.height,
|
|
margin = this.margin || 10,
|
|
rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
|
|
round = Math.round,
|
|
labelArray = [], label,
|
|
maxValue = this.maximum || 0,
|
|
minValue = this.minimum || 0,
|
|
steps = this.steps, i = 0,
|
|
adjY,
|
|
pi = Math.PI,
|
|
cos = Math.cos,
|
|
sin = Math.sin,
|
|
labelConf = this.label,
|
|
renderer = labelConf.renderer || Ext.identityFn;
|
|
|
|
if (!this.labelArray) {
|
|
//draw scale
|
|
for (i = 0; i <= steps; i++) {
|
|
// TODO Adjust for height of text / 2 instead
|
|
adjY = (i === 0 || i === steps) ? 7 : 0;
|
|
label = surface.add({
|
|
type: 'text',
|
|
text: renderer(round(minValue + i / steps * (maxValue - minValue))),
|
|
x: centerX + rho * cos(i / steps * pi - pi),
|
|
y: centerY + rho * sin(i / steps * pi - pi) - adjY,
|
|
'text-anchor': 'middle',
|
|
'stroke-width': 0.2,
|
|
zIndex: 10,
|
|
stroke: '#333'
|
|
});
|
|
label.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
labelArray.push(label);
|
|
}
|
|
}
|
|
else {
|
|
labelArray = this.labelArray;
|
|
//draw values
|
|
for (i = 0; i <= steps; i++) {
|
|
// TODO Adjust for height of text / 2 instead
|
|
adjY = (i === 0 || i === steps) ? 7 : 0;
|
|
labelArray[i].setAttributes({
|
|
text: renderer(round(minValue + i / steps * (maxValue - minValue))),
|
|
x: centerX + rho * cos(i / steps * pi - pi),
|
|
y: centerY + rho * sin(i / steps * pi - pi) - adjY
|
|
}, true);
|
|
}
|
|
}
|
|
this.labelArray = labelArray;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.axis.Numeric
|
|
*
|
|
* An axis to handle numeric values. This axis is used for quantitative data as
|
|
* opposed to the category axis. You can set mininum and maximum values to the
|
|
* axis so that the values are bound to that. If no values are set, then the
|
|
* scale will auto-adjust to the values.
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
|
|
* {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
|
|
* {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
|
|
* {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
|
|
* {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* store: store,
|
|
* axes: [{
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* title: 'Sample Values',
|
|
* grid: {
|
|
* odd: {
|
|
* opacity: 1,
|
|
* fill: '#ddd',
|
|
* stroke: '#bbb',
|
|
* 'stroke-width': 1
|
|
* }
|
|
* },
|
|
* minimum: 0,
|
|
* adjustMinimumByMajorUnit: 0
|
|
* }, {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics',
|
|
* grid: true,
|
|
* label: {
|
|
* rotate: {
|
|
* degrees: 315
|
|
* }
|
|
* }
|
|
* }],
|
|
* series: [{
|
|
* type: 'area',
|
|
* highlight: false,
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* style: {
|
|
* opacity: 0.93
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* In this example we create an axis of Numeric type. We set a minimum value so that
|
|
* even if all series have values greater than zero, the grid starts at zero. We bind
|
|
* the axis onto the left part of the surface by setting `position` to `left`.
|
|
* We bind three different store fields to this axis by setting `fields` to an array.
|
|
* We set the title of the axis to _Number of Hits_ by using the `title` property.
|
|
* We use a `grid` configuration to set odd background rows to a certain style and even rows
|
|
* to be transparent/ignored.
|
|
*/
|
|
Ext.define('Ext.chart.axis.Numeric', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.axis.Axis ,
|
|
|
|
alternateClassName: 'Ext.chart.NumericAxis',
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'Numeric',
|
|
|
|
// @private
|
|
isNumericAxis: true,
|
|
|
|
alias: 'axis.numeric',
|
|
|
|
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
hasLabel = !!(config.label && config.label.renderer),
|
|
label;
|
|
|
|
me.callParent([config]);
|
|
label = me.label;
|
|
|
|
if (config.constrain == null) {
|
|
me.constrain = (config.minimum != null && config.maximum != null);
|
|
}
|
|
|
|
if (!hasLabel) {
|
|
label.renderer = function(v) {
|
|
return me.roundToDecimal(v, me.decimals);
|
|
};
|
|
}
|
|
},
|
|
|
|
roundToDecimal: function(v, dec) {
|
|
var val = Math.pow(10, dec || 0);
|
|
return Math.round(v * val) / val;
|
|
},
|
|
|
|
/**
|
|
* @cfg {Number} minimum
|
|
* The minimum value drawn by the axis. If not set explicitly, the axis
|
|
* minimum will be calculated automatically. It is ignored for stacked charts.
|
|
*/
|
|
minimum: NaN,
|
|
|
|
/**
|
|
* @cfg {Number} maximum
|
|
* The maximum value drawn by the axis. If not set explicitly, the axis
|
|
* maximum will be calculated automatically. It is ignored for stacked charts.
|
|
*/
|
|
maximum: NaN,
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain
|
|
* If true, the values of the chart will be rendered only if they belong between minimum and maximum.
|
|
* If false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not.
|
|
* Default's true if maximum and minimum is specified. It is ignored for stacked charts.
|
|
*/
|
|
constrain: true,
|
|
|
|
/**
|
|
* @cfg {Number} decimals
|
|
* The number of decimals to round the value to.
|
|
*/
|
|
decimals: 2,
|
|
|
|
/**
|
|
* @cfg {String} scale
|
|
* The scaling algorithm to use on this axis. May be "linear" or
|
|
* "logarithmic". Currently only linear scale is implemented.
|
|
* @private
|
|
*/
|
|
scale: "linear",
|
|
|
|
// @private constrains to datapoints between minimum and maximum only
|
|
doConstrain: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
items = store.data.items,
|
|
d, dLen, record,
|
|
series = chart.series.items,
|
|
fields = me.fields,
|
|
ln = fields.length,
|
|
range = me.calcEnds(),
|
|
min = range.from, max = range.to, i, l,
|
|
useAcum = false,
|
|
value, data = [],
|
|
addRecord;
|
|
|
|
for (d = 0, dLen = items.length; d < dLen; d++) {
|
|
addRecord = true;
|
|
record = items[d];
|
|
for (i = 0; i < ln; i++) {
|
|
value = record.get(fields[i]);
|
|
if (me.type == 'Time' && typeof value == "string") {
|
|
value = Date.parse(value);
|
|
}
|
|
if (+value < +min) {
|
|
addRecord = false;
|
|
break;
|
|
}
|
|
if (+value > +max) {
|
|
addRecord = false;
|
|
break;
|
|
}
|
|
}
|
|
if (addRecord) {
|
|
data.push(record);
|
|
}
|
|
}
|
|
|
|
chart.setSubStore(new Ext.data.Store({
|
|
model: store.model,
|
|
data: data
|
|
}));
|
|
},
|
|
/**
|
|
* @cfg {String} position
|
|
* Indicates the position of the axis relative to the chart
|
|
*/
|
|
position: 'left',
|
|
|
|
/**
|
|
* @cfg {Boolean} adjustMaximumByMajorUnit
|
|
* Indicates whether to extend maximum beyond data's maximum to the nearest
|
|
* majorUnit.
|
|
*/
|
|
adjustMaximumByMajorUnit: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} adjustMinimumByMajorUnit
|
|
* Indicates whether to extend the minimum beyond data's minimum to the
|
|
* nearest majorUnit.
|
|
*/
|
|
adjustMinimumByMajorUnit: false,
|
|
|
|
// applying constraint
|
|
processView: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
series = chart.series.items,
|
|
i, l;
|
|
|
|
for (i = 0, l = series.length; i < l; i++) {
|
|
if (series[i].stacked) {
|
|
// Do not constrain stacked charts (bar, column, or area).
|
|
delete me.minimum;
|
|
delete me.maximum;
|
|
me.constrain = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (me.constrain) {
|
|
me.doConstrain();
|
|
}
|
|
},
|
|
|
|
// @private apply data.
|
|
applyData: function() {
|
|
this.callParent();
|
|
return this.calcEnds();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.chart.axis.Radial', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.axis.Numeric ,
|
|
|
|
/* End Definitions */
|
|
|
|
position: 'radial',
|
|
|
|
alias: 'axis.radial',
|
|
|
|
/**
|
|
* @cfg {Number} maximum
|
|
* The maximum value drawn by the axis. If not set explicitly, the axis
|
|
* maximum will be calculated automatically.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} [steps=10]
|
|
* The number of circles to draw outward from the center.
|
|
*/
|
|
|
|
drawAxis: function(init) {
|
|
var chart = this.chart,
|
|
surface = chart.surface,
|
|
bbox = chart.chartBBox,
|
|
store = chart.getChartStore(),
|
|
l = store.getCount(),
|
|
centerX = bbox.x + (bbox.width / 2),
|
|
centerY = bbox.y + (bbox.height / 2),
|
|
rho = Math.min(bbox.width, bbox.height) /2,
|
|
sprites = [], sprite,
|
|
steps = this.steps,
|
|
i, j, pi2 = Math.PI * 2,
|
|
cos = Math.cos, sin = Math.sin;
|
|
|
|
if (this.sprites && !chart.resizing) {
|
|
this.drawLabel();
|
|
return;
|
|
}
|
|
|
|
if (!this.sprites) {
|
|
//draw circles
|
|
for (i = 1; i <= steps; i++) {
|
|
sprite = surface.add({
|
|
type: 'circle',
|
|
x: centerX,
|
|
y: centerY,
|
|
radius: Math.max(rho * i / steps, 0),
|
|
stroke: '#ccc'
|
|
});
|
|
sprite.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
sprites.push(sprite);
|
|
}
|
|
//draw lines
|
|
for (i = 0; i < l; i++) {
|
|
sprite = surface.add({
|
|
type: 'path',
|
|
path: ['M', centerX, centerY, 'L', centerX + rho * cos(i / l * pi2), centerY + rho * sin(i / l * pi2), 'Z'],
|
|
stroke: '#ccc'
|
|
});
|
|
sprite.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
sprites.push(sprite);
|
|
}
|
|
} else {
|
|
sprites = this.sprites;
|
|
//draw circles
|
|
for (i = 0; i < steps; i++) {
|
|
sprites[i].setAttributes({
|
|
x: centerX,
|
|
y: centerY,
|
|
radius: Math.max(rho * (i + 1) / steps, 0),
|
|
stroke: '#ccc'
|
|
}, true);
|
|
}
|
|
//draw lines
|
|
for (j = 0; j < l; j++) {
|
|
sprites[i + j].setAttributes({
|
|
path: ['M', centerX, centerY, 'L', centerX + rho * cos(j / l * pi2), centerY + rho * sin(j / l * pi2), 'Z'],
|
|
stroke: '#ccc'
|
|
}, true);
|
|
}
|
|
}
|
|
this.sprites = sprites;
|
|
|
|
this.drawLabel();
|
|
},
|
|
|
|
drawLabel: function() {
|
|
var chart = this.chart,
|
|
seriesItems = chart.series.items,
|
|
series,
|
|
surface = chart.surface,
|
|
bbox = chart.chartBBox,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
ln, record,
|
|
centerX = bbox.x + (bbox.width / 2),
|
|
centerY = bbox.y + (bbox.height / 2),
|
|
rho = Math.min(bbox.width, bbox.height) /2,
|
|
max = Math.max, round = Math.round,
|
|
labelArray = [], label,
|
|
fields = [], nfields,
|
|
categories = [], xField,
|
|
aggregate = !this.maximum,
|
|
maxValue = this.maximum || 0,
|
|
steps = this.steps, i = 0, j, dx, dy,
|
|
pi2 = Math.PI * 2,
|
|
cos = Math.cos, sin = Math.sin,
|
|
display = this.label.display,
|
|
draw = display !== 'none',
|
|
margin = 10;
|
|
|
|
if (!draw) {
|
|
return;
|
|
}
|
|
|
|
//get all rendered fields
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
fields.push(series.yField);
|
|
xField = series.xField;
|
|
}
|
|
|
|
//get maxValue to interpolate
|
|
for (j = 0, ln = data.length; j < ln; j++) {
|
|
record = data[j];
|
|
categories.push(record.get(xField));
|
|
|
|
if (aggregate) {
|
|
for (i = 0, nfields = fields.length; i < nfields; i++) {
|
|
maxValue = max(+record.get(fields[i]), maxValue);
|
|
}
|
|
}
|
|
}
|
|
if (!this.labelArray) {
|
|
if (display != 'categories') {
|
|
//draw scale
|
|
for (i = 1; i <= steps; i++) {
|
|
label = surface.add({
|
|
type: 'text',
|
|
text: round(i / steps * maxValue),
|
|
x: centerX,
|
|
y: centerY - rho * i / steps,
|
|
'text-anchor': 'middle',
|
|
'stroke-width': 0.1,
|
|
stroke: '#333'
|
|
});
|
|
label.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
labelArray.push(label);
|
|
}
|
|
}
|
|
if (display != 'scale') {
|
|
//draw text
|
|
for (j = 0, steps = categories.length; j < steps; j++) {
|
|
dx = cos(j / steps * pi2) * (rho + margin);
|
|
dy = sin(j / steps * pi2) * (rho + margin);
|
|
label = surface.add({
|
|
type: 'text',
|
|
text: categories[j],
|
|
x: centerX + dx,
|
|
y: centerY + dy,
|
|
'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start')
|
|
});
|
|
label.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
labelArray.push(label);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
labelArray = this.labelArray;
|
|
if (display != 'categories') {
|
|
//draw values
|
|
for (i = 0; i < steps; i++) {
|
|
labelArray[i].setAttributes({
|
|
text: round((i + 1) / steps * maxValue),
|
|
x: centerX,
|
|
y: centerY - rho * (i + 1) / steps,
|
|
'text-anchor': 'middle',
|
|
'stroke-width': 0.1,
|
|
stroke: '#333'
|
|
}, true);
|
|
}
|
|
}
|
|
if (display != 'scale') {
|
|
//draw text
|
|
for (j = 0, steps = categories.length; j < steps; j++) {
|
|
dx = cos(j / steps * pi2) * (rho + margin);
|
|
dy = sin(j / steps * pi2) * (rho + margin);
|
|
if (labelArray[i + j]) {
|
|
labelArray[i + j].setAttributes({
|
|
type: 'text',
|
|
text: categories[j],
|
|
x: centerX + dx,
|
|
y: centerY + dy,
|
|
'text-anchor': dx * dx <= 0.001? 'middle' : (dx < 0? 'end' : 'start')
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.labelArray = labelArray;
|
|
},
|
|
|
|
getRange: function () {
|
|
var range = this.callParent();
|
|
range.min = 0; // Radial charts currently assume that the origin is always 0.
|
|
return range;
|
|
},
|
|
|
|
processView: function() {
|
|
var me = this,
|
|
seriesItems = me.chart.series.items,
|
|
i, ln, series, ends, fields = [];
|
|
|
|
for (i = 0, ln = seriesItems.length; i < ln; i++) {
|
|
series = seriesItems[i];
|
|
fields.push(series.yField);
|
|
}
|
|
me.fields = fields;
|
|
|
|
ends = me.calcEnds();
|
|
me.maximum = ends.to;
|
|
me.steps = ends.steps;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A type of axis whose units are measured in time values. Use this axis
|
|
* for listing dates that you will want to group or dynamically change.
|
|
* If you just want to display dates as categories then use the
|
|
* Category class for axis instead.
|
|
*
|
|
* For example:
|
|
*
|
|
* axes: [{
|
|
* type: 'Time',
|
|
* position: 'bottom',
|
|
* fields: 'date',
|
|
* title: 'Day',
|
|
* dateFormat: 'M d',
|
|
*
|
|
* constrain: true,
|
|
* fromDate: new Date('1/1/11'),
|
|
* toDate: new Date('1/7/11')
|
|
* }]
|
|
*
|
|
* In this example we're creating a time axis that has as title *Day*.
|
|
* The field the axis is bound to is `date`.
|
|
* The date format to use to display the text for the axis labels is `M d`
|
|
* which is a three letter month abbreviation followed by the day number.
|
|
* The time axis will show values for dates between `fromDate` and `toDate`.
|
|
* Since `constrain` is set to true all other values for other dates not between
|
|
* the fromDate and toDate will not be displayed.
|
|
*
|
|
*/
|
|
Ext.define('Ext.chart.axis.Time', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.axis.Numeric ,
|
|
|
|
alternateClassName: 'Ext.chart.TimeAxis',
|
|
|
|
type: 'Time',
|
|
|
|
alias: 'axis.time',
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String/Boolean} dateFormat
|
|
* Indicates the format the date will be rendered on.
|
|
* For example: 'M d' will render the dates as 'Jan 30', etc.
|
|
* For a list of possible format strings see {@link Ext.Date Date}
|
|
*/
|
|
dateFormat: false,
|
|
|
|
/**
|
|
* @cfg {Date} fromDate The starting date for the time axis.
|
|
*/
|
|
fromDate: false,
|
|
|
|
/**
|
|
* @cfg {Date} toDate The ending date for the time axis.
|
|
*/
|
|
toDate: false,
|
|
|
|
/**
|
|
* @cfg {Array} step
|
|
* An array with two components: The first is the unit of the step (day, month, year, etc). The second one is a number.
|
|
* If the number is an integer, it represents the number of units for the step ([Ext.Date.DAY, 2] means "Every other day").
|
|
* If the number is a fraction, it represents the number of steps per unit ([Ext.Date.DAY, 1/2] means "Twice a day").
|
|
* If the unit is the month, the steps may be adjusted depending on the month. For instance [Ext.Date.MONTH, 1/3], which means "Three times a month",
|
|
* generates steps on the 1st, the 10th and the 20th of every month regardless of whether a month has 28 days or 31 days. The steps are generated
|
|
* as follows:
|
|
* - [Ext.Date.MONTH, n]: on the current date every 'n' months, maxed to the number of days in the month.
|
|
* - [Ext.Date.MONTH, 1/2]: on the 1st and 15th of every month.
|
|
* - [Ext.Date.MONTH, 1/3]: on the 1st, 10th and 20th of every month.
|
|
* - [Ext.Date.MONTH, 1/4]: on the 1st, 8th, 15th and 22nd of every month.
|
|
*
|
|
* Defaults to: [Ext.Date.DAY, 1].
|
|
*/
|
|
step: [Ext.Date.DAY, 1],
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain
|
|
* If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.
|
|
* If false, the time axis will adapt to the new values by adding/removing steps.
|
|
*/
|
|
constrain: false,
|
|
|
|
constructor: function (config) {
|
|
var me = this, label, f, df;
|
|
me.callParent([config]);
|
|
label = me.label || {};
|
|
df = this.dateFormat;
|
|
if (df) {
|
|
if (label.renderer) {
|
|
f = label.renderer;
|
|
label.renderer = function(v) {
|
|
v = f(v);
|
|
return Ext.Date.format(new Date(f(v)), df);
|
|
};
|
|
} else {
|
|
label.renderer = function(v) {
|
|
return Ext.Date.format(new Date(v >> 0), df);
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
// Before rendering, set current default step count to be number of records.
|
|
processView: function () {
|
|
var me = this;
|
|
if (me.fromDate) {
|
|
me.minimum = +me.fromDate;
|
|
}
|
|
if (me.toDate) {
|
|
me.maximum = +me.toDate;
|
|
}
|
|
if(me.constrain){
|
|
me.doConstrain();
|
|
}
|
|
},
|
|
|
|
// @private modifies the store and creates the labels for the axes.
|
|
calcEnds: function() {
|
|
var me = this, range, step = me.step;
|
|
if (step) {
|
|
range = me.getRange();
|
|
range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step]: step);
|
|
if (me.minimum) {
|
|
range.from = me.minimum;
|
|
}
|
|
if (me.maximum) {
|
|
range.to = me.maximum;
|
|
}
|
|
return range;
|
|
} else {
|
|
return me.callParent(arguments);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @class Ext.chart.series.Series
|
|
*
|
|
* Series is the abstract class containing the common logic to all chart series. Series includes
|
|
* methods from Labels, Highlights, Tips and Callouts mixins. This class implements the logic of handling
|
|
* mouse events, animating, hiding, showing all elements and returning the color of the series to be used as a legend item.
|
|
*
|
|
* ## Listeners
|
|
*
|
|
* The series class supports listeners via the Observable syntax. Some of these listeners are:
|
|
*
|
|
* - `itemclick` When the user interacts with a marker.
|
|
* - `itemmouseup` When the user interacts with a marker.
|
|
* - `itemmousedown` When the user interacts with a marker.
|
|
* - `itemmousemove` When the user iteracts with a marker.
|
|
* - `afterrender` Will be triggered when the animation ends or when the series has been rendered completely.
|
|
*
|
|
* For example:
|
|
*
|
|
* series: [{
|
|
* type: 'column',
|
|
* axis: 'left',
|
|
* listeners: {
|
|
* 'afterrender': function() {
|
|
* console('afterrender');
|
|
* }
|
|
* },
|
|
* xField: 'category',
|
|
* yField: 'data1'
|
|
* }]
|
|
*/
|
|
Ext.define('Ext.chart.series.Series', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable ,
|
|
labels: Ext.chart.Label ,
|
|
highlights: Ext.chart.Highlight ,
|
|
tips: Ext.chart.Tip ,
|
|
callouts: Ext.chart.Callout
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} highlight
|
|
* If set to `true` it will highlight the markers or the series when hovering
|
|
* with the mouse. This parameter can also be an object with the same style
|
|
* properties you would apply to a {@link Ext.draw.Sprite} to apply custom
|
|
* styles to markers and series.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} tips
|
|
* Add tooltips to the visualization's markers. The options for the tips are the
|
|
* same configuration used with {@link Ext.tip.ToolTip}. For example:
|
|
*
|
|
* tips: {
|
|
* trackMouse: true,
|
|
* width: 140,
|
|
* height: 28,
|
|
* renderer: function(storeItem, item) {
|
|
* this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
|
|
* }
|
|
* },
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} type
|
|
* The type of series. Set in subclasses.
|
|
*/
|
|
type: null,
|
|
|
|
/**
|
|
* @cfg {String} title
|
|
* The human-readable name of the series.
|
|
*/
|
|
title: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} showInLegend
|
|
* Whether to show this series in the legend.
|
|
*/
|
|
showInLegend: true,
|
|
|
|
/**
|
|
* @cfg {Function} renderer
|
|
* A function that can be overridden to set custom styling properties to each rendered element.
|
|
* Passes in (sprite, record, attributes, index, store) to the function.
|
|
*/
|
|
renderer: function(sprite, record, attributes, index, store) {
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* @cfg {Array} shadowAttributes
|
|
* An array with shadow attributes
|
|
*/
|
|
shadowAttributes: null,
|
|
|
|
// @private animating flag
|
|
animating: false,
|
|
|
|
// @private default gutters
|
|
nullGutters: { lower: 0, upper: 0, verticalAxis: undefined },
|
|
|
|
// @private default padding
|
|
nullPadding: { left:0, right:0, width:0, bottom:0, top:0, height:0 },
|
|
|
|
/**
|
|
* @cfg {Object} listeners
|
|
* An (optional) object with event callbacks. All event callbacks get the target *item* as first parameter. The callback functions are:
|
|
*
|
|
* - itemclick
|
|
* - itemmouseover
|
|
* - itemmouseout
|
|
* - itemmousedown
|
|
* - itemmouseup
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
if (config) {
|
|
Ext.apply(me, config);
|
|
}
|
|
|
|
me.shadowGroups = [];
|
|
|
|
me.mixins.labels.constructor.call(me, config);
|
|
me.mixins.highlights.constructor.call(me, config);
|
|
me.mixins.tips.constructor.call(me, config);
|
|
me.mixins.callouts.constructor.call(me, config);
|
|
|
|
me.addEvents({
|
|
scope: me,
|
|
itemclick: true,
|
|
itemmouseover: true,
|
|
itemmouseout: true,
|
|
itemmousedown: true,
|
|
itemmouseup: true,
|
|
mouseleave: true,
|
|
afterdraw: true,
|
|
|
|
/**
|
|
* @event titlechange
|
|
* Fires when the series title is changed via {@link #setTitle}.
|
|
* @param {String} title The new title value
|
|
* @param {Number} index The index in the collection of titles
|
|
*/
|
|
titlechange: true
|
|
});
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
me.on({
|
|
scope: me,
|
|
itemmouseover: me.onItemMouseOver,
|
|
itemmouseout: me.onItemMouseOut,
|
|
mouseleave: me.onMouseLeave
|
|
});
|
|
|
|
if (me.style) {
|
|
Ext.apply(me.seriesStyle, me.style);
|
|
}
|
|
},
|
|
|
|
onRedraw: Ext.emptyFn,
|
|
|
|
/**
|
|
* Iterate over each of the records for this series. The default implementation simply iterates
|
|
* through the entire data store, but individual series implementations can override this to
|
|
* provide custom handling, e.g. adding/removing records.
|
|
* @param {Function} fn The function to execute for each record.
|
|
* @param {Object} scope Scope for the fn.
|
|
*/
|
|
eachRecord: function(fn, scope) {
|
|
var chart = this.chart;
|
|
chart.getChartStore().each(fn, scope);
|
|
},
|
|
|
|
/**
|
|
* Return the number of records being displayed in this series. Defaults to the number of
|
|
* records in the store; individual series implementations can override to provide custom handling.
|
|
*/
|
|
getRecordCount: function() {
|
|
var chart = this.chart,
|
|
store = chart.getChartStore();
|
|
return store ? store.getCount() : 0;
|
|
},
|
|
|
|
/**
|
|
* Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend.
|
|
* @param index
|
|
*/
|
|
isExcluded: function(index) {
|
|
var excludes = this.__excludes;
|
|
return !!(excludes && excludes[index]);
|
|
},
|
|
|
|
// @private set the bbox and clipBox for the series
|
|
setBBox: function(noGutter) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
chartBBox = chart.chartBBox,
|
|
maxGutters = noGutter ? { left: 0, right: 0, bottom: 0, top: 0 } : chart.maxGutters,
|
|
clipBox, bbox;
|
|
|
|
clipBox = {
|
|
x: chartBBox.x,
|
|
y: chartBBox.y,
|
|
width: chartBBox.width,
|
|
height: chartBBox.height
|
|
};
|
|
me.clipBox = clipBox;
|
|
|
|
bbox = {
|
|
x: (clipBox.x + maxGutters.left) - (chart.zoom.x * chart.zoom.width),
|
|
y: (clipBox.y + maxGutters.bottom) - (chart.zoom.y * chart.zoom.height),
|
|
width: (clipBox.width - (maxGutters.left + maxGutters.right)) * chart.zoom.width,
|
|
height: (clipBox.height - (maxGutters.bottom + maxGutters.top)) * chart.zoom.height
|
|
};
|
|
me.bbox = bbox;
|
|
},
|
|
|
|
// @private set the animation for the sprite
|
|
onAnimate: function(sprite, attr) {
|
|
var me = this;
|
|
sprite.stopAnimation();
|
|
if (me.animating) {
|
|
return sprite.animate(Ext.applyIf(attr, me.chart.animate));
|
|
} else {
|
|
me.animating = true;
|
|
return sprite.animate(Ext.apply(Ext.applyIf(attr, me.chart.animate), {
|
|
// use callback, don't overwrite listeners
|
|
callback: function() {
|
|
me.animating = false;
|
|
me.fireEvent('afterrender');
|
|
}
|
|
}));
|
|
}
|
|
},
|
|
|
|
// @private return the gutters.
|
|
getGutters: function() {
|
|
return this.nullGutters;
|
|
},
|
|
|
|
// @private return the gutters.
|
|
getPadding: function() {
|
|
return this.nullPadding;
|
|
},
|
|
|
|
// @private wrapper for the itemmouseover event.
|
|
onItemMouseOver: function(item) {
|
|
var me = this;
|
|
if (item.series === me) {
|
|
if (me.highlight) {
|
|
me.highlightItem(item);
|
|
}
|
|
if (me.tooltip) {
|
|
me.showTip(item);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private wrapper for the itemmouseout event.
|
|
onItemMouseOut: function(item) {
|
|
var me = this;
|
|
if (item.series === me) {
|
|
me.unHighlightItem();
|
|
if (me.tooltip) {
|
|
me.hideTip(item);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private wrapper for the mouseleave event.
|
|
onMouseLeave: function() {
|
|
var me = this;
|
|
me.unHighlightItem();
|
|
if (me.tooltip) {
|
|
me.hideTip();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* For a given x/y point relative to the Surface, find a corresponding item from this
|
|
* series, if any.
|
|
* @param {Number} x
|
|
* @param {Number} y
|
|
* @return {Object} An object describing the item, or null if there is no matching item.
|
|
* The exact contents of this object will vary by series type, but should always contain the following:
|
|
* @return {Ext.chart.series.Series} return.series the Series object to which the item belongs
|
|
* @return {Object} return.value the value(s) of the item's data point
|
|
* @return {Array} return.point the x/y coordinates relative to the chart box of a single point
|
|
* for this data item, which can be used as e.g. a tooltip anchor point.
|
|
* @return {Ext.draw.Sprite} return.sprite the item's rendering Sprite.
|
|
*/
|
|
getItemForPoint: function(x, y) {
|
|
//if there are no items to query just return null.
|
|
if (!this.items || !this.items.length || this.seriesIsHidden) {
|
|
return null;
|
|
}
|
|
var me = this,
|
|
items = me.items,
|
|
bbox = me.bbox,
|
|
item, i, ln;
|
|
// Check bounds
|
|
if (!Ext.draw.Draw.withinBox(x, y, bbox)) {
|
|
return null;
|
|
}
|
|
for (i = 0, ln = items.length; i < ln; i++) {
|
|
if (items[i] && this.isItemInPoint(x, y, items[i], i)) {
|
|
return items[i];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item, i) {
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Hides all the elements in the series.
|
|
*/
|
|
hideAll: function() {
|
|
var me = this,
|
|
items = me.items,
|
|
item, len, i, j, l, sprite, shadows;
|
|
|
|
me.seriesIsHidden = true;
|
|
me._prevShowMarkers = me.showMarkers;
|
|
|
|
me.showMarkers = false;
|
|
//hide all labels
|
|
me.hideLabels(0);
|
|
//hide all sprites
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
item = items[i];
|
|
sprite = item.sprite;
|
|
if (sprite) {
|
|
sprite.setAttributes({
|
|
hidden: true
|
|
}, true);
|
|
}
|
|
|
|
if (sprite && sprite.shadows) {
|
|
shadows = sprite.shadows;
|
|
for (j = 0, l = shadows.length; j < l; ++j) {
|
|
shadows[j].setAttributes({
|
|
hidden: true
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Shows all the elements in the series.
|
|
*/
|
|
showAll: function() {
|
|
var me = this,
|
|
prevAnimate = me.chart.animate;
|
|
me.chart.animate = false;
|
|
me.seriesIsHidden = false;
|
|
me.showMarkers = me._prevShowMarkers;
|
|
me.drawSeries();
|
|
me.chart.animate = prevAnimate;
|
|
},
|
|
|
|
hide: function() {
|
|
if (this.items) {
|
|
var me = this,
|
|
items = me.items,
|
|
i, j, lsh, ln, shadows;
|
|
|
|
if (items && items.length) {
|
|
for (i = 0, ln = items.length; i < ln; ++i) {
|
|
if (items[i].sprite) {
|
|
items[i].sprite.hide(true);
|
|
|
|
shadows = items[i].shadows || items[i].sprite.shadows;
|
|
if (shadows) {
|
|
for (j = 0, lsh = shadows.length; j < lsh; ++j) {
|
|
shadows[j].hide(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
me.hideLabels();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns a string with the color to be used for the series legend item.
|
|
*/
|
|
getLegendColor: function(index) {
|
|
var me = this, fill, stroke;
|
|
if (me.seriesStyle) {
|
|
fill = me.seriesStyle.fill;
|
|
stroke = me.seriesStyle.stroke;
|
|
if (fill && fill != 'none') {
|
|
return fill;
|
|
}
|
|
if(stroke){
|
|
return stroke;
|
|
}
|
|
}
|
|
return (me.colorArrayStyle)?me.colorArrayStyle[me.themeIdx % me.colorArrayStyle.length]:'#000';
|
|
},
|
|
|
|
/**
|
|
* Checks whether the data field should be visible in the legend
|
|
* @private
|
|
* @param {Number} index The index of the current item
|
|
*/
|
|
visibleInLegend: function(index){
|
|
var excludes = this.__excludes;
|
|
if (excludes) {
|
|
return !excludes[index];
|
|
}
|
|
return !this.seriesIsHidden;
|
|
},
|
|
|
|
/**
|
|
* Changes the value of the {@link #title} for the series.
|
|
* Arguments can take two forms:
|
|
* <ul>
|
|
* <li>A single String value: this will be used as the new single title for the series (applies
|
|
* to series with only one yField)</li>
|
|
* <li>A numeric index and a String value: this will set the title for a single indexed yField.</li>
|
|
* </ul>
|
|
* @param {Number} index
|
|
* @param {String} title
|
|
*/
|
|
setTitle: function(index, title) {
|
|
var me = this,
|
|
oldTitle = me.title;
|
|
|
|
if (Ext.isString(index)) {
|
|
title = index;
|
|
index = 0;
|
|
}
|
|
|
|
if (Ext.isArray(oldTitle)) {
|
|
oldTitle[index] = title;
|
|
} else {
|
|
me.title = title;
|
|
}
|
|
|
|
me.fireEvent('titlechange', title, index);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.series.Cartesian
|
|
*
|
|
* Common base class for series implementations which plot values using x/y coordinates.
|
|
*/
|
|
Ext.define('Ext.chart.series.Cartesian', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Series ,
|
|
|
|
alternateClassName: ['Ext.chart.CartesianSeries', 'Ext.chart.CartesianChart'],
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} xField
|
|
* The name of the data Model field corresponding to the x-axis value.
|
|
*/
|
|
xField: null,
|
|
|
|
/**
|
|
* @cfg {String/String[]} yField
|
|
* The name(s) of the data Model field(s) corresponding to the y-axis value(s).
|
|
*/
|
|
yField: null,
|
|
|
|
/**
|
|
* @cfg {String/String[]} axis
|
|
* The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.
|
|
* You must explicitly set this value to bind the values of the line series to the ones in the axis, otherwise a
|
|
* relative scale will be used. For example, if you're using a Scatter or Line series and you'd like to have the
|
|
* values in the chart relative to the bottom and left axes then `axis` should be `['left', 'bottom']`.
|
|
*/
|
|
axis: 'left',
|
|
|
|
getLegendLabels: function() {
|
|
var me = this,
|
|
labels = [],
|
|
fields, i, ln,
|
|
combinations = me.combinations,
|
|
title,
|
|
combo, label0, label1;
|
|
|
|
fields = [].concat(me.yField);
|
|
for (i = 0, ln = fields.length; i < ln; i++) {
|
|
title = me.title;
|
|
// Use the 'title' config if present, otherwise use the raw yField name
|
|
labels.push((Ext.isArray(title) ? title[i] : title) || fields[i]);
|
|
}
|
|
|
|
// Handle yFields combined via legend drag-drop
|
|
// TODO need to check to see if this is supported in extjs 4 branch
|
|
if (combinations) {
|
|
combinations = Ext.Array.from(combinations);
|
|
for (i = 0, ln = combinations.length; i < ln; i++) {
|
|
combo = combinations[i];
|
|
label0 = labels[combo[0]];
|
|
label1 = labels[combo[1]];
|
|
labels[combo[1]] = label0 + ' & ' + label1;
|
|
labels.splice(combo[0], 1);
|
|
}
|
|
}
|
|
|
|
return labels;
|
|
},
|
|
|
|
/**
|
|
* @protected Iterates over a given record's values for each of this series's yFields,
|
|
* executing a given function for each value. Any yFields that have been combined
|
|
* via legend drag-drop will be treated as a single value.
|
|
* @param {Ext.data.Model} record
|
|
* @param {Function} fn
|
|
* @param {Object} scope
|
|
*/
|
|
eachYValue: function(record, fn, scope) {
|
|
var me = this,
|
|
yValueAccessors = me.getYValueAccessors(),
|
|
i, ln, accessor;
|
|
|
|
for (i = 0, ln = yValueAccessors.length; i < ln; i++) {
|
|
accessor = yValueAccessors[i];
|
|
fn.call(scope, accessor(record), i);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @protected Returns the number of yField values, taking into account fields combined
|
|
* via legend drag-drop.
|
|
* @return {Number}
|
|
*/
|
|
getYValueCount: function() {
|
|
return this.getYValueAccessors().length;
|
|
},
|
|
|
|
combine: function(index1, index2) {
|
|
var me = this,
|
|
accessors = me.getYValueAccessors(),
|
|
accessor1 = accessors[index1],
|
|
accessor2 = accessors[index2];
|
|
|
|
// Combine the yValue accessors for the two indexes into a single accessor that returns their sum
|
|
accessors[index2] = function(record) {
|
|
return accessor1(record) + accessor2(record);
|
|
};
|
|
accessors.splice(index1, 1);
|
|
|
|
me.callParent([index1, index2]);
|
|
},
|
|
|
|
clearCombinations: function() {
|
|
// Clear combined accessors, they'll get regenerated on next call to getYValueAccessors
|
|
delete this.yValueAccessors;
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* @protected Returns an array of functions, each of which returns the value of the yField
|
|
* corresponding to function's index in the array, for a given record (each function takes the
|
|
* record as its only argument.) If yFields have been combined by the user via legend drag-drop,
|
|
* this list of accessors will be kept in sync with those combinations.
|
|
* @return {Array} array of accessor functions
|
|
*/
|
|
getYValueAccessors: function() {
|
|
var me = this,
|
|
accessors = me.yValueAccessors,
|
|
yFields, yField, i, ln;
|
|
if (!accessors) {
|
|
accessors = me.yValueAccessors = [];
|
|
yFields = [].concat(me.yField);
|
|
|
|
for (i = 0, ln = yFields.length; i < ln; i++) {
|
|
yField = yFields[i];
|
|
accessors.push(function(record) {
|
|
return record.get(yField);
|
|
});
|
|
}
|
|
}
|
|
return accessors;
|
|
},
|
|
|
|
/**
|
|
* Calculate the min and max values for this series's xField.
|
|
* @return {Array} [min, max]
|
|
*/
|
|
getMinMaxXValues: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
count = me.getRecordCount(),
|
|
i, ln, record,
|
|
min, max,
|
|
xField = me.xField,
|
|
xValue;
|
|
|
|
if (count > 0) {
|
|
min = Infinity;
|
|
max = -min;
|
|
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
xValue = record.get(xField);
|
|
if (xValue > max) {
|
|
max = xValue;
|
|
}
|
|
if (xValue < min) {
|
|
min = xValue;
|
|
}
|
|
}
|
|
|
|
// If we made no progress, treat it like a category axis
|
|
if (min == Infinity) {
|
|
min = 0;
|
|
}
|
|
|
|
if (max == -Infinity) {
|
|
max = count - 1;
|
|
}
|
|
} else {
|
|
min = max = 0;
|
|
}
|
|
return [min, max];
|
|
},
|
|
|
|
/**
|
|
* Calculate the min and max values for this series's yField(s). Takes into account yField
|
|
* combinations, exclusions, and stacking.
|
|
* @return {Array} [min, max]
|
|
*/
|
|
getMinMaxYValues: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
count = me.getRecordCount(),
|
|
i, ln, record,
|
|
stacked = me.stacked,
|
|
min, max,
|
|
positiveTotal, negativeTotal;
|
|
|
|
function eachYValueStacked(yValue, i) {
|
|
if (!me.isExcluded(i)) {
|
|
if (yValue < 0) {
|
|
negativeTotal += yValue;
|
|
} else {
|
|
positiveTotal += yValue;
|
|
}
|
|
}
|
|
}
|
|
|
|
function eachYValue(yValue, i) {
|
|
if (!me.isExcluded(i)) {
|
|
if (yValue > max) {
|
|
max = yValue;
|
|
}
|
|
if (yValue < min) {
|
|
min = yValue;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (count > 0) {
|
|
min = Infinity;
|
|
max = -min;
|
|
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
if (stacked) {
|
|
positiveTotal = 0;
|
|
negativeTotal = 0;
|
|
me.eachYValue(record, eachYValueStacked);
|
|
if (positiveTotal > max) {
|
|
max = positiveTotal;
|
|
}
|
|
if (negativeTotal < min) {
|
|
min = negativeTotal;
|
|
}
|
|
} else {
|
|
me.eachYValue(record, eachYValue);
|
|
}
|
|
}
|
|
|
|
// If we made no progress, treat it like a category axis
|
|
if (min == Infinity) {
|
|
min = 0;
|
|
}
|
|
|
|
if (max == -Infinity) {
|
|
max = count - 1;
|
|
}
|
|
} else {
|
|
min = max = 0;
|
|
}
|
|
return [min, max];
|
|
},
|
|
|
|
getAxesForXAndYFields: function() {
|
|
var me = this,
|
|
axes = me.chart.axes,
|
|
axis = [].concat(me.axis),
|
|
yFields = {}, yFieldList = [].concat(me.yField),
|
|
xFields = {}, xFieldList = [].concat(me.xField),
|
|
fields, xAxis, yAxis, i, ln, flipXY;
|
|
|
|
|
|
flipXY = me.type === 'bar' && me.column === false;
|
|
if(flipXY) {
|
|
fields = yFieldList;
|
|
yFieldList = xFieldList;
|
|
xFieldList = fields;
|
|
}
|
|
if (Ext.Array.indexOf(axis, 'top') > -1) {
|
|
xAxis = 'top';
|
|
} else if (Ext.Array.indexOf(axis, 'bottom') > -1) {
|
|
xAxis = 'bottom';
|
|
} else {
|
|
if (axes.get('top') && axes.get('bottom')) {
|
|
for (i = 0, ln = xFieldList.length; i < ln; i++) {
|
|
xFields[xFieldList[i]] = true;
|
|
}
|
|
fields = [].concat(axes.get('bottom').fields);
|
|
for (i = 0, ln = fields.length; i < ln; i++) {
|
|
if (xFields[fields[i]]) {
|
|
xAxis = 'bottom';
|
|
break
|
|
}
|
|
}
|
|
fields = [].concat(axes.get('top').fields);
|
|
for (i = 0, ln = fields.length; i < ln; i++) {
|
|
if (xFields[fields[i]]) {
|
|
xAxis = 'top';
|
|
break
|
|
}
|
|
}
|
|
} else if (axes.get('top')) {
|
|
xAxis = 'top';
|
|
} else if (axes.get('bottom')) {
|
|
xAxis = 'bottom';
|
|
}
|
|
}
|
|
if (Ext.Array.indexOf(axis, 'left') > -1) {
|
|
yAxis = 'left';
|
|
} else if (Ext.Array.indexOf(axis, 'right') > -1) {
|
|
yAxis = 'right';
|
|
} else {
|
|
if (axes.get('left') && axes.get('right')) {
|
|
for (i = 0, ln = yFieldList.length; i < ln; i++) {
|
|
yFields[yFieldList[i]] = true;
|
|
}
|
|
fields = [].concat(axes.get('right').fields);
|
|
for (i = 0, ln = fields.length; i < ln; i++) {
|
|
if (yFields[fields[i]]) {
|
|
|
|
break
|
|
}
|
|
}
|
|
fields = [].concat(axes.get('left').fields);
|
|
for (i = 0, ln = fields.length; i < ln; i++) {
|
|
if (yFields[fields[i]]) {
|
|
yAxis = 'left';
|
|
break
|
|
}
|
|
}
|
|
} else if (axes.get('left')) {
|
|
yAxis = 'left';
|
|
} else if (axes.get('right')) {
|
|
yAxis = 'right';
|
|
}
|
|
}
|
|
|
|
return flipXY ? {
|
|
xAxis: yAxis,
|
|
yAxis: xAxis
|
|
}: {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis
|
|
};
|
|
}
|
|
|
|
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.series.Area
|
|
* @extends Ext.chart.series.Cartesian
|
|
*
|
|
* Creates a Stacked Area Chart. The stacked area chart is useful when displaying multiple aggregated layers of information.
|
|
* As with all other series, the Area Series must be appended in the *series* Chart array configuration. See the Chart
|
|
* documentation for more information. A typical configuration object for the area series could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13 },
|
|
* { 'name': 'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3 },
|
|
* { 'name': 'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7 },
|
|
* { 'name': 'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23 },
|
|
* { 'name': 'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* store: store,
|
|
* axes: [
|
|
* {
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* title: 'Sample Values',
|
|
* grid: {
|
|
* odd: {
|
|
* opacity: 1,
|
|
* fill: '#ddd',
|
|
* stroke: '#bbb',
|
|
* 'stroke-width': 1
|
|
* }
|
|
* },
|
|
* minimum: 0,
|
|
* adjustMinimumByMajorUnit: 0
|
|
* },
|
|
* {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics',
|
|
* grid: true,
|
|
* label: {
|
|
* rotate: {
|
|
* degrees: 315
|
|
* }
|
|
* }
|
|
* }
|
|
* ],
|
|
* series: [{
|
|
* type: 'area',
|
|
* highlight: false,
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* style: {
|
|
* opacity: 0.93
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* In this configuration we set `area` as the type for the series, set highlighting options to true for highlighting elements on hover,
|
|
* take the left axis to measure the data in the area series, set as xField (x values) the name field of each element in the store,
|
|
* and as yFields (aggregated layers) seven data fields from the same store. Then we override some theming styles by adding some opacity
|
|
* to the style object.
|
|
*/
|
|
Ext.define('Ext.chart.series.Area', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Cartesian ,
|
|
|
|
alias: 'series.area',
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'area',
|
|
|
|
// @private Area charts are alyways stacked
|
|
stacked: true,
|
|
|
|
/**
|
|
* @cfg {Object} style
|
|
* Append styling properties to this object for it to override theme properties.
|
|
*/
|
|
style: {},
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
surface = me.chart.surface,
|
|
i, l;
|
|
config.highlightCfg = Ext.Object.merge({}, {
|
|
lineWidth: 3,
|
|
stroke: '#55c',
|
|
opacity: 0.8,
|
|
color: '#f00'
|
|
}, config.highlightCfg);
|
|
|
|
Ext.apply(me, config, {
|
|
__excludes: []
|
|
});
|
|
if (me.highlight) {
|
|
me.highlightSprite = surface.add({
|
|
type: 'path',
|
|
path: ['M', 0, 0],
|
|
zIndex: 1000,
|
|
opacity: 0.3,
|
|
lineWidth: 5,
|
|
hidden: true,
|
|
stroke: '#444'
|
|
});
|
|
}
|
|
me.group = surface.getGroup(me.seriesId);
|
|
},
|
|
|
|
// @private Shrinks dataSets down to a smaller size
|
|
shrink: function(xValues, yValues, size) {
|
|
var len = xValues.length,
|
|
ratio = Math.floor(len / size),
|
|
i, j,
|
|
xSum = 0,
|
|
yCompLen = this.areas.length,
|
|
ySum = [],
|
|
xRes = [],
|
|
yRes = [];
|
|
//initialize array
|
|
for (j = 0; j < yCompLen; ++j) {
|
|
ySum[j] = 0;
|
|
}
|
|
for (i = 0; i < len; ++i) {
|
|
xSum += +xValues[i];
|
|
for (j = 0; j < yCompLen; ++j) {
|
|
ySum[j] += +yValues[i][j];
|
|
}
|
|
if (i % ratio == 0) {
|
|
//push averages
|
|
xRes.push(xSum/ratio);
|
|
for (j = 0; j < yCompLen; ++j) {
|
|
ySum[j] /= ratio;
|
|
}
|
|
yRes.push(ySum);
|
|
//reset sum accumulators
|
|
xSum = 0;
|
|
for (j = 0, ySum = []; j < yCompLen; ++j) {
|
|
ySum[j] = 0;
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
x: xRes,
|
|
y: yRes
|
|
};
|
|
},
|
|
|
|
// @private Get chart and data boundaries
|
|
getBounds: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
i, l, record,
|
|
areas = [].concat(me.yField),
|
|
areasLen = areas.length,
|
|
xValues = [],
|
|
yValues = [],
|
|
infinity = Infinity,
|
|
minX = infinity,
|
|
minY = infinity,
|
|
maxX = -infinity,
|
|
maxY = -infinity,
|
|
math = Math,
|
|
mmin = math.min,
|
|
mmax = math.max,
|
|
boundAxis = me.getAxesForXAndYFields(),
|
|
boundXAxis = boundAxis.xAxis,
|
|
boundYAxis = boundAxis.yAxis,
|
|
ends, allowDate, tmp,
|
|
bbox, xScale, yScale, xValue, yValue, areaIndex, acumY, ln, sumValues, clipBox, areaElem, axis, out;
|
|
|
|
me.setBBox();
|
|
bbox = me.bbox;
|
|
|
|
if (axis = chart.axes.get(boundXAxis)) {
|
|
if (axis.type === 'Time') {
|
|
allowDate = true;
|
|
}
|
|
ends = axis.applyData();
|
|
minX = ends.from;
|
|
maxX = ends.to;
|
|
}
|
|
|
|
if (axis = chart.axes.get(boundYAxis)) {
|
|
ends = axis.applyData();
|
|
minY = ends.from;
|
|
maxY = ends.to;
|
|
}
|
|
|
|
// If a field was specified without a corresponding axis, create one to get bounds
|
|
if (me.xField && !Ext.isNumber(minX)) {
|
|
axis = me.getMinMaxXValues();
|
|
allowDate = true;
|
|
minX = axis[0];
|
|
maxX = axis[1];
|
|
}
|
|
|
|
if (me.yField && !Ext.isNumber(minY)) {
|
|
axis = me.getMinMaxYValues();
|
|
minY = axis[0];
|
|
maxY = axis[1];
|
|
}
|
|
|
|
if (!Ext.isNumber(minY)) {
|
|
minY = 0;
|
|
}
|
|
if (!Ext.isNumber(maxY)) {
|
|
maxY = 0;
|
|
}
|
|
|
|
l = data.length;
|
|
if (l > 0 && allowDate) {
|
|
tmp = data[0].get(me.xField);
|
|
if (typeof tmp != 'number') {
|
|
tmp = +tmp;
|
|
if (isNaN(tmp)) {
|
|
allowDate = false;
|
|
}
|
|
}
|
|
}
|
|
for (i = 0; i < l; i++) {
|
|
record = data[i];
|
|
xValue = record.get(me.xField);
|
|
yValue = [];
|
|
if (typeof xValue != 'number') {
|
|
if (allowDate) {
|
|
xValue = +xValue;
|
|
} else {
|
|
xValue = i;
|
|
}
|
|
}
|
|
xValues.push(xValue);
|
|
acumY = 0;
|
|
for (areaIndex = 0; areaIndex < areasLen; areaIndex++) {
|
|
// Excluded series
|
|
if (me.__excludes[areaIndex]) {
|
|
continue;
|
|
}
|
|
areaElem = record.get(areas[areaIndex]);
|
|
if (typeof areaElem == 'number') {
|
|
yValue.push(areaElem);
|
|
}
|
|
}
|
|
yValues.push(yValue);
|
|
}
|
|
|
|
xScale = bbox.width / ((maxX - minX) || 1);
|
|
yScale = bbox.height / ((maxY - minY) || 1);
|
|
|
|
ln = xValues.length;
|
|
if ((ln > bbox.width) && me.areas) {
|
|
sumValues = me.shrink(xValues, yValues, bbox.width);
|
|
xValues = sumValues.x;
|
|
yValues = sumValues.y;
|
|
}
|
|
|
|
return {
|
|
bbox: bbox,
|
|
minX: minX,
|
|
minY: minY,
|
|
xValues: xValues,
|
|
yValues: yValues,
|
|
xScale: xScale,
|
|
yScale: yScale,
|
|
areasLen: areasLen
|
|
};
|
|
},
|
|
|
|
// @private Build an array of paths for the chart
|
|
getPaths: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
first = true,
|
|
bounds = me.getBounds(),
|
|
bbox = bounds.bbox,
|
|
items = me.items = [],
|
|
componentPaths = [],
|
|
componentPath,
|
|
count = 0,
|
|
paths = [],
|
|
i, ln, x, y, xValue, yValue, acumY, areaIndex, prevAreaIndex, areaElem, path, startX;
|
|
|
|
ln = bounds.xValues.length;
|
|
// Start the path
|
|
for (i = 0; i < ln; i++) {
|
|
xValue = bounds.xValues[i];
|
|
yValue = bounds.yValues[i];
|
|
x = bbox.x + (xValue - bounds.minX) * bounds.xScale;
|
|
if (startX === undefined) {
|
|
startX = x;
|
|
}
|
|
acumY = 0;
|
|
count = 0;
|
|
for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
|
|
// Excluded series
|
|
if (me.__excludes[areaIndex]) {
|
|
continue;
|
|
}
|
|
if (!componentPaths[areaIndex]) {
|
|
componentPaths[areaIndex] = [];
|
|
}
|
|
areaElem = yValue[count];
|
|
acumY += areaElem;
|
|
y = bbox.y + bbox.height - (acumY - bounds.minY) * bounds.yScale;
|
|
if (!paths[areaIndex]) {
|
|
paths[areaIndex] = ['M', x, y];
|
|
componentPaths[areaIndex].push(['L', x, y]);
|
|
} else {
|
|
paths[areaIndex].push('L', x, y);
|
|
componentPaths[areaIndex].push(['L', x, y]);
|
|
}
|
|
if (!items[areaIndex]) {
|
|
items[areaIndex] = {
|
|
pointsUp: [],
|
|
pointsDown: [],
|
|
series: me
|
|
};
|
|
}
|
|
items[areaIndex].pointsUp.push([x, y]);
|
|
count++;
|
|
}
|
|
}
|
|
|
|
// Close the paths
|
|
for (areaIndex = 0; areaIndex < bounds.areasLen; areaIndex++) {
|
|
// Excluded series
|
|
if (me.__excludes[areaIndex]) {
|
|
continue;
|
|
}
|
|
path = paths[areaIndex];
|
|
|
|
// Close bottom path to the axis
|
|
if (areaIndex == 0 || first) {
|
|
first = false;
|
|
|
|
path.push('L', x, bbox.y + bbox.height,
|
|
'L', startX, bbox.y + bbox.height,
|
|
'Z');
|
|
}
|
|
// Close other paths to the one before them
|
|
else {
|
|
componentPath = componentPaths[prevAreaIndex];
|
|
componentPath.reverse();
|
|
path.push('L', x, componentPath[0][2]);
|
|
for (i = 0; i < ln; i++) {
|
|
path.push(componentPath[i][0],
|
|
componentPath[i][1],
|
|
componentPath[i][2]);
|
|
items[areaIndex].pointsDown[ln -i -1] = [componentPath[i][1], componentPath[i][2]];
|
|
}
|
|
path.push('L', startX, path[2], 'Z');
|
|
}
|
|
prevAreaIndex = areaIndex;
|
|
}
|
|
return {
|
|
paths: paths,
|
|
areasLen: bounds.areasLen
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
surface = chart.surface,
|
|
animate = chart.animate,
|
|
group = me.group,
|
|
endLineStyle = Ext.apply(me.seriesStyle, me.style),
|
|
colorArrayStyle = me.colorArrayStyle,
|
|
colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
|
|
themeIndex = me.themeIdx,
|
|
areaIndex, areaElem, paths, path, rendererAttributes, idx;
|
|
|
|
me.unHighlightItem();
|
|
me.cleanHighlights();
|
|
|
|
if (!store || !store.getCount() || me.seriesIsHidden) {
|
|
me.hide();
|
|
me.items = [];
|
|
return;
|
|
}
|
|
|
|
paths = me.getPaths();
|
|
|
|
if (!me.areas) {
|
|
me.areas = [];
|
|
}
|
|
|
|
for (areaIndex = 0; areaIndex < paths.areasLen; areaIndex++) {
|
|
// Excluded series
|
|
if (me.__excludes[areaIndex]) {
|
|
continue;
|
|
}
|
|
idx = themeIndex + areaIndex;
|
|
if (!me.areas[areaIndex]) {
|
|
me.items[areaIndex].sprite = me.areas[areaIndex] = surface.add(Ext.apply({}, {
|
|
type: 'path',
|
|
group: group,
|
|
// 'clip-rect': me.clipBox,
|
|
path: paths.paths[areaIndex],
|
|
stroke: endLineStyle.stroke || colorArrayStyle[idx % colorArrayLength],
|
|
fill: colorArrayStyle[idx % colorArrayLength]
|
|
}, endLineStyle || {}));
|
|
}
|
|
areaElem = me.areas[areaIndex];
|
|
path = paths.paths[areaIndex];
|
|
if (animate) {
|
|
//Add renderer to line. There is not a unique record associated with this.
|
|
rendererAttributes = me.renderer(areaElem, false, {
|
|
path: path,
|
|
// 'clip-rect': me.clipBox,
|
|
fill: colorArrayStyle[areaIndex % colorArrayLength],
|
|
stroke: endLineStyle.stroke || colorArrayStyle[areaIndex % colorArrayLength]
|
|
}, areaIndex, store);
|
|
//fill should not be used here but when drawing the special fill path object
|
|
me.animation = me.onAnimate(areaElem, {
|
|
to: rendererAttributes
|
|
});
|
|
} else {
|
|
rendererAttributes = me.renderer(areaElem, false, {
|
|
path: path,
|
|
// 'clip-rect': me.clipBox,
|
|
hidden: false,
|
|
fill: colorArrayStyle[idx % colorArrayLength],
|
|
stroke: endLineStyle.stroke || colorArrayStyle[idx % colorArrayLength]
|
|
}, areaIndex, store);
|
|
me.areas[areaIndex].setAttributes(rendererAttributes, true);
|
|
}
|
|
}
|
|
me.renderLabels();
|
|
me.renderCallouts();
|
|
},
|
|
|
|
// @private
|
|
onAnimate: function(sprite, attr) {
|
|
sprite.show();
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
onCreateLabel: function(storeItem, item, i, display) {
|
|
// TODO: Implement labels for Area charts.
|
|
// The code in onCreateLabel() and onPlaceLabel() was originally copied
|
|
// from another Series but it cannot work because item.point[] doesn't
|
|
// exist in Area charts. Instead, the getPaths() methods above prepares
|
|
// item.pointsUp[] and item.pointsDown[] which don't have the same structure.
|
|
// In other series, there are as many 'items' as there are data points along the
|
|
// x-axis. In this series, there are as many 'items' as there are series
|
|
// (usually a much smaller number) and each pointsUp[] or pointsDown[] array
|
|
// contains as many values as there are data points along the x-axis;
|
|
return null;
|
|
|
|
var me = this,
|
|
group = me.labelsGroup,
|
|
config = me.label,
|
|
bbox = me.bbox,
|
|
endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {});
|
|
|
|
return me.chart.surface.add(Ext.apply({
|
|
'type': 'text',
|
|
'text-anchor': 'middle',
|
|
'group': group,
|
|
'x': Number(item.point[0]),
|
|
'y': bbox.y + bbox.height / 2
|
|
}, endLabelStyle || {}));
|
|
},
|
|
|
|
// @private
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
resizing = chart.resizing,
|
|
config = me.label,
|
|
format = config.renderer,
|
|
field = config.field,
|
|
bbox = me.bbox,
|
|
x = Number(item.point[i][0]),
|
|
y = Number(item.point[i][1]),
|
|
labelBox, width, height;
|
|
|
|
label.setAttributes({
|
|
text: format(storeItem.get(field[index]), label, storeItem, item, i, display, animate, index),
|
|
hidden: true
|
|
}, true);
|
|
|
|
labelBox = label.getBBox();
|
|
width = labelBox.width / 2;
|
|
height = labelBox.height / 2;
|
|
|
|
//correct label position to fit into the box
|
|
if (x < bbox.x + width) {
|
|
x = bbox.x + width;
|
|
} else if (x + width > bbox.x + bbox.width) {
|
|
x = bbox.x + bbox.width - width;
|
|
}
|
|
|
|
y = y - height;
|
|
if (y < bbox.y + height) {
|
|
y += 2 * height;
|
|
} else if (y + height > bbox.y + bbox.height) {
|
|
y -= 2 * height;
|
|
}
|
|
|
|
if (me.chart.animate && !me.chart.resizing) {
|
|
label.show(true);
|
|
me.onAnimate(label, {
|
|
to: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
});
|
|
} else {
|
|
label.setAttributes({
|
|
x: x,
|
|
y: y
|
|
}, true);
|
|
if (resizing && me.animation) {
|
|
me.animation.on('afteranimate', function() {
|
|
label.show(true);
|
|
});
|
|
} else {
|
|
label.show(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onPlaceCallout : function(callout, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
resizing = chart.resizing,
|
|
config = me.callouts,
|
|
items = me.items,
|
|
prev = (i == 0) ? false : items[i -1].point,
|
|
next = (i == items.length -1) ? false : items[i +1].point,
|
|
cur = item.point,
|
|
dir, norm, normal, a, aprev, anext,
|
|
bbox = (callout && callout.label ? callout.label.getBBox() : {width:0,height:0}),
|
|
offsetFromViz = 30,
|
|
offsetToSide = 10,
|
|
offsetBox = 3,
|
|
boxx, boxy, boxw, boxh,
|
|
p, clipRect = me.clipRect,
|
|
x, y;
|
|
|
|
if (!bbox.width || !bbox.height) {
|
|
return;
|
|
}
|
|
|
|
//get the right two points
|
|
if (!prev) {
|
|
prev = cur;
|
|
}
|
|
if (!next) {
|
|
next = cur;
|
|
}
|
|
a = (next[1] - prev[1]) / (next[0] - prev[0]);
|
|
aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
|
|
anext = (next[1] - cur[1]) / (next[0] - cur[0]);
|
|
|
|
norm = Math.sqrt(1 + a * a);
|
|
dir = [1 / norm, a / norm];
|
|
normal = [-dir[1], dir[0]];
|
|
|
|
//keep the label always on the outer part of the "elbow"
|
|
if (aprev > 0 && anext < 0 && normal[1] < 0 || aprev < 0 && anext > 0 && normal[1] > 0) {
|
|
normal[0] *= -1;
|
|
normal[1] *= -1;
|
|
} else if (Math.abs(aprev) < Math.abs(anext) && normal[0] < 0 || Math.abs(aprev) > Math.abs(anext) && normal[0] > 0) {
|
|
normal[0] *= -1;
|
|
normal[1] *= -1;
|
|
}
|
|
|
|
//position
|
|
x = cur[0] + normal[0] * offsetFromViz;
|
|
y = cur[1] + normal[1] * offsetFromViz;
|
|
|
|
//box position and dimensions
|
|
boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
|
|
boxy = y - bbox.height /2 - offsetBox;
|
|
boxw = bbox.width + 2 * offsetBox;
|
|
boxh = bbox.height + 2 * offsetBox;
|
|
|
|
//now check if we're out of bounds and invert the normal vector correspondingly
|
|
//this may add new overlaps between labels (but labels won't be out of bounds).
|
|
if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
|
|
normal[0] *= -1;
|
|
}
|
|
if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
|
|
normal[1] *= -1;
|
|
}
|
|
|
|
//update positions
|
|
x = cur[0] + normal[0] * offsetFromViz;
|
|
y = cur[1] + normal[1] * offsetFromViz;
|
|
|
|
//update box position and dimensions
|
|
boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
|
|
boxy = y - bbox.height /2 - offsetBox;
|
|
boxw = bbox.width + 2 * offsetBox;
|
|
boxh = bbox.height + 2 * offsetBox;
|
|
|
|
//set the line from the middle of the pie to the box.
|
|
callout.lines.setAttributes({
|
|
path: ["M", cur[0], cur[1], "L", x, y, "Z"]
|
|
}, true);
|
|
//set box position
|
|
callout.box.setAttributes({
|
|
x: boxx,
|
|
y: boxy,
|
|
width: boxw,
|
|
height: boxh
|
|
}, true);
|
|
//set text position
|
|
callout.label.setAttributes({
|
|
x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
|
|
y: y
|
|
}, true);
|
|
for (p in callout) {
|
|
callout[p].show(true);
|
|
}
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item, i) {
|
|
var me = this,
|
|
pointsUp = item.pointsUp,
|
|
pointsDown = item.pointsDown,
|
|
abs = Math.abs,
|
|
distChanged = false,
|
|
last = false,
|
|
dist = Infinity, p, pln, point;
|
|
|
|
for (p = 0, pln = pointsUp.length; p < pln; p++) {
|
|
point = [pointsUp[p][0], pointsUp[p][1]];
|
|
|
|
distChanged = false;
|
|
last = p == pln -1;
|
|
|
|
if (dist > abs(x - point[0])) {
|
|
dist = abs(x - point[0]);
|
|
distChanged = true;
|
|
if (last) {
|
|
++p;
|
|
}
|
|
}
|
|
|
|
if (!distChanged || (distChanged && last)) {
|
|
point = pointsUp[p -1];
|
|
if (y >= point[1] && (!pointsDown.length || y <= (pointsDown[p -1][1]))) {
|
|
item.storeIndex = p -1;
|
|
item.storeField = me.yField[i];
|
|
item.storeItem = me.chart.getChartStore().getAt(p -1);
|
|
item._points = pointsDown.length? [point, pointsDown[p -1]] : [point];
|
|
return true;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Highlight this entire series.
|
|
* @param {Object} item Info about the item; same format as returned by #getItemForPoint.
|
|
*/
|
|
highlightSeries: function() {
|
|
var area, to, fillColor;
|
|
if (this._index !== undefined) {
|
|
area = this.areas[this._index];
|
|
if (area.__highlightAnim) {
|
|
area.__highlightAnim.paused = true;
|
|
}
|
|
area.__highlighted = true;
|
|
area.__prevOpacity = area.__prevOpacity || area.attr.opacity || 1;
|
|
area.__prevFill = area.__prevFill || area.attr.fill;
|
|
area.__prevLineWidth = area.__prevLineWidth || area.attr.lineWidth;
|
|
fillColor = Ext.draw.Color.fromString(area.__prevFill);
|
|
to = {
|
|
lineWidth: (area.__prevLineWidth || 0) + 2
|
|
};
|
|
if (fillColor) {
|
|
to.fill = fillColor.getLighter(0.2).toString();
|
|
}
|
|
else {
|
|
to.opacity = Math.max(area.__prevOpacity - 0.3, 0);
|
|
}
|
|
if (this.chart.animate) {
|
|
area.__highlightAnim = new Ext.fx.Anim(Ext.apply({
|
|
target: area,
|
|
to: to
|
|
}, this.chart.animate));
|
|
}
|
|
else {
|
|
area.setAttributes(to, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* UnHighlight this entire series.
|
|
* @param {Object} item Info about the item; same format as returned by #getItemForPoint.
|
|
*/
|
|
unHighlightSeries: function() {
|
|
var area;
|
|
if (this._index !== undefined) {
|
|
area = this.areas[this._index];
|
|
if (area.__highlightAnim) {
|
|
area.__highlightAnim.paused = true;
|
|
}
|
|
if (area.__highlighted) {
|
|
area.__highlighted = false;
|
|
area.__highlightAnim = new Ext.fx.Anim({
|
|
target: area,
|
|
to: {
|
|
fill: area.__prevFill,
|
|
opacity: area.__prevOpacity,
|
|
lineWidth: area.__prevLineWidth
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Highlight the specified item. If no item is provided the whole series will be highlighted.
|
|
* @param item {Object} Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
highlightItem: function(item) {
|
|
var me = this,
|
|
points, path;
|
|
if (!item) {
|
|
this.highlightSeries();
|
|
return;
|
|
}
|
|
points = item._points;
|
|
path = points.length == 2? ['M', points[0][0], points[0][1], 'L', points[1][0], points[1][1]]
|
|
: ['M', points[0][0], points[0][1], 'L', points[0][0], me.bbox.y + me.bbox.height];
|
|
me.highlightSprite.setAttributes({
|
|
path: path,
|
|
hidden: false
|
|
}, true);
|
|
},
|
|
|
|
/**
|
|
* Un-highlights the specified item. If no item is provided it will un-highlight the entire series.
|
|
* @param {Object} item Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
unHighlightItem: function(item) {
|
|
if (!item) {
|
|
this.unHighlightSeries();
|
|
}
|
|
|
|
if (this.highlightSprite) {
|
|
this.highlightSprite.hide(true);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
hideAll: function(index) {
|
|
var me = this;
|
|
index = (isNaN(me._index) ? index : me._index) || 0;
|
|
me.__excludes[index] = true;
|
|
me.areas[index].hide(true);
|
|
me.redraw();
|
|
},
|
|
|
|
// @private
|
|
showAll: function(index) {
|
|
var me = this;
|
|
index = (isNaN(me._index) ? index : me._index) || 0;
|
|
me.__excludes[index] = false;
|
|
me.areas[index].show(true);
|
|
me.redraw();
|
|
},
|
|
|
|
redraw: function() {
|
|
//store previous configuration for the legend
|
|
//and set it to false so we don't
|
|
//re-build label elements if not necessary.
|
|
var me = this,
|
|
prevLegendConfig;
|
|
prevLegendConfig = me.chart.legend.rebuild;
|
|
me.chart.legend.rebuild = false;
|
|
me.chart.redraw();
|
|
me.chart.legend.rebuild = prevLegendConfig;
|
|
},
|
|
|
|
hide: function() {
|
|
if (this.areas) {
|
|
var me = this,
|
|
areas = me.areas,
|
|
i, j, l, ln, shadows;
|
|
|
|
if (areas && areas.length) {
|
|
for (i = 0, ln = areas.length; i < ln; ++i) {
|
|
if (areas[i]) {
|
|
areas[i].hide(true);
|
|
}
|
|
}
|
|
me.hideLabels();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the color of the series (to be displayed as color for the series legend item).
|
|
* @param {Object} item Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
getLegendColor: function(index) {
|
|
var me = this;
|
|
index += me.themeIdx;
|
|
return me.colorArrayStyle[index % me.colorArrayStyle.length];
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Creates a Bar Chart. A Bar Chart is a useful visualization technique to display quantitative information for
|
|
* different categories that can show some progression (or regression) in the dataset. As with all other series, the Bar
|
|
* Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information.
|
|
* A typical configuration object for the bar series could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data':10 },
|
|
* { 'name': 'metric two', 'data': 7 },
|
|
* { 'name': 'metric three', 'data': 5 },
|
|
* { 'name': 'metric four', 'data': 2 },
|
|
* { 'name': 'metric five', 'data':27 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* animate: true,
|
|
* store: store,
|
|
* axes: [{
|
|
* type: 'Numeric',
|
|
* position: 'bottom',
|
|
* fields: ['data'],
|
|
* label: {
|
|
* renderer: Ext.util.Format.numberRenderer('0,0')
|
|
* },
|
|
* title: 'Sample Values',
|
|
* grid: true,
|
|
* minimum: 0
|
|
* }, {
|
|
* type: 'Category',
|
|
* position: 'left',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics'
|
|
* }],
|
|
* series: [{
|
|
* type: 'bar',
|
|
* axis: 'bottom',
|
|
* highlight: true,
|
|
* tips: {
|
|
* trackMouse: true,
|
|
* width: 140,
|
|
* height: 28,
|
|
* renderer: function(storeItem, item) {
|
|
* this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
|
|
* }
|
|
* },
|
|
* label: {
|
|
* display: 'insideEnd',
|
|
* field: 'data',
|
|
* renderer: Ext.util.Format.numberRenderer('0'),
|
|
* orientation: 'horizontal',
|
|
* color: '#333',
|
|
* 'text-anchor': 'middle'
|
|
* },
|
|
* xField: 'name',
|
|
* yField: 'data'
|
|
* }]
|
|
* });
|
|
*
|
|
* In this configuration we set `bar` as the series type, bind the values of the bar to the bottom axis and set the
|
|
* xField or category field to the `name` parameter of the store. We also set `highlight` to true which enables smooth
|
|
* animations when bars are hovered. We also set some configuration for the bar labels to be displayed inside the bar,
|
|
* to display the information found in the `data1` property of each element store, to render a formated text with the
|
|
* `Ext.util.Format` we pass in, to have an `horizontal` orientation (as opposed to a vertical one) and we also set
|
|
* other styles like `color`, `text-anchor`, etc.
|
|
*/
|
|
Ext.define('Ext.chart.series.Bar', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Cartesian ,
|
|
|
|
alternateClassName: ['Ext.chart.BarSeries', 'Ext.chart.BarChart', 'Ext.chart.StackedBarChart'],
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'bar',
|
|
|
|
alias: 'series.bar',
|
|
/**
|
|
* @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart.
|
|
*/
|
|
column: false,
|
|
|
|
/**
|
|
* @cfg style Style properties that will override the theming series styles.
|
|
*/
|
|
style: {},
|
|
|
|
/**
|
|
* @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width
|
|
*/
|
|
gutter: 38.2,
|
|
|
|
/**
|
|
* @cfg {Number} groupGutter The gutter space between groups of bars, as a percentage of the bar width
|
|
*/
|
|
groupGutter: 38.2,
|
|
|
|
/**
|
|
* @cfg {Number/Object} xPadding Padding between the left/right axes and the bars.
|
|
* The possible values are a number (the number of pixels for both left and right padding)
|
|
* or an object with `{ left, right }` properties.
|
|
*/
|
|
xPadding: 0,
|
|
|
|
/**
|
|
* @cfg {Number/Object} yPadding Padding between the top/bottom axes and the bars.
|
|
* The possible values are a number (the number of pixels for both top and bottom padding)
|
|
* or an object with `{ top, bottom }` properties.
|
|
*/
|
|
yPadding: 10,
|
|
|
|
/**
|
|
* @cfg {Boolean} stacked
|
|
* If set to `true` then bars for multiple `yField` values will be rendered stacked on top of one another.
|
|
* Otherwise, they will be rendered side-by-side. Defaults to `false`.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
surface = me.chart.surface,
|
|
shadow = me.chart.shadow,
|
|
i, l;
|
|
config.highlightCfg = Ext.Object.merge({
|
|
lineWidth: 3,
|
|
stroke: '#55c',
|
|
opacity: 0.8,
|
|
color: '#f00'
|
|
}, config.highlightCfg);
|
|
Ext.apply(me, config, {
|
|
shadowAttributes: [{
|
|
"stroke-width": 6,
|
|
"stroke-opacity": 0.05,
|
|
stroke: 'rgb(200, 200, 200)',
|
|
translate: {
|
|
x: 1.2,
|
|
y: 1.2
|
|
}
|
|
}, {
|
|
"stroke-width": 4,
|
|
"stroke-opacity": 0.1,
|
|
stroke: 'rgb(150, 150, 150)',
|
|
translate: {
|
|
x: 0.9,
|
|
y: 0.9
|
|
}
|
|
}, {
|
|
"stroke-width": 2,
|
|
"stroke-opacity": 0.15,
|
|
stroke: 'rgb(100, 100, 100)',
|
|
translate: {
|
|
x: 0.6,
|
|
y: 0.6
|
|
}
|
|
}]
|
|
});
|
|
|
|
me.group = surface.getGroup(me.seriesId + '-bars');
|
|
if (shadow) {
|
|
for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
|
|
me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private returns the padding.
|
|
getPadding: function() {
|
|
var me = this,
|
|
xPadding = me.xPadding,
|
|
yPadding = me.yPadding,
|
|
padding = { };
|
|
|
|
if (Ext.isNumber(xPadding)) {
|
|
padding.left = xPadding;
|
|
padding.right = xPadding;
|
|
} else if (Ext.isObject(xPadding)) {
|
|
padding.left = xPadding.left;
|
|
padding.right = xPadding.right;
|
|
} else {
|
|
padding.left = 0;
|
|
padding.right = 0;
|
|
}
|
|
padding.width = padding.left + padding.right;
|
|
|
|
if (Ext.isNumber(yPadding)) {
|
|
padding.bottom = yPadding;
|
|
padding.top = yPadding;
|
|
} else if (Ext.isObject(yPadding)) {
|
|
padding.bottom = yPadding.bottom;
|
|
padding.top = yPadding.top;
|
|
} else {
|
|
padding.bottom = 0;
|
|
padding.top = 0;
|
|
}
|
|
padding.height = padding.bottom + padding.top;
|
|
|
|
return padding;
|
|
},
|
|
|
|
// @private returns the bar girth.
|
|
getBarGirth: function() {
|
|
var me = this,
|
|
store = me.chart.getChartStore(),
|
|
column = me.column,
|
|
ln = store.getCount(),
|
|
gutter = me.gutter / 100,
|
|
padding,
|
|
property;
|
|
|
|
if (me.style && me.style.width) {
|
|
return me.style.width;
|
|
}
|
|
padding = me.getPadding();
|
|
property = (column ? 'width' : 'height');
|
|
return (me.chart.chartBBox[property] - padding[property]) / (ln * (gutter + 1) - gutter);
|
|
},
|
|
|
|
// @private returns the gutters.
|
|
getGutters: function() {
|
|
var me = this,
|
|
column = me.column,
|
|
padding = me.getPadding(),
|
|
halfBarGirth = me.getBarGirth() / 2,
|
|
lowerGutter = Math.ceil((column ? padding.left : padding.bottom) + halfBarGirth),
|
|
upperGutter = Math.ceil((column ? padding.right : padding.top) + halfBarGirth);
|
|
|
|
return {
|
|
lower: lowerGutter,
|
|
upper: upperGutter,
|
|
verticalAxis: !column
|
|
};
|
|
},
|
|
|
|
// @private Get chart and data boundaries
|
|
getBounds: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
i, ln, record,
|
|
bars = [].concat(me.yField),
|
|
barsLoc,
|
|
barsLen = bars.length,
|
|
groupBarsLen = barsLen,
|
|
groupGutter = me.groupGutter / 100,
|
|
column = me.column,
|
|
padding = me.getPadding(),
|
|
stacked = me.stacked,
|
|
barWidth = me.getBarGirth(),
|
|
barWidthProperty = column ? 'width' : 'height',
|
|
math = Math,
|
|
mmin = math.min,
|
|
mmax = math.max,
|
|
mabs = math.abs,
|
|
boundAxes = me.getAxesForXAndYFields(),
|
|
boundYAxis = boundAxes.yAxis,
|
|
minX, maxX, colsScale, colsZero, gutters,
|
|
ends, shrunkBarWidth, groupBarWidth, bbox, minY, maxY, axis, out,
|
|
scale, zero, total, rec, j, plus, minus;
|
|
|
|
me.setBBox(true);
|
|
bbox = me.bbox;
|
|
|
|
//Skip excluded series
|
|
if (me.__excludes) {
|
|
for (j = 0, total = me.__excludes.length; j < total; j++) {
|
|
if (me.__excludes[j]) {
|
|
groupBarsLen--;
|
|
}
|
|
}
|
|
}
|
|
axis = chart.axes.get(boundYAxis);
|
|
if (axis) {
|
|
ends = axis.applyData();
|
|
minY = ends.from;
|
|
maxY = ends.to;
|
|
}
|
|
|
|
if (me.yField && !Ext.isNumber(minY)) {
|
|
out = me.getMinMaxYValues();
|
|
minY = out[0];
|
|
maxY = out[1];
|
|
}
|
|
|
|
if (!Ext.isNumber(minY)) {
|
|
minY = 0;
|
|
}
|
|
if (!Ext.isNumber(maxY)) {
|
|
maxY = 0;
|
|
}
|
|
scale = (column ? bbox.height - padding.height : bbox.width - padding.width) / (maxY - minY);
|
|
shrunkBarWidth = barWidth;
|
|
groupBarWidth = (barWidth / ((stacked ? 1 : groupBarsLen) * (groupGutter + 1) - groupGutter));
|
|
|
|
if (barWidthProperty in me.style) {
|
|
groupBarWidth = mmin(groupBarWidth, me.style[barWidthProperty]);
|
|
shrunkBarWidth = groupBarWidth * ((stacked ? 1 : groupBarsLen) * (groupGutter + 1) - groupGutter);
|
|
}
|
|
zero = (column) ? bbox.y + bbox.height - padding.bottom : bbox.x + padding.left;
|
|
|
|
if (stacked) {
|
|
total = [[], []];
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
total[0][i] = total[0][i] || 0;
|
|
total[1][i] = total[1][i] || 0;
|
|
for (j = 0; j < barsLen; j++) {
|
|
if (me.__excludes && me.__excludes[j]) {
|
|
continue;
|
|
}
|
|
rec = record.get(bars[j]);
|
|
total[+(rec > 0)][i] += mabs(rec);
|
|
}
|
|
}
|
|
total[+(maxY > 0)].push(mabs(maxY));
|
|
total[+(minY > 0)].push(mabs(minY));
|
|
minus = mmax.apply(math, total[0]);
|
|
plus = mmax.apply(math, total[1]);
|
|
scale = (column ? bbox.height - padding.height : bbox.width - padding.width) / (plus + minus);
|
|
zero = zero + minus * scale * (column ? -1 : 1);
|
|
}
|
|
else if (minY / maxY < 0) {
|
|
zero = zero - minY * scale * (column ? -1 : 1);
|
|
}
|
|
|
|
// If the columns are bound to the x-axis, calculate their positions
|
|
if (me.boundColumn) {
|
|
axis = chart.axes.get(boundAxes.xAxis);
|
|
if (axis) {
|
|
ends = axis.applyData();
|
|
minX = ends.from;
|
|
maxX = ends.to;
|
|
}
|
|
if (me.xField && !Ext.isNumber(minX)) {
|
|
out = me.getMinMaxYValues();
|
|
minX = out[0];
|
|
maxX = out[1];
|
|
}
|
|
if (!Ext.isNumber(minX)) {
|
|
minX = 0;
|
|
}
|
|
if (!Ext.isNumber(maxX)) {
|
|
maxX = 0;
|
|
}
|
|
gutters = me.getGutters();
|
|
colsScale = (bbox.width - (gutters.lower + gutters.upper)) / ((maxX - minX) || 1);
|
|
|
|
colsZero = bbox.x + gutters.lower;
|
|
|
|
barsLoc = [];
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
rec = record.get(me.xField);
|
|
barsLoc[i] = colsZero + (rec - minX) * colsScale - (groupBarWidth / 2);
|
|
}
|
|
}
|
|
|
|
return {
|
|
bars: bars,
|
|
barsLoc: barsLoc,
|
|
bbox: bbox,
|
|
shrunkBarWidth: shrunkBarWidth,
|
|
barsLen: barsLen,
|
|
groupBarsLen: groupBarsLen,
|
|
barWidth: barWidth,
|
|
groupBarWidth: groupBarWidth,
|
|
scale: scale,
|
|
zero: zero,
|
|
padding: padding,
|
|
signed: minY / maxY < 0,
|
|
minY: minY,
|
|
maxY: maxY
|
|
};
|
|
},
|
|
|
|
// @private Build an array of paths for the chart
|
|
getPaths: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
i, total, record,
|
|
bounds = me.bounds = me.getBounds(),
|
|
items = me.items = [],
|
|
yFields = Ext.isArray(me.yField) ? me.yField : [me.yField],
|
|
gutter = me.gutter / 100,
|
|
groupGutter = me.groupGutter / 100,
|
|
animate = chart.animate,
|
|
column = me.column,
|
|
group = me.group,
|
|
enableShadows = chart.shadow,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowAttributes = me.shadowAttributes,
|
|
shadowGroupsLn = shadowGroups.length,
|
|
bbox = bounds.bbox,
|
|
barWidth = bounds.barWidth,
|
|
shrunkBarWidth = bounds.shrunkBarWidth,
|
|
padding = me.getPadding(),
|
|
stacked = me.stacked,
|
|
barsLen = bounds.barsLen,
|
|
colors = me.colorArrayStyle,
|
|
colorLength = colors && colors.length || 0,
|
|
themeIndex = me.themeIdx,
|
|
math = Math,
|
|
mmax = math.max,
|
|
mmin = math.min,
|
|
mabs = math.abs,
|
|
j, yValue, height, totalDim, totalNegDim, bottom, top, hasShadow, barAttr, attrs, counter,
|
|
totalPositiveValues, totalNegativeValues,
|
|
shadowIndex, shadow, sprite, offset, floorY, idx;
|
|
|
|
for (i = 0, total = data.length; i < total; i++) {
|
|
record = data[i];
|
|
bottom = bounds.zero;
|
|
top = bounds.zero;
|
|
totalDim = 0;
|
|
totalNegDim = 0;
|
|
totalPositiveValues = totalNegativeValues = 0;
|
|
hasShadow = false;
|
|
for (j = 0, counter = 0; j < barsLen; j++) {
|
|
// Excluded series
|
|
if (me.__excludes && me.__excludes[j]) {
|
|
continue;
|
|
}
|
|
yValue = record.get(bounds.bars[j]);
|
|
if (yValue >= 0) {
|
|
totalPositiveValues += yValue;
|
|
}
|
|
else {
|
|
totalNegativeValues += yValue;
|
|
}
|
|
height = Math.round((yValue - mmax(bounds.minY, 0)) * bounds.scale);
|
|
idx = themeIndex + (barsLen > 1 ? j : 0);
|
|
barAttr = {
|
|
fill: colors[idx % colorLength]
|
|
};
|
|
if (column) {
|
|
Ext.apply(barAttr, {
|
|
height: height,
|
|
width: mmax(bounds.groupBarWidth, 0),
|
|
x: (me.boundColumn ? bounds.barsLoc[i]
|
|
: (bbox.x + padding.left
|
|
+ (barWidth - shrunkBarWidth) * 0.5
|
|
+ i * barWidth * (1 + gutter)
|
|
+ counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked)),
|
|
y: bottom - height
|
|
});
|
|
}
|
|
else {
|
|
// draw in reverse order
|
|
offset = (total - 1) - i;
|
|
Ext.apply(barAttr, {
|
|
height: mmax(bounds.groupBarWidth, 0),
|
|
width: height + (bottom == bounds.zero),
|
|
x: bottom + (bottom != bounds.zero),
|
|
y: (bbox.y + padding.top
|
|
+ (barWidth - shrunkBarWidth) * 0.5
|
|
+ offset * barWidth * (1 + gutter)
|
|
+ counter * bounds.groupBarWidth * (1 + groupGutter) * !stacked + 1)
|
|
});
|
|
}
|
|
if (height < 0) {
|
|
if (column) {
|
|
barAttr.y = top;
|
|
barAttr.height = mabs(height);
|
|
} else {
|
|
barAttr.x = top + height;
|
|
barAttr.width = mabs(height);
|
|
}
|
|
}
|
|
if (stacked) {
|
|
if (height < 0) {
|
|
top += height * (column ? -1 : 1);
|
|
} else {
|
|
bottom += height * (column ? -1 : 1);
|
|
}
|
|
totalDim += mabs(height);
|
|
if (height < 0) {
|
|
totalNegDim += mabs(height);
|
|
}
|
|
}
|
|
barAttr.x = Math.floor(barAttr.x) + 1;
|
|
floorY = Math.floor(barAttr.y);
|
|
if (Ext.isIE8m && barAttr.y > floorY) {
|
|
floorY--;
|
|
}
|
|
barAttr.y = floorY;
|
|
barAttr.width = Math.floor(barAttr.width);
|
|
barAttr.height = Math.floor(barAttr.height);
|
|
items.push({
|
|
series: me,
|
|
yField: yFields[j],
|
|
storeItem: record,
|
|
value: [record.get(me.xField), yValue],
|
|
attr: barAttr,
|
|
point: column ? [barAttr.x + barAttr.width / 2, yValue >= 0 ? barAttr.y : barAttr.y + barAttr.height] :
|
|
[yValue >= 0 ? barAttr.x + barAttr.width : barAttr.x, barAttr.y + barAttr.height / 2]
|
|
});
|
|
// When resizing, reset before animating
|
|
if (animate && chart.resizing) {
|
|
attrs = column ? {
|
|
x: barAttr.x,
|
|
y: bounds.zero,
|
|
width: barAttr.width,
|
|
height: 0
|
|
} : {
|
|
x: bounds.zero,
|
|
y: barAttr.y,
|
|
width: 0,
|
|
height: barAttr.height
|
|
};
|
|
if (enableShadows && (stacked && !hasShadow || !stacked)) {
|
|
hasShadow = true;
|
|
//update shadows
|
|
for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
|
|
shadow = shadowGroups[shadowIndex].getAt(stacked ? i : (i * barsLen + j));
|
|
if (shadow) {
|
|
shadow.setAttributes(attrs, true);
|
|
}
|
|
}
|
|
}
|
|
//update sprite position and width/height
|
|
sprite = group.getAt(i * barsLen + j);
|
|
if (sprite) {
|
|
sprite.setAttributes(attrs, true);
|
|
}
|
|
}
|
|
counter++;
|
|
}
|
|
if (stacked && items.length) {
|
|
items[i * counter].totalDim = totalDim;
|
|
items[i * counter].totalNegDim = totalNegDim;
|
|
items[i * counter].totalPositiveValues = totalPositiveValues;
|
|
items[i * counter].totalNegativeValues = totalNegativeValues;
|
|
}
|
|
}
|
|
if (stacked && counter == 0) {
|
|
// Remove ghost shadow ref: EXTJSIV-5982
|
|
for (i = 0, total = data.length; i < total; i++) {
|
|
for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
|
|
shadow = shadowGroups[shadowIndex].getAt(i);
|
|
if (shadow) {
|
|
shadow.hide(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private render/setAttributes on the shadows
|
|
renderShadows: function(i, barAttr, baseAttrs, bounds) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
animate = chart.animate,
|
|
stacked = me.stacked,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowAttributes = me.shadowAttributes,
|
|
shadowGroupsLn = shadowGroups.length,
|
|
store = chart.getChartStore(),
|
|
column = me.column,
|
|
items = me.items,
|
|
shadows = [],
|
|
zero = bounds.zero,
|
|
shadowIndex, shadowBarAttr, shadow, totalDim, totalNegDim, j, rendererAttributes;
|
|
|
|
if ((stacked && (i % bounds.groupBarsLen === 0)) || !stacked) {
|
|
j = i / bounds.groupBarsLen;
|
|
//create shadows
|
|
for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
|
|
shadowBarAttr = Ext.apply({}, shadowAttributes[shadowIndex]);
|
|
shadow = shadowGroups[shadowIndex].getAt(stacked ? j : i);
|
|
Ext.copyTo(shadowBarAttr, barAttr, 'x,y,width,height');
|
|
if (!shadow) {
|
|
shadow = surface.add(Ext.apply({
|
|
type: 'rect',
|
|
group: shadowGroups[shadowIndex]
|
|
}, Ext.apply({}, baseAttrs, shadowBarAttr)));
|
|
}
|
|
if (stacked) {
|
|
totalDim = items[i].totalDim;
|
|
totalNegDim = items[i].totalNegDim;
|
|
if (column) {
|
|
shadowBarAttr.y = zero + totalNegDim - totalDim - 1;
|
|
shadowBarAttr.height = totalDim;
|
|
}
|
|
else {
|
|
shadowBarAttr.x = zero - totalNegDim;
|
|
shadowBarAttr.width = totalDim;
|
|
}
|
|
}
|
|
|
|
rendererAttributes = me.renderer(shadow, store.getAt(j), shadowBarAttr, i, store);
|
|
rendererAttributes.hidden = !!barAttr.hidden;
|
|
if (animate) {
|
|
me.onAnimate(shadow, { to: rendererAttributes });
|
|
}
|
|
else {
|
|
shadow.setAttributes(rendererAttributes, true);
|
|
}
|
|
shadows.push(shadow);
|
|
}
|
|
}
|
|
return shadows;
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
surface = chart.surface,
|
|
animate = chart.animate,
|
|
stacked = me.stacked,
|
|
column = me.column,
|
|
chartAxes = chart.axes,
|
|
boundAxes = me.getAxesForXAndYFields(),
|
|
boundXAxis = boundAxes.xAxis,
|
|
boundYAxis = boundAxes.yAxis,
|
|
enableShadows = chart.shadow,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowGroupsLn = shadowGroups.length,
|
|
group = me.group,
|
|
seriesStyle = me.seriesStyle,
|
|
items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup,
|
|
bounds, endSeriesStyle, barAttr, attrs, anim;
|
|
|
|
if (!store || !store.getCount() || me.seriesIsHidden) {
|
|
me.hide();
|
|
me.items = [];
|
|
return;
|
|
}
|
|
|
|
//fill colors are taken from the colors array.
|
|
endSeriesStyle = Ext.apply({}, this.style, seriesStyle);
|
|
delete endSeriesStyle.fill;
|
|
delete endSeriesStyle.x;
|
|
delete endSeriesStyle.y;
|
|
delete endSeriesStyle.width;
|
|
delete endSeriesStyle.height;
|
|
|
|
me.unHighlightItem();
|
|
me.cleanHighlights();
|
|
|
|
me.boundColumn = (boundXAxis && Ext.Array.contains(me.axis,boundXAxis)
|
|
&& chartAxes.get(boundXAxis)
|
|
&& chartAxes.get(boundXAxis).isNumericAxis);
|
|
|
|
me.getPaths();
|
|
bounds = me.bounds;
|
|
items = me.items;
|
|
|
|
baseAttrs = column ? {
|
|
y: bounds.zero,
|
|
height: 0
|
|
} : {
|
|
x: bounds.zero,
|
|
width: 0
|
|
};
|
|
ln = items.length;
|
|
|
|
// Create new or reuse sprites and animate/display
|
|
for (i = 0; i < ln; i++) {
|
|
sprite = group.getAt(i);
|
|
barAttr = items[i].attr;
|
|
|
|
if (enableShadows) {
|
|
items[i].shadows = me.renderShadows(i, barAttr, baseAttrs, bounds);
|
|
}
|
|
|
|
// Create a new sprite if needed (no height)
|
|
if (!sprite) {
|
|
attrs = Ext.apply({}, baseAttrs, barAttr);
|
|
attrs = Ext.apply(attrs, endSeriesStyle || {});
|
|
sprite = surface.add(Ext.apply({}, {
|
|
type: 'rect',
|
|
group: group
|
|
}, attrs));
|
|
}
|
|
if (animate) {
|
|
rendererAttributes = me.renderer(sprite, store.getAt(i), barAttr, i, store);
|
|
sprite._to = rendererAttributes;
|
|
anim = me.onAnimate(sprite, { to: Ext.apply(rendererAttributes, endSeriesStyle) });
|
|
if (enableShadows && stacked && (i % bounds.barsLen === 0)) {
|
|
j = i / bounds.barsLen;
|
|
for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
|
|
anim.on('afteranimate', function() {
|
|
this.show(true);
|
|
}, shadowGroups[shadowIndex].getAt(j));
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply(barAttr, { hidden: false }), i, store);
|
|
sprite.setAttributes(Ext.apply(rendererAttributes, endSeriesStyle), true);
|
|
}
|
|
items[i].sprite = sprite;
|
|
}
|
|
|
|
// Hide unused sprites
|
|
ln = group.getCount();
|
|
for (j = i; j < ln; j++) {
|
|
group.getAt(j).hide(true);
|
|
}
|
|
|
|
if (me.stacked) {
|
|
// If stacked, we have only store.getCount() shadows.
|
|
i = store.getCount();
|
|
}
|
|
|
|
// Hide unused shadows
|
|
if (enableShadows) {
|
|
for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) {
|
|
shadowGroup = shadowGroups[shadowIndex];
|
|
ln = shadowGroup.getCount();
|
|
for (j = i; j < ln; j++) {
|
|
shadowGroup.getAt(j).hide(true);
|
|
}
|
|
}
|
|
}
|
|
me.renderLabels();
|
|
},
|
|
|
|
// @private called when a label is to be created.
|
|
onCreateLabel: function(storeItem, item, i, display) {
|
|
var me = this,
|
|
surface = me.chart.surface,
|
|
group = me.labelsGroup,
|
|
config = me.label,
|
|
endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {}),
|
|
sprite;
|
|
|
|
return surface.add(Ext.apply({
|
|
type: 'text',
|
|
group: group
|
|
}, endLabelStyle || {}));
|
|
},
|
|
|
|
// @private called when a label is to be positioned.
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
|
|
// Determine the label's final position. Starts with the configured preferred value but
|
|
// may get flipped from inside to outside or vice-versa depending on space.
|
|
var me = this,
|
|
opt = me.bounds,
|
|
groupBarWidth = opt.groupBarWidth,
|
|
column = me.column,
|
|
chart = me.chart,
|
|
chartBBox = chart.chartBBox,
|
|
resizing = chart.resizing,
|
|
xValue = item.value[0],
|
|
yValue = item.value[1],
|
|
attr = item.attr,
|
|
config = me.label,
|
|
stacked = me.stacked,
|
|
stackedDisplay = config.stackedDisplay,
|
|
rotate = (config.orientation == 'vertical'),
|
|
field = [].concat(config.field),
|
|
format = config.renderer,
|
|
text, size, width, height,
|
|
zero = opt.zero,
|
|
insideStart = 'insideStart',
|
|
insideEnd = 'insideEnd',
|
|
outside = 'outside',
|
|
over = 'over',
|
|
under = 'under',
|
|
labelMarginX = 4, // leave space around the labels (important when saving chart as image)
|
|
labelMarginY = 2,
|
|
signed = opt.signed,
|
|
x, y, finalAttr;
|
|
|
|
if (display == insideStart || display == insideEnd || display == outside) {
|
|
if (stacked && (display == outside)) {
|
|
// It doesn't make sense to use 'outside' on a stacked chart
|
|
// unless we only want to display the 'stackedDisplay' labels.
|
|
label.hide(true);
|
|
return;
|
|
}
|
|
label.setAttributes({
|
|
// Reset the style in case the label is being reused (for instance, if a series is excluded)
|
|
// and do it before calling the renderer function.
|
|
style: undefined
|
|
});
|
|
text = (Ext.isNumber(index) ? format(storeItem.get(field[index]), label, storeItem, item, i, display, animate, index) : '');
|
|
label.setAttributes({
|
|
// Set the text onto the label.
|
|
text: text
|
|
});
|
|
size = me.getLabelSize(text, label.attr.style);
|
|
width = size.width;
|
|
height = size.height;
|
|
if (column) {
|
|
//-----------------------------------------
|
|
// Position the label within a column chart
|
|
|
|
// If there is no label to display, or if the corresponding box in a stacked column
|
|
// isn't tall enough to display the label, then leave.
|
|
if (!width || !height || (stacked && (attr.height < height))) {
|
|
label.hide(true);
|
|
return;
|
|
}
|
|
|
|
// Align horizontally the label in the middle of the column
|
|
x = attr.x + (rotate ? groupBarWidth/2 : (groupBarWidth - width)/2);
|
|
|
|
// If the label is to be displayed outside, make sure there is room for it, otherwise display it inside.
|
|
if (display == outside) {
|
|
var free = (yValue >= 0 ? (attr.y - chartBBox.y) : (chartBBox.y + chartBBox.height - attr.y - attr.height));
|
|
if (free < height + labelMarginY) {
|
|
display = insideEnd;
|
|
}
|
|
}
|
|
|
|
// If the label is to be displayed inside a non-stacked chart, make sure it is
|
|
// not taller than the box, otherwise move it outside.
|
|
if (!stacked && (display != outside)) {
|
|
if (height + labelMarginY > attr.height) {
|
|
display = outside;
|
|
}
|
|
}
|
|
|
|
// Place the label vertically depending on its config and on whether the value
|
|
// it represents is positive (above the X-axis) or negative (below the X-axis)
|
|
if (!y) {
|
|
y = attr.y;
|
|
if (yValue >= 0) {
|
|
switch (display) {
|
|
case insideStart: y += attr.height + (rotate ? -labelMarginY : -height/2); break;
|
|
case insideEnd: y += (rotate ? height + labelMarginX : height/2); break;
|
|
case outside: y += (rotate ? -labelMarginY : -height/2); break;
|
|
}
|
|
} else {
|
|
switch (display) {
|
|
case insideStart: y += (rotate ? height + labelMarginY : height/2); break;
|
|
case insideEnd: y += (rotate ? attr.height - labelMarginY : attr.height - height/2); break;
|
|
case outside: y += (rotate ? attr.height + height + labelMarginY : attr.height + height/2); break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
//-----------------------------------------
|
|
// Position the label within a bar chart
|
|
|
|
// If there is no label to display, or if the corresponding box has no width, then leave.
|
|
if (!width || !height || (stacked && !attr.width)) {
|
|
label.hide(true);
|
|
return;
|
|
}
|
|
|
|
// Align vertically the label in the middle of the bar
|
|
y = attr.y + (rotate ? (groupBarWidth + height)/2 : groupBarWidth/2);
|
|
|
|
// If the label is to be displayed outside, make sure there is room for it otherwise display it inside.
|
|
if (display == outside) {
|
|
var free = (yValue >= 0 ? (chartBBox.x + chartBBox.width - attr.x - attr.width) : (attr.x - chartBBox.x));
|
|
if (free < width + labelMarginX) {
|
|
display = insideEnd;
|
|
}
|
|
}
|
|
|
|
// If the label is to be displayed inside (and it is not rotated yet), make sure it is
|
|
// not wider than the box it represents otherwise (for a stacked chart) rotate it vertically
|
|
// and center it, or (for a non-stacked chart) move it outside.
|
|
if ((display != outside) && !rotate) {
|
|
if (width + labelMarginX > attr.width) {
|
|
if (stacked) {
|
|
if (height > attr.width) {
|
|
label.hide(true);
|
|
return; // Even rotated, there isn't enough room.
|
|
}
|
|
x = attr.x + attr.width/2;
|
|
y = attr.y + attr.height - (attr.height - width)/2;
|
|
rotate = true;
|
|
} else {
|
|
display = outside;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Place the label horizontally depending on its config and on whether the value
|
|
// it represents is positive (above the X-axis) or negative (below the X-axis)
|
|
if (!x) {
|
|
x = attr.x;
|
|
if (yValue >= 0) {
|
|
switch (display) {
|
|
case insideStart: x += (rotate ? width/2 : labelMarginX); break;
|
|
case insideEnd: x += attr.width + (rotate ? -width/2 : -width - labelMarginX); break;
|
|
case outside: x += attr.width + (rotate ? width/2 : labelMarginX); break;
|
|
}
|
|
} else {
|
|
switch (display) {
|
|
case insideStart: x += attr.width + (rotate ? -width/2 : -width - labelMarginX); break;
|
|
case insideEnd: x += (rotate ? width/2 : labelMarginX); break;
|
|
case outside: x += (rotate ? -width/2 : -width - labelMarginX); break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (display == over || display == under) {
|
|
if (stacked && stackedDisplay) {
|
|
//-----------------------------------------
|
|
// Position the label on top or at the bottom of a stacked bar/column
|
|
|
|
text = label.attr.text;
|
|
label.setAttributes({
|
|
// The text is already set onto the label: we just need to set the style
|
|
// (but don't overwrite any custom style that might have been set by an app override).
|
|
style: Ext.applyIf((label.attr && label.attr.style) || {},
|
|
{
|
|
'font-weight':'bold',
|
|
'font-size':'14px'
|
|
}
|
|
)
|
|
});
|
|
|
|
size = me.getLabelSize(text, label.attr.style);
|
|
width = size.width;
|
|
height = size.height;
|
|
|
|
switch (display) {
|
|
case over:
|
|
if (column) {
|
|
x = attr.x + (rotate ? groupBarWidth/2 : (groupBarWidth - width)/2);
|
|
y = zero - (item.totalDim - item.totalNegDim) - height/2 - labelMarginY;
|
|
} else {
|
|
x = zero + (item.totalDim - item.totalNegDim) + labelMarginX;
|
|
y = attr.y + (rotate ? (groupBarWidth + height)/2 : groupBarWidth/2);
|
|
}
|
|
break;
|
|
case under:
|
|
if (column) {
|
|
x = attr.x + (rotate ? groupBarWidth/2 : (groupBarWidth - width)/2);
|
|
y = zero + item.totalNegDim + height/2;
|
|
} else {
|
|
x = zero - item.totalNegDim - width - labelMarginX;
|
|
y = attr.y + (rotate ? (groupBarWidth + height)/2 : groupBarWidth/2);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (x == undefined || y == undefined) {
|
|
// bad configuration: x/y are not set
|
|
label.hide(true);
|
|
return;
|
|
}
|
|
|
|
label.isOutside = (display == outside);
|
|
label.setAttributes({
|
|
text: text
|
|
});
|
|
|
|
//set position
|
|
finalAttr = {
|
|
x: x,
|
|
y: y
|
|
};
|
|
//rotate
|
|
if (rotate) {
|
|
finalAttr.rotate = {
|
|
x: x,
|
|
y: y,
|
|
degrees: 270
|
|
};
|
|
}
|
|
//check for resizing
|
|
if (animate && resizing) {
|
|
if (column) {
|
|
x = attr.x + attr.width / 2;
|
|
y = zero;
|
|
} else {
|
|
x = zero;
|
|
y = attr.y + attr.height / 2;
|
|
}
|
|
label.setAttributes({
|
|
x: x,
|
|
y: y
|
|
}, true);
|
|
if (rotate) {
|
|
label.setAttributes({
|
|
rotate: {
|
|
x: x,
|
|
y: y,
|
|
degrees: 270
|
|
}
|
|
}, true);
|
|
}
|
|
}
|
|
//handle animation
|
|
if (animate) {
|
|
me.onAnimate(label, { to: finalAttr });
|
|
}
|
|
else {
|
|
label.setAttributes(Ext.apply(finalAttr, {
|
|
hidden: false
|
|
}), true);
|
|
}
|
|
},
|
|
|
|
/* @private
|
|
* Gets the dimensions of a given bar label. Uses a single hidden sprite to avoid
|
|
* changing visible sprites.
|
|
* @param value
|
|
*/
|
|
getLabelSize: function(value, labelStyle) {
|
|
var tester = this.testerLabel,
|
|
config = this.label,
|
|
endLabelStyle = Ext.apply({}, config, labelStyle, this.seriesLabelStyle || {}),
|
|
rotated = config.orientation === 'vertical',
|
|
bbox, w, h,
|
|
undef;
|
|
if (!tester) {
|
|
tester = this.testerLabel = this.chart.surface.add(Ext.apply({
|
|
type: 'text',
|
|
opacity: 0
|
|
}, endLabelStyle));
|
|
}
|
|
tester.setAttributes({
|
|
style: labelStyle,
|
|
text: value
|
|
}, true);
|
|
|
|
// Flip the width/height if rotated, as getBBox returns the pre-rotated dimensions
|
|
bbox = tester.getBBox();
|
|
w = bbox.width;
|
|
h = bbox.height;
|
|
return {
|
|
width: rotated ? h : w,
|
|
height: rotated ? w : h
|
|
};
|
|
},
|
|
|
|
// @private used to animate label, markers and other sprites.
|
|
onAnimate: function(sprite, attr) {
|
|
sprite.show();
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item) {
|
|
var bbox = item.sprite.getBBox();
|
|
return bbox.x <= x && bbox.y <= y
|
|
&& (bbox.x + bbox.width) >= x
|
|
&& (bbox.y + bbox.height) >= y;
|
|
},
|
|
|
|
// @private hide all markers
|
|
hideAll: function(index) {
|
|
var axes = this.chart.axes,
|
|
axesItems = axes.items,
|
|
ln = axesItems.length,
|
|
i = 0;
|
|
|
|
index = (isNaN(this._index) ? index : this._index) || 0;
|
|
|
|
if (!this.__excludes) {
|
|
this.__excludes = [];
|
|
}
|
|
|
|
this.__excludes[index] = true;
|
|
this.drawSeries();
|
|
|
|
for (i; i < ln; i++) {
|
|
axesItems[i].drawAxis();
|
|
}
|
|
},
|
|
|
|
// @private show all markers
|
|
showAll: function(index) {
|
|
var axes = this.chart.axes,
|
|
axesItems = axes.items,
|
|
ln = axesItems.length,
|
|
i = 0;
|
|
|
|
index = (isNaN(this._index) ? index : this._index) || 0;
|
|
|
|
if (!this.__excludes) {
|
|
this.__excludes = [];
|
|
}
|
|
|
|
this.__excludes[index] = false;
|
|
this.drawSeries();
|
|
|
|
for (i; i < ln; i++) {
|
|
axesItems[i].drawAxis();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns a string with the color to be used for the series legend item.
|
|
* @param index
|
|
*/
|
|
getLegendColor: function(index) {
|
|
var me = this,
|
|
colorLength = me.colorArrayStyle.length;
|
|
|
|
if (me.style && me.style.fill) {
|
|
return me.style.fill;
|
|
} else {
|
|
return me.colorArrayStyle[index % colorLength];
|
|
}
|
|
},
|
|
|
|
highlightItem: function(item) {
|
|
this.callParent(arguments);
|
|
this.renderLabels();
|
|
},
|
|
|
|
unHighlightItem: function() {
|
|
this.callParent(arguments);
|
|
this.renderLabels();
|
|
},
|
|
|
|
cleanHighlights: function() {
|
|
this.callParent(arguments);
|
|
this.renderLabels();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.series.Column
|
|
*
|
|
* Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful
|
|
* visualization technique to display quantitative information for different categories that can
|
|
* show some progression (or regression) in the data set. As with all other series, the Column Series
|
|
* must be appended in the *series* Chart array configuration. See the Chart documentation for more
|
|
* information. A typical configuration object for the column series could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data':10 },
|
|
* { 'name': 'metric two', 'data': 7 },
|
|
* { 'name': 'metric three', 'data': 5 },
|
|
* { 'name': 'metric four', 'data': 2 },
|
|
* { 'name': 'metric five', 'data':27 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* animate: true,
|
|
* store: store,
|
|
* axes: [
|
|
* {
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data'],
|
|
* label: {
|
|
* renderer: Ext.util.Format.numberRenderer('0,0')
|
|
* },
|
|
* title: 'Sample Values',
|
|
* grid: true,
|
|
* minimum: 0
|
|
* },
|
|
* {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics'
|
|
* }
|
|
* ],
|
|
* series: [
|
|
* {
|
|
* type: 'column',
|
|
* axis: 'left',
|
|
* highlight: true,
|
|
* tips: {
|
|
* trackMouse: true,
|
|
* width: 140,
|
|
* height: 28,
|
|
* renderer: function(storeItem, item) {
|
|
* this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
|
|
* }
|
|
* },
|
|
* label: {
|
|
* display: 'insideEnd',
|
|
* 'text-anchor': 'middle',
|
|
* field: 'data',
|
|
* renderer: Ext.util.Format.numberRenderer('0'),
|
|
* orientation: 'vertical',
|
|
* color: '#333'
|
|
* },
|
|
* xField: 'name',
|
|
* yField: 'data'
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis,
|
|
* set `highlight` to true so that bars are smoothly highlighted when hovered and bind the `xField` or category
|
|
* field to the data store `name` property and the `yField` as the data1 property of a store element.
|
|
*/
|
|
Ext.define('Ext.chart.series.Column', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
|
|
|
|
extend: Ext.chart.series.Bar ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'column',
|
|
alias: 'series.column',
|
|
|
|
column: true,
|
|
|
|
// private: true if the columns are bound to a numerical x-axis; otherwise they are evenly distributed along the axis
|
|
boundColumn: false,
|
|
|
|
/**
|
|
* @cfg {String} axis
|
|
* The position of the axis to bind the values to. Possible values are 'left', 'bottom', 'top' and 'right'.
|
|
* You must explicitly set this value to bind the values of the column series to the ones in the axis, otherwise a
|
|
* relative scale will be used.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/Object} xPadding Padding between the left/right axes and the bars.
|
|
* The possible values are a number (the number of pixels for both left and right padding)
|
|
* or an object with `{ left, right }` properties.
|
|
*/
|
|
xPadding: 10,
|
|
|
|
/**
|
|
* @cfg {Number/Object} yPadding Padding between the top/bottom axes and the bars.
|
|
* The possible values are a number (the number of pixels for both top and bottom padding)
|
|
* or an object with `{ top, bottom }` properties.
|
|
*/
|
|
yPadding: 0
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.series.Gauge
|
|
*
|
|
* Creates a Gauge Chart. Gauge Charts are used to show progress in a certain variable. There are two ways of using the Gauge chart.
|
|
* One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instantiating the
|
|
* visualization and using the `setValue` method to adjust the value you want.
|
|
*
|
|
* An example of Gauge visualization:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['value'],
|
|
* data: [
|
|
* { 'value':80 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* store: store,
|
|
* width: 400,
|
|
* height: 250,
|
|
* animate: true,
|
|
* insetPadding: 30,
|
|
* axes: [{
|
|
* type: 'gauge',
|
|
* position: 'gauge',
|
|
* minimum: 0,
|
|
* maximum: 100,
|
|
* steps: 10,
|
|
* margin: 10
|
|
* }],
|
|
* series: [{
|
|
* type: 'gauge',
|
|
* field: 'value',
|
|
* donut: 30,
|
|
* colorSet: ['#F49D10', '#ddd']
|
|
* }]
|
|
* });
|
|
*
|
|
* Ext.widget("button", {
|
|
* renderTo: Ext.getBody(),
|
|
* text: "Refresh",
|
|
* handler: function() {
|
|
* store.getAt(0).set('value', Math.round(Math.random()*100));
|
|
* }
|
|
* });
|
|
*
|
|
* In this example we create a special Gauge axis to be used with the gauge visualization (describing half-circle markers), and also we're
|
|
* setting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to
|
|
* the visual display and the color set to be used with the visualization.
|
|
*/
|
|
Ext.define('Ext.chart.series.Gauge', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Series ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: "gauge",
|
|
alias: 'series.gauge',
|
|
|
|
rad: Math.PI / 180,
|
|
|
|
/**
|
|
* @cfg {Number} highlightDuration
|
|
* The duration for the pie slice highlight effect.
|
|
*/
|
|
highlightDuration: 150,
|
|
|
|
/**
|
|
* @cfg {String} angleField (required)
|
|
* The store record field name to be used for the pie angles.
|
|
* The values bound to this field name must be positive real numbers.
|
|
*/
|
|
angleField: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} needle
|
|
* Use the Gauge Series as an area series or add a needle to it. Default's false.
|
|
*/
|
|
needle: false,
|
|
|
|
/**
|
|
* @cfg {Boolean/Number} donut
|
|
* Use the entire disk or just a fraction of it for the gauge. Default's false.
|
|
*/
|
|
donut: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} showInLegend
|
|
* Whether to add the pie chart elements as legend items. Default's false.
|
|
*/
|
|
showInLegend: false,
|
|
|
|
/**
|
|
* @cfg {Object} style
|
|
* An object containing styles for overriding series styles from Theming.
|
|
*/
|
|
style: {},
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
store = chart.store,
|
|
shadow = chart.shadow, i, l, cfg;
|
|
Ext.apply(me, config, {
|
|
shadowAttributes: [{
|
|
"stroke-width": 6,
|
|
"stroke-opacity": 1,
|
|
stroke: 'rgb(200, 200, 200)',
|
|
translate: {
|
|
x: 1.2,
|
|
y: 2
|
|
}
|
|
},
|
|
{
|
|
"stroke-width": 4,
|
|
"stroke-opacity": 1,
|
|
stroke: 'rgb(150, 150, 150)',
|
|
translate: {
|
|
x: 0.9,
|
|
y: 1.5
|
|
}
|
|
},
|
|
{
|
|
"stroke-width": 2,
|
|
"stroke-opacity": 1,
|
|
stroke: 'rgb(100, 100, 100)',
|
|
translate: {
|
|
x: 0.6,
|
|
y: 1
|
|
}
|
|
}]
|
|
});
|
|
me.group = surface.getGroup(me.seriesId);
|
|
if (shadow) {
|
|
for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
|
|
me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
|
|
}
|
|
}
|
|
surface.customAttributes.segment = function(opt) {
|
|
return me.getSegment(opt);
|
|
};
|
|
},
|
|
|
|
// @private updates some onbefore render parameters.
|
|
initialize: function() {
|
|
var me = this,
|
|
store = me.chart.getChartStore(),
|
|
data = store.data.items,
|
|
label = me.label,
|
|
ln = data.length;
|
|
|
|
me.yField = [];
|
|
if (label && label.field && ln > 0) {
|
|
me.yField.push(data[0].get(label.field));
|
|
}
|
|
},
|
|
|
|
// @private returns an object with properties for a Slice
|
|
getSegment: function(opt) {
|
|
var me = this,
|
|
rad = me.rad,
|
|
cos = Math.cos,
|
|
sin = Math.sin,
|
|
abs = Math.abs,
|
|
x = me.centerX,
|
|
y = me.centerY,
|
|
x1 = 0, x2 = 0, x3 = 0, x4 = 0,
|
|
y1 = 0, y2 = 0, y3 = 0, y4 = 0,
|
|
delta = 1e-2,
|
|
r = opt.endRho - opt.startRho,
|
|
startAngle = opt.startAngle,
|
|
endAngle = opt.endAngle,
|
|
midAngle = (startAngle + endAngle) / 2 * rad,
|
|
margin = opt.margin || 0,
|
|
flag = abs(endAngle - startAngle) > 180,
|
|
a1 = Math.min(startAngle, endAngle) * rad,
|
|
a2 = Math.max(startAngle, endAngle) * rad,
|
|
singleSlice = false;
|
|
|
|
x += margin * cos(midAngle);
|
|
y += margin * sin(midAngle);
|
|
|
|
x1 = x + opt.startRho * cos(a1);
|
|
y1 = y + opt.startRho * sin(a1);
|
|
|
|
x2 = x + opt.endRho * cos(a1);
|
|
y2 = y + opt.endRho * sin(a1);
|
|
|
|
x3 = x + opt.startRho * cos(a2);
|
|
y3 = y + opt.startRho * sin(a2);
|
|
|
|
x4 = x + opt.endRho * cos(a2);
|
|
y4 = y + opt.endRho * sin(a2);
|
|
|
|
if (abs(x1 - x3) <= delta && abs(y1 - y3) <= delta) {
|
|
singleSlice = true;
|
|
}
|
|
//Solves mysterious clipping bug with IE
|
|
if (singleSlice) {
|
|
return {
|
|
path: [
|
|
["M", x1, y1],
|
|
["L", x2, y2],
|
|
["A", opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
|
|
["Z"]]
|
|
};
|
|
} else {
|
|
return {
|
|
path: [
|
|
["M", x1, y1],
|
|
["L", x2, y2],
|
|
["A", opt.endRho, opt.endRho, 0, +flag, 1, x4, y4],
|
|
["L", x3, y3],
|
|
["A", opt.startRho, opt.startRho, 0, +flag, 0, x1, y1],
|
|
["Z"]]
|
|
};
|
|
}
|
|
},
|
|
|
|
// @private utility function to calculate the middle point of a pie slice.
|
|
calcMiddle: function(item) {
|
|
var me = this,
|
|
rad = me.rad,
|
|
slice = item.slice,
|
|
x = me.centerX,
|
|
y = me.centerY,
|
|
startAngle = slice.startAngle,
|
|
endAngle = slice.endAngle,
|
|
radius = Math.max(('rho' in slice) ? slice.rho: me.radius, me.label.minMargin),
|
|
donut = +me.donut,
|
|
a1 = Math.min(startAngle, endAngle) * rad,
|
|
a2 = Math.max(startAngle, endAngle) * rad,
|
|
midAngle = -(a1 + (a2 - a1) / 2),
|
|
xm = x + (item.endRho + item.startRho) / 2 * Math.cos(midAngle),
|
|
ym = y - (item.endRho + item.startRho) / 2 * Math.sin(midAngle);
|
|
|
|
item.middle = {
|
|
x: xm,
|
|
y: ym
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
group = me.group,
|
|
animate = me.chart.animate,
|
|
axis = me.chart.axes.get(0),
|
|
minimum = axis && axis.minimum || me.minimum || 0,
|
|
maximum = axis && axis.maximum || me.maximum || 0,
|
|
field = me.angleField || me.field || me.xField,
|
|
surface = chart.surface,
|
|
chartBBox = chart.chartBBox,
|
|
rad = me.rad,
|
|
donut = +me.donut,
|
|
values = {},
|
|
items = [],
|
|
seriesStyle = me.seriesStyle,
|
|
seriesLabelStyle = me.seriesLabelStyle,
|
|
colorArrayStyle = me.colorArrayStyle,
|
|
colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
|
|
cos = Math.cos,
|
|
sin = Math.sin,
|
|
rendererAttributes, centerX, centerY, slice, slices, sprite, value,
|
|
item, ln, record, i, j, startAngle, endAngle, middleAngle, sliceLength, path,
|
|
p, spriteOptions, bbox, splitAngle, sliceA, sliceB;
|
|
|
|
Ext.apply(seriesStyle, me.style || {});
|
|
|
|
me.setBBox();
|
|
bbox = me.bbox;
|
|
|
|
//override theme colors
|
|
if (me.colorSet) {
|
|
colorArrayStyle = me.colorSet;
|
|
colorArrayLength = colorArrayStyle.length;
|
|
}
|
|
|
|
//if not store or store is empty then there's nothing to draw
|
|
if (!store || !store.getCount() || me.seriesIsHidden) {
|
|
me.hide();
|
|
me.items = [];
|
|
return;
|
|
}
|
|
|
|
centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
|
|
centerY = me.centerY = chartBBox.y + chartBBox.height;
|
|
me.radius = Math.min(centerX - chartBBox.x, centerY - chartBBox.y);
|
|
me.slices = slices = [];
|
|
me.items = items = [];
|
|
|
|
if (!me.value) {
|
|
record = store.getAt(0);
|
|
me.value = record.get(field);
|
|
}
|
|
|
|
value = me.value;
|
|
if (me.needle) {
|
|
sliceA = {
|
|
series: me,
|
|
value: value,
|
|
startAngle: -180,
|
|
endAngle: 0,
|
|
rho: me.radius
|
|
};
|
|
splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
|
|
slices.push(sliceA);
|
|
} else {
|
|
splitAngle = -180 * (1 - (value - minimum) / (maximum - minimum));
|
|
sliceA = {
|
|
series: me,
|
|
value: value,
|
|
startAngle: -180,
|
|
endAngle: splitAngle,
|
|
rho: me.radius
|
|
};
|
|
sliceB = {
|
|
series: me,
|
|
value: me.maximum - value,
|
|
startAngle: splitAngle,
|
|
endAngle: 0,
|
|
rho: me.radius
|
|
};
|
|
slices.push(sliceA, sliceB);
|
|
}
|
|
|
|
//do pie slices after.
|
|
for (i = 0, ln = slices.length; i < ln; i++) {
|
|
slice = slices[i];
|
|
sprite = group.getAt(i);
|
|
//set pie slice properties
|
|
rendererAttributes = Ext.apply({
|
|
segment: {
|
|
startAngle: slice.startAngle,
|
|
endAngle: slice.endAngle,
|
|
margin: 0,
|
|
rho: slice.rho,
|
|
startRho: slice.rho * +donut / 100,
|
|
endRho: slice.rho
|
|
}
|
|
}, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[i % colorArrayLength] } || {}));
|
|
|
|
item = Ext.apply({},
|
|
rendererAttributes.segment, {
|
|
slice: slice,
|
|
series: me,
|
|
storeItem: record,
|
|
index: i
|
|
});
|
|
items[i] = item;
|
|
// Create a new sprite if needed (no height)
|
|
if (!sprite) {
|
|
spriteOptions = Ext.apply({
|
|
type: "path",
|
|
group: group
|
|
}, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[i % colorArrayLength] } || {}));
|
|
sprite = surface.add(Ext.apply(spriteOptions, rendererAttributes));
|
|
}
|
|
slice.sprite = slice.sprite || [];
|
|
item.sprite = sprite;
|
|
slice.sprite.push(sprite);
|
|
if (animate) {
|
|
rendererAttributes = me.renderer(sprite, record, rendererAttributes, i, store);
|
|
sprite._to = rendererAttributes;
|
|
me.onAnimate(sprite, {
|
|
to: rendererAttributes
|
|
});
|
|
} else {
|
|
rendererAttributes = me.renderer(sprite, record, Ext.apply(rendererAttributes, {
|
|
hidden: false
|
|
}), i, store);
|
|
sprite.setAttributes(rendererAttributes, true);
|
|
}
|
|
}
|
|
|
|
if (me.needle) {
|
|
splitAngle = splitAngle * Math.PI / 180;
|
|
|
|
if (!me.needleSprite) {
|
|
me.needleSprite = me.chart.surface.add({
|
|
type: 'path',
|
|
path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
|
|
centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
|
|
'L', centerX + me.radius * cos(splitAngle),
|
|
centerY + -Math.abs(me.radius * sin(splitAngle))],
|
|
'stroke-width': 4,
|
|
'stroke': '#222'
|
|
});
|
|
} else {
|
|
if (animate) {
|
|
me.onAnimate(me.needleSprite, {
|
|
to: {
|
|
path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
|
|
centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
|
|
'L', centerX + me.radius * cos(splitAngle),
|
|
centerY + -Math.abs(me.radius * sin(splitAngle))]
|
|
}
|
|
});
|
|
} else {
|
|
me.needleSprite.setAttributes({
|
|
type: 'path',
|
|
path: ['M', centerX + (me.radius * +donut / 100) * cos(splitAngle),
|
|
centerY + -Math.abs((me.radius * +donut / 100) * sin(splitAngle)),
|
|
'L', centerX + me.radius * cos(splitAngle),
|
|
centerY + -Math.abs(me.radius * sin(splitAngle))]
|
|
});
|
|
}
|
|
}
|
|
me.needleSprite.setAttributes({
|
|
hidden: false
|
|
}, true);
|
|
}
|
|
|
|
delete me.value;
|
|
},
|
|
|
|
/**
|
|
* Sets the Gauge chart to the current specified value.
|
|
*/
|
|
setValue: function (value) {
|
|
this.value = value;
|
|
this.drawSeries();
|
|
},
|
|
|
|
// @private callback for when creating a label sprite.
|
|
onCreateLabel: function(storeItem, item, i, display) {},
|
|
|
|
// @private callback for when placing a label sprite.
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {},
|
|
|
|
// @private callback for when placing a callout.
|
|
onPlaceCallout: function() {},
|
|
|
|
// @private handles sprite animation for the series.
|
|
onAnimate: function(sprite, attr) {
|
|
sprite.show();
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item, i) {
|
|
var me = this,
|
|
cx = me.centerX,
|
|
cy = me.centerY,
|
|
abs = Math.abs,
|
|
dx = abs(x - cx),
|
|
dy = abs(y - cy),
|
|
startAngle = item.startAngle,
|
|
endAngle = item.endAngle,
|
|
rho = Math.sqrt(dx * dx + dy * dy),
|
|
angle = Math.atan2(y - cy, x - cx) / me.rad;
|
|
|
|
//Only trigger events for the filled portion of the Gauge.
|
|
return (i === 0) && (angle >= startAngle && angle < endAngle &&
|
|
rho >= item.startRho && rho <= item.endRho);
|
|
},
|
|
|
|
/**
|
|
* Returns the color of the series (to be displayed as color for the series legend item).
|
|
* @param item {Object} Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
getLegendColor: function(index) {
|
|
var colors = this.colorSet || this.colorArrayStyle;
|
|
return colors[index % colors.length];
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @class Ext.chart.series.Line
|
|
* @extends Ext.chart.series.Cartesian
|
|
*
|
|
* Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different
|
|
* categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.
|
|
* As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart
|
|
* documentation for more information. A typical configuration object for the line series could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
|
|
* { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
|
|
* { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
|
|
* { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
|
|
* { 'name': 'metric five', 'data1': 4, 'data2': 4, 'data3': 36, 'data4': 13, 'data5': 33 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* animate: true,
|
|
* store: store,
|
|
* axes: [
|
|
* {
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data1', 'data2'],
|
|
* label: {
|
|
* renderer: Ext.util.Format.numberRenderer('0,0')
|
|
* },
|
|
* title: 'Sample Values',
|
|
* grid: true,
|
|
* minimum: 0
|
|
* },
|
|
* {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics'
|
|
* }
|
|
* ],
|
|
* series: [
|
|
* {
|
|
* type: 'line',
|
|
* highlight: {
|
|
* size: 7,
|
|
* radius: 7
|
|
* },
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: 'data1',
|
|
* markerConfig: {
|
|
* type: 'cross',
|
|
* size: 4,
|
|
* radius: 4,
|
|
* 'stroke-width': 0
|
|
* }
|
|
* },
|
|
* {
|
|
* type: 'line',
|
|
* highlight: {
|
|
* size: 7,
|
|
* radius: 7
|
|
* },
|
|
* axis: 'left',
|
|
* fill: true,
|
|
* xField: 'name',
|
|
* yField: 'data2',
|
|
* markerConfig: {
|
|
* type: 'circle',
|
|
* size: 4,
|
|
* radius: 4,
|
|
* 'stroke-width': 0
|
|
* }
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* In this configuration we're adding two series (or lines), one bound to the `data1`
|
|
* property of the store and the other to `data3`. The type for both configurations is
|
|
* `line`. The `xField` for both series is the same, the name propert of the store.
|
|
* Both line series share the same axis, the left axis. You can set particular marker
|
|
* configuration by adding properties onto the markerConfig object. Both series have
|
|
* an object as highlight so that markers animate smoothly to the properties in highlight
|
|
* when hovered. The second series has `fill=true` which means that the line will also
|
|
* have an area below it of the same color.
|
|
*
|
|
* **Note:** In the series definition remember to explicitly set the axis to bind the
|
|
* values of the line series to. This can be done by using the `axis` configuration property.
|
|
*/
|
|
Ext.define('Ext.chart.series.Line', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Cartesian ,
|
|
|
|
alternateClassName: ['Ext.chart.LineSeries', 'Ext.chart.LineChart'],
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'line',
|
|
|
|
alias: 'series.line',
|
|
|
|
/**
|
|
* @cfg {Number} selectionTolerance
|
|
* The offset distance from the cursor position to the line series to trigger events (then used for highlighting series, etc).
|
|
*/
|
|
selectionTolerance: 20,
|
|
|
|
/**
|
|
* @cfg {Boolean} showMarkers
|
|
* Whether markers should be displayed at the data points along the line. If true,
|
|
* then the {@link #markerConfig} config item will determine the markers' styling.
|
|
*/
|
|
showMarkers: true,
|
|
|
|
/**
|
|
* @cfg {Object} markerConfig
|
|
* The display style for the markers. Only used if {@link #showMarkers} is true.
|
|
* The markerConfig is a configuration object containing the same set of properties defined in
|
|
* the Sprite class. For example, if we were to set red circles as markers to the line series we could
|
|
* pass the object:
|
|
*
|
|
<pre><code>
|
|
markerConfig: {
|
|
type: 'circle',
|
|
radius: 4,
|
|
'fill': '#f00'
|
|
}
|
|
</code></pre>
|
|
|
|
*/
|
|
markerConfig: {},
|
|
|
|
/**
|
|
* @cfg {Object} style
|
|
* An object containing style properties for the visualization lines and fill.
|
|
* These styles will override the theme styles. The following are valid style properties:
|
|
*
|
|
* - `stroke` - an rgb or hex color string for the background color of the line
|
|
* - `stroke-width` - the width of the stroke (integer)
|
|
* - `fill` - the background fill color string (hex or rgb), only works if {@link #fill} is `true`
|
|
* - `opacity` - the opacity of the line and the fill color (decimal)
|
|
*
|
|
* Example usage:
|
|
*
|
|
* style: {
|
|
* stroke: '#00ff00',
|
|
* 'stroke-width': 10,
|
|
* fill: '#80A080',
|
|
* opacity: 0.2
|
|
* }
|
|
*/
|
|
style: {},
|
|
|
|
/**
|
|
* @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
|
|
* {@link #style opacity} config properties. Defaults to false.
|
|
*/
|
|
fill: false,
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
surface = me.chart.surface,
|
|
shadow = me.chart.shadow,
|
|
i, l;
|
|
config.highlightCfg = Ext.Object.merge({ 'stroke-width': 3 }, config.highlightCfg);
|
|
Ext.apply(me, config, {
|
|
shadowAttributes: [{
|
|
"stroke-width": 6,
|
|
"stroke-opacity": 0.05,
|
|
stroke: 'rgb(0, 0, 0)',
|
|
translate: {
|
|
x: 1,
|
|
y: 1
|
|
}
|
|
}, {
|
|
"stroke-width": 4,
|
|
"stroke-opacity": 0.1,
|
|
stroke: 'rgb(0, 0, 0)',
|
|
translate: {
|
|
x: 1,
|
|
y: 1
|
|
}
|
|
}, {
|
|
"stroke-width": 2,
|
|
"stroke-opacity": 0.15,
|
|
stroke: 'rgb(0, 0, 0)',
|
|
translate: {
|
|
x: 1,
|
|
y: 1
|
|
}
|
|
}]
|
|
});
|
|
me.group = surface.getGroup(me.seriesId);
|
|
if (me.showMarkers) {
|
|
me.markerGroup = surface.getGroup(me.seriesId + '-markers');
|
|
}
|
|
if (shadow) {
|
|
for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
|
|
me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private makes an average of points when there are more data points than pixels to be rendered.
|
|
shrink: function(xValues, yValues, size) {
|
|
// Start at the 2nd point...
|
|
var len = xValues.length,
|
|
ratio = Math.floor(len / size),
|
|
i = 1,
|
|
xSum = 0,
|
|
ySum = 0,
|
|
xRes = [+xValues[0]],
|
|
yRes = [+yValues[0]];
|
|
|
|
for (; i < len; ++i) {
|
|
xSum += +xValues[i] || 0;
|
|
ySum += +yValues[i] || 0;
|
|
if (i % ratio == 0) {
|
|
xRes.push(xSum/ratio);
|
|
yRes.push(ySum/ratio);
|
|
xSum = 0;
|
|
ySum = 0;
|
|
}
|
|
}
|
|
return {
|
|
x: xRes,
|
|
y: yRes
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
chartAxes = chart.axes,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
record,
|
|
storeCount = store.getCount(),
|
|
surface = me.chart.surface,
|
|
bbox = {},
|
|
group = me.group,
|
|
showMarkers = me.showMarkers,
|
|
markerGroup = me.markerGroup,
|
|
enableShadows = chart.shadow,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowAttributes = me.shadowAttributes,
|
|
smooth = me.smooth,
|
|
lnsh = shadowGroups.length,
|
|
dummyPath = ["M"],
|
|
path = ["M"],
|
|
renderPath = ["M"],
|
|
smoothPath = ["M"],
|
|
markerIndex = chart.markerIndex,
|
|
axes = [].concat(me.axis),
|
|
shadowBarAttr,
|
|
xValues = [],
|
|
xValueMap = {},
|
|
yValues = [],
|
|
yValueMap = {},
|
|
onbreak = false,
|
|
storeIndices = [],
|
|
markerStyle = Ext.apply({}, me.markerStyle),
|
|
seriesStyle = me.seriesStyle,
|
|
colorArrayStyle = me.colorArrayStyle,
|
|
colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
|
|
isNumber = Ext.isNumber,
|
|
seriesIdx = me.seriesIdx,
|
|
boundAxes = me.getAxesForXAndYFields(),
|
|
boundXAxis = boundAxes.xAxis,
|
|
boundYAxis = boundAxes.yAxis,
|
|
xAxisType = boundXAxis ? chartAxes.get(boundXAxis).type : '',
|
|
yAxisType = boundYAxis ? chartAxes.get(boundYAxis).type : '',
|
|
shadows, shadow, shindex, fromPath, fill, fillPath, rendererAttributes,
|
|
x, y, prevX, prevY, firstX, firstY, markerCount, i, j, ln, axis, ends, marker, markerAux, item, xValue,
|
|
yValue, coords, xScale, yScale, minX, maxX, minY, maxY, line, animation, endMarkerStyle,
|
|
endLineStyle, type, count, opacity, lineOpacity, fillOpacity, fillDefaultValue;
|
|
|
|
if (me.fireEvent('beforedraw', me) === false) {
|
|
return;
|
|
}
|
|
|
|
//if store is empty or the series is excluded in the legend then there's nothing to draw.
|
|
if (!storeCount || me.seriesIsHidden) {
|
|
me.hide();
|
|
me.items = [];
|
|
if (me.line) {
|
|
me.line.hide(true);
|
|
if (me.line.shadows) {
|
|
shadows = me.line.shadows;
|
|
for (j = 0, lnsh = shadows.length; j < lnsh; j++) {
|
|
shadow = shadows[j];
|
|
shadow.hide(true);
|
|
}
|
|
}
|
|
if (me.fillPath) {
|
|
me.fillPath.hide(true);
|
|
}
|
|
}
|
|
me.line = null;
|
|
me.fillPath = null;
|
|
return;
|
|
}
|
|
|
|
//prepare style objects for line and markers
|
|
endMarkerStyle = Ext.apply(markerStyle || {}, me.markerConfig, {
|
|
fill: me.seriesStyle.fill || colorArrayStyle[me.themeIdx % colorArrayStyle.length]
|
|
});
|
|
type = endMarkerStyle.type;
|
|
delete endMarkerStyle.type;
|
|
endLineStyle = seriesStyle;
|
|
//if no stroke with is specified force it to 0.5 because this is
|
|
//about making *lines*
|
|
if (!endLineStyle['stroke-width']) {
|
|
endLineStyle['stroke-width'] = 0.5;
|
|
}
|
|
|
|
//set opacity values
|
|
opacity = 'opacity' in endLineStyle ? endLineStyle.opacity : 1;
|
|
fillDefaultValue = 'opacity' in endLineStyle ? endLineStyle.opacity : 0.3;
|
|
lineOpacity = 'lineOpacity' in endLineStyle ? endLineStyle.lineOpacity : opacity;
|
|
fillOpacity = 'fillOpacity' in endLineStyle ? endLineStyle.fillOpacity : fillDefaultValue;
|
|
|
|
//If we're using a time axis and we need to translate the points,
|
|
//then reuse the first markers as the last markers.
|
|
if (markerIndex && markerGroup && markerGroup.getCount()) {
|
|
for (i = 0; i < markerIndex; i++) {
|
|
marker = markerGroup.getAt(i);
|
|
markerGroup.remove(marker);
|
|
markerGroup.add(marker);
|
|
markerAux = markerGroup.getAt(markerGroup.getCount() - 2);
|
|
marker.setAttributes({
|
|
x: 0,
|
|
y: 0,
|
|
translate: {
|
|
x: markerAux.attr.translation.x,
|
|
y: markerAux.attr.translation.y
|
|
}
|
|
}, true);
|
|
}
|
|
}
|
|
|
|
me.unHighlightItem();
|
|
me.cleanHighlights();
|
|
|
|
me.setBBox();
|
|
bbox = me.bbox;
|
|
me.clipRect = [bbox.x, bbox.y, bbox.width, bbox.height];
|
|
|
|
if (axis = chartAxes.get(boundXAxis)) {
|
|
ends = axis.applyData();
|
|
minX = ends.from;
|
|
maxX = ends.to;
|
|
}
|
|
|
|
if (axis = chartAxes.get(boundYAxis)) {
|
|
ends = axis.applyData();
|
|
minY = ends.from;
|
|
maxY = ends.to;
|
|
}
|
|
|
|
// If a field was specified without a corresponding axis, create one to get bounds
|
|
if (me.xField && !Ext.isNumber(minX)) {
|
|
axis = me.getMinMaxXValues();
|
|
minX = axis[0];
|
|
maxX = axis[1];
|
|
}
|
|
|
|
if (me.yField && !Ext.isNumber(minY)) {
|
|
axis = me.getMinMaxYValues();
|
|
minY = axis[0];
|
|
maxY = axis[1];
|
|
}
|
|
|
|
if (isNaN(minX)) {
|
|
minX = 0;
|
|
xScale = bbox.width / ((storeCount - 1) || 1);
|
|
}
|
|
else {
|
|
xScale = bbox.width / ((maxX - minX) || (storeCount -1) || 1);
|
|
}
|
|
|
|
if (isNaN(minY)) {
|
|
minY = 0;
|
|
yScale = bbox.height / ((storeCount - 1) || 1);
|
|
}
|
|
else {
|
|
yScale = bbox.height / ((maxY - minY) || (storeCount - 1) || 1);
|
|
}
|
|
// Extract all x and y values from the store
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
xValue = record.get(me.xField);
|
|
if (xAxisType == 'Time' && typeof xValue == "string") {
|
|
xValue = Date.parse(xValue);
|
|
}
|
|
// Ensure a value
|
|
if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)
|
|
//set as uniform distribution if the axis is a category axis.
|
|
|| boundXAxis && chartAxes.get(boundXAxis) && chartAxes.get(boundXAxis).type == 'Category') {
|
|
if (xValue in xValueMap) {
|
|
xValue = xValueMap[xValue];
|
|
} else {
|
|
xValue = xValueMap[xValue] = i;
|
|
}
|
|
}
|
|
|
|
// Filter out values that don't fit within the pan/zoom buffer area
|
|
yValue = record.get(me.yField);
|
|
if (yAxisType == 'Time' && typeof yValue == "string") {
|
|
yValue = Date.parse(yValue);
|
|
}
|
|
//skip undefined values
|
|
if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)) {
|
|
continue;
|
|
}
|
|
// Ensure a value
|
|
if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)
|
|
//set as uniform distribution if the axis is a category axis.
|
|
|| boundYAxis && chartAxes.get(boundYAxis) && chartAxes.get(boundYAxis).type == 'Category') {
|
|
yValue = i;
|
|
}
|
|
storeIndices.push(i);
|
|
xValues.push(xValue);
|
|
yValues.push(yValue);
|
|
}
|
|
|
|
ln = xValues.length;
|
|
if (ln > bbox.width) {
|
|
coords = me.shrink(xValues, yValues, bbox.width);
|
|
xValues = coords.x;
|
|
yValues = coords.y;
|
|
}
|
|
|
|
me.items = [];
|
|
|
|
count = 0;
|
|
ln = xValues.length;
|
|
for (i = 0; i < ln; i++) {
|
|
xValue = xValues[i];
|
|
yValue = yValues[i];
|
|
if (yValue === false) {
|
|
if (path.length == 1) {
|
|
path = [];
|
|
}
|
|
onbreak = true;
|
|
me.items.push(false);
|
|
continue;
|
|
} else {
|
|
x = (bbox.x + (xValue - minX) * xScale).toFixed(2);
|
|
y = ((bbox.y + bbox.height) - (yValue - minY) * yScale).toFixed(2);
|
|
if (onbreak) {
|
|
onbreak = false;
|
|
path.push('M');
|
|
}
|
|
path = path.concat([x, y]);
|
|
}
|
|
if ((typeof firstY == 'undefined') && (typeof y != 'undefined')) {
|
|
firstY = y;
|
|
firstX = x;
|
|
}
|
|
// If this is the first line, create a dummypath to animate in from.
|
|
if (!me.line || chart.resizing) {
|
|
dummyPath = dummyPath.concat([x, bbox.y + bbox.height / 2]);
|
|
}
|
|
|
|
// When resizing, reset before animating
|
|
if (chart.animate && chart.resizing && me.line) {
|
|
me.line.setAttributes({
|
|
path: dummyPath,
|
|
opacity: lineOpacity
|
|
}, true);
|
|
if (me.fillPath) {
|
|
me.fillPath.setAttributes({
|
|
path: dummyPath,
|
|
opacity: fillOpacity
|
|
}, true);
|
|
}
|
|
if (me.line.shadows) {
|
|
shadows = me.line.shadows;
|
|
for (j = 0, lnsh = shadows.length; j < lnsh; j++) {
|
|
shadow = shadows[j];
|
|
shadow.setAttributes({
|
|
path: dummyPath
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
if (showMarkers) {
|
|
marker = markerGroup.getAt(count++);
|
|
if (!marker) {
|
|
marker = Ext.chart.Shape[type](surface, Ext.apply({
|
|
group: [group, markerGroup],
|
|
x: 0, y: 0,
|
|
translate: {
|
|
x: +(prevX || x),
|
|
y: prevY || (bbox.y + bbox.height / 2)
|
|
},
|
|
value: '"' + xValue + ', ' + yValue + '"',
|
|
zIndex: 4000
|
|
}, endMarkerStyle));
|
|
marker._to = {
|
|
translate: {
|
|
x: +x,
|
|
y: +y
|
|
}
|
|
};
|
|
} else {
|
|
marker.setAttributes({
|
|
value: '"' + xValue + ', ' + yValue + '"',
|
|
x: 0, y: 0,
|
|
hidden: false
|
|
}, true);
|
|
marker._to = {
|
|
translate: {
|
|
x: +x,
|
|
y: +y
|
|
}
|
|
};
|
|
}
|
|
}
|
|
me.items.push({
|
|
series: me,
|
|
value: [xValue, yValue],
|
|
point: [x, y],
|
|
sprite: marker,
|
|
storeItem: store.getAt(storeIndices[i])
|
|
});
|
|
prevX = x;
|
|
prevY = y;
|
|
}
|
|
|
|
if (path.length <= 1) {
|
|
//nothing to be rendered
|
|
return;
|
|
}
|
|
|
|
if (me.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;
|
|
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({
|
|
type: 'path',
|
|
group: group,
|
|
path: dummyPath,
|
|
stroke: endLineStyle.stroke || endLineStyle.fill
|
|
}, endLineStyle || {}));
|
|
me
|
|
|
|
//set configuration opacity
|
|
me.line.setAttributes({
|
|
opacity: lineOpacity
|
|
}, true);
|
|
|
|
if (enableShadows) {
|
|
me.line.setAttributes(Ext.apply({}, me.shadowOptions), true);
|
|
}
|
|
|
|
//unset fill here (there's always a default fill withing the themes).
|
|
me.line.setAttributes({
|
|
fill: 'none',
|
|
zIndex: 3000
|
|
});
|
|
if (!endLineStyle.stroke && colorArrayLength) {
|
|
me.line.setAttributes({
|
|
stroke: colorArrayStyle[me.themeIdx % colorArrayLength]
|
|
}, true);
|
|
}
|
|
if (enableShadows) {
|
|
//create shadows
|
|
shadows = me.line.shadows = [];
|
|
for (shindex = 0; shindex < lnsh; shindex++) {
|
|
shadowBarAttr = shadowAttributes[shindex];
|
|
shadowBarAttr = Ext.apply({}, shadowBarAttr, { path: dummyPath });
|
|
shadow = surface.add(Ext.apply({}, {
|
|
type: 'path',
|
|
group: shadowGroups[shindex]
|
|
}, shadowBarAttr));
|
|
shadows.push(shadow);
|
|
}
|
|
}
|
|
}
|
|
if (me.fill) {
|
|
fillPath = renderPath.concat([
|
|
["L", x, bbox.y + bbox.height],
|
|
["L", firstX, bbox.y + bbox.height],
|
|
["L", firstX, firstY]
|
|
]);
|
|
if (!me.fillPath) {
|
|
me.fillPath = surface.add({
|
|
group: group,
|
|
type: 'path',
|
|
fill: endLineStyle.fill || colorArrayStyle[me.themeIdx % colorArrayLength],
|
|
path: dummyPath
|
|
});
|
|
}
|
|
}
|
|
markerCount = showMarkers && markerGroup.getCount();
|
|
if (chart.animate) {
|
|
fill = me.fill;
|
|
line = me.line;
|
|
//Add renderer to line. There is not unique record associated with this.
|
|
rendererAttributes = me.renderer(line, false, { path: renderPath }, i, store);
|
|
Ext.apply(rendererAttributes, endLineStyle || {}, {
|
|
stroke: endLineStyle.stroke || endLineStyle.fill
|
|
});
|
|
//fill should not be used here but when drawing the special fill path object
|
|
delete rendererAttributes.fill;
|
|
line.show(true);
|
|
if (chart.markerIndex && me.previousPath) {
|
|
me.animation = animation = me.onAnimate(line, {
|
|
to: rendererAttributes,
|
|
from: {
|
|
path: fromPath
|
|
}
|
|
});
|
|
} else {
|
|
me.animation = animation = me.onAnimate(line, {
|
|
to: rendererAttributes
|
|
});
|
|
}
|
|
//animate shadows
|
|
if (enableShadows) {
|
|
shadows = line.shadows;
|
|
for(j = 0; j < lnsh; j++) {
|
|
shadows[j].show(true);
|
|
if (chart.markerIndex && me.previousPath) {
|
|
me.onAnimate(shadows[j], {
|
|
to: { path: renderPath },
|
|
from: { path: fromPath }
|
|
});
|
|
} else {
|
|
me.onAnimate(shadows[j], {
|
|
to: { path: renderPath }
|
|
});
|
|
}
|
|
}
|
|
}
|
|
//animate fill path
|
|
if (fill) {
|
|
me.fillPath.show(true);
|
|
me.onAnimate(me.fillPath, {
|
|
to: Ext.apply({}, {
|
|
path: fillPath,
|
|
fill: endLineStyle.fill || colorArrayStyle[me.themeIdx % colorArrayLength],
|
|
'stroke-width': 0,
|
|
opacity: fillOpacity
|
|
}, endLineStyle || {})
|
|
});
|
|
}
|
|
//animate markers
|
|
if (showMarkers) {
|
|
count = 0;
|
|
for(i = 0; i < ln; i++) {
|
|
if (me.items[i]) {
|
|
item = markerGroup.getAt(count++);
|
|
if (item) {
|
|
rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
|
|
me.onAnimate(item, {
|
|
to: Ext.applyIf(rendererAttributes, endMarkerStyle || {})
|
|
});
|
|
item.show(true);
|
|
}
|
|
}
|
|
}
|
|
for(; count < markerCount; count++) {
|
|
item = markerGroup.getAt(count);
|
|
item.hide(true);
|
|
}
|
|
// for(i = 0; i < (chart.markerIndex || 0)-1; i++) {
|
|
// item = markerGroup.getAt(i);
|
|
// item.hide(true);
|
|
// }
|
|
}
|
|
} else {
|
|
rendererAttributes = me.renderer(me.line, false, { path: renderPath, hidden: false }, i, store);
|
|
Ext.apply(rendererAttributes, endLineStyle || {}, {
|
|
stroke: endLineStyle.stroke || endLineStyle.fill
|
|
});
|
|
//fill should not be used here but when drawing the special fill path object
|
|
delete rendererAttributes.fill;
|
|
me.line.setAttributes(rendererAttributes, true);
|
|
me.line.setAttributes({
|
|
opacity: lineOpacity
|
|
}, true);
|
|
//set path for shadows
|
|
if (enableShadows) {
|
|
shadows = me.line.shadows;
|
|
for(j = 0; j < lnsh; j++) {
|
|
shadows[j].setAttributes({
|
|
path: renderPath,
|
|
hidden: false
|
|
}, true);
|
|
}
|
|
}
|
|
if (me.fill) {
|
|
me.fillPath.setAttributes({
|
|
path: fillPath,
|
|
hidden: false,
|
|
opacity: fillOpacity
|
|
}, true);
|
|
}
|
|
if (showMarkers) {
|
|
count = 0;
|
|
for(i = 0; i < ln; i++) {
|
|
if (me.items[i]) {
|
|
item = markerGroup.getAt(count++);
|
|
if (item) {
|
|
rendererAttributes = me.renderer(item, store.getAt(i), item._to, i, store);
|
|
item.setAttributes(Ext.apply(endMarkerStyle || {}, rendererAttributes || {}), true);
|
|
if (!item.attr.hidden) {
|
|
item.show(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
for(; count < markerCount; count++) {
|
|
item = markerGroup.getAt(count);
|
|
item.hide(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (chart.markerIndex) {
|
|
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();
|
|
me.renderCallouts();
|
|
|
|
me.fireEvent('draw', me);
|
|
},
|
|
|
|
// @private called when a label is to be created.
|
|
onCreateLabel: function(storeItem, item, i, display) {
|
|
var me = this,
|
|
group = me.labelsGroup,
|
|
config = me.label,
|
|
bbox = me.bbox,
|
|
endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {});
|
|
|
|
return me.chart.surface.add(Ext.apply({
|
|
'type': 'text',
|
|
'text-anchor': 'middle',
|
|
'group': group,
|
|
'x': Number(item.point[0]),
|
|
'y': bbox.y + bbox.height / 2
|
|
}, endLabelStyle || {}));
|
|
},
|
|
|
|
// @private called when a label is to be positioned.
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
resizing = chart.resizing,
|
|
config = me.label,
|
|
format = config.renderer,
|
|
field = config.field,
|
|
bbox = me.bbox,
|
|
x = Number(item.point[0]),
|
|
y = Number(item.point[1]),
|
|
radius = item.sprite.attr.radius,
|
|
labelBox, markerBox, width, height, xOffset, yOffset;
|
|
|
|
label.setAttributes({
|
|
text: format(storeItem.get(field), label, storeItem, item, i, display, animate, index),
|
|
hidden: true
|
|
}, true);
|
|
|
|
//TODO(nicolas): find out why width/height values in circle bounding boxes are undefined.
|
|
markerBox = item.sprite.getBBox();
|
|
markerBox.width = markerBox.width || (radius * 2);
|
|
markerBox.height = markerBox.height || (radius * 2);
|
|
|
|
labelBox = label.getBBox();
|
|
width = labelBox.width/2;
|
|
height = labelBox.height/2;
|
|
|
|
if (display == 'rotate') {
|
|
//correct label position to fit into the box
|
|
xOffset = markerBox.width/2 + width + height/2;
|
|
if (x + xOffset + width > bbox.x + bbox.width) {
|
|
x -= xOffset;
|
|
} else {
|
|
x += xOffset;
|
|
}
|
|
label.setAttributes({
|
|
'rotation': {
|
|
x: x,
|
|
y: y,
|
|
degrees: -45
|
|
}
|
|
}, true);
|
|
} else if (display == 'under' || display == 'over') {
|
|
label.setAttributes({
|
|
'rotation': {
|
|
degrees: 0
|
|
}
|
|
}, true);
|
|
|
|
//correct label position to fit into the box
|
|
if (x < bbox.x + width) {
|
|
x = bbox.x + width;
|
|
} else if (x + width > bbox.x + bbox.width) {
|
|
x = bbox.x + bbox.width - width;
|
|
}
|
|
|
|
yOffset = markerBox.height/2 + height;
|
|
y = y + (display == 'over' ? -yOffset : yOffset);
|
|
if (y < bbox.y + height) {
|
|
y += 2 * yOffset;
|
|
} else if (y + height > bbox.y + bbox.height) {
|
|
y -= 2 * yOffset;
|
|
}
|
|
}
|
|
|
|
if (me.chart.animate && !me.chart.resizing) {
|
|
label.show(true);
|
|
me.onAnimate(label, {
|
|
to: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
});
|
|
} else {
|
|
label.setAttributes({
|
|
x: x,
|
|
y: y
|
|
}, true);
|
|
if (resizing && me.animation) {
|
|
me.animation.on('afteranimate', function() {
|
|
label.show(true);
|
|
});
|
|
} else {
|
|
label.show(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private Overriding highlights.js highlightItem method.
|
|
highlightItem: function() {
|
|
var me = this,
|
|
line = me.line;
|
|
|
|
me.callParent(arguments);
|
|
if (line && !me.highlighted) {
|
|
if (!('__strokeWidth' in line)) {
|
|
line.__strokeWidth = parseFloat(line.attr['stroke-width']) || 0;
|
|
}
|
|
if (line.__anim) {
|
|
line.__anim.paused = true;
|
|
}
|
|
|
|
line.__anim = new Ext.fx.Anim({
|
|
target: line,
|
|
to: {
|
|
'stroke-width': line.__strokeWidth + 3
|
|
}
|
|
});
|
|
me.highlighted = true;
|
|
}
|
|
},
|
|
|
|
// @private Overriding highlights.js unHighlightItem method.
|
|
unHighlightItem: function() {
|
|
var me = this,
|
|
line = me.line,
|
|
width;
|
|
|
|
me.callParent(arguments);
|
|
if (line && me.highlighted) {
|
|
width = line.__strokeWidth || parseFloat(line.attr['stroke-width']) || 0;
|
|
line.__anim = new Ext.fx.Anim({
|
|
target: line,
|
|
to: {
|
|
'stroke-width': width
|
|
}
|
|
});
|
|
me.highlighted = false;
|
|
}
|
|
},
|
|
|
|
// @private called when a callout needs to be placed.
|
|
onPlaceCallout : function(callout, storeItem, item, i, display, animate, index) {
|
|
if (!display) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
resizing = chart.resizing,
|
|
config = me.callouts,
|
|
items = me.items,
|
|
prev = i == 0? false : items[i -1].point,
|
|
next = (i == items.length -1)? false : items[i +1].point,
|
|
cur = [+item.point[0], +item.point[1]],
|
|
dir, norm, normal, a, aprev, anext,
|
|
offsetFromViz = config.offsetFromViz || 30,
|
|
offsetToSide = config.offsetToSide || 10,
|
|
offsetBox = config.offsetBox || 3,
|
|
boxx, boxy, boxw, boxh,
|
|
p, clipRect = me.clipRect,
|
|
bbox = {
|
|
width: config.styles.width || 10,
|
|
height: config.styles.height || 10
|
|
},
|
|
x, y;
|
|
|
|
//get the right two points
|
|
if (!prev) {
|
|
prev = cur;
|
|
}
|
|
if (!next) {
|
|
next = cur;
|
|
}
|
|
a = (next[1] - prev[1]) / (next[0] - prev[0]);
|
|
aprev = (cur[1] - prev[1]) / (cur[0] - prev[0]);
|
|
anext = (next[1] - cur[1]) / (next[0] - cur[0]);
|
|
|
|
norm = Math.sqrt(1 + a * a);
|
|
dir = [1 / norm, a / norm];
|
|
normal = [-dir[1], dir[0]];
|
|
|
|
//keep the label always on the outer part of the "elbow"
|
|
if (aprev > 0 && anext < 0 && normal[1] < 0
|
|
|| aprev < 0 && anext > 0 && normal[1] > 0) {
|
|
normal[0] *= -1;
|
|
normal[1] *= -1;
|
|
} else if (Math.abs(aprev) < Math.abs(anext) && normal[0] < 0
|
|
|| Math.abs(aprev) > Math.abs(anext) && normal[0] > 0) {
|
|
normal[0] *= -1;
|
|
normal[1] *= -1;
|
|
}
|
|
//position
|
|
x = cur[0] + normal[0] * offsetFromViz;
|
|
y = cur[1] + normal[1] * offsetFromViz;
|
|
|
|
//box position and dimensions
|
|
boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
|
|
boxy = y - bbox.height /2 - offsetBox;
|
|
boxw = bbox.width + 2 * offsetBox;
|
|
boxh = bbox.height + 2 * offsetBox;
|
|
|
|
//now check if we're out of bounds and invert the normal vector correspondingly
|
|
//this may add new overlaps between labels (but labels won't be out of bounds).
|
|
if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
|
|
normal[0] *= -1;
|
|
}
|
|
if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
|
|
normal[1] *= -1;
|
|
}
|
|
|
|
//update positions
|
|
x = cur[0] + normal[0] * offsetFromViz;
|
|
y = cur[1] + normal[1] * offsetFromViz;
|
|
|
|
//update box position and dimensions
|
|
boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
|
|
boxy = y - bbox.height /2 - offsetBox;
|
|
boxw = bbox.width + 2 * offsetBox;
|
|
boxh = bbox.height + 2 * offsetBox;
|
|
|
|
if (chart.animate) {
|
|
//set the line from the middle of the pie to the box.
|
|
me.onAnimate(callout.lines, {
|
|
to: {
|
|
path: ["M", cur[0], cur[1], "L", x, y, "Z"]
|
|
}
|
|
});
|
|
//set component position
|
|
if (callout.panel) {
|
|
callout.panel.setPosition(boxx, boxy, true);
|
|
}
|
|
}
|
|
else {
|
|
//set the line from the middle of the pie to the box.
|
|
callout.lines.setAttributes({
|
|
path: ["M", cur[0], cur[1], "L", x, y, "Z"]
|
|
}, true);
|
|
//set component position
|
|
if (callout.panel) {
|
|
callout.panel.setPosition(boxx, boxy);
|
|
}
|
|
}
|
|
for (p in callout) {
|
|
callout[p].show(true);
|
|
}
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item, i) {
|
|
var me = this,
|
|
items = me.items,
|
|
tolerance = me.selectionTolerance,
|
|
result = null,
|
|
prevItem,
|
|
nextItem,
|
|
prevPoint,
|
|
nextPoint,
|
|
ln,
|
|
x1,
|
|
y1,
|
|
x2,
|
|
y2,
|
|
xIntersect,
|
|
yIntersect,
|
|
dist1, dist2, dist, midx, midy,
|
|
sqrt = Math.sqrt, abs = Math.abs;
|
|
|
|
nextItem = items[i];
|
|
prevItem = i && items[i - 1];
|
|
|
|
if (i >= ln) {
|
|
prevItem = items[ln - 1];
|
|
}
|
|
prevPoint = prevItem && prevItem.point;
|
|
nextPoint = nextItem && nextItem.point;
|
|
x1 = prevItem ? prevPoint[0] : nextPoint[0] - tolerance;
|
|
y1 = prevItem ? prevPoint[1] : nextPoint[1];
|
|
x2 = nextItem ? nextPoint[0] : prevPoint[0] + tolerance;
|
|
y2 = nextItem ? nextPoint[1] : prevPoint[1];
|
|
dist1 = sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));
|
|
dist2 = sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2));
|
|
dist = Math.min(dist1, dist2);
|
|
|
|
if (dist <= tolerance) {
|
|
return dist == dist1? prevItem : nextItem;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
// @private toggle visibility of all series elements (markers, sprites).
|
|
toggleAll: function(show) {
|
|
var me = this,
|
|
i, ln, shadow, shadows;
|
|
if (!show) {
|
|
Ext.chart.series.Cartesian.prototype.hideAll.call(me);
|
|
}
|
|
else {
|
|
Ext.chart.series.Cartesian.prototype.showAll.call(me);
|
|
}
|
|
if (me.line) {
|
|
me.line.setAttributes({
|
|
hidden: !show
|
|
}, true);
|
|
//hide shadows too
|
|
if (me.line.shadows) {
|
|
for (i = 0, shadows = me.line.shadows, ln = shadows.length; i < ln; i++) {
|
|
shadow = shadows[i];
|
|
shadow.setAttributes({
|
|
hidden: !show
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
if (me.fillPath) {
|
|
me.fillPath.setAttributes({
|
|
hidden: !show
|
|
}, true);
|
|
}
|
|
},
|
|
|
|
// @private hide all series elements (markers, sprites).
|
|
hideAll: function() {
|
|
this.toggleAll(false);
|
|
},
|
|
|
|
// @private hide all series elements (markers, sprites).
|
|
showAll: function() {
|
|
this.toggleAll(true);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.chart.series.Pie
|
|
*
|
|
* Creates a Pie Chart. A Pie Chart is a useful visualization technique to display quantitative information for different
|
|
* categories that also have a meaning as a whole.
|
|
* As with all other series, the Pie Series must be appended in the *series* Chart array configuration. See the Chart
|
|
* documentation for more information. A typical configuration object for the pie series could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data': 10 },
|
|
* { 'name': 'metric two', 'data': 7 },
|
|
* { 'name': 'metric three', 'data': 5 },
|
|
* { 'name': 'metric four', 'data': 2 },
|
|
* { 'name': 'metric five', 'data': 27 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 350,
|
|
* animate: true,
|
|
* store: store,
|
|
* theme: 'Base:gradients',
|
|
* series: [{
|
|
* type: 'pie',
|
|
* angleField: 'data',
|
|
* showInLegend: true,
|
|
* tips: {
|
|
* trackMouse: true,
|
|
* width: 140,
|
|
* height: 28,
|
|
* renderer: function(storeItem, item) {
|
|
* // calculate and display percentage on hover
|
|
* var total = 0;
|
|
* store.each(function(rec) {
|
|
* total += rec.get('data');
|
|
* });
|
|
* this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
|
|
* }
|
|
* },
|
|
* highlight: {
|
|
* segment: {
|
|
* margin: 20
|
|
* }
|
|
* },
|
|
* label: {
|
|
* field: 'name',
|
|
* display: 'rotate',
|
|
* contrast: true,
|
|
* font: '18px Arial'
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* In this configuration we set `pie` as the type for the series, set an object with specific style properties for highlighting options
|
|
* (triggered when hovering elements). We also set true to `showInLegend` so all the pie slices can be represented by a legend item.
|
|
*
|
|
* We set `data` as the value of the field to determine the angle span for each pie slice. We also set a label configuration object
|
|
* where we set the field name of the store field to be renderer as text for the label. The labels will also be displayed rotated.
|
|
*
|
|
* We set `contrast` to `true` to flip the color of the label if it is to similar to the background color. Finally, we set the font family
|
|
* and size through the `font` parameter.
|
|
*/
|
|
Ext.define('Ext.chart.series.Pie', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alternateClassName: ['Ext.chart.PieSeries', 'Ext.chart.PieChart'],
|
|
|
|
extend: Ext.chart.series.Series ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: "pie",
|
|
|
|
alias: 'series.pie',
|
|
|
|
accuracy: 100000,
|
|
|
|
rad: Math.PI * 2 / 100000,
|
|
|
|
/**
|
|
* @cfg {Number} highlightDuration
|
|
* The duration for the pie slice highlight effect.
|
|
*/
|
|
highlightDuration: 150,
|
|
|
|
/**
|
|
* @cfg {String} angleField (required)
|
|
* The store record field name to be used for the pie angles.
|
|
* The values bound to this field name must be positive real numbers.
|
|
*/
|
|
angleField: false,
|
|
|
|
/**
|
|
* @cfg {String} field
|
|
* Alias for {@link #angleField}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} xField
|
|
* Alias for {@link #angleField}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} lengthField
|
|
* The store record field name to be used for the pie slice lengths.
|
|
* The values bound to this field name must be positive real numbers.
|
|
*/
|
|
lengthField: false,
|
|
|
|
/**
|
|
* @cfg {Boolean/Number} donut
|
|
* Whether to set the pie chart as donut chart.
|
|
* Default's false. Can be set to a particular percentage to set the radius
|
|
* of the donut chart.
|
|
*/
|
|
donut: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} showInLegend
|
|
* Whether to add the pie chart elements as legend items. Default's false.
|
|
*/
|
|
showInLegend: false,
|
|
|
|
/**
|
|
* @cfg {Array} colorSet
|
|
* An array of color values which will be used, in order, as the pie slice fill colors.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} style
|
|
* An object containing styles for overriding series styles from Theming.
|
|
*/
|
|
style: {},
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
store = chart.store,
|
|
shadow = chart.shadow, i, l, cfg;
|
|
config.highlightCfg = Ext.merge({
|
|
segment: {
|
|
margin: 20
|
|
}
|
|
}, config.highlightCfg);
|
|
Ext.apply(me, config, {
|
|
shadowAttributes: [{
|
|
"stroke-width": 6,
|
|
"stroke-opacity": 1,
|
|
stroke: 'rgb(200, 200, 200)',
|
|
translate: {
|
|
x: 1.2,
|
|
y: 2
|
|
}
|
|
},
|
|
{
|
|
"stroke-width": 4,
|
|
"stroke-opacity": 1,
|
|
stroke: 'rgb(150, 150, 150)',
|
|
translate: {
|
|
x: 0.9,
|
|
y: 1.5
|
|
}
|
|
},
|
|
{
|
|
"stroke-width": 2,
|
|
"stroke-opacity": 1,
|
|
stroke: 'rgb(100, 100, 100)',
|
|
translate: {
|
|
x: 0.6,
|
|
y: 1
|
|
}
|
|
}]
|
|
});
|
|
me.group = surface.getGroup(me.seriesId);
|
|
if (shadow) {
|
|
for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
|
|
me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
|
|
}
|
|
}
|
|
surface.customAttributes.segment = function(opt) {
|
|
//Browsers will complain if we create a path
|
|
//element that has no path commands. So ensure a dummy
|
|
//path command for an empty path.
|
|
var ans = me.getSegment(opt);
|
|
if (!ans.path || ans.path.length === 0) {
|
|
ans.path = ['M', 0, 0];
|
|
}
|
|
return ans;
|
|
};
|
|
me.__excludes = me.__excludes || [];
|
|
},
|
|
|
|
onRedraw: function(){
|
|
this.initialize();
|
|
},
|
|
|
|
// @private updates some onbefore render parameters.
|
|
initialize: function() {
|
|
var me = this,
|
|
store = me.chart.getChartStore(),
|
|
data = store.data.items,
|
|
i, ln, rec;
|
|
//Add yFields to be used in Legend.js
|
|
me.yField = [];
|
|
if (me.label.field) {
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
rec = data[i];
|
|
me.yField.push(rec.get(me.label.field));
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private returns an object with properties for a PieSlice.
|
|
getSegment: function(opt) {
|
|
var me = this,
|
|
rad = me.rad,
|
|
cos = Math.cos,
|
|
sin = Math.sin,
|
|
x = me.centerX,
|
|
y = me.centerY,
|
|
x1 = 0, x2 = 0, x3 = 0, x4 = 0,
|
|
y1 = 0, y2 = 0, y3 = 0, y4 = 0,
|
|
x5 = 0, y5 = 0, x6 = 0, y6 = 0,
|
|
delta = 1e-2,
|
|
startAngle = opt.startAngle,
|
|
endAngle = opt.endAngle,
|
|
midAngle = (startAngle + endAngle) / 2 * rad,
|
|
margin = opt.margin || 0,
|
|
a1 = Math.min(startAngle, endAngle) * rad,
|
|
a2 = Math.max(startAngle, endAngle) * rad,
|
|
c1 = cos(a1), s1 = sin(a1),
|
|
c2 = cos(a2), s2 = sin(a2),
|
|
cm = cos(midAngle), sm = sin(midAngle),
|
|
flag = 0, hsqr2 = 0.7071067811865476; // sqrt(0.5)
|
|
|
|
if (a2 - a1 < delta) {
|
|
return {path: ""};
|
|
}
|
|
|
|
if (margin !== 0) {
|
|
x += margin * cm;
|
|
y += margin * sm;
|
|
}
|
|
|
|
x2 = x + opt.endRho * c1;
|
|
y2 = y + opt.endRho * s1;
|
|
|
|
x4 = x + opt.endRho * c2;
|
|
y4 = y + opt.endRho * s2;
|
|
|
|
x6 = x + opt.endRho * cm;
|
|
y6 = y + opt.endRho * sm;
|
|
|
|
if (opt.startRho !== 0) {
|
|
x1 = x + opt.startRho * c1;
|
|
y1 = y + opt.startRho * s1;
|
|
|
|
x3 = x + opt.startRho * c2;
|
|
y3 = y + opt.startRho * s2;
|
|
|
|
x5 = x + opt.startRho * cm;
|
|
y5 = y + opt.startRho * sm;
|
|
|
|
return {
|
|
path: [
|
|
["M", x2, y2],
|
|
["A", opt.endRho, opt.endRho, 0, 0, 1, x6, y6], ["L", x6, y6],
|
|
["A", opt.endRho, opt.endRho, 0, flag, 1, x4, y4], ["L", x4, y4],
|
|
["L", x3, y3],
|
|
["A", opt.startRho, opt.startRho, 0, flag, 0, x5, y5], ["L", x5, y5],
|
|
["A", opt.startRho, opt.startRho, 0, 0, 0, x1, y1], ["L", x1, y1],
|
|
["Z"]
|
|
]
|
|
};
|
|
} else {
|
|
return {
|
|
path: [
|
|
["M", x, y],
|
|
["L", x2, y2],
|
|
["A", opt.endRho, opt.endRho, 0, 0, 1, x6, y6], ["L", x6, y6],
|
|
["A", opt.endRho, opt.endRho, 0, flag, 1, x4, y4], ["L", x4, y4],
|
|
["L", x, y],
|
|
["Z"]
|
|
]
|
|
};
|
|
}
|
|
},
|
|
|
|
// @private utility function to calculate the middle point of a pie slice.
|
|
calcMiddle: function(item) {
|
|
var me = this,
|
|
rad = me.rad,
|
|
slice = item.slice,
|
|
x = me.centerX,
|
|
y = me.centerY,
|
|
startAngle = slice.startAngle,
|
|
endAngle = slice.endAngle,
|
|
donut = +me.donut,
|
|
midAngle = -(startAngle + endAngle) * rad / 2,
|
|
r = (item.endRho + item.startRho) / 2,
|
|
xm = x + r * Math.cos(midAngle),
|
|
ym = y - r * Math.sin(midAngle);
|
|
|
|
item.middle = {
|
|
x: xm,
|
|
y: ym
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
store = me.chart.getChartStore(),
|
|
data = store.data.items,
|
|
record,
|
|
group = me.group,
|
|
animate = me.chart.animate,
|
|
field = me.angleField || me.field || me.xField,
|
|
lenField = [].concat(me.lengthField),
|
|
totalLenField = 0,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
chartBBox = chart.chartBBox,
|
|
enableShadows = chart.shadow,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowAttributes = me.shadowAttributes,
|
|
lnsh = shadowGroups.length,
|
|
layers = lenField.length,
|
|
rhoAcum = 0,
|
|
donut = +me.donut,
|
|
layerTotals = [],
|
|
items = [],
|
|
totalField = 0,
|
|
maxLenField = 0,
|
|
angle = 0,
|
|
seriesStyle = me.seriesStyle,
|
|
colorArrayStyle = me.colorArrayStyle,
|
|
colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
|
|
rendererAttributes,
|
|
shadowAttr,
|
|
shadows,
|
|
shadow,
|
|
shindex,
|
|
centerX,
|
|
centerY,
|
|
deltaRho,
|
|
first = 0,
|
|
slice,
|
|
slices,
|
|
sprite,
|
|
value,
|
|
item,
|
|
lenValue,
|
|
ln,
|
|
i,
|
|
j,
|
|
endAngle,
|
|
path,
|
|
p,
|
|
spriteOptions, bbox;
|
|
|
|
Ext.apply(seriesStyle, me.style || {});
|
|
|
|
me.setBBox();
|
|
bbox = me.bbox;
|
|
|
|
//override theme colors
|
|
if (me.colorSet) {
|
|
colorArrayStyle = me.colorSet;
|
|
colorArrayLength = colorArrayStyle.length;
|
|
}
|
|
|
|
//if not store or store is empty then there's nothing to draw
|
|
if (!store || !store.getCount() || me.seriesIsHidden) {
|
|
me.hide();
|
|
me.items = [];
|
|
return;
|
|
}
|
|
|
|
me.unHighlightItem();
|
|
me.cleanHighlights();
|
|
|
|
centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
|
|
centerY = me.centerY = chartBBox.y + (chartBBox.height / 2);
|
|
me.radius = Math.min(centerX - chartBBox.x, centerY - chartBBox.y);
|
|
me.slices = slices = [];
|
|
me.items = items = [];
|
|
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
if (this.__excludes && this.__excludes[i]) {
|
|
//hidden series
|
|
continue;
|
|
}
|
|
totalField += +record.get(field);
|
|
if (lenField[0]) {
|
|
for (j = 0, totalLenField = 0; j < layers; j++) {
|
|
totalLenField += +record.get(lenField[j]);
|
|
}
|
|
layerTotals[i] = totalLenField;
|
|
maxLenField = Math.max(maxLenField, totalLenField);
|
|
}
|
|
}
|
|
|
|
totalField = totalField || 1;
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
if (this.__excludes && this.__excludes[i]) {
|
|
value = 0;
|
|
} else {
|
|
value = record.get(field);
|
|
if (first == 0) {
|
|
first = 1;
|
|
}
|
|
}
|
|
|
|
// First slice
|
|
if (first == 1) {
|
|
first = 2;
|
|
me.firstAngle = angle = me.accuracy * value / totalField / 2;
|
|
for (j = 0; j < i; j++) {
|
|
slices[j].startAngle = slices[j].endAngle = me.firstAngle;
|
|
}
|
|
}
|
|
|
|
endAngle = angle - me.accuracy * value / totalField;
|
|
slice = {
|
|
series: me,
|
|
value: value,
|
|
startAngle: angle,
|
|
endAngle: endAngle,
|
|
storeItem: record
|
|
};
|
|
if (lenField[0]) {
|
|
lenValue = +layerTotals[i];
|
|
//removing the floor will break Opera 11.6*
|
|
slice.rho = Math.floor(me.radius / maxLenField * lenValue);
|
|
} else {
|
|
slice.rho = me.radius;
|
|
}
|
|
slices[i] = slice;
|
|
// Do not remove this closure for the sake of https://sencha.jira.com/browse/EXTJSIV-5836
|
|
(function () {
|
|
angle = endAngle;
|
|
})();
|
|
}
|
|
|
|
//do all shadows first.
|
|
if (enableShadows) {
|
|
for (i = 0, ln = slices.length; i < ln; i++) {
|
|
slice = slices[i];
|
|
slice.shadowAttrs = [];
|
|
for (j = 0, rhoAcum = 0, shadows = []; j < layers; j++) {
|
|
sprite = group.getAt(i * layers + j);
|
|
deltaRho = lenField[j] ? store.getAt(i).get(lenField[j]) / layerTotals[i] * slice.rho: slice.rho;
|
|
//set pie slice properties
|
|
rendererAttributes = {
|
|
segment: {
|
|
startAngle: slice.startAngle,
|
|
endAngle: slice.endAngle,
|
|
margin: 0,
|
|
rho: slice.rho,
|
|
startRho: rhoAcum + (deltaRho * donut / 100),
|
|
endRho: rhoAcum + deltaRho
|
|
},
|
|
hidden: !slice.value && (slice.startAngle % me.accuracy) == (slice.endAngle % me.accuracy)
|
|
};
|
|
//create shadows
|
|
for (shindex = 0, shadows = []; shindex < lnsh; shindex++) {
|
|
shadowAttr = shadowAttributes[shindex];
|
|
shadow = shadowGroups[shindex].getAt(i);
|
|
if (!shadow) {
|
|
shadow = chart.surface.add(Ext.apply({}, {
|
|
type: 'path',
|
|
group: shadowGroups[shindex],
|
|
strokeLinejoin: "round"
|
|
}, rendererAttributes, shadowAttr));
|
|
}
|
|
shadowAttr = me.renderer(shadow, store.getAt(i), Ext.apply({}, rendererAttributes, shadowAttr), i, store);
|
|
if (animate) {
|
|
me.onAnimate(shadow, {
|
|
to: shadowAttr
|
|
});
|
|
} else {
|
|
shadow.setAttributes(shadowAttr, true);
|
|
}
|
|
shadows.push(shadow);
|
|
}
|
|
slice.shadowAttrs[j] = shadows;
|
|
}
|
|
}
|
|
}
|
|
//do pie slices after.
|
|
for (i = 0, ln = slices.length; i < ln; i++) {
|
|
slice = slices[i];
|
|
for (j = 0, rhoAcum = 0; j < layers; j++) {
|
|
sprite = group.getAt(i * layers + j);
|
|
deltaRho = lenField[j] ? store.getAt(i).get(lenField[j]) / layerTotals[i] * slice.rho: slice.rho;
|
|
//set pie slice properties
|
|
rendererAttributes = Ext.apply({
|
|
segment: {
|
|
startAngle: slice.startAngle,
|
|
endAngle: slice.endAngle,
|
|
margin: 0,
|
|
rho: slice.rho,
|
|
startRho: rhoAcum + (deltaRho * donut / 100),
|
|
endRho: rhoAcum + deltaRho
|
|
},
|
|
hidden: (!slice.value && (slice.startAngle % me.accuracy) == (slice.endAngle % me.accuracy))
|
|
}, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[(layers > 1? j : i) % colorArrayLength] } || {}));
|
|
item = Ext.apply({},
|
|
rendererAttributes.segment, {
|
|
slice: slice,
|
|
series: me,
|
|
storeItem: slice.storeItem,
|
|
index: i
|
|
});
|
|
me.calcMiddle(item);
|
|
if (enableShadows) {
|
|
item.shadows = slice.shadowAttrs[j];
|
|
}
|
|
items[i] = item;
|
|
// Create a new sprite if needed (no height)
|
|
if (!sprite) {
|
|
spriteOptions = Ext.apply({
|
|
type: "path",
|
|
group: group,
|
|
middle: item.middle
|
|
}, Ext.apply(seriesStyle, colorArrayStyle && { fill: colorArrayStyle[(layers > 1? j : i) % colorArrayLength] } || {}));
|
|
sprite = surface.add(Ext.apply(spriteOptions, rendererAttributes));
|
|
}
|
|
slice.sprite = slice.sprite || [];
|
|
item.sprite = sprite;
|
|
slice.sprite.push(sprite);
|
|
slice.point = [item.middle.x, item.middle.y];
|
|
if (animate) {
|
|
rendererAttributes = me.renderer(sprite, store.getAt(i), rendererAttributes, i, store);
|
|
sprite._to = rendererAttributes;
|
|
sprite._animating = true;
|
|
me.onAnimate(sprite, {
|
|
to: rendererAttributes,
|
|
listeners: {
|
|
afteranimate: {
|
|
fn: function() {
|
|
this._animating = false;
|
|
},
|
|
scope: sprite
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
rendererAttributes = me.renderer(sprite, store.getAt(i), Ext.apply(rendererAttributes, {
|
|
hidden: false
|
|
}), i, store);
|
|
sprite.setAttributes(rendererAttributes, true);
|
|
}
|
|
rhoAcum += deltaRho;
|
|
}
|
|
}
|
|
|
|
// Hide unused bars
|
|
ln = group.getCount();
|
|
for (i = 0; i < ln; i++) {
|
|
if (!slices[(i / layers) >> 0] && group.getAt(i)) {
|
|
group.getAt(i).hide(true);
|
|
}
|
|
}
|
|
if (enableShadows) {
|
|
lnsh = shadowGroups.length;
|
|
for (shindex = 0; shindex < ln; shindex++) {
|
|
if (!slices[(shindex / layers) >> 0]) {
|
|
for (j = 0; j < lnsh; j++) {
|
|
if (shadowGroups[j].getAt(shindex)) {
|
|
shadowGroups[j].getAt(shindex).hide(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
me.renderLabels();
|
|
me.renderCallouts();
|
|
},
|
|
|
|
// @private callback for when creating a label sprite.
|
|
onCreateLabel: function(storeItem, item, i, display) {
|
|
var me = this,
|
|
group = me.labelsGroup,
|
|
config = me.label,
|
|
centerX = me.centerX,
|
|
centerY = me.centerY,
|
|
middle = item.middle,
|
|
endLabelStyle = Ext.apply(me.seriesLabelStyle || {}, config || {});
|
|
|
|
return me.chart.surface.add(Ext.apply({
|
|
'type': 'text',
|
|
'text-anchor': 'middle',
|
|
'group': group,
|
|
'x': middle.x,
|
|
'y': middle.y
|
|
}, endLabelStyle));
|
|
},
|
|
|
|
// @private callback for when placing a label sprite.
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
resizing = chart.resizing,
|
|
config = me.label,
|
|
format = config.renderer,
|
|
field = config.field,
|
|
centerX = me.centerX,
|
|
centerY = me.centerY,
|
|
middle = item.middle,
|
|
opt = {
|
|
x: middle.x,
|
|
y: middle.y
|
|
},
|
|
x = middle.x - centerX,
|
|
y = middle.y - centerY,
|
|
from = {},
|
|
rho = 1,
|
|
theta = Math.atan2(y, x || 1),
|
|
dg = theta * 180 / Math.PI,
|
|
prevDg, labelBox, width, height;
|
|
|
|
opt.hidden = false;
|
|
|
|
if (this.__excludes && this.__excludes[i]) {
|
|
opt.hidden = true;
|
|
}
|
|
|
|
function fixAngle(a) {
|
|
if (a < 0) {
|
|
a += 360;
|
|
}
|
|
return a % 360;
|
|
}
|
|
|
|
label.setAttributes({
|
|
text: format(storeItem.get(field), label, storeItem, item, i, display, animate, index)
|
|
}, true);
|
|
|
|
switch (display) {
|
|
case 'outside':
|
|
// calculate the distance to the pie's edge
|
|
rho = Math.sqrt(x * x + y * y) * 2;
|
|
|
|
// add the distance from the label's center to its edge
|
|
label.setAttributes({rotation:{degrees: 0}}, true);
|
|
labelBox = label.getBBox();
|
|
width = labelBox.width/2 * Math.cos(theta) + 4;
|
|
height = labelBox.height/2 * Math.sin(theta) + 4;
|
|
|
|
rho += Math.sqrt(width*width + height*height);
|
|
|
|
//update positions
|
|
opt.x = rho * Math.cos(theta) + centerX;
|
|
opt.y = rho * Math.sin(theta) + centerY;
|
|
break;
|
|
|
|
case 'rotate':
|
|
dg = fixAngle(dg);
|
|
dg = (dg > 90 && dg < 270) ? dg + 180: dg;
|
|
|
|
prevDg = label.attr.rotation.degrees;
|
|
if (prevDg != null && Math.abs(prevDg - dg) > 180 * 0.5) {
|
|
if (dg > prevDg) {
|
|
dg -= 360;
|
|
} else {
|
|
dg += 360;
|
|
}
|
|
dg = dg % 360;
|
|
} else {
|
|
dg = fixAngle(dg);
|
|
}
|
|
//update rotation angle
|
|
opt.rotate = {
|
|
degrees: dg,
|
|
x: opt.x,
|
|
y: opt.y
|
|
};
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
//ensure the object has zero translation
|
|
opt.translate = {
|
|
x: 0, y: 0
|
|
};
|
|
if (animate && !resizing && (display != 'rotate' || prevDg != null)) {
|
|
me.onAnimate(label, {
|
|
to: opt
|
|
});
|
|
} else {
|
|
label.setAttributes(opt, true);
|
|
}
|
|
label._from = from;
|
|
},
|
|
|
|
// @private callback for when placing a callout sprite.
|
|
onPlaceCallout: function(callout, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
centerX = me.centerX,
|
|
centerY = me.centerY,
|
|
middle = item.middle,
|
|
opt = {
|
|
x: middle.x,
|
|
y: middle.y
|
|
},
|
|
x = middle.x - centerX,
|
|
y = middle.y - centerY,
|
|
rho = 1,
|
|
rhoCenter,
|
|
theta = Math.atan2(y, x || 1),
|
|
bbox = (callout && callout.label ? callout.label.getBBox() : {width:0,height:0}),
|
|
offsetFromViz = 20,
|
|
offsetToSide = 10,
|
|
offsetBox = 10,
|
|
p;
|
|
|
|
if (!bbox.width || !bbox.height) {
|
|
return;
|
|
}
|
|
|
|
//should be able to config this.
|
|
rho = item.endRho + offsetFromViz;
|
|
rhoCenter = (item.endRho + item.startRho) / 2 + (item.endRho - item.startRho) / 3;
|
|
//update positions
|
|
opt.x = rho * Math.cos(theta) + centerX;
|
|
opt.y = rho * Math.sin(theta) + centerY;
|
|
|
|
x = rhoCenter * Math.cos(theta);
|
|
y = rhoCenter * Math.sin(theta);
|
|
|
|
if (chart.animate) {
|
|
//set the line from the middle of the pie to the box.
|
|
me.onAnimate(callout.lines, {
|
|
to: {
|
|
path: ["M", x + centerX, y + centerY, "L", opt.x, opt.y, "Z", "M", opt.x, opt.y, "l", x > 0 ? offsetToSide: -offsetToSide, 0, "z"]
|
|
}
|
|
});
|
|
//set box position
|
|
me.onAnimate(callout.box, {
|
|
to: {
|
|
x: opt.x + (x > 0 ? offsetToSide: -(offsetToSide + bbox.width + 2 * offsetBox)),
|
|
y: opt.y + (y > 0 ? ( - bbox.height - offsetBox / 2) : ( - bbox.height - offsetBox / 2)),
|
|
width: bbox.width + 2 * offsetBox,
|
|
height: bbox.height + 2 * offsetBox
|
|
}
|
|
});
|
|
//set text position
|
|
me.onAnimate(callout.label, {
|
|
to: {
|
|
x: opt.x + (x > 0 ? (offsetToSide + offsetBox) : -(offsetToSide + bbox.width + offsetBox)),
|
|
y: opt.y + (y > 0 ? -bbox.height / 4: -bbox.height / 4)
|
|
}
|
|
});
|
|
} else {
|
|
//set the line from the middle of the pie to the box.
|
|
callout.lines.setAttributes({
|
|
path: ["M", x + centerX, y + centerY, "L", opt.x, opt.y, "Z", "M", opt.x, opt.y, "l", x > 0 ? offsetToSide: -offsetToSide, 0, "z"]
|
|
},
|
|
true);
|
|
//set box position
|
|
callout.box.setAttributes({
|
|
x: opt.x + (x > 0 ? offsetToSide: -(offsetToSide + bbox.width + 2 * offsetBox)),
|
|
y: opt.y + (y > 0 ? ( - bbox.height - offsetBox / 2) : ( - bbox.height - offsetBox / 2)),
|
|
width: bbox.width + 2 * offsetBox,
|
|
height: bbox.height + 2 * offsetBox
|
|
},
|
|
true);
|
|
//set text position
|
|
callout.label.setAttributes({
|
|
x: opt.x + (x > 0 ? (offsetToSide + offsetBox) : -(offsetToSide + bbox.width + offsetBox)),
|
|
y: opt.y + (y > 0 ? -bbox.height / 4: -bbox.height / 4)
|
|
},
|
|
true);
|
|
}
|
|
for (p in callout) {
|
|
callout[p].show(true);
|
|
}
|
|
},
|
|
|
|
// @private handles sprite animation for the series.
|
|
onAnimate: function(sprite, attr) {
|
|
sprite.show();
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item, i) {
|
|
var me = this,
|
|
cx = me.centerX,
|
|
cy = me.centerY,
|
|
abs = Math.abs,
|
|
dx = abs(x - cx),
|
|
dy = abs(y - cy),
|
|
startAngle = item.startAngle,
|
|
endAngle = item.endAngle,
|
|
rho = Math.sqrt(dx * dx + dy * dy),
|
|
angle = Math.atan2(y - cy, x - cx) / me.rad;
|
|
|
|
// normalize to the same range of angles created by drawSeries
|
|
if (angle > me.firstAngle) {
|
|
angle -= me.accuracy;
|
|
}
|
|
return (angle <= startAngle && angle > endAngle
|
|
&& rho >= item.startRho && rho <= item.endRho);
|
|
},
|
|
|
|
// @private hides all elements in the series.
|
|
hideAll: function(index) {
|
|
var i, l, shadow, shadows, sh, lsh, sprite;
|
|
index = (isNaN(this._index) ? index : this._index) || 0;
|
|
this.__excludes = this.__excludes || [];
|
|
this.__excludes[index] = true;
|
|
sprite = this.slices[index].sprite;
|
|
for (sh = 0, lsh = sprite.length; sh < lsh; sh++) {
|
|
sprite[sh].setAttributes({
|
|
hidden: true
|
|
}, true);
|
|
}
|
|
if (this.slices[index].shadowAttrs) {
|
|
for (i = 0, shadows = this.slices[index].shadowAttrs, l = shadows.length; i < l; i++) {
|
|
shadow = shadows[i];
|
|
for (sh = 0, lsh = shadow.length; sh < lsh; sh++) {
|
|
shadow[sh].setAttributes({
|
|
hidden: true
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
this.drawSeries();
|
|
},
|
|
|
|
// @private shows all elements in the series.
|
|
showAll: function(index) {
|
|
index = (isNaN(this._index) ? index : this._index) || 0;
|
|
this.__excludes[index] = false;
|
|
this.drawSeries();
|
|
},
|
|
|
|
/**
|
|
* Highlight the specified item. If no item is provided the whole series will be highlighted.
|
|
* @param item {Object} Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
highlightItem: function(item) {
|
|
var me = this,
|
|
rad = me.rad,
|
|
highlightSegment,
|
|
animate,
|
|
attrs,
|
|
i,
|
|
shadows,
|
|
shadow,
|
|
ln,
|
|
to,
|
|
itemHighlightSegment,
|
|
prop,
|
|
group,
|
|
display,
|
|
label,
|
|
middle,
|
|
r,
|
|
x,
|
|
y;
|
|
item = item || this.items[this._index];
|
|
|
|
//TODO(nico): sometimes in IE itemmouseover is triggered
|
|
//twice without triggering itemmouseout in between. This
|
|
//fixes the highlighting bug. Eventually, events should be
|
|
//changed to trigger one itemmouseout between two itemmouseovers.
|
|
this.unHighlightItem();
|
|
|
|
if (!item || me.animating || (item.sprite && item.sprite._animating)) {
|
|
return;
|
|
}
|
|
me.callParent([item]);
|
|
if (!me.highlight) {
|
|
return;
|
|
}
|
|
if ('segment' in me.highlightCfg) {
|
|
highlightSegment = me.highlightCfg.segment;
|
|
animate = me.chart.animate;
|
|
//animate labels
|
|
if (me.labelsGroup) {
|
|
group = me.labelsGroup;
|
|
display = me.label.display;
|
|
label = group.getAt(item.index);
|
|
middle = (item.startAngle + item.endAngle) / 2 * rad;
|
|
r = highlightSegment.margin || 0;
|
|
x = r * Math.cos(middle);
|
|
y = r * Math.sin(middle);
|
|
|
|
//TODO(nico): rounding to 1e-10
|
|
//gives the right translation. Translation
|
|
//was buggy for very small numbers. In this
|
|
//case we're not looking to translate to very small
|
|
//numbers but not to translate at all.
|
|
if (Math.abs(x) < 1e-10) {
|
|
x = 0;
|
|
}
|
|
if (Math.abs(y) < 1e-10) {
|
|
y = 0;
|
|
}
|
|
|
|
if (animate) {
|
|
label.stopAnimation();
|
|
label.animate({
|
|
to: {
|
|
translate: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
},
|
|
duration: me.highlightDuration
|
|
});
|
|
}
|
|
else {
|
|
label.setAttributes({
|
|
translate: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
}, true);
|
|
}
|
|
}
|
|
//animate shadows
|
|
if (me.chart.shadow && item.shadows) {
|
|
i = 0;
|
|
shadows = item.shadows;
|
|
ln = shadows.length;
|
|
for (; i < ln; i++) {
|
|
shadow = shadows[i];
|
|
to = {};
|
|
itemHighlightSegment = item.sprite._from.segment;
|
|
for (prop in itemHighlightSegment) {
|
|
if (! (prop in highlightSegment)) {
|
|
to[prop] = itemHighlightSegment[prop];
|
|
}
|
|
}
|
|
attrs = {
|
|
segment: Ext.applyIf(to, me.highlightCfg.segment)
|
|
};
|
|
if (animate) {
|
|
shadow.stopAnimation();
|
|
shadow.animate({
|
|
to: attrs,
|
|
duration: me.highlightDuration
|
|
});
|
|
}
|
|
else {
|
|
shadow.setAttributes(attrs, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Un-highlights the specified item. If no item is provided it will un-highlight the entire series.
|
|
* @param item {Object} Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
unHighlightItem: function() {
|
|
var me = this,
|
|
items,
|
|
animate,
|
|
shadowsEnabled,
|
|
group,
|
|
len,
|
|
i,
|
|
j,
|
|
display,
|
|
shadowLen,
|
|
p,
|
|
to,
|
|
ihs,
|
|
hs,
|
|
sprite,
|
|
shadows,
|
|
shadow,
|
|
item,
|
|
label,
|
|
attrs;
|
|
if (!me.highlight) {
|
|
return;
|
|
}
|
|
|
|
if (('segment' in me.highlightCfg) && me.items) {
|
|
items = me.items;
|
|
animate = me.chart.animate;
|
|
shadowsEnabled = !!me.chart.shadow;
|
|
group = me.labelsGroup;
|
|
len = items.length;
|
|
i = 0;
|
|
j = 0;
|
|
display = me.label.display;
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
if (!item) {
|
|
continue;
|
|
}
|
|
sprite = item.sprite;
|
|
if (sprite && sprite._highlighted) {
|
|
//animate labels
|
|
if (group) {
|
|
label = group.getAt(item.index);
|
|
attrs = Ext.apply({
|
|
translate: {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
},
|
|
display == 'rotate' ? {
|
|
rotate: {
|
|
x: label.attr.x,
|
|
y: label.attr.y,
|
|
degrees: label.attr.rotation.degrees
|
|
}
|
|
}: {});
|
|
if (animate) {
|
|
label.stopAnimation();
|
|
label.animate({
|
|
to: attrs,
|
|
duration: me.highlightDuration
|
|
});
|
|
}
|
|
else {
|
|
label.setAttributes(attrs, true);
|
|
}
|
|
}
|
|
if (shadowsEnabled) {
|
|
shadows = item.shadows;
|
|
shadowLen = shadows.length;
|
|
for (; j < shadowLen; j++) {
|
|
to = {};
|
|
ihs = item.sprite._to.segment;
|
|
hs = item.sprite._from.segment;
|
|
Ext.apply(to, hs);
|
|
for (p in ihs) {
|
|
if (! (p in hs)) {
|
|
to[p] = ihs[p];
|
|
}
|
|
}
|
|
shadow = shadows[j];
|
|
if (animate) {
|
|
shadow.stopAnimation();
|
|
shadow.animate({
|
|
to: {
|
|
segment: to
|
|
},
|
|
duration: me.highlightDuration
|
|
});
|
|
}
|
|
else {
|
|
shadow.setAttributes({ segment: to }, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Returns the color of the series (to be displayed as color for the series legend item).
|
|
* @param item {Object} Info about the item; same format as returned by #getItemForPoint
|
|
*/
|
|
getLegendColor: function(index) {
|
|
var me = this;
|
|
return (me.colorSet && me.colorSet[index % me.colorSet.length]) || me.colorArrayStyle[index % me.colorArrayStyle.length];
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @class Ext.chart.series.Radar
|
|
*
|
|
* Creates a Radar Chart. A Radar Chart is a useful visualization technique for comparing different quantitative values for
|
|
* a constrained number of categories.
|
|
*
|
|
* As with all other series, the Radar series must be appended in the *series* Chart array configuration. See the Chart
|
|
* documentation for more information. A typical configuration object for the radar series could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data1': 14, 'data2': 12, 'data3': 13 },
|
|
* { 'name': 'metric two', 'data1': 16, 'data2': 8, 'data3': 3 },
|
|
* { 'name': 'metric three', 'data1': 14, 'data2': 2, 'data3': 7 },
|
|
* { 'name': 'metric four', 'data1': 6, 'data2': 14, 'data3': 23 },
|
|
* { 'name': 'metric five', 'data1': 36, 'data2': 38, 'data3': 33 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* animate: true,
|
|
* theme:'Category2',
|
|
* store: store,
|
|
* axes: [{
|
|
* type: 'Radial',
|
|
* position: 'radial',
|
|
* label: {
|
|
* display: true
|
|
* }
|
|
* }],
|
|
* series: [{
|
|
* type: 'radar',
|
|
* xField: 'name',
|
|
* yField: 'data1',
|
|
* showInLegend: true,
|
|
* showMarkers: true,
|
|
* markerConfig: {
|
|
* radius: 5,
|
|
* size: 5
|
|
* },
|
|
* style: {
|
|
* 'stroke-width': 2,
|
|
* fill: 'none'
|
|
* }
|
|
* },{
|
|
* type: 'radar',
|
|
* xField: 'name',
|
|
* yField: 'data2',
|
|
* showMarkers: true,
|
|
* showInLegend: true,
|
|
* markerConfig: {
|
|
* radius: 5,
|
|
* size: 5
|
|
* },
|
|
* style: {
|
|
* 'stroke-width': 2,
|
|
* fill: 'none'
|
|
* }
|
|
* },{
|
|
* type: 'radar',
|
|
* xField: 'name',
|
|
* yField: 'data3',
|
|
* showMarkers: true,
|
|
* showInLegend: true,
|
|
* markerConfig: {
|
|
* radius: 5,
|
|
* size: 5
|
|
* },
|
|
* style: {
|
|
* 'stroke-width': 2,
|
|
* fill: 'none'
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* In this configuration we add three series to the chart. Each of these series is bound to the same
|
|
* categories field, `name` but bound to different properties for each category, `data1`, `data2` and
|
|
* `data3` respectively. All series display markers by having `showMarkers` enabled. The configuration
|
|
* for the markers of each series can be set by adding properties onto the markerConfig object.
|
|
* Finally we override some theme styling properties by adding properties to the `style` object.
|
|
*/
|
|
Ext.define('Ext.chart.series.Radar', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Series ,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
type: "radar",
|
|
alias: 'series.radar',
|
|
|
|
|
|
rad: Math.PI / 180,
|
|
|
|
showInLegend: false,
|
|
|
|
/**
|
|
* @cfg {Object} style
|
|
* An object containing styles for overriding series styles from Theming.
|
|
*/
|
|
style: {},
|
|
|
|
/**
|
|
* @cfg {String} xField
|
|
* The name of the data Model field corresponding to the x-axis (angle) value.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} yField
|
|
* The name of the data Model field corresponding to the y-axis (radius) value.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} showMarkers
|
|
* Whether markers should be displayed at the data points of the series. If true,
|
|
* then the {@link #markerConfig} config item will determine the markers' styling.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} markerConfig
|
|
* The display style for the markers. Only used if {@link #showMarkers} is true.
|
|
* The markerConfig is a configuration object containing the same set of properties defined in
|
|
* the Sprite class. For example, if we were to set red circles as markers to the series we could
|
|
* pass the object:
|
|
*
|
|
* @example
|
|
* markerConfig: {
|
|
* type: 'circle',
|
|
* radius: 4,
|
|
* 'fill': '#f00'
|
|
* }
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
surface = me.chart.surface;
|
|
me.group = surface.getGroup(me.seriesId);
|
|
if (me.showMarkers) {
|
|
me.markerGroup = surface.getGroup(me.seriesId + '-markers');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
store = me.chart.getChartStore(),
|
|
data = store.data.items,
|
|
d, record,
|
|
group = me.group,
|
|
chart = me.chart,
|
|
seriesItems = chart.series.items,
|
|
s, sLen, series,
|
|
field = me.field || me.yField,
|
|
surface = chart.surface,
|
|
chartBBox = chart.chartBBox,
|
|
colorArrayStyle = me.colorArrayStyle,
|
|
centerX, centerY,
|
|
items,
|
|
radius,
|
|
maxValue = 0,
|
|
fields = [],
|
|
max = Math.max,
|
|
cos = Math.cos,
|
|
sin = Math.sin,
|
|
pi2 = Math.PI * 2,
|
|
l = store.getCount(),
|
|
startPath, path, x, y, rho,
|
|
i, nfields,
|
|
seriesStyle = me.seriesStyle,
|
|
axis = chart.axes && chart.axes.get(0),
|
|
aggregate = !(axis && axis.maximum);
|
|
|
|
me.setBBox();
|
|
|
|
maxValue = aggregate? 0 : (axis.maximum || 0);
|
|
|
|
Ext.apply(seriesStyle, me.style || {});
|
|
|
|
//if the store is empty then there's nothing to draw
|
|
if (!store || !store.getCount() || me.seriesIsHidden) {
|
|
me.hide();
|
|
me.items = [];
|
|
if (me.radar) {
|
|
me.radar.hide(true);
|
|
}
|
|
me.radar = null;
|
|
return;
|
|
}
|
|
|
|
if(!seriesStyle['stroke']){
|
|
seriesStyle['stroke'] = colorArrayStyle[me.themeIdx % colorArrayStyle.length];
|
|
}
|
|
|
|
me.unHighlightItem();
|
|
me.cleanHighlights();
|
|
|
|
centerX = me.centerX = chartBBox.x + (chartBBox.width / 2);
|
|
centerY = me.centerY = chartBBox.y + (chartBBox.height / 2);
|
|
me.radius = radius = Math.min(chartBBox.width, chartBBox.height) /2;
|
|
me.items = items = [];
|
|
|
|
if (aggregate) {
|
|
//get all renderer fields
|
|
for (s = 0, sLen = seriesItems.length; s < sLen; s++) {
|
|
series = seriesItems[s];
|
|
fields.push(series.yField);
|
|
}
|
|
//get maxValue to interpolate
|
|
for (d = 0; d < l; d++) {
|
|
record = data[d];
|
|
for (i = 0, nfields = fields.length; i < nfields; i++) {
|
|
maxValue = max(+record.get(fields[i]), maxValue);
|
|
}
|
|
}
|
|
}
|
|
//ensure non-zero value.
|
|
maxValue = maxValue || 1;
|
|
//create path and items
|
|
startPath = []; path = [];
|
|
for (i = 0; i < l; i++) {
|
|
record = data[i];
|
|
rho = radius * record.get(field) / maxValue;
|
|
x = rho * cos(i / l * pi2);
|
|
y = rho * sin(i / l * pi2);
|
|
if (i == 0) {
|
|
path.push('M', x + centerX, y + centerY);
|
|
startPath.push('M', 0.01 * x + centerX, 0.01 * y + centerY);
|
|
} else {
|
|
path.push('L', x + centerX, y + centerY);
|
|
startPath.push('L', 0.01 * x + centerX, 0.01 * y + centerY);
|
|
}
|
|
items.push({
|
|
sprite: false, //TODO(nico): add markers
|
|
point: [centerX + x, centerY + y],
|
|
storeItem: record,
|
|
series: me
|
|
});
|
|
}
|
|
path.push('Z');
|
|
//create path sprite
|
|
if (!me.radar) {
|
|
me.radar = surface.add(Ext.apply({
|
|
type: 'path',
|
|
group: group,
|
|
path: startPath
|
|
}, seriesStyle || {}));
|
|
}
|
|
//reset on resizing
|
|
if (chart.resizing) {
|
|
me.radar.setAttributes({
|
|
path: startPath
|
|
}, true);
|
|
}
|
|
//render/animate
|
|
if (chart.animate) {
|
|
me.onAnimate(me.radar, {
|
|
to: Ext.apply({
|
|
path: path
|
|
}, seriesStyle || {})
|
|
});
|
|
} else {
|
|
me.radar.setAttributes(Ext.apply({
|
|
path: path
|
|
}, seriesStyle || {}), true);
|
|
}
|
|
//render markers, labels and callouts
|
|
if (me.showMarkers) {
|
|
me.drawMarkers();
|
|
}
|
|
me.renderLabels();
|
|
me.renderCallouts();
|
|
},
|
|
|
|
// @private draws the markers for the lines (if any).
|
|
drawMarkers: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
store = chart.getChartStore(),
|
|
markerStyle = Ext.apply({}, me.markerStyle || {}),
|
|
endMarkerStyle = Ext.apply(markerStyle, me.markerConfig, {
|
|
fill: me.colorArrayStyle[me.themeIdx % me.colorArrayStyle.length]
|
|
}),
|
|
items = me.items,
|
|
type = endMarkerStyle.type,
|
|
markerGroup = me.markerGroup,
|
|
centerX = me.centerX,
|
|
centerY = me.centerY,
|
|
item, i, l, marker, rendererAttributes;
|
|
|
|
delete endMarkerStyle.type;
|
|
|
|
for (i = 0, l = items.length; i < l; i++) {
|
|
item = items[i];
|
|
marker = markerGroup.getAt(i);
|
|
if (!marker) {
|
|
marker = Ext.chart.Shape[type](surface, Ext.apply({
|
|
group: markerGroup,
|
|
x: 0,
|
|
y: 0,
|
|
translate: {
|
|
x: centerX,
|
|
y: centerY
|
|
}
|
|
}, endMarkerStyle));
|
|
}
|
|
else {
|
|
marker.show();
|
|
}
|
|
|
|
item.sprite = marker;
|
|
|
|
if (chart.resizing) {
|
|
marker.setAttributes({
|
|
x: 0,
|
|
y: 0,
|
|
translate: {
|
|
x: centerX,
|
|
y: centerY
|
|
}
|
|
}, true);
|
|
}
|
|
marker._to = {
|
|
translate: {
|
|
x: item.point[0],
|
|
y: item.point[1]
|
|
}
|
|
};
|
|
//render/animate
|
|
rendererAttributes = me.renderer(marker, store.getAt(i), marker._to, i, store);
|
|
rendererAttributes = Ext.applyIf(rendererAttributes || {}, endMarkerStyle || {});
|
|
if (chart.animate) {
|
|
me.onAnimate(marker, {
|
|
to: rendererAttributes
|
|
});
|
|
}
|
|
else {
|
|
marker.setAttributes(rendererAttributes, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item) {
|
|
var point,
|
|
tolerance = 10,
|
|
abs = Math.abs;
|
|
point = item.point;
|
|
return (abs(point[0] - x) <= tolerance &&
|
|
abs(point[1] - y) <= tolerance);
|
|
},
|
|
|
|
// @private callback for when creating a label sprite.
|
|
onCreateLabel: function(storeItem, item, i, display) {
|
|
var me = this,
|
|
group = me.labelsGroup,
|
|
config = me.label,
|
|
centerX = me.centerX,
|
|
centerY = me.centerY,
|
|
endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle || {});
|
|
|
|
return me.chart.surface.add(Ext.apply({
|
|
'type': 'text',
|
|
'text-anchor': 'middle',
|
|
'group': group,
|
|
'x': centerX,
|
|
'y': centerY
|
|
}, endLabelStyle || {}));
|
|
},
|
|
|
|
// @private callback for when placing a label sprite.
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
resizing = chart.resizing,
|
|
config = me.label,
|
|
format = config.renderer,
|
|
field = config.field,
|
|
centerX = me.centerX,
|
|
centerY = me.centerY,
|
|
opt = {
|
|
x: Number(item.point[0]),
|
|
y: Number(item.point[1])
|
|
},
|
|
x = opt.x - centerX,
|
|
y = opt.y - centerY,
|
|
theta = Math.atan2(y, x || 1),
|
|
deg = theta * 180 / Math.PI,
|
|
labelBox, direction;
|
|
|
|
function fixAngle(a) {
|
|
if (a < 0) {
|
|
a += 360;
|
|
}
|
|
return a % 360;
|
|
}
|
|
|
|
label.setAttributes({
|
|
text: format(storeItem.get(field), label, storeItem, item, i, display, animate, index),
|
|
hidden: true
|
|
},
|
|
true);
|
|
|
|
// Move the label by half its height or width depending on
|
|
// the angle so the label doesn't overlap the graph.
|
|
labelBox = label.getBBox();
|
|
deg = fixAngle(deg);
|
|
if ((deg > 45 && deg < 135) || (deg > 225 && deg < 315)) {
|
|
direction = (deg > 45 && deg < 135 ? 1 : -1);
|
|
opt.y += direction * labelBox.height/2;
|
|
} else {
|
|
direction = (deg >= 135 && deg <= 225 ? -1 : 1);
|
|
opt.x += direction * labelBox.width/2;
|
|
}
|
|
|
|
if (resizing) {
|
|
label.setAttributes({
|
|
x: centerX,
|
|
y: centerY
|
|
}, true);
|
|
}
|
|
|
|
if (animate) {
|
|
label.show(true);
|
|
me.onAnimate(label, {
|
|
to: opt
|
|
});
|
|
} else {
|
|
label.setAttributes(opt, true);
|
|
label.show(true);
|
|
}
|
|
},
|
|
|
|
// @private for toggling (show/hide) series.
|
|
toggleAll: function(show) {
|
|
var me = this,
|
|
i, ln, shadow, shadows;
|
|
if (!show) {
|
|
Ext.chart.series.Radar.superclass.hideAll.call(me);
|
|
}
|
|
else {
|
|
Ext.chart.series.Radar.superclass.showAll.call(me);
|
|
}
|
|
if (me.radar) {
|
|
me.radar.setAttributes({
|
|
hidden: !show
|
|
}, true);
|
|
//hide shadows too
|
|
if (me.radar.shadows) {
|
|
for (i = 0, shadows = me.radar.shadows, ln = shadows.length; i < ln; i++) {
|
|
shadow = shadows[i];
|
|
shadow.setAttributes({
|
|
hidden: !show
|
|
}, true);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private hide all elements in the series.
|
|
hideAll: function() {
|
|
this.toggleAll(false);
|
|
this.hideMarkers(0);
|
|
},
|
|
|
|
// @private show all elements in the series.
|
|
showAll: function() {
|
|
this.toggleAll(true);
|
|
},
|
|
|
|
// @private hide all markers that belong to `markerGroup`
|
|
hideMarkers: function(index) {
|
|
var me = this,
|
|
count = me.markerGroup && me.markerGroup.getCount() || 0,
|
|
i = index || 0;
|
|
for (; i < count; i++) {
|
|
me.markerGroup.getAt(i).hide(true);
|
|
}
|
|
},
|
|
|
|
// @private return the radial axis as yAxis (there is no xAxis).
|
|
// Required by the base class 'Ext.chart.axis.Axis'.
|
|
getAxesForXAndYFields: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
axes = chart.axes,
|
|
axis = [].concat(axes && axes.get(0));
|
|
|
|
return {
|
|
yAxis: axis
|
|
};
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @class Ext.chart.series.Scatter
|
|
* @extends Ext.chart.series.Cartesian
|
|
*
|
|
* Creates a Scatter Chart. The scatter plot is useful when trying to display more than two variables in the same visualization.
|
|
* These variables can be mapped into x, y coordinates and also to an element's radius/size, color, etc.
|
|
* As with all other series, the Scatter Series must be appended in the *series* Chart array configuration. See the Chart
|
|
* documentation for more information on creating charts. A typical configuration object for the scatter could be:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.JsonStore', {
|
|
* fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
|
|
* data: [
|
|
* { 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
|
|
* { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
|
|
* { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
|
|
* { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
|
|
* { 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.chart.Chart', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 500,
|
|
* height: 300,
|
|
* animate: true,
|
|
* theme:'Category2',
|
|
* store: store,
|
|
* axes: [{
|
|
* type: 'Numeric',
|
|
* position: 'left',
|
|
* fields: ['data2', 'data3'],
|
|
* title: 'Sample Values',
|
|
* grid: true,
|
|
* minimum: 0
|
|
* }, {
|
|
* type: 'Category',
|
|
* position: 'bottom',
|
|
* fields: ['name'],
|
|
* title: 'Sample Metrics'
|
|
* }],
|
|
* series: [{
|
|
* type: 'scatter',
|
|
* markerConfig: {
|
|
* radius: 5,
|
|
* size: 5
|
|
* },
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: 'data2'
|
|
* }, {
|
|
* type: 'scatter',
|
|
* markerConfig: {
|
|
* radius: 5,
|
|
* size: 5
|
|
* },
|
|
* axis: 'left',
|
|
* xField: 'name',
|
|
* yField: 'data3'
|
|
* }]
|
|
* });
|
|
*
|
|
* In this configuration we add three different categories of scatter series. Each of them is bound to a different field of the same data store,
|
|
* `data1`, `data2` and `data3` respectively. All x-fields for the series must be the same field, in this case `name`.
|
|
* Each scatter series has a different styling configuration for markers, specified by the `markerConfig` object. Finally we set the left axis as
|
|
* axis to show the current values of the elements.
|
|
*/
|
|
Ext.define('Ext.chart.series.Scatter', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.chart.series.Cartesian ,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'scatter',
|
|
alias: 'series.scatter',
|
|
|
|
/**
|
|
* @cfg {Object} markerConfig
|
|
* The display style for the scatter series markers.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} style
|
|
* Append styling properties to this object for it to override theme properties.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
var me = this,
|
|
shadow = me.chart.shadow,
|
|
surface = me.chart.surface, i, l;
|
|
Ext.apply(me, config, {
|
|
style: {},
|
|
markerConfig: {},
|
|
shadowAttributes: [{
|
|
"stroke-width": 6,
|
|
"stroke-opacity": 0.05,
|
|
stroke: 'rgb(0, 0, 0)'
|
|
}, {
|
|
"stroke-width": 4,
|
|
"stroke-opacity": 0.1,
|
|
stroke: 'rgb(0, 0, 0)'
|
|
}, {
|
|
"stroke-width": 2,
|
|
"stroke-opacity": 0.15,
|
|
stroke: 'rgb(0, 0, 0)'
|
|
}]
|
|
});
|
|
me.group = surface.getGroup(me.seriesId);
|
|
if (shadow) {
|
|
for (i = 0, l = me.shadowAttributes.length; i < l; i++) {
|
|
me.shadowGroups.push(surface.getGroup(me.seriesId + '-shadows' + i));
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private Get chart and data boundaries
|
|
getBounds: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
chartAxes = chart.axes,
|
|
boundAxes = me.getAxesForXAndYFields(),
|
|
boundXAxis = boundAxes.xAxis,
|
|
boundYAxis = boundAxes.yAxis,
|
|
bbox, xScale, yScale, ln, minX, minY, maxX, maxY, i, axis, ends;
|
|
|
|
me.setBBox();
|
|
bbox = me.bbox;
|
|
|
|
if (axis = chartAxes.get(boundXAxis)) {
|
|
ends = axis.applyData();
|
|
minX = ends.from;
|
|
maxX = ends.to;
|
|
}
|
|
|
|
if (axis = chartAxes.get(boundYAxis)) {
|
|
ends = axis.applyData();
|
|
minY = ends.from;
|
|
maxY = ends.to;
|
|
}
|
|
|
|
// If a field was specified without a corresponding axis, create one to get bounds
|
|
if (me.xField && !Ext.isNumber(minX)) {
|
|
axis = me.getMinMaxXValues();
|
|
minX = axis[0];
|
|
maxX = axis[1];
|
|
}
|
|
|
|
if (me.yField && !Ext.isNumber(minY)) {
|
|
axis = me.getMinMaxYValues();
|
|
minY = axis[0];
|
|
maxY = axis[1];
|
|
}
|
|
|
|
if (isNaN(minX)) {
|
|
minX = 0;
|
|
maxX = store.getCount() - 1;
|
|
xScale = bbox.width / (store.getCount() - 1);
|
|
}
|
|
else {
|
|
xScale = bbox.width / (maxX - minX);
|
|
}
|
|
|
|
if (isNaN(minY)) {
|
|
minY = 0;
|
|
maxY = store.getCount() - 1;
|
|
yScale = bbox.height / (store.getCount() - 1);
|
|
}
|
|
else {
|
|
yScale = bbox.height / (maxY - minY);
|
|
}
|
|
|
|
return {
|
|
bbox: bbox,
|
|
minX: minX,
|
|
minY: minY,
|
|
xScale: xScale,
|
|
yScale: yScale
|
|
};
|
|
},
|
|
|
|
// @private Build an array of paths for the chart
|
|
getPaths: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
enableShadows = chart.shadow,
|
|
store = chart.getChartStore(),
|
|
data = store.data.items,
|
|
i, ln, record,
|
|
group = me.group,
|
|
bounds = me.bounds = me.getBounds(),
|
|
bbox = me.bbox,
|
|
xScale = bounds.xScale,
|
|
yScale = bounds.yScale,
|
|
minX = bounds.minX,
|
|
minY = bounds.minY,
|
|
boxX = bbox.x,
|
|
boxY = bbox.y,
|
|
boxHeight = bbox.height,
|
|
items = me.items = [],
|
|
attrs = [],
|
|
x, y, xValue, yValue, sprite;
|
|
|
|
for (i = 0, ln = data.length; i < ln; i++) {
|
|
record = data[i];
|
|
xValue = record.get(me.xField);
|
|
yValue = record.get(me.yField);
|
|
//skip undefined or null values
|
|
if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue)
|
|
|| xValue == null || yValue == null) {
|
|
continue;
|
|
}
|
|
// Ensure a value
|
|
if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)) {
|
|
xValue = i;
|
|
}
|
|
if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)) {
|
|
yValue = i;
|
|
}
|
|
x = boxX + (xValue - minX) * xScale;
|
|
y = boxY + boxHeight - (yValue - minY) * yScale;
|
|
attrs.push({
|
|
x: x,
|
|
y: y
|
|
});
|
|
|
|
me.items.push({
|
|
series: me,
|
|
value: [xValue, yValue],
|
|
point: [x, y],
|
|
storeItem: record
|
|
});
|
|
|
|
// When resizing, reset before animating
|
|
if (chart.animate && chart.resizing) {
|
|
sprite = group.getAt(i);
|
|
if (sprite) {
|
|
me.resetPoint(sprite);
|
|
if (enableShadows) {
|
|
me.resetShadow(sprite);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return attrs;
|
|
},
|
|
|
|
// @private translate point to the center
|
|
resetPoint: function(sprite) {
|
|
var bbox = this.bbox;
|
|
sprite.setAttributes({
|
|
translate: {
|
|
x: (bbox.x + bbox.width) / 2,
|
|
y: (bbox.y + bbox.height) / 2
|
|
}
|
|
}, true);
|
|
},
|
|
|
|
// @private translate shadows of a sprite to the center
|
|
resetShadow: function(sprite) {
|
|
var me = this,
|
|
shadows = sprite.shadows,
|
|
shadowAttributes = me.shadowAttributes,
|
|
ln = me.shadowGroups.length,
|
|
bbox = me.bbox,
|
|
i, attr;
|
|
for (i = 0; i < ln; i++) {
|
|
attr = Ext.apply({}, shadowAttributes[i]);
|
|
// TODO: fix this with setAttributes
|
|
if (attr.translate) {
|
|
attr.translate.x += (bbox.x + bbox.width) / 2;
|
|
attr.translate.y += (bbox.y + bbox.height) / 2;
|
|
}
|
|
else {
|
|
attr.translate = {
|
|
x: (bbox.x + bbox.width) / 2,
|
|
y: (bbox.y + bbox.height) / 2
|
|
};
|
|
}
|
|
shadows[i].setAttributes(attr, true);
|
|
}
|
|
},
|
|
|
|
// @private create a new point
|
|
createPoint: function(attr, type) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
group = me.group,
|
|
bbox = me.bbox;
|
|
|
|
return Ext.chart.Shape[type](chart.surface, Ext.apply({}, {
|
|
x: 0,
|
|
y: 0,
|
|
group: group,
|
|
translate: {
|
|
x: (bbox.x + bbox.width) / 2,
|
|
y: (bbox.y + bbox.height) / 2
|
|
}
|
|
}, attr));
|
|
},
|
|
|
|
// @private create a new set of shadows for a sprite
|
|
createShadow: function(sprite, endMarkerStyle, type) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowAttributes = me.shadowAttributes,
|
|
lnsh = shadowGroups.length,
|
|
bbox = me.bbox,
|
|
i, shadow, shadows, attr;
|
|
|
|
sprite.shadows = shadows = [];
|
|
|
|
for (i = 0; i < lnsh; i++) {
|
|
attr = Ext.apply({}, shadowAttributes[i]);
|
|
if (attr.translate) {
|
|
attr.translate.x += (bbox.x + bbox.width) / 2;
|
|
attr.translate.y += (bbox.y + bbox.height) / 2;
|
|
}
|
|
else {
|
|
Ext.apply(attr, {
|
|
translate: {
|
|
x: (bbox.x + bbox.width) / 2,
|
|
y: (bbox.y + bbox.height) / 2
|
|
}
|
|
});
|
|
}
|
|
Ext.apply(attr, endMarkerStyle);
|
|
shadow = Ext.chart.Shape[type](chart.surface, Ext.apply({}, {
|
|
x: 0,
|
|
y: 0,
|
|
group: shadowGroups[i]
|
|
}, attr));
|
|
shadows.push(shadow);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Draws the series for the current chart.
|
|
*/
|
|
drawSeries: function() {
|
|
var me = this,
|
|
chart = me.chart,
|
|
store = chart.getChartStore(),
|
|
group = me.group,
|
|
enableShadows = chart.shadow,
|
|
shadowGroups = me.shadowGroups,
|
|
shadowAttributes = me.shadowAttributes,
|
|
lnsh = shadowGroups.length,
|
|
sprite, attrs, attr, ln, i, endMarkerStyle, shindex, type, shadows,
|
|
rendererAttributes, shadowAttribute;
|
|
|
|
endMarkerStyle = Ext.apply(me.markerStyle, me.markerConfig);
|
|
type = endMarkerStyle.type || 'circle';
|
|
delete endMarkerStyle.type;
|
|
|
|
//if the store is empty then there's nothing to be rendered
|
|
if (!store || !store.getCount()) {
|
|
me.hide();
|
|
me.items = [];
|
|
return;
|
|
}
|
|
|
|
|
|
me.unHighlightItem();
|
|
me.cleanHighlights();
|
|
|
|
attrs = me.getPaths();
|
|
ln = attrs.length;
|
|
for (i = 0; i < ln; i++) {
|
|
attr = attrs[i];
|
|
sprite = group.getAt(i);
|
|
Ext.apply(attr, endMarkerStyle);
|
|
|
|
// Create a new sprite if needed (no height)
|
|
if (!sprite) {
|
|
sprite = me.createPoint(attr, type);
|
|
if (enableShadows) {
|
|
me.createShadow(sprite, endMarkerStyle, type);
|
|
}
|
|
}
|
|
|
|
shadows = sprite.shadows;
|
|
if (chart.animate) {
|
|
rendererAttributes = me.renderer(sprite, store.getAt(i), { translate: attr }, i, store);
|
|
sprite._to = rendererAttributes;
|
|
me.onAnimate(sprite, {
|
|
to: rendererAttributes
|
|
});
|
|
//animate shadows
|
|
for (shindex = 0; shindex < lnsh; shindex++) {
|
|
shadowAttribute = Ext.apply({}, shadowAttributes[shindex]);
|
|
rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({}, {
|
|
hidden: false,
|
|
translate: {
|
|
x: attr.x + (shadowAttribute.translate? shadowAttribute.translate.x : 0),
|
|
y: attr.y + (shadowAttribute.translate? shadowAttribute.translate.y : 0)
|
|
}
|
|
}, shadowAttribute), i, store);
|
|
me.onAnimate(shadows[shindex], { to: rendererAttributes });
|
|
}
|
|
}
|
|
else {
|
|
rendererAttributes = me.renderer(sprite, store.getAt(i), { translate: attr }, i, store);
|
|
sprite._to = rendererAttributes;
|
|
sprite.setAttributes(rendererAttributes, true);
|
|
//animate shadows
|
|
for (shindex = 0; shindex < lnsh; shindex++) {
|
|
shadowAttribute = Ext.apply({}, shadowAttributes[shindex]);
|
|
rendererAttributes = me.renderer(shadows[shindex], store.getAt(i), Ext.apply({}, {
|
|
hidden: false,
|
|
translate: {
|
|
x: attr.x + (shadowAttribute.translate? shadowAttribute.translate.x : 0),
|
|
y: attr.y + (shadowAttribute.translate? shadowAttribute.translate.y : 0)
|
|
}
|
|
}, shadowAttribute), i, store);
|
|
shadows[shindex].setAttributes(rendererAttributes, true);
|
|
}
|
|
}
|
|
me.items[i].sprite = sprite;
|
|
}
|
|
|
|
// Hide unused sprites
|
|
ln = group.getCount();
|
|
for (i = attrs.length; i < ln; i++) {
|
|
group.getAt(i).hide(true);
|
|
}
|
|
me.renderLabels();
|
|
me.renderCallouts();
|
|
},
|
|
|
|
// @private callback for when creating a label sprite.
|
|
onCreateLabel: function(storeItem, item, i, display) {
|
|
var me = this,
|
|
group = me.labelsGroup,
|
|
config = me.label,
|
|
endLabelStyle = Ext.apply({}, config, me.seriesLabelStyle),
|
|
bbox = me.bbox;
|
|
|
|
return me.chart.surface.add(Ext.apply({
|
|
type: 'text',
|
|
'text-anchor': 'middle',
|
|
group: group,
|
|
x: Number(item.point[0]),
|
|
y: bbox.y + bbox.height / 2
|
|
}, endLabelStyle));
|
|
},
|
|
|
|
// @private callback for when placing a label sprite.
|
|
onPlaceLabel: function(label, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
resizing = chart.resizing,
|
|
config = me.label,
|
|
format = config.renderer,
|
|
field = config.field,
|
|
bbox = me.bbox,
|
|
x = Number(item.point[0]),
|
|
y = Number(item.point[1]),
|
|
radius = item.sprite.attr.radius,
|
|
labelBox, markerBox, width, height, xOffset, yOffset,
|
|
anim;
|
|
|
|
label.setAttributes({
|
|
text: format(storeItem.get(field), label, storeItem, item, i, display, animate, index),
|
|
hidden: true
|
|
}, true);
|
|
|
|
|
|
//TODO(nicolas): find out why width/height values in circle bounding boxes are undefined.
|
|
markerBox = item.sprite.getBBox();
|
|
markerBox.width = markerBox.width || (radius * 2);
|
|
markerBox.height = markerBox.height || (radius * 2);
|
|
|
|
labelBox = label.getBBox();
|
|
width = labelBox.width/2;
|
|
height = labelBox.height/2;
|
|
|
|
if (display == 'rotate') {
|
|
//correct label position to fit into the box
|
|
xOffset = markerBox.width/2 + width + height/2;
|
|
if (x + xOffset + width > bbox.x + bbox.width) {
|
|
x -= xOffset;
|
|
} else {
|
|
x += xOffset;
|
|
}
|
|
label.setAttributes({
|
|
'rotation': {
|
|
x: x,
|
|
y: y,
|
|
degrees: -45
|
|
}
|
|
}, true);
|
|
} else if (display == 'under' || display == 'over') {
|
|
label.setAttributes({
|
|
'rotation': {
|
|
degrees: 0
|
|
}
|
|
}, true);
|
|
|
|
//correct label position to fit into the box
|
|
if (x < bbox.x + width) {
|
|
x = bbox.x + width;
|
|
} else if (x + width > bbox.x + bbox.width) {
|
|
x = bbox.x + bbox.width - width;
|
|
}
|
|
|
|
yOffset = markerBox.height/2 + height;
|
|
y = y + (display == 'over' ? -yOffset : yOffset);
|
|
if (y < bbox.y + height) {
|
|
y += 2 * yOffset;
|
|
} else if (y + height > bbox.y + bbox.height) {
|
|
y -= 2 * yOffset;
|
|
}
|
|
}
|
|
|
|
if (!chart.animate) {
|
|
label.setAttributes({
|
|
x: x,
|
|
y: y
|
|
}, true);
|
|
label.show(true);
|
|
}
|
|
else {
|
|
if (resizing) {
|
|
anim = item.sprite.getActiveAnimation();
|
|
if (anim) {
|
|
anim.on('afteranimate', function() {
|
|
label.setAttributes({
|
|
x: x,
|
|
y: y
|
|
}, true);
|
|
label.show(true);
|
|
});
|
|
}
|
|
else {
|
|
label.show(true);
|
|
}
|
|
}
|
|
else {
|
|
me.onAnimate(label, {
|
|
to: {
|
|
x: x,
|
|
y: y
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private callback for when placing a callout sprite.
|
|
onPlaceCallout: function(callout, storeItem, item, i, display, animate, index) {
|
|
var me = this,
|
|
chart = me.chart,
|
|
surface = chart.surface,
|
|
resizing = chart.resizing,
|
|
config = me.callouts,
|
|
items = me.items,
|
|
cur = item.point,
|
|
normal,
|
|
bbox = callout.label.getBBox(),
|
|
offsetFromViz = 30,
|
|
offsetToSide = 10,
|
|
offsetBox = 3,
|
|
boxx, boxy, boxw, boxh,
|
|
p, clipRect = me.bbox,
|
|
x, y;
|
|
|
|
//position
|
|
normal = [Math.cos(Math.PI /4), -Math.sin(Math.PI /4)];
|
|
x = cur[0] + normal[0] * offsetFromViz;
|
|
y = cur[1] + normal[1] * offsetFromViz;
|
|
|
|
//box position and dimensions
|
|
boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
|
|
boxy = y - bbox.height /2 - offsetBox;
|
|
boxw = bbox.width + 2 * offsetBox;
|
|
boxh = bbox.height + 2 * offsetBox;
|
|
|
|
//now check if we're out of bounds and invert the normal vector correspondingly
|
|
//this may add new overlaps between labels (but labels won't be out of bounds).
|
|
if (boxx < clipRect[0] || (boxx + boxw) > (clipRect[0] + clipRect[2])) {
|
|
normal[0] *= -1;
|
|
}
|
|
if (boxy < clipRect[1] || (boxy + boxh) > (clipRect[1] + clipRect[3])) {
|
|
normal[1] *= -1;
|
|
}
|
|
|
|
//update positions
|
|
x = cur[0] + normal[0] * offsetFromViz;
|
|
y = cur[1] + normal[1] * offsetFromViz;
|
|
|
|
//update box position and dimensions
|
|
boxx = x + (normal[0] > 0? 0 : -(bbox.width + 2 * offsetBox));
|
|
boxy = y - bbox.height /2 - offsetBox;
|
|
boxw = bbox.width + 2 * offsetBox;
|
|
boxh = bbox.height + 2 * offsetBox;
|
|
|
|
if (chart.animate) {
|
|
//set the line from the middle of the pie to the box.
|
|
me.onAnimate(callout.lines, {
|
|
to: {
|
|
path: ["M", cur[0], cur[1], "L", x, y, "Z"]
|
|
}
|
|
}, true);
|
|
//set box position
|
|
me.onAnimate(callout.box, {
|
|
to: {
|
|
x: boxx,
|
|
y: boxy,
|
|
width: boxw,
|
|
height: boxh
|
|
}
|
|
}, true);
|
|
//set text position
|
|
me.onAnimate(callout.label, {
|
|
to: {
|
|
x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
|
|
y: y
|
|
}
|
|
}, true);
|
|
} else {
|
|
//set the line from the middle of the pie to the box.
|
|
callout.lines.setAttributes({
|
|
path: ["M", cur[0], cur[1], "L", x, y, "Z"]
|
|
}, true);
|
|
//set box position
|
|
callout.box.setAttributes({
|
|
x: boxx,
|
|
y: boxy,
|
|
width: boxw,
|
|
height: boxh
|
|
}, true);
|
|
//set text position
|
|
callout.label.setAttributes({
|
|
x: x + (normal[0] > 0? offsetBox : -(bbox.width + offsetBox)),
|
|
y: y
|
|
}, true);
|
|
}
|
|
for (p in callout) {
|
|
callout[p].show(true);
|
|
}
|
|
},
|
|
|
|
// @private handles sprite animation for the series.
|
|
onAnimate: function(sprite, attr) {
|
|
sprite.show();
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
isItemInPoint: function(x, y, item) {
|
|
var point,
|
|
tolerance = 10,
|
|
abs = Math.abs;
|
|
|
|
function dist(point) {
|
|
var dx = abs(point[0] - x),
|
|
dy = abs(point[1] - y);
|
|
return Math.sqrt(dx * dx + dy * dy);
|
|
}
|
|
point = item.point;
|
|
return (point[0] - tolerance <= x && point[0] + tolerance >= x &&
|
|
point[1] - tolerance <= y && point[1] + tolerance >= y);
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* This layout allows you to easily render content into an HTML table. The total number of columns can be specified, and
|
|
* rowspan and colspan can be used to create complex layouts within the table. This class is intended to be extended or
|
|
* created via the `layout: {type: 'table'}` {@link Ext.container.Container#layout} config, and should generally not
|
|
* need to be created directly via the new keyword.
|
|
*
|
|
* Note that when creating a layout via config, the layout-specific config properties must be passed in via the {@link
|
|
* Ext.container.Container#layout} object which will then be applied internally to the layout. In the case of
|
|
* TableLayout, the only valid layout config properties are {@link #columns} and {@link #tableAttrs}. However, the items
|
|
* added to a TableLayout can supply the following table-specific config properties:
|
|
*
|
|
* - **rowspan** Applied to the table cell containing the item.
|
|
* - **colspan** Applied to the table cell containing the item.
|
|
* - **cellId** An id applied to the table cell containing the item.
|
|
* - **cellCls** A CSS class name added to the table cell containing the item.
|
|
*
|
|
* The basic concept of building up a TableLayout is conceptually very similar to building up a standard HTML table. You
|
|
* simply add each panel (or "cell") that you want to include along with any span attributes specified as the special
|
|
* config properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly
|
|
* creating and nesting rows and columns as you would in HTML, you simply specify the total column count in the
|
|
* layout config and start adding panels in their natural order from left to right, top to bottom. The layout will
|
|
* automatically figure out, based on the column count, rowspans and colspans, how to position each panel within the
|
|
* table. Just like with HTML tables, your rowspans and colspans must add up correctly in your overall layout or you'll
|
|
* end up with missing and/or extra cells! Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Table Layout',
|
|
* width: 300,
|
|
* height: 150,
|
|
* layout: {
|
|
* type: 'table',
|
|
* // The total column count must be specified here
|
|
* columns: 3
|
|
* },
|
|
* defaults: {
|
|
* // applied to each contained panel
|
|
* bodyStyle: 'padding:20px'
|
|
* },
|
|
* items: [{
|
|
* html: 'Cell A content',
|
|
* rowspan: 2
|
|
* },{
|
|
* html: 'Cell B content',
|
|
* colspan: 2
|
|
* },{
|
|
* html: 'Cell C content',
|
|
* cellCls: 'highlight'
|
|
* },{
|
|
* html: 'Cell D content'
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Table', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.table'],
|
|
extend: Ext.layout.container.Container ,
|
|
alternateClassName: 'Ext.layout.TableLayout',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {Number} columns
|
|
* The total number of columns to create in the table for this layout. If not specified, all Components added to
|
|
* this layout will be rendered into a single row using one column per Component.
|
|
*/
|
|
|
|
// private
|
|
monitorResize:false,
|
|
|
|
type: 'table',
|
|
|
|
createsInnerCt: true,
|
|
|
|
targetCls: Ext.baseCSSPrefix + 'table-layout-ct',
|
|
tableCls: Ext.baseCSSPrefix + 'table-layout',
|
|
cellCls: Ext.baseCSSPrefix + 'table-layout-cell',
|
|
|
|
/**
|
|
* @cfg {Object} tableAttrs
|
|
* An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification used to
|
|
* create the layout's `<table>` element. Example:
|
|
*
|
|
* {
|
|
* xtype: 'panel',
|
|
* layout: {
|
|
* type: 'table',
|
|
* columns: 3,
|
|
* tableAttrs: {
|
|
* style: {
|
|
* width: '100%'
|
|
* }
|
|
* }
|
|
* }
|
|
* }
|
|
*/
|
|
tableAttrs: null,
|
|
|
|
/**
|
|
* @cfg {Object} trAttrs
|
|
* An object containing properties which are added to the {@link Ext.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.DomHelper DomHelper} specification used to
|
|
* create the layout's `<td>` elements.
|
|
*/
|
|
|
|
getItemSizePolicy: function (item) {
|
|
return this.autoSizePolicy;
|
|
},
|
|
|
|
initHierarchyState: function (hierarchyStateInner) {
|
|
hierarchyStateInner.inShrinkWrapTable = true;
|
|
},
|
|
|
|
getLayoutItems: function() {
|
|
var me = this,
|
|
result = [],
|
|
items = me.callParent(),
|
|
item,
|
|
len = items.length, i;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
item = items[i];
|
|
if (!item.hidden) {
|
|
result.push(item);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
getHiddenItems: function(){
|
|
var result = [],
|
|
items = this.owner.items.items,
|
|
len = items.length,
|
|
i = 0, item;
|
|
|
|
for (; i < len; ++i) {
|
|
item = items[i];
|
|
if (item.rendered && item.hidden) {
|
|
result.push(item);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Iterates over all passed items, ensuring they are rendered in a cell in the proper
|
|
* location in the table structure.
|
|
*/
|
|
renderChildren: function() {
|
|
var me = this,
|
|
items = me.getLayoutItems(),
|
|
tbody = me.owner.getTargetEl().child('table', true).tBodies[0],
|
|
rows = tbody.rows,
|
|
i = 0,
|
|
len = items.length,
|
|
hiddenItems = me.getHiddenItems(),
|
|
cells, curCell, rowIdx, cellIdx, item, trEl, tdEl, itemCt, el;
|
|
|
|
// Calculate the correct cell structure for the current items
|
|
cells = me.calculateCells(items);
|
|
|
|
// Loop over each cell and compare to the current cells in the table, inserting/
|
|
// removing/moving cells as needed, and making sure each item is rendered into
|
|
// the correct cell.
|
|
for (; i < len; i++) {
|
|
curCell = cells[i];
|
|
rowIdx = curCell.rowIdx;
|
|
cellIdx = curCell.cellIdx;
|
|
item = items[i];
|
|
|
|
// If no row present, create and insert one
|
|
trEl = rows[rowIdx];
|
|
if (!trEl) {
|
|
trEl = tbody.insertRow(rowIdx);
|
|
if (me.trAttrs) {
|
|
trEl.set(me.trAttrs);
|
|
}
|
|
}
|
|
|
|
// If no cell present, create and insert one
|
|
itemCt = tdEl = Ext.get(trEl.cells[cellIdx] || trEl.insertCell(cellIdx));
|
|
if (me.needsDivWrap()) { //create wrapper div if needed - see docs below
|
|
itemCt = tdEl.first() || tdEl.createChild({tag: 'div'});
|
|
itemCt.setWidth(null);
|
|
}
|
|
|
|
// Render or move the component into the cell
|
|
if (!item.rendered) {
|
|
me.renderItem(item, itemCt, 0);
|
|
} else if (!me.isValidParent(item, itemCt, rowIdx, cellIdx, tbody)) {
|
|
me.moveItem(item, itemCt, 0);
|
|
}
|
|
|
|
// Set the cell properties
|
|
if (me.tdAttrs) {
|
|
tdEl.set(me.tdAttrs);
|
|
}
|
|
if (item.tdAttrs) {
|
|
tdEl.set(item.tdAttrs);
|
|
}
|
|
tdEl.set({
|
|
colSpan: item.colspan || 1,
|
|
rowSpan: item.rowspan || 1,
|
|
id: item.cellId || '',
|
|
cls: me.cellCls + ' ' + (item.cellCls || '')
|
|
});
|
|
|
|
// If at the end of a row, remove any extra cells
|
|
if (!cells[i + 1] || cells[i + 1].rowIdx !== rowIdx) {
|
|
cellIdx++;
|
|
while (trEl.cells[cellIdx]) {
|
|
trEl.deleteCell(cellIdx);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Delete any extra rows
|
|
rowIdx++;
|
|
while (tbody.rows[rowIdx]) {
|
|
tbody.deleteRow(rowIdx);
|
|
}
|
|
|
|
// Check if we've removed any cells that contain a component, we need to move
|
|
// them so they don't get cleaned up by the gc
|
|
for (i = 0, len = hiddenItems.length; i < len; ++i) {
|
|
me.ensureInDocument(hiddenItems[i].getEl());
|
|
}
|
|
},
|
|
|
|
ensureInDocument: function(el){
|
|
var dom = el.dom.parentNode;
|
|
while (dom) {
|
|
if (dom.tagName.toUpperCase() == 'BODY') {
|
|
return;
|
|
}
|
|
dom = dom.parentNode;
|
|
}
|
|
|
|
Ext.getDetachedBody().appendChild(el);
|
|
},
|
|
|
|
calculate: function (ownerContext) {
|
|
if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
|
this.done = false;
|
|
} else {
|
|
var targetContext = ownerContext.targetContext,
|
|
widthShrinkWrap = ownerContext.widthModel.shrinkWrap,
|
|
heightShrinkWrap = ownerContext.heightModel.shrinkWrap,
|
|
shrinkWrap = heightShrinkWrap || widthShrinkWrap,
|
|
table = shrinkWrap && targetContext.el.child('table', true),
|
|
targetPadding = shrinkWrap && targetContext.getPaddingInfo();
|
|
|
|
if (widthShrinkWrap) {
|
|
ownerContext.setContentWidth(table.offsetWidth + targetPadding.width, true);
|
|
}
|
|
|
|
if (heightShrinkWrap) {
|
|
ownerContext.setContentHeight(table.offsetHeight + targetPadding.height, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
finalizeLayout: function() {
|
|
if (this.needsDivWrap()) {
|
|
// set wrapper div width to match layed out item - see docs below
|
|
var items = this.getLayoutItems(),
|
|
i,
|
|
iLen = items.length,
|
|
item;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
item = items[i];
|
|
|
|
Ext.fly(item.el.dom.parentNode).setWidth(item.getWidth());
|
|
}
|
|
}
|
|
if (Ext.isIE6 || Ext.isIEQuirks) {
|
|
// Fixes an issue where the table won't paint
|
|
this.owner.getTargetEl().child('table').repaint();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Determine the row and cell indexes for each component, taking into consideration
|
|
* the number of columns and each item's configured colspan/rowspan values.
|
|
* @param {Array} items The layout components
|
|
* @return {Object[]} List of row and cell indexes for each of the components
|
|
*/
|
|
calculateCells: function(items) {
|
|
var cells = [],
|
|
rowIdx = 0,
|
|
colIdx = 0,
|
|
cellIdx = 0,
|
|
totalCols = this.columns || Infinity,
|
|
rowspans = [], //rolling list of active rowspans for each column
|
|
i = 0, j,
|
|
len = items.length,
|
|
item;
|
|
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
|
|
// Find the first available row/col slot not taken up by a spanning cell
|
|
while (colIdx >= totalCols || rowspans[colIdx] > 0) {
|
|
if (colIdx >= totalCols) {
|
|
// move down to next row
|
|
colIdx = 0;
|
|
cellIdx = 0;
|
|
rowIdx++;
|
|
|
|
// decrement all rowspans
|
|
for (j = 0; j < totalCols; j++) {
|
|
if (rowspans[j] > 0) {
|
|
rowspans[j]--;
|
|
}
|
|
}
|
|
} else {
|
|
colIdx++;
|
|
}
|
|
}
|
|
|
|
// Add the cell info to the list
|
|
cells.push({
|
|
rowIdx: rowIdx,
|
|
cellIdx: cellIdx
|
|
});
|
|
|
|
// Increment
|
|
for (j = item.colspan || 1; j; --j) {
|
|
rowspans[colIdx] = item.rowspan || 1;
|
|
++colIdx;
|
|
}
|
|
++cellIdx;
|
|
}
|
|
|
|
return cells;
|
|
},
|
|
|
|
getRenderTree: function() {
|
|
var me = this,
|
|
items = me.getLayoutItems(),
|
|
cells,
|
|
rows = [],
|
|
result = Ext.apply({
|
|
tag: 'table',
|
|
role: 'presentation',
|
|
cls: me.tableCls,
|
|
cellspacing: 0,
|
|
cellpadding: 0,
|
|
cn: {
|
|
tag: 'tbody',
|
|
cn: rows
|
|
}
|
|
}, me.tableAttrs),
|
|
tdAttrs = me.tdAttrs,
|
|
needsDivWrap = me.needsDivWrap(),
|
|
i, len = items.length, item, curCell, tr, rowIdx, cellIdx, cell;
|
|
|
|
// Calculate the correct cell structure for the current items
|
|
cells = me.calculateCells(items);
|
|
|
|
for (i = 0; i < len; i++) {
|
|
item = items[i];
|
|
|
|
curCell = cells[i];
|
|
rowIdx = curCell.rowIdx;
|
|
cellIdx = curCell.cellIdx;
|
|
|
|
// If no row present, create and insert one
|
|
tr = rows[rowIdx];
|
|
if (!tr) {
|
|
tr = rows[rowIdx] = {
|
|
tag: 'tr',
|
|
cn: []
|
|
};
|
|
if (me.trAttrs) {
|
|
Ext.apply(tr, me.trAttrs);
|
|
}
|
|
}
|
|
|
|
// If no cell present, create and insert one
|
|
cell = tr.cn[cellIdx] = {
|
|
tag: 'td'
|
|
};
|
|
if (tdAttrs) {
|
|
Ext.apply(cell, tdAttrs);
|
|
}
|
|
Ext.apply(cell, {
|
|
colSpan: item.colspan || 1,
|
|
rowSpan: item.rowspan || 1,
|
|
id: item.cellId || '',
|
|
cls: me.cellCls + ' ' + (item.cellCls || '')
|
|
});
|
|
|
|
if (needsDivWrap) { //create wrapper div if needed - see docs below
|
|
cell = cell.cn = {
|
|
tag: 'div'
|
|
};
|
|
}
|
|
|
|
me.configureItem(item);
|
|
// The DomHelper config of the item is the cell's sole child
|
|
cell.cn = item.getRenderTree();
|
|
}
|
|
return result;
|
|
},
|
|
|
|
isValidParent: function(item, target, rowIdx, cellIdx) {
|
|
var tbody,
|
|
correctCell,
|
|
table;
|
|
|
|
// If we were called with the 3 arg signature just check that the parent table of the item is within the render target
|
|
if (arguments.length === 3) {
|
|
table = item.el.up('table');
|
|
return table && table.dom.parentNode === target.dom;
|
|
}
|
|
tbody = this.owner.getTargetEl().child('table', true).tBodies[0];
|
|
correctCell = tbody.rows[rowIdx].cells[cellIdx];
|
|
return item.el.dom.parentNode === correctCell;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Opera 10.5 has a bug where if a table cell's child has box-sizing:border-box and padding, it
|
|
* will include that padding in the size of the cell, making it always larger than the
|
|
* shrink-wrapped size of its contents. To get around this we have to wrap the contents in a div
|
|
* and then set that div's width to match the item rendered within it afterLayout. This method
|
|
* determines whether we need the wrapper div; it currently does a straight UA sniff as this bug
|
|
* seems isolated to just Opera 10.5, but feature detection could be added here if needed.
|
|
*/
|
|
needsDivWrap: function() {
|
|
return Ext.isOpera10_5;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides a container for arranging a group of related Buttons in a tabular manner.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Panel with ButtonGroup',
|
|
* width: 300,
|
|
* height:200,
|
|
* renderTo: document.body,
|
|
* bodyPadding: 10,
|
|
* html: 'HTML Panel Content',
|
|
* tbar: [{
|
|
* xtype: 'buttongroup',
|
|
* columns: 3,
|
|
* title: 'Clipboard',
|
|
* items: [{
|
|
* text: 'Paste',
|
|
* scale: 'large',
|
|
* rowspan: 3,
|
|
* iconCls: 'add',
|
|
* iconAlign: 'top',
|
|
* cls: 'btn-as-arrow'
|
|
* },{
|
|
* xtype:'splitbutton',
|
|
* text: 'Menu Button',
|
|
* scale: 'large',
|
|
* rowspan: 3,
|
|
* iconCls: 'add',
|
|
* iconAlign: 'top',
|
|
* arrowAlign:'bottom',
|
|
* menu: [{ text: 'Menu Item 1' }]
|
|
* },{
|
|
* xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
|
|
* },{
|
|
* text: 'Copy', iconCls: 'add16'
|
|
* },{
|
|
* text: 'Format', iconCls: 'add16'
|
|
* }]
|
|
* }]
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.container.ButtonGroup', {
|
|
extend: Ext.panel.Panel ,
|
|
alias: 'widget.buttongroup',
|
|
alternateClassName: 'Ext.ButtonGroup',
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Number} columns
|
|
* The `columns` configuration property passed to the {@link #layout configured layout manager}.
|
|
* See {@link Ext.layout.container.Table#columns}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} baseCls
|
|
* @inheritdoc
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'btn-group',
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* @inheritdoc
|
|
*/
|
|
layout: {
|
|
type: 'table'
|
|
},
|
|
|
|
defaultType: 'button',
|
|
|
|
/**
|
|
* @cfg {Boolean} frame
|
|
* @inheritdoc
|
|
*/
|
|
frame: true,
|
|
|
|
/**
|
|
* @cfg {String} defaultButtonUI
|
|
* A default {@link Ext.Component#ui ui} to use for {@link Ext.button.Button Button} items
|
|
*/
|
|
|
|
frameHeader: false,
|
|
|
|
titleAlign: 'center',
|
|
|
|
noTitleCls: 'notitle',
|
|
|
|
initComponent : function() {
|
|
// Copy the component's columns config to the layout if specified
|
|
var me = this,
|
|
cols = me.columns;
|
|
|
|
if (cols) {
|
|
me.layout = Ext.apply({}, {columns: cols}, me.layout);
|
|
}
|
|
|
|
if (!me.title) {
|
|
me.addClsWithUI(me.noTitleCls);
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// private
|
|
onBeforeAdd: function(component) {
|
|
if (component.isButton) {
|
|
if (this.defaultButtonUI && component.ui === 'default' &&
|
|
!component.hasOwnProperty('ui')) {
|
|
component.ui = this.defaultButtonUI;
|
|
} else {
|
|
component.ui = component.ui + '-toolbar';
|
|
}
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
//private
|
|
applyDefaults: function(c) {
|
|
if (!Ext.isString(c)) {
|
|
c = this.callParent(arguments);
|
|
}
|
|
return c;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Array} tools
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} collapsible
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} collapseMode
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} animCollapse
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} closable
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* This is a utility class for being able to track all items of a particular type
|
|
* inside any level at a container. This can be used in favour of bubbling add/remove events
|
|
* which can add a large perf cost when implemented globally
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.container.Monitor', {
|
|
target: null,
|
|
selector: '',
|
|
|
|
scope: null,
|
|
addHandler: null,
|
|
removeHandler: null,
|
|
|
|
disabled: 0,
|
|
|
|
constructor: function(config){
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
bind: function(target){
|
|
var me = this;
|
|
|
|
me.target = target;
|
|
target.on('beforedestroy', me.disable, me);
|
|
me.onContainerAdd(target);
|
|
},
|
|
|
|
unbind: function() {
|
|
var me = this,
|
|
target = me.target;
|
|
|
|
if (target) {
|
|
target.un('beforedestroy', me.disable, me);
|
|
}
|
|
me.items = null;
|
|
},
|
|
|
|
disable: function(){
|
|
++this.disabled;
|
|
},
|
|
|
|
enable: function(){
|
|
if (this.disabled > 0) {
|
|
--this.disabled;
|
|
}
|
|
},
|
|
|
|
handleAdd: function(ct, comp) {
|
|
if (!this.disabled) {
|
|
if (comp.is(this.selector)) {
|
|
this.onItemAdd(comp.ownerCt, comp);
|
|
}
|
|
|
|
if (comp.isQueryable) {
|
|
this.onContainerAdd(comp);
|
|
}
|
|
}
|
|
},
|
|
|
|
onItemAdd: function(ct, comp){
|
|
var me = this,
|
|
items = me.items,
|
|
handler = me.addHandler;
|
|
|
|
if (!me.disabled) {
|
|
if (handler) {
|
|
handler.call(me.scope || comp, comp);
|
|
}
|
|
if (items) {
|
|
items.add(comp);
|
|
}
|
|
}
|
|
},
|
|
|
|
onItemRemove: function(ct, comp){
|
|
var me = this,
|
|
items = me.items,
|
|
handler = me.removeHandler;
|
|
|
|
if (!me.disabled) {
|
|
if (handler) {
|
|
handler.call(me.scope || comp, comp);
|
|
}
|
|
if (items) {
|
|
items.remove(comp);
|
|
}
|
|
}
|
|
},
|
|
|
|
onContainerAdd: function(ct, preventChildren) {
|
|
var me = this,
|
|
items, len,
|
|
handleAdd = me.handleAdd,
|
|
handleRemove = me.handleRemove,
|
|
i, comp;
|
|
|
|
if (ct.isContainer) {
|
|
ct.on('add', handleAdd, me);
|
|
ct.on('dockedadd', handleAdd, me);
|
|
ct.on('remove', handleRemove, me);
|
|
ct.on('dockedremove', handleRemove, me);
|
|
}
|
|
|
|
// Means we've been called by a parent container so the selector
|
|
// matchers have already been processed
|
|
if (preventChildren !== true) {
|
|
items = ct.query(me.selector);
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
comp = items[i];
|
|
me.onItemAdd(comp.ownerCt, comp);
|
|
}
|
|
}
|
|
|
|
items = ct.query('container');
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
me.onContainerAdd(items[i], true);
|
|
}
|
|
|
|
},
|
|
|
|
handleRemove: function(ct, comp) {
|
|
var me = this;
|
|
|
|
// During a destroy we don't want to maintain any of this information,
|
|
// so typically we'll be disabled here
|
|
if (!me.disabled) {
|
|
if (comp.is(me.selector)) {
|
|
me.onItemRemove(ct, comp);
|
|
}
|
|
|
|
if (comp.isQueryable) {
|
|
me.onContainerRemove(ct, comp);
|
|
}
|
|
}
|
|
},
|
|
|
|
onContainerRemove: function(ct, comp){
|
|
var me = this,
|
|
items, i, len, item;
|
|
|
|
// If it's not a container, it means it's a queryable that isn't a container.
|
|
// For example a button with a menu
|
|
if (!comp.isDestroyed && !comp.destroying && comp.isContainer) {
|
|
me.removeCtListeners(comp);
|
|
|
|
items = comp.query(me.selector);
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
item = items[i];
|
|
me.onItemRemove(item.ownerCt, item);
|
|
}
|
|
|
|
items = comp.query('container');
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
me.removeCtListeners(items[i]);
|
|
}
|
|
} else {
|
|
// comp destroying, or we need to invalidate the collection
|
|
me.invalidateItems();
|
|
}
|
|
},
|
|
|
|
removeCtListeners: function(comp){
|
|
var me = this;
|
|
comp.un('add', me.handleAdd, me);
|
|
comp.un('dockedadd', me.handleAdd, me);
|
|
comp.un('remove', me.handleRemove, me);
|
|
comp.un('dockedremove', me.handleRemove, me);
|
|
},
|
|
|
|
getItems: function(){
|
|
var me = this,
|
|
items = me.items;
|
|
|
|
if (!items) {
|
|
items = me.items = new Ext.util.MixedCollection();
|
|
items.addAll(me.target.query(me.selector));
|
|
}
|
|
return items;
|
|
},
|
|
|
|
invalidateItems: function(){
|
|
this.items = null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A specialized container representing the viewable application area (the browser viewport).
|
|
*
|
|
* The Viewport renders itself to the document body, and automatically sizes itself to the size of
|
|
* the browser viewport and manages window resizing. There may only be one Viewport created
|
|
* in a page.
|
|
*
|
|
* Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
|
|
* on its child Components if you configure it with a {@link #layout}.
|
|
*
|
|
* A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
|
|
* required layout is simpler, a different layout should be chosen.
|
|
*
|
|
* For example, to simply make a single child item occupy all available space, use
|
|
* {@link Ext.layout.container.Fit fit layout}.
|
|
*
|
|
* To display one "active" item at full size from a choice of several child items, use
|
|
* {@link Ext.layout.container.Card card layout}.
|
|
*
|
|
* Inner layouts are available because all {@link Ext.panel.Panel Panel}s
|
|
* added to the Viewport, either through its {@link #cfg-items}, or the {@link #method-add}
|
|
* method of any of its child Panels may themselves have a layout.
|
|
*
|
|
* The Viewport does not provide scrolling, so child Panels within the Viewport should provide
|
|
* for scrolling if needed using the {@link #autoScroll} config.
|
|
*
|
|
* An example showing a classic application border layout:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.container.Viewport', {
|
|
* layout: 'border',
|
|
* items: [{
|
|
* region: 'north',
|
|
* html: '<h1 class="x-panel-header">Page Title</h1>',
|
|
* border: false,
|
|
* margins: '0 0 5 0'
|
|
* }, {
|
|
* region: 'west',
|
|
* collapsible: true,
|
|
* title: 'Navigation',
|
|
* width: 150
|
|
* // could use a TreePanel or AccordionLayout for navigational items
|
|
* }, {
|
|
* region: 'south',
|
|
* title: 'South Panel',
|
|
* collapsible: true,
|
|
* html: 'Information goes here',
|
|
* split: true,
|
|
* height: 100,
|
|
* minHeight: 100
|
|
* }, {
|
|
* region: 'east',
|
|
* title: 'East Panel',
|
|
* collapsible: true,
|
|
* split: true,
|
|
* width: 150
|
|
* }, {
|
|
* region: 'center',
|
|
* xtype: 'tabpanel', // TabPanel itself has no title
|
|
* activeTab: 0, // First tab active by default
|
|
* items: {
|
|
* title: 'Default Tab',
|
|
* html: 'The first tab\'s content. Others may be added dynamically'
|
|
* }
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.container.Viewport', {
|
|
extend: Ext.container.Container ,
|
|
alias: 'widget.viewport',
|
|
|
|
alternateClassName: 'Ext.Viewport',
|
|
|
|
// Privatize config options which, if used, would interfere with the
|
|
// correct operation of the Viewport as the sole manager of the
|
|
// layout of the document body.
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} applyTo
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} allowDomMove
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} renderTo
|
|
* Always renders to document body.
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} height
|
|
* Sets itself to viewport width.
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} width
|
|
* Sets itself to viewport height.
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} isViewport
|
|
* `true` in this class to identify an object as an instantiated Viewport, or subclass thereof.
|
|
*/
|
|
isViewport: true,
|
|
|
|
ariaRole: 'application',
|
|
|
|
preserveElOnDestroy: true,
|
|
|
|
viewportCls: Ext.baseCSSPrefix + 'viewport',
|
|
|
|
initComponent : function() {
|
|
var me = this,
|
|
html = document.body.parentNode,
|
|
el = me.el = Ext.getBody();
|
|
|
|
// Get the DOM disruption over with before the Viewport renders and begins a layout
|
|
Ext.getScrollbarSize();
|
|
|
|
// Clear any dimensions, we will size later on
|
|
me.width = me.height = undefined;
|
|
|
|
me.callParent(arguments);
|
|
Ext.fly(html).addCls(me.viewportCls);
|
|
if (me.autoScroll) {
|
|
Ext.fly(html).setStyle(me.getOverflowStyle());
|
|
delete me.autoScroll;
|
|
}
|
|
el.setHeight = el.setWidth = Ext.emptyFn;
|
|
el.dom.scroll = 'no';
|
|
me.allowDomMove = false;
|
|
me.renderTo = me.el;
|
|
},
|
|
|
|
// override here to prevent an extraneous warning
|
|
applyTargetCls: function(targetCls) {
|
|
this.el.addCls(targetCls);
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Important to start life as the proper size (to avoid extra layouts)
|
|
// But after render so that the size is not stamped into the body
|
|
me.width = Ext.Element.getViewportWidth();
|
|
me.height = Ext.Element.getViewportHeight();
|
|
},
|
|
|
|
afterFirstLayout: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
setTimeout(function() {
|
|
Ext.EventManager.onWindowResize(me.fireResize, me);
|
|
}, 1);
|
|
},
|
|
|
|
fireResize : function(width, height){
|
|
// In IE we can get resize events that have our current size, so we ignore them
|
|
// to avoid the useless layout...
|
|
if (width != this.width || height != this.height) {
|
|
this.setSize(width, height);
|
|
}
|
|
},
|
|
|
|
initHierarchyState: function(hierarchyState) {
|
|
this.callParent([this.hierarchyState = Ext.rootHierarchyState]);
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
var me = this;
|
|
|
|
me.removeUIFromElement();
|
|
me.el.removeCls(me.baseCls);
|
|
Ext.fly(document.body.parentNode).removeCls(me.viewportCls);
|
|
me.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Don Griffin
|
|
*
|
|
* This class is a base for all id generators. It also provides lookup of id generators by
|
|
* their id.
|
|
*
|
|
* Generally, id generators are used to generate a primary key for new model instances. There
|
|
* are different approaches to solving this problem, so this mechanism has both simple use
|
|
* cases and is open to custom implementations. A {@link Ext.data.Model} requests id generation
|
|
* using the {@link Ext.data.Model#idgen} property.
|
|
*
|
|
* # Identity, Type and Shared IdGenerators
|
|
*
|
|
* It is often desirable to share IdGenerators to ensure uniqueness or common configuration.
|
|
* This is done by giving IdGenerator instances an id property by which they can be looked
|
|
* up using the {@link #get} method. To configure two {@link Ext.data.Model Model} classes
|
|
* to share one {@link Ext.data.SequentialIdGenerator sequential} id generator, you simply
|
|
* assign them the same id:
|
|
*
|
|
* Ext.define('MyApp.data.MyModelA', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'sequential',
|
|
* id: 'foo'
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.data.MyModelB', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'sequential',
|
|
* id: 'foo'
|
|
* }
|
|
* });
|
|
*
|
|
* To make this as simple as possible for generator types that are shared by many (or all)
|
|
* Models, the IdGenerator types (such as 'sequential' or 'uuid') are also reserved as
|
|
* generator id's. This is used by the {@link Ext.data.UuidGenerator} which has an id equal
|
|
* to its type ('uuid'). In other words, the following Models share the same generator:
|
|
*
|
|
* Ext.define('MyApp.data.MyModelX', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'uuid'
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.data.MyModelY', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'uuid'
|
|
* });
|
|
*
|
|
* This can be overridden (by specifying the id explicitly), but there is no particularly
|
|
* good reason to do so for this generator type.
|
|
*
|
|
* # Creating Custom Generators
|
|
*
|
|
* An id generator should derive from this class and implement the {@link #generate} method.
|
|
* The constructor will apply config properties on new instances, so a constructor is often
|
|
* not necessary.
|
|
*
|
|
* To register an id generator type, a derived class should provide an `alias` like so:
|
|
*
|
|
* Ext.define('MyApp.data.CustomIdGenerator', {
|
|
* extend: 'Ext.data.IdGenerator',
|
|
* alias: 'idgen.custom',
|
|
*
|
|
* configProp: 42, // some config property w/default value
|
|
*
|
|
* generate: function () {
|
|
* return ... // a new id
|
|
* }
|
|
* });
|
|
*
|
|
* Using the custom id generator is then straightforward:
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'custom'
|
|
* });
|
|
* // or...
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'custom',
|
|
* configProp: value
|
|
* }
|
|
* });
|
|
*
|
|
* It is not recommended to mix shared generators with generator configuration. This leads
|
|
* to unpredictable results unless all configurations match (which is also redundant). In
|
|
* such cases, a custom generator with a default id is the best approach.
|
|
*
|
|
* Ext.define('MyApp.data.CustomIdGenerator', {
|
|
* extend: 'Ext.data.SequentialIdGenerator',
|
|
* alias: 'idgen.custom',
|
|
*
|
|
* id: 'custom', // shared by default
|
|
*
|
|
* prefix: 'ID_',
|
|
* seed: 1000
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.data.MyModelX', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'custom'
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.data.MyModelY', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'custom'
|
|
* });
|
|
*
|
|
* // the above models share a generator that produces ID_1000, ID_1001, etc..
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.IdGenerator', {
|
|
|
|
/**
|
|
* @property {Boolean} isGenerator
|
|
* `true` in this class to identify an object as an instantiated IdGenerator, or subclass thereof.
|
|
*/
|
|
isGenerator: true,
|
|
|
|
/**
|
|
* Initializes a new instance.
|
|
* @param {Object} config (optional) Configuration object to be applied to the new instance.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
if (me.id) {
|
|
Ext.data.IdGenerator.all[me.id] = me;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} id
|
|
* The id by which to register a new instance. This instance can be found using the
|
|
* {@link Ext.data.IdGenerator#get} static method.
|
|
*/
|
|
|
|
getRecId: function (rec) {
|
|
return rec.modelName + '-' + rec.internalId;
|
|
},
|
|
|
|
/**
|
|
* Generates and returns the next id. This method must be implemented by the derived
|
|
* class.
|
|
*
|
|
* @return {String} The next id.
|
|
* @method generate
|
|
* @abstract
|
|
*/
|
|
|
|
statics: {
|
|
/**
|
|
* @property {Object} all
|
|
* This object is keyed by id to lookup instances.
|
|
* @private
|
|
* @static
|
|
*/
|
|
all: {},
|
|
|
|
/**
|
|
* Returns the IdGenerator given its config description.
|
|
* @param {String/Object} config If this parameter is an IdGenerator instance, it is
|
|
* simply returned. If this is a string, it is first used as an id for lookup and
|
|
* then, if there is no match, as a type to create a new instance. This parameter
|
|
* can also be a config object that contains a `type` property (among others) that
|
|
* are used to create and configure the instance.
|
|
* @static
|
|
*/
|
|
get: function (config) {
|
|
var generator,
|
|
id,
|
|
type;
|
|
|
|
if (typeof config == 'string') {
|
|
id = type = config;
|
|
config = null;
|
|
} else if (config.isGenerator) {
|
|
return config;
|
|
} else {
|
|
id = config.id || config.type;
|
|
type = config.type;
|
|
}
|
|
|
|
generator = this.all[id];
|
|
if (!generator) {
|
|
generator = Ext.create('idgen.' + type, config);
|
|
}
|
|
|
|
return generator;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.SortTypes
|
|
* This class defines a series of static methods that are used on a
|
|
* {@link Ext.data.Field} for performing sorting. The methods cast the
|
|
* underlying values into a data type that is appropriate for sorting on
|
|
* that particular field. If a {@link Ext.data.Field#type} is specified,
|
|
* the sortType will be set to a sane default if the sortType is not
|
|
* explicitly defined on the field. The sortType will make any necessary
|
|
* modifications to the value and return it.
|
|
* <ul>
|
|
* <li><b>asText</b> - Removes any tags and converts the value to a string</li>
|
|
* <li><b>asUCText</b> - Removes any tags and converts the value to an uppercase string</li>
|
|
* <li><b>asUCText</b> - Converts the value to an uppercase string</li>
|
|
* <li><b>asDate</b> - Converts the value into Unix epoch time</li>
|
|
* <li><b>asFloat</b> - Converts the value to a floating point number</li>
|
|
* <li><b>asInt</b> - Converts the value to an integer number</li>
|
|
* </ul>
|
|
* <p>
|
|
* It is also possible to create a custom sortType that can be used throughout
|
|
* an application.
|
|
* <pre><code>
|
|
Ext.apply(Ext.data.SortTypes, {
|
|
asPerson: function(person){
|
|
// expects an object with a first and last name property
|
|
return person.lastName.toUpperCase() + person.firstName.toLowerCase();
|
|
}
|
|
});
|
|
|
|
Ext.define('Employee', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [{
|
|
name: 'person',
|
|
sortType: 'asPerson'
|
|
}, {
|
|
name: 'salary',
|
|
type: 'float' // sortType set to asFloat
|
|
}]
|
|
});
|
|
* </code></pre>
|
|
* </p>
|
|
* @singleton
|
|
* @docauthor Evan Trimboli <evan@sencha.com>
|
|
*/
|
|
Ext.define('Ext.data.SortTypes', {
|
|
|
|
singleton: true,
|
|
|
|
/**
|
|
* Default sort that does nothing
|
|
* @param {Object} s The value being converted
|
|
* @return {Object} The comparison value
|
|
*/
|
|
none : Ext.identityFn,
|
|
|
|
/**
|
|
* The regular expression used to strip tags
|
|
* @type {RegExp}
|
|
* @property
|
|
*/
|
|
stripTagsRE : /<\/?[^>]+>/gi,
|
|
|
|
/**
|
|
* Strips all HTML tags to sort on text only
|
|
* @param {Object} s The value being converted
|
|
* @return {String} The comparison value
|
|
*/
|
|
asText : function(s) {
|
|
return String(s).replace(this.stripTagsRE, "");
|
|
},
|
|
|
|
/**
|
|
* Strips all HTML tags to sort on text only - Case insensitive
|
|
* @param {Object} s The value being converted
|
|
* @return {String} The comparison value
|
|
*/
|
|
asUCText : function(s) {
|
|
return String(s).toUpperCase().replace(this.stripTagsRE, "");
|
|
},
|
|
|
|
/**
|
|
* Case insensitive string
|
|
* @param {Object} s The value being converted
|
|
* @return {String} The comparison value
|
|
*/
|
|
asUCString : function(s) {
|
|
return String(s).toUpperCase();
|
|
},
|
|
|
|
/**
|
|
* Date sorting
|
|
* @param {Object} s The value being converted
|
|
* @return {Number} The comparison value
|
|
*/
|
|
asDate : function(s) {
|
|
if(!s){
|
|
return 0;
|
|
}
|
|
if(Ext.isDate(s)){
|
|
return s.getTime();
|
|
}
|
|
return Date.parse(String(s));
|
|
},
|
|
|
|
/**
|
|
* Float sorting
|
|
* @param {Object} s The value being converted
|
|
* @return {Number} The comparison value
|
|
*/
|
|
asFloat : function(s) {
|
|
var val = parseFloat(String(s).replace(/,/g, ""));
|
|
return isNaN(val) ? 0 : val;
|
|
},
|
|
|
|
/**
|
|
* Integer sorting
|
|
* @param {Object} s The value being converted
|
|
* @return {Number} The comparison value
|
|
*/
|
|
asInt : function(s) {
|
|
var val = parseInt(String(s).replace(/,/g, ""), 10);
|
|
return isNaN(val) ? 0 : val;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This is a static class containing the system-supplied data types
|
|
* which may be given to a {@link Ext.data.Field Field}.
|
|
*
|
|
* The properties in this class are used as type indicators in the
|
|
* {@link Ext.data.Field Field} class, so to test whether a Field is
|
|
* of a certain type, compare the {@link Ext.data.Field#type type}
|
|
* property against properties of this class.
|
|
*
|
|
* Developers may add their own application-specific data types to
|
|
* this class. Definition names must be UPPERCASE. Each type
|
|
* definition must contain three properties:
|
|
*
|
|
* - `convert` : Function<br>
|
|
* A function to convert raw data values from a data block into
|
|
* the data to be stored in the Field. The function is passed the
|
|
* collowing parameters:
|
|
*
|
|
* - **v** : Mixed<br>
|
|
* The data value as read by the Reader, if undefined will use
|
|
* the configured {@link Ext.data.Field#defaultValue defaultValue}.
|
|
* - **rec** : Mixed<br>
|
|
* The data object containing the row as read by the Reader.
|
|
* Depending on the Reader type, this could be an Array
|
|
* ({@link Ext.data.reader.Array ArrayReader}), an object
|
|
* ({@link Ext.data.reader.Json JsonReader}), or an XML element.
|
|
*
|
|
* - `sortType` : Function<br>
|
|
* A function to convert the stored data into comparable form, as
|
|
* defined by {@link Ext.data.SortTypes}.
|
|
*
|
|
* - `type` : String<br>
|
|
* A textual data type name.
|
|
*
|
|
* For example, to create a VELatLong field (See the Microsoft Bing
|
|
* Mapping API) containing the latitude/longitude value of a datapoint
|
|
* on a map from a JsonReader data block
|
|
*
|
|
* which contained the properties `lat` and `long`, you would define a
|
|
* new data type like this:
|
|
*
|
|
* // Add a new Field data type which stores a VELatLong object in the Record.
|
|
* Ext.data.Types.VELATLONG = {
|
|
* convert: function(v, data) {
|
|
* return new VELatLong(data.lat, data.long);
|
|
* },
|
|
* sortType: function(v) {
|
|
* return v.Latitude; // When sorting, order by latitude
|
|
* },
|
|
* type: 'VELatLong'
|
|
* };
|
|
*
|
|
* Then, when declaring a Model, use:
|
|
*
|
|
* var types = Ext.data.Types; // allow shorthand type access
|
|
* Ext.define('Unit',
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* { name: 'unitName', mapping: 'UnitName' },
|
|
* { name: 'curSpeed', mapping: 'CurSpeed', type: types.INT },
|
|
* { name: 'latitude', mapping: 'lat', type: types.FLOAT },
|
|
* { name: 'longitude', mapping: 'long', type: types.FLOAT },
|
|
* { name: 'position', type: types.VELATLONG }
|
|
* ]
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.Types', {
|
|
singleton: true
|
|
|
|
}, function() {
|
|
var st = Ext.data.SortTypes;
|
|
|
|
Ext.apply(Ext.data.Types, {
|
|
/**
|
|
* @property {RegExp} stripRe
|
|
* A regular expression for stripping non-numeric characters from a numeric value.
|
|
* This should be overridden for localization.
|
|
*/
|
|
stripRe: /[\$,%]/g,
|
|
|
|
/**
|
|
* @property {Object} AUTO
|
|
* This data type means that no conversion is applied to the raw data before it is placed into a Record.
|
|
*/
|
|
AUTO: {
|
|
sortType: st.none,
|
|
type: 'auto'
|
|
},
|
|
|
|
/**
|
|
* @property {Object} STRING
|
|
* This data type means that the raw data is converted into a String before it is placed into a Record.
|
|
*/
|
|
STRING: {
|
|
convert: function(v) {
|
|
var defaultValue = this.useNull ? null : '';
|
|
return (v === undefined || v === null) ? defaultValue : String(v);
|
|
},
|
|
sortType: st.asUCString,
|
|
type: 'string'
|
|
},
|
|
|
|
/**
|
|
* @property {Object} INT
|
|
* This data type means that the raw data is converted into an integer before it is placed into a Record.
|
|
*
|
|
* The synonym `INTEGER` is equivalent.
|
|
*/
|
|
INT: {
|
|
convert: function(v) {
|
|
// Handle values which are already numbers.
|
|
// Value truncation behaviour of parseInt is historic and must be maintained.
|
|
// parseInt(35.9) and parseInt("35.9") returns 35
|
|
if (typeof v == 'number') {
|
|
return parseInt(v);
|
|
}
|
|
return v !== undefined && v !== null && v !== '' ?
|
|
parseInt(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);
|
|
},
|
|
sortType: st.none,
|
|
type: 'int'
|
|
},
|
|
|
|
/**
|
|
* @property {Object} FLOAT
|
|
* This data type means that the raw data is converted into a number before it is placed into a Record.
|
|
*
|
|
* The synonym `NUMBER` is equivalent.
|
|
*/
|
|
FLOAT: {
|
|
convert: function(v) {
|
|
if (typeof v === 'number') {
|
|
return v;
|
|
}
|
|
return v !== undefined && v !== null && v !== '' ?
|
|
parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);
|
|
},
|
|
sortType: st.none,
|
|
type: 'float'
|
|
},
|
|
|
|
/**
|
|
* @property {Object} BOOL
|
|
* This data type means that the raw data is converted into a boolean before it is placed into
|
|
* a Record. The string "true" and the number 1 are converted to boolean true.
|
|
*
|
|
* The synonym `BOOLEAN` is equivalent.
|
|
*/
|
|
BOOL: {
|
|
convert: function(v) {
|
|
if (typeof v === 'boolean') {
|
|
return v;
|
|
}
|
|
if (this.useNull && (v === undefined || v === null || v === '')) {
|
|
return null;
|
|
}
|
|
return v === 'true' || v == 1;
|
|
},
|
|
sortType: st.none,
|
|
type: 'bool'
|
|
},
|
|
|
|
/**
|
|
* @property {Object} DATE
|
|
* This data type means that the raw data is converted into a Date before it is placed into a Record.
|
|
* The date format is specified in the constructor of the {@link Ext.data.Field} to which this type is
|
|
* being applied.
|
|
*/
|
|
DATE: {
|
|
convert: function(v) {
|
|
var df = this.dateReadFormat || this.dateFormat,
|
|
parsed;
|
|
|
|
if (!v) {
|
|
return null;
|
|
}
|
|
// instanceof check ~10 times faster than Ext.isDate. Values here will not be cross-document objects
|
|
if (v instanceof Date) {
|
|
return v;
|
|
}
|
|
if (df) {
|
|
return Ext.Date.parse(v, df);
|
|
}
|
|
|
|
parsed = Date.parse(v);
|
|
return parsed ? new Date(parsed) : null;
|
|
},
|
|
sortType: st.asDate,
|
|
type: 'date'
|
|
}
|
|
});
|
|
|
|
Ext.apply(Ext.data.Types, {
|
|
/**
|
|
* @property {Object} BOOLEAN
|
|
* This data type means that the raw data is converted into a boolean before it is placed into
|
|
* a Record. The string "true" and the number 1 are converted to boolean `true`.
|
|
*
|
|
* The synonym `BOOL` is equivalent.
|
|
*/
|
|
BOOLEAN: this.BOOL,
|
|
|
|
/**
|
|
* @property {Object} INTEGER
|
|
* This data type means that the raw data is converted into an integer before it is placed into a Record.
|
|
*
|
|
* The synonym `INT` is equivalent.
|
|
*/
|
|
INTEGER: this.INT,
|
|
|
|
/**
|
|
* @property {Object} NUMBER
|
|
* This data type means that the raw data is converted into a number before it is placed into a Record.
|
|
*
|
|
* The synonym `FLOAT` is equivalent.
|
|
*/
|
|
NUMBER: this.FLOAT
|
|
});
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Fields are used to define what a Model is. They aren't instantiated directly - instead, when we create a class that
|
|
* extends {@link Ext.data.Model}, it will automatically create a Field instance for each field configured in a {@link
|
|
* Ext.data.Model Model}. For example, we might set up a model like this:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* 'name', 'email',
|
|
* {name: 'age', type: 'int'},
|
|
* {name: 'gender', type: 'string', defaultValue: 'Unknown'}
|
|
* ]
|
|
* });
|
|
*
|
|
* Four fields will have been created for the User Model - name, email, age and gender. Note that we specified a couple
|
|
* of different formats here; if we only pass in the string name of the field (as with name and email), the field is set
|
|
* up with the 'auto' type. It's as if we'd done this instead:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'name', type: 'auto'},
|
|
* {name: 'email', type: 'auto'},
|
|
* {name: 'age', type: 'int'},
|
|
* {name: 'gender', type: 'string', defaultValue: 'Unknown'}
|
|
* ]
|
|
* });
|
|
*
|
|
* # Types and conversion
|
|
*
|
|
* The {@link #type} is important - it's used to automatically convert data passed to the field into the correct format.
|
|
* In our example above, the name and email fields used the 'auto' type and will just accept anything that is passed
|
|
* into them. The 'age' field had an 'int' type however, so if we passed 25.4 this would be rounded to 25.
|
|
*
|
|
* Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can do
|
|
* this using a {@link #convert} function. Here, we're going to create a new field based on another:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {
|
|
* name: 'firstName',
|
|
* convert: function(value, record) {
|
|
* var fullName = record.get('name'),
|
|
* splits = fullName.split(" "),
|
|
* firstName = splits[0];
|
|
*
|
|
* return firstName;
|
|
* }
|
|
* },
|
|
* 'name', 'email',
|
|
* {name: 'age', type: 'int'},
|
|
* {name: 'gender', type: 'string', defaultValue: 'Unknown'}
|
|
* ]
|
|
* });
|
|
*
|
|
* Now when we create a new User, the firstName is populated automatically based on the name:
|
|
*
|
|
* var ed = Ext.create('User', {name: 'Ed Spencer'});
|
|
*
|
|
* console.log(ed.get('firstName')); //logs 'Ed', based on our convert function
|
|
*
|
|
* Fields which are configured with a custom ```convert``` function are read *after* all other fields
|
|
* when constructing and reading records, so that if convert functions rely on other, non-converted fields
|
|
* (as in this example), they can be sure of those fields being present.
|
|
*
|
|
* In fact, if we log out all of the data inside ed, we'll see this:
|
|
*
|
|
* console.log(ed.data);
|
|
*
|
|
* //outputs this:
|
|
* {
|
|
* age: 0,
|
|
* email: "",
|
|
* firstName: "Ed",
|
|
* gender: "Unknown",
|
|
* name: "Ed Spencer"
|
|
* }
|
|
*
|
|
* The age field has been given a default of zero because we made it an int type. As an auto field, email has defaulted
|
|
* to an empty string. When we registered the User model we set gender's {@link #defaultValue} to 'Unknown' so we see
|
|
* that now. Let's correct that and satisfy ourselves that the types work as we expect:
|
|
*
|
|
* ed.set('gender', 'Male');
|
|
* ed.get('gender'); //returns 'Male'
|
|
*
|
|
* ed.set('age', 25.4);
|
|
* ed.get('age'); //returns 25 - we wanted an int, not a float, so no decimal places allowed
|
|
*/
|
|
Ext.define('Ext.data.Field', {
|
|
|
|
alias: 'data.field',
|
|
|
|
isField: true,
|
|
|
|
constructor : function(config) {
|
|
var me = this,
|
|
types = Ext.data.Types,
|
|
st;
|
|
|
|
if (Ext.isString(config)) {
|
|
config = {name: config};
|
|
}
|
|
Ext.apply(me, config);
|
|
|
|
st = me.sortType;
|
|
|
|
if (me.type) {
|
|
if (Ext.isString(me.type)) {
|
|
me.type = types[me.type.toUpperCase()] || types.AUTO;
|
|
}
|
|
} else {
|
|
me.type = types.AUTO;
|
|
}
|
|
|
|
// named sortTypes are supported, here we look them up
|
|
if (Ext.isString(st)) {
|
|
me.sortType = Ext.data.SortTypes[st];
|
|
} else if(Ext.isEmpty(st)) {
|
|
me.sortType = me.type.sortType;
|
|
}
|
|
|
|
// Reference this type's default converter if we did not recieve one in configuration.
|
|
if (!config.hasOwnProperty('convert')) {
|
|
me.convert = me.type.convert; // this may be undefined (e.g., AUTO)
|
|
} else if (!me.convert && me.type.convert && !config.hasOwnProperty('defaultValue')) {
|
|
// If the converter has been nulled out, and we have not been configured
|
|
// with a field-specific defaultValue, then coerce the inherited defaultValue into our data type.
|
|
me.defaultValue = me.type.convert(me.defaultValue);
|
|
}
|
|
|
|
if (config.convert) {
|
|
me.hasCustomConvert = true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} name
|
|
*
|
|
* The name by which the field is referenced within the Model. This is referenced by, for example, the `dataIndex`
|
|
* property in column definition objects passed to {@link Ext.grid.property.HeaderContainer}.
|
|
*
|
|
* Note: In the simplest case, if no properties other than `name` are required, a field definition may consist of
|
|
* just a String for the field name.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} type
|
|
*
|
|
* The data type for automatic conversion from received data to the *stored* value if
|
|
* `{@link Ext.data.Field#convert convert}` has not been specified. This may be specified as a string value.
|
|
* Possible values are
|
|
*
|
|
* - auto (Default, implies no conversion)
|
|
* - string
|
|
* - int
|
|
* - float
|
|
* - boolean
|
|
* - date
|
|
*
|
|
* This may also be specified by referencing a member of the {@link Ext.data.Types} class.
|
|
*
|
|
* Developers may create their own application-specific data types by defining new members of the {@link
|
|
* Ext.data.Types} class.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} [convert]
|
|
*
|
|
* A function which converts the value provided by the Reader into an object that will be stored in the Model.
|
|
*
|
|
* If configured as `null`, then no conversion will be applied to the raw data property when this Field
|
|
* is read. This will increase performance. but you must ensure that the data is of the correct type and does
|
|
* not *need* converting.
|
|
*
|
|
* It is passed the following parameters:
|
|
*
|
|
* - **v** : Mixed
|
|
*
|
|
* The data value as read by the Reader, if undefined will use the configured `{@link Ext.data.Field#defaultValue
|
|
* defaultValue}`.
|
|
*
|
|
* - **rec** : Ext.data.Model
|
|
*
|
|
* The data object containing the Model as read so far by the Reader. Note that the Model may not be fully populated
|
|
* at this point as the fields are read in the order that they are defined in your
|
|
* {@link Ext.data.Model#cfg-fields fields} array.
|
|
*
|
|
* Example of convert functions:
|
|
*
|
|
* function fullName(v, record){
|
|
* return record.data.last + ', ' + record.data.first;
|
|
* }
|
|
*
|
|
* function location(v, record){
|
|
* return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);
|
|
* }
|
|
*
|
|
* Ext.define('Dude', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'fullname', convert: fullName},
|
|
* {name: 'firstname', mapping: 'name.first'},
|
|
* {name: 'lastname', mapping: 'name.last'},
|
|
* {name: 'city', defaultValue: 'homeless'},
|
|
* 'state',
|
|
* {name: 'location', convert: location}
|
|
* ]
|
|
* });
|
|
*
|
|
* // create the data store
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* reader: {
|
|
* type: 'json',
|
|
* model: 'Dude',
|
|
* idProperty: 'key',
|
|
* root: 'daRoot',
|
|
* totalProperty: 'total'
|
|
* }
|
|
* });
|
|
*
|
|
* var myData = [
|
|
* { key: 1,
|
|
* name: { first: 'Fat', last: 'Albert' }
|
|
* // notice no city, state provided in data object
|
|
* },
|
|
* { key: 2,
|
|
* name: { first: 'Barney', last: 'Rubble' },
|
|
* city: 'Bedrock', state: 'Stoneridge'
|
|
* },
|
|
* { key: 3,
|
|
* name: { first: 'Cliff', last: 'Claven' },
|
|
* city: 'Boston', state: 'MA'
|
|
* }
|
|
* ];
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} [serialize]
|
|
* A function which converts the Model's value for this Field into a form which can be used by whatever {@link Ext.data.writer.Writer Writer}
|
|
* is being used to sync data with the server.
|
|
*
|
|
* The function should return a string which represents the Field's value.
|
|
*
|
|
* It is passed the following parameters:
|
|
*
|
|
* - **v** : Mixed
|
|
*
|
|
* The Field's value - the value to be serialized.
|
|
*
|
|
* - **rec** : Ext.data.Model
|
|
*
|
|
* The record being serialized.
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} dateFormat
|
|
*
|
|
* Serves as a default for the {@link #dateReadFormat} and {@link #dateWriteFormat} config options. This
|
|
* will be used in place of those other configurations if not specified.
|
|
*
|
|
* 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 Ext.Date}.
|
|
*
|
|
* It is quite important to note that while this config is optional, it will default to using the base
|
|
* JavaScript Date object's `parse` function if not specified, rather than {@link Ext.Date#parse Ext.Date.parse}.
|
|
* This can cause unexpected issues, especially when converting between timezones, or when converting dates that
|
|
* do not have a timezone specified. The behavior of the native `Date.parse` is implementation-specific, and
|
|
* depending on the value of the date string, it might return the UTC date or the local date. __For this reason
|
|
* it is strongly recommended that you always specify an explicit date format when parsing dates.__
|
|
*/
|
|
dateFormat: null,
|
|
|
|
/**
|
|
* @cfg {String} dateReadFormat
|
|
* Used when converting received data into a Date when the {@link #type} is specified as `"date"`.
|
|
* This configuration takes precedence over {@link #dateFormat}.
|
|
* See {@link #dateFormat} for more information.
|
|
*/
|
|
dateReadFormat: null,
|
|
|
|
/**
|
|
* @cfg {String} dateWriteFormat
|
|
* Used to provide a custom format when serializing dates with a {@link Ext.data.writer.Writer}.
|
|
* If this is not specified, the {@link #dateFormat} will be used. See the {@link Ext.data.writer.Writer}
|
|
* docs for more information on writing dates.
|
|
*
|
|
* **Note that to use a {@link Ext.data.JsonWriter JsonWriter} to send Microsoft format "JSON" dates, which are in fact
|
|
* invalid JSON, it is not possible to use the standard date serialization pathway or
|
|
* {@link Ext#USE_NATIVE_JSON native browser JSON production}.**
|
|
*
|
|
* To use a {@link Ext.data.JsonWriter JsonWriter} to write dates in a JSON packet in the form `"\/Date(1357372800000)\/"`
|
|
* configure the field like this:
|
|
*
|
|
* {
|
|
* type: 'date',
|
|
* dateFormat: 'MS', // To parse incoming dates from server correctly
|
|
* serialize: Ext.identityFn // An ExtJS-supplied function which returns the arg unchanged
|
|
* }
|
|
*
|
|
* Then override ExtJS's JSON date serialize function:
|
|
*
|
|
* Ext.JSON.encodeDate = function (d) {
|
|
* return '"' + Ext.Date.format(d, 'MS') + '"';
|
|
* };
|
|
*/
|
|
dateWriteFormat: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} useNull
|
|
*
|
|
* Use when converting received data into a INT, FLOAT, BOOL or STRING type. If the value cannot be
|
|
* parsed, `null` will be used if useNull is true, otherwise a default value for that type will be used:
|
|
*
|
|
* - for INT and FLOAT - `0`.
|
|
* - for STRING - `""`.
|
|
* - for BOOL - `false`.
|
|
*
|
|
* Note that when parsing of DATE type fails, the value will be `null` regardless of this setting.
|
|
*/
|
|
useNull: false,
|
|
|
|
/**
|
|
* @cfg {Object} [defaultValue=""]
|
|
*
|
|
* The default value used when the creating an instance from a raw data object, and the property referenced by the
|
|
* `{@link Ext.data.Field#mapping mapping}` does not exist in that data object.
|
|
*
|
|
* May be specified as `undefined` to prevent defaulting in a value.
|
|
*/
|
|
defaultValue: "",
|
|
|
|
/**
|
|
* @cfg {String/Number} mapping
|
|
*
|
|
* (Optional) A path expression for use by the {@link Ext.data.reader.Reader} implementation that is creating the
|
|
* {@link Ext.data.Model Model} to extract the Field value from the data object. If the path expression is the same
|
|
* as the field name, the mapping may be omitted.
|
|
*
|
|
* The form of the mapping expression depends on the Reader being used.
|
|
*
|
|
* - {@link Ext.data.reader.Json}
|
|
*
|
|
* The mapping is a string containing the javascript expression to reference the data from an element of the data
|
|
* item's {@link Ext.data.reader.Json#cfg-root root} Array. Defaults to the field name.
|
|
*
|
|
* - {@link Ext.data.reader.Xml}
|
|
*
|
|
* The mapping is an {@link Ext.DomQuery} path to the data item relative to the DOM element that represents the
|
|
* {@link Ext.data.reader.Xml#record record}. Defaults to the field name.
|
|
*
|
|
* - {@link Ext.data.reader.Array}
|
|
*
|
|
* The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's
|
|
* Array position.
|
|
*
|
|
* If a more complex value extraction strategy is required, then configure the Field with a {@link #convert}
|
|
* function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to
|
|
* return the desired data.
|
|
*/
|
|
mapping: null,
|
|
|
|
/**
|
|
* @cfg {Function/String} sortType
|
|
*
|
|
* A function which converts a Field's value to a comparable value in order to ensure correct sort ordering.
|
|
* Predefined functions are provided in {@link Ext.data.SortTypes}. A custom sort example:
|
|
*
|
|
* // current sort after sort we want
|
|
* // +-+------+ +-+------+
|
|
* // |1|First | |1|First |
|
|
* // |2|Last | |3|Second|
|
|
* // |3|Second| |2|Last |
|
|
* // +-+------+ +-+------+
|
|
*
|
|
* sortType: function(value) {
|
|
* switch (value.toLowerCase()) // native toLowerCase():
|
|
* {
|
|
* case 'first': return 1;
|
|
* case 'second': return 2;
|
|
* default: return 3;
|
|
* }
|
|
* }
|
|
*
|
|
* May also be set to a String value, corresponding to one of the named sort types in {@link Ext.data.SortTypes}.
|
|
*/
|
|
sortType : null,
|
|
|
|
/**
|
|
* @cfg {String} sortDir
|
|
*
|
|
* Initial direction to sort (`"ASC"` or `"DESC"`). Defaults to `"ASC"`.
|
|
*/
|
|
sortDir : "ASC",
|
|
|
|
/**
|
|
* @cfg {Boolean} allowBlank
|
|
* @private
|
|
*
|
|
* Used for validating a {@link Ext.data.Model model}. Defaults to true. An empty value here will cause
|
|
* {@link Ext.data.Model}.{@link Ext.data.Model#isValid isValid} to evaluate to false.
|
|
*/
|
|
allowBlank : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} persist
|
|
*
|
|
* False to exclude this field from the {@link Ext.data.Model#modified} fields in a model. This will also exclude
|
|
* the field from being written using a {@link Ext.data.writer.Writer}. This option is useful when model fields are
|
|
* used to keep state on the client but do not need to be persisted to the server. Defaults to true.
|
|
*/
|
|
persist: true
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.data.Errors
|
|
*
|
|
* <p>Wraps a collection of validation error responses and provides convenient functions for
|
|
* accessing and errors for specific fields.</p>
|
|
*
|
|
* <p>Usually this class does not need to be instantiated directly - instances are instead created
|
|
* automatically when {@link Ext.data.Model#validate validate} on a model instance:</p>
|
|
*
|
|
<pre><code>
|
|
//validate some existing model instance - in this case it returned 2 failures messages
|
|
var errors = myModel.validate();
|
|
|
|
errors.isValid(); //false
|
|
|
|
errors.length; //2
|
|
errors.getByField('name'); // [{field: 'name', message: 'must be present'}]
|
|
errors.getByField('title'); // [{field: 'title', message: 'is too short'}]
|
|
</code></pre>
|
|
*/
|
|
Ext.define('Ext.data.Errors', {
|
|
extend: Ext.util.MixedCollection ,
|
|
|
|
/**
|
|
* Returns true if there are no errors in the collection
|
|
* @return {Boolean}
|
|
*/
|
|
isValid: function() {
|
|
return this.length === 0;
|
|
},
|
|
|
|
/**
|
|
* Returns all of the errors for the given field
|
|
* @param {String} fieldName The field to get errors for
|
|
* @return {Object[]} All errors for the given field
|
|
*/
|
|
getByField: function(fieldName) {
|
|
var errors = [],
|
|
error, i;
|
|
|
|
for (i = 0; i < this.length; i++) {
|
|
error = this.items[i];
|
|
|
|
if (error.field == fieldName) {
|
|
errors.push(error);
|
|
}
|
|
}
|
|
|
|
return errors;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* This singleton contains a set of validation functions that can be used to validate any type of data. They are most
|
|
* often used in {@link Ext.data.Model Models}, where they are automatically set up and executed.
|
|
*/
|
|
Ext.define('Ext.data.validations', {
|
|
singleton: true,
|
|
|
|
/**
|
|
* @property {String} presenceMessage
|
|
* The default error message used when a presence validation fails.
|
|
*/
|
|
presenceMessage: 'must be present',
|
|
|
|
/**
|
|
* @property {String} lengthMessage
|
|
* The default error message used when a length validation fails.
|
|
*/
|
|
lengthMessage: 'is the wrong length',
|
|
|
|
/**
|
|
* @property {String} formatMessage
|
|
* The default error message used when a format validation fails.
|
|
*/
|
|
formatMessage: 'is the wrong format',
|
|
|
|
/**
|
|
* @property {String} inclusionMessage
|
|
* The default error message used when an inclusion validation fails.
|
|
*/
|
|
inclusionMessage: 'is not included in the list of acceptable values',
|
|
|
|
/**
|
|
* @property {String} exclusionMessage
|
|
* The default error message used when an exclusion validation fails.
|
|
*/
|
|
exclusionMessage: 'is not an acceptable value',
|
|
|
|
/**
|
|
* @property {String} emailMessage
|
|
* The default error message used when an email validation fails
|
|
*/
|
|
emailMessage: 'is not a valid email address',
|
|
|
|
/**
|
|
* @property {RegExp} emailRe
|
|
* The regular expression used to validate email addresses
|
|
*/
|
|
emailRe: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
|
|
|
|
/**
|
|
* Validates that the given value is present.
|
|
* For example:
|
|
*
|
|
* validations: [{type: 'presence', field: 'age'}]
|
|
*
|
|
* @param {Object} config Config object
|
|
* @param {Object} value The value to validate
|
|
* @return {Boolean} True if validation passed
|
|
*/
|
|
presence: function(config, value) {
|
|
// No configs read, so allow just value to be passed
|
|
if (arguments.length === 1) {
|
|
value = config;
|
|
}
|
|
|
|
//we need an additional check for zero here because zero is an acceptable form of present data
|
|
return !!value || value === 0 || value === false;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the given value is between the configured min and max values.
|
|
* For example:
|
|
*
|
|
* validations: [{type: 'length', field: 'name', min: 2}]
|
|
*
|
|
* @param {Object} config Config object
|
|
* @param {String} value The value to validate
|
|
* @return {Boolean} True if the value passes validation
|
|
*/
|
|
length: function(config, value) {
|
|
if (value === undefined || value === null) {
|
|
return false;
|
|
}
|
|
|
|
var length = value.length,
|
|
min = config.min,
|
|
max = config.max;
|
|
|
|
if ((min && length < min) || (max && length > max)) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Validates that an email string is in the correct format
|
|
* @param {Object} config Config object
|
|
* @param {String} email The email address
|
|
* @return {Boolean} True if the value passes validation
|
|
*/
|
|
email: function(config, email) {
|
|
return Ext.data.validations.emailRe.test(email);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the given value passes validation against the configured `matcher` regex.
|
|
* For example:
|
|
*
|
|
* validations: [{type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}]
|
|
*
|
|
* @param {Object} config Config object
|
|
* @param {String} value The value to validate
|
|
* @return {Boolean} True if the value passes the format validation
|
|
*/
|
|
format: function(config, value) {
|
|
return !!(config.matcher && config.matcher.test(value));
|
|
},
|
|
|
|
/**
|
|
* Validates that the given value is present in the configured `list`.
|
|
* For example:
|
|
*
|
|
* validations: [{type: 'inclusion', field: 'gender', list: ['Male', 'Female']}]
|
|
*
|
|
* @param {Object} config Config object
|
|
* @param {String} value The value to validate
|
|
* @return {Boolean} True if the value is present in the list
|
|
*/
|
|
inclusion: function(config, value) {
|
|
return config.list && Ext.Array.indexOf(config.list,value) != -1;
|
|
},
|
|
|
|
/**
|
|
* Validates that the given value is not present in the configured `list`.
|
|
* For example:
|
|
*
|
|
* validations: [{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']}]
|
|
*
|
|
* @param {Object} config Config object
|
|
* @param {String} value The value to validate
|
|
* @return {Boolean} True if the value is not present in the list
|
|
*/
|
|
exclusion: function(config, value) {
|
|
return config.list && Ext.Array.indexOf(config.list,value) == -1;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* A Model represents some object that your application manages. For example, one might define a Model for Users,
|
|
* Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the
|
|
* {@link Ext.ModelManager model manager}, and are used by {@link Ext.data.Store stores}, which are in turn used by many
|
|
* of the data-bound components in Ext.
|
|
*
|
|
* Models are defined as a set of fields and any arbitrary methods and properties relevant to the model. For example:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'name', type: 'string'},
|
|
* {name: 'age', type: 'int', convert: null},
|
|
* {name: 'phone', type: 'string'},
|
|
* {name: 'alive', type: 'boolean', defaultValue: true, convert: null}
|
|
* ],
|
|
*
|
|
* changeName: function() {
|
|
* var oldName = this.get('name'),
|
|
* newName = oldName + " The Barbarian";
|
|
*
|
|
* this.set('name', newName);
|
|
* }
|
|
* });
|
|
*
|
|
* The fields array is turned into a {@link Ext.util.MixedCollection MixedCollection} automatically by the {@link
|
|
* Ext.ModelManager ModelManager}, and all other functions and properties are copied to the new Model's prototype.
|
|
*
|
|
* A Model definition always has an *identifying field* which should yield a unique key for each instance. By default, a field
|
|
* named "id" will be created with a {@link Ext.data.Field#mapping mapping} of "id". This happens because of the default
|
|
* {@link #idProperty} provided in Model definitions.
|
|
*
|
|
* To alter which field is the identifying field, use the {@link #idProperty} config.
|
|
*
|
|
* If the Model should not have any identifying field (for example if you are defining ab abstract base class for your
|
|
* application models), configure the {@liknk #idProperty} as `null`.
|
|
*
|
|
* By default, the built in numeric and boolean field types have a {@link Ext.data.Field#convert} function which coerces string
|
|
* values in raw data into the field's type. For better performance with {@link Ext.data.reader.Json Json} or {@link Ext.data.reader.Array Array}
|
|
* readers *if you are in control of the data fed into this Model*, you can null out the default convert function which will cause
|
|
* the raw property to be copied directly into the Field's value.
|
|
*
|
|
* Now we can create instances of our User model and call any model logic we defined:
|
|
*
|
|
* var user = Ext.create('User', {
|
|
* id : 'ABCD12345',
|
|
* name : 'Conan',
|
|
* age : 24,
|
|
* phone: '555-555-5555'
|
|
* });
|
|
*
|
|
* user.changeName();
|
|
* user.get('name'); //returns "Conan The Barbarian"
|
|
*
|
|
* # Validations
|
|
*
|
|
* Models have built-in support for validations, which are executed against the validator functions in {@link
|
|
* Ext.data.validations} ({@link Ext.data.validations see all validation functions}). Validations are easy to add to
|
|
* models:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'name', type: 'string'},
|
|
* {name: 'age', type: 'int'},
|
|
* {name: 'phone', type: 'string'},
|
|
* {name: 'gender', type: 'string'},
|
|
* {name: 'username', type: 'string'},
|
|
* {name: 'alive', type: 'boolean', defaultValue: true}
|
|
* ],
|
|
*
|
|
* validations: [
|
|
* {type: 'presence', field: 'age'},
|
|
* {type: 'length', field: 'name', min: 2},
|
|
* {type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
|
|
* {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
|
|
* {type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
|
|
* ]
|
|
* });
|
|
*
|
|
* The validations can be run by simply calling the {@link #validate} function, which returns a {@link Ext.data.Errors}
|
|
* object:
|
|
*
|
|
* var instance = Ext.create('User', {
|
|
* name: 'Ed',
|
|
* gender: 'Male',
|
|
* username: 'edspencer'
|
|
* });
|
|
*
|
|
* var errors = instance.validate();
|
|
*
|
|
* # Associations
|
|
*
|
|
* Models can have associations with other Models via {@link Ext.data.association.HasOne},
|
|
* {@link Ext.data.association.BelongsTo belongsTo} and {@link Ext.data.association.HasMany hasMany} associations.
|
|
* For example, let's say we're writing a blog administration application which deals with Users, Posts and Comments.
|
|
* We can express the relationships between these models like this:
|
|
*
|
|
* Ext.define('Post', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'user_id'],
|
|
*
|
|
* belongsTo: 'User',
|
|
* hasMany : {model: 'Comment', name: 'comments'}
|
|
* });
|
|
*
|
|
* Ext.define('Comment', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'user_id', 'post_id'],
|
|
*
|
|
* belongsTo: 'Post'
|
|
* });
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id'],
|
|
*
|
|
* hasMany: [
|
|
* 'Post',
|
|
* {model: 'Comment', name: 'comments'}
|
|
* ]
|
|
* });
|
|
*
|
|
* See the docs for {@link Ext.data.association.HasOne}, {@link Ext.data.association.BelongsTo} and
|
|
* {@link Ext.data.association.HasMany} for details on the usage and configuration of associations.
|
|
* Note that associations can also be specified like this:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id'],
|
|
*
|
|
* associations: [
|
|
* {type: 'hasMany', model: 'Post', name: 'posts'},
|
|
* {type: 'hasMany', model: 'Comment', name: 'comments'}
|
|
* ]
|
|
* });
|
|
*
|
|
* # Using a Proxy
|
|
*
|
|
* Models are great for representing types of data and relationships, but sooner or later we're going to want to load or
|
|
* save that data somewhere. All loading and saving of data is handled via a {@link Ext.data.proxy.Proxy Proxy}, which
|
|
* can be set directly on the Model:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email'],
|
|
*
|
|
* proxy: {
|
|
* type: 'rest',
|
|
* url : '/users'
|
|
* }
|
|
* });
|
|
*
|
|
* Here we've set up a {@link Ext.data.proxy.Rest Rest Proxy}, which knows how to load and save data to and from a
|
|
* RESTful backend. Let's see how this works:
|
|
*
|
|
* var user = Ext.create('User', {name: 'Ed Spencer', email: 'ed@sencha.com'});
|
|
*
|
|
* user.save(); //POST /users
|
|
*
|
|
* Calling {@link #save} on the new Model instance tells the configured RestProxy that we wish to persist this Model's
|
|
* data onto our server. RestProxy figures out that this Model hasn't been saved before because it doesn't have an id,
|
|
* and performs the appropriate action - in this case issuing a POST request to the url we configured (/users). We
|
|
* configure any Proxy on any Model and always follow this API - see {@link Ext.data.proxy.Proxy} for a full list.
|
|
*
|
|
* Loading data via the Proxy is equally easy:
|
|
*
|
|
* //get a reference to the User model class
|
|
* var User = Ext.ModelManager.getModel('User');
|
|
*
|
|
* //Uses the configured RestProxy to make a GET request to /users/123
|
|
* User.load(123, {
|
|
* success: function(user) {
|
|
* console.log(user.getId()); //logs 123
|
|
* }
|
|
* });
|
|
*
|
|
* Models can also be updated and destroyed easily:
|
|
*
|
|
* //the user Model we loaded in the last snippet:
|
|
* user.set('name', 'Edward Spencer');
|
|
*
|
|
* //tells the Proxy to save the Model. In this case it will perform a PUT request to /users/123 as this Model already has an id
|
|
* user.save({
|
|
* success: function() {
|
|
* console.log('The User was updated');
|
|
* }
|
|
* });
|
|
*
|
|
* //tells the Proxy to destroy the Model. Performs a DELETE request to /users/123
|
|
* user.destroy({
|
|
* success: function() {
|
|
* console.log('The User was destroyed!');
|
|
* }
|
|
* });
|
|
*
|
|
* # Usage in Stores
|
|
*
|
|
* It is very common to want to load a set of Model instances to be displayed and manipulated in the UI. We do this by
|
|
* creating a {@link Ext.data.Store Store}:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User'
|
|
* });
|
|
*
|
|
* //uses the Proxy we set up on Model to load the Store data
|
|
* store.load();
|
|
*
|
|
* A Store is just a collection of Model instances - usually loaded from a server somewhere. Store can also maintain a
|
|
* set of added, updated and removed Model instances to be synchronized with the server via the Proxy. See the {@link
|
|
* Ext.data.Store Store docs} for more information on Stores.
|
|
*/
|
|
Ext.define('Ext.data.Model', {
|
|
alternateClassName: 'Ext.data.Record',
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
compareConvertFields: function(f1, f2) {
|
|
var f1SpecialConvert = f1.convert && f1.type && f1.convert !== f1.type.convert,
|
|
f2SpecialConvert = f2.convert && f2.type && f2.convert !== f2.type.convert;
|
|
|
|
if (f1SpecialConvert && !f2SpecialConvert) {
|
|
return 1;
|
|
}
|
|
|
|
if (!f1SpecialConvert && f2SpecialConvert) {
|
|
return -1;
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
itemNameFn: function(item) {
|
|
return item.name;
|
|
},
|
|
|
|
onClassExtended: function(cls, data, hooks) {
|
|
var onBeforeClassCreated = hooks.onBeforeCreated;
|
|
|
|
hooks.onBeforeCreated = function(cls, data) {
|
|
var me = this,
|
|
name = Ext.getClassName(cls),
|
|
prototype = cls.prototype,
|
|
superCls = cls.prototype.superclass,
|
|
|
|
validations = data.validations || [],
|
|
fields = data.fields || [],
|
|
field,
|
|
associationsConfigs = data.associations || [],
|
|
addAssociations = function(items, type) {
|
|
var i = 0,
|
|
len,
|
|
item;
|
|
|
|
if (items) {
|
|
items = Ext.Array.from(items);
|
|
|
|
for (len = items.length; i < len; ++i) {
|
|
item = items[i];
|
|
|
|
if (!Ext.isObject(item)) {
|
|
item = {model: item};
|
|
}
|
|
|
|
item.type = type;
|
|
associationsConfigs.push(item);
|
|
}
|
|
}
|
|
},
|
|
idgen = data.idgen,
|
|
|
|
fieldsMixedCollection = new Ext.util.MixedCollection(false, prototype.itemNameFn),
|
|
|
|
associationsMixedCollection = new Ext.util.MixedCollection(false, prototype.itemNameFn),
|
|
|
|
superValidations = superCls.validations,
|
|
superFields = superCls.fields,
|
|
superAssociations = superCls.associations,
|
|
|
|
associationConfig, i, ln,
|
|
dependencies = [],
|
|
|
|
// Use the idProperty from the configuration if there is one, else fall back to the default from the prototype
|
|
idProperty = 'idProperty' in data ? data.idProperty : prototype.idProperty,
|
|
|
|
// If an idProperty was specified, we create an idField
|
|
idField = idProperty ? (idProperty.isField ? idProperty : new Ext.data.Field(idProperty)) : null,
|
|
|
|
// Set if there is a Field in the defined fields which encapsulates the idProperty
|
|
idFieldDefined = false,
|
|
|
|
// Process each Field upon add into the collection
|
|
onFieldAddReplace = function(arg0, arg1, arg2) {
|
|
var newField,
|
|
pos;
|
|
|
|
if (fieldsMixedCollection.events.add.firing) {
|
|
// Add event signature is (position, value, key);
|
|
pos = arg0;
|
|
newField = arg1;
|
|
} else {
|
|
// Replace event signature is (key, oldValue, newValue);
|
|
newField = arg2;
|
|
pos = arg1.originalIndex;
|
|
}
|
|
|
|
// Set the originalIndex for ArrayReader to get the default mapping from in case
|
|
// compareConvertFields changes the order due to some fields having custom convert functions.
|
|
newField.originalIndex = pos;
|
|
|
|
// If a defined Field encapsulates the idProperty, then we do not have to create a separate identifying field.
|
|
// Also, this field must never have a default value set if no value arrives from the server side.
|
|
// So override any possible prototype-provided defaultValue with undefined which will inhibit generation of defaulting code in Reader.buildRecordDataExtractor
|
|
if (idField && ((newField.mapping && (newField.mapping === idField.mapping)) || (newField.name === idField.name))) {
|
|
prototype.idField = newField;
|
|
idFieldDefined = true;
|
|
newField.defaultValue = undefined;
|
|
}
|
|
},
|
|
|
|
// The configured Proxy if any. If there is none, we may inherit one from the superclass, or fall back to the defaultProxyType
|
|
clsProxy = data.proxy,
|
|
|
|
// Sort upon add function to be used in case of dynamically added Fields
|
|
fieldConvertSortFn = function() {
|
|
fieldsMixedCollection.sortBy(prototype.compareConvertFields);
|
|
};
|
|
|
|
// Save modelName on class and its prototype
|
|
cls.modelName = name;
|
|
prototype.modelName = name;
|
|
|
|
// Merge the validations of the superclass and the new subclass
|
|
if (superValidations) {
|
|
validations = superValidations.concat(validations);
|
|
}
|
|
|
|
data.validations = validations;
|
|
|
|
// Merge the fields of the superclass and the new subclass
|
|
if (superFields) {
|
|
fields = superFields.items.concat(fields);
|
|
}
|
|
|
|
fieldsMixedCollection.on({
|
|
add: onFieldAddReplace,
|
|
replace: onFieldAddReplace
|
|
});
|
|
|
|
for (i = 0, ln = fields.length; i < ln; ++i) {
|
|
field = fields[i];
|
|
fieldsMixedCollection.add(field.isField ? field : new Ext.data.Field(field));
|
|
}
|
|
|
|
// If there was an idProperty specified, and there has *not* been a field defined which encapsulates that property,
|
|
// then create a field which encapsulates that property.
|
|
// This must never provide a default value.
|
|
if (idField && !idFieldDefined) {
|
|
prototype.idField = idField;
|
|
idField.defaultValue = undefined;
|
|
fieldsMixedCollection.add(idField);
|
|
}
|
|
|
|
// Ensure the Fields are on correct order: Fields with custom convert function last
|
|
fieldConvertSortFn();
|
|
fieldsMixedCollection.on({
|
|
add: fieldConvertSortFn,
|
|
replace: fieldConvertSortFn
|
|
});
|
|
|
|
data.fields = fieldsMixedCollection;
|
|
|
|
if (idgen) {
|
|
data.idgen = Ext.data.IdGenerator.get(idgen);
|
|
}
|
|
|
|
//associations can be specified in the more convenient format (e.g. not inside an 'associations' array).
|
|
//we support that here
|
|
addAssociations(data.belongsTo, 'belongsTo');
|
|
delete data.belongsTo;
|
|
addAssociations(data.hasMany, 'hasMany');
|
|
delete data.hasMany;
|
|
addAssociations(data.hasOne, 'hasOne');
|
|
delete data.hasOne;
|
|
|
|
if (superAssociations) {
|
|
associationsConfigs = superAssociations.items.concat(associationsConfigs);
|
|
}
|
|
|
|
for (i = 0, ln = associationsConfigs.length; i < ln; ++i) {
|
|
dependencies.push('association.' + associationsConfigs[i].type.toLowerCase());
|
|
}
|
|
|
|
// If we have been configured with a proxy *configuration* (not a full Proxy), push it onto our dependency requirements
|
|
if (clsProxy) {
|
|
if (!clsProxy.isProxy) {
|
|
dependencies.push('proxy.' + (clsProxy.type || clsProxy));
|
|
}
|
|
}
|
|
// Not inheriting a proxy, push the defaultProxyType onto our dependency requirements, and set the
|
|
// proxy type for instantiation later.
|
|
else if (!cls.prototype.proxy) {
|
|
cls.prototype.proxy = cls.prototype.defaultProxyType;
|
|
dependencies.push('proxy.' + cls.prototype.defaultProxyType);
|
|
}
|
|
|
|
Ext.require(dependencies, function() {
|
|
Ext.ModelManager.registerType(name, cls);
|
|
|
|
for (i = 0, ln = associationsConfigs.length; i < ln; ++i) {
|
|
associationConfig = associationsConfigs[i];
|
|
if (associationConfig.isAssociation) {
|
|
associationConfig = Ext.applyIf({
|
|
ownerModel: name,
|
|
associatedModel: associationConfig.model
|
|
}, associationConfig.initialConfig);
|
|
} else {
|
|
Ext.apply(associationConfig, {
|
|
ownerModel: name,
|
|
associatedModel: associationConfig.model
|
|
});
|
|
}
|
|
|
|
if (Ext.ModelManager.getModel(associationConfig.model) === undefined) {
|
|
Ext.ModelManager.registerDeferredAssociation(associationConfig);
|
|
} else {
|
|
associationsMixedCollection.add(Ext.data.association.Association.create(associationConfig));
|
|
}
|
|
}
|
|
|
|
data.associations = associationsMixedCollection;
|
|
|
|
// onBeforeCreated may get called *asynchronously* if any of those required classes caused
|
|
// an asynchronous script load. This would mean that the class definition object
|
|
// has not been applied to the prototype when the Model definition has returned.
|
|
// The Reader constructor does not attempt to buildExtractors if the fields MixedCollection
|
|
// has not yet been set. The cls.setProxy call triggers a build of extractor methods.
|
|
onBeforeClassCreated.call(me, cls, data, hooks);
|
|
|
|
// If we have been configured with an instantiated proxy, set it now.
|
|
if (clsProxy && clsProxy.isProxy) {
|
|
cls.setProxy(clsProxy);
|
|
}
|
|
|
|
// Fire the onModelDefined template method on ModelManager
|
|
Ext.ModelManager.onModelDefined(cls);
|
|
});
|
|
};
|
|
},
|
|
|
|
inheritableStatics: {
|
|
/**
|
|
* Sets the Proxy to use for this model. Accepts any options that can be accepted by
|
|
* {@link Ext#createByAlias Ext.createByAlias}.
|
|
* @param {String/Object/Ext.data.proxy.Proxy} proxy The proxy
|
|
* @return {Ext.data.proxy.Proxy}
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
setProxy: function(proxy) {
|
|
//make sure we have an Ext.data.proxy.Proxy object
|
|
if (!proxy.isProxy) {
|
|
if (typeof proxy == "string") {
|
|
proxy = {
|
|
type: proxy
|
|
};
|
|
}
|
|
proxy = Ext.createByAlias("proxy." + proxy.type, proxy);
|
|
}
|
|
proxy.setModel(this);
|
|
this.proxy = this.prototype.proxy = proxy;
|
|
|
|
return proxy;
|
|
},
|
|
|
|
/**
|
|
* Returns the configured Proxy for this Model
|
|
* @return {Ext.data.proxy.Proxy} The proxy
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
getProxy: function() {
|
|
|
|
var proxy = this.proxy;
|
|
|
|
// Not yet been created wither from prototype property set in onClassExtended, or by cloning superclass's Proxy...
|
|
if (!proxy) {
|
|
proxy = this.prototype.proxy;
|
|
|
|
// If we inherited an instantiated Propxy, we can't share it, so clone it.
|
|
if (proxy.isProxy) {
|
|
proxy = proxy.clone()
|
|
}
|
|
|
|
return this.setProxy(proxy);
|
|
}
|
|
|
|
return proxy;
|
|
},
|
|
|
|
/**
|
|
* Apply a new set of field and/or property definitions to the existing model. This will replace any existing
|
|
* fields, including fields inherited from superclasses. Mainly for reconfiguring the
|
|
* model based on changes in meta data (called from Reader's onMetaChange method).
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
setFields: function(fields, idProperty, clientIdProperty) {
|
|
var me = this,
|
|
newField,
|
|
idField,
|
|
idFieldDefined = false,
|
|
proto = me.prototype,
|
|
prototypeFields = proto.fields,
|
|
superFields = proto.superclass.fields,
|
|
len,
|
|
i;
|
|
|
|
if (idProperty) {
|
|
proto.idProperty = idProperty;
|
|
idField = idProperty.isField ? idProperty : new Ext.data.Field(idProperty);
|
|
|
|
}
|
|
if (clientIdProperty) {
|
|
proto.clientIdProperty = clientIdProperty;
|
|
}
|
|
|
|
if (prototypeFields) {
|
|
prototypeFields.clear();
|
|
}
|
|
else {
|
|
prototypeFields = me.prototype.fields = new Ext.util.MixedCollection(false, function(field) {
|
|
return field.name;
|
|
});
|
|
}
|
|
|
|
// Merge the fields of the superclass and the passed in fields
|
|
if (superFields) {
|
|
fields = superFields.items.concat(fields);
|
|
}
|
|
|
|
for (i = 0, len = fields.length; i < len; i++) {
|
|
newField = new Ext.data.Field(fields[i]);
|
|
|
|
// If a defined Field encapsulates the idProperty, then we do not have to create a separate identifying field.
|
|
// Also, this field must never have a default value set if no value arrives from the server side.
|
|
// So override any possible prototype-provided defaultValue with undefined which will inhibit generation of defaulting code in Reader.buildRecordDataExtractor
|
|
if (idField && ((newField.mapping && (newField.mapping === idField.mapping)) || (newField.name === idField.name))) {
|
|
idFieldDefined = true;
|
|
newField.defaultValue = undefined;
|
|
}
|
|
prototypeFields.add(newField);
|
|
}
|
|
|
|
// If there was an idProperty specified, and there has *not* been a field defined which encapsulates that property,
|
|
// then create a field which encapsulates that property.
|
|
// This must never provide a default value.
|
|
if (idField && !idFieldDefined) {
|
|
idField.defaultValue = undefined;
|
|
prototypeFields.add(idField);
|
|
}
|
|
|
|
me.fields = prototypeFields;
|
|
|
|
return prototypeFields;
|
|
},
|
|
|
|
/**
|
|
* Returns an Array of {@link Ext.data.Field Field} definitions which define this Model's structure
|
|
*
|
|
* Fields are sorted upon Model class definition. Fields with custom {@link Ext.data.Field#convert convert} functions
|
|
* are moved to *after* fields with no convert functions. This is so that convert functions which rely on existing
|
|
* field values will be able to read those field values.
|
|
*
|
|
* @return {Ext.data.Field[]} The defined Fields for this Model.
|
|
*
|
|
*/
|
|
getFields: function() {
|
|
return this.prototype.fields.items;
|
|
},
|
|
|
|
/**
|
|
* Asynchronously loads a model instance by id. Sample usage:
|
|
*
|
|
* Ext.define('MyApp.User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'id', type: 'int'},
|
|
* {name: 'name', type: 'string'}
|
|
* ]
|
|
* });
|
|
*
|
|
* MyApp.User.load(10, {
|
|
* scope: this,
|
|
* failure: function(record, operation) {
|
|
* //do something if the load failed
|
|
* //record is null
|
|
* },
|
|
* success: function(record, operation) {
|
|
* //do something if the load succeeded
|
|
* },
|
|
* callback: function(record, operation, success) {
|
|
* //do something whether the load succeeded or failed
|
|
* //if operation is unsuccessful, record is null
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Number/String} id The id of the model to load
|
|
* @param {Object} config (optional) config object containing success, failure and callback functions, plus
|
|
* optional scope
|
|
* @static
|
|
* @inheritable
|
|
*/
|
|
load: function(id, config) {
|
|
config = Ext.apply({}, config);
|
|
config = Ext.applyIf(config, {
|
|
action: 'read',
|
|
id : id
|
|
});
|
|
|
|
var operation = new Ext.data.Operation(config),
|
|
scope = config.scope || this,
|
|
callback;
|
|
|
|
callback = function(operation) {
|
|
var record = null,
|
|
success = operation.wasSuccessful();
|
|
|
|
if (success) {
|
|
record = operation.getRecords()[0];
|
|
// If the server didn't set the id, do it here
|
|
if (!record.hasId()) {
|
|
record.setId(id);
|
|
}
|
|
Ext.callback(config.success, scope, [record, operation]);
|
|
} else {
|
|
Ext.callback(config.failure, scope, [record, operation]);
|
|
}
|
|
Ext.callback(config.callback, scope, [record, operation, success]);
|
|
};
|
|
|
|
this.getProxy().read(operation, callback, this);
|
|
}
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* @property
|
|
* @static
|
|
* @private
|
|
*/
|
|
PREFIX : 'ext-record',
|
|
/**
|
|
* @property
|
|
* @static
|
|
* @private
|
|
*/
|
|
AUTO_ID: 1,
|
|
/**
|
|
* @property
|
|
* @static
|
|
* The update operation of type 'edit'. Used by {@link Ext.data.Store#event-update Store.update} event.
|
|
*/
|
|
EDIT : 'edit',
|
|
/**
|
|
* @property
|
|
* @static
|
|
* The update operation of type 'reject'. Used by {@link Ext.data.Store#event-update Store.update} event.
|
|
*/
|
|
REJECT : 'reject',
|
|
/**
|
|
* @property
|
|
* @static
|
|
* The update operation of type 'commit'. Used by {@link Ext.data.Store#event-update Store.update} event.
|
|
*/
|
|
COMMIT : 'commit',
|
|
|
|
/**
|
|
* Generates a sequential id. This method is typically called when a record is {@link Ext#create
|
|
* create}d and {@link #constructor no id has been specified} either as a parameter, or through the {@link #idProperty}
|
|
* in the passed data. The generated id will automatically be assigned to the
|
|
* record. The returned id takes the form: {PREFIX}-{AUTO_ID}.
|
|
*
|
|
* - **PREFIX** : String - Ext.data.Model.PREFIX (defaults to 'ext-record')
|
|
* - **AUTO_ID** : String - Ext.data.Model.AUTO_ID (defaults to 1 initially)
|
|
*
|
|
* @param {Ext.data.Model} rec The record being created. The record does not exist, it's a {@link #phantom}.
|
|
* @return {String} auto-generated string id, `"ext-record-i++"`;
|
|
* @static
|
|
*/
|
|
id: function(rec) {
|
|
var id = [this.PREFIX, '-', this.AUTO_ID++].join('');
|
|
rec.phantom = true;
|
|
rec.internalId = id;
|
|
return id;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String/Object} idgen
|
|
* The id generator to use for this model. The default id generator does not generate
|
|
* values for the {@link #idProperty}.
|
|
*
|
|
* This can be overridden at the model level to provide a custom generator for a model.
|
|
* The simplest form of this would be:
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* requires: ['Ext.data.SequentialIdGenerator'],
|
|
* idgen: 'sequential',
|
|
* ...
|
|
* });
|
|
*
|
|
* The above would generate {@link Ext.data.SequentialIdGenerator sequential} id's such
|
|
* as 1, 2, 3 etc..
|
|
*
|
|
* Another useful id generator is {@link Ext.data.UuidGenerator}:
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* requires: ['Ext.data.UuidGenerator'],
|
|
* idgen: 'uuid',
|
|
* ...
|
|
* });
|
|
*
|
|
* An id generation can also be further configured:
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'sequential',
|
|
* seed: 1000,
|
|
* prefix: 'ID_'
|
|
* }
|
|
* });
|
|
*
|
|
* The above would generate id's such as ID_1000, ID_1001, ID_1002 etc..
|
|
*
|
|
* If multiple models share an id space, a single generator can be shared:
|
|
*
|
|
* Ext.define('MyApp.data.MyModelX', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'sequential',
|
|
* id: 'xy'
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.data.MyModelY', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'sequential',
|
|
* id: 'xy'
|
|
* }
|
|
* });
|
|
*
|
|
* For more complex, shared id generators, a custom generator is the best approach.
|
|
* See {@link Ext.data.IdGenerator} for details on creating custom id generators.
|
|
*
|
|
* @markdown
|
|
*/
|
|
idgen: {
|
|
isGenerator: true,
|
|
type: 'default',
|
|
|
|
generate: function () {
|
|
return null;
|
|
},
|
|
getRecId: function (rec) {
|
|
return rec.modelName + '-' + rec.internalId;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} editing
|
|
* Internal flag used to track whether or not the model instance is currently being edited.
|
|
* @readonly
|
|
*/
|
|
editing : false,
|
|
|
|
/**
|
|
* @property {Boolean} dirty
|
|
* True if this Record has been modified.
|
|
* @readonly
|
|
*/
|
|
dirty : false,
|
|
|
|
/**
|
|
* @cfg {String} persistenceProperty
|
|
* The name of the property on this Persistable object that its data is saved to. Defaults to 'data'
|
|
* (i.e: all persistable data resides in `this.data`.)
|
|
* @deprecated This config is deprecated. In future this will no longer be configurable and will be data.
|
|
*/
|
|
persistenceProperty: 'data',
|
|
|
|
evented: false,
|
|
|
|
/**
|
|
* @property {Boolean} isModel
|
|
* `true` in this class to identify an object as an instantiated Model, or subclass thereof.
|
|
*/
|
|
isModel: true,
|
|
|
|
/**
|
|
* @property {Boolean} phantom
|
|
* True when the record does not yet exist in a server-side database (see {@link #setDirty}).
|
|
* Any record which has a real database pk set as its id property is NOT a phantom -- it's real.
|
|
*/
|
|
phantom : false,
|
|
|
|
/**
|
|
* @cfg {String/Object/Ext.data.Field} idProperty
|
|
* The name of the field treated as this Model's unique id. Defaults to 'id'.
|
|
*
|
|
* This may also be specified as a Field config object. This means that the identifying field can be calculated
|
|
* using a {@link Ext.data.Field#convert convert} function which might aggregate several values from the
|
|
* raw data object to use as an identifier.
|
|
*
|
|
* The resulting {@link Ext.data.Field Field} is added to the Model's field collection unless there is already
|
|
* a configured field with a mapping that reads the same property.
|
|
*
|
|
* If defining an **abstract** base Model class, the `idProperty` may be configured as `null` which will mean that
|
|
* no identifying field will be generated.
|
|
*/
|
|
idProperty: 'id',
|
|
|
|
/**
|
|
* @cfg {String} [clientIdProperty]
|
|
* The name of a property that is used for submitting this Model's unique client-side identifier
|
|
* to the server when multiple phantom records are saved as part of the same {@link Ext.data.Operation Operation}.
|
|
* In such a case, the server response should include the client id for each record
|
|
* so that the server response data can be used to update the client-side records if necessary.
|
|
* This property cannot have the same name as any of this Model's fields.
|
|
*/
|
|
clientIdProperty: null,
|
|
|
|
/**
|
|
* @cfg {String} defaultProxyType
|
|
* The string type of the default Model Proxy. Defaults to 'ajax'.
|
|
*/
|
|
defaultProxyType: 'ajax',
|
|
|
|
// Used as a dummy source array when constructor is called with no args
|
|
emptyData: [],
|
|
|
|
// Fields config and property
|
|
/**
|
|
* @cfg {Object[]/String[]} fields
|
|
* The fields for this model. This is an Array of **{@link Ext.data.Field Field}** definition objects. A Field
|
|
* definition may simply be the *name* of the Field, but a Field encapsulates {@link Ext.data.Field#type data type},
|
|
* {@link Ext.data.Field#convert custom conversion} of raw data, and a {@link Ext.data.Field#mapping mapping}
|
|
* property to specify by name of index, how to extract a field's value from a raw data object, so it is best practice
|
|
* to specify a full set of {@link Ext.data.Field Field} config objects.
|
|
*/
|
|
/**
|
|
* @property {Ext.util.MixedCollection} fields
|
|
* A {@link Ext.util.MixedCollection Collection} of the fields defined for this Model (including fields defined in superclasses)
|
|
*
|
|
* This is a collection of {@link Ext.data.Field} instances, each of which encapsulates information that the field was configured with.
|
|
* By default, you can specify a field as simply a String, representing the *name* of the field, but a Field encapsulates
|
|
* {@link Ext.data.Field#type data type}, {@link Ext.data.Field#convert custom conversion} of raw data, and a {@link Ext.data.Field#mapping mapping}
|
|
* property to specify by name of index, how to extract a field's value from a raw data object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object[]} validations
|
|
* An array of {@link Ext.data.validations validations} for this model.
|
|
*/
|
|
|
|
// Associations configs and properties
|
|
/**
|
|
* @cfg {Object[]} associations
|
|
* An array of {@link Ext.data.Association associations} for this model.
|
|
*/
|
|
/**
|
|
* @cfg {String/Object/String[]/Object[]} hasMany
|
|
* One or more {@link Ext.data.HasManyAssociation HasMany associations} for this model.
|
|
*/
|
|
/**
|
|
* @cfg {String/Object/String[]/Object[]} belongsTo
|
|
* One or more {@link Ext.data.BelongsToAssociation BelongsTo associations} for this model.
|
|
*/
|
|
/**
|
|
* @cfg {String/Object/Ext.data.proxy.Proxy} proxy
|
|
* The {@link Ext.data.proxy.Proxy proxy} to use for this model.
|
|
*/
|
|
|
|
/**
|
|
* @event idchanged
|
|
* Fired when this model's id changes
|
|
* @param {Ext.data.Model} this
|
|
* @param {Number/String} oldId The old id
|
|
* @param {Number/String} newId The new id
|
|
*/
|
|
|
|
/**
|
|
* Creates new Model instance.
|
|
* @param {Object} data An object containing keys corresponding to this model's fields, and their associated values
|
|
*/
|
|
constructor: function(data, id, raw, convertedData) {
|
|
// id, raw and convertedData not documented intentionally, meant to be used internally.
|
|
// TODO: find where "raw" is used and remove it. The first parameter, "data" is raw, unconverted data.
|
|
//
|
|
// The "convertedData" parameter is a converted object hash with all properties corresponding to defined Fields
|
|
// and all values of the defined type. It is used directly as this record's data property.
|
|
// When the convertedData parameter is used, raw data is passed in using the "raw" parameter and
|
|
// is not processed
|
|
|
|
var me = this,
|
|
passedId = (id || id === 0),
|
|
hasId,
|
|
fields,
|
|
length,
|
|
field,
|
|
name,
|
|
value,
|
|
newId,
|
|
persistenceProperty,
|
|
idProperty = me.idProperty,
|
|
idField = me.idField,
|
|
i;
|
|
|
|
/**
|
|
* @property {Object} raw The raw data used to create this model if created via a reader.
|
|
*/
|
|
me.raw = raw || data; // If created using data in constructor, use data
|
|
|
|
/**
|
|
* @property {Object} modified Key: value pairs of all fields whose values have changed
|
|
*/
|
|
me.modified = {};
|
|
|
|
persistenceProperty = me[me.persistenceProperty] = convertedData || {};
|
|
|
|
// Until persistenceProperty is deprecated, keep a reference in me.data
|
|
me.data = me[me.persistenceProperty];
|
|
|
|
me.mixins.observable.constructor.call(me);
|
|
|
|
if (!convertedData) {
|
|
|
|
if (data) {
|
|
// If no ID passed, use the id property from the converted data
|
|
if (!passedId && idProperty) {
|
|
id = data[idProperty];
|
|
hasId = (id || id === 0);
|
|
}
|
|
}
|
|
// No data passed. Use the static empty array.
|
|
else {
|
|
data = me.emptyData;
|
|
}
|
|
|
|
//add default field values if present
|
|
fields = me.fields.items;
|
|
length = fields.length;
|
|
i = 0;
|
|
|
|
if (Ext.isArray(data)) {
|
|
for (; i < length; i++) {
|
|
field = fields[i];
|
|
name = field.name;
|
|
|
|
// Use the original ordinal position at which the Model inserted the field into its collection.
|
|
// Fields are sorted to place fields with a *convert* function last.
|
|
value = data[field.originalIndex];
|
|
|
|
if (value === undefined) {
|
|
value = field.defaultValue;
|
|
}
|
|
// Have to map array data so the values get assigned to the named fields
|
|
// rather than getting set as the field names with undefined values.
|
|
if (field.convert) {
|
|
value = field.convert(value, me);
|
|
}
|
|
// On instance construction, do not create data properties based on undefined input properties
|
|
if (value !== undefined) {
|
|
persistenceProperty[name] = value;
|
|
}
|
|
}
|
|
|
|
} else {
|
|
for (; i < length; i++) {
|
|
field = fields[i];
|
|
name = field.name;
|
|
value = data[name];
|
|
if (value === undefined) {
|
|
value = field.defaultValue;
|
|
}
|
|
if (field.convert) {
|
|
value = field.convert(value, me);
|
|
}
|
|
// On instance construction, do not create data properties based on undefined input properties
|
|
if (value !== undefined) {
|
|
persistenceProperty[name] = value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @property {Ext.data.Store[]} stores
|
|
* The {@link Ext.data.Store Stores} to which this instance is bound.
|
|
*/
|
|
me.stores = [];
|
|
|
|
// Caller passed an id, put the converted value into our data object.
|
|
// The *unconverted* value is used as the internalId.
|
|
if (passedId) {
|
|
hasId = true;
|
|
persistenceProperty[idProperty] = idField && idField.convert ? idField.convert(id) : id;
|
|
}
|
|
|
|
// If there's no id, we are a phantom so we have to generate an id.
|
|
else if (!hasId) {
|
|
// Generate a key using the supplied idgen function
|
|
newId = me.idgen.generate();
|
|
if (newId != null) {
|
|
me.preventInternalUpdate = true;
|
|
me.setId(newId);
|
|
delete me.preventInternalUpdate;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @property {Number/String} internalId
|
|
* An internal unique ID for each Model instance, used to identify Models that don't have an ID yet
|
|
* @private
|
|
*/
|
|
me.internalId = hasId ? id : Ext.data.Model.id(me);
|
|
// The Ext.data.Model.id call sets the phantom property. So it will be set now if !hasId
|
|
|
|
if (typeof me.init == 'function') {
|
|
me.init();
|
|
}
|
|
|
|
// Generate an observable ID
|
|
me.id = me.idgen.getRecId(me);
|
|
},
|
|
|
|
/**
|
|
* Returns the value of the given field
|
|
* @param {String} fieldName The field to fetch the value for
|
|
* @return {Object} The value
|
|
*/
|
|
get: function(field) {
|
|
return this[this.persistenceProperty][field];
|
|
},
|
|
|
|
// This object is used whenever the set() method is called and given a string as the
|
|
// first argument. This approach saves memory (and GC costs) since we could be called
|
|
// a lot.
|
|
_singleProp: {},
|
|
|
|
/**
|
|
* Sets the given field to the given value, marks the instance as dirty
|
|
* @param {String/Object} fieldName The field to set, or an object containing key/value pairs
|
|
* @param {Object} newValue The value to set
|
|
* @return {String[]} The array of modified field names or null if nothing was modified.
|
|
*/
|
|
set: function (fieldName, newValue) {
|
|
var me = this,
|
|
data = me[me.persistenceProperty],
|
|
fields = me.fields,
|
|
modified = me.modified,
|
|
single = (typeof fieldName == 'string'),
|
|
currentValue, field, idChanged, key, modifiedFieldNames, name, oldId,
|
|
newId, value, values;
|
|
|
|
if (single) {
|
|
values = me._singleProp;
|
|
values[fieldName] = newValue;
|
|
} else {
|
|
values = fieldName;
|
|
}
|
|
|
|
for (name in values) {
|
|
if (values.hasOwnProperty(name)) {
|
|
value = values[name];
|
|
|
|
if (fields && (field = fields.get(name)) && field.convert) {
|
|
value = field.convert(value, me);
|
|
}
|
|
|
|
currentValue = data[name];
|
|
if (me.isEqual(currentValue, value)) {
|
|
continue; // new value is the same, so no change...
|
|
}
|
|
|
|
data[name] = value;
|
|
(modifiedFieldNames || (modifiedFieldNames = [])).push(name);
|
|
|
|
if (field && field.persist) {
|
|
if (modified.hasOwnProperty(name)) {
|
|
if (me.isEqual(modified[name], value)) {
|
|
// The original value in me.modified equals the new value, so
|
|
// the field is no longer modified:
|
|
delete modified[name];
|
|
|
|
// We might have removed the last modified field, so check to
|
|
// see if there are any modified fields remaining and correct
|
|
// me.dirty:
|
|
me.dirty = false;
|
|
for (key in modified) {
|
|
if (modified.hasOwnProperty(key)){
|
|
me.dirty = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
me.dirty = true;
|
|
modified[name] = currentValue;
|
|
}
|
|
}
|
|
|
|
if (name == me.idProperty) {
|
|
idChanged = true;
|
|
oldId = currentValue;
|
|
newId = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (single) {
|
|
// cleanup our reused object for next time... important to do this before
|
|
// we fire any events or call anyone else (like afterEdit)!
|
|
delete values[fieldName];
|
|
}
|
|
|
|
if (idChanged) {
|
|
me.changeId(oldId, newId);
|
|
}
|
|
|
|
if (!me.editing && modifiedFieldNames) {
|
|
me.afterEdit(modifiedFieldNames);
|
|
}
|
|
|
|
return modifiedFieldNames || null;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Copies data from the passed record into this record. If the passed record is undefined, does nothing.
|
|
*
|
|
* If this is a phantom record (represented only in the client, with no corresponding database entry), and
|
|
* the source record is not a phantom, then this record acquires the id of the source record.
|
|
*
|
|
* @param {Ext.data.Model} sourceRecord The record to copy data from.
|
|
* @return {String[]} The names of the fields which changed value.
|
|
*/
|
|
copyFrom: function(sourceRecord) {
|
|
var me = this,
|
|
fields = me.fields.items,
|
|
fieldCount = fields.length,
|
|
modifiedFieldNames = [],
|
|
field, i = 0,
|
|
myData,
|
|
sourceData,
|
|
idProperty = me.idProperty,
|
|
name,
|
|
value;
|
|
|
|
if (sourceRecord) {
|
|
myData = me[me.persistenceProperty];
|
|
sourceData = sourceRecord[sourceRecord.persistenceProperty];
|
|
for (; i < fieldCount; i++) {
|
|
field = fields[i];
|
|
name = field.name;
|
|
|
|
// Do not use setters.
|
|
// Copy returned values in directly from the data object.
|
|
// Converters have already been called because new Records
|
|
// have been created to copy from.
|
|
// This is a direct record-to-record value copy operation.
|
|
// don't copy the id, we'll do it at the end
|
|
if (name != idProperty) {
|
|
value = sourceData[name];
|
|
|
|
// If source property is specified, and value is different
|
|
// copy field value in and build updatedFields
|
|
if (value !== undefined && !me.isEqual(myData[name], value)) {
|
|
myData[name] = value;
|
|
modifiedFieldNames.push(name);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If this is a phantom record being updated from a concrete record, copy the ID in.
|
|
if (me.phantom && !sourceRecord.phantom) {
|
|
// beginEdit to prevent events firing
|
|
// commit at the end to prevent dirty being set
|
|
me.beginEdit();
|
|
me.setId(sourceRecord.getId());
|
|
me.endEdit(true);
|
|
me.commit(true);
|
|
}
|
|
}
|
|
return modifiedFieldNames;
|
|
},
|
|
|
|
/**
|
|
* Checks if two values are equal, taking into account certain
|
|
* special factors, for example dates.
|
|
* @private
|
|
* @param {Object} a The first value
|
|
* @param {Object} b The second value
|
|
* @return {Boolean} True if the values are equal
|
|
*/
|
|
isEqual: function(a, b) {
|
|
// instanceof is ~10 times faster then Ext.isDate. Values here will not be cross-document objects
|
|
if (a instanceof Date && b instanceof Date) {
|
|
return a.getTime() === b.getTime();
|
|
}
|
|
return a === b;
|
|
},
|
|
|
|
/**
|
|
* Begins an edit. While in edit mode, no events (e.g.. the `update` event) are relayed to the containing store.
|
|
* When an edit has begun, it must be followed by either {@link #endEdit} or {@link #cancelEdit}.
|
|
*/
|
|
beginEdit : function(){
|
|
var me = this,
|
|
key,
|
|
data,
|
|
o;
|
|
|
|
if (!me.editing) {
|
|
me.editing = true;
|
|
me.dirtySave = me.dirty;
|
|
|
|
o = me[me.persistenceProperty];
|
|
data = me.dataSave = {};
|
|
for (key in o) {
|
|
if (o.hasOwnProperty(key)) {
|
|
data[key] = o[key];
|
|
}
|
|
}
|
|
|
|
o = me.modified;
|
|
data = me.modifiedSave = {};
|
|
for (key in o) {
|
|
if (o.hasOwnProperty(key)) {
|
|
data[key] = o[key];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Cancels all changes made in the current edit operation.
|
|
*/
|
|
cancelEdit : function(){
|
|
var me = this;
|
|
if (me.editing) {
|
|
me.editing = false;
|
|
// reset the modified state, nothing changed since the edit began
|
|
me.modified = me.modifiedSave;
|
|
me[me.persistenceProperty] = me.dataSave;
|
|
me.dirty = me.dirtySave;
|
|
me.modifiedSave = me.dataSave = me.dirtySave = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Ends an edit. If any data was modified, the containing store is notified
|
|
* (ie, the store's `update` event will fire).
|
|
* @param {Boolean} [silent] True to not notify the store of the change
|
|
* @param {String[]} [modifiedFieldNames] Array of field names changed during edit.
|
|
*/
|
|
endEdit : function(silent, modifiedFieldNames){
|
|
var me = this,
|
|
dataSave,
|
|
changed;
|
|
|
|
silent = silent === true;
|
|
if (me.editing) {
|
|
me.editing = false;
|
|
dataSave = me.dataSave;
|
|
me.modifiedSave = me.dataSave = me.dirtySave = null;
|
|
if (!silent) {
|
|
if (!modifiedFieldNames) {
|
|
modifiedFieldNames = me.getModifiedFieldNames(dataSave);
|
|
}
|
|
changed = me.dirty || modifiedFieldNames.length > 0;
|
|
if (changed) {
|
|
me.afterEdit(modifiedFieldNames);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the names of all the fields that were modified during an edit
|
|
* @param {Object} [saved] The currently saved data. Defaults to
|
|
* the dataSave property on the object.
|
|
* @private
|
|
* @return {String[]} An array of modified field names
|
|
*/
|
|
getModifiedFieldNames: function(saved){
|
|
var me = this,
|
|
data = me[me.persistenceProperty],
|
|
modified = [],
|
|
key;
|
|
|
|
saved = saved || me.dataSave;
|
|
for (key in data) {
|
|
if (data.hasOwnProperty(key)) {
|
|
if (!me.isEqual(data[key], saved[key])) {
|
|
modified.push(key);
|
|
}
|
|
}
|
|
}
|
|
return modified;
|
|
},
|
|
|
|
/**
|
|
* Gets a hash of only the fields that have been modified since this Model was created or commited.
|
|
* @return {Object}
|
|
*/
|
|
getChanges : function(){
|
|
var modified = this.modified,
|
|
changes = {},
|
|
field;
|
|
|
|
for (field in modified) {
|
|
if (modified.hasOwnProperty(field)){
|
|
changes[field] = this.get(field);
|
|
}
|
|
}
|
|
|
|
return changes;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed field name has been `{@link #modified}` since the load or last commit.
|
|
* @param {String} fieldName {@link Ext.data.Field#name}
|
|
* @return {Boolean}
|
|
*/
|
|
isModified : function(fieldName) {
|
|
return this.modified.hasOwnProperty(fieldName);
|
|
},
|
|
|
|
/**
|
|
* Marks this **Record** as `{@link #dirty}`. This method is used interally when adding `{@link #phantom}` records
|
|
* to a {@link Ext.data.proxy.Server#writer writer enabled store}.
|
|
*
|
|
* Marking a record `{@link #dirty}` causes the phantom to be returned by {@link Ext.data.Store#getUpdatedRecords}
|
|
* where it will have a create action composed for it during {@link Ext.data.Model#save model save} operations.
|
|
*/
|
|
setDirty : function() {
|
|
var me = this,
|
|
fields = me.fields.items,
|
|
fLen = fields.length,
|
|
field, name, f;
|
|
|
|
me.dirty = true;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
field = fields[f];
|
|
|
|
if (field.persist) {
|
|
name = field.name;
|
|
me.modified[name] = me.get(name);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* Usually called by the {@link Ext.data.Store} to which this model instance has been {@link #join joined}. Rejects
|
|
* all changes made to the model instance since either creation, or the last commit operation. Modified fields are
|
|
* reverted to their original values.
|
|
*
|
|
* Developers should subscribe to the {@link Ext.data.Store#event-update} event to have their code notified of reject
|
|
* operations.
|
|
*
|
|
* @param {Boolean} silent (optional) True to skip notification of the owning store of the change.
|
|
* Defaults to false.
|
|
*/
|
|
reject : function(silent) {
|
|
var me = this,
|
|
modified = me.modified,
|
|
field;
|
|
|
|
for (field in modified) {
|
|
if (modified.hasOwnProperty(field)) {
|
|
if (typeof modified[field] != "function") {
|
|
me[me.persistenceProperty][field] = modified[field];
|
|
}
|
|
}
|
|
}
|
|
|
|
me.dirty = false;
|
|
me.editing = false;
|
|
me.modified = {};
|
|
|
|
if (silent !== true) {
|
|
me.afterReject();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Usually called by the {@link Ext.data.Store} which owns the model instance. Commits all changes made to the
|
|
* instance since either creation or the last commit operation.
|
|
*
|
|
* Developers should subscribe to the {@link Ext.data.Store#event-update} event to have their code notified of commit
|
|
* operations.
|
|
*
|
|
* @param {Boolean} [silent=false] Pass `true` to skip notification of the owning store of the change.
|
|
* @param {String[]} [modifiedFieldNames] Array of field names changed during sync with server if known.
|
|
* Omit or pass `null` if unknown. An empty array means that it is known that no fields were modified
|
|
* by the server's response.
|
|
* Defaults to false.
|
|
*/
|
|
commit : function(silent, modifiedFieldNames) {
|
|
var me = this;
|
|
|
|
me.phantom = me.dirty = me.editing = false;
|
|
me.modified = {};
|
|
|
|
if (silent !== true) {
|
|
me.afterCommit(modifiedFieldNames);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates a copy (clone) of this Model instance.
|
|
*
|
|
* @param {String} [id] A new id, defaults to the id of the instance being copied.
|
|
* See `{@link Ext.data.Model#id id}`. To generate a phantom instance with a new id use:
|
|
*
|
|
* var rec = record.copy(); // clone the record
|
|
* Ext.data.Model.id(rec); // automatically generate a unique sequential id
|
|
*
|
|
* @return {Ext.data.Model}
|
|
*/
|
|
copy : function(newId) {
|
|
var me = this;
|
|
return new me.self(me.raw, newId, null, Ext.apply({}, me[me.persistenceProperty]));
|
|
},
|
|
|
|
/**
|
|
* Sets the Proxy to use for this model. Accepts any options that can be accepted by
|
|
* {@link Ext#createByAlias Ext.createByAlias}.
|
|
*
|
|
* @param {String/Object/Ext.data.proxy.Proxy} proxy The proxy
|
|
* @return {Ext.data.proxy.Proxy}
|
|
*/
|
|
setProxy: function(proxy) {
|
|
//make sure we have an Ext.data.proxy.Proxy object
|
|
if (!proxy.isProxy) {
|
|
if (typeof proxy === "string") {
|
|
proxy = {
|
|
type: proxy
|
|
};
|
|
}
|
|
proxy = Ext.createByAlias("proxy." + proxy.type, proxy);
|
|
}
|
|
proxy.setModel(this.self);
|
|
this.proxy = proxy;
|
|
|
|
return proxy;
|
|
},
|
|
|
|
/**
|
|
* Returns the configured Proxy for this Model.
|
|
* @return {Ext.data.proxy.Proxy} The proxy
|
|
*/
|
|
getProxy: function() {
|
|
return this.hasOwnProperty('proxy') ? this.proxy : this.self.getProxy();
|
|
},
|
|
|
|
/**
|
|
* Validates the current data against all of its configured {@link #validations}.
|
|
* @return {Ext.data.Errors} The errors object
|
|
*/
|
|
validate: function() {
|
|
var errors = new Ext.data.Errors(),
|
|
validations = this.validations,
|
|
validators = Ext.data.validations,
|
|
length, validation, field, valid, type, i;
|
|
|
|
if (validations) {
|
|
length = validations.length;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
validation = validations[i];
|
|
field = validation.field || validation.name;
|
|
type = validation.type;
|
|
valid = validators[type](validation, this.get(field));
|
|
|
|
if (!valid) {
|
|
errors.add({
|
|
field : field,
|
|
message: validation.message || validators[type + 'Message']
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return errors;
|
|
},
|
|
|
|
/**
|
|
* Checks if the model is valid. See {@link #validate}.
|
|
* @return {Boolean} True if the model is valid.
|
|
*/
|
|
isValid: function(){
|
|
return this.validate().isValid();
|
|
},
|
|
|
|
/**
|
|
* Saves the model instance using the configured proxy.
|
|
* @param {Object} [options] Options to pass to the proxy. Config object for {@link Ext.data.Operation}.
|
|
* @return {Ext.data.Model} The Model instance
|
|
*/
|
|
save: function(options) {
|
|
options = Ext.apply({}, options);
|
|
|
|
var me = this,
|
|
action = me.phantom ? 'create' : 'update',
|
|
scope = options.scope || me,
|
|
stores = me.stores,
|
|
i = 0,
|
|
storeCount,
|
|
store,
|
|
operation,
|
|
callback;
|
|
|
|
Ext.apply(options, {
|
|
records: [me],
|
|
action : action
|
|
});
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
callback = function(operation) {
|
|
var success = operation.wasSuccessful();
|
|
|
|
if (success) {
|
|
for(storeCount = stores.length; i < storeCount; i++) {
|
|
store = stores[i];
|
|
store.fireEvent('write', store, operation);
|
|
store.fireEvent('datachanged', store);
|
|
// Not firing refresh here, since it's a single record
|
|
}
|
|
Ext.callback(options.success, scope, [me, operation]);
|
|
}
|
|
else {
|
|
Ext.callback(options.failure, scope, [me, operation]);
|
|
}
|
|
|
|
Ext.callback(options.callback, scope, [me, operation, success]);
|
|
};
|
|
|
|
me.getProxy()[action](operation, callback, me);
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Destroys the model using the configured proxy.
|
|
* @param {Object} options Options to pass to the proxy. Config object for {@link Ext.data.Operation}.
|
|
* @return {Ext.data.Model} The Model instance
|
|
*/
|
|
destroy: function(options) {
|
|
options = Ext.apply({
|
|
records: [this],
|
|
action : 'destroy'
|
|
}, options);
|
|
|
|
var me = this,
|
|
isNotPhantom = me.phantom !== true,
|
|
scope = options.scope || me,
|
|
stores,
|
|
i = 0,
|
|
storeCount,
|
|
store,
|
|
args,
|
|
operation,
|
|
callback;
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
callback = function(operation) {
|
|
args = [me, operation];
|
|
|
|
// The stores property will be mutated, so clone it first
|
|
stores = Ext.Array.clone(me.stores);
|
|
if (operation.wasSuccessful()) {
|
|
for (storeCount = stores.length; i < storeCount; i++) {
|
|
store = stores[i];
|
|
|
|
// If the store has a remove (it's not a TreeStore), then
|
|
// remove this record from Store. Avoid Store handling anything by passing the "isMove" flag
|
|
if (store.remove) {
|
|
store.remove(me, true);
|
|
}
|
|
|
|
// Other parties may need to know that the record as gone
|
|
// eg View SelectionModels
|
|
store.fireEvent('bulkremove', store, [me], [store.indexOf(me)], false);
|
|
if (isNotPhantom) {
|
|
store.fireEvent('write', store, operation);
|
|
}
|
|
}
|
|
me.clearListeners();
|
|
Ext.callback(options.success, scope, args);
|
|
} else {
|
|
Ext.callback(options.failure, scope, args);
|
|
}
|
|
Ext.callback(options.callback, scope, args);
|
|
};
|
|
|
|
// Not a phantom, then we must perform this operation on the remote datasource.
|
|
// Record will be removed from the store in the callback upon a success response
|
|
if (isNotPhantom) {
|
|
me.getProxy().destroy(operation, callback, me);
|
|
}
|
|
// If it's a phantom, then call the callback directly with a dummy successful ResultSet
|
|
else {
|
|
operation.complete = operation.success = true;
|
|
operation.resultSet = me.getProxy().reader.nullResultSet;
|
|
callback(operation);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the unique ID allocated to this model instance as defined by {@link #idProperty}.
|
|
* @return {Number/String} The id
|
|
*/
|
|
getId: function() {
|
|
return this.get(this.idField.name);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getObservableId: function() {
|
|
return this.id;
|
|
},
|
|
|
|
/**
|
|
* Sets the model instance's id field to the given id.
|
|
* @param {Number/String} id The new id
|
|
*/
|
|
setId: function(id) {
|
|
this.set(this.idProperty, id);
|
|
},
|
|
|
|
changeId: function(oldId, newId) {
|
|
var me = this,
|
|
hasOldId, hasId, oldInternalId;
|
|
|
|
if (!me.preventInternalUpdate) {
|
|
hasOldId = me.hasId(oldId);
|
|
hasId = me.hasId(newId);
|
|
oldInternalId = me.internalId;
|
|
me.phantom = !hasId;
|
|
// The internal id changes if:
|
|
// a) We had an id before and now we don't
|
|
// b) We didn't have an id before and now we do
|
|
// c) We had an id and we're setting a new id
|
|
if (hasId !== hasOldId || (hasId && hasOldId)) {
|
|
me.internalId = hasId ? newId : Ext.data.Model.id(me);
|
|
}
|
|
|
|
me.fireEvent('idchanged', me, oldId, newId, oldInternalId);
|
|
me.callStore('onIdChanged', oldId, newId, oldInternalId);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Checks if this model has an id assigned
|
|
* @param {Object} [id] The id, if not passed it will call getId()
|
|
* @return {Boolean} True if the model has an id
|
|
*/
|
|
hasId: function(id) {
|
|
if (arguments.length === 0) {
|
|
id = this.getId();
|
|
}
|
|
return !!(id || id === 0);
|
|
},
|
|
|
|
/**
|
|
* Tells this model instance that it has been added to a store.
|
|
* @param {Ext.data.Store} store The store to which this model has been added.
|
|
*/
|
|
join : function(store) {
|
|
var me = this;
|
|
|
|
// Code for the 99% use case using fast way!
|
|
if (!me.stores.length) {
|
|
me.stores[0] = store;
|
|
} else {
|
|
Ext.Array.include(this.stores, store);
|
|
}
|
|
|
|
/**
|
|
* @property {Ext.data.Store} store
|
|
* The {@link Ext.data.Store Store} to which this instance belongs. NOTE: If this
|
|
* instance is bound to multiple stores, this property will reference only the
|
|
* first. To examine all the stores, use the {@link #stores} property instead.
|
|
*/
|
|
this.store = this.stores[0]; // compat w/all releases ever
|
|
},
|
|
|
|
/**
|
|
* Tells this model instance that it has been removed from the store.
|
|
* @param {Ext.data.Store} store The store from which this model has been removed.
|
|
*/
|
|
unjoin: function(store) {
|
|
Ext.Array.remove(this.stores, store);
|
|
this.store = this.stores[0] || null; // compat w/all releases ever
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* If this Model instance has been {@link #join joined} to a {@link Ext.data.Store store}, the store's
|
|
* afterEdit method is called.
|
|
* @param {String[]} [modifiedFieldNames] Array of field names changed during edit.
|
|
*/
|
|
afterEdit : function(modifiedFieldNames) {
|
|
this.callStore('afterEdit', modifiedFieldNames);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* If this Model instance has been {@link #join joined} to a {@link Ext.data.Store store}, the store's
|
|
* afterReject method is called.
|
|
*/
|
|
afterReject : function() {
|
|
this.callStore('afterReject');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* If this Model instance has been {@link #join joined} to a {@link Ext.data.Store store}, the store's
|
|
* afterCommit method is called,
|
|
* @param {String[]} [modifiedFieldNames] Array of field names changed by syncing this field with the server.
|
|
*/
|
|
afterCommit: function(modifiedFieldNames) {
|
|
this.callStore('afterCommit', modifiedFieldNames);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Helper function used by afterEdit, afterReject and afterCommit. Calls the given method on the
|
|
* {@link Ext.data.Store store} that this instance has {@link #join joined}, if any. The store function
|
|
* will always be called with the model instance as its single argument. If this model is joined to
|
|
* a Ext.data.NodeStore, then this method calls the given method on the NodeStore and the associated Ext.data.TreeStore
|
|
* @param {String} fn The function to call on the store
|
|
*/
|
|
callStore: function(fn) {
|
|
var args = Ext.Array.clone(arguments),
|
|
stores = this.stores,
|
|
i = 0,
|
|
len = stores.length,
|
|
store;
|
|
|
|
args[0] = this;
|
|
for (; i < len; ++i) {
|
|
store = stores[i];
|
|
if (store && Ext.isFunction(store[fn])) {
|
|
store[fn].apply(store, args);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets all values for each field in this model and returns an object
|
|
* containing the current data.
|
|
* @param {Boolean} includeAssociated True to also include associated data. Defaults to false.
|
|
* @return {Object} An object hash containing all the values in this model
|
|
*/
|
|
getData: function(includeAssociated){
|
|
var me = this,
|
|
fields = me.fields.items,
|
|
fLen = fields.length,
|
|
data = {},
|
|
name, f;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
name = fields[f].name;
|
|
data[name] = me.get(name);
|
|
}
|
|
|
|
if (includeAssociated === true) {
|
|
Ext.apply(data, me.getAssociatedData());
|
|
}
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Gets all of the data from this Models *loaded* associations. It does this recursively - for example if we have a
|
|
* User which hasMany Orders, and each Order hasMany OrderItems, it will return an object like this:
|
|
*
|
|
* {
|
|
* orders: [
|
|
* {
|
|
* id: 123,
|
|
* status: 'shipped',
|
|
* orderItems: [
|
|
* ...
|
|
* ]
|
|
* }
|
|
* ]
|
|
* }
|
|
*
|
|
* @return {Object} The nested data set for the Model's loaded associations
|
|
*/
|
|
getAssociatedData: function(){
|
|
return this.prepareAssociatedData({}, 1);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This complex-looking method takes a given Model instance and returns an object containing all data from
|
|
* all of that Model's *loaded* associations. See {@link #getAssociatedData}
|
|
* @param {Object} seenKeys A hash of all the associations we've already seen
|
|
* @param {Number} depth The current depth
|
|
* @return {Object} The nested data set for the Model's loaded associations
|
|
*/
|
|
prepareAssociatedData: function(seenKeys, depth) {
|
|
/*
|
|
* In this method we use a breadth first strategy instead of depth
|
|
* first. The reason for doing so is that it prevents messy & difficult
|
|
* issues when figuring out which associations we've already processed
|
|
* & at what depths.
|
|
*/
|
|
var me = this,
|
|
associations = me.associations.items,
|
|
associationCount = associations.length,
|
|
associationData = {},
|
|
// We keep 3 lists at the same index instead of using an array of objects.
|
|
// The reasoning behind this is that this method gets called a lot
|
|
// So we want to minimize the amount of objects we create for GC.
|
|
toRead = [],
|
|
toReadKey = [],
|
|
toReadIndex = [],
|
|
associatedStore, associatedRecords, associatedRecord, o, index, result, seenDepth,
|
|
associationId, associatedRecordCount, association, i, j, type, name;
|
|
|
|
for (i = 0; i < associationCount; i++) {
|
|
association = associations[i];
|
|
associationId = association.associationId;
|
|
|
|
seenDepth = seenKeys[associationId];
|
|
if (seenDepth && seenDepth !== depth) {
|
|
continue;
|
|
}
|
|
seenKeys[associationId] = depth;
|
|
|
|
type = association.type;
|
|
name = association.name;
|
|
if (type == 'hasMany') {
|
|
//this is the hasMany store filled with the associated data
|
|
associatedStore = me[association.storeName];
|
|
|
|
//we will use this to contain each associated record's data
|
|
associationData[name] = [];
|
|
|
|
//if it's loaded, put it into the association data
|
|
if (associatedStore && associatedStore.getCount() > 0) {
|
|
associatedRecords = associatedStore.data.items;
|
|
associatedRecordCount = associatedRecords.length;
|
|
|
|
//now we're finally iterating over the records in the association. Get
|
|
// all the records so we can process them
|
|
for (j = 0; j < associatedRecordCount; j++) {
|
|
associatedRecord = associatedRecords[j];
|
|
associationData[name][j] = associatedRecord.getData();
|
|
toRead.push(associatedRecord);
|
|
toReadKey.push(name);
|
|
toReadIndex.push(j);
|
|
}
|
|
}
|
|
} else if (type == 'belongsTo' || type == 'hasOne') {
|
|
associatedRecord = me[association.instanceName];
|
|
// If we have a record, put it onto our list
|
|
if (associatedRecord !== undefined) {
|
|
associationData[name] = associatedRecord.getData();
|
|
toRead.push(associatedRecord);
|
|
toReadKey.push(name);
|
|
toReadIndex.push(-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
for (i = 0, associatedRecordCount = toRead.length; i < associatedRecordCount; ++i) {
|
|
associatedRecord = toRead[i];
|
|
o = associationData[toReadKey[i]];
|
|
index = toReadIndex[i];
|
|
result = associatedRecord.prepareAssociatedData(seenKeys, depth + 1);
|
|
if (index === -1) {
|
|
Ext.apply(o, result);
|
|
} else {
|
|
Ext.apply(o[index], result);
|
|
}
|
|
}
|
|
|
|
return associationData;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* ServerProxy is a superclass of {@link Ext.data.proxy.JsonP JsonPProxy} and {@link Ext.data.proxy.Ajax AjaxProxy}, and
|
|
* would not usually be used directly.
|
|
*
|
|
* ServerProxy should ideally be named HttpProxy as it is a superclass for all HTTP proxies - for Ext JS 4.x it has been
|
|
* called ServerProxy to enable any 3.x applications that reference the HttpProxy to continue to work (HttpProxy is now
|
|
* an alias of AjaxProxy).
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.proxy.Server', {
|
|
extend: Ext.data.proxy.Proxy ,
|
|
alias : 'proxy.server',
|
|
alternateClassName: 'Ext.data.ServerProxy',
|
|
|
|
|
|
/**
|
|
* @cfg {String} url
|
|
* The URL from which to request the data object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [pageParam="page"]
|
|
* The name of the 'page' parameter to send in a request. Defaults to 'page'. Set this to undefined if you don't
|
|
* want to send a page parameter.
|
|
*/
|
|
pageParam: 'page',
|
|
|
|
/**
|
|
* @cfg {String} [startParam="start"]
|
|
* The name of the 'start' parameter to send in a request. Defaults to 'start'. Set this to undefined if you don't
|
|
* want to send a start parameter.
|
|
*/
|
|
startParam: 'start',
|
|
|
|
/**
|
|
* @cfg {String} [limitParam="limit"]
|
|
* The name of the 'limit' parameter to send in a request. Defaults to 'limit'. Set this to undefined if you don't
|
|
* want to send a limit parameter.
|
|
*/
|
|
limitParam: 'limit',
|
|
|
|
/**
|
|
* @cfg {String} [groupParam="group"]
|
|
* The name of the 'group' parameter to send in a request. Defaults to 'group'. Set this to undefined if you don't
|
|
* want to send a group parameter.
|
|
*/
|
|
groupParam: 'group',
|
|
|
|
/**
|
|
* @cfg {String} [groupDirectionParam="groupDir"]
|
|
* The name of the direction parameter to send in a request. **This is only used when simpleGroupMode is set to
|
|
* true.**
|
|
*/
|
|
groupDirectionParam: 'groupDir',
|
|
|
|
/**
|
|
* @cfg {String} [sortParam="sort"]
|
|
* The name of the 'sort' parameter to send in a request. Defaults to 'sort'. Set this to undefined if you don't
|
|
* want to send a sort parameter.
|
|
*/
|
|
sortParam: 'sort',
|
|
|
|
/**
|
|
* @cfg {String} [filterParam="filter"]
|
|
* The name of the 'filter' parameter to send in a request. Defaults to 'filter'. Set this to undefined if you don't
|
|
* want to send a filter parameter.
|
|
*/
|
|
filterParam: 'filter',
|
|
|
|
/**
|
|
* @cfg {String} [directionParam="dir"]
|
|
* The name of the direction parameter to send in a request. **This is only used when simpleSortMode is set to
|
|
* true.**
|
|
*/
|
|
directionParam: 'dir',
|
|
|
|
/**
|
|
* @cfg {String} [idParam="id"]
|
|
* The name of the parameter which carries the id of the entity being operated upon.
|
|
*/
|
|
idParam: 'id',
|
|
|
|
/**
|
|
* @cfg {Boolean} [simpleSortMode=false]
|
|
* Enabling simpleSortMode in conjunction with remoteSort will only send one sort property and a direction when a
|
|
* remote sort is requested. The {@link #directionParam} and {@link #sortParam} will be sent with the property name
|
|
* and either 'ASC' or 'DESC'.
|
|
*/
|
|
simpleSortMode: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [simpleGroupMode=false]
|
|
* Enabling simpleGroupMode in conjunction with remoteGroup will only send one group property and a direction when a
|
|
* remote group is requested. The {@link #groupDirectionParam} and {@link #groupParam} will be sent with the property name and either 'ASC'
|
|
* or 'DESC'.
|
|
*/
|
|
simpleGroupMode: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [noCache=true]
|
|
* Disable caching by adding a unique parameter name to the request. Set to false to allow caching. Defaults to true.
|
|
*/
|
|
noCache : true,
|
|
|
|
/**
|
|
* @cfg {String} [cacheString="_dc"]
|
|
* The name of the cache param added to the url when using noCache. Defaults to "_dc".
|
|
*/
|
|
cacheString: "_dc",
|
|
|
|
/**
|
|
* @cfg {Number} timeout
|
|
* 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 "create", "read", "update" and "destroy". Defaults to:
|
|
*
|
|
* api: {
|
|
* create : undefined,
|
|
* read : undefined,
|
|
* update : undefined,
|
|
* destroy : undefined
|
|
* }
|
|
*
|
|
* 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: {
|
|
* create : '/controller/new',
|
|
* read : '/controller/load',
|
|
* update : '/controller/update',
|
|
* destroy : '/controller/destroy_action'
|
|
* }
|
|
*
|
|
* If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the
|
|
* configured {@link Ext.data.proxy.Server#url url}.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
config = config || {};
|
|
/**
|
|
* @event exception
|
|
* Fires when the server returns an exception. This event may also be listened
|
|
* to in the event that a request has timed out or has been aborted.
|
|
* @param {Ext.data.proxy.Proxy} this
|
|
* @param {Object} response The response from the AJAX request
|
|
* @param {Ext.data.Operation} operation The operation that triggered request
|
|
*/
|
|
me.callParent([config]);
|
|
|
|
/**
|
|
* @cfg {Object} extraParams
|
|
* Extra parameters that will be included on every request. Individual requests with params of the same name
|
|
* will override these params when they are in conflict.
|
|
*/
|
|
me.extraParams = config.extraParams || {};
|
|
|
|
me.api = Ext.apply({}, config.api || me.api);
|
|
|
|
|
|
//backwards compatibility, will be deprecated in 5.0
|
|
me.nocache = me.noCache;
|
|
},
|
|
|
|
//in a ServerProxy all four CRUD operations are executed in the same manner, so we delegate to doRequest in each case
|
|
create: function() {
|
|
return this.doRequest.apply(this, arguments);
|
|
},
|
|
|
|
read: function() {
|
|
return this.doRequest.apply(this, arguments);
|
|
},
|
|
|
|
update: function() {
|
|
return this.doRequest.apply(this, arguments);
|
|
},
|
|
|
|
destroy: function() {
|
|
return this.doRequest.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Sets a value in the underlying {@link #extraParams}.
|
|
* @param {String} name The key for the new value
|
|
* @param {Object} value The value
|
|
*/
|
|
setExtraParam: function(name, value) {
|
|
this.extraParams[name] = value;
|
|
},
|
|
|
|
/**
|
|
* Creates an {@link Ext.data.Request Request} object from {@link Ext.data.Operation Operation}.
|
|
*
|
|
* This gets called from doRequest methods in subclasses of Server proxy.
|
|
*
|
|
* @param {Ext.data.Operation} operation The operation to execute
|
|
* @return {Ext.data.Request} The request object
|
|
*/
|
|
buildRequest: function(operation) {
|
|
var me = this,
|
|
// Clone params right now so that they can be mutated at any point further down the call stack
|
|
params = operation.params = Ext.apply({}, operation.params, me.extraParams),
|
|
request;
|
|
|
|
//copy any sorters, filters etc into the params so they can be sent over the wire
|
|
Ext.applyIf(params, me.getParams(operation));
|
|
|
|
// Set up the entity id parameter according to the configured name.
|
|
// This defaults to "id". But TreeStore has a "nodeParam" configuration which
|
|
// specifies the id parameter name of the node being loaded.
|
|
if (operation.id !== undefined && params[me.idParam] === undefined) {
|
|
params[me.idParam] = operation.id;
|
|
}
|
|
|
|
request = new Ext.data.Request({
|
|
params : params,
|
|
action : operation.action,
|
|
records : operation.records,
|
|
operation: operation,
|
|
url : operation.url,
|
|
|
|
// this is needed by JsonSimlet in order to properly construct responses for
|
|
// requests from this proxy
|
|
proxy: me
|
|
});
|
|
|
|
request.url = me.buildUrl(request);
|
|
|
|
/*
|
|
* Save the request on the Operation. Operations don't usually care about Request and Response data, but in the
|
|
* ServerProxy and any of its subclasses we add both request and response as they may be useful for further processing
|
|
*/
|
|
operation.request = request;
|
|
|
|
return request;
|
|
},
|
|
|
|
// Should this be documented as protected method?
|
|
processResponse: function(success, operation, request, response, callback, scope) {
|
|
var me = this,
|
|
reader,
|
|
result;
|
|
|
|
if (success === true) {
|
|
reader = me.getReader();
|
|
|
|
// Apply defaults to incoming data only for read operations.
|
|
// For create and update, there will already be a client-side record
|
|
// to match with which will contain any defaulted in values.
|
|
reader.applyDefaults = operation.action === 'read';
|
|
|
|
result = reader.read(me.extractResponseData(response));
|
|
|
|
if (result.success !== false) {
|
|
//see comment in buildRequest for why we include the response object here
|
|
Ext.apply(operation, {
|
|
response: response,
|
|
resultSet: result
|
|
});
|
|
|
|
operation.commitRecords(result.records);
|
|
operation.setCompleted();
|
|
operation.setSuccessful();
|
|
} else {
|
|
operation.setException(result.message);
|
|
me.fireEvent('exception', this, response, operation);
|
|
}
|
|
} else {
|
|
me.setException(operation, response);
|
|
me.fireEvent('exception', this, response, operation);
|
|
}
|
|
|
|
//this callback is the one that was passed to the 'read' or 'write' function above
|
|
if (typeof callback == 'function') {
|
|
callback.call(scope || me, operation);
|
|
}
|
|
|
|
me.afterRequest(request, success);
|
|
},
|
|
|
|
/**
|
|
* Sets up an exception on the operation
|
|
* @private
|
|
* @param {Ext.data.Operation} operation The operation
|
|
* @param {Object} response The response
|
|
*/
|
|
setException: function(operation, response) {
|
|
operation.setException({
|
|
status: response.status,
|
|
statusText: response.statusText
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Template method to allow subclasses to specify how to get the response for the reader.
|
|
* @template
|
|
* @private
|
|
* @param {Object} response The server response
|
|
* @return {Object} The response data to be used by the reader
|
|
*/
|
|
extractResponseData: Ext.identityFn,
|
|
|
|
/**
|
|
* Encode any values being sent to the server. Can be overridden in subclasses.
|
|
* @private
|
|
* @param {Array} value An array of sorters/filters.
|
|
* @return {Object} The encoded value
|
|
*/
|
|
applyEncoding: function(value) {
|
|
return Ext.encode(value);
|
|
},
|
|
|
|
/**
|
|
* Encodes the array of {@link Ext.util.Sorter} objects into a string to be sent in the request url. By default,
|
|
* this simply JSON-encodes the sorter data
|
|
* @param {Ext.util.Sorter[]} sorters The array of {@link Ext.util.Sorter Sorter} objects
|
|
* @return {String} The encoded sorters
|
|
*/
|
|
encodeSorters: function(sorters) {
|
|
var min = [],
|
|
length = sorters.length,
|
|
i = 0;
|
|
|
|
for (; i < length; i++) {
|
|
min[i] = {
|
|
property : sorters[i].property,
|
|
direction: sorters[i].direction
|
|
};
|
|
}
|
|
return this.applyEncoding(min);
|
|
|
|
},
|
|
|
|
/**
|
|
* Encodes the array of {@link Ext.util.Filter} objects into a string to be sent in the request url. By default,
|
|
* this simply JSON-encodes the filter data
|
|
* @param {Ext.util.Filter[]} filters The array of {@link Ext.util.Filter Filter} objects
|
|
* @return {String} The encoded filters
|
|
*/
|
|
encodeFilters: function(filters) {
|
|
var min = [],
|
|
length = filters.length,
|
|
i = 0;
|
|
|
|
for (; i < length; i++) {
|
|
min[i] = {
|
|
property: filters[i].property,
|
|
value : filters[i].value
|
|
};
|
|
}
|
|
return this.applyEncoding(min);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Copy any sorters, filters etc into the params so they can be sent over the wire
|
|
*/
|
|
getParams: function(operation) {
|
|
var me = this,
|
|
params = {},
|
|
isDef = Ext.isDefined,
|
|
groupers = operation.groupers,
|
|
sorters = operation.sorters,
|
|
filters = operation.filters,
|
|
page = operation.page,
|
|
start = operation.start,
|
|
limit = operation.limit,
|
|
simpleSortMode = me.simpleSortMode,
|
|
simpleGroupMode = me.simpleGroupMode,
|
|
pageParam = me.pageParam,
|
|
startParam = me.startParam,
|
|
limitParam = me.limitParam,
|
|
groupParam = me.groupParam,
|
|
groupDirectionParam = me.groupDirectionParam,
|
|
sortParam = me.sortParam,
|
|
filterParam = me.filterParam,
|
|
directionParam = me.directionParam,
|
|
hasGroups, index;
|
|
|
|
if (pageParam && isDef(page)) {
|
|
params[pageParam] = page;
|
|
}
|
|
|
|
if (startParam && isDef(start)) {
|
|
params[startParam] = start;
|
|
}
|
|
|
|
if (limitParam && isDef(limit)) {
|
|
params[limitParam] = limit;
|
|
}
|
|
|
|
hasGroups = groupParam && groupers && groupers.length > 0;
|
|
if (hasGroups) {
|
|
// Grouper is a subclass of sorter, so we can just use the sorter method
|
|
if (simpleGroupMode) {
|
|
params[groupParam] = groupers[0].property;
|
|
params[groupDirectionParam] = groupers[0].direction || 'ASC';
|
|
} else {
|
|
params[groupParam] = me.encodeSorters(groupers);
|
|
}
|
|
}
|
|
|
|
if (sortParam && sorters && sorters.length > 0) {
|
|
if (simpleSortMode) {
|
|
index = 0;
|
|
// Group will be included in sorters, so grab the next one
|
|
if (sorters.length > 1 && hasGroups) {
|
|
index = 1;
|
|
}
|
|
params[sortParam] = sorters[index].property;
|
|
params[directionParam] = sorters[index].direction;
|
|
} else {
|
|
params[sortParam] = me.encodeSorters(sorters);
|
|
}
|
|
|
|
}
|
|
|
|
if (filterParam && filters && filters.length > 0) {
|
|
params[filterParam] = me.encodeFilters(filters);
|
|
}
|
|
|
|
return params;
|
|
},
|
|
|
|
/**
|
|
* Generates a url based on a given Ext.data.Request object. By default, ServerProxy's buildUrl will add the
|
|
* cache-buster param to the end of the url. Subclasses may need to perform additional modifications to the url.
|
|
* @param {Ext.data.Request} request The request object
|
|
* @return {String} The url
|
|
*/
|
|
buildUrl: function(request) {
|
|
var me = this,
|
|
url = me.getUrl(request);
|
|
|
|
|
|
if (me.noCache) {
|
|
url = Ext.urlAppend(url, Ext.String.format("{0}={1}", me.cacheString, Ext.Date.now()));
|
|
}
|
|
|
|
return url;
|
|
},
|
|
|
|
/**
|
|
* Get the url for the request taking into account the order of priority,
|
|
* - The request
|
|
* - The api
|
|
* - The url
|
|
* @private
|
|
* @param {Ext.data.Request} request The request
|
|
* @return {String} The url
|
|
*/
|
|
getUrl: function(request) {
|
|
return request.url || this.api[request.action] || this.url;
|
|
},
|
|
|
|
/**
|
|
* In ServerProxy subclasses, the {@link #create}, {@link #read}, {@link #update} and {@link #destroy} methods all
|
|
* pass through to doRequest. Each ServerProxy subclass must implement the doRequest method - see {@link
|
|
* Ext.data.proxy.JsonP} and {@link Ext.data.proxy.Ajax} for examples. This method carries the same signature as
|
|
* each of the methods that delegate to it.
|
|
*
|
|
* @param {Ext.data.Operation} operation The Ext.data.Operation object
|
|
* @param {Function} callback The callback function to call when the Operation has completed
|
|
* @param {Object} scope The scope in which to execute the callback
|
|
*/
|
|
doRequest: function(operation, callback, scope) {
|
|
},
|
|
|
|
/**
|
|
* Optional callback function which can be used to clean up after a request has been completed.
|
|
* @param {Ext.data.Request} request The Request object
|
|
* @param {Boolean} success True if the request was successful
|
|
* @protected
|
|
* @template
|
|
* @method
|
|
*/
|
|
afterRequest: Ext.emptyFn,
|
|
|
|
onDestroy: function() {
|
|
Ext.destroy(this.reader, this.writer);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* AjaxProxy is one of the most widely-used ways of getting data into your application. It uses AJAX requests to load
|
|
* data from the server, usually to be placed into a {@link Ext.data.Store Store}. Let's take a look at a typical setup.
|
|
* Here we're going to set up a Store that has an AjaxProxy. To prepare, we'll also set up a {@link Ext.data.Model
|
|
* Model}:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email']
|
|
* });
|
|
*
|
|
* //The Store contains the AjaxProxy as an inline configuration
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url : 'users.json'
|
|
* }
|
|
* });
|
|
*
|
|
* store.load();
|
|
*
|
|
* Our example is going to load user data into a Store, so we start off by defining a {@link Ext.data.Model Model} with
|
|
* the fields that we expect the server to return. Next we set up the Store itself, along with a
|
|
* {@link Ext.data.Store#proxy proxy} configuration. This configuration was automatically turned into an
|
|
* Ext.data.proxy.Ajax instance, with the url we specified being passed into AjaxProxy's constructor.
|
|
* It's as if we'd done this:
|
|
*
|
|
* new Ext.data.proxy.Ajax({
|
|
* url: 'users.json',
|
|
* model: 'User',
|
|
* reader: 'json'
|
|
* });
|
|
*
|
|
* A couple of extra configurations appeared here - {@link #model} and {@link #reader}. These are set by default when we
|
|
* create the proxy via the Store - the Store already knows about the Model, and Proxy's default {@link
|
|
* Ext.data.reader.Reader Reader} is {@link Ext.data.reader.Json JsonReader}.
|
|
*
|
|
* Now when we call store.load(), the AjaxProxy springs into action, making a request to the url we configured
|
|
* ('users.json' in this case). As we're performing a read, it sends a GET request to that url (see
|
|
* {@link #actionMethods} to customize this - by default any kind of read will be sent as a GET request and any kind of write
|
|
* will be sent as a POST request).
|
|
*
|
|
* # Limitations
|
|
*
|
|
* AjaxProxy cannot be used to retrieve data from other domains. If your application is running on http://domainA.com it
|
|
* cannot load data from http://domainB.com because browsers have a built-in security policy that prohibits domains
|
|
* talking to each other via AJAX.
|
|
*
|
|
* If you need to read data from another domain and can't set up a proxy server (some software that runs on your own
|
|
* domain's web server and transparently forwards requests to http://domainB.com, making it look like they actually came
|
|
* from http://domainA.com), you can use {@link Ext.data.proxy.JsonP} and a technique known as JSON-P (JSON with
|
|
* Padding), which can help you get around the problem so long as the server on http://domainB.com is set up to support
|
|
* JSON-P responses. See {@link Ext.data.proxy.JsonP JsonPProxy}'s introduction docs for more details.
|
|
*
|
|
* # Readers and Writers
|
|
*
|
|
* AjaxProxy can be configured to use any type of {@link Ext.data.reader.Reader Reader} to decode the server's response.
|
|
* If no Reader is supplied, AjaxProxy will default to using a {@link Ext.data.reader.Json JsonReader}. Reader
|
|
* configuration can be passed in as a simple object, which the Proxy automatically turns into a {@link
|
|
* Ext.data.reader.Reader Reader} instance:
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* model: 'User',
|
|
* reader: {
|
|
* type: 'xml',
|
|
* root: 'users'
|
|
* }
|
|
* });
|
|
*
|
|
* proxy.getReader(); //returns an {@link Ext.data.reader.Xml XmlReader} instance based on the config we supplied
|
|
*
|
|
* # Url generation
|
|
*
|
|
* AjaxProxy automatically inserts any sorting, filtering, paging and grouping options into the url it generates for
|
|
* each request. These are controlled with the following configuration options:
|
|
*
|
|
* - {@link #pageParam} - controls how the page number is sent to the server (see also {@link #startParam} and {@link #limitParam})
|
|
* - {@link #sortParam} - controls how sort information is sent to the server
|
|
* - {@link #groupParam} - controls how grouping information is sent to the server
|
|
* - {@link #filterParam} - controls how filter information is sent to the server
|
|
*
|
|
* Each request sent by AjaxProxy is described by an {@link Ext.data.Operation Operation}. To see how we can customize
|
|
* the generated urls, let's say we're loading the Proxy with the following Operation:
|
|
*
|
|
* var operation = new Ext.data.Operation({
|
|
* action: 'read',
|
|
* page : 2
|
|
* });
|
|
*
|
|
* Now we'll issue the request for this Operation by calling {@link #read}:
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* url: '/users'
|
|
* });
|
|
*
|
|
* proxy.read(operation); //GET /users?page=2
|
|
*
|
|
* Easy enough - the Proxy just copied the page property from the Operation. We can customize how this page data is sent
|
|
* to the server:
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* url: '/users',
|
|
* pageParam: 'pageNumber'
|
|
* });
|
|
*
|
|
* proxy.read(operation); //GET /users?pageNumber=2
|
|
*
|
|
* Alternatively, our Operation could have been configured to send start and limit parameters instead of page:
|
|
*
|
|
* var operation = new Ext.data.Operation({
|
|
* action: 'read',
|
|
* start : 50,
|
|
* limit : 25
|
|
* });
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* url: '/users'
|
|
* });
|
|
*
|
|
* proxy.read(operation); //GET /users?start=50&limit;=25
|
|
*
|
|
* Again we can customize this url:
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* url: '/users',
|
|
* startParam: 'startIndex',
|
|
* limitParam: 'limitIndex'
|
|
* });
|
|
*
|
|
* proxy.read(operation); //GET /users?startIndex=50&limitIndex;=25
|
|
*
|
|
* AjaxProxy will also send sort and filter information to the server. Let's take a look at how this looks with a more
|
|
* expressive Operation object:
|
|
*
|
|
* var operation = new Ext.data.Operation({
|
|
* action: 'read',
|
|
* sorters: [
|
|
* new Ext.util.Sorter({
|
|
* property : 'name',
|
|
* direction: 'ASC'
|
|
* }),
|
|
* new Ext.util.Sorter({
|
|
* property : 'age',
|
|
* direction: 'DESC'
|
|
* })
|
|
* ],
|
|
* filters: [
|
|
* new Ext.util.Filter({
|
|
* property: 'eyeColor',
|
|
* value : 'brown'
|
|
* })
|
|
* ]
|
|
* });
|
|
*
|
|
* This is the type of object that is generated internally when loading a {@link Ext.data.Store Store} with sorters and
|
|
* filters defined. By default the AjaxProxy will JSON encode the sorters and filters, resulting in something like this
|
|
* (note that the url is escaped before sending the request, but is left unescaped here for clarity):
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* url: '/users'
|
|
* });
|
|
*
|
|
* proxy.read(operation); //GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter;=[{"property":"eyeColor","value":"brown"}]
|
|
*
|
|
* We can again customize how this is created by supplying a few configuration options. Let's say our server is set up
|
|
* to receive sorting information is a format like "sortBy=name#ASC,age#DESC". We can configure AjaxProxy to provide
|
|
* that format like this:
|
|
*
|
|
* var proxy = new Ext.data.proxy.Ajax({
|
|
* url: '/users',
|
|
* sortParam: 'sortBy',
|
|
* filterParam: 'filterBy',
|
|
*
|
|
* //our custom implementation of sorter encoding - turns our sorters into "name#ASC,age#DESC"
|
|
* encodeSorters: function(sorters) {
|
|
* var length = sorters.length,
|
|
* sortStrs = [],
|
|
* sorter, i;
|
|
*
|
|
* for (i = 0; i < length; i++) {
|
|
* sorter = sorters[i];
|
|
*
|
|
* sortStrs[i] = sorter.property + '#' + sorter.direction
|
|
* }
|
|
*
|
|
* return sortStrs.join(",");
|
|
* }
|
|
* });
|
|
*
|
|
* proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&filterBy;=[{"property":"eyeColor","value":"brown"}]
|
|
*
|
|
* We can also provide a custom {@link #encodeFilters} function to encode our filters.
|
|
*
|
|
* @constructor
|
|
* Note that if this HttpProxy is being used by a {@link Ext.data.Store Store}, then the Store's call to
|
|
* {@link Ext.data.Store#method-load load} will override any specified callback and params options. In this case, use the
|
|
* {@link Ext.data.Store Store}'s events to modify parameters, or react to loading events.
|
|
*
|
|
* @param {Object} config (optional) Config object.
|
|
* If an options parameter is passed, the singleton {@link Ext.Ajax} object will be used to make the request.
|
|
*/
|
|
Ext.define('Ext.data.proxy.Ajax', {
|
|
|
|
extend: Ext.data.proxy.Server ,
|
|
alias: 'proxy.ajax',
|
|
alternateClassName: ['Ext.data.HttpProxy', 'Ext.data.AjaxProxy'],
|
|
|
|
/**
|
|
* @property {Object} actionMethods
|
|
* Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions
|
|
* and 'POST' for 'create', 'update' and 'destroy' actions. The {@link Ext.data.proxy.Rest} maps these to the
|
|
* correct RESTful methods.
|
|
*/
|
|
actionMethods: {
|
|
create : 'POST',
|
|
read : 'GET',
|
|
update : 'POST',
|
|
destroy: 'POST'
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} binary
|
|
* True to request binary data from the server. This feature requires
|
|
* the use of a binary reader such as {@link Ext.data.amf.Reader AMF Reader}
|
|
*/
|
|
binary: false,
|
|
|
|
/**
|
|
* @cfg {Object} headers
|
|
* Any headers to add to the Ajax request. Defaults to undefined.
|
|
*/
|
|
|
|
doRequest: function(operation, callback, scope) {
|
|
var writer = this.getWriter(),
|
|
request = this.buildRequest(operation);
|
|
|
|
if (operation.allowWrite()) {
|
|
request = writer.write(request);
|
|
}
|
|
|
|
Ext.apply(request, {
|
|
binary : this.binary,
|
|
headers : this.headers,
|
|
timeout : this.timeout,
|
|
scope : this,
|
|
callback : this.createRequestCallback(request, operation, callback, scope),
|
|
method : this.getMethod(request),
|
|
disableCaching: false // explicitly set it to false, ServerProxy handles caching
|
|
});
|
|
|
|
Ext.Ajax.request(request);
|
|
|
|
return request;
|
|
},
|
|
|
|
/**
|
|
* Returns the HTTP method name for a given request. By default this returns based on a lookup on
|
|
* {@link #actionMethods}.
|
|
* @param {Ext.data.Request} request The request object
|
|
* @return {String} The HTTP method to use (should be one of 'GET', 'POST', 'PUT' or 'DELETE')
|
|
*/
|
|
getMethod: function(request) {
|
|
return this.actionMethods[request.action];
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* TODO: This is currently identical to the JsonPProxy version except for the return function's signature. There is a lot
|
|
* of code duplication inside the returned function so we need to find a way to DRY this up.
|
|
* @param {Ext.data.Request} request The Request object
|
|
* @param {Ext.data.Operation} operation The Operation being executed
|
|
* @param {Function} callback The callback function to be called when the request completes. This is usually the callback
|
|
* passed to doRequest
|
|
* @param {Object} scope The scope in which to execute the callback function
|
|
* @return {Function} The callback function
|
|
*/
|
|
createRequestCallback: function(request, operation, callback, scope) {
|
|
var me = this;
|
|
|
|
return function(options, success, response) {
|
|
me.processResponse(success, operation, request, response, callback, scope);
|
|
};
|
|
}
|
|
}, function() {
|
|
//backwards compatibility, remove in Ext JS 5.0
|
|
Ext.data.HttpProxy = this;
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Base class for any client-side storage. Used as a superclass for {@link Ext.data.proxy.Memory Memory} and
|
|
* {@link Ext.data.proxy.WebStorage Web Storage} proxies. Do not use directly, use one of the subclasses instead.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.proxy.Client', {
|
|
extend: Ext.data.proxy.Proxy ,
|
|
alternateClassName: 'Ext.data.ClientProxy',
|
|
|
|
/**
|
|
* @property {Boolean} isSynchronous
|
|
* `true` in this class to identify that requests made on this proxy are
|
|
* performed synchronously
|
|
*/
|
|
isSynchronous: true,
|
|
|
|
/**
|
|
* Abstract function that must be implemented by each ClientProxy subclass. This should purge all record data
|
|
* from the client side storage, as well as removing any supporting data (such as lists of record IDs)
|
|
*/
|
|
clear: function() {
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* In-memory proxy. This proxy simply uses a local variable for data storage/retrieval, so its contents are lost on
|
|
* every page refresh.
|
|
*
|
|
* Usually this Proxy isn't used directly, serving instead as a helper to a {@link Ext.data.Store Store} where a reader
|
|
* is required to load data. For example, say we have a Store for a User model and have some inline data we want to
|
|
* load, but this data isn't in quite the right format: we can use a MemoryProxy with a JsonReader to read it into our
|
|
* Store:
|
|
*
|
|
* //this is the model we will be using in the store
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'id', type: 'int'},
|
|
* {name: 'name', type: 'string'},
|
|
* {name: 'phone', type: 'string', mapping: 'phoneNumber'}
|
|
* ]
|
|
* });
|
|
*
|
|
* //this data does not line up to our model fields - the phone field is called phoneNumber
|
|
* var data = {
|
|
* users: [
|
|
* {
|
|
* id: 1,
|
|
* name: 'Ed Spencer',
|
|
* phoneNumber: '555 1234'
|
|
* },
|
|
* {
|
|
* id: 2,
|
|
* name: 'Abe Elias',
|
|
* phoneNumber: '666 1234'
|
|
* }
|
|
* ]
|
|
* };
|
|
*
|
|
* //note how we set the 'root' in the reader to match the data structure above
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* autoLoad: true,
|
|
* model: 'User',
|
|
* data : data,
|
|
* proxy: {
|
|
* type: 'memory',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'users'
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.data.proxy.Memory', {
|
|
extend: Ext.data.proxy.Client ,
|
|
alias: 'proxy.memory',
|
|
alternateClassName: 'Ext.data.MemoryProxy',
|
|
|
|
/**
|
|
* @cfg {Boolean} [enablePaging=false]
|
|
* Configure as `true` to enable this MemoryProxy to honour a read operation's `start` and `limit` options.
|
|
*
|
|
* When `true`, read operations will be able to read *pages* of records from the data object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} data
|
|
* Optional data to pass to configured Reader.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
this.callParent([config]);
|
|
|
|
//ensures that the reader has been instantiated properly
|
|
this.setReader(this.reader);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fake processing function to commit the records, set the current operation
|
|
* to successful and call the callback if provided. This function is shared
|
|
* by the create, update and destroy methods to perform the bare minimum
|
|
* processing required for the proxy to register a result from the action.
|
|
*/
|
|
updateOperation: function(operation, callback, scope) {
|
|
var i = 0,
|
|
recs = operation.getRecords(),
|
|
len = recs.length;
|
|
|
|
for (i; i < len; i++) {
|
|
recs[i].commit();
|
|
}
|
|
operation.setCompleted();
|
|
operation.setSuccessful();
|
|
|
|
Ext.callback(callback, scope || this, [operation]);
|
|
},
|
|
|
|
/**
|
|
* Currently this is a hard-coded method that simply commits any records and sets the operation to successful,
|
|
* then calls the callback function, if provided. It is essentially mocking a server call in memory, but since
|
|
* there is no real back end in this case there's not much else to do. This method can be easily overridden to
|
|
* implement more complex logic if needed.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
create: function() {
|
|
this.updateOperation.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Currently this is a hard-coded method that simply commits any records and sets the operation to successful,
|
|
* then calls the callback function, if provided. It is essentially mocking a server call in memory, but since
|
|
* there is no real back end in this case there's not much else to do. This method can be easily overridden to
|
|
* implement more complex logic if needed.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
update: function() {
|
|
this.updateOperation.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Currently this is a hard-coded method that simply commits any records and sets the operation to successful,
|
|
* then calls the callback function, if provided. It is essentially mocking a server call in memory, but since
|
|
* there is no real back end in this case there's not much else to do. This method can be easily overridden to
|
|
* implement more complex logic if needed.
|
|
* @param {Ext.data.Operation} operation The Operation to perform
|
|
* @param {Function} callback Callback function to be called when the Operation has completed (whether
|
|
* successful or not)
|
|
* @param {Object} scope Scope to execute the callback function in
|
|
* @method
|
|
*/
|
|
destroy: function() {
|
|
this.updateOperation.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Reads data from the configured {@link #data} object. Uses the Proxy's {@link #reader}, if present.
|
|
* @param {Ext.data.Operation} operation The read Operation
|
|
* @param {Function} callback The callback to call when reading has completed
|
|
* @param {Object} scope The scope to call the callback function in
|
|
*/
|
|
read: function(operation, callback, scope) {
|
|
var me = this,
|
|
resultSet = operation.resultSet = me.getReader().read(me.data),
|
|
records = resultSet.records,
|
|
sorters = operation.sorters,
|
|
groupers = operation.groupers,
|
|
filters = operation.filters;
|
|
|
|
operation.setCompleted();
|
|
|
|
// Apply filters, sorters, and start/limit options
|
|
if (resultSet.success) {
|
|
|
|
// Filter the resulting array of records
|
|
if (filters && filters.length) {
|
|
records = resultSet.records = Ext.Array.filter(records, Ext.util.Filter.createFilterFn(filters));
|
|
}
|
|
|
|
// Remotely, groupers just mean top priority sorters
|
|
if (groupers && groupers.length) {
|
|
// Must concat so as not to mutate passed sorters array which could be the items property of the sorters collection
|
|
sorters = sorters ? sorters.concat(groupers) : sorters;
|
|
}
|
|
|
|
// Sort by the specified groupers and sorters
|
|
if (sorters && sorters.length) {
|
|
resultSet.records = Ext.Array.sort(records, Ext.util.Sortable.createComparator(sorters));
|
|
}
|
|
|
|
// Reader reads the whole passed data object.
|
|
// If successful and we were given a start and limit, slice the result.
|
|
if (me.enablePaging && operation.start !== undefined && operation.limit !== undefined) {
|
|
|
|
// Attempt to read past end of memory dataset - convert to failure
|
|
if (operation.start >= resultSet.total) {
|
|
resultSet.success = false;
|
|
resultSet.count = 0;
|
|
resultSet.records = [];
|
|
}
|
|
// Range is valid, slice it up.
|
|
else {
|
|
resultSet.records = Ext.Array.slice(resultSet.records, operation.start, operation.start + operation.limit);
|
|
resultSet.count = resultSet.records.length;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (resultSet.success) {
|
|
operation.setSuccessful();
|
|
} else {
|
|
me.fireEvent('exception', me, null, operation);
|
|
}
|
|
Ext.callback(callback, scope || me, [operation]);
|
|
},
|
|
|
|
clear: Ext.emptyFn
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* @class Ext.util.LruCache
|
|
* @extend Ext.util.HashMap
|
|
* A linked {@link Ext.util.HashMap HashMap} implementation which maintains most recently accessed
|
|
* items at the end of the list, and purges the cache down to the most recently accessed {@link #maxSize} items
|
|
* upon add.
|
|
*/
|
|
Ext.define('Ext.util.LruCache', {
|
|
extend: Ext.util.HashMap ,
|
|
|
|
/**
|
|
* @cfg {Number} maxSize The maximum size the cache is allowed to grow to before further additions cause
|
|
* removal of the least recently used entry.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
Ext.apply(this, config);
|
|
this.callParent([config]);
|
|
},
|
|
|
|
/*
|
|
* @inheritdoc
|
|
*/
|
|
add: function(key, newValue) {
|
|
var me = this,
|
|
existingKey = me.findKey(newValue),
|
|
entry;
|
|
|
|
// "new" value is in the list.
|
|
if (existingKey) {
|
|
me.unlinkEntry(entry = me.map[existingKey]);
|
|
entry.prev = me.last;
|
|
entry.next = null;
|
|
}
|
|
// Genuinely new: create an entry for it.
|
|
else {
|
|
entry = {
|
|
prev: me.last,
|
|
next: null,
|
|
key: key,
|
|
value: newValue
|
|
};
|
|
}
|
|
|
|
// If the list is not empty, update the last entry
|
|
if (me.last) {
|
|
me.last.next = entry;
|
|
}
|
|
// List is empty
|
|
else {
|
|
me.first = entry;
|
|
}
|
|
me.last = entry;
|
|
me.callParent([key, entry]);
|
|
me.prune();
|
|
return newValue;
|
|
},
|
|
|
|
// @private
|
|
insertBefore: function(key, newValue, sibling) {
|
|
var me = this,
|
|
existingKey,
|
|
entry;
|
|
|
|
// NOT an assignment.
|
|
// If there is a following sibling
|
|
if (sibling = this.map[this.findKey(sibling)]) {
|
|
existingKey = me.findKey(newValue);
|
|
|
|
// "new" value is in the list.
|
|
if (existingKey) {
|
|
me.unlinkEntry(entry = me.map[existingKey]);
|
|
}
|
|
// Genuinely new: create an entry for it.
|
|
else {
|
|
entry = {
|
|
prev: sibling.prev,
|
|
next: sibling,
|
|
key: key,
|
|
value: newValue
|
|
};
|
|
}
|
|
|
|
if (sibling.prev) {
|
|
entry.prev.next = entry;
|
|
} else {
|
|
me.first = entry;
|
|
}
|
|
entry.next = sibling;
|
|
sibling.prev = entry;
|
|
me.prune();
|
|
return newValue;
|
|
}
|
|
// No following sibling, it's just an add.
|
|
else {
|
|
return me.add(key, newValue);
|
|
}
|
|
},
|
|
|
|
/*
|
|
* @inheritdoc
|
|
*/
|
|
get: function(key) {
|
|
var entry = this.map[key];
|
|
if (entry) {
|
|
|
|
// If it's not the end, move to end of list on get
|
|
if (entry.next) {
|
|
this.moveToEnd(entry);
|
|
}
|
|
return entry.value;
|
|
}
|
|
},
|
|
|
|
/*
|
|
* @private
|
|
*/
|
|
removeAtKey: function(key) {
|
|
this.unlinkEntry(this.map[key]);
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
/*
|
|
* @inheritdoc
|
|
*/
|
|
clear: function(/* private */ initial) {
|
|
this.first = this.last = null;
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
// private. Only used by internal methods.
|
|
unlinkEntry: function(entry) {
|
|
// Stitch the list back up.
|
|
if (entry) {
|
|
if (entry.next) {
|
|
entry.next.prev = entry.prev;
|
|
} else {
|
|
this.last = entry.prev;
|
|
}
|
|
if (entry.prev) {
|
|
entry.prev.next = entry.next;
|
|
} else {
|
|
this.first = entry.next;
|
|
}
|
|
entry.prev = entry.next = null;
|
|
}
|
|
},
|
|
|
|
// private. Only used by internal methods.
|
|
moveToEnd: function(entry) {
|
|
this.unlinkEntry(entry);
|
|
|
|
// NOT an assignment.
|
|
// If the list is not empty, update the last entry
|
|
if (entry.prev = this.last) {
|
|
this.last.next = entry;
|
|
}
|
|
// List is empty
|
|
else {
|
|
this.first = entry;
|
|
}
|
|
this.last = entry;
|
|
},
|
|
|
|
/*
|
|
* @private
|
|
*/
|
|
getArray: function(isKey) {
|
|
var arr = [],
|
|
entry = this.first;
|
|
|
|
while (entry) {
|
|
arr.push(isKey ? entry.key: entry.value);
|
|
entry = entry.next;
|
|
}
|
|
return arr;
|
|
},
|
|
|
|
/**
|
|
* Executes the specified function once for each item in the cache.
|
|
* Returning false from the function will cease iteration.
|
|
*
|
|
* By default, iteration is from least recently used to most recent.
|
|
*
|
|
* The paramaters passed to the function are:
|
|
* <div class="mdetail-params"><ul>
|
|
* <li><b>key</b> : String<p class="sub-desc">The key of the item</p></li>
|
|
* <li><b>value</b> : Number<p class="sub-desc">The value of the item</p></li>
|
|
* <li><b>length</b> : Number<p class="sub-desc">The total number of items in the hash</p></li>
|
|
* </ul></div>
|
|
* @param {Function} fn The function to execute.
|
|
* @param {Object} scope The scope (<code>this</code> reference) to execute in. Defaults to this LruCache.
|
|
* @param {Boolean} [reverse=false] Pass <code>true</code> to iterate the list in reverse (most recent first) order.
|
|
* @return {Ext.util.LruCache} this
|
|
*/
|
|
each: function(fn, scope, reverse) {
|
|
var me = this,
|
|
entry = reverse ? me.last : me.first,
|
|
length = me.length;
|
|
|
|
scope = scope || me;
|
|
while (entry) {
|
|
if (fn.call(scope, entry.key, entry.value, length) === false) {
|
|
break;
|
|
}
|
|
entry = reverse ? entry.prev : entry.next;
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
findKey: function(value) {
|
|
var key,
|
|
map = this.map;
|
|
|
|
for (key in map) {
|
|
// Attention. Differs from subclass in that this compares the value property
|
|
// of the entry.
|
|
if (map.hasOwnProperty(key) && map[key].value === value) {
|
|
return key;
|
|
}
|
|
}
|
|
return undefined;
|
|
},
|
|
|
|
/**
|
|
* Performs a shallow copy on this haLruCachesh.
|
|
* @return {Ext.util.HashMap} The new hash object.
|
|
*/
|
|
clone: function() {
|
|
var newCache = new this.self(this.initialConfig),
|
|
map = this.map,
|
|
key;
|
|
|
|
newCache.suspendEvents();
|
|
for (key in map) {
|
|
if (map.hasOwnProperty(key)) {
|
|
newCache.add(key, map[key].value);
|
|
}
|
|
}
|
|
newCache.resumeEvents();
|
|
return newCache;
|
|
},
|
|
|
|
/**
|
|
* Purge the least recently used entries if the maxSize has been exceeded.
|
|
*/
|
|
prune: function() {
|
|
var me = this,
|
|
purgeCount = me.maxSize ? (me.length - me.maxSize) : 0;
|
|
|
|
if (purgeCount > 0) {
|
|
for (; me.first && purgeCount; purgeCount--) {
|
|
me.removeAtKey(me.first.key);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @method containsKey
|
|
* @private
|
|
*/
|
|
/**
|
|
* @method contains
|
|
* @private
|
|
*/
|
|
/**
|
|
* @method getKeys
|
|
* @private
|
|
*/
|
|
/**
|
|
* @method getValues
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.PageMap
|
|
* @extends Ext.util.LruCache
|
|
* Private class for use by only Store when configured `buffered: true`.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.PageMap', {
|
|
extend: Ext.util.LruCache ,
|
|
|
|
// Maintain a generation counter, so that the Store can reject incoming pages destined for the previous generation
|
|
clear: function(initial) {
|
|
var me = this;
|
|
me.pageMapGeneration = (me.pageMapGeneration || 0) + 1;
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
forEach: function(fn, scope) {
|
|
var me = this,
|
|
pageNumbers = Ext.Object.getKeys(me.map),
|
|
pageCount = pageNumbers.length,
|
|
i, j,
|
|
pageNumber,
|
|
page,
|
|
pageSize;
|
|
|
|
for (i = 0; i < pageCount; i++) {
|
|
pageNumbers[i] = Number(pageNumbers[i]);
|
|
}
|
|
Ext.Array.sort(pageNumbers);
|
|
scope = scope || me;
|
|
for (i = 0; i < pageCount; i++) {
|
|
pageNumber = pageNumbers[i];
|
|
page = me.getPage(pageNumber);
|
|
pageSize = page.length;
|
|
for (j = 0; j < pageSize; j++) {
|
|
if (fn.call(scope, page[j], (pageNumber - 1) * me.pageSize + j) === false) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the first record in this page map which elicits a true return value from the
|
|
* passed selection function.
|
|
*
|
|
* **IMPORTANT
|
|
* This can ONLY find records which happen to be cached in the page cache. This will be parts of the dataset around the currently
|
|
* visible zone, or recently visited zones if the pages have not yet been purged from the cache.
|
|
*
|
|
* This CAN NOT find records which have not been loaded into the cache.**
|
|
*
|
|
* If full client side searching is required, do not use a buffered store, instead use a regular, fully loaded store and
|
|
* use the {@link Ext.grid.plugin.BufferedRenderer BufferedRenderer} plugin to minimize DOM footprint.
|
|
* @param {Function} fn The selection function to execute for each item.
|
|
* @param {Mixed} fn.rec The record.
|
|
* @param {Mixed} fn.index The index in the total dataset of the record.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the function is executed. Defaults to this PageMap.
|
|
* @return {Object} The first record in this page map which returned true from the selection
|
|
* function, or null if none was found.
|
|
*/
|
|
findBy: function(fn, scope) {
|
|
var me = this,
|
|
result = null;
|
|
|
|
scope = scope || me;
|
|
me.forEach(function(rec, index) {
|
|
if (fn.call(scope, rec, index)) {
|
|
result = rec;
|
|
return false;
|
|
}
|
|
});
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Returns the index *in the whole dataset* of the first record in this page map which elicits a true return value from the
|
|
* passed selection function.
|
|
*
|
|
* **IMPORTANT
|
|
* This can ONLY find records which happen to be cached in the page cache. This will be parts of the dataset around the currently
|
|
* visible zone, or recently visited zones if the pages have not yet been purged from the cache.
|
|
*
|
|
* This CAN NOT find records which have not been loaded into the cache.**
|
|
*
|
|
* If full client side searching is required, do not use a buffered store, instead use a regular, fully loaded store and
|
|
* use the {@link Ext.grid.plugin.BufferedRenderer BufferedRenderer} plugin to minimize DOM footprint.
|
|
* @param {Function} fn The selection function to execute for each item.
|
|
* @param {Mixed} fn.rec The record.
|
|
* @param {Mixed} fn.index The index in the total dataset of the record.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the function is executed. Defaults to this PageMap.
|
|
* @return {Number} The index first record in this page map which returned true from the selection
|
|
* function, or -1 if none was found.
|
|
*/
|
|
findIndexBy: function(fn, scope) {
|
|
var me = this,
|
|
result = -1;
|
|
|
|
scope = scope || me;
|
|
me.forEach(function(rec, index) {
|
|
if (fn.call(scope, rec)) {
|
|
result = index;
|
|
return false;
|
|
}
|
|
});
|
|
return result;
|
|
},
|
|
|
|
getPageFromRecordIndex: function() {
|
|
return Ext.data.Store.prototype.getPageFromRecordIndex.apply(this, arguments);
|
|
},
|
|
|
|
addAll: function(records) {
|
|
this.addPage(1, records);
|
|
},
|
|
|
|
addPage: function(pageNumber, records) {
|
|
var me = this,
|
|
lastPage = pageNumber + Math.floor((records.length - 1) / me.pageSize),
|
|
startIdx,
|
|
page;
|
|
|
|
// Account for being handed a block of records spanning several pages.
|
|
// This can happen when loading from a MemoryProxy before a viewSize has been determined.
|
|
for (startIdx = 0; pageNumber <= lastPage; pageNumber++, startIdx += me.pageSize) {
|
|
page = Ext.Array.slice(records, startIdx, startIdx + me.pageSize);
|
|
me.add(pageNumber, page);
|
|
me.fireEvent('pageAdded', pageNumber, page);
|
|
}
|
|
},
|
|
|
|
getCount: function() {
|
|
var result = this.callParent();
|
|
if (result) {
|
|
result = (result - 1) * this.pageSize + this.last.value.length;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
indexOf: function(record) {
|
|
return record ? record.index : -1;
|
|
},
|
|
|
|
insert: function() {
|
|
},
|
|
|
|
remove: function() {
|
|
},
|
|
|
|
removeAt: function() {
|
|
},
|
|
|
|
getPage: function(pageNumber) {
|
|
return this.get(pageNumber);
|
|
},
|
|
|
|
hasRange: function(start, end) {
|
|
var pageNumber = this.getPageFromRecordIndex(start),
|
|
endPageNumber = this.getPageFromRecordIndex(end);
|
|
|
|
for (; pageNumber <= endPageNumber; pageNumber++) {
|
|
if (!this.hasPage(pageNumber)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
hasPage: function(pageNumber) {
|
|
// We must use this.get to trigger an access so that the page which is checked for presence is not eligible for pruning
|
|
return !!this.get(pageNumber);
|
|
},
|
|
|
|
getAt: function(index) {
|
|
return this.getRange(index, index)[0];
|
|
},
|
|
|
|
getRange: function(start, end) {
|
|
if (!this.hasRange(start, end)) {
|
|
Ext.Error.raise('PageMap asked for range which it does not have');
|
|
}
|
|
var me = this,
|
|
startPageNumber = me.getPageFromRecordIndex(start),
|
|
endPageNumber = me.getPageFromRecordIndex(end),
|
|
dataStart = (startPageNumber - 1) * me.pageSize,
|
|
dataEnd = (endPageNumber * me.pageSize) - 1,
|
|
pageNumber = startPageNumber,
|
|
result = [],
|
|
sliceBegin, sliceEnd, doSlice,
|
|
i = 0, len;
|
|
|
|
for (; pageNumber <= endPageNumber; pageNumber++) {
|
|
|
|
// First and last pages will need slicing to cut into the actual wanted records
|
|
if (pageNumber == startPageNumber) {
|
|
sliceBegin = start - dataStart;
|
|
doSlice = true;
|
|
} else {
|
|
sliceBegin = 0;
|
|
doSlice = false;
|
|
}
|
|
if (pageNumber == endPageNumber) {
|
|
sliceEnd = me.pageSize - (dataEnd - end);
|
|
doSlice = true;
|
|
}
|
|
|
|
// First and last pages will need slicing
|
|
if (doSlice) {
|
|
Ext.Array.push(result, Ext.Array.slice(me.getPage(pageNumber), sliceBegin, sliceEnd));
|
|
} else {
|
|
Ext.Array.push(result, me.getPage(pageNumber));
|
|
}
|
|
}
|
|
|
|
// Inject the dataset ordinal position into the record as the index
|
|
for (len = result.length; i < len; i++) {
|
|
result[i].index = start++;
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
/** */
|
|
Ext.define('Ext.data.Group', {
|
|
|
|
extend: Ext.util.Observable ,
|
|
|
|
key: undefined,
|
|
|
|
dirty: true,
|
|
|
|
constructor: function(){
|
|
this.callParent(arguments);
|
|
this.records = [];
|
|
},
|
|
|
|
contains: function(record){
|
|
return Ext.Array.indexOf(this.records, record) !== -1;
|
|
},
|
|
|
|
add: function(records) {
|
|
Ext.Array.push(this.records, records);
|
|
this.dirty = true;
|
|
},
|
|
|
|
remove: function(records) {
|
|
if (!Ext.isArray(records)) {
|
|
records = [records];
|
|
}
|
|
|
|
var len = records.length,
|
|
i;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
Ext.Array.remove(this.records, records[i]);
|
|
}
|
|
this.dirty = true;
|
|
},
|
|
|
|
isDirty: function(){
|
|
return this.dirty;
|
|
},
|
|
|
|
hasAggregate: function(){
|
|
return !!this.aggregate;
|
|
},
|
|
|
|
setDirty: function(){
|
|
this.dirty = true;
|
|
},
|
|
|
|
commit: function(){
|
|
this.dirty = false;
|
|
},
|
|
|
|
isCollapsed: function(){
|
|
return this.collapsed;
|
|
},
|
|
|
|
getAggregateRecord: function(forceNew){
|
|
var me = this,
|
|
Model;
|
|
|
|
if (forceNew === true || me.dirty || !me.aggregate) {
|
|
Model = me.store.model;
|
|
me.aggregate = new Model();
|
|
me.aggregate.isSummary = true;
|
|
}
|
|
return me.aggregate;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* The Store class encapsulates a client side cache of {@link Ext.data.Model Model} objects. Stores load data via a
|
|
* {@link Ext.data.proxy.Proxy Proxy}, and also provide functions for {@link #sort sorting}, {@link #filter filtering}
|
|
* and querying the {@link Ext.data.Model model} instances contained within it.
|
|
*
|
|
* Creating a Store is easy - we just tell it the Model and the Proxy to use for loading and saving its data:
|
|
*
|
|
* // Set up a {@link Ext.data.Model model} to use in our Store
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* {name: 'firstName', type: 'string'},
|
|
* {name: 'lastName', type: 'string'},
|
|
* {name: 'age', type: 'int'},
|
|
* {name: 'eyeColor', type: 'string'}
|
|
* ]
|
|
* });
|
|
*
|
|
* var myStore = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url: '/users.json',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'users'
|
|
* }
|
|
* },
|
|
* autoLoad: true
|
|
* });
|
|
*
|
|
* In the example above we configured an AJAX proxy to load data from the url '/users.json'. We told our Proxy to use a
|
|
* {@link Ext.data.reader.Json JsonReader} to parse the response from the server into Model object - {@link
|
|
* Ext.data.reader.Json see the docs on JsonReader} for details.
|
|
*
|
|
* ## Inline data
|
|
*
|
|
* Stores can also load data inline. Internally, Store converts each of the objects we pass in as {@link #cfg-data} into
|
|
* Model instances:
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* data : [
|
|
* {firstName: 'Ed', lastName: 'Spencer'},
|
|
* {firstName: 'Tommy', lastName: 'Maintz'},
|
|
* {firstName: 'Aaron', lastName: 'Conran'},
|
|
* {firstName: 'Jamie', lastName: 'Avins'}
|
|
* ]
|
|
* });
|
|
*
|
|
* Loading inline data using the method above is great if the data is in the correct format already (e.g. it doesn't
|
|
* need to be processed by a {@link Ext.data.reader.Reader reader}). If your inline data requires processing to decode
|
|
* the data structure, use a {@link Ext.data.proxy.Memory MemoryProxy} instead (see the {@link Ext.data.proxy.Memory
|
|
* MemoryProxy} docs for an example).
|
|
*
|
|
* Additional data can also be loaded locally using {@link #method-add}.
|
|
*
|
|
* ## Dynamic Loading
|
|
*
|
|
* Stores can be dynamically updated by calling the {@link #method-load} method:
|
|
*
|
|
* store.load({
|
|
* params: {
|
|
* group: 3,
|
|
* type: 'user'
|
|
* },
|
|
* callback: function(records, operation, success) {
|
|
* // do something after the load finishes
|
|
* },
|
|
* scope: this
|
|
* });
|
|
*
|
|
* Here a bunch of arbitrary parameters is passed along with the load request and a callback function is set
|
|
* up to do something after the loading is over.
|
|
*
|
|
* ## Loading Nested Data
|
|
*
|
|
* Applications often need to load sets of associated data - for example a CRM system might load a User and her Orders.
|
|
* Instead of issuing an AJAX request for the User and a series of additional AJAX requests for each Order, we can load
|
|
* a nested dataset and allow the Reader to automatically populate the associated models. Below is a brief example, see
|
|
* the {@link Ext.data.reader.Reader} intro docs for a full explanation:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* autoLoad: true,
|
|
* model: "User",
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url: 'users.json',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'users'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Which would consume a response like this:
|
|
*
|
|
* {
|
|
* "users": [{
|
|
* "id": 1,
|
|
* "name": "Ed",
|
|
* "orders": [{
|
|
* "id": 10,
|
|
* "total": 10.76,
|
|
* "status": "invoiced"
|
|
* },{
|
|
* "id": 11,
|
|
* "total": 13.45,
|
|
* "status": "shipped"
|
|
* }]
|
|
* }]
|
|
* }
|
|
*
|
|
* See the {@link Ext.data.reader.Reader} intro docs for a full explanation.
|
|
*
|
|
* ## Filtering and Sorting
|
|
*
|
|
* Stores can be sorted and filtered - in both cases either remotely or locally. The {@link #cfg-sorters} and
|
|
* {@link #cfg-filters} are held inside {@link Ext.util.MixedCollection MixedCollection} instances to make them easy to manage.
|
|
* Usually it is sufficient to either just specify sorters and filters in the Store configuration or call {@link #sort}
|
|
* or {@link #filter}:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* sorters: [{
|
|
* property: 'age',
|
|
* direction: 'DESC'
|
|
* }, {
|
|
* property: 'firstName',
|
|
* direction: 'ASC'
|
|
* }],
|
|
*
|
|
* filters: [{
|
|
* property: 'firstName',
|
|
* value: /Ed/
|
|
* }]
|
|
* });
|
|
*
|
|
* The new Store will keep the configured sorters and filters in the MixedCollection instances mentioned above. By
|
|
* default, sorting and filtering are both performed locally by the Store - see {@link #remoteSort} and
|
|
* {@link #remoteFilter} to allow the server to perform these operations instead.
|
|
*
|
|
* Filtering and sorting after the Store has been instantiated is also easy. Calling {@link #filter} adds another filter
|
|
* to the Store and automatically filters the dataset (calling {@link #filter} with no arguments simply re-applies all
|
|
* existing filters). Note that by default {@link #sortOnFilter} is set to true, which means that your sorters are
|
|
* automatically reapplied if using local sorting.
|
|
*
|
|
* store.filter('eyeColor', 'Brown');
|
|
*
|
|
* Change the sorting at any time by calling {@link #sort}:
|
|
*
|
|
* store.sort('height', 'ASC');
|
|
*
|
|
* Note that all existing sorters will be removed in favor of the new sorter data (if {@link #sort} is called with no
|
|
* arguments, the existing sorters are just reapplied instead of being removed). To keep existing sorters and add new
|
|
* ones, just add them to the MixedCollection:
|
|
*
|
|
* store.sorters.add(new Ext.util.Sorter({
|
|
* property : 'shoeSize',
|
|
* direction: 'ASC'
|
|
* }));
|
|
*
|
|
* store.sort();
|
|
*
|
|
* ## Registering with StoreManager
|
|
*
|
|
* Any Store that is instantiated with a {@link #storeId} will automatically be registered with the {@link
|
|
* Ext.data.StoreManager StoreManager}. This makes it easy to reuse the same store in multiple views:
|
|
*
|
|
* //this store can be used several times
|
|
* Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* storeId: 'usersStore'
|
|
* });
|
|
*
|
|
* new Ext.List({
|
|
* store: 'usersStore',
|
|
* //other config goes here
|
|
* });
|
|
*
|
|
* new Ext.view.View({
|
|
* store: 'usersStore',
|
|
* //other config goes here
|
|
* });
|
|
*
|
|
* ## Further Reading
|
|
*
|
|
* Stores are backed up by an ecosystem of classes that enables their operation. To gain a full understanding of these
|
|
* pieces and how they fit together, see:
|
|
*
|
|
* - {@link Ext.data.proxy.Proxy Proxy} - overview of what Proxies are and how they are used
|
|
* - {@link Ext.data.Model Model} - the core class in the data package
|
|
* - {@link Ext.data.reader.Reader Reader} - used by any subclass of {@link Ext.data.proxy.Server ServerProxy} to read a response
|
|
*
|
|
* @author Ed Spencer
|
|
*/
|
|
Ext.define('Ext.data.Store', {
|
|
extend: Ext.data.AbstractStore ,
|
|
|
|
alias: 'store.store',
|
|
|
|
// Required classes must be loaded before the definition callback runs
|
|
// The class definition callback creates a dummy Store which requires that
|
|
// all the classes below have been loaded.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} [remoteSort=false]
|
|
* `true` if the sorting should be performed on the server side, false if it is local only.
|
|
*
|
|
* {@link #buffered Buffered} stores automatically set this to `true`. Buffered stores contain an abitrary
|
|
* subset of the full dataset which depends upon various configurations and which pages have been requested
|
|
* for rendering. Such *sparse* datasets are ineligible for local sorting.
|
|
*/
|
|
remoteSort: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [remoteFilter=false]
|
|
* `true` if the grouping should be performed on the server side, false if it is local only.
|
|
*
|
|
* {@link #buffered Buffered} stores automatically set this to `true`. Buffered stores contain an abitrary
|
|
* subset of the full dataset which depends upon various configurations and which pages have been requested
|
|
* for rendering. Such *sparse* datasets are ineligible for local filtering.
|
|
*/
|
|
remoteFilter: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [remoteGroup=false]
|
|
* `true` if the grouping should apply on the server side, false if it is local only. If the
|
|
* grouping is local, it can be applied immediately to the data. If it is remote, then it will simply act as a
|
|
* helper, automatically sending the grouping information to the server.
|
|
*
|
|
* {@link #buffered Buffered} stores automatically set this to `true`. Buffered stores contain an abitrary
|
|
* subset of the full dataset which depends upon various configurations and which pages have been requested
|
|
* for rendering. Such *sparse* datasets are ineligible for local grouping.
|
|
*/
|
|
remoteGroup : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [autoDestroy=false]
|
|
* When a Store is used by only one {@link Ext.view.View DataView}, and should only exist for the lifetime of that view, then
|
|
* configure the autoDestroy flag as `true`. This causes the destruction of the view to trigger the destruction of its Store.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Ext.data.proxy.Proxy/Object} proxy
|
|
* The Proxy to use for this Store. This can be either a string, a config object or a Proxy instance -
|
|
* see {@link #setProxy} for details.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object[]/Ext.data.Model[]} data
|
|
* Array of Model instances or data objects to load locally. See "Inline data" above for details.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} groupField
|
|
* The field by which to group data in the store. Internally, grouping is very similar to sorting - the
|
|
* groupField and {@link #groupDir} are injected as the first sorter (see {@link #sort}). Stores support a single
|
|
* level of grouping, and groups can be fetched via the {@link #getGroups} method.
|
|
*/
|
|
groupField: undefined,
|
|
|
|
/**
|
|
* @cfg {String} groupDir
|
|
* The direction in which sorting should be applied when grouping. Supported values are "ASC" and "DESC".
|
|
*/
|
|
groupDir: "ASC",
|
|
|
|
/**
|
|
* @cfg {Number} trailingBufferZone
|
|
* When {@link #buffered}, the number of extra records to keep cached on the trailing side of scrolling buffer
|
|
* as scrolling proceeds. A larger number means fewer replenishments from the server.
|
|
*/
|
|
trailingBufferZone: 25,
|
|
|
|
/**
|
|
* @cfg {Number} leadingBufferZone
|
|
* When {@link #buffered}, the number of extra rows to keep cached on the leading side of scrolling buffer
|
|
* as scrolling proceeds. A larger number means fewer replenishments from the server.
|
|
*/
|
|
leadingBufferZone: 200,
|
|
|
|
/**
|
|
* @cfg {Number} pageSize
|
|
* The number of records considered to form a 'page'. This is used to power the built-in
|
|
* paging using the nextPage and previousPage functions when the grid is paged using a
|
|
* {@link Ext.toolbar.Paging PagingToolbar} Defaults to 25.
|
|
*
|
|
* If this Store is {@link #buffered}, pages are loaded into a page cache before the Store's
|
|
* data is updated from the cache. The pageSize is the number of rows loaded into the cache in one request.
|
|
* This will not affect the rendering of a buffered grid, but a larger page size will mean fewer loads.
|
|
*
|
|
* In a buffered grid, scrolling is monitored, and the page cache is kept primed with data ahead of the
|
|
* direction of scroll to provide rapid access to data when scrolling causes it to be required. Several pages
|
|
* in advance may be requested depending on various parameters.
|
|
*
|
|
* It is recommended to tune the {@link #pageSize}, {@link #trailingBufferZone} and
|
|
* {@link #leadingBufferZone} configurations based upon the conditions pertaining in your deployed application.
|
|
*
|
|
* The provided SDK example `examples/grid/infinite-scroll-grid-tuner.html` can be used to experiment with
|
|
* different settings including simulating Ajax latency.
|
|
*/
|
|
pageSize: undefined,
|
|
|
|
/**
|
|
* @property {Number} currentPage
|
|
* The page that the Store has most recently loaded (see {@link #loadPage})
|
|
*/
|
|
currentPage: 1,
|
|
|
|
/**
|
|
* @cfg {Boolean} clearOnPageLoad
|
|
* True to empty the store when loading another page via {@link #loadPage},
|
|
* {@link #nextPage} or {@link #previousPage}. Setting to false keeps existing records, allowing
|
|
* large data sets to be loaded one page at a time but rendered all together.
|
|
*/
|
|
clearOnPageLoad: true,
|
|
|
|
/**
|
|
* @property {Boolean} loading
|
|
* `true` if the Store is currently loading via its Proxy.
|
|
* @private
|
|
*/
|
|
loading: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} sortOnFilter
|
|
* For local filtering only, causes {@link #sort} to be called whenever {@link #filter} is called,
|
|
* causing the sorters to be reapplied after filtering.
|
|
*/
|
|
sortOnFilter: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} buffered
|
|
* Allows the Store to prefetch and cache in a **page cache**, pages of Records, and to then satisfy
|
|
* loading requirements from this page cache.
|
|
*
|
|
* To use buffered Stores, initiate the process by loading the first page. The number of rows rendered are
|
|
* determined automatically, and the range of pages needed to keep the cache primed for scrolling is
|
|
* requested and cached.
|
|
* Example:
|
|
*
|
|
* myStore.loadPage(1); // Load page 1
|
|
*
|
|
* A {@link Ext.grid.plugin.BufferedRenderer BufferedRenderer} is instantiated which will monitor the scrolling in the grid, and
|
|
* refresh the view's rows from the page cache as needed. It will also pull new data into the page
|
|
* cache when scrolling of the view draws upon data near either end of the prefetched data.
|
|
*
|
|
* The margins which trigger view refreshing from the prefetched data are {@link Ext.grid.plugin.BufferedRenderer#numFromEdge},
|
|
* {@link Ext.grid.plugin.BufferedRenderer#leadingBufferZone} and {@link Ext.grid.plugin.BufferedRenderer#trailingBufferZone}.
|
|
*
|
|
* The margins which trigger loading more data into the page cache are, {@link #leadingBufferZone} and
|
|
* {@link #trailingBufferZone}.
|
|
*
|
|
* By default, only 5 pages of data are cached in the page cache, with pages "scrolling" out of the buffer
|
|
* as the view moves down through the dataset.
|
|
* Setting this value to zero means that no pages are *ever* scrolled out of the page cache, and
|
|
* that eventually the whole dataset may become present in the page cache. This is sometimes desirable
|
|
* as long as datasets do not reach astronomical proportions.
|
|
*
|
|
* Selection state may be maintained across page boundaries by configuring the SelectionModel not to discard
|
|
* records from its collection when those Records cycle out of the Store's primary collection. This is done
|
|
* by configuring the SelectionModel like this:
|
|
*
|
|
* selModel: {
|
|
* pruneRemoved: false
|
|
* }
|
|
*
|
|
*/
|
|
buffered: false,
|
|
|
|
/**
|
|
* @cfg {Number} purgePageCount
|
|
* *Valid only when used with a {@link Ext.data.Store#buffered buffered} Store.*
|
|
*
|
|
* The number of pages *additional to the required buffered range* to keep in the prefetch cache before purging least recently used records.
|
|
*
|
|
* For example, if the height of the view area and the configured {@link #trailingBufferZone} and {@link #leadingBufferZone} require that there
|
|
* are three pages in the cache, then a `purgePageCount` of 5 ensures that up to 8 pages can be in the page cache any any one time.
|
|
*
|
|
* A value of 0 indicates to never purge the prefetched data.
|
|
*/
|
|
purgePageCount: 5,
|
|
|
|
/**
|
|
* @cfg {Boolean} [clearRemovedOnLoad=true]
|
|
* `true` to clear anything in the {@link #removed} record collection when the store loads.
|
|
*/
|
|
clearRemovedOnLoad: true,
|
|
|
|
defaultPageSize: 25,
|
|
|
|
// Number of records to load into a buffered grid before it has been bound to a view of known size
|
|
defaultViewSize: 100,
|
|
|
|
// Private. Used as parameter to loadRecords
|
|
addRecordsOptions: {
|
|
addRecords: true
|
|
},
|
|
|
|
statics: {
|
|
recordIdFn: function(record) {
|
|
return record.internalId;
|
|
},
|
|
recordIndexFn: function(record) {
|
|
return record.index;
|
|
},
|
|
grouperIdFn: function(grouper) {
|
|
return grouper.id || grouper.property;
|
|
},
|
|
groupIdFn: function(group) {
|
|
return group.key;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates the store.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
// Clone the config so we don't modify the original config object
|
|
config = Ext.apply({}, config);
|
|
|
|
var me = this,
|
|
groupers = config.groupers || me.groupers,
|
|
groupField = config.groupField || me.groupField,
|
|
proxy,
|
|
data;
|
|
|
|
/**
|
|
* @event beforeprefetch
|
|
* Fires before a prefetch occurs. Return `false` to cancel.
|
|
* @param {Ext.data.Store} this
|
|
* @param {Ext.data.Operation} operation The associated operation.
|
|
*/
|
|
/**
|
|
* @event groupchange
|
|
* Fired whenever the grouping in the grid changes.
|
|
* @param {Ext.data.Store} store The store.
|
|
* @param {Ext.util.Grouper[]} groupers The array of Grouper objects.
|
|
*/
|
|
/**
|
|
* @event prefetch
|
|
* Fires whenever records have been prefetched.
|
|
* @param {Ext.data.Store} this
|
|
* @param {Ext.data.Model[]} records An array of records.
|
|
* @param {Boolean} successful `true` if the operation was successful.
|
|
* @param {Ext.data.Operation} operation The associated operation.
|
|
*/
|
|
/**
|
|
* @event filterchange
|
|
* Fired whenever the filter set changes.
|
|
* @param {Ext.data.Store} store The store.
|
|
* @param {Ext.util.Filter[]} filters The array of Filter objects.
|
|
*/
|
|
data = config.data || me.data;
|
|
|
|
if (data) {
|
|
me.inlineData = data;
|
|
delete config.data;
|
|
}
|
|
|
|
if (!groupers && groupField) {
|
|
groupers = [{
|
|
property : groupField,
|
|
direction: config.groupDir || me.groupDir
|
|
}];
|
|
|
|
// Allow a custom getGroupString implementation to prevail
|
|
if (config.getGroupString || (me.getGroupString !== Ext.data.Store.prototype.getGroupString)) {
|
|
groupers[0].getGroupString = function(record) {
|
|
return me.getGroupString(record);
|
|
}
|
|
}
|
|
}
|
|
delete config.groupers;
|
|
|
|
/**
|
|
* @cfg {Ext.util.MixedCollection} groupers
|
|
* The collection of {@link Ext.util.Grouper Groupers} currently applied to this Store.
|
|
*/
|
|
me.groupers = new Ext.util.MixedCollection(false, Ext.data.Store.grouperIdFn);
|
|
me.groupers.addAll(me.decodeGroupers(groupers));
|
|
|
|
me.groups = new Ext.util.MixedCollection(false, Ext.data.Store.groupIdFn);
|
|
|
|
// AbstractStore.constructor initializes the sorters collection
|
|
me.callParent([config]);
|
|
// don't use *config* anymore from here on... use *me* instead...
|
|
|
|
if (me.buffered) {
|
|
me.data = new Ext.data.PageMap({
|
|
store: me,
|
|
keyFn: Ext.data.Store.recordIdFn,
|
|
pageSize: me.pageSize,
|
|
maxSize: me.purgePageCount,
|
|
listeners: {
|
|
// Whenever PageMap gets cleared, it means we re no longer interested in
|
|
// any outstanding page prefetches, so cancel tham all
|
|
clear: me.onPageMapClear,
|
|
scope: me
|
|
}
|
|
});
|
|
me.pageRequests = {};
|
|
|
|
// Sorting, grouping and filtering may only be remote for buffered stores.
|
|
me.remoteSort = me.remoteGroup = me.remoteFilter = true;
|
|
|
|
me.sortOnLoad = false;
|
|
me.filterOnLoad = false;
|
|
} else {
|
|
/**
|
|
* @property {Ext.util.MixedCollection/Ext.data.Store.PageMap} data
|
|
* When this Store is not {@link #buffered}, the `data` property is a MixedCollection which holds this store's local cache of records.
|
|
*
|
|
* When this store *is* {@link #buffered}, the `data` property is a cache of *pages* of records used to satisfy load requests from the Store when the associated view
|
|
* scrolls. Depending on how the {@link #leadingBufferZone buffer zone} and {@link #purgePageCount} are configured,
|
|
* pages which are scrolled out of view may be evicted from the cache, and need to be re-requested from the server
|
|
* when scrolled back into view. For this reason, if using {@link #buffered}, it is recommended that you configure
|
|
* your Model definitions with a unique {@link Ext.data.Model#idProperty} so that records which return to the page
|
|
* cache may be matched against previously selected records.
|
|
*
|
|
* Pages in the direction of scroll are prefetched from the remote server and loaded into this cache *before*
|
|
* they are needed based upon the {@link #leadingBufferZone buffer zone} so that scrolling can proceed without visible pauses for data loading.
|
|
*/
|
|
me.data = new Ext.util.MixedCollection({
|
|
getKey: Ext.data.Store.recordIdFn,
|
|
maintainIndices: true
|
|
});
|
|
me.data.pageSize = me.pageSize;
|
|
}
|
|
|
|
// Only sort by group fields if we are doing local grouping
|
|
if (me.remoteGroup) {
|
|
me.remoteSort = true;
|
|
}
|
|
|
|
// Keep sorters updated with prepended groupers so that subsequent adds work
|
|
me.sorters.insert(0, me.groupers.getRange());
|
|
|
|
proxy = me.proxy;
|
|
data = me.inlineData;
|
|
|
|
// Page size for non-buffered Store defaults to 25
|
|
// For a buffered Store, the default page size is taken from the initial call to prefetch.
|
|
if (!me.buffered && !me.pageSize) {
|
|
me.pageSize = me.defaultPageSize;
|
|
}
|
|
|
|
// Load inline data
|
|
if (data) {
|
|
if (proxy instanceof Ext.data.proxy.Memory) {
|
|
proxy.data = data;
|
|
me.read();
|
|
} else {
|
|
me.add.apply(me, [data]);
|
|
}
|
|
|
|
// If there are sorters (These will include any groupers by this stage) and we are sorting locally,
|
|
// then call group. This will sort, and create groups only if this store has groupers.
|
|
if (me.sorters.items.length && !me.remoteSort) {
|
|
me.group(null, null, true);
|
|
}
|
|
|
|
delete me.inlineData;
|
|
}
|
|
else if (me.autoLoad) {
|
|
// Defer the load until after the current event handler has finished and set up any associated views.
|
|
Ext.defer(me.load, 1, me, [ typeof me.autoLoad === 'object' ? me.autoLoad : undefined ]);
|
|
}
|
|
},
|
|
|
|
onBeforeSort: function() {
|
|
var groupers = this.groupers;
|
|
if (groupers.getCount() > 0) {
|
|
this.sort(groupers.items, 'prepend', false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Normalizes an array of grouper objects, ensuring that they are all Ext.util.Grouper instances
|
|
* @param {Object[]} groupers The groupers array
|
|
* @return {Ext.util.Grouper[]} Array of Ext.util.Grouper objects
|
|
*/
|
|
decodeGroupers: function(groupers) {
|
|
if (!Ext.isArray(groupers)) {
|
|
if (groupers === undefined) {
|
|
groupers = [];
|
|
} else {
|
|
groupers = [groupers];
|
|
}
|
|
}
|
|
|
|
var length = groupers.length,
|
|
Grouper = Ext.util.Grouper,
|
|
config, i, result = [];
|
|
|
|
for (i = 0; i < length; i++) {
|
|
config = groupers[i];
|
|
|
|
if (!(config instanceof Grouper)) {
|
|
if (Ext.isString(config)) {
|
|
config = {
|
|
property: config
|
|
};
|
|
}
|
|
|
|
config = Ext.apply({
|
|
root : 'data',
|
|
direction: "ASC"
|
|
}, config);
|
|
|
|
//support for 3.x style sorters where a function can be defined as 'fn'
|
|
if (config.fn) {
|
|
config.sorterFn = config.fn;
|
|
}
|
|
|
|
//support a function to be passed as a sorter definition
|
|
if (typeof config == 'function') {
|
|
config = {
|
|
sorterFn: config
|
|
};
|
|
}
|
|
|
|
// return resulting Groupers in a separate array so as not to mutate passed in data objects.
|
|
result.push(new Grouper(config));
|
|
} else {
|
|
result.push(config);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Groups data inside the store.
|
|
* @param {String/Object[]} groupers Either a string name of one of the fields in this Store's
|
|
* configured {@link Ext.data.Model Model}, or an Array of grouper configurations.
|
|
* @param {String} [direction="ASC"] The overall direction to group the data by.
|
|
*/
|
|
group: function(groupers, direction, /* private - for initial group */ suppressEvent) {
|
|
var me = this,
|
|
grouper,
|
|
newGroupers;
|
|
|
|
// If we were passed groupers, we replace the existing groupers in the sorter collection with the new ones
|
|
if (groupers) {
|
|
|
|
// remove existing groupers from the sorter set
|
|
me.sorters.removeAll(me.groupers.items);
|
|
|
|
if (Ext.isArray(groupers)) {
|
|
newGroupers = groupers;
|
|
} else if (Ext.isObject(groupers)) {
|
|
newGroupers = [groupers];
|
|
} else if (Ext.isString(groupers)) {
|
|
grouper = me.groupers.get(groupers);
|
|
|
|
if (!grouper) {
|
|
grouper = {
|
|
property : groupers,
|
|
direction: direction || 'ASC'
|
|
};
|
|
newGroupers = [grouper];
|
|
} else if (direction === undefined) {
|
|
grouper.toggle();
|
|
} else {
|
|
grouper.setDirection(direction);
|
|
}
|
|
}
|
|
|
|
// If we were passed groupers, replace our grouper collection
|
|
if (newGroupers && newGroupers.length) {
|
|
me.groupers.clear();
|
|
me.groupers.addAll(me.decodeGroupers(newGroupers));
|
|
}
|
|
|
|
// Groupers are prepended into sorter set
|
|
me.sorters.insert(0, me.groupers.items);
|
|
}
|
|
|
|
if (me.remoteGroup) {
|
|
if (me.buffered) {
|
|
me.data.clear();
|
|
me.loadPage(1, { groupChange: true });
|
|
} else {
|
|
me.load({
|
|
scope: me,
|
|
callback: suppressEvent ? null : me.fireGroupChange
|
|
});
|
|
}
|
|
} else {
|
|
me.doSort(me.generateComparator());
|
|
me.constructGroups();
|
|
if (!suppressEvent) {
|
|
me.fireGroupChange();
|
|
}
|
|
}
|
|
},
|
|
|
|
getGroupField: function(){
|
|
var first = this.groupers.first(),
|
|
group;
|
|
|
|
if (first) {
|
|
group = first.property;
|
|
}
|
|
return group;
|
|
},
|
|
|
|
constructGroups: function(){
|
|
var me = this,
|
|
data = this.data.items,
|
|
len = data.length,
|
|
groups = me.groups,
|
|
groupValue, i, group, rec;
|
|
|
|
groups.clear();
|
|
|
|
if (me.isGrouped()) {
|
|
for (i = 0; i < len; ++i) {
|
|
rec = data[i];
|
|
groupValue = me.getGroupString(rec);
|
|
group = groups.get(groupValue);
|
|
if (!group) {
|
|
group = new Ext.data.Group({
|
|
key: groupValue,
|
|
store: me
|
|
});
|
|
groups.add(groupValue, group);
|
|
}
|
|
group.add(rec);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Clear any groupers in the store
|
|
*/
|
|
clearGrouping: function() {
|
|
var me = this,
|
|
groupers = me.groupers.items,
|
|
gLen = groupers.length,
|
|
g;
|
|
|
|
// Trim groupers out of the sorter set
|
|
for (g = 0; g < gLen; g++) {
|
|
me.sorters.remove(groupers[g]);
|
|
}
|
|
me.groupers.clear();
|
|
if (me.remoteGroup) {
|
|
if (me.buffered) {
|
|
me.data.clear();
|
|
me.loadPage(1, { groupChange: true });
|
|
} else {
|
|
me.load({
|
|
scope: me,
|
|
callback: me.fireGroupChange
|
|
});
|
|
}
|
|
} else {
|
|
me.groups.clear();
|
|
if (me.sorters.length) {
|
|
me.sort();
|
|
} else {
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
me.fireGroupChange();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks if the store is currently grouped
|
|
* @return {Boolean} `true` if the store is grouped.
|
|
*/
|
|
isGrouped: function() {
|
|
return this.groupers.getCount() > 0;
|
|
},
|
|
|
|
/**
|
|
* Fires the groupchange event. Abstracted out so we can use it
|
|
* as a callback
|
|
* @private
|
|
*/
|
|
fireGroupChange: function() {
|
|
this.fireEvent('groupchange', this, this.groupers);
|
|
},
|
|
|
|
/**
|
|
* Returns an array containing the result of applying grouping to the records in this store.
|
|
* See {@link #groupField}, {@link #groupDir} and {@link #getGroupString}. Example for a store
|
|
* containing records with a color field:
|
|
*
|
|
* var myStore = Ext.create('Ext.data.Store', {
|
|
* groupField: 'color',
|
|
* groupDir : 'DESC'
|
|
* });
|
|
*
|
|
* myStore.getGroups(); // returns:
|
|
* [
|
|
* {
|
|
* name: 'yellow',
|
|
* children: [
|
|
* // all records where the color field is 'yellow'
|
|
* ]
|
|
* },
|
|
* {
|
|
* name: 'red',
|
|
* children: [
|
|
* // all records where the color field is 'red'
|
|
* ]
|
|
* }
|
|
* ]
|
|
*
|
|
* Group contents are effected by filtering.
|
|
*
|
|
* @param {String} [groupName] Pass in an optional groupName argument to access a specific
|
|
* group as defined by {@link #getGroupString}.
|
|
* @return {Object/Object[]} The grouped data
|
|
*/
|
|
getGroups: function(requestGroupString) {
|
|
var records = this.data.items,
|
|
length = records.length,
|
|
groups = [],
|
|
pointers = {},
|
|
record,
|
|
groupStr,
|
|
group,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
record = records[i];
|
|
groupStr = this.getGroupString(record);
|
|
group = pointers[groupStr];
|
|
|
|
if (group === undefined) {
|
|
group = {
|
|
name: groupStr,
|
|
children: []
|
|
};
|
|
|
|
groups.push(group);
|
|
pointers[groupStr] = group;
|
|
}
|
|
|
|
group.children.push(record);
|
|
}
|
|
|
|
return requestGroupString ? pointers[requestGroupString] : groups;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* For a given set of records and a Grouper, returns an array of arrays - each of which is the set of records
|
|
* matching a certain group.
|
|
*/
|
|
getGroupsForGrouper: function(records, grouper) {
|
|
var length = records.length,
|
|
groups = [],
|
|
oldValue,
|
|
newValue,
|
|
record,
|
|
group,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
record = records[i];
|
|
newValue = grouper.getGroupString(record);
|
|
|
|
if (newValue !== oldValue) {
|
|
group = {
|
|
name: newValue,
|
|
grouper: grouper,
|
|
records: []
|
|
};
|
|
groups.push(group);
|
|
}
|
|
|
|
group.records.push(record);
|
|
|
|
oldValue = newValue;
|
|
}
|
|
|
|
return groups;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This is used recursively to gather the records into the configured Groupers. The data MUST have been sorted for
|
|
* this to work properly (see {@link #getGroupData} and {@link #getGroupsForGrouper}) Most of the work is done by
|
|
* {@link #getGroupsForGrouper} - this function largely just handles the recursion.
|
|
*
|
|
* @param {Ext.data.Model[]} records The set or subset of records to group
|
|
* @param {Number} grouperIndex The grouper index to retrieve
|
|
* @return {Object[]} The grouped records
|
|
*/
|
|
getGroupsForGrouperIndex: function(records, grouperIndex) {
|
|
var me = this,
|
|
groupers = me.groupers,
|
|
grouper = groupers.getAt(grouperIndex),
|
|
groups = me.getGroupsForGrouper(records, grouper),
|
|
length = groups.length,
|
|
i;
|
|
|
|
if (grouperIndex + 1 < groupers.length) {
|
|
for (i = 0; i < length; i++) {
|
|
groups[i].children = me.getGroupsForGrouperIndex(groups[i].records, grouperIndex + 1);
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < length; i++) {
|
|
groups[i].depth = grouperIndex;
|
|
}
|
|
|
|
return groups;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns records grouped by the configured {@link #groupers grouper} configuration. Sample return value (in
|
|
* this case grouping by genre and then author in a fictional books dataset):
|
|
*
|
|
* [
|
|
* {
|
|
* name: 'Fantasy',
|
|
* depth: 0,
|
|
* records: [
|
|
* //book1, book2, book3, book4
|
|
* ],
|
|
* children: [
|
|
* {
|
|
* name: 'Rowling',
|
|
* depth: 1,
|
|
* records: [
|
|
* //book1, book2
|
|
* ]
|
|
* },
|
|
* {
|
|
* name: 'Tolkein',
|
|
* depth: 1,
|
|
* records: [
|
|
* //book3, book4
|
|
* ]
|
|
* }
|
|
* ]
|
|
* }
|
|
* ]
|
|
*
|
|
* @param {Boolean} [sort=true] `true` to call {@link #sort} before finding groups. Sorting is required to make grouping
|
|
* function correctly so this should only be set to false if the Store is known to already be sorted correctly.
|
|
* @return {Object[]} The group data
|
|
*/
|
|
getGroupData: function(sort) {
|
|
var me = this;
|
|
if (sort !== false) {
|
|
me.sort();
|
|
}
|
|
|
|
return me.getGroupsForGrouperIndex(me.data.items, 0);
|
|
},
|
|
|
|
/**
|
|
* Returns the string to group on for a given model instance. The default implementation of this method returns
|
|
* the model's {@link #groupField}, but this can be overridden to group by an arbitrary string. For example, to
|
|
* group by the first letter of a model's 'name' field, use the following code:
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* groupDir: 'ASC',
|
|
* getGroupString: function(instance) {
|
|
* return instance.get('name')[0];
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Ext.data.Model} instance The model instance
|
|
* @return {String} The string to compare when forming groups
|
|
*/
|
|
getGroupString: function(instance) {
|
|
var group = this.groupers.first();
|
|
if (group) {
|
|
return group.getGroupString(instance);
|
|
}
|
|
return '';
|
|
},
|
|
|
|
/**
|
|
* Inserts Model instances into the Store at the given index and fires the {@link #event-add} event.
|
|
* See also {@link #method-add}.
|
|
*
|
|
* @param {Number} index The start index at which to insert the passed Records.
|
|
* @param {Ext.data.Model[]} records An Array of Ext.data.Model objects to add to the store.
|
|
* @return {Ext.data.Model[]} records The added records
|
|
*/
|
|
insert: function(index, records) {
|
|
var me = this,
|
|
sync = false,
|
|
i, len, record,
|
|
defaults = me.modelDefaults,
|
|
out;
|
|
|
|
// isIterable allows an argument list of multiple records to be passed unchanged (from add)
|
|
if (!Ext.isIterable(records)) {
|
|
out = records = [records];
|
|
} else {
|
|
out = [];
|
|
}
|
|
len = records.length;
|
|
|
|
if (len) {
|
|
for (i = 0; i < len; i++) {
|
|
record = records[i];
|
|
if (!record.isModel) {
|
|
record = me.createModel(record);
|
|
}
|
|
out[i] = record;
|
|
if (defaults) {
|
|
record.set(defaults);
|
|
}
|
|
|
|
record.join(me);
|
|
sync = sync || record.phantom === true;
|
|
}
|
|
// Add records to data in one shot
|
|
me.data.insert(index, out);
|
|
|
|
if (me.snapshot) {
|
|
me.snapshot.addAll(out);
|
|
}
|
|
|
|
if (me.requireSort) {
|
|
// suspend events so the usual data changed events don't get fired.
|
|
me.suspendEvents();
|
|
me.sort();
|
|
me.resumeEvents();
|
|
}
|
|
|
|
if (me.isGrouped()) {
|
|
me.updateGroupsOnAdd(out);
|
|
}
|
|
|
|
me.fireEvent('add', me, out, index);
|
|
me.fireEvent('datachanged', me);
|
|
if (me.autoSync && sync && !me.autoSyncSuspended) {
|
|
me.sync();
|
|
}
|
|
}
|
|
return out;
|
|
},
|
|
|
|
updateGroupsOnAdd: function(records) {
|
|
var me = this,
|
|
groups = me.groups,
|
|
len = records.length,
|
|
i, groupName, group, rec;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
rec = records[i];
|
|
groupName = me.getGroupString(rec);
|
|
group = groups.getByKey(groupName);
|
|
if (!group) {
|
|
group = groups.add(new Ext.data.Group({
|
|
key: groupName,
|
|
store: me
|
|
}));
|
|
}
|
|
group.add(rec);
|
|
}
|
|
},
|
|
|
|
updateGroupsOnRemove: function(records) {
|
|
var me = this,
|
|
groups = me.groups,
|
|
len = records.length,
|
|
i, groupName, group, rec;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
rec = records[i];
|
|
groupName = me.getGroupString(rec);
|
|
group = groups.getByKey(groupName);
|
|
|
|
if (group) {
|
|
group.remove(rec);
|
|
if (group.records.length === 0) {
|
|
groups.remove(group);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
updateGroupsOnUpdate: function(record, modifiedFieldNames){
|
|
var me = this,
|
|
groupField = me.getGroupField(),
|
|
groupName = me.getGroupString(record),
|
|
groups = me.groups,
|
|
len, i, items, group;
|
|
|
|
if (modifiedFieldNames && Ext.Array.indexOf(modifiedFieldNames, groupField) !== -1) {
|
|
|
|
// Sorting is remote for buffered stores, we cannot update a field which is a sort key
|
|
if (me.buffered) {
|
|
Ext.Error.raise({
|
|
msg: 'Cannot move records between groups in a buffered store record'
|
|
});
|
|
}
|
|
|
|
// First find the old group and remove the record
|
|
items = groups.items;
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
group = items[i];
|
|
if (group.contains(record)) {
|
|
group.remove(record);
|
|
break;
|
|
}
|
|
}
|
|
group = groups.getByKey(groupName);
|
|
if (!group) {
|
|
group = groups.add(new Ext.data.Group({
|
|
key: groupName,
|
|
store: me
|
|
}));
|
|
}
|
|
group.add(record);
|
|
|
|
// At this point we know that we're sorted, so re-insert the record.
|
|
// Without adding to the "removed" list or firing events!
|
|
me.data.remove(record);
|
|
me.data.insert(me.data.findInsertionIndex(record, me.generateComparator()), record);
|
|
|
|
// Keep subsequent indices up to date
|
|
for (i = 0, len = this.getCount(); i < len; i++) {
|
|
me.data.items[i].index = i;
|
|
}
|
|
|
|
} else {
|
|
// some other field changed, just mark the group as dirty
|
|
groups.getByKey(groupName).setDirty();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds Model instance to the Store. This method accepts either:
|
|
*
|
|
* - An array of Model instances or Model configuration objects.
|
|
* - Any number of Model instance or Model configuration object arguments.
|
|
*
|
|
* The new Model instances will be added at the end of the existing collection.
|
|
*
|
|
* Sample usage:
|
|
*
|
|
* myStore.add({some: 'data'}, {some: 'other data'});
|
|
*
|
|
* Note that if this Store is sorted, the new Model instances will be inserted
|
|
* at the correct point in the Store to maintain the sort order.
|
|
*
|
|
* @param {Ext.data.Model[]/Ext.data.Model.../Object[]/Object...} model An array of Model instances
|
|
* or Model configuration objects, or variable number of Model instance or config arguments.
|
|
* @return {Ext.data.Model[]} The model instances that were added
|
|
*/
|
|
add: function(arg) {
|
|
var me = this,
|
|
records,
|
|
length, isSorted;
|
|
|
|
|
|
// Accept both a single-argument array of records, or any number of record arguments
|
|
if (Ext.isArray(arg)) {
|
|
records = arg;
|
|
} else {
|
|
records = arguments;
|
|
}
|
|
|
|
length = records.length;
|
|
isSorted = !me.remoteSort && me.sorters && me.sorters.items.length;
|
|
|
|
// If this Store is sorted, and they only passed one Record (99% or use cases)
|
|
// then it's much more efficient to add it sorted than to append and then sort.
|
|
if (isSorted && length === 1) {
|
|
return [ me.addSorted(me.createModel(records[0])) ];
|
|
}
|
|
|
|
// If this sort is sorted, set the flag used by the insert method to sort
|
|
// before firing events.
|
|
if (isSorted) {
|
|
me.requireSort = true;
|
|
}
|
|
|
|
records = me.insert(me.data.length, records);
|
|
delete me.requireSort;
|
|
|
|
return records;
|
|
},
|
|
|
|
/**
|
|
* (Local sort only) Inserts the passed Record into the Store at the index where it
|
|
* should go based on the current sort information.
|
|
*
|
|
* @param {Ext.data.Record} record
|
|
*/
|
|
addSorted: function(record) {
|
|
var me = this,
|
|
index = me.data.findInsertionIndex(record, me.generateComparator());
|
|
|
|
me.insert(index, record);
|
|
return record;
|
|
},
|
|
|
|
/**
|
|
* Converts a literal to a model, if it's not a model already
|
|
* @private
|
|
* @param {Ext.data.Model/Object} record The record to create
|
|
* @return {Ext.data.Model}
|
|
*/
|
|
createModel: function(record) {
|
|
if (!record.isModel) {
|
|
record = Ext.ModelManager.create(record, this.model);
|
|
}
|
|
|
|
return record;
|
|
},
|
|
|
|
onUpdate: function(record, type, modifiedFieldNames){
|
|
if (this.isGrouped()) {
|
|
this.updateGroupsOnUpdate(record, modifiedFieldNames);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Calls the specified function for each {@link Ext.data.Model record} in the store.
|
|
*
|
|
* When store is filtered, only loops over the filtered records.
|
|
*
|
|
* @param {Function} fn The function to call. The {@link Ext.data.Model Record} is passed as the first parameter.
|
|
* Returning `false` aborts and exits the iteration.
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed.
|
|
* Defaults to the current {@link Ext.data.Model record} in the iteration.
|
|
*/
|
|
each: function(fn, scope) {
|
|
var data = this.data.items,
|
|
dLen = data.length,
|
|
record, d;
|
|
|
|
for (d = 0; d < dLen; d++) {
|
|
record = data[d];
|
|
if (fn.call(scope || record, record, d, dLen) === false) {
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes the specified record(s) from the Store, firing the {@link #event-remove} event for each instance that is removed.
|
|
*
|
|
* A {@link #event-bulkremove} event is called at the end passing all removed records and their indices.
|
|
* plus a single 'datachanged' event after removal.
|
|
*
|
|
* @param {Ext.data.Model/Ext.data.Model[]/Number/Number[]} records Model instance or array of instances to remove or an array of indices from which to remove records.
|
|
*/
|
|
remove: function(records, /* private */ isMove, silent) {
|
|
/*
|
|
* Pass the isMove parameter if we know we're going to be re-inserting this record
|
|
*/
|
|
isMove = isMove === true;
|
|
|
|
var me = this,
|
|
sync = false,
|
|
snapshot = me.snapshot,
|
|
data = me.data,
|
|
i = 0,
|
|
length,
|
|
info = [],
|
|
allRecords = [],
|
|
indexes = [],
|
|
item,
|
|
isNotPhantom,
|
|
index,
|
|
record,
|
|
removeRange,
|
|
removeCount,
|
|
fireRemoveEvent = !silent && me.hasListeners.remove;
|
|
|
|
// Remove a single record
|
|
if (records.isModel) {
|
|
records = [records];
|
|
length = 1;
|
|
}
|
|
|
|
// Or remove(myRecord)
|
|
else if (Ext.isIterable(records)) {
|
|
length = records.length;
|
|
}
|
|
|
|
// Allow remove({start:100: end: 110})
|
|
// Private API used by removeAt to remove multiple, contiguous records
|
|
else if (typeof records === 'object') {
|
|
removeRange = true;
|
|
i = records.start;
|
|
length = records.end + 1;
|
|
removeCount = length - i;
|
|
}
|
|
|
|
// Build an array of {record: rec, index: idx} objects to sort into index order.
|
|
// Not necessary if we are removing a contiguous range
|
|
if (!removeRange) {
|
|
for (i = 0; i < length; ++i) {
|
|
|
|
record = records[i];
|
|
|
|
// Encountered a record index
|
|
if (typeof record == 'number') {
|
|
index = record;
|
|
record = data.getAt(index);
|
|
}
|
|
// Removing a record instance
|
|
else {
|
|
index = me.indexOf(record);
|
|
}
|
|
|
|
// Check record. If number passed, it may not exist.
|
|
if (record && index > -1) {
|
|
info.push({
|
|
record: record,
|
|
index: index
|
|
});
|
|
}
|
|
|
|
// record guaranteed to be a record now
|
|
if (snapshot) {
|
|
snapshot.remove(record);
|
|
}
|
|
}
|
|
|
|
// Sort records into ascending order so that removalscan be processed in a deterministic order
|
|
info = Ext.Array.sort(info, function(o1, o2) {
|
|
var index1 = o1.index,
|
|
index2 = o2.index;
|
|
|
|
return index1 === o2.index2 ? 0 : (index1 < index2 ? -1 : 1);
|
|
});
|
|
|
|
// The loop below loops through the info array if not removing contiguous range
|
|
i = 0;
|
|
length = info.length;
|
|
}
|
|
|
|
// we need to maintain a set of indexes since we're not guaranteed to
|
|
// be removing the records in order
|
|
// Start value of i is calculated!
|
|
for (; i < length; i++) {
|
|
if (removeRange) {
|
|
record = data.getAt(i);
|
|
index = i;
|
|
} else {
|
|
item = info[i];
|
|
record = item.record;
|
|
index = item.index;
|
|
}
|
|
|
|
allRecords.push(record);
|
|
indexes.push(index);
|
|
|
|
isNotPhantom = record.phantom !== true;
|
|
// don't push phantom records onto removed
|
|
if (!isMove && isNotPhantom) {
|
|
|
|
// Store the index the record was removed from so that rejectChanges can re-insert at the correct place.
|
|
// The record's index property won't do, as that is the index in the overall dataset when Store is buffered.
|
|
record.removedFrom = index;
|
|
me.removed.push(record);
|
|
}
|
|
|
|
record.unjoin(me);
|
|
|
|
// Remove using the index, but subtract any intervening removed records which would cause the data
|
|
// array to shuffle up.
|
|
index -= i;
|
|
sync = sync || isNotPhantom;
|
|
|
|
// If we have not been asked to remove a range we must remove individual records
|
|
// and fire the individual remove event..
|
|
if (!removeRange) {
|
|
data.removeAt(index);
|
|
|
|
// Only fire individual remove events if not silent, and there are listeners.
|
|
if (fireRemoveEvent) {
|
|
me.fireEvent('remove', me, record, index, !!isMove);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If there was no listener for the single remove event, remove all records
|
|
// from collection in one call
|
|
if (removeRange) {
|
|
data.removeRange(records.start, removeCount);
|
|
}
|
|
|
|
if (!silent) {
|
|
me.fireEvent('bulkremove', me, allRecords, indexes, !!isMove);
|
|
me.fireEvent('datachanged', me);
|
|
}
|
|
if (!isMove && me.autoSync && sync && !me.autoSyncSuspended) {
|
|
me.sync();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes the model instance(s) at the given index
|
|
* @param {Number} index The record index
|
|
* @param {Number} [count=1] The number of records to delete
|
|
*/
|
|
removeAt: function(index, count) {
|
|
var me = this,
|
|
storeCount = me.getCount();
|
|
|
|
if (index <= storeCount) {
|
|
if (arguments.length === 1) {
|
|
me.remove([ index ]);
|
|
} else if (count) {
|
|
me.remove({
|
|
start: index,
|
|
end: Math.min(index + count, storeCount) - 1
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes all items from the store.
|
|
*
|
|
* Individual record `{@link #event-remove}` events are not fired by this method.
|
|
*
|
|
* @param {Boolean} [silent=false] Pass `true` to prevent the record `{@link #event-bulkremove}`
|
|
* and `{@link #event-clear}` events from being fired.
|
|
*/
|
|
removeAll: function(silent) {
|
|
var me = this,
|
|
snapshot = me.snapshot,
|
|
data = me.data;
|
|
|
|
if (snapshot) {
|
|
snapshot.removeAll(data.getRange());
|
|
}
|
|
|
|
if (me.buffered) {
|
|
if (data) {
|
|
if (silent) {
|
|
me.suspendEvent('clear');
|
|
}
|
|
data.clear();
|
|
if (silent) {
|
|
me.resumeEvent('clear');
|
|
}
|
|
}
|
|
}
|
|
|
|
else {
|
|
// Use the remove range interface to remove the entire record set, passing the silent flag to mute the bulkremove event.
|
|
// The remove range interface does not fire individual remove events.
|
|
me.remove({
|
|
start: 0,
|
|
end: me.getCount() - 1
|
|
}, false, silent);
|
|
if (silent !== true) {
|
|
me.fireEvent('clear', me);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Loads data into the Store via the configured {@link #proxy}. This uses the Proxy to make an
|
|
* asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved
|
|
* instances into the Store and calling an optional callback if required. Example usage:
|
|
*
|
|
* store.load({
|
|
* scope: this,
|
|
* callback: function(records, operation, success) {
|
|
* // the {@link Ext.data.Operation operation} object
|
|
* // contains all of the details of the load operation
|
|
* console.log(records);
|
|
* }
|
|
* });
|
|
*
|
|
* If the callback scope does not need to be set, a function can simply be passed:
|
|
*
|
|
* store.load(function(records, operation, success) {
|
|
* console.log('loaded records');
|
|
* });
|
|
*
|
|
* @param {Object/Function} [options] config object, passed into the Ext.data.Operation object before loading.
|
|
* Additionally `addRecords: true` can be specified to add these records to the existing records, default is
|
|
* to remove the Store's existing records first.
|
|
*/
|
|
load: function(options) {
|
|
var me = this;
|
|
|
|
options = options || {};
|
|
|
|
if (typeof options == 'function') {
|
|
options = {
|
|
callback: options
|
|
};
|
|
}
|
|
|
|
options.groupers = options.groupers || me.groupers.items;
|
|
options.page = options.page || me.currentPage;
|
|
options.start = (options.start !== undefined) ? options.start : (options.page - 1) * me.pageSize;
|
|
options.limit = options.limit || me.pageSize;
|
|
options.addRecords = options.addRecords || false;
|
|
|
|
if (me.buffered) {
|
|
options.limit = me.viewSize || me.defaultViewSize;
|
|
return me.loadToPrefetch(options);
|
|
}
|
|
return me.callParent([options]);
|
|
},
|
|
|
|
reload: function(options) {
|
|
var me = this,
|
|
startIdx,
|
|
endIdx,
|
|
startPage,
|
|
endPage,
|
|
i,
|
|
waitForReload,
|
|
bufferZone,
|
|
records,
|
|
count = me.getCount();
|
|
|
|
if (!options) {
|
|
options = {};
|
|
}
|
|
|
|
// If buffered, we have to clear the page cache and then
|
|
// cache the page range surrounding store's loaded range.
|
|
if (me.buffered) {
|
|
|
|
// So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
|
|
delete me.totalCount;
|
|
|
|
waitForReload = function() {
|
|
if (me.rangeCached(startIdx, endIdx)) {
|
|
me.loading = false;
|
|
me.data.un('pageAdded', waitForReload);
|
|
records = me.data.getRange(startIdx, endIdx);
|
|
me.fireEvent('load', me, records, true);
|
|
}
|
|
};
|
|
bufferZone = Math.ceil((me.leadingBufferZone + me.trailingBufferZone) / 2);
|
|
|
|
// Get our record index range in the dataset
|
|
startIdx = options.start || (count ? me.getAt(0).index : 0);
|
|
endIdx = startIdx + (options.count || (count ? count : me.pageSize)) - 1;
|
|
|
|
// Calculate a page range which encompasses the Store's loaded range plus both buffer zones
|
|
startPage = me.getPageFromRecordIndex(Math.max(startIdx - bufferZone, 0));
|
|
endPage = me.getPageFromRecordIndex(endIdx + bufferZone);
|
|
|
|
// Clear cache (with initial flag so that any listening BufferedRenderer does not reset to page 1).
|
|
me.data.clear(true);
|
|
|
|
if (me.fireEvent('beforeload', me, options) !== false) {
|
|
me.loading = true;
|
|
|
|
// Wait for the requested range to become available in the page map
|
|
// Load the range as soon as the whole range is available
|
|
me.data.on('pageAdded', waitForReload);
|
|
|
|
// Recache the page range which encapsulates our visible records
|
|
for (i = startPage; i <= endPage; i++) {
|
|
me.prefetchPage(i, options);
|
|
}
|
|
}
|
|
} else {
|
|
return me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called internally when a Proxy has completed a load request
|
|
*/
|
|
onProxyLoad: function(operation) {
|
|
var me = this,
|
|
resultSet = operation.getResultSet(),
|
|
records = operation.getRecords(),
|
|
successful = operation.wasSuccessful();
|
|
|
|
if (me.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
if (resultSet) {
|
|
me.totalCount = resultSet.total;
|
|
}
|
|
|
|
// Loading should be set to false before loading the records.
|
|
// loadRecords doesn't expose any hooks or events until refresh
|
|
// and datachanged, so by that time loading should be false
|
|
me.loading = false;
|
|
if (successful) {
|
|
me.loadRecords(records, operation);
|
|
}
|
|
|
|
if (me.hasListeners.load) {
|
|
me.fireEvent('load', me, records, successful);
|
|
}
|
|
|
|
//TODO: deprecate this event, it should always have been 'load' instead. 'load' is now documented, 'read' is not.
|
|
//People are definitely using this so can't deprecate safely until 2.x
|
|
if (me.hasListeners.read) {
|
|
me.fireEvent('read', me, records, successful);
|
|
}
|
|
|
|
//this is a callback that would have been passed to the 'read' function and is optional
|
|
Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
|
|
},
|
|
|
|
//inherit docs
|
|
getNewRecords: function() {
|
|
return this.data.filterBy(this.filterNew).items;
|
|
},
|
|
|
|
//inherit docs
|
|
getUpdatedRecords: function() {
|
|
return this.data.filterBy(this.filterUpdated).items;
|
|
},
|
|
|
|
/**
|
|
* Filters the loaded set of records by a given set of filters.
|
|
*
|
|
* By default, the passed filter(s) are *added* to the collection of filters being used to filter this Store.
|
|
*
|
|
* To remove existing filters before applying a new set of filters use
|
|
*
|
|
* // Clear the filter collection without updating the UI
|
|
* store.clearFilter(true);
|
|
*
|
|
* see {@link #clearFilter}.
|
|
*
|
|
* Alternatively, if filters are configured with an `id`, then existing filters store may be *replaced* by new
|
|
* filters having the same `id`.
|
|
*
|
|
* Filtering by single field:
|
|
*
|
|
* store.filter("email", /\.com$/);
|
|
*
|
|
* Using multiple filters:
|
|
*
|
|
* store.filter([
|
|
* {property: "email", value: /\.com$/},
|
|
* {filterFn: function(item) { return item.get("age") > 10; }}
|
|
* ]);
|
|
*
|
|
* Using Ext.util.Filter instances instead of config objects
|
|
* (note that we need to specify the {@link Ext.util.Filter#root root} config option in this case):
|
|
*
|
|
* store.filter([
|
|
* Ext.create('Ext.util.Filter', {property: "email", value: /\.com$/, root: 'data'}),
|
|
* Ext.create('Ext.util.Filter', {filterFn: function(item) { return item.get("age") > 10; }, root: 'data'})
|
|
* ]);
|
|
*
|
|
* When store is filtered, most of the methods for accessing store data will be working only
|
|
* within the set of filtered records. Two notable exceptions are {@link #queryBy} and
|
|
* {@link #getById}.
|
|
*
|
|
* @param {Object[]/Ext.util.Filter[]/String} [filters] The set of filters to apply to the data.
|
|
* These are stored internally on the store, but the filtering itself is done on the Store's
|
|
* {@link Ext.util.MixedCollection MixedCollection}. See MixedCollection's
|
|
* {@link Ext.util.MixedCollection#filter filter} method for filter syntax.
|
|
* Alternatively, pass in a property string.
|
|
*
|
|
* If no parameters are passed, the Store's existing filter set is applied.
|
|
* @param {String} [value] value to filter by (only if using a property string as the first argument)
|
|
*/
|
|
filter: function(filters, value) {
|
|
if (Ext.isString(filters)) {
|
|
filters = {
|
|
property: filters,
|
|
value: value
|
|
};
|
|
}
|
|
|
|
var me = this,
|
|
decoded = me.decodeFilters(filters),
|
|
i,
|
|
doLocalSort = me.sorters.length && me.sortOnFilter && !me.remoteSort,
|
|
length = decoded.length;
|
|
|
|
// Merge new filters into current filter set.
|
|
for (i = 0; i < length; i++) {
|
|
me.filters.replace(decoded[i]);
|
|
}
|
|
|
|
filters = me.filters.items;
|
|
|
|
// If there are filters, filter the data.
|
|
// This method can not cut a filter set down to zero, it can only add or replace,
|
|
// so if there are no filters, the store is not filtered, and they did not pass a filter.
|
|
if (filters.length) {
|
|
if (me.remoteFilter) {
|
|
// So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
|
|
delete me.totalCount;
|
|
|
|
// For a buffered Store, we have to clear the prefetch cache because the dataset will change upon filtering.
|
|
// Then we must prefetch the new page 1, and when that arrives, reload the visible part of the Store
|
|
// via the guaranteedrange event
|
|
if (me.buffered) {
|
|
me.data.clear();
|
|
me.loadPage(1);
|
|
} else {
|
|
// Reset to the first page, the filter is likely to produce a smaller data set
|
|
me.currentPage = 1;
|
|
//the load function will pick up the new filters and request the filtered data from the proxy
|
|
me.load();
|
|
}
|
|
} else {
|
|
/**
|
|
* @property {Ext.util.MixedCollection} snapshot
|
|
* A pristine (unfiltered) collection of the records in this store. This is used to reinstate
|
|
* records when a filter is removed or changed
|
|
*/
|
|
me.snapshot = me.snapshot || me.data.clone();
|
|
|
|
// Filter the unfiltered dataset using the filter set
|
|
me.data = me.snapshot.filter(filters);
|
|
|
|
// Groups will change when filters change
|
|
me.constructGroups();
|
|
|
|
if (doLocalSort) {
|
|
me.sort();
|
|
} else {
|
|
// fire datachanged event if it hasn't already been fired by doSort
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
}
|
|
me.fireEvent('filterchange', me, filters);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reverts to a view of the Record cache with no filtering applied.
|
|
* @param {Boolean} [suppressEvent] If `true` the filter is cleared silently.
|
|
*
|
|
* For a locally filtered Store, this means that the filter collection is cleared without firing the
|
|
* {@link #datachanged} event.
|
|
*
|
|
* For a remotely filtered Store, this means that the filter collection is cleared, but the store
|
|
* is not reloaded from the server.
|
|
*/
|
|
clearFilter: function(suppressEvent) {
|
|
var me = this;
|
|
|
|
me.filters.clear();
|
|
|
|
if (me.remoteFilter) {
|
|
|
|
// In a buffered Store, the meaning of suppressEvent is to simply clear the filters collection
|
|
if (suppressEvent) {
|
|
return;
|
|
}
|
|
|
|
// So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
|
|
delete me.totalCount;
|
|
|
|
// For a buffered Store, we have to clear the prefetch cache because the dataset will change upon filtering.
|
|
// Then we must prefetch the new page 1, and when that arrives, reload the visible part of the Store
|
|
// via the guaranteedrange event
|
|
if (me.buffered) {
|
|
me.data.clear();
|
|
me.loadPage(1);
|
|
} else {
|
|
// Reset to the first page, clearing a filter will destroy the context of the current dataset
|
|
me.currentPage = 1;
|
|
me.load();
|
|
}
|
|
} else if (me.isFiltered()) {
|
|
me.data = me.snapshot;
|
|
delete me.snapshot;
|
|
|
|
// Groups will change when filters change
|
|
me.constructGroups();
|
|
|
|
if (suppressEvent !== true) {
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
}
|
|
me.fireEvent('filterchange', me, me.filters.items);
|
|
},
|
|
|
|
/**
|
|
* Removes an individual Filter from the current {@link #property-filters filter set} using the passed Filter/Filter id and
|
|
* by default, applys the updated filter set to the Store's unfiltered dataset.
|
|
*
|
|
* @param {Mixed} toRemove The id of a Filter to remove from the filter set, or a Filter instance to remove.
|
|
* @param {Boolean} [applyFilters=true] Pass as `false` to remove the filter but not apply the updated filter set.
|
|
*
|
|
* If `null` is passed, all anonymous Filters (Filters with no `id` property) will be removed.
|
|
*/
|
|
removeFilter: function(toRemove, applyFilters) {
|
|
var me = this;
|
|
|
|
if (!me.remoteFilter && me.isFiltered()) {
|
|
if (toRemove instanceof Ext.util.Filter) {
|
|
me.filters.remove(toRemove);
|
|
} else {
|
|
me.filters.removeAtKey(toRemove);
|
|
}
|
|
|
|
if (applyFilters !== false) {
|
|
|
|
// Not gone down to zero filters - re-filter Store
|
|
if (me.filters.length) {
|
|
me.filter();
|
|
}
|
|
|
|
// No filters left - let clearFilter do its thing.
|
|
else {
|
|
me.clearFilter();
|
|
}
|
|
} else {
|
|
me.fireEvent('filterchange', me, me.filters.items);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds a new Filter to this Store's {@link #property-filters filter set} and
|
|
* by default, applys the updated filter set to the Store's unfiltered dataset.
|
|
* @param {Object[]/Ext.util.Filter[]} filters The set of filters to add to the current {@link #property-filters filter set}.
|
|
* @param {Boolean} [applyFilters=true] Pass as `false` to add the filter but not apply the updated filter set.
|
|
*
|
|
*/
|
|
addFilter: function(filters, applyFilters) {
|
|
var me = this,
|
|
decoded,
|
|
i,
|
|
length;
|
|
|
|
// Decode passed filters and replace/add into the filter set
|
|
decoded = me.decodeFilters(filters);
|
|
length = decoded.length;
|
|
for (i = 0; i < length; i++) {
|
|
me.filters.replace(decoded[i]);
|
|
}
|
|
|
|
if (applyFilters !== false && me.filters.length) {
|
|
me.filter();
|
|
} else {
|
|
me.fireEvent('filterchange', me, me.filters.items);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if this store is currently filtered
|
|
* @return {Boolean}
|
|
*/
|
|
isFiltered: function() {
|
|
var snapshot = this.snapshot;
|
|
return !!(snapshot && snapshot !== this.data);
|
|
},
|
|
|
|
/**
|
|
* Filters by a function. The specified function will be called for each
|
|
* Record in this Store. If the function returns `true` the Record is included,
|
|
* otherwise it is filtered out.
|
|
*
|
|
* When store is filtered, most of the methods for accessing store data will be working only
|
|
* within the set of filtered records. Two notable exceptions are {@link #queryBy} and
|
|
* {@link #getById}.
|
|
*
|
|
* @param {Function} fn The function to be called. It will be passed the following parameters:
|
|
* @param {Ext.data.Model} fn.record The record to test for filtering. Access field values
|
|
* using {@link Ext.data.Model#get}.
|
|
* @param {Object} fn.id The ID of the Record passed.
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed.
|
|
* Defaults to this Store.
|
|
*/
|
|
filterBy: function(fn, scope) {
|
|
var me = this;
|
|
|
|
me.snapshot = me.snapshot || me.data.clone();
|
|
me.data = me.queryBy(fn, scope || me);
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
},
|
|
|
|
/**
|
|
* Query all the cached records in this Store using a filtering function. The specified function
|
|
* will be called with each record in this Store. If the function returns `true` the record is
|
|
* included in the results.
|
|
*
|
|
* This method is not effected by filtering, it will always look from all records inside the store
|
|
* no matter if filter is applied or not.
|
|
*
|
|
* @param {Function} fn The function to be called. It will be passed the following parameters:
|
|
* @param {Ext.data.Model} fn.record The record to test for filtering. Access field values
|
|
* using {@link Ext.data.Model#get}.
|
|
* @param {Object} fn.id The ID of the Record passed.
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed
|
|
* Defaults to this Store.
|
|
* @return {Ext.util.MixedCollection} Returns an Ext.util.MixedCollection of the matched records
|
|
*/
|
|
queryBy: function(fn, scope) {
|
|
var me = this;
|
|
return (me.snapshot || me.data).filterBy(fn, scope || me);
|
|
},
|
|
|
|
/**
|
|
* Query all the cached records in this Store by name/value pair.
|
|
* The parameters will be used to generated a filter function that is given
|
|
* to the queryBy method.
|
|
*
|
|
* This method compliments queryBy by generating the query function automatically.
|
|
*
|
|
* @param {String} property The property to create the filter function for
|
|
* @param {String/RegExp} value The string/regex to compare the property value to
|
|
* @param {Boolean} [anyMatch=false] `true` if we don't care if the filter value is not the full value.
|
|
* @param {Boolean} [caseSensitive=false] `true` to create a case-sensitive regex.
|
|
* @param {Boolean} [exactMatch=false] `true` to force exact match (^ and $ characters added to the regex).
|
|
* Ignored if `anyMatch` is `true`.
|
|
* @return {Ext.util.MixedCollection} Returns an Ext.util.MixedCollection of the matched records
|
|
*/
|
|
query: function(property, value, anyMatch, caseSensitive, exactMatch) {
|
|
var me = this,
|
|
queryFn = me.createFilterFn(property, value, anyMatch, caseSensitive, exactMatch),
|
|
results = me.queryBy(queryFn);
|
|
|
|
//create an empty mixed collection for use if queryBy returns null
|
|
if(!results) {
|
|
results = new Ext.util.MixedCollection();
|
|
}
|
|
|
|
return results;
|
|
},
|
|
|
|
/**
|
|
* Loads an array of data straight into the Store.
|
|
*
|
|
* Using this method is great if the data is in the correct format already (e.g. it doesn't need to be
|
|
* processed by a reader). If your data requires processing to decode the data structure, use a
|
|
* {@link Ext.data.proxy.Memory MemoryProxy} or {@link #loadRawData}.
|
|
*
|
|
* @param {Ext.data.Model[]/Object[]} data Array of data to load. Any non-model instances will be cast
|
|
* into model instances first.
|
|
* @param {Boolean} [append=false] `true` to add the records to the existing records in the store, `false`
|
|
* to remove the old ones first.
|
|
*/
|
|
loadData: function(data, append) {
|
|
var length = data.length,
|
|
newData = [],
|
|
i;
|
|
|
|
//make sure each data element is an Ext.data.Model instance
|
|
for (i = 0; i < length; i++) {
|
|
newData.push(this.createModel(data[i]));
|
|
}
|
|
|
|
this.loadRecords(newData, append ? this.addRecordsOptions : undefined);
|
|
},
|
|
|
|
/**
|
|
* Loads data via the bound Proxy's reader
|
|
*
|
|
* Use this method if you are attempting to load data and want to utilize the configured data reader.
|
|
*
|
|
* @param {Object[]} data The full JSON object you'd like to load into the Data store.
|
|
* @param {Boolean} [append=false] `true` to add the records to the existing records in the store, `false`
|
|
* to remove the old ones first.
|
|
*/
|
|
loadRawData : function(data, append) {
|
|
var me = this,
|
|
result = me.proxy.reader.read(data),
|
|
records = result.records;
|
|
|
|
if (result.success) {
|
|
me.totalCount = result.total;
|
|
me.loadRecords(records, append ? me.addRecordsOptions : undefined);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Loads an array of {@link Ext.data.Model model} instances into the store, fires the datachanged event. This should only usually
|
|
* be called internally when loading from the {@link Ext.data.proxy.Proxy Proxy}, when adding records manually use {@link #method-add} instead
|
|
* @param {Ext.data.Model[]} records The array of records to load
|
|
* @param {Object} options
|
|
* @param {Boolean} [options.addRecords=false] Pass `true` to add these records to the existing records, `false` to remove the Store's existing records first.
|
|
* @param {Number} [options.start] Only used by buffered Stores. The index *within the overall dataset* of the first record in the array.
|
|
*/
|
|
loadRecords: function(records, options) {
|
|
var me = this,
|
|
i = 0,
|
|
length = records.length,
|
|
start,
|
|
addRecords,
|
|
snapshot = me.snapshot;
|
|
|
|
if (options) {
|
|
start = options.start;
|
|
addRecords = options.addRecords;
|
|
}
|
|
|
|
if (!addRecords) {
|
|
delete me.snapshot;
|
|
me.clearData(true);
|
|
} else if (snapshot) {
|
|
snapshot.addAll(records);
|
|
}
|
|
|
|
me.data.addAll(records);
|
|
|
|
if (start !== undefined) {
|
|
for (; i < length; i++) {
|
|
records[i].index = start + i;
|
|
records[i].join(me);
|
|
}
|
|
} else {
|
|
for (; i < length; i++) {
|
|
records[i].join(me);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* this rather inelegant suspension and resumption of events is required because both the filter and sort functions
|
|
* fire an additional datachanged event, which is not wanted. Ideally we would do this a different way. The first
|
|
* datachanged event is fired by the call to this.add, above.
|
|
*/
|
|
me.suspendEvents();
|
|
|
|
if (me.filterOnLoad && !me.remoteFilter) {
|
|
me.filter();
|
|
}
|
|
|
|
if (me.sortOnLoad && !me.remoteSort) {
|
|
me.sort(undefined, undefined, undefined, true);
|
|
}
|
|
|
|
me.resumeEvents();
|
|
if (me.isGrouped()) {
|
|
me.constructGroups();
|
|
}
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
},
|
|
|
|
// PAGING METHODS
|
|
/**
|
|
* Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal
|
|
* load operation, passing in calculated 'start' and 'limit' params.
|
|
* @param {Number} page The number of the page to load.
|
|
* @param {Object} [options] See options for {@link #method-load}.
|
|
*/
|
|
loadPage: function(page, options) {
|
|
var me = this;
|
|
|
|
me.currentPage = page;
|
|
|
|
// Copy options into a new object so as not to mutate passed in objects
|
|
options = Ext.apply({
|
|
page: page,
|
|
start: (page - 1) * me.pageSize,
|
|
limit: me.pageSize,
|
|
addRecords: !me.clearOnPageLoad
|
|
}, options);
|
|
|
|
if (me.buffered) {
|
|
options.limit = me.viewSize || me.defaultViewSize;
|
|
return me.loadToPrefetch(options);
|
|
}
|
|
me.read(options);
|
|
},
|
|
|
|
/**
|
|
* Loads the next 'page' in the current data set
|
|
* @param {Object} options See options for {@link #method-load}
|
|
*/
|
|
nextPage: function(options) {
|
|
this.loadPage(this.currentPage + 1, options);
|
|
},
|
|
|
|
/**
|
|
* Loads the previous 'page' in the current data set
|
|
* @param {Object} options See options for {@link #method-load}
|
|
*/
|
|
previousPage: function(options) {
|
|
this.loadPage(this.currentPage - 1, options);
|
|
},
|
|
|
|
// private
|
|
clearData: function(isLoad) {
|
|
var me = this,
|
|
records,
|
|
i;
|
|
|
|
// We only have to do the unjoining if not buffered. PageMap will unjoin its records when it clears itself.
|
|
// There is a potential for a race condition in stores configured with autoDestroy: true;
|
|
// if loading was initiated but didn't complete by the time the store is destroyed,
|
|
// the data MC may not have been created yet so we have to check for its existence
|
|
// here and below.
|
|
if (!me.buffered && me.data) {
|
|
records = me.data.items;
|
|
i = records.length;
|
|
while (i--) {
|
|
records[i].unjoin(me);
|
|
}
|
|
}
|
|
|
|
// Remove all data from the Collection/PageMap. PageMap will perform unjoining.
|
|
if (me.data) {
|
|
me.data.clear();
|
|
}
|
|
|
|
if (isLoad !== true || me.clearRemovedOnLoad) {
|
|
me.removed.length = 0;
|
|
}
|
|
},
|
|
|
|
loadToPrefetch: function(options) {
|
|
var me = this,
|
|
i,
|
|
records,
|
|
dataSetSize,
|
|
prefetchOptions = options,
|
|
|
|
// Get the requested record index range in the dataset
|
|
startIdx = options.start,
|
|
endIdx = options.start + options.limit - 1,
|
|
|
|
// The end index to load into the store's live record collection
|
|
loadEndIdx = Math.min(endIdx, options.start + (me.viewSize || options.limit) - 1),
|
|
|
|
// Calculate a page range which encompasses the requested range plus both buffer zones.
|
|
// The endPage will be adjusted to be in the dataset size range as soon as the first data block returns.
|
|
startPage = me.getPageFromRecordIndex(Math.max(startIdx - me.trailingBufferZone, 0)),
|
|
endPage = me.getPageFromRecordIndex(endIdx + me.leadingBufferZone),
|
|
|
|
// Wait for the viewable range to be available
|
|
waitForRequestedRange = function() {
|
|
if (me.rangeCached(startIdx, loadEndIdx)) {
|
|
me.loading = false;
|
|
records = me.data.getRange(startIdx, loadEndIdx);
|
|
me.data.un('pageAdded', waitForRequestedRange);
|
|
|
|
// If there is a listener for guranteedrange then fire that event
|
|
if (me.hasListeners.guaranteedrange) {
|
|
me.guaranteeRange(startIdx, loadEndIdx, options.callback, options.scope);
|
|
}
|
|
if (options.callback) {
|
|
options.callback.call(options.scope||me, records, startIdx, endIdx, options);
|
|
}
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
me.fireEvent('load', me, records, true);
|
|
if (options.groupChange) {
|
|
me.fireGroupChange();
|
|
}
|
|
}
|
|
};
|
|
|
|
if (me.fireEvent('beforeload', me, options) !== false) {
|
|
|
|
// So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
|
|
delete me.totalCount;
|
|
|
|
me.loading = true;
|
|
|
|
// Any configured callback is handled in waitForRequestedRange above.
|
|
// It should not be processed by onProxyPrefetch.
|
|
if (options.callback) {
|
|
prefetchOptions = Ext.apply({}, options);
|
|
delete prefetchOptions.callback;
|
|
}
|
|
|
|
// Load the first page in the range, which will give us the initial total count.
|
|
// Once it is loaded, go ahead and prefetch any subsequent pages, if necessary.
|
|
// The prefetchPage has a check to prevent us loading more than the totalCount,
|
|
// so we don't want to blindly load up <n> pages where it isn't required.
|
|
me.on('prefetch', function(store, records, successful, operation) {
|
|
|
|
if (successful) {
|
|
// If there is data in the dataset, we can go ahead and add the pageAdded listener which waits for the visible range
|
|
// and we can also issue the requests to fill the surrounding buffer zones.
|
|
if ((dataSetSize = me.getTotalCount())) {
|
|
|
|
// Wait for the requested range to become available in the page map
|
|
me.data.on('pageAdded', waitForRequestedRange);
|
|
|
|
// As soon as we have the size of the dataset, ensure we are not waiting for more than can ever arrive,
|
|
loadEndIdx = Math.min(loadEndIdx, dataSetSize - 1);
|
|
|
|
// And make sure we never ask for pages beyond the end of the dataset.
|
|
endPage = me.getPageFromRecordIndex(Math.min(loadEndIdx + me.leadingBufferZone, dataSetSize - 1));
|
|
|
|
for (i = startPage + 1; i <= endPage; ++i) {
|
|
me.prefetchPage(i, prefetchOptions);
|
|
}
|
|
} else {
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
me.fireEvent('load', me, records, true);
|
|
}
|
|
}
|
|
// Unsuccessful prefetch: fire a load event with success false.
|
|
else {
|
|
me.fireEvent('load', me, records, false);
|
|
}
|
|
}, null, {single: true});
|
|
|
|
me.prefetchPage(startPage, prefetchOptions);
|
|
}
|
|
},
|
|
|
|
// Buffering
|
|
/**
|
|
* Prefetches data into the store using its configured {@link #proxy}.
|
|
* @param {Object} options (Optional) config object, passed into the Ext.data.Operation object before loading.
|
|
* See {@link #method-load}
|
|
*/
|
|
prefetch: function(options) {
|
|
var me = this,
|
|
pageSize = me.pageSize,
|
|
proxy,
|
|
operation;
|
|
|
|
// Check pageSize has not been tampered with. That would break page caching
|
|
if (pageSize) {
|
|
if (me.lastPageSize && pageSize != me.lastPageSize) {
|
|
Ext.Error.raise("pageSize cannot be dynamically altered");
|
|
}
|
|
if (!me.data.pageSize) {
|
|
me.data.pageSize = pageSize;
|
|
}
|
|
}
|
|
|
|
// Allow first prefetch call to imply the required page size.
|
|
else {
|
|
me.pageSize = me.data.pageSize = pageSize = options.limit;
|
|
}
|
|
|
|
// So that we can check for tampering next time through
|
|
me.lastPageSize = pageSize;
|
|
|
|
// Always get whole pages.
|
|
if (!options.page) {
|
|
options.page = me.getPageFromRecordIndex(options.start);
|
|
options.start = (options.page - 1) * pageSize;
|
|
options.limit = Math.ceil(options.limit / pageSize) * pageSize;
|
|
}
|
|
|
|
// Currently not requesting this page, then request it...
|
|
if (!me.pageRequests[options.page]) {
|
|
|
|
// Copy options into a new object so as not to mutate passed in objects
|
|
options = Ext.apply({
|
|
action : 'read',
|
|
filters: me.filters.items,
|
|
sorters: me.sorters.items,
|
|
groupers: me.groupers.items,
|
|
|
|
// Generation # of the page map to which the requested records belong.
|
|
// If page map is cleared while this request is in flight, the pageMapGeneration will increment and the payload will be rejected
|
|
pageMapGeneration: me.data.pageMapGeneration
|
|
}, options);
|
|
|
|
operation = new Ext.data.Operation(options);
|
|
|
|
if (me.fireEvent('beforeprefetch', me, operation) !== false) {
|
|
proxy = me.proxy;
|
|
me.pageRequests[options.page] = proxy.read(operation, me.onProxyPrefetch, me);
|
|
if (proxy.isSynchronous) {
|
|
delete me.pageRequests[options.page];
|
|
}
|
|
}
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Cancels all pending prefetch requests.
|
|
*
|
|
* This is called when the page map is cleared.
|
|
*
|
|
* Any requests which still make it through will be for the previous pageMapGeneration
|
|
* (pageMapGeneration is incremented upon clear), and so will be rejected upon arrival.
|
|
*/
|
|
onPageMapClear: function() {
|
|
var me = this,
|
|
loadingFlag = me.wasLoading,
|
|
reqs = me.pageRequests,
|
|
req,
|
|
page;
|
|
|
|
// If any requests return, we no longer respond to them.
|
|
if (me.data.events.pageadded) {
|
|
me.data.events.pageadded.clearListeners();
|
|
}
|
|
|
|
// If the page cache gets cleared it's because a full reload is in progress.
|
|
// Setting the loading flag prevents linked Views from displaying the empty text
|
|
// during a load... we don't know whether ther dataset is empty or not.
|
|
me.loading = true;
|
|
me.totalCount = 0;
|
|
|
|
// Cancel all outstanding requests
|
|
for (page in reqs) {
|
|
if (reqs.hasOwnProperty(page)) {
|
|
req = reqs[page];
|
|
delete reqs[page];
|
|
delete req.callback;
|
|
}
|
|
}
|
|
|
|
// This will update any views.
|
|
me.fireEvent('clear', me);
|
|
|
|
// Restore loading flag. The beforeload event could still veto the process.
|
|
// The flag does not get set for real until we pass the beforeload event.
|
|
me.loading = loadingFlag;
|
|
},
|
|
|
|
/**
|
|
* Prefetches a page of data.
|
|
* @param {Number} page The page to prefetch
|
|
* @param {Object} options (Optional) config object, passed into the Ext.data.Operation object before loading.
|
|
* See {@link #method-load}
|
|
*/
|
|
prefetchPage: function(page, options) {
|
|
var me = this,
|
|
pageSize = me.pageSize || me.defaultPageSize,
|
|
start = (page - 1) * me.pageSize,
|
|
total = me.totalCount;
|
|
|
|
// No more data to prefetch.
|
|
if (total !== undefined && me.getCount() === total) {
|
|
return;
|
|
}
|
|
|
|
// Copy options into a new object so as not to mutate passed in objects
|
|
me.prefetch(Ext.applyIf({
|
|
page : page,
|
|
start : start,
|
|
limit : pageSize
|
|
}, options));
|
|
},
|
|
|
|
/**
|
|
* Called after the configured proxy completes a prefetch operation.
|
|
* @private
|
|
* @param {Ext.data.Operation} operation The operation that completed
|
|
*/
|
|
onProxyPrefetch: function(operation) {
|
|
var me = this,
|
|
resultSet = operation.getResultSet(),
|
|
records = operation.getRecords(),
|
|
successful = operation.wasSuccessful(),
|
|
page = operation.page;
|
|
|
|
// Only cache the data if the operation was invoked for the current pageMapGeneration.
|
|
// If the pageMapGeneration has changed since the request was fired off, it will have been cancelled.
|
|
if (operation.pageMapGeneration === me.data.pageMapGeneration) {
|
|
|
|
if (resultSet) {
|
|
me.totalCount = resultSet.total;
|
|
me.fireEvent('totalcountchange', me.totalCount);
|
|
}
|
|
|
|
// Remove the loaded page from the outstanding pages hash
|
|
if (page !== undefined) {
|
|
delete me.pageRequests[page];
|
|
}
|
|
|
|
// Prefetch is broadcast before the page is cached
|
|
me.loading = false;
|
|
me.fireEvent('prefetch', me, records, successful, operation);
|
|
|
|
// Add the page into the page map.
|
|
// pageAdded event may trigger the onGuaranteedRange
|
|
if (successful) {
|
|
me.cachePage(records, operation.page);
|
|
}
|
|
|
|
//this is a callback that would have been passed to the 'read' function and is optional
|
|
Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Caches the records in the prefetch and stripes them with their server-side
|
|
* index.
|
|
* @private
|
|
* @param {Ext.data.Model[]} records The records to cache
|
|
* @param {Ext.data.Operation} page The associated operation
|
|
*/
|
|
cachePage: function(records, page) {
|
|
var me = this,
|
|
len = records.length, i;
|
|
|
|
if (!Ext.isDefined(me.totalCount)) {
|
|
me.totalCount = records.length;
|
|
me.fireEvent('totalcountchange', me.totalCount);
|
|
}
|
|
|
|
// Add the fetched page into the pageCache
|
|
for (i = 0; i < len; i++) {
|
|
records[i].join(me);
|
|
}
|
|
me.data.addPage(page, records);
|
|
},
|
|
|
|
/**
|
|
* Determines if the passed range is available in the page cache.
|
|
* @private
|
|
* @param {Number} start The start index
|
|
* @param {Number} end The end index in the range
|
|
*/
|
|
rangeCached: function(start, end) {
|
|
return this.data && this.data.hasRange(start, end);
|
|
},
|
|
|
|
/**
|
|
* Determines if the passed page is available in the page cache.
|
|
* @private
|
|
* @param {Number} page The page to find in the page cache.
|
|
*/
|
|
pageCached: function(page) {
|
|
return this.data && this.data.hasPage(page);
|
|
},
|
|
|
|
/**
|
|
* Determines if a request for a page is currently running
|
|
* @private
|
|
* @param {Number} page The page to check for
|
|
*/
|
|
pagePending: function(page) {
|
|
return !!this.pageRequests[page];
|
|
},
|
|
|
|
/**
|
|
* Determines if the passed range is available in the page cache.
|
|
* @private
|
|
* @deprecated 4.1.0 use {@link #rangeCached} instead
|
|
* @param {Number} start The start index
|
|
* @param {Number} end The end index in the range
|
|
* @return {Boolean}
|
|
*/
|
|
rangeSatisfied: function(start, end) {
|
|
return this.rangeCached(start, end);
|
|
},
|
|
|
|
/**
|
|
* Determines the page from a record index
|
|
* @param {Number} index The record index
|
|
* @return {Number} The page the record belongs to
|
|
*/
|
|
getPageFromRecordIndex: function(index) {
|
|
return Math.floor(index / this.pageSize) + 1;
|
|
},
|
|
|
|
/**
|
|
* Handles a guaranteed range being loaded
|
|
* @private
|
|
*/
|
|
onGuaranteedRange: function(options) {
|
|
var me = this,
|
|
totalCount = me.getTotalCount(),
|
|
start = options.prefetchStart,
|
|
end = (options.prefetchEnd > totalCount - 1) ? totalCount - 1 : options.prefetchEnd,
|
|
range;
|
|
|
|
end = Math.max(0, end);
|
|
|
|
|
|
range = me.data.getRange(start, end);
|
|
if (options.fireEvent !== false) {
|
|
me.fireEvent('guaranteedrange', range, start, end, options);
|
|
}
|
|
if (options.callback) {
|
|
options.callback.call(options.scope || me, range, start, end, options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Guarantee a specific range, this will load the store with a range (that
|
|
* must be the `pageSize` or smaller) and take care of any loading that may
|
|
* be necessary.
|
|
* @deprecated Use {@link #getRange}
|
|
*/
|
|
guaranteeRange: function(start, end, callback, scope, options) {
|
|
options = Ext.apply({
|
|
callback: callback,
|
|
scope: scope
|
|
}, options);
|
|
this.getRange(start, end, options)
|
|
},
|
|
|
|
/**
|
|
* Ensures that the specified range of rows is present in the cache.
|
|
*
|
|
* Converts the row range to a page range and then only load pages which are not already
|
|
* present in the page cache.
|
|
*/
|
|
prefetchRange: function(start, end) {
|
|
var me = this,
|
|
startPage, endPage, page;
|
|
if (!me.rangeCached(start, end)) {
|
|
startPage = me.getPageFromRecordIndex(start);
|
|
endPage = me.getPageFromRecordIndex(end);
|
|
|
|
// Ensure that the page cache's max size is correct.
|
|
// Our purgePageCount is the number of additional pages *outside of the required range* which
|
|
// may be kept in the cache. A purgePageCount of zero means unlimited.
|
|
me.data.maxSize = me.purgePageCount ? (endPage - startPage + 1) + me.purgePageCount : 0;
|
|
|
|
// We have the range, but ensure that we have a "buffer" of pages around it.
|
|
for (page = startPage; page <= endPage; page++) {
|
|
if (!me.pageCached(page)) {
|
|
me.prefetchPage(page);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
primeCache: function(start, end, direction) {
|
|
var me = this;
|
|
|
|
// Scrolling up
|
|
if (direction === -1) {
|
|
start = Math.max(start - me.leadingBufferZone, 0);
|
|
end = Math.min(end + me.trailingBufferZone, me.totalCount - 1);
|
|
}
|
|
// Scrolling down
|
|
else if (direction === 1) {
|
|
start = Math.max(Math.min(start - me.trailingBufferZone, me.totalCount - me.pageSize), 0);
|
|
end = Math.min(end + me.leadingBufferZone, me.totalCount - 1);
|
|
}
|
|
// Teleporting
|
|
else {
|
|
start = Math.min(Math.max(Math.floor(start - ((me.leadingBufferZone + me.trailingBufferZone) / 2)), 0), me.totalCount - me.pageSize);
|
|
end = Math.min(Math.max(Math.ceil (end + ((me.leadingBufferZone + me.trailingBufferZone) / 2)), 0), me.totalCount - 1);
|
|
}
|
|
me.prefetchRange(start, end);
|
|
},
|
|
|
|
// because prefetchData is stored by index
|
|
// this invalidates all of the prefetchedData
|
|
sort: function() {
|
|
var me = this;
|
|
|
|
if (me.buffered && me.remoteSort) {
|
|
me.data.clear();
|
|
}
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
// overriden to provide striping of the indexes as sorting occurs.
|
|
// this cannot be done inside of sort because datachanged has already
|
|
// fired and will trigger a repaint of the bound view.
|
|
doSort: function(sorterFn) {
|
|
var me = this,
|
|
range,
|
|
ln,
|
|
i;
|
|
|
|
if (me.remoteSort) {
|
|
|
|
// For a buffered Store, we have to clear the prefetch cache since it is keyed by the index within the dataset.
|
|
// Then we must prefetch the new page 1, and when that arrives, reload the visible part of the Store
|
|
// via the guaranteedrange event
|
|
if (me.buffered) {
|
|
me.data.clear();
|
|
me.loadPage(1);
|
|
} else {
|
|
//the load function will pick up the new sorters and request the sorted data from the proxy
|
|
me.load();
|
|
}
|
|
} else {
|
|
me.data.sortBy(sorterFn);
|
|
if (!me.buffered) {
|
|
range = me.getRange();
|
|
ln = range.length;
|
|
for (i = 0; i < ln; i++) {
|
|
range[i].index = i;
|
|
}
|
|
}
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finds the index of the first matching Record in this store by a specific field value.
|
|
*
|
|
* When store is filtered, finds records only within filter.
|
|
*
|
|
* **IMPORTANT
|
|
*
|
|
* If this store is {@link #buffered}, this can ONLY find records which happen to be cached in the page cache.
|
|
* This will be parts of the dataset around the currently visible zone, or recently visited zones if the pages
|
|
* have not yet been purged from the cache.**
|
|
*
|
|
* @param {String} fieldName The name of the Record field to test.
|
|
* @param {String/RegExp} value Either a string that the field value
|
|
* should begin with, or a RegExp to test against the field.
|
|
* @param {Number} [startIndex=0] The index to start searching at
|
|
* @param {Boolean} [anyMatch=false] True to match any part of the string, not just the beginning
|
|
* @param {Boolean} [caseSensitive=false] True for case sensitive comparison
|
|
* @param {Boolean} [exactMatch=false] True to force exact match (^ and $ characters added to the regex).
|
|
* @return {Number} The matched index or -1
|
|
*/
|
|
find: function(property, value, start, anyMatch, caseSensitive, exactMatch) {
|
|
var fn = this.createFilterFn(property, value, anyMatch, caseSensitive, exactMatch);
|
|
return fn ? this.data.findIndexBy(fn, null, start) : -1;
|
|
},
|
|
|
|
/**
|
|
* Finds the first matching Record in this store by a specific field value.
|
|
*
|
|
* When store is filtered, finds records only within filter.
|
|
*
|
|
* **IMPORTANT
|
|
*
|
|
* If this store is {@link #buffered}, this can ONLY find records which happen to be cached in the page cache.
|
|
* This will be parts of the dataset around the currently visible zone, or recently visited zones if the pages
|
|
* have not yet been purged from the cache.**
|
|
*
|
|
* @param {String} fieldName The name of the Record field to test.
|
|
* @param {String/RegExp} value Either a string that the field value
|
|
* should begin with, or a RegExp to test against the field.
|
|
* @param {Number} [startIndex=0] The index to start searching at
|
|
* @param {Boolean} [anyMatch=false] True to match any part of the string, not just the beginning
|
|
* @param {Boolean} [caseSensitive=false] True for case sensitive comparison
|
|
* @param {Boolean} [exactMatch=false] True to force exact match (^ and $ characters added to the regex).
|
|
* @return {Ext.data.Model} The matched record or null
|
|
*/
|
|
findRecord: function() {
|
|
var me = this,
|
|
index = me.find.apply(me, arguments);
|
|
return index !== -1 ? me.getAt(index) : null;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a filter function used to test a the given property's value. Defers most of the work to
|
|
* Ext.util.MixedCollection's createValueMatcher function.
|
|
*
|
|
* @param {String} property The property to create the filter function for
|
|
* @param {String/RegExp} value The string/regex to compare the property value to
|
|
* @param {Boolean} [anyMatch=false] True if we don't care if the filter value is not the full value.
|
|
* @param {Boolean} [caseSensitive=false] True to create a case-sensitive regex.
|
|
* @param {Boolean} [exactMatch=false] True to force exact match (^ and $ characters added to the regex).
|
|
* Ignored if anyMatch is true.
|
|
*/
|
|
createFilterFn: function(property, value, anyMatch, caseSensitive, exactMatch) {
|
|
if (Ext.isEmpty(value)) {
|
|
return false;
|
|
}
|
|
value = this.data.createValueMatcher(value, anyMatch, caseSensitive, exactMatch);
|
|
return function(r) {
|
|
return value.test(r.data[property]);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Finds the index of the first matching Record in this store by a specific field value.
|
|
*
|
|
* When store is filtered, finds records only within filter.
|
|
*
|
|
* **IMPORTANT
|
|
*
|
|
* If this store is {@link #buffered}, this can ONLY find records which happen to be cached in the page cache.
|
|
* This will be parts of the dataset around the currently visible zone, or recently visited zones if the pages
|
|
* have not yet been purged from the cache.**
|
|
*
|
|
* @param {String} fieldName The name of the Record field to test.
|
|
* @param {Object} value The value to match the field against.
|
|
* @param {Number} [startIndex=0] The index to start searching at
|
|
* @return {Number} The matched index or -1
|
|
*/
|
|
findExact: function(property, value, start) {
|
|
return this.data.findIndexBy(function(rec) {
|
|
return rec.isEqual(rec.get(property), value);
|
|
},
|
|
this, start);
|
|
},
|
|
|
|
/**
|
|
* Find the index of the first matching Record in this Store by a function.
|
|
* If the function returns `true` it is considered a match.
|
|
*
|
|
* When store is filtered, finds records only within filter.
|
|
*
|
|
* **IMPORTANT
|
|
*
|
|
* If this store is {@link #buffered}, this can ONLY find records which happen to be cached in the page cache.
|
|
* This will be parts of the dataset around the currently visible zone, or recently visited zones if the pages
|
|
* have not yet been purged from the cache.**
|
|
*
|
|
* @param {Function} fn The function to be called. It will be passed the following parameters:
|
|
* @param {Ext.data.Model} fn.record The record to test for filtering. Access field values
|
|
* using {@link Ext.data.Model#get}.
|
|
* @param {Object} fn.id The ID of the Record passed.
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed.
|
|
* Defaults to this Store.
|
|
* @param {Number} [startIndex=0] The index to start searching at
|
|
* @return {Number} The matched index or -1
|
|
*/
|
|
findBy: function(fn, scope, start) {
|
|
return this.data.findIndexBy(fn, scope, start);
|
|
},
|
|
|
|
/**
|
|
* Collects unique values for a particular dataIndex from this store.
|
|
*
|
|
* @param {String} dataIndex The property to collect
|
|
* @param {Boolean} [allowNull] Pass true to allow null, undefined or empty string values
|
|
* @param {Boolean} [bypassFilter] Pass true to collect from all records, even ones which are filtered.
|
|
* @return {Object[]} An array of the unique values
|
|
*/
|
|
collect: function(dataIndex, allowNull, bypassFilter) {
|
|
var me = this,
|
|
data = (bypassFilter === true && me.snapshot) ? me.snapshot : me.data;
|
|
|
|
return data.collect(dataIndex, 'data', allowNull);
|
|
},
|
|
|
|
/**
|
|
* Gets the number of records in store.
|
|
*
|
|
* If using paging, this may not be the total size of the dataset. If the data object
|
|
* used by the Reader contains the dataset size, then the {@link #getTotalCount} function returns
|
|
* the dataset size. **Note**: see the Important note in {@link #method-load}.
|
|
*
|
|
* When store is filtered, it's the number of records matching the filter.
|
|
*
|
|
* @return {Number} The number of Records in the Store.
|
|
*/
|
|
getCount: function() {
|
|
return this.data.getCount();
|
|
},
|
|
|
|
/**
|
|
* Returns the total number of {@link Ext.data.Model Model} instances that the {@link Ext.data.proxy.Proxy Proxy}
|
|
* indicates exist. This will usually differ from {@link #getCount} when using paging - getCount returns the
|
|
* number of records loaded into the Store at the moment, getTotalCount returns the number of records that
|
|
* could be loaded into the Store if the Store contained all data
|
|
* @return {Number} The total number of Model instances available via the Proxy. 0 returned if
|
|
* no value has been set via the reader.
|
|
*/
|
|
getTotalCount: function() {
|
|
return this.totalCount || 0;
|
|
},
|
|
|
|
/**
|
|
* Get the Record at the specified index.
|
|
*
|
|
* The index is effected by filtering.
|
|
*
|
|
* @param {Number} index The index of the Record to find.
|
|
* @return {Ext.data.Model} The Record at the passed index. Returns undefined if not found.
|
|
*/
|
|
getAt: function(index) {
|
|
return this.data.getAt(index);
|
|
},
|
|
|
|
/**
|
|
* Gathers a range of Records between specified indices.
|
|
*
|
|
* If this store is {@link #buffered}, the indices are relative to the entire dataset, not the local record cache.
|
|
*
|
|
* If this store is {@link #buffered}, then the requested data range *may* not be immediately available, and will
|
|
* be returned through a passed callback function.
|
|
*
|
|
* This method is affected by filtering.
|
|
*
|
|
* @param {Number} start The starting index. Defaults to zero for non {@link #buffered} Stores.
|
|
* @param {Number} end The ending index. Defaults to the last Record for non {@link #buffered} Stores.
|
|
* @param {Object} [options] Used when the Store is {@link #buffered] and the range may not be available synchronously.
|
|
* @param {Object} options.callback A function to call when the range becomes available.
|
|
* @param {Ext.data.Model[]} options.callback.range The requested range of records.
|
|
* @param {Number} options.callback.start The delivered start index.
|
|
* @param {Number} options.callback.end The delivered end index
|
|
* @param {Number} options.callback.options The passed options object.
|
|
* @return {Ext.data.Model[]} An array of records **if the records are immediately available**. For {@link #buffered}
|
|
* stores, you should pass the callback option **unless you know that the range will be present** - see {@link #rangeCached}.
|
|
*/
|
|
getRange: function(start, end, options) {
|
|
|
|
var me = this,
|
|
requiredStart,
|
|
requiredEnd,
|
|
maxIndex = me.totalCount - 1,
|
|
lastRequestStart = me.lastRequestStart,
|
|
pageAddHandler,
|
|
result;
|
|
|
|
options = Ext.apply({
|
|
prefetchStart: start,
|
|
prefetchEnd: end
|
|
}, options);
|
|
|
|
if (me.buffered) {
|
|
// Sanity check end point to be within dataset range
|
|
end = (end >= me.totalCount) ? maxIndex : end;
|
|
|
|
// We must wait for a slightly wider range to be cached.
|
|
// This is to allow grouping features to peek at the two surrounding records
|
|
// when rendering a *range* of records to see whether the start of the range
|
|
// really is a group start and the end of the range really is a group end.
|
|
requiredStart = start === 0 ? 0 : start - 1;
|
|
requiredEnd = end === maxIndex ? end : end + 1;
|
|
|
|
// Keep track of range we are being asked for so we can track direction of movement through the dataset
|
|
me.lastRequestStart = start;
|
|
|
|
// If data request can be satisfied from the page cache
|
|
if (me.rangeCached(requiredStart, requiredEnd)) {
|
|
me.onGuaranteedRange(options);
|
|
result = me.data.getRange(start, end);
|
|
}
|
|
// At least some of the requested range needs loading from server
|
|
else {
|
|
// Private event used by the LoadMask class to perform masking when the range required for rendering is not found in the cache
|
|
me.fireEvent('cachemiss', me, start, end);
|
|
|
|
// Add a pageAdded listener, and as soon as the requested range is loaded, fire the guaranteedrange event
|
|
pageAddHandler = function(page, records) {
|
|
if (me.rangeCached(requiredStart, requiredEnd)) {
|
|
// Private event used by the LoadMask class to unmask when the range required for rendering has been loaded into the cache
|
|
me.fireEvent('cachefilled', me, start, end);
|
|
me.data.un('pageAdded', pageAddHandler);
|
|
me.onGuaranteedRange(options);
|
|
}
|
|
};
|
|
me.data.on('pageAdded', pageAddHandler);
|
|
|
|
// Prioritize the request for the *exact range that the UI is asking for*.
|
|
// When a page request is in flight, it will not be requested again by checking the me.pageRequests hash,
|
|
// so the request after this will only request the *remaining* unrequested pages .
|
|
me.prefetchRange(start, end);
|
|
|
|
}
|
|
// Load the pages around the requested range required by the leadingBufferZone and trailingBufferZone.
|
|
me.primeCache(start, end, start < lastRequestStart ? -1 : 1);
|
|
} else {
|
|
result = me.data.getRange(start, end);
|
|
|
|
// Someone *may* use the callback interface to process their results even if the store is not buffered and always synchronous
|
|
if (options.callback) {
|
|
options.callback.call(options.scope || me, result, start, end, options)
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Get the Record with the specified id.
|
|
*
|
|
* This method is not effected by filtering, lookup will be performed from all records
|
|
* inside the store, filtered or not.
|
|
*
|
|
* @param {Mixed} id The id of the Record to find.
|
|
* @return {Ext.data.Model} The Record with the passed id. Returns null if not found.
|
|
*/
|
|
getById: function(id) {
|
|
var result = (this.snapshot || this.data).findBy(function(record) {
|
|
return record.getId() === id;
|
|
});
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Get the index of the record within the store.
|
|
*
|
|
* When store is filtered, records outside of filter will not be found.
|
|
*
|
|
* @param {Ext.data.Model} record The Ext.data.Model object to find.
|
|
* @return {Number} The index of the passed Record. Returns -1 if not found.
|
|
*/
|
|
indexOf: function(record) {
|
|
return this.data.indexOf(record);
|
|
},
|
|
|
|
/**
|
|
* Get the index within the entire dataset. From 0 to the totalCount.
|
|
*
|
|
* Like #indexOf, this method is effected by filtering.
|
|
*
|
|
* @param {Ext.data.Model} record The Ext.data.Model object to find.
|
|
* @return {Number} The index of the passed Record. Returns -1 if not found.
|
|
*/
|
|
indexOfTotal: function(record) {
|
|
var index = record.index;
|
|
if (index || index === 0) {
|
|
return index;
|
|
}
|
|
return this.indexOf(record);
|
|
},
|
|
|
|
/**
|
|
* Get the index within the store of the Record with the passed id.
|
|
*
|
|
* Like #indexOf, this method is effected by filtering.
|
|
*
|
|
* @param {String} id The id of the Record to find.
|
|
* @return {Number} The index of the Record. Returns -1 if not found.
|
|
*/
|
|
indexOfId: function(id) {
|
|
return this.indexOf(this.getById(id));
|
|
},
|
|
|
|
/*
|
|
* Aggregation methods
|
|
*/
|
|
|
|
/**
|
|
* Convenience function for getting the first model instance in the store.
|
|
*
|
|
* When store is filtered, will return first item within the filter.
|
|
*
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the first record being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Ext.data.Model/undefined} The first model instance in the store, or undefined
|
|
*/
|
|
first: function(grouped) {
|
|
var me = this;
|
|
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(function(records) {
|
|
return records.length ? records[0] : undefined;
|
|
}, me, true);
|
|
} else {
|
|
return me.data.first();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Convenience function for getting the last model instance in the store.
|
|
*
|
|
* When store is filtered, will return last item within the filter.
|
|
*
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the last record being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Ext.data.Model/undefined} The last model instance in the store, or undefined
|
|
*/
|
|
last: function(grouped) {
|
|
var me = this;
|
|
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(function(records) {
|
|
var len = records.length;
|
|
return len ? records[len - 1] : undefined;
|
|
}, me, true);
|
|
} else {
|
|
return me.data.last();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sums the value of `field` for each {@link Ext.data.Model record} in store
|
|
* and returns the result.
|
|
*
|
|
* When store is filtered, only sums items within the filter.
|
|
*
|
|
* @param {String} field A field in each record
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the sum for that group being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Number} The sum
|
|
*/
|
|
sum: function(field, grouped) {
|
|
var me = this;
|
|
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(me.getSum, me, true, [field]);
|
|
} else {
|
|
return me.getSum(me.data.items, field);
|
|
}
|
|
},
|
|
|
|
// @private, see sum
|
|
getSum: function(records, field) {
|
|
var total = 0,
|
|
i = 0,
|
|
len = records.length;
|
|
|
|
for (; i < len; ++i) {
|
|
total += records[i].get(field);
|
|
}
|
|
|
|
return total;
|
|
},
|
|
|
|
/**
|
|
* Gets the count of items in the store.
|
|
*
|
|
* When store is filtered, only items within the filter are counted.
|
|
*
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the count for each group being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Number} the count
|
|
*/
|
|
count: function(grouped) {
|
|
var me = this;
|
|
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(function(records) {
|
|
return records.length;
|
|
}, me, true);
|
|
} else {
|
|
return me.getCount();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the minimum value in the store.
|
|
*
|
|
* When store is filtered, only items within the filter are aggregated.
|
|
*
|
|
* @param {String} field The field in each record
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the minimum in the group being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Object} The minimum value, if no items exist, undefined.
|
|
*/
|
|
min: function(field, grouped) {
|
|
var me = this;
|
|
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(me.getMin, me, true, [field]);
|
|
} else {
|
|
return me.getMin(me.data.items, field);
|
|
}
|
|
},
|
|
|
|
// @private, see min
|
|
getMin: function(records, field) {
|
|
var i = 1,
|
|
len = records.length,
|
|
value, min;
|
|
|
|
if (len > 0) {
|
|
min = records[0].get(field);
|
|
}
|
|
|
|
for (; i < len; ++i) {
|
|
value = records[i].get(field);
|
|
if (value < min) {
|
|
min = value;
|
|
}
|
|
}
|
|
return min;
|
|
},
|
|
|
|
/**
|
|
* Gets the maximum value in the store.
|
|
*
|
|
* When store is filtered, only items within the filter are aggregated.
|
|
*
|
|
* @param {String} field The field in each record
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the maximum in the group being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Object} The maximum value, if no items exist, undefined.
|
|
*/
|
|
max: function(field, grouped) {
|
|
var me = this;
|
|
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(me.getMax, me, true, [field]);
|
|
} else {
|
|
return me.getMax(me.data.items, field);
|
|
}
|
|
},
|
|
|
|
// @private, see max
|
|
getMax: function(records, field) {
|
|
var i = 1,
|
|
len = records.length,
|
|
value,
|
|
max;
|
|
|
|
if (len > 0) {
|
|
max = records[0].get(field);
|
|
}
|
|
|
|
for (; i < len; ++i) {
|
|
value = records[i].get(field);
|
|
if (value > max) {
|
|
max = value;
|
|
}
|
|
}
|
|
return max;
|
|
},
|
|
|
|
/**
|
|
* Gets the average value in the store.
|
|
*
|
|
* When store is filtered, only items within the filter are aggregated.
|
|
*
|
|
* @param {String} field The field in each record
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the group average being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @return {Object} The average value, if no items exist, 0.
|
|
*/
|
|
average: function(field, grouped) {
|
|
var me = this;
|
|
if (grouped && me.isGrouped()) {
|
|
return me.aggregate(me.getAverage, me, true, [field]);
|
|
} else {
|
|
return me.getAverage(me.data.items, field);
|
|
}
|
|
},
|
|
|
|
// @private, see average
|
|
getAverage: function(records, field) {
|
|
var i = 0,
|
|
len = records.length,
|
|
sum = 0;
|
|
|
|
if (records.length > 0) {
|
|
for (; i < len; ++i) {
|
|
sum += records[i].get(field);
|
|
}
|
|
return sum / len;
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
/**
|
|
* Runs the aggregate function for all the records in the store.
|
|
*
|
|
* When store is filtered, only items within the filter are aggregated.
|
|
*
|
|
* @param {Function} fn The function to execute. The function is called with a single parameter,
|
|
* an array of records for that group.
|
|
* @param {Object} [scope] The scope to execute the function in. Defaults to the store.
|
|
* @param {Boolean} [grouped] True to perform the operation for each group
|
|
* in the store. The value returned will be an object literal with the key being the group
|
|
* name and the group average being the value. The grouped parameter is only honored if
|
|
* the store has a groupField.
|
|
* @param {Array} [args] Any arguments to append to the function call
|
|
* @return {Object} An object literal with the group names and their appropriate values.
|
|
*/
|
|
aggregate: function(fn, scope, grouped, args) {
|
|
args = args || [];
|
|
if (grouped && this.isGrouped()) {
|
|
var groups = this.getGroups(),
|
|
len = groups.length,
|
|
out = {},
|
|
group, i;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
group = groups[i];
|
|
out[group.name] = this.getAggregate(fn, scope || this, group.children, args);
|
|
}
|
|
return out;
|
|
} else {
|
|
return this.getAggregate(fn, scope, this.data.items, args);
|
|
}
|
|
},
|
|
|
|
getAggregate: function(fn, scope, records, args){
|
|
args = args || [];
|
|
return fn.apply(scope || this, [records].concat(args));
|
|
},
|
|
|
|
onIdChanged: function(rec, oldId, newId, oldInternalId){
|
|
var snapshot = this.snapshot;
|
|
if (snapshot) {
|
|
snapshot.updateKey(oldInternalId, newId);
|
|
}
|
|
this.data.updateKey(oldInternalId, newId);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Commits all Records with {@link #getModifiedRecords outstanding changes}. To handle updates for changes,
|
|
* subscribe to the Store's {@link #event-update update event}, and perform updating when the third parameter is
|
|
* Ext.data.Record.COMMIT.
|
|
*/
|
|
commitChanges : function(){
|
|
var me = this,
|
|
recs = me.getModifiedRecords(),
|
|
len = recs.length,
|
|
i = 0;
|
|
|
|
for (; i < len; i++){
|
|
recs[i].commit();
|
|
}
|
|
|
|
// Since removals are cached in a simple array we can simply reset it here.
|
|
// Adds and updates are managed in the data MixedCollection and should already be current.
|
|
me.removed.length = 0;
|
|
},
|
|
|
|
filterNewOnly: function(item){
|
|
return item.phantom === true;
|
|
},
|
|
|
|
// Ideally in the future this will use getModifiedRecords, where there will be a param
|
|
// to getNewRecords & getUpdatedRecords to indicate whether to get only the valid
|
|
// records or grab all of them
|
|
getRejectRecords: function() {
|
|
// Return phantom records + updated records
|
|
return Ext.Array.push(this.data.filterBy(this.filterNewOnly).items, this.getUpdatedRecords());
|
|
},
|
|
|
|
/**
|
|
* {@link Ext.data.Model#reject Rejects} outstanding changes on all {@link #getModifiedRecords modified records}
|
|
* and re-insert any records that were removed locally. Any phantom records will be removed.
|
|
*/
|
|
rejectChanges : function() {
|
|
var me = this,
|
|
recs = me.getRejectRecords(),
|
|
len = recs.length,
|
|
i = 0,
|
|
rec;
|
|
|
|
for (; i < len; i++) {
|
|
rec = recs[i];
|
|
rec.reject();
|
|
if (rec.phantom) {
|
|
me.remove(rec);
|
|
}
|
|
}
|
|
|
|
// Restore removed records back to their original positions
|
|
recs = me.removed;
|
|
len = recs.length;
|
|
for (i = 0; i < len; i++) {
|
|
rec = recs[i];
|
|
me.insert(rec.removedFrom || 0, rec);
|
|
rec.reject();
|
|
}
|
|
|
|
// Since removals are cached in a simple array we can simply reset it here.
|
|
// Adds and updates are managed in the data MixedCollection and should already be current.
|
|
me.removed.length = 0;
|
|
}
|
|
}, function() {
|
|
// A dummy empty store with a fieldless Model defined in it.
|
|
// Just for binding to Views which are instantiated with no Store defined.
|
|
// They will be able to run and render fine, and be bound to a generated Store later.
|
|
Ext.regStore('ext-empty-store', {fields: [], proxy: 'memory'});
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.data.reader.Array
|
|
*
|
|
* <p>Data reader class to create an Array of {@link Ext.data.Model} objects from an Array.
|
|
* Each element of that Array represents a row of data fields. The
|
|
* fields are pulled into a Record object using as a subscript, the <code>mapping</code> property
|
|
* of the field definition if it exists, or the field's ordinal position in the definition.</p>
|
|
*
|
|
* <p><u>Example code:</u></p>
|
|
*
|
|
<pre><code>
|
|
Employee = Ext.define('Employee', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
'id',
|
|
{name: 'name', mapping: 1}, // "mapping" only needed if an "id" field is present which
|
|
{name: 'occupation', mapping: 2} // precludes using the ordinal position as the index.
|
|
]
|
|
});
|
|
|
|
var myReader = new Ext.data.reader.Array({
|
|
model: 'Employee'
|
|
}, Employee);
|
|
</code></pre>
|
|
*
|
|
* <p>This would consume an Array like this:</p>
|
|
*
|
|
<pre><code>
|
|
[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
|
|
</code></pre>
|
|
*
|
|
* @constructor
|
|
* Create a new ArrayReader
|
|
* @param {Object} meta Metadata configuration options.
|
|
*/
|
|
Ext.define('Ext.data.reader.Array', {
|
|
extend: Ext.data.reader.Json ,
|
|
alternateClassName: 'Ext.data.ArrayReader',
|
|
alias : 'reader.array',
|
|
|
|
// For Array Reader, methods in the base which use these properties must not see the defaults
|
|
totalProperty: undefined,
|
|
successProperty: undefined,
|
|
|
|
/**
|
|
* @private
|
|
* Returns an accessor expression for the passed Field from an Array using either the Field's mapping, or
|
|
* its ordinal position in the fields collsction as the index.
|
|
* This is used by buildExtractors to create optimized on extractor function which converts raw data into model instances.
|
|
*/
|
|
createFieldAccessExpression: function(field, fieldVarName, dataName) {
|
|
// In the absence of a mapping property, use the original ordinal position
|
|
// at which the Model inserted the field into its collection.
|
|
var index = (field.mapping == null) ? field.originalIndex : field.mapping,
|
|
result;
|
|
|
|
if (typeof index === 'function') {
|
|
result = fieldVarName + '.mapping(' + dataName + ', this)';
|
|
} else {
|
|
if (isNaN(index)) {
|
|
index = '"' + index + '"';
|
|
}
|
|
result = dataName + "[" + index + "]";
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* 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 = Ext.create('Ext.data.ArrayStore', {
|
|
* // store configs
|
|
* storeId: 'myStore',
|
|
* // reader configs
|
|
* 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 #cfg-data} config option.
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.ArrayStore', {
|
|
extend: Ext.data.Store ,
|
|
alias: 'store.array',
|
|
|
|
|
|
|
|
|
|
|
|
constructor: function(config) {
|
|
config = Ext.apply({
|
|
proxy: {
|
|
type: 'memory',
|
|
reader: 'array'
|
|
}
|
|
}, config);
|
|
this.callParent([config]);
|
|
},
|
|
|
|
loadData: function(data, append) {
|
|
if (this.expandData === true) {
|
|
var r = [],
|
|
i = 0,
|
|
ln = data.length;
|
|
|
|
for (; i < ln; i++) {
|
|
r[r.length] = [data[i]];
|
|
}
|
|
|
|
data = r;
|
|
}
|
|
|
|
this.callParent([data, append]);
|
|
}
|
|
}, function() {
|
|
// backwards compat
|
|
Ext.data.SimpleStore = Ext.data.ArrayStore;
|
|
// Ext.reg('simplestore', Ext.data.SimpleStore);
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.data.Batch
|
|
*
|
|
* <p>Provides a mechanism to run one or more {@link Ext.data.Operation operations} in a given order. Fires the 'operationcomplete' event
|
|
* after the completion of each Operation, and the 'complete' event when all Operations have been successfully executed. Fires an 'exception'
|
|
* event if any of the Operations encounter an exception.</p>
|
|
*
|
|
* <p>Usually these are only used internally by {@link Ext.data.proxy.Proxy} classes</p>
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.Batch', {
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} autoStart
|
|
* True to immediately start processing the batch as soon as it is constructed (defaults to false)
|
|
*/
|
|
autoStart: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} pauseOnException
|
|
* True to pause the execution of the batch if any operation encounters an exception
|
|
* (defaults to false). If you set this to true you are responsible for implementing the appropriate
|
|
* handling logic and restarting or discarding the batch as needed. There are different ways you could
|
|
* do this, e.g. by handling the batch's {@link #exception} event directly, or perhaps by overriding
|
|
* {@link Ext.data.AbstractStore#onBatchException onBatchException} at the store level. If you do pause
|
|
* and attempt to handle the exception you can call {@link #retry} to process the same operation again.
|
|
*
|
|
* Note that {@link Ext.data.Operation operations} are atomic, so any operations that may have succeeded
|
|
* prior to an exception (and up until pausing the batch) will be finalized at the server level and will
|
|
* not be automatically reversible. Any transactional / rollback behavior that might be desired would have
|
|
* to be implemented at the application level. Pausing on exception will likely be most beneficial when
|
|
* used in coordination with such a scheme, where an exception might actually affect subsequent operations
|
|
* in the same batch and so should be handled before continuing with the next operation.
|
|
*
|
|
* If you have not implemented transactional operation handling then this option should typically be left
|
|
* to the default of false (e.g. process as many operations as possible, and handle any exceptions
|
|
* asynchronously without holding up the rest of the batch).
|
|
*/
|
|
pauseOnException: false,
|
|
|
|
/**
|
|
* @property {Number} current
|
|
* The index of the current operation being executed. Read only
|
|
*/
|
|
current: -1,
|
|
|
|
/**
|
|
* @property {Number} total
|
|
* The total number of operations in this batch. Read only
|
|
*/
|
|
total: 0,
|
|
|
|
/**
|
|
* @property {Boolean} isRunning
|
|
* True if the batch is currently running. Read only
|
|
*/
|
|
isRunning: false,
|
|
|
|
/**
|
|
* @property {Boolean} isComplete
|
|
* True if this batch has been executed completely. Read only
|
|
*/
|
|
isComplete: false,
|
|
|
|
/**
|
|
* @property {Boolean} hasException
|
|
* True if this batch has encountered an exception. This is cleared at the start of each operation. Read only
|
|
*/
|
|
hasException: false,
|
|
|
|
/**
|
|
* Creates new Batch object.
|
|
* @param {Object} [config] Config object
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
/**
|
|
* @event complete
|
|
* Fired when all operations of this batch have been completed
|
|
* @param {Ext.data.Batch} batch The batch object
|
|
* @param {Object} operation The last operation that was executed
|
|
*/
|
|
|
|
/**
|
|
* @event exception
|
|
* Fired when a operation encountered an exception
|
|
* @param {Ext.data.Batch} batch The batch object
|
|
* @param {Object} operation The operation that encountered the exception
|
|
*/
|
|
|
|
/**
|
|
* @event operationcomplete
|
|
* Fired when each operation of the batch completes
|
|
* @param {Ext.data.Batch} batch The batch object
|
|
* @param {Object} operation The operation that just completed
|
|
*/
|
|
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
/**
|
|
* Ordered array of operations that will be executed by this batch
|
|
* @property {Ext.data.Operation[]} operations
|
|
*/
|
|
me.operations = [];
|
|
|
|
/**
|
|
* Ordered array of operations that raised an exception during the most recent
|
|
* batch execution and did not successfully complete
|
|
* @property {Ext.data.Operation[]} exceptions
|
|
*/
|
|
me.exceptions = [];
|
|
},
|
|
|
|
/**
|
|
* Adds a new operation to this batch at the end of the {@link #operations} array
|
|
* @param {Object} operation The {@link Ext.data.Operation Operation} object
|
|
* @return {Ext.data.Batch} this
|
|
*/
|
|
add: function(operation) {
|
|
this.total++;
|
|
|
|
operation.setBatch(this);
|
|
|
|
this.operations.push(operation);
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Kicks off execution of the batch, continuing from the next operation if the previous
|
|
* operation encountered an exception, or if execution was paused. Use this method to start
|
|
* the batch for the first time or to restart a paused batch by skipping the current
|
|
* unsuccessful operation.
|
|
*
|
|
* To retry processing the current operation before continuing to the rest of the batch (e.g.
|
|
* because you explicitly handled the operation's exception), call {@link #retry} instead.
|
|
*
|
|
* Note that if the batch is already running any call to start will be ignored.
|
|
*
|
|
* @return {Ext.data.Batch} this
|
|
*/
|
|
start: function(/* private */ index) {
|
|
var me = this;
|
|
|
|
if (me.isRunning) {
|
|
return me;
|
|
}
|
|
|
|
me.exceptions.length = 0;
|
|
me.hasException = false;
|
|
me.isRunning = true;
|
|
|
|
return me.runOperation(Ext.isDefined(index) ? index : me.current + 1);
|
|
},
|
|
|
|
/**
|
|
* Kicks off execution of the batch, continuing from the current operation. This is intended
|
|
* for restarting a {@link #pause paused} batch after an exception, and the operation that raised
|
|
* the exception will now be retried. The batch will then continue with its normal processing until
|
|
* all operations are complete or another exception is encountered.
|
|
*
|
|
* Note that if the batch is already running any call to retry will be ignored.
|
|
*
|
|
* @return {Ext.data.Batch} this
|
|
*/
|
|
retry: function() {
|
|
return this.start(this.current);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Runs the next operation, relative to this.current.
|
|
* @return {Ext.data.Batch} this
|
|
*/
|
|
runNextOperation: function() {
|
|
return this.runOperation(this.current + 1);
|
|
},
|
|
|
|
/**
|
|
* Pauses execution of the batch, but does not cancel the current operation
|
|
* @return {Ext.data.Batch} this
|
|
*/
|
|
pause: function() {
|
|
this.isRunning = false;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Executes an operation by its numeric index in the {@link #operations} array
|
|
* @param {Number} index The operation index to run
|
|
* @return {Ext.data.Batch} this
|
|
*/
|
|
runOperation: function(index) {
|
|
var me = this,
|
|
operations = me.operations,
|
|
operation = operations[index],
|
|
onProxyReturn;
|
|
|
|
if (operation === undefined) {
|
|
me.isRunning = false;
|
|
me.isComplete = true;
|
|
me.fireEvent('complete', me, operations[operations.length - 1]);
|
|
} else {
|
|
me.current = index;
|
|
|
|
onProxyReturn = function(operation) {
|
|
var hasException = operation.hasException();
|
|
|
|
if (hasException) {
|
|
me.hasException = true;
|
|
me.exceptions.push(operation);
|
|
me.fireEvent('exception', me, operation);
|
|
}
|
|
|
|
if (hasException && me.pauseOnException) {
|
|
me.pause();
|
|
} else {
|
|
operation.setCompleted();
|
|
me.fireEvent('operationcomplete', me, operation);
|
|
me.runNextOperation();
|
|
}
|
|
};
|
|
|
|
operation.setStarted();
|
|
|
|
me.proxy[operation.action](operation, onProxyReturn, me);
|
|
}
|
|
|
|
return me;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.BufferStore', {
|
|
extend: Ext.data.Store ,
|
|
alias: 'store.buffer',
|
|
sortOnLoad: false,
|
|
filterOnLoad: false,
|
|
|
|
constructor: function() {
|
|
Ext.Error.raise('The BufferStore class has been deprecated. Instead, specify the buffered config option on Ext.data.Store');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Ext.Direct aims to streamline communication between the client and server by providing a single interface that
|
|
* reduces the amount of common code typically required to validate data and handle returned data packets (reading data,
|
|
* error conditions, etc).
|
|
*
|
|
* The Ext.direct namespace includes several classes for a closer integration with the server-side. The Ext.data
|
|
* namespace also includes classes for working with Ext.data.Stores which are backed by data from an Ext.Direct method.
|
|
*
|
|
* # Specification
|
|
*
|
|
* For additional information consult the [Ext.Direct Specification][1].
|
|
*
|
|
* # Providers
|
|
*
|
|
* Ext.Direct uses a provider architecture, where one or more providers are used to transport data to and from the
|
|
* server. There are several providers that exist in the core at the moment:
|
|
*
|
|
* - {@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations
|
|
* - {@link Ext.direct.PollingProvider PollingProvider} for repeated requests
|
|
* - {@link Ext.direct.RemotingProvider RemotingProvider} exposes server side on the client.
|
|
*
|
|
* A provider does not need to be invoked directly, providers are added via {@link Ext.direct.Manager}.{@link #addProvider}.
|
|
*
|
|
* # Router
|
|
*
|
|
* Ext.Direct utilizes a "router" on the server to direct requests from the client to the appropriate server-side
|
|
* method. Because the Ext.Direct API is completely platform-agnostic, you could completely swap out a Java based server
|
|
* solution and replace it with one that uses C# without changing the client side JavaScript at all.
|
|
*
|
|
* # Server side events
|
|
*
|
|
* Custom events from the server may be handled by the client by adding listeners, for example:
|
|
*
|
|
* {"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"}
|
|
*
|
|
* // add a handler for a 'message' event sent by the server
|
|
* Ext.direct.Manager.on('message', function(e){
|
|
* out.append(String.format('<p><i>{0}</i></p>', e.data));
|
|
* out.el.scrollTo('t', 100000, true);
|
|
* });
|
|
*
|
|
* [1]: http://sencha.com/products/extjs/extdirect
|
|
*
|
|
* @singleton
|
|
* @alternateClassName Ext.Direct
|
|
*/
|
|
|
|
Ext.define('Ext.direct.Manager', {
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* Exception types.
|
|
*/
|
|
exceptions: {
|
|
TRANSPORT: 'xhr',
|
|
PARSE: 'parse',
|
|
DATA: 'data',
|
|
LOGIN: 'login',
|
|
SERVER: 'exception'
|
|
},
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event event
|
|
*
|
|
* Fires after an event.
|
|
*
|
|
* @param {Ext.direct.Event} event The Ext.direct.Event type that occurred.
|
|
* @param {Ext.direct.Provider} provider The {@link Ext.direct.Provider Provider}.
|
|
*/
|
|
'event',
|
|
|
|
/**
|
|
* @event exception
|
|
*
|
|
* Fires after an event exception.
|
|
*
|
|
* @param {Ext.direct.Event} event The event type that occurred.
|
|
*/
|
|
'exception'
|
|
);
|
|
|
|
me.transactions = new Ext.util.MixedCollection();
|
|
me.providers = new Ext.util.MixedCollection();
|
|
|
|
me.mixins.observable.constructor.call(me);
|
|
},
|
|
|
|
/**
|
|
* Adds an Ext.Direct Provider and creates the proxy or stub methods to execute server-side methods. If the provider
|
|
* is not already connected, it will auto-connect.
|
|
*
|
|
* var pollProv = new Ext.direct.PollingProvider({
|
|
* url: 'php/poll2.php'
|
|
* });
|
|
*
|
|
* Ext.direct.Manager.addProvider({
|
|
* type: 'remoting', // create a {@link Ext.direct.RemotingProvider}
|
|
* url: 'php/router.php', // url to connect to the Ext.Direct server-side router.
|
|
* actions: { // each property within the actions object represents a Class
|
|
* TestAction: [{ // array of methods within each server side Class
|
|
* name: 'doEcho', // name of method
|
|
* len: 1
|
|
* }, {
|
|
* name: 'multiply',
|
|
* len: 1
|
|
* }, {
|
|
* name: 'doForm',
|
|
* formHandler: true // handle form on server with Ext.Direct.Transaction
|
|
* }]
|
|
* },
|
|
* namespace: 'myApplication', // namespace to create the Remoting Provider in
|
|
* }, {
|
|
* type: 'polling', // create a {@link Ext.direct.PollingProvider}
|
|
* url: 'php/poll.php'
|
|
* },
|
|
* pollProv); // reference to previously created instance
|
|
*
|
|
* @param {Ext.direct.Provider/Object...} provider
|
|
* Accepts any number of Provider descriptions (an instance or config object for
|
|
* a Provider). Each Provider description instructs Ext.Direct how to create
|
|
* client-side stub methods.
|
|
*/
|
|
addProvider: function(provider) {
|
|
var me = this,
|
|
args = arguments,
|
|
relayers = me.relayers || (me.relayers = {}),
|
|
i, len;
|
|
|
|
if (args.length > 1) {
|
|
for (i = 0, len = args.length; i < len; ++i) {
|
|
me.addProvider(args[i]);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// if provider has not already been instantiated
|
|
if (!provider.isProvider) {
|
|
provider = Ext.create('direct.' + provider.type + 'provider', provider);
|
|
}
|
|
|
|
me.providers.add(provider);
|
|
provider.on('data', me.onProviderData, me);
|
|
|
|
if (provider.relayedEvents) {
|
|
relayers[provider.id] = me.relayEvents(provider, provider.relayedEvents);
|
|
}
|
|
|
|
if (!provider.isConnected()) {
|
|
provider.connect();
|
|
}
|
|
|
|
return provider;
|
|
},
|
|
|
|
/**
|
|
* Retrieves a {@link Ext.direct.Provider provider} by the **{@link Ext.direct.Provider#id id}** specified when the
|
|
* provider is {@link #addProvider added}.
|
|
*
|
|
* @param {String/Ext.direct.Provider} id The id of the provider, or the provider instance.
|
|
*/
|
|
getProvider: function(id) {
|
|
return id.isProvider ? id : this.providers.get(id);
|
|
},
|
|
|
|
/**
|
|
* Removes the provider.
|
|
*
|
|
* @param {String/Ext.direct.Provider} provider The provider instance or the id of the provider.
|
|
*
|
|
* @return {Ext.direct.Provider} The provider, null if not found.
|
|
*/
|
|
removeProvider: function(provider) {
|
|
var me = this,
|
|
providers = me.providers,
|
|
relayers = me.relayers,
|
|
id;
|
|
|
|
provider = provider.isProvider ? provider : providers.get(provider);
|
|
|
|
if (provider) {
|
|
provider.un('data', me.onProviderData, me);
|
|
|
|
id = provider.id;
|
|
|
|
if (relayers[id]) {
|
|
relayers[id].destroy();
|
|
delete relayers[id];
|
|
}
|
|
|
|
providers.remove(provider);
|
|
|
|
return provider;
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Adds a transaction to the manager.
|
|
*
|
|
* @param {Ext.direct.Transaction} transaction The transaction to add
|
|
*
|
|
* @return {Ext.direct.Transaction} transaction
|
|
*
|
|
* @private
|
|
*/
|
|
addTransaction: function(transaction) {
|
|
this.transactions.add(transaction);
|
|
|
|
return transaction;
|
|
},
|
|
|
|
/**
|
|
* Removes a transaction from the manager.
|
|
*
|
|
* @param {String/Ext.direct.Transaction} transaction The transaction/id of transaction to remove
|
|
*
|
|
* @return {Ext.direct.Transaction} transaction
|
|
*
|
|
* @private
|
|
*/
|
|
removeTransaction: function(transaction) {
|
|
var me = this;
|
|
|
|
transaction = me.getTransaction(transaction);
|
|
me.transactions.remove(transaction);
|
|
|
|
return transaction;
|
|
},
|
|
|
|
/**
|
|
* Gets a transaction
|
|
*
|
|
* @param {String/Ext.direct.Transaction} transaction The transaction/id of transaction to get
|
|
*
|
|
* @return {Ext.direct.Transaction}
|
|
*
|
|
* @private
|
|
*/
|
|
getTransaction: function(transaction) {
|
|
return typeof transaction === 'object' ? transaction : this.transactions.get(transaction);
|
|
},
|
|
|
|
onProviderData: function(provider, event) {
|
|
var me = this,
|
|
i, len;
|
|
|
|
if (Ext.isArray(event)) {
|
|
for (i = 0, len = event.length; i < len; ++i) {
|
|
me.onProviderData(provider, event[i]);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (event.name && event.name != 'event' && event.name != 'exception') {
|
|
me.fireEvent(event.name, event);
|
|
}
|
|
else if (event.status === false) {
|
|
me.fireEvent('exception', event);
|
|
}
|
|
|
|
me.fireEvent('event', event, provider);
|
|
},
|
|
|
|
/**
|
|
* Parses a direct function. It may be passed in a string format, for example:
|
|
* "MyApp.Person.read".
|
|
*
|
|
* @param {String/Function} fn The direct function
|
|
*
|
|
* @return {Function} The function to use in the direct call. Null if not found
|
|
*
|
|
* @protected
|
|
*/
|
|
parseMethod: function(fn) {
|
|
if (Ext.isString(fn)) {
|
|
var parts = fn.split('.'),
|
|
i = 0,
|
|
len = parts.length,
|
|
current = Ext.global;
|
|
|
|
while (current && i < len) {
|
|
current = current[parts[i]];
|
|
++i;
|
|
}
|
|
|
|
fn = Ext.isFunction(current) ? current : null;
|
|
}
|
|
|
|
return fn || null;
|
|
}
|
|
|
|
}, function() {
|
|
// Backwards compatibility
|
|
Ext.Direct = Ext.direct.Manager;
|
|
});
|
|
|
|
/**
|
|
* This class is used to send requests to the server using {@link Ext.direct.Manager Ext.Direct}. When a
|
|
* request is made, the transport mechanism is handed off to the appropriate
|
|
* {@link Ext.direct.RemotingProvider Provider} to complete the call.
|
|
*
|
|
* # Specifying the function
|
|
*
|
|
* This proxy expects a Direct remoting method to be passed in order to be able to complete requests.
|
|
* This can be done by specifying the {@link #directFn} configuration. This will use the same direct
|
|
* 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.
|
|
*
|
|
* # 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
|
|
* the remoting method parameters are passed.
|
|
*
|
|
* # Example Usage
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['firstName', 'lastName'],
|
|
* proxy: {
|
|
* type: 'direct',
|
|
* directFn: MyApp.getUsers,
|
|
* paramOrder: 'id' // Tells the proxy to pass the id as the first parameter to the remoting method.
|
|
* }
|
|
* });
|
|
* User.load(1);
|
|
*/
|
|
Ext.define('Ext.data.proxy.Direct', {
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.data.proxy.Server ,
|
|
alternateClassName: 'Ext.data.DirectProxy',
|
|
|
|
alias: 'proxy.direct',
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String/String[]} paramOrder
|
|
* Defaults to undefined. A list of params to be executed server side. Specify the params in the order in
|
|
* which they must be executed on the server-side as either (1) an Array of String values, or (2) a String
|
|
* of params delimited by either whitespace, comma, or pipe. For example, any of the following would be
|
|
* acceptable:
|
|
*
|
|
* paramOrder: ['param1','param2','param3']
|
|
* paramOrder: 'param1 param2 param3'
|
|
* paramOrder: 'param1,param2,param3'
|
|
* paramOrder: 'param1|param2|param'
|
|
*/
|
|
paramOrder: undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} paramsAsHash
|
|
* Send parameters as a collection of named arguments.
|
|
* Providing a {@link #paramOrder} nullifies this configuration.
|
|
*/
|
|
paramsAsHash: true,
|
|
|
|
/**
|
|
* @cfg {Function/String} directFn
|
|
* Function to call when executing a request. directFn is a simple alternative to defining the api configuration-parameter
|
|
* for Store's which will not implement a full CRUD api. The directFn may also be a string reference to the fully qualified
|
|
* name of the function, for example: 'MyApp.company.GetProfile'. This can be useful when using dynamic loading. The string
|
|
* will be looked up when the proxy is created.
|
|
*/
|
|
directFn : undefined,
|
|
|
|
/**
|
|
* @cfg {Object} api
|
|
* The same as {@link Ext.data.proxy.Server#api}, however instead of providing urls, you should provide a direct
|
|
* function call. See {@link #directFn}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} extraParams
|
|
* Extra parameters that will be included on every read request. Individual requests with params
|
|
* of the same name will override these params when they are in conflict.
|
|
*/
|
|
|
|
// private
|
|
paramOrderRe: /[\s,|]/,
|
|
|
|
constructor: function(config){
|
|
var me = this,
|
|
paramOrder;
|
|
|
|
me.callParent(arguments);
|
|
|
|
paramOrder = me.paramOrder;
|
|
if (Ext.isString(paramOrder)) {
|
|
me.paramOrder = paramOrder.split(me.paramOrderRe);
|
|
}
|
|
},
|
|
|
|
resolveMethods: function() {
|
|
var me = this,
|
|
fn = me.directFn,
|
|
api = me.api,
|
|
Manager = Ext.direct.Manager,
|
|
method;
|
|
|
|
if (fn) {
|
|
method = me.directFn = Manager.parseMethod(fn);
|
|
|
|
if (!Ext.isFunction(method)) {
|
|
Ext.Error.raise('Cannot resolve directFn ' + fn);
|
|
}
|
|
}
|
|
else if (api) {
|
|
for (fn in api) {
|
|
if (api.hasOwnProperty(fn)) {
|
|
method = api[fn];
|
|
api[fn] = Manager.parseMethod(method);
|
|
|
|
if (!Ext.isFunction(api[fn])) {
|
|
Ext.Error.raise('Cannot resolve Direct api ' + fn + ' method ' + method);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
me.methodsResolved = true;
|
|
},
|
|
|
|
doRequest: function(operation, callback, scope) {
|
|
var me = this,
|
|
writer = me.getWriter(),
|
|
request = me.buildRequest(operation),
|
|
params = request.params,
|
|
args = [],
|
|
fn, method;
|
|
|
|
if (!me.methodsResolved) {
|
|
me.resolveMethods();
|
|
}
|
|
|
|
fn = me.api[request.action] || me.directFn;
|
|
|
|
|
|
if (operation.allowWrite()) {
|
|
request = writer.write(request);
|
|
}
|
|
|
|
if (operation.action == 'read') {
|
|
// We need to pass params
|
|
method = fn.directCfg.method;
|
|
args = method.getArgs(params, me.paramOrder, me.paramsAsHash);
|
|
} else {
|
|
args.push(request.jsonData);
|
|
}
|
|
|
|
Ext.apply(request, {
|
|
args: args,
|
|
directFn: fn
|
|
});
|
|
args.push(me.createRequestCallback(request, operation, callback, scope), me);
|
|
fn.apply(window, args);
|
|
},
|
|
|
|
/*
|
|
* Inherit docs. We don't apply any encoding here because
|
|
* all of the direct requests go out as jsonData
|
|
*/
|
|
applyEncoding: Ext.identityFn,
|
|
|
|
createRequestCallback: function(request, operation, callback, scope){
|
|
var me = this;
|
|
|
|
return function(data, event){
|
|
me.processResponse(event.status, operation, request, event, callback, scope);
|
|
};
|
|
},
|
|
|
|
// inherit docs
|
|
extractResponseData: function(response){
|
|
return Ext.isDefined(response.result) ? response.result : response.data;
|
|
},
|
|
|
|
// inherit docs
|
|
setException: function(operation, response) {
|
|
operation.setException(response.message);
|
|
},
|
|
|
|
// inherit docs
|
|
buildUrl: function(){
|
|
return '';
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Small helper class to create an {@link Ext.data.Store} configured with an {@link Ext.data.proxy.Direct}
|
|
* and {@link Ext.data.reader.Json} to make interacting with an {@link Ext.direct.Manager} server-side
|
|
* {@link Ext.direct.Provider Provider} easier. To create a different proxy/reader combination create a basic
|
|
* {@link Ext.data.Store} configured as needed.
|
|
*
|
|
* **Note:** Although they are not listed, this class inherits all of the config options of:
|
|
*
|
|
* - **{@link Ext.data.Store Store}**
|
|
*
|
|
* - **{@link Ext.data.reader.Json JsonReader}**
|
|
*
|
|
* - **{@link Ext.data.reader.Json#cfg-root root}**
|
|
* - **{@link Ext.data.reader.Json#idProperty idProperty}**
|
|
* - **{@link Ext.data.reader.Json#totalProperty totalProperty}**
|
|
*
|
|
* - **{@link Ext.data.proxy.Direct DirectProxy}**
|
|
*
|
|
* - **{@link Ext.data.proxy.Direct#directFn directFn}**
|
|
* - **{@link Ext.data.proxy.Direct#paramOrder paramOrder}**
|
|
* - **{@link Ext.data.proxy.Direct#paramsAsHash paramsAsHash}**
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.DirectStore', {
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.data.Store ,
|
|
|
|
alias: 'store.direct',
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
constructor : function(config){
|
|
config = Ext.apply({}, config);
|
|
if (!config.proxy) {
|
|
var proxy = {
|
|
type: 'direct',
|
|
reader: {
|
|
type: 'json'
|
|
}
|
|
};
|
|
Ext.copyTo(proxy, config, 'paramOrder,paramsAsHash,directFn,api,simpleSortMode');
|
|
Ext.copyTo(proxy.reader, config, 'totalProperty,root,idProperty');
|
|
config.proxy = proxy;
|
|
}
|
|
this.callParent([config]);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.JsonP
|
|
* @singleton
|
|
* This class is used to create JSONP requests. JSONP is a mechanism that allows for making
|
|
* requests for data cross domain. More information is available <a href="http://en.wikipedia.org/wiki/JSONP">here</a>.
|
|
*/
|
|
Ext.define('Ext.data.JsonP', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
singleton: true,
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* Number of requests done so far.
|
|
* @private
|
|
*/
|
|
requestCount: 0,
|
|
|
|
/**
|
|
* Hash of pending requests.
|
|
* @private
|
|
*/
|
|
requests: {},
|
|
|
|
/**
|
|
* @property timeout
|
|
* @type Number
|
|
* A default timeout for any JsonP requests. If the request has not completed in this time the
|
|
* failure callback will be fired. The timeout is in ms. Defaults to <tt>30000</tt>.
|
|
*/
|
|
timeout: 30000,
|
|
|
|
/**
|
|
* @property disableCaching
|
|
* @type Boolean
|
|
* True to add a unique cache-buster param to requests. Defaults to <tt>true</tt>.
|
|
*/
|
|
disableCaching: true,
|
|
|
|
/**
|
|
* @property disableCachingParam
|
|
* @type String
|
|
* Change the parameter which is sent went disabling caching through a cache buster. Defaults to <tt>'_dc'</tt>.
|
|
*/
|
|
disableCachingParam: '_dc',
|
|
|
|
/**
|
|
* @property callbackKey
|
|
* @type String
|
|
* Specifies the GET parameter that will be sent to the server containing the function name to be executed when
|
|
* the request completes. Defaults to <tt>callback</tt>. Thus, a common request will be in the form of
|
|
* url?callback=Ext.data.JsonP.callback1
|
|
*/
|
|
callbackKey: 'callback',
|
|
|
|
/**
|
|
* Makes a JSONP request.
|
|
* @param {Object} options An object which may contain the following properties. Note that options will
|
|
* take priority over any defaults that are specified in the class.
|
|
* <ul>
|
|
* <li><b>url</b> : String <div class="sub-desc">The URL to request.</div></li>
|
|
* <li><b>params</b> : Object (Optional)<div class="sub-desc">An object containing a series of
|
|
* key value pairs that will be sent along with the request.</div></li>
|
|
* <li><b>timeout</b> : Number (Optional) <div class="sub-desc">See {@link #timeout}</div></li>
|
|
* <li><b>callbackKey</b> : String (Optional) <div class="sub-desc">See {@link #callbackKey}</div></li>
|
|
* <li><b>callbackName</b> : String (Optional) <div class="sub-desc">The function name to use for this request.
|
|
* By default this name will be auto-generated: Ext.data.JsonP.callback1, Ext.data.JsonP.callback2, etc.
|
|
* Setting this option to "my_name" will force the function name to be Ext.data.JsonP.my_name.
|
|
* Use this if you want deterministic behavior, but be careful - the callbackName should be different
|
|
* in each JsonP request that you make.</div></li>
|
|
* <li><b>disableCaching</b> : Boolean (Optional) <div class="sub-desc">See {@link #disableCaching}</div></li>
|
|
* <li><b>disableCachingParam</b> : String (Optional) <div class="sub-desc">See {@link #disableCachingParam}</div></li>
|
|
* <li><b>success</b> : Function (Optional) <div class="sub-desc">A function to execute if the request succeeds.</div></li>
|
|
* <li><b>failure</b> : Function (Optional) <div class="sub-desc">A function to execute if the request fails.</div></li>
|
|
* <li><b>callback</b> : Function (Optional) <div class="sub-desc">A function to execute when the request
|
|
* completes, whether it is a success or failure.</div></li>
|
|
* <li><b>scope</b> : Object (Optional)<div class="sub-desc">The scope in
|
|
* which to execute the callbacks: The "this" object for the callback function. Defaults to the browser window.</div></li>
|
|
* </ul>
|
|
* @return {Object} request An object containing the request details.
|
|
*/
|
|
request: function(options) {
|
|
options = Ext.apply({}, options);
|
|
|
|
|
|
var me = this,
|
|
disableCaching = Ext.isDefined(options.disableCaching) ? options.disableCaching : me.disableCaching,
|
|
cacheParam = options.disableCachingParam || me.disableCachingParam,
|
|
id = ++me.requestCount,
|
|
callbackName = options.callbackName || 'callback' + id,
|
|
callbackKey = options.callbackKey || me.callbackKey,
|
|
timeout = Ext.isDefined(options.timeout) ? options.timeout : me.timeout,
|
|
params = Ext.apply({}, options.params),
|
|
url = options.url,
|
|
name = Ext.name,
|
|
request,
|
|
script;
|
|
|
|
|
|
// Add cachebuster param unless it has already been done
|
|
if (disableCaching && !params[cacheParam]) {
|
|
params[cacheParam] = Ext.Date.now();
|
|
}
|
|
options.params = params;
|
|
|
|
params[callbackKey] = name + '.data.JsonP.' + callbackName;
|
|
script = me.createScript(url, params, options);
|
|
|
|
me.requests[id] = request = {
|
|
url: url,
|
|
params: params,
|
|
script: script,
|
|
id: id,
|
|
scope: options.scope,
|
|
success: options.success,
|
|
failure: options.failure,
|
|
callback: options.callback,
|
|
callbackKey: callbackKey,
|
|
callbackName: callbackName
|
|
};
|
|
|
|
if (timeout > 0) {
|
|
request.timeout = setTimeout(Ext.bind(me.handleTimeout, me, [request]), timeout);
|
|
}
|
|
|
|
me.setupErrorHandling(request);
|
|
me[callbackName] = Ext.bind(me.handleResponse, me, [request], true);
|
|
me.loadScript(request);
|
|
return request;
|
|
},
|
|
|
|
/**
|
|
* Abort a request. If the request parameter is not specified all open requests will
|
|
* be aborted.
|
|
* @param {Object/String} request (Optional) The request to abort
|
|
*/
|
|
abort: function(request){
|
|
var me = this,
|
|
requests = me.requests,
|
|
key;
|
|
|
|
if (request) {
|
|
if (!request.id) {
|
|
request = requests[request];
|
|
}
|
|
me.handleAbort(request);
|
|
} else {
|
|
for (key in requests) {
|
|
if (requests.hasOwnProperty(key)) {
|
|
me.abort(requests[key]);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets up error handling for the script
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
setupErrorHandling: function(request){
|
|
request.script.onerror = Ext.bind(this.handleError, this, [request]);
|
|
},
|
|
|
|
/**
|
|
* Handles any aborts when loading the script
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
handleAbort: function(request){
|
|
request.errorType = 'abort';
|
|
this.handleResponse(null, request);
|
|
},
|
|
|
|
/**
|
|
* Handles any script errors when loading the script
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
handleError: function(request){
|
|
request.errorType = 'error';
|
|
this.handleResponse(null, request);
|
|
},
|
|
|
|
/**
|
|
* Cleans up anu script handling errors
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
cleanupErrorHandling: function(request){
|
|
request.script.onerror = null;
|
|
},
|
|
|
|
/**
|
|
* Handle any script timeouts
|
|
* @private
|
|
* @param {Object} request The request
|
|
*/
|
|
handleTimeout: function(request){
|
|
request.errorType = 'timeout';
|
|
this.handleResponse(null, request);
|
|
},
|
|
|
|
/**
|
|
* Handle a successful response
|
|
* @private
|
|
* @param {Object} result The result from the request
|
|
* @param {Object} request The request
|
|
*/
|
|
handleResponse: function(result, request){
|
|
|
|
var success = true;
|
|
|
|
if (request.timeout) {
|
|
clearTimeout(request.timeout);
|
|
}
|
|
delete this[request.callbackName];
|
|
delete this.requests[request.id];
|
|
this.cleanupErrorHandling(request);
|
|
Ext.fly(request.script).remove();
|
|
|
|
if (request.errorType) {
|
|
success = false;
|
|
Ext.callback(request.failure, request.scope, [request.errorType]);
|
|
} else {
|
|
Ext.callback(request.success, request.scope, [result]);
|
|
}
|
|
Ext.callback(request.callback, request.scope, [success, result, request.errorType]);
|
|
Ext.EventManager.idleEvent.fire();
|
|
},
|
|
|
|
/**
|
|
* Create the script tag given the specified url, params and options. The options
|
|
* parameter is passed to allow an override to access it.
|
|
* @private
|
|
* @param {String} url The url of the request
|
|
* @param {Object} params Any extra params to be sent
|
|
* @param {Object} options The object passed to {@link #request}.
|
|
*/
|
|
createScript: function(url, params, options) {
|
|
var script = document.createElement('script');
|
|
script.setAttribute("src", Ext.urlAppend(url, Ext.Object.toQueryString(params)));
|
|
script.setAttribute("async", true);
|
|
script.setAttribute("type", "text/javascript");
|
|
return script;
|
|
},
|
|
|
|
/**
|
|
* Loads the script for the given request by appending it to the HEAD element. This is
|
|
* its own method so that users can override it (as well as {@link #createScript}).
|
|
* @private
|
|
* @param request The request object.
|
|
*/
|
|
loadScript: function (request) {
|
|
Ext.getHead().appendChild(request.script);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* The JsonP proxy is useful when you need to load data from a domain other than the one your application is running on. If
|
|
* your application is running on http://domainA.com it cannot use {@link Ext.data.proxy.Ajax Ajax} to load its data
|
|
* from http://domainB.com because cross-domain ajax requests are prohibited by the browser.
|
|
*
|
|
* We can get around this using a JsonP proxy. JsonP proxy injects a `<script>` tag into the DOM whenever an AJAX request
|
|
* would usually be made. Let's say we want to load data from http://domainB.com/users - the script tag that would be
|
|
* injected might look like this:
|
|
*
|
|
* <script src="http://domainB.com/users?callback=someCallback"></script>
|
|
*
|
|
* When we inject the tag above, the browser makes a request to that url and includes the response as if it was any
|
|
* other type of JavaScript include. By passing a callback in the url above, we're telling domainB's server that we want
|
|
* to be notified when the result comes in and that it should call our callback function with the data it sends back. So
|
|
* long as the server formats the response to look like this, everything will work:
|
|
*
|
|
* someCallback({
|
|
* users: [
|
|
* {
|
|
* id: 1,
|
|
* name: "Ed Spencer",
|
|
* email: "ed@sencha.com"
|
|
* }
|
|
* ]
|
|
* });
|
|
*
|
|
* As soon as the script finishes loading, the 'someCallback' function that we passed in the url is called with the JSON
|
|
* object that the server returned.
|
|
*
|
|
* JsonP proxy takes care of all of this automatically. It formats the url you pass, adding the callback parameter
|
|
* automatically. It even creates a temporary callback function, waits for it to be called and then puts the data into
|
|
* the Proxy making it look just like you loaded it through a normal {@link Ext.data.proxy.Ajax AjaxProxy}. Here's how
|
|
* we might set that up:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email']
|
|
* });
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'jsonp',
|
|
* url : 'http://domainB.com/users'
|
|
* }
|
|
* });
|
|
*
|
|
* store.load();
|
|
*
|
|
* That's all we need to do - JsonP proxy takes care of the rest. In this case the Proxy will have injected a script tag
|
|
* like this:
|
|
*
|
|
* <script src="http://domainB.com/users?callback=callback1"></script>
|
|
*
|
|
* # Customization
|
|
*
|
|
* This script tag can be customized using the {@link #callbackKey} configuration. For example:
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'jsonp',
|
|
* url : 'http://domainB.com/users',
|
|
* callbackKey: 'theCallbackFunction'
|
|
* }
|
|
* });
|
|
*
|
|
* store.load();
|
|
*
|
|
* Would inject a script tag like this:
|
|
*
|
|
* <script src="http://domainB.com/users?theCallbackFunction=callback1"></script>
|
|
*
|
|
* # Implementing on the server side
|
|
*
|
|
* The remote server side needs to be configured to return data in this format. Here are suggestions for how you might
|
|
* achieve this using Java, PHP and ASP.net:
|
|
*
|
|
* Java:
|
|
*
|
|
* boolean jsonP = false;
|
|
* String cb = request.getParameter("callback");
|
|
* if (cb != null) {
|
|
* jsonP = true;
|
|
* response.setContentType("text/javascript");
|
|
* } else {
|
|
* response.setContentType("application/x-json");
|
|
* }
|
|
* Writer out = response.getWriter();
|
|
* if (jsonP) {
|
|
* out.write(cb + "(");
|
|
* }
|
|
* out.print(dataBlock.toJsonString());
|
|
* if (jsonP) {
|
|
* out.write(");");
|
|
* }
|
|
*
|
|
* PHP:
|
|
*
|
|
* $callback = $_REQUEST['callback'];
|
|
*
|
|
* // Create the output object.
|
|
* $output = array('a' => 'Apple', 'b' => 'Banana');
|
|
*
|
|
* //start output
|
|
* if ($callback) {
|
|
* header('Content-Type: text/javascript');
|
|
* echo $callback . '(' . json_encode($output) . ');';
|
|
* } else {
|
|
* header('Content-Type: application/x-json');
|
|
* echo json_encode($output);
|
|
* }
|
|
*
|
|
* ASP.net:
|
|
*
|
|
* String jsonString = "{success: true}";
|
|
* String cb = Request.Params.Get("callback");
|
|
* String responseString = "";
|
|
* if (!String.IsNullOrEmpty(cb)) {
|
|
* responseString = cb + "(" + jsonString + ")";
|
|
* } else {
|
|
* responseString = jsonString;
|
|
* }
|
|
* Response.Write(responseString);
|
|
*/
|
|
Ext.define('Ext.data.proxy.JsonP', {
|
|
extend: Ext.data.proxy.Server ,
|
|
alternateClassName: 'Ext.data.ScriptTagProxy',
|
|
alias: ['proxy.jsonp', 'proxy.scripttag'],
|
|
|
|
|
|
defaultWriterType: 'base',
|
|
|
|
/**
|
|
* @cfg {String} callbackKey
|
|
* See {@link Ext.data.JsonP#callbackKey}.
|
|
*/
|
|
callbackKey : 'callback',
|
|
|
|
/**
|
|
* @cfg {String} [recordParam=records]
|
|
* The HTTP parameter name to use when passing records to the server and the {@link #writer Json writer} is not configured
|
|
* to {@link Ext.data.writer.Json#encode encode} records into a parameter.
|
|
*
|
|
* The {@link #encodeRecords} method is used to encode the records to create this parameter's value.
|
|
*/
|
|
recordParam: 'records',
|
|
|
|
/**
|
|
* @cfg {Boolean} autoAppendParams
|
|
* True to automatically append the request's params to the generated url. Defaults to true
|
|
*/
|
|
autoAppendParams: true,
|
|
|
|
constructor: function() {
|
|
this.addEvents(
|
|
/**
|
|
* @event
|
|
* Fires when the server returns an exception. This event may also be listened
|
|
* to in the event that a request has timed out or has been aborted.
|
|
* @param {Ext.data.proxy.Proxy} this
|
|
* @param {Ext.data.Request} request The request that was sent
|
|
* @param {Ext.data.Operation} operation The operation that triggered the request
|
|
*/
|
|
'exception'
|
|
);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Performs the read request to the remote domain. JsonP proxy does not actually create an Ajax request,
|
|
* instead we write out a `<script>` tag based on the configuration of the internal Ext.data.Request object
|
|
* @param {Ext.data.Operation} operation The {@link Ext.data.Operation Operation} object to execute
|
|
* @param {Function} callback A callback function to execute when the Operation has been completed
|
|
* @param {Object} scope The scope to execute the callback in
|
|
*/
|
|
doRequest: function(operation, callback, scope) {
|
|
//generate the unique IDs for this request
|
|
var me = this,
|
|
request = me.buildRequest(operation),
|
|
params = request.params;
|
|
|
|
// apply JsonP proxy-specific attributes to the Request
|
|
Ext.apply(request, {
|
|
callbackKey: me.callbackKey,
|
|
timeout: me.timeout,
|
|
scope: me,
|
|
disableCaching: false, // handled by the proxy
|
|
callback: me.createRequestCallback(request, operation, callback, scope)
|
|
});
|
|
|
|
// If we are responsible for appending the params to the URL, clear them now so that
|
|
// The Ext.data.JsonP singleton does not append them.
|
|
if (me.autoAppendParams) {
|
|
request.params = {};
|
|
}
|
|
|
|
request.jsonp = Ext.data.JsonP.request(request);
|
|
// restore on the request
|
|
request.params = params;
|
|
operation.setStarted();
|
|
me.lastRequest = request;
|
|
|
|
return request;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates and returns the function that is called when the request has completed. The returned function
|
|
* should accept a Response object, which contains the response to be read by the configured Reader.
|
|
* The third argument is the callback that should be called after the request has been completed and the Reader has decoded
|
|
* the response. This callback will typically be the callback passed by a store, e.g. in proxy.read(operation, theCallback, scope)
|
|
* theCallback refers to the callback argument received by this function.
|
|
* See {@link #doRequest} for details.
|
|
* @param {Ext.data.Request} request The Request object
|
|
* @param {Ext.data.Operation} operation The Operation being executed
|
|
* @param {Function} callback The callback function to be called when the request completes. This is usually the callback
|
|
* passed to doRequest
|
|
* @param {Object} scope The scope in which to execute the callback function
|
|
* @return {Function} The callback function
|
|
*/
|
|
createRequestCallback: function(request, operation, callback, scope) {
|
|
var me = this;
|
|
|
|
return function(success, response, errorType) {
|
|
delete me.lastRequest;
|
|
me.processResponse(success, operation, request, response, callback, scope);
|
|
};
|
|
},
|
|
|
|
// inherit docs
|
|
setException: function(operation, response) {
|
|
operation.setException(operation.request.jsonp.errorType);
|
|
},
|
|
|
|
|
|
/**
|
|
* Generates a url based on a given Ext.data.Request object. Adds the params and callback function name to the url
|
|
* @param {Ext.data.Request} request The request object
|
|
* @return {String} The url
|
|
*/
|
|
buildUrl: function(request) {
|
|
var me = this,
|
|
url = me.callParent(arguments),
|
|
records = request.records,
|
|
writer = me.getWriter(),
|
|
params,
|
|
filters,
|
|
filter, i;
|
|
|
|
// In the JsonP proxy, params may only go into the URL.
|
|
// So params created by the Writer get applied to the request's params here
|
|
if (writer && request.operation.allowWrite()) {
|
|
request = writer.write(request);
|
|
}
|
|
|
|
// Encode filters into the URL via params
|
|
params = request.params;
|
|
filters = params.filters,
|
|
delete params.filters;
|
|
if (filters && filters.length) {
|
|
for (i = 0; i < filters.length; i++) {
|
|
filter = filters[i];
|
|
|
|
if (filter.value) {
|
|
params[filter.property] = filter.value;
|
|
}
|
|
}
|
|
}
|
|
|
|
// If there's no writer, or the writer is not configured to encode the records into a parameter, then we have to do it here.
|
|
if ((!writer || !writer.encode) && Ext.isArray(records) && records.length > 0) {
|
|
params[me.recordParam] = me.encodeRecords(records);
|
|
}
|
|
|
|
// If we are responsible for appending the params to the URL, do it now.
|
|
// The params are cleared in doRequest so that the Ext.data.JsonP singleton does not add them.
|
|
if (me.autoAppendParams) {
|
|
url = Ext.urlAppend(url, Ext.Object.toQueryString(params));
|
|
}
|
|
|
|
return url;
|
|
},
|
|
|
|
/**
|
|
* Aborts the current server request if one is currently running
|
|
*/
|
|
abort: function() {
|
|
var lastRequest = this.lastRequest;
|
|
if (lastRequest) {
|
|
Ext.data.JsonP.abort(lastRequest.jsonp);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Encodes an array of records into a value suitable to be added to the request `params` as the {@link #recordParam} parameter.
|
|
* This is broken out into its own function so that it can be easily overridden.
|
|
*
|
|
* The default implementation
|
|
* @param {Ext.data.Model[]} records The records array
|
|
* @return {Array} An array of record data objects
|
|
*/
|
|
encodeRecords: function(records) {
|
|
var encoded = [],
|
|
i = 0,
|
|
len = records.length;
|
|
|
|
for (; i < len; i++) {
|
|
encoded.push(Ext.encode(records[i].getData()));
|
|
}
|
|
|
|
return encoded;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.JsonPStore
|
|
* @extends Ext.data.Store
|
|
* <p>Small helper class to make creating {@link Ext.data.Store}s from different domain JSON data easier.
|
|
* A JsonPStore will be automatically configured with a {@link Ext.data.reader.Json} and a {@link Ext.data.proxy.JsonP JsonPProxy}.</p>
|
|
* <p>A store configuration would be something like:<pre><code>
|
|
var store = new Ext.data.JsonPStore({
|
|
// store configs
|
|
storeId: 'myStore',
|
|
|
|
// proxy configs
|
|
url: 'get-images.php',
|
|
|
|
// reader configs
|
|
root: 'images',
|
|
idProperty: 'name',
|
|
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
|
|
});
|
|
* </code></pre></p>
|
|
* <p>This store is configured to consume a returned object of the form:<pre><code>
|
|
stcCallback({
|
|
images: [
|
|
{name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
|
|
{name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
|
|
]
|
|
})
|
|
* </code></pre>
|
|
* <p>Where stcCallback is the callback name passed in the request to the remote domain. See {@link Ext.data.proxy.JsonP JsonPProxy}
|
|
* for details of how this works.</p>
|
|
* An object literal of this form could also be used as the {@link #cfg-data} config option.</p>
|
|
* @xtype jsonpstore
|
|
*/
|
|
Ext.define('Ext.data.JsonPStore', {
|
|
extend: Ext.data.Store ,
|
|
alias : 'store.jsonp',
|
|
|
|
|
|
|
|
|
|
|
|
constructor: function(config) {
|
|
config = Ext.apply({
|
|
proxy: {
|
|
type: 'jsonp',
|
|
reader: 'json'
|
|
}
|
|
}, config);
|
|
this.callParent([config]);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Small helper class to make creating {@link Ext.data.Store}s from JSON data easier.
|
|
* A JsonStore will be automatically configured with a {@link Ext.data.reader.Json}.
|
|
*
|
|
* A store configuration would be something like:
|
|
*
|
|
* var store = new Ext.data.JsonStore({
|
|
* // store configs
|
|
* storeId: 'myStore',
|
|
*
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url: 'get-images.php',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'images',
|
|
* idProperty: 'name'
|
|
* }
|
|
* },
|
|
*
|
|
* //alternatively, a {@link Ext.data.Model} name can be given (see {@link Ext.data.Store} for an example)
|
|
* fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
|
|
* });
|
|
*
|
|
* This store is configured to consume a returned object of the form:
|
|
*
|
|
* {
|
|
* images: [
|
|
* {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
|
|
* {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
|
|
* ]
|
|
* }
|
|
*
|
|
* An object literal of this form could also be used as the {@link #cfg-data} config option.
|
|
*
|
|
* @author Ed Spencer
|
|
*/
|
|
Ext.define('Ext.data.JsonStore', {
|
|
extend: Ext.data.Store ,
|
|
alias: 'store.json',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
constructor: function(config) {
|
|
config = Ext.apply({
|
|
proxy: {
|
|
type : 'ajax',
|
|
reader: 'json',
|
|
writer: 'json'
|
|
}
|
|
}, config);
|
|
this.callParent([config]);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is used as a set of methods that are applied to the prototype of a
|
|
* Model to decorate it with a Node API. This means that models used in conjunction with a tree
|
|
* will have all of the tree related methods available on the model. In general this class will
|
|
* not be used directly by the developer. This class also creates extra fields on the model if
|
|
* they do not exist, to help maintain the tree state and UI. These fields are documented as
|
|
* config options.
|
|
*/
|
|
Ext.define('Ext.data.NodeInterface', {
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {String} parentId
|
|
* ID of parent node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} index
|
|
* The position of the node inside its parent. When parent has 4 children and the node is third amongst them,
|
|
* index will be 2.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} depth
|
|
* The number of parents this node has. A root node has depth 0, a child of it depth 1, and so on...
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [expanded=false]
|
|
* True if the node is expanded.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [expandable=false]
|
|
* Set to true to allow for expanding/collapsing of this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [checked=null]
|
|
* Set to true or false to show a checkbox alongside this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [leaf=false]
|
|
* Set to true to indicate that this child can have no children. The expand icon/arrow will then not be
|
|
* rendered for this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* CSS class to apply for this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* CSS class to apply for this node's icon.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* URL for this node's icon.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} root
|
|
* True if this is the root node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} isLast
|
|
* True if this is the last node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} isFirst
|
|
* True if this is the first node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowDrop=true]
|
|
* Set to false to deny dropping on this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowDrag=true]
|
|
* Set to false to deny dragging of this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [loaded=false]
|
|
* True if the node has finished loading.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [loading=false]
|
|
* True if the node is currently loading.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} href
|
|
* An URL for a link that's created when this config is specified.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} hrefTarget
|
|
* Target for link. Only applicable when {@link #href} also specified.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} qtip
|
|
* Tooltip text to show on this node.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} qtitle
|
|
* Tooltip title.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} qshowDelay
|
|
* Tooltip showDelay.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The text to show on node label.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.data.NodeInterface[]} children
|
|
* Array of child nodes.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface} nextSibling
|
|
* A reference to this node's next sibling node. `null` if this node does not have a next sibling.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface} previousSibling
|
|
* A reference to this node's previous sibling node. `null` if this node does not have a previous sibling.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface} parentNode
|
|
* A reference to this node's parent node. `null` if this node is the root node.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface} lastChild
|
|
* A reference to this node's last child node. `null` if this node has no children.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface} firstChild
|
|
* A reference to this node's first child node. `null` if this node has no children.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface[]} childNodes
|
|
* An array of this nodes children. Array will be empty if this node has no chidren.
|
|
*/
|
|
|
|
statics: {
|
|
/**
|
|
* This method allows you to decorate a Model's class to implement the NodeInterface.
|
|
* This adds a set of methods, new events, new properties and new fields on every Record.
|
|
* @param {Ext.Class/Ext.data.Model} modelClass The Model class or an instance of the Model class you want to
|
|
* decorate the prototype of.
|
|
* @static
|
|
*/
|
|
decorate: function(modelClass) {
|
|
var idName, idField, idType;
|
|
|
|
// get the reference to the model class, in case the argument was a string or a record
|
|
if (typeof modelClass == 'string') {
|
|
modelClass = Ext.ModelManager.getModel(modelClass);
|
|
} else if (modelClass.isModel) {
|
|
modelClass = Ext.ModelManager.getModel(modelClass.modelName);
|
|
}
|
|
|
|
// avoid unnecessary work in case the model was already decorated
|
|
if (modelClass.prototype.isNode) {
|
|
return;
|
|
}
|
|
|
|
idName = modelClass.prototype.idProperty;
|
|
idField = modelClass.prototype.fields.get(idName);
|
|
idType = modelClass.prototype.fields.get(idName).type.type;
|
|
|
|
modelClass.override(this.getPrototypeBody());
|
|
this.applyFields(modelClass, [
|
|
{ name : 'parentId', type : idType, defaultValue : null, useNull : idField.useNull },
|
|
{ name : 'index', type : 'int', defaultValue : 0, persist : false , convert: null },
|
|
{ name : 'depth', type : 'int', defaultValue : 0, persist : false , convert: null },
|
|
{ name : 'expanded', type : 'bool', defaultValue : false, persist : false , convert: null },
|
|
{ name : 'expandable', type : 'bool', defaultValue : true, persist : false , convert: null },
|
|
{ name : 'checked', type : 'auto', defaultValue : null, persist : false , convert: null },
|
|
{ name : 'leaf', type : 'bool', defaultValue : false },
|
|
{ name : 'cls', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'iconCls', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'icon', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'root', type : 'boolean', defaultValue : false, persist : false , convert: null },
|
|
{ name : 'isLast', type : 'boolean', defaultValue : false, persist : false , convert: null },
|
|
{ name : 'isFirst', type : 'boolean', defaultValue : false, persist : false , convert: null },
|
|
{ name : 'allowDrop', type : 'boolean', defaultValue : true, persist : false , convert: null },
|
|
{ name : 'allowDrag', type : 'boolean', defaultValue : true, persist : false , convert: null },
|
|
{ name : 'loaded', type : 'boolean', defaultValue : false, persist : false , convert: null },
|
|
{ name : 'loading', type : 'boolean', defaultValue : false, persist : false , convert: null },
|
|
{ name : 'href', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'hrefTarget', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'qtip', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'qtitle', type : 'string', defaultValue : '', persist : false , convert: null },
|
|
{ name : 'qshowDelay', type : 'int', defaultValue : 0, persist : false , convert: null },
|
|
{ name : 'children', type : 'auto', defaultValue : null, persist : false , convert: null }
|
|
]);
|
|
},
|
|
|
|
applyFields: function(modelClass, addFields) {
|
|
var modelPrototype = modelClass.prototype,
|
|
fields = modelPrototype.fields,
|
|
keys = fields.keys,
|
|
ln = addFields.length,
|
|
addField, i;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
addField = addFields[i];
|
|
if (!Ext.Array.contains(keys, addField.name)) {
|
|
fields.add(new Ext.data.Field(addField));
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
getPrototypeBody: function() {
|
|
var bubbledEvents = {
|
|
idchanged : true,
|
|
append : true,
|
|
remove : true,
|
|
move : true,
|
|
insert : true,
|
|
beforeappend : true,
|
|
beforeremove : true,
|
|
beforemove : true,
|
|
beforeinsert : true,
|
|
expand : true,
|
|
collapse : true,
|
|
beforeexpand : true,
|
|
beforecollapse: true,
|
|
sort : true,
|
|
rootchange : true
|
|
};
|
|
return {
|
|
/**
|
|
* @property {Boolean} isNode
|
|
* `true` in this class to identify an object as an instantiated Node, or subclass thereof.
|
|
*/
|
|
isNode: true,
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.firstChild = me.lastChild = me.parentNode = me.previousSibling = me.nextSibling = null;
|
|
me.childNodes = [];
|
|
|
|
// These events are fired on this node, and programatically bubble up the parentNode axis, ending up
|
|
// walking off the top and firing on the owning Ext.data.Tree structure, and its owning Ext.data.TreeStore
|
|
/**
|
|
* @event append
|
|
* Fires when a new child node is appended
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} node The newly appended node
|
|
* @param {Number} index The index of the newly appended node
|
|
*/
|
|
/**
|
|
* @event remove
|
|
* Fires when a child node is removed
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} node The removed node
|
|
* @param {Boolean} isMove `true` if the child node is being removed so it can be moved to another position in the tree.
|
|
* (a side effect of calling {@link Ext.data.NodeInterface#appendChild appendChild} or
|
|
* {@link Ext.data.NodeInterface#insertBefore insertBefore} with a node that already has a parentNode)
|
|
*/
|
|
/**
|
|
* @event move
|
|
* Fires when this node is moved to a new location in the tree
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} oldParent The old parent of this node
|
|
* @param {Ext.data.NodeInterface} newParent The new parent of this node
|
|
* @param {Number} index The index it was moved to
|
|
*/
|
|
/**
|
|
* @event insert
|
|
* Fires when a new child node is inserted.
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} node The child node inserted
|
|
* @param {Ext.data.NodeInterface} refNode The child node the node was inserted before
|
|
*/
|
|
/**
|
|
* @event beforeappend
|
|
* Fires before a new child is appended, return false to cancel the append.
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} node The child node to be appended
|
|
*/
|
|
/**
|
|
* @event beforeremove
|
|
* Fires before a child is removed, return false to cancel the remove.
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} node The child node to be removed
|
|
* @param {Boolean} isMove `true` if the child node is being removed so it can be moved to another position in the tree.
|
|
* (a side effect of calling {@link Ext.data.NodeInterface#appendChild appendChild} or
|
|
* {@link Ext.data.NodeInterface#insertBefore insertBefore} with a node that already has a parentNode)
|
|
*/
|
|
/**
|
|
* @event beforemove
|
|
* Fires before this node is moved to a new location in the tree. Return false to cancel the move.
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} oldParent The parent of this node
|
|
* @param {Ext.data.NodeInterface} newParent The new parent this node is moving to
|
|
* @param {Number} index The index it is being moved to
|
|
*/
|
|
/**
|
|
* @event beforeinsert
|
|
* Fires before a new child is inserted, return false to cancel the insert.
|
|
* @param {Ext.data.NodeInterface} this This node
|
|
* @param {Ext.data.NodeInterface} node The child node to be inserted
|
|
* @param {Ext.data.NodeInterface} refNode The child node the node is being inserted before
|
|
*/
|
|
/**
|
|
* @event expand
|
|
* Fires when this node is expanded.
|
|
* @param {Ext.data.NodeInterface} this The expanding node
|
|
*/
|
|
/**
|
|
* @event collapse
|
|
* Fires when this node is collapsed.
|
|
* @param {Ext.data.NodeInterface} this The collapsing node
|
|
*/
|
|
/**
|
|
* @event beforeexpand
|
|
* Fires before this node is expanded.
|
|
* @param {Ext.data.NodeInterface} this The expanding node
|
|
*/
|
|
/**
|
|
* @event beforecollapse
|
|
* Fires before this node is collapsed.
|
|
* @param {Ext.data.NodeInterface} this The collapsing node
|
|
*/
|
|
/**
|
|
* @event sort
|
|
* Fires when this node's childNodes are sorted.
|
|
* @param {Ext.data.NodeInterface} this This node.
|
|
* @param {Ext.data.NodeInterface[]} childNodes The childNodes of this node.
|
|
*/
|
|
return me;
|
|
},
|
|
/**
|
|
* Ensures that the passed object is an instance of a Record with the NodeInterface applied
|
|
* @return {Ext.data.NodeInterface}
|
|
*/
|
|
createNode: function(node) {
|
|
if (!node.isModel) {
|
|
node = Ext.ModelManager.create(node, this.modelName);
|
|
}
|
|
// The node may already decorated, but may not have been
|
|
// so when the model constructor was called. If not,
|
|
// setup defaults here
|
|
if (!node.childNodes) {
|
|
node.firstChild = node.lastChild = node.parentNode = node.previousSibling = node.nextSibling = null;
|
|
node.childNodes = [];
|
|
}
|
|
return node;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is a leaf
|
|
* @return {Boolean}
|
|
*/
|
|
isLeaf : function() {
|
|
return this.get('leaf') === true;
|
|
},
|
|
|
|
/**
|
|
* Sets the first child of this node
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node
|
|
*/
|
|
setFirstChild : function(node) {
|
|
this.firstChild = node;
|
|
},
|
|
|
|
/**
|
|
* Sets the last child of this node
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node
|
|
*/
|
|
setLastChild : function(node) {
|
|
this.lastChild = node;
|
|
},
|
|
|
|
/**
|
|
* Updates general data of this node like isFirst, isLast, depth. This
|
|
* method is internally called after a node is moved. This shouldn't
|
|
* have to be called by the developer unless they are creating custom
|
|
* Tree plugins.
|
|
* @param {Boolean} commit
|
|
* @param {Object} info The info to update. May contain any of the following
|
|
* @param {Object} info.isFirst
|
|
* @param {Object} info.isLast
|
|
* @param {Object} info.index
|
|
* @param {Object} info.depth
|
|
* @param {Object} info.parentId
|
|
*/
|
|
updateInfo: function(commit, info) {
|
|
var me = this,
|
|
oldDepth = me.data.depth,
|
|
childInfo = {},
|
|
children = me.childNodes,
|
|
childCount = children.length,
|
|
i,
|
|
phantom = me.phantom,
|
|
dataObject = me[me.persistenceProperty],
|
|
propName, newValue,
|
|
field;
|
|
|
|
if (!info) {
|
|
Ext.Error.raise('NodeInterface expects update info to be passed');
|
|
}
|
|
|
|
// Set the passed field values into the data object.
|
|
// We do NOT need the expense of Model.set. We just need to ensure
|
|
// that the dirty flag is set.
|
|
for (propName in info) {
|
|
field = me.fields.get(propName);
|
|
newValue = info[propName];
|
|
|
|
// Only flag dirty when persistent fields are modified
|
|
if (field && field.persist) {
|
|
me.dirty = me.dirty || !me.isEqual(dataObject[propName], newValue);
|
|
}
|
|
dataObject[propName] = newValue;
|
|
}
|
|
if (commit) {
|
|
me.commit();
|
|
me.phantom = phantom;
|
|
}
|
|
|
|
// The only way child data can be influenced is if this node has changed level in this update.
|
|
if (me.data.depth !== oldDepth) {
|
|
childInfo = {
|
|
depth: me.data.depth + 1
|
|
};
|
|
for (i = 0; i < childCount; i++) {
|
|
children[i].updateInfo(commit, childInfo);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is the last child of its parent
|
|
* @return {Boolean}
|
|
*/
|
|
isLast : function() {
|
|
return this.get('isLast');
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is the first child of its parent
|
|
* @return {Boolean}
|
|
*/
|
|
isFirst : function() {
|
|
return this.get('isFirst');
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node has one or more child nodes, else false.
|
|
* @return {Boolean}
|
|
*/
|
|
hasChildNodes : function() {
|
|
return !this.isLeaf() && this.childNodes.length > 0;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node has one or more child nodes, or if the <tt>expandable</tt>
|
|
* node attribute is explicitly specified as true, otherwise returns false.
|
|
* @return {Boolean}
|
|
*/
|
|
isExpandable : function() {
|
|
var me = this;
|
|
|
|
if (me.get('expandable')) {
|
|
return !(me.isLeaf() || (me.isLoaded() && !me.hasChildNodes()));
|
|
}
|
|
return false;
|
|
},
|
|
|
|
triggerUIUpdate: function() {
|
|
// This isn't ideal, however none of the underlying fields have changed
|
|
// but we still need to update the UI
|
|
this.afterEdit([]);
|
|
},
|
|
|
|
/**
|
|
* Inserts node(s) as the last child node of this node.
|
|
*
|
|
* If the node was previously a child node of another parent node, it will be removed from that node first.
|
|
*
|
|
* @param {Ext.data.NodeInterface/Ext.data.NodeInterface[]/Object} node The node or Array of nodes to append
|
|
* @param {Boolean} [suppressEvents=false] True to suppress firering of events.
|
|
* @param {Boolean} [commit=false]
|
|
* @return {Ext.data.NodeInterface} The appended node if single append, or null if an array was passed
|
|
*/
|
|
appendChild : function(node, suppressEvents, commit) {
|
|
var me = this,
|
|
i, ln,
|
|
index,
|
|
oldParent,
|
|
previousSibling,
|
|
childInfo = {
|
|
isLast: true,
|
|
parentId: me.getId(),
|
|
depth: (me.data.depth||0) + 1
|
|
};
|
|
|
|
// if passed an array do them one by one
|
|
if (Ext.isArray(node)) {
|
|
// suspend auto syncing while we append all the nodes
|
|
me.callStore('suspendAutoSync');
|
|
for (i = 0, ln = node.length - 1; i < ln; i++) {
|
|
me.appendChild(node[i], suppressEvents, commit);
|
|
}
|
|
// resume auto syncing before we append the last node
|
|
me.callStore('resumeAutoSync');
|
|
me.appendChild(node[ln], suppressEvents, commit);
|
|
} else {
|
|
// Make sure it is a record
|
|
node = me.createNode(node);
|
|
|
|
if (suppressEvents !== true && me.fireEventArgs("beforeappend", [me, node]) === false) {
|
|
return false;
|
|
}
|
|
|
|
index = me.childNodes.length;
|
|
oldParent = node.parentNode;
|
|
|
|
// it's a move, make sure we move it cleanly
|
|
if (oldParent) {
|
|
if (suppressEvents !== true && node.fireEventArgs("beforemove", [node, oldParent, me, index]) === false) {
|
|
return false;
|
|
}
|
|
oldParent.removeChild(node, false, false, true);
|
|
}
|
|
|
|
// Coalesce all layouts caused by node append
|
|
Ext.suspendLayouts();
|
|
|
|
index = me.childNodes.length;
|
|
if (index === 0) {
|
|
me.setFirstChild(node);
|
|
}
|
|
|
|
me.childNodes[index] = node;
|
|
node.parentNode = me;
|
|
node.nextSibling = null;
|
|
|
|
me.setLastChild(node);
|
|
|
|
previousSibling = me.childNodes[index - 1];
|
|
if (previousSibling) {
|
|
node.previousSibling = previousSibling;
|
|
previousSibling.nextSibling = node;
|
|
previousSibling.updateInfo(commit, {
|
|
isLast: false
|
|
});
|
|
previousSibling.triggerUIUpdate();
|
|
} else {
|
|
node.previousSibling = null;
|
|
}
|
|
|
|
// Update the new child's info passing in info we already know
|
|
childInfo.isFirst = index === 0;
|
|
childInfo.index = index;
|
|
node.updateInfo(commit, childInfo);
|
|
|
|
// As soon as we append a child to this node, we are loaded
|
|
if (!me.isLoaded()) {
|
|
me.set('loaded', true);
|
|
} else if (me.childNodes.length === 1) {
|
|
me.triggerUIUpdate();
|
|
}
|
|
|
|
// Ensure connectors are correct by updating the UI on all intervening nodes (descendants) between last sibling and new node.
|
|
if (index && me.childNodes[index - 1].isExpanded()) {
|
|
me.childNodes[index - 1].cascadeBy(me.triggerUIUpdate);
|
|
}
|
|
|
|
if(!node.isLeaf() && node.phantom) {
|
|
node.set('loaded', true);
|
|
}
|
|
|
|
// Flush layouts caused by updating of the UI
|
|
Ext.resumeLayouts(true);
|
|
|
|
if (suppressEvents !== true) {
|
|
me.fireEventArgs("append", [me, node, index]);
|
|
|
|
if (oldParent) {
|
|
node.fireEventArgs("move", [node, oldParent, me, index]);
|
|
}
|
|
}
|
|
|
|
return node;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the tree this node is in.
|
|
* @return {Ext.tree.Panel} The tree panel which owns this node.
|
|
*/
|
|
getOwnerTree: function() {
|
|
var node = this,
|
|
store;
|
|
|
|
while (node.parentNode) {
|
|
node = node.parentNode;
|
|
}
|
|
store = node.store;
|
|
if (store) {
|
|
if (store.treeStore) {
|
|
store = store.treeStore;
|
|
}
|
|
|
|
if (store.tree) {
|
|
return store.ownerTree;
|
|
}
|
|
}
|
|
return undefined;
|
|
},
|
|
|
|
/**
|
|
* Removes a child node from this node.
|
|
* @param {Ext.data.NodeInterface} node The node to remove
|
|
* @param {Boolean} [destroy=false] True to destroy the node upon removal.
|
|
* @return {Ext.data.NodeInterface} The removed node
|
|
*/
|
|
removeChild : function(node, destroy, suppressEvents, isMove) {
|
|
var me = this,
|
|
index = me.indexOf(node),
|
|
i, childCount,
|
|
previousSibling;
|
|
|
|
if (index === -1 || (suppressEvents !== true && me.fireEventArgs("beforeremove", [me, node, !!isMove]) === false)) {
|
|
return false;
|
|
}
|
|
|
|
// Coalesce all layouts caused by node removal
|
|
Ext.suspendLayouts();
|
|
|
|
// remove it from childNodes collection
|
|
Ext.Array.erase(me.childNodes, index, 1);
|
|
|
|
// update child refs
|
|
if (me.firstChild === node) {
|
|
me.setFirstChild(node.nextSibling);
|
|
}
|
|
if (me.lastChild === node) {
|
|
me.setLastChild(node.previousSibling);
|
|
}
|
|
|
|
// Update previous sibling to point to its new next.
|
|
// Note: the code below is an assignment statement. The value of which is tested for truthiness.
|
|
if (previousSibling = node.previousSibling) {
|
|
node.previousSibling.nextSibling = node.nextSibling;
|
|
}
|
|
|
|
// Update the next sibling to point to its new previous
|
|
if (node.nextSibling) {
|
|
node.nextSibling.previousSibling = node.previousSibling;
|
|
|
|
// And if it's the new first child, let it know
|
|
if (index === 0) {
|
|
node.nextSibling.updateInfo(false, {
|
|
isFirst: true
|
|
});
|
|
}
|
|
|
|
// Update subsequent siblings' index values
|
|
for (i = index, childCount = me.childNodes.length; i < childCount; i++) {
|
|
me.childNodes[i].updateInfo(false, {
|
|
index: i
|
|
});
|
|
}
|
|
}
|
|
|
|
// If the removed node had no next sibling, but had a previous,
|
|
// update the previous sibling so it knows it's the last
|
|
else if (previousSibling) {
|
|
previousSibling.updateInfo(false, {
|
|
isLast: true
|
|
});
|
|
|
|
// We're removing the last child.
|
|
// Ensure connectors are correct by updating the UI on all intervening nodes (descendants) between previous sibling and new node.
|
|
if (previousSibling.isExpanded()) {
|
|
previousSibling.cascadeBy(me.triggerUIUpdate);
|
|
}
|
|
// No intervening descendant nodes, just update the previous sibling
|
|
else {
|
|
previousSibling.triggerUIUpdate();
|
|
}
|
|
}
|
|
|
|
// If this node suddenly doesnt have childnodes anymore, update myself
|
|
if (!me.childNodes.length) {
|
|
me.triggerUIUpdate();
|
|
}
|
|
|
|
// Flush layouts caused by updating the UI
|
|
Ext.resumeLayouts(true);
|
|
|
|
if (suppressEvents !== true) {
|
|
// Temporary property on the node to inform listeners of where the node used to be
|
|
node.removeContext = {
|
|
parentNode: node.parentNode,
|
|
previousSibling: node.previousSibling,
|
|
nextSibling: node.nextSibling
|
|
};
|
|
|
|
node.previousSibling = node.nextSibling = node.parentNode = null;
|
|
me.fireEventArgs('remove', [me, node, !!isMove]);
|
|
|
|
// This is a transient property for use only in remove listeners
|
|
node.removeContext = null;
|
|
}
|
|
|
|
// Update removed node's pointers *after* firing event so that listsners
|
|
// can tell where the removal took place
|
|
if (destroy) {
|
|
node.destroy(true);
|
|
} else {
|
|
node.clear();
|
|
}
|
|
|
|
return node;
|
|
},
|
|
|
|
/**
|
|
* Creates a copy (clone) of this Node.
|
|
* @param {String} [id] A new id, defaults to this Node's id.
|
|
* @param {Boolean} [deep=false] True to recursively copy all child Nodes into the new Node.
|
|
* False to copy without child Nodes.
|
|
* @return {Ext.data.NodeInterface} A copy of this Node.
|
|
*/
|
|
copy: function(newId, deep) {
|
|
var me = this,
|
|
result = me.callParent(arguments),
|
|
len = me.childNodes ? me.childNodes.length : 0,
|
|
i;
|
|
|
|
// Move child nodes across to the copy if required
|
|
if (deep) {
|
|
for (i = 0; i < len; i++) {
|
|
result.appendChild(me.childNodes[i].copy(undefined, true));
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Clears the node.
|
|
* @private
|
|
* @param {Boolean} [destroy=false] True to destroy the node.
|
|
*/
|
|
clear : function(destroy) {
|
|
var me = this;
|
|
|
|
// clear any references from the node
|
|
me.parentNode = me.previousSibling = me.nextSibling = null;
|
|
if (destroy) {
|
|
me.firstChild = me.lastChild = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Destroys the node.
|
|
*/
|
|
destroy : function(silent) {
|
|
/*
|
|
* Silent is to be used in a number of cases
|
|
* 1) When setRoot is called.
|
|
* 2) When destroy on the tree is called
|
|
* 3) For destroying child nodes on a node
|
|
*/
|
|
var me = this,
|
|
options = me.destroyOptions,
|
|
nodes = me.childNodes,
|
|
nLen = nodes.length,
|
|
n;
|
|
|
|
if (silent === true) {
|
|
me.clear(true);
|
|
|
|
for (n = 0; n < nLen; n++) {
|
|
nodes[n].destroy(true);
|
|
}
|
|
|
|
me.childNodes = null;
|
|
delete me.destroyOptions;
|
|
me.callParent([options]);
|
|
} else {
|
|
me.destroyOptions = silent;
|
|
// overridden method will be called, since remove will end up calling destroy(true);
|
|
me.remove(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts the first node before the second node in this nodes childNodes collection.
|
|
* @param {Ext.data.NodeInterface} node The node to insert
|
|
* @param {Ext.data.NodeInterface} refNode The node to insert before (if null the node is appended)
|
|
* @return {Ext.data.NodeInterface} The inserted node
|
|
*/
|
|
insertBefore : function(node, refNode, suppressEvents) {
|
|
var me = this,
|
|
index = me.indexOf(refNode),
|
|
oldParent = node.parentNode,
|
|
refIndex = index,
|
|
childCount, previousSibling, i;
|
|
|
|
if (!refNode) { // like standard Dom, refNode can be null for append
|
|
return me.appendChild(node);
|
|
}
|
|
|
|
// nothing to do
|
|
if (node === refNode) {
|
|
return false;
|
|
}
|
|
|
|
// Make sure it is a record with the NodeInterface
|
|
node = me.createNode(node);
|
|
|
|
if (suppressEvents !== true && me.fireEventArgs("beforeinsert", [me, node, refNode]) === false) {
|
|
return false;
|
|
}
|
|
|
|
// when moving internally, indexes will change after remove
|
|
if (oldParent === me && me.indexOf(node) < index) {
|
|
refIndex--;
|
|
}
|
|
|
|
// it's a move, make sure we move it cleanly
|
|
if (oldParent) {
|
|
if (suppressEvents !== true && node.fireEventArgs("beforemove", [node, oldParent, me, index, refNode]) === false) {
|
|
return false;
|
|
}
|
|
oldParent.removeChild(node, false, false, true);
|
|
}
|
|
|
|
if (refIndex === 0) {
|
|
me.setFirstChild(node);
|
|
}
|
|
|
|
Ext.Array.splice(me.childNodes, refIndex, 0, node);
|
|
node.parentNode = me;
|
|
|
|
node.nextSibling = refNode;
|
|
refNode.previousSibling = node;
|
|
|
|
previousSibling = me.childNodes[refIndex - 1];
|
|
if (previousSibling) {
|
|
node.previousSibling = previousSibling;
|
|
previousSibling.nextSibling = node;
|
|
} else {
|
|
node.previousSibling = null;
|
|
}
|
|
|
|
// Integrate the new node into its new position.
|
|
node.updateInfo(false, {
|
|
parentId: me.getId(),
|
|
index: refIndex,
|
|
isFirst: refIndex === 0,
|
|
isLast: false,
|
|
depth: (me.data.depth||0) + 1
|
|
});
|
|
|
|
// Update the index for all following siblings.
|
|
for (i = refIndex + 1, childCount = me.childNodes.length; i < childCount; i++) {
|
|
me.childNodes[i].updateInfo(false, {
|
|
index: i
|
|
});
|
|
}
|
|
|
|
if (!me.isLoaded()) {
|
|
me.set('loaded', true);
|
|
}
|
|
// If this node didnt have any childnodes before, update myself
|
|
else if (me.childNodes.length === 1) {
|
|
me.triggerUIUpdate();
|
|
}
|
|
|
|
if(!node.isLeaf() && node.phantom) {
|
|
node.set('loaded', true);
|
|
}
|
|
|
|
if (suppressEvents !== true) {
|
|
me.fireEventArgs("insert", [me, node, refNode]);
|
|
|
|
if (oldParent) {
|
|
node.fireEventArgs("move", [node, oldParent, me, refIndex, refNode]);
|
|
}
|
|
}
|
|
|
|
return node;
|
|
},
|
|
|
|
/**
|
|
* Inserts a node into this node.
|
|
* @param {Number} index The zero-based index to insert the node at
|
|
* @param {Ext.data.NodeInterface} node The node to insert
|
|
* @return {Ext.data.NodeInterface} The node you just inserted
|
|
*/
|
|
insertChild: function(index, node) {
|
|
var sibling = this.childNodes[index];
|
|
if (sibling) {
|
|
return this.insertBefore(node, sibling);
|
|
}
|
|
else {
|
|
return this.appendChild(node);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes this node from its parent
|
|
* @param {Boolean} [destroy=false] True to destroy the node upon removal.
|
|
* @return {Ext.data.NodeInterface} this
|
|
*/
|
|
remove : function(destroy, suppressEvents) {
|
|
var me = this,
|
|
parentNode = me.parentNode;
|
|
|
|
if (parentNode) {
|
|
parentNode.removeChild(me, destroy, suppressEvents);
|
|
} else if (destroy) {
|
|
// If we don't have a parent, just destroy it
|
|
me.destroy(true);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Removes all child nodes from this node.
|
|
* @param {Boolean} [destroy=false] True to destroy the node upon removal.
|
|
* @return {Ext.data.NodeInterface} this
|
|
*/
|
|
removeAll : function(destroy, suppressEvents, fromParent) {
|
|
// This method duplicates logic from removeChild for the sake of
|
|
// speed since we can make a number of assumptions because we're
|
|
// getting rid of everything
|
|
var me = this,
|
|
childNodes = me.childNodes,
|
|
i = 0,
|
|
len = childNodes.length,
|
|
node;
|
|
|
|
// Avoid all this if nothing to remove
|
|
if (!len) {
|
|
return;
|
|
}
|
|
|
|
// NodeStore listens for this and performs the same actions as a collapse -
|
|
// all descendant nodes are removed from the flat store.
|
|
me.fireEventArgs('bulkremove', [me, childNodes, false]);
|
|
|
|
for (; i < len; ++i) {
|
|
node = childNodes[i];
|
|
|
|
// Temporary property on the node to inform listeners of where the node used to be
|
|
node.removeContext = {
|
|
parentNode: node.parentNode,
|
|
previousSibling: node.previousSibling,
|
|
nextSibling: node.nextSibling
|
|
};
|
|
|
|
node.previousSibling = node.nextSibling = node.parentNode = null;
|
|
me.fireEventArgs('remove', [me, node, false]);
|
|
|
|
// This is a transient property for use only in remove listeners
|
|
node.removeContext = null;
|
|
|
|
// If destroy passed, destroy it
|
|
if (destroy) {
|
|
node.destroy(true);
|
|
}
|
|
// Otherwise.... apparently, removeAll is always recursive.
|
|
else {
|
|
node.removeAll(false, suppressEvents, true);
|
|
}
|
|
}
|
|
|
|
me.firstChild = me.lastChild = null;
|
|
|
|
// If in recursion, null out child array
|
|
if (fromParent) {
|
|
// Removing from parent, clear children
|
|
me.childNodes = null;
|
|
} else {
|
|
// clear array
|
|
me.childNodes.length = 0;
|
|
me.triggerUIUpdate();
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the child node at the specified index.
|
|
* @param {Number} index
|
|
* @return {Ext.data.NodeInterface}
|
|
*/
|
|
getChildAt : function(index) {
|
|
return this.childNodes[index];
|
|
},
|
|
|
|
/**
|
|
* Replaces one child node in this node with another.
|
|
* @param {Ext.data.NodeInterface} newChild The replacement node
|
|
* @param {Ext.data.NodeInterface} oldChild The node to replace
|
|
* @return {Ext.data.NodeInterface} The replaced node
|
|
*/
|
|
replaceChild : function(newChild, oldChild, suppressEvents) {
|
|
var s = oldChild ? oldChild.nextSibling : null;
|
|
|
|
this.removeChild(oldChild, false, suppressEvents);
|
|
this.insertBefore(newChild, s, suppressEvents);
|
|
return oldChild;
|
|
},
|
|
|
|
/**
|
|
* Returns the index of a child node
|
|
* @param {Ext.data.NodeInterface} node
|
|
* @return {Number} The index of the node or -1 if it was not found
|
|
*/
|
|
indexOf : function(child) {
|
|
return Ext.Array.indexOf(this.childNodes, child);
|
|
},
|
|
|
|
/**
|
|
* Returns the index of a child node that matches the id
|
|
* @param {String} id The id of the node to find
|
|
* @return {Number} The index of the node or -1 if it was not found
|
|
*/
|
|
indexOfId: function(id) {
|
|
var childNodes = this.childNodes,
|
|
len = childNodes.length,
|
|
i = 0;
|
|
|
|
for (; i < len; ++i) {
|
|
if (childNodes[i].getId() === id) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
},
|
|
|
|
/**
|
|
* Gets the hierarchical path from the root of the current node.
|
|
* @param {String} [field] The field to construct the path from. Defaults to the model idProperty.
|
|
* @param {String} [separator="/"] A separator to use.
|
|
* @return {String} The node path
|
|
*/
|
|
getPath: function(field, separator) {
|
|
field = field || this.idProperty;
|
|
separator = separator || '/';
|
|
|
|
var path = [this.get(field)],
|
|
parent = this.parentNode;
|
|
|
|
while (parent) {
|
|
path.unshift(parent.get(field));
|
|
parent = parent.parentNode;
|
|
}
|
|
return separator + path.join(separator);
|
|
},
|
|
|
|
/**
|
|
* Returns depth of this node (the root node has a depth of 0)
|
|
* @return {Number}
|
|
*/
|
|
getDepth : function() {
|
|
return this.get('depth');
|
|
},
|
|
|
|
/**
|
|
* Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function
|
|
* will be the args provided or the current node. If the function returns false at any point,
|
|
* the bubble is stopped.
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed. Defaults to the current Node.
|
|
* @param {Array} [args] The args to call the function with. Defaults to passing the current Node.
|
|
*/
|
|
bubble : function(fn, scope, args) {
|
|
var p = this;
|
|
while (p) {
|
|
if (fn.apply(scope || p, args || [p]) === false) {
|
|
break;
|
|
}
|
|
p = p.parentNode;
|
|
}
|
|
},
|
|
|
|
cascade: function() {
|
|
if (Ext.isDefined(Ext.global.console)) {
|
|
Ext.global.console.warn('Ext.data.Node: cascade has been deprecated. Please use cascadeBy instead.');
|
|
}
|
|
return this.cascadeBy.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Cascades down the tree from this node, calling the specified function with each node. The arguments to the function
|
|
* will be the args provided or the current node. If the function returns false at any point,
|
|
* the cascade is stopped on that branch.
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed. Defaults to the current Node.
|
|
* @param {Array} [args] The args to call the function with. Defaults to passing the current Node.
|
|
*/
|
|
cascadeBy : function(fn, scope, args) {
|
|
if (fn.apply(scope || this, args || [this]) !== false) {
|
|
var childNodes = this.childNodes,
|
|
length = childNodes.length,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
childNodes[i].cascadeBy(fn, scope, args);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Interates the child nodes of this node, calling the specified function with each node. The arguments to the function
|
|
* will be the args provided or the current node. If the function returns false at any point,
|
|
* the iteration stops.
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed. Defaults to the current Node in iteration.
|
|
* @param {Array} [args] The args to call the function with. Defaults to passing the current Node.
|
|
*/
|
|
eachChild : function(fn, scope, args) {
|
|
var childNodes = this.childNodes,
|
|
length = childNodes.length,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
if (fn.apply(scope || this, args || [childNodes[i]]) === false) {
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finds the first child that has the attribute with the specified value.
|
|
* @param {String} attribute The attribute name
|
|
* @param {Object} value The value to search for
|
|
* @param {Boolean} [deep=false] True to search through nodes deeper than the immediate children
|
|
* @return {Ext.data.NodeInterface} The found child or null if none was found
|
|
*/
|
|
findChild : function(attribute, value, deep) {
|
|
return this.findChildBy(function() {
|
|
return this.get(attribute) == value;
|
|
}, null, deep);
|
|
},
|
|
|
|
/**
|
|
* Finds the first child by a custom function. The child matches if the function passed returns true.
|
|
* @param {Function} fn A function which must return true if the passed Node is the required Node.
|
|
* @param {Object} [scope] The scope (this reference) in which the function is executed. Defaults to the Node being tested.
|
|
* @param {Boolean} [deep=false] True to search through nodes deeper than the immediate children
|
|
* @return {Ext.data.NodeInterface} The found child or null if none was found
|
|
*/
|
|
findChildBy : function(fn, scope, deep) {
|
|
var cs = this.childNodes,
|
|
len = cs.length,
|
|
i = 0, n, res;
|
|
|
|
for (; i < len; i++) {
|
|
n = cs[i];
|
|
if (fn.call(scope || n, n) === true) {
|
|
return n;
|
|
}
|
|
else if (deep) {
|
|
res = n.findChildBy(fn, scope, deep);
|
|
if (res !== null) {
|
|
return res;
|
|
}
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is an ancestor (at any point) of the passed node.
|
|
* @param {Ext.data.NodeInterface} node
|
|
* @return {Boolean}
|
|
*/
|
|
contains : function(node) {
|
|
return node.isAncestor(this);
|
|
},
|
|
|
|
/**
|
|
* Returns true if the passed node is an ancestor (at any point) of this node.
|
|
* @param {Ext.data.NodeInterface} node
|
|
* @return {Boolean}
|
|
*/
|
|
isAncestor : function(node) {
|
|
var p = this.parentNode;
|
|
while (p) {
|
|
if (p === node) {
|
|
return true;
|
|
}
|
|
p = p.parentNode;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Sorts this nodes children using the supplied sort function.
|
|
* @param {Function} fn A function which, when passed two Nodes, returns -1, 0 or 1 depending upon required sort order.
|
|
* @param {Boolean} [recursive=false] True to apply this sort recursively
|
|
* @param {Boolean} [suppressEvent=false] True to not fire a sort event.
|
|
*/
|
|
sort : function(sortFn, recursive, suppressEvent) {
|
|
var cs = this.childNodes,
|
|
ln = cs.length,
|
|
i, n, info = {
|
|
isFirst: true
|
|
};
|
|
|
|
if (ln > 0) {
|
|
Ext.Array.sort(cs, sortFn);
|
|
this.setFirstChild(cs[0]);
|
|
this.setLastChild(cs[ln - 1]);
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
n = cs[i];
|
|
n.previousSibling = cs[i-1];
|
|
n.nextSibling = cs[i+1];
|
|
|
|
// Update the index and first/last status of children
|
|
info.isLast = (i === ln - 1);
|
|
info.index = i;
|
|
n.updateInfo(false, info);
|
|
info.isFirst = false;
|
|
|
|
if (recursive && !n.isLeaf()) {
|
|
n.sort(sortFn, true, true);
|
|
}
|
|
}
|
|
|
|
if (suppressEvent !== true) {
|
|
this.fireEventArgs('sort', [this, cs]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is expaned
|
|
* @return {Boolean}
|
|
*/
|
|
isExpanded: function() {
|
|
return this.get('expanded');
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is loaded
|
|
* @return {Boolean}
|
|
*/
|
|
isLoaded: function() {
|
|
return this.get('loaded');
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is loading
|
|
* @return {Boolean}
|
|
*/
|
|
isLoading: function() {
|
|
return this.get('loading');
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is the root node
|
|
* @return {Boolean}
|
|
*/
|
|
isRoot: function() {
|
|
return !this.parentNode;
|
|
},
|
|
|
|
/**
|
|
* Returns true if this node is visible. Note that visibility refers to
|
|
* the structure of the tree, the {@link Ext.tree.Panel#rootVisible}
|
|
* configuration is not taken into account here. If this method is called
|
|
* on the root node, it will always be visible.
|
|
* @return {Boolean}
|
|
*/
|
|
isVisible: function() {
|
|
var parent = this.parentNode;
|
|
while (parent) {
|
|
if (!parent.isExpanded()) {
|
|
return false;
|
|
}
|
|
parent = parent.parentNode;
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Expand this node.
|
|
* @param {Boolean} [recursive=false] True to recursively expand all the children
|
|
* @param {Function} [callback] The function to execute once the expand completes
|
|
* @param {Object} [scope] The scope to run the callback in
|
|
*/
|
|
expand: function(recursive, callback, scope) {
|
|
var me = this,
|
|
owner;
|
|
|
|
// all paths must call the callback (eventually) or things like
|
|
// selectPath fail
|
|
|
|
// First we start by checking if this node is a parent
|
|
if (!me.isLeaf()) {
|
|
// If it's loading, wait until it loads before proceeding
|
|
if (me.isLoading()) {
|
|
me.on('expand', function() {
|
|
me.expand(recursive, callback, scope);
|
|
}, me, {single: true});
|
|
} else {
|
|
// Now we check if this record is already expanding or expanded
|
|
if (!me.isExpanded()) {
|
|
|
|
// The TreeStore actually listens for the beforeexpand method and checks
|
|
// 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 appended all the children.
|
|
me.fireEventArgs('beforeexpand', [me, me.onChildNodesAvailable, me, [recursive, callback, scope]]);
|
|
} else if (recursive) {
|
|
// If it is is already expanded but we want to recursively expand then call expandChildren
|
|
owner = me.getOwnerTree();
|
|
me.expandChildren(true, owner ? owner.singleExpand : false, callback, scope);
|
|
} else {
|
|
Ext.callback(callback, scope || me, [me.childNodes]);
|
|
}
|
|
}
|
|
} else {
|
|
// If it's not then we fire the callback right away
|
|
Ext.callback(callback, scope || me); // leaf = no childNodes
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called as a callback from the beforeexpand listener fired by {@link #method-expand} when the child nodes have been loaded and appended.
|
|
*/
|
|
onChildNodesAvailable: function(records, recursive, callback, scope) {
|
|
var me = this,
|
|
owner;
|
|
|
|
// Bracket expansion with layout suspension.
|
|
// In optimum case, when recursive, child node data are loaded and expansion is synchronous within the suspension.
|
|
Ext.suspendLayouts();
|
|
|
|
// Not structural. The TreeView's onUpdate listener just updates the [+] icon to [-] in response.
|
|
me.set('expanded', true);
|
|
|
|
// Listened for by NodeStore.onNodeExpand.
|
|
me.fireEventArgs('expand', [me, me.childNodes, false]);
|
|
|
|
// Call the expandChildren method if recursive was set to true
|
|
if (recursive) {
|
|
owner = me.getOwnerTree();
|
|
me.expandChildren(true, owner ? owner.singleExpand : false, callback, scope);
|
|
} else {
|
|
Ext.callback(callback, scope || me, [me.childNodes]);
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
},
|
|
|
|
/**
|
|
* Expand all the children of this node.
|
|
* @param {Boolean} [recursive=false] True to recursively expand all the children
|
|
* @param {Function} [callback] The function to execute once all the children are expanded
|
|
* @param {Object} [scope] The scope to run the callback in
|
|
*/
|
|
expandChildren: function(recursive, singleExpand, callback, scope) {
|
|
var me = this,
|
|
i,
|
|
allNodes = me.childNodes,
|
|
expandNodes = [],
|
|
ln = singleExpand ? Math.min(allNodes.length, 1) : allNodes.length,
|
|
node;
|
|
|
|
for (i = 0; i < ln; ++i) {
|
|
node = allNodes[i];
|
|
if (!node.isLeaf()) {
|
|
expandNodes[expandNodes.length] = node;
|
|
}
|
|
}
|
|
ln = expandNodes.length;
|
|
|
|
for (i = 0; i < ln; ++i) {
|
|
expandNodes[i].expand(recursive);
|
|
}
|
|
|
|
if (callback) {
|
|
Ext.callback(callback, scope || me, [me.childNodes]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collapse this node.
|
|
* @param {Boolean} [recursive=false] True to recursively collapse all the children
|
|
* @param {Function} [callback] The function to execute once the collapse completes
|
|
* @param {Object} [scope] The scope to run the callback in
|
|
*/
|
|
collapse: function(recursive, callback, scope) {
|
|
var me = this,
|
|
expanded = me.isExpanded(),
|
|
len = me.childNodes.length,
|
|
i, collapseChildren;
|
|
|
|
// If this is a parent and
|
|
// already collapsed but the recursive flag is passed to target child nodes
|
|
// or
|
|
// the collapse is not vetoed by a listener
|
|
if (!me.isLeaf() && ((!expanded && recursive) || me.fireEventArgs('beforecollapse', [me]) !== false)) {
|
|
|
|
// Bracket collapsing with layout suspension.
|
|
// Collapsing is synchronous within the suspension.
|
|
Ext.suspendLayouts();
|
|
|
|
// Inform listeners of a collapse event if we are still expanded.
|
|
if (me.isExpanded()) {
|
|
|
|
// Set up the callback to set non-leaf descendants to collapsed if necessary.
|
|
// If recursive, we just need to set all non-leaf descendants to collapsed state.
|
|
// We *DO NOT* call collapse on them. That would attempt to remove their descendants
|
|
// from the UI, and that is done: THIS node is collapsed - ALL descendants are removed from the UI.
|
|
// Descendant non-leaves just silently change state.
|
|
if (recursive) {
|
|
collapseChildren = function() {
|
|
for (i = 0; i < len; i++) {
|
|
me.childNodes[i].setCollapsed(true);
|
|
}
|
|
};
|
|
if (callback) {
|
|
callback = Ext.Function.createSequence(collapseChildren, callback);
|
|
} else {
|
|
callback = collapseChildren;
|
|
}
|
|
}
|
|
|
|
// Not structural. The TreeView's onUpdate listener just updates the [+] icon to [-] in response.
|
|
me.set('expanded', false);
|
|
|
|
// Listened for by NodeStore.onNodeCollapse which removes all descendant nodes to achieve UI collapse
|
|
// and passes callback on in its beforecollapse event which is poked into the animWrap for
|
|
// final calling in the animation callback.
|
|
me.fireEventArgs('collapse', [me, me.childNodes, false, callback ? Ext.Function.bind(callback, scope, [me.childNodes]) : null, null]);
|
|
|
|
// So that it's not called at the end
|
|
callback = null;
|
|
}
|
|
|
|
// If recursive, we just need to set all non-leaf descendants to collapsed state.
|
|
// We *DO NOT* call collapse on them. That would attempt to remove their descendants
|
|
// from the UI, and that is done: THIS node is collapsed - ALL descendants are removed from the UI.
|
|
// Descendant non-leaves just silently change state.
|
|
else if (recursive) {
|
|
for (i = 0; i < len; i++) {
|
|
me.childNodes[i].setCollapsed(true);
|
|
}
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
|
|
// Call the passed callback
|
|
Ext.callback(callback, scope || me, [me.childNodes]);
|
|
},
|
|
|
|
/**
|
|
* @private Sets the node into the collapsed state without affecting the UI.
|
|
*
|
|
* This is called when a node is collapsed with the recursive flag. All the descendant
|
|
* nodes will have been removed from the store, but descendant non-leaf nodes still
|
|
* need to be set to the collapsed state without affecting the UI.
|
|
*/
|
|
setCollapsed: function(recursive) {
|
|
var me = this,
|
|
len = me.childNodes.length,
|
|
i;
|
|
|
|
// Only if we are not a leaf node and the collapse was not vetoed by a listener.
|
|
if (!me.isLeaf() && me.fireEventArgs('beforecollapse', [me, Ext.emptyFn]) !== false) {
|
|
|
|
// Update the state directly.
|
|
me.data.expanded = false;
|
|
|
|
// Listened for by NodeStore.onNodeCollapse, but will do nothing except pass on the
|
|
// documented events because the records have already been removed from the store when
|
|
// the ancestor node was collapsed.
|
|
me.fireEventArgs('collapse', [me, me.childNodes, false, null, null]);
|
|
|
|
if (recursive) {
|
|
for (i = 0; i < len; i++) {
|
|
me.childNodes[i].setCollapsed(true);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collapse all the children of this node.
|
|
* @param {Function} [recursive=false] True to recursively collapse all the children
|
|
* @param {Function} [callback] The function to execute once all the children are collapsed
|
|
* @param {Object} [scope] The scope to run the callback in
|
|
*/
|
|
collapseChildren: function(recursive, callback, scope) {
|
|
var me = this,
|
|
i,
|
|
allNodes = me.childNodes,
|
|
ln = allNodes.length,
|
|
collapseNodes = [],
|
|
node;
|
|
|
|
// Only bother with loaded, expanded, non-leaf nodes
|
|
for (i = 0; i < ln; ++i) {
|
|
node = allNodes[i];
|
|
if (!node.isLeaf() && node.isLoaded() && node.isExpanded()) {
|
|
collapseNodes.push(node);
|
|
}
|
|
}
|
|
ln = collapseNodes.length;
|
|
|
|
// Collapse the collapsible children.
|
|
// Pass our callback to the last one.
|
|
for (i = 0; i < ln; ++i) {
|
|
node = collapseNodes[i];
|
|
if (i === ln - 1) {
|
|
node.collapse(recursive, callback, scope);
|
|
} else {
|
|
node.collapse(recursive);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Node events always bubble, but events which bubble are always created, so bubble in a loop and
|
|
// only fire when there are listeners at each level.
|
|
// bubbled events always fire because they cannot tell if there is a listener at each level.
|
|
fireEventArgs: function(eventName, args) {
|
|
// Use the model prototype directly. If we have a BaseModel and then a SubModel,
|
|
// if we access the superclass fireEventArgs it will just refer to the same method
|
|
// and we end up in an infinite loop.
|
|
var fireEventArgs = Ext.data.Model.prototype.fireEventArgs,
|
|
result, eventSource, tree, treeStore, rootNode;
|
|
|
|
// The event bubbles (all native NodeInterface events do)...
|
|
if (bubbledEvents[eventName]) {
|
|
for (eventSource = this; result !== false && eventSource; eventSource = (rootNode = eventSource).parentNode) {
|
|
if (eventSource.hasListeners[eventName]) {
|
|
result = fireEventArgs.call(eventSource, eventName, args);
|
|
}
|
|
}
|
|
|
|
// When we reach the root node, go up to the Ext.data.TreeStore, and then the Ext.data.Tree
|
|
tree = rootNode.rootOf;
|
|
if (result !== false && tree) {
|
|
treeStore = tree.treeStore;
|
|
if (treeStore && treeStore.hasListeners[eventName]) {
|
|
result = treeStore.fireEventArgs.call(treeStore, eventName, args);
|
|
}
|
|
if (result !== false && tree.hasListeners[eventName]) {
|
|
result = tree.fireEventArgs.call(tree, eventName, args);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
// Event does not bubble - call superclass fireEventArgs method
|
|
else {
|
|
return fireEventArgs.apply(this, arguments)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates an object representation of this node including its children.
|
|
*/
|
|
serialize: function() {
|
|
var result = Ext.data.writer.Json.prototype.getRecordData(this),
|
|
childNodes = this.childNodes,
|
|
len = childNodes.length,
|
|
children, i;
|
|
|
|
if (len > 0) {
|
|
children = [];
|
|
for (i = 0; i < len; i++) {
|
|
children.push(childNodes[i].serialize());
|
|
}
|
|
result.children = children;
|
|
}
|
|
return result;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Node Store
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.NodeStore', {
|
|
extend: Ext.data.Store ,
|
|
alias: 'store.node',
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isNodeStore
|
|
* `true` in this class to identify an object as an instantiated NodeStore, or subclass thereof.
|
|
*/
|
|
isNodeStore: true,
|
|
|
|
/**
|
|
* @cfg {Ext.data.Model} node
|
|
* The Record you want to bind this Store to. Note that
|
|
* this record will be decorated with the Ext.data.NodeInterface if this is not the
|
|
* case yet.
|
|
*/
|
|
node: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} recursive
|
|
* Set this to true if you want this NodeStore to represent
|
|
* all the descendents of the node in its flat data collection. This is useful for
|
|
* rendering a tree structure to a DataView and is being used internally by
|
|
* the TreeView. Any records that are moved, removed, inserted or appended to the
|
|
* node at any depth below the node this store is bound to will be automatically
|
|
* updated in this Store's internal flat data structure.
|
|
*/
|
|
recursive: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} rootVisible
|
|
* False to not include the root node in this Stores collection.
|
|
*/
|
|
rootVisible: false,
|
|
|
|
/**
|
|
* @cfg {Ext.data.TreeStore} treeStore
|
|
* The TreeStore that is used by this NodeStore's Ext.tree.View.
|
|
*/
|
|
|
|
/**
|
|
* @protected
|
|
* Recursion level counter. Incremented when expansion or collaping of a node is initiated,
|
|
* including when nested nodes below the expanding/collapsing root begin expanding or collapsing.
|
|
*
|
|
* This ensures that collapsestart, collapsecomplete, expandstart and expandcomplete only
|
|
* fire on the top level node being collapsed/expanded.
|
|
*
|
|
* Also, allows listeners to the `add` and `remove` events to know whether a collapse of expand is in progress.
|
|
*/
|
|
isExpandingOrCollapsing: 0,
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
node;
|
|
|
|
config = config || {};
|
|
Ext.apply(me, config);
|
|
|
|
|
|
config.proxy = {type: 'proxy'};
|
|
me.callParent([config]);
|
|
|
|
node = me.node;
|
|
if (node) {
|
|
me.node = null;
|
|
me.setNode(node);
|
|
}
|
|
},
|
|
|
|
// NodeStores are never buffered or paged. They are loaded from the TreeStore to reflect all visible
|
|
// nodes.
|
|
// BufferedRenderer always asks for the *total* count, so this must return the count.
|
|
getTotalCount: function() {
|
|
return this.getCount();
|
|
},
|
|
|
|
setNode: function(node) {
|
|
var me = this;
|
|
if (me.node && me.node != node) {
|
|
// We want to unbind our listeners on the old node
|
|
me.mun(me.node, {
|
|
expand: me.onNodeExpand,
|
|
collapse: me.onNodeCollapse,
|
|
append: me.onNodeAppend,
|
|
insert: me.onNodeInsert,
|
|
bulkremove: me.onBulkRemove,
|
|
remove: me.onNodeRemove,
|
|
sort: me.onNodeSort,
|
|
scope: me
|
|
});
|
|
me.node = null;
|
|
}
|
|
|
|
if (node) {
|
|
Ext.data.NodeInterface.decorate(node.self);
|
|
me.removeAll();
|
|
if (me.rootVisible) {
|
|
me.add(node);
|
|
} else if (!node.isExpanded() && me.treeStore.autoLoad !== false) {
|
|
node.expand();
|
|
}
|
|
|
|
me.mon(node, {
|
|
expand: me.onNodeExpand,
|
|
collapse: me.onNodeCollapse,
|
|
append: me.onNodeAppend,
|
|
insert: me.onNodeInsert,
|
|
bulkremove: me.onBulkRemove,
|
|
remove: me.onNodeRemove,
|
|
sort: me.onNodeSort,
|
|
scope: me
|
|
});
|
|
me.node = node;
|
|
if (node.isExpanded() && node.isLoaded()) {
|
|
me.onNodeExpand(node, node.childNodes, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
onNodeSort: function(node, childNodes) {
|
|
var me = this;
|
|
|
|
if ((me.indexOf(node) !== -1 || (node === me.node && !me.rootVisible) && node.isExpanded())) {
|
|
Ext.suspendLayouts();
|
|
me.onNodeCollapse(node, childNodes, true);
|
|
me.onNodeExpand(node, childNodes, true);
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
// Triggered by a NodeInterface's bubbled "expand" event.
|
|
onNodeExpand: function(parent, records, suppressEvent) {
|
|
var me = this,
|
|
insertIndex = me.indexOf(parent) + 1,
|
|
toAdd = [];
|
|
|
|
// Used by the TreeView to bracket recursive expand & collapse ops
|
|
// and refresh the size. This is most effective when folder nodes are loaded,
|
|
// and this method is able to recurse.
|
|
if (!suppressEvent) {
|
|
me.fireEvent('beforeexpand', parent, records, insertIndex);
|
|
}
|
|
|
|
me.handleNodeExpand(parent, records, toAdd);
|
|
|
|
// The add event from this insertion is handled by TreeView.onAdd.
|
|
// That implementation calls parent and then ensures the previous sibling's joining lines are correct.
|
|
// The datachanged event is relayed by the TreeStore. Internally, that's not used.
|
|
me.insert(insertIndex, toAdd);
|
|
|
|
// Triggers the TreeView's onExpand method which calls refreshSize,
|
|
// and fires its afteritemexpand event
|
|
if (!suppressEvent) {
|
|
me.fireEvent('expand', parent, records);
|
|
}
|
|
},
|
|
|
|
// Collects child nodes to remove into the passed toRemove array.
|
|
// When available, all descendant nodes are pushed into that array using recursion.
|
|
handleNodeExpand: function(parent, records, toAdd) {
|
|
var me = this,
|
|
ln = records ? records.length : 0,
|
|
i, record;
|
|
|
|
// recursive is hardcoded to true in TreeView.
|
|
if (!me.recursive && parent !== me.node) {
|
|
return;
|
|
}
|
|
|
|
if (parent !== this.node && !me.isVisible(parent)) {
|
|
return;
|
|
}
|
|
|
|
if (ln) {
|
|
// The view items corresponding to these are rendered.
|
|
// Loop through and expand any of the non-leaf nodes which are expanded
|
|
for (i = 0; i < ln; i++) {
|
|
record = records[i];
|
|
|
|
// Add to array being collected by recursion when child nodes are loaded.
|
|
// Must be done here in loop so that child nodes are inserted into the stream in place
|
|
// in recursive calls.
|
|
toAdd.push(record);
|
|
|
|
if (record.isExpanded()) {
|
|
if (record.isLoaded()) {
|
|
// Take a shortcut - appends to toAdd array
|
|
me.handleNodeExpand(record, record.childNodes, toAdd);
|
|
}
|
|
else {
|
|
// Might be asynchronous if child nodes are not immediately available
|
|
record.set('expanded', false);
|
|
record.expand();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// Triggered by NodeInterface's bubbled bulkremove event
|
|
onBulkRemove: function(parent, childNodes, isMove) {
|
|
this.onNodeCollapse(parent, childNodes, true);
|
|
},
|
|
|
|
// Triggered by a NodeInterface's bubbled "collapse" event.
|
|
onNodeCollapse: function(parent, records, suppressEvent, callback, scope) {
|
|
var me = this,
|
|
collapseIndex = me.indexOf(parent) + 1,
|
|
node, lastNodeIndexPlus, sibling, found;
|
|
|
|
if (!me.recursive && parent !== me.node) {
|
|
return;
|
|
}
|
|
|
|
// Used by the TreeView to bracket recursive expand & collapse ops.
|
|
// The TreeViewsets up the animWrap object if we are animating.
|
|
// It also caches the collapse callback to call when it receives the
|
|
// end collapse event. See below.
|
|
if (!suppressEvent) {
|
|
me.fireEvent('beforecollapse', parent, records, collapseIndex, callback, scope);
|
|
}
|
|
|
|
// Only attempt to remove the records if they are there.
|
|
// Collapsing an ancestor node *immediately removes from the view, ALL its descendant nodes at all levels*.
|
|
// But if the collapse was recursive, all descendant root nodes will still fire their
|
|
// events. But we must ignore those events here - we have nothing to do.
|
|
if (records.length && me.data.contains(records[0])) {
|
|
|
|
// Calculate the index *one beyond* the last node we are going to remove
|
|
// Need to loop up the tree to find the nearest view sibling, since it could
|
|
// exist at some level above the current node.
|
|
node = parent;
|
|
while (node.parentNode) {
|
|
sibling = node.nextSibling;
|
|
if (sibling) {
|
|
found = true;
|
|
lastNodeIndexPlus = me.indexOf(sibling);
|
|
break;
|
|
} else {
|
|
node = node.parentNode;
|
|
}
|
|
}
|
|
if (!found) {
|
|
lastNodeIndexPlus = me.getCount();
|
|
}
|
|
|
|
// Remove the whole collapsed node set.
|
|
me.removeAt(collapseIndex, lastNodeIndexPlus - collapseIndex);
|
|
}
|
|
|
|
// Triggers the TreeView's onCollapse method which calls refreshSize,
|
|
// and fires its afteritecollapse event
|
|
if (!suppressEvent) {
|
|
me.fireEvent('collapse', parent, records, collapseIndex);
|
|
}
|
|
},
|
|
|
|
onNodeAppend: function(parent, node, index) {
|
|
var me = this,
|
|
refNode, sibling;
|
|
|
|
// Only react to a node append if it is to a node which is expanded, and is part of a tree
|
|
if (me.isVisible(node)) {
|
|
if (index === 0) {
|
|
refNode = parent;
|
|
} else {
|
|
sibling = node.previousSibling;
|
|
while (sibling.isExpanded() && sibling.lastChild) {
|
|
sibling = sibling.lastChild;
|
|
}
|
|
refNode = sibling;
|
|
}
|
|
me.insert(me.indexOf(refNode) + 1, node);
|
|
if (!node.isLeaf() && node.isExpanded()) {
|
|
if (node.isLoaded()) {
|
|
// Take a shortcut
|
|
me.onNodeExpand(node, node.childNodes, true);
|
|
} else if (!me.treeStore.fillCount ) {
|
|
// If the node has been marked as expanded, it means the children
|
|
// should be provided as part of the raw data. If we're filling the nodes,
|
|
// the children may not have been loaded yet, so only do this if we're
|
|
// not in the middle of populating the nodes.
|
|
node.set('expanded', false);
|
|
node.expand();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
onNodeInsert: function(parent, node, refNode) {
|
|
var me = this,
|
|
index = this.indexOf(refNode);
|
|
|
|
if (index != -1 && me.isVisible(node)) {
|
|
me.insert(index, node);
|
|
if (!node.isLeaf() && node.isExpanded()) {
|
|
if (node.isLoaded()) {
|
|
// Take a shortcut
|
|
me.onNodeExpand(node, node.childNodes, true);
|
|
}
|
|
else {
|
|
node.set('expanded', false);
|
|
node.expand();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
onNodeRemove: function(parent, node, isMove) {
|
|
var me = this;
|
|
if (me.indexOf(node) != -1) {
|
|
|
|
// If the removed node is a non-leaf and is expanded, use the onCollapse method to get rid
|
|
// of all descendants at any level.
|
|
if (!node.isLeaf() && node.isExpanded()) {
|
|
|
|
// onCollapse expects to be able to use the "collapsing" node's parentNode
|
|
// and nextSibling pointers so temporarily reinstate them.
|
|
// Reinstating them is safe because we pass the suppressEvents flag, and no user code
|
|
// is executed.
|
|
node.parentNode = node.removeContext.parentNode;
|
|
node.nextSibling = node.removeContext.nextSibling;
|
|
me.onNodeCollapse(node, node.childNodes, true);
|
|
node.parentNode = node.nextSibling = null;
|
|
}
|
|
me.remove(node);
|
|
}
|
|
},
|
|
|
|
isVisible: function(node) {
|
|
var parent = node.parentNode;
|
|
while (parent) {
|
|
// Hit root and it is expanded, the node is visible
|
|
if (parent === this.node && parent.data.expanded) {
|
|
return true;
|
|
}
|
|
|
|
// Hit a collapsed ancestor, the node is not visible
|
|
if (!parent.data.expanded) {
|
|
return false;
|
|
}
|
|
|
|
parent = parent.parentNode;
|
|
}
|
|
// Walked off the top - the node is not part of the tree structure
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Simple class that represents a Request that will be made by any {@link Ext.data.proxy.Server} subclass.
|
|
* 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.
|
|
*/
|
|
Ext.define('Ext.data.Request', {
|
|
/**
|
|
* @cfg {String} action
|
|
* The name of the action this Request represents. Usually one of 'create', 'read', 'update' or 'destroy'.
|
|
*/
|
|
action: undefined,
|
|
|
|
/**
|
|
* @cfg {Object} params
|
|
* HTTP request params. The Proxy and its Writer have access to and can modify this object.
|
|
*/
|
|
params: undefined,
|
|
|
|
/**
|
|
* @cfg {String} method
|
|
* The HTTP method to use on this Request. Should be one of 'GET', 'POST', 'PUT' or 'DELETE'.
|
|
*/
|
|
method: 'GET',
|
|
|
|
/**
|
|
* @cfg {String} url
|
|
* The url to access on this Request
|
|
*/
|
|
url: undefined,
|
|
|
|
/**
|
|
* Creates the Request object.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, config);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Don Griffin
|
|
*
|
|
* This class is a sequential id generator. A simple use of this class would be like so:
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'sequential'
|
|
* });
|
|
* // assign id's of 1, 2, 3, etc.
|
|
*
|
|
* An example of a configured generator would be:
|
|
*
|
|
* Ext.define('MyApp.data.MyModel', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: {
|
|
* type: 'sequential',
|
|
* prefix: 'ID_',
|
|
* seed: 1000
|
|
* }
|
|
* });
|
|
* // assign id's of ID_1000, ID_1001, ID_1002, etc.
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.SequentialIdGenerator', {
|
|
extend: Ext.data.IdGenerator ,
|
|
alias: 'idgen.sequential',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.parts = [ me.prefix, ''];
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} prefix
|
|
* The string to place in front of the sequential number for each generated id. The
|
|
* default is blank.
|
|
*/
|
|
prefix: '',
|
|
|
|
/**
|
|
* @cfg {Number} seed
|
|
* The number at which to start generating sequential id's. The default is 1.
|
|
*/
|
|
seed: 1,
|
|
|
|
/**
|
|
* Generates and returns the next id.
|
|
* @return {String} The next id.
|
|
*/
|
|
generate: function () {
|
|
var me = this,
|
|
parts = me.parts;
|
|
|
|
parts[1] = me.seed++;
|
|
return parts.join('');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.Tree
|
|
*
|
|
* This class is used as a container for a series of nodes. The nodes themselves maintain
|
|
* the relationship between parent/child. The tree itself acts as a manager. It gives functionality
|
|
* to retrieve a node by its identifier: {@link #getNodeById}.
|
|
*
|
|
* The tree also relays events from any of it's child nodes, allowing them to be handled in a
|
|
* centralized fashion. In general this class is not used directly, rather used internally
|
|
* by other parts of the framework.
|
|
*
|
|
*/
|
|
Ext.define('Ext.data.Tree', {
|
|
alias: 'data.tree',
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @property {Ext.data.NodeInterface}
|
|
* The root node for this tree
|
|
*/
|
|
root: null,
|
|
|
|
/**
|
|
* Creates new Tree object.
|
|
* @param {Ext.data.NodeInterface} root (optional) The root node
|
|
*/
|
|
constructor: function(root) {
|
|
var me = this;
|
|
|
|
me.mixins.observable.constructor.call(me);
|
|
|
|
if (root) {
|
|
me.setRootNode(root);
|
|
}
|
|
|
|
// All these events from tree nodes bubbble up and fire on this Tree
|
|
me.on({
|
|
scope: me,
|
|
idchanged: me.onNodeIdChanged,
|
|
insert: me.onNodeInsert,
|
|
append: me.onNodeAppend,
|
|
remove: me.onNodeRemove
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns the root node for this tree.
|
|
* @return {Ext.data.NodeInterface}
|
|
*/
|
|
getRootNode : function() {
|
|
return this.root;
|
|
},
|
|
|
|
/**
|
|
* Sets the root node for this tree.
|
|
* @param {Ext.data.NodeInterface} node
|
|
* @return {Ext.data.NodeInterface} The root node
|
|
*/
|
|
setRootNode : function(node) {
|
|
var me = this;
|
|
|
|
me.root = node;
|
|
|
|
// If the passed node is currently the root of another Tree, remove it.
|
|
if (node.rootOf) {
|
|
node.rootOf.removeRootNode();
|
|
}
|
|
|
|
// If the passed node is owned by some other node, remove it.
|
|
else if (node.parentNode) {
|
|
node.parentNode.removeChild(node);
|
|
}
|
|
|
|
// Insert upward link to owning Tree
|
|
node.rootOf = me;
|
|
|
|
if (node.fireEventArgs('beforeappend', [null, node]) !== false) {
|
|
node.set('root', true);
|
|
// root node should never be phantom or dirty, so commit it
|
|
node.updateInfo(true, {
|
|
isFirst: true,
|
|
isLast: true,
|
|
depth: 0,
|
|
index: 0,
|
|
parentId: null
|
|
});
|
|
|
|
// The following events are fired on this TreePanel by the bubbling from NodeInterface.fireEvent
|
|
/**
|
|
* @event append
|
|
* @inheritdoc Ext.data.NodeInterface#append
|
|
*/
|
|
/**
|
|
* @event remove
|
|
* @inheritdoc Ext.data.NodeInterface#remove
|
|
*/
|
|
/**
|
|
* @event move
|
|
* @inheritdoc Ext.data.NodeInterface#move
|
|
*/
|
|
/**
|
|
* @event insert
|
|
* @inheritdoc Ext.data.NodeInterface#insert
|
|
*/
|
|
/**
|
|
* @event beforeappend
|
|
* @inheritdoc Ext.data.NodeInterface#beforeappend
|
|
*/
|
|
/**
|
|
* @event beforeremove
|
|
* @inheritdoc Ext.data.NodeInterface#beforeremove
|
|
*/
|
|
/**
|
|
* @event beforemove
|
|
* @inheritdoc Ext.data.NodeInterface#beforemove
|
|
*/
|
|
/**
|
|
* @event beforeinsert
|
|
* @inheritdoc Ext.data.NodeInterface#beforeinsert
|
|
*/
|
|
/**
|
|
* @event expand
|
|
* @inheritdoc Ext.data.NodeInterface#expand
|
|
*/
|
|
/**
|
|
* @event collapse
|
|
* @inheritdoc Ext.data.NodeInterface#collapse
|
|
*/
|
|
/**
|
|
* @event beforeexpand
|
|
* @inheritdoc Ext.data.NodeInterface#beforeexpand
|
|
*/
|
|
/**
|
|
* @event beforecollapse
|
|
* @inheritdoc Ext.data.NodeInterface#beforecollapse
|
|
*/
|
|
/**
|
|
* @event sort
|
|
* @inheritdoc Ext.data.NodeInterface#event-sort
|
|
*/
|
|
/**
|
|
* @event rootchange
|
|
* Fires whenever the root node is changed in the tree.
|
|
* @param {Ext.data.Model} root The new root
|
|
*/
|
|
|
|
me.nodeHash = {};
|
|
node.fireEvent('append', null, node);
|
|
node.fireEvent('rootchange', node);
|
|
}
|
|
|
|
return node;
|
|
},
|
|
|
|
/**
|
|
* Removes the root node from this tree.
|
|
* @return {Ext.data.NodeInterface} The root node
|
|
*/
|
|
removeRootNode: function() {
|
|
var me = this,
|
|
root = me.root;
|
|
|
|
root.set('root', false);
|
|
root.fireEvent('remove', null, root, false);
|
|
root.fireEvent('rootchange', null);
|
|
|
|
// Unlink root after events so that the required bubbling propagates to all handlers.
|
|
// This unregisters the node and its descendants.
|
|
root.rootOf = me.root = null;
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Flattens all the nodes in the tree into an array.
|
|
* @private
|
|
* @return {Ext.data.NodeInterface[]} The flattened nodes.
|
|
*/
|
|
flatten: function(){
|
|
return Ext.Object.getValues(this.nodeHash);
|
|
},
|
|
|
|
/**
|
|
* Fired when a node is inserted into the root or one of it's children
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} parent The parent node
|
|
* @param {Ext.data.NodeInterface} node The inserted node
|
|
*/
|
|
onNodeInsert: function(parent, node) {
|
|
this.registerNode(node, true);
|
|
},
|
|
|
|
/**
|
|
* Fired when a node is appended into the root or one of it's children
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} parent The parent node
|
|
* @param {Ext.data.NodeInterface} node The appended node
|
|
*/
|
|
onNodeAppend: function(parent, node) {
|
|
this.registerNode(node, true);
|
|
},
|
|
|
|
/**
|
|
* Fired when a node is removed from the root or one of it's children
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} parent The parent node
|
|
* @param {Ext.data.NodeInterface} node The removed node
|
|
*/
|
|
onNodeRemove: function(parent, node) {
|
|
this.unregisterNode(node, true);
|
|
},
|
|
|
|
/**
|
|
* Fired when a node's id changes. Updates the node's id in the node hash.
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node
|
|
* @param {Number} oldId The old id
|
|
* @param {Number} newId The new id
|
|
*/
|
|
onNodeIdChanged: function(node, oldId, newId, oldInternalId) {
|
|
var nodeHash = this.nodeHash;
|
|
|
|
nodeHash[node.internalId] = node;
|
|
delete nodeHash[oldInternalId];
|
|
},
|
|
|
|
/**
|
|
* Gets a node in this tree by its id.
|
|
* @param {String} id
|
|
* @return {Ext.data.NodeInterface} The match node.
|
|
*/
|
|
getNodeById : function(id) {
|
|
return this.nodeHash[id];
|
|
},
|
|
|
|
/**
|
|
* Registers a node with the tree
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node The node to register
|
|
* @param {Boolean} [includeChildren] True to unregister any child nodes
|
|
*/
|
|
registerNode : function(node, includeChildren) {
|
|
var me = this,
|
|
children, length, i;
|
|
|
|
me.nodeHash[node.internalId] = node;
|
|
if (includeChildren === true) {
|
|
children = node.childNodes;
|
|
length = children.length;
|
|
for (i = 0; i < length; i++) {
|
|
me.registerNode(children[i], true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unregisters a node with the tree
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node The node to unregister
|
|
* @param {Boolean} [includeChildren] True to unregister any child nodes
|
|
*/
|
|
unregisterNode : function(node, includeChildren) {
|
|
var me = this,
|
|
children, length, i;
|
|
|
|
delete me.nodeHash[node.internalId];
|
|
if (includeChildren === true) {
|
|
children = node.childNodes;
|
|
length = children.length;
|
|
for (i = 0; i < length; i++) {
|
|
me.unregisterNode(children[i], true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sorts this tree
|
|
* @private
|
|
* @param {Function} sorterFn The function to use for sorting
|
|
* @param {Boolean} recursive True to perform recursive sorting
|
|
*/
|
|
sort: function(sorterFn, recursive) {
|
|
this.getRootNode().sort(sorterFn, recursive);
|
|
},
|
|
|
|
/**
|
|
* Filters this tree
|
|
* @private
|
|
* @param {Function} sorterFn The function to use for filtering
|
|
* @param {Boolean} recursive True to perform recursive filtering
|
|
*/
|
|
filter: function(filters, recursive) {
|
|
this.getRootNode().filter(filters, recursive);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class can be used as a base class from which to derived Models used in Trees.
|
|
*/
|
|
Ext.define('Ext.data.TreeModel', {
|
|
extend: Ext.data.Model
|
|
|
|
|
|
|
|
},
|
|
function () {
|
|
Ext.data.NodeInterface.decorate(this);
|
|
});
|
|
|
|
/**
|
|
* 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
|
|
*
|
|
* 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. These fields are listed
|
|
* in the {@link Ext.data.NodeInterface} documentation.
|
|
*
|
|
* # 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'). This will tell the tree to look for any nested tree nodes by the same keyword, i.e., 'children'.
|
|
* If a root is specified in the config make sure that any nested nodes with children have the same name.
|
|
* Note that setting {@link #defaultRootProperty} accomplishes the same thing.
|
|
*/
|
|
Ext.define('Ext.data.TreeStore', {
|
|
extend: Ext.data.AbstractStore ,
|
|
alias: 'store.tree',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @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=true]
|
|
* Remove previously existing child nodes before loading.
|
|
*/
|
|
clearOnLoad : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [clearRemovedOnLoad=true]
|
|
* If `true`, when a node is reloaded, any records in the {@link #removed} record collection that were previously descendants of the node being reloaded will be cleared from the {@link #removed} collection.
|
|
* Only applicable if {@link #clearOnLoad} is `true`.
|
|
*/
|
|
clearRemovedOnLoad: true,
|
|
|
|
/**
|
|
* @cfg {String} [nodeParam="node"]
|
|
* The name of the parameter sent to the server which contains the identifier of the node.
|
|
*/
|
|
nodeParam: 'node',
|
|
|
|
/**
|
|
* @cfg {String} [defaultRootId="root"]
|
|
* The default root id.
|
|
*/
|
|
defaultRootId: 'root',
|
|
|
|
/**
|
|
* @cfg {String} [defaultRootText="Root"]
|
|
* The default root text (if not specified)/
|
|
*/
|
|
defaultRootText: 'Root',
|
|
|
|
/**
|
|
* @cfg {String} [defaultRootProperty="children"]
|
|
* The root property to specify on the reader if one is not explicitly defined.
|
|
*/
|
|
defaultRootProperty: 'children',
|
|
|
|
// Keep a copy of the default so we know if it's been changed in a subclass/config
|
|
rootProperty: 'children',
|
|
|
|
fillCount: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} [folderSort=false]
|
|
* Set to true to automatically prepend a leaf sorter.
|
|
*/
|
|
folderSort: false,
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
root,
|
|
fields,
|
|
defaultRoot;
|
|
|
|
config = Ext.apply({}, config);
|
|
|
|
/**
|
|
* If we have no fields declare for the store, add some defaults.
|
|
* These will be ignored if a model is explicitly specified.
|
|
*/
|
|
fields = config.fields || me.fields;
|
|
if (!fields) {
|
|
config.fields = [
|
|
{name: 'text', type: 'string'}
|
|
];
|
|
defaultRoot = config.defaultRootProperty || me.defaultRootProperty;
|
|
if (defaultRoot !== me.defaultRootProperty) {
|
|
config.fields.push({
|
|
name: defaultRoot,
|
|
type: 'auto',
|
|
defaultValue: null,
|
|
persist: false
|
|
});
|
|
}
|
|
}
|
|
|
|
me.callParent([config]);
|
|
|
|
// We create our data tree.
|
|
me.tree = new Ext.data.Tree();
|
|
|
|
// data tree has an upward link
|
|
me.tree.treeStore = me;
|
|
|
|
// The following events are fired on this TreeStore by the bubbling from NodeInterface.fireEvent
|
|
/**
|
|
* @event append
|
|
* @inheritdoc Ext.data.Tree#append
|
|
*/
|
|
/**
|
|
* @event remove
|
|
* @inheritdoc Ext.data.Tree#remove
|
|
*/
|
|
/**
|
|
* @event move
|
|
* @inheritdoc Ext.data.Tree#move
|
|
*/
|
|
/**
|
|
* @event insert
|
|
* @inheritdoc Ext.data.Tree#insert
|
|
*/
|
|
/**
|
|
* @event beforeappend
|
|
* @inheritdoc Ext.data.Tree#beforeappend
|
|
*/
|
|
/**
|
|
* @event beforeremove
|
|
* @inheritdoc Ext.data.Tree#beforeremove
|
|
*/
|
|
/**
|
|
* @event beforemove
|
|
* @inheritdoc Ext.data.Tree#beforemove
|
|
*/
|
|
/**
|
|
* @event beforeinsert
|
|
* @inheritdoc Ext.data.Tree#beforeinsert
|
|
*/
|
|
/**
|
|
* @event expand
|
|
* @inheritdoc Ext.data.Tree#expand
|
|
*/
|
|
/**
|
|
* @event collapse
|
|
* @inheritdoc Ext.data.Tree#collapse
|
|
*/
|
|
/**
|
|
* @event beforeexpand
|
|
* @inheritdoc Ext.data.Tree#beforeexpand
|
|
*/
|
|
/**
|
|
* @event beforecollapse
|
|
* @inheritdoc Ext.data.Tree#beforecollapse
|
|
*/
|
|
/**
|
|
* @event sort
|
|
* @inheritdoc Ext.data.Tree#sort
|
|
*/
|
|
|
|
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,
|
|
append: me.onNodeAdded,
|
|
insert: me.onNodeAdded,
|
|
sort: me.onNodeSort
|
|
});
|
|
|
|
me.onBeforeSort();
|
|
|
|
root = me.root;
|
|
if (root) {
|
|
delete me.root;
|
|
me.setRootNode(root);
|
|
}
|
|
|
|
if (Ext.isDefined(me.nodeParameter)) {
|
|
if (Ext.isDefined(Ext.global.console)) {
|
|
Ext.global.console.warn('Ext.data.TreeStore: nodeParameter has been deprecated. Please use nodeParam instead.');
|
|
}
|
|
me.nodeParam = me.nodeParameter;
|
|
delete me.nodeParameter;
|
|
}
|
|
},
|
|
|
|
// inherit docs
|
|
setProxy: function(proxy) {
|
|
var reader,
|
|
needsRoot;
|
|
|
|
if (proxy instanceof Ext.data.proxy.Proxy) {
|
|
// proxy instance, check if a root was set
|
|
needsRoot = Ext.isEmpty(proxy.getReader().root);
|
|
} else if (Ext.isString(proxy)) {
|
|
// string type, means a reader can't be set
|
|
needsRoot = true;
|
|
} else {
|
|
// object, check if a reader and a root were specified.
|
|
reader = proxy.reader;
|
|
needsRoot = !(reader && !Ext.isEmpty(reader.root));
|
|
}
|
|
proxy = this.callParent(arguments);
|
|
|
|
// The proxy sets a parameter to carry the entity ID based upon the Operation's id
|
|
// That partameter name defaults to "id".
|
|
// TreeStore however uses a nodeParam configuration to specify the entity id
|
|
proxy.idParam = this.nodeParam;
|
|
|
|
if (needsRoot) {
|
|
reader = proxy.getReader();
|
|
reader.root = this.defaultRootProperty;
|
|
// force rebuild
|
|
reader.buildExtractors(true);
|
|
}
|
|
return proxy;
|
|
},
|
|
|
|
// inherit docs
|
|
onBeforeSort: function() {
|
|
if (this.folderSort) {
|
|
this.sort({
|
|
property: 'leaf',
|
|
direction: 'ASC'
|
|
}, 'prepend', false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fired by the root node.
|
|
*
|
|
* Called before a node is expanded.
|
|
*
|
|
* This ensures that the child nodes are available before calling the passed callback.
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node The node being expanded.
|
|
* @param {Function} callback The function to run after the expand finishes
|
|
* @param {Object} scope The scope in which to run the callback function
|
|
* @param {Array} args The extra args to pass to the callback after the new child nodes
|
|
*/
|
|
onBeforeNodeExpand: function(node, callback, scope, args) {
|
|
var me = this,
|
|
reader, dataRoot, data,
|
|
callbackArgs;
|
|
|
|
// Children are loaded go ahead with expand
|
|
if (node.isLoaded()) {
|
|
callbackArgs = [node.childNodes];
|
|
if (args) {
|
|
callbackArgs.push.apply(callbackArgs, args);
|
|
}
|
|
Ext.callback(callback, scope || node, callbackArgs);
|
|
}
|
|
// There are unloaded child nodes in the raw data because of the lazy configuration, load them then call back.
|
|
else if (dataRoot = (data = (node.raw || node[node.persistenceProperty])[(reader = me.getProxy().getReader()).root])) {
|
|
me.fillNode(node, reader.extractData(dataRoot));
|
|
delete data[reader.root];
|
|
callbackArgs = [node.childNodes];
|
|
if (args) {
|
|
callbackArgs.push.apply(callbackArgs, args);
|
|
}
|
|
Ext.callback(callback, scope || node, callbackArgs);
|
|
}
|
|
// The node is loading
|
|
else if (node.isLoading()) {
|
|
me.on('load', function() {
|
|
callbackArgs = [node.childNodes];
|
|
if (args) {
|
|
callbackArgs.push.apply(callbackArgs, args);
|
|
}
|
|
Ext.callback(callback, scope || node, callbackArgs);
|
|
}, me, {single: true});
|
|
}
|
|
// Node needs loading
|
|
else {
|
|
me.read({
|
|
node: node,
|
|
callback: function() {
|
|
// Clear the callback, since if we're introducing a custom one,
|
|
// it may be re-used on reload
|
|
delete me.lastOptions.callback;
|
|
callbackArgs = [node.childNodes];
|
|
if (args) {
|
|
callbackArgs.push.apply(callbackArgs, args);
|
|
}
|
|
Ext.callback(callback, scope || node, callbackArgs);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
//inherit docs
|
|
getNewRecords: function() {
|
|
return Ext.Array.filter(this.tree.flatten(), this.filterNew);
|
|
},
|
|
|
|
//inherit docs
|
|
getUpdatedRecords: function() {
|
|
return Ext.Array.filter(this.tree.flatten(), this.filterUpdated);
|
|
},
|
|
|
|
onNodeRemove: function(parent, node, isMove) {
|
|
var me = this;
|
|
|
|
node.unjoin(me);
|
|
// Phantom nodes should never be included in the removed collection.
|
|
// Also, if we're moving a node a remove will be fired, however we'll
|
|
// be inserting it again, so don't push it into the removed collection
|
|
if (!node.phantom && !isMove) {
|
|
Ext.Array.include(me.removed, node);
|
|
}
|
|
|
|
if (me.autoSync && !me.autoSyncSuspended && !isMove) {
|
|
me.sync();
|
|
}
|
|
},
|
|
|
|
onNodeAdded: function(parent, node) {
|
|
var me = this,
|
|
proxy = me.getProxy(),
|
|
reader = proxy.getReader(),
|
|
data = node.raw || node[node.persistenceProperty],
|
|
dataRoot;
|
|
|
|
Ext.Array.remove(me.removed, node);
|
|
node.join(me);
|
|
|
|
// If node has raw data, load the child nodes from it.
|
|
if (!node.isLeaf() && !me.lazyFill) {
|
|
dataRoot = reader.getRoot(data);
|
|
if (dataRoot) {
|
|
me.fillNode(node, reader.extractData(dataRoot));
|
|
delete data[reader.root];
|
|
}
|
|
}
|
|
|
|
if (me.autoSync && !me.autoSyncSuspended && (node.phantom || node.dirty)) {
|
|
me.sync();
|
|
}
|
|
},
|
|
|
|
onNodeSort: function() {
|
|
if (this.autoSync && !this.autoSyncSuspended) {
|
|
this.sync();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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, /* private */ preventLoad) {
|
|
var me = this,
|
|
model = me.model,
|
|
idProperty = model.prototype.idProperty
|
|
|
|
root = root || {};
|
|
if (!root.isModel) {
|
|
root = Ext.apply({}, root);
|
|
// create a default rootNode and create internal data struct.
|
|
Ext.applyIf(root, {
|
|
id: me.defaultRootId,
|
|
text: me.defaultRootText,
|
|
allowDrag: false
|
|
});
|
|
if (root[idProperty] === undefined) {
|
|
root[idProperty] = me.defaultRootId;
|
|
}
|
|
Ext.data.NodeInterface.decorate(model);
|
|
root = Ext.ModelManager.create(root, model);
|
|
} else if (root.isModel && !root.isNode) {
|
|
Ext.data.NodeInterface.decorate(model);
|
|
}
|
|
|
|
|
|
// Because we have decorated the model with new fields,
|
|
// we need to build new extactor functions on the reader.
|
|
me.getProxy().getReader().buildExtractors(true);
|
|
|
|
// When we add the root to the tree, it will automaticaly get the NodeInterface
|
|
me.tree.setRootNode(root);
|
|
|
|
// If the user has set expanded: true on the root, we want to call the expand function to kick off
|
|
// an expand process, so clear the expanded status and call expand.
|
|
// Upon receipt, the expansion process is the most efficient way of processing the
|
|
// returned nodes and putting them into the NodeStore in one block.
|
|
// Appending a node to an expanded node is expensive - the NodeStore and UI are updated.
|
|
if (preventLoad !== true && !root.isLoaded() && (me.autoLoad === true || root.isExpanded())) {
|
|
root.data.expanded = false;
|
|
root.expand();
|
|
}
|
|
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Returns the root node for this tree.
|
|
* @return {Ext.data.NodeInterface}
|
|
*/
|
|
getRootNode: function() {
|
|
return this.tree.getRootNode();
|
|
},
|
|
|
|
/**
|
|
* Returns the record node by id
|
|
* @return {Ext.data.NodeInterface}
|
|
*/
|
|
getNodeById: function(id) {
|
|
return this.tree.getNodeById(id);
|
|
},
|
|
|
|
// inherit docs
|
|
getById: function(id) {
|
|
return this.getNodeById(id);
|
|
},
|
|
|
|
/**
|
|
* Loads the Store using its configured {@link #proxy}.
|
|
* @param {Object} options (Optional) config object. This is passed into the {@link Ext.data.Operation Operation}
|
|
* object that is created and then sent to the proxy's {@link Ext.data.proxy.Proxy#read} function.
|
|
* The options can also contain a node, which indicates which node is to be loaded. If not specified, it will
|
|
* default to the root node.
|
|
*/
|
|
load: function(options) {
|
|
options = options || {};
|
|
options.params = options.params || {};
|
|
|
|
var me = this,
|
|
node = options.node || me.tree.getRootNode();
|
|
|
|
// If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just
|
|
// create one for them.
|
|
if (!node) {
|
|
node = me.setRootNode({
|
|
expanded: true
|
|
}, true);
|
|
}
|
|
|
|
// Assign the ID of the Operation so that a ServerProxy can set its idParam parameter,
|
|
// or a REST proxy can create the correct URL
|
|
options.id = node.getId();
|
|
|
|
if (me.clearOnLoad) {
|
|
if(me.clearRemovedOnLoad) {
|
|
// clear from the removed array any nodes that were descendants of the node being reloaded so that they do not get saved on next sync.
|
|
me.clearRemoved(node);
|
|
}
|
|
// temporarily remove the onNodeRemove event listener so that when removeAll is called, the removed nodes do not get added to the removed array
|
|
me.tree.un('remove', me.onNodeRemove, me);
|
|
// remove all the nodes
|
|
node.removeAll(false);
|
|
// reattach the onNodeRemove listener
|
|
me.tree.on('remove', me.onNodeRemove, me);
|
|
}
|
|
|
|
Ext.applyIf(options, {
|
|
node: node
|
|
});
|
|
|
|
me.callParent([options]);
|
|
|
|
if (me.loading && node) {
|
|
node.set('loading', true);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Removes all records that used to be descendants of the passed node from the removed array
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node
|
|
*/
|
|
clearRemoved: function(node) {
|
|
var me = this,
|
|
removed = me.removed,
|
|
id = node.getId(),
|
|
removedLength = removed.length,
|
|
i = removedLength,
|
|
recordsToClear = {},
|
|
newRemoved = [],
|
|
removedHash = {},
|
|
removedNode,
|
|
targetNode,
|
|
targetId;
|
|
|
|
if(node === me.getRootNode()) {
|
|
// if the passed node is the root node, just reset the removed array
|
|
me.removed = [];
|
|
return;
|
|
}
|
|
|
|
// add removed records to a hash so they can be easily retrieved by id later
|
|
for(; i--;) {
|
|
removedNode = removed[i];
|
|
removedHash[removedNode.getId()] = removedNode;
|
|
}
|
|
|
|
for(i = removedLength; i--;) {
|
|
removedNode = removed[i];
|
|
targetNode = removedNode;
|
|
while(targetNode && targetNode.getId() !== id) {
|
|
// walk up the parent hierarchy until we find the passed node or until we get to the root node
|
|
targetId = targetNode.get('parentId');
|
|
targetNode = targetNode.parentNode || me.getNodeById(targetId) || removedHash[targetId];
|
|
}
|
|
if(targetNode) {
|
|
// removed node was previously a descendant of the passed node - add it to the records to clear from "removed" later
|
|
recordsToClear[removedNode.getId()] = removedNode;
|
|
}
|
|
}
|
|
|
|
// create a new removed array containing only the records that are not in recordsToClear
|
|
for(i = 0; i < removedLength; i++) {
|
|
removedNode = removed[i];
|
|
if(!recordsToClear[removedNode.getId()]) {
|
|
newRemoved.push(removedNode);
|
|
}
|
|
}
|
|
|
|
me.removed = newRemoved;
|
|
},
|
|
|
|
/**
|
|
* Fills a node with a series of child records.
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node The node to fill
|
|
* @param {Ext.data.Model[]} newNodes The records to add
|
|
*/
|
|
fillNode: function(node, newNodes) {
|
|
var me = this,
|
|
ln = newNodes ? newNodes.length : 0,
|
|
sorters = me.sorters,
|
|
i, sortCollection,
|
|
needsIndexSort = false,
|
|
performLocalSort = ln && me.sortOnLoad && !me.remoteSort && sorters && sorters.items && sorters.items.length,
|
|
node1, node2, rootFill;
|
|
|
|
// See if there are any differing index values in the new nodes. If not, then we do not have to sortByIndex
|
|
for (i = 1; i < ln; i++) {
|
|
node1 = newNodes[i];
|
|
node2 = newNodes[i - 1];
|
|
needsIndexSort = node1[node1.persistenceProperty].index != node2[node2.persistenceProperty].index;
|
|
if (needsIndexSort) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// If there is a set of local sorters defined.
|
|
if (performLocalSort) {
|
|
// If sorting by index is needed, sort by index first
|
|
if (needsIndexSort) {
|
|
me.sorters.insert(0, me.indexSorter);
|
|
}
|
|
sortCollection = new Ext.util.MixedCollection();
|
|
sortCollection.addAll(newNodes);
|
|
sortCollection.sort(me.sorters.items);
|
|
newNodes = sortCollection.items;
|
|
|
|
// Remove the index sorter
|
|
me.sorters.remove(me.indexSorter);
|
|
} else if (needsIndexSort) {
|
|
Ext.Array.sort(newNodes, me.sortByIndex);
|
|
}
|
|
|
|
node.set('loaded', true);
|
|
|
|
// Fill node gets called recursively (indirectly) as we're populating the
|
|
// nodes via a load or when appending a new child. As such, when we hit
|
|
// the top most node, we fire an event to let the view know we'll be doing
|
|
// a bulk operation so it can take appropriate action
|
|
rootFill = me.fillCount === 0;
|
|
if (rootFill) {
|
|
// internal event
|
|
me.fireEvent('beforefill', me, node, newNodes);
|
|
}
|
|
++me.fillCount;
|
|
|
|
if (newNodes.length) {
|
|
node.appendChild(newNodes, undefined, true);
|
|
}
|
|
|
|
if (rootFill) {
|
|
// internal event
|
|
me.fireEvent('fillcomplete', me, node, newNodes);
|
|
}
|
|
--me.fillCount;
|
|
|
|
return newNodes;
|
|
},
|
|
|
|
/**
|
|
* Sorter function for sorting records in index order
|
|
* @private
|
|
* @param {Ext.data.NodeInterface} node1
|
|
* @param {Ext.data.NodeInterface} node2
|
|
* @return {Number}
|
|
*/
|
|
sortByIndex: function(node1, node2) {
|
|
return node1[node1.persistenceProperty].index - node2[node2.persistenceProperty].index;
|
|
},
|
|
|
|
onIdChanged: function(model, oldId, newId, oldInternalId){
|
|
this.tree.onNodeIdChanged(model, oldId, newId, oldInternalId);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
// inherit docs
|
|
onProxyLoad: function(operation) {
|
|
var me = this,
|
|
successful = operation.wasSuccessful(),
|
|
records = operation.getRecords(),
|
|
node = operation.node;
|
|
|
|
me.loading = false;
|
|
node.set('loading', false);
|
|
if (successful) {
|
|
if (!me.clearOnLoad) {
|
|
records = me.cleanRecords(node, records);
|
|
}
|
|
records = me.fillNode(node, records);
|
|
}
|
|
// The load event has an extra node parameter
|
|
// (differing from the load event described in AbstractStore)
|
|
/**
|
|
* @event load
|
|
* Fires whenever the store reads data from a remote data source.
|
|
* @param {Ext.data.TreeStore} this
|
|
* @param {Ext.data.NodeInterface} node The node that was loaded.
|
|
* @param {Ext.data.Model[]} records An array of records.
|
|
* @param {Boolean} successful True if the operation was successful.
|
|
*/
|
|
// deprecate read?
|
|
me.fireEvent('read', me, operation.node, records, successful);
|
|
me.fireEvent('load', me, operation.node, records, successful);
|
|
//this is a callback that would have been passed to the 'read' function and is optional
|
|
Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);
|
|
},
|
|
|
|
cleanRecords: function(node, records){
|
|
var nodeHash = {},
|
|
childNodes = node.childNodes,
|
|
i = 0,
|
|
len = childNodes.length,
|
|
out = [],
|
|
rec;
|
|
|
|
// build a hash of all the childNodes under the current node for performance
|
|
for (; i < len; ++i) {
|
|
nodeHash[childNodes[i].getId()] = true;
|
|
}
|
|
|
|
for (i = 0, len = records.length; i < len; ++i) {
|
|
rec = records[i];
|
|
if (!nodeHash[rec.getId()]) {
|
|
out.push(rec);
|
|
}
|
|
}
|
|
|
|
return out;
|
|
},
|
|
|
|
// inherit docs
|
|
removeAll: function() {
|
|
var root = this.getRootNode();
|
|
if (root) {
|
|
root.destroy(true);
|
|
}
|
|
this.fireEvent('clear', this);
|
|
},
|
|
|
|
// inherit docs
|
|
doSort: function(sorterFn) {
|
|
var me = this;
|
|
if (me.remoteSort) {
|
|
//the load function will pick up the new sorters and request the sorted data from the proxy
|
|
me.load();
|
|
} else {
|
|
me.tree.sort(sorterFn, true);
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
}
|
|
me.fireEvent('sort', me, me.sorters.getRange());
|
|
}
|
|
}, function() {
|
|
var proto = this.prototype;
|
|
proto.indexSorter = new Ext.util.Sorter({
|
|
sorterFn: proto.sortByIndex
|
|
});
|
|
});
|
|
|
|
/**
|
|
* @extend Ext.data.IdGenerator
|
|
* @author Don Griffin
|
|
*
|
|
* This class generates UUID's according to RFC 4122. This class has a default id property.
|
|
* This means that a single instance is shared unless the id property is overridden. Thus,
|
|
* two {@link Ext.data.Model} instances configured like the following share one generator:
|
|
*
|
|
* Ext.define('MyApp.data.MyModelX', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'uuid'
|
|
* });
|
|
*
|
|
* Ext.define('MyApp.data.MyModelY', {
|
|
* extend: 'Ext.data.Model',
|
|
* idgen: 'uuid'
|
|
* });
|
|
*
|
|
* This allows all models using this class to share a commonly configured instance.
|
|
*
|
|
* # Using Version 1 ("Sequential") UUID's
|
|
*
|
|
* If a server can provide a proper timestamp and a "cryptographic quality random number"
|
|
* (as described in RFC 4122), the shared instance can be configured as follows:
|
|
*
|
|
* Ext.data.IdGenerator.get('uuid').reconfigure({
|
|
* version: 1,
|
|
* clockSeq: clock, // 14 random bits
|
|
* salt: salt, // 48 secure random bits (the Node field)
|
|
* timestamp: ts // timestamp per Section 4.1.4
|
|
* });
|
|
*
|
|
* // or these values can be split into 32-bit chunks:
|
|
*
|
|
* Ext.data.IdGenerator.get('uuid').reconfigure({
|
|
* version: 1,
|
|
* clockSeq: clock,
|
|
* salt: { lo: saltLow32, hi: saltHigh32 },
|
|
* timestamp: { lo: timestampLow32, hi: timestamptHigh32 }
|
|
* });
|
|
*
|
|
* This approach improves the generator's uniqueness by providing a valid timestamp and
|
|
* higher quality random data. Version 1 UUID's should not be used unless this information
|
|
* can be provided by a server and care should be taken to avoid caching of this data.
|
|
*
|
|
* See http://www.ietf.org/rfc/rfc4122.txt for details.
|
|
*/
|
|
Ext.define('Ext.data.UuidGenerator', (function () {
|
|
var twoPow14 = Math.pow(2, 14),
|
|
twoPow16 = Math.pow(2, 16),
|
|
twoPow28 = Math.pow(2, 28),
|
|
twoPow32 = Math.pow(2, 32);
|
|
|
|
function toHex (value, length) {
|
|
var ret = value.toString(16);
|
|
if (ret.length > length) {
|
|
ret = ret.substring(ret.length - length); // right-most digits
|
|
} else if (ret.length < length) {
|
|
ret = Ext.String.leftPad(ret, length, '0');
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
function rand (lo, hi) {
|
|
var v = Math.random() * (hi - lo + 1);
|
|
return Math.floor(v) + lo;
|
|
}
|
|
|
|
function split (bignum) {
|
|
if (typeof(bignum) == 'number') {
|
|
var hi = Math.floor(bignum / twoPow32);
|
|
return {
|
|
lo: Math.floor(bignum - hi * twoPow32),
|
|
hi: hi
|
|
};
|
|
}
|
|
return bignum;
|
|
}
|
|
|
|
return {
|
|
extend: Ext.data.IdGenerator ,
|
|
|
|
alias: 'idgen.uuid',
|
|
|
|
id: 'uuid', // shared by default
|
|
|
|
/**
|
|
* @property {Number/Object} salt
|
|
* When created, this value is a 48-bit number. For computation, this value is split
|
|
* into 32-bit parts and stored in an object with `hi` and `lo` properties.
|
|
*/
|
|
|
|
/**
|
|
* @property {Number/Object} timestamp
|
|
* When created, this value is a 60-bit number. For computation, this value is split
|
|
* into 32-bit parts and stored in an object with `hi` and `lo` properties.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} version
|
|
* The Version of UUID. Supported values are:
|
|
*
|
|
* * 1 : Time-based, "sequential" UUID.
|
|
* * 4 : Pseudo-random UUID.
|
|
*
|
|
* The default is 4.
|
|
*/
|
|
version: 4,
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.parts = [];
|
|
me.init();
|
|
},
|
|
|
|
generate: function () {
|
|
var me = this,
|
|
parts = me.parts,
|
|
ts = me.timestamp;
|
|
|
|
/*
|
|
The magic decoder ring (derived from RFC 4122 Section 4.2.2):
|
|
|
|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
|
| time_low |
|
|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
|
| time_mid | ver | time_hi |
|
|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
|
|res| clock_hi | clock_low | salt 0 |M| salt 1 |
|
|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
|
| salt (2-5) |
|
|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
|
|
|
time_mid clock_hi (low 6 bits)
|
|
time_low | time_hi |clock_lo
|
|
| | | || salt[0]
|
|
| | | || | salt[1..5]
|
|
v v v vv v v
|
|
0badf00d-aced-1def-b123-dfad0badbeef
|
|
^ ^ ^
|
|
version | multicast (low bit)
|
|
|
|
|
reserved (upper 2 bits)
|
|
*/
|
|
parts[0] = toHex(ts.lo, 8);
|
|
parts[1] = toHex(ts.hi & 0xFFFF, 4);
|
|
parts[2] = toHex(((ts.hi >>> 16) & 0xFFF) | (me.version << 12), 4);
|
|
parts[3] = toHex(0x80 | ((me.clockSeq >>> 8) & 0x3F), 2) +
|
|
toHex(me.clockSeq & 0xFF, 2);
|
|
parts[4] = toHex(me.salt.hi, 4) + toHex(me.salt.lo, 8);
|
|
|
|
if (me.version == 4) {
|
|
me.init(); // just regenerate all the random values...
|
|
} else {
|
|
// sequentially increment the timestamp...
|
|
++ts.lo;
|
|
if (ts.lo >= twoPow32) { // if (overflow)
|
|
ts.lo = 0;
|
|
++ts.hi;
|
|
}
|
|
}
|
|
|
|
return parts.join('-').toLowerCase();
|
|
},
|
|
|
|
getRecId: function (rec) {
|
|
return rec.getId();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
init: function () {
|
|
var me = this,
|
|
salt, time;
|
|
|
|
if (me.version == 4) {
|
|
// See RFC 4122 (Secion 4.4)
|
|
// o If the state was unavailable (e.g., non-existent or corrupted),
|
|
// or the saved node ID is different than the current node ID,
|
|
// generate a random clock sequence value.
|
|
me.clockSeq = rand(0, twoPow14-1);
|
|
|
|
// we run this on every id generation...
|
|
salt = me.salt || (me.salt = {});
|
|
time = me.timestamp || (me.timestamp = {});
|
|
|
|
// See RFC 4122 (Secion 4.4)
|
|
salt.lo = rand(0, twoPow32-1);
|
|
salt.hi = rand(0, twoPow16-1);
|
|
time.lo = rand(0, twoPow32-1);
|
|
time.hi = rand(0, twoPow28-1);
|
|
} else {
|
|
// this is run only once per-instance
|
|
me.salt = split(me.salt);
|
|
me.timestamp = split(me.timestamp);
|
|
|
|
// Set multicast bit: "the least significant bit of the first octet of the
|
|
// node ID" (nodeId = salt for this implementation):
|
|
me.salt.hi |= 0x100;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Reconfigures this generator given new config properties.
|
|
*/
|
|
reconfigure: function (config) {
|
|
Ext.apply(this, config);
|
|
this.init();
|
|
}
|
|
};
|
|
}()));
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* The XML Reader is used by a Proxy to read a server response that is sent back in XML format. This usually happens as
|
|
* a result of loading a Store - for example we might create something like this:
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email']
|
|
* });
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User',
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url : 'users.xml',
|
|
* reader: {
|
|
* type: 'xml',
|
|
* record: 'user',
|
|
* root: 'users'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* The example above creates a 'User' model. Models are explained in the {@link Ext.data.Model Model} docs if you're not
|
|
* already familiar with them.
|
|
*
|
|
* We created the simplest type of XML Reader possible by simply telling our {@link Ext.data.Store Store}'s {@link
|
|
* Ext.data.proxy.Proxy Proxy} that we want a XML Reader. The Store automatically passes the configured model to the
|
|
* Store, so it is as if we passed this instead:
|
|
*
|
|
* reader: {
|
|
* type : 'xml',
|
|
* model: 'User',
|
|
* record: 'user',
|
|
* root: 'users'
|
|
* }
|
|
*
|
|
* The reader we set up is ready to read data from our server - at the moment it will accept a response like this:
|
|
*
|
|
* <?xml version="1.0" encoding="UTF-8"?>
|
|
* <users>
|
|
* <user>
|
|
* <id>1</id>
|
|
* <name>Ed Spencer</name>
|
|
* <email>ed@sencha.com</email>
|
|
* </user>
|
|
* <user>
|
|
* <id>2</id>
|
|
* <name>Abe Elias</name>
|
|
* <email>abe@sencha.com</email>
|
|
* </user>
|
|
* </users>
|
|
*
|
|
* First off there's {@link #root} option to define the root node `<users>` (there should be only one in a well-formed
|
|
* XML document). Then the XML Reader uses the configured {@link #record} option to pull out the data for each record -
|
|
* in this case we set record to 'user', so each `<user>` above will be converted into a User model.
|
|
*
|
|
* Note that XmlReader doesn't care whether your {@link #root} and {@link #record} elements are nested deep inside a
|
|
* larger structure, so a response like this will still work:
|
|
*
|
|
* <?xml version="1.0" encoding="UTF-8"?>
|
|
* <deeply>
|
|
* <nested>
|
|
* <xml>
|
|
* <users>
|
|
* <user>
|
|
* <id>1</id>
|
|
* <name>Ed Spencer</name>
|
|
* <email>ed@sencha.com</email>
|
|
* </user>
|
|
* <user>
|
|
* <id>2</id>
|
|
* <name>Abe Elias</name>
|
|
* <email>abe@sencha.com</email>
|
|
* </user>
|
|
* </users>
|
|
* </xml>
|
|
* </nested>
|
|
* </deeply>
|
|
*
|
|
* If this Reader is being used by a {@link Ext.data.TreeStore TreeStore} to read tree-structured data in which records
|
|
* are nested as descendant nodes of other records, then this lenient behaviour must be overridden by using a more specific
|
|
* child node selector as your {@link #record} selector which will not select all descendants, such as:
|
|
*
|
|
* record: '>user'
|
|
*
|
|
* # Response metadata
|
|
*
|
|
* The server can return additional data in its response, such as the {@link #totalProperty total number of records} and
|
|
* the {@link #successProperty success status of the response}. These are typically included in the XML response like
|
|
* this:
|
|
*
|
|
* <?xml version="1.0" encoding="UTF-8"?>
|
|
* <users>
|
|
* <total>100</total>
|
|
* <success>true</success>
|
|
* <user>
|
|
* <id>1</id>
|
|
* <name>Ed Spencer</name>
|
|
* <email>ed@sencha.com</email>
|
|
* </user>
|
|
* <user>
|
|
* <id>2</id>
|
|
* <name>Abe Elias</name>
|
|
* <email>abe@sencha.com</email>
|
|
* </user>
|
|
* </users>
|
|
*
|
|
* If these properties are present in the XML response they can be parsed out by the XmlReader and used by the Store
|
|
* that loaded it. We can set up the names of these properties by specifying a final pair of configuration options:
|
|
*
|
|
* reader: {
|
|
* type: 'xml',
|
|
* root: 'users',
|
|
* totalProperty : 'total',
|
|
* successProperty: 'success'
|
|
* }
|
|
*
|
|
* These final options are not necessary to make the Reader work, but can be useful when the server needs to report an
|
|
* error or if it needs to indicate that there is a lot of data available of which only a subset is currently being
|
|
* returned.
|
|
*
|
|
* # Response format
|
|
*
|
|
* **Note:** in order for the browser to parse a returned XML document, the Content-Type header in the HTTP response
|
|
* must be set to "text/xml" or "application/xml". This is very important - the XmlReader will not work correctly
|
|
* otherwise.
|
|
*/
|
|
Ext.define('Ext.data.reader.Xml', {
|
|
extend: Ext.data.reader.Reader ,
|
|
alternateClassName: 'Ext.data.XmlReader',
|
|
alias : 'reader.xml',
|
|
|
|
/**
|
|
* @cfg {String} record (required)
|
|
* The DomQuery path to the repeated element which contains record information.
|
|
*
|
|
* By default, the elements which match the selector may be nested at any level below the {@link #root}
|
|
*
|
|
* If this Reader is being used by a {@link Ext.data.TreeStore TreeStore} to read tree-structured data,
|
|
* then only first generation child nodes of the root element must be selected, so the record selector must be
|
|
* specified with a more specific selector which will not select all descendants. For example:
|
|
*
|
|
* record: '>node'
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} namespace
|
|
* A namespace prefix that will be prepended to the field name when reading a
|
|
* field from an XML node. Take, for example, the following Model:
|
|
*
|
|
* Ext.define('Foo', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['bar', 'baz']
|
|
* });
|
|
*
|
|
* The reader would need to be configured with a namespace of 'n' in order to read XML
|
|
* data in the following format:
|
|
*
|
|
* <foo>
|
|
* <n:bar>bar</n:bar>
|
|
* <n:baz>baz</n:baz>
|
|
* </foo>
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Creates a function to return some particular key of data from a response. The totalProperty and
|
|
* successProperty are treated as special cases for type casting, everything else is just a simple selector.
|
|
* @param {String} key
|
|
* @return {Function}
|
|
*/
|
|
createAccessor: function(expr) {
|
|
var me = this;
|
|
|
|
if (Ext.isEmpty(expr)) {
|
|
return Ext.emptyFn;
|
|
}
|
|
|
|
if (Ext.isFunction(expr)) {
|
|
return expr;
|
|
}
|
|
|
|
return function(root) {
|
|
return me.getNodeValue(Ext.DomQuery.selectNode(expr, root));
|
|
};
|
|
},
|
|
|
|
getNodeValue: function(node) {
|
|
if (node) {
|
|
// overcome a limitation of maximum textnode size
|
|
// http://reference.sitepoint.com/javascript/Node/normalize
|
|
// https://developer.mozilla.org/En/DOM/Node.normalize
|
|
if (typeof node.normalize === 'function') {
|
|
node.normalize();
|
|
}
|
|
node = node.firstChild;
|
|
if (node) {
|
|
return node.nodeValue;
|
|
}
|
|
}
|
|
return undefined;
|
|
},
|
|
|
|
//inherit docs
|
|
getResponseData: function(response) {
|
|
var xml = response.responseXML,
|
|
error,
|
|
msg;
|
|
|
|
if (!xml) {
|
|
msg = 'XML data not found in the response';
|
|
|
|
error = new Ext.data.ResultSet({
|
|
total : 0,
|
|
count : 0,
|
|
records: [],
|
|
success: false,
|
|
message: msg
|
|
});
|
|
|
|
this.fireEvent('exception', this, response, error);
|
|
|
|
Ext.Logger.warn(msg);
|
|
|
|
return error;
|
|
}
|
|
|
|
return this.readRecords(xml);
|
|
},
|
|
|
|
/**
|
|
* Normalizes the data object.
|
|
* @param {Object} data The raw data object
|
|
* @return {Object} The documentElement property of the data object if present, or the same object if not.
|
|
*/
|
|
getData: function(data) {
|
|
return data.documentElement || data;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Given an XML object, returns the Element that represents the root as configured by the Reader's meta data.
|
|
* @param {Object} data The XML data object
|
|
* @return {XMLElement} The root node element
|
|
*/
|
|
getRoot: function(data) {
|
|
var nodeName = data.nodeName,
|
|
root = this.root;
|
|
|
|
if (!root || (nodeName && nodeName == root)) {
|
|
return data;
|
|
} else if (Ext.DomQuery.isXml(data)) {
|
|
// This fix ensures we have XML data
|
|
// Related to TreeStore calling getRoot with the root node, which isn't XML
|
|
// Probably should be resolved in TreeStore at some point
|
|
return Ext.DomQuery.selectNode(root, data);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* We're just preparing the data for the superclass by pulling out the record nodes we want.
|
|
* @param {XMLElement} root The XML root node
|
|
* @return {Ext.data.Model[]} The records
|
|
*/
|
|
extractData: function(root) {
|
|
var recordName = this.record;
|
|
|
|
|
|
if (recordName != root.nodeName) {
|
|
root = Ext.DomQuery.select(recordName, root);
|
|
} else {
|
|
root = [root];
|
|
}
|
|
return this.callParent([root]);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* See Ext.data.reader.Reader's getAssociatedDataRoot docs.
|
|
* @param {Object} data The raw data object
|
|
* @param {String} associationName The name of the association to get data for (uses associationKey if present)
|
|
* @return {XMLElement} The root
|
|
*/
|
|
getAssociatedDataRoot: function(data, associationName) {
|
|
return Ext.DomQuery.select(associationName, data)[0];
|
|
},
|
|
|
|
/**
|
|
* Parses an XML document and returns a ResultSet containing the model instances.
|
|
* @param {Object} doc Parsed XML document
|
|
* @return {Ext.data.ResultSet} The parsed result set
|
|
*/
|
|
readRecords: function(doc) {
|
|
// it's possible that we get passed an array here by associations.
|
|
// Make sure we strip that out (see Ext.data.reader.Reader#readAssociated)
|
|
if (Ext.isArray(doc)) {
|
|
doc = doc[0];
|
|
}
|
|
|
|
/**
|
|
* @property {Object} xmlData
|
|
* Copy of {@link #rawData}.
|
|
* @deprecated Will be removed in Ext JS 5.0. Use {@link #rawData} instead.
|
|
*/
|
|
this.xmlData = doc;
|
|
return this.callParent([doc]);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns an accessor expression for the passed Field from an XML element using either the Field's mapping, or
|
|
* its ordinal position in the fields collsction as the index.
|
|
* This is used by buildExtractors to create optimized on extractor function which converts raw data into model instances.
|
|
*/
|
|
createFieldAccessExpression: function(field, fieldVarName, dataName) {
|
|
var namespace = this.namespace,
|
|
selector, result;
|
|
|
|
selector = field.mapping || ((namespace ? namespace + '|' : '') + field.name);
|
|
|
|
if (typeof selector === 'function') {
|
|
result = fieldVarName + '.mapping(' + dataName + ', this)';
|
|
} else {
|
|
result = 'me.getNodeValue(Ext.DomQuery.selectNode("' + selector + '", ' + dataName + '))';
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.data.writer.Xml
|
|
|
|
This class is used to write {@link Ext.data.Model} data to the server in an XML format.
|
|
The {@link #documentRoot} property is used to specify the root element in the XML document.
|
|
The {@link #record} option is used to specify the element name for each record that will make
|
|
up the XML document.
|
|
|
|
* @markdown
|
|
*/
|
|
Ext.define('Ext.data.writer.Xml', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.data.writer.Writer ,
|
|
alternateClassName: 'Ext.data.XmlWriter',
|
|
|
|
alias: 'writer.xml',
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} documentRoot The name of the root element of the document. Defaults to <tt>'xmlData'</tt>.
|
|
* If there is more than 1 record and the root is not specified, the default document root will still be used
|
|
* to ensure a valid XML document is created.
|
|
*/
|
|
documentRoot: 'xmlData',
|
|
|
|
/**
|
|
* @cfg {String} defaultDocumentRoot The root to be used if {@link #documentRoot} is empty and a root is required
|
|
* to form a valid XML document.
|
|
*/
|
|
defaultDocumentRoot: 'xmlData',
|
|
|
|
/**
|
|
* @cfg {String} header A header to use in the XML document (such as setting the encoding or version).
|
|
* Defaults to <tt>''</tt>.
|
|
*/
|
|
header: '',
|
|
|
|
/**
|
|
* @cfg {String} record The name of the node to use for each record. Defaults to <tt>'record'</tt>.
|
|
*/
|
|
record: 'record',
|
|
|
|
//inherit docs
|
|
writeRecords: function(request, data) {
|
|
var me = this,
|
|
xml = [],
|
|
i = 0,
|
|
len = data.length,
|
|
root = me.documentRoot,
|
|
record = me.record,
|
|
needsRoot = data.length !== 1,
|
|
item,
|
|
key;
|
|
|
|
// may not exist
|
|
xml.push(me.header || '');
|
|
|
|
if (!root && needsRoot) {
|
|
root = me.defaultDocumentRoot;
|
|
}
|
|
|
|
if (root) {
|
|
xml.push('<', root, '>');
|
|
}
|
|
|
|
for (; i < len; ++i) {
|
|
item = data[i];
|
|
xml.push('<', record, '>');
|
|
for (key in item) {
|
|
if (item.hasOwnProperty(key)) {
|
|
xml.push('<', key, '>', item[key], '</', key, '>');
|
|
}
|
|
}
|
|
xml.push('</', record, '>');
|
|
}
|
|
|
|
if (root) {
|
|
xml.push('</', root, '>');
|
|
}
|
|
|
|
request.xmlData = xml.join('');
|
|
return request;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* <p>Small helper class to make creating {@link Ext.data.Store}s from XML data easier.
|
|
* A XmlStore will be automatically configured with a {@link Ext.data.reader.Xml}.</p>
|
|
* <p>A store configuration would be something like:<pre><code>
|
|
var store = new Ext.data.XmlStore({
|
|
// store configs
|
|
storeId: 'myStore',
|
|
url: 'sheldon.xml', // automatically configures a HttpProxy
|
|
// reader configs
|
|
record: 'Item', // records will have an "Item" tag
|
|
idPath: 'ASIN',
|
|
totalRecords: '@TotalResults'
|
|
fields: [
|
|
// set up the fields mapping into the xml doc
|
|
// The first needs mapping, the others are very basic
|
|
{name: 'Author', mapping: 'ItemAttributes > Author'},
|
|
'Title', 'Manufacturer', 'ProductGroup'
|
|
]
|
|
});
|
|
* </code></pre></p>
|
|
* <p>This store is configured to consume a returned object of the form:<pre><code>
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<ItemSearchResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2009-05-15">
|
|
<Items>
|
|
<Request>
|
|
<IsValid>True</IsValid>
|
|
<ItemSearchRequest>
|
|
<Author>Sidney Sheldon</Author>
|
|
<SearchIndex>Books</SearchIndex>
|
|
</ItemSearchRequest>
|
|
</Request>
|
|
<TotalResults>203</TotalResults>
|
|
<TotalPages>21</TotalPages>
|
|
<Item>
|
|
<ASIN>0446355453</ASIN>
|
|
<DetailPageURL>
|
|
http://www.amazon.com/
|
|
</DetailPageURL>
|
|
<ItemAttributes>
|
|
<Author>Sidney Sheldon</Author>
|
|
<Manufacturer>Warner Books</Manufacturer>
|
|
<ProductGroup>Book</ProductGroup>
|
|
<Title>Master of the Game</Title>
|
|
</ItemAttributes>
|
|
</Item>
|
|
</Items>
|
|
</ItemSearchResponse>
|
|
* </code></pre>
|
|
* An object literal of this form could also be used as the {@link #cfg-data} config option.</p>
|
|
* <p><b>Note:</b> This class accepts all of the configuration options of
|
|
* <b>{@link Ext.data.reader.Xml XmlReader}</b>.</p>
|
|
*/
|
|
Ext.define('Ext.data.XmlStore', {
|
|
extend: Ext.data.Store ,
|
|
alias: 'store.xml',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
constructor: function(config){
|
|
config = Ext.apply({
|
|
proxy: {
|
|
type: 'ajax',
|
|
reader: 'xml',
|
|
writer: 'xml'
|
|
}
|
|
}, config);
|
|
|
|
this.callParent([config]);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.data.association.BelongsTo
|
|
*
|
|
* Represents a many to one association with another model. The owner model is expected to have
|
|
* a foreign key which references the primary key of the associated model:
|
|
*
|
|
* Ext.define('Category', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* { name: 'id', type: 'int' },
|
|
* { name: 'name', type: 'string' }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.define('Product', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* { name: 'id', type: 'int' },
|
|
* { name: 'category_id', type: 'int' },
|
|
* { name: 'name', type: 'string' }
|
|
* ],
|
|
* // we can use the belongsTo shortcut on the model to create a belongsTo association
|
|
* associations: [
|
|
* { type: 'belongsTo', model: 'Category' }
|
|
* ]
|
|
* });
|
|
*
|
|
* In the example above we have created models for Products and Categories, and linked them together
|
|
* by saying that each Product belongs to a Category. This automatically links each Product to a Category
|
|
* based on the Product's category_id, and provides new functions on the Product model:
|
|
*
|
|
* ## Generated getter function
|
|
*
|
|
* The first function that is added to the owner model is a getter function:
|
|
*
|
|
* var product = new Product({
|
|
* id: 100,
|
|
* category_id: 20,
|
|
* name: 'Sneakers'
|
|
* });
|
|
*
|
|
* product.getCategory(function(category, operation) {
|
|
* // do something with the category object
|
|
* alert(category.get('id')); // alerts 20
|
|
* }, this);
|
|
*
|
|
* The getCategory function was created on the Product model when we defined the association. This uses the
|
|
* Category's configured {@link Ext.data.proxy.Proxy proxy} to load the Category asynchronously, calling the provided
|
|
* callback when it has loaded.
|
|
*
|
|
* The new getCategory function will also accept an object containing success, failure and callback properties
|
|
* - callback will always be called, success will only be called if the associated model was loaded successfully
|
|
* and failure will only be called if the associatied model could not be loaded:
|
|
*
|
|
* product.getCategory({
|
|
* reload: true, // force a reload if the owner model is already cached
|
|
* callback: function(category, operation) {}, // a function that will always be called
|
|
* success : function(category, operation) {}, // a function that will only be called if the load succeeded
|
|
* failure : function(category, operation) {}, // a function that will only be called if the load did not succeed
|
|
* scope : this // optionally pass in a scope object to execute the callbacks in
|
|
* });
|
|
*
|
|
* In each case above the callbacks are called with two arguments - the associated model instance and the
|
|
* {@link Ext.data.Operation operation} object that was executed to load that instance. The Operation object is
|
|
* useful when the instance could not be loaded.
|
|
*
|
|
* Once the getter has been called on the model, it will be cached if the getter is called a second time. To
|
|
* force the model to reload, specify reload: true in the options object.
|
|
*
|
|
* ## Generated setter function
|
|
*
|
|
* The second generated function sets the associated model instance - if only a single argument is passed to
|
|
* the setter then the following two calls are identical:
|
|
*
|
|
* // this call...
|
|
* product.setCategory(10);
|
|
*
|
|
* // is equivalent to this call:
|
|
* product.set('category_id', 10);
|
|
*
|
|
* An instance of the owner model can also be passed as a parameter.
|
|
*
|
|
* If we pass in a second argument, the model will be automatically saved and the second argument passed to
|
|
* the owner model's {@link Ext.data.Model#save save} method:
|
|
*
|
|
* product.setCategory(10, function(product, operation) {
|
|
* // the product has been saved
|
|
* alert(product.get('category_id')); //now alerts 10
|
|
* });
|
|
*
|
|
* //alternative syntax:
|
|
* product.setCategory(10, {
|
|
* callback: function(product, operation), // a function that will always be called
|
|
* success : function(product, operation), // a function that will only be called if the load succeeded
|
|
* failure : function(product, operation), // a function that will only be called if the load did not succeed
|
|
* scope : this //optionally pass in a scope object to execute the callbacks in
|
|
* })
|
|
*
|
|
* ## Customisation
|
|
*
|
|
* Associations reflect on the models they are linking to automatically set up properties such as the
|
|
* {@link #primaryKey} and {@link #foreignKey}. These can alternatively be specified:
|
|
*
|
|
* Ext.define('Product', {
|
|
* fields: [...],
|
|
*
|
|
* associations: [
|
|
* { type: 'belongsTo', model: 'Category', primaryKey: 'unique_id', foreignKey: 'cat_id' }
|
|
* ]
|
|
* });
|
|
*
|
|
* Here we replaced the default primary key (defaults to 'id') and foreign key (calculated as 'category_id')
|
|
* with our own settings. Usually this will not be needed.
|
|
*/
|
|
Ext.define('Ext.data.association.BelongsTo', {
|
|
extend: Ext.data.association.Association ,
|
|
alternateClassName: 'Ext.data.BelongsToAssociation',
|
|
alias: 'association.belongsto',
|
|
|
|
/**
|
|
* @cfg {String} foreignKey The name of the foreign key on the owner model that links it to the associated
|
|
* model. Defaults to the lowercased name of the associated model plus "_id", e.g. an association with a
|
|
* model called Product would set up a product_id foreign key.
|
|
*
|
|
* Ext.define('Order', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'date'],
|
|
* hasMany: 'Product'
|
|
* });
|
|
*
|
|
* Ext.define('Product', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'order_id'], // refers to the id of the order that this product belongs to
|
|
* belongsTo: 'Order'
|
|
* });
|
|
* var product = new Product({
|
|
* id: 1,
|
|
* name: 'Product 1',
|
|
* order_id: 22
|
|
* }, 1);
|
|
* product.getOrder(); // Will make a call to the server asking for order_id 22
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} getterName The name of the getter function that will be added to the local model's prototype.
|
|
* Defaults to 'get' + the name of the foreign model, e.g. getCategory
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} setterName The name of the setter function that will be added to the local model's prototype.
|
|
* Defaults to 'set' + the name of the foreign model, e.g. setCategory
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} type The type configuration can be used when creating associations using a configuration object.
|
|
* Use 'belongsTo' to create a BelongsTo association.
|
|
*
|
|
* associations: [{
|
|
* type: 'belongsTo',
|
|
* model: 'User'
|
|
* }]
|
|
*/
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
|
|
var me = this,
|
|
ownerProto = me.ownerModel.prototype,
|
|
associatedName = me.associatedName,
|
|
getterName = me.getterName || 'get' + associatedName,
|
|
setterName = me.setterName || 'set' + associatedName;
|
|
|
|
Ext.applyIf(me, {
|
|
name : associatedName,
|
|
foreignKey : associatedName.toLowerCase() + "_id",
|
|
instanceName: associatedName + 'BelongsToInstance',
|
|
associationKey: associatedName.toLowerCase()
|
|
});
|
|
|
|
ownerProto[getterName] = me.createGetter();
|
|
ownerProto[setterName] = me.createSetter();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a setter function to be placed on the owner model's prototype
|
|
* @return {Function} The setter function
|
|
*/
|
|
createSetter: function() {
|
|
var me = this,
|
|
foreignKey = me.foreignKey,
|
|
instanceName = me.instanceName;
|
|
|
|
//'this' refers to the Model instance inside this function
|
|
return function(value, options, scope) {
|
|
// If we were passed a record, the value to set is the key of that record.
|
|
var setByRecord = value && value.isModel,
|
|
valueToSet = setByRecord ? value.getId() : value;
|
|
|
|
// Setter was passed a record.
|
|
if (setByRecord) {
|
|
this[instanceName] = value;
|
|
}
|
|
|
|
// Otherwise, if the key of foreign record !== passed value, delete the cached foreign record
|
|
else if (this[instanceName] instanceof Ext.data.Model && !this.isEqual(this.get(foreignKey), valueToSet)) {
|
|
delete this[instanceName];
|
|
}
|
|
|
|
// Set the forign key value
|
|
this.set(foreignKey, valueToSet);
|
|
|
|
if (Ext.isFunction(options)) {
|
|
options = {
|
|
callback: options,
|
|
scope: scope || this
|
|
};
|
|
}
|
|
|
|
if (Ext.isObject(options)) {
|
|
return this.save(options);
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a getter function to be placed on the owner model's prototype. We cache the loaded instance
|
|
* the first time it is loaded so that subsequent calls to the getter always receive the same reference.
|
|
* @return {Function} The getter function
|
|
*/
|
|
createGetter: function() {
|
|
var me = this,
|
|
associatedName = me.associatedName,
|
|
associatedModel = me.associatedModel,
|
|
foreignKey = me.foreignKey,
|
|
primaryKey = me.primaryKey,
|
|
instanceName = me.instanceName;
|
|
|
|
//'this' refers to the Model instance inside this function
|
|
return function(options, scope) {
|
|
options = options || {};
|
|
|
|
var model = this,
|
|
foreignKeyId = model.get(foreignKey),
|
|
success,
|
|
instance,
|
|
args;
|
|
|
|
if (options.reload === true || model[instanceName] === undefined) {
|
|
instance = Ext.ModelManager.create({}, associatedName);
|
|
instance.set(primaryKey, foreignKeyId);
|
|
|
|
if (typeof options == 'function') {
|
|
options = {
|
|
callback: options,
|
|
scope: scope || model
|
|
};
|
|
}
|
|
|
|
// Overwrite the success handler so we can assign the current instance
|
|
success = options.success;
|
|
options.success = function(rec){
|
|
model[instanceName] = rec;
|
|
if (success) {
|
|
success.apply(this, arguments);
|
|
}
|
|
};
|
|
|
|
associatedModel.load(foreignKeyId, options);
|
|
// assign temporarily while we wait for data to return
|
|
model[instanceName] = instance;
|
|
return instance;
|
|
} else {
|
|
instance = model[instanceName];
|
|
args = [instance];
|
|
scope = scope || options.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.
|
|
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;
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Read associated data
|
|
* @private
|
|
* @param {Ext.data.Model} record The record we're writing to
|
|
* @param {Ext.data.reader.Reader} reader The reader for the associated model
|
|
* @param {Object} associationData The raw associated data
|
|
*/
|
|
read: function(record, reader, associationData){
|
|
record[this.instanceName] = reader.read([associationData]).records[0];
|
|
}
|
|
});
|
|
|
|
/**
|
|
* General purpose inflector class that {@link #pluralize pluralizes}, {@link #singularize singularizes} and
|
|
* {@link #ordinalize ordinalizes} words. Sample usage:
|
|
*
|
|
* //turning singular words into plurals
|
|
* Ext.util.Inflector.pluralize('word'); //'words'
|
|
* Ext.util.Inflector.pluralize('person'); //'people'
|
|
* Ext.util.Inflector.pluralize('sheep'); //'sheep'
|
|
*
|
|
* //turning plurals into singulars
|
|
* Ext.util.Inflector.singularize('words'); //'word'
|
|
* Ext.util.Inflector.singularize('people'); //'person'
|
|
* Ext.util.Inflector.singularize('sheep'); //'sheep'
|
|
*
|
|
* //ordinalizing numbers
|
|
* Ext.util.Inflector.ordinalize(11); //"11th"
|
|
* Ext.util.Inflector.ordinalize(21); //"21st"
|
|
* Ext.util.Inflector.ordinalize(1043); //"1043rd"
|
|
*
|
|
* # Customization
|
|
*
|
|
* The Inflector comes with a default set of US English pluralization rules. These can be augmented with additional
|
|
* rules if the default rules do not meet your application's requirements, or swapped out entirely for other languages.
|
|
* Here is how we might add a rule that pluralizes "ox" to "oxen":
|
|
*
|
|
* Ext.util.Inflector.plural(/^(ox)$/i, "$1en");
|
|
*
|
|
* Each rule consists of two items - a regular expression that matches one or more rules, and a replacement string. In
|
|
* this case, the regular expression will only match the string "ox", and will replace that match with "oxen". Here's
|
|
* how we could add the inverse rule:
|
|
*
|
|
* Ext.util.Inflector.singular(/^(ox)en$/i, "$1");
|
|
*
|
|
* Note that the ox/oxen rules are present by default.
|
|
*/
|
|
Ext.define('Ext.util.Inflector', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
singleton: true,
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @private
|
|
* The registered plural tuples. Each item in the array should contain two items - the first must be a regular
|
|
* expression that matchers the singular form of a word, the second must be a String that replaces the matched
|
|
* part of the regular expression. This is managed by the {@link #plural} method.
|
|
* @property {Array} plurals
|
|
*/
|
|
plurals: [
|
|
[(/(quiz)$/i), "$1zes" ],
|
|
[(/^(ox)$/i), "$1en" ],
|
|
[(/([m|l])ouse$/i), "$1ice" ],
|
|
[(/(matr|vert|ind)ix|ex$/i), "$1ices" ],
|
|
[(/(x|ch|ss|sh)$/i), "$1es" ],
|
|
[(/([^aeiouy]|qu)y$/i), "$1ies" ],
|
|
[(/(hive)$/i), "$1s" ],
|
|
[(/(?:([^f])fe|([lr])f)$/i), "$1$2ves"],
|
|
[(/sis$/i), "ses" ],
|
|
[(/([ti])um$/i), "$1a" ],
|
|
[(/(buffal|tomat|potat)o$/i), "$1oes" ],
|
|
[(/(bu)s$/i), "$1ses" ],
|
|
[(/(alias|status|sex)$/i), "$1es" ],
|
|
[(/(octop|vir)us$/i), "$1i" ],
|
|
[(/(ax|test)is$/i), "$1es" ],
|
|
[(/^person$/), "people" ],
|
|
[(/^man$/), "men" ],
|
|
[(/^(child)$/), "$1ren" ],
|
|
[(/s$/i), "s" ],
|
|
[(/$/), "s" ]
|
|
],
|
|
|
|
/**
|
|
* @private
|
|
* The set of registered singular matchers. Each item in the array should contain two items - the first must be a
|
|
* regular expression that matches the plural form of a word, the second must be a String that replaces the
|
|
* matched part of the regular expression. This is managed by the {@link #singular} method.
|
|
* @property {Array} singulars
|
|
*/
|
|
singulars: [
|
|
[(/(quiz)zes$/i), "$1" ],
|
|
[(/(matr)ices$/i), "$1ix" ],
|
|
[(/(vert|ind)ices$/i), "$1ex" ],
|
|
[(/^(ox)en/i), "$1" ],
|
|
[(/(alias|status)es$/i), "$1" ],
|
|
[(/(octop|vir)i$/i), "$1us" ],
|
|
[(/(cris|ax|test)es$/i), "$1is" ],
|
|
[(/(shoe)s$/i), "$1" ],
|
|
[(/(o)es$/i), "$1" ],
|
|
[(/(bus)es$/i), "$1" ],
|
|
[(/([m|l])ice$/i), "$1ouse" ],
|
|
[(/(x|ch|ss|sh)es$/i), "$1" ],
|
|
[(/(m)ovies$/i), "$1ovie" ],
|
|
[(/(s)eries$/i), "$1eries"],
|
|
[(/([^aeiouy]|qu)ies$/i), "$1y" ],
|
|
[(/([lr])ves$/i), "$1f" ],
|
|
[(/(tive)s$/i), "$1" ],
|
|
[(/(hive)s$/i), "$1" ],
|
|
[(/([^f])ves$/i), "$1fe" ],
|
|
[(/(^analy)ses$/i), "$1sis" ],
|
|
[(/((a)naly|(b)a|(d)iagno|(p)arenthe|(p)rogno|(s)ynop|(t)he)ses$/i), "$1$2sis"],
|
|
[(/([ti])a$/i), "$1um" ],
|
|
[(/(n)ews$/i), "$1ews" ],
|
|
[(/people$/i), "person" ],
|
|
[(/s$/i), "" ]
|
|
],
|
|
|
|
/**
|
|
* @private
|
|
* The registered uncountable words
|
|
* @property {String[]} uncountable
|
|
*/
|
|
uncountable: [
|
|
"sheep",
|
|
"fish",
|
|
"series",
|
|
"species",
|
|
"money",
|
|
"rice",
|
|
"information",
|
|
"equipment",
|
|
"grass",
|
|
"mud",
|
|
"offspring",
|
|
"deer",
|
|
"means"
|
|
],
|
|
|
|
/**
|
|
* Adds a new singularization rule to the Inflector. See the intro docs for more information
|
|
* @param {RegExp} matcher The matcher regex
|
|
* @param {String} replacer The replacement string, which can reference matches from the matcher argument
|
|
*/
|
|
singular: function(matcher, replacer) {
|
|
this.singulars.unshift([matcher, replacer]);
|
|
},
|
|
|
|
/**
|
|
* Adds a new pluralization rule to the Inflector. See the intro docs for more information
|
|
* @param {RegExp} matcher The matcher regex
|
|
* @param {String} replacer The replacement string, which can reference matches from the matcher argument
|
|
*/
|
|
plural: function(matcher, replacer) {
|
|
this.plurals.unshift([matcher, replacer]);
|
|
},
|
|
|
|
/**
|
|
* Removes all registered singularization rules
|
|
*/
|
|
clearSingulars: function() {
|
|
this.singulars = [];
|
|
},
|
|
|
|
/**
|
|
* Removes all registered pluralization rules
|
|
*/
|
|
clearPlurals: function() {
|
|
this.plurals = [];
|
|
},
|
|
|
|
/**
|
|
* Returns true if the given word is transnumeral (the word is its own singular and plural form - e.g. sheep, fish)
|
|
* @param {String} word The word to test
|
|
* @return {Boolean} True if the word is transnumeral
|
|
*/
|
|
isTransnumeral: function(word) {
|
|
return Ext.Array.indexOf(this.uncountable, word) != -1;
|
|
},
|
|
|
|
/**
|
|
* Returns the pluralized form of a word (e.g. Ext.util.Inflector.pluralize('word') returns 'words')
|
|
* @param {String} word The word to pluralize
|
|
* @return {String} The pluralized form of the word
|
|
*/
|
|
pluralize: function(word) {
|
|
if (this.isTransnumeral(word)) {
|
|
return word;
|
|
}
|
|
|
|
var plurals = this.plurals,
|
|
length = plurals.length,
|
|
tuple, regex, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
tuple = plurals[i];
|
|
regex = tuple[0];
|
|
|
|
if (regex == word || (regex.test && regex.test(word))) {
|
|
return word.replace(regex, tuple[1]);
|
|
}
|
|
}
|
|
|
|
return word;
|
|
},
|
|
|
|
/**
|
|
* Returns the singularized form of a word (e.g. Ext.util.Inflector.singularize('words') returns 'word')
|
|
* @param {String} word The word to singularize
|
|
* @return {String} The singularized form of the word
|
|
*/
|
|
singularize: function(word) {
|
|
if (this.isTransnumeral(word)) {
|
|
return word;
|
|
}
|
|
|
|
var singulars = this.singulars,
|
|
length = singulars.length,
|
|
tuple, regex, i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
tuple = singulars[i];
|
|
regex = tuple[0];
|
|
|
|
if (regex == word || (regex.test && regex.test(word))) {
|
|
return word.replace(regex, tuple[1]);
|
|
}
|
|
}
|
|
|
|
return word;
|
|
},
|
|
|
|
/**
|
|
* Returns the correct {@link Ext.data.Model Model} name for a given string. Mostly used internally by the data
|
|
* package
|
|
* @param {String} word The word to classify
|
|
* @return {String} The classified version of the word
|
|
*/
|
|
classify: function(word) {
|
|
return Ext.String.capitalize(this.singularize(word));
|
|
},
|
|
|
|
/**
|
|
* Ordinalizes a given number by adding a prefix such as 'st', 'nd', 'rd' or 'th' based on the last digit of the
|
|
* number. 21 -> 21st, 22 -> 22nd, 23 -> 23rd, 24 -> 24th etc
|
|
* @param {Number} number The number to ordinalize
|
|
* @return {String} The ordinalized number
|
|
*/
|
|
ordinalize: function(number) {
|
|
var parsed = parseInt(number, 10),
|
|
mod10 = parsed % 10,
|
|
mod100 = parsed % 100;
|
|
|
|
//11 through 13 are a special case
|
|
if (11 <= mod100 && mod100 <= 13) {
|
|
return number + "th";
|
|
} else {
|
|
switch(mod10) {
|
|
case 1 : return number + "st";
|
|
case 2 : return number + "nd";
|
|
case 3 : return number + "rd";
|
|
default: return number + "th";
|
|
}
|
|
}
|
|
}
|
|
}, function() {
|
|
//aside from the rules above, there are a number of words that have irregular pluralization so we add them here
|
|
var irregulars = {
|
|
alumnus: 'alumni',
|
|
cactus : 'cacti',
|
|
focus : 'foci',
|
|
nucleus: 'nuclei',
|
|
radius: 'radii',
|
|
stimulus: 'stimuli',
|
|
ellipsis: 'ellipses',
|
|
paralysis: 'paralyses',
|
|
oasis: 'oases',
|
|
appendix: 'appendices',
|
|
index: 'indexes',
|
|
beau: 'beaux',
|
|
bureau: 'bureaux',
|
|
tableau: 'tableaux',
|
|
woman: 'women',
|
|
child: 'children',
|
|
man: 'men',
|
|
corpus: 'corpora',
|
|
criterion: 'criteria',
|
|
curriculum: 'curricula',
|
|
genus: 'genera',
|
|
memorandum: 'memoranda',
|
|
phenomenon: 'phenomena',
|
|
foot: 'feet',
|
|
goose: 'geese',
|
|
tooth: 'teeth',
|
|
antenna: 'antennae',
|
|
formula: 'formulae',
|
|
nebula: 'nebulae',
|
|
vertebra: 'vertebrae',
|
|
vita: 'vitae'
|
|
},
|
|
singular;
|
|
|
|
for (singular in irregulars) {
|
|
this.plural(singular, irregulars[singular]);
|
|
this.singular(irregulars[singular], singular);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* @class Ext.data.association.HasMany
|
|
*
|
|
* <p>Represents a one-to-many relationship between two models. Usually created indirectly via a model definition:</p>
|
|
*
|
|
<pre><code>
|
|
Ext.define('Product', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
{name: 'id', type: 'int'},
|
|
{name: 'user_id', type: 'int'},
|
|
{name: 'name', type: 'string'}
|
|
]
|
|
});
|
|
|
|
Ext.define('User', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
{name: 'id', type: 'int'},
|
|
{name: 'name', type: 'string'}
|
|
],
|
|
// we can use the hasMany shortcut on the model to create a hasMany association
|
|
hasMany: {model: 'Product', name: 'products'}
|
|
});
|
|
</code></pre>
|
|
*
|
|
* <p>Above we created Product and User models, and linked them by saying that a User hasMany Products. This gives
|
|
* us a new function on every User instance, in this case the function is called 'products' because that is the name
|
|
* we specified in the association configuration above.</p>
|
|
*
|
|
* <p>This new function returns a specialized {@link Ext.data.Store Store} which is automatically filtered to load
|
|
* only Products for the given model instance:</p>
|
|
*
|
|
<pre><code>
|
|
//first, we load up a User with id of 1
|
|
var user = Ext.create('User', {id: 1, name: 'Ed'});
|
|
|
|
//the user.products function was created automatically by the association and returns a {@link Ext.data.Store Store}
|
|
//the created store is automatically scoped to the set of Products for the User with id of 1
|
|
var products = user.products();
|
|
|
|
//we still have all of the usual Store functions, for example it's easy to add a Product for this User
|
|
products.add({
|
|
name: 'Another Product'
|
|
});
|
|
|
|
//saves the changes to the store - this automatically sets the new Product's user_id to 1 before saving
|
|
products.sync();
|
|
</code></pre>
|
|
*
|
|
* <p>The new Store is only instantiated the first time you call products() to conserve memory and processing time,
|
|
* though calling products() a second time returns the same store instance.</p>
|
|
*
|
|
* <p><u>Custom filtering</u></p>
|
|
*
|
|
* <p>The Store is automatically furnished with a filter - by default this filter tells the store to only return
|
|
* records where the associated model's foreign key matches the owner model's primary key. For example, if a User
|
|
* with ID = 100 hasMany Products, the filter loads only Products with user_id == 100.</p>
|
|
*
|
|
* <p>Sometimes we want to filter by another field - for example in the case of a Twitter search application we may
|
|
* have models for Search and Tweet:</p>
|
|
*
|
|
<pre><code>
|
|
Ext.define('Search', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
'id', 'query'
|
|
],
|
|
|
|
hasMany: {
|
|
model: 'Tweet',
|
|
name : 'tweets',
|
|
filterProperty: 'query'
|
|
}
|
|
});
|
|
|
|
Ext.define('Tweet', {
|
|
extend: 'Ext.data.Model',
|
|
fields: [
|
|
'id', 'text', 'from_user'
|
|
]
|
|
});
|
|
|
|
//returns a Store filtered by the filterProperty
|
|
var store = new Search({query: 'Sencha Touch'}).tweets();
|
|
</code></pre>
|
|
*
|
|
* <p>The tweets association above is filtered by the query property by setting the {@link #filterProperty}, and is
|
|
* equivalent to this:</p>
|
|
*
|
|
<pre><code>
|
|
var store = Ext.create('Ext.data.Store', {
|
|
model: 'Tweet',
|
|
filters: [
|
|
{
|
|
property: 'query',
|
|
value : 'Sencha Touch'
|
|
}
|
|
]
|
|
});
|
|
</code></pre>
|
|
*/
|
|
Ext.define('Ext.data.association.HasMany', {
|
|
extend: Ext.data.association.Association ,
|
|
alternateClassName: 'Ext.data.HasManyAssociation',
|
|
|
|
|
|
alias: 'association.hasmany',
|
|
|
|
/**
|
|
* @cfg {String} foreignKey The name of the foreign key on the associated model that links it to the owner
|
|
* model. Defaults to the lowercased name of the owner model plus "_id", e.g. an association with a where a
|
|
* model called Group hasMany Users would create 'group_id' as the foreign key. When the remote store is loaded,
|
|
* the store is automatically filtered so that only records with a matching foreign key are included in the
|
|
* resulting child store. This can be overridden by specifying the {@link #filterProperty}.
|
|
* <pre><code>
|
|
Ext.define('Group', {
|
|
extend: 'Ext.data.Model',
|
|
fields: ['id', 'name'],
|
|
hasMany: 'User'
|
|
});
|
|
|
|
Ext.define('User', {
|
|
extend: 'Ext.data.Model',
|
|
fields: ['id', 'name', 'group_id'], // refers to the id of the group that this user belongs to
|
|
belongsTo: 'Group'
|
|
});
|
|
* </code></pre>
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} name The name of the function to create on the owner model to retrieve the child store.
|
|
* If not specified, the pluralized name of the child model is used.
|
|
* <pre><code>
|
|
// This will create a users() method on any Group model instance
|
|
Ext.define('Group', {
|
|
extend: 'Ext.data.Model',
|
|
fields: ['id', 'name'],
|
|
hasMany: 'User'
|
|
});
|
|
var group = new Group();
|
|
console.log(group.users());
|
|
|
|
// The method to retrieve the users will now be getUserList
|
|
Ext.define('Group', {
|
|
extend: 'Ext.data.Model',
|
|
fields: ['id', 'name'],
|
|
hasMany: {model: 'User', name: 'getUserList'}
|
|
});
|
|
var group = new Group();
|
|
console.log(group.getUserList());
|
|
* </code></pre>
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} storeConfig Optional configuration object that will be passed to the generated Store. Defaults to
|
|
* undefined.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} filterProperty Optionally overrides the default filter that is set up on the associated Store. If
|
|
* this is not set, a filter is automatically created which filters the association based on the configured
|
|
* {@link #foreignKey}. See intro docs for more details. Defaults to undefined
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} autoLoad True to automatically load the related store from a remote source when instantiated.
|
|
* Defaults to <tt>false</tt>.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} type The type configuration can be used when creating associations using a configuration object.
|
|
* Use 'hasMany' to create a HasMany association
|
|
* <pre><code>
|
|
associations: [{
|
|
type: 'hasMany',
|
|
model: 'User'
|
|
}]
|
|
* </code></pre>
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
ownerProto,
|
|
name;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.name = me.name || Ext.util.Inflector.pluralize(me.associatedName.toLowerCase());
|
|
|
|
ownerProto = me.ownerModel.prototype;
|
|
name = me.name;
|
|
|
|
Ext.applyIf(me, {
|
|
storeName : name + "Store",
|
|
foreignKey: me.ownerName.toLowerCase() + "_id"
|
|
});
|
|
|
|
ownerProto[name] = me.createStore();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates a function that returns an Ext.data.Store which is configured to load a set of data filtered
|
|
* by the owner model's primary key - e.g. in a hasMany association where Group hasMany Users, this function
|
|
* returns a Store configured to return the filtered set of a single Group's Users.
|
|
* @return {Function} The store-generating function
|
|
*/
|
|
createStore: function() {
|
|
var that = this,
|
|
associatedModel = that.associatedModel,
|
|
storeName = that.storeName,
|
|
foreignKey = that.foreignKey,
|
|
primaryKey = that.primaryKey,
|
|
filterProperty = that.filterProperty,
|
|
autoLoad = that.autoLoad,
|
|
storeConfig = that.storeConfig || {};
|
|
|
|
return function() {
|
|
var me = this,
|
|
config, filter,
|
|
modelDefaults = {};
|
|
|
|
if (me[storeName] === undefined) {
|
|
if (filterProperty) {
|
|
filter = {
|
|
property : filterProperty,
|
|
value : me.get(filterProperty),
|
|
exactMatch: true
|
|
};
|
|
} else {
|
|
filter = {
|
|
property : foreignKey,
|
|
value : me.get(primaryKey),
|
|
exactMatch: true
|
|
};
|
|
}
|
|
|
|
modelDefaults[foreignKey] = me.get(primaryKey);
|
|
|
|
config = Ext.apply({}, storeConfig, {
|
|
model : associatedModel,
|
|
filters : [filter],
|
|
remoteFilter : false,
|
|
modelDefaults: modelDefaults,
|
|
disableMetaChangeEvent: true
|
|
});
|
|
|
|
me[storeName] = Ext.data.AbstractStore.create(config);
|
|
if (autoLoad) {
|
|
me[storeName].load();
|
|
}
|
|
}
|
|
|
|
return me[storeName];
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Read associated data
|
|
* @private
|
|
* @param {Ext.data.Model} record The record we're writing to
|
|
* @param {Ext.data.reader.Reader} reader The reader for the associated model
|
|
* @param {Object} associationData The raw associated data
|
|
*/
|
|
read: function(record, reader, associationData){
|
|
var store = record[this.name](),
|
|
inverse,
|
|
items, iLen, i;
|
|
|
|
store.add(reader.read(associationData).records);
|
|
|
|
//now that we've added the related records to the hasMany association, set the inverse belongsTo
|
|
//association on each of them if it exists
|
|
inverse = this.associatedModel.prototype.associations.findBy(function(assoc){
|
|
return assoc.type === 'belongsTo' && assoc.associatedName === record.$className;
|
|
});
|
|
|
|
//if the inverse association was found, set it now on each record we've just created
|
|
if (inverse) {
|
|
items = store.data.items;
|
|
iLen = items.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
items[i][inverse.instanceName] = record;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.data.association.HasOne
|
|
*
|
|
* Represents a one to one association with another model. The owner model is expected to have
|
|
* a foreign key which references the primary key of the associated model:
|
|
*
|
|
* Ext.define('Address', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* { name: 'id', type: 'int' },
|
|
* { name: 'number', type: 'string' },
|
|
* { name: 'street', type: 'string' },
|
|
* { name: 'city', type: 'string' },
|
|
* { name: 'zip', type: 'string' },
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.define('Person', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* { name: 'id', type: 'int' },
|
|
* { name: 'name', type: 'string' },
|
|
* { name: 'address_id', type: 'int'}
|
|
* ],
|
|
* // we can use the hasOne shortcut on the model to create a hasOne association
|
|
* associations: [{ type: 'hasOne', model: 'Address' }]
|
|
* });
|
|
*
|
|
* In the example above we have created models for People and Addresses, and linked them together
|
|
* by saying that each Person has a single Address. This automatically links each Person to an Address
|
|
* based on the Persons address_id, and provides new functions on the Person model:
|
|
*
|
|
* ## Generated getter function
|
|
*
|
|
* The first function that is added to the owner model is a getter function:
|
|
*
|
|
* var person = new Person({
|
|
* id: 100,
|
|
* address_id: 20,
|
|
* name: 'John Smith'
|
|
* });
|
|
*
|
|
* person.getAddress(function(address, operation) {
|
|
* // do something with the address object
|
|
* alert(address.get('id')); // alerts 20
|
|
* }, this);
|
|
*
|
|
* The getAddress function was created on the Person model when we defined the association. This uses the
|
|
* Persons configured {@link Ext.data.proxy.Proxy proxy} to load the Address asynchronously, calling the provided
|
|
* callback when it has loaded.
|
|
*
|
|
* The new getAddress function will also accept an object containing success, failure and callback properties
|
|
* - callback will always be called, success will only be called if the associated model was loaded successfully
|
|
* and failure will only be called if the associatied model could not be loaded:
|
|
*
|
|
* person.getAddress({
|
|
* reload: true, // force a reload if the owner model is already cached
|
|
* callback: function(address, operation) {}, // a function that will always be called
|
|
* success : function(address, operation) {}, // a function that will only be called if the load succeeded
|
|
* failure : function(address, operation) {}, // a function that will only be called if the load did not succeed
|
|
* scope : this // optionally pass in a scope object to execute the callbacks in
|
|
* });
|
|
*
|
|
* In each case above the callbacks are called with two arguments - the associated model instance and the
|
|
* {@link Ext.data.Operation operation} object that was executed to load that instance. The Operation object is
|
|
* useful when the instance could not be loaded.
|
|
*
|
|
* Once the getter has been called on the model, it will be cached if the getter is called a second time. To
|
|
* force the model to reload, specify reload: true in the options object.
|
|
*
|
|
* ## Generated setter function
|
|
*
|
|
* The second generated function sets the associated model instance - if only a single argument is passed to
|
|
* the setter then the following two calls are identical:
|
|
*
|
|
* // this call...
|
|
* person.setAddress(10);
|
|
*
|
|
* // is equivalent to this call:
|
|
* person.set('address_id', 10);
|
|
*
|
|
* An instance of the owner model can also be passed as a parameter.
|
|
*
|
|
* If we pass in a second argument, the model will be automatically saved and the second argument passed to
|
|
* the owner model's {@link Ext.data.Model#save save} method:
|
|
*
|
|
* person.setAddress(10, function(address, operation) {
|
|
* // the address has been saved
|
|
* alert(address.get('address_id')); //now alerts 10
|
|
* });
|
|
*
|
|
* //alternative syntax:
|
|
* person.setAddress(10, {
|
|
* callback: function(address, operation), // a function that will always be called
|
|
* success : function(address, operation), // a function that will only be called if the load succeeded
|
|
* failure : function(address, operation), // a function that will only be called if the load did not succeed
|
|
* scope : this //optionally pass in a scope object to execute the callbacks in
|
|
* })
|
|
*
|
|
* ## Customisation
|
|
*
|
|
* Associations reflect on the models they are linking to automatically set up properties such as the
|
|
* {@link #primaryKey} and {@link #foreignKey}. These can alternatively be specified:
|
|
*
|
|
* Ext.define('Person', {
|
|
* fields: [...],
|
|
*
|
|
* associations: [
|
|
* { type: 'hasOne', model: 'Address', primaryKey: 'unique_id', foreignKey: 'addr_id' }
|
|
* ]
|
|
* });
|
|
*
|
|
* Here we replaced the default primary key (defaults to 'id') and foreign key (calculated as 'address_id')
|
|
* with our own settings. Usually this will not be needed.
|
|
*/
|
|
Ext.define('Ext.data.association.HasOne', {
|
|
extend: Ext.data.association.Association ,
|
|
alternateClassName: 'Ext.data.HasOneAssociation',
|
|
|
|
alias: 'association.hasone',
|
|
|
|
/**
|
|
* @cfg {String} foreignKey The name of the foreign key on the owner model that links it to the associated
|
|
* model. Defaults to the lowercased name of the associated model plus "_id", e.g. an association with a
|
|
* model called Person would set up a address_id foreign key.
|
|
*
|
|
* Ext.define('Person', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'address_id'], // refers to the id of the address object
|
|
* hasOne: 'Address'
|
|
* });
|
|
*
|
|
* Ext.define('Address', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'number', 'street', 'city', 'zip'],
|
|
* belongsTo: 'Person'
|
|
* });
|
|
* var Person = new Person({
|
|
* id: 1,
|
|
* name: 'John Smith',
|
|
* address_id: 13
|
|
* }, 1);
|
|
* person.getAddress(); // Will make a call to the server asking for address_id 13
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} getterName The name of the getter function that will be added to the local model's prototype.
|
|
* Defaults to 'get' + the name of the foreign model, e.g. getAddress
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} setterName The name of the setter function that will be added to the local model's prototype.
|
|
* Defaults to 'set' + the name of the foreign model, e.g. setAddress
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} type The type configuration can be used when creating associations using a configuration object.
|
|
* Use 'hasOne' to create a HasOne association.
|
|
*
|
|
* associations: [{
|
|
* type: 'hasOne',
|
|
* model: 'Address'
|
|
* }]
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
|
|
var me = this,
|
|
ownerProto = me.ownerModel.prototype,
|
|
associatedName = me.associatedName,
|
|
getterName = me.getterName || 'get' + associatedName,
|
|
setterName = me.setterName || 'set' + associatedName;
|
|
|
|
Ext.applyIf(me, {
|
|
name : associatedName,
|
|
foreignKey : associatedName.toLowerCase() + "_id",
|
|
instanceName: associatedName + 'HasOneInstance',
|
|
associationKey: associatedName.toLowerCase()
|
|
});
|
|
|
|
ownerProto[getterName] = me.createGetter();
|
|
ownerProto[setterName] = me.createSetter();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a setter function to be placed on the owner model's prototype
|
|
* @return {Function} The setter function
|
|
*/
|
|
createSetter: function() {
|
|
var me = this,
|
|
foreignKey = me.foreignKey,
|
|
instanceName = me.instanceName;
|
|
|
|
//'this' refers to the Model instance inside this function
|
|
return function(value, options, scope) {
|
|
// If we were passed a record, the value to set is the key of that record.
|
|
var setByRecord = value && value.isModel,
|
|
valueToSet = setByRecord ? value.getId() : value;
|
|
|
|
// Setter was passed a record.
|
|
if (setByRecord) {
|
|
this[instanceName] = value;
|
|
}
|
|
|
|
// Otherwise, if the key of foreign record !== passed value, delete the cached foreign record
|
|
else if (this[instanceName] instanceof Ext.data.Model && !this.isEqual(this.get(foreignKey), valueToSet)) {
|
|
delete this[instanceName];
|
|
}
|
|
|
|
// Set the forign key value
|
|
this.set(foreignKey, valueToSet);
|
|
|
|
if (Ext.isFunction(options)) {
|
|
options = {
|
|
callback: options,
|
|
scope: scope || this
|
|
};
|
|
}
|
|
|
|
if (Ext.isObject(options)) {
|
|
return this.save(options);
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a getter function to be placed on the owner model's prototype. We cache the loaded instance
|
|
* the first time it is loaded so that subsequent calls to the getter always receive the same reference.
|
|
* @return {Function} The getter function
|
|
*/
|
|
createGetter: function() {
|
|
var me = this,
|
|
ownerModel = me.ownerModel,
|
|
associatedName = me.associatedName,
|
|
associatedModel = me.associatedModel,
|
|
foreignKey = me.foreignKey,
|
|
primaryKey = me.primaryKey,
|
|
instanceName = me.instanceName;
|
|
|
|
//'this' refers to the Model instance inside this function
|
|
return function(options, scope) {
|
|
options = options || {};
|
|
|
|
var model = this,
|
|
foreignKeyId = model.get(foreignKey),
|
|
success,
|
|
instance,
|
|
args;
|
|
|
|
if (options.reload === true || model[instanceName] === undefined) {
|
|
instance = Ext.ModelManager.create({}, associatedName);
|
|
instance.set(primaryKey, foreignKeyId);
|
|
|
|
if (typeof options == 'function') {
|
|
options = {
|
|
callback: options,
|
|
scope: scope || model
|
|
};
|
|
}
|
|
|
|
// Overwrite the success handler so we can assign the current instance
|
|
success = options.success;
|
|
options.success = function(rec){
|
|
model[instanceName] = rec;
|
|
if (success) {
|
|
success.apply(this, arguments);
|
|
}
|
|
};
|
|
|
|
associatedModel.load(foreignKeyId, options);
|
|
// assign temporarily while we wait for data to return
|
|
model[instanceName] = instance;
|
|
return instance;
|
|
} else {
|
|
instance = model[instanceName];
|
|
args = [instance];
|
|
scope = scope || options.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.
|
|
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;
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Read associated data
|
|
* @private
|
|
* @param {Ext.data.Model} record The record we're writing to
|
|
* @param {Ext.data.reader.Reader} reader The reader for the associated model
|
|
* @param {Object} associationData The raw associated data
|
|
*/
|
|
read: function(record, reader, associationData){
|
|
var inverse = this.associatedModel.prototype.associations.findBy(function(assoc){
|
|
return assoc.type === 'belongsTo' && assoc.associatedName === record.$className;
|
|
}), newRecord = reader.read([associationData]).records[0];
|
|
|
|
record[this.instanceName] = newRecord;
|
|
|
|
//if the inverse association was found, set it now on each record we've just created
|
|
if (inverse) {
|
|
newRecord[inverse.instanceName] = record;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* 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.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.data.proxy.WebStorage', {
|
|
extend: Ext.data.proxy.Client ,
|
|
alternateClassName: 'Ext.data.WebStorageProxy',
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {String} id
|
|
* The unique ID used as the key in which all record data are stored in the local storage object.
|
|
*/
|
|
id: undefined,
|
|
|
|
/**
|
|
* @cfg {Object} reader
|
|
* Not used by web storage proxy.
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} writer
|
|
* Not used by web storage proxy.
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* 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);
|
|
|
|
/**
|
|
* @property {Object} cache
|
|
* Cached map of records already retrieved by this Proxy. Ensures that the same instance is always retrieved.
|
|
*/
|
|
this.cache = {};
|
|
|
|
|
|
//if an id is not given, try to use the store's id instead
|
|
this.id = this.id || (this.store ? this.store.storeId : undefined);
|
|
|
|
|
|
this.initialize();
|
|
},
|
|
|
|
//inherit docs
|
|
create: function(operation, callback, scope) {
|
|
var me = this,
|
|
records = operation.records,
|
|
length = records.length,
|
|
ids = me.getIds(),
|
|
id, record, i;
|
|
|
|
operation.setStarted();
|
|
|
|
if(me.isHierarchical === undefined) {
|
|
// if the storage object does not yet contain any data, this is the first point at which we can determine whether or not this proxy deals with hierarchical data.
|
|
// it cannot be determined during initialization because the Model is not decorated with NodeInterface until it is used in a TreeStore
|
|
me.isHierarchical = !!records[0].isNode;
|
|
if(me.isHierarchical) {
|
|
me.getStorageObject().setItem(me.getTreeKey(), true);
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < length; i++) {
|
|
record = records[i];
|
|
|
|
if (record.phantom) {
|
|
record.phantom = false;
|
|
id = me.getNextId();
|
|
} else {
|
|
id = record.getId();
|
|
}
|
|
|
|
me.setRecord(record, id);
|
|
record.commit();
|
|
ids.push(id);
|
|
}
|
|
|
|
me.setIds(ids);
|
|
|
|
operation.setCompleted();
|
|
operation.setSuccessful();
|
|
|
|
if (typeof callback == 'function') {
|
|
callback.call(scope || me, operation);
|
|
}
|
|
},
|
|
|
|
//inherit docs
|
|
read: function(operation, callback, scope) {
|
|
//TODO: respect sorters, filters, start and limit options on the Operation
|
|
|
|
var me = this,
|
|
records = [],
|
|
i = 0,
|
|
success = true,
|
|
Model = me.model,
|
|
ids, length, record, data, id;
|
|
|
|
operation.setStarted();
|
|
|
|
if(me.isHierarchical) {
|
|
records = me.getTreeData();
|
|
} else {
|
|
ids = me.getIds();
|
|
length = ids.length;
|
|
id = operation.id;
|
|
//read a single record
|
|
if (id) {
|
|
data = me.getRecord(id);
|
|
if (data !== null) {
|
|
record = new Model(data, id, data);
|
|
}
|
|
|
|
if (record) {
|
|
records.push(record);
|
|
} else {
|
|
success = false;
|
|
}
|
|
} else {
|
|
for (; i < length; i++) {
|
|
id = ids[i];
|
|
data = me.getRecord(id);
|
|
records.push(new Model(data, id, data));
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
if(success) {
|
|
operation.setSuccessful();
|
|
}
|
|
operation.setCompleted();
|
|
|
|
operation.resultSet = Ext.create('Ext.data.ResultSet', {
|
|
records: records,
|
|
total : records.length,
|
|
loaded : true
|
|
});
|
|
|
|
if (typeof callback == 'function') {
|
|
callback.call(scope || me, operation);
|
|
}
|
|
},
|
|
|
|
//inherit docs
|
|
update: function(operation, callback, scope) {
|
|
var records = operation.records,
|
|
length = records.length,
|
|
ids = this.getIds(),
|
|
record, id, i;
|
|
|
|
operation.setStarted();
|
|
|
|
for (i = 0; i < length; i++) {
|
|
record = records[i];
|
|
this.setRecord(record);
|
|
record.commit();
|
|
|
|
//we need to update the set of ids here because it's possible that a non-phantom record was added
|
|
//to this proxy - in which case the record's id would never have been added via the normal 'create' call
|
|
id = record.getId();
|
|
if (id !== undefined && Ext.Array.indexOf(ids, id) == -1) {
|
|
ids.push(id);
|
|
}
|
|
}
|
|
this.setIds(ids);
|
|
|
|
operation.setCompleted();
|
|
operation.setSuccessful();
|
|
|
|
if (typeof callback == 'function') {
|
|
callback.call(scope || this, operation);
|
|
}
|
|
},
|
|
|
|
//inherit
|
|
destroy: function(operation, callback, scope) {
|
|
var me = this,
|
|
records = operation.records,
|
|
ids = me.getIds(),
|
|
idLength = ids.length,
|
|
newIds = [],
|
|
removedHash = {},
|
|
i = records.length,
|
|
id;
|
|
|
|
operation.setStarted();
|
|
|
|
for (; i--;) {
|
|
Ext.apply(removedHash, me.removeRecord(records[i]));
|
|
}
|
|
|
|
for(i = 0; i < idLength; i++) {
|
|
id = ids[i];
|
|
if(!removedHash[id]) {
|
|
newIds.push(id);
|
|
}
|
|
}
|
|
|
|
me.setIds(newIds);
|
|
|
|
operation.setCompleted();
|
|
operation.setSuccessful();
|
|
|
|
if (typeof callback == 'function') {
|
|
callback.call(scope || me, operation);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fetches record data from the Proxy by ID.
|
|
* @param {String} id The record's unique ID
|
|
* @return {Object} The record data
|
|
*/
|
|
getRecord: function(id) {
|
|
var me = this,
|
|
cache = me.cache,
|
|
data = !cache[id] ? Ext.decode(me.getStorageObject().getItem(me.getRecordKey(id))) : cache[id];
|
|
|
|
if(!data) {
|
|
return null;
|
|
}
|
|
|
|
cache[id] = data;
|
|
data[me.model.prototype.idProperty] = id;
|
|
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Saves the given record in the Proxy.
|
|
* @param {Ext.data.Model} record The model instance
|
|
* @param {String} [id] The id to save the record under (defaults to the value of the record's getId() function)
|
|
*/
|
|
setRecord: function(record, id) {
|
|
if (id) {
|
|
record.setId(id);
|
|
} else {
|
|
id = record.getId();
|
|
}
|
|
|
|
var me = this,
|
|
rawData = record.data,
|
|
data = {},
|
|
model = me.model,
|
|
fields = model.prototype.fields.items,
|
|
length = fields.length,
|
|
i = 0,
|
|
field, name, obj, key;
|
|
|
|
for (; i < length; i++) {
|
|
field = fields[i];
|
|
name = field.name;
|
|
|
|
if(field.persist) {
|
|
data[name] = rawData[name];
|
|
}
|
|
}
|
|
|
|
// no need to store the id in the data, since it is already stored in the record key
|
|
delete data[me.model.prototype.idProperty];
|
|
|
|
// if the record is a tree node and it's a direct child of the root node, do not store the parentId
|
|
if(record.isNode && record.get('depth') === 1) {
|
|
delete data.parentId;
|
|
}
|
|
|
|
obj = me.getStorageObject();
|
|
key = me.getRecordKey(id);
|
|
|
|
//keep the cache up to date
|
|
me.cache[id] = data;
|
|
|
|
//iPad bug requires that we remove the item before setting it
|
|
obj.removeItem(key);
|
|
obj.setItem(key, Ext.encode(data));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Physically removes a given record from the local storage and recursively removes children if the record is a tree node. Used internally by {@link #destroy}.
|
|
* @param {Ext.data.Model} record The record to remove
|
|
* @return {Object} a hash with the ids of the records that were removed as keys and the records that were removed as values
|
|
*/
|
|
removeRecord: function(record) {
|
|
var me = this,
|
|
id = record.getId(),
|
|
records = {},
|
|
i, childNodes;
|
|
|
|
records[id] = record;
|
|
me.getStorageObject().removeItem(me.getRecordKey(id));
|
|
delete me.cache[id];
|
|
|
|
if(record.childNodes) {
|
|
childNodes = record.childNodes;
|
|
for(i = childNodes.length; i--;) {
|
|
Ext.apply(records, me.removeRecord(childNodes[i]));
|
|
}
|
|
}
|
|
|
|
return records;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Given the id of a record, returns a unique string based on that id and the id of this proxy. This is used when
|
|
* storing data in the local storage object and should prevent naming collisions.
|
|
* @param {String/Number/Ext.data.Model} id The record id, or a Model instance
|
|
* @return {String} The unique key for this record
|
|
*/
|
|
getRecordKey: function(id) {
|
|
if (id.isModel) {
|
|
id = id.getId();
|
|
}
|
|
|
|
return Ext.String.format("{0}-{1}", this.id, id);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the unique key used to store the current record counter for this proxy. This is used internally when
|
|
* realizing models (creating them when they used to be phantoms), in order to give each model instance a unique id.
|
|
* @return {String} The counter key
|
|
*/
|
|
getRecordCounterKey: function() {
|
|
return Ext.String.format("{0}-counter", this.id);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the unique key used to store the tree indicator. This is used internally to determine if the stored data is hierarchical
|
|
* @return {String} The counter key
|
|
*/
|
|
getTreeKey: function() {
|
|
return Ext.String.format("{0}-tree", this.id);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the array of record IDs stored in this Proxy
|
|
* @return {Number[]} The record IDs. Each is cast as a Number
|
|
*/
|
|
getIds: function() {
|
|
var me = this,
|
|
ids = (me.getStorageObject().getItem(me.id) || "").split(","),
|
|
model = me.model,
|
|
length = ids.length,
|
|
isString = model.prototype.fields.get(model.prototype.idProperty).type.type === 'string',
|
|
i;
|
|
|
|
if (length == 1 && ids[0] === "") {
|
|
ids = [];
|
|
} else {
|
|
for (i = 0; i < length; i++) {
|
|
ids[i] = isString ? ids[i] : +ids[i];
|
|
}
|
|
}
|
|
|
|
return ids;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Saves the array of ids representing the set of all records in the Proxy
|
|
* @param {Number[]} ids The ids to set
|
|
*/
|
|
setIds: function(ids) {
|
|
var obj = this.getStorageObject(),
|
|
str = ids.join(",");
|
|
|
|
obj.removeItem(this.id);
|
|
|
|
if (!Ext.isEmpty(str)) {
|
|
obj.setItem(this.id, str);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the next numerical ID that can be used when realizing a model instance (see getRecordCounterKey).
|
|
* Increments the counter.
|
|
* @return {Number} The id
|
|
*/
|
|
getNextId: function() {
|
|
var me = this,
|
|
obj = me.getStorageObject(),
|
|
key = me.getRecordCounterKey(),
|
|
model = me.model,
|
|
isString = model.prototype.fields.get(model.prototype.idProperty).type.type === 'string',
|
|
id;
|
|
|
|
id = me.idGenerator.generate();
|
|
|
|
obj.setItem(key, id);
|
|
|
|
if(!isString) {
|
|
id = +id;
|
|
}
|
|
|
|
return id;
|
|
},
|
|
|
|
/**
|
|
* Gets tree data and transforms it from key value pairs into a hierarchical structure.
|
|
* @private
|
|
* @return {Ext.data.NodeInterface[]}
|
|
*/
|
|
getTreeData: function() {
|
|
var me = this,
|
|
ids = me.getIds(),
|
|
length = ids.length,
|
|
records = [],
|
|
recordHash = {},
|
|
root = [],
|
|
i = 0,
|
|
Model = me.model,
|
|
idProperty = Model.prototype.idProperty,
|
|
rootLength, record, parent, parentId, children, id;
|
|
|
|
for(; i < length; i++) {
|
|
id = ids[i];
|
|
// get the record for each id
|
|
record = me.getRecord(id);
|
|
// push the record into the records array
|
|
records.push(record);
|
|
// add the record to the record hash so it can be easily retrieved by id later
|
|
recordHash[id] = record;
|
|
if(!record.parentId) {
|
|
// push records that are at the root level (those with no parent id) into the "root" array
|
|
root.push(record);
|
|
}
|
|
}
|
|
|
|
rootLength = root.length;
|
|
|
|
// sort the records by parent id for greater efficiency, so that each parent record only has to be found once for all of its children
|
|
Ext.Array.sort(records, me.sortByParentId);
|
|
|
|
// append each record to its parent, starting after the root node(s), since root nodes do not need to be attached to a parent
|
|
for(i = rootLength; i < length; i++) {
|
|
record = records[i];
|
|
parentId = record.parentId;
|
|
if(!parent || parent[idProperty] !== parentId) {
|
|
// if this record has a different parent id from the previous record, we need to look up the parent by id.
|
|
parent = recordHash[parentId];
|
|
parent.children = children = [];
|
|
}
|
|
|
|
// push the record onto its parent's children array
|
|
children.push(record);
|
|
}
|
|
|
|
for(i = length; i--;) {
|
|
record = records[i];
|
|
if(!record.children && !record.leaf) {
|
|
// set non-leaf nodes with no children to loaded so the proxy won't try to dynamically load their contents when they are expanded
|
|
record.loaded = true;
|
|
}
|
|
}
|
|
|
|
// Create model instances out of all the "root-level" nodes.
|
|
for(i = rootLength; i--;) {
|
|
record = root[i];
|
|
root[i] = new Model(record, record[idProperty], record);
|
|
}
|
|
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Sorter function for sorting records by parentId
|
|
* @private
|
|
* @param {Object} node1
|
|
* @param {Object} node2
|
|
* @return {Number}
|
|
*/
|
|
sortByParentId: function(node1, node2) {
|
|
return (node1.parentId || 0) - (node2.parentId || 0);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets up the Proxy by claiming the key in the storage object that corresponds to the unique id of this Proxy. Called
|
|
* automatically by the constructor, this should not need to be called again unless {@link #clear} has been called.
|
|
*/
|
|
initialize: function() {
|
|
var me = this,
|
|
storageObject = me.getStorageObject(),
|
|
lastId = +storageObject.getItem(me.getRecordCounterKey());
|
|
|
|
storageObject.setItem(me.id, storageObject.getItem(me.id) || "");
|
|
if(storageObject.getItem(me.getTreeKey())) {
|
|
me.isHierarchical = true;
|
|
}
|
|
|
|
me.idGenerator = new Ext.data.SequentialIdGenerator({
|
|
seed: lastId ? lastId + 1 : 1
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Destroys all records stored in the proxy and removes all keys and values used to support the proxy from the
|
|
* storage object.
|
|
*/
|
|
clear: function() {
|
|
var me = this,
|
|
obj = me.getStorageObject(),
|
|
ids = me.getIds(),
|
|
len = ids.length,
|
|
i;
|
|
|
|
//remove all the records
|
|
for (i = 0; i < len; i++) {
|
|
obj.removeItem(me.getRecordKey(ids[i]));
|
|
}
|
|
|
|
//remove the supporting objects
|
|
obj.removeItem(me.getRecordCounterKey());
|
|
obj.removeItem(me.getTreeKey());
|
|
obj.removeItem(me.id);
|
|
|
|
// clear the cache
|
|
me.cache = {};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Abstract function which should return the storage object that data will be saved to. This must be implemented
|
|
* in each subclass.
|
|
* @return {Object} The storage object
|
|
*/
|
|
getStorageObject: function() {
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* The LocalStorageProxy uses the new HTML5 localStorage API to save {@link Ext.data.Model Model} data locally on the
|
|
* client browser. HTML5 localStorage is a key-value store (e.g. cannot save complex objects like JSON), so
|
|
* LocalStorageProxy automatically serializes and deserializes data when saving and retrieving it.
|
|
*
|
|
* localStorage is extremely useful for saving user-specific information without needing to build server-side
|
|
* infrastructure to support it. Let's imagine we're writing a Twitter search application and want to save the user's
|
|
* searches locally so they can easily perform a saved search again later. We'd start by creating a Search model:
|
|
*
|
|
* Ext.define('Search', {
|
|
* fields: ['id', 'query'],
|
|
* extend: 'Ext.data.Model',
|
|
* proxy: {
|
|
* type: 'localstorage',
|
|
* id : 'twitter-Searches'
|
|
* }
|
|
* });
|
|
*
|
|
* Our Search model contains just two fields - id and query - plus a Proxy definition. The only configuration we need to
|
|
* pass to the LocalStorage proxy is an {@link #id}. This is important as it separates the Model data in this Proxy from
|
|
* all others. The localStorage API puts all data into a single shared namespace, so by setting an id we enable
|
|
* LocalStorageProxy to manage the saved Search data.
|
|
*
|
|
* Saving our data into localStorage is easy and would usually be done with a {@link Ext.data.Store Store}:
|
|
*
|
|
* //our Store automatically picks up the LocalStorageProxy defined on the Search model
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: "Search"
|
|
* });
|
|
*
|
|
* //loads any existing Search data from localStorage
|
|
* store.load();
|
|
*
|
|
* //now add some Searches
|
|
* store.add({query: 'Sencha Touch'});
|
|
* store.add({query: 'Ext JS'});
|
|
*
|
|
* //finally, save our Search data to localStorage
|
|
* store.sync();
|
|
*
|
|
* The LocalStorageProxy automatically gives our new Searches an id when we call store.sync(). It encodes the Model data
|
|
* and places it into localStorage. We can also save directly to localStorage, bypassing the Store altogether:
|
|
*
|
|
* var search = Ext.create('Search', {query: 'Sencha Animator'});
|
|
*
|
|
* //uses the configured LocalStorageProxy to save the new Search to localStorage
|
|
* search.save();
|
|
*
|
|
* # Limitations
|
|
*
|
|
* If this proxy is used in a browser where local storage is not supported, the constructor will throw an error. A local
|
|
* storage proxy requires a unique ID which is used as a key in which all record data are stored in the local storage
|
|
* object.
|
|
*
|
|
* It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the
|
|
* attached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.
|
|
*/
|
|
Ext.define('Ext.data.proxy.LocalStorage', {
|
|
extend: Ext.data.proxy.WebStorage ,
|
|
alias: 'proxy.localstorage',
|
|
alternateClassName: 'Ext.data.LocalStorageProxy',
|
|
|
|
//inherit docs
|
|
getStorageObject: function() {
|
|
return window.localStorage;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* The Rest proxy is a specialization of the {@link Ext.data.proxy.Ajax AjaxProxy} which simply maps the four actions
|
|
* (create, read, update and destroy) to RESTful HTTP verbs. For example, let's set up a {@link Ext.data.Model Model}
|
|
* with an inline Rest proxy
|
|
*
|
|
* Ext.define('User', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['id', 'name', 'email'],
|
|
*
|
|
* proxy: {
|
|
* type: 'rest',
|
|
* url : '/users'
|
|
* }
|
|
* });
|
|
*
|
|
* Now we can create a new User instance and save it via the Rest proxy. Doing this will cause the Proxy to send a POST
|
|
* request to '/users':
|
|
*
|
|
* var user = Ext.create('User', {name: 'Ed Spencer', email: 'ed@sencha.com'});
|
|
*
|
|
* user.save(); //POST /users
|
|
*
|
|
* Let's expand this a little and provide a callback for the {@link Ext.data.Model#save} call to update the Model once
|
|
* it has been created. We'll assume the creation went successfully and that the server gave this user an ID of 123:
|
|
*
|
|
* user.save({
|
|
* success: function(user) {
|
|
* user.set('name', 'Khan Noonien Singh');
|
|
*
|
|
* user.save(); //PUT /users/123
|
|
* }
|
|
* });
|
|
*
|
|
* Now that we're no longer creating a new Model instance, the request method is changed to an HTTP PUT, targeting the
|
|
* relevant url for that user. Now let's delete this user, which will use the DELETE method:
|
|
*
|
|
* user.destroy(); //DELETE /users/123
|
|
*
|
|
* Finally, when we perform a load of a Model or Store, Rest proxy will use the GET method:
|
|
*
|
|
* //1. Load via Store
|
|
*
|
|
* //the Store automatically picks up the Proxy from the User model
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* model: 'User'
|
|
* });
|
|
*
|
|
* store.load(); //GET /users
|
|
*
|
|
* //2. Load directly from the Model
|
|
*
|
|
* //GET /users/123
|
|
* Ext.ModelManager.getModel('User').load(123, {
|
|
* success: function(user) {
|
|
* console.log(user.getId()); //outputs 123
|
|
* }
|
|
* });
|
|
*
|
|
* # Url generation
|
|
*
|
|
* The Rest proxy is able to automatically generate the urls above based on two configuration options - {@link #appendId} and
|
|
* {@link #format}. If appendId is true (it is by default) then Rest proxy will automatically append the ID of the Model
|
|
* instance in question to the configured url, resulting in the '/users/123' that we saw above.
|
|
*
|
|
* If the request is not for a specific Model instance (e.g. loading a Store), the url is not appended with an id.
|
|
* The Rest proxy will automatically insert a '/' before the ID if one is not already present.
|
|
*
|
|
* new Ext.data.proxy.Rest({
|
|
* url: '/users',
|
|
* appendId: true //default
|
|
* });
|
|
*
|
|
* // Collection url: /users
|
|
* // Instance url : /users/123
|
|
*
|
|
* The Rest proxy can also optionally append a format string to the end of any generated url:
|
|
*
|
|
* new Ext.data.proxy.Rest({
|
|
* url: '/users',
|
|
* format: 'json'
|
|
* });
|
|
*
|
|
* // Collection url: /users.json
|
|
* // Instance url : /users/123.json
|
|
*
|
|
* If further customization is needed, simply implement the {@link #buildUrl} method and add your custom generated url
|
|
* onto the {@link Ext.data.Request Request} object that is passed to buildUrl. See [Rest proxy's implementation][1] for
|
|
* an example of how to achieve this.
|
|
*
|
|
* Note that Rest proxy inherits from {@link Ext.data.proxy.Ajax AjaxProxy}, which already injects all of the sorter,
|
|
* filter, group and paging options into the generated url. See the {@link Ext.data.proxy.Ajax AjaxProxy docs} for more
|
|
* details.
|
|
*
|
|
* [1]: source/Rest.html#Ext-data-proxy-Rest-method-buildUrl
|
|
*/
|
|
Ext.define('Ext.data.proxy.Rest', {
|
|
extend: Ext.data.proxy.Ajax ,
|
|
alternateClassName: 'Ext.data.RestProxy',
|
|
alias : 'proxy.rest',
|
|
|
|
/**
|
|
* @property {Object} actionMethods
|
|
* Mapping of action name to HTTP request method. These default to RESTful conventions for the 'create', 'read',
|
|
* 'update' and 'destroy' actions (which map to 'POST', 'GET', 'PUT' and 'DELETE' respectively). This object
|
|
* should not be changed except globally via {@link Ext#override Ext.override} - the {@link #getMethod} function
|
|
* can be overridden instead.
|
|
*/
|
|
actionMethods: {
|
|
create : 'POST',
|
|
read : 'GET',
|
|
update : 'PUT',
|
|
destroy: 'DELETE'
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean} appendId
|
|
* True to automatically append the ID of a Model instance when performing a request based on that single instance.
|
|
* See Rest proxy intro docs for more details. Defaults to true.
|
|
*/
|
|
appendId: true,
|
|
|
|
/**
|
|
* @cfg {String} format
|
|
* Optional data format to send to the server when making any request (e.g. 'json'). See the Rest proxy intro docs
|
|
* for full details. Defaults to undefined.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} batchActions
|
|
* True to batch actions of a particular type when synchronizing the store. Defaults to false.
|
|
*/
|
|
batchActions: false,
|
|
|
|
/**
|
|
* Specialized version of buildUrl that incorporates the {@link #appendId} and {@link #format} options into the
|
|
* generated url. Override this to provide further customizations, but remember to call the superclass buildUrl so
|
|
* that additional parameters like the cache buster string are appended.
|
|
* @param {Object} request
|
|
*/
|
|
buildUrl: function(request) {
|
|
var me = this,
|
|
operation = request.operation,
|
|
records = operation.records || [],
|
|
record = records[0],
|
|
format = me.format,
|
|
url = me.getUrl(request),
|
|
id = record ? record.getId() : operation.id;
|
|
|
|
if (me.appendId && me.isValidId(id)) {
|
|
if (!url.match(/\/$/)) {
|
|
url += '/';
|
|
}
|
|
|
|
url += id;
|
|
}
|
|
|
|
if (format) {
|
|
if (!url.match(/\.$/)) {
|
|
url += '.';
|
|
}
|
|
|
|
url += format;
|
|
}
|
|
|
|
request.url = url;
|
|
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
isValidId: function(id) {
|
|
return id || id === 0;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* Proxy which uses HTML5 session storage as its data storage/retrieval mechanism. If this proxy is used in a browser
|
|
* where session storage is not supported, the constructor will throw an error. A session storage proxy requires a
|
|
* unique ID which is used as a key in which all record data are stored in the session storage object.
|
|
*
|
|
* It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the
|
|
* attached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.
|
|
*
|
|
* Proxies are almost always used with a {@link Ext.data.Store store}:
|
|
*
|
|
* new Ext.data.Store({
|
|
* proxy: {
|
|
* type: 'sessionstorage',
|
|
* id : 'myProxyKey'
|
|
* }
|
|
* });
|
|
*
|
|
* Alternatively you can instantiate the Proxy directly:
|
|
*
|
|
* new Ext.data.proxy.SessionStorage({
|
|
* id : 'myOtherProxyKey'
|
|
* });
|
|
*
|
|
* Note that session storage is different to local storage (see {@link Ext.data.proxy.LocalStorage}) - if a browser
|
|
* session is ended (e.g. by closing the browser) then all data in a SessionStorageProxy are lost. Browser restarts
|
|
* don't affect the {@link Ext.data.proxy.LocalStorage} - the data are preserved.
|
|
*/
|
|
Ext.define('Ext.data.proxy.SessionStorage', {
|
|
extend: Ext.data.proxy.WebStorage ,
|
|
alias: 'proxy.sessionstorage',
|
|
alternateClassName: 'Ext.data.SessionStorageProxy',
|
|
|
|
//inherit docs
|
|
getStorageObject: function() {
|
|
return window.sessionStorage;
|
|
}
|
|
});
|
|
|
|
/*
|
|
* This is a derivative of the similarly named class in the YUI Library.
|
|
* The original license:
|
|
* Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
* Code licensed under the BSD License:
|
|
* http://developer.yahoo.net/yui/license.txt
|
|
*/
|
|
|
|
|
|
/**
|
|
* A DragDrop implementation that does not move, but can be a drop
|
|
* target. You would get the same result by simply omitting implementation
|
|
* for the event callbacks, but this way we reduce the processing cost of the
|
|
* event listener and the callbacks.
|
|
*/
|
|
Ext.define('Ext.dd.DDTarget', {
|
|
extend: Ext.dd.DragDrop ,
|
|
|
|
/**
|
|
* Creates new DDTarget.
|
|
* @param {String} id the id of the element that is a drop target
|
|
* @param {String} sGroup the group of related DragDrop objects
|
|
* @param {Object} config an object containing configurable attributes.
|
|
* Valid properties for DDTarget in addition to those in DragDrop: none.
|
|
*/
|
|
constructor: function(id, sGroup, config) {
|
|
if (id) {
|
|
this.initTarget(id, sGroup, config);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
getDragEl: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
isValidHandleChild: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
startDrag: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
endDrag: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onDrag: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onDragDrop: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onDragEnter: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onDragOut: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onDragOver: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onInvalidDrop: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onMouseDown: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
onMouseUp: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
setXConstraint: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
setYConstraint: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
resetConstraints: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
clearConstraints: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
clearTicks: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
setInitPosition: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
setDragElId: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
setHandleElId: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
setOuterHandleElId: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
addInvalidHandleClass: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
addInvalidHandleId: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
addInvalidHandleType: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
removeInvalidHandleClass: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
removeInvalidHandleId: Ext.emptyFn,
|
|
/**
|
|
* Overridden and disabled. A DDTarget does not support being dragged.
|
|
* @method
|
|
*/
|
|
removeInvalidHandleType: Ext.emptyFn,
|
|
|
|
toString: function() {
|
|
return ("DDTarget " + this.id);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A DragTracker listens for drag events on an Element and fires events at the start and end of the drag,
|
|
* as well as during the drag. This is useful for components such as {@link Ext.slider.Multi}, where there is
|
|
* an element that can be dragged around to change the Slider's value.
|
|
*
|
|
* DragTracker provides a series of template methods that should be overridden to provide functionality
|
|
* in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd.
|
|
* See {@link Ext.slider.Multi}'s initEvents function for an example implementation.
|
|
*/
|
|
Ext.define('Ext.dd.DragTracker', {
|
|
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} active
|
|
* Indicates whether the user is currently dragging this tracker.
|
|
* @readonly
|
|
*/
|
|
active: false,
|
|
|
|
/**
|
|
* @property {HTMLElement} dragTarget
|
|
* The element being dragged.
|
|
*
|
|
* Only valid during drag operations.
|
|
*
|
|
* If the {@link #delegate} option is used, this will be the delegate element which was mousedowned.
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} trackOver
|
|
* Set to true to fire mouseover and mouseout events when the mouse enters or leaves the target element.
|
|
*
|
|
* This is implicitly set when an {@link #overCls} is specified.
|
|
*
|
|
* If the {@link #delegate} option is used, these events fire only when a delegate element is entered of left.
|
|
*/
|
|
trackOver: false,
|
|
|
|
/**
|
|
* @cfg {String} overCls
|
|
* A CSS class to add to the DragTracker's target element when the element (or, if the {@link #delegate}
|
|
* option is used, when a delegate element) is mouseovered.
|
|
*
|
|
* If the {@link #delegate} option is used, these events fire only when a delegate element is entered of left.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.util.Region/Ext.Element} constrainTo
|
|
* A {@link Ext.util.Region Region} (Or an element from which a Region measurement will be read)
|
|
* which is used to constrain the result of the {@link #getOffset} call.
|
|
*
|
|
* This may be set any time during the DragTracker's lifecycle to set a dynamic constraining region.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} tolerance
|
|
* Number of pixels the drag target must be moved before dragging is
|
|
* considered to have started.
|
|
*/
|
|
tolerance: 5,
|
|
|
|
/**
|
|
* @cfg {Boolean/Number} autoStart
|
|
* Specify `true` to defer trigger start by 1000 ms.
|
|
* Specify a Number for the number of milliseconds to defer trigger start.
|
|
*/
|
|
autoStart: false,
|
|
|
|
/**
|
|
* @cfg {String} delegate
|
|
* A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the DragTracker's encapsulating
|
|
* Element which are the tracked elements. This limits tracking to only begin when the matching elements are mousedowned.
|
|
*
|
|
* This may also be a specific child element within the DragTracker's encapsulating element to use as the tracked element.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [preventDefault=true]
|
|
* Specify `false` to enable default actions on onMouseDown events.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [stopEvent=false]
|
|
* Specify `true` to stop the `mousedown` event from bubbling to outer listeners from the target element (or its delegates).
|
|
*/
|
|
|
|
constructor : function(config){
|
|
var me = this;
|
|
Ext.apply(me, config);
|
|
me.addEvents(
|
|
/**
|
|
* @event mouseover
|
|
* Fires when the mouse enters the DragTracker's target element (or if {@link #delegate} is
|
|
* used, when the mouse enters a delegate element).
|
|
*
|
|
* **Only available when {@link #trackOver} is `true`**
|
|
*
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
* @param {HTMLElement} target The element mouseovered.
|
|
*/
|
|
'mouseover',
|
|
|
|
/**
|
|
* @event mouseout
|
|
* Fires when the mouse exits the DragTracker's target element (or if {@link #delegate} is
|
|
* used, when the mouse exits a delegate element).
|
|
*
|
|
* **Only available when {@link #trackOver} is `true`**
|
|
*
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'mouseout',
|
|
|
|
/**
|
|
* @event mousedown
|
|
* Fires when the mouse button is pressed down, but before a drag operation begins. The
|
|
* drag operation begins after either the mouse has been moved by {@link #tolerance} pixels,
|
|
* or after the {@link #autoStart} timer fires.
|
|
*
|
|
* Return `false` to veto the drag operation.
|
|
*
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'mousedown',
|
|
|
|
/**
|
|
* @event mouseup
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'mouseup',
|
|
|
|
/**
|
|
* @event mousemove
|
|
* Fired when the mouse is moved. Returning false cancels the drag operation.
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'mousemove',
|
|
|
|
/**
|
|
* @event beforestart
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'beforedragstart',
|
|
|
|
/**
|
|
* @event dragstart
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'dragstart',
|
|
|
|
/**
|
|
* @event dragend
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'dragend',
|
|
|
|
/**
|
|
* @event drag
|
|
* @param {Object} this
|
|
* @param {Object} e event object
|
|
*/
|
|
'drag'
|
|
);
|
|
|
|
me.dragRegion = new Ext.util.Region(0,0,0,0);
|
|
|
|
if (me.el) {
|
|
me.initEl(me.el);
|
|
}
|
|
|
|
// Dont pass the config so that it is not applied to 'this' again
|
|
me.mixins.observable.constructor.call(me);
|
|
if (me.disabled) {
|
|
me.disable();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Initializes the DragTracker on a given element.
|
|
* @param {Ext.Element/HTMLElement} el The element
|
|
*/
|
|
initEl: function(el) {
|
|
var me = this;
|
|
|
|
me.el = Ext.get(el);
|
|
|
|
// The delegate option may also be an element on which to listen
|
|
me.handle = Ext.get(me.delegate);
|
|
|
|
// If delegate specified an actual element to listen on, we do not use the delegate listener option
|
|
me.delegate = me.handle ? undefined : me.delegate;
|
|
|
|
if (!me.handle) {
|
|
me.handle = me.el;
|
|
}
|
|
|
|
// Add a mousedown listener which reacts only on the elements targeted by the delegate config.
|
|
// We process mousedown to begin tracking.
|
|
me.handleListeners = {
|
|
scope: me,
|
|
delegate: me.delegate,
|
|
mousedown: me.onMouseDown
|
|
};
|
|
|
|
// If configured to do so, track mouse entry and exit into the target (or delegate).
|
|
// The mouseover and mouseout CANNOT be replaced with mouseenter and mouseleave
|
|
// because delegate cannot work with those pseudoevents. Entry/exit checking is done in the handler.
|
|
if (me.trackOver || me.overCls) {
|
|
Ext.apply(me.handleListeners, {
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut
|
|
});
|
|
}
|
|
me.mon(me.handle, me.handleListeners);
|
|
},
|
|
|
|
disable: function() {
|
|
this.disabled = true;
|
|
},
|
|
|
|
enable: function() {
|
|
this.disabled = false;
|
|
},
|
|
|
|
destroy : function() {
|
|
var me = this;
|
|
|
|
if (me.active) {
|
|
// endDrag has a mandatory event parameter
|
|
me.endDrag({});
|
|
}
|
|
me.clearListeners();
|
|
me.mun(me.handle, me.handleListeners);
|
|
me.el = me.handle = null;
|
|
},
|
|
|
|
// When the pointer enters a tracking element, fire a mouseover if the mouse entered from outside.
|
|
// This is mouseenter functionality, but we cannot use mouseenter because we are using "delegate" to filter mouse targets
|
|
onMouseOver: function(e, target) {
|
|
var me = this;
|
|
if (!me.disabled) {
|
|
if (Ext.EventManager.contains(e) || me.delegate) {
|
|
me.mouseIsOut = false;
|
|
if (me.overCls) {
|
|
me.el.addCls(me.overCls);
|
|
}
|
|
me.fireEvent('mouseover', me, e, me.delegate ? e.getTarget(me.delegate, target) : me.handle);
|
|
}
|
|
}
|
|
},
|
|
|
|
// When the pointer exits a tracking element, fire a mouseout.
|
|
// This is mouseleave functionality, but we cannot use mouseleave because we are using "delegate" to filter mouse targets
|
|
onMouseOut: function(e) {
|
|
var me = this;
|
|
|
|
if (me.mouseIsDown) {
|
|
me.mouseIsOut = true;
|
|
} else {
|
|
if (me.overCls) {
|
|
me.el.removeCls(me.overCls);
|
|
}
|
|
me.fireEvent('mouseout', me, e);
|
|
}
|
|
},
|
|
|
|
onMouseDown: function(e, target){
|
|
var me = this,
|
|
el;
|
|
|
|
// If this is disabled, or the mousedown has been processed by an upstream DragTracker, return
|
|
if (me.disabled ||e.dragTracked) {
|
|
return;
|
|
}
|
|
|
|
// This information should be available in mousedown listener and onBeforeStart implementations
|
|
me.dragTarget = me.delegate ? target : me.handle.dom;
|
|
me.startXY = me.lastXY = e.getXY();
|
|
me.startRegion = Ext.fly(me.dragTarget).getRegion();
|
|
|
|
if (me.fireEvent('mousedown', me, e) === false ||
|
|
me.fireEvent('beforedragstart', me, e) === false ||
|
|
me.onBeforeStart(e) === false) {
|
|
return;
|
|
}
|
|
|
|
// Track when the mouse is down so that mouseouts while the mouse is down are not processed.
|
|
// The onMouseOut method will only ever be called after mouseup.
|
|
me.mouseIsDown = true;
|
|
|
|
// Flag for downstream DragTracker instances that the mouse is being tracked.
|
|
e.dragTracked = true;
|
|
|
|
// See Ext.dd.DragDropManager::handleMouseDown
|
|
el = me.el.dom;
|
|
if (Ext.isIE && el.setCapture) {
|
|
el.setCapture();
|
|
}
|
|
|
|
if (me.preventDefault !== false) {
|
|
e.preventDefault();
|
|
}
|
|
Ext.getDoc().on({
|
|
scope: me,
|
|
mouseup: me.onMouseUp,
|
|
mousemove: me.onMouseMove,
|
|
selectstart: me.stopSelect
|
|
});
|
|
if (me.autoStart) {
|
|
me.timer = Ext.defer(me.triggerStart, me.autoStart === true ? 1000 : me.autoStart, me, [e]);
|
|
}
|
|
},
|
|
|
|
onMouseMove: function(e, target){
|
|
var me = this,
|
|
xy = e.getXY(),
|
|
s = me.startXY;
|
|
|
|
e.preventDefault();
|
|
|
|
me.lastXY = xy;
|
|
if (!me.active) {
|
|
if (Math.max(Math.abs(s[0]-xy[0]), Math.abs(s[1]-xy[1])) > me.tolerance) {
|
|
me.triggerStart(e);
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Returning false from a mousemove listener deactivates
|
|
if (me.fireEvent('mousemove', me, e) === false) {
|
|
me.onMouseUp(e);
|
|
} else {
|
|
me.onDrag(e);
|
|
me.fireEvent('drag', me, e);
|
|
}
|
|
},
|
|
|
|
onMouseUp: function(e) {
|
|
var me = this;
|
|
// Clear the flag which ensures onMouseOut fires only after the mouse button
|
|
// is lifted if the mouseout happens *during* a drag.
|
|
me.mouseIsDown = false;
|
|
|
|
// If we mouseouted the el *during* the drag, the onMouseOut method will not have fired. Ensure that it gets processed.
|
|
if (me.mouseIsOut) {
|
|
me.mouseIsOut = false;
|
|
me.onMouseOut(e);
|
|
}
|
|
e.preventDefault();
|
|
|
|
// See Ext.dd.DragDropManager::handleMouseDown
|
|
if (Ext.isIE && document.releaseCapture) {
|
|
document.releaseCapture();
|
|
}
|
|
|
|
me.fireEvent('mouseup', me, e);
|
|
me.endDrag(e);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Stop the drag operation, and remove active mouse listeners.
|
|
*/
|
|
endDrag: function(e) {
|
|
var me = this,
|
|
wasActive = me.active;
|
|
|
|
Ext.getDoc().un({
|
|
mousemove: me.onMouseMove,
|
|
mouseup: me.onMouseUp,
|
|
selectstart: me.stopSelect,
|
|
scope: me
|
|
});
|
|
me.clearStart();
|
|
me.active = false;
|
|
if (wasActive) {
|
|
me.onEnd(e);
|
|
me.fireEvent('dragend', me, e);
|
|
}
|
|
// Private property calculated when first required and only cached during a drag
|
|
// Remove flag from event singleton. Using "Ext.EventObject" here since "endDrag" is called directly in some cases without an "e" param
|
|
me._constrainRegion = Ext.EventObject.dragTracked = null
|
|
},
|
|
|
|
triggerStart: function(e) {
|
|
var me = this;
|
|
me.clearStart();
|
|
me.active = true;
|
|
me.onStart(e);
|
|
me.fireEvent('dragstart', me, e);
|
|
},
|
|
|
|
clearStart : function() {
|
|
var timer = this.timer;
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
this.timer = null;
|
|
}
|
|
},
|
|
|
|
stopSelect : function(e) {
|
|
e.stopEvent();
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Template method which should be overridden by each DragTracker instance. Called when the user first clicks and
|
|
* holds the mouse button down. Return false to disallow the drag
|
|
* @param {Ext.EventObject} e The event object
|
|
* @template
|
|
*/
|
|
onBeforeStart : function(e) {
|
|
|
|
},
|
|
|
|
/**
|
|
* Template method which should be overridden by each DragTracker instance. Called when a drag operation starts
|
|
* (e.g. the user has moved the tracked element beyond the specified tolerance)
|
|
* @param {Ext.EventObject} e The event object
|
|
* @template
|
|
*/
|
|
onStart : function(xy) {
|
|
|
|
},
|
|
|
|
/**
|
|
* Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.
|
|
* @param {Ext.EventObject} e The event object
|
|
* @template
|
|
*/
|
|
onDrag : function(e) {
|
|
|
|
},
|
|
|
|
/**
|
|
* Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed
|
|
* (e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)
|
|
* @param {Ext.EventObject} e The event object
|
|
* @template
|
|
*/
|
|
onEnd : function(e) {
|
|
|
|
},
|
|
|
|
/**
|
|
* Returns the drag target. This is usually the DragTracker's encapsulating element.
|
|
*
|
|
* If the {@link #delegate} option is being used, this may be a child element which matches the
|
|
* {@link #delegate} selector.
|
|
*
|
|
* @return {Ext.Element} The element currently being tracked.
|
|
*/
|
|
getDragTarget : function(){
|
|
return this.dragTarget;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @returns {Ext.Element} The DragTracker's encapsulating element.
|
|
*/
|
|
getDragCt : function(){
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Return the Region into which the drag operation is constrained.
|
|
* Either the XY pointer itself can be constrained, or the dragTarget element
|
|
* The private property _constrainRegion is cached until onMouseUp
|
|
*/
|
|
getConstrainRegion: function() {
|
|
var me = this;
|
|
|
|
if (me.constrainTo) {
|
|
if (me.constrainTo instanceof Ext.util.Region) {
|
|
return me.constrainTo;
|
|
}
|
|
if (!me._constrainRegion) {
|
|
me._constrainRegion = Ext.fly(me.constrainTo).getViewRegion();
|
|
}
|
|
} else {
|
|
if (!me._constrainRegion) {
|
|
me._constrainRegion = me.getDragCt().getViewRegion();
|
|
}
|
|
}
|
|
return me._constrainRegion;
|
|
},
|
|
|
|
getXY : function(constrain){
|
|
return constrain ? this.constrainModes[constrain](this, this.lastXY) : this.lastXY;
|
|
},
|
|
|
|
/**
|
|
* Returns the X, Y offset of the current mouse position from the mousedown point.
|
|
*
|
|
* This method may optionally constrain the real offset values, and returns a point coerced in one
|
|
* of two modes:
|
|
*
|
|
* - `point`
|
|
* The current mouse position is coerced into the constrainRegion and the resulting position is returned.
|
|
* - `dragTarget`
|
|
* The new {@link Ext.util.Region Region} of the {@link #getDragTarget dragTarget} is calculated
|
|
* based upon the current mouse position, and then coerced into the constrainRegion. The returned
|
|
* mouse position is then adjusted by the same delta as was used to coerce the region.\
|
|
*
|
|
* @param {String} constrainMode (Optional) If omitted the true mouse position is returned. May be passed
|
|
* as `point` or `dragTarget`. See above.
|
|
* @returns {Number[]} The `X, Y` offset from the mousedown point, optionally constrained.
|
|
*/
|
|
getOffset : function(constrain){
|
|
var xy = this.getXY(constrain),
|
|
s = this.startXY;
|
|
|
|
return [xy[0]-s[0], xy[1]-s[1]];
|
|
},
|
|
|
|
constrainModes: {
|
|
// Constrain the passed point to within the constrain region
|
|
point: function(me, xy) {
|
|
var dr = me.dragRegion,
|
|
constrainTo = me.getConstrainRegion();
|
|
|
|
// No constraint
|
|
if (!constrainTo) {
|
|
return xy;
|
|
}
|
|
|
|
dr.x = dr.left = dr[0] = dr.right = xy[0];
|
|
dr.y = dr.top = dr[1] = dr.bottom = xy[1];
|
|
dr.constrainTo(constrainTo);
|
|
|
|
return [dr.left, dr.top];
|
|
},
|
|
|
|
// Constrain the dragTarget to within the constrain region. Return the passed xy adjusted by the same delta.
|
|
dragTarget: function(me, xy) {
|
|
var s = me.startXY,
|
|
dr = me.startRegion.copy(),
|
|
constrainTo = me.getConstrainRegion(),
|
|
adjust;
|
|
|
|
// No constraint
|
|
if (!constrainTo) {
|
|
return xy;
|
|
}
|
|
|
|
// See where the passed XY would put the dragTarget if translated by the unconstrained offset.
|
|
// If it overflows, we constrain the passed XY to bring the potential
|
|
// region back within the boundary.
|
|
dr.translateBy(xy[0]-s[0], xy[1]-s[1]);
|
|
|
|
// Constrain the X coordinate by however much the dragTarget overflows
|
|
if (dr.right > constrainTo.right) {
|
|
xy[0] += adjust = (constrainTo.right - dr.right); // overflowed the right
|
|
dr.left += adjust;
|
|
}
|
|
if (dr.left < constrainTo.left) {
|
|
xy[0] += (constrainTo.left - dr.left); // overflowed the left
|
|
}
|
|
|
|
// Constrain the Y coordinate by however much the dragTarget overflows
|
|
if (dr.bottom > constrainTo.bottom) {
|
|
xy[1] += adjust = (constrainTo.bottom - dr.bottom); // overflowed the bottom
|
|
dr.top += adjust;
|
|
}
|
|
if (dr.top < constrainTo.top) {
|
|
xy[1] += (constrainTo.top - dr.top); // overflowed the top
|
|
}
|
|
return xy;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class provides a container DD instance that allows dragging of multiple child source nodes.
|
|
*
|
|
* This class does not move the drag target nodes, but a proxy element which may contain any DOM structure you wish. The
|
|
* DOM element to show in the proxy is provided by either a provided implementation of {@link #getDragData}, or by
|
|
* registered draggables registered with {@link Ext.dd.Registry}
|
|
*
|
|
* If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some application
|
|
* object (For example nodes in a {@link Ext.view.View DataView}) then use of this class is the most efficient way to
|
|
* "activate" those nodes.
|
|
*
|
|
* By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}. However a
|
|
* simpler way to allow a DragZone to manage any number of draggable elements is to configure the DragZone with an
|
|
* implementation of the {@link #getDragData} method which interrogates the passed mouse event to see if it has taken
|
|
* place within an element, or class of elements. This is easily done by using the event's {@link
|
|
* Ext.EventObject#getTarget getTarget} method to identify a node based on a {@link Ext.DomQuery} selector. For example,
|
|
* to make the nodes of a DataView draggable, use the following technique. Knowledge of the use of the DataView is
|
|
* required:
|
|
*
|
|
* myDataView.on('render', function(v) {
|
|
* myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
|
|
*
|
|
* // On receipt of a mousedown event, see if it is within a DataView node.
|
|
* // Return a drag data object if so.
|
|
* getDragData: function(e) {
|
|
*
|
|
* // Use the DataView's own itemSelector (a mandatory property) to
|
|
* // test if the mousedown is within one of the DataView's nodes.
|
|
* var sourceEl = e.getTarget(v.itemSelector, 10);
|
|
*
|
|
* // If the mousedown is within a DataView node, clone the node to produce
|
|
* // a ddel element for use by the drag proxy. Also add application data
|
|
* // to the returned data object.
|
|
* if (sourceEl) {
|
|
* d = sourceEl.cloneNode(true);
|
|
* d.id = Ext.id();
|
|
* return {
|
|
* ddel: d,
|
|
* sourceEl: sourceEl,
|
|
* repairXY: Ext.fly(sourceEl).getXY(),
|
|
* sourceStore: v.store,
|
|
* draggedRecord: v.{@link Ext.view.View#getRecord getRecord}(sourceEl)
|
|
* }
|
|
* }
|
|
* },
|
|
*
|
|
* // Provide coordinates for the proxy to slide back to on failed drag.
|
|
* // This is the original XY coordinates of the draggable element captured
|
|
* // in the getDragData method.
|
|
* getRepairXY: function() {
|
|
* return this.dragData.repairXY;
|
|
* }
|
|
* });
|
|
* });
|
|
*
|
|
* See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which cooperates with
|
|
* this DragZone.
|
|
*/
|
|
Ext.define('Ext.dd.DragZone', {
|
|
extend: Ext.dd.DragSource ,
|
|
|
|
/**
|
|
* Creates new DragZone.
|
|
* @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
|
|
* @param {Object} config
|
|
*/
|
|
constructor : function(el, config){
|
|
var me = this,
|
|
scroll = me.containerScroll;
|
|
|
|
me.callParent([el, config]);
|
|
if (scroll) {
|
|
el = me.scrollEl || el;
|
|
el = Ext.get(el);
|
|
if (Ext.isObject(scroll)) {
|
|
el.ddScrollConfig = scroll;
|
|
}
|
|
Ext.dd.ScrollManager.register(el);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {Object/Boolean} containerScroll
|
|
* True to register this container with the Scrollmanager for auto scrolling during drag operations.
|
|
* A {@link Ext.dd.ScrollManager} configuration may also be passed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.dom.Element} scrollEl
|
|
* An element to register with the ScrollManager if {@link #containerScroll}
|
|
* is set. Defaults to the drag element.
|
|
*/
|
|
|
|
/**
|
|
* Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry} for a valid target to drag
|
|
* based on the mouse down. Override this method to provide your own lookup logic (e.g. finding a child by class
|
|
* name). Make sure your returned object has a "ddel" attribute (with an HTML Element) for other functions to work.
|
|
* @param {Event} e The mouse down event
|
|
* @return {Object} The dragData
|
|
*/
|
|
getDragData : function(e){
|
|
return Ext.dd.Registry.getHandleFromEvent(e);
|
|
},
|
|
|
|
/**
|
|
* Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
|
|
* this.dragData.ddel
|
|
* @param {Number} x The x position of the click on the dragged object
|
|
* @param {Number} y The y position of the click on the dragged object
|
|
* @return {Boolean} true to continue the drag, false to cancel
|
|
* @template
|
|
*/
|
|
onInitDrag : function(x, y){
|
|
this.proxy.update(this.dragData.ddel.cloneNode(true));
|
|
this.onStartDrag(x, y);
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Called before a repair of an invalid drop to get the XY to animate to. By default returns the XY of
|
|
* this.dragData.ddel
|
|
* @param {Event} e The mouse up event
|
|
* @return {Number[]} The xy location (e.g. `[100, 200]`)
|
|
* @template
|
|
*/
|
|
getRepairXY : function(e){
|
|
return Ext.fly(this.dragData.ddel).getXY();
|
|
},
|
|
|
|
destroy : function(){
|
|
this.callParent();
|
|
if (this.containerScroll) {
|
|
Ext.dd.ScrollManager.unregister(this.scrollEl || this.el);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides automatic scrolling of overflow regions in the page during drag operations.
|
|
*
|
|
* The ScrollManager configs will be used as the defaults for any scroll container registered with it, but you can also
|
|
* override most of the configs per scroll container by adding a ddScrollConfig object to the target element that
|
|
* contains these properties: {@link #hthresh}, {@link #vthresh}, {@link #increment} and {@link #frequency}. Example
|
|
* usage:
|
|
*
|
|
* var el = Ext.get('scroll-ct');
|
|
* el.ddScrollConfig = {
|
|
* vthresh: 50,
|
|
* hthresh: -1,
|
|
* frequency: 100,
|
|
* increment: 200
|
|
* };
|
|
* Ext.dd.ScrollManager.register(el);
|
|
*
|
|
* Note: This class is designed to be used in "Point Mode
|
|
*/
|
|
Ext.define('Ext.dd.ScrollManager', {
|
|
singleton: true,
|
|
|
|
|
|
|
|
|
|
constructor: function() {
|
|
var ddm = Ext.dd.DragDropManager;
|
|
ddm.fireEvents = Ext.Function.createSequence(ddm.fireEvents, this.onFire, this);
|
|
ddm.stopDrag = Ext.Function.createSequence(ddm.stopDrag, this.onStop, this);
|
|
this.doScroll = Ext.Function.bind(this.doScroll, this);
|
|
this.ddmInstance = ddm;
|
|
this.els = {};
|
|
this.dragEl = null;
|
|
this.proc = {};
|
|
},
|
|
|
|
onStop: function(e){
|
|
var sm = Ext.dd.ScrollManager;
|
|
sm.dragEl = null;
|
|
sm.clearProc();
|
|
},
|
|
|
|
triggerRefresh: function() {
|
|
if (this.ddmInstance.dragCurrent) {
|
|
this.ddmInstance.refreshCache(this.ddmInstance.dragCurrent.groups);
|
|
}
|
|
},
|
|
|
|
doScroll: function() {
|
|
if (this.ddmInstance.dragCurrent) {
|
|
var proc = this.proc,
|
|
procEl = proc.el,
|
|
ddScrollConfig = proc.el.ddScrollConfig,
|
|
inc = ddScrollConfig ? ddScrollConfig.increment : this.increment;
|
|
|
|
if (!this.animate) {
|
|
if (procEl.scroll(proc.dir, inc)) {
|
|
this.triggerRefresh();
|
|
}
|
|
} else {
|
|
procEl.scroll(proc.dir, inc, true, this.animDuration, this.triggerRefresh);
|
|
}
|
|
}
|
|
},
|
|
|
|
clearProc: function() {
|
|
var proc = this.proc;
|
|
if (proc.id) {
|
|
clearInterval(proc.id);
|
|
}
|
|
proc.id = 0;
|
|
proc.el = null;
|
|
proc.dir = "";
|
|
},
|
|
|
|
startProc: function(el, dir) {
|
|
this.clearProc();
|
|
this.proc.el = el;
|
|
this.proc.dir = dir;
|
|
var group = el.ddScrollConfig ? el.ddScrollConfig.ddGroup : undefined,
|
|
freq = (el.ddScrollConfig && el.ddScrollConfig.frequency)
|
|
? el.ddScrollConfig.frequency
|
|
: this.frequency;
|
|
|
|
if (group === undefined || this.ddmInstance.dragCurrent.ddGroup == group) {
|
|
this.proc.id = setInterval(this.doScroll, freq);
|
|
}
|
|
},
|
|
|
|
onFire: function(e, isDrop) {
|
|
if (isDrop || !this.ddmInstance.dragCurrent) {
|
|
return;
|
|
}
|
|
if (!this.dragEl || this.dragEl != this.ddmInstance.dragCurrent) {
|
|
this.dragEl = this.ddmInstance.dragCurrent;
|
|
// refresh regions on drag start
|
|
this.refreshCache();
|
|
}
|
|
|
|
var xy = e.getXY(),
|
|
pt = e.getPoint(),
|
|
proc = this.proc,
|
|
els = this.els,
|
|
id, el, r, c;
|
|
|
|
for (id in els) {
|
|
el = els[id];
|
|
r = el._region;
|
|
c = el.ddScrollConfig ? el.ddScrollConfig : this;
|
|
if (r && r.contains(pt) && el.isScrollable()) {
|
|
if (r.bottom - pt.y <= c.vthresh) {
|
|
if(proc.el != el){
|
|
this.startProc(el, "down");
|
|
}
|
|
return;
|
|
}else if (r.right - pt.x <= c.hthresh) {
|
|
if (proc.el != el) {
|
|
this.startProc(el, "left");
|
|
}
|
|
return;
|
|
} else if(pt.y - r.top <= c.vthresh) {
|
|
if (proc.el != el) {
|
|
this.startProc(el, "up");
|
|
}
|
|
return;
|
|
} else if(pt.x - r.left <= c.hthresh) {
|
|
if (proc.el != el) {
|
|
this.startProc(el, "right");
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
this.clearProc();
|
|
},
|
|
|
|
/**
|
|
* Registers new overflow element(s) to auto scroll
|
|
* @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
|
|
* The id of or the element to be scrolled or an array of either
|
|
*/
|
|
register : function(el){
|
|
if (Ext.isArray(el)) {
|
|
for(var i = 0, len = el.length; i < len; i++) {
|
|
this.register(el[i]);
|
|
}
|
|
} else {
|
|
el = Ext.get(el);
|
|
this.els[el.id] = el;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unregisters overflow element(s) so they are no longer scrolled
|
|
* @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
|
|
* The id of or the element to be removed or an array of either
|
|
*/
|
|
unregister : function(el){
|
|
if(Ext.isArray(el)){
|
|
for (var i = 0, len = el.length; i < len; i++) {
|
|
this.unregister(el[i]);
|
|
}
|
|
}else{
|
|
el = Ext.get(el);
|
|
delete this.els[el.id];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The number of pixels from the top or bottom edge of a container the pointer needs to be to trigger scrolling
|
|
*/
|
|
vthresh : 25,
|
|
|
|
/**
|
|
* The number of pixels from the right or left edge of a container the pointer needs to be to trigger scrolling
|
|
*/
|
|
hthresh : 25,
|
|
|
|
/**
|
|
* The number of pixels to scroll in each scroll increment
|
|
*/
|
|
increment : 100,
|
|
|
|
/**
|
|
* The frequency of scrolls in milliseconds
|
|
*/
|
|
frequency : 500,
|
|
|
|
/**
|
|
* True to animate the scroll
|
|
*/
|
|
animate: true,
|
|
|
|
/**
|
|
* The animation duration in seconds - MUST BE less than Ext.dd.ScrollManager.frequency!
|
|
*/
|
|
animDuration: 0.4,
|
|
|
|
/**
|
|
* @property {String} ddGroup
|
|
* The named drag drop {@link Ext.dd.DragSource#ddGroup group} to which this container belongs. If a ddGroup is
|
|
* specified, then container scrolling will only occur when a dragged object is in the same ddGroup.
|
|
*/
|
|
ddGroup: undefined,
|
|
|
|
/**
|
|
* Manually trigger a cache refresh.
|
|
*/
|
|
refreshCache : function(){
|
|
var els = this.els,
|
|
id;
|
|
for (id in els) {
|
|
if(typeof els[id] == 'object'){ // for people extending the object prototype
|
|
els[id]._region = els[id].getRegion();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A simple class that provides the basic implementation needed to make any element a drop target that can have
|
|
* draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
|
|
*/
|
|
Ext.define('Ext.dd.DropTarget', {
|
|
extend: Ext.dd.DDTarget ,
|
|
|
|
|
|
/**
|
|
* Creates new DropTarget.
|
|
* @param {String/HTMLElement/Ext.Element} el The container element or ID of it.
|
|
* @param {Object} config
|
|
*/
|
|
constructor : function(el, config){
|
|
this.el = Ext.get(el);
|
|
|
|
Ext.apply(this, config);
|
|
|
|
if(this.containerScroll){
|
|
Ext.dd.ScrollManager.register(this.el);
|
|
}
|
|
|
|
this.callParent([this.el.dom, this.ddGroup || this.group,
|
|
{isTarget: true}]);
|
|
},
|
|
|
|
/**
|
|
* @cfg {String} ddGroup
|
|
* A named drag drop group to which this object belongs. If a group is specified, then this object will only
|
|
* interact with other drag drop objects in the same group.
|
|
*/
|
|
/**
|
|
* @cfg {String} [overClass=""]
|
|
* The CSS class applied to the drop target element while the drag source is over it.
|
|
*/
|
|
/**
|
|
* @cfg {String} dropAllowed
|
|
* The CSS class returned to the drag source when drop is allowed.
|
|
*/
|
|
dropAllowed : Ext.baseCSSPrefix + 'dd-drop-ok',
|
|
/**
|
|
* @cfg {String} dropNotAllowed
|
|
* The CSS class returned to the drag source when drop is not allowed.
|
|
*/
|
|
dropNotAllowed : Ext.baseCSSPrefix + 'dd-drop-nodrop',
|
|
|
|
// private
|
|
isTarget : true,
|
|
|
|
// private
|
|
isNotifyTarget : true,
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
|
|
* target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
|
|
* and returns the dropAllowed config value. This method should be overridden if drop validation is required.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying {@link Ext.dd.StatusProxy} can be updated
|
|
* @template
|
|
*/
|
|
notifyEnter : function(dd, e, data){
|
|
if(this.overClass){
|
|
this.el.addCls(this.overClass);
|
|
}
|
|
return this.dropAllowed;
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
|
|
* This method will be called on every mouse movement while the drag source is over the drop target.
|
|
* This default implementation simply returns the dropAllowed config value.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying {@link Ext.dd.StatusProxy} can be updated
|
|
* @template
|
|
*/
|
|
notifyOver : function(dd, e, data){
|
|
return this.dropAllowed;
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
|
|
* out of the target without dropping. This default implementation simply removes the CSS class specified by
|
|
* overClass (if any) from the drop element.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @template
|
|
*/
|
|
notifyOut : function(dd, e, data){
|
|
if(this.overClass){
|
|
this.el.removeCls(this.overClass);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
|
|
* been dropped on it. This method has no default implementation and returns false, so you must provide an
|
|
* implementation that does something to process the drop event and returns true so that the drag source's
|
|
* repair action does not run.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {Boolean} False if the drop was invalid.
|
|
* @template
|
|
*/
|
|
notifyDrop : function(dd, e, data){
|
|
return false;
|
|
},
|
|
|
|
destroy : function(){
|
|
this.callParent();
|
|
if(this.containerScroll){
|
|
Ext.dd.ScrollManager.unregister(this.el);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either
|
|
* directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
|
|
*/
|
|
Ext.define('Ext.dd.Registry', {
|
|
singleton: true,
|
|
constructor: function() {
|
|
this.elements = {};
|
|
this.handles = {};
|
|
this.autoIdSeed = 0;
|
|
},
|
|
|
|
getId: function(el, autogen){
|
|
if(typeof el == "string"){
|
|
return el;
|
|
}
|
|
var id = el.id;
|
|
if(!id && autogen !== false){
|
|
id = "extdd-" + (++this.autoIdSeed);
|
|
el.id = id;
|
|
}
|
|
return id;
|
|
},
|
|
|
|
/**
|
|
* Registers a drag drop element.
|
|
*
|
|
* @param {String/HTMLElement} element The id or DOM node to register
|
|
* @param {Object} data An custom data object that will be passed between the elements that are involved in drag
|
|
* drop operations. You can populate this object with any arbitrary properties that your own code knows how to
|
|
* interpret, plus there are some specific properties known to the Registry that should be populated in the data
|
|
* object (if applicable):
|
|
* @param {HTMLElement[]} data.handles Array of DOM nodes that trigger dragging for the element being registered.
|
|
* @param {Boolean} data.isHandle True if the element passed in triggers dragging itself, else false.
|
|
*/
|
|
register : function(el, data){
|
|
data = data || {};
|
|
if (typeof el == "string") {
|
|
el = document.getElementById(el);
|
|
}
|
|
data.ddel = el;
|
|
this.elements[this.getId(el)] = data;
|
|
if (data.isHandle !== false) {
|
|
this.handles[data.ddel.id] = data;
|
|
}
|
|
if (data.handles) {
|
|
var hs = data.handles,
|
|
i, len;
|
|
for (i = 0, len = hs.length; i < len; i++) {
|
|
this.handles[this.getId(hs[i])] = data;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Unregister a drag drop element
|
|
* @param {String/HTMLElement} element The id or DOM node to unregister
|
|
*/
|
|
unregister : function(el){
|
|
var id = this.getId(el, false),
|
|
data = this.elements[id],
|
|
hs, i, len;
|
|
if(data){
|
|
delete this.elements[id];
|
|
if(data.handles){
|
|
hs = data.handles;
|
|
for (i = 0, len = hs.length; i < len; i++) {
|
|
delete this.handles[this.getId(hs[i], false)];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the handle registered for a DOM Node by id
|
|
* @param {String/HTMLElement} id The DOM node or id to look up
|
|
* @return {Object} handle The custom handle data
|
|
*/
|
|
getHandle : function(id){
|
|
if(typeof id != "string"){ // must be element?
|
|
id = id.id;
|
|
}
|
|
return this.handles[id];
|
|
},
|
|
|
|
/**
|
|
* Returns the handle that is registered for the DOM node that is the target of the event
|
|
* @param {Event} e The event
|
|
* @return {Object} handle The custom handle data
|
|
*/
|
|
getHandleFromEvent : function(e){
|
|
var t = e.getTarget();
|
|
return t ? this.handles[t.id] : null;
|
|
},
|
|
|
|
/**
|
|
* Returns a custom data object that is registered for a DOM node by id
|
|
* @param {String/HTMLElement} id The DOM node or id to look up
|
|
* @return {Object} data The custom data
|
|
*/
|
|
getTarget : function(id){
|
|
if(typeof id != "string"){ // must be element?
|
|
id = id.id;
|
|
}
|
|
return this.elements[id];
|
|
},
|
|
|
|
/**
|
|
* Returns a custom data object that is registered for the DOM node that is the target of the event
|
|
* @param {Event} e The event
|
|
* @return {Object} data The custom data
|
|
*/
|
|
getTargetFromEvent : function(e){
|
|
var t = e.getTarget();
|
|
return t ? this.elements[t.id] || this.handles[t.id] : null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class provides a container DD instance that allows dropping on multiple child target nodes.
|
|
*
|
|
* By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
|
|
* However a simpler way to allow a DropZone to manage any number of target elements is to configure the
|
|
* DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
|
|
* mouse event to see if it has taken place within an element, or class of elements. This is easily done
|
|
* by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
|
|
* {@link Ext.DomQuery} selector.
|
|
*
|
|
* Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
|
|
* a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
|
|
* {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
|
|
* of these methods to provide application-specific behaviour for these events to update both
|
|
* application state, and UI state.
|
|
*
|
|
* For example to make a GridPanel a cooperating target with the example illustrated in
|
|
* {@link Ext.dd.DragZone DragZone}, the following technique might be used:
|
|
*
|
|
* myGridPanel.on('render', function() {
|
|
* myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
|
|
*
|
|
* // If the mouse is over a grid row, return that node. This is
|
|
* // provided as the "target" parameter in all "onNodeXXXX" node event handling functions
|
|
* getTargetFromEvent: function(e) {
|
|
* return e.getTarget(myGridPanel.getView().rowSelector);
|
|
* },
|
|
*
|
|
* // On entry into a target node, highlight that node.
|
|
* onNodeEnter : function(target, dd, e, data){
|
|
* Ext.fly(target).addCls('my-row-highlight-class');
|
|
* },
|
|
*
|
|
* // On exit from a target node, unhighlight that node.
|
|
* onNodeOut : function(target, dd, e, data){
|
|
* Ext.fly(target).removeCls('my-row-highlight-class');
|
|
* },
|
|
*
|
|
* // While over a target node, return the default drop allowed class which
|
|
* // places a "tick" icon into the drag proxy.
|
|
* onNodeOver : function(target, dd, e, data){
|
|
* return Ext.dd.DropZone.prototype.dropAllowed;
|
|
* },
|
|
*
|
|
* // On node drop we can interrogate the target to find the underlying
|
|
* // application object that is the real target of the dragged data.
|
|
* // In this case, it is a Record in the GridPanel's Store.
|
|
* // We can use the data set up by the DragZone's getDragData method to read
|
|
* // any data we decided to attach in the DragZone's getDragData method.
|
|
* onNodeDrop : function(target, dd, e, data){
|
|
* var rowIndex = myGridPanel.getView().findRowIndex(target);
|
|
* var r = myGridPanel.getStore().getAt(rowIndex);
|
|
* Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
|
|
* ' on Record id ' + r.id);
|
|
* return true;
|
|
* }
|
|
* });
|
|
* }
|
|
*
|
|
* See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
|
|
* cooperates with this DropZone.
|
|
*/
|
|
Ext.define('Ext.dd.DropZone', {
|
|
extend: Ext.dd.DropTarget ,
|
|
|
|
|
|
/**
|
|
* Returns a custom data object associated with the DOM node that is the target of the event. By default
|
|
* this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
|
|
* provide your own custom lookup.
|
|
* @param {Event} e The event
|
|
* @return {Object} data The custom data
|
|
*/
|
|
getTargetFromEvent : function(e){
|
|
return Ext.dd.Registry.getTargetFromEvent(e);
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
|
|
* that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
|
|
* This method has no default implementation and should be overridden to provide
|
|
* node-specific processing if necessary.
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* {@link #getTargetFromEvent} for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
*/
|
|
onNodeEnter : function(n, dd, e, data){
|
|
|
|
},
|
|
|
|
/**
|
|
* Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
|
|
* that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
|
|
* The default implementation returns this.dropAllowed, so it should be
|
|
* overridden to provide the proper feedback.
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* {@link #getTargetFromEvent} for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying {@link Ext.dd.StatusProxy} can be updated
|
|
* @template
|
|
*/
|
|
onNodeOver : function(n, dd, e, data){
|
|
return this.dropAllowed;
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
|
|
* the drop node without dropping. This method has no default implementation and should be overridden to provide
|
|
* node-specific processing if necessary.
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* {@link #getTargetFromEvent} for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @template
|
|
*/
|
|
onNodeOut : function(n, dd, e, data){
|
|
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
|
|
* the drop node. The default implementation returns false, so it should be overridden to provide the
|
|
* appropriate processing of the drop event and return true so that the drag source's repair action does not run.
|
|
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
|
|
* {@link #getTargetFromEvent} for this node)
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {Boolean} True if the drop was valid, else false
|
|
* @template
|
|
*/
|
|
onNodeDrop : function(n, dd, e, data){
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
|
|
* but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
|
|
* it should be overridden to provide the proper feedback if necessary.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying {@link Ext.dd.StatusProxy} can be updated
|
|
* @template
|
|
*/
|
|
onContainerOver : function(dd, e, data){
|
|
return this.dropNotAllowed;
|
|
},
|
|
|
|
/**
|
|
* Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
|
|
* but not on any of its registered drop nodes. The default implementation returns false, so it should be
|
|
* overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
|
|
* be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {Boolean} True if the drop was valid, else false
|
|
* @template
|
|
*/
|
|
onContainerDrop : function(dd, e, data){
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
|
|
* the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
|
|
* nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
|
|
* you should override this method and provide a custom implementation.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying {@link Ext.dd.StatusProxy} can be updated
|
|
* @template
|
|
*/
|
|
notifyEnter : function(dd, e, data){
|
|
return this.dropNotAllowed;
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
|
|
* This method will be called on every mouse movement while the drag source is over the drop zone.
|
|
* It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
|
|
* delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
|
|
* registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
|
|
* registered node, it will call {@link #onContainerOver}.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {String} status The CSS class that communicates the drop status back to the source so that the
|
|
* underlying {@link Ext.dd.StatusProxy} can be updated
|
|
* @template
|
|
*/
|
|
notifyOver : function(dd, e, data){
|
|
var n = this.getTargetFromEvent(e);
|
|
if(!n) { // not over valid drop target
|
|
if(this.lastOverNode){
|
|
this.onNodeOut(this.lastOverNode, dd, e, data);
|
|
this.lastOverNode = null;
|
|
}
|
|
return this.onContainerOver(dd, e, data);
|
|
}
|
|
if(this.lastOverNode != n){
|
|
if(this.lastOverNode){
|
|
this.onNodeOut(this.lastOverNode, dd, e, data);
|
|
}
|
|
this.onNodeEnter(n, dd, e, data);
|
|
this.lastOverNode = n;
|
|
}
|
|
return this.onNodeOver(n, dd, e, data);
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
|
|
* out of the zone without dropping. If the drag source is currently over a registered node, the notification
|
|
* will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag zone
|
|
* @template
|
|
*/
|
|
notifyOut : function(dd, e, data){
|
|
if(this.lastOverNode){
|
|
this.onNodeOut(this.lastOverNode, dd, e, data);
|
|
this.lastOverNode = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
|
|
* been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
|
|
* is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
|
|
* otherwise it will call {@link #onContainerDrop}.
|
|
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
|
|
* @param {Event} e The event
|
|
* @param {Object} data An object containing arbitrary data supplied by the drag source
|
|
* @return {Boolean} False if the drop was invalid.
|
|
* @template
|
|
*/
|
|
notifyDrop : function(dd, e, data){
|
|
var me = this,
|
|
n = me.getTargetFromEvent(e),
|
|
result = n ?
|
|
me.onNodeDrop(n, dd, e, data) :
|
|
me.onContainerDrop(dd, e, data);
|
|
|
|
// Exit the overNode upon drop.
|
|
// Must do this after dropping because exiting a node may perform actions which invalidate a drop.
|
|
if (me.lastOverNode) {
|
|
me.onNodeOut(me.lastOverNode, dd, e, data);
|
|
me.lastOverNode = null;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// private
|
|
triggerCacheRefresh : function() {
|
|
Ext.dd.DDM.refreshCache(this.groups);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Base class for all Ext.direct events. An event is
|
|
* created after some kind of interaction with the server.
|
|
* The event class is essentially just a data structure
|
|
* to hold a Direct response.
|
|
*/
|
|
Ext.define('Ext.direct.Event', {
|
|
alias: 'direct.event',
|
|
|
|
status: true,
|
|
|
|
/**
|
|
* Creates new Event.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
Ext.apply(this, config);
|
|
},
|
|
|
|
/**
|
|
* Return the name for this event.
|
|
* @return {String} The name of event
|
|
*/
|
|
getName: function() {
|
|
return this.name;
|
|
},
|
|
|
|
/**
|
|
* Return the raw data for this event.
|
|
* @return {Mixed} The data from the event
|
|
*/
|
|
getData: function() {
|
|
return this.data;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An event that is fired when data is received from a
|
|
* {@link Ext.direct.RemotingProvider}. Contains a method to the
|
|
* related transaction for the direct request, see {@link #getTransaction}
|
|
*/
|
|
Ext.define('Ext.direct.RemotingEvent', {
|
|
extend: Ext.direct.Event ,
|
|
alias: 'direct.rpc',
|
|
|
|
/**
|
|
* Get the transaction associated with this event.
|
|
* @return {Ext.direct.Transaction} The transaction
|
|
*/
|
|
getTransaction: function() {
|
|
var me = this;
|
|
|
|
return me.transaction || Ext.direct.Manager.getTransaction(me.tid);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An event that is fired when an exception is received from a {@link Ext.direct.RemotingProvider}
|
|
*/
|
|
Ext.define('Ext.direct.ExceptionEvent', {
|
|
extend: Ext.direct.RemotingEvent ,
|
|
alias: 'direct.exception',
|
|
|
|
status: false
|
|
});
|
|
|
|
/**
|
|
* A base provider for communicating using JSON. This is an abstract class
|
|
* and should not be instanced directly.
|
|
*
|
|
* @abstract
|
|
*/
|
|
|
|
Ext.define('Ext.direct.JsonProvider', {
|
|
extend: Ext.direct.Provider ,
|
|
alias: 'direct.jsonprovider',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Parse the JSON response
|
|
* @private
|
|
*
|
|
* @param {Object} response The XHR response object
|
|
*
|
|
* @return {Object} The data in the response.
|
|
*/
|
|
parseResponse: function(response) {
|
|
if (!Ext.isEmpty(response.responseText)) {
|
|
if (Ext.isObject(response.responseText)) {
|
|
return response.responseText;
|
|
}
|
|
|
|
return Ext.decode(response.responseText);
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Creates a set of events based on the XHR response
|
|
*
|
|
* @param {Object} response The XHR response
|
|
*
|
|
* @return {Ext.direct.Event[]} An array of Ext.direct.Event
|
|
*/
|
|
createEvents: function(response) {
|
|
var me = this,
|
|
data = null,
|
|
events = [],
|
|
event, i, len;
|
|
|
|
try {
|
|
data = me.parseResponse(response);
|
|
}
|
|
catch (e) {
|
|
event = new Ext.direct.ExceptionEvent({
|
|
data: e,
|
|
xhr: response,
|
|
code: Ext.direct.Manager.exceptions.PARSE,
|
|
message: 'Error parsing json response: \n\n ' + e
|
|
});
|
|
|
|
return [event];
|
|
}
|
|
|
|
if (Ext.isArray(data)) {
|
|
for (i = 0, len = data.length; i < len; ++i) {
|
|
events.push(me.createEvent(data[i]));
|
|
}
|
|
}
|
|
else if (Ext.isObject(data)) {
|
|
events.push(me.createEvent(data));
|
|
}
|
|
|
|
return events;
|
|
},
|
|
|
|
/**
|
|
* Create an event from a response object
|
|
*
|
|
* @param {Object} response Response object
|
|
*
|
|
* @return {Ext.direct.Event} The event
|
|
*/
|
|
createEvent: function(response) {
|
|
if (typeof response !== 'object'|| !('type' in response)) {
|
|
return new Ext.direct.ExceptionEvent({
|
|
data: response,
|
|
code: Ext.direct.Manager.exceptions.DATA,
|
|
message: 'Invalid data: event type is not specified'
|
|
});
|
|
}
|
|
|
|
return Ext.create('direct.' + response.type, response);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides for repetitive polling of the server at distinct {@link #interval intervals}.
|
|
* The initial request for data originates from the client, and then is responded to by the
|
|
* server.
|
|
*
|
|
* Configuration for the PollingProvider can be generated by the server-side
|
|
* API portion of the Ext.Direct stack.
|
|
*
|
|
* An instance of PollingProvider may be created directly via the new keyword or by simply
|
|
* specifying `type = 'polling'`. For example:
|
|
*
|
|
* var pollA = new Ext.direct.PollingProvider({
|
|
* type:'polling',
|
|
* url: 'php/pollA.php',
|
|
* });
|
|
* Ext.direct.Manager.addProvider(pollA);
|
|
* pollA.disconnect();
|
|
*
|
|
* Ext.direct.Manager.addProvider({
|
|
* type:'polling',
|
|
* url: 'php/pollB.php',
|
|
* id: 'pollB-provider'
|
|
* });
|
|
* var pollB = Ext.direct.Manager.getProvider('pollB-provider');
|
|
*
|
|
*/
|
|
Ext.define('Ext.direct.PollingProvider', {
|
|
extend: Ext.direct.JsonProvider ,
|
|
alias: 'direct.pollingprovider',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Number} [interval=3000]
|
|
* How often to poll the server-side in milliseconds. Defaults to every 3 seconds.
|
|
*/
|
|
interval: 3000,
|
|
|
|
/**
|
|
* @cfg {Object} [baseParams]
|
|
* An object containing properties which are to be sent as parameters on every polling request
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Function} url
|
|
* The url which the PollingProvider should contact with each request. This can also be
|
|
* an imported Ext.Direct method which will accept the baseParams as its only argument.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforepoll
|
|
* @preventable
|
|
* Fired immediately before a poll takes place.
|
|
*
|
|
* @param {Ext.direct.PollingProvider} this
|
|
*/
|
|
'beforepoll',
|
|
|
|
/**
|
|
* @event poll
|
|
* Fired immediately after a poll takes place.
|
|
*
|
|
* @param {Ext.direct.PollingProvider} this
|
|
*/
|
|
'poll'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
isConnected: function() {
|
|
return !!this.pollTask;
|
|
},
|
|
|
|
/**
|
|
* Connect to the server-side and begin the polling process. To handle each
|
|
* response subscribe to the data event.
|
|
*/
|
|
connect: function() {
|
|
var me = this,
|
|
url = me.url;
|
|
|
|
if (url && !me.pollTask) {
|
|
me.pollTask = Ext.TaskManager.start({
|
|
run: me.runPoll,
|
|
interval: me.interval,
|
|
scope: me
|
|
});
|
|
|
|
me.fireEvent('connect', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disconnect from the server-side and stop the polling process. The disconnect
|
|
* event will be fired on a successful disconnect.
|
|
*/
|
|
disconnect: function() {
|
|
var me = this;
|
|
|
|
if (me.pollTask) {
|
|
Ext.TaskManager.stop(me.pollTask);
|
|
delete me.pollTask;
|
|
me.fireEvent('disconnect', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
runPoll: function() {
|
|
var me = this,
|
|
url = me.url;
|
|
|
|
if (me.fireEvent('beforepoll', me) !== false) {
|
|
if (Ext.isFunction(url)) {
|
|
url(me.baseParams);
|
|
}
|
|
else {
|
|
Ext.Ajax.request({
|
|
url: url,
|
|
callback: me.onData,
|
|
scope: me,
|
|
params: me.baseParams
|
|
});
|
|
}
|
|
|
|
me.fireEvent('poll', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onData: function(opt, success, response) {
|
|
var me = this,
|
|
i, len, events;
|
|
|
|
if (success) {
|
|
events = me.createEvents(response);
|
|
|
|
for (i = 0, len = events.length; i < len; ++i) {
|
|
me.fireEvent('data', me, events[i]);
|
|
}
|
|
}
|
|
else {
|
|
events = new Ext.direct.ExceptionEvent({
|
|
data: null,
|
|
code: Ext.direct.Manager.exceptions.TRANSPORT,
|
|
message: 'Unable to connect to the server.',
|
|
xhr: response
|
|
});
|
|
|
|
me.fireEvent('data', me, events);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* Small utility class used internally to represent a Direct method.
|
|
*/
|
|
Ext.define('Ext.direct.RemotingMethod', {
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
params = Ext.isDefined(config.params) ? config.params : config.len,
|
|
name, pLen, p, param;
|
|
|
|
me.name = config.name;
|
|
me.formHandler = config.formHandler;
|
|
|
|
if (Ext.isNumeric(params)) {
|
|
// given only the number of parameters
|
|
me.len = params;
|
|
me.ordered = true;
|
|
}
|
|
else {
|
|
/*
|
|
* Given an array of either
|
|
* a) String
|
|
* b) Objects with a name property. We may want to encode extra info in here later
|
|
*/
|
|
me.params = {};
|
|
pLen = params.length;
|
|
|
|
for (p = 0; p < pLen; p++) {
|
|
param = params[p];
|
|
name = Ext.isObject(param) ? param.name : param;
|
|
me.params[name] = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
getArgs: function(params, paramOrder, paramsAsHash) {
|
|
var me = this,
|
|
args = [],
|
|
i, len;
|
|
|
|
if (me.ordered) {
|
|
if (me.len > 0) {
|
|
// If a paramOrder was specified, add the params into the argument list in that order.
|
|
if (paramOrder) {
|
|
for (i = 0, len = paramOrder.length; i < len; i++) {
|
|
args.push(params[paramOrder[i]]);
|
|
}
|
|
}
|
|
else if (paramsAsHash) {
|
|
// If paramsAsHash was specified, add all the params as a single object argument.
|
|
args.push(params);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
args.push(params);
|
|
}
|
|
|
|
return args;
|
|
},
|
|
|
|
/**
|
|
* Takes the arguments for the Direct function and splits the arguments
|
|
* from the scope and the callback.
|
|
*
|
|
* @param {Array} args The arguments passed to the direct call
|
|
*
|
|
* @return {Object} An object with 3 properties: args, callback & scope.
|
|
*/
|
|
getCallData: function(args) {
|
|
var me = this,
|
|
data = null,
|
|
len = me.len,
|
|
params = me.params,
|
|
callback, scope, name, options;
|
|
|
|
if (me.ordered) {
|
|
callback = args[len];
|
|
scope = args[len + 1];
|
|
options = args[len + 2];
|
|
|
|
if (len !== 0) {
|
|
data = args.slice(0, len);
|
|
}
|
|
}
|
|
else {
|
|
data = Ext.apply({}, args[0]);
|
|
callback = args[1];
|
|
scope = args[2];
|
|
options = args[3];
|
|
|
|
// filter out any non-existent properties
|
|
for (name in data) {
|
|
if (data.hasOwnProperty(name) && !params[name]) {
|
|
delete data[name];
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
data: data,
|
|
callback: callback,
|
|
scope: scope,
|
|
options: options
|
|
};
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Supporting Class for Ext.Direct (not intended to be used directly).
|
|
*/
|
|
Ext.define('Ext.direct.Transaction', {
|
|
alias: 'direct.transaction',
|
|
alternateClassName: 'Ext.Direct.Transaction',
|
|
|
|
statics: {
|
|
TRANSACTION_ID: 0
|
|
},
|
|
|
|
/**
|
|
* @cfg {Ext.direct.Provider} provider Provider to use with this Transaction.
|
|
*/
|
|
|
|
/**
|
|
* Creates new Transaction.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
me.id = me.tid = ++me.self.TRANSACTION_ID;
|
|
me.retryCount = 0;
|
|
},
|
|
|
|
send: function() {
|
|
var me = this;
|
|
|
|
me.provider.queueTransaction(me);
|
|
},
|
|
|
|
retry: function() {
|
|
var me = this;
|
|
|
|
me.retryCount++;
|
|
me.send();
|
|
},
|
|
|
|
getProvider: function() {
|
|
return this.provider;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The {@link Ext.direct.RemotingProvider RemotingProvider} exposes access to
|
|
* server side methods on the client (a remote procedure call (RPC) type of
|
|
* connection where the client can initiate a procedure on the server).
|
|
*
|
|
* This allows for code to be organized in a fashion that is maintainable,
|
|
* while providing a clear path between client and server, something that is
|
|
* not always apparent when using URLs.
|
|
*
|
|
* To accomplish this the server-side needs to describe what classes and methods
|
|
* are available on the client-side. This configuration will typically be
|
|
* outputted by the server-side Ext.Direct stack when the API description is built.
|
|
*/
|
|
Ext.define('Ext.direct.RemotingProvider', {
|
|
extend: Ext.direct.JsonProvider ,
|
|
alias: 'direct.remotingprovider',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Object} actions
|
|
*
|
|
* Object literal defining the server side actions and methods. For example, if
|
|
* the Provider is configured with:
|
|
*
|
|
* // each property within the 'actions' object represents a server side Class
|
|
* actions: {
|
|
* TestAction: [ // array of methods within each server side Class to be
|
|
* { // stubbed out on client
|
|
* name: 'doEcho', // stub method will be TestAction.doEcho
|
|
* len: 1
|
|
* }, {
|
|
* name: 'multiply', // name of method
|
|
* len: 2 // The number of parameters that will be used to create an
|
|
* // array of data to send to the server side function.
|
|
* }, {
|
|
* name: 'doForm',
|
|
* formHandler: true // tells the client that this method handles form calls
|
|
* }],
|
|
*
|
|
* // These methods will be created in nested namespace TestAction.Foo
|
|
* 'TestAction.Foo': [{
|
|
* name: 'ordered', // stub method will be TestAction.Foo.ordered
|
|
* len: 1
|
|
* }, {
|
|
* name: 'noParams', // this method does not accept any parameters
|
|
* len: 0
|
|
* }, {
|
|
* name: 'named', // stub method will be TestAction.Foo.named
|
|
* params: ['foo', 'bar'] // parameters are passed by name
|
|
* }]
|
|
* }
|
|
*
|
|
* Note that starting with 4.2, dotted Action names will generate nested objects.
|
|
* If you wish to reverse to previous behavior, set {@link #cfg-disableNestedActions}
|
|
* to `true`.
|
|
*
|
|
* In the following example a *client side* handler is used to call the
|
|
* server side method "multiply" in the server-side "TestAction" Class:
|
|
*
|
|
* TestAction.multiply(
|
|
* // pass two arguments to server, so specify len=2
|
|
* 2, 4,
|
|
*
|
|
* // callback function after the server is called
|
|
* // result: the result returned by the server
|
|
* // e: Ext.direct.RemotingEvent object
|
|
* // success: true or false
|
|
* // options: options to be applied to method call and passed to callback
|
|
* function (result, e, success, options) {
|
|
* var t, action, method;
|
|
*
|
|
* t = e.getTransaction();
|
|
* action = t.action; // server side Class called
|
|
* method = t.method; // server side method called
|
|
*
|
|
* if (e.status) {
|
|
* var answer = Ext.encode(result); // 8
|
|
* }
|
|
* else {
|
|
* var msg = e.message; // failure message
|
|
* }
|
|
* },
|
|
*
|
|
* // Scope to call the callback in (optional)
|
|
* window,
|
|
*
|
|
* // Options to apply to this method call. This can include
|
|
* // Ajax.request() options; only `timeout` is supported at this time.
|
|
* // When timeout is set for a method call, it will be executed immediately
|
|
* // without buffering.
|
|
* // The same options object is passed to the callback so it's possible
|
|
* // to "forward" some data when needed.
|
|
* {
|
|
* timeout: 60000, // milliseconds
|
|
* foo: 'bar'
|
|
* }
|
|
* );
|
|
*
|
|
* In the example above, the server side "multiply" function will be passed two
|
|
* arguments (2 and 4). The "multiply" method should return the value 8 which will be
|
|
* available as the `result` in the callback example above.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [disableNestedActions=false]
|
|
* In versions prior to 4.2, using dotted Action names was not really meaningful,
|
|
* because it generated flat {@link #cfg-namespace} object with dotted property names.
|
|
* For example, take this API declaration:
|
|
*
|
|
* {
|
|
* actions: {
|
|
* TestAction: {
|
|
* name: 'foo',
|
|
* len: 1
|
|
* },
|
|
* 'TestAction.Foo' {
|
|
* name: 'bar',
|
|
* len: 1
|
|
* }
|
|
* },
|
|
* namespace: 'MyApp'
|
|
* }
|
|
*
|
|
* Before 4.2, that would generate the following API object:
|
|
*
|
|
* window.MyApp = {
|
|
* TestAction: {
|
|
* foo: function() { ... }
|
|
* },
|
|
* 'TestAction.Foo': {
|
|
* bar: function() { ... }
|
|
* }
|
|
* }
|
|
*
|
|
* In Ext JS 4.2, we introduced new namespace handling behavior. Now the same API object
|
|
* will be like this:
|
|
*
|
|
* window.MyApp = {
|
|
* TestAction: {
|
|
* foo: function() { ... },
|
|
*
|
|
* Foo: {
|
|
* bar: function() { ... }
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* Instead of addressing Action methods array-style `MyApp['TestAction.Foo'].bar()`,
|
|
* now it is possible to use object addressing: `MyApp.TestAction.Foo.bar()`.
|
|
*
|
|
* If you find this behavior undesirable, set this config option to `true`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} namespace
|
|
*
|
|
* Namespace for the Remoting Provider (defaults to `Ext.global`).
|
|
* Explicitly specify the namespace Object, or specify a String to have a
|
|
* {@link Ext#namespace namespace} created implicitly.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} url
|
|
*
|
|
* **Required**. The url to connect to the {@link Ext.direct.Manager} server-side router.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [enableUrlEncode=data]
|
|
*
|
|
* Specify which param will hold the arguments for the method.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/Boolean} [enableBuffer=10]
|
|
*
|
|
* `true` or `false` to enable or disable combining of method
|
|
* calls. If a number is specified this is the amount of time in milliseconds
|
|
* to wait before sending a batched request.
|
|
*
|
|
* Calls which are received within the specified timeframe will be
|
|
* concatenated together and sent in a single request, optimizing the
|
|
* application by reducing the amount of round trips that have to be made
|
|
* to the server. To cancel buffering for some particular invocations, pass
|
|
* `timeout` parameter in `options` object for that method call.
|
|
*/
|
|
enableBuffer: 10,
|
|
|
|
/**
|
|
* @cfg {Number} [maxRetries=1]
|
|
*
|
|
* Number of times to re-attempt delivery on failure of a call.
|
|
*/
|
|
maxRetries: 1,
|
|
|
|
/**
|
|
* @cfg {Number} [timeout]
|
|
*
|
|
* The timeout to use for each request.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforecall
|
|
* @preventable
|
|
*
|
|
* Fires immediately before the client-side sends off the RPC call. By returning
|
|
* `false` from an event handler you can prevent the call from being made.
|
|
*
|
|
* @param {Ext.direct.RemotingProvider} provider
|
|
* @param {Ext.direct.Transaction} transaction
|
|
* @param {Object} meta The meta data
|
|
*/
|
|
'beforecall',
|
|
|
|
/**
|
|
* @event call
|
|
*
|
|
* Fires immediately after the request to the server-side is sent. This does
|
|
* NOT fire after the response has come back from the call.
|
|
*
|
|
* @param {Ext.direct.RemotingProvider} provider
|
|
* @param {Ext.direct.Transaction} transaction
|
|
* @param {Object} meta The meta data
|
|
*/
|
|
'call',
|
|
|
|
/**
|
|
* @event beforecallback
|
|
* @preventable
|
|
*
|
|
* Fires before callback function is executed. By returning `false` from an event handler
|
|
* you can prevent the callback from executing.
|
|
*
|
|
* @param {Ext.direct.RemotingProvider} provider
|
|
* @param {Ext.direct.Transaction} transaction
|
|
*/
|
|
'beforecallback'
|
|
);
|
|
|
|
me.namespace = (Ext.isString(me.namespace)) ? Ext.ns(me.namespace) : me.namespace || Ext.global;
|
|
me.transactions = new Ext.util.MixedCollection();
|
|
me.callBuffer = [];
|
|
},
|
|
|
|
/**
|
|
* Get nested namespace by property.
|
|
*
|
|
* @private
|
|
*/
|
|
getNamespace: function(root, action) {
|
|
var parts, ns, i, l;
|
|
|
|
root = root || Ext.global;
|
|
parts = action.toString().split('.');
|
|
|
|
for (i = 0, l = parts.length; i < l; i++) {
|
|
ns = parts[i];
|
|
root = root[ns];
|
|
|
|
if (typeof root === 'undefined') {
|
|
return root;
|
|
}
|
|
}
|
|
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Create nested namespaces. Unlike {@link Ext#ns} this method supports
|
|
* nested objects as root of the namespace, not only Ext.global (window).
|
|
*
|
|
* @private
|
|
*/
|
|
createNamespaces: function(root, action) {
|
|
var parts, ns;
|
|
|
|
root = root || Ext.global;
|
|
parts = action.toString().split('.');
|
|
|
|
for ( var i = 0, l = parts.length; i < l; i++ ) {
|
|
ns = parts[i];
|
|
|
|
root[ns] = root[ns] || {};
|
|
root = root[ns];
|
|
};
|
|
|
|
return root;
|
|
},
|
|
|
|
/**
|
|
* Initialize the API
|
|
*
|
|
* @private
|
|
*/
|
|
initAPI: function() {
|
|
var me = this,
|
|
actions = me.actions,
|
|
namespace = me.namespace,
|
|
action, cls, methods, i, len, method;
|
|
|
|
for (action in actions) {
|
|
if (actions.hasOwnProperty(action)) {
|
|
if (me.disableNestedActions) {
|
|
cls = namespace[action];
|
|
|
|
if (!cls) {
|
|
cls = namespace[action] = {};
|
|
}
|
|
}
|
|
else {
|
|
cls = me.getNamespace(namespace, action);
|
|
|
|
if (!cls) {
|
|
cls = me.createNamespaces(namespace, action);
|
|
}
|
|
}
|
|
|
|
methods = actions[action];
|
|
|
|
for (i = 0, len = methods.length; i < len; ++i) {
|
|
method = new Ext.direct.RemotingMethod(methods[i]);
|
|
cls[method.name] = me.createHandler(action, method);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Create a handler function for a direct call.
|
|
*
|
|
* @param {String} action The action the call is for
|
|
* @param {Object} method The details of the method
|
|
*
|
|
* @return {Function} A JS function that will kick off the call
|
|
*
|
|
* @private
|
|
*/
|
|
createHandler: function(action, method) {
|
|
var me = this,
|
|
slice = Array.prototype.slice,
|
|
handler;
|
|
|
|
if (!method.formHandler) {
|
|
handler = function() {
|
|
me.configureRequest(action, method, slice.call(arguments, 0));
|
|
};
|
|
}
|
|
else {
|
|
handler = function(form, callback, scope) {
|
|
me.configureFormRequest(action, method, form, callback, scope);
|
|
};
|
|
}
|
|
|
|
handler.directCfg = {
|
|
action: action,
|
|
method: method
|
|
};
|
|
|
|
return handler;
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
isConnected: function() {
|
|
return !!this.connected;
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
connect: function() {
|
|
var me = this;
|
|
|
|
if (me.url) {
|
|
me.initAPI();
|
|
me.connected = true;
|
|
me.fireEvent('connect', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @inheritdoc
|
|
*/
|
|
disconnect: function() {
|
|
var me = this;
|
|
|
|
if (me.connected) {
|
|
me.connected = false;
|
|
me.fireEvent('disconnect', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Run any callbacks related to the transaction.
|
|
*
|
|
* @param {Ext.direct.Transaction} transaction The transaction
|
|
* @param {Ext.direct.Event} event The event
|
|
*
|
|
* @private
|
|
*/
|
|
runCallback: function(transaction, event) {
|
|
var success = !!event.status,
|
|
funcName = success ? 'success' : 'failure',
|
|
callback, options, result;
|
|
|
|
if (transaction && transaction.callback) {
|
|
callback = transaction.callback;
|
|
options = transaction.callbackOptions;
|
|
result = typeof event.result !== 'undefined' ? event.result : event.data;
|
|
|
|
if (Ext.isFunction(callback)) {
|
|
callback(result, event, success, options);
|
|
}
|
|
else {
|
|
Ext.callback(callback[funcName], callback.scope, [result, event, success, options]);
|
|
Ext.callback(callback.callback, callback.scope, [result, event, success, options]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* React to the ajax request being completed
|
|
*
|
|
* @private
|
|
*/
|
|
onData: function(options, success, response) {
|
|
var me = this,
|
|
i, len, events, event, transaction, transactions;
|
|
|
|
if (success) {
|
|
events = me.createEvents(response);
|
|
|
|
for (i = 0, len = events.length; i < len; ++i) {
|
|
event = events[i];
|
|
transaction = me.getTransaction(event);
|
|
me.fireEvent('data', me, event);
|
|
|
|
if (transaction && me.fireEvent('beforecallback', me, event, transaction) !== false) {
|
|
me.runCallback(transaction, event, true);
|
|
Ext.direct.Manager.removeTransaction(transaction);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
transactions = [].concat(options.transaction);
|
|
|
|
for (i = 0, len = transactions.length; i < len; ++i) {
|
|
transaction = me.getTransaction(transactions[i]);
|
|
|
|
if (transaction && transaction.retryCount < me.maxRetries) {
|
|
transaction.retry();
|
|
}
|
|
else {
|
|
event = new Ext.direct.ExceptionEvent({
|
|
data: null,
|
|
transaction: transaction,
|
|
code: Ext.direct.Manager.exceptions.TRANSPORT,
|
|
message: 'Unable to connect to the server.',
|
|
xhr: response
|
|
});
|
|
|
|
me.fireEvent('data', me, event);
|
|
|
|
if (transaction && me.fireEvent('beforecallback', me, transaction) !== false) {
|
|
me.runCallback(transaction, event, false);
|
|
Ext.direct.Manager.removeTransaction(transaction);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get transaction from XHR options
|
|
*
|
|
* @param {Object} options The options sent to the Ajax request
|
|
*
|
|
* @return {Ext.direct.Transaction} The transaction, null if not found
|
|
*
|
|
* @private
|
|
*/
|
|
getTransaction: function(options) {
|
|
return options && options.tid ? Ext.direct.Manager.getTransaction(options.tid) : null;
|
|
},
|
|
|
|
/**
|
|
* Configure a direct request
|
|
*
|
|
* @param {String} action The action being executed
|
|
* @param {Object} method The being executed
|
|
*
|
|
* @private
|
|
*/
|
|
configureRequest: function(action, method, args) {
|
|
var me = this,
|
|
callData, data, callback, scope, opts, transaction, params;
|
|
|
|
callData = method.getCallData(args);
|
|
data = callData.data;
|
|
callback = callData.callback;
|
|
scope = callData.scope;
|
|
opts = callData.options || {};
|
|
|
|
params = Ext.apply({}, {
|
|
provider: me,
|
|
args: args,
|
|
action: action,
|
|
method: method.name,
|
|
data: data,
|
|
callbackOptions: opts,
|
|
callback: scope && Ext.isFunction(callback) ? Ext.Function.bind(callback, scope) : callback
|
|
});
|
|
|
|
if (opts.timeout) {
|
|
Ext.applyIf(params, {
|
|
timeout: opts.timeout
|
|
});
|
|
};
|
|
|
|
transaction = new Ext.direct.Transaction(params);
|
|
|
|
if (me.fireEvent('beforecall', me, transaction, method) !== false) {
|
|
Ext.direct.Manager.addTransaction(transaction);
|
|
me.queueTransaction(transaction);
|
|
me.fireEvent('call', me, transaction, method);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the Ajax call info for a transaction
|
|
*
|
|
* @param {Ext.direct.Transaction} transaction The transaction
|
|
*
|
|
* @return {Object} The call params
|
|
*
|
|
* @private
|
|
*/
|
|
getCallData: function(transaction) {
|
|
return {
|
|
action: transaction.action,
|
|
method: transaction.method,
|
|
data: transaction.data,
|
|
type: 'rpc',
|
|
tid: transaction.id
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Sends a request to the server
|
|
*
|
|
* @param {Object/Array} data The data to send
|
|
*
|
|
* @private
|
|
*/
|
|
sendRequest: function(data) {
|
|
var me = this,
|
|
request, callData, params,
|
|
enableUrlEncode = me.enableUrlEncode,
|
|
i, len;
|
|
|
|
request = {
|
|
url: me.url,
|
|
callback: me.onData,
|
|
scope: me,
|
|
transaction: data,
|
|
timeout: me.timeout
|
|
};
|
|
|
|
// Explicitly specified timeout for Ext.Direct call overrides defaults
|
|
if (data.timeout) {
|
|
request.timeout = data.timeout;
|
|
}
|
|
|
|
if (Ext.isArray(data)) {
|
|
callData = [];
|
|
|
|
for (i = 0, len = data.length; i < len; ++i) {
|
|
callData.push(me.getCallData(data[i]));
|
|
}
|
|
}
|
|
else {
|
|
callData = me.getCallData(data);
|
|
}
|
|
|
|
if (enableUrlEncode) {
|
|
params = {};
|
|
params[Ext.isString(enableUrlEncode) ? enableUrlEncode : 'data'] = Ext.encode(callData);
|
|
request.params = params;
|
|
}
|
|
else {
|
|
request.jsonData = callData;
|
|
}
|
|
|
|
Ext.Ajax.request(request);
|
|
},
|
|
|
|
/**
|
|
* Add a new transaction to the queue
|
|
*
|
|
* @param {Ext.direct.Transaction} transaction The transaction
|
|
*
|
|
* @private
|
|
*/
|
|
queueTransaction: function(transaction) {
|
|
var me = this,
|
|
enableBuffer = me.enableBuffer;
|
|
|
|
if (transaction.form) {
|
|
me.sendFormRequest(transaction);
|
|
return;
|
|
}
|
|
|
|
if (enableBuffer === false || typeof transaction.timeout !== 'undefined') {
|
|
me.sendRequest(transaction);
|
|
return;
|
|
}
|
|
|
|
me.callBuffer.push(transaction);
|
|
|
|
if (enableBuffer) {
|
|
if (!me.callTask) {
|
|
me.callTask = new Ext.util.DelayedTask(me.combineAndSend, me);
|
|
}
|
|
|
|
me.callTask.delay(Ext.isNumber(enableBuffer) ? enableBuffer : 10);
|
|
}
|
|
else {
|
|
me.combineAndSend();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Combine any buffered requests and send them off
|
|
*
|
|
* @private
|
|
*/
|
|
combineAndSend : function() {
|
|
var me = this,
|
|
buffer = me.callBuffer,
|
|
len = buffer.length;
|
|
|
|
if (len > 0) {
|
|
me.sendRequest(len == 1 ? buffer[0] : buffer);
|
|
me.callBuffer = [];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Configure a form submission request
|
|
*
|
|
* @param {String} action The action being executed
|
|
* @param {Object} method The method being executed
|
|
* @param {HTMLElement} form The form being submitted
|
|
* @param {Function} [callback] A callback to run after the form submits
|
|
* @param {Object} [scope] A scope to execute the callback in
|
|
*
|
|
* @private
|
|
*/
|
|
configureFormRequest: function(action, method, form, callback, scope) {
|
|
var me = this,
|
|
transaction, isUpload, params;
|
|
|
|
transaction = new Ext.direct.Transaction({
|
|
provider: me,
|
|
action: action,
|
|
method: method.name,
|
|
args: [form, callback, scope],
|
|
callback: scope && Ext.isFunction(callback) ? Ext.Function.bind(callback, scope) : callback,
|
|
isForm: true
|
|
});
|
|
|
|
if (me.fireEvent('beforecall', me, transaction, method) !== false) {
|
|
Ext.direct.Manager.addTransaction(transaction);
|
|
isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data';
|
|
|
|
params = {
|
|
extTID: transaction.id,
|
|
extAction: action,
|
|
extMethod: method.name,
|
|
extType: 'rpc',
|
|
extUpload: String(isUpload)
|
|
};
|
|
|
|
// change made from typeof callback check to callback.params
|
|
// to support addl param passing in DirectSubmit EAC 6/2
|
|
Ext.apply(transaction, {
|
|
form: Ext.getDom(form),
|
|
isUpload: isUpload,
|
|
params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params
|
|
});
|
|
|
|
me.fireEvent('call', me, transaction, method);
|
|
me.sendFormRequest(transaction);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sends a form request
|
|
*
|
|
* @param {Ext.direct.Transaction} transaction The transaction to send
|
|
*
|
|
* @private
|
|
*/
|
|
sendFormRequest: function(transaction) {
|
|
var me = this;
|
|
|
|
Ext.Ajax.request({
|
|
url: me.url,
|
|
params: transaction.params,
|
|
callback: me.onData,
|
|
scope: me,
|
|
form: transaction.form,
|
|
isUpload: transaction.isUpload,
|
|
transaction: transaction
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An extended {@link Ext.Element} object that supports a shadow and shim, constrain to viewport and
|
|
* automatic maintaining of shadow/shim positions.
|
|
*/
|
|
Ext.define('Ext.dom.Layer', {
|
|
extend: Ext.Element ,
|
|
|
|
alternateClassName: 'Ext.Layer',
|
|
|
|
/**
|
|
* @cfg {Boolean} [shim=true]
|
|
* False to disable the iframe shim in browsers which need one.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Boolean} [shadow=false]
|
|
* True to automatically create an {@link Ext.Shadow}, or a string indicating the
|
|
* shadow's display {@link Ext.Shadow#mode}. False to disable the shadow.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} [dh={tag: 'div', cls: 'x-layer'}]
|
|
* DomHelper object config to create element with.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [constrain=true]
|
|
* False to disable constrain to viewport.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} cls
|
|
* CSS class to add to the element
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} [zindex=11000]
|
|
* Starting z-index.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} [shadowOffset=4]
|
|
* Number of pixels to offset the shadow
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [useDisplay=false]
|
|
* Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>
|
|
* to use css style <tt>'display:none;'</tt> to hide the Layer.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} visibilityCls
|
|
* The CSS class name to add in order to hide this Layer if this layer
|
|
* is configured with <code>{@link #hideMode}: 'asclass'</code>
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} hideMode
|
|
* A String which specifies how this Layer will be hidden.
|
|
* Values may be:
|
|
*
|
|
* - `'display'` : The Component will be hidden using the `display: none` style.
|
|
* - `'visibility'` : The Component will be hidden using the `visibility: hidden` style.
|
|
* - `'offsets'` : The Component will be hidden by absolutely positioning it out of the visible area
|
|
* of the document. This is useful when a hidden Component must maintain measurable dimensions.
|
|
* Hiding using `display` results in a Component having zero dimensions.
|
|
*/
|
|
|
|
// shims are shared among layer to keep from having 100 iframes
|
|
statics: {
|
|
shims: []
|
|
},
|
|
|
|
isLayer: true,
|
|
|
|
localXYNames: {
|
|
get: 'getLocalXY',
|
|
set: 'setLocalXY'
|
|
},
|
|
|
|
/**
|
|
* Creates new Layer.
|
|
* @param {Object} [config] An object with config options.
|
|
* @param {String/HTMLElement} [existingEl] Uses an existing DOM element.
|
|
* If the element is not found it creates it.
|
|
*/
|
|
constructor: function(config, existingEl) {
|
|
config = config || {};
|
|
var me = this,
|
|
dh = Ext.DomHelper,
|
|
cp = config.parentEl,
|
|
pel = cp ? Ext.getDom(cp) : document.body,
|
|
hm = config.hideMode,
|
|
cls = Ext.baseCSSPrefix + (config.fixed && !(Ext.isIE6 || Ext.isIEQuirks) ? 'fixed-layer' : 'layer');
|
|
|
|
// set an "el" property that references "this". This allows
|
|
// Ext.util.Positionable methods to operate on this.el.dom since it
|
|
// gets mixed into both Element and Component
|
|
me.el = me;
|
|
|
|
if (existingEl) {
|
|
me.dom = Ext.getDom(existingEl);
|
|
}
|
|
if (!me.dom) {
|
|
me.dom = dh.append(pel, config.dh || {
|
|
tag: 'div',
|
|
cls: cls // primarily to give el 'position:absolute' or, if fixed, 'position:fixed'
|
|
});
|
|
} else {
|
|
me.addCls(cls);
|
|
if (!me.dom.parentNode) {
|
|
pel.appendChild(me.dom);
|
|
}
|
|
}
|
|
|
|
if (config.preventSync) {
|
|
me.preventSync = true;
|
|
}
|
|
|
|
if (config.id) {
|
|
me.id = me.dom.id = config.id;
|
|
} else {
|
|
me.id = Ext.id(me.dom);
|
|
}
|
|
|
|
Ext.Element.addToCache(me);
|
|
|
|
if (config.cls) {
|
|
me.addCls(config.cls);
|
|
}
|
|
me.constrain = config.constrain !== false;
|
|
|
|
// Allow Components to pass their hide mode down to the Layer if they are floating.
|
|
// Otherwise, allow useDisplay to override the default hiding method which is visibility.
|
|
// TODO: Have ExtJS's Element implement visibilityMode by using classes as in Mobile.
|
|
if (hm) {
|
|
me.setVisibilityMode(Ext.Element[hm.toUpperCase()]);
|
|
if (me.visibilityMode == Ext.Element.ASCLASS) {
|
|
me.visibilityCls = config.visibilityCls;
|
|
}
|
|
} else if (config.useDisplay) {
|
|
me.setVisibilityMode(Ext.Element.DISPLAY);
|
|
} else {
|
|
me.setVisibilityMode(Ext.Element.VISIBILITY);
|
|
}
|
|
|
|
if (config.shadow) {
|
|
me.shadowOffset = config.shadowOffset || 4;
|
|
me.shadow = new Ext.Shadow({
|
|
offset: me.shadowOffset,
|
|
mode: config.shadow,
|
|
fixed: config.fixed
|
|
});
|
|
me.disableShadow();
|
|
} else {
|
|
me.shadowOffset = 0;
|
|
}
|
|
me.useShim = config.shim !== false && Ext.useShims;
|
|
if (config.hidden === true) {
|
|
me.hide();
|
|
} else {
|
|
me.show();
|
|
}
|
|
},
|
|
|
|
getZIndex: function() {
|
|
return parseInt((this.getShim() || this).getStyle('z-index'), 10);
|
|
},
|
|
|
|
getShim: function() {
|
|
var me = this,
|
|
shim, pn;
|
|
|
|
if (!me.useShim) {
|
|
return null;
|
|
}
|
|
if (!me.shim) {
|
|
shim = me.self.shims.shift();
|
|
if (!shim) {
|
|
shim = me.createShim();
|
|
shim.enableDisplayMode('block');
|
|
shim.hide();
|
|
}
|
|
pn = me.dom.parentNode;
|
|
if (shim.dom.parentNode != pn) {
|
|
pn.insertBefore(shim.dom, me.dom);
|
|
}
|
|
me.shim = shim;
|
|
}
|
|
return me.shim;
|
|
},
|
|
|
|
hideShim: function() {
|
|
var me = this;
|
|
|
|
if (me.shim) {
|
|
me.shim.setDisplayed(false);
|
|
me.self.shims.push(me.shim);
|
|
delete me.shim;
|
|
}
|
|
},
|
|
|
|
disableShadow: function() {
|
|
var me = this;
|
|
|
|
if (me.shadow && !me.shadowDisabled) {
|
|
me.shadowDisabled = true;
|
|
me.shadow.hide();
|
|
me.lastShadowOffset = me.shadowOffset;
|
|
me.shadowOffset = 0;
|
|
}
|
|
},
|
|
|
|
enableShadow: function(show) {
|
|
var me = this;
|
|
|
|
if (me.shadow && me.shadowDisabled) {
|
|
me.shadowDisabled = false;
|
|
me.shadowOffset = me.lastShadowOffset;
|
|
delete me.lastShadowOffset;
|
|
if (show) {
|
|
me.sync(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Synchronize this Layer's associated elements, the shadow, and possibly the shim.
|
|
*
|
|
* This code can execute repeatedly in milliseconds,
|
|
* eg: dragging a Component configured liveDrag: true, or which has no ghost method
|
|
* so code size was sacrificed for efficiency (e.g. no getBox/setBox, no XY calls)
|
|
*
|
|
* @param {Boolean} doShow Pass true to ensure that the shadow is shown.
|
|
*/
|
|
sync: function(doShow) {
|
|
var me = this,
|
|
shadow = me.shadow,
|
|
shadowPos, shimStyle, shadowSize,
|
|
shim, xy, x, y, w, h, shimIndex;
|
|
|
|
if (me.preventSync) {
|
|
return;
|
|
}
|
|
|
|
if (!me.updating && me.isVisible() && (shadow || me.useShim)) {
|
|
shim = me.getShim();
|
|
xy = me[me.localXYNames.get]();
|
|
x = xy[0];
|
|
y = xy[1];
|
|
w = me.dom.offsetWidth;
|
|
h = me.dom.offsetHeight;
|
|
|
|
if (shadow && !me.shadowDisabled) {
|
|
if (doShow && !shadow.isVisible()) {
|
|
shadow.show(me);
|
|
} else {
|
|
shadow.realign(x, y, w, h);
|
|
}
|
|
if (shim) {
|
|
// TODO: Determine how the shims zIndex is above the layer zIndex at this point
|
|
shimIndex = shim.getStyle('z-index');
|
|
if (shimIndex > me.zindex) {
|
|
me.shim.setStyle('z-index', me.zindex - 2);
|
|
}
|
|
shim.show();
|
|
// fit the shim behind the shadow, so it is shimmed too
|
|
if (shadow.isVisible()) {
|
|
shadowPos = shadow.el.getXY();
|
|
shimStyle = shim.dom.style;
|
|
shadowSize = shadow.el.getSize();
|
|
if (Ext.supports.CSS3BoxShadow) {
|
|
shadowSize.height += 6;
|
|
shadowSize.width += 4;
|
|
shadowPos[0] -= 2;
|
|
shadowPos[1] -= 4;
|
|
}
|
|
shimStyle.left = (shadowPos[0]) + 'px';
|
|
shimStyle.top = (shadowPos[1]) + 'px';
|
|
shimStyle.width = (shadowSize.width) + 'px';
|
|
shimStyle.height = (shadowSize.height) + 'px';
|
|
} else {
|
|
shim.setSize(w, h);
|
|
shim[me.localXYNames.set](x, y);
|
|
}
|
|
}
|
|
} else if (shim) {
|
|
// TODO: Determine how the shims zIndex is above the layer zIndex at this point
|
|
shimIndex = shim.getStyle('z-index');
|
|
if (shimIndex > me.zindex) {
|
|
me.shim.setStyle('z-index', me.zindex - 2);
|
|
}
|
|
shim.show();
|
|
shim.setSize(w, h);
|
|
shim[me.localXYNames.set](x, y);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
remove: function() {
|
|
this.hideUnders();
|
|
this.callParent();
|
|
},
|
|
|
|
// @private
|
|
beginUpdate: function() {
|
|
this.updating = true;
|
|
},
|
|
|
|
// @private
|
|
endUpdate: function() {
|
|
this.updating = false;
|
|
this.sync(true);
|
|
},
|
|
|
|
// @private
|
|
hideUnders: function() {
|
|
if (this.shadow) {
|
|
this.shadow.hide();
|
|
}
|
|
this.hideShim();
|
|
},
|
|
|
|
// @private
|
|
constrainXY: function() {
|
|
if (this.constrain) {
|
|
var vw = Ext.Element.getViewWidth(),
|
|
vh = Ext.Element.getViewHeight(),
|
|
s = Ext.getDoc().getScroll(),
|
|
xy = this.getXY(),
|
|
x = xy[0],
|
|
y = xy[1],
|
|
so = this.shadowOffset,
|
|
w = this.dom.offsetWidth + so,
|
|
h = this.dom.offsetHeight + so,
|
|
moved = false; // only move it if it needs it
|
|
// first validate right/bottom
|
|
if ((x + w) > vw + s.left) {
|
|
x = vw - w - so;
|
|
moved = true;
|
|
}
|
|
if ((y + h) > vh + s.top) {
|
|
y = vh - h - so;
|
|
moved = true;
|
|
}
|
|
// then make sure top/left isn't negative
|
|
if (x < s.left) {
|
|
x = s.left;
|
|
moved = true;
|
|
}
|
|
if (y < s.top) {
|
|
y = s.top;
|
|
moved = true;
|
|
}
|
|
if (moved) {
|
|
Ext.Layer.superclass.setXY.call(this, [x, y]);
|
|
this.sync();
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
getConstrainOffset: function() {
|
|
return this.shadowOffset;
|
|
},
|
|
|
|
// overridden Element method
|
|
setVisible: function(visible, animate, duration, callback, easing) {
|
|
var me = this,
|
|
cb;
|
|
|
|
// post operation processing
|
|
cb = function() {
|
|
if (visible) {
|
|
me.sync(true);
|
|
}
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
};
|
|
|
|
// Hide shadow and shim if hiding
|
|
if (!visible) {
|
|
me.hideUnders(true);
|
|
}
|
|
me.callParent([visible, animate, duration, callback, easing]);
|
|
if (!animate) {
|
|
cb();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// @private
|
|
beforeFx: function() {
|
|
this.beforeAction();
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
afterFx: function() {
|
|
this.callParent(arguments);
|
|
this.sync(this.isVisible());
|
|
},
|
|
|
|
// @private
|
|
beforeAction: function() {
|
|
if (!this.updating && this.shadow) {
|
|
this.shadow.hide();
|
|
}
|
|
},
|
|
|
|
// overridden Element method
|
|
setLeft: function(left) {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
setTop: function(top) {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
setLeftTop: function(left, top) {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
setLocalX: function() {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
setLocalXY: function() {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
setLocalY: function() {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
setXY: function(xy, animate, duration, callback, easing) {
|
|
var me = this;
|
|
|
|
// Callback will restore shadow state and call the passed callback
|
|
callback = me.createCB(callback);
|
|
|
|
me.fixDisplay();
|
|
me.beforeAction();
|
|
me.callParent([xy, animate, duration, callback, easing]);
|
|
if (!animate) {
|
|
callback();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// @private
|
|
createCB: function(callback) {
|
|
var me = this,
|
|
showShadow = me.shadow && me.shadow.isVisible();
|
|
|
|
return function() {
|
|
me.constrainXY();
|
|
me.sync(showShadow);
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
};
|
|
},
|
|
|
|
// overridden Element method
|
|
setX: function(x, animate, duration, callback, easing) {
|
|
this.setXY([x, this.getY()], animate, duration, callback, easing);
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setY: function(y, animate, duration, callback, easing) {
|
|
this.setXY([this.getX(), y], animate, duration, callback, easing);
|
|
return this;
|
|
},
|
|
|
|
// overridden Element method
|
|
setSize: function(w, h, animate, duration, callback, easing) {
|
|
var me = this;
|
|
|
|
// Callback will restore shadow state and call the passed callback
|
|
callback = me.createCB(callback);
|
|
|
|
me.beforeAction();
|
|
me.callParent([w, h, animate, duration, callback, easing]);
|
|
if (!animate) {
|
|
callback();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// overridden Element method
|
|
setWidth: function(w, animate, duration, callback, easing) {
|
|
var me = this;
|
|
|
|
// Callback will restore shadow state and call the passed callback
|
|
callback = me.createCB(callback);
|
|
|
|
me.beforeAction();
|
|
me.callParent([w, animate, duration, callback, easing]);
|
|
if (!animate) {
|
|
callback();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// overridden Element method
|
|
setHeight: function(h, animate, duration, callback, easing) {
|
|
var me = this;
|
|
|
|
// Callback will restore shadow state and call the passed callback
|
|
callback = me.createCB(callback);
|
|
|
|
me.beforeAction();
|
|
me.callParent([h, animate, duration, callback, easing]);
|
|
if (!animate) {
|
|
callback();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// overridden Element method
|
|
setBounds: function(x, y, width, height, animate, duration, callback, easing) {
|
|
var me = this;
|
|
|
|
// Callback will restore shadow state and call the passed callback
|
|
callback = me.createCB(callback);
|
|
|
|
me.beforeAction();
|
|
if (!animate) {
|
|
Ext.Layer.superclass.setXY.call(me, [x, y]);
|
|
Ext.Layer.superclass.setSize.call(me, width, height);
|
|
callback();
|
|
} else {
|
|
me.callParent([x, y, width, height, animate, duration, callback, easing]);
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer
|
|
* z-index is automatically incremented depending upon the presence of a shim or a
|
|
* shadow in so that it always shows above those two associated elements.
|
|
*
|
|
* Any shim, will be assigned the passed z-index. A shadow will be assigned the next
|
|
* highet z-index, and the Layer's element will receive the highest z-index.
|
|
*
|
|
* @param {Number} zindex The new z-index to set
|
|
* @return {Ext.Layer} The Layer
|
|
*/
|
|
setZIndex: function(zindex) {
|
|
var me = this;
|
|
|
|
me.zindex = zindex;
|
|
if (me.getShim()) {
|
|
me.shim.setStyle('z-index', zindex++);
|
|
}
|
|
if (me.shadow) {
|
|
me.shadow.setZIndex(zindex++);
|
|
}
|
|
return me.setStyle('z-index', zindex);
|
|
},
|
|
|
|
onOpacitySet: function(opacity){
|
|
var shadow = this.shadow;
|
|
if (shadow) {
|
|
shadow.setOpacity(opacity);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @override Ext.rtl.dom.Layer
|
|
* This override adds RTL positioning methods to Ext.dom.Layer.
|
|
*/
|
|
Ext.define('Ext.rtl.dom.Layer', {
|
|
override: 'Ext.dom.Layer',
|
|
|
|
rtlLocalXYNames: {
|
|
get: 'rtlGetLocalXY',
|
|
set: 'rtlSetLocalXY'
|
|
},
|
|
|
|
rtlSetLocalX: function() {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
rtlSetLocalXY: function() {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
rtlSetLocalY: function() {
|
|
this.callParent(arguments);
|
|
return this.sync();
|
|
},
|
|
|
|
rtlSetXY: function(xy, animate, duration, callback, easing) {
|
|
var me = this;
|
|
|
|
// Callback will restore shadow state and call the passed callback
|
|
callback = me.createCB(callback);
|
|
|
|
me.fixDisplay();
|
|
me.beforeAction();
|
|
me.callParent([xy, animate, duration, callback, easing]);
|
|
if (!animate) {
|
|
callback();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
setRtl: function(rtl) {
|
|
var me = this,
|
|
shadow = me.shadow;
|
|
|
|
me.localXYNames = rtl ? me.rtlLocalXYNames : Ext.dom.Layer.prototype.localXYNames;
|
|
|
|
if (shadow) {
|
|
shadow.localXYNames = me.localXYNames;
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.draw.Matrix', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function(a, b, c, d, e, f) {
|
|
if (a != null) {
|
|
this.matrix = [[a, c, e], [b, d, f], [0, 0, 1]];
|
|
}
|
|
else {
|
|
this.matrix = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
|
|
}
|
|
},
|
|
|
|
add: function(a, b, c, d, e, f) {
|
|
var me = this,
|
|
out = [[], [], []],
|
|
matrix = [[a, c, e], [b, d, f], [0, 0, 1]],
|
|
x,
|
|
y,
|
|
z,
|
|
res;
|
|
|
|
for (x = 0; x < 3; x++) {
|
|
for (y = 0; y < 3; y++) {
|
|
res = 0;
|
|
for (z = 0; z < 3; z++) {
|
|
res += me.matrix[x][z] * matrix[z][y];
|
|
}
|
|
out[x][y] = res;
|
|
}
|
|
}
|
|
me.matrix = out;
|
|
},
|
|
|
|
prepend: function(a, b, c, d, e, f) {
|
|
var me = this,
|
|
out = [[], [], []],
|
|
matrix = [[a, c, e], [b, d, f], [0, 0, 1]],
|
|
x,
|
|
y,
|
|
z,
|
|
res;
|
|
|
|
for (x = 0; x < 3; x++) {
|
|
for (y = 0; y < 3; y++) {
|
|
res = 0;
|
|
for (z = 0; z < 3; z++) {
|
|
res += matrix[x][z] * me.matrix[z][y];
|
|
}
|
|
out[x][y] = res;
|
|
}
|
|
}
|
|
me.matrix = out;
|
|
},
|
|
|
|
invert: function() {
|
|
var matrix = this.matrix,
|
|
a = matrix[0][0],
|
|
b = matrix[1][0],
|
|
c = matrix[0][1],
|
|
d = matrix[1][1],
|
|
e = matrix[0][2],
|
|
f = matrix[1][2],
|
|
x = a * d - b * c;
|
|
return new Ext.draw.Matrix(d / x, -b / x, -c / x, a / x, (c * f - d * e) / x, (b * e - a * f) / x);
|
|
},
|
|
|
|
clone: function() {
|
|
var matrix = this.matrix,
|
|
a = matrix[0][0],
|
|
b = matrix[1][0],
|
|
c = matrix[0][1],
|
|
d = matrix[1][1],
|
|
e = matrix[0][2],
|
|
f = matrix[1][2];
|
|
return new Ext.draw.Matrix(a, b, c, d, e, f);
|
|
},
|
|
|
|
translate: function(x, y) {
|
|
this.prepend(1, 0, 0, 1, x, y);
|
|
},
|
|
|
|
scale: function(x, y, cx, cy) {
|
|
var me = this;
|
|
if (y == null) {
|
|
y = x;
|
|
}
|
|
me.add(x, 0, 0, y, cx * (1 - x), cy * (1 - y));
|
|
},
|
|
|
|
rotate: function(a, x, y) {
|
|
a = Ext.draw.Draw.rad(a);
|
|
var me = this,
|
|
cos = +Math.cos(a).toFixed(9),
|
|
sin = +Math.sin(a).toFixed(9);
|
|
me.add(cos, sin, -sin, cos, x - cos * x + sin * y, -(sin * x) + y - cos * y);
|
|
},
|
|
|
|
x: function(x, y) {
|
|
var matrix = this.matrix;
|
|
return x * matrix[0][0] + y * matrix[0][1] + matrix[0][2];
|
|
},
|
|
|
|
y: function(x, y) {
|
|
var matrix = this.matrix;
|
|
return x * matrix[1][0] + y * matrix[1][1] + matrix[1][2];
|
|
},
|
|
|
|
get: function(i, j) {
|
|
return + this.matrix[i][j].toFixed(4);
|
|
},
|
|
|
|
toString: function() {
|
|
var me = this;
|
|
return [me.get(0, 0), me.get(0, 1), me.get(1, 0), me.get(1, 1), 0, 0].join();
|
|
},
|
|
|
|
toSvg: function() {
|
|
var me = this;
|
|
return "matrix(" + [me.get(0, 0), me.get(1, 0), me.get(0, 1), me.get(1, 1), me.get(0, 2), me.get(1, 2)].join() + ")";
|
|
},
|
|
|
|
toFilter: function(dx, dy) {
|
|
var me = this;
|
|
dx = dx || 0;
|
|
dy = dy || 0;
|
|
return "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', filterType='bilinear', M11=" + me.get(0, 0) +
|
|
", M12=" + me.get(0, 1) + ", M21=" + me.get(1, 0) + ", M22=" + me.get(1, 1) +
|
|
", Dx=" + (me.get(0, 2) + dx) + ", Dy=" + (me.get(1, 2) + dy) + ")";
|
|
},
|
|
|
|
offset: function() {
|
|
var matrix = this.matrix;
|
|
return [(matrix[0][2] || 0).toFixed(4), (matrix[1][2] || 0).toFixed(4)];
|
|
},
|
|
|
|
// Split matrix into Translate Scale, Shear, and Rotate
|
|
split: function () {
|
|
function norm(a) {
|
|
return a[0] * a[0] + a[1] * a[1];
|
|
}
|
|
function normalize(a) {
|
|
var mag = Math.sqrt(norm(a));
|
|
a[0] /= mag;
|
|
a[1] /= mag;
|
|
}
|
|
var matrix = this.matrix,
|
|
out = {
|
|
translateX: matrix[0][2],
|
|
translateY: matrix[1][2]
|
|
},
|
|
row;
|
|
|
|
// scale and shear
|
|
row = [[matrix[0][0], matrix[0][1]], [matrix[1][1], matrix[1][1]]];
|
|
out.scaleX = Math.sqrt(norm(row[0]));
|
|
normalize(row[0]);
|
|
|
|
out.shear = row[0][0] * row[1][0] + row[0][1] * row[1][1];
|
|
row[1] = [row[1][0] - row[0][0] * out.shear, row[1][1] - row[0][1] * out.shear];
|
|
|
|
out.scaleY = Math.sqrt(norm(row[1]));
|
|
normalize(row[1]);
|
|
out.shear /= out.scaleY;
|
|
|
|
// rotation
|
|
out.rotate = Math.asin(-row[0][1]);
|
|
|
|
out.isSimple = !+out.shear.toFixed(9) && (out.scaleX.toFixed(9) == out.scaleY.toFixed(9) || !out.rotate);
|
|
|
|
return out;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* DD implementation for Panels.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.draw.SpriteDD', {
|
|
extend: Ext.dd.DragSource ,
|
|
|
|
constructor : function(sprite, cfg){
|
|
var me = this,
|
|
el = sprite.el;
|
|
me.sprite = sprite;
|
|
me.el = el;
|
|
me.dragData = {el: el, sprite: sprite};
|
|
me.callParent([el, cfg]);
|
|
me.sprite.setStyle('cursor', 'move');
|
|
},
|
|
|
|
showFrame: Ext.emptyFn,
|
|
createFrame : Ext.emptyFn,
|
|
|
|
getDragEl : function(e){
|
|
return this.el;
|
|
},
|
|
|
|
getRegion: function() {
|
|
var me = this,
|
|
el = me.el,
|
|
pos, x1, x2, y1, y2, t, r, b, l, bbox, sprite;
|
|
|
|
sprite = me.sprite;
|
|
bbox = sprite.getBBox();
|
|
|
|
try {
|
|
pos = Ext.Element.getXY(el);
|
|
} catch (e) { }
|
|
|
|
if (!pos) {
|
|
return null;
|
|
}
|
|
|
|
x1 = pos[0];
|
|
x2 = x1 + bbox.width;
|
|
y1 = pos[1];
|
|
y2 = y1 + bbox.height;
|
|
|
|
return new Ext.util.Region(y1, x2, y2, x1);
|
|
},
|
|
|
|
/*
|
|
TODO(nico): Cumulative translations in VML are handled
|
|
differently than in SVG. While in SVG we specify the translation
|
|
relative to the original x, y position attributes, in VML the translation
|
|
is a delta between the last position of the object (modified by the last
|
|
translation) and the new one.
|
|
|
|
In VML the translation alters the position
|
|
of the object, we should change that or alter the SVG impl.
|
|
*/
|
|
|
|
startDrag: function(x, y) {
|
|
var me = this,
|
|
attr = me.sprite.attr;
|
|
me.prev = me.sprite.surface.transformToViewBox(x, y);
|
|
},
|
|
|
|
onDrag: function(e) {
|
|
var xy = e.getXY(),
|
|
me = this,
|
|
sprite = me.sprite,
|
|
attr = sprite.attr, dx, dy;
|
|
xy = me.sprite.surface.transformToViewBox(xy[0], xy[1]);
|
|
dx = xy[0] - me.prev[0];
|
|
dy = xy[1] - me.prev[1];
|
|
sprite.setAttributes({
|
|
translate: {
|
|
x: attr.translation.x + dx,
|
|
y: attr.translation.y + dy
|
|
}
|
|
}, true);
|
|
me.prev = xy;
|
|
},
|
|
|
|
setDragElPos: function () {
|
|
// Disable automatic DOM move in DD that spoils layout of VML engine.
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Sprite is an object rendered in a Drawing surface.
|
|
*
|
|
* ## Types
|
|
*
|
|
* The following sprite types are supported:
|
|
*
|
|
* ### Rect
|
|
*
|
|
* Rectangle requires `width` and `height` attributes:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.draw.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* items: [{
|
|
* type: 'rect',
|
|
* width: 100,
|
|
* height: 50,
|
|
* radius: 10,
|
|
* fill: 'green',
|
|
* opacity: 0.5,
|
|
* stroke: 'red',
|
|
* 'stroke-width': 2
|
|
* }]
|
|
* });
|
|
*
|
|
* ### Circle
|
|
*
|
|
* Circle requires `x`, `y` and `radius` attributes:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.draw.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* items: [{
|
|
* type: 'circle',
|
|
* radius: 90,
|
|
* x: 100,
|
|
* y: 100,
|
|
* fill: 'blue'
|
|
* }]
|
|
* });
|
|
*
|
|
* ### Ellipse
|
|
*
|
|
* Ellipse requires `x`, `y`, `radiusX` and `radiusY` attributes:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.draw.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* items: [{
|
|
* type: "ellipse",
|
|
* radiusX: 100,
|
|
* radiusY: 50,
|
|
* x: 100,
|
|
* y: 100,
|
|
* fill: 'red'
|
|
* }]
|
|
* });
|
|
*
|
|
* ### Path
|
|
*
|
|
* Path requires the `path` attribute:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.draw.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* items: [{
|
|
* type: "path",
|
|
* path: "M-66.6 26C-66.6 26 -75 22 -78.2 18.4C-81.4 14.8 -80.948 19.966 " +
|
|
* "-85.8 19.6C-91.647 19.159 -90.6 3.2 -90.6 3.2L-94.6 10.8C-94.6 " +
|
|
* "10.8 -95.8 25.2 -87.8 22.8C-83.893 21.628 -82.6 23.2 -84.2 " +
|
|
* "24C-85.8 24.8 -78.6 25.2 -81.4 26.8C-84.2 28.4 -69.8 23.2 -72.2 " +
|
|
* "33.6L-66.6 26z",
|
|
* fill: "purple"
|
|
* }]
|
|
* });
|
|
*
|
|
* ### Text
|
|
*
|
|
* Text requires the `text` attribute:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.draw.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* items: [{
|
|
* type: "text",
|
|
* text: "Hello, Sprite!",
|
|
* fill: "green",
|
|
* font: "18px monospace"
|
|
* }]
|
|
* });
|
|
*
|
|
* ### Image
|
|
*
|
|
* Image requires `width`, `height` and `src` attributes:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.draw.Component', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* items: [{
|
|
* type: "image",
|
|
* src: "http://www.sencha.com/img/apple-touch-icon.png",
|
|
* width: 200,
|
|
* height: 200
|
|
* }]
|
|
* });
|
|
*
|
|
* ## Creating and adding a Sprite to a Surface
|
|
*
|
|
* See {@link Ext.draw.Surface} documentation.
|
|
*
|
|
* ## Transforming sprites
|
|
*
|
|
* See {@link #setAttributes} method documentation for examples on how to translate, scale and rotate the sprites.
|
|
*
|
|
*/
|
|
Ext.define('Ext.draw.Sprite', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable ,
|
|
animate: Ext.util.Animate
|
|
},
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* @cfg {String} type The type of the sprite.
|
|
* Possible options are 'circle', 'ellipse', 'path', 'rect', 'text', 'image'.
|
|
*
|
|
* See {@link Ext.draw.Sprite} class documentation for examples of all types.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} width The width of the rect or image sprite.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} height The height of the rect or image sprite.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} radius The radius of the circle sprite. Or in case of rect sprite, the border radius.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} radiusX The radius of the ellipse sprite along x-axis.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} radiusY The radius of the ellipse sprite along y-axis.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} x Sprite position along the x-axis.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} y Sprite position along the y-axis.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} path The path of the path sprite written in SVG-like path syntax.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} opacity The opacity of the sprite. A number between 0 and 1.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} fill The fill color.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} stroke The stroke color.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} stroke-width The width of the stroke.
|
|
*
|
|
* Note that this attribute needs to be quoted when used. Like so:
|
|
*
|
|
* "stroke-width": 12,
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} font Used with text type sprites. The full font description.
|
|
* Uses the same syntax as the CSS font parameter
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} text The actual text to render in text sprites.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} src Path to the image to show in image sprites.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/String[]} group The group that this sprite belongs to, or an array of groups.
|
|
* Only relevant when added to a {@link Ext.draw.Surface Surface}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} draggable True to make the sprite draggable.
|
|
*/
|
|
|
|
dirty: false,
|
|
dirtyHidden: false,
|
|
dirtyTransform: false,
|
|
dirtyPath: true,
|
|
dirtyFont: true,
|
|
zIndexDirty: true,
|
|
|
|
/**
|
|
* @property {Boolean} isSprite
|
|
* `true` in this class to identify an object as an instantiated Sprite, or subclass thereof.
|
|
*/
|
|
isSprite: true,
|
|
zIndex: 0,
|
|
fontProperties: [
|
|
'font',
|
|
'font-size',
|
|
'font-weight',
|
|
'font-style',
|
|
'font-family',
|
|
'text-anchor',
|
|
'text'
|
|
],
|
|
pathProperties: [
|
|
'x',
|
|
'y',
|
|
'd',
|
|
'path',
|
|
'height',
|
|
'width',
|
|
'radius',
|
|
'r',
|
|
'rx',
|
|
'ry',
|
|
'cx',
|
|
'cy'
|
|
],
|
|
constructor: function(config) {
|
|
var me = this;
|
|
config = Ext.merge({}, config || {});
|
|
me.id = Ext.id(null, 'ext-sprite-');
|
|
me.transformations = [];
|
|
Ext.copyTo(this, config, 'surface,group,type,draggable');
|
|
//attribute bucket
|
|
me.bbox = {};
|
|
me.attr = {
|
|
zIndex: 0,
|
|
translation: {
|
|
x: null,
|
|
y: null
|
|
},
|
|
rotation: {
|
|
degrees: null,
|
|
x: null,
|
|
y: null
|
|
},
|
|
scaling: {
|
|
x: null,
|
|
y: null,
|
|
cx: null,
|
|
cy: null
|
|
}
|
|
};
|
|
//delete not bucket attributes
|
|
delete config.surface;
|
|
delete config.group;
|
|
delete config.type;
|
|
delete config.draggable;
|
|
me.setAttributes(config);
|
|
me.addEvents(
|
|
/**
|
|
* @event
|
|
* Fires before the sprite is destroyed. Return false from an event handler to stop the destroy.
|
|
* @param {Ext.draw.Sprite} this
|
|
*/
|
|
'beforedestroy',
|
|
/**
|
|
* @event
|
|
* Fires after the sprite is destroyed.
|
|
* @param {Ext.draw.Sprite} this
|
|
*/
|
|
'destroy',
|
|
/**
|
|
* @event
|
|
* Fires after the sprite markup is rendered.
|
|
* @param {Ext.draw.Sprite} this
|
|
*/
|
|
'render',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.dom.Element#mousedown
|
|
*/
|
|
'mousedown',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.dom.Element#mouseup
|
|
*/
|
|
'mouseup',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.dom.Element#mouseover
|
|
*/
|
|
'mouseover',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.dom.Element#mouseout
|
|
*/
|
|
'mouseout',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.dom.Element#mousemove
|
|
*/
|
|
'mousemove',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.dom.Element#click
|
|
*/
|
|
'click'
|
|
);
|
|
me.mixins.observable.constructor.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* @property {Ext.dd.DragSource} dd
|
|
* If this Sprite is configured {@link #draggable}, this property will contain
|
|
* an instance of {@link Ext.dd.DragSource} which handles dragging the Sprite.
|
|
*
|
|
* The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
|
|
* in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
|
|
*/
|
|
|
|
initDraggable: function() {
|
|
var me = this;
|
|
//create element if it doesn't exist.
|
|
if (!me.el) {
|
|
me.surface.createSpriteElement(me);
|
|
}
|
|
me.dd = new Ext.draw.SpriteDD(me, Ext.isBoolean(me.draggable) ? null : me.draggable);
|
|
me.on('beforedestroy', me.dd.destroy, me.dd);
|
|
},
|
|
|
|
/**
|
|
* Change the attributes of the sprite.
|
|
*
|
|
* ## Translation
|
|
*
|
|
* For translate, the configuration object contains x and y attributes that indicate where to
|
|
* translate the object. For example:
|
|
*
|
|
* sprite.setAttributes({
|
|
* translate: {
|
|
* x: 10,
|
|
* 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:
|
|
*
|
|
* sprite.setAttributes({
|
|
* rotate: {
|
|
* 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:
|
|
*
|
|
* sprite.setAttributes({
|
|
* scale: {
|
|
* x: 10,
|
|
* y: 3
|
|
* }
|
|
* }, 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.
|
|
*
|
|
* @param {Object} attrs attributes to be changed on the sprite.
|
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
setAttributes: function(attrs, redraw) {
|
|
var me = this,
|
|
fontProps = me.fontProperties,
|
|
fontPropsLength = fontProps.length,
|
|
pathProps = me.pathProperties,
|
|
pathPropsLength = pathProps.length,
|
|
hasSurface = !!me.surface,
|
|
custom = hasSurface && me.surface.customAttributes || {},
|
|
spriteAttrs = me.attr,
|
|
dirtyBBox = false,
|
|
attr, i, newTranslation, translation, newRotate, rotation, newScaling, scaling;
|
|
|
|
attrs = Ext.apply({}, attrs);
|
|
for (attr in custom) {
|
|
if (attrs.hasOwnProperty(attr) && typeof custom[attr] == "function") {
|
|
Ext.apply(attrs, custom[attr].apply(me, [].concat(attrs[attr])));
|
|
}
|
|
}
|
|
|
|
// Flag a change in hidden
|
|
if (!!attrs.hidden !== !!spriteAttrs.hidden) {
|
|
me.dirtyHidden = true;
|
|
}
|
|
|
|
// Flag path change
|
|
for (i = 0; i < pathPropsLength; i++) {
|
|
attr = pathProps[i];
|
|
if (attr in attrs && attrs[attr] !== spriteAttrs[attr]) {
|
|
me.dirtyPath = true;
|
|
dirtyBBox = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Flag zIndex change
|
|
if ('zIndex' in attrs) {
|
|
me.zIndexDirty = true;
|
|
}
|
|
|
|
// Flag font/text change
|
|
if ('text' in attrs) {
|
|
me.dirtyFont = true;
|
|
dirtyBBox = true;
|
|
}
|
|
|
|
for (i = 0; i < fontPropsLength; i++) {
|
|
attr = fontProps[i];
|
|
if (attr in attrs && attrs[attr] !== spriteAttrs[attr]) {
|
|
me.dirtyFont = true;
|
|
dirtyBBox = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
newTranslation = attrs.translation || attrs.translate;
|
|
delete attrs.translate;
|
|
delete attrs.translation;
|
|
translation = spriteAttrs.translation;
|
|
if (newTranslation) {
|
|
if (('x' in newTranslation && newTranslation.x !== translation.x) ||
|
|
('y' in newTranslation && newTranslation.y !== translation.y)) {
|
|
me.dirtyTransform = true;
|
|
translation.x = newTranslation.x;
|
|
translation.y = newTranslation.y;
|
|
}
|
|
}
|
|
|
|
newRotate = attrs.rotation || attrs.rotate;
|
|
rotation = spriteAttrs.rotation;
|
|
delete attrs.rotate;
|
|
delete attrs.rotation;
|
|
if (newRotate) {
|
|
if (('x' in newRotate && newRotate.x !== rotation.x) ||
|
|
('y' in newRotate && newRotate.y !== rotation.y) ||
|
|
('degrees' in newRotate && newRotate.degrees !== rotation.degrees)) {
|
|
me.dirtyTransform = true;
|
|
rotation.x = newRotate.x;
|
|
rotation.y = newRotate.y;
|
|
rotation.degrees = newRotate.degrees;
|
|
}
|
|
}
|
|
|
|
newScaling = attrs.scaling || attrs.scale;
|
|
scaling = spriteAttrs.scaling;
|
|
delete attrs.scale;
|
|
delete attrs.scaling;
|
|
if (newScaling) {
|
|
if (('x' in newScaling && newScaling.x !== scaling.x) ||
|
|
('y' in newScaling && newScaling.y !== scaling.y) ||
|
|
('cx' in newScaling && newScaling.cx !== scaling.cx) ||
|
|
('cy' in newScaling && newScaling.cy !== scaling.cy)) {
|
|
me.dirtyTransform = true;
|
|
scaling.x = newScaling.x;
|
|
scaling.y = newScaling.y;
|
|
scaling.cx = newScaling.cx;
|
|
scaling.cy = newScaling.cy;
|
|
}
|
|
}
|
|
|
|
// If the bbox is changed, then the bbox based transforms should be invalidated.
|
|
if (!me.dirtyTransform && dirtyBBox) {
|
|
if (spriteAttrs.scaling.x === null ||
|
|
spriteAttrs.scaling.y === null ||
|
|
spriteAttrs.rotation.y === null ||
|
|
spriteAttrs.rotation.y === null) {
|
|
me.dirtyTransform = true;
|
|
}
|
|
}
|
|
|
|
Ext.apply(spriteAttrs, attrs);
|
|
me.dirty = true;
|
|
|
|
if (redraw === true && hasSurface) {
|
|
me.redraw();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the bounding box of the sprite.
|
|
* This will be returned as an object with x, y, width, and height properties.
|
|
* @return {Object} bbox
|
|
*/
|
|
getBBox: function() {
|
|
return this.surface.getBBox(this);
|
|
},
|
|
|
|
setText: function(text) {
|
|
return this.surface.setText(this, text);
|
|
},
|
|
|
|
/**
|
|
* Hides the sprite.
|
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
hide: function(redraw) {
|
|
this.setAttributes({
|
|
hidden: true
|
|
}, redraw);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Shows the sprite.
|
|
* @param {Boolean} redraw Flag to immediately draw the change.
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
show: function(redraw) {
|
|
this.setAttributes({
|
|
hidden: false
|
|
}, redraw);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes the sprite.
|
|
* @return {Boolean} True if sprite was successfully removed.
|
|
* False when there was no surface to remove it from.
|
|
*/
|
|
remove: function() {
|
|
if (this.surface) {
|
|
this.surface.remove(this);
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
onRemove: function() {
|
|
this.surface.onRemove(this);
|
|
},
|
|
|
|
/**
|
|
* Removes the sprite and clears all listeners.
|
|
*/
|
|
destroy: function() {
|
|
var me = this;
|
|
if (me.fireEvent('beforedestroy', me) !== false) {
|
|
me.remove();
|
|
me.surface.onDestroy(me);
|
|
me.clearListeners();
|
|
me.fireEvent('destroy');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Redraws the sprite.
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
redraw: function() {
|
|
this.surface.renderItem(this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Wrapper for setting style properties, also takes single object parameter of multiple styles.
|
|
* @param {String/Object} property The style property to be set, or an object of multiple styles.
|
|
* @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
setStyle: function() {
|
|
this.el.setStyle.apply(this.el, arguments);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Note this method
|
|
* is severly limited in VML.
|
|
* @param {String/String[]} className The CSS class to add, or an array of classes
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
addCls: function(obj) {
|
|
this.surface.addCls(this, obj);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Removes one or more CSS classes from the element.
|
|
* @param {String/String[]} className The CSS class to remove, or an array of classes. Note this method
|
|
* is severly limited in VML.
|
|
* @return {Ext.draw.Sprite} this
|
|
*/
|
|
removeCls: function(obj) {
|
|
this.surface.removeCls(this, obj);
|
|
return this;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be
|
|
* then used anywhere in an ExtJS application just like any other Component.
|
|
*
|
|
* ## Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Panel with VerticalTextItem',
|
|
* width: 300,
|
|
* height: 200,
|
|
* lbar: {
|
|
* layout: {
|
|
* align: 'center'
|
|
* },
|
|
* items: [{
|
|
* xtype: 'text',
|
|
* text: 'Sample VerticalTextItem',
|
|
* degrees: 90
|
|
* }]
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* @constructor
|
|
* Creates a new Text Component
|
|
* @param {Object} text A config object containing a `text` property, a `degrees` property,
|
|
* and, optionally, a `styleSelector` property which specifies a selector which provides CSS rules to
|
|
* give font family, size and color to the drawn text.
|
|
*/
|
|
Ext.define('Ext.draw.Text', {
|
|
extend: Ext.draw.Component ,
|
|
|
|
alias: 'widget.text',
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The text to display (html tags are <b>not</b> accepted)
|
|
*/
|
|
text: '',
|
|
|
|
/**
|
|
* @cfg {String} styleSelector
|
|
* A CSS selector string which matches a style rule in the document stylesheet from which
|
|
* the text's font properties are read.
|
|
*
|
|
* **Drawn** text is not styled by CSS, but by properties set during its construction, so these styles
|
|
* must be programatically read from a stylesheet rule found via a selector at construction time.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} degrees
|
|
* The angle by which to initially rotate the text clockwise. Defaults to zero.
|
|
*/
|
|
|
|
focusable: false,
|
|
viewBox: false,
|
|
autoSize: true,
|
|
baseCls: Ext.baseCSSPrefix + 'surface ' + Ext.baseCSSPrefix + 'draw-text',
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.textConfig = Ext.apply({
|
|
type: 'text',
|
|
text: me.text,
|
|
rotate: {
|
|
degrees: me.degrees || 0
|
|
}
|
|
}, me.textStyle);
|
|
Ext.apply(me.textConfig, me.getStyles(me.styleSelectors || me.styleSelector));
|
|
|
|
// Surface is created from the *initialConfig*, not the current object state,
|
|
// So the generated items must go into the initialConfig
|
|
me.initialConfig.items = [me.textConfig];
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Accumulates a style object based upon the styles specified in document stylesheets
|
|
* by an array of CSS selectors
|
|
*/
|
|
getStyles: function(selectors) {
|
|
selectors = Ext.Array.from(selectors);
|
|
var i = 0,
|
|
len = selectors.length,
|
|
rule,
|
|
style,
|
|
prop,
|
|
result = {};
|
|
|
|
for (; i < len; i++) {
|
|
// Get the style rule which exactly matches the selector.
|
|
rule = Ext.util.CSS.getRule(selectors[i]);
|
|
if (rule) {
|
|
style = rule.style;
|
|
if (style) {
|
|
Ext.apply(result, {
|
|
'font-family': style.fontFamily,
|
|
'font-weight': style.fontWeight,
|
|
'line-height': style.lineHeight,
|
|
'font-size': style.fontSize,
|
|
fill: style.color
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Sets the clockwise rotation angle relative to the horizontal axis.
|
|
* @param {Number} degrees The clockwise angle (in degrees) from the horizontal axis
|
|
* by which the text should be rotated.
|
|
*/
|
|
setAngle: function(degrees) {
|
|
var me = this,
|
|
surface,
|
|
sprite;
|
|
|
|
if (me.rendered) {
|
|
surface = me.surface;
|
|
sprite = surface.items.items[0];
|
|
|
|
me.degrees = degrees;
|
|
sprite.setAttributes({
|
|
rotate: {
|
|
degrees: degrees
|
|
}
|
|
}, true);
|
|
if (me.autoSize || me.viewBox) {
|
|
me.updateLayout();
|
|
}
|
|
} else {
|
|
me.degrees = degrees;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Updates this item's text.
|
|
* @param {String} t The text to display (html **not** accepted).
|
|
*/
|
|
setText: function(text) {
|
|
var me = this,
|
|
surface,
|
|
sprite;
|
|
|
|
if (me.rendered) {
|
|
surface = me.surface;
|
|
sprite = surface.items.items[0];
|
|
|
|
me.text = text || '';
|
|
surface.remove(sprite);
|
|
me.textConfig.type = 'text';
|
|
me.textConfig.text = me.text;
|
|
sprite = surface.add(me.textConfig);
|
|
sprite.setAttributes({
|
|
rotate: {
|
|
degrees: me.degrees
|
|
}
|
|
}, true);
|
|
if (me.autoSize || me.viewBox) {
|
|
me.updateLayout();
|
|
}
|
|
} else {
|
|
me.on({
|
|
render: function() {
|
|
me.setText(text);
|
|
},
|
|
single: true
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Exports a {@link Ext.draw.Surface Surface} to an image. To do this,
|
|
* the svg string must be sent to a remote server and processed.
|
|
*
|
|
* # Sending the data
|
|
*
|
|
* A post request is made to the URL. The following fields are sent:
|
|
*
|
|
* + width: The width of the image
|
|
* + height: The height of the image
|
|
* + type: The image type to save as, see {@link #supportedTypes}
|
|
* + svg: The svg string for the surface
|
|
*
|
|
* # The response
|
|
*
|
|
* It is expected that the user will be prompted with an image download.
|
|
* As such, the following options should be set on the server:
|
|
*
|
|
* + Content-Disposition: 'attachment, filename="chart.png"'
|
|
* + Content-Type: 'image/png'
|
|
*
|
|
* **Important**: By default, chart data is sent to a server operated
|
|
* by Sencha to do data processing. You may change this default by
|
|
* setting the {@link #defaultUrl} of this class.
|
|
* In addition, please note that this service only creates PNG images.
|
|
*/
|
|
Ext.define('Ext.draw.engine.ImageExporter', {
|
|
singleton: true,
|
|
|
|
/**
|
|
* @property {String} [defaultUrl="http://svg.sencha.io"]
|
|
* The default URL to submit the form request.
|
|
*/
|
|
defaultUrl: 'http://svg.sencha.io',
|
|
|
|
/**
|
|
* @property {Array} [supportedTypes=["image/png", "image/jpeg"]]
|
|
* A list of export types supported by the server
|
|
*/
|
|
supportedTypes: ['image/png', 'image/jpeg'],
|
|
|
|
/**
|
|
* @property {String} [widthParam="width"]
|
|
* The name of the width parameter to be sent to the server.
|
|
* The Sencha IO server expects it to be the default value.
|
|
*/
|
|
widthParam: 'width',
|
|
|
|
/**
|
|
* @property {String} [heightParam="height"]
|
|
* The name of the height parameter to be sent to the server.
|
|
* The Sencha IO server expects it to be the default value.
|
|
*/
|
|
heightParam: 'height',
|
|
|
|
/**
|
|
* @property {String} [typeParam="type"]
|
|
* The name of the type parameter to be sent to the server.
|
|
* The Sencha IO server expects it to be the default value.
|
|
*/
|
|
typeParam: 'type',
|
|
|
|
/**
|
|
* @property {String} [svgParam="svg"]
|
|
* The name of the svg parameter to be sent to the server.
|
|
* The Sencha IO server expects it to be the default value.
|
|
*/
|
|
svgParam: 'svg',
|
|
|
|
formCls: Ext.baseCSSPrefix + 'hide-display',
|
|
|
|
/**
|
|
* Exports the surface to an image
|
|
* @param {Ext.draw.Surface} surface The surface to export
|
|
* @param {Object} [config] The following config options are supported:
|
|
*
|
|
* @param {Number} config.width A width to send to the server to for
|
|
* configuring the image height
|
|
*
|
|
* @param {Number} config.height A height to send to the server for
|
|
* configuring the image height
|
|
*
|
|
* @param {String} config.url The url to post the data to. Defaults to
|
|
* the {@link #defaultUrl} configuration on the class.
|
|
*
|
|
* @param {String} config.type The type of image to export. See the
|
|
* {@link #supportedTypes}
|
|
*
|
|
* @param {String} config.widthParam The name of the width parameter to send
|
|
* to the server. Defaults to {@link #widthParam}
|
|
*
|
|
* @param {String} config.heightParam The name of the height parameter to send
|
|
* to the server. Defaults to {@link #heightParam}
|
|
*
|
|
* @param {String} config.typeParam The name of the type parameter to send
|
|
* to the server. Defaults to {@link #typeParam}
|
|
*
|
|
* @param {String} config.svgParam The name of the svg parameter to send
|
|
* to the server. Defaults to {@link #svgParam}
|
|
*
|
|
* @return {Boolean} True if the surface was successfully sent to the server.
|
|
*/
|
|
generate: function(surface, config) {
|
|
config = config || {};
|
|
var me = this,
|
|
type = config.type,
|
|
form;
|
|
|
|
if (Ext.Array.indexOf(me.supportedTypes, type) === -1) {
|
|
return false;
|
|
}
|
|
|
|
form = Ext.getBody().createChild({
|
|
tag: 'form',
|
|
method: 'POST',
|
|
action: config.url || me.defaultUrl,
|
|
cls: me.formCls,
|
|
children: [{
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
name: config.widthParam || me.widthParam,
|
|
value: config.width || surface.width
|
|
}, {
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
name: config.heightParam || me.heightParam,
|
|
value: config.height || surface.height
|
|
}, {
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
name: config.typeParam || me.typeParam,
|
|
value: type
|
|
}, {
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
name: config.svgParam || me.svgParam
|
|
}]
|
|
});
|
|
|
|
// Assign the data on the value so it doesn't get messed up in the html insertion
|
|
form.last(null, true).value = Ext.draw.engine.SvgExporter.generate(surface);
|
|
|
|
form.dom.submit();
|
|
form.remove();
|
|
return true;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Provides specific methods to draw with SVG.
|
|
*/
|
|
Ext.define('Ext.draw.engine.Svg', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.draw.Surface ,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
engine: 'Svg',
|
|
|
|
trimRe: /^\s+|\s+$/g,
|
|
spacesRe: /\s+/,
|
|
xlink: "http:/" + "/www.w3.org/1999/xlink",
|
|
|
|
translateAttrs: {
|
|
radius: "r",
|
|
radiusX: "rx",
|
|
radiusY: "ry",
|
|
path: "d",
|
|
lineWidth: "stroke-width",
|
|
fillOpacity: "fill-opacity",
|
|
strokeOpacity: "stroke-opacity",
|
|
strokeLinejoin: "stroke-linejoin"
|
|
},
|
|
|
|
parsers: {},
|
|
|
|
minDefaults: {
|
|
circle: {
|
|
cx: 0,
|
|
cy: 0,
|
|
r: 0,
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
ellipse: {
|
|
cx: 0,
|
|
cy: 0,
|
|
rx: 0,
|
|
ry: 0,
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
rect: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
rx: 0,
|
|
ry: 0,
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
text: {
|
|
x: 0,
|
|
y: 0,
|
|
"text-anchor": "start",
|
|
"font-family": null,
|
|
"font-size": null,
|
|
"font-weight": null,
|
|
"font-style": null,
|
|
fill: "#000",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
path: {
|
|
d: "M0,0",
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
image: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
preserveAspectRatio: "none",
|
|
opacity: null
|
|
}
|
|
},
|
|
|
|
createSvgElement: function(type, attrs) {
|
|
var el = this.domRef.createElementNS("http:/" + "/www.w3.org/2000/svg", type),
|
|
key;
|
|
if (attrs) {
|
|
for (key in attrs) {
|
|
el.setAttribute(key, String(attrs[key]));
|
|
}
|
|
}
|
|
return el;
|
|
},
|
|
|
|
createSpriteElement: function(sprite) {
|
|
// Create svg element and append to the DOM.
|
|
var el = this.createSvgElement(sprite.type);
|
|
el.id = sprite.id;
|
|
if (el.style) {
|
|
el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
|
|
}
|
|
sprite.el = Ext.get(el);
|
|
this.applyZIndex(sprite); //performs the insertion
|
|
sprite.matrix = new Ext.draw.Matrix();
|
|
sprite.bbox = {
|
|
plain: 0,
|
|
transform: 0
|
|
};
|
|
this.applyAttrs(sprite);
|
|
this.applyTransformations(sprite);
|
|
sprite.fireEvent("render", sprite);
|
|
return el;
|
|
},
|
|
|
|
getBBoxText: function (sprite) {
|
|
var bbox = {},
|
|
bb, height, width, i, ln, el;
|
|
|
|
if (sprite && sprite.el) {
|
|
el = sprite.el.dom;
|
|
try {
|
|
bbox = el.getBBox();
|
|
return bbox;
|
|
} catch(e) {
|
|
// Firefox 3.0.x plays badly here
|
|
}
|
|
bbox = {x: bbox.x, y: Infinity, width: 0, height: 0};
|
|
ln = el.getNumberOfChars();
|
|
for (i = 0; i < ln; i++) {
|
|
bb = el.getExtentOfChar(i);
|
|
bbox.y = Math.min(bb.y, bbox.y);
|
|
height = bb.y + bb.height - bbox.y;
|
|
bbox.height = Math.max(bbox.height, height);
|
|
width = bb.x + bb.width - bbox.x;
|
|
bbox.width = Math.max(bbox.width, width);
|
|
}
|
|
return bbox;
|
|
}
|
|
},
|
|
|
|
hide: function() {
|
|
Ext.get(this.el).hide();
|
|
},
|
|
|
|
show: function() {
|
|
Ext.get(this.el).show();
|
|
},
|
|
|
|
hidePrim: function(sprite) {
|
|
this.addCls(sprite, Ext.baseCSSPrefix + 'hide-visibility');
|
|
},
|
|
|
|
showPrim: function(sprite) {
|
|
this.removeCls(sprite, Ext.baseCSSPrefix + 'hide-visibility');
|
|
},
|
|
|
|
getDefs: function() {
|
|
return this._defs || (this._defs = this.createSvgElement("defs"));
|
|
},
|
|
|
|
transform: function(sprite, matrixOnly) {
|
|
var me = this,
|
|
matrix = new Ext.draw.Matrix(),
|
|
transforms = sprite.transformations,
|
|
transformsLength = transforms.length,
|
|
i = 0,
|
|
transform, type;
|
|
|
|
for (; i < transformsLength; i++) {
|
|
transform = transforms[i];
|
|
type = transform.type;
|
|
if (type == "translate") {
|
|
matrix.translate(transform.x, transform.y);
|
|
}
|
|
else if (type == "rotate") {
|
|
matrix.rotate(transform.degrees, transform.x, transform.y);
|
|
}
|
|
else if (type == "scale") {
|
|
matrix.scale(transform.x, transform.y, transform.centerX, transform.centerY);
|
|
}
|
|
}
|
|
sprite.matrix = matrix;
|
|
if (!matrixOnly) {
|
|
sprite.el.set({transform: matrix.toSvg()});
|
|
}
|
|
},
|
|
|
|
setSize: function(width, height) {
|
|
var me = this,
|
|
el = me.el;
|
|
|
|
width = +width || me.width;
|
|
height = +height || me.height;
|
|
me.width = width;
|
|
me.height = height;
|
|
|
|
el.setSize(width, height);
|
|
el.set({
|
|
width: width,
|
|
height: height
|
|
});
|
|
me.callParent([width, height]);
|
|
},
|
|
|
|
/**
|
|
* Get the region for the surface's canvas area
|
|
* @returns {Ext.util.Region}
|
|
*/
|
|
getRegion: function() {
|
|
// Mozilla requires using the background rect because the svg element returns an
|
|
// incorrect region. Webkit gives no region for the rect and must use the svg element.
|
|
var svgXY = this.el.getXY(),
|
|
rectXY = this.bgRect.getXY(),
|
|
max = Math.max,
|
|
x = max(svgXY[0], rectXY[0]),
|
|
y = max(svgXY[1], rectXY[1]);
|
|
return {
|
|
left: x,
|
|
top: y,
|
|
right: x + this.width,
|
|
bottom: y + this.height
|
|
};
|
|
},
|
|
|
|
onRemove: function(sprite) {
|
|
if (sprite.el) {
|
|
sprite.el.destroy();
|
|
delete sprite.el;
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
setViewBox: function(x, y, width, height) {
|
|
if (isFinite(x) && isFinite(y) && isFinite(width) && isFinite(height)) {
|
|
this.callParent(arguments);
|
|
this.el.dom.setAttribute("viewBox", [x, y, width, height].join(" "));
|
|
}
|
|
},
|
|
|
|
render: function (container) {
|
|
var me = this,
|
|
width,
|
|
height,
|
|
el,
|
|
defs,
|
|
bgRect,
|
|
webkitRect;
|
|
if (!me.el) {
|
|
width = me.width || 0;
|
|
height = me.height || 0;
|
|
el = me.createSvgElement('svg', {
|
|
xmlns: "http:/" + "/www.w3.org/2000/svg",
|
|
version: 1.1,
|
|
width: width,
|
|
height: height
|
|
});
|
|
defs = me.getDefs();
|
|
|
|
// Create a rect that is always the same size as the svg root; this serves 2 purposes:
|
|
// (1) It allows mouse events to be fired over empty areas in Webkit, and (2) we can
|
|
// use it rather than the svg element for retrieving the correct client rect of the
|
|
// surface in Mozilla (see https://bugzilla.mozilla.org/show_bug.cgi?id=530985)
|
|
bgRect = me.createSvgElement("rect", {
|
|
width: "100%",
|
|
height: "100%",
|
|
fill: "#000",
|
|
stroke: "none",
|
|
opacity: 0
|
|
});
|
|
|
|
if (Ext.isSafari3) {
|
|
// Rect that we will show/hide to fix old WebKit bug with rendering issues.
|
|
webkitRect = me.createSvgElement("rect", {
|
|
x: -10,
|
|
y: -10,
|
|
width: "110%",
|
|
height: "110%",
|
|
fill: "none",
|
|
stroke: "#000"
|
|
});
|
|
}
|
|
el.appendChild(defs);
|
|
if (Ext.isSafari3) {
|
|
el.appendChild(webkitRect);
|
|
}
|
|
el.appendChild(bgRect);
|
|
container.appendChild(el);
|
|
me.el = Ext.get(el);
|
|
me.bgRect = Ext.get(bgRect);
|
|
if (Ext.isSafari3) {
|
|
me.webkitRect = Ext.get(webkitRect);
|
|
me.webkitRect.hide();
|
|
}
|
|
me.el.on({
|
|
scope: me,
|
|
mouseup: me.onMouseUp,
|
|
mousedown: me.onMouseDown,
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut,
|
|
mousemove: me.onMouseMove,
|
|
mouseenter: me.onMouseEnter,
|
|
mouseleave: me.onMouseLeave,
|
|
click: me.onClick,
|
|
dblclick: me.onDblClick
|
|
});
|
|
}
|
|
me.renderAll();
|
|
},
|
|
|
|
// private
|
|
onMouseEnter: function(e) {
|
|
if (this.el.parent().getRegion().contains(e.getPoint())) {
|
|
this.fireEvent('mouseenter', e);
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseLeave: function(e) {
|
|
if (!this.el.parent().getRegion().contains(e.getPoint())) {
|
|
this.fireEvent('mouseleave', e);
|
|
}
|
|
},
|
|
// @private - Normalize a delegated single event from the main container to each sprite and sprite group
|
|
processEvent: function(name, e) {
|
|
var target = e.getTarget(),
|
|
surface = this.surface,
|
|
sprite;
|
|
|
|
this.fireEvent(name, e);
|
|
// We wrap text types in a tspan, sprite is the parent.
|
|
if (target.nodeName == "tspan" && target.parentNode) {
|
|
target = target.parentNode;
|
|
}
|
|
sprite = this.items.get(target.id);
|
|
if (sprite) {
|
|
sprite.fireEvent(name, sprite, e);
|
|
}
|
|
},
|
|
|
|
/* @private - Wrap SVG text inside a tspan to allow for line wrapping. In addition this normallizes
|
|
* the baseline for text the vertical middle of the text to be the same as VML.
|
|
*/
|
|
tuneText: function (sprite, attrs) {
|
|
var el = sprite.el.dom,
|
|
tspans = [],
|
|
height, tspan, text, i, ln, texts, factor, x;
|
|
|
|
if (attrs.hasOwnProperty("text")) {
|
|
//only create new tspans for text lines if the text has been
|
|
//updated or if it's the first time we're setting the text
|
|
//into the sprite.
|
|
|
|
//get the actual rendered text.
|
|
text = sprite.tspans && Ext.Array.map(sprite.tspans, function(t) { return t.textContent; }).join('');
|
|
|
|
if (!sprite.tspans || attrs.text != text) {
|
|
tspans = this.setText(sprite, attrs.text);
|
|
sprite.tspans = tspans;
|
|
//for all other cases reuse the tspans previously created.
|
|
} else {
|
|
tspans = sprite.tspans || [];
|
|
}
|
|
}
|
|
// Normalize baseline via a DY shift of first tspan. Shift other rows by height * line height (1.2)
|
|
if (tspans.length) {
|
|
height = this.getBBoxText(sprite).height;
|
|
x = sprite.el.dom.getAttribute("x");
|
|
for (i = 0, ln = tspans.length; i < ln; i++) {
|
|
// The text baseline for FireFox 3.0 and 3.5 is different than other SVG implementations
|
|
// so we are going to normalize that here
|
|
factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 4;
|
|
tspans[i].setAttribute("x", x);
|
|
tspans[i].setAttribute("dy", i ? height * 1.2 : height / factor);
|
|
}
|
|
sprite.dirty = true;
|
|
}
|
|
},
|
|
|
|
setText: function(sprite, textString) {
|
|
var me = this,
|
|
el = sprite.el.dom,
|
|
tspans = [],
|
|
height, tspan, text, i, ln, texts;
|
|
|
|
while (el.firstChild) {
|
|
el.removeChild(el.firstChild);
|
|
}
|
|
// Wrap each row into tspan to emulate rows
|
|
texts = String(textString).split("\n");
|
|
for (i = 0, ln = texts.length; i < ln; i++) {
|
|
text = texts[i];
|
|
if (text) {
|
|
tspan = me.createSvgElement("tspan");
|
|
tspan.appendChild(document.createTextNode(Ext.htmlDecode(text)));
|
|
el.appendChild(tspan);
|
|
tspans[i] = tspan;
|
|
}
|
|
}
|
|
return tspans;
|
|
},
|
|
|
|
renderAll: function() {
|
|
this.items.each(this.renderItem, this);
|
|
},
|
|
|
|
renderItem: function (sprite) {
|
|
if (!this.el) {
|
|
return;
|
|
}
|
|
if (!sprite.el) {
|
|
this.createSpriteElement(sprite);
|
|
}
|
|
if (sprite.zIndexDirty) {
|
|
this.applyZIndex(sprite);
|
|
}
|
|
if (sprite.dirty) {
|
|
this.applyAttrs(sprite);
|
|
if (sprite.dirtyTransform) {
|
|
this.applyTransformations(sprite);
|
|
}
|
|
}
|
|
},
|
|
|
|
redraw: function(sprite) {
|
|
sprite.dirty = sprite.zIndexDirty = true;
|
|
this.renderItem(sprite);
|
|
},
|
|
|
|
applyAttrs: function (sprite) {
|
|
var me = this,
|
|
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) {
|
|
groups = [].concat(group);
|
|
ln = groups.length;
|
|
for (i = 0; i < ln; i++) {
|
|
group = groups[i];
|
|
me.getGroup(group).add(sprite);
|
|
}
|
|
delete sprite.group;
|
|
}
|
|
attrs = me.scrubAttrs(sprite) || {};
|
|
|
|
// if (sprite.dirtyPath) {
|
|
sprite.bbox.plain = 0;
|
|
sprite.bbox.transform = 0;
|
|
if (sprite.type == "circle" || sprite.type == "ellipse") {
|
|
attrs.cx = attrs.cx || attrs.x;
|
|
attrs.cy = attrs.cy || attrs.y;
|
|
}
|
|
else if (sprite.type == "rect") {
|
|
attrs.rx = attrs.ry = attrs.r;
|
|
}
|
|
else if (sprite.type == "path" && attrs.d) {
|
|
attrs.d = Ext.draw.Draw.pathToString(Ext.draw.Draw.pathToAbsolute(attrs.d));
|
|
}
|
|
sprite.dirtyPath = false;
|
|
// }
|
|
// else {
|
|
// delete attrs.d;
|
|
// }
|
|
|
|
if (attrs['clip-rect']) {
|
|
me.setClip(sprite, attrs);
|
|
delete attrs['clip-rect'];
|
|
}
|
|
if (sprite.type == 'text' && attrs.font && sprite.dirtyFont) {
|
|
el.set({ style: "font: " + attrs.font});
|
|
}
|
|
if (sprite.type == "image") {
|
|
el.dom.setAttributeNS(me.xlink, "href", attrs.src);
|
|
}
|
|
Ext.applyIf(attrs, me.minDefaults[sprite.type]);
|
|
|
|
if (sprite.dirtyHidden) {
|
|
(sattr.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
|
|
sprite.dirtyHidden = false;
|
|
}
|
|
for (key in attrs) {
|
|
if (attrs.hasOwnProperty(key) && attrs[key] != null) {
|
|
//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]];
|
|
}
|
|
//hidden is not a proper SVG attribute.
|
|
if (key == 'hidden' && sprite.type == 'text') {
|
|
continue;
|
|
}
|
|
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);
|
|
}
|
|
sprite.dirtyFont = false;
|
|
|
|
//set styles
|
|
style = sattr.style;
|
|
if (style) {
|
|
el.setStyle(style);
|
|
}
|
|
|
|
sprite.dirty = false;
|
|
|
|
if (Ext.isSafari3) {
|
|
// Refreshing the view to fix bug EXTJSIV-1: rendering issue in old Safari 3
|
|
me.webkitRect.show();
|
|
setTimeout(function () {
|
|
me.webkitRect.hide();
|
|
});
|
|
}
|
|
},
|
|
|
|
setClip: function(sprite, params) {
|
|
var me = this,
|
|
rect = params["clip-rect"],
|
|
clipEl, clipPath;
|
|
if (rect) {
|
|
if (sprite.clip) {
|
|
sprite.clip.parentNode.parentNode.removeChild(sprite.clip.parentNode);
|
|
}
|
|
clipEl = me.createSvgElement('clipPath');
|
|
clipPath = me.createSvgElement('rect');
|
|
clipEl.id = Ext.id(null, 'ext-clip-');
|
|
clipPath.setAttribute("x", rect.x);
|
|
clipPath.setAttribute("y", rect.y);
|
|
clipPath.setAttribute("width", rect.width);
|
|
clipPath.setAttribute("height", rect.height);
|
|
clipEl.appendChild(clipPath);
|
|
me.getDefs().appendChild(clipEl);
|
|
sprite.el.dom.setAttribute("clip-path", "url(#" + clipEl.id + ")");
|
|
sprite.clip = clipPath;
|
|
}
|
|
// if (!attrs[key]) {
|
|
// var clip = Ext.getDoc().dom.getElementById(sprite.el.getAttribute("clip-path").replace(/(^url\(#|\)$)/g, ""));
|
|
// clip && clip.parentNode.removeChild(clip);
|
|
// sprite.el.setAttribute("clip-path", "");
|
|
// delete attrss.clip;
|
|
// }
|
|
},
|
|
|
|
/**
|
|
* Insert or move a given sprite's element to the correct place in the DOM list for its zIndex
|
|
* @param {Ext.draw.Sprite} sprite
|
|
*/
|
|
applyZIndex: function(sprite) {
|
|
var me = this,
|
|
items = me.items,
|
|
idx = items.indexOf(sprite),
|
|
el = sprite.el,
|
|
prevEl;
|
|
if (me.el.dom.childNodes[idx + 2] !== el.dom) { //shift by 2 to account for defs and bg rect
|
|
if (idx > 0) {
|
|
// Find the first previous sprite which has its DOM element created already
|
|
do {
|
|
prevEl = items.getAt(--idx).el;
|
|
} while (!prevEl && idx > 0);
|
|
}
|
|
el.insertAfter(prevEl || me.bgRect);
|
|
}
|
|
sprite.zIndexDirty = false;
|
|
},
|
|
|
|
createItem: function (config) {
|
|
var sprite = new Ext.draw.Sprite(config);
|
|
sprite.surface = this;
|
|
return sprite;
|
|
},
|
|
|
|
addGradient: function(gradient) {
|
|
gradient = Ext.draw.Draw.parseGradient(gradient);
|
|
var me = this,
|
|
ln = gradient.stops.length,
|
|
vector = gradient.vector,
|
|
//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]);
|
|
}
|
|
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;
|
|
},
|
|
|
|
/**
|
|
* Checks if the specified CSS class exists on this element's DOM node.
|
|
* @param {Ext.draw.Sprite} sprite The sprite to look into.
|
|
* @param {String} className The CSS class to check for
|
|
* @return {Boolean} True if the class exists, else false
|
|
*/
|
|
hasCls: function(sprite, className) {
|
|
return className && (' ' + (sprite.el.dom.getAttribute('class') || '') + ' ').indexOf(' ' + className + ' ') != -1;
|
|
},
|
|
|
|
addCls: function(sprite, className) {
|
|
var el = sprite.el,
|
|
i,
|
|
len,
|
|
v,
|
|
cls = [],
|
|
curCls = el.getAttribute('class') || '';
|
|
// Separate case is for speed
|
|
if (!Ext.isArray(className)) {
|
|
if (typeof className == 'string' && !this.hasCls(sprite, className)) {
|
|
el.set({ 'class': curCls + ' ' + className });
|
|
}
|
|
}
|
|
else {
|
|
for (i = 0, len = className.length; i < len; i++) {
|
|
v = className[i];
|
|
if (typeof v == 'string' && (' ' + curCls + ' ').indexOf(' ' + v + ' ') == -1) {
|
|
cls.push(v);
|
|
}
|
|
}
|
|
if (cls.length) {
|
|
el.set({ 'class': ' ' + cls.join(' ') });
|
|
}
|
|
}
|
|
},
|
|
|
|
removeCls: function(sprite, className) {
|
|
var me = this,
|
|
el = sprite.el,
|
|
curCls = el.getAttribute('class') || '',
|
|
i, idx, len, cls, elClasses;
|
|
if (!Ext.isArray(className)){
|
|
className = [className];
|
|
}
|
|
if (curCls) {
|
|
elClasses = curCls.replace(me.trimRe, ' ').split(me.spacesRe);
|
|
for (i = 0, len = className.length; i < len; i++) {
|
|
cls = className[i];
|
|
if (typeof cls == 'string') {
|
|
cls = cls.replace(me.trimRe, '');
|
|
idx = Ext.Array.indexOf(elClasses, cls);
|
|
if (idx != -1) {
|
|
Ext.Array.erase(elClasses, idx, 1);
|
|
}
|
|
}
|
|
}
|
|
el.set({ 'class': elClasses.join(' ') });
|
|
}
|
|
},
|
|
|
|
destroy: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
if (me.el) {
|
|
me.el.remove();
|
|
}
|
|
if (me._defs) {
|
|
Ext.get(me._defs).destroy();
|
|
}
|
|
if (me.bgRect) {
|
|
Ext.get(me.bgRect).destroy();
|
|
}
|
|
if (me.webkitRect) {
|
|
Ext.get(me.webkitRect).destroy();
|
|
}
|
|
delete me.el;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A utility class for exporting a {@link Ext.draw.Surface Surface} to a string
|
|
* that may be saved or used for processing on the server.
|
|
*
|
|
* @singleton
|
|
*/
|
|
Ext.define('Ext.draw.engine.SvgExporter', function(){
|
|
var commaRe = /,/g,
|
|
fontRegex = /(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)\s('*.*'*)/,
|
|
rgbColorRe = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
|
|
rgbaColorRe = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,([\d\.]+)\)/g,
|
|
surface, len, width, height,
|
|
|
|
init = function(s){
|
|
surface = s;
|
|
len = surface.length;
|
|
width = surface.width;
|
|
height = surface.height;
|
|
},
|
|
spriteProcessor = {
|
|
path: function(sprite){
|
|
|
|
var attr = sprite.attr,
|
|
path = attr.path,
|
|
pathString = '',
|
|
props, p, pLen;
|
|
|
|
if (Ext.isArray(path[0])) {
|
|
pLen = path.length;
|
|
for (p = 0; p < pLen; p++) {
|
|
pathString += path[p].join(' ');
|
|
}
|
|
} else if (Ext.isArray(path)) {
|
|
pathString = path.join(' ');
|
|
} else {
|
|
pathString = path.replace(commaRe,' ');
|
|
}
|
|
|
|
props = toPropertyString({
|
|
d: pathString,
|
|
fill: attr.fill || 'none',
|
|
stroke: attr.stroke,
|
|
'fill-opacity': attr.opacity,
|
|
'stroke-width': attr['stroke-width'],
|
|
'stroke-opacity': attr['stroke-opacity'],
|
|
"z-index": attr.zIndex,
|
|
transform: sprite.matrix.toSvg()
|
|
});
|
|
|
|
return '<path ' + props + '/>';
|
|
},
|
|
text: function(sprite){
|
|
|
|
// TODO
|
|
// implement multi line support (@see Svg.js tuneText)
|
|
|
|
var attr = sprite.attr,
|
|
match = fontRegex.exec(attr.font),
|
|
size = (match && match[1]) || "12",
|
|
// default font family is Arial
|
|
family = (match && match[3]) || 'Arial',
|
|
text = attr.text,
|
|
factor = (Ext.isFF3_0 || Ext.isFF3_5) ? 2 : 4,
|
|
tspanString = '',
|
|
props;
|
|
|
|
sprite.getBBox();
|
|
tspanString += '<tspan x="' + (attr.x || '') + '" dy="';
|
|
tspanString += (size/factor)+'">';
|
|
tspanString += Ext.htmlEncode(text) + '</tspan>';
|
|
|
|
|
|
props = toPropertyString({
|
|
x: attr.x,
|
|
y: attr.y,
|
|
'font-size': size,
|
|
'font-family': family,
|
|
'font-weight': attr['font-weight'],
|
|
'text-anchor': attr['text-anchor'],
|
|
// if no fill property is set it will be black
|
|
fill: attr.fill || '#000',
|
|
'fill-opacity': attr.opacity,
|
|
transform: sprite.matrix.toSvg()
|
|
});
|
|
|
|
|
|
|
|
return '<text '+ props + '>' + tspanString + '</text>';
|
|
},
|
|
rect: function(sprite){
|
|
|
|
var attr = sprite.attr,
|
|
props = toPropertyString({
|
|
x: attr.x,
|
|
y: attr.y,
|
|
rx: attr.rx,
|
|
ry: attr.ry,
|
|
width: attr.width,
|
|
height: attr.height,
|
|
fill: attr.fill || 'none',
|
|
'fill-opacity': attr.opacity,
|
|
stroke: attr.stroke,
|
|
'stroke-opacity': attr['stroke-opacity'],
|
|
'stroke-width':attr['stroke-width'],
|
|
transform: sprite.matrix && sprite.matrix.toSvg()
|
|
});
|
|
|
|
return '<rect ' + props + '/>';
|
|
},
|
|
circle: function(sprite){
|
|
|
|
var attr = sprite.attr,
|
|
props = toPropertyString({
|
|
cx: attr.x,
|
|
cy: attr.y,
|
|
r: attr.radius,
|
|
fill: attr.translation.fill || attr.fill || 'none',
|
|
'fill-opacity': attr.opacity,
|
|
stroke: attr.stroke,
|
|
'stroke-opacity': attr['stroke-opacity'],
|
|
'stroke-width':attr['stroke-width'],
|
|
transform: sprite.matrix.toSvg()
|
|
});
|
|
|
|
return '<circle ' + props + ' />';
|
|
},
|
|
image: function(sprite){
|
|
|
|
var attr = sprite.attr,
|
|
props = toPropertyString({
|
|
x: attr.x - (attr.width/2 >> 0),
|
|
y: attr.y - (attr.height/2 >> 0),
|
|
width: attr.width,
|
|
height: attr.height,
|
|
'xlink:href': attr.src,
|
|
transform: sprite.matrix.toSvg()
|
|
});
|
|
|
|
return '<image ' + props + ' />';
|
|
}
|
|
},
|
|
svgHeader = function(){
|
|
var svg = '<?xml version="1.0" standalone="yes"?>';
|
|
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
|
|
return svg;
|
|
},
|
|
svgContent = function(){
|
|
var svg = '<svg width="'+width+'px" height="'+height+'px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">',
|
|
defs = '', item, itemsLen, items, gradient,
|
|
getSvgString, colorstops, stop,
|
|
coll, keys, colls, k, kLen, key, collI, i, j, stopsLen, sortedItems, za, zb;
|
|
|
|
items = surface.items.items;
|
|
itemsLen = items.length;
|
|
|
|
|
|
getSvgString = function(node){
|
|
|
|
var childs = node.childNodes,
|
|
childLength = childs.length,
|
|
i = 0,
|
|
attrLength,
|
|
j,
|
|
svgString = '', child, attr, tagName, attrItem;
|
|
|
|
for(; i < childLength; i++){
|
|
child = childs[i];
|
|
attr = child.attributes;
|
|
tagName = child.tagName;
|
|
|
|
svgString += '<' +tagName;
|
|
|
|
for(j = 0, attrLength = attr.length; j < attrLength; j++){
|
|
attrItem = attr.item(j);
|
|
svgString += ' '+attrItem.name+'="'+attrItem.value+'"';
|
|
}
|
|
|
|
svgString += '>';
|
|
|
|
if(child.childNodes.length > 0){
|
|
svgString += getSvgString(child);
|
|
}
|
|
|
|
svgString += '</' + tagName + '>';
|
|
|
|
}
|
|
return svgString;
|
|
};
|
|
|
|
|
|
if(surface.getDefs){
|
|
defs = getSvgString(surface.getDefs());
|
|
}else{
|
|
// IE
|
|
coll = surface.gradientsColl;
|
|
if (coll) {
|
|
keys = coll.keys;
|
|
colls = coll.items;
|
|
k = 0;
|
|
kLen = keys.length;
|
|
}
|
|
|
|
for (; k < kLen; k++) {
|
|
key = keys[k];
|
|
collI = colls[k];
|
|
|
|
gradient = surface.gradientsColl.getByKey(key);
|
|
defs += '<linearGradient id="' + key + '" x1="0" y1="0" x2="1" y2="1">';
|
|
|
|
var color = gradient.colors.replace(rgbColorRe, 'rgb($1|$2|$3)');
|
|
color = color.replace(rgbaColorRe, 'rgba($1|$2|$3|$4)')
|
|
colorstops = color.split(',');
|
|
for(i=0, stopsLen = colorstops.length; i < stopsLen; i++){
|
|
stop = colorstops[i].split(' ');
|
|
color = Ext.draw.Color.fromString(stop[1].replace(/\|/g,','));
|
|
defs += '<stop offset="'+stop[0]+'" stop-color="' + color.toString() + '" stop-opacity="1"></stop>';
|
|
}
|
|
defs += '</linearGradient>';
|
|
}
|
|
}
|
|
|
|
svg += '<defs>' + defs + '</defs>';
|
|
|
|
// thats the background rectangle
|
|
svg += spriteProcessor.rect({
|
|
attr: {
|
|
width: '100%',
|
|
height: '100%',
|
|
fill: '#fff',
|
|
stroke: 'none',
|
|
opacity: '0'
|
|
}
|
|
});
|
|
|
|
// Sort the items (stable sort guaranteed)
|
|
sortedItems = new Array(itemsLen);
|
|
for(i = 0; i < itemsLen; i++){
|
|
sortedItems[i] = i;
|
|
}
|
|
sortedItems.sort(function (a, b) {
|
|
za = items[a].attr.zIndex || 0;
|
|
zb = items[b].attr.zIndex || 0;
|
|
if (za == zb) {
|
|
return a - b;
|
|
}
|
|
return za - zb;
|
|
});
|
|
|
|
for(i = 0; i < itemsLen; i++){
|
|
item = items[sortedItems[i]];
|
|
if(!item.attr.hidden){
|
|
svg += spriteProcessor[item.type](item);
|
|
}
|
|
}
|
|
|
|
svg += '</svg>';
|
|
|
|
return svg;
|
|
},
|
|
toPropertyString = function(obj){
|
|
var propString = '',
|
|
key;
|
|
|
|
for(key in obj){
|
|
|
|
if(obj.hasOwnProperty(key) && obj[key] != null){
|
|
propString += key +'="'+ obj[key]+'" ';
|
|
}
|
|
|
|
}
|
|
|
|
return propString;
|
|
};
|
|
|
|
return {
|
|
singleton: true,
|
|
|
|
/**
|
|
* Exports the passed surface to a SVG string representation
|
|
* @param {Ext.draw.Surface} surface The surface to export
|
|
* @param {Object} [config] Any configuration for the export. Currently this is
|
|
* unused but may provide more options in the future
|
|
* @return {String} The SVG as a string
|
|
*/
|
|
generate: function(surface, config){
|
|
config = config || {};
|
|
init(surface);
|
|
return svgHeader() + svgContent();
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Provides specific methods to draw with VML.
|
|
*/
|
|
Ext.define('Ext.draw.engine.Vml', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.draw.Surface ,
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
engine: 'Vml',
|
|
|
|
map: {M: "m", L: "l", C: "c", Z: "x", m: "t", l: "r", c: "v", z: "x"},
|
|
bitesRe: /([clmz]),?([^clmz]*)/gi,
|
|
valRe: /-?[^,\s\-]+/g,
|
|
fillUrlRe: /^url\(\s*['"]?([^\)]+?)['"]?\s*\)$/i,
|
|
pathlike: /^(path|rect)$/,
|
|
NonVmlPathRe: /[ahqstv]/ig, // Non-VML Pathing ops
|
|
partialPathRe: /[clmz]/g,
|
|
fontFamilyRe: /^['"]+|['"]+$/g,
|
|
baseVmlCls: Ext.baseCSSPrefix + 'vml-base',
|
|
vmlGroupCls: Ext.baseCSSPrefix + 'vml-group',
|
|
spriteCls: Ext.baseCSSPrefix + 'vml-sprite',
|
|
measureSpanCls: Ext.baseCSSPrefix + 'vml-measure-span',
|
|
zoom: 21600,
|
|
coordsize: 1000,
|
|
coordorigin: '0 0',
|
|
zIndexShift: 0,
|
|
// VML uses CSS z-index and therefore doesn't need sprites to be kept in zIndex order
|
|
orderSpritesByZIndex: false,
|
|
|
|
// @private
|
|
// Convert an SVG standard path into a VML path
|
|
path2vml: function (path) {
|
|
var me = this,
|
|
nonVML = me.NonVmlPathRe,
|
|
map = me.map,
|
|
val = me.valRe,
|
|
zoom = me.zoom,
|
|
bites = me.bitesRe,
|
|
command = Ext.Function.bind(Ext.draw.Draw.pathToAbsolute, Ext.draw.Draw),
|
|
res, pa, p, r, i, ii, j, jj;
|
|
if (String(path).match(nonVML)) {
|
|
command = Ext.Function.bind(Ext.draw.Draw.path2curve, Ext.draw.Draw);
|
|
} else if (!String(path).match(me.partialPathRe)) {
|
|
res = String(path).replace(bites, function (all, command, args) {
|
|
var vals = [],
|
|
isMove = command.toLowerCase() == "m",
|
|
res = map[command];
|
|
args.replace(val, function (value) {
|
|
if (isMove && vals.length === 2) {
|
|
res += vals + map[command == "m" ? "l" : "L"];
|
|
vals = [];
|
|
}
|
|
vals.push(Math.round(value * zoom));
|
|
});
|
|
return res + vals;
|
|
});
|
|
return res;
|
|
}
|
|
pa = command(path);
|
|
res = [];
|
|
for (i = 0, ii = pa.length; i < ii; i++) {
|
|
p = pa[i];
|
|
r = pa[i][0].toLowerCase();
|
|
if (r == "z") {
|
|
r = "x";
|
|
}
|
|
for (j = 1, jj = p.length; j < jj; j++) {
|
|
r += Math.round(p[j] * me.zoom) + (j != jj - 1 ? "," : "");
|
|
}
|
|
res.push(r);
|
|
}
|
|
return res.join(" ");
|
|
},
|
|
|
|
// @private - set of attributes which need to be translated from the sprite API to the native browser API
|
|
translateAttrs: {
|
|
radius: "r",
|
|
radiusX: "rx",
|
|
radiusY: "ry",
|
|
lineWidth: "stroke-width",
|
|
fillOpacity: "fill-opacity",
|
|
strokeOpacity: "stroke-opacity",
|
|
strokeLinejoin: "stroke-linejoin"
|
|
},
|
|
|
|
// @private - Minimun set of defaults for different types of sprites.
|
|
minDefaults: {
|
|
circle: {
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
ellipse: {
|
|
cx: 0,
|
|
cy: 0,
|
|
rx: 0,
|
|
ry: 0,
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
rect: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
rx: 0,
|
|
ry: 0,
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
text: {
|
|
x: 0,
|
|
y: 0,
|
|
"text-anchor": "start",
|
|
font: '10px "Arial"',
|
|
fill: "#000",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
path: {
|
|
d: "M0,0",
|
|
fill: "none",
|
|
stroke: null,
|
|
"stroke-width": null,
|
|
opacity: null,
|
|
"fill-opacity": null,
|
|
"stroke-opacity": null
|
|
},
|
|
image: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
preserveAspectRatio: "none",
|
|
opacity: null
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseEnter: function (e) {
|
|
this.fireEvent("mouseenter", e);
|
|
},
|
|
|
|
// private
|
|
onMouseLeave: function (e) {
|
|
this.fireEvent("mouseleave", e);
|
|
},
|
|
|
|
// @private - Normalize a delegated single event from the main container to each sprite and sprite group
|
|
processEvent: function (name, e) {
|
|
var target = e.getTarget(),
|
|
surface = this.surface,
|
|
sprite;
|
|
this.fireEvent(name, e);
|
|
sprite = this.items.get(target.id);
|
|
if (sprite) {
|
|
sprite.fireEvent(name, sprite, e);
|
|
}
|
|
},
|
|
|
|
// Create the VML element/elements and append them to the DOM
|
|
createSpriteElement: function (sprite) {
|
|
var me = this,
|
|
attr = sprite.attr,
|
|
type = sprite.type,
|
|
zoom = me.zoom,
|
|
vml = sprite.vml || (sprite.vml = {}),
|
|
round = Math.round,
|
|
el = (type === 'image') ? me.createNode('image') : me.createNode('shape'),
|
|
path, skew, textPath;
|
|
|
|
el.coordsize = zoom + ' ' + zoom;
|
|
el.coordorigin = attr.coordorigin || "0 0";
|
|
Ext.get(el).addCls(me.spriteCls);
|
|
if (type == "text") {
|
|
vml.path = path = me.createNode("path");
|
|
path.textpathok = true;
|
|
vml.textpath = textPath = me.createNode("textpath");
|
|
textPath.on = true;
|
|
el.appendChild(textPath);
|
|
el.appendChild(path);
|
|
}
|
|
el.id = sprite.id;
|
|
sprite.el = Ext.get(el);
|
|
sprite.el.setStyle('zIndex', -me.zIndexShift);
|
|
me.el.appendChild(el);
|
|
if (type !== 'image') {
|
|
skew = me.createNode("skew");
|
|
skew.on = true;
|
|
el.appendChild(skew);
|
|
sprite.skew = skew;
|
|
}
|
|
sprite.matrix = new Ext.draw.Matrix();
|
|
sprite.bbox = {
|
|
plain: null,
|
|
transform: null
|
|
};
|
|
|
|
this.applyAttrs(sprite);
|
|
this.applyTransformations(sprite);
|
|
sprite.fireEvent("render", sprite);
|
|
return sprite.el;
|
|
},
|
|
|
|
getBBoxText: function (sprite) {
|
|
var vml = sprite.vml;
|
|
return {
|
|
x: vml.X + (vml.bbx || 0) - vml.W / 2,
|
|
y: vml.Y - vml.H / 2,
|
|
width: vml.W,
|
|
height: vml.H
|
|
};
|
|
},
|
|
|
|
applyAttrs: function (sprite) {
|
|
var me = this,
|
|
vml = sprite.vml,
|
|
group = sprite.group,
|
|
spriteAttr = sprite.attr,
|
|
el = sprite.el,
|
|
dom = el.dom,
|
|
style, name, groups, i, ln, scrubbedAttrs, font, key,
|
|
cx, cy, rx, ry;
|
|
|
|
if (group) {
|
|
groups = [].concat(group);
|
|
ln = groups.length;
|
|
for (i = 0; i < ln; i++) {
|
|
group = groups[i];
|
|
me.getGroup(group).add(sprite);
|
|
}
|
|
delete sprite.group;
|
|
}
|
|
scrubbedAttrs = me.scrubAttrs(sprite) || {};
|
|
|
|
if (sprite.zIndexDirty) {
|
|
me.setZIndex(sprite);
|
|
}
|
|
|
|
// Apply minimum default attributes
|
|
Ext.applyIf(scrubbedAttrs, me.minDefaults[sprite.type]);
|
|
|
|
if (sprite.type == 'image') {
|
|
Ext.apply(sprite.attr, {
|
|
x: scrubbedAttrs.x,
|
|
y: scrubbedAttrs.y,
|
|
width: scrubbedAttrs.width,
|
|
height: scrubbedAttrs.height
|
|
});
|
|
el.setStyle({
|
|
width: scrubbedAttrs.width + 'px',
|
|
height: scrubbedAttrs.height + 'px'
|
|
});
|
|
dom.src = scrubbedAttrs.src;
|
|
}
|
|
|
|
if (dom.href) {
|
|
dom.href = scrubbedAttrs.href;
|
|
}
|
|
if (dom.title) {
|
|
dom.title = scrubbedAttrs.title;
|
|
}
|
|
if (dom.target) {
|
|
dom.target = scrubbedAttrs.target;
|
|
}
|
|
if (dom.cursor) {
|
|
dom.cursor = scrubbedAttrs.cursor;
|
|
}
|
|
|
|
// Change visibility
|
|
if (sprite.dirtyHidden) {
|
|
(scrubbedAttrs.hidden) ? me.hidePrim(sprite) : me.showPrim(sprite);
|
|
sprite.dirtyHidden = false;
|
|
}
|
|
|
|
// Update path
|
|
if (sprite.dirtyPath) {
|
|
if (sprite.type == "circle" || sprite.type == "ellipse") {
|
|
cx = scrubbedAttrs.x;
|
|
cy = scrubbedAttrs.y;
|
|
rx = scrubbedAttrs.rx || scrubbedAttrs.r || 0;
|
|
ry = scrubbedAttrs.ry || scrubbedAttrs.r || 0;
|
|
dom.path = Ext.String.format("ar{0},{1},{2},{3},{4},{1},{4},{1}",
|
|
Math.round((cx - rx) * me.zoom),
|
|
Math.round((cy - ry) * me.zoom),
|
|
Math.round((cx + rx) * me.zoom),
|
|
Math.round((cy + ry) * me.zoom),
|
|
Math.round(cx * me.zoom));
|
|
sprite.dirtyPath = false;
|
|
}
|
|
else if (sprite.type !== "text" && sprite.type !== 'image') {
|
|
sprite.attr.path = scrubbedAttrs.path = me.setPaths(sprite, scrubbedAttrs) || scrubbedAttrs.path;
|
|
dom.path = me.path2vml(scrubbedAttrs.path);
|
|
sprite.dirtyPath = false;
|
|
}
|
|
}
|
|
|
|
// Apply clipping
|
|
if ("clip-rect" in scrubbedAttrs) {
|
|
me.setClip(sprite, scrubbedAttrs);
|
|
}
|
|
|
|
// Handle text (special handling required)
|
|
if (sprite.type == "text") {
|
|
me.setTextAttributes(sprite, scrubbedAttrs);
|
|
}
|
|
|
|
// Handle fill and opacity
|
|
if (scrubbedAttrs.opacity || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
|
|
me.setFill(sprite, scrubbedAttrs);
|
|
}
|
|
|
|
// Handle stroke (all fills require a stroke element)
|
|
if (scrubbedAttrs.stroke || scrubbedAttrs['stroke-opacity'] || scrubbedAttrs.fill) {
|
|
me.setStroke(sprite, scrubbedAttrs);
|
|
}
|
|
|
|
//set styles
|
|
style = spriteAttr.style;
|
|
if (style) {
|
|
el.setStyle(style);
|
|
}
|
|
|
|
sprite.dirty = false;
|
|
},
|
|
|
|
setZIndex: function (sprite) {
|
|
var me = this,
|
|
zIndex = sprite.attr.zIndex,
|
|
shift = me.zIndexShift,
|
|
items, iLen, item, i;
|
|
|
|
if (zIndex < shift) {
|
|
// This means bad thing happened.
|
|
// The algorithm below will guarantee O(n) time.
|
|
items = me.items.items;
|
|
iLen = items.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
if ((zIndex = items[i].attr.zIndex) && zIndex < shift) { // zIndex is no longer useful this case
|
|
shift = zIndex;
|
|
}
|
|
}
|
|
|
|
me.zIndexShift = shift;
|
|
for (i = 0; i < iLen; i++) {
|
|
item = items[i];
|
|
if (item.el) {
|
|
item.el.setStyle('zIndex', item.attr.zIndex - shift);
|
|
}
|
|
item.zIndexDirty = false;
|
|
}
|
|
} else if (sprite.el) {
|
|
sprite.el.setStyle('zIndex', zIndex - shift);
|
|
sprite.zIndexDirty = false;
|
|
}
|
|
},
|
|
|
|
// Normalize all virtualized types into paths.
|
|
setPaths: function (sprite, params) {
|
|
var spriteAttr = sprite.attr, thickness = sprite.attr['stroke-width'] || 1;
|
|
// Clear bbox cache
|
|
sprite.bbox.plain = null;
|
|
sprite.bbox.transform = null;
|
|
if (sprite.type == 'circle') {
|
|
spriteAttr.rx = spriteAttr.ry = params.r;
|
|
return Ext.draw.Draw.ellipsePath(sprite);
|
|
}
|
|
else if (sprite.type == 'ellipse') {
|
|
spriteAttr.rx = params.rx;
|
|
spriteAttr.ry = params.ry;
|
|
return Ext.draw.Draw.ellipsePath(sprite);
|
|
}
|
|
else if (sprite.type == 'rect') {
|
|
spriteAttr.rx = spriteAttr.ry = params.r;
|
|
return Ext.draw.Draw.rectPath(sprite);
|
|
}
|
|
else if (sprite.type == 'path' && spriteAttr.path) {
|
|
return Ext.draw.Draw.pathToAbsolute(spriteAttr.path);
|
|
}
|
|
return false;
|
|
},
|
|
|
|
setFill: function (sprite, params) {
|
|
var me = this,
|
|
el = sprite.el.dom,
|
|
fillEl = el.fill,
|
|
newfill = false,
|
|
opacity, gradient, fillUrl, rotation, angle;
|
|
|
|
if (!fillEl) {
|
|
// NOT an expando (but it sure looks like one)...
|
|
fillEl = el.fill = me.createNode("fill");
|
|
newfill = true;
|
|
}
|
|
if (Ext.isArray(params.fill)) {
|
|
params.fill = params.fill[0];
|
|
}
|
|
if (params.fill == "none") {
|
|
fillEl.on = false;
|
|
}
|
|
else {
|
|
if (typeof params.opacity == "number") {
|
|
fillEl.opacity = params.opacity;
|
|
}
|
|
if (typeof params["fill-opacity"] == "number") {
|
|
fillEl.opacity = params["fill-opacity"];
|
|
}
|
|
fillEl.on = true;
|
|
if (typeof params.fill == "string") {
|
|
fillUrl = params.fill.match(me.fillUrlRe);
|
|
if (fillUrl) {
|
|
fillUrl = fillUrl[1];
|
|
// If the URL matches one of the registered gradients, render that gradient
|
|
if (fillUrl.charAt(0) == "#") {
|
|
gradient = me.gradientsColl.getByKey(fillUrl.substring(1));
|
|
}
|
|
if (gradient) {
|
|
// VML angle is offset and inverted from standard, and must be adjusted to match rotation transform
|
|
rotation = params.rotation;
|
|
angle = -(gradient.angle + 270 + (rotation ? rotation.degrees : 0)) % 360;
|
|
// IE will flip the angle at 0 degrees...
|
|
if (angle === 0) {
|
|
angle = 180;
|
|
}
|
|
fillEl.angle = angle;
|
|
fillEl.type = "gradient";
|
|
fillEl.method = "sigma";
|
|
if (fillEl.colors) {
|
|
fillEl.colors.value = gradient.colors;
|
|
} else {
|
|
fillEl.colors = gradient.colors;
|
|
}
|
|
}
|
|
// Otherwise treat it as an image
|
|
else {
|
|
fillEl.src = fillUrl;
|
|
fillEl.type = "tile";
|
|
}
|
|
}
|
|
else {
|
|
fillEl.color = Ext.draw.Color.toHex(params.fill);
|
|
fillEl.src = "";
|
|
fillEl.type = "solid";
|
|
}
|
|
}
|
|
}
|
|
if (newfill) {
|
|
el.appendChild(fillEl);
|
|
}
|
|
},
|
|
|
|
setStroke: function (sprite, params) {
|
|
var me = this,
|
|
el = sprite.el.dom,
|
|
strokeEl = sprite.strokeEl,
|
|
newStroke = false,
|
|
width, opacity;
|
|
|
|
if (!strokeEl) {
|
|
strokeEl = sprite.strokeEl = me.createNode("stroke");
|
|
newStroke = true;
|
|
}
|
|
if (Ext.isArray(params.stroke)) {
|
|
params.stroke = params.stroke[0];
|
|
}
|
|
if (!params.stroke || params.stroke == "none" || params.stroke == 0 || params["stroke-width"] == 0) {
|
|
strokeEl.on = false;
|
|
}
|
|
else {
|
|
strokeEl.on = true;
|
|
if (params.stroke && !params.stroke.match(me.fillUrlRe)) {
|
|
// VML does NOT support a gradient stroke :(
|
|
strokeEl.color = Ext.draw.Color.toHex(params.stroke);
|
|
}
|
|
strokeEl.dashstyle = params["stroke-dasharray"] ? "dash" : "solid";
|
|
strokeEl.joinstyle = params["stroke-linejoin"];
|
|
strokeEl.endcap = params["stroke-linecap"] || "round";
|
|
strokeEl.miterlimit = params["stroke-miterlimit"] || 8;
|
|
width = parseFloat(params["stroke-width"] || 1) * 0.75;
|
|
opacity = params["stroke-opacity"] || 1;
|
|
// VML Does not support stroke widths under 1, so we're going to fiddle with stroke-opacity instead.
|
|
if (Ext.isNumber(width) && width < 1) {
|
|
strokeEl.weight = 1;
|
|
strokeEl.opacity = opacity * width;
|
|
}
|
|
else {
|
|
strokeEl.weight = width;
|
|
strokeEl.opacity = opacity;
|
|
}
|
|
}
|
|
if (newStroke) {
|
|
el.appendChild(strokeEl);
|
|
}
|
|
},
|
|
|
|
setClip: function (sprite, params) {
|
|
var me = this,
|
|
el = sprite.el,
|
|
clipEl = sprite.clipEl,
|
|
rect = String(params["clip-rect"]).split(me.separatorRe);
|
|
if (!clipEl) {
|
|
clipEl = sprite.clipEl = me.el.insertFirst(Ext.getDoc().dom.createElement("div"));
|
|
clipEl.addCls(Ext.baseCSSPrefix + 'vml-sprite');
|
|
}
|
|
if (rect.length == 4) {
|
|
rect[2] = +rect[2] + (+rect[0]);
|
|
rect[3] = +rect[3] + (+rect[1]);
|
|
clipEl.setStyle("clip", Ext.String.format("rect({1}px {2}px {3}px {0}px)", rect[0], rect[1], rect[2], rect[3]));
|
|
clipEl.setSize(me.el.width, me.el.height);
|
|
}
|
|
else {
|
|
clipEl.setStyle("clip", "");
|
|
}
|
|
},
|
|
|
|
setTextAttributes: function (sprite, params) {
|
|
var me = this,
|
|
vml = sprite.vml,
|
|
textStyle = vml.textpath.style,
|
|
spanCacheStyle = me.span.style,
|
|
zoom = me.zoom,
|
|
round = Math.round,
|
|
fontObj = {
|
|
fontSize: "font-size",
|
|
fontWeight: "font-weight",
|
|
fontStyle: "font-style"
|
|
},
|
|
fontProp,
|
|
paramProp;
|
|
if (sprite.dirtyFont) {
|
|
if (params.font) {
|
|
textStyle.font = spanCacheStyle.font = params.font;
|
|
}
|
|
if (params["font-family"]) {
|
|
textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
|
|
spanCacheStyle.fontFamily = params["font-family"];
|
|
}
|
|
|
|
for (fontProp in fontObj) {
|
|
paramProp = params[fontObj[fontProp]];
|
|
if (paramProp) {
|
|
textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
|
|
}
|
|
}
|
|
|
|
me.setText(sprite, params.text);
|
|
|
|
if (vml.textpath.string) {
|
|
me.span.innerHTML = String(vml.textpath.string).replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br/>");
|
|
}
|
|
vml.W = me.span.offsetWidth;
|
|
vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath
|
|
|
|
// text-anchor emulation
|
|
if (params["text-anchor"] == "middle") {
|
|
textStyle["v-text-align"] = "center";
|
|
}
|
|
else if (params["text-anchor"] == "end") {
|
|
textStyle["v-text-align"] = "right";
|
|
vml.bbx = -Math.round(vml.W / 2);
|
|
}
|
|
else {
|
|
textStyle["v-text-align"] = "left";
|
|
vml.bbx = Math.round(vml.W / 2);
|
|
}
|
|
}
|
|
vml.X = params.x;
|
|
vml.Y = params.y;
|
|
vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
|
|
// Clear bbox cache
|
|
sprite.bbox.plain = null;
|
|
sprite.bbox.transform = null;
|
|
sprite.dirtyFont = false;
|
|
},
|
|
|
|
setText: function (sprite, text) {
|
|
sprite.vml.textpath.string = Ext.htmlDecode(text);
|
|
},
|
|
|
|
hide: function () {
|
|
this.el.hide();
|
|
},
|
|
|
|
show: function () {
|
|
this.el.show();
|
|
},
|
|
|
|
hidePrim: function (sprite) {
|
|
sprite.el.addCls(Ext.baseCSSPrefix + 'hide-visibility');
|
|
},
|
|
|
|
showPrim: function (sprite) {
|
|
sprite.el.removeCls(Ext.baseCSSPrefix + 'hide-visibility');
|
|
},
|
|
|
|
setSize: function (width, height) {
|
|
var me = this;
|
|
width = width || me.width;
|
|
height = height || me.height;
|
|
me.width = width;
|
|
me.height = height;
|
|
|
|
if (me.el) {
|
|
// Size outer div
|
|
if (width != undefined) {
|
|
me.el.setWidth(width);
|
|
}
|
|
if (height != undefined) {
|
|
me.el.setHeight(height);
|
|
}
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @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,
|
|
items,
|
|
iLen,
|
|
i;
|
|
|
|
me.callParent();
|
|
|
|
if (viewBox && (width || height)) {
|
|
items = me.items.items;
|
|
iLen = items.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
me.applyTransformations(items[i]);
|
|
}
|
|
}
|
|
},
|
|
|
|
onAdd: function (item) {
|
|
this.callParent(arguments);
|
|
if (this.el) {
|
|
this.renderItem(item);
|
|
}
|
|
},
|
|
|
|
onRemove: function (sprite) {
|
|
if (sprite.el) {
|
|
sprite.el.remove();
|
|
delete sprite.el;
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
render: function (container) {
|
|
var me = this,
|
|
doc = Ext.getDoc().dom,
|
|
el;
|
|
// VML Node factory method (createNode)
|
|
if (!me.createNode) {
|
|
try {
|
|
if (!doc.namespaces.rvml) {
|
|
doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
|
|
}
|
|
me.createNode = function (tagName) {
|
|
return doc.createElement("<rvml:" + tagName + ' class="rvml">');
|
|
};
|
|
} catch (e) {
|
|
me.createNode = function (tagName) {
|
|
return doc.createElement("<" + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
|
|
};
|
|
}
|
|
}
|
|
|
|
if (!me.el) {
|
|
el = doc.createElement("div");
|
|
me.el = Ext.get(el);
|
|
me.el.addCls(me.baseVmlCls);
|
|
|
|
// Measuring span (offscrren)
|
|
me.span = doc.createElement("span");
|
|
Ext.get(me.span).addCls(me.measureSpanCls);
|
|
el.appendChild(me.span);
|
|
me.el.setSize(me.width || 0, me.height || 0);
|
|
container.appendChild(el);
|
|
me.el.on({
|
|
scope: me,
|
|
mouseup: me.onMouseUp,
|
|
mousedown: me.onMouseDown,
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut,
|
|
mousemove: me.onMouseMove,
|
|
mouseenter: me.onMouseEnter,
|
|
mouseleave: me.onMouseLeave,
|
|
click: me.onClick,
|
|
dblclick: me.onDblClick
|
|
});
|
|
}
|
|
me.renderAll();
|
|
},
|
|
|
|
renderAll: function () {
|
|
this.items.each(this.renderItem, this);
|
|
},
|
|
|
|
redraw: function (sprite) {
|
|
sprite.dirty = true;
|
|
this.renderItem(sprite);
|
|
},
|
|
|
|
renderItem: function (sprite) {
|
|
// Does the surface element exist?
|
|
if (!this.el) {
|
|
return;
|
|
}
|
|
|
|
// Create sprite element if necessary
|
|
if (!sprite.el) {
|
|
this.createSpriteElement(sprite);
|
|
}
|
|
|
|
if (sprite.dirty) {
|
|
this.applyAttrs(sprite);
|
|
if (sprite.dirtyTransform) {
|
|
this.applyTransformations(sprite);
|
|
}
|
|
}
|
|
},
|
|
|
|
rotationCompensation: function (deg, dx, dy) {
|
|
var matrix = new Ext.draw.Matrix();
|
|
matrix.rotate(-deg, 0.5, 0.5);
|
|
return {
|
|
x: matrix.x(dx, dy),
|
|
y: matrix.y(dx, dy)
|
|
};
|
|
},
|
|
|
|
transform: function (sprite, matrixOnly) {
|
|
var me = this,
|
|
bbox = me.getBBox(sprite, true),
|
|
cx = bbox.x + bbox.width * 0.5,
|
|
cy = bbox.y + bbox.height * 0.5,
|
|
matrix = new Ext.draw.Matrix(),
|
|
transforms = sprite.transformations,
|
|
transformsLength = transforms.length,
|
|
i = 0,
|
|
deltaDegrees = 0,
|
|
deltaScaleX = 1,
|
|
deltaScaleY = 1,
|
|
flip = "",
|
|
el = sprite.el,
|
|
dom = el.dom,
|
|
domStyle = dom.style,
|
|
zoom = me.zoom,
|
|
skew = sprite.skew,
|
|
shift = me.viewBoxShift,
|
|
deltaX, deltaY, transform, type, compensate, y, fill, newAngle, zoomScaleX, zoomScaleY, newOrigin, offset;
|
|
|
|
|
|
for (; i < transformsLength; i++) {
|
|
transform = transforms[i];
|
|
type = transform.type;
|
|
if (type == "translate") {
|
|
matrix.translate(transform.x, transform.y);
|
|
}
|
|
else if (type == "rotate") {
|
|
matrix.rotate(transform.degrees, transform.x, transform.y);
|
|
deltaDegrees += transform.degrees;
|
|
}
|
|
else if (type == "scale") {
|
|
matrix.scale(transform.x, transform.y, transform.centerX, transform.centerY);
|
|
deltaScaleX *= transform.x;
|
|
deltaScaleY *= transform.y;
|
|
}
|
|
}
|
|
|
|
sprite.matrix = matrix.clone();
|
|
|
|
if (matrixOnly) {
|
|
return;
|
|
}
|
|
|
|
if (shift) {
|
|
matrix.prepend(shift.scale, 0, 0, shift.scale, shift.dx * shift.scale, shift.dy * shift.scale);
|
|
}
|
|
|
|
// Hide element while we transform
|
|
if (sprite.type != "image" && skew) {
|
|
skew.origin = "0,0";
|
|
// matrix transform via VML skew
|
|
skew.matrix = matrix.toString();
|
|
// skew.offset = '32767,1' OK
|
|
// skew.offset = '32768,1' Crash
|
|
// M$, R U kidding??
|
|
offset = matrix.offset();
|
|
if (offset[0] > 32767) {
|
|
offset[0] = 32767;
|
|
} else if (offset[0] < -32768) {
|
|
offset[0] = -32768;
|
|
}
|
|
if (offset[1] > 32767) {
|
|
offset[1] = 32767;
|
|
} else if (offset[1] < -32768) {
|
|
offset[1] = -32768;
|
|
}
|
|
skew.offset = offset;
|
|
}
|
|
else {
|
|
domStyle.filter = matrix.toFilter();
|
|
domStyle.left = Math.min(
|
|
matrix.x(bbox.x, bbox.y),
|
|
matrix.x(bbox.x + bbox.width, bbox.y),
|
|
matrix.x(bbox.x, bbox.y + bbox.height),
|
|
matrix.x(bbox.x + bbox.width, bbox.y + bbox.height)) + 'px';
|
|
domStyle.top = Math.min(
|
|
matrix.y(bbox.x, bbox.y),
|
|
matrix.y(bbox.x + bbox.width, bbox.y),
|
|
matrix.y(bbox.x, bbox.y + bbox.height),
|
|
matrix.y(bbox.x + bbox.width, bbox.y + bbox.height)) + 'px';
|
|
}
|
|
},
|
|
|
|
createItem: function (config) {
|
|
return Ext.create('Ext.draw.Sprite', config);
|
|
},
|
|
|
|
getRegion: function () {
|
|
return this.el.getRegion();
|
|
},
|
|
|
|
addCls: function (sprite, className) {
|
|
if (sprite && sprite.el) {
|
|
sprite.el.addCls(className);
|
|
}
|
|
},
|
|
|
|
removeCls: function (sprite, className) {
|
|
if (sprite && sprite.el) {
|
|
sprite.el.removeCls(className);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds a definition to this Surface for a linear gradient. We convert the gradient definition
|
|
* to its corresponding VML attributes and store it for later use by individual sprites.
|
|
* @param {Object} gradient
|
|
*/
|
|
addGradient: function (gradient) {
|
|
var gradients = this.gradientsColl || (this.gradientsColl = Ext.create('Ext.util.MixedCollection')),
|
|
colors = [],
|
|
stops = Ext.create('Ext.util.MixedCollection'),
|
|
keys,
|
|
items,
|
|
iLen,
|
|
key,
|
|
item,
|
|
i;
|
|
|
|
// Build colors string
|
|
stops.addAll(gradient.stops);
|
|
stops.sortByKey("ASC", function (a, b) {
|
|
a = parseInt(a, 10);
|
|
b = parseInt(b, 10);
|
|
return a > b ? 1 : (a < b ? -1 : 0);
|
|
});
|
|
|
|
keys = stops.keys;
|
|
items = stops.items;
|
|
iLen = keys.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
key = keys[i];
|
|
item = items[i];
|
|
colors.push(key + '% ' + item.color);
|
|
}
|
|
|
|
gradients.add(gradient.id, {
|
|
colors: colors.join(","),
|
|
angle: gradient.angle
|
|
});
|
|
},
|
|
|
|
destroy: function () {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
if (me.el) {
|
|
me.el.remove();
|
|
}
|
|
delete me.el;
|
|
}
|
|
});
|
|
|
|
//
|
|
// Definitions of enums referenced in documentation.
|
|
//
|
|
|
|
/**
|
|
* @enum [Ext.enums.Layout=layout.*]
|
|
* Enumeration of all layout types.
|
|
*/
|
|
|
|
/**
|
|
* @enum [Ext.enums.Widget=widget.*]
|
|
* Enumeration of all xtypes.
|
|
*/
|
|
|
|
/**
|
|
* @enum [Ext.enums.Plugin=plugin.*]
|
|
* Enumeration of all ptypes.
|
|
*/
|
|
|
|
/**
|
|
* @enum [Ext.enums.Feature=feature.*]
|
|
* Enumeration of all ftypes.
|
|
*/
|
|
|
|
|
|
/**
|
|
* A simple Component for displaying an Adobe Flash SWF movie. The movie will be sized and can participate
|
|
* in layout like any other Component.
|
|
*
|
|
* This component requires the third-party SWFObject library version 2.2 or above. It is not included within
|
|
* the ExtJS distribution, so you will have to include it into your page manually in order to use this component.
|
|
* The SWFObject library can be downloaded from the [SWFObject project page](http://code.google.com/p/swfobject)
|
|
* and then simply import it into the head of your HTML document:
|
|
*
|
|
* <script type="text/javascript" src="path/to/local/swfobject.js"></script>
|
|
*
|
|
* ## Configuration
|
|
*
|
|
* This component allows several options for configuring how the target Flash movie is embedded. The most
|
|
* important is the required {@link #url} which points to the location of the Flash movie to load. Other
|
|
* configurations include:
|
|
*
|
|
* - {@link #backgroundColor}
|
|
* - {@link #wmode}
|
|
* - {@link #flashVars}
|
|
* - {@link #flashParams}
|
|
* - {@link #flashAttributes}
|
|
*
|
|
* ## Example usage:
|
|
*
|
|
* var win = Ext.widget('window', {
|
|
* title: "It's a tiger!",
|
|
* layout: 'fit',
|
|
* width: 300,
|
|
* height: 300,
|
|
* x: 20,
|
|
* y: 20,
|
|
* resizable: true,
|
|
* items: {
|
|
* xtype: 'flash',
|
|
* url: 'tiger.swf'
|
|
* }
|
|
* });
|
|
* win.show();
|
|
*
|
|
* ## Express Install
|
|
*
|
|
* Adobe provides a tool called [Express Install](http://www.adobe.com/devnet/flashplayer/articles/express_install.html)
|
|
* that offers users an easy way to upgrade their Flash player. If you wish to make use of this, you should set
|
|
* the static EXPRESS\_INSTALL\_URL property to the location of your Express Install SWF file:
|
|
*
|
|
* Ext.flash.Component.EXPRESS_INSTALL_URL = 'path/to/local/expressInstall.swf';
|
|
*
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*/
|
|
Ext.define('Ext.flash.Component', {
|
|
extend: Ext.Component ,
|
|
alternateClassName: 'Ext.FlashComponent',
|
|
alias: 'widget.flash',
|
|
|
|
/**
|
|
* @cfg {String} [flashVersion="9.0.115"]
|
|
* Indicates the version the flash content was published for.
|
|
*/
|
|
flashVersion : '9.0.115',
|
|
|
|
/**
|
|
* @cfg {String} [backgroundColor="#ffffff"]
|
|
* The background color of the SWF movie.
|
|
*/
|
|
backgroundColor: '#ffffff',
|
|
|
|
/**
|
|
* @cfg {String} [wmode="opaque"]
|
|
* The wmode of the flash object. This can be used to control layering.
|
|
* Set to 'transparent' to ignore the {@link #backgroundColor} and make the background of the Flash
|
|
* movie transparent.
|
|
*/
|
|
wmode: 'opaque',
|
|
|
|
/**
|
|
* @cfg {Object} flashVars
|
|
* A set of key value pairs to be passed to the flash object as flash variables.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} flashParams
|
|
* A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here:
|
|
* http://kb2.adobe.com/cps/127/tn_12701.html
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} flashAttributes
|
|
* A set of key value pairs to be passed to the flash object as attributes.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} url (required)
|
|
* The URL of the SWF file to include.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Number} [swfWidth="100%"]
|
|
* The width of the embedded SWF movie inside the component.
|
|
*
|
|
* Defaults to "100%" so that the movie matches the width of the component.
|
|
*/
|
|
swfWidth: '100%',
|
|
|
|
/**
|
|
* @cfg {String/Number} [swfHeight="100%"]
|
|
* The height of the embedded SWF movie inside the component.
|
|
*
|
|
* Defaults to "100%" so that the movie matches the height of the component.
|
|
*/
|
|
swfHeight: '100%',
|
|
|
|
/**
|
|
* @cfg {Boolean} [expressInstall=false]
|
|
* True to prompt the user to install flash if not installed. Note that this uses
|
|
* Ext.FlashComponent.EXPRESS_INSTALL_URL, which should be set to the local resource.
|
|
*/
|
|
expressInstall: false,
|
|
|
|
/**
|
|
* @property {Ext.Element} swf
|
|
* A reference to the object or embed element into which the SWF file is loaded. Only
|
|
* populated after the component is rendered and the SWF has been successfully embedded.
|
|
*/
|
|
|
|
// Have to create a placeholder div with the swfId, which SWFObject will replace with the object/embed element.
|
|
renderTpl: ['<div id="{swfId}"></div>'],
|
|
|
|
initComponent: function() {
|
|
|
|
this.callParent();
|
|
this.addEvents(
|
|
/**
|
|
* @event success
|
|
* Fired when the Flash movie has been successfully embedded
|
|
* @param {Ext.flash.Component} this
|
|
*/
|
|
'success',
|
|
|
|
/**
|
|
* @event failure
|
|
* Fired when the Flash movie embedding fails
|
|
* @param {Ext.flash.Component} this
|
|
*/
|
|
'failure'
|
|
);
|
|
},
|
|
|
|
beforeRender: function(){
|
|
this.callParent();
|
|
|
|
Ext.applyIf(this.renderData, {
|
|
swfId: this.getSwfId()
|
|
});
|
|
},
|
|
|
|
afterRender: function() {
|
|
var me = this,
|
|
flashParams = Ext.apply({}, me.flashParams),
|
|
flashVars = Ext.apply({}, me.flashVars);
|
|
|
|
me.callParent();
|
|
|
|
flashParams = Ext.apply({
|
|
allowScriptAccess: 'always',
|
|
bgcolor: me.backgroundColor,
|
|
wmode: me.wmode
|
|
}, flashParams);
|
|
|
|
flashVars = Ext.apply({
|
|
allowedDomain: document.location.hostname
|
|
}, flashVars);
|
|
|
|
new swfobject.embedSWF(
|
|
me.url,
|
|
me.getSwfId(),
|
|
me.swfWidth,
|
|
me.swfHeight,
|
|
me.flashVersion,
|
|
me.expressInstall ? me.statics.EXPRESS_INSTALL_URL : undefined,
|
|
flashVars,
|
|
flashParams,
|
|
me.flashAttributes,
|
|
Ext.bind(me.swfCallback, me)
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* The callback method for handling an embedding success or failure by SWFObject
|
|
* @param {Object} e The event object passed by SWFObject - see http://code.google.com/p/swfobject/wiki/api
|
|
*/
|
|
swfCallback: function(e) {
|
|
var me = this;
|
|
if (e.success) {
|
|
me.swf = Ext.get(e.ref);
|
|
me.onSuccess();
|
|
me.fireEvent('success', me);
|
|
} else {
|
|
me.onFailure();
|
|
me.fireEvent('failure', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Retrieves the id of the SWF object/embed element.
|
|
*/
|
|
getSwfId: function() {
|
|
return this.swfId || (this.swfId = "extswf" + this.getAutoId());
|
|
},
|
|
|
|
onSuccess: function() {
|
|
// swfobject forces visiblity:visible on the swf element, which prevents it
|
|
// from getting hidden when an ancestor is given visibility:hidden.
|
|
this.swf.setStyle('visibility', 'inherit');
|
|
},
|
|
|
|
onFailure: Ext.emptyFn,
|
|
|
|
beforeDestroy: function() {
|
|
var me = this,
|
|
swf = me.swf;
|
|
if (swf) {
|
|
swfobject.removeSWF(me.getSwfId());
|
|
Ext.destroy(swf);
|
|
delete me.swf;
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* @property {String}
|
|
* The url for installing flash if it doesn't exist. This should be set to a local resource.
|
|
* See http://www.adobe.com/devnet/flashplayer/articles/express_install.html for details.
|
|
* @static
|
|
*/
|
|
EXPRESS_INSTALL_URL: 'http:/' + '/swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf'
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The subclasses of this class provide actions to perform upon {@link Ext.form.Basic Form}s.
|
|
*
|
|
* Instances of this class are only created by a {@link Ext.form.Basic Form} when the Form needs to perform an action
|
|
* such as submit or load. The Configuration options listed for this class are set through the Form's action methods:
|
|
* {@link Ext.form.Basic#submit submit}, {@link Ext.form.Basic#load load} and {@link Ext.form.Basic#doAction doAction}
|
|
*
|
|
* The instance of Action which performed the action is passed to the success and failure callbacks of the Form's action
|
|
* methods ({@link Ext.form.Basic#submit submit}, {@link Ext.form.Basic#load load} and
|
|
* {@link Ext.form.Basic#doAction doAction}), and to the {@link Ext.form.Basic#actioncomplete actioncomplete} and
|
|
* {@link Ext.form.Basic#actionfailed actionfailed} event handlers.
|
|
*/
|
|
Ext.define('Ext.form.action.Action', {
|
|
alternateClassName: 'Ext.form.Action',
|
|
|
|
/**
|
|
* @cfg {Ext.form.Basic} form
|
|
* The {@link Ext.form.Basic BasicForm} instance that is invoking this Action. Required.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} url
|
|
* The URL that the Action is to invoke. Will default to the {@link Ext.form.Basic#url url} configured on the
|
|
* {@link #form}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} reset
|
|
* When set to **true**, causes the Form to be {@link Ext.form.Basic#reset reset} on Action success. If specified,
|
|
* this happens before the {@link #success} callback is called and before the Form's
|
|
* {@link Ext.form.Basic#actioncomplete actioncomplete} event fires.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} method
|
|
* The HTTP method to use to access the requested URL.
|
|
* Defaults to the {@link Ext.form.Basic#method BasicForm's method}, or 'POST' if not specified.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/String} params
|
|
* Extra parameter values to pass. These are added to the Form's {@link Ext.form.Basic#baseParams} and passed to the
|
|
* specified URL along with the Form's input fields.
|
|
*
|
|
* Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode Ext.Object.toQueryString}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} headers
|
|
* Extra headers to be sent in the AJAX request for submit and load actions.
|
|
* See {@link Ext.data.proxy.Ajax#headers}.
|
|
*
|
|
* **Note:** Headers are not sent during file upload.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} timeout
|
|
* The number of seconds to wait for a server response before failing with the {@link #failureType} as
|
|
* {@link Ext.form.action.Action#CONNECT_FAILURE}. If not specified, defaults to the configured
|
|
* {@link Ext.form.Basic#timeout timeout} of the {@link #form}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} success
|
|
* The function to call when a valid success return packet is received.
|
|
* @cfg {Ext.form.Basic} success.form The form that requested the action
|
|
* @cfg {Ext.form.action.Action} success.action The Action class. The {@link #result} property of this object may
|
|
* be examined to perform custom postprocessing.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} failure
|
|
* The function to call when a failure packet was received, or when an error ocurred in the Ajax communication.
|
|
* @cfg {Ext.form.Basic} failure.form The form that requested the action
|
|
* @cfg {Ext.form.action.Action} failure.action The Action class. If an Ajax error ocurred, the failure type will
|
|
* be in {@link #failureType}. The {@link #result} property of this object may be examined to perform custom
|
|
* postprocessing.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope in which to call the configured #success and #failure callback functions
|
|
* (the `this` reference for the callback functions).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} waitMsg
|
|
* The message to be displayed by a call to {@link Ext.window.MessageBox#wait} during the time the action is being
|
|
* processed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} waitTitle
|
|
* The title to be displayed by a call to {@link Ext.window.MessageBox#wait} during the time the action is being
|
|
* processed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} submitEmptyText
|
|
* If set to true, the emptyText value will be sent with the form when it is submitted.
|
|
*/
|
|
submitEmptyText : true,
|
|
|
|
/**
|
|
* @property {String} type
|
|
* The type of action this Action instance performs. Currently only "submit" and "load" are supported.
|
|
*/
|
|
|
|
/**
|
|
* @property {String} failureType
|
|
* The type of failure detected will be one of these:
|
|
* {@link #CLIENT_INVALID}, {@link #SERVER_INVALID}, {@link #CONNECT_FAILURE}, or {@link #LOAD_FAILURE}.
|
|
*
|
|
* Usage:
|
|
*
|
|
* var fp = new Ext.form.Panel({
|
|
* ...
|
|
* buttons: [{
|
|
* text: 'Save',
|
|
* formBind: true,
|
|
* handler: function(){
|
|
* if(fp.getForm().isValid()){
|
|
* fp.getForm().submit({
|
|
* url: 'form-submit.php',
|
|
* waitMsg: 'Submitting your data...',
|
|
* success: function(form, action){
|
|
* // server responded with success = true
|
|
* var result = action.{@link #result};
|
|
* },
|
|
* failure: function(form, action){
|
|
* if (action.{@link #failureType} === Ext.form.action.Action.CONNECT_FAILURE) {
|
|
* Ext.Msg.alert('Error',
|
|
* 'Status:'+action.{@link #response}.status+': '+
|
|
* action.{@link #response}.statusText);
|
|
* }
|
|
* if (action.failureType === Ext.form.action.Action.SERVER_INVALID){
|
|
* // server responded with success = false
|
|
* Ext.Msg.alert('Invalid', action.{@link #result}.errormsg);
|
|
* }
|
|
* }
|
|
* });
|
|
* }
|
|
* }
|
|
* },{
|
|
* text: 'Reset',
|
|
* handler: function(){
|
|
* fp.getForm().reset();
|
|
* }
|
|
* }]
|
|
*/
|
|
|
|
/**
|
|
* @property {Object} response
|
|
* The raw XMLHttpRequest object used to perform the action.
|
|
*/
|
|
|
|
/**
|
|
* @property {Object} result
|
|
* The decoded response object containing a boolean `success` property and other, action-specific properties.
|
|
*/
|
|
|
|
/**
|
|
* Creates new Action.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
if (config) {
|
|
Ext.apply(this, config);
|
|
}
|
|
|
|
// Normalize the params option to an Object
|
|
var params = config.params;
|
|
if (Ext.isString(params)) {
|
|
this.params = Ext.Object.fromQueryString(params);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @method
|
|
* Invokes this action using the current configuration.
|
|
*/
|
|
run: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* @method onSuccess
|
|
* Callback method that gets invoked when the action completes successfully. Must be implemented by subclasses.
|
|
* @param {Object} response
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* @method handleResponse
|
|
* Handles the raw response and builds a result object from it. Must be implemented by subclasses.
|
|
* @param {Object} response
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Handles a failure response.
|
|
* @param {Object} response
|
|
*/
|
|
onFailure : function(response){
|
|
this.response = response;
|
|
this.failureType = Ext.form.action.Action.CONNECT_FAILURE;
|
|
this.form.afterAction(this, false);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Validates that a response contains either responseText or responseXML and invokes
|
|
* {@link #handleResponse} to build the result object.
|
|
* @param {Object} response The raw response object.
|
|
* @return {Object/Boolean} The result object as built by handleResponse, or `true` if
|
|
* the response had empty responseText and responseXML.
|
|
*/
|
|
processResponse : function(response){
|
|
this.response = response;
|
|
if (!response.responseText && !response.responseXML) {
|
|
return true;
|
|
}
|
|
return (this.result = this.handleResponse(response));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Build the URL for the AJAX request. Used by the standard AJAX submit and load actions.
|
|
* @return {String} The URL.
|
|
*/
|
|
getUrl: function() {
|
|
return this.url || this.form.url;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Determine the HTTP method to be used for the request.
|
|
* @return {String} The HTTP method
|
|
*/
|
|
getMethod: function() {
|
|
return (this.method || this.form.method || 'POST').toUpperCase();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Get the set of parameters specified in the BasicForm's baseParams and/or the params option.
|
|
* Items in params override items of the same name in baseParams.
|
|
* @return {Object} the full set of parameters
|
|
*/
|
|
getParams: function() {
|
|
return Ext.apply({}, this.params, this.form.baseParams);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates a callback object.
|
|
*/
|
|
createCallback: function() {
|
|
var me = this,
|
|
undef,
|
|
form = me.form;
|
|
return {
|
|
success: me.onSuccess,
|
|
failure: me.onFailure,
|
|
scope: me,
|
|
timeout: (this.timeout * 1000) || (form.timeout * 1000),
|
|
upload: form.fileUpload ? me.onSuccess : undef
|
|
};
|
|
},
|
|
|
|
statics: {
|
|
/**
|
|
* @property
|
|
* Failure type returned when client side validation of the Form fails thus aborting a submit action. Client
|
|
* side validation is performed unless {@link Ext.form.action.Submit#clientValidation} is explicitly set to
|
|
* false.
|
|
* @static
|
|
*/
|
|
CLIENT_INVALID: 'client',
|
|
|
|
/**
|
|
* @property
|
|
* Failure type returned when server side processing fails and the {@link #result}'s `success` property is set to
|
|
* false.
|
|
*
|
|
* In the case of a form submission, field-specific error messages may be returned in the {@link #result}'s
|
|
* errors property.
|
|
* @static
|
|
*/
|
|
SERVER_INVALID: 'server',
|
|
|
|
/**
|
|
* @property
|
|
* Failure type returned when a communication error happens when attempting to send a request to the remote
|
|
* server. The {@link #response} may be examined to provide further information.
|
|
* @static
|
|
*/
|
|
CONNECT_FAILURE: 'connect',
|
|
|
|
/**
|
|
* @property
|
|
* Failure type returned when the response's `success` property is set to false, or no field values are returned
|
|
* in the response's data property.
|
|
* @static
|
|
*/
|
|
LOAD_FAILURE: 'load'
|
|
|
|
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A class which handles loading of data from a server into the Fields of an {@link Ext.form.Basic}.
|
|
*
|
|
* Instances of this class are only created by a {@link Ext.form.Basic Form} when {@link Ext.form.Basic#load load}ing.
|
|
*
|
|
* ## Response Packet Criteria
|
|
*
|
|
* A response packet **must** contain:
|
|
*
|
|
* - **`success`** property : Boolean
|
|
* - **`data`** property : Object
|
|
*
|
|
* The `data` property contains the values of Fields to load. The individual value object for each Field is passed to
|
|
* the Field's {@link Ext.form.field.Field#setValue setValue} method.
|
|
*
|
|
* ## JSON Packets
|
|
*
|
|
* By default, response packets are assumed to be JSON, so for the following form load call:
|
|
*
|
|
* var myFormPanel = new Ext.form.Panel({
|
|
* title: 'Client and routing info',
|
|
* renderTo: Ext.getBody(),
|
|
* defaults: {
|
|
* xtype: 'textfield'
|
|
* },
|
|
* items: [{
|
|
* fieldLabel: 'Client',
|
|
* name: 'clientName'
|
|
* }, {
|
|
* fieldLabel: 'Port of loading',
|
|
* name: 'portOfLoading'
|
|
* }, {
|
|
* fieldLabel: 'Port of discharge',
|
|
* name: 'portOfDischarge'
|
|
* }]
|
|
* });
|
|
* myFormPanel.{@link Ext.form.Panel#getForm getForm}().{@link Ext.form.Basic#load load}({
|
|
* url: '/getRoutingInfo.php',
|
|
* params: {
|
|
* consignmentRef: myConsignmentRef
|
|
* },
|
|
* failure: function(form, action) {
|
|
* Ext.Msg.alert("Load failed", action.result.errorMessage);
|
|
* }
|
|
* });
|
|
*
|
|
* a **success response** packet may look like this:
|
|
*
|
|
* {
|
|
* success: true,
|
|
* data: {
|
|
* clientName: "Fred. Olsen Lines",
|
|
* portOfLoading: "FXT",
|
|
* portOfDischarge: "OSL"
|
|
* }
|
|
* }
|
|
*
|
|
* while a **failure response** packet may look like this:
|
|
*
|
|
* {
|
|
* success: false,
|
|
* errorMessage: "Consignment reference not found"
|
|
* }
|
|
*
|
|
* Other data may be placed into the response for processing the {@link Ext.form.Basic Form}'s callback or event handler
|
|
* methods. The object decoded from this JSON is available in the {@link Ext.form.action.Action#result result} property.
|
|
*/
|
|
Ext.define('Ext.form.action.Load', {
|
|
extend: Ext.form.action.Action ,
|
|
|
|
alternateClassName: 'Ext.form.Action.Load',
|
|
alias: 'formaction.load',
|
|
|
|
type: 'load',
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
run: function() {
|
|
Ext.Ajax.request(Ext.apply(
|
|
this.createCallback(),
|
|
{
|
|
method: this.getMethod(),
|
|
url: this.getUrl(),
|
|
headers: this.headers,
|
|
params: this.getParams()
|
|
}
|
|
));
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onSuccess: function(response){
|
|
var result = this.processResponse(response),
|
|
form = this.form;
|
|
if (result === true || !result.success || !result.data) {
|
|
this.failureType = Ext.form.action.Action.LOAD_FAILURE;
|
|
form.afterAction(this, false);
|
|
return;
|
|
}
|
|
form.clearInvalid();
|
|
form.setValues(result.data);
|
|
form.afterAction(this, true);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
handleResponse: function(response) {
|
|
var reader = this.form.reader,
|
|
rs, data;
|
|
if (reader) {
|
|
rs = reader.read(response);
|
|
data = rs.records && rs.records[0] ? rs.records[0].data : null;
|
|
return {
|
|
success : rs.success,
|
|
data : data
|
|
};
|
|
}
|
|
return Ext.decode(response.responseText);
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* A class which handles submission of data from {@link Ext.form.Basic Form}s and processes the returned response.
|
|
*
|
|
* Instances of this class are only created by a {@link Ext.form.Basic Form} when
|
|
* {@link Ext.form.Basic#submit submit}ting.
|
|
*
|
|
* # Response Packet Criteria
|
|
*
|
|
* A response packet may contain:
|
|
*
|
|
* - **`success`** property : Boolean - required.
|
|
*
|
|
* - **`errors`** property : Object - optional, contains error messages for invalid fields.
|
|
*
|
|
* # JSON Packets
|
|
*
|
|
* By default, response packets are assumed to be JSON, so a typical response packet may look like this:
|
|
*
|
|
* {
|
|
* success: false,
|
|
* errors: {
|
|
* clientCode: "Client not found",
|
|
* portOfLoading: "This field must not be null"
|
|
* }
|
|
* }
|
|
*
|
|
* Other data may be placed into the response for processing by the {@link Ext.form.Basic}'s callback or event handler
|
|
* methods. The object decoded from this JSON is available in the {@link Ext.form.action.Action#result result} property.
|
|
*
|
|
* Alternatively, if an {@link Ext.form.Basic#errorReader errorReader} is specified as an
|
|
* {@link Ext.data.reader.Xml XmlReader}:
|
|
*
|
|
* errorReader: new Ext.data.reader.Xml({
|
|
* record : 'field',
|
|
* success: '@success'
|
|
* }, [
|
|
* 'id', 'msg'
|
|
* ]
|
|
* )
|
|
*
|
|
* then the results may be sent back in XML format:
|
|
*
|
|
* <?xml version="1.0" encoding="UTF-8"?>
|
|
* <message success="false">
|
|
* <errors>
|
|
* <field>
|
|
* <id>clientCode</id>
|
|
* <msg><![CDATA[Code not found. <br /><i>This is a test validation message from the server </i>]]></msg>
|
|
* </field>
|
|
* <field>
|
|
* <id>portOfLoading</id>
|
|
* <msg><![CDATA[Port not found. <br /><i>This is a test validation message from the server </i>]]></msg>
|
|
* </field>
|
|
* </errors>
|
|
* </message>
|
|
*
|
|
* Other elements may be placed into the response XML for processing by the {@link Ext.form.Basic}'s callback or event
|
|
* handler methods. The XML document is available in the {@link Ext.form.Basic#errorReader errorReader}'s
|
|
* {@link Ext.data.reader.Xml#xmlData xmlData} property.
|
|
*/
|
|
Ext.define('Ext.form.action.Submit', {
|
|
extend: Ext.form.action.Action ,
|
|
alternateClassName: 'Ext.form.Action.Submit',
|
|
alias: 'formaction.submit',
|
|
|
|
type: 'submit',
|
|
|
|
/**
|
|
* @cfg {Boolean} [clientValidation=true]
|
|
* Determines whether a Form's fields are validated in a final call to {@link Ext.form.Basic#isValid isValid} prior
|
|
* to submission. Pass false in the Form's submit options to prevent this.
|
|
*/
|
|
|
|
// inherit docs
|
|
run : function(){
|
|
var me = this,
|
|
form = me.form;
|
|
|
|
if (me.clientValidation === false || form.isValid()) {
|
|
me.doSubmit();
|
|
} else {
|
|
// client validation failed
|
|
me.failureType = Ext.form.action.Action.CLIENT_INVALID;
|
|
form.afterAction(me, false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Performs the submit of the form data.
|
|
*/
|
|
doSubmit: function() {
|
|
var me = this,
|
|
ajaxOptions = Ext.apply(me.createCallback(), {
|
|
url: me.getUrl(),
|
|
method: me.getMethod(),
|
|
headers: me.headers
|
|
}),
|
|
form = me.form,
|
|
jsonSubmit = me.jsonSubmit || form.jsonSubmit,
|
|
paramsProp = jsonSubmit ? 'jsonData' : 'params',
|
|
formEl, formInfo;
|
|
|
|
// For uploads we need to create an actual form that contains the file upload fields,
|
|
// and pass that to the ajax call so it can do its iframe-based submit method.
|
|
if (form.hasUpload()) {
|
|
formInfo = me.buildForm();
|
|
ajaxOptions.form = formInfo.formEl;
|
|
ajaxOptions.isUpload = true;
|
|
} else {
|
|
ajaxOptions[paramsProp] = me.getParams(jsonSubmit);
|
|
}
|
|
|
|
Ext.Ajax.request(ajaxOptions);
|
|
if (formInfo) {
|
|
me.cleanup(formInfo);
|
|
}
|
|
},
|
|
|
|
cleanup: function(formInfo) {
|
|
var formEl = formInfo.formEl,
|
|
uploadEls = formInfo.uploadEls,
|
|
uploadFields = formInfo.uploadFields,
|
|
len = uploadFields.length,
|
|
i, field;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
field = uploadFields[i];
|
|
if (!field.clearOnSubmit) {
|
|
field.restoreInput(uploadEls[i]);
|
|
}
|
|
}
|
|
|
|
if (formEl) {
|
|
Ext.removeNode(formEl);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Builds the full set of parameters from the field values plus any additional configured params.
|
|
*/
|
|
getParams: function(useModelValues) {
|
|
var falseVal = false,
|
|
configParams = this.callParent(),
|
|
fieldParams = this.form.getValues(falseVal, falseVal, this.submitEmptyText !== falseVal, useModelValues);
|
|
return Ext.apply({}, fieldParams, configParams);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Builds a form element containing fields corresponding to all the parameters to be
|
|
* submitted (everything returned by {@link #getParams}.
|
|
*
|
|
* NOTE: the form element is automatically added to the DOM, so any code that uses
|
|
* it must remove it from the DOM after finishing with it.
|
|
*
|
|
* @return {HTMLElement}
|
|
*/
|
|
buildForm: function() {
|
|
var me = this,
|
|
fieldsSpec = [],
|
|
formSpec,
|
|
formEl,
|
|
basicForm = me.form,
|
|
params = me.getParams(),
|
|
uploadFields = [],
|
|
uploadEls = [],
|
|
fields = basicForm.getFields().items,
|
|
i,
|
|
len = fields.length,
|
|
field, key, value, v, vLen,
|
|
el;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
field = fields[i];
|
|
|
|
// can only have a selected file value after being rendered
|
|
if (field.rendered && field.isFileUpload()) {
|
|
uploadFields.push(field);
|
|
}
|
|
}
|
|
|
|
for (key in params) {
|
|
if (params.hasOwnProperty(key)) {
|
|
value = params[key];
|
|
|
|
if (Ext.isArray(value)) {
|
|
vLen = value.length;
|
|
for (v = 0; v < vLen; v++) {
|
|
fieldsSpec.push(me.getFieldConfig(key, value[v]));
|
|
}
|
|
} else {
|
|
fieldsSpec.push(me.getFieldConfig(key, value));
|
|
}
|
|
}
|
|
}
|
|
|
|
formSpec = {
|
|
tag: 'form',
|
|
action: me.getUrl(),
|
|
method: me.getMethod(),
|
|
target: me.target || '_self',
|
|
style: 'display:none',
|
|
cn: fieldsSpec
|
|
};
|
|
|
|
// Set the proper encoding for file uploads
|
|
if (uploadFields.length) {
|
|
formSpec.encoding = formSpec.enctype = 'multipart/form-data';
|
|
}
|
|
|
|
// Create the form
|
|
formEl = Ext.DomHelper.append(Ext.getBody(), formSpec);
|
|
|
|
// Special handling for file upload fields: since browser security measures prevent setting
|
|
// their values programatically, and prevent carrying their selected values over when cloning,
|
|
// we have to move the actual field instances out of their components and into the form.
|
|
len = uploadFields.length;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
el = uploadFields[i].extractFileInput();
|
|
formEl.appendChild(el);
|
|
uploadEls.push(el);
|
|
}
|
|
|
|
return {
|
|
formEl: formEl,
|
|
uploadFields: uploadFields,
|
|
uploadEls: uploadEls
|
|
};
|
|
},
|
|
|
|
getFieldConfig: function(name, value) {
|
|
return {
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
name: name,
|
|
value: Ext.String.htmlEncode(value)
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onSuccess: function(response) {
|
|
var form = this.form,
|
|
success = true,
|
|
result = this.processResponse(response);
|
|
if (result !== true && !result.success) {
|
|
if (result.errors) {
|
|
form.markInvalid(result.errors);
|
|
}
|
|
this.failureType = Ext.form.action.Action.SERVER_INVALID;
|
|
success = false;
|
|
}
|
|
form.afterAction(this, success);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
handleResponse: function(response) {
|
|
var form = this.form,
|
|
errorReader = form.errorReader,
|
|
rs, errors, i, len, records, result;
|
|
|
|
if (errorReader) {
|
|
rs = errorReader.read(response);
|
|
records = rs.records;
|
|
errors = [];
|
|
if (records) {
|
|
for(i = 0, len = records.length; i < len; i++) {
|
|
errors[i] = records[i].data;
|
|
}
|
|
}
|
|
if (errors.length < 1) {
|
|
errors = null;
|
|
}
|
|
result = {
|
|
success : rs.success,
|
|
errors : errors
|
|
};
|
|
} else {
|
|
try {
|
|
result = Ext.decode(response.responseText);
|
|
} catch (e) {
|
|
result = {
|
|
success: false,
|
|
errors: []
|
|
};
|
|
}
|
|
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A subclass of Ext.dd.DragTracker which handles dragging any Component.
|
|
*
|
|
* This is configured with a Component to be made draggable, and a config object for the {@link Ext.dd.DragTracker}
|
|
* class.
|
|
*
|
|
* 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.
|
|
*
|
|
* When the Component begins to be dragged, its `beginDrag` method will be called if implemented.
|
|
*
|
|
* When the drag ends, its `endDrag` method will be called if implemented.
|
|
*/
|
|
Ext.define('Ext.util.ComponentDragger', {
|
|
extend: Ext.dd.DragTracker ,
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain
|
|
* Specify as `true` to constrain the Component to within the bounds of the {@link #constrainTo} region.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Ext.Element} delegate
|
|
* A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
|
|
* Element which are the drag handles. This limits dragging to only begin when the matching elements are
|
|
* mousedowned.
|
|
*
|
|
* This may also be a specific child element within the Component's encapsulating element to use as the drag handle.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} constrainDelegate
|
|
* Specify as `true` to constrain the drag handles within the {@link #constrainTo} region.
|
|
*/
|
|
|
|
autoStart: 500,
|
|
|
|
/**
|
|
* Creates new ComponentDragger.
|
|
* @param {Object} comp The Component to provide dragging for.
|
|
* @param {Object} [config] Config object
|
|
*/
|
|
constructor: function(comp, config) {
|
|
this.comp = comp;
|
|
this.initialConstrainTo = config.constrainTo;
|
|
this.callParent([ config ]);
|
|
},
|
|
|
|
onStart: function(e) {
|
|
var me = this,
|
|
comp = me.comp;
|
|
|
|
// Cache the start [X, Y] array
|
|
me.startPosition = comp.getXY();
|
|
|
|
// If client Component has a ghost method to show a lightweight version of itself
|
|
// then use that as a drag proxy unless configured to liveDrag.
|
|
if (comp.ghost && !comp.liveDrag) {
|
|
me.proxy = comp.ghost();
|
|
me.dragTarget = me.proxy.header.el;
|
|
}
|
|
|
|
// Set the constrainTo Region before we start dragging.
|
|
if (me.constrain || me.constrainDelegate) {
|
|
me.constrainTo = me.calculateConstrainRegion();
|
|
}
|
|
|
|
if (comp.beginDrag) {
|
|
comp.beginDrag();
|
|
}
|
|
},
|
|
|
|
calculateConstrainRegion: function() {
|
|
var me = this,
|
|
comp = me.comp,
|
|
constrainTo = me.initialConstrainTo,
|
|
constraintInsets = comp.constraintInsets,
|
|
constrainEl,
|
|
delegateRegion,
|
|
elRegion,
|
|
dragEl = me.proxy ? me.proxy.el : comp.el,
|
|
shadowSize = (!me.constrainDelegate && dragEl.shadow && comp.constrainShadow && !dragEl.shadowDisabled) ? dragEl.shadow.getShadowSize() : 0;
|
|
|
|
// The configured constrainTo might be a Region or an element
|
|
if (!(constrainTo instanceof Ext.util.Region)) {
|
|
constrainEl = Ext.fly(constrainTo);
|
|
constrainTo = constrainEl.getViewRegion();
|
|
|
|
// Do not allow to move into vertical scrollbar
|
|
constrainTo.right = constrainTo.left + constrainEl.dom.clientWidth;
|
|
} else {
|
|
// Create a clone so we don't modify the original
|
|
constrainTo = constrainTo.copy();
|
|
}
|
|
|
|
// Apply constraintInsets
|
|
if (constraintInsets) {
|
|
constraintInsets = Ext.isObject(constraintInsets) ? constraintInsets : Ext.Element.parseBox(constraintInsets);
|
|
constrainTo.adjust(constraintInsets.top, constraintInsets.right, constraintInsets.bottom, constraintInsets.length);
|
|
}
|
|
|
|
// Reduce the constrain region to allow for shadow
|
|
if (shadowSize) {
|
|
constrainTo.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);
|
|
}
|
|
|
|
// If they only want to constrain the *delegate* to within the constrain region,
|
|
// adjust the region to be larger based on the insets of the delegate from the outer
|
|
// edges of the Component.
|
|
if (!me.constrainDelegate) {
|
|
delegateRegion = Ext.fly(me.dragTarget).getRegion();
|
|
elRegion = dragEl.getRegion();
|
|
|
|
constrainTo.adjust(
|
|
delegateRegion.top - elRegion.top,
|
|
delegateRegion.right - elRegion.right,
|
|
delegateRegion.bottom - elRegion.bottom,
|
|
delegateRegion.left - elRegion.left
|
|
);
|
|
}
|
|
return constrainTo;
|
|
},
|
|
|
|
// Move either the ghost Component or the target Component to its new position on drag
|
|
onDrag: function(e) {
|
|
var me = this,
|
|
comp = (me.proxy && !me.comp.liveDrag) ? me.proxy : me.comp,
|
|
offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);
|
|
|
|
comp.setPagePosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
|
|
},
|
|
|
|
onEnd: function(e) {
|
|
var comp = this.comp;
|
|
if (comp.isDestroyed || comp.destroying) {
|
|
return;
|
|
}
|
|
|
|
if (this.proxy && !comp.liveDrag) {
|
|
comp.unghost();
|
|
}
|
|
if (comp.endDrag) {
|
|
comp.endDrag();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and
|
|
* {@link #cfg-draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, restored to
|
|
* their prior size, and can be {@link #method-minimize}d.
|
|
*
|
|
* Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide
|
|
* grouping, activation, to front, to back and other application-specific behavior.
|
|
*
|
|
* By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element specify
|
|
* {@link Ext.Component#renderTo renderTo}.
|
|
*
|
|
* **As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window to size
|
|
* and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out child Components
|
|
* in the required manner.**
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.window.Window', {
|
|
* title: 'Hello',
|
|
* height: 200,
|
|
* width: 400,
|
|
* layout: 'fit',
|
|
* items: { // Let's put an empty grid in just to illustrate fit layout
|
|
* xtype: 'grid',
|
|
* border: false,
|
|
* columns: [{header: 'World'}], // One header just for show. There's no data,
|
|
* store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
|
|
* }
|
|
* }).show();
|
|
*/
|
|
Ext.define('Ext.window.Window', {
|
|
extend: Ext.panel.Panel ,
|
|
|
|
alternateClassName: 'Ext.Window',
|
|
|
|
|
|
|
|
alias: 'widget.window',
|
|
|
|
/**
|
|
* @cfg {Number} x
|
|
* The X position of the left edge of the window on initial showing. Defaults to centering the Window within the
|
|
* width of the Window's container {@link Ext.Element Element} (The Element that the Window is rendered to).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} y
|
|
* The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the
|
|
* height of the Window's container {@link Ext.Element Element} (The Element that the Window is rendered to).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [modal=false]
|
|
* True to make the window modal and mask everything behind it when displayed, false to display it without
|
|
* restricting access to other UI elements.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Ext.Element} [animateTarget=null]
|
|
* Id or element from which the window should animate while opening.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean/Function} ghost
|
|
* Set to false to disable the ghost panel during dragging the window.
|
|
* Do note that you should not set this to true, by default it is a function.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Number/Ext.Component} defaultFocus
|
|
* Specifies a Component to receive focus when this Window is focused.
|
|
*
|
|
* This may be one of:
|
|
*
|
|
* - The index of a footer Button.
|
|
* - The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.
|
|
* - A Component.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} onEsc
|
|
* Allows override of the built-in processing for the escape key. Default action is to close the Window (performing
|
|
* whatever action is specified in {@link #closeAction}. To prevent the Window closing when the escape key is
|
|
* pressed, specify this as {@link Ext#emptyFn Ext.emptyFn}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [collapsed=false]
|
|
* True to render the window collapsed, false to render it expanded. Note that if {@link #expandOnShow}
|
|
* is true (the default) it will override the `collapsed` config and the window will always be
|
|
* expanded when shown.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [maximized=false]
|
|
* True to initially display the window in a maximized state.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [hideShadowOnDeactivate=false]
|
|
* True to hide this Window's shadow when another floating item in the same z-index stack is activated.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-window']
|
|
* The base CSS class to apply to this panel's element.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'window',
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} resizable
|
|
* Specify as `true` to allow user resizing at each edge and corner of the window, false to disable resizing.
|
|
*
|
|
* This may also be specified as a config object to Ext.resizer.Resizer
|
|
*/
|
|
resizable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} draggable
|
|
* True to allow the window to be dragged by the header bar, false to disable dragging. Note that
|
|
* by default the window will be centered in the viewport, so if dragging is disabled the window may need to be
|
|
* positioned programmatically after render (e.g., `myWindow.setPosition(100, 100);`).
|
|
*/
|
|
draggable: true,
|
|
|
|
/**
|
|
* @override
|
|
* @cfg {Boolean} constrain
|
|
* True to constrain the window within its containing element, false to allow it to fall outside of its containing
|
|
* element. By default the window will be rendered to `document.body`. To render and constrain the window within
|
|
* another element specify {@link #renderTo}. Optionally the header only can be constrained
|
|
* using {@link #constrainHeader}.
|
|
*/
|
|
constrain: false,
|
|
|
|
/**
|
|
* @override
|
|
* @cfg {Boolean} constrainHeader
|
|
* True to constrain the window header within its containing element (allowing the window body to fall outside of
|
|
* its containing element) or false to allow the header to fall outside its containing element.
|
|
* Optionally the entire window can be constrained using {@link #constrain}.
|
|
*/
|
|
constrainHeader: false,
|
|
|
|
/**
|
|
* @cfg simpleDrag @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} plain
|
|
* True to render the window body with a transparent background so that it will blend into the framing elements,
|
|
* false to add a lighter background color to visually highlight the body element and separate it more distinctly
|
|
* from the surrounding frame.
|
|
*/
|
|
plain: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} minimizable
|
|
* True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
|
|
* and disallow minimizing the window. Note that this button provides no implementation -- the
|
|
* behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom
|
|
* minimize behavior implemented for this option to be useful.
|
|
*/
|
|
minimizable: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} maximizable
|
|
* True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
|
|
* and disallow maximizing the window. Note that when a window is maximized, the tool button
|
|
* will automatically change to a 'restore' button with the appropriate behavior already built-in that will restore
|
|
* the window to its previous size.
|
|
*/
|
|
maximizable: false,
|
|
|
|
// inherit docs
|
|
minHeight: 50,
|
|
|
|
// inherit docs
|
|
minWidth: 50,
|
|
|
|
/**
|
|
* @cfg {Boolean} expandOnShow
|
|
* True to always expand the window when it is displayed, false to keep it in its current state (which may be
|
|
* {@link #collapsed}) when displayed.
|
|
*/
|
|
expandOnShow: true,
|
|
|
|
// inherited docs, same default
|
|
collapsible: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} closable
|
|
* True to display the 'close' tool button and allow the user to close the window, false to hide the button and
|
|
* disallow closing the window.
|
|
*
|
|
* By default, when close is requested by either clicking the close button in the header or pressing ESC when the
|
|
* Window has focus, the {@link #method-close} method will be called. This will _{@link Ext.Component#method-destroy destroy}_ the
|
|
* Window and its content meaning that it may not be reused.
|
|
*
|
|
* To make closing a Window _hide_ the Window so that it may be reused, set {@link #closeAction} to 'hide'.
|
|
*/
|
|
closable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} hidden
|
|
* Render this Window hidden. If `true`, the {@link #method-hide} method will be called internally.
|
|
*/
|
|
hidden: true,
|
|
|
|
/**
|
|
* @cfg {Boolean}
|
|
* @inheritdoc
|
|
* Windows render to the body on first show.
|
|
*/
|
|
autoRender: true,
|
|
|
|
/**
|
|
* @cfg {String}
|
|
* @inheritdoc
|
|
* Windows hide using offsets in order to preserve the scroll positions of their descendants.
|
|
*/
|
|
hideMode: 'offsets',
|
|
|
|
/**
|
|
* @property {Boolean}
|
|
* A Window is always floating.
|
|
* @private
|
|
* @readonly
|
|
*/
|
|
floating: true,
|
|
|
|
itemCls: Ext.baseCSSPrefix + 'window-item',
|
|
|
|
initialAlphaNum: /^[a-z0-9]/,
|
|
|
|
overlapHeader: true,
|
|
|
|
ignoreHeaderBorderManagement: true,
|
|
|
|
// Flag to Renderable to always look up the framing styles for this Component
|
|
alwaysFramed: true,
|
|
|
|
// Buffer this so we don't recreate the same object
|
|
isRootCfg: {
|
|
isRoot: true
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} isWindow
|
|
* `true` in this class to identify an object as an instantiated Window, or subclass thereof.
|
|
*/
|
|
isWindow: true,
|
|
|
|
// @private
|
|
initComponent: function() {
|
|
var me = this;
|
|
// Explicitly set frame to false, since alwaysFramed is
|
|
// true, we only want to lookup framing in a specific instance
|
|
me.frame = false;
|
|
me.callParent();
|
|
me.addEvents(
|
|
/**
|
|
* @event activate
|
|
* Fires after the window has been visually activated via {@link #setActive}.
|
|
* @param {Ext.window.Window} this
|
|
*/
|
|
|
|
/**
|
|
* @event deactivate
|
|
* Fires after the window has been visually deactivated via {@link #setActive}.
|
|
* @param {Ext.window.Window} this
|
|
*/
|
|
|
|
/**
|
|
* @event resize
|
|
* Fires after the window has been resized.
|
|
* @param {Ext.window.Window} this
|
|
* @param {Number} width The window's new width
|
|
* @param {Number} height The window's new height
|
|
*/
|
|
'resize',
|
|
|
|
/**
|
|
* @event maximize
|
|
* Fires after the window has been maximized.
|
|
* @param {Ext.window.Window} this
|
|
*/
|
|
'maximize',
|
|
|
|
/**
|
|
* @event minimize
|
|
* Fires after the window has been minimized.
|
|
* @param {Ext.window.Window} this
|
|
*/
|
|
'minimize',
|
|
|
|
/**
|
|
* @event restore
|
|
* Fires after the window has been restored to its original size after being maximized.
|
|
* @param {Ext.window.Window} this
|
|
*/
|
|
'restore'
|
|
);
|
|
|
|
if (me.plain) {
|
|
me.addClsWithUI('plain');
|
|
}
|
|
|
|
if (me.modal) {
|
|
me.ariaRole = 'dialog';
|
|
}
|
|
|
|
me.addStateEvents(['maximize', 'restore', 'resize', 'dragend']);
|
|
},
|
|
|
|
getElConfig: function () {
|
|
var me = this,
|
|
elConfig;
|
|
|
|
elConfig = me.callParent();
|
|
elConfig.tabIndex = -1;
|
|
return elConfig;
|
|
},
|
|
|
|
// State Management
|
|
|
|
// @private
|
|
getState: function() {
|
|
var me = this,
|
|
state = me.callParent() || {},
|
|
maximized = !!me.maximized,
|
|
ghostBox = me.ghostBox,
|
|
pos;
|
|
|
|
|
|
state.maximized = maximized;
|
|
if (maximized) {
|
|
pos = me.restorePos;
|
|
} else if (ghostBox) {
|
|
// If we're animating a show, it will be from offscreen, so
|
|
// grab the position from the final box
|
|
pos = [ghostBox.x, ghostBox.y];
|
|
} else {
|
|
pos = me.getPosition();
|
|
}
|
|
Ext.apply(state, {
|
|
size: maximized ? me.restoreSize : me.getSize(),
|
|
pos: pos
|
|
});
|
|
return state;
|
|
},
|
|
|
|
applyState: function(state){
|
|
var me = this;
|
|
|
|
if (state) {
|
|
me.maximized = state.maximized;
|
|
if (me.maximized) {
|
|
me.hasSavedRestore = true;
|
|
me.restoreSize = state.size;
|
|
me.restorePos = state.pos;
|
|
} else {
|
|
Ext.apply(me, {
|
|
width: state.size.width,
|
|
height: state.size.height,
|
|
x: state.pos[0],
|
|
y: state.pos[1]
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onRender: function(ct, position) {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.focusEl = me.el;
|
|
|
|
// Double clicking a header will toggleMaximize
|
|
if (me.maximizable) {
|
|
me.header.on({
|
|
scope: me,
|
|
dblclick: me.toggleMaximize
|
|
});
|
|
}
|
|
},
|
|
|
|
// @private
|
|
afterRender: function() {
|
|
var me = this,
|
|
header = me.header,
|
|
keyMap;
|
|
|
|
me.callParent();
|
|
|
|
// Initialize
|
|
if (me.maximized) {
|
|
me.maximized = false;
|
|
me.maximize();
|
|
if (header) {
|
|
header.removeCls(header.indicateDragCls)
|
|
}
|
|
}
|
|
|
|
if (me.closable) {
|
|
keyMap = me.getKeyMap();
|
|
keyMap.on(27, me.onEsc, me);
|
|
} else {
|
|
keyMap = me.keyMap;
|
|
}
|
|
if (keyMap && me.hidden) {
|
|
keyMap.disable();
|
|
}
|
|
},
|
|
|
|
// Override. Windows are always simple draggable, they do not use Ext.Panel.DDs
|
|
// The dd property in a Window is always a ComponentDragger
|
|
initDraggable: function() {
|
|
/**
|
|
* @property {Ext.util.ComponentDragger} dd
|
|
* If this Window is configured {@link #cfg-draggable}, this property will contain an instance of
|
|
* {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) which handles dragging
|
|
* the Window's DOM Element, and constraining according to the {@link #constrain} and {@link #constrainHeader} .
|
|
*
|
|
* This has implementations of `onBeforeStart`, `onDrag` and `onEnd` which perform the dragging action. If
|
|
* extra logic is needed at these points, use {@link Ext.Function#createInterceptor createInterceptor} or
|
|
* {@link Ext.Function#createSequence createSequence} to augment the existing implementations.
|
|
*/
|
|
this.initSimpleDraggable();
|
|
},
|
|
|
|
initResizable: function(){
|
|
this.callParent(arguments);
|
|
if (this.maximized) {
|
|
this.resizer.disable();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onEsc: function(k, e) {
|
|
// Only process ESC if the FocusManager is not doing it
|
|
if (!Ext.FocusManager || !Ext.FocusManager.enabled || Ext.FocusManager.focusedCmp === this) {
|
|
e.stopEvent();
|
|
this.close();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
if (me.rendered) {
|
|
delete this.animateTarget;
|
|
me.hide();
|
|
Ext.destroy(
|
|
me.keyMap
|
|
);
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Contribute class-specific tools to the header.
|
|
* Called by Panel's initTools.
|
|
*/
|
|
addTools: function() {
|
|
var me = this;
|
|
|
|
// Call Panel's initTools
|
|
me.callParent();
|
|
|
|
if (me.minimizable) {
|
|
me.addTool({
|
|
type: 'minimize',
|
|
handler: Ext.Function.bind(me.minimize, me, [])
|
|
});
|
|
}
|
|
if (me.maximizable) {
|
|
me.addTool({
|
|
type: 'maximize',
|
|
handler: Ext.Function.bind(me.maximize, me, [])
|
|
});
|
|
me.addTool({
|
|
type: 'restore',
|
|
handler: Ext.Function.bind(me.restore, me, []),
|
|
hidden: true
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the focus holder element associated with this Window. By default, this is the Window's element.
|
|
* @returns {Ext.Element/Ext.Component} the focus holding element or Component.
|
|
*/
|
|
getFocusEl: function() {
|
|
return this.getDefaultFocus();
|
|
},
|
|
|
|
/**
|
|
* Gets the configured default focus item. If a {@link #defaultFocus} is set, it will
|
|
* receive focus when the Window's <code>focus</code> method is called, otherwise the
|
|
* Window itself will receive focus.
|
|
*/
|
|
getDefaultFocus: function() {
|
|
var me = this,
|
|
result,
|
|
defaultComp = me.defaultButton || me.defaultFocus,
|
|
selector;
|
|
|
|
if (defaultComp !== undefined) {
|
|
// Number is index of Button
|
|
if (Ext.isNumber(defaultComp)) {
|
|
result = me.query('button')[defaultComp];
|
|
}
|
|
// String is ID or CQ selector
|
|
else if (Ext.isString(defaultComp)) {
|
|
selector = defaultComp;
|
|
|
|
// Try id/itemId match if selector begins with alphanumeric
|
|
if (selector.match(me.initialAlphaNum)) {
|
|
result = me.down('#' + selector);
|
|
}
|
|
// If not found, use as selector
|
|
if (!result) {
|
|
result = me.down(selector);
|
|
}
|
|
}
|
|
// Otherwise, if it's got a focus method, use it
|
|
else if (defaultComp.focus) {
|
|
result = defaultComp;
|
|
}
|
|
}
|
|
return result || me.el;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called when a Component's focusEl receives focus.
|
|
* If there is a valid default focus Component to jump to, focus that,
|
|
* otherwise continue as usual, focus this Component.
|
|
*/
|
|
onFocus: function() {
|
|
var me = this,
|
|
focusDescendant;
|
|
|
|
// If the FocusManager is enabled, then we must noy jumpt to focus the default focus. We must focus the Window
|
|
if ((Ext.FocusManager && Ext.FocusManager.enabled) || ((focusDescendant = me.getDefaultFocus()) === me)) {
|
|
me.callParent(arguments);
|
|
} else {
|
|
focusDescendant.focus();
|
|
}
|
|
},
|
|
|
|
onShow: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
if (me.expandOnShow) {
|
|
me.expand(false);
|
|
}
|
|
me.syncMonitorWindowResize();
|
|
|
|
if (me.keyMap) {
|
|
me.keyMap.enable();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
doClose: function() {
|
|
var me = this;
|
|
|
|
// Being called as callback after going through the hide call below
|
|
if (me.hidden) {
|
|
me.fireEvent('close', me);
|
|
if (me.closeAction == 'destroy') {
|
|
this.destroy();
|
|
}
|
|
} else {
|
|
// close after hiding
|
|
me.hide(me.animateTarget, me.doClose, me);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
afterHide: function() {
|
|
var me = this;
|
|
|
|
// No longer subscribe to resizing now that we're hidden
|
|
me.syncMonitorWindowResize();
|
|
|
|
// Turn off keyboard handling once window is hidden
|
|
if (me.keyMap) {
|
|
me.keyMap.disable();
|
|
}
|
|
|
|
// Perform superclass's afterHide tasks.
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
onWindowResize: function() {
|
|
var me = this,
|
|
sizeModel;
|
|
|
|
if (me.maximized) {
|
|
me.fitContainer();
|
|
} else {
|
|
sizeModel = me.getSizeModel();
|
|
if (sizeModel.width.natural || sizeModel.height.natural) {
|
|
me.updateLayout();
|
|
}
|
|
me.doConstrain();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Placeholder method for minimizing the window. By default, this method simply fires the {@link #event-minimize} event
|
|
* since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, either
|
|
* the minimize event can be handled or this method can be overridden.
|
|
* @return {Ext.window.Window} this
|
|
*/
|
|
minimize: function() {
|
|
this.fireEvent('minimize', this);
|
|
return this;
|
|
},
|
|
|
|
resumeHeaderLayout: function(changed) {
|
|
this.header.resumeLayouts(changed ? this.isRootCfg : null);
|
|
},
|
|
|
|
afterCollapse: function() {
|
|
var me = this,
|
|
header = me.header,
|
|
tools = me.tools;
|
|
|
|
if (header && me.maximizable) {
|
|
header.suspendLayouts();
|
|
tools.maximize.hide();
|
|
tools.restore.hide();
|
|
this.resumeHeaderLayout(true);
|
|
}
|
|
if (me.resizer) {
|
|
me.resizer.disable();
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
afterExpand: function() {
|
|
var me = this,
|
|
header = me.header,
|
|
tools = me.tools,
|
|
changed;
|
|
|
|
|
|
if (header) {
|
|
header.suspendLayouts();
|
|
if (me.maximized) {
|
|
tools.restore.show();
|
|
changed = true;
|
|
} else if (me.maximizable) {
|
|
tools.maximize.show();
|
|
changed = true;
|
|
}
|
|
this.resumeHeaderLayout(changed);
|
|
}
|
|
if (me.resizer) {
|
|
me.resizer.enable();
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Fits the window within its current container and automatically replaces the {@link #maximizable 'maximize' tool
|
|
* button} with the 'restore' tool button. Also see {@link #toggleMaximize}.
|
|
* @param {Boolean} animate `true` to animate this Window to full size.
|
|
* @return {Ext.window.Window} this
|
|
*/
|
|
maximize: function(animate) {
|
|
var me = this,
|
|
header = me.header,
|
|
tools = me.tools,
|
|
changed;
|
|
|
|
if (!me.maximized) {
|
|
me.expand(false);
|
|
if (!me.hasSavedRestore) {
|
|
me.restoreSize = me.getSize();
|
|
me.restorePos = me.getPosition(true);
|
|
}
|
|
|
|
// Manipulate visibility of header tools if there is a header
|
|
if (header) {
|
|
header.suspendLayouts();
|
|
if (tools.maximize) {
|
|
tools.maximize.hide();
|
|
changed = true;
|
|
}
|
|
if (tools.restore) {
|
|
tools.restore.show();
|
|
changed = true;
|
|
}
|
|
if (me.collapseTool) {
|
|
me.collapseTool.hide();
|
|
changed = true;
|
|
}
|
|
me.resumeHeaderLayout(changed);
|
|
}
|
|
|
|
me.maximized = true;
|
|
me.el.disableShadow();
|
|
|
|
if (me.dd) {
|
|
me.dd.disable();
|
|
if (header) {
|
|
header.removeCls(header.indicateDragCls)
|
|
}
|
|
}
|
|
if (me.resizer) {
|
|
me.resizer.disable();
|
|
}
|
|
|
|
me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
|
|
me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
|
|
|
|
me.syncMonitorWindowResize();
|
|
me.fitContainer(animate = (animate || !!me.animateTarget) ? {
|
|
callback: function() {
|
|
me.fireEvent('maximize', me);
|
|
}
|
|
} : null);
|
|
if (!animate) {
|
|
me.fireEvent('maximize', me);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Restores a {@link #maximizable maximized} window back to its original size and position prior to being maximized
|
|
* and also replaces the 'restore' tool button with the 'maximize' tool button. Also see {@link #toggleMaximize}.
|
|
* @return {Ext.window.Window} this
|
|
*/
|
|
restore: function(animate) {
|
|
var me = this,
|
|
tools = me.tools,
|
|
header = me.header,
|
|
newBox = me.restoreSize,
|
|
changed;
|
|
|
|
if (me.maximized) {
|
|
me.hasSavedRestore = null;
|
|
me.removeCls(Ext.baseCSSPrefix + 'window-maximized');
|
|
|
|
// Manipulate visibility of header tools if there is a header
|
|
if (header) {
|
|
header.suspendLayouts();
|
|
if (tools.restore) {
|
|
tools.restore.hide();
|
|
changed = true;
|
|
}
|
|
if (tools.maximize) {
|
|
tools.maximize.show();
|
|
changed = true;
|
|
}
|
|
if (me.collapseTool) {
|
|
me.collapseTool.show();
|
|
changed = true;
|
|
}
|
|
me.resumeHeaderLayout(changed);
|
|
}
|
|
|
|
me.maximized = false;
|
|
|
|
// Restore the position/sizing
|
|
newBox.x = me.restorePos[0];
|
|
newBox.y = me.restorePos[1];
|
|
me.setBox(newBox, animate = (animate || !!me.animateTarget) ? {
|
|
callback: function() {
|
|
me.el.enableShadow(true);
|
|
me.fireEvent('restore', me);
|
|
}
|
|
} : null);
|
|
|
|
// Unset old position/sizing
|
|
me.restorePos = me.restoreSize = null;
|
|
|
|
// Allow users to drag and drop again
|
|
if (me.dd) {
|
|
me.dd.enable();
|
|
if (header) {
|
|
header.addCls(header.indicateDragCls)
|
|
}
|
|
}
|
|
|
|
if (me.resizer) {
|
|
me.resizer.enable();
|
|
}
|
|
|
|
me.container.removeCls(Ext.baseCSSPrefix + 'window-maximized-ct');
|
|
|
|
me.syncMonitorWindowResize();
|
|
|
|
if (!animate) {
|
|
me.el.enableShadow(true);
|
|
me.fireEvent('restore', me);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Synchronizes the presence of our listener for window resize events. This method
|
|
* should be called whenever this status might change.
|
|
* @private
|
|
*/
|
|
syncMonitorWindowResize: function () {
|
|
var me = this,
|
|
currentlyMonitoring = me._monitoringResize,
|
|
// all the states where we should be listening to window resize:
|
|
yes = me.monitorResize || me.constrain || me.constrainHeader || me.maximized,
|
|
// all the states where we veto this:
|
|
veto = me.hidden || me.destroying || me.isDestroyed;
|
|
|
|
if (yes && !veto) {
|
|
// we should be listening...
|
|
if (!currentlyMonitoring) {
|
|
// but we aren't, so set it up.
|
|
// Delay so that we jump over any Viewport resize activity
|
|
Ext.EventManager.onWindowResize(me.onWindowResize, me, {delay: 1});
|
|
me._monitoringResize = true;
|
|
}
|
|
} else if (currentlyMonitoring) {
|
|
// we should not be listening, but we are, so tear it down
|
|
Ext.EventManager.removeResizeListener(me.onWindowResize, me);
|
|
me._monitoringResize = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* A shortcut method for toggling between {@link #method-maximize} and {@link #method-restore} based on the current maximized
|
|
* state of the window.
|
|
* @return {Ext.window.Window} this
|
|
*/
|
|
toggleMaximize: function() {
|
|
return this[this.maximized ? 'restore': 'maximize']();
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* A mixin which allows a component to be configured and decorated with a label and/or error message as is
|
|
* common for form fields. This is used by e.g. Ext.form.field.Base and Ext.form.FieldContainer
|
|
* to let them be managed by the Field layout.
|
|
*
|
|
* NOTE: This mixin is mainly for internal library use and most users should not need to use it directly. It
|
|
* is more likely you will want to use one of the component classes that import this mixin, such as
|
|
* Ext.form.field.Base or Ext.form.FieldContainer.
|
|
*
|
|
* Use of this mixin does not make a component a field in the logical sense, meaning it does not provide any
|
|
* logic or state related to values or validation; that is handled by the related Ext.form.field.Field
|
|
* mixin. These two mixins may be used separately (for example Ext.form.FieldContainer is Labelable but not a
|
|
* Field), or in combination (for example Ext.form.field.Base implements both and has logic for connecting the
|
|
* two.)
|
|
*
|
|
* Component classes which use this mixin should use the Field layout
|
|
* or a derivation thereof to properly size and position the label and message according to the component config.
|
|
* They must also call the {@link #initLabelable} method during component initialization to ensure the mixin gets
|
|
* set up correctly.
|
|
*
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*/
|
|
Ext.define("Ext.form.Labelable", {
|
|
|
|
|
|
autoEl: {
|
|
tag: 'table',
|
|
cellpadding: 0
|
|
},
|
|
|
|
childEls: [
|
|
/**
|
|
* @property {Ext.Element} labelCell
|
|
* The `<TD>` Element which contains the label Element for this component. Only available after the component has been rendered.
|
|
*/
|
|
'labelCell',
|
|
|
|
/**
|
|
* @property {Ext.Element} labelEl
|
|
* The label Element for this component. Only available after the component has been rendered.
|
|
*/
|
|
'labelEl',
|
|
|
|
/**
|
|
* @property {Ext.Element} bodyEl
|
|
* The div Element wrapping the component's contents. Only available after the component has been rendered.
|
|
*/
|
|
'bodyEl',
|
|
|
|
// private - the TD which contains the msgTarget: 'side' error icon
|
|
'sideErrorCell',
|
|
|
|
/**
|
|
* @property {Ext.Element} errorEl
|
|
* The div Element that will contain the component's error message(s). Note that depending on the configured
|
|
* {@link #msgTarget}, this element may be hidden in favor of some other form of presentation, but will always
|
|
* be present in the DOM for use by assistive technologies.
|
|
*/
|
|
'errorEl',
|
|
|
|
'inputRow'
|
|
],
|
|
|
|
/**
|
|
* @cfg {String/String[]/Ext.XTemplate} labelableRenderTpl
|
|
* The rendering template for the field decorations. Component classes using this mixin
|
|
* should include logic to use this as their {@link Ext.AbstractComponent#renderTpl renderTpl},
|
|
* and implement the {@link #getSubTplMarkup} method to generate the field body content.
|
|
*
|
|
* The structure of a field is a table as follows:
|
|
*
|
|
* If `labelAlign: 'left', `msgTarget: 'side'`
|
|
*
|
|
* +----------------------+----------------------+-------------+
|
|
* | Label: | InputField | sideErrorEl |
|
|
* +----------------------+----------------------+-------------+
|
|
*
|
|
* If `labelAlign: 'left', `msgTarget: 'under'`
|
|
*
|
|
* +----------------------+------------------------------------+
|
|
* | Label: | InputField (colspan=2) |
|
|
* | | underErrorEl |
|
|
* +----------------------+------------------------------------+
|
|
*
|
|
* If `labelAlign: 'top', `msgTarget: 'side'`
|
|
*
|
|
* +---------------------------------------------+-------------+
|
|
* | label | |
|
|
* | InputField | sideErrorEl |
|
|
* +---------------------------------------------+-------------+
|
|
*
|
|
* If `labelAlign: 'top', `msgTarget: 'under'`
|
|
*
|
|
* +-----------------------------------------------------------+
|
|
* | label |
|
|
* | InputField (colspan=2) |
|
|
* | underErrorEl |
|
|
* +-----------------------------------------------------------+
|
|
*
|
|
* The total columns always the same for fields with each setting of {@link #labelAlign} because when
|
|
* rendered into a {@link Ext.layout.container.Form} layout, just the `TR` of the table
|
|
* will be placed into the form's main `TABLE`, and the columns of all the siblings
|
|
* must match so that they all line up. In a {@link Ext.layout.container.Form} layout, different
|
|
* settings of {@link #labelAlign} are not supported because of the incompatible column structure.
|
|
*
|
|
* When the triggerCell or side error cell are hidden or shown, the input cell's colspan
|
|
* is recalculated to maintain the correct 3 visible column count.
|
|
* @private
|
|
*/
|
|
labelableRenderTpl: [
|
|
|
|
// body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
|
|
'<tr role="presentation" id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl> class="{inputRowCls}">',
|
|
|
|
// Label cell
|
|
'<tpl if="labelOnLeft">',
|
|
'<td role="presentation" id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
|
|
'{beforeLabelTpl}',
|
|
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
|
|
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
|
|
// Required for Opera
|
|
' unselectable="on"',
|
|
'>',
|
|
'{beforeLabelTextTpl}',
|
|
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
|
|
'{afterLabelTextTpl}',
|
|
'</label>',
|
|
'{afterLabelTpl}',
|
|
'</td>',
|
|
'</tpl>',
|
|
|
|
// Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
|
|
'<td role="presentation" class="{baseBodyCls} {fieldBodyCls} {extraFieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">',
|
|
'{beforeBodyEl}',
|
|
|
|
// Label just sits on top of the input field if labelAlign === 'top'
|
|
'<tpl if="labelAlign==\'top\'">',
|
|
'{beforeLabelTpl}',
|
|
'<div role="presentation" id="{id}-labelCell" style="{labelCellStyle}">',
|
|
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
|
|
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
|
|
// Required for Opera
|
|
' unselectable="on"',
|
|
'>',
|
|
'{beforeLabelTextTpl}',
|
|
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
|
|
'{afterLabelTextTpl}',
|
|
'</label>',
|
|
'</div>',
|
|
'{afterLabelTpl}',
|
|
'</tpl>',
|
|
|
|
'{beforeSubTpl}',
|
|
'{[values.$comp.getSubTplMarkup(values)]}',
|
|
'{afterSubTpl}',
|
|
|
|
// Final TD. It's a side error element unless there's a floating external one
|
|
'<tpl if="msgTarget===\'side\'">',
|
|
'{afterBodyEl}',
|
|
'</td>',
|
|
'<td role="presentation" id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">',
|
|
'<div role="presentation" id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
|
|
'</td>',
|
|
'<tpl elseif="msgTarget==\'under\'">',
|
|
'<div role="presentation" id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>',
|
|
'{afterBodyEl}',
|
|
'</td>',
|
|
'</tpl>',
|
|
'</tr>',
|
|
{
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
/**
|
|
* @cfg {String/String[]/Ext.XTemplate} activeErrorsTpl
|
|
* The template used to format the Array of error messages passed to {@link #setActiveErrors} into a single HTML
|
|
* string. if the {@link #msgTarget} is title, it defaults to a list separated by new lines. Otherwise, it
|
|
* renders each message as an item in an unordered list.
|
|
*/
|
|
activeErrorsTpl: undefined,
|
|
|
|
htmlActiveErrorsTpl: [
|
|
'<tpl if="errors && errors.length">',
|
|
'<ul class="{listCls}"><tpl for="errors"><li role="alert">{.}</li></tpl></ul>',
|
|
'</tpl>'
|
|
],
|
|
|
|
plaintextActiveErrorsTpl: [
|
|
'<tpl if="errors && errors.length">',
|
|
'<tpl for="errors"><tpl if="xindex > 1">\n</tpl>{.}</tpl>',
|
|
'</tpl>'
|
|
],
|
|
|
|
/**
|
|
* @property {Boolean} isFieldLabelable
|
|
* Flag denoting that this object is labelable as a field. Always true.
|
|
*/
|
|
isFieldLabelable: true,
|
|
|
|
/**
|
|
* @cfg {String} formItemCls
|
|
* A CSS class to be applied to the outermost element to denote that it is participating in the form field layout.
|
|
*/
|
|
formItemCls: Ext.baseCSSPrefix + 'form-item',
|
|
|
|
/**
|
|
* @cfg {String} labelCls
|
|
* The CSS class to be applied to the label element. This (single) CSS class is used to formulate the renderSelector
|
|
* and drives the field layout where it is concatenated with a hyphen ('-') and {@link #labelAlign}. To add
|
|
* additional classes, use {@link #labelClsExtra}.
|
|
*/
|
|
labelCls: Ext.baseCSSPrefix + 'form-item-label',
|
|
|
|
/**
|
|
* @cfg {String} labelClsExtra
|
|
* An optional string of one or more additional CSS classes to add to the label element. Defaults to empty.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} errorMsgCls
|
|
* The CSS class to be applied to the error message element.
|
|
*/
|
|
errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',
|
|
|
|
/**
|
|
* @cfg {String} baseBodyCls
|
|
* The CSS class to be applied to the body content element.
|
|
*/
|
|
baseBodyCls: Ext.baseCSSPrefix + 'form-item-body',
|
|
|
|
// private
|
|
inputRowCls: Ext.baseCSSPrefix + 'form-item-input-row',
|
|
|
|
/**
|
|
* @cfg {String} fieldBodyCls
|
|
* An extra CSS class to be applied to the body content element in addition to {@link #baseBodyCls}.
|
|
*/
|
|
fieldBodyCls: '',
|
|
|
|
/**
|
|
* @cfg {String} clearCls
|
|
* The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to
|
|
* provide field clearing.
|
|
*/
|
|
clearCls: Ext.baseCSSPrefix + 'clear',
|
|
|
|
/**
|
|
* @cfg {String} invalidCls
|
|
* The CSS class to use when marking the component invalid.
|
|
*/
|
|
invalidCls : Ext.baseCSSPrefix + 'form-invalid',
|
|
|
|
/**
|
|
* @cfg {String} fieldLabel
|
|
* The label for the field. It gets appended with the {@link #labelSeparator}, and its position and sizing is
|
|
* determined by the {@link #labelAlign}, {@link #labelWidth}, and {@link #labelPad} configs.
|
|
*/
|
|
fieldLabel: undefined,
|
|
|
|
/**
|
|
* @cfg {String} labelAlign
|
|
* Controls the position and alignment of the {@link #fieldLabel}. Valid values are:
|
|
*
|
|
* - "left" (the default) - The label is positioned to the left of the field, with its text aligned to the left.
|
|
* Its width is determined by the {@link #labelWidth} config.
|
|
* - "top" - The label is positioned above the field.
|
|
* - "right" - The label is positioned to the left of the field, with its text aligned to the right.
|
|
* Its width is determined by the {@link #labelWidth} config.
|
|
*/
|
|
labelAlign : 'left',
|
|
|
|
/**
|
|
* @cfg {Number} labelWidth
|
|
* The width of the {@link #fieldLabel} in pixels. Only applicable if the {@link #labelAlign} is set to "left" or
|
|
* "right".
|
|
*/
|
|
labelWidth: 100,
|
|
|
|
/**
|
|
* @cfg {Number} labelPad
|
|
* The amount of space in pixels between the {@link #fieldLabel} and the input field.
|
|
*/
|
|
labelPad : 5,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} labelSeparator
|
|
* Character(s) to be inserted at the end of the {@link #fieldLabel label text}.
|
|
*
|
|
* Set to empty string to hide the separator completely.
|
|
*/
|
|
labelSeparator : ':',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} labelStyle
|
|
* A CSS style specification string to apply directly to this field's label.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} hideLabel
|
|
* Set to true to completely hide the label element ({@link #fieldLabel} and {@link #labelSeparator}). Also see
|
|
* {@link #hideEmptyLabel}, which controls whether space will be reserved for an empty fieldLabel.
|
|
*/
|
|
hideLabel: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} hideEmptyLabel
|
|
* When set to true, the label element ({@link #fieldLabel} and {@link #labelSeparator}) will be automatically
|
|
* hidden if the {@link #fieldLabel} is empty. Setting this to false will cause the empty label element to be
|
|
* rendered and space to be reserved for it; this is useful if you want a field without a label to line up with
|
|
* other labeled fields in the same form.
|
|
*
|
|
* If you wish to unconditionall hide the label even if a non-empty fieldLabel is configured, then set the
|
|
* {@link #hideLabel} config to true.
|
|
*/
|
|
hideEmptyLabel: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} preventMark
|
|
* true to disable displaying any {@link #setActiveError error message} set on this object.
|
|
*/
|
|
preventMark: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} autoFitErrors
|
|
* Whether to adjust the component's body area to make room for 'side' or 'under' {@link #msgTarget error messages}.
|
|
*/
|
|
autoFitErrors: true,
|
|
|
|
/**
|
|
* @cfg {String} msgTarget
|
|
* The location where the error message text should display. Must be one of the following values:
|
|
*
|
|
* - `qtip` Display a quick tip containing the message when the user hovers over the field.
|
|
* This is the default.
|
|
*
|
|
* **{@link Ext.tip.QuickTipManager#init} must have been called for this setting to work.**
|
|
*
|
|
* - `title` Display the message in a default browser title attribute popup.
|
|
* - `under` Add a block div beneath the field containing the error message.
|
|
* - `side` Add an error icon to the right of the field, displaying the message in a popup on hover.
|
|
* - `none` Don't display any error message. This might be useful if you are implementing custom error display.
|
|
* - `[element id]` Add the error message directly to the innerHTML of the specified element.
|
|
*/
|
|
msgTarget: 'qtip',
|
|
|
|
/**
|
|
* @cfg {String} activeError
|
|
* If specified, then the component will be displayed with this value as its active error when first rendered. Use
|
|
* {@link #setActiveError} or {@link #unsetActiveError} to change it after component creation.
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Tells the layout system that the height can be measured immediately because the width does not need setting.
|
|
*/
|
|
noWrap: true,
|
|
|
|
labelableInsertions: [
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeBodyEl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* at the beginning of the input containing element. If an `XTemplate` is used, the component's {@link Ext.AbstractComponent#renderData render data}
|
|
* serves as the context.
|
|
*/
|
|
'beforeBodyEl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterBodyEl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* at the end of the input containing element. If an `XTemplate` is used, the component's {@link Ext.AbstractComponent#renderData render data}
|
|
* serves as the context.
|
|
*/
|
|
'afterBodyEl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeLabelTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the label element. If an `XTemplate` is used, the component's {@link Ext.AbstractComponent#renderData render data}
|
|
* serves as the context.
|
|
*/
|
|
'beforeLabelTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterLabelTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the label element. If an `XTemplate` is used, the component's {@link Ext.AbstractComponent#renderData render data}
|
|
* serves as the context.
|
|
*/
|
|
'afterLabelTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeSubTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the {@link #getSubTplMarkup subTpl markup}. If an `XTemplate` is used, the
|
|
* component's {@link Ext.AbstractComponent#renderData render data} serves as the context.
|
|
*/
|
|
'beforeSubTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterSubTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the {@link #getSubTplMarkup subTpl markup}. If an `XTemplate` is used, the
|
|
* component's {@link Ext.AbstractComponent#renderData render data} serves as the context.
|
|
*/
|
|
'afterSubTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeLabelTextTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the label text. If an `XTemplate` is used, the component's {@link Ext.AbstractComponent#renderData render data}
|
|
* serves as the context.
|
|
*/
|
|
'beforeLabelTextTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterLabelTextTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the label text. If an `XTemplate` is used, the component's {@link Ext.AbstractComponent#renderData render data}
|
|
* serves as the context.
|
|
*/
|
|
'afterLabelTextTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} labelAttrTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* inside the label element (as attributes). If an `XTemplate` is used, the component's
|
|
* {@link Ext.AbstractComponent#renderData render data} serves as the context.
|
|
*/
|
|
'labelAttrTpl'
|
|
],
|
|
|
|
// This is an array to avoid a split on every call to Ext.copyTo
|
|
labelableRenderProps: ['allowBlank', 'id', 'labelAlign', 'fieldBodyCls', 'extraFieldBodyCls',
|
|
'baseBodyCls', 'clearCls', 'labelSeparator', 'msgTarget', 'inputRowCls'],
|
|
|
|
/**
|
|
* Performs initialization of this mixin. Component classes using this mixin should call this method during their
|
|
* own initialization.
|
|
*/
|
|
initLabelable: function() {
|
|
var me = this,
|
|
padding = me.padding;
|
|
|
|
// This Component is rendered as a table. Padding doesn't work on tables
|
|
// Before padding can be applied to the encapsulating table element, copy the padding into
|
|
// an extraMargins property which is to be added to all computed margins post render :(
|
|
if (padding) {
|
|
me.padding = undefined;
|
|
me.extraMargins = Ext.Element.parseBox(padding);
|
|
}
|
|
|
|
if (!me.activeErrorsTpl) {
|
|
if (me.msgTarget == 'title') {
|
|
me.activeErrorsTpl = me.plaintextActiveErrorsTpl;
|
|
} else {
|
|
me.activeErrorsTpl = me.htmlActiveErrorsTpl;
|
|
}
|
|
}
|
|
|
|
me.addCls(Ext.plainTableCls);
|
|
me.addCls(me.formItemCls);
|
|
|
|
// Prevent first render of active error, at Field render time from signalling a change from undefined to "
|
|
me.lastActiveError = '';
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event errorchange
|
|
* Fires when the active error message is changed via {@link #setActiveError}.
|
|
* @param {Ext.form.Labelable} this
|
|
* @param {String} error The active error message
|
|
*/
|
|
'errorchange'
|
|
);
|
|
|
|
// bubbleEvents on the prototype of a mixin won't work, so call enableBubble
|
|
me.enableBubble('errorchange');
|
|
},
|
|
|
|
/**
|
|
* Returns the trimmed label by slicing off the label separator character. Can be overridden.
|
|
* @return {String} The trimmed field label, or empty string if not defined
|
|
*/
|
|
trimLabelSeparator: function() {
|
|
var me = this,
|
|
separator = me.labelSeparator,
|
|
label = me.fieldLabel || '',
|
|
lastChar = label.substr(label.length - 1);
|
|
|
|
// if the last char is the same as the label separator then slice it off otherwise just return label value
|
|
return lastChar === separator ? label.slice(0, -1) : label;
|
|
},
|
|
|
|
/**
|
|
* Returns the label for the field. Defaults to simply returning the {@link #fieldLabel} config. Can be overridden
|
|
* to provide a custom generated label.
|
|
* @template
|
|
* @return {String} The configured field label, or empty string if not defined
|
|
*/
|
|
getFieldLabel: function() {
|
|
return this.trimLabelSeparator();
|
|
},
|
|
|
|
/**
|
|
* Set the label of this field.
|
|
* @param {String} label The new label. The {@link #labelSeparator} will be automatically appended to the label
|
|
* string.
|
|
*/
|
|
setFieldLabel: function(label){
|
|
label = label || '';
|
|
|
|
var me = this,
|
|
separator = me.labelSeparator,
|
|
labelEl = me.labelEl;
|
|
|
|
me.fieldLabel = label;
|
|
if (me.rendered) {
|
|
if (Ext.isEmpty(label) && me.hideEmptyLabel) {
|
|
labelEl.parent().setDisplayed('none');
|
|
} else {
|
|
if (separator) {
|
|
label = me.trimLabelSeparator() + separator;
|
|
}
|
|
labelEl.update(label);
|
|
labelEl.parent().setDisplayed('');
|
|
}
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
getInsertionRenderData: function (data, names) {
|
|
var i = names.length,
|
|
name, value;
|
|
|
|
while (i--) {
|
|
name = names[i];
|
|
value = this[name];
|
|
|
|
if (value) {
|
|
if (typeof value != 'string') {
|
|
if (!value.isTemplate) {
|
|
value = Ext.XTemplate.getTpl(this, name);
|
|
}
|
|
value = value.apply(data);
|
|
}
|
|
}
|
|
|
|
data[name] = value || '';
|
|
}
|
|
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Generates the arguments for the field decorations {@link #labelableRenderTpl rendering template}.
|
|
* @return {Object} The template arguments
|
|
* @protected
|
|
*/
|
|
getLabelableRenderData: function() {
|
|
var me = this,
|
|
data,
|
|
tempEl,
|
|
topLabel = me.labelAlign === 'top';
|
|
|
|
if (!Ext.form.Labelable.errorIconWidth) {
|
|
tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-invalid-icon'});
|
|
Ext.form.Labelable.errorIconWidth = tempEl.getWidth() + tempEl.getMargin('l');
|
|
tempEl.remove();
|
|
}
|
|
|
|
data = Ext.copyTo({
|
|
inFormLayout : me.ownerLayout && me.ownerLayout.type === 'form',
|
|
inputId : me.getInputId(),
|
|
labelOnLeft : !topLabel,
|
|
hideLabel : !me.hasVisibleLabel(),
|
|
fieldLabel : me.getFieldLabel(),
|
|
labelCellStyle : me.getLabelCellStyle(),
|
|
labelCellAttrs : me.getLabelCellAttrs(),
|
|
labelCls : me.getLabelCls(),
|
|
labelStyle : me.getLabelStyle(),
|
|
bodyColspan : me.getBodyColspan(),
|
|
externalError : !me.autoFitErrors,
|
|
errorMsgCls : me.getErrorMsgCls(),
|
|
errorIconWidth : Ext.form.Labelable.errorIconWidth
|
|
},
|
|
me, me.labelableRenderProps, true);
|
|
|
|
me.getInsertionRenderData(data, me.labelableInsertions);
|
|
|
|
return data;
|
|
},
|
|
|
|
xhooks: {
|
|
beforeRender: function() {
|
|
var me = this;
|
|
me.setFieldDefaults(me.getHierarchyState().fieldDefaults);
|
|
if (me.ownerLayout) {
|
|
me.addCls(Ext.baseCSSPrefix + me.ownerLayout.type + '-form-item');
|
|
}
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this,
|
|
margins,
|
|
side,
|
|
style = {};
|
|
|
|
if (me.extraMargins) {
|
|
margins = me.el.getMargin();
|
|
for (side in margins) {
|
|
if (margins.hasOwnProperty(side)) {
|
|
style['margin-' + side] = (margins[side] + me.extraMargins[side]) + 'px';
|
|
}
|
|
}
|
|
me.el.setStyle(style);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks if the field has a visible label
|
|
* @return {Boolean} True if the field has a visible label
|
|
*/
|
|
hasVisibleLabel: function(){
|
|
if (this.hideLabel) {
|
|
return false;
|
|
}
|
|
return !(this.hideEmptyLabel && !this.getFieldLabel());
|
|
},
|
|
|
|
/**
|
|
* Gets the width of the label (if visible)
|
|
* @return {Number} The label width
|
|
*/
|
|
getLabelWidth: function(){
|
|
var me = this;
|
|
if (!me.hasVisibleLabel()) {
|
|
return 0;
|
|
}
|
|
return me.labelWidth + me.labelPad;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Calculates the colspan value for the body cell - the cell which contains the input field.
|
|
*
|
|
* The field table structure contains 4 columns:
|
|
*/
|
|
getBodyColspan: function() {
|
|
var me = this,
|
|
result;
|
|
|
|
if (me.msgTarget === 'side' && (!me.autoFitErrors || me.hasActiveError())) {
|
|
result = 1;
|
|
} else {
|
|
result = 2;
|
|
}
|
|
if (me.labelAlign !== 'top' && !me.hasVisibleLabel()) {
|
|
result++;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
getLabelCls: function() {
|
|
var labelCls = this.labelCls + ' ' + Ext.dom.Element.unselectableCls,
|
|
labelClsExtra = this.labelClsExtra;
|
|
|
|
return labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls;
|
|
},
|
|
|
|
getLabelCellStyle: function() {
|
|
var me = this,
|
|
hideLabelCell = me.hideLabel || (!me.getFieldLabel() && me.hideEmptyLabel);
|
|
|
|
return hideLabelCell ? 'display:none;' : '';
|
|
},
|
|
|
|
getErrorMsgCls: function() {
|
|
var me = this,
|
|
hideLabelCell = (me.hideLabel || (!me.fieldLabel && me.hideEmptyLabel));
|
|
|
|
return me.errorMsgCls + (!hideLabelCell && me.labelAlign === 'top' ? ' ' + Ext.baseCSSPrefix + 'lbl-top-err-icon' : '');
|
|
},
|
|
|
|
getLabelCellAttrs: function() {
|
|
var me = this,
|
|
labelAlign = me.labelAlign,
|
|
result = '';
|
|
|
|
if (labelAlign !== 'top') {
|
|
result = 'valign="top" halign="' + labelAlign + '" width="' + (me.labelWidth + me.labelPad) + '"';
|
|
}
|
|
return result + ' class="' + Ext.baseCSSPrefix + 'field-label-cell"';
|
|
},
|
|
|
|
/**
|
|
* Gets any label styling for the labelEl
|
|
* @private
|
|
* @return {String} The label styling
|
|
*/
|
|
getLabelStyle: function(){
|
|
var me = this,
|
|
labelPad = me.labelPad,
|
|
labelStyle = '';
|
|
|
|
// Calculate label styles up front rather than in the Field layout for speed; this
|
|
// is safe because label alignment/width/pad are not expected to change.
|
|
if (me.labelAlign !== 'top') {
|
|
if (me.labelWidth) {
|
|
labelStyle = 'width:' + me.labelWidth + 'px;';
|
|
}
|
|
if (labelPad) {
|
|
labelStyle += 'margin-right:' + labelPad + 'px;';
|
|
}
|
|
}
|
|
|
|
return labelStyle + (me.labelStyle || '');
|
|
},
|
|
|
|
/**
|
|
* Gets the markup to be inserted into the outer template's bodyEl. Defaults to empty string, should be implemented
|
|
* by classes including this mixin as needed.
|
|
* @return {String} The markup to be inserted
|
|
* @protected
|
|
*/
|
|
getSubTplMarkup: function() {
|
|
return '';
|
|
},
|
|
|
|
/**
|
|
* Get the input id, if any, for this component. This is used as the "for" attribute on the label element.
|
|
* Implementing subclasses may also use this as e.g. the id for their own input element.
|
|
* @return {String} The input id
|
|
*/
|
|
getInputId: function() {
|
|
return '';
|
|
},
|
|
|
|
/**
|
|
* Gets the active error message for this component, if any. This does not trigger validation on its own, it merely
|
|
* returns any message that the component may already hold.
|
|
* @return {String} The active error message on the component; if there is no error, an empty string is returned.
|
|
*/
|
|
getActiveError : function() {
|
|
return this.activeError || '';
|
|
},
|
|
|
|
/**
|
|
* Tells whether the field currently has an active error message. This does not trigger validation on its own, it
|
|
* merely looks for any message that the component may already hold.
|
|
* @return {Boolean}
|
|
*/
|
|
hasActiveError: function() {
|
|
return !!this.getActiveError();
|
|
},
|
|
|
|
/**
|
|
* 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) {
|
|
this.setActiveErrors(msg);
|
|
},
|
|
|
|
/**
|
|
* Gets an Array of any active error messages currently applied to the field. This does not trigger validation on
|
|
* its own, it merely returns any messages that the component may already hold.
|
|
* @return {String[]} The active error messages on the component; if there are no errors, an empty Array is
|
|
* returned.
|
|
*/
|
|
getActiveErrors: function() {
|
|
return this.activeErrors || [];
|
|
},
|
|
|
|
/**
|
|
* 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 {String[]} errors The error messages
|
|
*/
|
|
setActiveErrors: function(errors) {
|
|
errors = Ext.Array.from(errors);
|
|
this.activeError = errors[0];
|
|
this.activeErrors = errors;
|
|
this.activeError = this.getTpl('activeErrorsTpl').apply({
|
|
errors: errors,
|
|
listCls: Ext.plainListCls
|
|
});
|
|
this.renderActiveError();
|
|
},
|
|
|
|
/**
|
|
* 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;
|
|
delete this.activeErrors;
|
|
this.renderActiveError();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Updates the rendered DOM to match the current activeError. This only updates the content and
|
|
* attributes, you'll have to call doComponentLayout to actually update the display.
|
|
*/
|
|
renderActiveError: function() {
|
|
var me = this,
|
|
activeError = me.getActiveError(),
|
|
hasError = !!activeError;
|
|
|
|
if (activeError !== me.lastActiveError) {
|
|
me.fireEvent('errorchange', me, activeError);
|
|
me.lastActiveError = activeError;
|
|
}
|
|
|
|
if (me.rendered && !me.isDestroyed && !me.preventMark) {
|
|
// Add/remove invalid class
|
|
me.el[hasError ? 'addCls' : 'removeCls'](me.invalidCls);
|
|
|
|
// Update the aria-invalid attribute
|
|
me.getActionEl().dom.setAttribute('aria-invalid', hasError);
|
|
|
|
// Update the errorEl (There will only be one if msgTarget is 'side' or 'under') with the error message text
|
|
if (me.errorEl) {
|
|
me.errorEl.dom.innerHTML = activeError;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Applies a set of default configuration values to this Labelable instance. For each of the properties in the given
|
|
* object, check if this component hasOwnProperty that config; if not then it's inheriting a default value from its
|
|
* prototype and we should apply the default value.
|
|
* @param {Object} defaults The defaults to apply to the object.
|
|
*/
|
|
setFieldDefaults: function(defaults) {
|
|
var key;
|
|
|
|
for (key in defaults) {
|
|
if (!this.hasOwnProperty(key)) {
|
|
this[key] = defaults[key];
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* This mixin provides a common interface for the logical behavior and state of form fields, including:
|
|
*
|
|
* - Getter and setter methods for field values
|
|
* - Events and methods for tracking value and validity changes
|
|
* - Methods for triggering validation
|
|
*
|
|
* **NOTE**: When implementing custom fields, it is most likely that you will want to extend the {@link Ext.form.field.Base}
|
|
* component class rather than using this mixin directly, as BaseField contains additional logic for generating an
|
|
* actual DOM complete with {@link Ext.form.Labelable label and error message} display and a form input field,
|
|
* plus methods that bind the Field value getters and setters to the input field's value.
|
|
*
|
|
* If you do want to implement this mixin directly and don't want to extend {@link Ext.form.field.Base}, then
|
|
* you will most likely want to override the following methods with custom implementations: {@link #getValue},
|
|
* {@link #setValue}, and {@link #getErrors}. Other methods may be overridden as needed but their base
|
|
* implementations should be sufficient for common cases. You will also need to make sure that {@link #initField}
|
|
* is called during the component's initialization.
|
|
*/
|
|
Ext.define('Ext.form.field.Field', {
|
|
/**
|
|
* @property {Boolean} isFormField
|
|
* Flag denoting that this component is a Field. Always true.
|
|
*/
|
|
isFormField : true,
|
|
|
|
/**
|
|
* @cfg {Object} value
|
|
* A value to initialize this field with.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} name
|
|
* The name of the field. By default this is used as the parameter name when including the
|
|
* {@link #getSubmitData field value} in a {@link Ext.form.Basic#submit form submit()}. To prevent the field from
|
|
* being included in the form submit, set {@link #submitValue} to false.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} disabled
|
|
* True to disable the field. Disabled Fields will not be {@link Ext.form.Basic#submit submitted}.
|
|
*/
|
|
disabled : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} submitValue
|
|
* Setting this to false will prevent the field from being {@link Ext.form.Basic#submit submitted} even when it is
|
|
* not disabled.
|
|
*/
|
|
submitValue: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} validateOnChange
|
|
* Specifies whether this field should be validated immediately whenever a change in its value is detected.
|
|
* If the validation results in a change in the field's validity, a {@link #validitychange} event will be
|
|
* fired. This allows the field to show feedback about the validity of its contents immediately as the user is
|
|
* typing.
|
|
*
|
|
* When set to false, feedback will not be immediate. However the form will still be validated before submitting if
|
|
* the clientValidation option to {@link Ext.form.Basic#doAction} is enabled, or if the field or form are validated
|
|
* manually.
|
|
*
|
|
* See also {@link Ext.form.field.Base#checkChangeEvents} for controlling how changes to the field's value are
|
|
* detected.
|
|
*/
|
|
validateOnChange: true,
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
suspendCheckChange: 0,
|
|
|
|
/**
|
|
* Initializes this Field mixin on the current instance. Components using this mixin should call this method during
|
|
* their own initialization process.
|
|
*/
|
|
initField: function() {
|
|
this.addEvents(
|
|
/**
|
|
* @event change
|
|
* Fires when the value of a field is changed via the {@link #setValue} method.
|
|
* @param {Ext.form.field.Field} this
|
|
* @param {Object} newValue The new value
|
|
* @param {Object} oldValue The original value
|
|
*/
|
|
'change',
|
|
/**
|
|
* @event validitychange
|
|
* Fires when a change in the field's validity is detected.
|
|
* @param {Ext.form.field.Field} this
|
|
* @param {Boolean} isValid Whether or not the field is now valid
|
|
*/
|
|
'validitychange',
|
|
/**
|
|
* @event dirtychange
|
|
* Fires when a change in the field's {@link #isDirty} state is detected.
|
|
* @param {Ext.form.field.Field} this
|
|
* @param {Boolean} isDirty Whether or not the field is now dirty
|
|
*/
|
|
'dirtychange'
|
|
);
|
|
|
|
this.initValue();
|
|
|
|
},
|
|
|
|
/**
|
|
* Initializes the field's value based on the initial config.
|
|
*/
|
|
initValue: function() {
|
|
var me = this;
|
|
|
|
me.value = me.transformOriginalValue(me.value);
|
|
/**
|
|
* @property {Object} originalValue
|
|
* The original value of the field as configured in the {@link #value} configuration, or as loaded by the last
|
|
* form load operation if the form's {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} setting is `true`.
|
|
*/
|
|
me.originalValue = me.lastValue = me.value;
|
|
|
|
// Set the initial value - prevent validation on initial set
|
|
me.suspendCheckChange++;
|
|
me.setValue(me.value);
|
|
me.suspendCheckChange--;
|
|
},
|
|
|
|
/**
|
|
* Allows for any necessary modifications before the original
|
|
* value is set
|
|
* @protected
|
|
* @param {Object} value The initial value
|
|
* @return {Object} The modified initial value
|
|
*/
|
|
transformOriginalValue: Ext.identityFn,
|
|
|
|
/**
|
|
* Returns the {@link Ext.form.field.Field#name name} attribute of the field. This is used as the parameter name
|
|
* when including the field value in a {@link Ext.form.Basic#submit form submit()}.
|
|
* @return {String} name The field {@link Ext.form.field.Field#name name}
|
|
*/
|
|
getName: function() {
|
|
return this.name;
|
|
},
|
|
|
|
/**
|
|
* Returns the current data value of the field. The type of value returned is particular to the type of the
|
|
* particular field (e.g. a Date object for {@link Ext.form.field.Date}).
|
|
* @return {Object} value The field value
|
|
*/
|
|
getValue: function() {
|
|
return this.value;
|
|
},
|
|
|
|
/**
|
|
* Sets a data value into the field and runs the change detection and validation.
|
|
* @param {Object} value The value to set
|
|
* @return {Ext.form.field.Field} this
|
|
*/
|
|
setValue: function(value) {
|
|
var me = this;
|
|
me.value = value;
|
|
me.checkChange();
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns whether two field {@link #getValue values} are logically equal. Field implementations may override this
|
|
* to provide custom comparison logic appropriate for the particular field's data type.
|
|
* @param {Object} value1 The first value to compare
|
|
* @param {Object} value2 The second value to compare
|
|
* @return {Boolean} True if the values are equal, false if inequal.
|
|
*/
|
|
isEqual: function(value1, value2) {
|
|
return String(value1) === String(value2);
|
|
},
|
|
|
|
/**
|
|
* Returns whether two values are logically equal.
|
|
* Similar to {@link #isEqual}, however null or undefined values will be treated as empty strings.
|
|
* @private
|
|
* @param {Object} value1 The first value to compare
|
|
* @param {Object} value2 The second value to compare
|
|
* @return {Boolean} True if the values are equal, false if inequal.
|
|
*/
|
|
isEqualAsString: function(value1, value2){
|
|
return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
|
|
},
|
|
|
|
/**
|
|
* Returns the parameter(s) that would be included in a standard form submit for this field. Typically this will be
|
|
* an object with a single name-value pair, the name being this field's {@link #getName name} and the value being
|
|
* its current stringified value. More advanced field implementations may return more than one name-value pair.
|
|
*
|
|
* Note that the values returned from this method are not guaranteed to have been successfully {@link #validate
|
|
* validated}.
|
|
*
|
|
* @return {Object} A mapping of submit parameter names to values; each value should be a string, or an array of
|
|
* strings if that particular name has multiple values. It can also return null if there are no parameters to be
|
|
* submitted.
|
|
*/
|
|
getSubmitData: function() {
|
|
var me = this,
|
|
data = null;
|
|
if (!me.disabled && me.submitValue && !me.isFileUpload()) {
|
|
data = {};
|
|
data[me.getName()] = '' + me.getValue();
|
|
}
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Returns the value(s) that should be saved to the {@link Ext.data.Model} instance for this field, when {@link
|
|
* Ext.form.Basic#updateRecord} is called. Typically this will be an object with a single name-value pair, the name
|
|
* being this field's {@link #getName name} and the value being its current data value. More advanced field
|
|
* implementations may return more than one name-value pair. The returned values will be saved to the corresponding
|
|
* field names in the Model.
|
|
*
|
|
* Note that the values returned from this method are not guaranteed to have been successfully {@link #validate
|
|
* validated}.
|
|
*
|
|
* @return {Object} A mapping of submit parameter names to values; each value should be a string, or an array of
|
|
* strings if that particular name has multiple values. It can also return null if there are no parameters to be
|
|
* submitted.
|
|
*/
|
|
getModelData: function() {
|
|
var me = this,
|
|
data = null;
|
|
if (!me.disabled && !me.isFileUpload()) {
|
|
data = {};
|
|
data[me.getName()] = me.getValue();
|
|
}
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Resets the current field value to the originally loaded value and clears any validation messages. See {@link
|
|
* Ext.form.Basic}.{@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad}
|
|
*/
|
|
reset : function(){
|
|
var me = this;
|
|
|
|
me.beforeReset();
|
|
me.setValue(me.originalValue);
|
|
me.clearInvalid();
|
|
// delete here so we reset back to the original state
|
|
delete me.wasValid;
|
|
},
|
|
|
|
/**
|
|
* Template method before a field is reset.
|
|
* @protected
|
|
*/
|
|
beforeReset: Ext.emptyFn,
|
|
|
|
/**
|
|
* Resets the field's {@link #originalValue} property so it matches the current {@link #getValue value}. This is
|
|
* called by {@link Ext.form.Basic}.{@link Ext.form.Basic#setValues setValues} if the form's
|
|
* {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} property is set to true.
|
|
*/
|
|
resetOriginalValue: function() {
|
|
this.originalValue = this.getValue();
|
|
this.checkDirty();
|
|
},
|
|
|
|
/**
|
|
* Checks whether the value of the field has changed since the last time it was checked.
|
|
* If the value has changed, it:
|
|
*
|
|
* 1. Fires the {@link #change change event},
|
|
* 2. Performs validation if the {@link #validateOnChange} config is enabled, firing the
|
|
* {@link #validitychange validitychange event} if the validity has changed, and
|
|
* 3. Checks the {@link #isDirty dirty state} of the field and fires the {@link #dirtychange dirtychange event}
|
|
* if it has changed.
|
|
*/
|
|
checkChange: function() {
|
|
if (!this.suspendCheckChange) {
|
|
var me = this,
|
|
newVal = me.getValue(),
|
|
oldVal = me.lastValue;
|
|
if (!me.isEqual(newVal, oldVal) && !me.isDestroyed) {
|
|
me.lastValue = newVal;
|
|
me.fireEvent('change', me, newVal, oldVal);
|
|
me.onChange(newVal, oldVal);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called when the field's value changes. Performs validation if the {@link #validateOnChange}
|
|
* config is enabled, and invokes the dirty check.
|
|
*/
|
|
onChange: function(newVal, oldVal) {
|
|
if (this.validateOnChange) {
|
|
this.validate();
|
|
}
|
|
this.checkDirty();
|
|
},
|
|
|
|
/**
|
|
* Returns true if the value of this Field has been changed from its {@link #originalValue}.
|
|
* Will always return false if the field is disabled.
|
|
*
|
|
* Note that if the owning {@link Ext.form.Basic form} was configured with
|
|
* {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} then the {@link #originalValue} is updated when
|
|
* the values are loaded by {@link Ext.form.Basic}.{@link Ext.form.Basic#setValues setValues}.
|
|
* @return {Boolean} True if this field has been changed from its original value (and is not disabled),
|
|
* false otherwise.
|
|
*/
|
|
isDirty : function() {
|
|
var me = this;
|
|
return !me.disabled && !me.isEqual(me.getValue(), me.originalValue);
|
|
},
|
|
|
|
/**
|
|
* Checks the {@link #isDirty} state of the field and if it has changed since the last time it was checked,
|
|
* fires the {@link #dirtychange} event.
|
|
*/
|
|
checkDirty: function() {
|
|
var me = this,
|
|
isDirty = me.isDirty();
|
|
if (isDirty !== me.wasDirty) {
|
|
me.fireEvent('dirtychange', me, isDirty);
|
|
me.onDirtyChange(isDirty);
|
|
me.wasDirty = isDirty;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Called when the field's dirty state changes.
|
|
* @param {Boolean} isDirty
|
|
*/
|
|
onDirtyChange: Ext.emptyFn,
|
|
|
|
/**
|
|
* Runs this field's validators and returns an array of error messages for any validation failures. This is called
|
|
* internally during validation and would not usually need to be used manually.
|
|
*
|
|
* Each subclass should override or augment the return value to provide their own errors.
|
|
*
|
|
* @param {Object} value The value to get errors for (defaults to the current field value)
|
|
* @return {String[]} All error messages for this field; an empty Array if none.
|
|
*/
|
|
getErrors: function(value) {
|
|
return [];
|
|
},
|
|
|
|
/**
|
|
* Returns whether or not the field value is currently valid by {@link #getErrors validating} the field's current
|
|
* value. The {@link #validitychange} event will not be fired; use {@link #validate} instead if you want the event
|
|
* to fire. **Note**: {@link #disabled} fields are always treated as valid.
|
|
*
|
|
* Implementations are encouraged to ensure that this method does not have side-effects such as triggering error
|
|
* message display.
|
|
*
|
|
* @return {Boolean} True if the value is valid, else false
|
|
*/
|
|
isValid : function() {
|
|
var me = this;
|
|
return me.disabled || Ext.isEmpty(me.getErrors());
|
|
},
|
|
|
|
/**
|
|
* Returns whether or not the field value is currently valid by {@link #getErrors validating} the field's current
|
|
* value, and fires the {@link #validitychange} event if the field's validity has changed since the last validation.
|
|
* **Note**: {@link #disabled} fields are always treated as valid.
|
|
*
|
|
* Custom implementations of this method are allowed to have side-effects such as triggering error message display.
|
|
* To validate without side-effects, use {@link #isValid}.
|
|
*
|
|
* @return {Boolean} True if the value is valid, else false
|
|
*/
|
|
validate : function() {
|
|
var me = this,
|
|
isValid = me.isValid();
|
|
if (isValid !== me.wasValid) {
|
|
me.wasValid = isValid;
|
|
me.fireEvent('validitychange', me, isValid);
|
|
}
|
|
return isValid;
|
|
},
|
|
|
|
/**
|
|
* A utility for grouping a set of modifications which may trigger value changes into a single transaction, to
|
|
* prevent excessive firing of {@link #change} events. This is useful for instance if the field has sub-fields which
|
|
* are being updated as a group; you don't want the container field to check its own changed state for each subfield
|
|
* change.
|
|
* @param {Object} fn A function containing the transaction code
|
|
*/
|
|
batchChanges: function(fn) {
|
|
try {
|
|
this.suspendCheckChange++;
|
|
fn();
|
|
} catch(e){
|
|
throw e;
|
|
} finally {
|
|
this.suspendCheckChange--;
|
|
}
|
|
this.checkChange();
|
|
},
|
|
|
|
/**
|
|
* Returns whether this Field is a file upload field; if it returns true, forms will use special techniques for
|
|
* {@link Ext.form.Basic#submit submitting the form} via AJAX. See {@link Ext.form.Basic#hasUpload} for details. If
|
|
* this returns true, the {@link #extractFileInput} method must also be implemented to return the corresponding file
|
|
* input element.
|
|
* @return {Boolean}
|
|
*/
|
|
isFileUpload: function() {
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Only relevant if the instance's {@link #isFileUpload} method returns true. Returns a reference to the file input
|
|
* DOM element holding the user's selected file. The input will be appended into the submission form and will not be
|
|
* returned, so this method should also create a replacement.
|
|
* @return {HTMLElement}
|
|
*/
|
|
extractFileInput: function() {
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* @method markInvalid
|
|
* Associate one or more error messages with this field. Components using this mixin should implement this method to
|
|
* update the component's rendering to display the messages.
|
|
*
|
|
* **Note**: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to return `false`
|
|
* if the value does _pass_ validation. So simply marking a Field as invalid will not prevent submission of forms
|
|
* submitted with the {@link Ext.form.action.Submit#clientValidation} option set.
|
|
*
|
|
* @param {String/String[]} errors The error message(s) for the field.
|
|
*/
|
|
markInvalid: Ext.emptyFn,
|
|
|
|
/**
|
|
* @method clearInvalid
|
|
* Clear any invalid styles/messages for this field. Components using this mixin should implement this method to
|
|
* update the components rendering to clear any existing messages.
|
|
*
|
|
* **Note**: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to return `true`
|
|
* if the value does not _pass_ validation. So simply clearing a field's errors will not necessarily allow
|
|
* submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation} option set.
|
|
*/
|
|
clearInvalid: Ext.emptyFn
|
|
|
|
});
|
|
|
|
/**
|
|
* Layout class for components with {@link Ext.form.Labelable field labeling}, handling the sizing and alignment of
|
|
* the form control, label, and error message treatment.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.Field', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.component.Auto ,
|
|
|
|
alias: 'layout.field',
|
|
|
|
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'field',
|
|
|
|
naturalSizingProp: 'size',
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
ownerContext.labelStrategy = me.getLabelStrategy();
|
|
ownerContext.errorStrategy = me.getErrorStrategy();
|
|
|
|
ownerContext.labelContext = ownerContext.getEl('labelEl');
|
|
ownerContext.bodyCellContext = ownerContext.getEl('bodyEl');
|
|
ownerContext.inputContext = ownerContext.getEl('inputEl');
|
|
ownerContext.errorContext = ownerContext.getEl('errorEl');
|
|
|
|
// width:100% on an element inside a table in IE6/7 "strict" sizes the content box.
|
|
// store the input element's border and padding info so that subclasses can take it into consideration if needed
|
|
if (Ext.isIE7m && Ext.isStrict && ownerContext.inputContext) {
|
|
me.ieInputWidthAdjustment = ownerContext.inputContext.getPaddingInfo().width + ownerContext.inputContext.getBorderInfo().width;
|
|
}
|
|
|
|
// perform preparation on the label and error (setting css classes, qtips, etc.)
|
|
ownerContext.labelStrategy.prepare(ownerContext, owner);
|
|
ownerContext.errorStrategy.prepare(ownerContext, owner);
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext){
|
|
var me = this,
|
|
owner = me.owner,
|
|
widthModel = ownerContext.widthModel,
|
|
ownerNaturalSize = owner[me.naturalSizingProp],
|
|
width;
|
|
|
|
me.callParent(arguments);
|
|
// Body cell must stretch to use up available width unless the field is auto width
|
|
if (widthModel.shrinkWrap) {
|
|
// When the width needs to be auto, table-layout cannot be fixed
|
|
me.beginLayoutShrinkWrap(ownerContext);
|
|
} else if (widthModel.natural) {
|
|
|
|
// When a size specified, natural becomes fixed width unless the inpiutWidth is specified - we shrinkwrap that
|
|
if (typeof ownerNaturalSize == 'number' && !owner.inputWidth) {
|
|
me.beginLayoutFixed(ownerContext, (width = ownerNaturalSize * 6.5 + 20), 'px');
|
|
}
|
|
|
|
// Otherwise it is the same as shrinkWrap
|
|
else {
|
|
me.beginLayoutShrinkWrap(ownerContext);
|
|
}
|
|
ownerContext.setWidth(width, false);
|
|
} else {
|
|
me.beginLayoutFixed(ownerContext, '100', '%');
|
|
}
|
|
},
|
|
|
|
beginLayoutFixed: function (ownerContext, width, suffix) {
|
|
var owner = ownerContext.target,
|
|
inputEl = owner.inputEl,
|
|
inputWidth = owner.inputWidth;
|
|
|
|
owner.el.setStyle('table-layout', 'fixed');
|
|
owner.bodyEl.setStyle('width', width + suffix);
|
|
if (inputEl) {
|
|
if (inputWidth) {
|
|
inputEl.setStyle('width', inputWidth + 'px');
|
|
} else {
|
|
inputEl.setStyle('width', owner.stretchInputElFixed ? '100%' : '');
|
|
}
|
|
}
|
|
ownerContext.isFixed = true;
|
|
},
|
|
|
|
beginLayoutShrinkWrap: function (ownerContext) {
|
|
var owner = ownerContext.target,
|
|
inputEl = owner.inputEl,
|
|
inputWidth = owner.inputWidth;
|
|
|
|
if (inputEl && inputEl.dom) {
|
|
inputEl.dom.removeAttribute('size');
|
|
if (inputWidth) {
|
|
inputEl.setStyle('width', inputWidth + 'px');
|
|
} else {
|
|
inputEl.setStyle('width', '');
|
|
}
|
|
}
|
|
owner.el.setStyle('table-layout', 'auto');
|
|
owner.bodyEl.setStyle('width', '');
|
|
},
|
|
|
|
finishedLayout: function(ownerContext){
|
|
var owner = this.owner;
|
|
|
|
this.callParent(arguments);
|
|
ownerContext.labelStrategy.finishedLayout(ownerContext, owner);
|
|
ownerContext.errorStrategy.finishedLayout(ownerContext, owner);
|
|
},
|
|
|
|
calculateOwnerHeightFromContentHeight: function(ownerContext, contentHeight) {
|
|
return contentHeight;
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
return ownerContext.el.getHeight();
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
return ownerContext.el.getWidth();
|
|
},
|
|
|
|
measureLabelErrorHeight: function (ownerContext) {
|
|
return ownerContext.labelStrategy.getHeight(ownerContext) +
|
|
ownerContext.errorStrategy.getHeight(ownerContext);
|
|
},
|
|
|
|
onFocus: function() {
|
|
this.getErrorStrategy().onFocus(this.owner);
|
|
},
|
|
|
|
/**
|
|
* Return the set of strategy functions from the {@link #labelStrategies labelStrategies collection}
|
|
* that is appropriate for the field's {@link Ext.form.Labelable#labelAlign labelAlign} config.
|
|
*/
|
|
getLabelStrategy: function() {
|
|
var me = this,
|
|
strategies = me.labelStrategies,
|
|
labelAlign = me.owner.labelAlign;
|
|
return strategies[labelAlign] || strategies.base;
|
|
},
|
|
|
|
/**
|
|
* Return the set of strategy functions from the {@link #errorStrategies errorStrategies collection}
|
|
* that is appropriate for the field's {@link Ext.form.Labelable#msgTarget msgTarget} config.
|
|
*/
|
|
getErrorStrategy: function() {
|
|
var me = this,
|
|
owner = me.owner,
|
|
strategies = me.errorStrategies,
|
|
msgTarget = owner.msgTarget;
|
|
return !owner.preventMark && Ext.isString(msgTarget) ?
|
|
(strategies[msgTarget] || strategies.elementId) :
|
|
strategies.none;
|
|
},
|
|
|
|
/**
|
|
* 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.Labelable#labelAlign} config.
|
|
*/
|
|
labelStrategies: (function() {
|
|
var base = {
|
|
prepare: function(ownerContext, owner) {
|
|
var cls = owner.labelCls + '-' + owner.labelAlign,
|
|
labelEl = owner.labelEl;
|
|
|
|
if (labelEl) {
|
|
labelEl.addCls(cls);
|
|
}
|
|
},
|
|
|
|
getHeight: function () {
|
|
return 0;
|
|
},
|
|
|
|
finishedLayout: Ext.emptyFn
|
|
};
|
|
|
|
return {
|
|
base: base,
|
|
|
|
/**
|
|
* Label displayed above the bodyEl
|
|
*/
|
|
top: Ext.applyIf({
|
|
|
|
getHeight: function (ownerContext) {
|
|
var labelContext = ownerContext.labelContext,
|
|
props = labelContext.props,
|
|
height = props.height;
|
|
|
|
if (height === undefined) {
|
|
props.height = height = labelContext.el.getHeight();
|
|
}
|
|
|
|
return height;
|
|
}
|
|
}, base),
|
|
|
|
/**
|
|
* Label displayed to the left of the bodyEl
|
|
*/
|
|
left: base,
|
|
|
|
/**
|
|
* Same as left, only difference is text-align in CSS
|
|
*/
|
|
right: base
|
|
};
|
|
}()),
|
|
|
|
/**
|
|
* 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.Labelable#msgTarget} config.
|
|
*/
|
|
errorStrategies: (function() {
|
|
function showTip(owner) {
|
|
var tip = Ext.layout.component.field.Field.tip,
|
|
target;
|
|
|
|
if (tip && tip.isVisible()) {
|
|
target = tip.activeTarget;
|
|
if (target && target.el === owner.getActionEl().dom) {
|
|
tip.toFront(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
var applyIf = Ext.applyIf,
|
|
emptyFn = Ext.emptyFn,
|
|
iconCls = Ext.baseCSSPrefix + 'form-invalid-icon',
|
|
iconWidth,
|
|
base = {
|
|
prepare: function(ownerContext, owner) {
|
|
var el = owner.errorEl;
|
|
if (el) {
|
|
el.setDisplayed(false);
|
|
}
|
|
},
|
|
getHeight: function () {
|
|
return 0;
|
|
},
|
|
onFocus: emptyFn,
|
|
finishedLayout: emptyFn
|
|
};
|
|
|
|
return {
|
|
none: base,
|
|
|
|
/**
|
|
* Error displayed as icon (with QuickTip on hover) to right of the bodyEl
|
|
*/
|
|
side: applyIf({
|
|
prepare: function(ownerContext, owner) {
|
|
var errorEl = owner.errorEl,
|
|
sideErrorCell = owner.sideErrorCell,
|
|
displayError = owner.hasActiveError(),
|
|
tempEl;
|
|
|
|
// Capture error icon width once
|
|
if (!iconWidth) {
|
|
iconWidth = (tempEl = Ext.getBody().createChild({style: 'position:absolute', cls: iconCls})).getWidth();
|
|
tempEl.remove();
|
|
}
|
|
|
|
errorEl.addCls(iconCls);
|
|
errorEl.set({'data-errorqtip': owner.getActiveError() || ''});
|
|
if (owner.autoFitErrors) {
|
|
errorEl.setDisplayed(displayError);
|
|
}
|
|
// Not autofitting, the space must still be allocated.
|
|
else {
|
|
errorEl.setVisible(displayError);
|
|
}
|
|
|
|
// If we are auto fitting, then hide and show the entire cell
|
|
if (sideErrorCell && owner.autoFitErrors) {
|
|
sideErrorCell.setDisplayed(displayError);
|
|
}
|
|
owner.bodyEl.dom.colSpan = owner.getBodyColspan();
|
|
|
|
// TODO: defer the tip call until after the layout to avoid immediate DOM reads now
|
|
Ext.layout.component.field.Field.initTip();
|
|
},
|
|
onFocus: showTip
|
|
}, base),
|
|
|
|
/**
|
|
* Error message displayed underneath the bodyEl
|
|
*/
|
|
under: applyIf({
|
|
prepare: function(ownerContext, owner) {
|
|
var errorEl = owner.errorEl,
|
|
cls = Ext.baseCSSPrefix + 'form-invalid-under';
|
|
|
|
errorEl.addCls(cls);
|
|
errorEl.setDisplayed(owner.hasActiveError());
|
|
},
|
|
getHeight: function (ownerContext) {
|
|
var height = 0,
|
|
errorContext, props;
|
|
|
|
if (ownerContext.target.hasActiveError()) {
|
|
errorContext = ownerContext.errorContext;
|
|
props = errorContext.props;
|
|
height = props.height;
|
|
|
|
if (height === undefined) {
|
|
props.height = height = errorContext.el.getHeight();
|
|
}
|
|
}
|
|
|
|
return height;
|
|
}
|
|
}, base),
|
|
|
|
/**
|
|
* Error displayed as QuickTip on hover of the field container
|
|
*/
|
|
qtip: applyIf({
|
|
prepare: function(ownerContext, owner) {
|
|
Ext.layout.component.field.Field.initTip();
|
|
owner.getActionEl().dom.setAttribute('data-errorqtip', owner.getActiveError() || '');
|
|
},
|
|
onFocus: showTip
|
|
}, base),
|
|
|
|
/**
|
|
* Error displayed as title tip on hover of the field container
|
|
*/
|
|
title: applyIf({
|
|
prepare: function(ownerContext, owner) {
|
|
owner.getActionEl().dom.setAttribute('title', owner.getActiveError() || '');
|
|
}
|
|
}, base),
|
|
|
|
/**
|
|
* Error message displayed as content of an element with a given id elsewhere in the app
|
|
*/
|
|
elementId: applyIf({
|
|
prepare: function(ownerContext, owner) {
|
|
var targetEl = Ext.fly(owner.msgTarget);
|
|
if (targetEl) {
|
|
targetEl.dom.innerHTML = owner.getActiveError() || '';
|
|
targetEl.setDisplayed(owner.hasActiveError());
|
|
}
|
|
}
|
|
}, base)
|
|
};
|
|
}()),
|
|
|
|
statics: {
|
|
/**
|
|
* Use a custom QuickTip instance separate from the main QuickTips singleton, so that we
|
|
* can give it a custom frame style. Responds to errorqtip rather than the qtip property.
|
|
* @static
|
|
*/
|
|
initTip: function() {
|
|
var tip = this.tip;
|
|
if (!tip) {
|
|
tip = this.tip = Ext.create('Ext.tip.QuickTip', {
|
|
ui: 'form-invalid'
|
|
});
|
|
tip.tagConfig = Ext.apply({}, {attribute: 'errorqtip'}, tip.tagConfig);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Destroy the error tip instance.
|
|
* @static
|
|
*/
|
|
destroyTip: function() {
|
|
var tip = this.tip;
|
|
if (tip) {
|
|
tip.destroy();
|
|
delete this.tip;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* Base class for form fields that provides default event handling, rendering, and other common functionality
|
|
* needed by all form field types. Utilizes the {@link Ext.form.field.Field} mixin for value handling and validation,
|
|
* and the {@link Ext.form.Labelable} mixin to provide label and error message display.
|
|
*
|
|
* In most cases you will want to use a subclass, such as {@link Ext.form.field.Text} or {@link Ext.form.field.Checkbox},
|
|
* rather than creating instances of this class directly. However if you are implementing a custom form field,
|
|
* using this as the parent class is recommended.
|
|
*
|
|
* # Values and Conversions
|
|
*
|
|
* Because Base implements the Field mixin, it has a main value that can be initialized with the
|
|
* {@link #value} config and manipulated via the {@link #getValue} and {@link #setValue} methods. This main
|
|
* value can be one of many data types appropriate to the current field, for instance a {@link Ext.form.field.Date Date}
|
|
* field would use a JavaScript Date object as its value type. However, because the field is rendered as a HTML
|
|
* input, this value data type can not always be directly used in the rendered field.
|
|
*
|
|
* Therefore Base introduces the concept of a "raw value". This is the value of the rendered HTML input field,
|
|
* and is normally a String. The {@link #getRawValue} and {@link #setRawValue} methods can be used to directly
|
|
* work with the raw value, though it is recommended to use getValue and setValue in most cases.
|
|
*
|
|
* Conversion back and forth between the main value and the raw value is handled by the {@link #valueToRaw} and
|
|
* {@link #rawToValue} methods. If you are implementing a subclass that uses a non-String value data type, you
|
|
* should override these methods to handle the conversion.
|
|
*
|
|
* # Rendering
|
|
*
|
|
* The content of the field body is defined by the {@link #fieldSubTpl} XTemplate, with its argument data
|
|
* created by the {@link #getSubTplData} method. Override this template and/or method to create custom
|
|
* field renderings.
|
|
*
|
|
* # Example usage:
|
|
*
|
|
* @example
|
|
* // A simple subclass of Base that creates a HTML5 search field. Redirects to the
|
|
* // searchUrl when the Enter key is pressed.222
|
|
* Ext.define('Ext.form.SearchField', {
|
|
* extend: 'Ext.form.field.Base',
|
|
* alias: 'widget.searchfield',
|
|
*
|
|
* inputType: 'search',
|
|
*
|
|
* // Config defining the search URL
|
|
* searchUrl: 'http://www.google.com/search?q={0}',
|
|
*
|
|
* // Add specialkey listener
|
|
* initComponent: function() {
|
|
* this.callParent();
|
|
* this.on('specialkey', this.checkEnterKey, this);
|
|
* },
|
|
*
|
|
* // Handle enter key presses, execute the search if the field has a value
|
|
* checkEnterKey: function(field, e) {
|
|
* var value = this.getValue();
|
|
* if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {
|
|
* location.href = Ext.String.format(this.searchUrl, value);
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Base Example',
|
|
* bodyPadding: 5,
|
|
* width: 250,
|
|
*
|
|
* // Fields will be arranged vertically, stretched to full width
|
|
* layout: 'anchor',
|
|
* defaults: {
|
|
* anchor: '100%'
|
|
* },
|
|
* items: [{
|
|
* xtype: 'searchfield',
|
|
* fieldLabel: 'Search',
|
|
* name: 'query'
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Base', {
|
|
extend: Ext.Component ,
|
|
mixins: {
|
|
labelable: Ext.form.Labelable ,
|
|
field: Ext.form.field.Field
|
|
},
|
|
alias: 'widget.field',
|
|
alternateClassName: ['Ext.form.Field', 'Ext.form.BaseField'],
|
|
|
|
|
|
/**
|
|
* @cfg {Ext.XTemplate} fieldSubTpl
|
|
* The content of the field body is defined by this config option.
|
|
* @private
|
|
*/
|
|
fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
|
|
'<input id="{id}" type="{type}" {inputAttrTpl}',
|
|
' size="1"', // allows inputs to fully respect CSS widths across all browsers
|
|
'<tpl if="name"> name="{name}"</tpl>',
|
|
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
|
|
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
|
|
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
|
|
'<tpl if="readOnly"> readonly="readonly"</tpl>',
|
|
'<tpl if="disabled"> disabled="disabled"</tpl>',
|
|
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
|
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
|
' class="{fieldCls} {typeCls} {editableCls} {inputCls}" autocomplete="off"/>',
|
|
{
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
subTplInsertions: [
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} inputAttrTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* inside the input element (as attributes). If an `XTemplate` is used, the component's
|
|
* {@link #getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'inputAttrTpl'
|
|
],
|
|
|
|
/**
|
|
* @cfg {String} name
|
|
* The name of the field. This is used as the parameter name when including the field value
|
|
* in a {@link Ext.form.Basic#submit form submit()}. If no name is configured, it falls back to the {@link #inputId}.
|
|
* To prevent the field from being included in the form submit, set {@link #submitValue} to false.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} inputType
|
|
* The type attribute for input fields -- e.g. radio, text, password, file. The extended types
|
|
* supported by HTML5 inputs (url, email, etc.) may also be used, though using them will cause older browsers to
|
|
* fall back to 'text'.
|
|
*
|
|
* The type 'password' must be used to render that field type currently -- there is no separate Ext component for
|
|
* that. You can use {@link Ext.form.field.File} which creates a custom-rendered file upload field, but if you want
|
|
* a plain unstyled file input you can use a Base with inputType:'file'.
|
|
*/
|
|
inputType: 'text',
|
|
|
|
/**
|
|
* @cfg {Number} tabIndex
|
|
* The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via
|
|
* applyTo
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} invalidText
|
|
* The error text to use when marking a field invalid and no message is provided
|
|
*/
|
|
invalidText : 'The value in this field is invalid',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} [fieldCls='x-form-field']
|
|
* The default CSS class for the field input
|
|
*/
|
|
fieldCls : Ext.baseCSSPrefix + 'form-field',
|
|
|
|
/**
|
|
* @cfg {String} fieldStyle
|
|
* Optional CSS style(s) to be applied to the {@link #inputEl field input element}. Should be a valid argument to
|
|
* {@link Ext.Element#applyStyles}. Defaults to undefined. See also the {@link #setFieldStyle} method for changing
|
|
* the style after initialization.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [focusCls='x-form-focus']
|
|
* The CSS class to use when the field receives focus
|
|
*/
|
|
focusCls : 'form-focus',
|
|
|
|
/**
|
|
* @cfg {String} dirtyCls
|
|
* The CSS class to use when the field value {@link #isDirty is dirty}.
|
|
*/
|
|
dirtyCls : Ext.baseCSSPrefix + 'form-dirty',
|
|
|
|
/**
|
|
* @cfg {String[]} checkChangeEvents
|
|
* A list of event names that will be listened for on the field's {@link #inputEl input element}, which will cause
|
|
* the field's value to be checked for changes. If a change is detected, the {@link #change change event} will be
|
|
* fired, followed by validation if the {@link #validateOnChange} option is enabled.
|
|
*
|
|
* Defaults to ['change', 'propertychange', 'keyup'] in Internet Explorer, and ['change', 'input', 'textInput', 'keyup',
|
|
* 'dragdrop'] in other browsers. This catches all the ways that field values can be changed in most supported
|
|
* browsers; the only known exceptions at the time of writing are:
|
|
*
|
|
* - Safari 3.2 and older: cut/paste in textareas via the context menu, and dragging text into textareas
|
|
* - Opera 10 and 11: dragging text into text fields and textareas, and cut via the context menu in text fields
|
|
* and textareas
|
|
* - Opera 9: Same as Opera 10 and 11, plus paste from context menu in text fields and textareas
|
|
*
|
|
* If you need to guarantee on-the-fly change notifications including these edge cases, you can call the
|
|
* {@link #checkChange} method on a repeating interval, e.g. using {@link Ext.TaskManager}, or if the field is within
|
|
* a {@link Ext.form.Panel}, you can use the FormPanel's {@link Ext.form.Panel#pollForChanges} configuration to set up
|
|
* such a task automatically.
|
|
*/
|
|
checkChangeEvents: Ext.isIE && (!document.documentMode || document.documentMode < 9) ?
|
|
['change', 'propertychange', 'keyup'] :
|
|
['change', 'input', 'textInput', 'keyup', 'dragdrop'],
|
|
|
|
/**
|
|
* @cfg {Number} checkChangeBuffer
|
|
* Defines a timeout in milliseconds for buffering {@link #checkChangeEvents} that fire in rapid succession.
|
|
* Defaults to 50 milliseconds.
|
|
*/
|
|
checkChangeBuffer: 50,
|
|
|
|
componentLayout: 'field',
|
|
|
|
/**
|
|
* @cfg {Boolean} readOnly
|
|
* true to mark the field as readOnly in HTML.
|
|
*
|
|
* **Note**: this only sets the element's readOnly DOM attribute. Setting `readOnly=true`, for example, will not
|
|
* disable triggering a ComboBox or Date; it gives you the option of forcing the user to choose via the trigger
|
|
* without typing in the text box. To hide the trigger use `{@link Ext.form.field.Trigger#hideTrigger hideTrigger}`.
|
|
*/
|
|
readOnly : false,
|
|
|
|
/**
|
|
* @cfg {String} readOnlyCls
|
|
* The CSS class applied to the component's main element when it is {@link #readOnly}.
|
|
*/
|
|
readOnlyCls: Ext.baseCSSPrefix + 'form-readonly',
|
|
|
|
/**
|
|
* @cfg {String} inputId
|
|
* The id that will be given to the generated input DOM element. Defaults to an automatically generated id. If you
|
|
* configure this manually, you must make sure it is unique in the document.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} validateOnBlur
|
|
* Whether the field should validate when it loses focus. This will cause fields to be validated
|
|
* as the user steps through the fields in the form regardless of whether they are making changes to those fields
|
|
* along the way. See also {@link #validateOnChange}.
|
|
*/
|
|
validateOnBlur: true,
|
|
|
|
// private
|
|
hasFocus : false,
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'field',
|
|
|
|
maskOnDisable: false,
|
|
|
|
// Instructs the layout to stretch the inputEl to 100% width when laying
|
|
// out under fixed conditions. Defaults to true for all fields except check/radio
|
|
// Doesn't seem worth it to introduce a whole new layout class just for this flag
|
|
stretchInputElFixed: true,
|
|
|
|
// private
|
|
initComponent : function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
me.subTplData = me.subTplData || {};
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event specialkey
|
|
* Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys
|
|
* see {@link Ext.util.KeyMap}. You can check {@link Ext.EventObject#getKey} to determine which key was
|
|
* pressed. For example:
|
|
*
|
|
* var form = new Ext.form.Panel({
|
|
* ...
|
|
* items: [{
|
|
* fieldLabel: 'Field 1',
|
|
* name: 'field1',
|
|
* allowBlank: false
|
|
* },{
|
|
* fieldLabel: 'Field 2',
|
|
* name: 'field2',
|
|
* listeners: {
|
|
* specialkey: function(field, e){
|
|
* // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
|
|
* // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
|
|
* if (e.{@link Ext.EventObject#getKey getKey()} == e.ENTER) {
|
|
* var form = field.up('form').getForm();
|
|
* form.submit();
|
|
* }
|
|
* }
|
|
* }
|
|
* }
|
|
* ],
|
|
* ...
|
|
* });
|
|
*
|
|
* @param {Ext.form.field.Base} this
|
|
* @param {Ext.EventObject} e The event object
|
|
*/
|
|
'specialkey',
|
|
|
|
/**
|
|
* @event writeablechange
|
|
* Fires when this field changes its read-only status.
|
|
* @param {Ext.form.field.Base} this
|
|
* @param {Boolean} Read only flag
|
|
*/
|
|
'writeablechange'
|
|
);
|
|
|
|
// Init mixins
|
|
me.initLabelable();
|
|
me.initField();
|
|
|
|
// Default name to inputId
|
|
if (!me.name) {
|
|
me.name = me.getInputId();
|
|
}
|
|
// Add to protoEl before render
|
|
if (me.readOnly) {
|
|
me.addCls(me.readOnlyCls);
|
|
}
|
|
|
|
me.addCls(Ext.baseCSSPrefix + 'form-type-' + me.inputType);
|
|
},
|
|
|
|
/**
|
|
* Returns the input id for this field. If none was specified via the {@link #inputId} config, then an id will be
|
|
* automatically generated.
|
|
*/
|
|
getInputId: function() {
|
|
return this.inputId || (this.inputId = this.id + '-inputEl');
|
|
},
|
|
|
|
/**
|
|
* Creates and returns the data object to be used when rendering the {@link #fieldSubTpl}.
|
|
* @return {Object} The template data
|
|
* @template
|
|
*/
|
|
getSubTplData: function() {
|
|
var me = this,
|
|
type = me.inputType,
|
|
inputId = me.getInputId(),
|
|
data;
|
|
|
|
data = Ext.apply({
|
|
id : inputId,
|
|
cmpId : me.id,
|
|
name : me.name || inputId,
|
|
disabled : me.disabled,
|
|
readOnly : me.readOnly,
|
|
value : me.getRawValue(),
|
|
type : type,
|
|
fieldCls : me.fieldCls,
|
|
fieldStyle : me.getFieldStyle(),
|
|
tabIdx : me.tabIndex,
|
|
inputCls : me.inputCls,
|
|
typeCls : Ext.baseCSSPrefix + 'form-' + (type === 'password' ? 'text' : type)
|
|
}, me.subTplData);
|
|
|
|
me.getInsertionRenderData(data, me.subTplInsertions);
|
|
|
|
return data;
|
|
},
|
|
|
|
applyRenderSelectors: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
// This is added here rather than defined in Ext.form.Labelable since inputEl isn't related to Labelable.
|
|
// It's important to add inputEl to the childEls so it can be properly destroyed.
|
|
me.addChildEls('inputEl');
|
|
|
|
/**
|
|
* @property {Ext.Element} inputEl
|
|
* The input Element for this Field. Only available after the field has been rendered.
|
|
*/
|
|
me.inputEl = me.el.getById(me.getInputId());
|
|
},
|
|
|
|
/**
|
|
* Gets the markup to be inserted into the outer template's bodyEl. For fields this is the actual input element.
|
|
*/
|
|
getSubTplMarkup: function() {
|
|
return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
|
|
},
|
|
|
|
initRenderTpl: function() {
|
|
var me = this;
|
|
if (!me.hasOwnProperty('renderTpl')) {
|
|
me.renderTpl = me.getTpl('labelableRenderTpl');
|
|
}
|
|
return me.callParent();
|
|
},
|
|
|
|
initRenderData: function() {
|
|
return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
|
|
},
|
|
|
|
/**
|
|
* Set the {@link #fieldStyle CSS style} of the {@link #inputEl field input element}.
|
|
* @param {String/Object/Function} style The style(s) to apply. Should be a valid argument to {@link
|
|
* Ext.Element#applyStyles}.
|
|
*/
|
|
setFieldStyle: function(style) {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
if (inputEl) {
|
|
inputEl.applyStyles(style);
|
|
}
|
|
me.fieldStyle = style;
|
|
},
|
|
|
|
getFieldStyle: function() {
|
|
return Ext.isObject(this.fieldStyle) ? Ext.DomHelper.generateStyles(this.fieldStyle) : this.fieldStyle ||'';
|
|
},
|
|
|
|
// private
|
|
onRender : function() {
|
|
this.callParent(arguments);
|
|
this.renderActiveError();
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
return this.inputEl;
|
|
},
|
|
|
|
isFileUpload: function() {
|
|
return this.inputType === 'file';
|
|
},
|
|
|
|
// private override to use getSubmitValue() as a convenience
|
|
getSubmitData: function() {
|
|
var me = this,
|
|
data = null,
|
|
val;
|
|
if (!me.disabled && me.submitValue && !me.isFileUpload()) {
|
|
val = me.getSubmitValue();
|
|
if (val !== null) {
|
|
data = {};
|
|
data[me.getName()] = val;
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Returns the value that would be included in a standard form submit for this field. This will be combined with the
|
|
* field's name to form a name=value pair in the {@link #getSubmitData submitted parameters}. If an empty string is
|
|
* returned then just the name= will be submitted; if null is returned then nothing will be submitted.
|
|
*
|
|
* Note that the value returned will have been {@link #processRawValue processed} but may or may not have been
|
|
* successfully {@link #validate validated}.
|
|
*
|
|
* @return {String} The value to be submitted, or null.
|
|
*/
|
|
getSubmitValue: function() {
|
|
return this.processRawValue(this.getRawValue());
|
|
},
|
|
|
|
/**
|
|
* Returns the raw value of the field, without performing any normalization, conversion, or validation. To get a
|
|
* normalized and converted value see {@link #getValue}.
|
|
* @return {String} value The raw String value of the field
|
|
*/
|
|
getRawValue: function() {
|
|
var me = this,
|
|
v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
|
|
me.rawValue = v;
|
|
return v;
|
|
},
|
|
|
|
/**
|
|
* Sets the field's raw value directly, bypassing {@link #valueToRaw value conversion}, change detection, and
|
|
* validation. To set the value with these additional inspections see {@link #setValue}.
|
|
* @param {Object} value The value to set
|
|
* @return {Object} value The field value that is set
|
|
*/
|
|
setRawValue: function(value) {
|
|
var me = this;
|
|
value = Ext.value(me.transformRawValue(value), '');
|
|
me.rawValue = value;
|
|
|
|
// Some Field subclasses may not render an inputEl
|
|
if (me.inputEl) {
|
|
me.inputEl.dom.value = value;
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Transform the raw value before it is set
|
|
* @protected
|
|
* @param {Object} value The value
|
|
* @return {Object} The value to set
|
|
*/
|
|
transformRawValue: Ext.identityFn,
|
|
|
|
/**
|
|
* Converts a mixed-type value to a raw representation suitable for displaying in the field. This allows controlling
|
|
* how value objects passed to {@link #setValue} are shown to the user, including localization. For instance, for a
|
|
* {@link Ext.form.field.Date}, this would control how a Date object passed to {@link #setValue} would be converted
|
|
* to a String for display in the field.
|
|
*
|
|
* See {@link #rawToValue} for the opposite conversion.
|
|
*
|
|
* The base implementation simply does a standard toString conversion, and converts {@link Ext#isEmpty empty values}
|
|
* to an empty string.
|
|
*
|
|
* @param {Object} value The mixed-type value to convert to the raw representation.
|
|
* @return {Object} The converted raw value.
|
|
*/
|
|
valueToRaw: function(value) {
|
|
return '' + Ext.value(value, '');
|
|
},
|
|
|
|
/**
|
|
* Converts a raw input field value into a mixed-type value that is suitable for this particular field type. This
|
|
* allows controlling the normalization and conversion of user-entered values into field-type-appropriate values,
|
|
* e.g. a Date object for {@link Ext.form.field.Date}, and is invoked by {@link #getValue}.
|
|
*
|
|
* It is up to individual implementations to decide how to handle raw values that cannot be successfully converted
|
|
* to the desired object type.
|
|
*
|
|
* See {@link #valueToRaw} for the opposite conversion.
|
|
*
|
|
* The base implementation does no conversion, returning the raw value untouched.
|
|
*
|
|
* @param {Object} rawValue
|
|
* @return {Object} The converted value.
|
|
* @method
|
|
*/
|
|
rawToValue: Ext.identityFn,
|
|
|
|
/**
|
|
* Performs any necessary manipulation of a raw field value to prepare it for {@link #rawToValue conversion} and/or
|
|
* {@link #validate validation}, for instance stripping out ignored characters. In the base implementation it does
|
|
* nothing; individual subclasses may override this as needed.
|
|
*
|
|
* @param {Object} value The unprocessed string value
|
|
* @return {Object} The processed string value
|
|
* @method
|
|
*/
|
|
processRawValue: Ext.identityFn,
|
|
|
|
/**
|
|
* Returns the current data value of the field. The type of value returned is particular to the type of the
|
|
* particular field (e.g. a Date object for {@link Ext.form.field.Date}), as the result of calling {@link #rawToValue} on
|
|
* the field's {@link #processRawValue processed} String value. To return the raw String value, see {@link #getRawValue}.
|
|
* @return {Object} value The field value
|
|
*/
|
|
getValue: function() {
|
|
var me = this,
|
|
val = me.rawToValue(me.processRawValue(me.getRawValue()));
|
|
me.value = val;
|
|
return val;
|
|
},
|
|
|
|
/**
|
|
* Sets a data value into the field and runs the change detection and validation. To set the value directly
|
|
* without these inspections see {@link #setRawValue}.
|
|
* @param {Object} value The value to set
|
|
* @return {Ext.form.field.Field} this
|
|
*/
|
|
setValue: function(value) {
|
|
var me = this;
|
|
me.setRawValue(me.valueToRaw(value));
|
|
return me.mixins.field.setValue.call(me, value);
|
|
},
|
|
|
|
onBoxReady: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
if (me.setReadOnlyOnBoxReady) {
|
|
me.setReadOnly(me.readOnly);
|
|
}
|
|
|
|
},
|
|
|
|
//private
|
|
onDisable: function() {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
|
|
me.callParent();
|
|
if (inputEl) {
|
|
inputEl.dom.disabled = true;
|
|
if (me.hasActiveError()) {
|
|
// clear invalid state since the field is now disabled
|
|
me.clearInvalid();
|
|
me.needsValidateOnEnable = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
//private
|
|
onEnable: function() {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
|
|
me.callParent();
|
|
if (inputEl) {
|
|
inputEl.dom.disabled = false;
|
|
if (me.needsValidateOnEnable) {
|
|
delete me.needsValidateOnEnable;
|
|
// will trigger errors to be shown
|
|
me.forceValidation = true;
|
|
me.isValid();
|
|
delete me.forceValidation;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the read only state of this field.
|
|
* @param {Boolean} readOnly Whether the field should be read only.
|
|
*/
|
|
setReadOnly: function(readOnly) {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
readOnly = !!readOnly;
|
|
me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls);
|
|
me.readOnly = readOnly;
|
|
if (inputEl) {
|
|
inputEl.dom.readOnly = readOnly;
|
|
} else if (me.rendering) {
|
|
me.setReadOnlyOnBoxReady = true;
|
|
}
|
|
me.fireEvent('writeablechange', me, readOnly);
|
|
},
|
|
|
|
// private
|
|
fireKey: function(e){
|
|
if(e.isSpecialKey()){
|
|
this.fireEvent('specialkey', this, new Ext.EventObjectImpl(e));
|
|
}
|
|
},
|
|
|
|
// private
|
|
initEvents : function(){
|
|
var me = this,
|
|
inputEl = me.inputEl,
|
|
onChangeTask,
|
|
onChangeEvent,
|
|
events = me.checkChangeEvents,
|
|
e,
|
|
eLen = events.length,
|
|
event;
|
|
|
|
if (inputEl) {
|
|
me.mon(inputEl, Ext.EventManager.getKeyEvent(), me.fireKey, me);
|
|
|
|
// listen for immediate value changes
|
|
onChangeTask = new Ext.util.DelayedTask(me.checkChange, me);
|
|
me.onChangeEvent = onChangeEvent = function() {
|
|
onChangeTask.delay(me.checkChangeBuffer);
|
|
};
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
event = events[e];
|
|
|
|
if (event === 'propertychange') {
|
|
me.usesPropertychange = true;
|
|
}
|
|
|
|
me.mon(inputEl, event, onChangeEvent);
|
|
}
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
doComponentLayout: function() {
|
|
var me = this,
|
|
inputEl = me.inputEl,
|
|
usesPropertychange = me.usesPropertychange,
|
|
ename = 'propertychange',
|
|
onChangeEvent = me.onChangeEvent;
|
|
|
|
// In IE if propertychange is one of the checkChangeEvents, we need to remove
|
|
// the listener prior to layout and re-add it after, to prevent it from firing
|
|
// needlessly for attribute and style changes applied to the inputEl.
|
|
if (usesPropertychange) {
|
|
me.mun(inputEl, ename, onChangeEvent);
|
|
}
|
|
me.callParent(arguments);
|
|
if (usesPropertychange) {
|
|
me.mon(inputEl, ename, onChangeEvent);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Called when the field's dirty state changes. Adds/removes the {@link #dirtyCls} on the main element.
|
|
* @param {Boolean} isDirty
|
|
*/
|
|
onDirtyChange: function(isDirty) {
|
|
this[isDirty ? 'addCls' : 'removeCls'](this.dirtyCls);
|
|
},
|
|
|
|
|
|
/**
|
|
* Returns whether or not the field value is currently valid by {@link #getErrors validating} the
|
|
* {@link #processRawValue processed raw value} of the field. **Note**: {@link #disabled} fields are
|
|
* always treated as valid.
|
|
*
|
|
* @return {Boolean} True if the value is valid, else false
|
|
*/
|
|
isValid : function() {
|
|
var me = this,
|
|
disabled = me.disabled,
|
|
validate = me.forceValidation || !disabled;
|
|
|
|
|
|
return validate ? me.validateValue(me.processRawValue(me.getRawValue())) : disabled;
|
|
},
|
|
|
|
|
|
/**
|
|
* Uses {@link #getErrors} to build an array of validation errors. If any errors are found, they are passed to
|
|
* {@link #markInvalid} and false is returned, otherwise true is returned.
|
|
*
|
|
* Previously, subclasses were invited to provide an implementation of this to process validations - from 3.2
|
|
* onwards {@link #getErrors} should be overridden instead.
|
|
*
|
|
* @param {Object} value The value to validate
|
|
* @return {Boolean} True if all validations passed, false if one or more failed
|
|
*/
|
|
validateValue: function(value) {
|
|
var me = this,
|
|
errors = me.getErrors(value),
|
|
isValid = Ext.isEmpty(errors);
|
|
if (!me.preventMark) {
|
|
if (isValid) {
|
|
me.clearInvalid();
|
|
} else {
|
|
me.markInvalid(errors);
|
|
}
|
|
}
|
|
|
|
return isValid;
|
|
},
|
|
|
|
/**
|
|
* Display one or more error messages associated with this field, using {@link #msgTarget} to determine how to
|
|
* display the messages and applying {@link #invalidCls} to the field's UI element.
|
|
*
|
|
* **Note**: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to return `false`
|
|
* if the value does _pass_ validation. So simply marking a Field as invalid will not prevent submission of forms
|
|
* submitted with the {@link Ext.form.action.Submit#clientValidation} option set.
|
|
*
|
|
* @param {String/String[]} errors The validation message(s) to display.
|
|
*/
|
|
markInvalid : function(errors) {
|
|
// Save the message and fire the 'invalid' event
|
|
var me = this,
|
|
oldMsg = me.getActiveError(),
|
|
active;
|
|
|
|
me.setActiveErrors(Ext.Array.from(errors));
|
|
active = me.getActiveError();
|
|
if (oldMsg !== active) {
|
|
me.setError(active);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Clear any invalid styles/messages for this field.
|
|
*
|
|
* **Note**: this method does not cause the Field's {@link #validate} or {@link #isValid} methods to return `true`
|
|
* if the value does not _pass_ validation. So simply clearing a field's errors will not necessarily allow
|
|
* submission of forms submitted with the {@link Ext.form.action.Submit#clientValidation} option set.
|
|
*/
|
|
clearInvalid : function() {
|
|
// Clear the message and fire the 'valid' event
|
|
var me = this,
|
|
hadError = me.hasActiveError();
|
|
|
|
delete me.needsValidateOnEnable;
|
|
me.unsetActiveError();
|
|
if (hadError) {
|
|
me.setError('');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Set the current error state
|
|
* @private
|
|
* @param {String} error The error message to set
|
|
*/
|
|
setError: function(active){
|
|
var me = this,
|
|
msgTarget = me.msgTarget,
|
|
prop;
|
|
|
|
if (me.rendered) {
|
|
if (msgTarget == 'title' || msgTarget == 'qtip') {
|
|
if (me.rendered) {
|
|
prop = msgTarget == 'qtip' ? 'data-errorqtip' : 'title';
|
|
}
|
|
me.getActionEl().dom.setAttribute(prop, active || '');
|
|
} else {
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Overrides the method from the Ext.form.Labelable mixin to also add the invalidCls to the inputEl,
|
|
* as that is required for proper styling in IE with nested fields (due to lack of child selector)
|
|
*/
|
|
renderActiveError: function() {
|
|
var me = this,
|
|
hasError = me.hasActiveError();
|
|
if (me.inputEl) {
|
|
// Add/remove invalid class
|
|
me.inputEl[hasError ? 'addCls' : 'removeCls'](me.invalidCls + '-field');
|
|
}
|
|
me.mixins.labelable.renderActiveError.call(me);
|
|
},
|
|
|
|
|
|
getActionEl: function() {
|
|
return this.inputEl || this.el;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @singleton
|
|
* @alternateClassName Ext.form.VTypes
|
|
*
|
|
* This is a singleton object which contains a set of commonly used field validation functions
|
|
* and provides a mechanism for creating reusable custom field validations.
|
|
* The following field validation functions are provided out of the box:
|
|
*
|
|
* - {@link #alpha}
|
|
* - {@link #alphanum}
|
|
* - {@link #email}
|
|
* - {@link #url}
|
|
*
|
|
* VTypes can be applied to a {@link Ext.form.field.Text Text Field} using the `{@link Ext.form.field.Text#vtype vtype}` configuration:
|
|
*
|
|
* Ext.create('Ext.form.field.Text', {
|
|
* fieldLabel: 'Email Address',
|
|
* name: 'email',
|
|
* vtype: 'email' // applies email validation rules to this field
|
|
* });
|
|
*
|
|
* To create custom VTypes:
|
|
*
|
|
* // custom Vtype for vtype:'time'
|
|
* var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
|
|
* Ext.apply(Ext.form.field.VTypes, {
|
|
* // vtype validation function
|
|
* time: function(val, field) {
|
|
* return timeTest.test(val);
|
|
* },
|
|
* // vtype Text property: The error text to display when the validation function returns false
|
|
* timeText: 'Not a valid time. Must be in the format "12:34 PM".',
|
|
* // vtype Mask property: The keystroke filter mask
|
|
* timeMask: /[\d\s:amp]/i
|
|
* });
|
|
*
|
|
* In the above example the `time` function is the validator that will run when field validation occurs,
|
|
* `timeText` is the error message, and `timeMask` limits what characters can be typed into the field.
|
|
* Note that the `Text` and `Mask` functions must begin with the same name as the validator function.
|
|
*
|
|
* Using a custom validator is the same as using one of the build-in validators - just use the name of the validator function
|
|
* as the `{@link Ext.form.field.Text#vtype vtype}` configuration on a {@link Ext.form.field.Text Text Field}:
|
|
*
|
|
* Ext.create('Ext.form.field.Text', {
|
|
* fieldLabel: 'Departure Time',
|
|
* name: 'departureTime',
|
|
* vtype: 'time' // applies custom time validation rules to this field
|
|
* });
|
|
*
|
|
* Another example of a custom validator:
|
|
*
|
|
* // custom Vtype for vtype:'IPAddress'
|
|
* Ext.apply(Ext.form.field.VTypes, {
|
|
* IPAddress: function(v) {
|
|
* return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
|
|
* },
|
|
* IPAddressText: 'Must be a numeric IP address',
|
|
* IPAddressMask: /[\d\.]/i
|
|
* });
|
|
*
|
|
* It's important to note that using {@link Ext#apply Ext.apply()} means that the custom validator function
|
|
* as well as `Text` and `Mask` fields are added as properties of the `Ext.form.field.VTypes` singleton.
|
|
*/
|
|
Ext.define('Ext.form.field.VTypes', (function(){
|
|
// closure these in so they are only created once.
|
|
var alpha = /^[a-zA-Z_]+$/,
|
|
alphanum = /^[a-zA-Z0-9_]+$/,
|
|
|
|
// http://en.wikipedia.org/wiki/Email_address#Local_part
|
|
// http://stackoverflow.com/a/2049510
|
|
// http://isemail.info/
|
|
// http://blog.stevenlevithan.com/archives/capturing-vs-non-capturing-groups
|
|
//
|
|
// 1. Can begin with a double-quote ONLY IF the local part also ends in a double-quote.
|
|
// 2. Can NOT BEGIN with a period.
|
|
// 3. Can NOT END with a period.
|
|
// 4. Can not have MORE THAN ONE period in a row.
|
|
//
|
|
// Let's break this down:
|
|
//
|
|
// ^(")?
|
|
// The local part may begin with double-quotes, but only if it also ends with it.
|
|
// See the back-reference. Capturing.
|
|
//
|
|
// (?:[^\."])
|
|
// Here we've defined that the local part cannot begin with a period or a double-quote. Non-capturing.
|
|
//
|
|
// (?:(?:[\.])?(?:[\w\-!#$%&'*+/=?^_`{|}~]))*
|
|
// After the first character is matched, the regex ensures that there is not more than one period
|
|
// in a row. Then, this nested grouping allows for zero or more of the accepted characters.
|
|
// NOTE that this also ensures that any character not defined in the character class
|
|
// is invalid as an ending character for the local part (such as the period).
|
|
//
|
|
// \1@
|
|
// The local part of the address is a backreference to the first (and only) capturing group that allows
|
|
// for a double-quote to wrap the local part of an email address.
|
|
email = /^(")?(?:[^\."])(?:(?:[\.])?(?:[\w\-!#$%&'*+/=?^_`{|}~]))*\1@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
|
|
url = /(((^https?)|(^ftp)):\/\/((([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*)|(localhost|LOCALHOST))\/?)/i;
|
|
|
|
// All these messages and functions are configurable
|
|
return {
|
|
singleton: true,
|
|
alternateClassName: 'Ext.form.VTypes',
|
|
|
|
/**
|
|
* The function used to validate email addresses. Note that complete validation per the email RFC
|
|
* specifications is very complex and beyond the scope of this class, although this function can be
|
|
* overridden if a more comprehensive validation scheme is desired. See the validation section
|
|
* of the [Wikipedia article on email addresses][1] for additional information. This implementation is
|
|
* intended to validate the following types of emails:
|
|
*
|
|
* - `barney@example.de`
|
|
* - `barney.rubble@example.com`
|
|
* - `barney-rubble@example.coop`
|
|
* - `barney+rubble@example.com`
|
|
* - `barney'rubble@example.com`
|
|
* - `b.arne.y_r.ubbl.e@example.com`
|
|
* - `barney4rubble@example.com`
|
|
* - `barney4rubble!@example.com`
|
|
* - `_barney+rubble@example.com`
|
|
* - `"barney+rubble"@example.com`
|
|
*
|
|
* [1]: http://en.wikipedia.org/wiki/E-mail_address
|
|
*
|
|
* @param {String} value The email address
|
|
* @return {Boolean} true if the RegExp test passed, and false if not.
|
|
*/
|
|
'email' : function(v){
|
|
return email.test(v);
|
|
},
|
|
//<locale>
|
|
/**
|
|
* @property {String} emailText
|
|
* The error text to display when the email validation function returns false.
|
|
* Defaults to: 'This field should be an e-mail address in the format "user@example.com"'
|
|
*/
|
|
'emailText' : 'This field should be an e-mail address in the format "user@example.com"',
|
|
//</locale>
|
|
/**
|
|
* @property {RegExp} emailMask
|
|
* The keystroke filter mask to be applied on email input. See the {@link #email} method for information about
|
|
* more complex email validation. Defaults to: /[a-z0-9_\.\-@]/i
|
|
*/
|
|
'emailMask' : /[\w.\-@'"!#$%&'*+/=?^_`{|}~]/i,
|
|
|
|
/**
|
|
* The function used to validate URLs
|
|
* @param {String} value The URL
|
|
* @return {Boolean} true if the RegExp test passed, and false if not.
|
|
*/
|
|
'url' : function(v){
|
|
return url.test(v);
|
|
},
|
|
//<locale>
|
|
/**
|
|
* @property {String} urlText
|
|
* The error text to display when the url validation function returns false.
|
|
* Defaults to: 'This field should be a URL in the format "http:/'+'/www.example.com"'
|
|
*/
|
|
'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"',
|
|
//</locale>
|
|
|
|
/**
|
|
* The function used to validate alpha values
|
|
* @param {String} value The value
|
|
* @return {Boolean} true if the RegExp test passed, and false if not.
|
|
*/
|
|
'alpha' : function(v){
|
|
return alpha.test(v);
|
|
},
|
|
//<locale>
|
|
/**
|
|
* @property {String} alphaText
|
|
* The error text to display when the alpha validation function returns false.
|
|
* Defaults to: 'This field should only contain letters and _'
|
|
*/
|
|
'alphaText' : 'This field should only contain letters and _',
|
|
//</locale>
|
|
/**
|
|
* @property {RegExp} alphaMask
|
|
* The keystroke filter mask to be applied on alpha input. Defaults to: /[a-z_]/i
|
|
*/
|
|
'alphaMask' : /[a-z_]/i,
|
|
|
|
/**
|
|
* The function used to validate alphanumeric values
|
|
* @param {String} value The value
|
|
* @return {Boolean} true if the RegExp test passed, and false if not.
|
|
*/
|
|
'alphanum' : function(v){
|
|
return alphanum.test(v);
|
|
},
|
|
//<locale>
|
|
/**
|
|
* @property {String} alphanumText
|
|
* The error text to display when the alphanumeric validation function returns false.
|
|
* Defaults to: 'This field should only contain letters, numbers and _'
|
|
*/
|
|
'alphanumText' : 'This field should only contain letters, numbers and _',
|
|
//</locale>
|
|
/**
|
|
* @property {RegExp} alphanumMask
|
|
* The keystroke filter mask to be applied on alphanumeric input. Defaults to: /[a-z0-9_]/i
|
|
*/
|
|
'alphanumMask' : /[a-z0-9_]/i
|
|
};
|
|
}()));
|
|
|
|
/**
|
|
* Layout class for {@link Ext.form.field.Text} fields. Handles sizing the input field.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.Text', {
|
|
extend: Ext.layout.component.field.Field ,
|
|
alias: 'layout.textfield',
|
|
|
|
|
|
type: 'textfield',
|
|
|
|
canGrowWidth: true,
|
|
|
|
beginLayoutCycle: function(ownerContext) {
|
|
this.callParent(arguments);
|
|
|
|
// Clear height, in case a previous layout cycle stretched it.
|
|
if (ownerContext.heightModel.shrinkWrap) {
|
|
ownerContext.inputContext.el.setStyle('height', '');
|
|
}
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
width = me.callParent(arguments),
|
|
inputContext = ownerContext.inputContext,
|
|
inputEl, value, calcWidth, max, min;
|
|
|
|
if (owner.grow && me.canGrowWidth && !ownerContext.state.growHandled) {
|
|
inputEl = owner.inputEl;
|
|
|
|
// Find the width that contains the whole text value
|
|
value = Ext.util.Format.htmlEncode(inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '');
|
|
value += owner.growAppend;
|
|
calcWidth = inputEl.getTextWidth(value) + inputContext.getFrameInfo().width;
|
|
|
|
max = owner.growMax;
|
|
min = Math.min(max, width);
|
|
max = Math.max(owner.growMin, max, min);
|
|
|
|
// Constrain
|
|
calcWidth = Ext.Number.constrain(calcWidth, owner.growMin, max);
|
|
inputContext.setWidth(calcWidth);
|
|
ownerContext.state.growHandled = true;
|
|
|
|
// Now that we've set the inputContext, we need to recalculate the width
|
|
inputContext.domBlock(me, 'width');
|
|
width = NaN;
|
|
}
|
|
return width;
|
|
},
|
|
|
|
publishInnerHeight: function(ownerContext, height) {
|
|
ownerContext.inputContext.setHeight(height - this.measureLabelErrorHeight(ownerContext));
|
|
},
|
|
|
|
beginLayoutFixed: function(ownerContext, width, suffix) {
|
|
var me = this,
|
|
ieInputWidthAdjustment = me.ieInputWidthAdjustment;
|
|
|
|
if (ieInputWidthAdjustment) {
|
|
me.adjustIEInputPadding(ownerContext);
|
|
if(suffix === 'px') {
|
|
width -= ieInputWidthAdjustment;
|
|
}
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
adjustIEInputPadding: function(ownerContext) {
|
|
// adjust for IE 6/7 strict content-box model
|
|
this.owner.bodyEl.setStyle('padding-right', this.ieInputWidthAdjustment + 'px');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* A basic text field. Can be used as a direct replacement for traditional text inputs,
|
|
* or as the base class for more sophisticated input controls (like {@link Ext.form.field.TextArea}
|
|
* and {@link Ext.form.field.ComboBox}). Has support for empty-field placeholder values (see {@link #emptyText}).
|
|
*
|
|
* # Validation
|
|
*
|
|
* The Text field has a useful set of validations built in:
|
|
*
|
|
* - {@link #allowBlank} for making the field required
|
|
* - {@link #minLength} for requiring a minimum value length
|
|
* - {@link #maxLength} for setting a maximum value length (with {@link #enforceMaxLength} to add it
|
|
* as the `maxlength` attribute on the input element)
|
|
* - {@link #regex} to specify a custom regular expression for validation
|
|
*
|
|
* In addition, custom validations may be added:
|
|
*
|
|
* - {@link #vtype} specifies a virtual type implementation from {@link Ext.form.field.VTypes} which can contain
|
|
* custom validation logic
|
|
* - {@link #validator} allows a custom arbitrary function to be called during validation
|
|
*
|
|
* The details around how and when each of these validation options get used are described in the
|
|
* documentation for {@link #getErrors}.
|
|
*
|
|
* By default, the field value is checked for validity immediately while the user is typing in the
|
|
* field. This can be controlled with the {@link #validateOnChange}, {@link #checkChangeEvents}, and
|
|
* {@link #checkChangeBuffer} configurations. Also see the details on Form Validation in the
|
|
* {@link Ext.form.Panel} class documentation.
|
|
*
|
|
* # Masking and Character Stripping
|
|
*
|
|
* Text fields can be configured with custom regular expressions to be applied to entered values before
|
|
* validation: see {@link #maskRe} and {@link #stripCharsRe} for details.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Contact Info',
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* items: [{
|
|
* xtype: 'textfield',
|
|
* name: 'name',
|
|
* fieldLabel: 'Name',
|
|
* allowBlank: false // requires a non-empty value
|
|
* }, {
|
|
* xtype: 'textfield',
|
|
* name: 'email',
|
|
* fieldLabel: 'Email Address',
|
|
* vtype: 'email' // requires value to be a valid email address format
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Text', {
|
|
extend: Ext.form.field.Base ,
|
|
alias: 'widget.textfield',
|
|
|
|
alternateClassName: ['Ext.form.TextField', 'Ext.form.Text'],
|
|
|
|
/**
|
|
* @cfg {String} vtypeText
|
|
* A custom error message to display in place of the default message provided for the **`{@link #vtype}`** currently
|
|
* set for this field. **Note**: only applies if **`{@link #vtype}`** is set, else ignored.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {RegExp} stripCharsRe
|
|
* A JavaScript RegExp object used to strip unwanted content from the value
|
|
* during input. If `stripCharsRe` is specified,
|
|
* every *character sequence* matching `stripCharsRe` will be removed.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} size
|
|
* An initial value for the 'size' attribute on the text input element. This is only used if the field has no
|
|
* configured {@link #width} and is not given a width by its container's layout. Defaults to 20.
|
|
*/
|
|
size: 20,
|
|
|
|
/**
|
|
* @cfg {Boolean} [grow=false]
|
|
* true if this field should automatically grow and shrink to its content
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} growMin
|
|
* The minimum width to allow when `{@link #grow} = true`
|
|
*/
|
|
growMin : 30,
|
|
|
|
/**
|
|
* @cfg {Number} growMax
|
|
* The maximum width to allow when `{@link #grow} = true`
|
|
*/
|
|
growMax : 800,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} growAppend
|
|
* A string that will be appended to the field's current value for the purposes of calculating the target field
|
|
* size. Only used when the {@link #grow} config is true. Defaults to a single capital "W" (the widest character in
|
|
* common fonts) to leave enough space for the next typed character and avoid the field value shifting before the
|
|
* width is adjusted.
|
|
*/
|
|
growAppend: 'W',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} vtype
|
|
* A validation type name as defined in {@link Ext.form.field.VTypes}
|
|
*/
|
|
|
|
/**
|
|
* @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes (character being
|
|
* typed) that do not match.
|
|
* Note: It does not filter characters already in the input.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [disableKeyFilter=false]
|
|
* Specify true to disable input keystroke filtering
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowBlank=true]
|
|
* Specify false to validate that the value's length must be > 0. If `true`, then a blank value is **always** taken to be valid regardless of any {@link #vtype}
|
|
* validation that may be applied.
|
|
*
|
|
* If {@link #vtype} validation must still be applied to blank values, configure {@link #validateBlank} as `true`;
|
|
*/
|
|
allowBlank : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [validateBlank=false]
|
|
* Specify as `true` to modify the behaviour of {@link #allowBlank} so that blank values are not passed as valid, but are subject to any configure {@link #vtype} validation.
|
|
*/
|
|
validateBlank: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} allowOnlyWhitespace
|
|
* Specify false to automatically trim the value before validating
|
|
* the whether the value is blank. Setting this to false automatically
|
|
* sets {@link #allowBlank} to false.
|
|
*/
|
|
allowOnlyWhitespace: true,
|
|
|
|
/**
|
|
* @cfg {Number} minLength
|
|
* Minimum input field length required
|
|
*/
|
|
minLength : 0,
|
|
|
|
/**
|
|
* @cfg {Number} maxLength
|
|
* Maximum input field length allowed by validation. This behavior is intended to
|
|
* provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back
|
|
* tracking. To restrict the maximum number of characters that can be entered into the field use the
|
|
* **{@link Ext.form.field.Text#enforceMaxLength enforceMaxLength}** option.
|
|
*
|
|
* Defaults to Number.MAX_VALUE.
|
|
*/
|
|
maxLength : Number.MAX_VALUE,
|
|
|
|
/**
|
|
* @cfg {Boolean} enforceMaxLength
|
|
* True to set the maxLength property on the underlying input field. Defaults to false
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} minLengthText
|
|
* Error text to display if the **{@link #minLength minimum length}** validation fails.
|
|
*/
|
|
minLengthText : 'The minimum length for this field is {0}',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} maxLengthText
|
|
* Error text to display if the **{@link #maxLength maximum length}** validation fails
|
|
*/
|
|
maxLengthText : 'The maximum length for this field is {0}',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} [selectOnFocus=false]
|
|
* true to automatically select any existing field text when the field receives input focus
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} blankText
|
|
* The error text to display if the **{@link #allowBlank}** validation fails
|
|
*/
|
|
blankText : 'This field is required',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Function} validator
|
|
* A custom validation function to be called during field validation ({@link #getErrors}).
|
|
* If specified, this function will be called first, allowing the developer to override the default validation
|
|
* process.
|
|
*
|
|
* This function will be passed the following parameters:
|
|
*
|
|
* @cfg {Object} validator.value The current field value
|
|
* @cfg {Boolean/String} validator.return
|
|
*
|
|
* - True if the value is valid
|
|
* - An error message if the value is invalid
|
|
*/
|
|
|
|
/**
|
|
* @cfg {RegExp} regex
|
|
* A JavaScript RegExp object to be tested against the field value during validation.
|
|
* If the test fails, the field will be marked invalid using
|
|
* either **{@link #regexText}** or **{@link #invalidText}**.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} regexText
|
|
* The error text to display if **{@link #regex}** is used and the test fails during validation
|
|
*/
|
|
regexText : '',
|
|
|
|
/**
|
|
* @cfg {String} emptyText
|
|
* The default text to place into an empty field.
|
|
*
|
|
* Note that normally this value will be submitted to the server if this field is enabled; to prevent this you can
|
|
* set the {@link Ext.form.action.Action#submitEmptyText submitEmptyText} option of {@link Ext.form.Basic#submit} to
|
|
* false.
|
|
*
|
|
* Also note that if you use {@link #inputType inputType}:'file', {@link #emptyText} is not supported and should be
|
|
* avoided.
|
|
*
|
|
* Note that for browsers that support it, setting this property will use the HTML 5 placeholder attribute, and for
|
|
* older browsers that don't support the HTML 5 placeholder attribute the value will be placed directly into the input
|
|
* element itself as the raw value. This means that older browsers will obfuscate the {@link #emptyText} value for
|
|
* password input fields.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [emptyCls='x-form-empty-field']
|
|
* The CSS class to apply to an empty field to style the **{@link #emptyText}**.
|
|
* This class is automatically added and removed as needed depending on the current field value.
|
|
*/
|
|
emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
|
|
|
|
/**
|
|
* @cfg {String} [requiredCls='x-form-required-field']
|
|
* The CSS class to apply to a required field, i.e. a field where **{@link #allowBlank}** is false.
|
|
*/
|
|
requiredCls : Ext.baseCSSPrefix + 'form-required-field',
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableKeyEvents=false]
|
|
* true to enable the proxying of key events for the HTML input field
|
|
*/
|
|
|
|
componentLayout: 'textfield',
|
|
|
|
// private
|
|
valueContainsPlaceholder : false,
|
|
|
|
|
|
initComponent: function () {
|
|
var me = this;
|
|
|
|
if (me.allowOnlyWhitespace === false) {
|
|
me.allowBlank = false;
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event autosize
|
|
* Fires when the **{@link #autoSize}** function is triggered and the field is resized according to the
|
|
* {@link #grow}/{@link #growMin}/{@link #growMax} configs as a result. This event provides a hook for the
|
|
* developer to apply additional logic at runtime to resize the field if needed.
|
|
* @param {Ext.form.field.Text} this This text field
|
|
* @param {Number} width The new field width
|
|
*/
|
|
'autosize',
|
|
|
|
/**
|
|
* @event keydown
|
|
* Keydown input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
|
|
* @param {Ext.form.field.Text} this This text field
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'keydown',
|
|
/**
|
|
* @event keyup
|
|
* Keyup input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
|
|
* @param {Ext.form.field.Text} this This text field
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'keyup',
|
|
/**
|
|
* @event keypress
|
|
* Keypress input field event. This event only fires if **{@link #enableKeyEvents}** is set to true.
|
|
* @param {Ext.form.field.Text} this This text field
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'keypress'
|
|
);
|
|
me.addStateEvents('change');
|
|
me.setGrowSizePolicy();
|
|
},
|
|
|
|
// private
|
|
setGrowSizePolicy: function(){
|
|
if (this.grow) {
|
|
this.shrinkWrap |= 1; // width must shrinkWrap
|
|
}
|
|
},
|
|
|
|
// private
|
|
initEvents : function(){
|
|
var me = this,
|
|
el = me.inputEl;
|
|
|
|
me.callParent();
|
|
if(me.selectOnFocus || me.emptyText){
|
|
me.mon(el, 'mousedown', me.onMouseDown, me);
|
|
}
|
|
if(me.maskRe || (me.vtype && me.disableKeyFilter !== true && (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
|
|
me.mon(el, 'keypress', me.filterKeys, me);
|
|
}
|
|
|
|
if (me.enableKeyEvents) {
|
|
me.mon(el, {
|
|
scope: me,
|
|
keyup: me.onKeyUp,
|
|
keydown: me.onKeyDown,
|
|
keypress: me.onKeyPress
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Override. Treat undefined and null values as equal to an empty string value.
|
|
*/
|
|
isEqual: function(value1, value2) {
|
|
return this.isEqualAsString(value1, value2);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* If grow=true, invoke the autoSize method when the field's value is changed.
|
|
*/
|
|
onChange: function(newVal, oldVal) {
|
|
this.callParent(arguments);
|
|
this.autoSize();
|
|
},
|
|
|
|
getSubTplData: function() {
|
|
var me = this,
|
|
value = me.getRawValue(),
|
|
isEmpty = me.emptyText && value.length < 1,
|
|
maxLength = me.maxLength,
|
|
placeholder;
|
|
|
|
// We can't just dump the value here, since MAX_VALUE ends up
|
|
// being something like 1.xxxxe+300, which gets interpreted as 1
|
|
// in the markup
|
|
if (me.enforceMaxLength) {
|
|
if (maxLength === Number.MAX_VALUE) {
|
|
maxLength = undefined;
|
|
}
|
|
} else {
|
|
maxLength = undefined;
|
|
}
|
|
|
|
if (isEmpty) {
|
|
if (Ext.supports.Placeholder) {
|
|
placeholder = me.emptyText;
|
|
} else {
|
|
value = me.emptyText;
|
|
me.valueContainsPlaceholder = true;
|
|
}
|
|
}
|
|
|
|
return Ext.apply(me.callParent(), {
|
|
maxLength : maxLength,
|
|
readOnly : me.readOnly,
|
|
placeholder : placeholder,
|
|
value : value,
|
|
fieldCls : me.fieldCls + ((isEmpty && (placeholder || value)) ? ' ' + me.emptyCls : '') + (me.allowBlank ? '' : ' ' + me.requiredCls)
|
|
});
|
|
},
|
|
|
|
afterRender: function(){
|
|
this.autoSize();
|
|
this.callParent();
|
|
},
|
|
|
|
onMouseDown: function(e){
|
|
var me = this;
|
|
if(!me.hasFocus){
|
|
me.mon(me.inputEl, 'mouseup', Ext.emptyFn, me, { single: true, preventDefault: true });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Performs any necessary manipulation of a raw String value to prepare it for conversion and/or
|
|
* {@link #validate validation}. For text fields this applies the configured {@link #stripCharsRe}
|
|
* to the raw value.
|
|
* @param {String} value The unprocessed string value
|
|
* @return {String} The processed string value
|
|
*/
|
|
processRawValue: function(value) {
|
|
var me = this,
|
|
stripRe = me.stripCharsRe,
|
|
newValue;
|
|
|
|
if (stripRe) {
|
|
newValue = value.replace(stripRe, '');
|
|
if (newValue !== value) {
|
|
me.setRawValue(newValue);
|
|
value = newValue;
|
|
}
|
|
}
|
|
return value;
|
|
},
|
|
|
|
//private
|
|
onDisable: function(){
|
|
this.callParent();
|
|
if (Ext.isIE) {
|
|
this.inputEl.dom.unselectable = 'on';
|
|
}
|
|
},
|
|
|
|
//private
|
|
onEnable: function(){
|
|
this.callParent();
|
|
if (Ext.isIE) {
|
|
this.inputEl.dom.unselectable = '';
|
|
}
|
|
},
|
|
|
|
onKeyDown: function(e) {
|
|
this.fireEvent('keydown', this, e);
|
|
},
|
|
|
|
onKeyUp: function(e) {
|
|
this.fireEvent('keyup', this, e);
|
|
},
|
|
|
|
onKeyPress: function(e) {
|
|
this.fireEvent('keypress', this, e);
|
|
},
|
|
|
|
/**
|
|
* Resets the current field value to the originally-loaded value and clears any validation messages.
|
|
* Also adds **{@link #emptyText}** and **{@link #emptyCls}** if the original value was blank.
|
|
*/
|
|
reset : function(){
|
|
this.callParent();
|
|
this.applyEmptyText();
|
|
},
|
|
|
|
applyEmptyText : function(){
|
|
var me = this,
|
|
emptyText = me.emptyText,
|
|
isEmpty;
|
|
|
|
if (me.rendered && emptyText) {
|
|
isEmpty = me.getRawValue().length < 1 && !me.hasFocus;
|
|
|
|
if (Ext.supports.Placeholder) {
|
|
me.inputEl.dom.placeholder = emptyText;
|
|
} else if (isEmpty) {
|
|
me.setRawValue(emptyText);
|
|
me.valueContainsPlaceholder = true;
|
|
}
|
|
|
|
//all browsers need this because of a styling issue with chrome + placeholders.
|
|
//the text isnt vertically aligned when empty (and using the placeholder)
|
|
if (isEmpty) {
|
|
me.inputEl.addCls(me.emptyCls);
|
|
}
|
|
|
|
me.autoSize();
|
|
}
|
|
},
|
|
|
|
afterFirstLayout: function() {
|
|
this.callParent();
|
|
if (Ext.isIE && this.disabled) {
|
|
var el = this.inputEl;
|
|
if (el) {
|
|
el.dom.unselectable = 'on';
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
beforeFocus : function(){
|
|
var me = this,
|
|
inputEl = me.inputEl,
|
|
emptyText = me.emptyText,
|
|
isEmpty;
|
|
|
|
me.callParent(arguments);
|
|
if ((emptyText && !Ext.supports.Placeholder) && (inputEl.dom.value === me.emptyText && me.valueContainsPlaceholder)) {
|
|
me.setRawValue('');
|
|
isEmpty = true;
|
|
inputEl.removeCls(me.emptyCls);
|
|
me.valueContainsPlaceholder = false;
|
|
} else if (Ext.supports.Placeholder) {
|
|
me.inputEl.removeCls(me.emptyCls);
|
|
}
|
|
if (me.selectOnFocus || isEmpty) {
|
|
// see: http://code.google.com/p/chromium/issues/detail?id=4505
|
|
if (Ext.isWebKit) {
|
|
if (!me.inputFocusTask) {
|
|
me.inputFocusTask = new Ext.util.DelayedTask(me.focusInput, me);
|
|
}
|
|
me.inputFocusTask.delay(1);
|
|
} else {
|
|
inputEl.dom.select();
|
|
}
|
|
}
|
|
},
|
|
|
|
focusInput: function(){
|
|
var input = this.inputEl;
|
|
if (input) {
|
|
input = input.dom;
|
|
if (input) {
|
|
input.select();
|
|
}
|
|
}
|
|
},
|
|
|
|
onFocus: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (me.emptyText) {
|
|
me.autoSize();
|
|
}
|
|
},
|
|
|
|
// private
|
|
postBlur : function(){
|
|
this.callParent(arguments);
|
|
this.applyEmptyText();
|
|
},
|
|
|
|
// private
|
|
filterKeys : function(e){
|
|
/*
|
|
* On European keyboards, the right alt key, Alt Gr, is used to type certain special characters.
|
|
* JS detects a keypress of this as ctrlKey & altKey. As such, we check that alt isn't pressed
|
|
* so we can still process these special characters.
|
|
*/
|
|
if (e.ctrlKey && !e.altKey) {
|
|
return;
|
|
}
|
|
var key = e.getKey(),
|
|
charCode = String.fromCharCode(e.getCharCode());
|
|
|
|
if((Ext.isGecko || Ext.isOpera) && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))){
|
|
return;
|
|
}
|
|
|
|
if((!Ext.isGecko && !Ext.isOpera) && e.isSpecialKey() && !charCode){
|
|
return;
|
|
}
|
|
if(!this.maskRe.test(charCode)){
|
|
e.stopEvent();
|
|
}
|
|
},
|
|
|
|
getState: function() {
|
|
return this.addPropertyToState(this.callParent(), 'value');
|
|
},
|
|
|
|
applyState: function(state) {
|
|
this.callParent(arguments);
|
|
if(state.hasOwnProperty('value')) {
|
|
this.setValue(state.value);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the raw String value of the field, without performing any normalization, conversion, or validation. Gets
|
|
* the current value of the input element if the field has been rendered, ignoring the value if it is the
|
|
* {@link #emptyText}. To get a normalized and converted value see {@link #getValue}.
|
|
* @return {String} The raw String value of the field
|
|
*/
|
|
getRawValue: function() {
|
|
var me = this,
|
|
v = me.callParent();
|
|
if (v === me.emptyText && me.valueContainsPlaceholder) {
|
|
v = '';
|
|
}
|
|
return v;
|
|
},
|
|
|
|
/**
|
|
* Sets a data value into the field and runs the change detection and validation. Also applies any configured
|
|
* {@link #emptyText} for text fields. To set the value directly without these inspections see {@link #setRawValue}.
|
|
* @param {Object} value The value to set
|
|
* @return {Ext.form.field.Text} this
|
|
*/
|
|
setValue: function(value) {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
|
|
if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
|
|
inputEl.removeCls(me.emptyCls);
|
|
me.valueContainsPlaceholder = false;
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.applyEmptyText();
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Validates a value according to the field's validation rules and returns an array of errors
|
|
* for any failing validations. Validation rules are processed in the following order:
|
|
*
|
|
* 1. **Field specific validator**
|
|
*
|
|
* A validator offers a way to customize and reuse a validation specification.
|
|
* If a field is configured with a `{@link #validator}`
|
|
* function, it will be passed the current field value. The `{@link #validator}`
|
|
* function is expected to return either:
|
|
*
|
|
* - Boolean `true` if the value is valid (validation continues).
|
|
* - a String to represent the invalid message if invalid (validation halts).
|
|
*
|
|
* 2. **Basic Validation**
|
|
*
|
|
* If the `{@link #validator}` has not halted validation,
|
|
* basic validation proceeds as follows:
|
|
*
|
|
* - `{@link #allowBlank}` : (Invalid message = `{@link #blankText}`)
|
|
*
|
|
* Depending on the configuration of `{@link #allowBlank}`, a
|
|
* blank field will cause validation to halt at this step and return
|
|
* Boolean true or false accordingly.
|
|
*
|
|
* - `{@link #minLength}` : (Invalid message = `{@link #minLengthText}`)
|
|
*
|
|
* If the passed value does not satisfy the `{@link #minLength}`
|
|
* specified, validation halts.
|
|
*
|
|
* - `{@link #maxLength}` : (Invalid message = `{@link #maxLengthText}`)
|
|
*
|
|
* If the passed value does not satisfy the `{@link #maxLength}`
|
|
* specified, validation halts.
|
|
*
|
|
* 3. **Preconfigured Validation Types (VTypes)**
|
|
*
|
|
* If none of the prior validation steps halts validation, a field
|
|
* configured with a `{@link #vtype}` will utilize the
|
|
* corresponding {@link Ext.form.field.VTypes VTypes} validation function.
|
|
* If invalid, either the field's `{@link #vtypeText}` or
|
|
* the VTypes vtype Text property will be used for the invalid message.
|
|
* Keystrokes on the field will be filtered according to the VTypes
|
|
* vtype Mask property.
|
|
*
|
|
* 4. **Field specific regex test**
|
|
*
|
|
* If none of the prior validation steps halts validation, a field's
|
|
* configured `{@link #regex}` test will be processed.
|
|
* The invalid message for this test is configured with `{@link #regexText}`
|
|
*
|
|
* @param {Object} value The value to validate. The processed raw value will be used if nothing is passed.
|
|
* @return {String[]} Array of any validation errors
|
|
*/
|
|
getErrors: function(value) {
|
|
var me = this,
|
|
errors = me.callParent(arguments),
|
|
validator = me.validator,
|
|
vtype = me.vtype,
|
|
vtypes = Ext.form.field.VTypes,
|
|
regex = me.regex,
|
|
format = Ext.String.format,
|
|
msg, trimmed, isBlank;
|
|
|
|
value = value || me.processRawValue(me.getRawValue());
|
|
|
|
if (Ext.isFunction(validator)) {
|
|
msg = validator.call(me, value);
|
|
if (msg !== true) {
|
|
errors.push(msg);
|
|
}
|
|
}
|
|
|
|
trimmed = me.allowOnlyWhitespace ? value : Ext.String.trim(value);
|
|
|
|
if (trimmed.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {
|
|
if (!me.allowBlank) {
|
|
errors.push(me.blankText);
|
|
}
|
|
// If we are not configured to validate blank values, there cannot be any additional errors
|
|
if (!me.validateBlank) {
|
|
return errors;
|
|
}
|
|
isBlank = true;
|
|
}
|
|
|
|
// If a blank value has been allowed through, then exempt it dfrom the minLength check.
|
|
// It must be allowed to hit the vtype validation.
|
|
if (!isBlank && value.length < me.minLength) {
|
|
errors.push(format(me.minLengthText, me.minLength));
|
|
}
|
|
|
|
if (value.length > me.maxLength) {
|
|
errors.push(format(me.maxLengthText, me.maxLength));
|
|
}
|
|
|
|
if (vtype) {
|
|
if (!vtypes[vtype](value, me)) {
|
|
errors.push(me.vtypeText || vtypes[vtype +'Text']);
|
|
}
|
|
}
|
|
|
|
if (regex && !regex.test(value)) {
|
|
errors.push(me.regexText || me.invalidText);
|
|
}
|
|
|
|
return errors;
|
|
},
|
|
|
|
/**
|
|
* Selects text in this field
|
|
* @param {Number} [start=0] The index where the selection should start
|
|
* @param {Number} [end] The index where the selection should end (defaults to the text length)
|
|
*/
|
|
selectText : function(start, end){
|
|
var me = this,
|
|
v = me.getRawValue(),
|
|
doFocus = true,
|
|
el = me.inputEl.dom,
|
|
undef,
|
|
range;
|
|
|
|
if (v.length > 0) {
|
|
start = start === undef ? 0 : start;
|
|
end = end === undef ? v.length : end;
|
|
if (el.setSelectionRange) {
|
|
el.setSelectionRange(start, end);
|
|
}
|
|
else if(el.createTextRange) {
|
|
range = el.createTextRange();
|
|
range.moveStart('character', start);
|
|
range.moveEnd('character', end - v.length);
|
|
range.select();
|
|
}
|
|
doFocus = Ext.isGecko || Ext.isOpera;
|
|
}
|
|
if (doFocus) {
|
|
me.focus();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This
|
|
* only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the width changes.
|
|
*/
|
|
autoSize: function() {
|
|
var me = this;
|
|
if (me.grow && me.rendered) {
|
|
me.autoSizing = true;
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
afterComponentLayout: function() {
|
|
var me = this,
|
|
width;
|
|
|
|
me.callParent(arguments);
|
|
if (me.autoSizing) {
|
|
width = me.inputEl.getWidth();
|
|
if (width !== me.lastInputWidth) {
|
|
me.fireEvent('autosize', me, width);
|
|
me.lastInputWidth = width;
|
|
delete me.autoSizing;
|
|
}
|
|
}
|
|
},
|
|
|
|
onDestroy: function(){
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
if (me.inputFocusTask) {
|
|
me.inputFocusTask.cancel();
|
|
me.inputFocusTask = null;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Layout class for {@link Ext.form.field.TextArea} fields. Handles sizing the textarea field.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.TextArea', {
|
|
extend: Ext.layout.component.field.Text ,
|
|
alias: 'layout.textareafield',
|
|
|
|
type: 'textareafield',
|
|
|
|
canGrowWidth: false,
|
|
|
|
naturalSizingProp: 'cols',
|
|
|
|
beginLayout: function(ownerContext){
|
|
this.callParent(arguments);
|
|
ownerContext.target.inputEl.setStyle('height', '');
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
height = me.callParent(arguments),
|
|
inputContext, inputEl, value, max, curWidth, calcHeight;
|
|
|
|
if (owner.grow && !ownerContext.state.growHandled) {
|
|
inputContext = ownerContext.inputContext;
|
|
inputEl = owner.inputEl;
|
|
curWidth = inputEl.getWidth(true); //subtract border/padding to get the available width for the text
|
|
|
|
// Get and normalize the field value for measurement
|
|
value = Ext.util.Format.htmlEncode(inputEl.dom.value) || ' ';
|
|
value += owner.growAppend;
|
|
|
|
// Translate newlines to <br> tags
|
|
value = value.replace(/\n/g, '<br/>');
|
|
|
|
// Find the height that contains the whole text value
|
|
calcHeight = Ext.util.TextMetrics.measure(inputEl, value, curWidth).height +
|
|
inputContext.getBorderInfo().height + inputContext.getPaddingInfo().height;
|
|
|
|
// Constrain
|
|
calcHeight = Ext.Number.constrain(calcHeight, owner.growMin, owner.growMax);
|
|
inputContext.setHeight(calcHeight);
|
|
ownerContext.state.growHandled = true;
|
|
|
|
// Now that we've set the inputContext, we need to recalculate the width
|
|
inputContext.domBlock(me, 'height');
|
|
height = NaN;
|
|
}
|
|
return height;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Robert Dougan <rob@sencha.com>
|
|
*
|
|
* This class creates a multiline text field, which can be used as a direct replacement for traditional
|
|
* textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
|
|
* fit its content.
|
|
*
|
|
* All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.FormPanel', {
|
|
* title : 'Sample TextArea',
|
|
* width : 400,
|
|
* bodyPadding: 10,
|
|
* renderTo : Ext.getBody(),
|
|
* items: [{
|
|
* xtype : 'textareafield',
|
|
* grow : true,
|
|
* name : 'message',
|
|
* fieldLabel: 'Message',
|
|
* anchor : '100%'
|
|
* }]
|
|
* });
|
|
*
|
|
* Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}.
|
|
* These allow you to set the minimum and maximum grow heights for the textarea.
|
|
*
|
|
* **NOTE:** In some browsers, carriage returns ('\r', not to be confused with new lines)
|
|
* will be automatically stripped out the value is set to the textarea. Since we cannot
|
|
* use any reasonable method to attempt to re-insert these, they will automatically be
|
|
* stripped out to ensure the behaviour is consistent across browser.
|
|
*/
|
|
Ext.define('Ext.form.field.TextArea', {
|
|
extend: Ext.form.field.Text ,
|
|
alias: ['widget.textareafield', 'widget.textarea'],
|
|
alternateClassName: 'Ext.form.TextArea',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// This template includes a `\n` after `<textarea>` opening tag so that an
|
|
// initial value starting with `\n` does not lose its first character when
|
|
// the markup is parsed. Both textareas below have the same value:
|
|
//
|
|
// <textarea>initial value</textarea>
|
|
//
|
|
// <textarea>
|
|
// initial value
|
|
// </textarea>
|
|
//
|
|
fieldSubTpl: [
|
|
'<textarea id="{id}" {inputAttrTpl}',
|
|
'<tpl if="name"> name="{name}"</tpl>',
|
|
'<tpl if="rows"> rows="{rows}" </tpl>',
|
|
'<tpl if="cols"> cols="{cols}" </tpl>',
|
|
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
|
|
'<tpl if="size"> size="{size}"</tpl>',
|
|
'<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
|
|
'<tpl if="readOnly"> readonly="readonly"</tpl>',
|
|
'<tpl if="disabled"> disabled="disabled"</tpl>',
|
|
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
|
|
' class="{fieldCls} {typeCls} {inputCls}" ',
|
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
|
' autocomplete="off">\n',
|
|
'<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
|
|
'</textarea>',
|
|
{
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
/**
|
|
* @cfg {Number} growMin
|
|
* The minimum height to allow when {@link #grow}=true
|
|
*/
|
|
growMin: 60,
|
|
|
|
/**
|
|
* @cfg {Number} growMax
|
|
* The maximum height to allow when {@link #grow}=true
|
|
*/
|
|
growMax: 1000,
|
|
|
|
/**
|
|
* @cfg {String} growAppend
|
|
* A string that will be appended to the field's current value for the purposes of calculating the target field
|
|
* size. Only used when the {@link #grow} config is true. Defaults to a newline for TextArea to ensure there is
|
|
* always a space below the current line.
|
|
*/
|
|
growAppend: '\n-',
|
|
|
|
/**
|
|
* @cfg {Number} cols
|
|
* An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
|
|
* configured {@link #width} and is not given a width by its container's layout.
|
|
*/
|
|
cols: 20,
|
|
|
|
/**
|
|
* @cfg {Number} rows
|
|
* An initial value for the 'rows' attribute on the textarea element. This is only used if the component has no
|
|
* configured {@link #height} and is not given a height by its container's layout. Defaults to 4.
|
|
*/
|
|
rows: 4,
|
|
|
|
/**
|
|
* @cfg {Boolean} enterIsSpecial
|
|
* True if you want the ENTER key to be classed as a special key and the {@link #specialkey} event to be fired
|
|
* when ENTER is pressed.
|
|
*/
|
|
enterIsSpecial: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} preventScrollbars
|
|
* true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
|
|
* relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
|
|
*/
|
|
preventScrollbars: false,
|
|
|
|
// private
|
|
componentLayout: 'textareafield',
|
|
|
|
setGrowSizePolicy: Ext.emptyFn,
|
|
|
|
returnRe: /\r/g,
|
|
|
|
inputCls: Ext.baseCSSPrefix + 'form-textarea',
|
|
|
|
// private
|
|
getSubTplData: function() {
|
|
var me = this,
|
|
fieldStyle = me.getFieldStyle(),
|
|
ret = me.callParent();
|
|
|
|
if (me.grow) {
|
|
if (me.preventScrollbars) {
|
|
ret.fieldStyle = (fieldStyle||'') + ';overflow:hidden;height:' + me.growMin + 'px';
|
|
}
|
|
}
|
|
|
|
Ext.applyIf(ret, {
|
|
cols: me.cols,
|
|
rows: me.rows
|
|
});
|
|
|
|
return ret;
|
|
},
|
|
|
|
afterRender: function () {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.needsMaxCheck = me.enforceMaxLength && me.maxLength !== Number.MAX_VALUE && !Ext.supports.TextAreaMaxLength;
|
|
if (me.needsMaxCheck) {
|
|
me.inputEl.on('paste', me.onPaste, me);
|
|
}
|
|
},
|
|
|
|
// The following overrides deal with an issue whereby some browsers
|
|
// will strip carriage returns from the textarea input, while others
|
|
// will not. Since there's no way to be sure where to insert returns,
|
|
// the best solution is to strip them out in all cases to ensure that
|
|
// the behaviour is consistent in a cross browser fashion. As such,
|
|
// we override in all cases when setting the value to control this.
|
|
transformRawValue: function(value){
|
|
return this.stripReturns(value);
|
|
},
|
|
|
|
transformOriginalValue: function(value){
|
|
return this.stripReturns(value);
|
|
},
|
|
|
|
getValue: function(){
|
|
return this.stripReturns(this.callParent());
|
|
},
|
|
|
|
valueToRaw: function(value){
|
|
value = this.stripReturns(value);
|
|
return this.callParent([value]);
|
|
},
|
|
|
|
stripReturns: function(value){
|
|
if (value && typeof value === 'string') {
|
|
value = value.replace(this.returnRe, '');
|
|
}
|
|
return value;
|
|
},
|
|
|
|
onPaste: function(e){
|
|
var me = this;
|
|
if (!me.pasteTask) {
|
|
me.pasteTask = new Ext.util.DelayedTask(me.pasteCheck, me);
|
|
}
|
|
// since we can't get the paste data, we'll give the area a chance to populate
|
|
me.pasteTask.delay(1);
|
|
},
|
|
|
|
pasteCheck: function(){
|
|
var me = this,
|
|
value = me.getValue(),
|
|
max = me.maxLength;
|
|
|
|
if (value.length > max) {
|
|
value = value.substr(0, max);
|
|
me.setValue(value);
|
|
}
|
|
},
|
|
|
|
// private
|
|
fireKey: function(e) {
|
|
var me = this,
|
|
key = e.getKey(),
|
|
value;
|
|
|
|
if (e.isSpecialKey() && (me.enterIsSpecial || (key !== e.ENTER || e.hasModifier()))) {
|
|
me.fireEvent('specialkey', me, e);
|
|
}
|
|
|
|
if (me.needsMaxCheck && key !== e.BACKSPACE && key !== e.DELETE && !e.isNavKeyPress() && !me.isCutCopyPasteSelectAll(e, key)) {
|
|
value = me.getValue();
|
|
if (value.length >= me.maxLength) {
|
|
e.stopEvent();
|
|
}
|
|
}
|
|
},
|
|
|
|
isCutCopyPasteSelectAll: function(e, key) {
|
|
if (e.ctrlKey) {
|
|
return key === e.A || key === e.C || key === e.V || key === e.X;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
|
|
* only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
|
|
*/
|
|
autoSize: function() {
|
|
var me = this,
|
|
height;
|
|
|
|
if (me.grow && me.rendered) {
|
|
me.updateLayout();
|
|
height = me.inputEl.getHeight();
|
|
if (height !== me.lastInputHeight) {
|
|
/**
|
|
* @event autosize
|
|
* Fires when the {@link #autoSize} function is triggered and the field is resized according to
|
|
* the grow/growMin/growMax configs as a result. This event provides a hook for the developer
|
|
* to apply additional logic at runtime to resize the field if needed.
|
|
* @param {Ext.form.field.Text} this
|
|
* @param {Number} height
|
|
*/
|
|
me.fireEvent('autosize', me, height);
|
|
me.lastInputHeight = height;
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
initAria: function() {
|
|
this.callParent(arguments);
|
|
this.getActionEl().dom.setAttribute('aria-multiline', true);
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
var task = this.pasteTask;
|
|
if (task) {
|
|
task.cancel();
|
|
this.pasteTask = null;
|
|
}
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A display-only text field which is not validated and not submitted. This is useful for when you want to display a
|
|
* value from a form's {@link Ext.form.Basic#load loaded data} but do not want to allow the user to edit or submit that
|
|
* value. The value can be optionally {@link #htmlEncode HTML encoded} if it contains HTML markup that you do not want
|
|
* to be rendered.
|
|
*
|
|
* If you have more complex content, or need to include components within the displayed content, also consider using a
|
|
* {@link Ext.form.FieldContainer} instead.
|
|
*
|
|
* Example:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 175,
|
|
* height: 120,
|
|
* bodyPadding: 10,
|
|
* title: 'Final Score',
|
|
* items: [{
|
|
* xtype: 'displayfield',
|
|
* fieldLabel: 'Home',
|
|
* name: 'home_score',
|
|
* value: '10'
|
|
* }, {
|
|
* xtype: 'displayfield',
|
|
* fieldLabel: 'Visitor',
|
|
* name: 'visitor_score',
|
|
* value: '11'
|
|
* }],
|
|
* buttons: [{
|
|
* text: 'Update'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Display', {
|
|
extend: Ext.form.field.Base ,
|
|
alias: 'widget.displayfield',
|
|
|
|
alternateClassName: ['Ext.form.DisplayField', 'Ext.form.Display'],
|
|
fieldSubTpl: [
|
|
'<div id="{id}" role="input" ',
|
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
|
' class="{fieldCls}">{value}</div>',
|
|
{
|
|
compiled: true,
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
/**
|
|
* @cfg {Boolean} readOnly
|
|
* @private
|
|
*/
|
|
readOnly: true,
|
|
|
|
/**
|
|
* @cfg {String} [fieldCls="x-form-display-field"]
|
|
* The default CSS class for the field.
|
|
*/
|
|
fieldCls: Ext.baseCSSPrefix + 'form-display-field',
|
|
|
|
fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body',
|
|
|
|
/**
|
|
* @cfg {Boolean} htmlEncode
|
|
* True to escape HTML in text when rendering it.
|
|
*/
|
|
htmlEncode: false,
|
|
|
|
/**
|
|
* @cfg {Function} renderer
|
|
* A function to transform the raw value for display in the field. The function will receive 2 arguments, the raw value
|
|
* and the {@link Ext.form.field.Display} object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope to execute the {@link #renderer} function. Defaults to this.
|
|
*/
|
|
|
|
noWrap: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} validateOnChange
|
|
* @private
|
|
*/
|
|
validateOnChange: false,
|
|
|
|
initEvents: Ext.emptyFn,
|
|
|
|
submitValue: false,
|
|
|
|
isDirty: function(){
|
|
return false;
|
|
},
|
|
|
|
isValid: function() {
|
|
return true;
|
|
},
|
|
|
|
validate: function() {
|
|
return true;
|
|
},
|
|
|
|
getRawValue: function() {
|
|
return this.rawValue;
|
|
},
|
|
|
|
setRawValue: function(value) {
|
|
var me = this;
|
|
|
|
value = Ext.value(value, '');
|
|
me.rawValue = value;
|
|
if (me.rendered) {
|
|
me.inputEl.dom.innerHTML = me.getDisplayValue();
|
|
me.updateLayout();
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Format the value to display.
|
|
*/
|
|
getDisplayValue: function() {
|
|
var me = this,
|
|
value = this.getRawValue(),
|
|
display;
|
|
if (me.renderer) {
|
|
display = me.renderer.call(me.scope || me, value, me);
|
|
} else {
|
|
display = me.htmlEncode ? Ext.util.Format.htmlEncode(value) : value;
|
|
}
|
|
return display;
|
|
},
|
|
|
|
getSubTplData: function() {
|
|
var ret = this.callParent(arguments);
|
|
|
|
ret.value = this.getDisplayValue();
|
|
|
|
return ret;
|
|
}
|
|
|
|
/**
|
|
* @cfg {String} inputType
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} disabled
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Number} checkChangeEvents
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Number} checkChangeBuffer
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* This is a layout that enables anchoring of contained elements relative to the container's dimensions.
|
|
* If the container is resized, all anchored items are automatically rerendered according to their
|
|
* `{@link #anchor}` rules.
|
|
*
|
|
* This class is intended to be extended or created via the {@link Ext.container.AbstractContainer#layout layout}: 'anchor'
|
|
* config, and should generally not need to be created directly via the new keyword.
|
|
*
|
|
* AnchorLayout does not have any direct config options (other than inherited ones). By default,
|
|
* AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
|
|
* container using the AnchorLayout can supply an anchoring-specific config property of `anchorSize`.
|
|
*
|
|
* If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
|
|
* anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
|
|
* logic if necessary.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Panel', {
|
|
* width: 500,
|
|
* height: 400,
|
|
* title: "AnchorLayout Panel",
|
|
* layout: 'anchor',
|
|
* renderTo: Ext.getBody(),
|
|
* items: [
|
|
* {
|
|
* xtype: 'panel',
|
|
* title: '75% Width and 20% Height',
|
|
* anchor: '75% 20%'
|
|
* },
|
|
* {
|
|
* xtype: 'panel',
|
|
* title: 'Offset -300 Width & -200 Height',
|
|
* anchor: '-300 -200'
|
|
* },
|
|
* {
|
|
* xtype: 'panel',
|
|
* title: 'Mixed Offset and Percent',
|
|
* anchor: '-250 20%'
|
|
* }
|
|
* ]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Anchor', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.anchor',
|
|
extend: Ext.layout.container.Auto ,
|
|
alternateClassName: 'Ext.layout.AnchorLayout',
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'anchor',
|
|
|
|
/**
|
|
* @cfg {String} anchor
|
|
*
|
|
* This configuation option is to be applied to **child `items`** of a container managed by
|
|
* this layout (ie. configured with `layout:'anchor'`).
|
|
*
|
|
* This value is what tells the layout how an item should be anchored to the container. `items`
|
|
* added to an AnchorLayout accept an anchoring-specific config property of **anchor** which is a string
|
|
* containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
|
|
* The following types of anchor values are supported:
|
|
*
|
|
* - **Percentage** : Any value between 1 and 100, expressed as a percentage.
|
|
*
|
|
* The first anchor is the percentage width that the item should take up within the container, and the
|
|
* second is the percentage height. For example:
|
|
*
|
|
* // two values specified
|
|
* anchor: '100% 50%' // render item complete width of the container and
|
|
* // 1/2 height of the container
|
|
* // one value specified
|
|
* anchor: '100%' // the width value; the height will default to auto
|
|
*
|
|
* - **Offsets** : Any positive or negative integer value.
|
|
*
|
|
* This is a raw adjustment where the first anchor is the offset from the right edge of the container,
|
|
* and the second is the offset from the bottom edge. For example:
|
|
*
|
|
* // two values specified
|
|
* anchor: '-50 -100' // render item the complete width of the container
|
|
* // minus 50 pixels and
|
|
* // the complete height minus 100 pixels.
|
|
* // one value specified
|
|
* anchor: '-50' // anchor value is assumed to be the right offset value
|
|
* // bottom offset will default to 0
|
|
*
|
|
* - **Sides** : Valid values are `right` (or `r`) and `bottom` (or `b`).
|
|
*
|
|
* Either the container must have a fixed size or an anchorSize config value defined at render time in
|
|
* order for these to have any effect.
|
|
*
|
|
* - **Mixed** :
|
|
*
|
|
* Anchor values can also be mixed as needed. For example, to render the width offset from the container
|
|
* right edge by 50 pixels and 75% of the container's height use:
|
|
*
|
|
* 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.
|
|
*/
|
|
defaultAnchor: '100%',
|
|
|
|
parseAnchorRE: /^(r|right|b|bottom)$/i,
|
|
|
|
manageOverflow: true,
|
|
|
|
beginLayoutCycle: function (ownerContext) {
|
|
var me = this,
|
|
dimensions = 0,
|
|
anchorSpec, childContext, childItems, i, length, target;
|
|
|
|
me.callParent(arguments);
|
|
|
|
childItems = ownerContext.childItems; // populated by callParent
|
|
length = childItems.length;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
anchorSpec = childContext.target.anchorSpec;
|
|
|
|
if (anchorSpec) {
|
|
if (childContext.widthModel.calculated && anchorSpec.right) {
|
|
dimensions |= 1;
|
|
}
|
|
if (childContext.heightModel.calculated && anchorSpec.bottom) {
|
|
dimensions |= 2;
|
|
}
|
|
|
|
if (dimensions == 3) { // if (both dimensions in play)
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
ownerContext.anchorDimensions = dimensions;
|
|
|
|
},
|
|
|
|
calculateItems: function (ownerContext, containerSize) {
|
|
var me = this,
|
|
childItems = ownerContext.childItems,
|
|
length = childItems.length,
|
|
gotHeight = containerSize.gotHeight,
|
|
gotWidth = containerSize.gotWidth,
|
|
ownerHeight = containerSize.height,
|
|
ownerWidth = containerSize.width,
|
|
knownDimensions = (gotWidth ? 1 : 0) | (gotHeight ? 2 : 0),
|
|
anchorDimensions = ownerContext.anchorDimensions,
|
|
anchorSpec, childContext, childMargins, height, i, width;
|
|
|
|
if (!anchorDimensions) {
|
|
return true;
|
|
}
|
|
|
|
for (i = 0; i < length; i++) {
|
|
childContext = childItems[i];
|
|
childMargins = childContext.getMarginInfo();
|
|
anchorSpec = childContext.target.anchorSpec;
|
|
|
|
// Check widthModel in case "defaults" has applied an anchor to a component
|
|
// that also has width (which must win). If we did not make this check in this
|
|
// way, we would attempt to calculate a width where it had been configured.
|
|
//
|
|
if (gotWidth && childContext.widthModel.calculated) {
|
|
width = anchorSpec.right(ownerWidth) - childMargins.width;
|
|
width = me.adjustWidthAnchor(width, childContext);
|
|
|
|
childContext.setWidth(width);
|
|
}
|
|
|
|
// Repeat for height
|
|
if (gotHeight && childContext.heightModel.calculated) {
|
|
height = anchorSpec.bottom(ownerHeight) - childMargins.height;
|
|
height = me.adjustHeightAnchor(height, childContext);
|
|
|
|
childContext.setHeight(height);
|
|
}
|
|
}
|
|
|
|
// If all required dimensions are known, we're done
|
|
return (knownDimensions & anchorDimensions) === anchorDimensions;
|
|
},
|
|
|
|
|
|
// private
|
|
anchorFactory: {
|
|
offset: function (delta) {
|
|
return function(v) {
|
|
return v + delta;
|
|
};
|
|
},
|
|
ratio: function (ratio) {
|
|
return function(v) {
|
|
return Math.floor(v * ratio);
|
|
};
|
|
},
|
|
standard: function (diff) {
|
|
return function(v) {
|
|
return v - diff;
|
|
};
|
|
}
|
|
},
|
|
|
|
parseAnchor: function(a, start, cstart) {
|
|
if (a && a != 'none') {
|
|
var factory = this.anchorFactory,
|
|
delta;
|
|
|
|
if (this.parseAnchorRE.test(a)) {
|
|
return factory.standard(cstart - start);
|
|
}
|
|
if (a.indexOf('%') != -1) {
|
|
return factory.ratio(parseFloat(a.replace('%', '')) * 0.01);
|
|
}
|
|
delta = parseInt(a, 10);
|
|
if (!isNaN(delta)) {
|
|
return factory.offset(delta);
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
// private
|
|
adjustWidthAnchor: function(value, childContext) {
|
|
return value;
|
|
},
|
|
|
|
// private
|
|
adjustHeightAnchor: function(value, childContext) {
|
|
return value;
|
|
},
|
|
|
|
configureItem: function(item) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
anchor= item.anchor,
|
|
anchorsArray,
|
|
anchorWidth,
|
|
anchorHeight;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (!item.anchor && item.items && !Ext.isNumber(item.width) && !(Ext.isIE6 && Ext.isStrict)) {
|
|
item.anchor = anchor = me.defaultAnchor;
|
|
}
|
|
|
|
/**
|
|
* @cfg {Number/Object} anchorSize
|
|
* Defines the anchoring size of container.
|
|
* Either a number to define the width of the container or an object with `width` and `height` fields.
|
|
* @member Ext.container.Container
|
|
*/
|
|
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 = {
|
|
right: me.parseAnchor(anchorsArray[0], item.initialConfig.width, anchorWidth),
|
|
bottom: me.parseAnchor(anchorsArray[1], item.initialConfig.height, anchorHeight)
|
|
};
|
|
}
|
|
},
|
|
|
|
sizePolicy: {
|
|
$: {
|
|
readsWidth: 1,
|
|
readsHeight: 1,
|
|
setsWidth: 0,
|
|
setsHeight: 0
|
|
},
|
|
b: {
|
|
readsWidth: 1,
|
|
readsHeight: 0,
|
|
setsWidth: 0,
|
|
setsHeight: 1
|
|
},
|
|
r: {
|
|
$: {
|
|
readsWidth: 0,
|
|
readsHeight: 1,
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
},
|
|
b: {
|
|
readsWidth: 0,
|
|
readsHeight: 0,
|
|
setsWidth: 1,
|
|
setsHeight: 1
|
|
}
|
|
}
|
|
},
|
|
|
|
getItemSizePolicy: function (item) {
|
|
var anchorSpec = item.anchorSpec,
|
|
key = '$',
|
|
policy = this.sizePolicy,
|
|
sizeModel;
|
|
|
|
if (anchorSpec) {
|
|
sizeModel = this.owner.getSizeModel();
|
|
if (anchorSpec.right && !sizeModel.width.shrinkWrap) {
|
|
policy = policy.r;
|
|
}
|
|
if (anchorSpec.bottom && !sizeModel.height.shrinkWrap) {
|
|
key = 'b';
|
|
}
|
|
}
|
|
|
|
return policy[key];
|
|
}
|
|
});
|
|
|
|
// @define Ext.MessageBox, Ext.Msg
|
|
|
|
/**
|
|
* Utility class for generating different styles of message boxes. The singleton instance, Ext.MessageBox
|
|
* alias `Ext.Msg` can also be used.
|
|
*
|
|
* Note that a MessageBox is asynchronous. Unlike a regular JavaScript `alert` (which will halt
|
|
* browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
|
|
* that should only run *after* some user feedback from the MessageBox, you must use a callback function
|
|
* (see the `function` parameter for {@link #method-show} for more details).
|
|
*
|
|
* Basic alert
|
|
*
|
|
* @example
|
|
* Ext.Msg.alert('Status', 'Changes saved successfully.');
|
|
*
|
|
* Prompt for user data and process the result using a callback
|
|
*
|
|
* @example
|
|
* Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
|
|
* if (btn == 'ok'){
|
|
* // process text value and close...
|
|
* }
|
|
* });
|
|
*
|
|
* Show a dialog using config options
|
|
*
|
|
* @example
|
|
* Ext.Msg.show({
|
|
* title:'Save Changes?',
|
|
* msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
|
|
* buttons: Ext.Msg.YESNOCANCEL,
|
|
* icon: Ext.Msg.QUESTION
|
|
* });
|
|
*/
|
|
Ext.define('Ext.window.MessageBox', {
|
|
extend: Ext.window.Window ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alias: 'widget.messagebox',
|
|
|
|
/**
|
|
* @property
|
|
* Button config that displays a single OK button
|
|
*/
|
|
OK : 1,
|
|
/**
|
|
* @property
|
|
* Button config that displays a single Yes button
|
|
*/
|
|
YES : 2,
|
|
/**
|
|
* @property
|
|
* Button config that displays a single No button
|
|
*/
|
|
NO : 4,
|
|
/**
|
|
* @property
|
|
* Button config that displays a single Cancel button
|
|
*/
|
|
CANCEL : 8,
|
|
/**
|
|
* @property
|
|
* Button config that displays OK and Cancel buttons
|
|
*/
|
|
OKCANCEL : 9,
|
|
/**
|
|
* @property
|
|
* Button config that displays Yes and No buttons
|
|
*/
|
|
YESNO : 6,
|
|
/**
|
|
* @property
|
|
* Button config that displays Yes, No and Cancel buttons
|
|
*/
|
|
YESNOCANCEL : 14,
|
|
/**
|
|
* @property
|
|
* The CSS class that provides the INFO icon image
|
|
*/
|
|
INFO : Ext.baseCSSPrefix + 'message-box-info',
|
|
/**
|
|
* @property
|
|
* The CSS class that provides the WARNING icon image
|
|
*/
|
|
WARNING : Ext.baseCSSPrefix + 'message-box-warning',
|
|
/**
|
|
* @property
|
|
* The CSS class that provides the QUESTION icon image
|
|
*/
|
|
QUESTION : Ext.baseCSSPrefix + 'message-box-question',
|
|
/**
|
|
* @property
|
|
* The CSS class that provides the ERROR icon image
|
|
*/
|
|
ERROR : Ext.baseCSSPrefix + 'message-box-error',
|
|
|
|
// hide it by offsets. Windows are hidden on render by default.
|
|
hideMode: 'offsets',
|
|
closeAction: 'hide',
|
|
resizable: false,
|
|
title: ' ',
|
|
|
|
defaultMinWidth: 250,
|
|
defaultMaxWidth: 600,
|
|
defaultMinHeight: 110,
|
|
defaultMaxHeight: 500,
|
|
|
|
// Forcibly set these to null on the prototype to override anything set higher in
|
|
// the hierarchy
|
|
minWidth: null,
|
|
maxWidth: null,
|
|
minHeight: null,
|
|
maxHeight: null,
|
|
constrain: true,
|
|
|
|
cls: [Ext.baseCSSPrefix + 'message-box', Ext.baseCSSPrefix + 'hide-offsets'],
|
|
|
|
layout: {
|
|
type: 'vbox',
|
|
align: 'stretch'
|
|
},
|
|
|
|
// We want to shrinkWrap around all docked items
|
|
shrinkWrapDock: true,
|
|
|
|
/**
|
|
* @property
|
|
* The default height in pixels of the message box's multiline textarea if displayed.
|
|
*/
|
|
defaultTextHeight : 75,
|
|
/**
|
|
* @property
|
|
* The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
|
|
* for setting a different minimum width than text-only dialogs may need.
|
|
*/
|
|
minProgressWidth : 250,
|
|
/**
|
|
* @property
|
|
* The minimum width in pixels of the message box if it is a prompt dialog. This is useful
|
|
* for setting a different minimum width than text-only dialogs may need.
|
|
*/
|
|
minPromptWidth: 250,
|
|
//<locale type="object">
|
|
/**
|
|
* @property
|
|
* An object containing the default button text strings that can be overriden for localized language support.
|
|
* Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific
|
|
* resource file for handling language support across the framework.
|
|
* Customize the default text like so:
|
|
*
|
|
* Ext.window.MessageBox.buttonText.yes = "oui"; //french
|
|
*/
|
|
buttonText: {
|
|
ok: 'OK',
|
|
yes: 'Yes',
|
|
no: 'No',
|
|
cancel: 'Cancel'
|
|
},
|
|
//</locale>
|
|
|
|
buttonIds: [
|
|
'ok', 'yes', 'no', 'cancel'
|
|
],
|
|
|
|
//<locale type="object">
|
|
titleText: {
|
|
confirm: 'Confirm',
|
|
prompt: 'Prompt',
|
|
wait: 'Loading...',
|
|
alert: 'Attention'
|
|
},
|
|
//</locale>
|
|
|
|
iconHeight: 35,
|
|
iconWidth: 50,
|
|
|
|
makeButton: function(btnIdx) {
|
|
var btnId = this.buttonIds[btnIdx];
|
|
return new Ext.button.Button({
|
|
handler: this.btnCallback,
|
|
itemId: btnId,
|
|
scope: this,
|
|
text: this.buttonText[btnId],
|
|
minWidth: 75
|
|
});
|
|
},
|
|
|
|
btnCallback: function(btn) {
|
|
var me = this,
|
|
value,
|
|
field;
|
|
|
|
if (me.cfg.prompt || me.cfg.multiline) {
|
|
if (me.cfg.multiline) {
|
|
field = me.textArea;
|
|
} else {
|
|
field = me.textField;
|
|
}
|
|
value = field.getValue();
|
|
field.reset();
|
|
}
|
|
|
|
// Component.onHide blurs the active element if the Component contains the active element
|
|
me.hide();
|
|
me.userCallback(btn.itemId, value, me.cfg);
|
|
},
|
|
|
|
hide: function() {
|
|
var me = this,
|
|
cls = me.cfg.cls;
|
|
|
|
me.dd.endDrag();
|
|
me.progressBar.reset();
|
|
if (cls) {
|
|
me.removeCls(cls);
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
constructor: function(cfg) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// set the default min/max/Width/Height to the initially configured min/max/Width/Height
|
|
// so that it will be used as the default when reconfiguring.
|
|
me.minWidth = me.defaultMinWidth = (me.minWidth || me.defaultMinWidth);
|
|
me.maxWidth = me.defaultMaxWidth = (me.maxWidth || me.defaultMaxWidth);
|
|
me.minHeight = me.defaultMinHeight = (me.minHeight || me.defaultMinHeight);
|
|
me.maxHeight = me.defaultMaxHeight = (me.maxHeight || me.defaultMaxHeight);
|
|
},
|
|
|
|
initComponent: function(cfg) {
|
|
var me = this,
|
|
baseId = me.id,
|
|
i, button;
|
|
|
|
me.title = ' ';
|
|
|
|
me.topContainer = new Ext.container.Container({
|
|
layout: 'hbox',
|
|
padding: 10,
|
|
style: {
|
|
overflow: 'hidden'
|
|
},
|
|
items: [
|
|
me.iconComponent = new Ext.Component({
|
|
width: me.iconWidth,
|
|
height: me.iconHeight
|
|
}),
|
|
me.promptContainer = new Ext.container.Container({
|
|
flex: 1,
|
|
layout: 'anchor',
|
|
items: [
|
|
me.msg = new Ext.form.field.Display({
|
|
id: baseId + '-displayfield',
|
|
cls: me.baseCls + '-text'
|
|
}),
|
|
me.textField = new Ext.form.field.Text({
|
|
id: baseId + '-textfield',
|
|
anchor: '100%',
|
|
enableKeyEvents: true,
|
|
listeners: {
|
|
keydown: me.onPromptKey,
|
|
scope: me
|
|
}
|
|
}),
|
|
me.textArea = new Ext.form.field.TextArea({
|
|
id: baseId + '-textarea',
|
|
anchor: '100%',
|
|
height: 75
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
me.progressBar = new Ext.ProgressBar({
|
|
id: baseId + '-progressbar',
|
|
margins: '0 10 10 10'
|
|
});
|
|
|
|
me.items = [me.topContainer, me.progressBar];
|
|
|
|
// Create the buttons based upon passed bitwise config
|
|
me.msgButtons = [];
|
|
for (i = 0; i < 4; i++) {
|
|
button = me.makeButton(i);
|
|
me.msgButtons[button.itemId] = button;
|
|
me.msgButtons.push(button);
|
|
}
|
|
me.bottomTb = new Ext.toolbar.Toolbar({
|
|
id: baseId + '-toolbar',
|
|
ui: 'footer',
|
|
dock: 'bottom',
|
|
layout: {
|
|
pack: 'center'
|
|
},
|
|
items: [
|
|
me.msgButtons[0],
|
|
me.msgButtons[1],
|
|
me.msgButtons[2],
|
|
me.msgButtons[3]
|
|
]
|
|
});
|
|
me.dockedItems = [me.bottomTb];
|
|
me.on('close', me.onClose, me);
|
|
me.callParent();
|
|
},
|
|
|
|
onClose: function(){
|
|
var btn = this.header.child('[type=close]');
|
|
// Give a temporary itemId so it can act like the cancel button
|
|
btn.itemId = 'cancel';
|
|
this.btnCallback(btn);
|
|
delete btn.itemId;
|
|
},
|
|
|
|
onPromptKey: function(textField, e) {
|
|
var me = this;
|
|
|
|
if (e.keyCode === e.RETURN || e.keyCode === 10) {
|
|
if (me.msgButtons.ok.isVisible()) {
|
|
me.msgButtons.ok.handler.call(me, me.msgButtons.ok);
|
|
} else if (me.msgButtons.yes.isVisible()) {
|
|
me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
|
|
}
|
|
}
|
|
},
|
|
|
|
reconfigure: function(cfg) {
|
|
var me = this,
|
|
buttons = 0,
|
|
hideToolbar = true,
|
|
oldButtonText = me.buttonText,
|
|
resizer = me.resizer,
|
|
resizeTracker, width, height, i, textArea, textField,
|
|
msg, progressBar, msgButtons;
|
|
|
|
// Restore default buttonText before reconfiguring.
|
|
me.updateButtonText();
|
|
|
|
cfg = cfg || {};
|
|
me.cfg = cfg;
|
|
if (cfg.width) {
|
|
width = cfg.width;
|
|
}
|
|
|
|
if (cfg.height) {
|
|
height = cfg.height;
|
|
}
|
|
|
|
me.minWidth = cfg.minWidth || me.defaultMinWidth;
|
|
me.maxWidth = cfg.maxWidth || me.defaultMaxWidth;
|
|
me.minHeight = cfg.minHeight || me.defaultMinHeight;
|
|
me.maxHeight = cfg.maxHeight || me.defaultMaxHeight;
|
|
|
|
if (resizer) {
|
|
resizeTracker = resizer.resizeTracker;
|
|
resizer.minWidth = resizeTracker.minWidth = me.minWidth;
|
|
resizer.maxWidth = resizeTracker.maxWidth = me.maxWidth;
|
|
resizer.minHeight = resizeTracker.minHeight = me.minHeight;
|
|
resizer.maxHeight = resizeTracker.maxHeight = me.maxHeight;
|
|
}
|
|
|
|
// Default to allowing the Window to take focus.
|
|
delete me.defaultFocus;
|
|
if (cfg.defaultFocus) {
|
|
me.defaultFocus = cfg.defaultFocus;
|
|
}
|
|
|
|
// clear any old animateTarget
|
|
me.animateTarget = cfg.animateTarget || undefined;
|
|
|
|
// Defaults to modal
|
|
me.modal = cfg.modal !== false;
|
|
|
|
// Show the title/icon
|
|
me.setTitle(cfg.title || '');
|
|
me.setIconCls(cfg.iconCls || '');
|
|
|
|
// Extract button configs
|
|
if (Ext.isObject(cfg.buttons)) {
|
|
me.buttonText = cfg.buttons;
|
|
buttons = 0;
|
|
} else {
|
|
me.buttonText = cfg.buttonText || me.buttonText;
|
|
buttons = Ext.isNumber(cfg.buttons) ? cfg.buttons : 0;
|
|
}
|
|
|
|
// Apply custom-configured buttonText
|
|
// Infer additional buttons from the specified property names in the buttonText object
|
|
buttons = buttons | me.updateButtonText();
|
|
|
|
// Restore buttonText. Next run of reconfigure will restore to prototype's buttonText
|
|
me.buttonText = oldButtonText;
|
|
|
|
// During the on render, or size resetting layouts, and in subsequent hiding and showing, we need to
|
|
// suspend layouts, and flush at the end when the Window's children are at their final visibility.
|
|
Ext.suspendLayouts();
|
|
delete me.width;
|
|
delete me.height;
|
|
if (width || height) {
|
|
if (width) {
|
|
me.setWidth(width);
|
|
}
|
|
|
|
if (height) {
|
|
me.setHeight(height);
|
|
}
|
|
}
|
|
me.hidden = false;
|
|
if (!me.rendered) {
|
|
me.render(Ext.getBody());
|
|
}
|
|
|
|
// Hide or show the close tool
|
|
me.closable = cfg.closable !== false && !cfg.wait;
|
|
me.header.child('[type=close]').setVisible(me.closable);
|
|
|
|
// Hide or show the header
|
|
if (!cfg.title && !me.closable && !cfg.iconCls) {
|
|
me.header.hide();
|
|
} else {
|
|
me.header.show();
|
|
}
|
|
|
|
// Default to dynamic drag: drag the window, not a ghost
|
|
me.liveDrag = !cfg.proxyDrag;
|
|
|
|
// wrap the user callback
|
|
me.userCallback = Ext.Function.bind(cfg.callback ||cfg.fn || Ext.emptyFn, cfg.scope || Ext.global);
|
|
|
|
// Hide or show the icon Component
|
|
me.setIcon(cfg.icon, cfg.iconWidth, cfg.iconHeight);
|
|
|
|
// Hide or show the message area
|
|
msg = me.msg;
|
|
if (cfg.msg) {
|
|
msg.setValue(cfg.msg);
|
|
msg.show();
|
|
} else {
|
|
msg.hide();
|
|
}
|
|
|
|
// Hide or show the input field
|
|
textArea = me.textArea;
|
|
textField = me.textField;
|
|
if (cfg.prompt || cfg.multiline) {
|
|
me.multiline = cfg.multiline;
|
|
if (cfg.multiline) {
|
|
textArea.setValue(cfg.value);
|
|
textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);
|
|
textArea.show();
|
|
textField.hide();
|
|
me.defaultFocus = textArea;
|
|
} else {
|
|
textField.setValue(cfg.value);
|
|
textArea.hide();
|
|
textField.show();
|
|
me.defaultFocus = textField;
|
|
}
|
|
} else {
|
|
textArea.hide();
|
|
textField.hide();
|
|
}
|
|
|
|
// Hide or show the progress bar
|
|
progressBar = me.progressBar;
|
|
if (cfg.progress || cfg.wait) {
|
|
progressBar.show();
|
|
me.updateProgress(0, cfg.progressText);
|
|
if(cfg.wait === true){
|
|
progressBar.wait(cfg.waitConfig);
|
|
}
|
|
} else {
|
|
progressBar.hide();
|
|
}
|
|
|
|
// Hide or show buttons depending on flag value sent.
|
|
msgButtons = me.msgButtons;
|
|
for (i = 0; i < 4; i++) {
|
|
if (buttons & Math.pow(2, i)) {
|
|
|
|
// Default to focus on the first visible button if focus not already set
|
|
if (!me.defaultFocus) {
|
|
me.defaultFocus = msgButtons[i];
|
|
}
|
|
msgButtons[i].show();
|
|
hideToolbar = false;
|
|
} else {
|
|
msgButtons[i].hide();
|
|
}
|
|
}
|
|
|
|
// Hide toolbar if no buttons to show
|
|
if (hideToolbar) {
|
|
me.bottomTb.hide();
|
|
} else {
|
|
me.bottomTb.show();
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Set button text according to current buttonText property object
|
|
* @return {Number} The buttons bitwise flag based upon the button IDs specified in the buttonText property.
|
|
*/
|
|
updateButtonText: function() {
|
|
var me = this,
|
|
buttonText = me.buttonText,
|
|
buttons = 0,
|
|
btnId,
|
|
btn;
|
|
|
|
for (btnId in buttonText) {
|
|
if (buttonText.hasOwnProperty(btnId)) {
|
|
btn = me.msgButtons[btnId];
|
|
if (btn) {
|
|
if (me.cfg && me.cfg.buttonText) {
|
|
buttons = buttons | Math.pow(2, Ext.Array.indexOf(me.buttonIds, btnId));
|
|
}
|
|
if (btn.text != buttonText[btnId]) {
|
|
btn.setText(buttonText[btnId]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return buttons;
|
|
},
|
|
|
|
/**
|
|
* Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All
|
|
* display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, although those calls
|
|
* are basic shortcuts and do not support all of the config options allowed here.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* Ext.Msg.show({
|
|
* title: 'Address',
|
|
* msg: 'Please enter your address:',
|
|
* width: 300,
|
|
* buttons: Ext.Msg.OKCANCEL,
|
|
* multiline: true,
|
|
* fn: saveAddress,
|
|
* animateTarget: 'addAddressBtn',
|
|
* icon: Ext.window.MessageBox.INFO
|
|
* });
|
|
*
|
|
* @param {Object} config The following config options are supported:
|
|
*
|
|
* @param {String/Ext.dom.Element} config.animateTarget
|
|
* An id or Element from which the message box should animate as it opens and closes.
|
|
*
|
|
* @param {Number} [config.buttons=false]
|
|
* A bitwise button specifier consisting of the sum of any of the following constants:
|
|
*
|
|
* - Ext.MessageBox.OK
|
|
* - Ext.MessageBox.YES
|
|
* - Ext.MessageBox.NO
|
|
* - Ext.MessageBox.CANCEL
|
|
*
|
|
* Some common combinations have already been predefined:
|
|
*
|
|
* - Ext.MessageBox.OKCANCEL
|
|
* - Ext.MessageBox.YESNO
|
|
* - Ext.MessageBox.YESNOCANCEL
|
|
*
|
|
* Or false to not show any buttons.
|
|
*
|
|
* This may also be specified as an object hash containing custom button text in the same format as the
|
|
* {@link #buttonText} config. Button IDs present as property names will be made visible.
|
|
*
|
|
* @param {Boolean} config.closable
|
|
* False to hide the top-right close button (defaults to true). Note that progress and wait dialogs will ignore this
|
|
* property and always hide the close button as they can only be closed programmatically.
|
|
*
|
|
* @param {String} config.cls
|
|
* A custom CSS class to apply to the message box's container element
|
|
*
|
|
* @param {Number} [config.defaultTextHeight=75]
|
|
* The default height in pixels of the message box's multiline textarea if displayed.
|
|
*
|
|
* @param {Function} config.fn
|
|
* A callback function which is called when the dialog is dismissed either by clicking on the configured buttons, or
|
|
* on the dialog close button, or by pressing the return button to enter input.
|
|
*
|
|
* Progress and wait dialogs will ignore this option since they do not respond to user actions and can only be
|
|
* closed programmatically, so any required function should be called by the same code after it closes the dialog.
|
|
* Parameters passed:
|
|
*
|
|
* @param {String} config.fn.buttonId The ID of the button pressed, one of:
|
|
*
|
|
* - ok
|
|
* - yes
|
|
* - no
|
|
* - cancel
|
|
*
|
|
* @param {String} config.fn.text Value of the input field if either `prompt` or `multiline` is true
|
|
* @param {Object} config.fn.opt The config object passed to show.
|
|
*
|
|
* @param {Object} config.buttonText
|
|
* An object containing string properties which override the system-supplied button text values just for this
|
|
* invocation. The property names are:
|
|
*
|
|
* - ok
|
|
* - yes
|
|
* - no
|
|
* - cancel
|
|
*
|
|
* @param {Object} config.scope
|
|
* The scope (`this` reference) in which the function will be executed.
|
|
*
|
|
* @param {String} config.icon
|
|
* A CSS class that provides a background image to be used as the body icon for the dialog.
|
|
* One can use a predefined icon class:
|
|
*
|
|
* - Ext.MessageBox.INFO
|
|
* - Ext.MessageBox.WARNING
|
|
* - Ext.MessageBox.QUESTION
|
|
* - Ext.MessageBox.ERROR
|
|
*
|
|
* or use just any `'custom-class'`. Defaults to empty string.
|
|
*
|
|
* @param {String} config.iconCls
|
|
* The standard {@link Ext.window.Window#iconCls} to add an optional header icon (defaults to '')
|
|
*
|
|
* @param {String} config.defaultFocus
|
|
* The button to focus when showing the dialog. If not specified, defaults to
|
|
* the first visible button.
|
|
*
|
|
* @param {Number} config.maxWidth
|
|
* The maximum width in pixels of the message box (defaults to 600)
|
|
*
|
|
* @param {Number} config.minWidth
|
|
* The minimum width in pixels of the message box (defaults to 100)
|
|
*
|
|
* @param {Boolean} config.modal
|
|
* False to allow user interaction with the page while the message box is displayed (defaults to true)
|
|
*
|
|
* @param {String} config.msg
|
|
* A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space
|
|
* character ' ')
|
|
*
|
|
* @param {Boolean} config.multiline
|
|
* True to prompt the user to enter multi-line text (defaults to false)
|
|
*
|
|
* @param {Boolean} config.progress
|
|
* True to display a progress bar (defaults to false)
|
|
*
|
|
* @param {String} config.progressText
|
|
* The text to display inside the progress bar if progress = true (defaults to '')
|
|
*
|
|
* @param {Boolean} config.prompt
|
|
* True to prompt the user to enter single-line text (defaults to false)
|
|
*
|
|
* @param {Boolean} config.proxyDrag
|
|
* True to display a lightweight proxy while dragging (defaults to false)
|
|
*
|
|
* @param {String} config.title
|
|
* The title text
|
|
*
|
|
* @param {String} config.value
|
|
* The string value to set into the active textbox element if displayed
|
|
*
|
|
* @param {Boolean} config.wait
|
|
* True to display a progress bar (defaults to false)
|
|
*
|
|
* @param {Object} config.waitConfig
|
|
* A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)
|
|
*
|
|
* @param {Number} config.width
|
|
* The width of the dialog in pixels
|
|
*
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
show: function(cfg) {
|
|
var me = this,
|
|
visibleFocusables;
|
|
|
|
// If called during global layout suspension, make the call after layout resumption
|
|
if (Ext.AbstractComponent.layoutSuspendCount) {
|
|
Ext.on({
|
|
resumelayouts: function() {
|
|
me.show(cfg);
|
|
},
|
|
single: true
|
|
});
|
|
return me;
|
|
}
|
|
|
|
me.reconfigure(cfg);
|
|
if (cfg.cls) {
|
|
me.addCls(cfg.cls);
|
|
}
|
|
|
|
// Do not steal focus from anything that may be focused if the MessageBox has no visible focusable
|
|
// items. For example, a "wait" message box should not get focus.
|
|
visibleFocusables = me.query('textfield:not([hidden]),textarea:not([hidden]),button:not([hidden])');
|
|
me.preventFocusOnActivate = !visibleFocusables.length;
|
|
|
|
// Set the flag, so that the parent show method performs the show procedure that we need.
|
|
// ie: animation from animTarget, onShow processing and focusing.
|
|
me.hidden = true;
|
|
me.callParent();
|
|
return me;
|
|
},
|
|
|
|
onShow: function() {
|
|
this.callParent(arguments);
|
|
this.center();
|
|
},
|
|
|
|
updateText: function(text) {
|
|
this.msg.setValue(text);
|
|
},
|
|
|
|
/**
|
|
* Adds the specified icon to the dialog. By default, the class 'x-messagebox-icon' is applied for default
|
|
* styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
|
|
* to clear any existing icon. This method must be called before the MessageBox is shown.
|
|
* The following built-in icon classes are supported, but you can also pass in a custom class name:
|
|
*
|
|
* Ext.window.MessageBox.INFO
|
|
* Ext.window.MessageBox.WARNING
|
|
* Ext.window.MessageBox.QUESTION
|
|
* Ext.window.MessageBox.ERROR
|
|
*
|
|
* @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
|
|
* @param {Number} [width] The width of the icon. If not specified, the default is used
|
|
* @param {Number} [height] The height of the icon. If not specified, the default is used
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
setIcon : function(icon, width, height) {
|
|
var me = this,
|
|
iconCmp = me.iconComponent,
|
|
cls = me.messageIconCls;
|
|
|
|
if (cls) {
|
|
iconCmp.removeCls(cls);
|
|
}
|
|
|
|
if (icon) {
|
|
iconCmp.show();
|
|
iconCmp.setSize(width || me.iconWidth, height || me.iconHeight);
|
|
iconCmp.addCls(Ext.baseCSSPrefix + 'dlg-icon');
|
|
iconCmp.addCls(me.messageIconCls = icon);
|
|
} else {
|
|
iconCmp.removeCls(Ext.baseCSSPrefix + 'dlg-icon');
|
|
iconCmp.hide();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Updates a progress-style message box's text and progress bar. Only relevant on message boxes
|
|
* initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait},
|
|
* or by calling {@link Ext.window.MessageBox#method-show} with progress: true.
|
|
*
|
|
* @param {Number} [value=0] Any number between 0 and 1 (e.g., .5)
|
|
* @param {String} [progressText=''] The progress text to display inside the progress bar.
|
|
* @param {String} [msg] The message box's body text is replaced with the specified string (defaults to undefined
|
|
* so that any existing body text will not get overwritten by default unless a new value is passed in)
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
updateProgress : function(value, progressText, msg){
|
|
this.progressBar.updateProgress(value, progressText);
|
|
if (msg){
|
|
this.updateText(msg);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
onEsc: function() {
|
|
if (this.closable !== false) {
|
|
this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
|
|
* If a callback function is passed it will be called after the user clicks either button,
|
|
* and the id of the button that was clicked will be passed as the only parameter to the callback
|
|
* (could also be the top-right close button, which will always report as "cancel").
|
|
*
|
|
* @param {String} title The title bar text
|
|
* @param {String} msg The message box body text
|
|
* @param {Function} [fn] The callback function invoked after the message box is closed.
|
|
* See {@link #method-show} method for details.
|
|
* @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
confirm: function(cfg, msg, fn, scope) {
|
|
if (Ext.isString(cfg)) {
|
|
cfg = {
|
|
title: cfg,
|
|
icon: this.QUESTION,
|
|
msg: msg,
|
|
buttons: this.YESNO,
|
|
callback: fn,
|
|
scope: scope
|
|
};
|
|
}
|
|
return this.show(cfg);
|
|
},
|
|
|
|
/**
|
|
* Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
|
|
* The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user
|
|
* clicks either button, and the id of the button that was clicked (could also be the top-right
|
|
* close button, which will always report as "cancel") and the text that was entered will be passed as the two parameters to the callback.
|
|
*
|
|
* @param {String} title The title bar text
|
|
* @param {String} msg The message box body text
|
|
* @param {Function} [fn] The callback function invoked after the message box is closed.
|
|
* See {@link #method-show} method for details.
|
|
* @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
|
|
* @param {Boolean/Number} [multiline=false] True to create a multiline textbox using the defaultTextHeight
|
|
* property, or the height in pixels to create the textbox/
|
|
* @param {String} [value=''] Default value of the text input element
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
prompt : function(cfg, msg, fn, scope, multiline, value){
|
|
if (Ext.isString(cfg)) {
|
|
cfg = {
|
|
prompt: true,
|
|
title: cfg,
|
|
minWidth: this.minPromptWidth,
|
|
msg: msg,
|
|
buttons: this.OKCANCEL,
|
|
callback: fn,
|
|
scope: scope,
|
|
multiline: multiline,
|
|
value: value
|
|
};
|
|
}
|
|
return this.show(cfg);
|
|
},
|
|
|
|
/**
|
|
* Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
|
|
* interaction while waiting for a long-running process to complete that does not have defined intervals.
|
|
* You are responsible for closing the message box when the process is complete.
|
|
*
|
|
* @param {String} msg The message box body text
|
|
* @param {String} [title] The title bar text
|
|
* @param {Object} [config] A {@link Ext.ProgressBar#wait} config object
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
wait : function(cfg, title, config){
|
|
if (Ext.isString(cfg)) {
|
|
cfg = {
|
|
title : title,
|
|
msg : cfg,
|
|
closable: false,
|
|
wait: true,
|
|
modal: true,
|
|
minWidth: this.minProgressWidth,
|
|
waitConfig: config
|
|
};
|
|
}
|
|
return this.show(cfg);
|
|
},
|
|
|
|
/**
|
|
* Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
|
|
* If a callback function is passed it will be called after the user clicks the button, and the
|
|
* id of the button that was clicked will be passed as the only parameter to the callback
|
|
* (could also be the top-right close button, which will always report as "cancel").
|
|
*
|
|
* @param {String} title The title bar text
|
|
* @param {String} msg The message box body text
|
|
* @param {Function} [fn] The callback function invoked after the message box is closed.
|
|
* See {@link #method-show} method for details.
|
|
* @param {Object} [scope=window] The scope (<code>this</code> reference) in which the callback is executed.
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
alert: function(cfg, msg, fn, scope) {
|
|
if (Ext.isString(cfg)) {
|
|
cfg = {
|
|
title : cfg,
|
|
msg : msg,
|
|
buttons: this.OK,
|
|
fn: fn,
|
|
scope : scope,
|
|
minWidth: this.minWidth
|
|
};
|
|
}
|
|
return this.show(cfg);
|
|
},
|
|
|
|
/**
|
|
* Displays a message box with a progress bar.
|
|
*
|
|
* You are responsible for updating the progress bar as needed via {@link Ext.window.MessageBox#updateProgress}
|
|
* and closing the message box when the process is complete.
|
|
*
|
|
* @param {String} title The title bar text
|
|
* @param {String} msg The message box body text
|
|
* @param {String} [progressText=''] The text to display inside the progress bar
|
|
* @return {Ext.window.MessageBox} this
|
|
*/
|
|
progress : function(cfg, msg, progressText){
|
|
if (Ext.isString(cfg)) {
|
|
cfg = {
|
|
title: cfg,
|
|
msg: msg,
|
|
progress: true,
|
|
progressText: progressText
|
|
};
|
|
}
|
|
return this.show(cfg);
|
|
}
|
|
}, function() {
|
|
/**
|
|
* @class Ext.MessageBox
|
|
* @alternateClassName Ext.Msg
|
|
* @extends Ext.window.MessageBox
|
|
* @singleton
|
|
* Singleton instance of {@link Ext.window.MessageBox}.
|
|
*/
|
|
Ext.MessageBox = Ext.Msg = new this();
|
|
});
|
|
|
|
/**
|
|
* Provides input field management, validation, submission, and form loading services for the collection
|
|
* of {@link Ext.form.field.Field Field} instances within a {@link Ext.container.Container}. It is recommended
|
|
* that you use a {@link Ext.form.Panel} as the form container, as that has logic to automatically
|
|
* hook up an instance of {@link Ext.form.Basic} (plus other conveniences related to field configuration.)
|
|
*
|
|
* ## Form Actions
|
|
*
|
|
* The Basic class delegates the handling of form loads and submits to instances of {@link Ext.form.action.Action}.
|
|
* See the various Action implementations for specific details of each one's functionality, as well as the
|
|
* documentation for {@link #doAction} which details the configuration options that can be specified in
|
|
* each action call.
|
|
*
|
|
* The default submit Action is {@link Ext.form.action.Submit}, which uses an Ajax request to submit the
|
|
* form's values to a configured URL. To enable normal browser submission of an Ext form, use the
|
|
* {@link #standardSubmit} config option.
|
|
*
|
|
* ## File uploads
|
|
*
|
|
* File uploads are not performed using normal 'Ajax' techniques; see the description for
|
|
* {@link #hasUpload} for details. If you're using file uploads you should read the method description.
|
|
*
|
|
* ## Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Basic Form',
|
|
* renderTo: Ext.getBody(),
|
|
* bodyPadding: 5,
|
|
* width: 350,
|
|
*
|
|
* // Any configuration items here will be automatically passed along to
|
|
* // the Ext.form.Basic instance when it gets created.
|
|
*
|
|
* // The form will submit an AJAX request to this URL when submitted
|
|
* url: 'save-form.php',
|
|
*
|
|
* items: [{
|
|
* xtype: 'textfield',
|
|
* fieldLabel: 'Field',
|
|
* name: 'theField'
|
|
* }],
|
|
*
|
|
* buttons: [{
|
|
* text: 'Submit',
|
|
* handler: function() {
|
|
* // The getForm() method returns the Ext.form.Basic instance:
|
|
* var form = this.up('form').getForm();
|
|
* if (form.isValid()) {
|
|
* // Submit the Ajax request and handle the response
|
|
* form.submit({
|
|
* success: function(form, action) {
|
|
* Ext.Msg.alert('Success', action.result.message);
|
|
* },
|
|
* failure: function(form, action) {
|
|
* Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
|
|
* }
|
|
* });
|
|
* }
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*/
|
|
Ext.define('Ext.form.Basic', {
|
|
extend: Ext.util.Observable ,
|
|
alternateClassName: 'Ext.form.BasicForm',
|
|
|
|
|
|
|
|
/**
|
|
* Creates new form.
|
|
* @param {Ext.container.Container} owner The component that is the container for the form, usually a {@link Ext.form.Panel}
|
|
* @param {Object} config Configuration options. These are normally specified in the config to the
|
|
* {@link Ext.form.Panel} constructor, which passes them along to the BasicForm automatically.
|
|
*/
|
|
constructor: function(owner, config) {
|
|
var me = this,
|
|
reader;
|
|
|
|
/**
|
|
* @property {Ext.container.Container} owner
|
|
* The container component to which this BasicForm is attached.
|
|
*/
|
|
me.owner = owner;
|
|
|
|
me.checkValidityTask = new Ext.util.DelayedTask(me.checkValidity, me);
|
|
me.checkDirtyTask = new Ext.util.DelayedTask(me.checkDirty, me);
|
|
|
|
// We use the monitor here as opposed to event bubbling. The problem with bubbling is it doesn't
|
|
// let us react to items being added/remove at different places in the hierarchy which may have an
|
|
// impact on the dirty/valid state.
|
|
me.monitor = new Ext.container.Monitor({
|
|
selector: '[isFormField]',
|
|
scope: me,
|
|
addHandler: me.onFieldAdd,
|
|
removeHandler: me.onFieldRemove
|
|
});
|
|
me.monitor.bind(owner);
|
|
|
|
Ext.apply(me, config);
|
|
|
|
// Normalize the paramOrder to an Array
|
|
if (Ext.isString(me.paramOrder)) {
|
|
me.paramOrder = me.paramOrder.split(/[\s,|]/);
|
|
}
|
|
|
|
reader = me.reader;
|
|
if (reader && !reader.isReader) {
|
|
if (typeof reader === 'string') {
|
|
reader = {
|
|
type: reader
|
|
};
|
|
}
|
|
me.reader = Ext.createByAlias('reader.' + reader.type, reader);
|
|
}
|
|
|
|
reader = me.errorReader;
|
|
if (reader && !reader.isReader) {
|
|
if (typeof reader === 'string') {
|
|
reader = {
|
|
type: reader
|
|
};
|
|
}
|
|
me.errorReader = Ext.createByAlias('reader.' + reader.type, reader);
|
|
}
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeaction
|
|
* Fires before any action is performed. Return false to cancel the action.
|
|
* @param {Ext.form.Basic} this
|
|
* @param {Ext.form.action.Action} action The {@link Ext.form.action.Action} to be performed
|
|
*/
|
|
'beforeaction',
|
|
/**
|
|
* @event actionfailed
|
|
* Fires when an action fails.
|
|
* @param {Ext.form.Basic} this
|
|
* @param {Ext.form.action.Action} action The {@link Ext.form.action.Action} that failed
|
|
*/
|
|
'actionfailed',
|
|
/**
|
|
* @event actioncomplete
|
|
* Fires when an action is completed.
|
|
* @param {Ext.form.Basic} this
|
|
* @param {Ext.form.action.Action} action The {@link Ext.form.action.Action} that completed
|
|
*/
|
|
'actioncomplete',
|
|
/**
|
|
* @event validitychange
|
|
* Fires when the validity of the entire form changes.
|
|
* @param {Ext.form.Basic} this
|
|
* @param {Boolean} valid `true` if the form is now valid, `false` if it is now invalid.
|
|
*/
|
|
'validitychange',
|
|
/**
|
|
* @event dirtychange
|
|
* Fires when the dirty state of the entire form changes.
|
|
* @param {Ext.form.Basic} this
|
|
* @param {Boolean} dirty `true` if the form is now dirty, `false` if it is no longer dirty.
|
|
*/
|
|
'dirtychange'
|
|
);
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* Do any post layout initialization
|
|
* @private
|
|
*/
|
|
initialize : function() {
|
|
this.initialized = true;
|
|
this.onValidityChange(!this.hasInvalidField());
|
|
},
|
|
|
|
|
|
/**
|
|
* @cfg {String} method
|
|
* The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/Ext.data.reader.Reader} reader
|
|
* An Ext.data.reader.Reader (e.g. {@link Ext.data.reader.Xml}) instance or
|
|
* configuration to be used to read data when executing 'load' actions. This
|
|
* is optional as there is built-in support for processing JSON responses.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/Ext.data.reader.Reader} errorReader
|
|
* An Ext.data.reader.Reader (e.g. {@link Ext.data.reader.Xml}) instance or
|
|
* configuration to be used to read field error messages returned from 'submit' actions.
|
|
* This is optional as there is built-in support for processing JSON responses.
|
|
*
|
|
* The Records which provide messages for the invalid Fields must use the
|
|
* Field name (or id) as the Record ID, and must contain a field called 'msg'
|
|
* which contains the error message.
|
|
*
|
|
* The errorReader does not have to be a full-blown implementation of a
|
|
* Reader. It simply needs to implement a `read(xhr)` function
|
|
* which returns an Array of Records in an object with the following
|
|
* structure:
|
|
*
|
|
* {
|
|
* records: recordArray
|
|
* }
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} url
|
|
* The URL to use for form actions if one isn't supplied in the
|
|
* {@link #doAction doAction} options.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} baseParams
|
|
* Parameters to pass with all requests. e.g. baseParams: `{id: '123', foo: 'bar'}`.
|
|
*
|
|
* Parameters are encoded as standard HTTP parameters using {@link Ext.Object#toQueryString}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} timeout
|
|
* Timeout for form actions in seconds.
|
|
*/
|
|
timeout: 30,
|
|
|
|
/**
|
|
* @cfg {Object} api
|
|
* If specified, load and submit actions will be handled with {@link Ext.form.action.DirectLoad DirectLoad}
|
|
* and {@link Ext.form.action.DirectSubmit DirectSubmit}. Methods which have been imported by
|
|
* {@link Ext.direct.Manager} can be specified here to load and submit forms. API methods may also be
|
|
* specified as strings. See {@link Ext.data.proxy.Direct#directFn}. Such as the following:
|
|
*
|
|
* api: {
|
|
* load: App.ss.MyProfile.load,
|
|
* submit: App.ss.MyProfile.submit
|
|
* }
|
|
*
|
|
* Load actions can use {@link #paramOrder} or {@link #paramsAsHash} to customize how the load method
|
|
* is invoked. Submit actions will always use a standard form submit. The `formHandler` configuration
|
|
* (see Ext.direct.RemotingProvider#action) must be set on the associated server-side method which has
|
|
* been imported by {@link Ext.direct.Manager}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/String[]} paramOrder
|
|
* A list of params to be executed server side. Only used for the {@link #api} `load`
|
|
* configuration.
|
|
*
|
|
* Specify the params in the order in which they must be executed on the
|
|
* server-side as either (1) an Array of String values, or (2) a String of params
|
|
* delimited by either whitespace, comma, or pipe. For example,
|
|
* any of the following would be acceptable:
|
|
*
|
|
* paramOrder: ['param1','param2','param3']
|
|
* paramOrder: 'param1 param2 param3'
|
|
* paramOrder: 'param1,param2,param3'
|
|
* paramOrder: 'param1|param2|param'
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} paramsAsHash
|
|
* Only used for the {@link #api} `load` configuration. If true, parameters will be sent as a
|
|
* single hash collection of named arguments. Providing a {@link #paramOrder} nullifies this
|
|
* configuration.
|
|
*/
|
|
paramsAsHash: false,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} waitTitle
|
|
* The default title to show for the waiting message box
|
|
*/
|
|
waitTitle: 'Please Wait...',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} trackResetOnLoad
|
|
* If set to true, {@link #reset}() resets to the last loaded or {@link #setValues}() data instead of
|
|
* when the form was first created.
|
|
*/
|
|
trackResetOnLoad: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} standardSubmit
|
|
* If set to true, a standard HTML form submit is used instead of a XHR (Ajax) style form submission.
|
|
* All of the field values, plus any additional params configured via {@link #baseParams}
|
|
* and/or the `options` to {@link #submit}, will be included in the values submitted in the form.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} jsonSubmit
|
|
* If set to true, the field values are sent as JSON in the request body.
|
|
* All of the field values, plus any additional params configured via {@link #baseParams}
|
|
* and/or the `options` to {@link #submit}, will be included in the values POSTed in the body of the request.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} waitMsgTarget
|
|
* By default wait messages are displayed with Ext.MessageBox.wait. You can target a specific
|
|
* element by passing it or its id or mask the form itself by passing in true.
|
|
*/
|
|
|
|
|
|
// Private
|
|
wasDirty: false,
|
|
|
|
|
|
/**
|
|
* Destroys this object.
|
|
*/
|
|
destroy: function() {
|
|
var me = this,
|
|
mon = me.monitor;
|
|
|
|
if (mon) {
|
|
mon.unbind();
|
|
me.monitor = null;
|
|
}
|
|
me.clearListeners();
|
|
me.checkValidityTask.cancel();
|
|
me.checkDirtyTask.cancel();
|
|
},
|
|
|
|
onFieldAdd: function(field){
|
|
var me = this;
|
|
|
|
me.mon(field, 'validitychange', me.checkValidityDelay, me);
|
|
me.mon(field, 'dirtychange', me.checkDirtyDelay, me);
|
|
if (me.initialized) {
|
|
me.checkValidityDelay();
|
|
}
|
|
},
|
|
|
|
onFieldRemove: function(field){
|
|
var me = this;
|
|
|
|
me.mun(field, 'validitychange', me.checkValidityDelay, me);
|
|
me.mun(field, 'dirtychange', me.checkDirtyDelay, me);
|
|
if (me.initialized) {
|
|
me.checkValidityDelay();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Return all the {@link Ext.form.field.Field} components in the owner container.
|
|
* @return {Ext.util.MixedCollection} Collection of the Field objects
|
|
*/
|
|
getFields: function() {
|
|
return this.monitor.getItems();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Finds and returns the set of all items bound to fields inside this form
|
|
* @return {Ext.util.MixedCollection} The set of all bound form field items
|
|
*/
|
|
getBoundItems: function() {
|
|
var boundItems = this._boundItems;
|
|
|
|
if (!boundItems || boundItems.getCount() === 0) {
|
|
boundItems = this._boundItems = new Ext.util.MixedCollection();
|
|
boundItems.addAll(this.owner.query('[formBind]'));
|
|
}
|
|
|
|
return boundItems;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the form contains any invalid fields. No fields will be marked as invalid
|
|
* as a result of calling this; to trigger marking of fields use {@link #isValid} instead.
|
|
*/
|
|
hasInvalidField: function() {
|
|
return !!this.getFields().findBy(function(field) {
|
|
var preventMark = field.preventMark,
|
|
isValid;
|
|
field.preventMark = true;
|
|
isValid = field.isValid();
|
|
field.preventMark = preventMark;
|
|
return !isValid;
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns true if client-side validation on the form is successful. Any invalid fields will be
|
|
* marked as invalid. If you only want to determine overall form validity without marking anything,
|
|
* use {@link #hasInvalidField} instead.
|
|
* @return {Boolean}
|
|
*/
|
|
isValid: function() {
|
|
var me = this,
|
|
invalid;
|
|
Ext.suspendLayouts();
|
|
invalid = me.getFields().filterBy(function(field) {
|
|
return !field.validate();
|
|
});
|
|
Ext.resumeLayouts(true);
|
|
return invalid.length < 1;
|
|
},
|
|
|
|
/**
|
|
* Check whether the validity of the entire form has changed since it was last checked, and
|
|
* if so fire the {@link #validitychange validitychange} event. This is automatically invoked
|
|
* when an individual field's validity changes.
|
|
*/
|
|
checkValidity: function() {
|
|
var me = this,
|
|
valid = !me.hasInvalidField();
|
|
if (valid !== me.wasValid) {
|
|
me.onValidityChange(valid);
|
|
me.fireEvent('validitychange', me, valid);
|
|
me.wasValid = valid;
|
|
}
|
|
},
|
|
|
|
checkValidityDelay: function(){
|
|
this.checkValidityTask.delay(10);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handle changes in the form's validity. If there are any sub components with
|
|
* `formBind=true` then they are enabled/disabled based on the new validity.
|
|
* @param {Boolean} valid
|
|
*/
|
|
onValidityChange: function(valid) {
|
|
var boundItems = this.getBoundItems(),
|
|
items, i, iLen, cmp;
|
|
|
|
if (boundItems) {
|
|
items = boundItems.items;
|
|
iLen = items.length;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
cmp = items[i];
|
|
|
|
if (cmp.disabled === valid) {
|
|
cmp.setDisabled(!valid);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if any fields in this form have changed from their original values.
|
|
*
|
|
* Note that if this BasicForm was configured with {@link Ext.form.Basic#trackResetOnLoad
|
|
* trackResetOnLoad} then the Fields' *original values* are updated when the values are
|
|
* loaded by {@link Ext.form.Basic#setValues setValues} or {@link #loadRecord}.
|
|
*
|
|
* @return {Boolean}
|
|
*/
|
|
isDirty: function() {
|
|
return !!this.getFields().findBy(function(f) {
|
|
return f.isDirty();
|
|
});
|
|
},
|
|
|
|
checkDirtyDelay: function(){
|
|
this.checkDirtyTask.delay(10);
|
|
},
|
|
|
|
/**
|
|
* Check whether the dirty state of the entire form has changed since it was last checked, and
|
|
* if so fire the {@link #dirtychange dirtychange} event. This is automatically invoked
|
|
* when an individual field's `dirty` state changes.
|
|
*/
|
|
checkDirty: function() {
|
|
var dirty = this.isDirty();
|
|
if (dirty !== this.wasDirty) {
|
|
this.fireEvent('dirtychange', this, dirty);
|
|
this.wasDirty = dirty;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if the form contains a file upload field. This is used to determine the method for submitting the
|
|
* form: File uploads are not performed using normal 'Ajax' techniques, that is they are **not** performed using
|
|
* XMLHttpRequests. Instead a hidden `<form>` element containing all the fields is created temporarily and submitted
|
|
* with its [target][1] set to refer to a dynamically generated, hidden `<iframe>` which is inserted into the document
|
|
* but removed after the return data has been gathered.
|
|
*
|
|
* The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON
|
|
* to send the return object, then the [Content-Type][2] header must be set to "text/html" in order to tell the
|
|
* browser to insert the text unchanged into the document body.
|
|
*
|
|
* Characters which are significant to an HTML parser must be sent as HTML entities, so encode `"<"` as `"<"`,
|
|
* `"&"` as `"&"` etc.
|
|
*
|
|
* The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a
|
|
* responseText property in order to conform to the requirements of event handlers and callbacks.
|
|
*
|
|
* Be aware that file upload packets are sent with the content type [multipart/form][3] and some server technologies
|
|
* (notably JEE) may require some custom processing in order to retrieve parameter names and parameter values from
|
|
* the packet content.
|
|
*
|
|
* [1]: http://www.w3.org/TR/REC-html40/present/frames.html#adef-target
|
|
* [2]: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.17
|
|
* [3]: http://www.faqs.org/rfcs/rfc2388.html
|
|
*
|
|
* @return {Boolean}
|
|
*/
|
|
hasUpload: function() {
|
|
return !!this.getFields().findBy(function(f) {
|
|
return f.isFileUpload();
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Performs a predefined action (an implementation of {@link Ext.form.action.Action}) to perform application-
|
|
* specific processing.
|
|
*
|
|
* @param {String/Ext.form.action.Action} action The name of the predefined action type, or instance of {@link
|
|
* Ext.form.action.Action} to perform.
|
|
*
|
|
* @param {Object} [options] The options to pass to the {@link Ext.form.action.Action} that will get created,
|
|
* if the action argument is a String.
|
|
*
|
|
* All of the config options listed below are supported by both the {@link Ext.form.action.Submit submit} and
|
|
* {@link Ext.form.action.Load load} actions unless otherwise noted (custom actions could also accept other
|
|
* config options):
|
|
*
|
|
* @param {String} options.url
|
|
* The url for the action (defaults to the form's {@link #url}.)
|
|
*
|
|
* @param {String} options.method
|
|
* The form method to use (defaults to the form's method, or POST if not defined)
|
|
*
|
|
* @param {String/Object} options.params
|
|
* The params to pass (defaults to the form's baseParams, or none if not defined)
|
|
*
|
|
* Parameters are encoded as standard HTTP parameters using {@link Ext#urlEncode Ext.Object.toQueryString}.
|
|
*
|
|
* @param {Object} options.headers
|
|
* Request headers to set for the action.
|
|
*
|
|
* @param {Function} options.success
|
|
* The callback that will be invoked after a successful response (see top of {@link Ext.form.action.Submit submit}
|
|
* and {@link Ext.form.action.Load load} for a description of what constitutes a successful response).
|
|
* @param {Ext.form.Basic} options.success.form The form that requested the action.
|
|
* @param {Ext.form.action.Action} options.success.action The Action object which performed the operation.
|
|
* The action object contains these properties of interest:
|
|
*
|
|
* - {@link Ext.form.action.Action#response response}
|
|
* - {@link Ext.form.action.Action#result result} - interrogate for custom postprocessing
|
|
* - {@link Ext.form.action.Action#type type}
|
|
*
|
|
* @param {Function} options.failure
|
|
* The callback that will be invoked after a failed transaction attempt.
|
|
* @param {Ext.form.Basic} options.failure.form The form that requested the action.
|
|
* @param {Ext.form.action.Action} options.failure.action The Action object which performed the operation.
|
|
* The action object contains these properties of interest:
|
|
*
|
|
* - {@link Ext.form.action.Action#failureType failureType}
|
|
* - {@link Ext.form.action.Action#response response}
|
|
* - {@link Ext.form.action.Action#result result} - interrogate for custom postprocessing
|
|
* - {@link Ext.form.action.Action#type type}
|
|
*
|
|
* @param {Object} options.scope
|
|
* The scope in which to call the callback functions (The this reference for the callback functions).
|
|
*
|
|
* @param {Boolean} options.clientValidation
|
|
* Submit Action only. Determines whether a Form's fields are validated in a final call to {@link
|
|
* Ext.form.Basic#isValid isValid} prior to submission. Set to false to prevent this. If undefined, pre-submission
|
|
* field validation is performed.
|
|
*
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
doAction: function(action, options) {
|
|
if (Ext.isString(action)) {
|
|
action = Ext.ClassManager.instantiateByAlias('formaction.' + action, Ext.apply({}, options, {form: this}));
|
|
}
|
|
if (this.fireEvent('beforeaction', this, action) !== false) {
|
|
this.beforeAction(action);
|
|
Ext.defer(action.run, 100, action);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Shortcut to {@link #doAction do} a {@link Ext.form.action.Submit submit action}. This will use the
|
|
* {@link Ext.form.action.Submit AJAX submit action} by default. If the {@link #standardSubmit} config
|
|
* is enabled it will use a standard form element to submit, or if the {@link #api} config is present
|
|
* it will use the {@link Ext.form.action.DirectLoad Ext.direct.Direct submit action}.
|
|
*
|
|
* The following code:
|
|
*
|
|
* myFormPanel.getForm().submit({
|
|
* clientValidation: true,
|
|
* url: 'updateConsignment.php',
|
|
* params: {
|
|
* newStatus: 'delivered'
|
|
* },
|
|
* success: function(form, action) {
|
|
* Ext.Msg.alert('Success', action.result.msg);
|
|
* },
|
|
* failure: function(form, action) {
|
|
* switch (action.failureType) {
|
|
* case Ext.form.action.Action.CLIENT_INVALID:
|
|
* Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
|
|
* break;
|
|
* case Ext.form.action.Action.CONNECT_FAILURE:
|
|
* Ext.Msg.alert('Failure', 'Ajax communication failed');
|
|
* break;
|
|
* case Ext.form.action.Action.SERVER_INVALID:
|
|
* Ext.Msg.alert('Failure', action.result.msg);
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* would process the following server response for a successful submission:
|
|
*
|
|
* {
|
|
* "success":true, // note this is Boolean, not string
|
|
* "msg":"Consignment updated"
|
|
* }
|
|
*
|
|
* and the following server response for a failed submission:
|
|
*
|
|
* {
|
|
* "success":false, // note this is Boolean, not string
|
|
* "msg":"You do not have permission to perform this operation"
|
|
* }
|
|
*
|
|
* @param {Object} options The options to pass to the action (see {@link #doAction} for details).
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
submit: function(options) {
|
|
options = options || {};
|
|
var me = this,
|
|
action;
|
|
|
|
if (options.standardSubmit || me.standardSubmit) {
|
|
action = 'standardsubmit';
|
|
} else {
|
|
action = me.api ? 'directsubmit' : 'submit';
|
|
}
|
|
|
|
return me.doAction(action, options);
|
|
},
|
|
|
|
/**
|
|
* Shortcut to {@link #doAction do} a {@link Ext.form.action.Load load action}.
|
|
* @param {Object} options The options to pass to the action (see {@link #doAction} for details)
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
load: function(options) {
|
|
return this.doAction(this.api ? 'directload' : 'load', options);
|
|
},
|
|
|
|
/**
|
|
* Persists the values in this form into the passed {@link Ext.data.Model} object in a beginEdit/endEdit block.
|
|
* If the record is not specified, it will attempt to update (if it exists) the record provided to loadRecord.
|
|
* @param {Ext.data.Model} [record] The record to edit
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
updateRecord: function(record) {
|
|
record = record || this._record;
|
|
if (!record) {
|
|
return this;
|
|
}
|
|
|
|
var fields = record.fields.items,
|
|
values = this.getFieldValues(),
|
|
obj = {},
|
|
i = 0,
|
|
len = fields.length,
|
|
name;
|
|
|
|
for (; i < len; ++i) {
|
|
name = fields[i].name;
|
|
|
|
if (values.hasOwnProperty(name)) {
|
|
obj[name] = values[name];
|
|
}
|
|
}
|
|
|
|
record.beginEdit();
|
|
record.set(obj);
|
|
record.endEdit();
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Loads an {@link Ext.data.Model} into this form by calling {@link #setValues} with the
|
|
* {@link Ext.data.Model#raw record data}.
|
|
* See also {@link #trackResetOnLoad}.
|
|
* @param {Ext.data.Model} record The record to load
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
loadRecord: function(record) {
|
|
this._record = record;
|
|
return this.setValues(record.getData());
|
|
},
|
|
|
|
/**
|
|
* Returns the last Ext.data.Model instance that was loaded via {@link #loadRecord}
|
|
* @return {Ext.data.Model} The record
|
|
*/
|
|
getRecord: function() {
|
|
return this._record;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called before an action is performed via {@link #doAction}.
|
|
* @param {Ext.form.action.Action} action The Action instance that was invoked
|
|
*/
|
|
beforeAction: function(action) {
|
|
var me = this,
|
|
waitMsg = action.waitMsg,
|
|
maskCls = Ext.baseCSSPrefix + 'mask-loading',
|
|
fields = me.getFields().items,
|
|
f,
|
|
fLen = fields.length,
|
|
field, waitMsgTarget;
|
|
|
|
// Call HtmlEditor's syncValue before actions
|
|
for (f = 0; f < fLen; f++) {
|
|
field = fields[f];
|
|
|
|
if (field.isFormField && field.syncValue) {
|
|
field.syncValue();
|
|
}
|
|
}
|
|
|
|
if (waitMsg) {
|
|
waitMsgTarget = me.waitMsgTarget;
|
|
if (waitMsgTarget === true) {
|
|
me.owner.el.mask(waitMsg, maskCls);
|
|
} else if (waitMsgTarget) {
|
|
waitMsgTarget = me.waitMsgTarget = Ext.get(waitMsgTarget);
|
|
waitMsgTarget.mask(waitMsg, maskCls);
|
|
} else {
|
|
me.floatingAncestor = me.owner.up('[floating]');
|
|
|
|
// https://sencha.jira.com/browse/EXTJSIV-6397
|
|
// When the "wait" MessageBox is hidden, the ZIndexManager activates the previous
|
|
// topmost floating item which would be any Window housing this form.
|
|
// That kicks off a delayed focus call on that Window.
|
|
// So if any form post submit processing displayed a MessageBox, that gets
|
|
// stomped on.
|
|
// The solution is to not move focus at all during this process.
|
|
if (me.floatingAncestor) {
|
|
me.savePreventFocusOnActivate = me.floatingAncestor.preventFocusOnActivate;
|
|
me.floatingAncestor.preventFocusOnActivate = true;
|
|
}
|
|
Ext.MessageBox.wait(waitMsg, action.waitTitle || me.waitTitle);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called after an action is performed via {@link #doAction}.
|
|
* @param {Ext.form.action.Action} action The Action instance that was invoked
|
|
* @param {Boolean} success True if the action completed successfully, false, otherwise.
|
|
*/
|
|
afterAction: function(action, success) {
|
|
var me = this;
|
|
if (action.waitMsg) {
|
|
var messageBox = Ext.MessageBox,
|
|
waitMsgTarget = me.waitMsgTarget;
|
|
if (waitMsgTarget === true) {
|
|
me.owner.el.unmask();
|
|
} else if (waitMsgTarget) {
|
|
waitMsgTarget.unmask();
|
|
} else {
|
|
messageBox.hide();
|
|
}
|
|
}
|
|
// Restore setting of any floating ancestor which was manipulated in beforeAction
|
|
if (me.floatingAncestor) {
|
|
me.floatingAncestor.preventFocusOnActivate = me.savePreventFocusOnActivate;
|
|
}
|
|
if (success) {
|
|
if (action.reset) {
|
|
me.reset();
|
|
}
|
|
Ext.callback(action.success, action.scope || action, [me, action]);
|
|
me.fireEvent('actioncomplete', me, action);
|
|
} else {
|
|
Ext.callback(action.failure, action.scope || action, [me, action]);
|
|
me.fireEvent('actionfailed', me, action);
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* Find a specific {@link Ext.form.field.Field} in this form by id or name.
|
|
* @param {String} id The value to search for (specify either a {@link Ext.Component#id id} or
|
|
* {@link Ext.form.field.Field#getName name or hiddenName}).
|
|
* @return {Ext.form.field.Field} The first matching field, or `null` if none was found.
|
|
*/
|
|
findField: function(id) {
|
|
return this.getFields().findBy(function(f) {
|
|
return f.id === id || f.getName() === id;
|
|
});
|
|
},
|
|
|
|
|
|
/**
|
|
* Mark fields in this form invalid in bulk.
|
|
* @param {Object/Object[]/Ext.data.Errors} errors
|
|
* Either an array in the form `[{id:'fieldId', msg:'The message'}, ...]`,
|
|
* an object hash of `{id: msg, id2: msg2}`, or a {@link Ext.data.Errors} object.
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
markInvalid: function(errors) {
|
|
var me = this,
|
|
e, eLen, error, value,
|
|
key;
|
|
|
|
function mark(fieldId, msg) {
|
|
var field = me.findField(fieldId);
|
|
if (field) {
|
|
field.markInvalid(msg);
|
|
}
|
|
}
|
|
|
|
if (Ext.isArray(errors)) {
|
|
eLen = errors.length;
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
error = errors[e];
|
|
mark(error.id, error.msg);
|
|
}
|
|
} else if (errors instanceof Ext.data.Errors) {
|
|
eLen = errors.items.length;
|
|
for (e = 0; e < eLen; e++) {
|
|
error = errors.items[e];
|
|
|
|
mark(error.field, error.message);
|
|
}
|
|
} else {
|
|
for (key in errors) {
|
|
if (errors.hasOwnProperty(key)) {
|
|
value = errors[key];
|
|
mark(key, value, errors);
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Set values for fields in this form in bulk.
|
|
*
|
|
* @param {Object/Object[]} values Either an array in the form:
|
|
*
|
|
* [{id:'clientName', value:'Fred. Olsen Lines'},
|
|
* {id:'portOfLoading', value:'FXT'},
|
|
* {id:'portOfDischarge', value:'OSL'} ]
|
|
*
|
|
* or an object hash of the form:
|
|
*
|
|
* {
|
|
* clientName: 'Fred. Olsen Lines',
|
|
* portOfLoading: 'FXT',
|
|
* portOfDischarge: 'OSL'
|
|
* }
|
|
*
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
setValues: function(values) {
|
|
var me = this,
|
|
v, vLen, val, field;
|
|
|
|
function setVal(fieldId, val) {
|
|
var field = me.findField(fieldId);
|
|
if (field) {
|
|
field.setValue(val);
|
|
if (me.trackResetOnLoad) {
|
|
field.resetOriginalValue();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Suspend here because setting the value on a field could trigger
|
|
// a layout, for example if an error gets set, or it's a display field
|
|
Ext.suspendLayouts();
|
|
if (Ext.isArray(values)) {
|
|
// array of objects
|
|
vLen = values.length;
|
|
|
|
for (v = 0; v < vLen; v++) {
|
|
val = values[v];
|
|
|
|
setVal(val.id, val.value);
|
|
}
|
|
} else {
|
|
// object hash
|
|
Ext.iterate(values, setVal);
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the fields in the form as a set of key/value pairs, using their
|
|
* {@link Ext.form.field.Field#getSubmitData getSubmitData()} method to collect the values.
|
|
* If multiple fields return values under the same name those values will be combined into an Array.
|
|
* This is similar to {@link Ext.form.Basic#getFieldValues getFieldValues} except that this method
|
|
* collects only String values for submission, while getFieldValues collects type-specific data
|
|
* values (e.g. Date objects for date fields.)
|
|
*
|
|
* @param {Boolean} [asString=false] If true, will return the key/value collection as a single
|
|
* URL-encoded param string.
|
|
* @param {Boolean} [dirtyOnly=false] If true, only fields that are dirty will be included in the result.
|
|
* @param {Boolean} [includeEmptyText=false] If true, the configured emptyText of empty fields will be used.
|
|
* @param {Boolean} [useDataValues=false] If true, the {@link Ext.form.field.Field#getModelData getModelData}
|
|
* method is used to retrieve values from fields, otherwise the {@link Ext.form.field.Field#getSubmitData getSubmitData}
|
|
* method is used.
|
|
* @return {String/Object}
|
|
*/
|
|
getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) {
|
|
var values = {},
|
|
fields = this.getFields().items,
|
|
f,
|
|
fLen = fields.length,
|
|
isArray = Ext.isArray,
|
|
field, data, val, bucket, name;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
field = fields[f];
|
|
|
|
if (!dirtyOnly || field.isDirty()) {
|
|
data = field[useDataValues ? 'getModelData' : 'getSubmitData'](includeEmptyText);
|
|
|
|
if (Ext.isObject(data)) {
|
|
for (name in data) {
|
|
if (data.hasOwnProperty(name)) {
|
|
val = data[name];
|
|
|
|
if (includeEmptyText && val === '') {
|
|
val = field.emptyText || '';
|
|
}
|
|
|
|
if (values.hasOwnProperty(name)) {
|
|
bucket = values[name];
|
|
|
|
if (!isArray(bucket)) {
|
|
bucket = values[name] = [bucket];
|
|
}
|
|
|
|
if (isArray(val)) {
|
|
values[name] = bucket.concat(val);
|
|
} else {
|
|
bucket.push(val);
|
|
}
|
|
} else {
|
|
values[name] = val;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (asString) {
|
|
values = Ext.Object.toQueryString(values);
|
|
}
|
|
return values;
|
|
},
|
|
|
|
/**
|
|
* Retrieves the fields in the form as a set of key/value pairs, using their
|
|
* {@link Ext.form.field.Field#getModelData getModelData()} method to collect the values.
|
|
* If multiple fields return values under the same name those values will be combined into an Array.
|
|
* This is similar to {@link #getValues} except that this method collects type-specific data values
|
|
* (e.g. Date objects for date fields) while getValues returns only String values for submission.
|
|
*
|
|
* @param {Boolean} [dirtyOnly=false] If true, only fields that are dirty will be included in the result.
|
|
* @return {Object}
|
|
*/
|
|
getFieldValues: function(dirtyOnly) {
|
|
return this.getValues(false, dirtyOnly, false, true);
|
|
},
|
|
|
|
/**
|
|
* Clears all invalid field messages in this form.
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
clearInvalid: function() {
|
|
Ext.suspendLayouts();
|
|
|
|
var me = this,
|
|
fields = me.getFields().items,
|
|
f,
|
|
fLen = fields.length;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
fields[f].clearInvalid();
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Resets all fields in this form. By default, any record bound by {@link #loadRecord}
|
|
* will be retained.
|
|
* @param {Boolean} [resetRecord=false] True to unbind any record set
|
|
* by {@link #loadRecord}
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
reset: function(resetRecord) {
|
|
Ext.suspendLayouts();
|
|
|
|
var me = this,
|
|
fields = me.getFields().items,
|
|
f,
|
|
fLen = fields.length;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
fields[f].reset();
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
|
|
if (resetRecord === true) {
|
|
delete me._record;
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Calls {@link Ext#apply Ext.apply} for all fields in this form with the passed object.
|
|
* @param {Object} obj The object to be applied
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
applyToFields: function(obj) {
|
|
var fields = this.getFields().items,
|
|
f,
|
|
fLen = fields.length;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
Ext.apply(fields[f], obj);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Calls {@link Ext#applyIf Ext.applyIf} for all field in this form with the passed object.
|
|
* @param {Object} obj The object to be applied
|
|
* @return {Ext.form.Basic} this
|
|
*/
|
|
applyIfToFields: function(obj) {
|
|
var fields = this.getFields().items,
|
|
f,
|
|
fLen = fields.length;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
Ext.applyIf(fields[f], obj);
|
|
}
|
|
|
|
return this;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.component.field.Text', {
|
|
override: 'Ext.layout.component.field.Text',
|
|
|
|
adjustIEInputPadding: function(ownerContext) {
|
|
var owner = this.owner;
|
|
|
|
// adjust for IE 6/7 strict content-box model
|
|
owner.bodyEl.setStyle(
|
|
owner.getHierarchyState().rtl ? 'padding-left' : 'padding-right',
|
|
this.ieInputWidthAdjustment + 'px'
|
|
);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A mixin for {@link Ext.container.Container} components that are likely to have form fields in their
|
|
* items subtree. Adds the following capabilities:
|
|
*
|
|
* - Methods for handling the addition and removal of {@link Ext.form.Labelable} and {@link Ext.form.field.Field}
|
|
* instances at any depth within the container.
|
|
* - Events ({@link #fieldvaliditychange} and {@link #fielderrorchange}) for handling changes to the state
|
|
* of individual fields at the container level.
|
|
* - Automatic application of {@link #fieldDefaults} config properties to each field added within the
|
|
* container, to facilitate uniform configuration of all fields.
|
|
*
|
|
* This mixin is primarily for internal use by {@link Ext.form.Panel} and {@link Ext.form.FieldContainer},
|
|
* and should not normally need to be used directly.
|
|
*
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*/
|
|
Ext.define('Ext.form.FieldAncestor', {
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Object} fieldDefaults
|
|
* If specified, the properties in this object are used as default config values for each {@link Ext.form.Labelable}
|
|
* instance (e.g. {@link Ext.form.field.Base} or {@link Ext.form.FieldContainer}) that is added as a descendant of
|
|
* this container. Corresponding values specified in an individual field's own configuration, or from the {@link
|
|
* Ext.container.Container#defaults defaults config} of its parent container, will take precedence. See the
|
|
* documentation for {@link Ext.form.Labelable} to see what config options may be specified in the fieldDefaults.
|
|
*
|
|
* Example:
|
|
*
|
|
* new Ext.form.Panel({
|
|
* fieldDefaults: {
|
|
* labelAlign: 'left',
|
|
* labelWidth: 100
|
|
* },
|
|
* items: [{
|
|
* xtype: 'fieldset',
|
|
* defaults: {
|
|
* labelAlign: 'top'
|
|
* },
|
|
* items: [{
|
|
* name: 'field1'
|
|
* }, {
|
|
* name: 'field2'
|
|
* }]
|
|
* }, {
|
|
* xtype: 'fieldset',
|
|
* items: [{
|
|
* name: 'field3',
|
|
* labelWidth: 150
|
|
* }, {
|
|
* name: 'field4'
|
|
* }]
|
|
* }]
|
|
* });
|
|
*
|
|
* In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100
|
|
* (from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use
|
|
* the labelWidth:150 from its own config.
|
|
*/
|
|
|
|
|
|
xhooks: {
|
|
initHierarchyState: function(hierarchyState) {
|
|
if (this.fieldDefaults) {
|
|
if (hierarchyState.fieldDefaults) {
|
|
hierarchyState.fieldDefaults = Ext.apply(Ext.Object.chain(hierarchyState.fieldDefaults), this.fieldDefaults);
|
|
} else {
|
|
hierarchyState.fieldDefaults = this.fieldDefaults;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initializes the FieldAncestor's state; this must be called from the initComponent method of any components
|
|
* importing this mixin.
|
|
* @protected
|
|
*/
|
|
initFieldAncestor: function() {
|
|
var me = this;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event fieldvaliditychange
|
|
* Fires when the validity state of any one of the {@link Ext.form.field.Field} instances within this
|
|
* container changes.
|
|
* @param {Ext.form.FieldAncestor} this
|
|
* @param {Ext.form.Labelable} The Field instance whose validity changed
|
|
* @param {String} isValid The field's new validity state
|
|
*/
|
|
'fieldvaliditychange',
|
|
|
|
/**
|
|
* @event fielderrorchange
|
|
* Fires when the active error message is changed for any one of the {@link Ext.form.Labelable} instances
|
|
* within this container.
|
|
* @param {Ext.form.FieldAncestor} this
|
|
* @param {Ext.form.Labelable} The Labelable instance whose active error was changed
|
|
* @param {String} error The active error message
|
|
*/
|
|
'fielderrorchange'
|
|
);
|
|
|
|
// We use the monitor here as opposed to event bubbling. The problem with bubbling is it doesn't
|
|
// let us react to items being added/remove at different places in the hierarchy which may have an
|
|
// impact on the error/valid state.
|
|
me.monitor = new Ext.container.Monitor({
|
|
scope: me,
|
|
selector: '[isFormField]',
|
|
addHandler: me.onChildFieldAdd,
|
|
removeHandler: me.onChildFieldRemove
|
|
});
|
|
me.initFieldDefaults();
|
|
},
|
|
|
|
initMonitor: function() {
|
|
this.monitor.bind(this);
|
|
},
|
|
|
|
onChildFieldAdd: function(field) {
|
|
var me = this;
|
|
me.mon(field, 'errorchange', me.handleFieldErrorChange, me);
|
|
me.mon(field, 'validitychange', me.handleFieldValidityChange, me);
|
|
},
|
|
|
|
onChildFieldRemove: function(field) {
|
|
var me = this;
|
|
me.mun(field, 'errorchange', me.handleFieldErrorChange, me);
|
|
me.mun(field, 'validitychange', me.handleFieldValidityChange, me);
|
|
},
|
|
|
|
/**
|
|
* @private Initialize the {@link #fieldDefaults} object
|
|
*/
|
|
initFieldDefaults: function() {
|
|
if (!this.fieldDefaults) {
|
|
this.fieldDefaults = {};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Handle bubbled validitychange events from descendants; invoke the aggregated event and method
|
|
*/
|
|
handleFieldValidityChange: function(field, isValid) {
|
|
var me = this;
|
|
if (field !== me) {
|
|
me.fireEvent('fieldvaliditychange', me, field, isValid);
|
|
me.onFieldValidityChange(field, isValid);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Handle bubbled errorchange events from descendants; invoke the aggregated event and method
|
|
*/
|
|
handleFieldErrorChange: function(labelable, activeError) {
|
|
var me = this;
|
|
if (labelable !== me) {
|
|
me.fireEvent('fielderrorchange', me, labelable, activeError);
|
|
me.onFieldErrorChange(labelable, activeError);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fired when the validity of any field within the container changes.
|
|
* @param {Ext.form.field.Field} field The sub-field whose validity changed
|
|
* @param {Boolean} valid The new validity state
|
|
* @protected
|
|
*/
|
|
onFieldValidityChange: Ext.emptyFn,
|
|
|
|
/**
|
|
* Fired when the error message of any field within the container changes.
|
|
* @param {Ext.form.Labelable} field The sub-field whose active error changed
|
|
* @param {String} error The new active error message
|
|
* @protected
|
|
*/
|
|
onFieldErrorChange: Ext.emptyFn,
|
|
|
|
beforeDestroy: function(){
|
|
this.monitor.unbind();
|
|
this.callParent();
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.FieldContainer', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.component.field.Field ,
|
|
|
|
alias: 'layout.fieldcontainer',
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'fieldcontainer',
|
|
|
|
waitForOuterHeightInDom: true,
|
|
waitForOuterWidthInDom: true,
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var owner = this.owner;
|
|
this.callParent(arguments);
|
|
|
|
// Tell Component.measureAutoDimensions to measure the DOM when containerChildrenSizeDone is true
|
|
ownerContext.hasRawContent = true;
|
|
owner.bodyEl.setStyle('height', '');
|
|
owner.containerEl.setStyle('height', '');
|
|
ownerContext.containerElContext = ownerContext.getEl('containerEl');
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
// since we are measuring the outer el, we have to wait for whatever is in our
|
|
// container to be flushed to the DOM... especially for things like box layouts
|
|
// that size the innerCt since that is all that will contribute to our size!
|
|
return ownerContext.hasDomProp('containerLayoutDone') ? this.callParent(arguments) : NaN;
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
// see measureContentHeight
|
|
return ownerContext.hasDomProp('containerLayoutDone') ? this.callParent(arguments) : NaN;
|
|
},
|
|
|
|
publishInnerWidth: function (ownerContext, width) {
|
|
var bodyContext = ownerContext.bodyCellContext,
|
|
innerWidth = bodyContext.el.getWidth();
|
|
|
|
bodyContext.setWidth(innerWidth, false);
|
|
ownerContext.containerElContext.setWidth(innerWidth, false);
|
|
},
|
|
|
|
publishInnerHeight: function (ownerContext, height) {
|
|
var bodyContext = ownerContext.bodyCellContext,
|
|
containerElContext = ownerContext.containerElContext;
|
|
|
|
height -= this.measureLabelErrorHeight(ownerContext);
|
|
bodyContext.setHeight(height);
|
|
containerElContext.setHeight(height);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* FieldContainer is a derivation of {@link Ext.container.Container Container} that implements the
|
|
* {@link Ext.form.Labelable Labelable} mixin. This allows it to be configured so that it is rendered with
|
|
* a {@link #fieldLabel field label} and optional {@link #msgTarget error message} around its sub-items.
|
|
* This is useful for arranging a group of fields or other components within a single item in a form, so
|
|
* that it lines up nicely with other fields. A common use is for grouping a set of related fields under
|
|
* a single label in a form.
|
|
*
|
|
* The container's configured {@link #cfg-items} will be layed out within the field body area according to the
|
|
* configured {@link #layout} type. The default layout is `'autocontainer'`.
|
|
*
|
|
* Like regular fields, FieldContainer can inherit its decoration configuration from the
|
|
* {@link Ext.form.Panel#fieldDefaults fieldDefaults} of an enclosing FormPanel. In addition,
|
|
* FieldContainer itself can pass {@link #fieldDefaults} to any {@link Ext.form.Labelable fields}
|
|
* it may itself contain.
|
|
*
|
|
* If you are grouping a set of {@link Ext.form.field.Checkbox Checkbox} or {@link Ext.form.field.Radio Radio}
|
|
* fields in a single labeled container, consider using a {@link Ext.form.CheckboxGroup}
|
|
* or {@link Ext.form.RadioGroup} instead as they are specialized for handling those types.
|
|
*
|
|
* # Example
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'FieldContainer Example',
|
|
* width: 550,
|
|
* bodyPadding: 10,
|
|
*
|
|
* items: [{
|
|
* xtype: 'fieldcontainer',
|
|
* fieldLabel: 'Last Three Jobs',
|
|
* labelWidth: 100,
|
|
*
|
|
* // The body area will contain three text fields, arranged
|
|
* // horizontally, separated by draggable splitters.
|
|
* layout: 'hbox',
|
|
* items: [{
|
|
* xtype: 'textfield',
|
|
* flex: 1
|
|
* }, {
|
|
* xtype: 'splitter'
|
|
* }, {
|
|
* xtype: 'textfield',
|
|
* flex: 1
|
|
* }, {
|
|
* xtype: 'splitter'
|
|
* }, {
|
|
* xtype: 'textfield',
|
|
* flex: 1
|
|
* }]
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* # Usage of fieldDefaults
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'FieldContainer Example',
|
|
* width: 350,
|
|
* bodyPadding: 10,
|
|
*
|
|
* items: [{
|
|
* xtype: 'fieldcontainer',
|
|
* fieldLabel: 'Your Name',
|
|
* labelWidth: 75,
|
|
* defaultType: 'textfield',
|
|
*
|
|
* // Arrange fields vertically, stretched to full width
|
|
* layout: 'anchor',
|
|
* defaults: {
|
|
* layout: '100%'
|
|
* },
|
|
*
|
|
* // These config values will be applied to both sub-fields, except
|
|
* // for Last Name which will use its own msgTarget.
|
|
* fieldDefaults: {
|
|
* msgTarget: 'under',
|
|
* labelAlign: 'top'
|
|
* },
|
|
*
|
|
* items: [{
|
|
* fieldLabel: 'First Name',
|
|
* name: 'firstName'
|
|
* }, {
|
|
* fieldLabel: 'Last Name',
|
|
* name: 'lastName',
|
|
* msgTarget: 'under'
|
|
* }]
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*/
|
|
Ext.define('Ext.form.FieldContainer', {
|
|
extend: Ext.container.Container ,
|
|
mixins: {
|
|
labelable: Ext.form.Labelable ,
|
|
fieldAncestor: Ext.form.FieldAncestor
|
|
},
|
|
|
|
|
|
alias: 'widget.fieldcontainer',
|
|
|
|
componentLayout: 'fieldcontainer',
|
|
|
|
componentCls: Ext.baseCSSPrefix + 'form-fieldcontainer',
|
|
|
|
// Used by the layout system, typically the scrolling el is the targetEl, however we need
|
|
// to let it know we're using something different
|
|
customOverflowEl: 'containerEl',
|
|
|
|
childEls: [
|
|
'containerEl'
|
|
],
|
|
|
|
/**
|
|
* @cfg autoScroll @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} combineLabels
|
|
* If set to true, and there is no defined {@link #fieldLabel}, the field container will automatically
|
|
* generate its label by combining the labels of all the fields it contains. Defaults to false.
|
|
*/
|
|
combineLabels: false,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} labelConnector
|
|
* The string to use when joining the labels of individual sub-fields, when {@link #combineLabels} is
|
|
* set to true. Defaults to ', '.
|
|
*/
|
|
labelConnector: ', ',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} combineErrors
|
|
* If set to true, the field container will automatically combine and display the validation errors from
|
|
* all the fields it contains as a single error on the container, according to the configured
|
|
* {@link #msgTarget}. Defaults to false.
|
|
*/
|
|
combineErrors: false,
|
|
|
|
maskOnDisable: false,
|
|
// If we allow this to mark with the invalidCls it will cascade to all
|
|
// child fields, let them handle themselves
|
|
invalidCls: '',
|
|
|
|
fieldSubTpl: '<div id="{id}-containerEl" class="{containerElCls}">{%this.renderContainer(out,values)%}</div>',
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
// Init mixins
|
|
me.initLabelable();
|
|
me.initFieldAncestor();
|
|
|
|
me.callParent();
|
|
me.initMonitor();
|
|
},
|
|
|
|
getOverflowEl: function(){
|
|
return this.containerEl;
|
|
},
|
|
|
|
/**
|
|
* @protected Called when a {@link Ext.form.Labelable} instance is added to the container's subtree.
|
|
* @param {Ext.form.Labelable} labelable The instance that was added
|
|
*/
|
|
onAdd: function(labelable) {
|
|
var me = this;
|
|
|
|
// Fix for https://sencha.jira.com/browse/EXTJSIV-6424
|
|
// In FF, positioning absolutely within a TD positions relative to the TR!
|
|
// So we must add the width of a visible, left-aligned label cell to the x coordinate.
|
|
if (Ext.isGecko && me.layout.type === 'absolute' && !me.hideLabel && me.labelAlign !== 'top') {
|
|
labelable.x += (me.labelWidth + me.labelPad);
|
|
}
|
|
me.callParent(arguments);
|
|
if (me.combineLabels) {
|
|
labelable.oldHideLabel = labelable.hideLabel;
|
|
labelable.hideLabel = true;
|
|
}
|
|
me.updateLabel();
|
|
},
|
|
|
|
/**
|
|
* @protected Called when a {@link Ext.form.Labelable} instance is removed from the container's subtree.
|
|
* @param {Ext.form.Labelable} labelable The instance that was removed
|
|
*/
|
|
onRemove: function(labelable, isDestroying) {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (!isDestroying) {
|
|
if (me.combineLabels) {
|
|
labelable.hideLabel = labelable.oldHideLabel;
|
|
}
|
|
me.updateLabel();
|
|
}
|
|
},
|
|
|
|
initRenderTpl: function() {
|
|
var me = this;
|
|
if (!me.hasOwnProperty('renderTpl')) {
|
|
me.renderTpl = me.getTpl('labelableRenderTpl');
|
|
}
|
|
return me.callParent();
|
|
},
|
|
|
|
initRenderData: function() {
|
|
var me = this,
|
|
data = me.callParent();
|
|
|
|
data.containerElCls = me.containerElCls;
|
|
return Ext.applyIf(data, me.getLabelableRenderData());
|
|
},
|
|
|
|
/**
|
|
* Returns the combined field label if {@link #combineLabels} is set to true and if there is no
|
|
* set {@link #fieldLabel}. Otherwise returns the fieldLabel like normal. You can also override
|
|
* this method to provide a custom generated label.
|
|
* @template
|
|
* @return {String} The label, or empty string if none.
|
|
*/
|
|
getFieldLabel: function() {
|
|
var label = this.fieldLabel || '';
|
|
if (!label && this.combineLabels) {
|
|
label = Ext.Array.map(this.query('[isFieldLabelable]'), function(field) {
|
|
return field.getFieldLabel();
|
|
}).join(this.labelConnector);
|
|
}
|
|
return label;
|
|
},
|
|
|
|
getSubTplData: function() {
|
|
var ret = this.initRenderData();
|
|
|
|
Ext.apply(ret, this.subTplData);
|
|
return ret;
|
|
},
|
|
|
|
getSubTplMarkup: function() {
|
|
var me = this,
|
|
tpl = me.getTpl('fieldSubTpl'),
|
|
html;
|
|
|
|
if (!tpl.renderContent) {
|
|
me.setupRenderTpl(tpl);
|
|
}
|
|
|
|
html = tpl.apply(me.getSubTplData());
|
|
return html;
|
|
},
|
|
|
|
/**
|
|
* @private Updates the content of the labelEl if it is rendered
|
|
*/
|
|
updateLabel: function() {
|
|
var me = this,
|
|
label = me.labelEl;
|
|
|
|
if (label) {
|
|
me.setFieldLabel(me.getFieldLabel());
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* @private Fired when the error message of any field within the container changes, and updates the
|
|
* combined error message to match.
|
|
*/
|
|
onFieldErrorChange: function(field, activeError) {
|
|
if (this.combineErrors) {
|
|
var me = this,
|
|
oldError = me.getActiveError(),
|
|
invalidFields = Ext.Array.filter(me.query('[isFormField]'), function(field) {
|
|
return field.hasActiveError();
|
|
}),
|
|
newErrors = me.getCombinedErrors(invalidFields);
|
|
|
|
if (newErrors) {
|
|
me.setActiveErrors(newErrors);
|
|
} else {
|
|
me.unsetActiveError();
|
|
}
|
|
|
|
if (oldError !== me.getActiveError()) {
|
|
me.doComponentLayout();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Takes an Array of invalid {@link Ext.form.field.Field} objects and builds a combined list of error
|
|
* messages from them. Defaults to prepending each message by the field name and a colon. This
|
|
* can be overridden to provide custom combined error message handling, for instance changing
|
|
* the format of each message or sorting the array (it is sorted in order of appearance by default).
|
|
* @param {Ext.form.field.Field[]} invalidFields An Array of the sub-fields which are currently invalid.
|
|
* @return {String[]} The combined list of error messages
|
|
*/
|
|
getCombinedErrors: function(invalidFields) {
|
|
var errors = [],
|
|
f,
|
|
fLen = invalidFields.length,
|
|
field,
|
|
activeErrors, a, aLen,
|
|
error, label;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
field = invalidFields[f];
|
|
activeErrors = field.getActiveErrors();
|
|
aLen = activeErrors.length;
|
|
|
|
for (a = 0; a < aLen; a++) {
|
|
error = activeErrors[a];
|
|
label = field.getFieldLabel();
|
|
|
|
errors.push((label ? label + ': ' : '') + error);
|
|
}
|
|
}
|
|
|
|
return errors;
|
|
},
|
|
|
|
getTargetEl: function() {
|
|
return this.containerEl;
|
|
},
|
|
|
|
applyTargetCls: function(targetCls) {
|
|
var containerElCls = this.containerElCls;
|
|
|
|
this.containerElCls = containerElCls ? containerElCls + ' ' + targetCls : targetCls;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This layout implements the column arrangement for {@link Ext.form.CheckboxGroup} and {@link Ext.form.RadioGroup}.
|
|
* It groups the component's sub-items into columns based on the component's
|
|
* {@link Ext.form.CheckboxGroup#columns columns} and {@link Ext.form.CheckboxGroup#vertical} config properties.
|
|
*/
|
|
Ext.define('Ext.layout.container.CheckboxGroup', {
|
|
extend: Ext.layout.container.Container ,
|
|
alias: ['layout.checkboxgroup'],
|
|
|
|
/**
|
|
* @cfg {Boolean} [autoFlex=true]
|
|
* By default, CheckboxGroup allocates all available space to the configured columns meaning that
|
|
* column are evenly spaced across the container.
|
|
*
|
|
* To have each column only be wide enough to fit the container Checkboxes (or Radios), set `autoFlex` to `false`
|
|
*/
|
|
autoFlex: true,
|
|
|
|
type: 'checkboxgroup',
|
|
|
|
createsInnerCt: true,
|
|
|
|
childEls: [
|
|
'innerCt'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<table id="{ownerId}-innerCt" class="' + Ext.plainTableCls + '" cellpadding="0"',
|
|
'role="presentation" style="{tableStyle}"><tbody><tr>',
|
|
'<tpl for="columns">',
|
|
'<td class="{parent.colCls}" valign="top" style="{style}">',
|
|
'{% this.renderColumn(out,parent,xindex-1) %}',
|
|
'</td>',
|
|
'</tpl>',
|
|
'</tr></tbody></table>'
|
|
],
|
|
|
|
lastOwnerItemsGeneration : null,
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
columns,
|
|
numCols,
|
|
i, width, cwidth,
|
|
totalFlex = 0, flexedCols = 0,
|
|
autoFlex = me.autoFlex,
|
|
innerCtStyle = me.innerCt.dom.style;
|
|
|
|
me.callParent(arguments);
|
|
|
|
columns = me.columnNodes;
|
|
ownerContext.innerCtContext = ownerContext.getEl('innerCt', me);
|
|
|
|
// The columns config may be an array of widths. Any value < 1 is taken to be a fraction:
|
|
if (!ownerContext.widthModel.shrinkWrap) {
|
|
numCols = columns.length;
|
|
|
|
// If columns is an array of numeric widths
|
|
if (me.columnsArray) {
|
|
|
|
// first calculate total flex
|
|
for (i = 0; i < numCols; i++) {
|
|
width = me.owner.columns[i];
|
|
if (width < 1) {
|
|
totalFlex += width;
|
|
flexedCols++;
|
|
}
|
|
}
|
|
|
|
// now apply widths
|
|
for (i = 0; i < numCols; i++) {
|
|
width = me.owner.columns[i];
|
|
if (width < 1) {
|
|
cwidth = ((width / totalFlex) * 100) + '%';
|
|
} else {
|
|
cwidth = width + 'px';
|
|
}
|
|
columns[i].style.width = cwidth;
|
|
}
|
|
}
|
|
|
|
// Otherwise it's the *number* of columns, so distributed the widths evenly
|
|
else {
|
|
for (i = 0; i < numCols; i++) {
|
|
// autoFlex: true will automatically calculate % widths
|
|
// autoFlex: false allows the table to decide (shrinkWrap, in effect)
|
|
// on a per-column basis
|
|
cwidth = autoFlex
|
|
? (1 / numCols * 100) + '%'
|
|
: '';
|
|
columns[i].style.width = cwidth;
|
|
flexedCols++;
|
|
}
|
|
}
|
|
|
|
// no flexed cols -- all widths are fixed
|
|
if (!flexedCols) {
|
|
innerCtStyle.tableLayout = 'fixed';
|
|
innerCtStyle.width = '';
|
|
// some flexed cols -- need to fix some
|
|
} else if (flexedCols < numCols) {
|
|
innerCtStyle.tableLayout = 'fixed';
|
|
innerCtStyle.width = '100%';
|
|
// let the table decide
|
|
} else {
|
|
innerCtStyle.tableLayout = 'auto';
|
|
// if autoFlex, fill available space, else compact down
|
|
if (autoFlex) {
|
|
innerCtStyle.width = '100%';
|
|
} else {
|
|
innerCtStyle.width = '';
|
|
}
|
|
}
|
|
|
|
} else {
|
|
innerCtStyle.tableLayout = 'auto';
|
|
innerCtStyle.width = '';
|
|
}
|
|
},
|
|
|
|
cacheElements: function () {
|
|
var me = this;
|
|
|
|
// Grab defined childEls
|
|
me.callParent();
|
|
|
|
me.rowEl = me.innerCt.down('tr');
|
|
|
|
// Grab columns TDs
|
|
me.columnNodes = me.rowEl.dom.childNodes;
|
|
},
|
|
|
|
/*
|
|
* Just wait for the child items to all lay themselves out in the width we are configured
|
|
* to make available to them. Then we can measure our height.
|
|
*/
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
targetContext, widthShrinkWrap, heightShrinkWrap, shrinkWrap, table, targetPadding;
|
|
|
|
// The columnNodes are widthed using their own width attributes, we just need to wait
|
|
// for all children to have arranged themselves in that width, and then collect our height.
|
|
if (!ownerContext.getDomProp('containerChildrenSizeDone')) {
|
|
me.done = false;
|
|
} else {
|
|
targetContext = ownerContext.innerCtContext;
|
|
widthShrinkWrap = ownerContext.widthModel.shrinkWrap;
|
|
heightShrinkWrap = ownerContext.heightModel.shrinkWrap;
|
|
shrinkWrap = heightShrinkWrap || widthShrinkWrap;
|
|
table = targetContext.el.dom;
|
|
targetPadding = shrinkWrap && targetContext.getPaddingInfo();
|
|
|
|
if (widthShrinkWrap) {
|
|
ownerContext.setContentWidth(table.offsetWidth + targetPadding.width, true);
|
|
}
|
|
|
|
if (heightShrinkWrap) {
|
|
ownerContext.setContentHeight(table.offsetHeight + targetPadding.height, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
doRenderColumn: function (out, renderData, columnIndex) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$layout,
|
|
owner = me.owner,
|
|
columnCount = renderData.columnCount,
|
|
items = owner.items.items,
|
|
itemCount = items.length,
|
|
item, itemIndex, rowCount, increment, tree;
|
|
|
|
// Example:
|
|
// columnCount = 3
|
|
// items.length = 10
|
|
|
|
if (owner.vertical) {
|
|
// 0 1 2
|
|
// +---+---+---+
|
|
// 0 | 0 | 4 | 8 |
|
|
// +---+---+---+
|
|
// 1 | 1 | 5 | 9 |
|
|
// +---+---+---+
|
|
// 2 | 2 | 6 | |
|
|
// +---+---+---+
|
|
// 3 | 3 | 7 | |
|
|
// +---+---+---+
|
|
|
|
rowCount = Math.ceil(itemCount / columnCount); // = 4
|
|
itemIndex = columnIndex * rowCount;
|
|
itemCount = Math.min(itemCount, itemIndex + rowCount);
|
|
increment = 1;
|
|
} else {
|
|
// 0 1 2
|
|
// +---+---+---+
|
|
// 0 | 0 | 1 | 2 |
|
|
// +---+---+---+
|
|
// 1 | 3 | 4 | 5 |
|
|
// +---+---+---+
|
|
// 2 | 6 | 7 | 8 |
|
|
// +---+---+---+
|
|
// 3 | 9 | | |
|
|
// +---+---+---+
|
|
|
|
itemIndex = columnIndex;
|
|
increment = columnCount;
|
|
}
|
|
|
|
for ( ; itemIndex < itemCount; itemIndex += increment) {
|
|
item = items[itemIndex];
|
|
me.configureItem(item);
|
|
tree = item.getRenderTree();
|
|
Ext.DomHelper.generateMarkup(tree, out);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the number of columns in the checkbox group.
|
|
* @private
|
|
*/
|
|
getColumnCount: function() {
|
|
var me = this,
|
|
owner = me.owner,
|
|
ownerColumns = owner.columns;
|
|
|
|
// Our columns config is an array of numeric widths.
|
|
// Calculate our total width
|
|
if (me.columnsArray) {
|
|
return ownerColumns.length;
|
|
}
|
|
|
|
if (Ext.isNumber(ownerColumns)) {
|
|
return ownerColumns;
|
|
}
|
|
return owner.items.length;
|
|
},
|
|
|
|
getItemSizePolicy: function (item) {
|
|
return this.autoSizePolicy;
|
|
},
|
|
|
|
getRenderData: function () {
|
|
var me = this,
|
|
data = me.callParent(),
|
|
owner = me.owner,
|
|
i, columns = me.getColumnCount(),
|
|
width, column, cwidth,
|
|
autoFlex = me.autoFlex,
|
|
totalFlex = 0, flexedCols = 0;
|
|
|
|
// calculate total flex
|
|
if (me.columnsArray) {
|
|
for (i=0; i < columns; i++) {
|
|
width = me.owner.columns[i];
|
|
if (width < 1) {
|
|
totalFlex += width;
|
|
flexedCols++;
|
|
}
|
|
}
|
|
}
|
|
|
|
data.colCls = owner.groupCls;
|
|
data.columnCount = columns;
|
|
|
|
data.columns = [];
|
|
for (i = 0; i < columns; i++) {
|
|
column = (data.columns[i] = {});
|
|
|
|
if (me.columnsArray) {
|
|
width = me.owner.columns[i];
|
|
if (width < 1) {
|
|
cwidth = ((width / totalFlex) * 100) + '%';
|
|
} else {
|
|
cwidth = width + 'px';
|
|
}
|
|
column.style = 'width:' + cwidth;
|
|
} else {
|
|
column.style = 'width:' + (1 / columns * 100) + '%';
|
|
flexedCols++;
|
|
}
|
|
}
|
|
|
|
// If the columns config was an array of column widths, allow table to auto width
|
|
data.tableStyle =
|
|
!flexedCols ? 'table-layout:fixed;' :
|
|
(flexedCols < columns) ? 'table-layout:fixed;width:100%' :
|
|
(autoFlex) ? 'table-layout:auto;width:100%' : 'table-layout:auto;';
|
|
|
|
return data;
|
|
},
|
|
|
|
initLayout: function () {
|
|
var me = this,
|
|
owner = me.owner;
|
|
|
|
me.columnsArray = Ext.isArray(owner.columns);
|
|
me.autoColumns = !owner.columns || owner.columns === 'auto';
|
|
me.vertical = owner.vertical;
|
|
|
|
me.callParent();
|
|
},
|
|
|
|
// Always valid. beginLayout ensures the encapsulating elements of all children are in the correct place
|
|
isValidParent: function() {
|
|
return true;
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
this.callParent(arguments);
|
|
|
|
renderTpl.renderColumn = this.doRenderColumn;
|
|
},
|
|
|
|
renderChildren: function () {
|
|
var me = this,
|
|
generation = me.owner.items.generation;
|
|
|
|
if (me.lastOwnerItemsGeneration !== generation) {
|
|
me.lastOwnerItemsGeneration = generation;
|
|
me.renderItems(me.getLayoutItems());
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Iterates over all passed items, ensuring they are rendered. If the items are already rendered,
|
|
* also determines if the items are in the proper place in the dom.
|
|
* @protected
|
|
*/
|
|
renderItems : function(items) {
|
|
var me = this,
|
|
itemCount = items.length,
|
|
i,
|
|
item,
|
|
rowCount,
|
|
columnCount,
|
|
rowIndex,
|
|
columnIndex;
|
|
|
|
if (itemCount) {
|
|
Ext.suspendLayouts();
|
|
|
|
if (me.autoColumns) {
|
|
me.addMissingColumns(itemCount);
|
|
}
|
|
|
|
columnCount = me.columnNodes.length;
|
|
rowCount = Math.ceil(itemCount / columnCount);
|
|
|
|
for (i = 0; i < itemCount; i++) {
|
|
item = items[i];
|
|
rowIndex = me.getRenderRowIndex(i, rowCount, columnCount);
|
|
columnIndex = me.getRenderColumnIndex(i, rowCount, columnCount);
|
|
|
|
if (!item.rendered) {
|
|
me.renderItem(item, rowIndex, columnIndex);
|
|
} else if (!me.isItemAtPosition(item, rowIndex, columnIndex)) {
|
|
me.moveItem(item, rowIndex, columnIndex);
|
|
}
|
|
}
|
|
|
|
if (me.autoColumns) {
|
|
me.removeExceedingColumns(itemCount);
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
isItemAtPosition : function(item, rowIndex, columnIndex) {
|
|
return item.el.dom === this.getNodeAt(rowIndex, columnIndex);
|
|
},
|
|
|
|
getRenderColumnIndex : function(itemIndex, rowCount, columnCount) {
|
|
if (this.vertical) {
|
|
return Math.floor(itemIndex / rowCount);
|
|
} else {
|
|
return itemIndex % columnCount;
|
|
}
|
|
},
|
|
|
|
getRenderRowIndex : function(itemIndex, rowCount, columnCount) {
|
|
var me = this;
|
|
if (me.vertical) {
|
|
return itemIndex % rowCount;
|
|
} else {
|
|
return Math.floor(itemIndex / columnCount);
|
|
}
|
|
},
|
|
|
|
getNodeAt : function(rowIndex, columnIndex) {
|
|
return this.columnNodes[columnIndex].childNodes[rowIndex];
|
|
},
|
|
|
|
addMissingColumns : function(itemsCount) {
|
|
var me = this,
|
|
existingColumnsCount = me.columnNodes.length,
|
|
missingColumnsCount,
|
|
row,
|
|
cls,
|
|
i;
|
|
if (existingColumnsCount < itemsCount) {
|
|
missingColumnsCount = itemsCount - existingColumnsCount;
|
|
row = me.rowEl;
|
|
cls = me.owner.groupCls;
|
|
for (i = 0; i < missingColumnsCount; i++) {
|
|
row.createChild({
|
|
cls: cls,
|
|
tag: 'td',
|
|
vAlign: 'top'
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
removeExceedingColumns : function(itemsCount) {
|
|
var me = this,
|
|
existingColumnsCount = me.columnNodes.length,
|
|
exceedingColumnsCount,
|
|
row,
|
|
i;
|
|
if (existingColumnsCount > itemsCount) {
|
|
exceedingColumnsCount = existingColumnsCount - itemsCount;
|
|
row = me.rowEl;
|
|
for (i = 0; i < exceedingColumnsCount; i++) {
|
|
row.last().remove();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Renders the given Component into the specified row and column
|
|
* @param {Ext.Component} item The Component to render
|
|
* @param {number} rowIndex row index
|
|
* @param {number} columnIndex column index
|
|
* @private
|
|
*/
|
|
renderItem : function(item, rowIndex, columnIndex) {
|
|
var me = this;
|
|
|
|
me.configureItem(item);
|
|
item.render(Ext.get(me.columnNodes[columnIndex]), rowIndex);
|
|
me.afterRenderItem(item);
|
|
},
|
|
|
|
/**
|
|
* Moves the given already rendered Component to the specified row and column
|
|
* @param {Ext.Component} item The Component to move
|
|
* @param {number} rowIndex row index
|
|
* @param {number} columnIndex column index
|
|
* @private
|
|
*/
|
|
moveItem : function(item, rowIndex, columnIndex) {
|
|
var me = this,
|
|
column = me.columnNodes[columnIndex],
|
|
targetNode = column.childNodes[rowIndex];
|
|
column.insertBefore(item.el.dom, targetNode || null);
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* Private utility class for managing all {@link Ext.form.field.Checkbox} fields grouped by name.
|
|
*/
|
|
Ext.define('Ext.form.CheckboxManager', {
|
|
extend: Ext.util.MixedCollection ,
|
|
singleton: true,
|
|
|
|
getByName: function(name, formId) {
|
|
return this.filterBy(function(item) {
|
|
return item.name == name && item.getFormId() == formId;
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Robert Dougan <rob@sencha.com>
|
|
*
|
|
* Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. Also serves as a
|
|
* parent class for {@link Ext.form.field.Radio radio buttons}.
|
|
*
|
|
* # Labeling
|
|
*
|
|
* In addition to the {@link Ext.form.Labelable standard field labeling options}, checkboxes
|
|
* may be given an optional {@link #boxLabel} which will be displayed immediately after checkbox. Also see
|
|
* {@link Ext.form.CheckboxGroup} for a convenient method of grouping related checkboxes.
|
|
*
|
|
* # Values
|
|
*
|
|
* The main value of a checkbox is a boolean, indicating whether or not the checkbox is checked.
|
|
* The following values will check the checkbox:
|
|
*
|
|
* - `true`
|
|
* - `'true'`
|
|
* - `'1'`
|
|
* - `'on'`
|
|
*
|
|
* Any other value will uncheck the checkbox.
|
|
*
|
|
* In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be
|
|
* sent as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set
|
|
* this value if you have multiple checkboxes with the same {@link #name}. If not specified, the value `on`
|
|
* will be used.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* bodyPadding: 10,
|
|
* width: 300,
|
|
* title: 'Pizza Order',
|
|
* items: [
|
|
* {
|
|
* xtype: 'fieldcontainer',
|
|
* fieldLabel: 'Toppings',
|
|
* defaultType: 'checkboxfield',
|
|
* items: [
|
|
* {
|
|
* boxLabel : 'Anchovies',
|
|
* name : 'topping',
|
|
* inputValue: '1',
|
|
* id : 'checkbox1'
|
|
* }, {
|
|
* boxLabel : 'Artichoke Hearts',
|
|
* name : 'topping',
|
|
* inputValue: '2',
|
|
* checked : true,
|
|
* id : 'checkbox2'
|
|
* }, {
|
|
* boxLabel : 'Bacon',
|
|
* name : 'topping',
|
|
* inputValue: '3',
|
|
* id : 'checkbox3'
|
|
* }
|
|
* ]
|
|
* }
|
|
* ],
|
|
* bbar: [
|
|
* {
|
|
* text: 'Select Bacon',
|
|
* handler: function() {
|
|
* Ext.getCmp('checkbox3').setValue(true);
|
|
* }
|
|
* },
|
|
* '-',
|
|
* {
|
|
* text: 'Select All',
|
|
* handler: function() {
|
|
* Ext.getCmp('checkbox1').setValue(true);
|
|
* Ext.getCmp('checkbox2').setValue(true);
|
|
* Ext.getCmp('checkbox3').setValue(true);
|
|
* }
|
|
* },
|
|
* {
|
|
* text: 'Deselect All',
|
|
* handler: function() {
|
|
* Ext.getCmp('checkbox1').setValue(false);
|
|
* Ext.getCmp('checkbox2').setValue(false);
|
|
* Ext.getCmp('checkbox3').setValue(false);
|
|
* }
|
|
* }
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Checkbox', {
|
|
extend: Ext.form.field.Base ,
|
|
alias: ['widget.checkboxfield', 'widget.checkbox'],
|
|
alternateClassName: 'Ext.form.Checkbox',
|
|
|
|
|
|
componentLayout: 'field',
|
|
|
|
// inputEl should always retain the same size, never stretch
|
|
stretchInputElFixed: false,
|
|
|
|
childEls: [
|
|
/**
|
|
* @property {Ext.Element} boxLabelEl
|
|
* A reference to the label element created for the {@link #boxLabel}. Only present if the component has been
|
|
* rendered and has a boxLabel configured.
|
|
*/
|
|
'boxLabelEl'
|
|
],
|
|
|
|
// note: {id} here is really {inputId}, but {cmpId} is available
|
|
fieldSubTpl: [
|
|
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
|
|
'{beforeBoxLabelTpl}',
|
|
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
|
|
'{beforeBoxLabelTextTpl}',
|
|
'{boxLabel}',
|
|
'{afterBoxLabelTextTpl}',
|
|
'</label>',
|
|
'{afterBoxLabelTpl}',
|
|
'</tpl>',
|
|
// Creates an input of the configured type. By default, this is "button" to enable theming.
|
|
// When ARIA is enabled, this reverts to a "checkbox"
|
|
'<input type="{inputTypeAttr}" id="{id}" {inputAttrTpl}',
|
|
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
|
|
'<tpl if="disabled"> disabled="disabled"</tpl>',
|
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
|
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
|
|
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
|
|
'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
|
|
'{beforeBoxLabelTpl}',
|
|
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
|
|
'{beforeBoxLabelTextTpl}',
|
|
'{boxLabel}',
|
|
'{afterBoxLabelTextTpl}',
|
|
'</label>',
|
|
'{afterBoxLabelTpl}',
|
|
'</tpl>',
|
|
{
|
|
disableFormats: true,
|
|
compiled: true
|
|
}
|
|
],
|
|
|
|
subTplInsertions: [
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeBoxLabelTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the box label element. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'beforeBoxLabelTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterBoxLabelTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the box label element. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'afterBoxLabelTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeBoxLabelTextTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the box label text. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'beforeBoxLabelTextTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterBoxLabelTextTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the box label text. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'afterBoxLabelTextTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} boxLabelAttrTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* inside the box label element (as attributes). If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'boxLabelAttrTpl',
|
|
|
|
// inherited
|
|
'inputAttrTpl'
|
|
],
|
|
|
|
/*
|
|
* @property {Boolean} isCheckbox
|
|
* `true` in this class to identify an object as an instantiated Checkbox, or subclass thereof.
|
|
*/
|
|
isCheckbox: true,
|
|
|
|
/**
|
|
* @cfg {String} [focusCls='x-form-checkbox-focus']
|
|
* The CSS class to use when the checkbox receives focus
|
|
*/
|
|
focusCls: 'form-checkbox-focus',
|
|
|
|
/**
|
|
* @cfg {String} [fieldCls='x-form-field']
|
|
* The default CSS class for the checkbox
|
|
*/
|
|
|
|
// private
|
|
extraFieldBodyCls: Ext.baseCSSPrefix + 'form-cb-wrap',
|
|
|
|
/**
|
|
* @cfg {Boolean} checked
|
|
* true if the checkbox should render initially checked
|
|
*/
|
|
checked: false,
|
|
|
|
/**
|
|
* @cfg {String} [checkedCls='x-form-cb-checked']
|
|
* The CSS class(es) added to the component's main element when it is in the checked state.
|
|
* You can add your own class (checkedCls='myClass x-form-cb-checked') or replace the default
|
|
* class altogether (checkedCls='myClass').
|
|
*/
|
|
checkedCls: Ext.baseCSSPrefix + 'form-cb-checked',
|
|
|
|
/**
|
|
* @cfg {String} boxLabel
|
|
* An optional text label that will appear next to the checkbox. Whether it appears before or after the checkbox is
|
|
* determined by the {@link #boxLabelAlign} config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [boxLabelCls='x-form-cb-label']
|
|
* The CSS class to be applied to the {@link #boxLabel} element
|
|
*/
|
|
boxLabelCls: Ext.baseCSSPrefix + 'form-cb-label',
|
|
|
|
/**
|
|
* @cfg {String} boxLabelAlign
|
|
* The position relative to the checkbox where the {@link #boxLabel} should appear. Recognized values are 'before'
|
|
* and 'after'.
|
|
*/
|
|
boxLabelAlign: 'after',
|
|
|
|
/**
|
|
* @cfg {String} inputValue
|
|
* The value that should go into the generated input element's value attribute and should be used as the parameter
|
|
* value when submitting as part of a form.
|
|
*/
|
|
inputValue: 'on',
|
|
|
|
/**
|
|
* @cfg {String} uncheckedValue
|
|
* If configured, this will be submitted as the checkbox's value during form submit if the checkbox is unchecked. By
|
|
* default this is undefined, which results in nothing being submitted for the checkbox field when the form is
|
|
* submitted (the default behavior of HTML checkboxes).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} handler
|
|
* A function called when the {@link #checked} value changes (can be used instead of handling the {@link #change
|
|
* change event}).
|
|
* @cfg {Ext.form.field.Checkbox} handler.checkbox The Checkbox being toggled.
|
|
* @cfg {Boolean} handler.checked The new checked state of the checkbox.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* An object to use as the scope ('this' reference) of the {@link #handler} function.
|
|
*
|
|
* Defaults to this Checkbox.
|
|
*/
|
|
|
|
// private overrides
|
|
checkChangeEvents: [],
|
|
inputType: 'checkbox',
|
|
|
|
// private - the actual input type to use. inputType is just used to generate a class name
|
|
inputTypeAttr: 'button',
|
|
|
|
|
|
// private
|
|
onRe: /^on$/i,
|
|
|
|
// the form-cb css class is for styling shared between checkbox and subclasses (radio)
|
|
inputCls: Ext.baseCSSPrefix + 'form-cb',
|
|
|
|
initComponent: function() {
|
|
this.callParent(arguments);
|
|
this.getManager().add(this);
|
|
},
|
|
|
|
initValue: function() {
|
|
var me = this,
|
|
checked = !!me.checked;
|
|
|
|
/**
|
|
* @property {Object} originalValue
|
|
* The original value of the field as configured in the {@link #checked} configuration, or as loaded by the last
|
|
* form load operation if the form's {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad} setting is `true`.
|
|
*/
|
|
me.originalValue = me.lastValue = checked;
|
|
|
|
// Set the initial checked state
|
|
me.setValue(checked);
|
|
},
|
|
|
|
getElConfig: function() {
|
|
var me = this;
|
|
|
|
// Add the checked class if this begins checked
|
|
if (me.isChecked(me.rawValue, me.inputValue)) {
|
|
me.addCls(me.checkedCls);
|
|
}
|
|
return me.callParent();
|
|
},
|
|
|
|
getFieldStyle: function() {
|
|
return Ext.isObject(this.fieldStyle) ? Ext.DomHelper.generateStyles(this.fieldStyle) : this.fieldStyle ||'';
|
|
},
|
|
|
|
getSubTplData: function() {
|
|
var me = this;
|
|
return Ext.apply(me.callParent(), {
|
|
disabled : me.readOnly || me.disabled,
|
|
boxLabel : me.boxLabel,
|
|
boxLabelCls : me.boxLabelCls,
|
|
boxLabelAlign : me.boxLabelAlign,
|
|
inputTypeAttr : me.inputTypeAttr
|
|
});
|
|
},
|
|
|
|
initEvents: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
me.mon(me.inputEl, 'click', me.onBoxClick, me);
|
|
},
|
|
|
|
/**
|
|
* Sets the {@link #boxLabel} for this checkbox.
|
|
* @param {String} boxLabel The new label
|
|
*/
|
|
setBoxLabel: function(boxLabel){
|
|
var me = this;
|
|
|
|
me.boxLabel = boxLabel;
|
|
if (me.rendered) {
|
|
me.boxLabelEl.update(boxLabel);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Handle click on the checkbox button
|
|
*/
|
|
onBoxClick: function(e) {
|
|
var me = this;
|
|
if (!me.disabled && !me.readOnly) {
|
|
this.setValue(!this.checked);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the checked state of the checkbox.
|
|
* @return {Boolean} True if checked, else false
|
|
*/
|
|
getRawValue: function() {
|
|
return this.checked;
|
|
},
|
|
|
|
/**
|
|
* Returns the checked state of the checkbox.
|
|
* @return {Boolean} True if checked, else false
|
|
*/
|
|
getValue: function() {
|
|
return this.checked;
|
|
},
|
|
|
|
/**
|
|
* Returns the submit value for the checkbox which can be used when submitting forms.
|
|
* @return {String} If checked the {@link #inputValue} is returned; otherwise the {@link #uncheckedValue}
|
|
* (or null if the latter is not configured).
|
|
*/
|
|
getSubmitValue: function() {
|
|
var unchecked = this.uncheckedValue,
|
|
uncheckedVal = Ext.isDefined(unchecked) ? unchecked : null;
|
|
return this.checked ? this.inputValue : uncheckedVal;
|
|
},
|
|
|
|
isChecked: function(rawValue, inputValue) {
|
|
return (rawValue === true || rawValue === 'true' || rawValue === '1' || rawValue === 1 ||
|
|
(((Ext.isString(rawValue) || Ext.isNumber(rawValue)) && inputValue) ? rawValue == inputValue : this.onRe.test(rawValue)));
|
|
},
|
|
|
|
/**
|
|
* Sets the checked state of the checkbox.
|
|
*
|
|
* @param {Boolean/String/Number} value The following values will check the checkbox:
|
|
* `true, 'true', '1', 1, or 'on'`, as well as a String that matches the {@link #inputValue}.
|
|
* Any other value will uncheck the checkbox.
|
|
* @return {Boolean} the new checked state of the checkbox
|
|
*/
|
|
setRawValue: function(value) {
|
|
var me = this,
|
|
inputEl = me.inputEl,
|
|
checked = me.isChecked(value, me.inputValue);
|
|
|
|
if (inputEl) {
|
|
me[checked ? 'addCls' : 'removeCls'](me.checkedCls);
|
|
}
|
|
|
|
me.checked = me.rawValue = checked;
|
|
return checked;
|
|
},
|
|
|
|
/**
|
|
* Sets the checked state of the checkbox, and invokes change detection.
|
|
* @param {Boolean/String} checked The following values will check the checkbox: `true, 'true', '1', or 'on'`, as
|
|
* well as a String that matches the {@link #inputValue}. Any other value will uncheck the checkbox.
|
|
* @return {Ext.form.field.Checkbox} this
|
|
*/
|
|
setValue: function(checked) {
|
|
var me = this,
|
|
boxes, i, len, box;
|
|
|
|
// If an array of strings is passed, find all checkboxes in the group with the same name as this
|
|
// one and check all those whose inputValue is in the array, unchecking all the others. This is to
|
|
// facilitate setting values from Ext.form.Basic#setValues, but is not publicly documented as we
|
|
// don't want users depending on this behavior.
|
|
if (Ext.isArray(checked)) {
|
|
boxes = me.getManager().getByName(me.name, me.getFormId()).items;
|
|
len = boxes.length;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
box = boxes[i];
|
|
box.setValue(Ext.Array.contains(checked, box.inputValue));
|
|
}
|
|
} else {
|
|
me.callParent(arguments);
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
// private
|
|
valueToRaw: function(value) {
|
|
// No extra conversion for checkboxes
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called when the checkbox's checked state changes. Invokes the {@link #handler} callback
|
|
* function if specified.
|
|
*/
|
|
onChange: function(newVal, oldVal) {
|
|
var me = this,
|
|
handler = me.handler;
|
|
if (handler) {
|
|
handler.call(me.scope || me, me, newVal);
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
resetOriginalValue: function(/* private */ fromBoxInGroup){
|
|
var me = this,
|
|
boxes,
|
|
box,
|
|
len,
|
|
i;
|
|
|
|
// If we're resetting the value of a field in a group, also reset the others.
|
|
if (!fromBoxInGroup) {
|
|
boxes = me.getManager().getByName(me.name, me.getFormId()).items;
|
|
len = boxes.length;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
box = boxes[i];
|
|
if (box !== me) {
|
|
boxes[i].resetOriginalValue(true);
|
|
}
|
|
}
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
// inherit docs
|
|
beforeDestroy: function(){
|
|
this.callParent();
|
|
this.getManager().removeAtKey(this.id);
|
|
},
|
|
|
|
// inherit docs
|
|
getManager: function() {
|
|
return Ext.form.CheckboxManager;
|
|
},
|
|
|
|
onEnable: function() {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
me.callParent();
|
|
if (inputEl) {
|
|
// Can still be disabled if the field is readOnly
|
|
inputEl.dom.disabled = me.readOnly;
|
|
}
|
|
},
|
|
|
|
setReadOnly: function(readOnly) {
|
|
var me = this,
|
|
inputEl = me.inputEl;
|
|
if (inputEl) {
|
|
// Set the button to disabled when readonly
|
|
inputEl.dom.disabled = !!readOnly || me.disabled;
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
getFormId: function(){
|
|
var me = this,
|
|
form;
|
|
|
|
if (!me.formId) {
|
|
form = me.up('form');
|
|
if (form) {
|
|
me.formId = form.id;
|
|
}
|
|
}
|
|
return me.formId;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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
|
|
* 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
|
|
* 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
|
|
* 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.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Checkbox Group',
|
|
* width: 300,
|
|
* height: 125,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* items:[{
|
|
* xtype: 'checkboxgroup',
|
|
* fieldLabel: 'Two Columns',
|
|
* // Arrange checkboxes 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' }
|
|
* ]
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.CheckboxGroup', {
|
|
extend: Ext.form.FieldContainer ,
|
|
mixins: {
|
|
field: Ext.form.field.Field
|
|
},
|
|
alias: 'widget.checkboxgroup',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {String} name
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.form.field.Checkbox[]/Object[]} items
|
|
* An Array of {@link Ext.form.field.Checkbox Checkbox}es or Checkbox config objects to arrange in the group.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Number/Number[]} columns
|
|
* Specifies the number of columns to use when displaying grouped checkbox/radio controls using automatic layout.
|
|
* This config can take several types of values:
|
|
*
|
|
* - 'auto' - The controls will be rendered one per column on one row and the width of each column will be evenly
|
|
* distributed based on the width of the overall field container. This is the default.
|
|
* - Number - If you specific a number (e.g., 3) that number of columns will be created and the contained controls
|
|
* will be automatically distributed based on the value of {@link #vertical}.
|
|
* - Array - You can also specify an array of column widths, mixing integer (fixed width) and float (percentage
|
|
* width) values as needed (e.g., [100, .25, .75]). Any integer values will be rendered first, then any float
|
|
* values will be calculated as a percentage of the remaining space. Float values do not have to add up to 1
|
|
* (100%) although if you want the controls to take up the entire field container you should do so.
|
|
*/
|
|
columns : 'auto',
|
|
|
|
/**
|
|
* @cfg {Boolean} vertical
|
|
* True to distribute contained controls across columns, completely filling each column top to bottom before
|
|
* starting on the next column. The number of controls in each column will be automatically calculated to keep
|
|
* columns as even as possible. The default value is false, so that controls will be added to columns one at a time,
|
|
* completely filling each row left to right before starting on the next row.
|
|
*/
|
|
vertical : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} allowBlank
|
|
* False to validate that at least one item in the group is checked. If no items are selected at
|
|
* validation time, {@link #blankText} will be used as the error text.
|
|
*/
|
|
allowBlank : true,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} blankText
|
|
* Error text to display if the {@link #allowBlank} validation fails
|
|
*/
|
|
blankText : "You must select at least one item in this group",
|
|
//</locale>
|
|
|
|
// private
|
|
defaultType : 'checkboxfield',
|
|
|
|
// private
|
|
groupCls : Ext.baseCSSPrefix + 'form-check-group',
|
|
|
|
// private
|
|
extraFieldBodyCls: Ext.baseCSSPrefix + 'form-checkboxgroup-body',
|
|
|
|
// private
|
|
layout: 'checkboxgroup',
|
|
|
|
componentCls: Ext.baseCSSPrefix + 'form-checkboxgroup',
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
me.initField();
|
|
},
|
|
|
|
/**
|
|
* Initializes the field's value based on the initial config. If the {@link #value} config is specified then we use
|
|
* that to set the value; otherwise we initialize the originalValue by querying the values of all sub-checkboxes
|
|
* after they have been initialized.
|
|
* @protected
|
|
*/
|
|
initValue: function() {
|
|
var me = this,
|
|
valueCfg = me.value;
|
|
me.originalValue = me.lastValue = valueCfg || me.getValue();
|
|
if (valueCfg) {
|
|
me.setValue(valueCfg);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* When a checkbox is added to the group, monitor it for changes
|
|
* @param {Object} field
|
|
* @protected
|
|
*/
|
|
onAdd: function(item) {
|
|
var me = this,
|
|
items,
|
|
len, i;
|
|
|
|
if (item.isCheckbox) {
|
|
me.mon(item, 'change', me.checkChange, me);
|
|
} else if (item.isContainer) {
|
|
items = item.items.items;
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
me.onAdd(items[i]);
|
|
}
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onRemove: function(item) {
|
|
var me = this,
|
|
items,
|
|
len, i;
|
|
|
|
if (item.isCheckbox) {
|
|
me.mun(item, 'change', me.checkChange, me);
|
|
} else if (item.isContainer) {
|
|
items = item.items.items;
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
me.onRemove(items[i]);
|
|
}
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// private override - the group value is a complex object, compare using object serialization
|
|
isEqual: function(value1, value2) {
|
|
var toQueryString = Ext.Object.toQueryString;
|
|
return toQueryString(value1) === toQueryString(value2);
|
|
},
|
|
|
|
/**
|
|
* Runs CheckboxGroup's validations and returns an array of any errors. The only error by default is if allowBlank
|
|
* is set to true and no items are checked.
|
|
* @return {String[]} Array of all validation errors
|
|
*/
|
|
getErrors: function() {
|
|
var errors = [];
|
|
if (!this.allowBlank && Ext.isEmpty(this.getChecked())) {
|
|
errors.push(this.blankText);
|
|
}
|
|
return errors;
|
|
},
|
|
|
|
/**
|
|
* @private Returns all checkbox components within the container
|
|
* @param {String} [query] An additional query to add to the selector.
|
|
*/
|
|
getBoxes: function(query) {
|
|
return this.query('[isCheckbox]' + (query||''));
|
|
},
|
|
|
|
/**
|
|
* @private Convenience function which calls the given function for every checkbox in the group
|
|
* @param {Function} fn The function to call
|
|
* @param {Object} [scope] scope object
|
|
*/
|
|
eachBox: function(fn, scope) {
|
|
Ext.Array.forEach(this.getBoxes(), fn, scope || this);
|
|
},
|
|
|
|
/**
|
|
* Returns an Array of all checkboxes in the container which are currently checked
|
|
* @return {Ext.form.field.Checkbox[]} Array of Ext.form.field.Checkbox components
|
|
*/
|
|
getChecked: function() {
|
|
return this.getBoxes('[checked]');
|
|
},
|
|
|
|
// private override
|
|
isDirty: function(){
|
|
var boxes = this.getBoxes(),
|
|
b ,
|
|
bLen = boxes.length;
|
|
|
|
for (b = 0; b < bLen; b++) {
|
|
if (boxes[b].isDirty()) {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
|
|
// private override
|
|
setReadOnly: function(readOnly) {
|
|
var boxes = this.getBoxes(),
|
|
b,
|
|
bLen = boxes.length;
|
|
|
|
for (b = 0; b < bLen; b++) {
|
|
boxes[b].setReadOnly(readOnly);
|
|
}
|
|
|
|
this.readOnly = readOnly;
|
|
},
|
|
|
|
/**
|
|
* Resets the checked state of all {@link Ext.form.field.Checkbox checkboxes} in the group to their originally
|
|
* loaded values and clears any validation messages.
|
|
* See {@link Ext.form.Basic}.{@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad}
|
|
*/
|
|
reset: function() {
|
|
var me = this,
|
|
hadError = me.hasActiveError(),
|
|
preventMark = me.preventMark;
|
|
me.preventMark = true;
|
|
me.batchChanges(function() {
|
|
var boxes = me.getBoxes(),
|
|
b,
|
|
bLen = boxes.length;
|
|
|
|
for (b = 0; b < bLen; b++) {
|
|
boxes[b].reset();
|
|
}
|
|
});
|
|
me.preventMark = preventMark;
|
|
me.unsetActiveError();
|
|
if (hadError) {
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
resetOriginalValue: function(){
|
|
var me = this,
|
|
boxes = me.getBoxes(),
|
|
b,
|
|
bLen = boxes.length;
|
|
|
|
for (b = 0; b < bLen; b++) {
|
|
boxes[b].resetOriginalValue();
|
|
}
|
|
|
|
me.originalValue = me.getValue();
|
|
me.checkDirty();
|
|
},
|
|
|
|
|
|
/**
|
|
* Sets the value(s) of all checkboxes in the group. The expected format is an Object of name-value pairs
|
|
* corresponding to the names of the checkboxes in the group. Each pair can have either a single or multiple values:
|
|
*
|
|
* - A single Boolean or String value will be passed to the `setValue` method of the checkbox with that name.
|
|
* See the rules in {@link Ext.form.field.Checkbox#setValue} for accepted values.
|
|
* - An Array of String values will be matched against the {@link Ext.form.field.Checkbox#inputValue inputValue}
|
|
* of checkboxes in the group with that name; those checkboxes whose inputValue exists in the array will be
|
|
* checked and others will be unchecked.
|
|
*
|
|
* If a checkbox's name is not in the mapping at all, it will be unchecked.
|
|
*
|
|
* An example:
|
|
*
|
|
* var myCheckboxGroup = new Ext.form.CheckboxGroup({
|
|
* columns: 3,
|
|
* items: [{
|
|
* name: 'cb1',
|
|
* boxLabel: 'Single 1'
|
|
* }, {
|
|
* name: 'cb2',
|
|
* boxLabel: 'Single 2'
|
|
* }, {
|
|
* name: 'cb3',
|
|
* boxLabel: 'Single 3'
|
|
* }, {
|
|
* name: 'cbGroup',
|
|
* boxLabel: 'Grouped 1'
|
|
* inputValue: 'value1'
|
|
* }, {
|
|
* name: 'cbGroup',
|
|
* boxLabel: 'Grouped 2'
|
|
* inputValue: 'value2'
|
|
* }, {
|
|
* name: 'cbGroup',
|
|
* boxLabel: 'Grouped 3'
|
|
* inputValue: 'value3'
|
|
* }]
|
|
* });
|
|
*
|
|
* myCheckboxGroup.setValue({
|
|
* cb1: true,
|
|
* cb3: false,
|
|
* cbGroup: ['value1', 'value3']
|
|
* });
|
|
*
|
|
* The above code will cause the checkbox named 'cb1' to be checked, as well as the first and third checkboxes named
|
|
* 'cbGroup'. The other three checkboxes will be unchecked.
|
|
*
|
|
* @param {Object} value The mapping of checkbox names to values.
|
|
* @return {Ext.form.CheckboxGroup} this
|
|
*/
|
|
setValue: function(value) {
|
|
var me = this,
|
|
boxes = me.getBoxes(),
|
|
b,
|
|
bLen = boxes.length,
|
|
box, name,
|
|
cbValue;
|
|
|
|
me.batchChanges(function() {
|
|
for (b = 0; b < bLen; b++) {
|
|
box = boxes[b];
|
|
name = box.getName();
|
|
cbValue = false;
|
|
|
|
if (value && value.hasOwnProperty(name)) {
|
|
if (Ext.isArray(value[name])) {
|
|
cbValue = Ext.Array.contains(value[name], box.inputValue);
|
|
} else {
|
|
// single value, let the checkbox's own setValue handle conversion
|
|
cbValue = value[name];
|
|
}
|
|
}
|
|
|
|
box.setValue(cbValue);
|
|
}
|
|
});
|
|
return me;
|
|
},
|
|
|
|
|
|
/**
|
|
* Returns an object containing the values of all checked checkboxes within the group. Each key-value pair in the
|
|
* object corresponds to a checkbox {@link Ext.form.field.Checkbox#name name}. If there is only one checked checkbox
|
|
* with a particular name, the value of that pair will be the String {@link Ext.form.field.Checkbox#inputValue
|
|
* inputValue} of that checkbox. If there are multiple checked checkboxes with that name, the value of that pair
|
|
* will be an Array of the selected inputValues.
|
|
*
|
|
* The object format returned from this method can also be passed directly to the {@link #setValue} method.
|
|
*
|
|
* NOTE: In Ext 3, this method returned an array of Checkbox components; this was changed to make it more consistent
|
|
* with other field components and with the {@link #setValue} argument signature. If you need the old behavior in
|
|
* Ext 4+, use the {@link #getChecked} method instead.
|
|
*/
|
|
getValue: function() {
|
|
var values = {},
|
|
boxes = this.getBoxes(),
|
|
b,
|
|
bLen = boxes.length,
|
|
box, name, inputValue, bucket;
|
|
|
|
for (b = 0; b < bLen; b++) {
|
|
box = boxes[b];
|
|
name = box.getName();
|
|
inputValue = box.inputValue;
|
|
|
|
if (box.getValue()) {
|
|
if (values.hasOwnProperty(name)) {
|
|
bucket = values[name];
|
|
if (!Ext.isArray(bucket)) {
|
|
bucket = values[name] = [bucket];
|
|
}
|
|
bucket.push(inputValue);
|
|
} else {
|
|
values[name] = inputValue;
|
|
}
|
|
}
|
|
}
|
|
|
|
return values;
|
|
},
|
|
|
|
/*
|
|
* Don't return any data for submit; the form will get the info from the individual checkboxes themselves.
|
|
*/
|
|
getSubmitData: function() {
|
|
return null;
|
|
},
|
|
|
|
/*
|
|
* Don't return any data for the model; the form will get the info from the individual checkboxes themselves.
|
|
*/
|
|
getModelData: function() {
|
|
return null;
|
|
},
|
|
|
|
validate: function() {
|
|
var me = this,
|
|
errors,
|
|
isValid,
|
|
wasValid;
|
|
|
|
if (me.disabled) {
|
|
isValid = true;
|
|
} else {
|
|
errors = me.getErrors();
|
|
isValid = Ext.isEmpty(errors);
|
|
wasValid = me.wasValid;
|
|
if (isValid) {
|
|
me.unsetActiveError();
|
|
} else {
|
|
me.setActiveError(errors);
|
|
}
|
|
}
|
|
if (isValid !== wasValid) {
|
|
me.wasValid = isValid;
|
|
me.fireEvent('validitychange', me, isValid);
|
|
me.updateLayout();
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
}, function() {
|
|
|
|
this.borrow(Ext.form.field.Base, ['markInvalid', 'clearInvalid', 'setError']);
|
|
|
|
});
|
|
|
|
|
|
Ext.define('Ext.rtl.form.field.Checkbox', {
|
|
override: 'Ext.form.field.Checkbox',
|
|
|
|
getSubTplData: function(){
|
|
var data = this.callParent();
|
|
if (this.getHierarchyState().rtl) {
|
|
data.childElCls = this._rtlCls;
|
|
}
|
|
return data;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.CheckboxGroup', {
|
|
override: 'Ext.layout.container.CheckboxGroup',
|
|
|
|
finishedLayout: function(){
|
|
var owner = this.owner;
|
|
|
|
// In some cases in IE the groups get visually positioned
|
|
// in the wrong spot, though via the inspector they are in
|
|
// the correct place, so we need to kick off a repaint here.
|
|
if ((Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) && owner.getHierarchyState().rtl) {
|
|
this.innerCt.select('.' + owner.groupCls).repaint();
|
|
}
|
|
}
|
|
})
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* A container for grouping sets of fields, rendered as a HTML `fieldset` element. The {@link #title}
|
|
* config will be rendered as the fieldset's `legend`.
|
|
*
|
|
* While FieldSets commonly contain simple groups of fields, they are general {@link Ext.container.Container Containers}
|
|
* and may therefore contain any type of components in their {@link #cfg-items}, including other nested containers.
|
|
* The default {@link #layout} for the FieldSet's items is `'anchor'`, but it can be configured to use any other
|
|
* layout type.
|
|
*
|
|
* FieldSets may also be collapsed if configured to do so; this can be done in two ways:
|
|
*
|
|
* 1. Set the {@link #collapsible} config to true; this will result in a collapse button being rendered next to
|
|
* the {@link #title legend title}, or:
|
|
* 2. Set the {@link #checkboxToggle} config to true; this is similar to using {@link #collapsible} but renders
|
|
* a {@link Ext.form.field.Checkbox checkbox} in place of the toggle button. The fieldset will be expanded when the
|
|
* checkbox is checked and collapsed when it is unchecked. The checkbox will also be included in the
|
|
* {@link Ext.form.Basic#submit form submit parameters} using the {@link #checkboxName} as its parameter name.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Simple Form with FieldSets',
|
|
* labelWidth: 75, // label settings here cascade unless overridden
|
|
* url: 'save-form.php',
|
|
* frame: true,
|
|
* bodyStyle: 'padding:5px 5px 0',
|
|
* width: 550,
|
|
* renderTo: Ext.getBody(),
|
|
* layout: 'column', // arrange fieldsets side by side
|
|
* items: [{
|
|
* // Fieldset in Column 1 - collapsible via toggle button
|
|
* xtype:'fieldset',
|
|
* columnWidth: 0.5,
|
|
* title: 'Fieldset 1',
|
|
* collapsible: true,
|
|
* defaultType: 'textfield',
|
|
* defaults: {anchor: '100%'},
|
|
* layout: 'anchor',
|
|
* items :[{
|
|
* fieldLabel: 'Field 1',
|
|
* name: 'field1'
|
|
* }, {
|
|
* fieldLabel: 'Field 2',
|
|
* name: 'field2'
|
|
* }]
|
|
* }, {
|
|
* // Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel
|
|
* xtype:'fieldset',
|
|
* title: 'Show Panel', // title or checkboxToggle creates fieldset header
|
|
* columnWidth: 0.5,
|
|
* checkboxToggle: true,
|
|
* collapsed: true, // fieldset initially collapsed
|
|
* layout:'anchor',
|
|
* items :[{
|
|
* xtype: 'panel',
|
|
* anchor: '100%',
|
|
* title: 'Panel inside a fieldset',
|
|
* frame: true,
|
|
* height: 52
|
|
* }]
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.FieldSet', {
|
|
extend: Ext.container.Container ,
|
|
mixins: {
|
|
fieldAncestor: Ext.form.FieldAncestor
|
|
},
|
|
alias: 'widget.fieldset',
|
|
|
|
|
|
/**
|
|
* @cfg {String} title
|
|
* A title to be displayed in the fieldset's legend. May contain HTML markup.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [checkboxToggle=false]
|
|
* Set to true to render a checkbox into the fieldset frame just in front of the legend to expand/collapse the
|
|
* fieldset when the checkbox is toggled.. This checkbox will be included in form submits using
|
|
* the {@link #checkboxName}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} checkboxName
|
|
* The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true
|
|
* (defaults to '[fieldset id]-checkbox').
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [collapsible=false]
|
|
* Set to true to make the fieldset collapsible and have the expand/collapse toggle button automatically rendered
|
|
* into the legend element, false to keep the fieldset statically sized with no collapse button.
|
|
* Another option is to configure {@link #checkboxToggle}. Use the {@link #collapsed} config to collapse the
|
|
* fieldset by default.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} collapsed
|
|
* Set to true to render the fieldset as collapsed by default. If {@link #checkboxToggle} is specified, the checkbox
|
|
* will also be unchecked by default.
|
|
*/
|
|
collapsed: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [toggleOnTitleClick=true]
|
|
* Set to true will add a listener to the titleCmp property for the click event which will execute the
|
|
* {@link #toggle} method. This option is only used when the {@link #collapsible} property is set to true.
|
|
*/
|
|
toggleOnTitleClick : true,
|
|
|
|
/**
|
|
* @property {Ext.Component} legend
|
|
* The component for the fieldset's legend. Will only be defined if the configuration requires a legend to be
|
|
* created, by setting the {@link #title} or {@link #checkboxToggle} options.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-fieldset']
|
|
* The base CSS class applied to the fieldset.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'fieldset',
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* The {@link Ext.container.Container#layout} for the fieldset's immediate child items.
|
|
*/
|
|
layout: 'anchor',
|
|
|
|
componentLayout: 'fieldset',
|
|
|
|
autoEl: 'fieldset',
|
|
|
|
childEls: [
|
|
'body'
|
|
],
|
|
|
|
renderTpl: [
|
|
'{%this.renderLegend(out,values);%}',
|
|
'<div id="{id}-body" class="{baseCls}-body {bodyTargetCls}"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
|
|
'{%this.renderContainer(out,values);%}',
|
|
'</div>'
|
|
],
|
|
|
|
stateEvents : [ 'collapse', 'expand' ],
|
|
|
|
maskOnDisable: false,
|
|
|
|
beforeDestroy: function(){
|
|
var me = this,
|
|
legend = me.legend;
|
|
|
|
if (legend) {
|
|
// get rid of the ownerCt since it's not a proper item
|
|
delete legend.ownerCt;
|
|
legend.destroy();
|
|
me.legend = null;
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
baseCls = me.baseCls;
|
|
|
|
me.initFieldAncestor();
|
|
|
|
me.callParent();
|
|
|
|
// Fieldsets cannot support managePadding because the managePadding config causes
|
|
// the paddding to be added to the innerCt instead of the fieldset element. The
|
|
// padding must be on the fieldset element because the horizontal position of the
|
|
// legend is determined by the fieldset element's padding
|
|
//
|
|
// As a consequence of the inability to support managePadding, manageOverflow
|
|
// cannot be supported either because the correct overflow cannot be calculated
|
|
// without managePadding to adjust for cross-browser differences in the way
|
|
// padding is handled on overflowing elements.
|
|
// See Ext.layout.container.Auto for more info.
|
|
me.layout.managePadding = me.layout.manageOverflow = false;
|
|
|
|
me.addEvents(
|
|
|
|
/**
|
|
* @event beforeexpand
|
|
* Fires before this FieldSet is expanded. Return false to prevent the expand.
|
|
* @param {Ext.form.FieldSet} f The FieldSet being expanded.
|
|
*/
|
|
"beforeexpand",
|
|
|
|
/**
|
|
* @event beforecollapse
|
|
* Fires before this FieldSet is collapsed. Return false to prevent the collapse.
|
|
* @param {Ext.form.FieldSet} f The FieldSet being collapsed.
|
|
*/
|
|
"beforecollapse",
|
|
|
|
/**
|
|
* @event expand
|
|
* Fires after this FieldSet has expanded.
|
|
* @param {Ext.form.FieldSet} f The FieldSet that has been expanded.
|
|
*/
|
|
"expand",
|
|
|
|
/**
|
|
* @event collapse
|
|
* Fires after this FieldSet has collapsed.
|
|
* @param {Ext.form.FieldSet} f The FieldSet that has been collapsed.
|
|
*/
|
|
"collapse"
|
|
);
|
|
|
|
if (me.collapsed) {
|
|
me.addCls(baseCls + '-collapsed');
|
|
me.collapse();
|
|
}
|
|
if (me.title || me.checkboxToggle || me.collapsible) {
|
|
me.addTitleClasses();
|
|
me.legend = Ext.widget(me.createLegendCt());
|
|
}
|
|
me.initMonitor();
|
|
},
|
|
|
|
initPadding: function(targetEl) {
|
|
var me = this,
|
|
body = me.getProtoBody(),
|
|
padding = me.padding,
|
|
bodyPadding;
|
|
|
|
if (padding !== undefined) {
|
|
if (Ext.isIEQuirks || Ext.isIE8m) {
|
|
// IE8 and below display fieldset top padding outside the border
|
|
// so we transfer the top padding to the body element.
|
|
padding = me.parseBox(padding);
|
|
bodyPadding = Ext.Element.parseBox(0);
|
|
bodyPadding.top = padding.top;
|
|
padding.top = 0;
|
|
body.setStyle('padding', me.unitizeBox(bodyPadding));
|
|
}
|
|
|
|
targetEl.setStyle('padding', me.unitizeBox(padding));
|
|
}
|
|
},
|
|
|
|
getProtoBody: function () {
|
|
var me = this,
|
|
body = me.protoBody;
|
|
|
|
if (!body) {
|
|
me.protoBody = body = new Ext.util.ProtoElement({
|
|
styleProp: 'bodyStyle',
|
|
styleIsText: true
|
|
});
|
|
}
|
|
|
|
return body;
|
|
},
|
|
|
|
/**
|
|
* 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
|
|
* @private
|
|
*/
|
|
initRenderData: function() {
|
|
var me = this,
|
|
data = me.callParent();
|
|
|
|
data.bodyTargetCls = me.bodyTargetCls;
|
|
me.protoBody.writeTo(data);
|
|
delete me.protoBody;
|
|
|
|
return data;
|
|
},
|
|
|
|
getState: function () {
|
|
var state = this.callParent();
|
|
|
|
state = this.addPropertyToState(state, 'collapsed');
|
|
|
|
return state;
|
|
},
|
|
|
|
afterCollapse: Ext.emptyFn,
|
|
afterExpand: Ext.emptyFn,
|
|
|
|
collapsedHorizontal: function () {
|
|
return true;
|
|
},
|
|
|
|
collapsedVertical: function () {
|
|
return true;
|
|
},
|
|
|
|
createLegendCt: function () {
|
|
var me = this,
|
|
items = [],
|
|
legend = {
|
|
xtype: 'container',
|
|
baseCls: me.baseCls + '-header',
|
|
id: me.id + '-legend',
|
|
autoEl: 'legend',
|
|
items: items,
|
|
ownerCt: me,
|
|
shrinkWrap: true,
|
|
ownerLayout: me.componentLayout
|
|
};
|
|
|
|
// Checkbox
|
|
if (me.checkboxToggle) {
|
|
items.push(me.createCheckboxCmp());
|
|
} else if (me.collapsible) {
|
|
// Toggle button
|
|
items.push(me.createToggleCmp());
|
|
}
|
|
|
|
// Title
|
|
items.push(me.createTitleCmp());
|
|
|
|
return legend;
|
|
},
|
|
|
|
/**
|
|
* Creates the legend title component. This is only called internally, but could be overridden in subclasses to
|
|
* customize the title component. If {@link #toggleOnTitleClick} is set to true, a listener for the click event
|
|
* will toggle the collapsed state of the FieldSet.
|
|
* @return {Ext.Component}
|
|
* @protected
|
|
*/
|
|
createTitleCmp: function() {
|
|
var me = this,
|
|
cfg = {
|
|
xtype : 'component',
|
|
html : me.title,
|
|
cls : me.baseCls + '-header-text',
|
|
id : me.id + '-legendTitle'
|
|
};
|
|
|
|
if (me.collapsible && me.toggleOnTitleClick) {
|
|
cfg.listeners = {
|
|
click : {
|
|
element: 'el',
|
|
scope : me,
|
|
fn : me.toggle
|
|
}
|
|
};
|
|
cfg.cls += ' ' + me.baseCls + '-header-text-collapsible';
|
|
}
|
|
|
|
return (me.titleCmp = Ext.widget(cfg));
|
|
},
|
|
|
|
/**
|
|
* @property {Ext.form.field.Checkbox} checkboxCmp
|
|
* Refers to the {@link Ext.form.field.Checkbox} component that is added next to the title in the legend. Only
|
|
* populated if the fieldset is configured with {@link #checkboxToggle}:true.
|
|
*/
|
|
|
|
/**
|
|
* Creates the checkbox component. This is only called internally, but could be overridden in subclasses to
|
|
* customize the checkbox's configuration or even return an entirely different component type.
|
|
* @return {Ext.Component}
|
|
* @protected
|
|
*/
|
|
createCheckboxCmp: function() {
|
|
var me = this,
|
|
suffix = '-checkbox';
|
|
|
|
me.checkboxCmp = Ext.widget({
|
|
xtype: 'checkbox',
|
|
hideEmptyLabel: true,
|
|
name: me.checkboxName || me.id + suffix,
|
|
cls: me.baseCls + '-header' + suffix,
|
|
id: me.id + '-legendChk',
|
|
checked: !me.collapsed,
|
|
listeners: {
|
|
change: me.onCheckChange,
|
|
scope: me
|
|
}
|
|
});
|
|
return me.checkboxCmp;
|
|
},
|
|
|
|
/**
|
|
* @property {Ext.panel.Tool} toggleCmp
|
|
* Refers to the {@link Ext.panel.Tool} component that is added as the collapse/expand button next to the title in
|
|
* the legend. Only populated if the fieldset is configured with {@link #collapsible}:true.
|
|
*/
|
|
|
|
/**
|
|
* Creates the toggle button component. This is only called internally, but could be overridden in subclasses to
|
|
* customize the toggle component.
|
|
* @return {Ext.Component}
|
|
* @protected
|
|
*/
|
|
createToggleCmp: function() {
|
|
var me = this;
|
|
me.toggleCmp = Ext.widget({
|
|
xtype: 'tool',
|
|
height: 15,
|
|
width: 15,
|
|
type: 'toggle',
|
|
handler: me.toggle,
|
|
id: me.id + '-legendToggle',
|
|
scope: me
|
|
});
|
|
return me.toggleCmp;
|
|
},
|
|
|
|
doRenderLegend: function (out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$comp,
|
|
legend = me.legend,
|
|
tree;
|
|
|
|
// Create the Legend component if needed
|
|
if (legend) {
|
|
legend.ownerLayout.configureItem(legend);
|
|
tree = legend.getRenderTree();
|
|
Ext.DomHelper.generateMarkup(tree, out);
|
|
}
|
|
},
|
|
|
|
finishRender: function () {
|
|
var legend = this.legend;
|
|
|
|
this.callParent();
|
|
|
|
if (legend) {
|
|
legend.finishRender();
|
|
}
|
|
},
|
|
|
|
getCollapsed: function () {
|
|
return this.collapsed ? 'top' : false;
|
|
},
|
|
|
|
getCollapsedDockedItems: function () {
|
|
var legend = this.legend;
|
|
|
|
return legend ? [ legend ] : [];
|
|
},
|
|
|
|
/**
|
|
* Sets the title of this fieldset.
|
|
* @param {String} title The new title.
|
|
* @return {Ext.form.FieldSet} this
|
|
*/
|
|
setTitle: function(title) {
|
|
var me = this,
|
|
legend = me.legend,
|
|
baseCls = me.baseCls;
|
|
|
|
me.title = title;
|
|
if (me.rendered) {
|
|
if (!legend) {
|
|
me.legend = legend = Ext.widget(me.createLegendCt());
|
|
me.addTitleClasses();
|
|
legend.ownerLayout.configureItem(legend);
|
|
legend.render(me.el, 0);
|
|
}
|
|
me.titleCmp.update(title);
|
|
} else if (legend) {
|
|
me.titleCmp.update(title);
|
|
} else {
|
|
me.addTitleClasses();
|
|
me.legend = Ext.widget(me.createLegendCt());
|
|
}
|
|
return me;
|
|
},
|
|
|
|
addTitleClasses: function(){
|
|
var me = this,
|
|
title = me.title,
|
|
baseCls = me.baseCls;
|
|
|
|
if (title) {
|
|
me.addCls(baseCls + '-with-title');
|
|
}
|
|
|
|
if (title || me.checkboxToggle || me.collapsible) {
|
|
me.addCls(baseCls + '-with-header');
|
|
}
|
|
},
|
|
|
|
applyTargetCls: function(targetCls) {
|
|
this.bodyTargetCls = targetCls;
|
|
},
|
|
|
|
getTargetEl : function() {
|
|
return this.body || this.frameBody || this.el;
|
|
},
|
|
|
|
getDefaultContentTarget: function() {
|
|
return this.body;
|
|
},
|
|
|
|
/**
|
|
* Expands the fieldset.
|
|
* @return {Ext.form.FieldSet} this
|
|
*/
|
|
expand : function(){
|
|
return this.setExpanded(true);
|
|
},
|
|
|
|
/**
|
|
* Collapses the fieldset.
|
|
* @return {Ext.form.FieldSet} this
|
|
*/
|
|
collapse : function() {
|
|
return this.setExpanded(false);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Collapse or expand the fieldset.
|
|
*/
|
|
setExpanded: function(expanded) {
|
|
var me = this,
|
|
checkboxCmp = me.checkboxCmp,
|
|
operation = expanded ? 'expand' : 'collapse';
|
|
|
|
if (!me.rendered || me.fireEvent('before' + operation, me) !== false) {
|
|
expanded = !!expanded;
|
|
|
|
if (checkboxCmp) {
|
|
checkboxCmp.setValue(expanded);
|
|
}
|
|
|
|
if (expanded) {
|
|
me.removeCls(me.baseCls + '-collapsed');
|
|
} else {
|
|
me.addCls(me.baseCls + '-collapsed');
|
|
}
|
|
me.collapsed = !expanded;
|
|
if (expanded) {
|
|
delete me.getHierarchyState().collapsed;
|
|
} else {
|
|
me.getHierarchyState().collapsed = true;
|
|
}
|
|
if (me.rendered) {
|
|
// say explicitly we are not root because when we have a fixed/configured height
|
|
// our ownerLayout would say we are root and so would not have it's height
|
|
// updated since it's not included in the layout cycle
|
|
me.updateLayout({ isRoot: false });
|
|
me.fireEvent(operation, me);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
getRefItems: function(deep) {
|
|
var refItems = this.callParent(arguments),
|
|
legend = this.legend;
|
|
|
|
// Prepend legend items to ensure correct order
|
|
if (legend) {
|
|
refItems.unshift(legend);
|
|
if (deep) {
|
|
refItems.unshift.apply(refItems, legend.getRefItems(true));
|
|
}
|
|
}
|
|
return refItems;
|
|
},
|
|
|
|
/**
|
|
* Toggle the fieldset's collapsed state to the opposite of what it is currently.
|
|
*/
|
|
toggle: function() {
|
|
this.setExpanded(!!this.collapsed);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handle changes in the checkbox checked state.
|
|
*/
|
|
onCheckChange: function(cmp, checked) {
|
|
this.setExpanded(checked);
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
this.callParent(arguments);
|
|
|
|
renderTpl.renderLegend = this.doRenderLegend;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* Produces a standalone `<label />` element which can be inserted into a form and be associated with a field
|
|
* in that form using the {@link #forId} property.
|
|
*
|
|
* **NOTE:** in most cases it will be more appropriate to use the {@link Ext.form.Labelable#fieldLabel fieldLabel}
|
|
* and associated config properties ({@link Ext.form.Labelable#labelAlign}, {@link Ext.form.Labelable#labelWidth},
|
|
* etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.
|
|
* Ext.form.Label should only be used when your layout can not be achieved with the standard
|
|
* {@link Ext.form.Labelable field layout}.
|
|
*
|
|
* You will likely be associating the label with a field component that extends {@link Ext.form.field.Base}, so
|
|
* you should make sure the {@link #forId} is set to the same value as the {@link Ext.form.field.Base#inputId inputId}
|
|
* of that field.
|
|
*
|
|
* The label's text can be set using either the {@link #text} or {@link #html} configuration properties; the
|
|
* difference between the two is that the former will automatically escape HTML characters when rendering, while
|
|
* the latter will not.
|
|
*
|
|
* # Example
|
|
*
|
|
* This example creates a Label after its associated Text field, an arrangement that cannot currently
|
|
* be achieved using the standard Field layout's labelAlign.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Field with Label',
|
|
* width: 400,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* layout: {
|
|
* type: 'hbox',
|
|
* align: 'middle'
|
|
* },
|
|
* items: [{
|
|
* xtype: 'textfield',
|
|
* hideLabel: true,
|
|
* flex: 1
|
|
* }, {
|
|
* xtype: 'label',
|
|
* forId: 'myFieldId',
|
|
* text: 'My Awesome Field',
|
|
* margin: '0 0 0 10'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.Label', {
|
|
extend: Ext.Component ,
|
|
alias: 'widget.label',
|
|
|
|
|
|
autoEl: 'label',
|
|
|
|
/**
|
|
* @cfg {String} [text='']
|
|
* The plain text to display within the label. If you need to include HTML
|
|
* tags within the label's innerHTML, use the {@link #html} config instead.
|
|
*/
|
|
/**
|
|
* @cfg {String} forId
|
|
* The id of the input element to which this label will be bound via the standard HTML 'for'
|
|
* attribute. If not specified, the attribute will not be added to the label. In most cases you will be
|
|
* associating the label with a {@link Ext.form.field.Base} component, so you should make sure this matches
|
|
* the {@link Ext.form.field.Base#inputId inputId} of that field.
|
|
*/
|
|
/**
|
|
* @cfg {String} [html='']
|
|
* An HTML fragment that will be used as the label's innerHTML.
|
|
* Note that if {@link #text} is specified it will take precedence and this value will be ignored.
|
|
*/
|
|
|
|
maskOnDisable: false,
|
|
|
|
getElConfig: function(){
|
|
var me = this;
|
|
|
|
me.html = me.text ? Ext.util.Format.htmlEncode(me.text) : (me.html || '');
|
|
return Ext.apply(me.callParent(), {
|
|
htmlFor: me.forId || ''
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Updates the label's innerHTML with the specified string.
|
|
* @param {String} text The new label text
|
|
* @param {Boolean} [encode=true] False to skip HTML-encoding the text when rendering it
|
|
* to the label. This might be useful if you want to include tags in the label's innerHTML rather
|
|
* than rendering them as string literals per the default logic.
|
|
* @return {Ext.form.Label} this
|
|
*/
|
|
setText : function(text, encode){
|
|
var me = this;
|
|
|
|
encode = encode !== false;
|
|
if(encode) {
|
|
me.text = text;
|
|
delete me.html;
|
|
} else {
|
|
me.html = text;
|
|
delete me.text;
|
|
}
|
|
|
|
if(me.rendered){
|
|
me.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(text) : text;
|
|
me.updateLayout();
|
|
}
|
|
return me;
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* FormPanel provides a standard container for forms. It is essentially a standard {@link Ext.panel.Panel} which
|
|
* automatically creates a {@link Ext.form.Basic BasicForm} for managing any {@link Ext.form.field.Field}
|
|
* objects that are added as descendants of the panel. It also includes conveniences for configuring and
|
|
* working with the BasicForm and the collection of Fields.
|
|
*
|
|
* # Layout
|
|
*
|
|
* By default, FormPanel is configured with `{@link Ext.layout.container.Anchor layout:'anchor'}` for
|
|
* the layout of its immediate child items. This can be changed to any of the supported container layouts.
|
|
* The layout of sub-containers is configured in {@link Ext.container.Container#layout the standard way}.
|
|
*
|
|
* # BasicForm
|
|
*
|
|
* Although **not listed** as configuration options of FormPanel, the FormPanel class accepts all
|
|
* of the config options supported by the {@link Ext.form.Basic} class, and will pass them along to
|
|
* the internal BasicForm when it is created.
|
|
*
|
|
* The following events fired by the BasicForm will be re-fired by the FormPanel and can therefore be
|
|
* listened for on the FormPanel itself:
|
|
*
|
|
* - {@link Ext.form.Basic#beforeaction beforeaction}
|
|
* - {@link Ext.form.Basic#actionfailed actionfailed}
|
|
* - {@link Ext.form.Basic#actioncomplete actioncomplete}
|
|
* - {@link Ext.form.Basic#validitychange validitychange}
|
|
* - {@link Ext.form.Basic#dirtychange dirtychange}
|
|
*
|
|
* # Field Defaults
|
|
*
|
|
* The {@link #fieldDefaults} config option conveniently allows centralized configuration of default values
|
|
* for all fields added as descendants of the FormPanel. Any config option recognized by implementations
|
|
* of {@link Ext.form.Labelable} may be included in this object. See the {@link #fieldDefaults} documentation
|
|
* for details of how the defaults are applied.
|
|
*
|
|
* # Form Validation
|
|
*
|
|
* With the default configuration, form fields are validated on-the-fly while the user edits their values.
|
|
* This can be controlled on a per-field basis (or via the {@link #fieldDefaults} config) with the field
|
|
* config properties {@link Ext.form.field.Field#validateOnChange} and {@link Ext.form.field.Base#checkChangeEvents},
|
|
* and the FormPanel's config properties {@link #pollForChanges} and {@link #pollInterval}.
|
|
*
|
|
* Any component within the FormPanel can be configured with `formBind: true`. This will cause that
|
|
* component to be automatically disabled when the form is invalid, and enabled when it is valid. This is most
|
|
* commonly used for Button components to prevent submitting the form in an invalid state, but can be used on
|
|
* any component type.
|
|
*
|
|
* For more information on form validation see the following:
|
|
*
|
|
* - {@link Ext.form.field.Field#validateOnChange}
|
|
* - {@link #pollForChanges} and {@link #pollInterval}
|
|
* - {@link Ext.form.field.VTypes}
|
|
* - {@link Ext.form.Basic#doAction BasicForm.doAction clientValidation notes}
|
|
*
|
|
* # Form Submission
|
|
*
|
|
* By default, Ext Forms are submitted through Ajax, using {@link Ext.form.action.Action}. See the documentation for
|
|
* {@link Ext.form.Basic} for details.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Simple Form',
|
|
* bodyPadding: 5,
|
|
* width: 350,
|
|
*
|
|
* // The form will submit an AJAX request to this URL when submitted
|
|
* url: 'save-form.php',
|
|
*
|
|
* // Fields will be arranged vertically, stretched to full width
|
|
* layout: 'anchor',
|
|
* defaults: {
|
|
* anchor: '100%'
|
|
* },
|
|
*
|
|
* // The fields
|
|
* defaultType: 'textfield',
|
|
* items: [{
|
|
* fieldLabel: 'First Name',
|
|
* name: 'first',
|
|
* allowBlank: false
|
|
* },{
|
|
* fieldLabel: 'Last Name',
|
|
* name: 'last',
|
|
* allowBlank: false
|
|
* }],
|
|
*
|
|
* // Reset and Submit buttons
|
|
* buttons: [{
|
|
* text: 'Reset',
|
|
* handler: function() {
|
|
* this.up('form').getForm().reset();
|
|
* }
|
|
* }, {
|
|
* text: 'Submit',
|
|
* formBind: true, //only enabled once the form is valid
|
|
* disabled: true,
|
|
* handler: function() {
|
|
* var form = this.up('form').getForm();
|
|
* if (form.isValid()) {
|
|
* form.submit({
|
|
* success: function(form, action) {
|
|
* Ext.Msg.alert('Success', action.result.msg);
|
|
* },
|
|
* failure: function(form, action) {
|
|
* Ext.Msg.alert('Failed', action.result.msg);
|
|
* }
|
|
* });
|
|
* }
|
|
* }
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.form.Panel', {
|
|
extend: Ext.panel.Panel ,
|
|
mixins: {
|
|
fieldAncestor: Ext.form.FieldAncestor
|
|
},
|
|
alias: 'widget.form',
|
|
alternateClassName: ['Ext.FormPanel', 'Ext.form.FormPanel'],
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} pollForChanges
|
|
* If set to `true`, sets up an interval task (using the {@link #pollInterval}) in which the
|
|
* panel's fields are repeatedly checked for changes in their values. This is in addition to the normal detection
|
|
* each field does on its own input element, and is not needed in most cases. It does, however, provide a
|
|
* means to absolutely guarantee detection of all changes including some edge cases in some browsers which
|
|
* do not fire native events. Defaults to `false`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} pollInterval
|
|
* Interval in milliseconds at which the form's fields are checked for value changes. Only used if
|
|
* the {@link #pollForChanges} option is set to `true`. Defaults to 500 milliseconds.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* The {@link Ext.container.Container#layout} for the form panel's immediate child items.
|
|
*/
|
|
layout: 'anchor',
|
|
|
|
ariaRole: 'form',
|
|
|
|
basicFormConfigs: [
|
|
'api',
|
|
'baseParams',
|
|
'errorReader',
|
|
'jsonSubmit',
|
|
'method',
|
|
'paramOrder',
|
|
'paramsAsHash',
|
|
'reader',
|
|
'standardSubmit',
|
|
'timeout',
|
|
'trackResetOnLoad',
|
|
'url',
|
|
'waitMsgTarget',
|
|
'waitTitle'
|
|
],
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
if (me.frame) {
|
|
me.border = false;
|
|
}
|
|
|
|
me.initFieldAncestor();
|
|
me.callParent();
|
|
|
|
me.relayEvents(me.form, [
|
|
/**
|
|
* @event beforeaction
|
|
* @inheritdoc Ext.form.Basic#beforeaction
|
|
*/
|
|
'beforeaction',
|
|
/**
|
|
* @event actionfailed
|
|
* @inheritdoc Ext.form.Basic#actionfailed
|
|
*/
|
|
'actionfailed',
|
|
/**
|
|
* @event actioncomplete
|
|
* @inheritdoc Ext.form.Basic#actioncomplete
|
|
*/
|
|
'actioncomplete',
|
|
/**
|
|
* @event validitychange
|
|
* @inheritdoc Ext.form.Basic#validitychange
|
|
*/
|
|
'validitychange',
|
|
/**
|
|
* @event dirtychange
|
|
* @inheritdoc Ext.form.Basic#dirtychange
|
|
*/
|
|
'dirtychange'
|
|
]);
|
|
|
|
// Start polling if configured
|
|
if (me.pollForChanges) {
|
|
me.startPolling(me.pollInterval || 500);
|
|
}
|
|
},
|
|
|
|
initItems: function() {
|
|
// Create the BasicForm
|
|
this.callParent();
|
|
this.initMonitor();
|
|
this.form = this.createForm();
|
|
},
|
|
|
|
// Initialize the BasicForm after all layouts have been completed.
|
|
afterFirstLayout: function() {
|
|
this.callParent(arguments);
|
|
this.form.initialize();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
createForm: function() {
|
|
var cfg = {},
|
|
props = this.basicFormConfigs,
|
|
len = props.length,
|
|
i = 0,
|
|
prop;
|
|
|
|
for (; i < len; ++i) {
|
|
prop = props[i];
|
|
cfg[prop] = this[prop];
|
|
}
|
|
return new Ext.form.Basic(this, cfg);
|
|
},
|
|
|
|
/**
|
|
* Provides access to the {@link Ext.form.Basic Form} which this Panel contains.
|
|
* @return {Ext.form.Basic} The {@link Ext.form.Basic Form} which this Panel contains.
|
|
*/
|
|
getForm: function() {
|
|
return this.form;
|
|
},
|
|
|
|
/**
|
|
* Loads an {@link Ext.data.Model} into this form (internally just calls {@link Ext.form.Basic#loadRecord})
|
|
* See also {@link Ext.form.Basic#trackResetOnLoad trackResetOnLoad}.
|
|
* @param {Ext.data.Model} record The record to load
|
|
* @return {Ext.form.Basic} The Ext.form.Basic attached to this FormPanel
|
|
*/
|
|
loadRecord: function(record) {
|
|
return this.getForm().loadRecord(record);
|
|
},
|
|
|
|
/**
|
|
* Returns the currently loaded Ext.data.Model instance if one was loaded via {@link #loadRecord}.
|
|
* @return {Ext.data.Model} The loaded instance
|
|
*/
|
|
getRecord: function() {
|
|
return this.getForm().getRecord();
|
|
},
|
|
|
|
/**
|
|
* Persists the values in this form into the passed {@link Ext.data.Model} object in a beginEdit/endEdit block.
|
|
* If the record is not specified, it will attempt to update (if it exists) the record provided to {@link #loadRecord}.
|
|
* @param {Ext.data.Model} [record] The record to edit
|
|
* @return {Ext.form.Basic} The Ext.form.Basic attached to this FormPanel
|
|
*/
|
|
updateRecord: function(record) {
|
|
return this.getForm().updateRecord(record);
|
|
},
|
|
|
|
/**
|
|
* Convenience function for fetching the current value of each field in the form. This is the same as calling
|
|
* {@link Ext.form.Basic#getValues this.getForm().getValues()}.
|
|
*
|
|
* @inheritdoc Ext.form.Basic#getValues
|
|
*/
|
|
getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) {
|
|
return this.getForm().getValues(asString, dirtyOnly, includeEmptyText, useDataValues);
|
|
},
|
|
|
|
/**
|
|
* Convenience function to check if the form has any dirty fields. This is the same as calling
|
|
* {@link Ext.form.Basic#isDirty this.getForm().isDirty()}.
|
|
*
|
|
* @inheritdoc Ext.form.Basic#isDirty
|
|
*/
|
|
isDirty: function () {
|
|
return this.form.isDirty();
|
|
},
|
|
|
|
/**
|
|
* Convenience function to check if the form has all valid fields. This is the same as calling
|
|
* {@link Ext.form.Basic#isValid this.getForm().isValid()}.
|
|
*
|
|
* @inheritdoc Ext.form.Basic#isValid
|
|
*/
|
|
isValid: function () {
|
|
return this.form.isValid();
|
|
},
|
|
|
|
/**
|
|
* Convenience function to check if the form has any invalid fields. This is the same as calling
|
|
* {@link Ext.form.Basic#hasInvalidField this.getForm().hasInvalidField()}.
|
|
*
|
|
* @inheritdoc Ext.form.Basic#hasInvalidField
|
|
*/
|
|
hasInvalidField: function () {
|
|
return this.form.hasInvalidField();
|
|
},
|
|
|
|
beforeDestroy: function() {
|
|
this.stopPolling();
|
|
this.form.destroy();
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* This is a proxy for the underlying BasicForm's {@link Ext.form.Basic#load} call.
|
|
* @param {Object} options The options to pass to the action (see {@link Ext.form.Basic#load} and
|
|
* {@link Ext.form.Basic#doAction} for details)
|
|
*/
|
|
load: function(options) {
|
|
this.form.load(options);
|
|
},
|
|
|
|
/**
|
|
* This is a proxy for the underlying BasicForm's {@link Ext.form.Basic#submit} call.
|
|
* @param {Object} options The options to pass to the action (see {@link Ext.form.Basic#submit} and
|
|
* {@link Ext.form.Basic#doAction} for details)
|
|
*/
|
|
submit: function(options) {
|
|
this.form.submit(options);
|
|
},
|
|
|
|
/**
|
|
* Start an interval task to continuously poll all the fields in the form for changes in their
|
|
* values. This is normally started automatically by setting the {@link #pollForChanges} config.
|
|
* @param {Number} interval The interval in milliseconds at which the check should run.
|
|
*/
|
|
startPolling: function(interval) {
|
|
this.stopPolling();
|
|
var task = new Ext.util.TaskRunner(interval);
|
|
task.start({
|
|
interval: 0,
|
|
run: this.checkChange,
|
|
scope: this
|
|
});
|
|
this.pollTask = task;
|
|
},
|
|
|
|
/**
|
|
* Stop a running interval task that was started by {@link #startPolling}.
|
|
*/
|
|
stopPolling: function() {
|
|
var task = this.pollTask;
|
|
if (task) {
|
|
task.stopAll();
|
|
delete this.pollTask;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Forces each field within the form panel to
|
|
* {@link Ext.form.field.Field#checkChange check if its value has changed}.
|
|
*/
|
|
checkChange: function() {
|
|
var fields = this.form.getFields().items,
|
|
f,
|
|
fLen = fields.length;
|
|
|
|
for (f = 0; f < fLen; f++) {
|
|
fields[f].checkChange();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* Private utility class for managing all {@link Ext.form.field.Radio} fields grouped by name.
|
|
*/
|
|
Ext.define('Ext.form.RadioManager', {
|
|
extend: Ext.util.MixedCollection ,
|
|
singleton: true,
|
|
|
|
getByName: function(name, formId) {
|
|
return this.filterBy(function(item) {
|
|
return item.name == name && item.getFormId() == formId;
|
|
});
|
|
},
|
|
|
|
getWithValue: function(name, value, formId) {
|
|
return this.filterBy(function(item) {
|
|
return item.name == name && item.inputValue == value && item.getFormId() == formId;
|
|
});
|
|
},
|
|
|
|
getChecked: function(name, formId) {
|
|
return this.findBy(function(item) {
|
|
return item.name == name && item.checked && item.getFormId() == formId;
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Robert Dougan <rob@sencha.com>
|
|
*
|
|
* Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
|
|
* at a time within a group of radios with the same name.
|
|
*
|
|
* # Labeling
|
|
*
|
|
* In addition to the {@link Ext.form.Labelable standard field labeling options}, radio buttons
|
|
* may be given an optional {@link #boxLabel} which will be displayed immediately to the right of the input. Also
|
|
* see {@link Ext.form.RadioGroup} for a convenient method of grouping related radio buttons.
|
|
*
|
|
* # Values
|
|
*
|
|
* The main value of a Radio field is a boolean, indicating whether or not the radio is checked.
|
|
*
|
|
* The following values will check the radio:
|
|
*
|
|
* - `true`
|
|
* - `'true'`
|
|
* - `'1'`
|
|
* - `'on'`
|
|
*
|
|
* Any other value will uncheck it.
|
|
*
|
|
* In addition to the main boolean value, you may also specify a separate {@link #inputValue}. This will be sent
|
|
* as the parameter value when the form is {@link Ext.form.Basic#submit submitted}. You will want to set this
|
|
* value if you have multiple radio buttons with the same {@link #name}, as is almost always the case.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title : 'Order Form',
|
|
* width : 300,
|
|
* bodyPadding: 10,
|
|
* renderTo : Ext.getBody(),
|
|
* items: [
|
|
* {
|
|
* xtype : 'fieldcontainer',
|
|
* fieldLabel : 'Size',
|
|
* defaultType: 'radiofield',
|
|
* defaults: {
|
|
* flex: 1
|
|
* },
|
|
* layout: 'hbox',
|
|
* items: [
|
|
* {
|
|
* boxLabel : 'M',
|
|
* name : 'size',
|
|
* inputValue: 'm',
|
|
* id : 'radio1'
|
|
* }, {
|
|
* boxLabel : 'L',
|
|
* name : 'size',
|
|
* inputValue: 'l',
|
|
* id : 'radio2'
|
|
* }, {
|
|
* boxLabel : 'XL',
|
|
* name : 'size',
|
|
* inputValue: 'xl',
|
|
* id : 'radio3'
|
|
* }
|
|
* ]
|
|
* },
|
|
* {
|
|
* xtype : 'fieldcontainer',
|
|
* fieldLabel : 'Color',
|
|
* defaultType: 'radiofield',
|
|
* defaults: {
|
|
* flex: 1
|
|
* },
|
|
* layout: 'hbox',
|
|
* items: [
|
|
* {
|
|
* boxLabel : 'Blue',
|
|
* name : 'color',
|
|
* inputValue: 'blue',
|
|
* id : 'radio4'
|
|
* }, {
|
|
* boxLabel : 'Grey',
|
|
* name : 'color',
|
|
* inputValue: 'grey',
|
|
* id : 'radio5'
|
|
* }, {
|
|
* boxLabel : 'Black',
|
|
* name : 'color',
|
|
* inputValue: 'black',
|
|
* id : 'radio6'
|
|
* }
|
|
* ]
|
|
* }
|
|
* ],
|
|
* bbar: [
|
|
* {
|
|
* text: 'Smaller Size',
|
|
* handler: function() {
|
|
* var radio1 = Ext.getCmp('radio1'),
|
|
* radio2 = Ext.getCmp('radio2'),
|
|
* radio3 = Ext.getCmp('radio3');
|
|
*
|
|
* //if L is selected, change to M
|
|
* if (radio2.getValue()) {
|
|
* radio1.setValue(true);
|
|
* return;
|
|
* }
|
|
*
|
|
* //if XL is selected, change to L
|
|
* if (radio3.getValue()) {
|
|
* radio2.setValue(true);
|
|
* return;
|
|
* }
|
|
*
|
|
* //if nothing is set, set size to S
|
|
* radio1.setValue(true);
|
|
* }
|
|
* },
|
|
* {
|
|
* text: 'Larger Size',
|
|
* handler: function() {
|
|
* var radio1 = Ext.getCmp('radio1'),
|
|
* radio2 = Ext.getCmp('radio2'),
|
|
* radio3 = Ext.getCmp('radio3');
|
|
*
|
|
* //if M is selected, change to L
|
|
* if (radio1.getValue()) {
|
|
* radio2.setValue(true);
|
|
* return;
|
|
* }
|
|
*
|
|
* //if L is selected, change to XL
|
|
* if (radio2.getValue()) {
|
|
* radio3.setValue(true);
|
|
* return;
|
|
* }
|
|
*
|
|
* //if nothing is set, set size to XL
|
|
* radio3.setValue(true);
|
|
* }
|
|
* },
|
|
* '-',
|
|
* {
|
|
* text: 'Select color',
|
|
* menu: {
|
|
* indent: false,
|
|
* items: [
|
|
* {
|
|
* text: 'Blue',
|
|
* handler: function() {
|
|
* var radio = Ext.getCmp('radio4');
|
|
* radio.setValue(true);
|
|
* }
|
|
* },
|
|
* {
|
|
* text: 'Grey',
|
|
* handler: function() {
|
|
* var radio = Ext.getCmp('radio5');
|
|
* radio.setValue(true);
|
|
* }
|
|
* },
|
|
* {
|
|
* text: 'Black',
|
|
* handler: function() {
|
|
* var radio = Ext.getCmp('radio6');
|
|
* radio.setValue(true);
|
|
* }
|
|
* }
|
|
* ]
|
|
* }
|
|
* }
|
|
* ]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Radio', {
|
|
extend: Ext.form.field.Checkbox ,
|
|
alias: ['widget.radiofield', 'widget.radio'],
|
|
alternateClassName: 'Ext.form.Radio',
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isRadio
|
|
* `true` in this class to identify an object as an instantiated Radio, or subclass thereof.
|
|
*/
|
|
isRadio: true,
|
|
|
|
/**
|
|
* @cfg {String} [focusCls='x-form-radio-focus']
|
|
* The CSS class to use when the radio field receives focus
|
|
*/
|
|
focusCls: 'form-radio-focus',
|
|
|
|
/**
|
|
* @cfg {String} uncheckedValue
|
|
* @private
|
|
*/
|
|
|
|
// private
|
|
inputType: 'radio',
|
|
ariaRole: 'radio',
|
|
|
|
formId: null,
|
|
|
|
/**
|
|
* If this radio is part of a group, it will return the selected value
|
|
* @return {String}
|
|
*/
|
|
getGroupValue: function() {
|
|
var selected = this.getManager().getChecked(this.name, this.getFormId());
|
|
return selected ? selected.inputValue : null;
|
|
},
|
|
|
|
/**
|
|
* @private Handle click on the radio button
|
|
*/
|
|
onBoxClick: function(e) {
|
|
var me = this;
|
|
if (!me.disabled && !me.readOnly) {
|
|
this.setValue(true);
|
|
}
|
|
},
|
|
|
|
onRemoved: function(){
|
|
this.callParent(arguments);
|
|
this.formId = null;
|
|
},
|
|
|
|
/**
|
|
* Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio
|
|
* of the same name whose value is the value specified.
|
|
* @param {String/Boolean} value Checked value, or the value of the sibling radio button to check.
|
|
* @return {Ext.form.field.Radio} this
|
|
*/
|
|
setValue: function(v) {
|
|
var me = this,
|
|
active;
|
|
|
|
if (Ext.isBoolean(v)) {
|
|
me.callParent(arguments);
|
|
} else {
|
|
active = me.getManager().getWithValue(me.name, v, me.getFormId()).getAt(0);
|
|
if (active) {
|
|
active.setValue(true);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Returns the submit value for the checkbox which can be used when submitting forms.
|
|
* @return {Boolean/Object} True if checked, null if not.
|
|
*/
|
|
getSubmitValue: function() {
|
|
return this.checked ? this.inputValue : null;
|
|
},
|
|
|
|
getModelData: function() {
|
|
return this.getSubmitData();
|
|
},
|
|
|
|
// inherit docs
|
|
onChange: function(newVal, oldVal) {
|
|
var me = this,
|
|
r, rLen, radio, radios;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (newVal) {
|
|
radios = me.getManager().getByName(me.name, me.getFormId()).items;
|
|
rLen = radios.length;
|
|
|
|
for (r = 0; r < rLen; r++) {
|
|
radio = radios[r];
|
|
|
|
if (radio !== me) {
|
|
radio.setValue(false);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// inherit docs
|
|
getManager: function() {
|
|
return Ext.form.RadioManager;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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
|
|
* 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
|
|
* 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
|
|
*
|
|
* @example
|
|
* 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' }
|
|
* ]
|
|
* }]
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.form.RadioGroup', {
|
|
extend: Ext.form.CheckboxGroup ,
|
|
alias: 'widget.radiogroup',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Ext.form.field.Radio[]/Object[]} items
|
|
* An Array of {@link Ext.form.field.Radio Radio}s or Radio config objects to arrange in the group.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} allowBlank
|
|
* True to allow every item in the group to be blank.
|
|
* If allowBlank = false and no items are selected at validation time, {@link #blankText} will
|
|
* be used as the error text.
|
|
*/
|
|
allowBlank : true,
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} blankText
|
|
* Error text to display if the {@link #allowBlank} validation fails
|
|
*/
|
|
blankText : 'You must select one item in this group',
|
|
//</locale>
|
|
|
|
// private
|
|
defaultType : 'radiofield',
|
|
|
|
// private
|
|
groupCls : Ext.baseCSSPrefix + 'form-radio-group',
|
|
|
|
getBoxes: function(query) {
|
|
return this.query('[isRadio]' + (query||''));
|
|
},
|
|
|
|
checkChange: function() {
|
|
var value = this.getValue(),
|
|
key = Ext.Object.getKeys(value)[0];
|
|
|
|
// If the value is an array we skip out here because it's during a change
|
|
// between multiple items, so we never want to fire a change
|
|
if (Ext.isArray(value[key])) {
|
|
return;
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Sets the value of the radio group. The radio with corresponding name and value will be set.
|
|
* This method is simpler than {@link Ext.form.CheckboxGroup#setValue} because only 1 value is allowed
|
|
* for each name.
|
|
*
|
|
* @param {Object} value The map from names to values to be set.
|
|
* @return {Ext.form.CheckboxGroup} this
|
|
*/
|
|
setValue: function(value) {
|
|
var cbValue, first, formId, radios,
|
|
i, len, name;
|
|
|
|
if (Ext.isObject(value)) {
|
|
for (name in value) {
|
|
if (value.hasOwnProperty(name)) {
|
|
cbValue = value[name];
|
|
first = this.items.first();
|
|
formId = first ? first.getFormId() : null;
|
|
radios = Ext.form.RadioManager.getWithValue(name, cbValue, formId).items;
|
|
len = radios.length;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
radios[i].setValue(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides {@link Ext.direct.Manager} support for loading form data.
|
|
*
|
|
* This example illustrates usage of Ext.direct.Direct to **load** a form through Ext.Direct.
|
|
*
|
|
* var myFormPanel = new Ext.form.Panel({
|
|
* // configs for FormPanel
|
|
* title: 'Basic Information',
|
|
* renderTo: document.body,
|
|
* width: 300, height: 160,
|
|
* padding: 10,
|
|
*
|
|
* // configs apply to child items
|
|
* defaults: {anchor: '100%'},
|
|
* defaultType: 'textfield',
|
|
* items: [{
|
|
* fieldLabel: 'Name',
|
|
* name: 'name'
|
|
* },{
|
|
* fieldLabel: 'Email',
|
|
* name: 'email'
|
|
* },{
|
|
* fieldLabel: 'Company',
|
|
* name: 'company'
|
|
* }],
|
|
*
|
|
* // configs for BasicForm
|
|
* api: {
|
|
* // The server-side method to call for load() requests
|
|
* load: Profile.getBasicInfo,
|
|
* // The server-side must mark the submit handler as a 'formHandler'
|
|
* submit: Profile.updateBasicInfo
|
|
* },
|
|
* // specify the order for the passed params
|
|
* paramOrder: ['uid', 'foo']
|
|
* });
|
|
*
|
|
* // load the form
|
|
* myFormPanel.getForm().load({
|
|
* // pass 2 arguments to server side getBasicInfo method (len=2)
|
|
* params: {
|
|
* foo: 'bar',
|
|
* uid: 34
|
|
* }
|
|
* });
|
|
*
|
|
* The data packet sent to the server will resemble something like:
|
|
*
|
|
* [
|
|
* {
|
|
* "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
|
|
* "data":[34,"bar"] // note the order of the params
|
|
* }
|
|
* ]
|
|
*
|
|
* The form will process a data packet returned by the server that is similar to the following format:
|
|
*
|
|
* [
|
|
* {
|
|
* "action":"Profile","method":"getBasicInfo","type":"rpc","tid":2,
|
|
* "result":{
|
|
* "success":true,
|
|
* "data":{
|
|
* "name":"Fred Flintstone",
|
|
* "company":"Slate Rock and Gravel",
|
|
* "email":"fred.flintstone@slaterg.com"
|
|
* }
|
|
* }
|
|
* }
|
|
* ]
|
|
*/
|
|
Ext.define('Ext.form.action.DirectLoad', {
|
|
extend: Ext.form.action.Load ,
|
|
|
|
alternateClassName: 'Ext.form.Action.DirectLoad',
|
|
alias: 'formaction.directload',
|
|
|
|
type: 'directload',
|
|
|
|
run: function() {
|
|
var me = this,
|
|
form = me.form,
|
|
api = form.api,
|
|
fn = api.load,
|
|
method, args;
|
|
|
|
if (typeof fn !== 'function') {
|
|
|
|
api.load = fn = Ext.direct.Manager.parseMethod(fn);
|
|
|
|
}
|
|
|
|
method = fn.directCfg.method;
|
|
args = method.getArgs(me.getParams(), form.paramOrder, form.paramsAsHash);
|
|
|
|
args.push(me.onComplete, me);
|
|
fn.apply(window, args);
|
|
},
|
|
|
|
// Direct actions have already been processed and therefore
|
|
// we can directly set the result; Direct Actions do not have
|
|
// a this.response property.
|
|
processResponse: function(result) {
|
|
return (this.result = result);
|
|
},
|
|
|
|
onComplete: function(data, response) {
|
|
if (data) {
|
|
this.onSuccess(data);
|
|
} else {
|
|
this.onFailure(null);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
* Provides Ext.direct support for submitting form data.
|
|
*
|
|
* This example illustrates usage of Ext.direct.Direct to **submit** a form through Ext.Direct.
|
|
*
|
|
* var myFormPanel = new Ext.form.Panel({
|
|
* // configs for FormPanel
|
|
* title: 'Basic Information',
|
|
* renderTo: document.body,
|
|
* width: 300, height: 160,
|
|
* padding: 10,
|
|
* buttons:[{
|
|
* text: 'Submit',
|
|
* handler: function(){
|
|
* myFormPanel.getForm().submit({
|
|
* params: {
|
|
* foo: 'bar',
|
|
* uid: 34
|
|
* }
|
|
* });
|
|
* }
|
|
* }],
|
|
*
|
|
* // configs apply to child items
|
|
* defaults: {anchor: '100%'},
|
|
* defaultType: 'textfield',
|
|
* items: [{
|
|
* fieldLabel: 'Name',
|
|
* name: 'name'
|
|
* },{
|
|
* fieldLabel: 'Email',
|
|
* name: 'email'
|
|
* },{
|
|
* fieldLabel: 'Company',
|
|
* name: 'company'
|
|
* }],
|
|
*
|
|
* // configs for BasicForm
|
|
* api: {
|
|
* // The server-side method to call for load() requests
|
|
* load: Profile.getBasicInfo,
|
|
* // The server-side must mark the submit handler as a 'formHandler'
|
|
* submit: Profile.updateBasicInfo
|
|
* },
|
|
* // specify the order for the passed params
|
|
* paramOrder: ['uid', 'foo']
|
|
* });
|
|
*
|
|
* The data packet sent to the server will resemble something like:
|
|
*
|
|
* {
|
|
* "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
|
|
* "result":{
|
|
* "success":true,
|
|
* "id":{
|
|
* "extAction":"Profile","extMethod":"updateBasicInfo",
|
|
* "extType":"rpc","extTID":"6","extUpload":"false",
|
|
* "name":"Aaron Conran","email":"aaron@sencha.com","company":"Sencha Inc."
|
|
* }
|
|
* }
|
|
* }
|
|
*
|
|
* The form will process a data packet returned by the server that is similar to the following:
|
|
*
|
|
* // sample success packet (batched requests)
|
|
* [
|
|
* {
|
|
* "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":3,
|
|
* "result":{
|
|
* "success":true
|
|
* }
|
|
* }
|
|
* ]
|
|
*
|
|
* // sample failure packet (one request)
|
|
* {
|
|
* "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",
|
|
* "result":{
|
|
* "errors":{
|
|
* "email":"already taken"
|
|
* },
|
|
* "success":false,
|
|
* "foo":"bar"
|
|
* }
|
|
* }
|
|
*
|
|
* Also see the discussion in {@link Ext.form.action.DirectLoad}.
|
|
*/
|
|
Ext.define('Ext.form.action.DirectSubmit', {
|
|
extend: Ext.form.action.Submit ,
|
|
|
|
alternateClassName: 'Ext.form.Action.DirectSubmit',
|
|
alias: 'formaction.directsubmit',
|
|
|
|
type: 'directsubmit',
|
|
|
|
doSubmit: function() {
|
|
var me = this,
|
|
form = me.form,
|
|
api = form.api,
|
|
fn = api.submit,
|
|
callback = Ext.Function.bind(me.onComplete, me),
|
|
formInfo = me.buildForm(),
|
|
options;
|
|
|
|
if (typeof fn !== 'function') {
|
|
|
|
api.submit = fn = Ext.direct.Manager.parseMethod(fn);
|
|
|
|
}
|
|
|
|
if (me.timeout || form.timeout) {
|
|
options = {
|
|
timeout: me.timeout * 1000 || form.timeout * 1000
|
|
};
|
|
}
|
|
|
|
fn.call(window, formInfo.formEl, callback, me, options);
|
|
me.cleanup(formInfo);
|
|
},
|
|
|
|
// Direct actions have already been processed and therefore
|
|
// we can directly set the result; Direct Actions do not have
|
|
// a this.response property.
|
|
processResponse: function(result) {
|
|
return (this.result = result);
|
|
},
|
|
|
|
onComplete: function(data, response){
|
|
if (data) {
|
|
this.onSuccess(data);
|
|
} else {
|
|
this.onFailure(null);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A class which handles submission of data from {@link Ext.form.Basic Form}s using a standard `<form>` element submit.
|
|
* It does not handle the response from the submit.
|
|
*
|
|
* If validation of the form fields fails, the Form's afterAction method will be called. Otherwise, afterAction will not
|
|
* be called.
|
|
*
|
|
* Instances of this class are only created by a {@link Ext.form.Basic Form} when
|
|
* {@link Ext.form.Basic#submit submit}ting, when the form's {@link Ext.form.Basic#standardSubmit} config option is true.
|
|
*/
|
|
Ext.define('Ext.form.action.StandardSubmit', {
|
|
extend: Ext.form.action.Submit ,
|
|
alias: 'formaction.standardsubmit',
|
|
|
|
/**
|
|
* @cfg {String} target
|
|
* Optional target attribute to be used for the form when submitting.
|
|
*
|
|
* Defaults to the current window/frame.
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Perform the form submit. Creates and submits a temporary form element containing an input element for each
|
|
* field value returned by {@link Ext.form.Basic#getValues}, plus any configured {@link #params params} or
|
|
* {@link Ext.form.Basic#baseParams baseParams}.
|
|
*/
|
|
doSubmit: function() {
|
|
var formInfo = this.buildForm();
|
|
formInfo.formEl.submit();
|
|
this.cleanup(formInfo);
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Layout class for {@link Ext.form.field.Trigger} fields. Adjusts the input field size to accommodate
|
|
* the trigger button(s).
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.Trigger', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.triggerfield',
|
|
|
|
extend: Ext.layout.component.field.Field ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'triggerfield',
|
|
|
|
// Private. Cached extra width values containing width of all a trigger field's "furniture" round the actual input element
|
|
borderWidths: {},
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
flags;
|
|
|
|
ownerContext.triggerWrap = ownerContext.getEl('triggerWrap');
|
|
|
|
me.callParent(arguments);
|
|
|
|
// if any of these important states have changed, sync them now:
|
|
flags = owner.getTriggerStateFlags();
|
|
if (flags != owner.lastTriggerStateFlags) {
|
|
owner.lastTriggerStateFlags = flags;
|
|
me.updateEditState();
|
|
}
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext){
|
|
this.callParent(arguments);
|
|
|
|
// Clear width, in case a previous layout cycle set an explicit width.
|
|
if (ownerContext.widthModel.shrinkWrap && !this.owner.inputWidth) {
|
|
ownerContext.inputContext.el.setStyle('width', '');
|
|
}
|
|
},
|
|
|
|
beginLayoutFixed: function (ownerContext, width, suffix) {
|
|
var me = this,
|
|
owner = ownerContext.target,
|
|
ieInputWidthAdjustment = me.ieInputWidthAdjustment || 0,
|
|
inputWidth = '100%',
|
|
triggerWrap = owner.triggerWrap;
|
|
|
|
me.callParent(arguments);
|
|
|
|
owner.inputCell.setStyle('width', '100%');
|
|
if(ieInputWidthAdjustment) {
|
|
me.adjustIEInputPadding(ownerContext);
|
|
if(suffix === 'px') {
|
|
if (owner.inputWidth) {
|
|
inputWidth = owner.inputWidth - me.getExtraWidth(ownerContext);
|
|
} else {
|
|
inputWidth = width - ieInputWidthAdjustment - me.getExtraWidth(ownerContext);
|
|
}
|
|
inputWidth += 'px';
|
|
}
|
|
}
|
|
owner.inputEl.setStyle('width', inputWidth);
|
|
inputWidth = owner.inputWidth;
|
|
if (inputWidth) {
|
|
triggerWrap.setStyle('width', inputWidth + (ieInputWidthAdjustment) + 'px');
|
|
} else {
|
|
triggerWrap.setStyle('width', width + suffix);
|
|
}
|
|
triggerWrap.setStyle('table-layout', 'fixed');
|
|
},
|
|
|
|
adjustIEInputPadding: function(ownerContext) {
|
|
// adjust for IE 6/7 strict content-box model
|
|
this.owner.inputCell.setStyle('padding-right', this.ieInputWidthAdjustment + 'px');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the width of the "extras" around the input field. This includes the total width
|
|
* of all the triggers in the field and any outer bordering.
|
|
*
|
|
* This measurement is used when explicitly sizing the contained input field to a smaller inner
|
|
* width while keeping the outer component width the same. This extra width is subtracted from the
|
|
* total component width to calculate the new width for the input field.
|
|
*/
|
|
getExtraWidth: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
borderWidths = me.borderWidths,
|
|
ui = owner.ui + owner.triggerEl.getCount();
|
|
|
|
if (!(ui in borderWidths)) {
|
|
borderWidths[ui] = ownerContext.triggerWrap.getBorderInfo().width
|
|
}
|
|
return borderWidths[ui] + owner.getTriggerWidth();
|
|
},
|
|
|
|
beginLayoutShrinkWrap: function (ownerContext) {
|
|
var owner = ownerContext.target,
|
|
emptyString = '',
|
|
inputWidth = owner.inputWidth,
|
|
triggerWrap = owner.triggerWrap;
|
|
|
|
this.callParent(arguments);
|
|
|
|
if (inputWidth) {
|
|
triggerWrap.setStyle('width', inputWidth + 'px');
|
|
inputWidth = (inputWidth - this.getExtraWidth(ownerContext)) + 'px';
|
|
owner.inputEl.setStyle('width', inputWidth);
|
|
owner.inputCell.setStyle('width', inputWidth);
|
|
} else {
|
|
owner.inputCell.setStyle('width', emptyString);
|
|
owner.inputEl.setStyle('width', emptyString);
|
|
triggerWrap.setStyle('width', emptyString);
|
|
triggerWrap.setStyle('table-layout', 'auto');
|
|
}
|
|
},
|
|
|
|
getTextWidth: function () {
|
|
var me = this,
|
|
owner = me.owner,
|
|
inputEl = owner.inputEl,
|
|
value;
|
|
|
|
// Find the width that contains the whole text value
|
|
value = (inputEl.dom.value || (owner.hasFocus ? '' : owner.emptyText) || '') + owner.growAppend;
|
|
return inputEl.getTextWidth(value);
|
|
},
|
|
|
|
publishOwnerWidth: function(ownerContext, width) {
|
|
var owner = this.owner;
|
|
this.callParent(arguments);
|
|
if (!owner.grow && !owner.inputWidth) {
|
|
width -= this.getExtraWidth(ownerContext);
|
|
if (owner.labelAlign != 'top') {
|
|
width -= owner.getLabelWidth();
|
|
}
|
|
ownerContext.inputContext.setWidth(width);
|
|
}
|
|
},
|
|
|
|
publishInnerHeight: function(ownerContext, height) {
|
|
ownerContext.inputContext.setHeight(height - this.measureLabelErrorHeight(ownerContext));
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
width = me.callParent(arguments),
|
|
inputContext = ownerContext.inputContext,
|
|
calcWidth, max, min;
|
|
|
|
if (owner.grow && !ownerContext.state.growHandled) {
|
|
calcWidth = me.getTextWidth() + ownerContext.inputContext.getFrameInfo().width;
|
|
|
|
max = owner.growMax;
|
|
min = Math.min(max, width);
|
|
max = Math.max(owner.growMin, max, min);
|
|
|
|
// Constrain
|
|
calcWidth = Ext.Number.constrain(calcWidth, owner.growMin, max);
|
|
inputContext.setWidth(calcWidth);
|
|
ownerContext.state.growHandled = true;
|
|
|
|
// Now that we've set the inputContext, we need to recalculate the width
|
|
inputContext.domBlock(me, 'width');
|
|
width = NaN;
|
|
} else if (!owner.inputWidth) {
|
|
width -= me.getExtraWidth(ownerContext);
|
|
}
|
|
return width;
|
|
},
|
|
|
|
updateEditState: function() {
|
|
var me = this,
|
|
owner = me.owner,
|
|
inputEl = owner.inputEl,
|
|
noeditCls = Ext.baseCSSPrefix + 'trigger-noedit',
|
|
displayed,
|
|
readOnly;
|
|
|
|
if (me.owner.readOnly) {
|
|
inputEl.addCls(noeditCls);
|
|
readOnly = true;
|
|
displayed = false;
|
|
} else {
|
|
if (me.owner.editable) {
|
|
inputEl.removeCls(noeditCls);
|
|
readOnly = false;
|
|
} else {
|
|
inputEl.addCls(noeditCls);
|
|
readOnly = true;
|
|
}
|
|
displayed = !me.owner.hideTrigger;
|
|
}
|
|
|
|
owner.triggerCell.setDisplayed(displayed);
|
|
inputEl.dom.readOnly = readOnly;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
|
|
* The trigger has no default action, so you must assign a function to implement the trigger click handler by overriding
|
|
* {@link #onTriggerClick}. You can create a Trigger field directly, as it renders exactly like a combobox for which you
|
|
* can provide a custom implementation.
|
|
*
|
|
* For example:
|
|
*
|
|
* @example
|
|
* Ext.define('Ext.ux.CustomTrigger', {
|
|
* extend: 'Ext.form.field.Trigger',
|
|
* alias: 'widget.customtrigger',
|
|
*
|
|
* // override onTriggerClick
|
|
* onTriggerClick: function() {
|
|
* Ext.Msg.alert('Status', 'You clicked my trigger!');
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.form.FormPanel', {
|
|
* title: 'Form with TriggerField',
|
|
* bodyPadding: 5,
|
|
* width: 350,
|
|
* renderTo: Ext.getBody(),
|
|
* items:[{
|
|
* xtype: 'customtrigger',
|
|
* fieldLabel: 'Sample Trigger',
|
|
* emptyText: 'click the trigger'
|
|
* }]
|
|
* });
|
|
*
|
|
* However, in general you will most likely want to use Trigger as the base class for a reusable component.
|
|
* {@link Ext.form.field.Date} and {@link Ext.form.field.ComboBox} are perfect examples of this.
|
|
*/
|
|
Ext.define('Ext.form.field.Trigger', {
|
|
extend: Ext.form.field.Text ,
|
|
alias: ['widget.triggerfield', 'widget.trigger'],
|
|
|
|
alternateClassName: ['Ext.form.TriggerField', 'Ext.form.TwinTriggerField', 'Ext.form.Trigger'],
|
|
|
|
childEls: [
|
|
/**
|
|
* @property {Ext.CompositeElement} triggerEl
|
|
* A composite of all the trigger button elements. Only set after the field has been rendered.
|
|
*/
|
|
{ name: 'triggerCell', select: '.' + Ext.baseCSSPrefix + 'trigger-cell' },
|
|
{ name: 'triggerEl', select: '.' + Ext.baseCSSPrefix + 'form-trigger' },
|
|
|
|
/**
|
|
* @property {Ext.Element} triggerWrap
|
|
* A reference to the `TABLE` element which encapsulates the input field and all trigger button(s). Only set after the field has been rendered.
|
|
*/
|
|
'triggerWrap',
|
|
|
|
/**
|
|
* @property {Ext.Element} inputCell
|
|
* A reference to the `TD` element wrapping the input element. Only set after the field has been rendered.
|
|
*/
|
|
'inputCell'
|
|
],
|
|
|
|
/**
|
|
* @cfg {String} triggerCls
|
|
* An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls}
|
|
* by default and triggerCls will be **appended** if specified.
|
|
*/
|
|
|
|
/**
|
|
* @cfg
|
|
* The base CSS class that is always added to the trigger button. The {@link #triggerCls} will be appended in
|
|
* addition to this class.
|
|
*/
|
|
triggerBaseCls: Ext.baseCSSPrefix + 'form-trigger',
|
|
|
|
/**
|
|
* @cfg
|
|
* The CSS class that is added to the div wrapping the trigger button(s).
|
|
*/
|
|
triggerWrapCls: Ext.baseCSSPrefix + 'form-trigger-wrap',
|
|
|
|
/**
|
|
* @cfg
|
|
* The CSS class that is added to the text field when component is read-only or not editable.
|
|
*/
|
|
triggerNoEditCls: Ext.baseCSSPrefix + 'trigger-noedit',
|
|
|
|
/**
|
|
* @cfg {Boolean} hideTrigger
|
|
* true to hide the trigger element and display only the base text field
|
|
*/
|
|
hideTrigger: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} editable
|
|
* false to prevent the user from typing text directly into the field; the field can only have its value set via an
|
|
* action invoked by the trigger.
|
|
*/
|
|
editable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} readOnly
|
|
* true to prevent the user from changing the field, and hides the trigger. Supercedes the editable and hideTrigger
|
|
* options if the value is true.
|
|
*/
|
|
readOnly: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [selectOnFocus=false]
|
|
* true to select any existing text in the field immediately on focus. Only applies when
|
|
* {@link #editable editable} = true
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} repeatTriggerClick
|
|
* true to attach a {@link Ext.util.ClickRepeater click repeater} to the trigger.
|
|
*/
|
|
repeatTriggerClick: false,
|
|
|
|
|
|
/**
|
|
* @method autoSize
|
|
* @private
|
|
*/
|
|
autoSize: Ext.emptyFn,
|
|
// @private
|
|
monitorTab: true,
|
|
// @private
|
|
mimicing: false,
|
|
// @private
|
|
triggerIndexRe: /trigger-index-(\d+)/,
|
|
|
|
extraTriggerCls: '',
|
|
|
|
componentLayout: 'triggerfield',
|
|
|
|
initComponent: function() {
|
|
this.wrapFocusCls = this.triggerWrapCls + '-focus';
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
getSubTplMarkup: function(values) {
|
|
var me = this,
|
|
childElCls = values.childElCls, // either '' or ' x-foo'
|
|
field = me.callParent(arguments);
|
|
|
|
return '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap' + childElCls + '" cellpadding="0" cellspacing="0"><tbody><tr>' +
|
|
'<td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell' + childElCls + '">' + field + '</td>' +
|
|
me.getTriggerMarkup() +
|
|
'</tr></tbody></table>';
|
|
},
|
|
|
|
getSubTplData: function(){
|
|
var me = this,
|
|
data = me.callParent(),
|
|
readOnly = me.readOnly === true,
|
|
editable = me.editable !== false;
|
|
|
|
return Ext.apply(data, {
|
|
editableCls: (readOnly || !editable) ? ' ' + me.triggerNoEditCls : '',
|
|
readOnly: !editable || readOnly
|
|
});
|
|
},
|
|
|
|
getLabelableRenderData: function() {
|
|
var me = this,
|
|
triggerWrapCls = me.triggerWrapCls,
|
|
result = me.callParent(arguments);
|
|
|
|
return Ext.applyIf(result, {
|
|
triggerWrapCls: triggerWrapCls,
|
|
triggerMarkup: me.getTriggerMarkup()
|
|
});
|
|
},
|
|
|
|
getTriggerMarkup: function() {
|
|
var me = this,
|
|
i = 0,
|
|
hideTrigger = (me.readOnly || me.hideTrigger),
|
|
triggerCls,
|
|
triggerBaseCls = me.triggerBaseCls,
|
|
triggerConfigs = [],
|
|
unselectableCls = Ext.dom.Element.unselectableCls,
|
|
style = 'width:' + me.triggerWidth + 'px;' + (hideTrigger ? 'display:none;' : ''),
|
|
cls = me.extraTriggerCls + ' ' + Ext.baseCSSPrefix + 'trigger-cell ' + unselectableCls;
|
|
|
|
// TODO this trigger<n>Cls API design doesn't feel clean, especially where it butts up against the
|
|
// single triggerCls config. Should rethink this, perhaps something more structured like a list of
|
|
// trigger config objects that hold cls, handler, etc.
|
|
// triggerCls is a synonym for trigger1Cls, so copy it.
|
|
if (!me.trigger1Cls) {
|
|
me.trigger1Cls = me.triggerCls;
|
|
}
|
|
|
|
// Create as many trigger elements as we have trigger<n>Cls configs, but always at least one
|
|
for (i = 0; (triggerCls = me['trigger' + (i + 1) + 'Cls']) || i < 1; i++) {
|
|
triggerConfigs.push({
|
|
tag: 'td',
|
|
valign: 'top',
|
|
cls: cls,
|
|
style: style,
|
|
cn: {
|
|
cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
|
|
role: 'button'
|
|
}
|
|
});
|
|
}
|
|
triggerConfigs[0].cn.cls += ' ' + triggerBaseCls + '-first';
|
|
|
|
return Ext.DomHelper.markup(triggerConfigs);
|
|
},
|
|
|
|
disableCheck: function() {
|
|
return !this.disabled;
|
|
},
|
|
|
|
// @private
|
|
beforeRender: function() {
|
|
var me = this,
|
|
triggerBaseCls = me.triggerBaseCls,
|
|
tempEl;
|
|
|
|
/**
|
|
* @property {Number} triggerWidth
|
|
* Width of the trigger element. Unless set explicitly, it will be
|
|
* automatically calculated through creating a temporary element
|
|
* on page. (That will be done just once per app run.)
|
|
* @private
|
|
*/
|
|
if (!me.triggerWidth) {
|
|
tempEl = Ext.getBody().createChild({
|
|
style: 'position: absolute;',
|
|
cls: Ext.baseCSSPrefix + 'form-trigger'
|
|
});
|
|
Ext.form.field.Trigger.prototype.triggerWidth = tempEl.getWidth();
|
|
tempEl.remove();
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
if (triggerBaseCls != Ext.baseCSSPrefix + 'form-trigger') {
|
|
// we may need to change the selectors by which we extract trigger elements if is triggerBaseCls isn't the value we
|
|
// stuck in childEls
|
|
me.addChildEls({ name: 'triggerEl', select: '.' + triggerBaseCls });
|
|
}
|
|
|
|
// these start correct in the fieldSubTpl:
|
|
me.lastTriggerStateFlags = me.getTriggerStateFlags();
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.doc = Ext.getDoc();
|
|
me.initTrigger();
|
|
},
|
|
|
|
/**
|
|
* Get the total width of the trigger button area.
|
|
* @return {Number} The total trigger width
|
|
*/
|
|
getTriggerWidth: function() {
|
|
var me = this,
|
|
totalTriggerWidth = 0;
|
|
|
|
if (me.triggerWrap && !me.hideTrigger && !me.readOnly) {
|
|
totalTriggerWidth = me.triggerEl.getCount() * me.triggerWidth;
|
|
}
|
|
return totalTriggerWidth;
|
|
},
|
|
|
|
setHideTrigger: function(hideTrigger) {
|
|
if (hideTrigger != this.hideTrigger) {
|
|
this.hideTrigger = hideTrigger;
|
|
this.updateLayout();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the editable state of this field. This method is the runtime equivalent of setting the 'editable' config
|
|
* option at config time.
|
|
* @param {Boolean} editable True to allow the user to directly edit the field text. If false is passed, the user
|
|
* will only be able to modify the field using the trigger. Will also add a click event to the text field which
|
|
* will call the trigger.
|
|
*/
|
|
setEditable: function(editable) {
|
|
if (editable != this.editable) {
|
|
this.editable = editable;
|
|
this.updateLayout();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the read-only state of this field. This method is the runtime equivalent of setting the 'readOnly' config
|
|
* option at config time.
|
|
* @param {Boolean} readOnly True to prevent the user changing the field and explicitly hide the trigger. Setting
|
|
* this to true will supercede settings editable and hideTrigger. Setting this to false will defer back to editable
|
|
* and hideTrigger.
|
|
*/
|
|
setReadOnly: function(readOnly) {
|
|
var me = this,
|
|
old = me.readOnly;
|
|
|
|
me.callParent(arguments);
|
|
if (readOnly != old) {
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
initTrigger: function() {
|
|
var me = this,
|
|
triggerWrap = me.triggerWrap,
|
|
triggerEl = me.triggerEl,
|
|
disableCheck = me.disableCheck,
|
|
els, eLen, el, e, idx;
|
|
|
|
if (me.repeatTriggerClick) {
|
|
me.triggerRepeater = new Ext.util.ClickRepeater(triggerWrap, {
|
|
preventDefault: true,
|
|
handler: me.onTriggerWrapClick,
|
|
listeners: {
|
|
mouseup: me.onTriggerWrapMouseup,
|
|
scope: me
|
|
},
|
|
scope: me
|
|
});
|
|
} else {
|
|
me.mon(triggerWrap, {
|
|
click: me.onTriggerWrapClick,
|
|
mouseup: me.onTriggerWrapMouseup,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
triggerEl.setVisibilityMode(Ext.Element.DISPLAY);
|
|
triggerEl.addClsOnOver(me.triggerBaseCls + '-over', disableCheck, me);
|
|
|
|
els = triggerEl.elements;
|
|
eLen = els.length;
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
el = els[e];
|
|
idx = e+1;
|
|
el.addClsOnOver(me['trigger' + (idx) + 'Cls'] + '-over', disableCheck, me);
|
|
el.addClsOnClick(me['trigger' + (idx) + 'Cls'] + '-click', disableCheck, me);
|
|
}
|
|
|
|
triggerEl.addClsOnClick(me.triggerBaseCls + '-click', disableCheck, me);
|
|
|
|
},
|
|
|
|
// @private
|
|
onDestroy: function() {
|
|
var me = this;
|
|
Ext.destroyMembers(me, 'triggerRepeater', 'triggerWrap', 'triggerEl');
|
|
delete me.doc;
|
|
me.callParent();
|
|
},
|
|
|
|
// @private
|
|
onFocus: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (!me.mimicing) {
|
|
me.bodyEl.addCls(me.wrapFocusCls);
|
|
me.mimicing = true;
|
|
me.mon(me.doc, 'mousedown', me.mimicBlur, me, {
|
|
delay: 10
|
|
});
|
|
if (me.monitorTab) {
|
|
me.on('specialkey', me.checkTab, me);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
checkTab: function(me, e) {
|
|
if (!this.ignoreMonitorTab && e.getKey() == e.TAB) {
|
|
this.triggerBlur();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns a set of flags that describe the trigger state. These are just used to easily
|
|
* determine if the DOM is out-of-sync with the component's properties.
|
|
* @private
|
|
*/
|
|
getTriggerStateFlags: function () {
|
|
var me = this,
|
|
state = 0;
|
|
|
|
if (me.readOnly) {
|
|
state += 1;
|
|
}
|
|
if (me.editable) {
|
|
state += 2;
|
|
}
|
|
if (me.hideTrigger) {
|
|
state += 4;
|
|
}
|
|
return state;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* The default blur handling must not occur for a TriggerField, implementing this template method as emptyFn disables that.
|
|
* Instead the tab key is monitored, and the superclass's onBlur is called when tab is detected
|
|
*/
|
|
onBlur: Ext.emptyFn,
|
|
|
|
// @private
|
|
mimicBlur: function(e) {
|
|
if (!this.isDestroyed && !this.bodyEl.contains(e.target) && this.validateBlur(e)) {
|
|
this.triggerBlur(e);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
triggerBlur: function(e) {
|
|
var me = this;
|
|
me.mimicing = false;
|
|
me.mun(me.doc, 'mousedown', me.mimicBlur, me);
|
|
if (me.monitorTab && me.inputEl) {
|
|
me.un('specialkey', me.checkTab, me);
|
|
}
|
|
Ext.form.field.Trigger.superclass.onBlur.call(me, e);
|
|
if (me.bodyEl) {
|
|
me.bodyEl.removeCls(me.wrapFocusCls);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// This should be overridden by any subclass that needs to check whether or not the field can be blurred.
|
|
validateBlur: function(e) {
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
// process clicks upon triggers.
|
|
// determine which trigger index, and dispatch to the appropriate click handler
|
|
onTriggerWrapClick: function() {
|
|
var me = this,
|
|
targetEl, match,
|
|
triggerClickMethod,
|
|
event;
|
|
|
|
event = arguments[me.triggerRepeater ? 1 : 0];
|
|
if (event && !me.readOnly && !me.disabled) {
|
|
targetEl = event.getTarget('.' + me.triggerBaseCls, null);
|
|
match = targetEl && targetEl.className.match(me.triggerIndexRe);
|
|
|
|
if (match) {
|
|
triggerClickMethod = me['onTrigger' + (parseInt(match[1], 10) + 1) + 'Click'] || me.onTriggerClick;
|
|
if (triggerClickMethod) {
|
|
triggerClickMethod.call(me, event);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// Handle trigger mouse up gesture. To be implemented in subclasses.
|
|
// Currently the Spinner subclass refocuses the input element upon end of spin.
|
|
onTriggerWrapMouseup: Ext.emptyFn,
|
|
|
|
/**
|
|
* @method onTriggerClick
|
|
* @protected
|
|
* The function that should handle the trigger's click event. This method does nothing by default until overridden
|
|
* by an implementing function. See Ext.form.field.ComboBox and Ext.form.field.Date for sample implementations.
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
onTriggerClick: Ext.emptyFn
|
|
|
|
/**
|
|
* @cfg {Boolean} grow
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Number} growMin
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Number} growMax
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox
|
|
* menu list or a date picker. It provides a base implementation for toggling the picker's visibility when the trigger
|
|
* is clicked, as well as keyboard navigation and some basic events. Sizing and alignment of the picker can be
|
|
* controlled via the {@link #matchFieldWidth} and {@link #pickerAlign}/{@link #pickerOffset} config properties
|
|
* respectively.
|
|
*
|
|
* You would not normally use this class directly, but instead use it as the parent class for a specific picker field
|
|
* implementation. Subclasses must implement the {@link #createPicker} method to create a picker component appropriate
|
|
* for the field.
|
|
*/
|
|
Ext.define('Ext.form.field.Picker', {
|
|
extend: Ext.form.field.Trigger ,
|
|
alias: 'widget.pickerfield',
|
|
alternateClassName: 'Ext.form.Picker',
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} matchFieldWidth
|
|
* Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to true.
|
|
*/
|
|
matchFieldWidth: true,
|
|
|
|
/**
|
|
* @cfg {String} pickerAlign
|
|
* The {@link Ext.util.Positionable#alignTo alignment position} with which to align the picker. Defaults to "tl-bl?"
|
|
*/
|
|
pickerAlign: 'tl-bl?',
|
|
|
|
/**
|
|
* @cfg {Number[]} pickerOffset
|
|
* An offset [x,y] to use in addition to the {@link #pickerAlign} when positioning the picker.
|
|
* Defaults to undefined.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [openCls='x-pickerfield-open']
|
|
* A class to be added to the field's {@link #bodyEl} element when the picker is opened.
|
|
*/
|
|
openCls: Ext.baseCSSPrefix + 'pickerfield-open',
|
|
|
|
/**
|
|
* @property {Boolean} isExpanded
|
|
* True if the picker is currently expanded, false if not.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} editable
|
|
* False to prevent the user from typing text directly into the field; the field can only have its value set via
|
|
* selecting a value from the picker. In this state, the picker can also be opened by clicking directly on the input
|
|
* field itself.
|
|
*/
|
|
editable: true,
|
|
|
|
|
|
initComponent: function() {
|
|
this.callParent();
|
|
|
|
// Custom events
|
|
this.addEvents(
|
|
/**
|
|
* @event expand
|
|
* Fires when the field's picker is expanded.
|
|
* @param {Ext.form.field.Picker} field This field instance
|
|
*/
|
|
'expand',
|
|
/**
|
|
* @event collapse
|
|
* Fires when the field's picker is collapsed.
|
|
* @param {Ext.form.field.Picker} field This field instance
|
|
*/
|
|
'collapse',
|
|
/**
|
|
* @event select
|
|
* Fires when a value is selected via the picker.
|
|
* @param {Ext.form.field.Picker} field This field instance
|
|
* @param {Object} value The value that was selected. The exact type of this value is dependent on
|
|
* the individual field and picker implementations.
|
|
*/
|
|
'select'
|
|
);
|
|
},
|
|
|
|
|
|
initEvents: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
// Add handlers for keys to expand/collapse the picker
|
|
me.keyNav = new Ext.util.KeyNav(me.inputEl, {
|
|
down: me.onDownArrow,
|
|
esc: {
|
|
handler: me.onEsc,
|
|
scope: me,
|
|
defaultEventAction: false
|
|
},
|
|
scope: me,
|
|
forceKeyDown: true
|
|
});
|
|
|
|
// Non-editable allows opening the picker by clicking the field
|
|
if (!me.editable) {
|
|
me.mon(me.inputEl, 'click', me.onTriggerClick, me);
|
|
}
|
|
|
|
// Disable native browser autocomplete
|
|
if (Ext.isGecko) {
|
|
me.inputEl.dom.setAttribute('autocomplete', 'off');
|
|
}
|
|
},
|
|
|
|
// private
|
|
onEsc: function(e) {
|
|
if (Ext.isIE) {
|
|
// Stop the esc key from "restoring" the previous value in IE
|
|
// For example, type "foo". Highlight all the text, hit backspace.
|
|
// Hit esc, "foo" will be restored. This behaviour doesn't occur
|
|
// in any other browsers
|
|
e.preventDefault();
|
|
}
|
|
|
|
if (this.isExpanded) {
|
|
this.collapse();
|
|
e.stopEvent();
|
|
}
|
|
},
|
|
|
|
onDownArrow: function(e) {
|
|
if (!this.isExpanded) {
|
|
// Don't call expand() directly as there may be additional processing involved before
|
|
// expanding, e.g. in the case of a ComboBox query.
|
|
this.onTriggerClick();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Expands this field's picker dropdown.
|
|
*/
|
|
expand: function() {
|
|
var me = this,
|
|
bodyEl, picker, collapseIf;
|
|
|
|
if (me.rendered && !me.isExpanded && !me.isDestroyed) {
|
|
me.expanding = true;
|
|
bodyEl = me.bodyEl;
|
|
picker = me.getPicker();
|
|
collapseIf = me.collapseIf;
|
|
|
|
// show the picker and set isExpanded flag
|
|
picker.show();
|
|
me.isExpanded = true;
|
|
me.alignPicker();
|
|
bodyEl.addCls(me.openCls);
|
|
|
|
// monitor clicking and mousewheel
|
|
me.mon(Ext.getDoc(), {
|
|
mousewheel: collapseIf,
|
|
mousedown: collapseIf,
|
|
scope: me
|
|
});
|
|
Ext.EventManager.onWindowResize(me.alignPicker, me);
|
|
me.fireEvent('expand', me);
|
|
me.onExpand();
|
|
delete me.expanding;
|
|
}
|
|
},
|
|
|
|
onExpand: Ext.emptyFn,
|
|
|
|
/**
|
|
* Aligns the picker to the input element
|
|
* @protected
|
|
*/
|
|
alignPicker: function() {
|
|
var me = this,
|
|
picker = me.getPicker();
|
|
|
|
if (me.isExpanded) {
|
|
if (me.matchFieldWidth) {
|
|
// Auto the height (it will be constrained by min and max width) unless there are no records to display.
|
|
picker.setWidth(me.bodyEl.getWidth());
|
|
}
|
|
if (picker.isFloating()) {
|
|
me.doAlign();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Performs the alignment on the picker using the class defaults
|
|
* @private
|
|
*/
|
|
doAlign: function(){
|
|
var me = this,
|
|
picker = me.picker,
|
|
aboveSfx = '-above',
|
|
isAbove;
|
|
|
|
// Align to the trigger wrap because the border isn't always on the input element, which
|
|
// can cause the offset to be off
|
|
me.picker.alignTo(me.triggerWrap, me.pickerAlign, me.pickerOffset);
|
|
// add the {openCls}-above class if the picker was aligned above
|
|
// the field due to hitting the bottom of the viewport
|
|
isAbove = picker.el.getY() < me.inputEl.getY();
|
|
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
|
|
picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
|
|
},
|
|
|
|
/**
|
|
* Collapses this field's picker dropdown.
|
|
*/
|
|
collapse: function() {
|
|
if (this.isExpanded && !this.isDestroyed) {
|
|
var me = this,
|
|
openCls = me.openCls,
|
|
picker = me.picker,
|
|
doc = Ext.getDoc(),
|
|
collapseIf = me.collapseIf,
|
|
aboveSfx = '-above';
|
|
|
|
// hide the picker and set isExpanded flag
|
|
picker.hide();
|
|
me.isExpanded = false;
|
|
|
|
// remove the openCls
|
|
me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
|
|
picker.el.removeCls(picker.baseCls + aboveSfx);
|
|
|
|
// remove event listeners
|
|
doc.un('mousewheel', collapseIf, me);
|
|
doc.un('mousedown', collapseIf, me);
|
|
Ext.EventManager.removeResizeListener(me.alignPicker, me);
|
|
me.fireEvent('collapse', me);
|
|
me.onCollapse();
|
|
}
|
|
},
|
|
|
|
onCollapse: Ext.emptyFn,
|
|
|
|
|
|
/**
|
|
* @private
|
|
* Runs on mousewheel and mousedown of doc to check to see if we should collapse the picker
|
|
*/
|
|
collapseIf: function(e) {
|
|
var me = this;
|
|
|
|
if (!me.isDestroyed && !e.within(me.bodyEl, false, true) && !e.within(me.picker.el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
|
|
me.collapse();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns a reference to the picker component for this field, creating it if necessary by
|
|
* calling {@link #createPicker}.
|
|
* @return {Ext.Component} The picker component
|
|
*/
|
|
getPicker: function() {
|
|
var me = this;
|
|
return me.picker || (me.picker = me.createPicker());
|
|
},
|
|
|
|
/**
|
|
* @method
|
|
* Creates and returns the component to be used as this field's picker. Must be implemented by subclasses of Picker.
|
|
* The current field should also be passed as a configuration option to the picker component as the pickerField
|
|
* property.
|
|
*/
|
|
createPicker: Ext.emptyFn,
|
|
|
|
/**
|
|
* Handles the trigger click; by default toggles between expanding and collapsing the picker component.
|
|
* @protected
|
|
*/
|
|
onTriggerClick: function() {
|
|
var me = this;
|
|
if (!me.readOnly && !me.disabled) {
|
|
if (me.isExpanded) {
|
|
me.collapse();
|
|
} else {
|
|
me.expand();
|
|
}
|
|
me.inputEl.focus();
|
|
}
|
|
},
|
|
|
|
triggerBlur: function() {
|
|
var picker = this.picker;
|
|
|
|
this.callParent(arguments);
|
|
if (picker && picker.isVisible()) {
|
|
picker.hide();
|
|
}
|
|
},
|
|
|
|
mimicBlur: function(e) {
|
|
var me = this,
|
|
picker = me.picker;
|
|
// ignore mousedown events within the picker element
|
|
if (!picker || !e.within(picker.el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
|
|
me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
onDestroy : function(){
|
|
var me = this,
|
|
picker = me.picker;
|
|
|
|
Ext.EventManager.removeResizeListener(me.alignPicker, me);
|
|
Ext.destroy(me.keyNav);
|
|
if (picker) {
|
|
delete picker.pickerField;
|
|
picker.destroy();
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* returns true if the picker has a load mask and the passed event is within the load mask
|
|
* @private
|
|
* @param {Ext.EventObject} e
|
|
* @return {Boolean}
|
|
*/
|
|
isEventWithinPickerLoadMask: function(e) {
|
|
var loadMask = this.picker.loadMask;
|
|
|
|
return loadMask ? e.within(loadMask.maskEl, false, true) || e.within(loadMask.el, false, true) : false;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
/**
|
|
* Tracks what records are currently selected in a databound component.
|
|
*
|
|
* This is an abstract class and is not meant to be directly used. Databound UI widgets such as
|
|
* {@link Ext.grid.Panel Grid} and {@link Ext.tree.Panel Tree} should subclass Ext.selection.Model
|
|
* and provide a way to binding to the component.
|
|
*
|
|
* The abstract methods `onSelectChange` and `onLastFocusChanged` should be implemented in these
|
|
* subclasses to update the UI widget.
|
|
*/
|
|
Ext.define('Ext.selection.Model', {
|
|
extend: Ext.util.Observable ,
|
|
alternateClassName: 'Ext.AbstractSelectionModel',
|
|
|
|
mixins: {
|
|
bindable: Ext.util.Bindable
|
|
},
|
|
// lastSelected
|
|
|
|
/**
|
|
* @cfg {"SINGLE"/"SIMPLE"/"MULTI"} mode
|
|
* Mode of selection. Valid values are:
|
|
*
|
|
* - **"SINGLE"** - Only allows selecting one item at a time. Use {@link #allowDeselect} to allow
|
|
* deselecting that item. Also see {@link #toggleOnClick}. This is the default.
|
|
* - **"SIMPLE"** - Allows simple selection of multiple items one-by-one. Each click in grid will either
|
|
* select or deselect an item.
|
|
* - **"MULTI"** - Allows complex selection of multiple items using Ctrl and Shift keys.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} allowDeselect
|
|
* Allow users to deselect a record in a DataView, List or Grid.
|
|
* Only applicable when the {@link #mode} is 'SINGLE'.
|
|
*/
|
|
allowDeselect: undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} toggleOnClick
|
|
* `true` to toggle the selection state of an item when clicked.
|
|
* Only applicable when the {@link #mode} is 'SINGLE'.
|
|
* Only applicable when the {@link #allowDeselect} is 'true'.
|
|
*/
|
|
toggleOnClick: true,
|
|
|
|
/**
|
|
* @property {Ext.util.MixedCollection} [selected=undefined]
|
|
* A MixedCollection that maintains all of the currently selected records.
|
|
* @readonly
|
|
*/
|
|
selected: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} [pruneRemoved=true]
|
|
* Remove records from the selection when they are removed from the store.
|
|
*
|
|
* **Important:** When using {@link Ext.toolbar.Paging paging} or a {@link Ext.data.Store#buffered sparsely populated (buffered) Store},
|
|
* records which are cached in the Store's {@link Ext.data.Store#property-data data collection} may be removed from the Store when pages change,
|
|
* or when rows are scrolled out of view. For this reason `pruneRemoved` should be set to `false` when using a buffered Store.
|
|
*
|
|
* Also, when previously pruned pages are returned to the cache, the records objects in the page will be
|
|
* *new instances*, and will not match the instances in the selection model's collection. For this reason,
|
|
* you MUST ensure that the Model definition's {@link Ext.data.Model#idProperty idProperty} references a unique
|
|
* key because in this situation, records in the Store have their **IDs** compared to records in the SelectionModel
|
|
* in order to re-select a record which is scrolled back into view.
|
|
*/
|
|
pruneRemoved: true,
|
|
|
|
suspendChange: 0,
|
|
|
|
constructor: function(cfg) {
|
|
var me = this;
|
|
|
|
cfg = cfg || {};
|
|
Ext.apply(me, cfg);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event
|
|
* Fired after a selection change has occurred
|
|
* @param {Ext.selection.Model} this
|
|
* @param {Ext.data.Model[]} selected The selected records
|
|
*/
|
|
'selectionchange',
|
|
/**
|
|
* @event
|
|
* Fired when a row is focused
|
|
* @param {Ext.selection.Model} this
|
|
* @param {Ext.data.Model} oldFocused The previously focused record
|
|
* @param {Ext.data.Model} newFocused The newly focused record
|
|
*/
|
|
'focuschange'
|
|
);
|
|
|
|
me.modes = {
|
|
SINGLE: true,
|
|
SIMPLE: true,
|
|
MULTI: true
|
|
};
|
|
|
|
// sets this.selectionMode
|
|
me.setSelectionMode(cfg.mode || me.mode);
|
|
|
|
// maintains the currently selected records.
|
|
me.selected = new Ext.util.MixedCollection(null, me.getSelectionId);
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// binds the store to the selModel.
|
|
bindStore: function(store, initial){
|
|
var me = this;
|
|
me.mixins.bindable.bindStore.apply(me, arguments);
|
|
if(me.store && !initial) {
|
|
me.refresh();
|
|
}
|
|
},
|
|
|
|
getStoreListeners: function() {
|
|
var me = this;
|
|
return {
|
|
add: me.onStoreAdd,
|
|
clear: me.onStoreClear,
|
|
bulkremove: me.onStoreRemove,
|
|
update: me.onStoreUpdate,
|
|
load: me.onStoreLoad,
|
|
idchanged: me.onModelIdChanged,
|
|
refresh: me.onStoreRefresh
|
|
};
|
|
},
|
|
|
|
suspendChanges: function(){
|
|
++this.suspendChange;
|
|
},
|
|
|
|
resumeChanges: function(){
|
|
if (this.suspendChange) {
|
|
--this.suspendChange;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Selects all records in the view.
|
|
* @param {Boolean} suppressEvent True to suppress any select events
|
|
*/
|
|
selectAll: function(suppressEvent) {
|
|
var me = this,
|
|
selections = me.store.getRange(),
|
|
i = 0,
|
|
len = selections.length,
|
|
start = me.getSelection().length;
|
|
|
|
me.suspendChanges();
|
|
for (; i < len; i++) {
|
|
me.doSelect(selections[i], true, suppressEvent);
|
|
}
|
|
me.resumeChanges();
|
|
// fire selection change only if the number of selections differs
|
|
if (!suppressEvent) {
|
|
me.maybeFireSelectionChange(me.getSelection().length !== start);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Deselects all records in the view.
|
|
* @param {Boolean} [suppressEvent] True to suppress any deselect events
|
|
*/
|
|
deselectAll: function(suppressEvent) {
|
|
var me = this,
|
|
selections = me.getSelection(),
|
|
selIndexes = {},
|
|
store = me.store,
|
|
start = selections.length,
|
|
i, l, rec;
|
|
|
|
// Cache selection records' indexes first to avoid
|
|
// looking them up on every sort comparison below.
|
|
// We can't rely on store.indexOf being fast because
|
|
// for whatever reason the Store in question may force
|
|
// sequential index lookup, which will result in O(n^2)
|
|
// sort performance below.
|
|
for (i = 0, l = selections.length; i < l; i++) {
|
|
rec = selections[i];
|
|
|
|
selIndexes[rec.internalId] = store.indexOf(rec);
|
|
}
|
|
|
|
// Sort the selections so that the events fire in
|
|
// a predictable order like selectAll
|
|
selections = Ext.Array.sort(selections, function(r1, r2){
|
|
var idx1 = selIndexes[r1.internalId],
|
|
idx2 = selIndexes[r2.internalId];
|
|
|
|
// Don't check for equality since indexes will be unique
|
|
return idx1 < idx2 ? -1 : 1;
|
|
});
|
|
|
|
me.suspendChanges();
|
|
me.doDeselect(selections, suppressEvent);
|
|
me.resumeChanges();
|
|
// fire selection change only if the number of selections differs
|
|
if (!suppressEvent) {
|
|
me.maybeFireSelectionChange(me.getSelection().length !== start);
|
|
}
|
|
},
|
|
|
|
// Provides differentiation of logic between MULTI, SIMPLE and SINGLE
|
|
// selection modes. Requires that an event be passed so that we can know
|
|
// if user held ctrl or shift.
|
|
selectWithEvent: function(record, e) {
|
|
var me = this,
|
|
isSelected = me.isSelected(record),
|
|
shift = e.shiftKey,
|
|
ctrl = e.ctrlKey,
|
|
start = me.selectionStart,
|
|
selected = me.getSelection(),
|
|
len = selected.length,
|
|
allowDeselect = me.allowDeselect,
|
|
toDeselect, i, item;
|
|
|
|
switch (me.selectionMode) {
|
|
case 'MULTI':
|
|
if (shift && start) {
|
|
me.selectRange(start, record, ctrl);
|
|
} else if (ctrl && isSelected) {
|
|
me.doDeselect(record, false);
|
|
} else if (ctrl) {
|
|
me.doSelect(record, true, false);
|
|
} else if (isSelected && !shift && !ctrl && len > 1) {
|
|
toDeselect = [];
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
item = selected[i];
|
|
if (item !== record) {
|
|
toDeselect.push(item);
|
|
}
|
|
}
|
|
|
|
me.doDeselect(toDeselect);
|
|
} else if (!isSelected) {
|
|
me.doSelect(record, false);
|
|
}
|
|
break;
|
|
case 'SIMPLE':
|
|
if (isSelected) {
|
|
me.doDeselect(record);
|
|
} else {
|
|
me.doSelect(record, true);
|
|
}
|
|
break;
|
|
case 'SINGLE':
|
|
if (allowDeselect && !ctrl) {
|
|
allowDeselect = me.toggleOnClick;
|
|
}
|
|
if (allowDeselect && isSelected) {
|
|
me.doDeselect(record);
|
|
} else {
|
|
me.doSelect(record, false);
|
|
}
|
|
break;
|
|
}
|
|
|
|
// selectionStart is a start point for shift/mousedown to create a range from.
|
|
// If the mousedowned record was not already selected, then it becomes the
|
|
// start of any range created from now on.
|
|
// If we drop to no records selected, then there is no range start any more.
|
|
if (!shift) {
|
|
if (me.isSelected(record)) {
|
|
me.selectionStart = record;
|
|
} else {
|
|
me.selectionStart = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
// Private
|
|
// Called after a new record has been navigated to by a keystroke.
|
|
// Event is passed so that shift and ctrl can be handled.
|
|
afterKeyNavigate: function(e, record) {
|
|
var me = this,
|
|
recIdx,
|
|
fromIdx,
|
|
isSelected = me.isSelected(record),
|
|
from = (me.selectionStart && me.isSelected(me.lastFocused)) ? me.selectionStart : (me.selectionStart = me.lastFocused),
|
|
key = e.getCharCode(),
|
|
isSpace = key === e.SPACE,
|
|
direction = key === e.UP || key === e.PAGE_UP ? 'up' : (key === e.DOWN || key === e.DOWN ? 'down' : null);
|
|
|
|
switch (me.selectionMode) {
|
|
case 'MULTI':
|
|
|
|
if (isSpace) {
|
|
// SHIFT+SPACE, select range
|
|
if (e.shiftKey) {
|
|
me.selectRange(from, record, e.ctrlKey);
|
|
} else {
|
|
// SPACE pessed on a selected item: deselect but leave it focused.
|
|
// e.ctrlKey means "keep existing"
|
|
if (isSelected) {
|
|
me.doDeselect(record, e.ctrlKey);
|
|
|
|
// This record is already focused. To get the focus effect put on it (as opposed to selected)
|
|
// we have to focus null first.
|
|
me.setLastFocused(null);
|
|
me.setLastFocused(record);
|
|
}
|
|
// SPACE on an unselected item: select it
|
|
else {
|
|
me.doSelect(record, e.ctrlKey);
|
|
}
|
|
}
|
|
}
|
|
|
|
// SHIFT-navigate selects intervening rows from the last selected (or last focused) item and target item
|
|
else if (e.shiftKey && from) {
|
|
|
|
// If we are going back *into* the selected range, we deselect.
|
|
fromIdx = me.store.indexOf(from);
|
|
recIdx = me.store.indexOf(record);
|
|
|
|
// If we are heading back TOWARDS the start rec - deselect skipped range...
|
|
if (direction === 'up' && fromIdx <= recIdx) {
|
|
me.deselectRange(me.lastFocused, recIdx + 1);
|
|
}
|
|
else if (direction === 'down' && fromIdx >= recIdx) {
|
|
me.deselectRange(me.lastFocused, recIdx - 1);
|
|
}
|
|
|
|
// If we are heading AWAY from start point, or no CTRL key, so just select the range and let the CTRL control "keepExisting"...
|
|
else if (from !== record) {
|
|
me.selectRange(from, record, e.ctrlKey);
|
|
}
|
|
me.lastSelected = record;
|
|
me.setLastFocused(record);
|
|
}
|
|
|
|
// CTRL-navigate onto a selected item just focuses it
|
|
else if (e.ctrlKey && isSelected) {
|
|
me.setLastFocused(record);
|
|
}
|
|
|
|
// CTRL-navigate, just move focus
|
|
else if (e.ctrlKey) {
|
|
me.setLastFocused(record);
|
|
}
|
|
|
|
// Just navigation - select the target
|
|
else {
|
|
me.doSelect(record, false);
|
|
}
|
|
break;
|
|
case 'SIMPLE':
|
|
if (isSelected) {
|
|
me.doDeselect(record);
|
|
} else {
|
|
me.doSelect(record, true);
|
|
}
|
|
break;
|
|
case 'SINGLE':
|
|
// Space hit
|
|
if (isSpace) {
|
|
if (isSelected) {
|
|
me.doDeselect(record);
|
|
me.setLastFocused(record);
|
|
} else {
|
|
me.doSelect(record);
|
|
}
|
|
}
|
|
|
|
// CTRL-navigation: just move focus
|
|
else if (e.ctrlKey) {
|
|
me.setLastFocused(record);
|
|
}
|
|
|
|
// if allowDeselect is on and this record isSelected, deselect it
|
|
else if (me.allowDeselect && isSelected) {
|
|
me.doDeselect(record);
|
|
}
|
|
|
|
// select the record and do NOT maintain existing selections
|
|
else {
|
|
me.doSelect(record, false);
|
|
}
|
|
break;
|
|
}
|
|
|
|
// selectionStart is a start point for shift/mousedown to create a range from.
|
|
// If the mousedowned record was not already selected, then it becomes the
|
|
// start of any range created from now on.
|
|
// If we drop to no records selected, then there is no range start any more.
|
|
if (!e.shiftKey) {
|
|
if (me.isSelected(record)) {
|
|
me.selectionStart = record;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Selects a range of rows if the selection model {@link #isLocked is not locked}.
|
|
* All rows in between startRow and endRow are also selected.
|
|
* @param {Ext.data.Model/Number} startRow The record or index of the first row in the range
|
|
* @param {Ext.data.Model/Number} endRow The record or index of the last row in the range
|
|
* @param {Boolean} keepExisting (optional) True to retain existing selections
|
|
*/
|
|
selectRange : function(startRow, endRow, keepExisting) {
|
|
var me = this,
|
|
store = me.store,
|
|
selected = me.selected.items,
|
|
result, i, len, toSelect, toDeselect, idx, rec;
|
|
|
|
if (me.isLocked()){
|
|
return;
|
|
}
|
|
|
|
result = me.normalizeRowRange(startRow, endRow);
|
|
startRow = result[0];
|
|
endRow = result[1];
|
|
|
|
toSelect = [];
|
|
for (i = startRow; i <= endRow; i++){
|
|
if (!me.isSelected(store.getAt(i))) {
|
|
toSelect.push(store.getAt(i));
|
|
}
|
|
}
|
|
|
|
if (!keepExisting) {
|
|
// prevent selectionchange from firing
|
|
toDeselect = [];
|
|
me.suspendChanges();
|
|
|
|
for (i = 0, len = selected.length; i < len; ++i) {
|
|
rec = selected[i];
|
|
idx = store.indexOf(rec);
|
|
if (idx < startRow || idx > endRow) {
|
|
toDeselect.push(rec)
|
|
}
|
|
}
|
|
|
|
for (i = 0, len = toDeselect.length; i < len; ++i) {
|
|
me.doDeselect(toDeselect[i]);
|
|
}
|
|
me.resumeChanges();
|
|
}
|
|
|
|
me.doMultiSelect(toSelect, true);
|
|
},
|
|
|
|
/**
|
|
* Deselects a range of rows if the selection model {@link #isLocked is not locked}.
|
|
* @param {Ext.data.Model/Number} startRow The record or index of the first row in the range
|
|
* @param {Ext.data.Model/Number} endRow The record or index of the last row in the range
|
|
*/
|
|
deselectRange : function(startRow, endRow) {
|
|
var me = this,
|
|
store = me.store,
|
|
result, i, toDeselect, record;
|
|
|
|
if (me.isLocked()){
|
|
return;
|
|
}
|
|
|
|
result = me.normalizeRowRange(startRow, endRow);
|
|
startRow = result[0];
|
|
endRow = result[1];
|
|
|
|
toDeselect = [];
|
|
for (i = startRow; i <= endRow; i++) {
|
|
record = store.getAt(i);
|
|
if (me.isSelected(record)) {
|
|
toDeselect.push(record);
|
|
}
|
|
}
|
|
me.doDeselect(toDeselect);
|
|
},
|
|
|
|
normalizeRowRange: function(startRow, endRow) {
|
|
var store = this.store,
|
|
tmp;
|
|
|
|
if (!Ext.isNumber(startRow)) {
|
|
startRow = store.indexOf(startRow);
|
|
}
|
|
startRow = Math.max(0, startRow);
|
|
|
|
if (!Ext.isNumber(endRow)) {
|
|
endRow = store.indexOf(endRow);
|
|
}
|
|
endRow = Math.min(endRow, store.getCount() - 1);
|
|
|
|
// swap values
|
|
if (startRow > endRow){
|
|
tmp = endRow;
|
|
endRow = startRow;
|
|
startRow = tmp;
|
|
}
|
|
|
|
return [startRow, endRow];
|
|
},
|
|
|
|
onModelIdChanged: function(store, model, oldId, newId, oldInternalId) {
|
|
this.selected.updateKey(oldInternalId, newId);
|
|
},
|
|
|
|
/**
|
|
* Selects a record instance by record instance or index.
|
|
* @param {Ext.data.Model[]/Number} records An array of records or an index
|
|
* @param {Boolean} [keepExisting=false] True to retain existing selections
|
|
* @param {Boolean} [suppressEvent=false] True to not fire a select event
|
|
*/
|
|
select: function(records, keepExisting, suppressEvent) {
|
|
// Automatically selecting eg store.first() or store.last() will pass undefined, so that must just return;
|
|
if (Ext.isDefined(records)) {
|
|
this.doSelect(records, keepExisting, suppressEvent);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Deselects a record instance by record instance or index.
|
|
* @param {Ext.data.Model[]/Number} records An array of records or an index
|
|
* @param {Boolean} [suppressEvent=false] True to not fire a deselect event
|
|
*/
|
|
deselect: function(records, suppressEvent) {
|
|
this.doDeselect(records, suppressEvent);
|
|
},
|
|
|
|
doSelect: function(records, keepExisting, suppressEvent) {
|
|
var me = this,
|
|
record;
|
|
|
|
if (me.locked || !me.store) {
|
|
return;
|
|
}
|
|
if (typeof records === "number") {
|
|
record = me.store.getAt(records);
|
|
// No matching record, jump out
|
|
if (!record) {
|
|
return;
|
|
}
|
|
records = [record];
|
|
}
|
|
if (me.selectionMode == "SINGLE" && records) {
|
|
record = records.length ? records[0] : records;
|
|
me.doSingleSelect(record, suppressEvent);
|
|
} else {
|
|
me.doMultiSelect(records, keepExisting, suppressEvent);
|
|
}
|
|
},
|
|
|
|
doMultiSelect: function(records, keepExisting, suppressEvent) {
|
|
var me = this,
|
|
selected = me.selected,
|
|
change = false,
|
|
result, i, len, record, commit;
|
|
|
|
if (me.locked) {
|
|
return;
|
|
}
|
|
|
|
records = !Ext.isArray(records) ? [records] : records;
|
|
len = records.length;
|
|
if (!keepExisting && selected.getCount() > 0) {
|
|
result = me.deselectDuringSelect(records, selected.getRange(), suppressEvent);
|
|
if (result[0]) {
|
|
// We had a failure during seletion, so jump out
|
|
// Fire selection change if we did deselect anything
|
|
me.maybeFireSelectionChange(result[1] > 0 && !suppressEvent);
|
|
return;
|
|
}
|
|
}
|
|
|
|
commit = function() {
|
|
selected.add(record);
|
|
change = true;
|
|
};
|
|
|
|
for (i = 0; i < len; i++) {
|
|
record = records[i];
|
|
if (me.isSelected(record)) {
|
|
continue;
|
|
}
|
|
me.lastSelected = record;
|
|
|
|
me.onSelectChange(record, true, suppressEvent, commit);
|
|
}
|
|
if (!me.preventFocus) {
|
|
me.setLastFocused(record, suppressEvent);
|
|
}
|
|
// fire selchange if there was a change and there is no suppressEvent flag
|
|
me.maybeFireSelectionChange(change && !suppressEvent);
|
|
},
|
|
|
|
deselectDuringSelect: function(toSelect, selected, suppressEvent) {
|
|
var me = this,
|
|
len = selected.length,
|
|
changed = 0,
|
|
failed = false,
|
|
item, i;
|
|
|
|
// Prevent selection change events from firing, will happen during select
|
|
me.suspendChanges();
|
|
for (i = 0; i < len; ++i) {
|
|
item = selected[i];
|
|
if (!Ext.Array.contains(toSelect, item)) {
|
|
if (me.doDeselect(item, suppressEvent)) {
|
|
++changed;
|
|
} else {
|
|
failed = true;
|
|
}
|
|
}
|
|
}
|
|
me.resumeChanges();
|
|
|
|
return [failed, changed];
|
|
},
|
|
|
|
// records can be an index, a record or an array of records
|
|
doDeselect: function(records, suppressEvent) {
|
|
var me = this,
|
|
selected = me.selected,
|
|
i = 0,
|
|
len, record,
|
|
attempted = 0,
|
|
accepted = 0,
|
|
commit;
|
|
|
|
if (me.locked || !me.store) {
|
|
return false;
|
|
}
|
|
|
|
if (typeof records === "number") {
|
|
// No matching record, jump out
|
|
record = me.store.getAt(records);
|
|
if (!record) {
|
|
return false;
|
|
}
|
|
records = [record];
|
|
} else if (!Ext.isArray(records)) {
|
|
records = [records];
|
|
}
|
|
|
|
commit = function() {
|
|
++accepted;
|
|
selected.remove(record);
|
|
};
|
|
|
|
len = records.length;
|
|
|
|
me.suspendChanges();
|
|
for (; i < len; i++) {
|
|
record = records[i];
|
|
if (me.isSelected(record)) {
|
|
if (me.lastSelected === record) {
|
|
me.lastSelected = selected.last();
|
|
if (me.lastFocused === record) {
|
|
me.setLastFocused(null);
|
|
}
|
|
}
|
|
++attempted;
|
|
me.onSelectChange(record, false, suppressEvent, commit);
|
|
}
|
|
}
|
|
me.resumeChanges();
|
|
|
|
// fire selchange if there was a change and there is no suppressEvent flag
|
|
me.maybeFireSelectionChange(accepted > 0 && !suppressEvent);
|
|
return accepted === attempted;
|
|
},
|
|
|
|
doSingleSelect: function(record, suppressEvent) {
|
|
var me = this,
|
|
changed = false,
|
|
selected = me.selected,
|
|
commit;
|
|
|
|
if (me.locked) {
|
|
return;
|
|
}
|
|
// already selected.
|
|
// should we also check beforeselect?
|
|
if (me.isSelected(record)) {
|
|
return;
|
|
}
|
|
|
|
if (selected.getCount()) {
|
|
me.suspendChanges();
|
|
if (!me.doDeselect(me.lastSelected, suppressEvent)) {
|
|
me.resumeChanges();
|
|
return;
|
|
}
|
|
me.resumeChanges();
|
|
}
|
|
|
|
commit = function() {
|
|
selected.add(record);
|
|
me.lastSelected = record;
|
|
changed = true;
|
|
};
|
|
|
|
me.onSelectChange(record, true, suppressEvent, commit);
|
|
|
|
if (changed) {
|
|
if (!suppressEvent && !me.preventFocus) {
|
|
me.setLastFocused(record);
|
|
}
|
|
me.maybeFireSelectionChange(!suppressEvent);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets a record as the last focused record. This does NOT mean
|
|
* that the record has been selected.
|
|
* @param {Ext.data.Model} record
|
|
*/
|
|
setLastFocused: function(record, supressFocus) {
|
|
var me = this,
|
|
recordBeforeLast = me.lastFocused;
|
|
|
|
// Only call the changed method if in fact the selected record *has* changed.
|
|
if (record !== recordBeforeLast) {
|
|
me.lastFocused = record;
|
|
me.onLastFocusChanged(recordBeforeLast, record, supressFocus);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Determines if this record is currently focused.
|
|
* @param {Ext.data.Model} record
|
|
*/
|
|
isFocused: function(record) {
|
|
return record === this.getLastFocused();
|
|
},
|
|
|
|
// fire selection change as long as true is not passed
|
|
// into maybeFireSelectionChange
|
|
maybeFireSelectionChange: function(fireEvent) {
|
|
var me = this;
|
|
if (fireEvent && !me.suspendChange) {
|
|
me.fireEvent('selectionchange', me, me.getSelection());
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @return {Ext.data.Model} Returns the last selected record.
|
|
*/
|
|
getLastSelected: function() {
|
|
return this.lastSelected;
|
|
},
|
|
|
|
getLastFocused: function() {
|
|
return this.lastFocused;
|
|
},
|
|
|
|
/**
|
|
* Returns an array of the currently selected records.
|
|
* @return {Ext.data.Model[]} The selected records
|
|
*/
|
|
getSelection: function() {
|
|
return this.selected.getRange();
|
|
},
|
|
|
|
/**
|
|
* Returns the current selectionMode.
|
|
* @return {String} The selectionMode: 'SINGLE', 'MULTI' or 'SIMPLE'.
|
|
*/
|
|
getSelectionMode: function() {
|
|
return this.selectionMode;
|
|
},
|
|
|
|
/**
|
|
* Sets the current selectionMode.
|
|
* @param {String} selMode 'SINGLE', 'MULTI' or 'SIMPLE'.
|
|
*/
|
|
setSelectionMode: function(selMode) {
|
|
selMode = selMode ? selMode.toUpperCase() : 'SINGLE';
|
|
// set to mode specified unless it doesnt exist, in that case
|
|
// use single.
|
|
this.selectionMode = this.modes[selMode] ? selMode : 'SINGLE';
|
|
},
|
|
|
|
/**
|
|
* Returns true if the selections are locked.
|
|
* @return {Boolean}
|
|
*/
|
|
isLocked: function() {
|
|
return this.locked;
|
|
},
|
|
|
|
/**
|
|
* Locks the current selection and disables any changes from happening to the selection.
|
|
* @param {Boolean} locked True to lock, false to unlock.
|
|
*/
|
|
setLocked: function(locked) {
|
|
this.locked = !!locked;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the specified row is selected.
|
|
* @param {Ext.data.Model/Number} from The start of the range to check.
|
|
* @param {Ext.data.Model/Number} to The end of the range to check.
|
|
* @return {Boolean}
|
|
*/
|
|
isRangeSelected: function(startRow, endRow) {
|
|
var me = this,
|
|
store = me.store,
|
|
i, result;
|
|
|
|
result = me.normalizeRowRange(startRow, endRow);
|
|
startRow = result[0];
|
|
endRow = result[1];
|
|
|
|
// Loop through. If any of the range is not selected, the answer is false.
|
|
for (i = startRow; i <= endRow; i++) {
|
|
if (!me.isSelected(store.getAt(i))) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the specified row is selected.
|
|
* @param {Ext.data.Model/Number} record The record or index of the record to check
|
|
* @return {Boolean}
|
|
*/
|
|
isSelected: function(record) {
|
|
record = Ext.isNumber(record) ? this.store.getAt(record) : record;
|
|
return this.selected.contains(record);
|
|
},
|
|
|
|
/**
|
|
* Returns true if there are any a selected records.
|
|
* @return {Boolean}
|
|
*/
|
|
hasSelection: function() {
|
|
return this.selected.getCount() > 0;
|
|
},
|
|
|
|
getSelectionId: function(record){
|
|
return record.internalId;
|
|
},
|
|
|
|
pruneIf: function() {
|
|
var me = this,
|
|
selected = me.selected,
|
|
toRemove = [],
|
|
len = selected.length,
|
|
i, item;
|
|
|
|
if (me.pruneRemoved) {
|
|
for (i = 0; i < len; i++) {
|
|
item = selected.getAt(i);
|
|
if (!this.storeHasSelected(item)) {
|
|
toRemove.push(item);
|
|
}
|
|
}
|
|
if (toRemove.length) {
|
|
for (i = 0, len = toRemove.length; i < len; i++) {
|
|
selected.remove(toRemove[i]);
|
|
}
|
|
me.maybeFireSelectionChange(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// We need this special check because we could have a model
|
|
// without an idProperty. getById() is fast, so we use that
|
|
// if possible, otherwise we need to check the internalId
|
|
storeHasSelected: function(record) {
|
|
var store = this.store,
|
|
records,
|
|
len, id, i;
|
|
|
|
if (record.hasId() && store.getById(record)) {
|
|
return true;
|
|
} else {
|
|
records = store.data.items;
|
|
len = records.length;
|
|
id = record.internalId;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
if (id === records[i].internalId) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
refresh: function() {
|
|
var me = this,
|
|
store = me.store,
|
|
rec,
|
|
toBeSelected = [],
|
|
toBeReAdded = [],
|
|
oldSelections = me.getSelection(),
|
|
len = oldSelections.length,
|
|
selection,
|
|
change,
|
|
i = 0,
|
|
lastFocused = me.getLastFocused();
|
|
|
|
// Not been bound yet.
|
|
if (!store) {
|
|
return;
|
|
}
|
|
|
|
// Add currently records to the toBeSelected list if present in the Store
|
|
// If they are not present, and pruneRemoved is false, we must still retain the record
|
|
for (; i < len; i++) {
|
|
selection = oldSelections[i];
|
|
if (store.indexOf(selection) !== -1) {
|
|
toBeSelected.push(selection);
|
|
}
|
|
|
|
// Selected records no longer represented in Store must be retained
|
|
else if (!me.pruneRemoved) {
|
|
// See if a record by the same ID exists. If so, select it
|
|
rec = store.getById(selection.getId());
|
|
if (rec) {
|
|
toBeSelected.push(rec);
|
|
}
|
|
// If it does not exist, we have to re-add it to the selection
|
|
else {
|
|
toBeReAdded.push(selection)
|
|
}
|
|
}
|
|
|
|
// In single select mode, only one record may be selected
|
|
if (me.mode === 'SINGLE' && toBeReAdded.length) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// there was a change from the old selected and
|
|
// the new selection
|
|
if (me.selected.getCount() != (toBeSelected.length + toBeReAdded.length)) {
|
|
change = true;
|
|
}
|
|
|
|
me.clearSelections();
|
|
|
|
if (store.indexOf(lastFocused) !== -1) {
|
|
// restore the last focus but supress restoring focus
|
|
me.setLastFocused(lastFocused, true);
|
|
}
|
|
|
|
if (toBeSelected.length) {
|
|
// perform the selection again
|
|
me.doSelect(toBeSelected, false, true);
|
|
}
|
|
|
|
// If some of the selections were not present in the Store, but pruneRemoved is false, we must add them back
|
|
if (toBeReAdded.length) {
|
|
me.selected.addAll(toBeReAdded);
|
|
|
|
// No records reselected.
|
|
if (!me.lastSelected) {
|
|
me.lastSelected = toBeReAdded[toBeReAdded.length - 1];
|
|
}
|
|
}
|
|
|
|
me.maybeFireSelectionChange(change);
|
|
},
|
|
|
|
/**
|
|
* A fast reset of the selections without firing events, updating the ui, etc.
|
|
* For private usage only.
|
|
* @private
|
|
*/
|
|
clearSelections: function() {
|
|
// reset the entire selection to nothing
|
|
this.selected.clear();
|
|
this.lastSelected = null;
|
|
this.setLastFocused(null);
|
|
},
|
|
|
|
// when a record is added to a store
|
|
onStoreAdd: Ext.emptyFn,
|
|
|
|
// when a store is cleared remove all selections
|
|
// (if there were any)
|
|
onStoreClear: function() {
|
|
if (this.selected.getCount() > 0) {
|
|
this.clearSelections();
|
|
this.maybeFireSelectionChange(true);
|
|
}
|
|
},
|
|
|
|
// prune records from the SelectionModel if
|
|
// they were selected at the time they were
|
|
// removed.
|
|
onStoreRemove: function(store, records, indexes, isMove) {
|
|
var me = this;
|
|
|
|
// If the selection start point is among records being removed, we no longer have a selection start point.
|
|
if (me.selectionStart && Ext.Array.contains(records, me.selectionStart)) {
|
|
me.selectionStart = null;
|
|
}
|
|
|
|
if (isMove || me.locked || !me.pruneRemoved) {
|
|
return;
|
|
}
|
|
me.deselectDeletedRecords(records);
|
|
},
|
|
|
|
// @private
|
|
// Called by subclasses to deselect records upon detection of deletion from the store
|
|
deselectDeletedRecords: function(records) {
|
|
var me = this,
|
|
selected = me.selected,
|
|
i, length = records.length,
|
|
removed = 0,
|
|
record;
|
|
|
|
// Deselect records which were removed
|
|
for (i = 0; i < length; i++) {
|
|
record = records[i];
|
|
if (selected.remove(record)) {
|
|
if (me.lastSelected == record) {
|
|
me.lastSelected = null;
|
|
}
|
|
if (me.getLastFocused() == record) {
|
|
me.setLastFocused(null);
|
|
}
|
|
++removed;
|
|
}
|
|
}
|
|
if (removed) {
|
|
me.maybeFireSelectionChange(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the count of selected records.
|
|
* @return {Number} The number of selected records
|
|
*/
|
|
getCount: function() {
|
|
return this.selected.getCount();
|
|
},
|
|
|
|
// Called when the contents of the node are updated, perform any processing here.
|
|
onUpdate: Ext.emptyFn,
|
|
|
|
// cleanup.
|
|
destroy: function(){
|
|
this.clearListeners();
|
|
},
|
|
|
|
// if records are updated
|
|
onStoreUpdate: Ext.emptyFn,
|
|
|
|
onStoreRefresh: Ext.emptyFn,
|
|
|
|
/**
|
|
* @abstract
|
|
* @private
|
|
*/
|
|
onStoreLoad: Ext.emptyFn,
|
|
|
|
// @abstract
|
|
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
|
|
var me = this,
|
|
eventName = isSelected ? 'select' : 'deselect';
|
|
|
|
if ((suppressEvent || me.fireEvent('before' + eventName, me, record)) !== false &&
|
|
commitFn() !== false) {
|
|
|
|
if (!suppressEvent) {
|
|
me.fireEvent(eventName, me, record);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @abstract
|
|
onLastFocusChanged: function(oldFocused, newFocused) {
|
|
this.fireEvent('focuschange', this, oldFocused, newFocused);
|
|
},
|
|
|
|
// @abstract
|
|
onEditorKey: Ext.emptyFn,
|
|
|
|
// @abstract
|
|
beforeViewRender: function(view) {
|
|
this.views = this.views || [];
|
|
this.views.push(view);
|
|
this.bindStore(view.getStore(), true);
|
|
},
|
|
|
|
// @abstract
|
|
bindComponent: Ext.emptyFn
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.selection.DataViewModel', {
|
|
extend: Ext.selection.Model ,
|
|
|
|
|
|
|
|
deselectOnContainerClick: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableKeyNav
|
|
*
|
|
* Turns on/off keyboard navigation within the DataView.
|
|
*/
|
|
enableKeyNav: true,
|
|
|
|
constructor: function(cfg){
|
|
this.addEvents(
|
|
/**
|
|
* @event beforedeselect
|
|
* Fired before a record is deselected. If any listener returns false, the
|
|
* deselection is cancelled.
|
|
* @param {Ext.selection.DataViewModel} this
|
|
* @param {Ext.data.Model} record The deselected record
|
|
*/
|
|
'beforedeselect',
|
|
|
|
/**
|
|
* @event beforeselect
|
|
* Fired before a record is selected. If any listener returns false, the
|
|
* selection is cancelled.
|
|
* @param {Ext.selection.DataViewModel} this
|
|
* @param {Ext.data.Model} record The selected record
|
|
*/
|
|
'beforeselect',
|
|
|
|
/**
|
|
* @event deselect
|
|
* Fired after a record is deselected
|
|
* @param {Ext.selection.DataViewModel} this
|
|
* @param {Ext.data.Model} record The deselected record
|
|
*/
|
|
'deselect',
|
|
|
|
/**
|
|
* @event select
|
|
* Fired after a record is selected
|
|
* @param {Ext.selection.DataViewModel} this
|
|
* @param {Ext.data.Model} record The selected record
|
|
*/
|
|
'select'
|
|
);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
bindComponent: function(view) {
|
|
var me = this,
|
|
eventListeners = {
|
|
refresh: me.refresh,
|
|
scope: me
|
|
};
|
|
|
|
me.view = view;
|
|
me.bindStore(view.getStore());
|
|
|
|
eventListeners[view.triggerEvent] = me.onItemClick;
|
|
eventListeners[view.triggerCtEvent] = me.onContainerClick;
|
|
|
|
view.on(eventListeners);
|
|
|
|
if (me.enableKeyNav) {
|
|
me.initKeyNav(view);
|
|
}
|
|
},
|
|
|
|
onUpdate: function(record){
|
|
var view = this.view;
|
|
if (view && this.isSelected(record)) {
|
|
view.onItemSelect(record);
|
|
}
|
|
},
|
|
|
|
onItemClick: function(view, record, item, index, e) {
|
|
this.selectWithEvent(record, e);
|
|
},
|
|
|
|
onContainerClick: function() {
|
|
if (this.deselectOnContainerClick) {
|
|
this.deselectAll();
|
|
}
|
|
},
|
|
|
|
initKeyNav: function(view) {
|
|
var me = this;
|
|
|
|
if (!view.rendered) {
|
|
view.on({
|
|
render: Ext.Function.bind(me.initKeyNav, me, [view]),
|
|
single: true
|
|
});
|
|
return;
|
|
}
|
|
|
|
view.el.set({
|
|
tabIndex: -1
|
|
});
|
|
me.keyNav = new Ext.util.KeyNav({
|
|
target: view.el,
|
|
ignoreInputFields: true,
|
|
down: Ext.pass(me.onNavKey, [1], me),
|
|
right: Ext.pass(me.onNavKey, [1], me),
|
|
left: Ext.pass(me.onNavKey, [-1], me),
|
|
up: Ext.pass(me.onNavKey, [-1], me),
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
onNavKey: function(step) {
|
|
step = step || 1;
|
|
var me = this,
|
|
view = me.view,
|
|
selected = me.getSelection()[0],
|
|
numRecords = me.view.store.getCount(),
|
|
idx;
|
|
|
|
if (selected) {
|
|
idx = view.indexOf(view.getNode(selected)) + step;
|
|
} else {
|
|
idx = 0;
|
|
}
|
|
|
|
if (idx < 0) {
|
|
idx = numRecords - 1;
|
|
} else if (idx >= numRecords) {
|
|
idx = 0;
|
|
}
|
|
|
|
me.select(idx);
|
|
},
|
|
|
|
// Allow the DataView to update the ui
|
|
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
|
|
var me = this,
|
|
view = me.view,
|
|
eventName = isSelected ? 'select' : 'deselect';
|
|
|
|
if ((suppressEvent || me.fireEvent('before' + eventName, me, record)) !== false &&
|
|
commitFn() !== false) {
|
|
|
|
if (view) {
|
|
if (isSelected) {
|
|
view.onItemSelect(record);
|
|
} else {
|
|
view.onItemDeselect(record);
|
|
}
|
|
}
|
|
|
|
if (!suppressEvent) {
|
|
me.fireEvent(eventName, me, record);
|
|
}
|
|
}
|
|
},
|
|
|
|
onLastFocusChanged: function(oldFocus, newFocus, suppressFocus){
|
|
var view = this.view;
|
|
if (view && !suppressFocus && newFocus) {
|
|
view.focusNode(newFocus);
|
|
this.fireEvent('focuschange', this, oldFocus, newFocus);
|
|
}
|
|
},
|
|
|
|
destroy: function(){
|
|
Ext.destroy(this.keyNav);
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.view.AbstractView
|
|
* This is an abstract superclass and should not be used directly. Please see {@link Ext.view.View}.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.view.AbstractView', {
|
|
extend: Ext.Component ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
bindable: Ext.util.Bindable
|
|
},
|
|
|
|
inheritableStatics: {
|
|
getRecord: function(node) {
|
|
return this.getBoundView(node).getRecord(node);
|
|
},
|
|
|
|
getBoundView: function(node) {
|
|
return Ext.getCmp(node.boundView);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @cfg {String/String[]/Ext.XTemplate} tpl (required)
|
|
* The HTML fragment or an array of fragments that will make up the template used by this DataView. This should
|
|
* be specified in the same format expected by the constructor of {@link Ext.XTemplate}.
|
|
* @since 2.3.0
|
|
*/
|
|
/**
|
|
* @cfg {Ext.data.Store} store (required)
|
|
* The {@link Ext.data.Store} to bind this DataView to.
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} deferInitialRefresh
|
|
* <p>Defaults to <code>true</code> to defer the initial refresh of the view.</p>
|
|
* <p>This allows the View to execute its render and initial layout more quickly because the process will not be encumbered
|
|
* by the expensive update of the view structure.</p>
|
|
* <p><b>Important: </b>Be aware that this will mean that the View's item elements will not be available immediately upon render, so
|
|
* <i>selection</i> may not take place at render time. To access a View's item elements as soon as possible, use the {@link #viewready} event.
|
|
* Or set <code>deferInitialrefresh</code> to false, but this will be at the cost of slower rendering.</p>
|
|
*/
|
|
deferInitialRefresh: true,
|
|
|
|
/**
|
|
* @cfg {String} itemSelector (required)
|
|
* <b>This is a required setting</b>. A simple CSS selector (e.g. <tt>div.some-class</tt> or
|
|
* <tt>span:first-child</tt>) that will be used to determine what nodes this DataView will be
|
|
* working with. The itemSelector is used to map DOM nodes to records. As such, there should
|
|
* only be one root level element that matches the selector for each record.
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} itemCls
|
|
* Specifies the class to be assigned to each element in the view when used in conjunction with the
|
|
* {@link #itemTpl} configuration.
|
|
* @since 2.3.0
|
|
*/
|
|
itemCls: Ext.baseCSSPrefix + 'dataview-item',
|
|
|
|
/**
|
|
* @cfg {String/String[]/Ext.XTemplate} itemTpl
|
|
* The inner portion of the item template to be rendered. Follows an XTemplate
|
|
* structure and will be placed inside of a tpl.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} overItemCls
|
|
* A CSS class to apply to each item in the view on mouseover.
|
|
* Setting this will automatically set {@link #trackOver} to `true`.
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} loadingText
|
|
* A string to display during data load operations. If specified, this text will be
|
|
* displayed in a loading div and the view's contents will be cleared while loading, otherwise the view's
|
|
* contents will continue to display normally until the new data is loaded and the contents are replaced.
|
|
* @since 2.3.0
|
|
*/
|
|
loadingText: 'Loading...',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean/Object} loadMask
|
|
* False to disable a load mask from displaying while the view is loading. This can also be a
|
|
* {@link Ext.LoadMask} configuration object.
|
|
*/
|
|
loadMask: true,
|
|
|
|
/**
|
|
* @cfg {String} loadingCls
|
|
* The CSS class to apply to the loading message element. Defaults to Ext.LoadMask.prototype.msgCls "x-mask-loading".
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} loadingUseMsg
|
|
* Whether or not to use the loading message.
|
|
* @private
|
|
*/
|
|
loadingUseMsg: true,
|
|
|
|
|
|
/**
|
|
* @cfg {Number} loadingHeight
|
|
* If specified, gives an explicit height for the data view when it is showing the {@link #loadingText},
|
|
* if that is specified. This is useful to prevent the view's height from collapsing to zero when the
|
|
* loading mask is applied and there are no other contents in the data view.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} selectedItemCls
|
|
* A CSS class to apply to each selected item in the view.
|
|
*/
|
|
selectedItemCls: Ext.baseCSSPrefix + 'item-selected',
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} emptyText
|
|
* The text to display in the view when there is no data to display.
|
|
* Note that when using local data the emptyText will not be displayed unless you set
|
|
* the {@link #deferEmptyText} option to false.
|
|
* @since 2.3.0
|
|
*/
|
|
emptyText: "",
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} deferEmptyText
|
|
* True to defer emptyText being applied until the store's first load.
|
|
* @since 2.3.0
|
|
*/
|
|
deferEmptyText: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} trackOver
|
|
* When `true` the {@link #overItemCls} will be applied to rows when hovered over.
|
|
* This in return will also cause {@link Ext.view.View#highlightitem highlightitem} and
|
|
* {@link Ext.view.View#unhighlightitem unhighlightitem} events to be fired.
|
|
*
|
|
* Enabled automatically when the {@link #overItemCls} config is set.
|
|
*
|
|
* @since 2.3.0
|
|
*/
|
|
trackOver: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} blockRefresh
|
|
* Set this to true to ignore refresh events on the bound store. This is useful if
|
|
* you wish to provide custom transition animations via a plugin
|
|
* @since 3.4.0
|
|
*/
|
|
blockRefresh: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} disableSelection
|
|
* True to disable selection within the DataView. This configuration will lock the selection model
|
|
* that the DataView uses.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} preserveScrollOnRefresh
|
|
* True to preserve scroll position across refresh operations.
|
|
*/
|
|
preserveScrollOnRefresh: false,
|
|
|
|
//private
|
|
last: false,
|
|
|
|
triggerEvent: 'itemclick',
|
|
triggerCtEvent: 'containerclick',
|
|
|
|
addCmpEvents: function() {
|
|
|
|
},
|
|
|
|
// private
|
|
initComponent : function(){
|
|
var me = this,
|
|
isDef = Ext.isDefined,
|
|
itemTpl = me.itemTpl,
|
|
memberFn = {};
|
|
|
|
if (itemTpl) {
|
|
if (Ext.isArray(itemTpl)) {
|
|
// string array
|
|
itemTpl = itemTpl.join('');
|
|
} else if (Ext.isObject(itemTpl)) {
|
|
// tpl instance
|
|
memberFn = Ext.apply(memberFn, itemTpl.initialConfig);
|
|
itemTpl = itemTpl.html;
|
|
}
|
|
|
|
if (!me.itemSelector) {
|
|
me.itemSelector = '.' + me.itemCls;
|
|
}
|
|
|
|
itemTpl = Ext.String.format('<tpl for="."><div class="{0}">{1}</div></tpl>', me.itemCls, itemTpl);
|
|
me.tpl = new Ext.XTemplate(itemTpl, memberFn);
|
|
}
|
|
|
|
|
|
me.callParent();
|
|
me.tpl = me.getTpl('tpl');
|
|
|
|
|
|
if (me.overItemCls) {
|
|
me.trackOver = true;
|
|
}
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforerefresh
|
|
* Fires before the view is refreshed
|
|
* @param {Ext.view.View} this The DataView object
|
|
*/
|
|
'beforerefresh',
|
|
/**
|
|
* @event refresh
|
|
* Fires when the view is refreshed
|
|
* @param {Ext.view.View} this The DataView object
|
|
*/
|
|
'refresh',
|
|
/**
|
|
* @event viewready
|
|
* Fires when the View's item elements representing Store items has been rendered. If the {@link #deferInitialRefresh} flag
|
|
* was set (and it is <code>true</code> by default), this will be <b>after</b> initial render, and no items will be available
|
|
* for selection until this event fires.
|
|
* @param {Ext.view.View} this
|
|
*/
|
|
'viewready',
|
|
/**
|
|
* @event itemupdate
|
|
* Fires when the node associated with an individual record is updated
|
|
* @param {Ext.data.Model} record The model instance
|
|
* @param {Number} index The index of the record/node
|
|
* @param {HTMLElement} node The node that has just been updated
|
|
*/
|
|
'itemupdate',
|
|
/**
|
|
* @event itemadd
|
|
* Fires when the nodes associated with an recordset have been added to the underlying store
|
|
* @param {Ext.data.Model[]} records The model instance
|
|
* @param {Number} index The index at which the set of record/nodes starts
|
|
* @param {HTMLElement[]} node The node that has just been updated
|
|
*/
|
|
'itemadd',
|
|
/**
|
|
* @event itemremove
|
|
* Fires when the node associated with an individual record is removed
|
|
* @param {Ext.data.Model} record The model instance
|
|
* @param {Number} index The index of the record/node
|
|
*/
|
|
'itemremove'
|
|
);
|
|
|
|
me.addCmpEvents();
|
|
|
|
// Look up the configured Store. If none configured, use the fieldless, empty Store defined in Ext.data.Store.
|
|
me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');
|
|
|
|
// Use the provided store as the data source unless a Feature or plugin has injected a special one
|
|
if (!me.dataSource) {
|
|
me.dataSource = me.store;
|
|
}
|
|
// Bind to the data source. Cache it by the property name "dataSource".
|
|
// The store property is public and must reference the provided store.
|
|
me.bindStore(me.dataSource, true, 'dataSource');
|
|
if (!me.all) {
|
|
me.all = new Ext.CompositeElementLite();
|
|
}
|
|
|
|
// We track the scroll position
|
|
me.scrollState = {
|
|
top: 0,
|
|
left: 0
|
|
};
|
|
me.on({
|
|
scroll: me.onViewScroll,
|
|
element: 'el',
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this,
|
|
mask = me.loadMask,
|
|
maskStore = me.getMaskStore(),
|
|
cfg = {
|
|
target: me,
|
|
msg: me.loadingText,
|
|
msgCls: me.loadingCls,
|
|
useMsg: me.loadingUseMsg,
|
|
// The store gets bound in initComponent, so while
|
|
// rendering let's push on the store
|
|
store: maskStore
|
|
};
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (mask && !maskStore.proxy.isSynchronous) {
|
|
// either a config object
|
|
if (Ext.isObject(mask)) {
|
|
cfg = Ext.apply(cfg, mask);
|
|
}
|
|
// Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
|
|
// If this DataView is floating, then mask this DataView.
|
|
// Otherwise, mask its owning Container (or this, if there *is* no owning Container).
|
|
// LoadMask captures the element upon render.
|
|
me.loadMask = new Ext.LoadMask(cfg);
|
|
me.loadMask.on({
|
|
scope: me,
|
|
beforeshow: me.onMaskBeforeShow,
|
|
hide: me.onMaskHide
|
|
});
|
|
}
|
|
},
|
|
|
|
finishRender: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
// Kick off the refresh before layouts are resumed after the render
|
|
// completes, but after afterrender is fired on the view
|
|
if (!me.up('[collapsed],[hidden]')) {
|
|
me.doFirstRefresh(me.dataSource);
|
|
}
|
|
},
|
|
|
|
onBoxReady: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If the refresh was not kicked off on render due to a collapsed or hidden ancestor,
|
|
// kick it off as soon as we get layed out
|
|
if (!me.firstRefreshDone) {
|
|
me.doFirstRefresh(me.dataSource);
|
|
}
|
|
},
|
|
|
|
getMaskStore: function(){
|
|
return this.store;
|
|
},
|
|
|
|
onMaskBeforeShow: function(){
|
|
var me = this,
|
|
loadingHeight = me.loadingHeight;
|
|
|
|
if (loadingHeight && loadingHeight > me.getHeight()) {
|
|
me.hasLoadingHeight = true;
|
|
me.oldMinHeight = me.minHeight;
|
|
me.minHeight = loadingHeight;
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
onMaskHide: function(){
|
|
var me = this;
|
|
|
|
if (!me.destroying && me.hasLoadingHeight) {
|
|
me.minHeight = me.oldMinHeight;
|
|
me.updateLayout();
|
|
delete me.hasLoadingHeight;
|
|
}
|
|
},
|
|
|
|
beforeRender: function() {
|
|
this.callParent(arguments);
|
|
this.getSelectionModel().beforeViewRender(this);
|
|
},
|
|
|
|
afterRender: function() {
|
|
this.callParent(arguments);
|
|
|
|
// Init the SelectionModel after any on('render') listeners have been added.
|
|
// Drag plugins create a DragDrop instance in a render listener, and that needs
|
|
// to see an itemmousedown event first.
|
|
this.getSelectionModel().bindComponent(this);
|
|
},
|
|
|
|
/**
|
|
* Gets the selection model for this view.
|
|
* @return {Ext.selection.Model} The selection model
|
|
*/
|
|
getSelectionModel: function(){
|
|
var me = this,
|
|
mode = 'SINGLE';
|
|
|
|
if (me.simpleSelect) {
|
|
mode = 'SIMPLE';
|
|
} else if (me.multiSelect) {
|
|
mode = 'MULTI';
|
|
}
|
|
|
|
// No selModel specified, or it's just a config; Instantiate
|
|
if (!me.selModel || !me.selModel.events) {
|
|
me.selModel = new Ext.selection.DataViewModel(Ext.apply({
|
|
allowDeselect: me.allowDeselect,
|
|
mode: mode
|
|
}, me.selModel));
|
|
}
|
|
|
|
if (!me.selModel.hasRelaySetup) {
|
|
me.relayEvents(me.selModel, [
|
|
'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect', 'focuschange'
|
|
]);
|
|
me.selModel.hasRelaySetup = true;
|
|
}
|
|
|
|
// lock the selection model if user
|
|
// has disabled selection
|
|
if (me.disableSelection) {
|
|
me.selModel.locked = true;
|
|
}
|
|
|
|
return me.selModel;
|
|
},
|
|
|
|
/**
|
|
* Refreshes the view by reloading the data from the store and re-rendering the template.
|
|
* @since 2.3.0
|
|
*/
|
|
refresh: function() {
|
|
var me = this,
|
|
targetEl,
|
|
targetParent,
|
|
oldDisplay,
|
|
nextSibling,
|
|
dom,
|
|
records;
|
|
|
|
if (!me.rendered || me.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
if (!me.hasListeners.beforerefresh || me.fireEvent('beforerefresh', me) !== false) {
|
|
targetEl = me.getTargetEl();
|
|
records = me.getViewRange();
|
|
dom = targetEl.dom;
|
|
|
|
// Updating is much quicker if done when the targetEl is detached from the document, and not displayed.
|
|
// But this resets the scroll position, so when preserving scroll position, this cannot be done.
|
|
if (!me.preserveScrollOnRefresh) {
|
|
targetParent = dom.parentNode;
|
|
oldDisplay = dom.style.display;
|
|
dom.style.display = 'none';
|
|
nextSibling = dom.nextSibling;
|
|
targetParent.removeChild(dom);
|
|
}
|
|
|
|
if (me.refreshCounter) {
|
|
me.clearViewEl();
|
|
} else {
|
|
me.fixedNodes = targetEl.dom.childNodes.length;
|
|
me.refreshCounter = 1;
|
|
}
|
|
|
|
// Always attempt to create the required markup after the fixedNodes.
|
|
// Usually, for an empty record set, this would be blank, but when the Template
|
|
// Creates markup outside of the record loop, this must still be honoured even if there are no
|
|
// records.
|
|
me.tpl.append(targetEl, me.collectData(records, me.all.startIndex));
|
|
|
|
// The emptyText is now appended to the View's element
|
|
// after any fixedNodes.
|
|
if (records.length < 1) {
|
|
// Process empty text unless the store is being cleared.
|
|
if (!this.store.loading && (!me.deferEmptyText || me.hasFirstRefresh)) {
|
|
Ext.core.DomHelper.insertHtml('beforeEnd', targetEl.dom, me.emptyText);
|
|
}
|
|
me.all.clear();
|
|
} else {
|
|
me.collectNodes(targetEl.dom);
|
|
me.updateIndexes(0);
|
|
}
|
|
|
|
// Don't need to do this on the first refresh
|
|
if (me.hasFirstRefresh) {
|
|
// Some subclasses do not need to do this. TableView does not need to do this.
|
|
if (me.refreshSelmodelOnRefresh !== false) {
|
|
me.selModel.refresh();
|
|
} else {
|
|
// However, even if that is not needed, pruning if pruneRemoved is true (the default) still needs doing.
|
|
me.selModel.pruneIf();
|
|
}
|
|
}
|
|
|
|
me.hasFirstRefresh = true;
|
|
|
|
if (!me.preserveScrollOnRefresh) {
|
|
targetParent.insertBefore(dom, nextSibling);
|
|
dom.style.display = oldDisplay;
|
|
}
|
|
|
|
// Ensure layout system knows about new content size
|
|
this.refreshSize();
|
|
|
|
me.fireEvent('refresh', me);
|
|
|
|
// Upon first refresh, fire the viewready event.
|
|
// Reconfiguring the grid "renews" this event.
|
|
if (!me.viewReady) {
|
|
// Fire an event when deferred content becomes available.
|
|
// This supports grid Panel's deferRowRender capability
|
|
me.viewReady = true;
|
|
me.fireEvent('viewready', me);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Private
|
|
// Called by refresh to collect the view item nodes.
|
|
collectNodes: function(targetEl) {
|
|
this.all.fill(Ext.query(this.getItemSelector(), Ext.getDom(targetEl)), this.all.startIndex);
|
|
},
|
|
|
|
getViewRange: function() {
|
|
return this.dataSource.getRange();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Called by the framework when the view is refreshed, or when rows are added or deleted.
|
|
*
|
|
* These operations may cause the view's dimensions to change, and if the owning container
|
|
* is shrinkwrapping this view, then the layout must be updated to accommodate these new dimensions.
|
|
*/
|
|
refreshSize: function() {
|
|
var sizeModel = this.getSizeModel();
|
|
if (sizeModel.height.shrinkWrap || sizeModel.width.shrinkWrap) {
|
|
this.updateLayout();
|
|
}
|
|
},
|
|
|
|
clearViewEl: function(){
|
|
// The purpose of this is to allow boilerplate HTML nodes to remain in place inside a View
|
|
// while the transient, templated data can be discarded and recreated.
|
|
// The first time through this code, we take a count of the number of existing child nodes.
|
|
// Subsequent refreshes then do not clear the entire element, but remove all nodes
|
|
// *after* the fixedNodes count.
|
|
// In particular, this is used in infinite grid scrolling: A very tall "stretcher" element is
|
|
// inserted into the View's element to create a scrollbar of the correct proportion.
|
|
|
|
var me = this,
|
|
el = me.getTargetEl();
|
|
|
|
if (me.fixedNodes) {
|
|
while (el.dom.childNodes[me.fixedNodes]) {
|
|
el.dom.removeChild(el.dom.childNodes[me.fixedNodes]);
|
|
}
|
|
} else {
|
|
el.update('');
|
|
}
|
|
me.refreshCounter++;
|
|
},
|
|
|
|
// Private template method to be overridden in subclasses.
|
|
onViewScroll: Ext.emptyFn,
|
|
|
|
onIdChanged: Ext.emptyFn,
|
|
|
|
/**
|
|
* Saves the scrollState in a private variable. Must be used in conjunction with restoreScrollState.
|
|
* @private
|
|
*/
|
|
saveScrollState: function() {
|
|
if (this.rendered) {
|
|
var dom = this.el.dom,
|
|
state = this.scrollState;
|
|
|
|
state.left = dom.scrollLeft;
|
|
state.top = dom.scrollTop;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Restores the scrollState.
|
|
* Must be used in conjunction with saveScrollState
|
|
* @private
|
|
*/
|
|
restoreScrollState: function() {
|
|
if (this.rendered) {
|
|
var dom = this.el.dom,
|
|
state = this.scrollState;
|
|
|
|
dom.scrollLeft = state.left;
|
|
dom.scrollTop = state.top;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Function which can be overridden to provide custom formatting for each Record that is used by this
|
|
* DataView's {@link #tpl template} to render each node.
|
|
* @param {Object/Object[]} data The raw data object that was used to create the Record.
|
|
* @param {Number} recordIndex the index number of the Record being prepared for rendering.
|
|
* @param {Ext.data.Model} record The Record being prepared for rendering.
|
|
* @return {Array/Object} The formatted data in a format expected by the internal {@link #tpl template}'s overwrite() method.
|
|
* (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}))
|
|
* @since 2.3.0
|
|
*/
|
|
prepareData: function(data, index, record) {
|
|
var associatedData, attr, hasCopied;
|
|
if (record) {
|
|
associatedData = record.getAssociatedData();
|
|
for (attr in associatedData) {
|
|
if (associatedData.hasOwnProperty(attr)) {
|
|
// This would be better done in collectData, however
|
|
// we only need to copy the data object if we have any associations,
|
|
// so we optimize it by only copying if we must.
|
|
// We do this so we don't mutate the underlying record.data
|
|
if (!hasCopied) {
|
|
data = Ext.Object.chain(data);
|
|
hasCopied = true;
|
|
}
|
|
data[attr] = associatedData[attr];
|
|
}
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
|
|
/**
|
|
* Function which can be overridden which returns the data object passed to this
|
|
* DataView's {@link #cfg-tpl template} to render the whole DataView.
|
|
*
|
|
* This is usually an Array of data objects, each element of which is processed by an
|
|
* {@link Ext.XTemplate XTemplate} which uses `'<tpl for=".">'` to iterate over its supplied
|
|
* data object as an Array. However, <i>named</i> properties may be placed into the data object to
|
|
* provide non-repeating data such as headings, totals etc.
|
|
*
|
|
* @param {Ext.data.Model[]} records An Array of {@link Ext.data.Model}s to be rendered into the DataView.
|
|
* @param {Number} startIndex the index number of the Record being prepared for rendering.
|
|
* @return {Object[]} An Array of data objects to be processed by a repeating XTemplate. May also
|
|
* contain <i>named</i> properties.
|
|
* @since 2.3.0
|
|
*/
|
|
collectData: function(records, startIndex){
|
|
var data = [],
|
|
i = 0,
|
|
len = records.length,
|
|
record;
|
|
|
|
for (; i < len; i++) {
|
|
record = records[i];
|
|
data[i] = this.prepareData(record.data, startIndex + i, record);
|
|
}
|
|
return data;
|
|
},
|
|
|
|
// private
|
|
bufferRender : function(records, index) {
|
|
var me = this,
|
|
div = me.renderBuffer || (me.renderBuffer = document.createElement('div'));
|
|
|
|
me.tpl.overwrite(div, me.collectData(records, index));
|
|
return Ext.DomQuery.select(me.getItemSelector(), div);
|
|
},
|
|
|
|
getNodeContainer: function() {
|
|
return this.getTargetEl();
|
|
},
|
|
|
|
// private
|
|
onUpdate : function(ds, record){
|
|
var me = this,
|
|
index,
|
|
node;
|
|
|
|
if (me.viewReady) {
|
|
index = me.dataSource.indexOf(record);
|
|
if (index > -1) {
|
|
node = me.bufferRender([record], index)[0];
|
|
// ensure the node actually exists in the DOM
|
|
if (me.getNode(record)) {
|
|
me.all.replaceElement(index, node, true);
|
|
me.updateIndexes(index, index);
|
|
// Maintain selection after update
|
|
me.selModel.onUpdate(record);
|
|
if (me.hasListeners.itemupdate) {
|
|
me.fireEvent('itemupdate', record, index, node);
|
|
}
|
|
return node;
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
// private
|
|
onAdd : function(store, records, index) {
|
|
var me = this,
|
|
nodes;
|
|
|
|
if (me.rendered) {
|
|
// If we are adding into an empty view, we must refresh in order that the *full tpl* is applied
|
|
// which might create boilerplate content *around* the record nodes.
|
|
if (me.all.getCount() === 0) {
|
|
me.refresh();
|
|
nodes = me.all.slice();
|
|
} else {
|
|
nodes = me.doAdd(records, index);
|
|
// Some subclasses do not need to do this. TableView does not need to do this.
|
|
if (me.refreshSelmodelOnRefresh !== false) {
|
|
me.selModel.refresh();
|
|
}
|
|
me.updateIndexes(index);
|
|
|
|
// Ensure layout system knows about new content size
|
|
me.refreshSize();
|
|
}
|
|
|
|
if (me.hasListeners.itemadd) {
|
|
me.fireEvent('itemadd', records, index, nodes);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
doAdd: function(records, index) {
|
|
var me = this,
|
|
nodes = me.bufferRender(records, index, true),
|
|
all = me.all,
|
|
count = all.getCount(),
|
|
i, l;
|
|
|
|
if (count === 0) {
|
|
for (i = 0, l = nodes.length; i < l; i++) {
|
|
this.getNodeContainer().appendChild(nodes[i]);
|
|
}
|
|
} else if (index < count) {
|
|
if (index === 0) {
|
|
all.item(index).insertSibling(nodes, 'before', true);
|
|
} else {
|
|
all.item(index - 1).insertSibling(nodes, 'after', true);
|
|
}
|
|
} else {
|
|
all.last().insertSibling(nodes, 'after', true);
|
|
}
|
|
|
|
all.insert(index, nodes);
|
|
return nodes;
|
|
},
|
|
|
|
// private
|
|
onRemove : function(ds, records, indexes) {
|
|
var me = this,
|
|
fireItemRemove = me.hasListeners.itemremove,
|
|
i,
|
|
record,
|
|
index;
|
|
|
|
if (me.all.getCount()) {
|
|
if (me.dataSource.getCount() === 0) {
|
|
// Refresh so emptyText can be applied if necessary
|
|
if (fireItemRemove) {
|
|
for (i = indexes.length - 1; i >= 0; --i) {
|
|
me.fireEvent('itemremove', records[i], indexes[i]);
|
|
}
|
|
}
|
|
me.refresh();
|
|
} else {
|
|
// Just remove the elements which corresponds to the removed records
|
|
// The tpl's full HTML will still be in place.
|
|
for (i = indexes.length - 1; i >= 0; --i) {
|
|
record = records[i];
|
|
index = indexes[i];
|
|
me.doRemove(record, index);
|
|
if (fireItemRemove) {
|
|
me.fireEvent('itemremove', record, index);
|
|
}
|
|
}
|
|
me.updateIndexes(indexes[0]);
|
|
}
|
|
|
|
// Ensure layout system knows about new content height
|
|
this.refreshSize();
|
|
}
|
|
},
|
|
|
|
// private
|
|
doRemove: function(record, index) {
|
|
this.all.removeElement(index, true);
|
|
},
|
|
|
|
/**
|
|
* Refreshes an individual node's data from the store.
|
|
* @param {Number} index The item's data index in the store
|
|
* @since 2.3.0
|
|
*/
|
|
refreshNode : function(index) {
|
|
this.onUpdate(this.dataSource, this.dataSource.getAt(index));
|
|
},
|
|
|
|
// private
|
|
updateIndexes : function(startIndex, endIndex) {
|
|
var nodes = this.all.elements,
|
|
records = this.getViewRange(),
|
|
i;
|
|
|
|
startIndex = startIndex || 0;
|
|
endIndex = endIndex || ((endIndex === 0) ? 0 : (nodes.length - 1));
|
|
for (i = startIndex; i <= endIndex; i++) {
|
|
nodes[i].viewIndex = i;
|
|
nodes[i].viewRecordId = records[i].internalId;
|
|
if (!nodes[i].boundView) {
|
|
nodes[i].boundView = this.id;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the store associated with this DataView.
|
|
* @return {Ext.data.Store} The store
|
|
*/
|
|
getStore : function() {
|
|
return this.store;
|
|
},
|
|
|
|
/**
|
|
* Changes the data store bound to this view and refreshes it.
|
|
* @param {Ext.data.Store} store The store to bind to this view
|
|
* @since 3.4.0
|
|
*/
|
|
bindStore : function(store, initial, propName) {
|
|
var me = this;
|
|
me.mixins.bindable.bindStore.apply(me, arguments);
|
|
|
|
// Bind the store to our selection model unless it's the initial bind.
|
|
// Initial bind takes place afterRender
|
|
if (!initial) {
|
|
me.getSelectionModel().bindStore(store);
|
|
}
|
|
|
|
// If we have already achieved our first layout, refresh immediately.
|
|
// If we have bound to the Store before the first layout, then onBoxReady will
|
|
// call doFirstRefresh
|
|
if (me.componentLayoutCounter) {
|
|
me.doFirstRefresh(store);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Perform the first refresh of the View from a newly bound store.
|
|
*
|
|
* This is called when this View has been sized for the first time.
|
|
*/
|
|
doFirstRefresh: function(store) {
|
|
var me = this;
|
|
|
|
// Flag to prevent a second "first" refresh from onBoxReady
|
|
me.firstRefreshDone = true;
|
|
|
|
// 4.1.0: If we have a store, and the Store is *NOT* already loading (a refresh is on the way), then
|
|
// on first layout, refresh regardless of record count.
|
|
// Template may contain boilerplate HTML outside of record iteration loop.
|
|
// Also, emptyText is appended by the refresh method.
|
|
// We call refresh on a defer if this is the initial call, and we are configured to defer the initial refresh.
|
|
if (store && !store.loading) {
|
|
if (me.deferInitialRefresh) {
|
|
me.applyFirstRefresh();
|
|
} else {
|
|
me.refresh();
|
|
}
|
|
}
|
|
},
|
|
|
|
applyFirstRefresh: function(){
|
|
var me = this;
|
|
if (me.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
// In the case of an animated collapse/expand, the layout will
|
|
// be marked as though it's complete, yet the element itself may
|
|
// still be animating, which means we could trigger a layout while
|
|
// everything is not in the correct place. As such, wait until the
|
|
// animation has finished before kicking off the refresh. The problem
|
|
// occurs because both the refresh and the animation are running on
|
|
// a timer which makes it impossible to control the order of when
|
|
// the refresh is fired.
|
|
if (me.up('[isCollapsingOrExpanding]')) {
|
|
Ext.Function.defer(me.applyFirstRefresh, 100, me);
|
|
} else {
|
|
Ext.Function.defer(function () {
|
|
if (!me.isDestroyed) {
|
|
me.refresh();
|
|
}
|
|
}, 1);
|
|
}
|
|
},
|
|
|
|
onUnbindStore: function(store) {
|
|
this.setMaskBind(null);
|
|
},
|
|
|
|
onBindStore: function(store, initial, propName) {
|
|
this.setMaskBind(store);
|
|
if (!initial && propName === 'store') {
|
|
this.bindStore(store, false, 'dataSource');
|
|
}
|
|
},
|
|
|
|
setMaskBind: function(store) {
|
|
var mask = this.loadMask;
|
|
if (mask && mask.bindStore) {
|
|
mask.bindStore(store);
|
|
}
|
|
},
|
|
|
|
getStoreListeners: function() {
|
|
var me = this;
|
|
return {
|
|
idchanged: me.onIdChanged,
|
|
refresh: me.onDataRefresh,
|
|
add: me.onAdd,
|
|
bulkremove: me.onRemove,
|
|
update: me.onUpdate,
|
|
clear: me.refresh
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Calls this.refresh if this.blockRefresh is not true
|
|
* @since 3.4.0
|
|
*/
|
|
onDataRefresh: function() {
|
|
this.refreshView();
|
|
},
|
|
|
|
refreshView: function() {
|
|
var me = this,
|
|
// If we have an ancestor in a non-boxready state (collapsed or in-transition, or hidden), and we are still waiting
|
|
// for the first refresh, then block the refresh because that first visible, expanded layout will trigger the refresh
|
|
blockedByAncestor = !me.firstRefreshDone && (!me.rendered || me.up('[collapsed],[isCollapsingOrExpanding],[hidden]'));
|
|
|
|
// If are blocking *an initial refresh* because of an ancestor in a non-boxready state,
|
|
// then cancel any defer on the initial refresh that is going to happen on boxReady - that will be a data-driven refresh, NOT
|
|
// a render-time, delayable refresh. This is particularly important if the boxready occurs because of the "preflight" layout
|
|
// of an animated expand. If refresh is delayed it occur during the expand animation and cause errors.
|
|
if (blockedByAncestor) {
|
|
me.deferInitialRefresh = false;
|
|
} else if (me.blockRefresh !== true) {
|
|
me.firstRefreshDone = true;
|
|
me.refresh();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the template node the passed child belongs to, or null if it doesn't belong to one.
|
|
* @param {HTMLElement} node
|
|
* @return {HTMLElement} The template node
|
|
*/
|
|
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
|
|
*/
|
|
findTargetByEvent: function(e) {
|
|
return e.getTarget(this.getItemSelector(), this.getTargetEl());
|
|
},
|
|
|
|
|
|
/**
|
|
* Gets the currently selected nodes.
|
|
* @return {HTMLElement[]} An array of HTMLElements
|
|
* @since 2.3.0
|
|
*/
|
|
getSelectedNodes: function(){
|
|
var nodes = [],
|
|
records = this.selModel.getSelection(),
|
|
ln = records.length,
|
|
i = 0;
|
|
|
|
for (; i < ln; i++) {
|
|
nodes.push(this.getNode(records[i]));
|
|
}
|
|
|
|
return nodes;
|
|
},
|
|
|
|
/**
|
|
* Gets an array of the records from an array of nodes
|
|
* @param {HTMLElement[]} nodes The nodes to evaluate
|
|
* @return {Ext.data.Model[]} records The {@link Ext.data.Model} objects
|
|
* @since 2.3.0
|
|
*/
|
|
getRecords: function(nodes) {
|
|
var records = [],
|
|
i = 0,
|
|
len = nodes.length,
|
|
data = this.dataSource.data;
|
|
|
|
for (; i < len; i++) {
|
|
records[records.length] = data.getByKey(nodes[i].viewRecordId);
|
|
}
|
|
|
|
return records;
|
|
},
|
|
|
|
/**
|
|
* Gets a record from a node
|
|
* @param {Ext.Element/HTMLElement} node The node to evaluate
|
|
*
|
|
* @return {Ext.data.Model} record The {@link Ext.data.Model} object
|
|
* @since 2.3.0
|
|
*/
|
|
getRecord: function(node){
|
|
return this.dataSource.data.getByKey(Ext.getDom(node).viewRecordId);
|
|
},
|
|
|
|
|
|
/**
|
|
* Returns true if the passed node is selected, else false.
|
|
* @param {HTMLElement/Number/Ext.data.Model} node The node, node index or record to check
|
|
* @return {Boolean} True if selected, else false
|
|
* @since 2.3.0
|
|
*/
|
|
isSelected : function(node) {
|
|
// TODO: El/Idx/Record
|
|
var r = this.getRecord(node);
|
|
return this.selModel.isSelected(r);
|
|
},
|
|
|
|
/**
|
|
* Selects a record instance by record instance or index.
|
|
* @param {Ext.data.Model[]/Number} records An array of records or an index
|
|
* @param {Boolean} keepExisting
|
|
* @param {Boolean} suppressEvent Set to false to not fire a select event
|
|
* @deprecated 4.0 Use {@link Ext.selection.Model#select} instead.
|
|
* @since 2.3.0
|
|
*/
|
|
select: function(records, keepExisting, suppressEvent) {
|
|
this.selModel.select(records, keepExisting, suppressEvent);
|
|
},
|
|
|
|
/**
|
|
* Deselects a record instance by record instance or index.
|
|
* @param {Ext.data.Model[]/Number} records An array of records or an index
|
|
* @param {Boolean} suppressEvent Set to false to not fire a deselect event
|
|
* @since 2.3.0
|
|
*/
|
|
deselect: function(records, suppressEvent) {
|
|
this.selModel.deselect(records, suppressEvent);
|
|
},
|
|
|
|
/**
|
|
* Gets a template node.
|
|
* @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node, index of a template node,
|
|
* the id of a template node or the record associated with the node.
|
|
* @return {HTMLElement} The node or null if it wasn't found
|
|
* @since 2.3.0
|
|
*/
|
|
getNode : function(nodeInfo) {
|
|
if ((!nodeInfo && nodeInfo !== 0) || !this.rendered) {
|
|
return null;
|
|
}
|
|
|
|
if (Ext.isString(nodeInfo)) {
|
|
return document.getElementById(nodeInfo);
|
|
}
|
|
if (Ext.isNumber(nodeInfo)) {
|
|
return this.all.elements[nodeInfo];
|
|
}
|
|
if (nodeInfo.isModel) {
|
|
return this.getNodeByRecord(nodeInfo);
|
|
}
|
|
return nodeInfo; // already an HTMLElement
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getNodeByRecord: function(record) {
|
|
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
|
|
* @param {Number} end (optional) The index of the last node in the range
|
|
* @return {HTMLElement[]} An array of nodes
|
|
* @since 2.3.0
|
|
*/
|
|
getNodes: function(start, end) {
|
|
var all = this.all;
|
|
|
|
if (end === undefined) {
|
|
end = all.getCount();
|
|
} else {
|
|
end++;
|
|
}
|
|
return all.slice(start||0, end);
|
|
},
|
|
|
|
/**
|
|
* Finds the index of the passed node.
|
|
* @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo An HTMLElement template node, index of a template node, the id of a template node
|
|
* or a record associated with a node.
|
|
* @return {Number} The index of the node or -1
|
|
* @since 2.3.0
|
|
*/
|
|
indexOf: function(node) {
|
|
node = this.getNode(node);
|
|
if (!node && node !== 0) {
|
|
return -1;
|
|
}
|
|
if (Ext.isNumber(node.viewIndex)) {
|
|
return node.viewIndex;
|
|
}
|
|
return this.all.indexOf(node);
|
|
},
|
|
|
|
onDestroy : function() {
|
|
var me = this;
|
|
|
|
me.all.clear();
|
|
me.callParent();
|
|
me.bindStore(null);
|
|
me.selModel.destroy();
|
|
},
|
|
|
|
// invoked by the selection model to maintain visual UI cues
|
|
onItemSelect: function(record) {
|
|
var node = this.getNode(record);
|
|
|
|
if (node) {
|
|
Ext.fly(node).addCls(this.selectedItemCls);
|
|
}
|
|
},
|
|
|
|
// invoked by the selection model to maintain visual UI cues
|
|
onItemDeselect: function(record) {
|
|
var node = this.getNode(record);
|
|
|
|
if (node) {
|
|
Ext.fly(node).removeCls(this.selectedItemCls);
|
|
}
|
|
},
|
|
|
|
getItemSelector: function() {
|
|
return this.itemSelector;
|
|
}
|
|
}, function() {
|
|
// all of this information is available directly
|
|
// from the SelectionModel itself, the only added methods
|
|
// to DataView regarding selection will perform some transformation/lookup
|
|
// between HTMLElement/Nodes to records and vice versa.
|
|
Ext.deprecate('extjs', '4.0', function() {
|
|
Ext.view.AbstractView.override({
|
|
/**
|
|
* @cfg {Boolean} [multiSelect=false]
|
|
* True to allow selection of more than one item at a time, false to allow selection of only a single item
|
|
* at a time or no selection at all, depending on the value of {@link #singleSelect}.
|
|
* @deprecated 4.0 Use {@link Ext.selection.Model#mode} 'MULTI' instead.
|
|
* @since 2.3.0
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [singleSelect]
|
|
* Allows selection of exactly one item at a time. As this is the default selection mode anyway, this config
|
|
* is completely ignored.
|
|
* @removed 4.0 Use {@link Ext.selection.Model#mode} 'SINGLE' instead.
|
|
* @since 2.3.0
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [simpleSelect=false]
|
|
* 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.
|
|
* @deprecated 4.0 Use {@link Ext.selection.Model#mode} 'SIMPLE' instead.
|
|
* @since 2.3.0
|
|
*/
|
|
|
|
/**
|
|
* Gets the number of selected nodes.
|
|
* @return {Number} The node count
|
|
* @deprecated 4.0 Use {@link Ext.selection.Model#getCount} instead.
|
|
* @since 2.3.0
|
|
*/
|
|
getSelectionCount : function(){
|
|
if (Ext.global.console) {
|
|
Ext.global.console.warn("DataView: getSelectionCount will be removed, please interact with the Ext.selection.DataViewModel");
|
|
}
|
|
return this.selModel.getSelection().length;
|
|
},
|
|
|
|
/**
|
|
* Gets an array of the selected records
|
|
* @return {Ext.data.Model[]} An array of {@link Ext.data.Model} objects
|
|
* @deprecated 4.0 Use {@link Ext.selection.Model#getSelection} instead.
|
|
* @since 2.3.0
|
|
*/
|
|
getSelectedRecords : function(){
|
|
if (Ext.global.console) {
|
|
Ext.global.console.warn("DataView: getSelectedRecords will be removed, please interact with the Ext.selection.DataViewModel");
|
|
}
|
|
return this.selModel.getSelection();
|
|
},
|
|
|
|
// documented above
|
|
// @ignore
|
|
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()");
|
|
}
|
|
var sm = this.getSelectionModel();
|
|
return sm.select.apply(sm, arguments);
|
|
},
|
|
|
|
/**
|
|
* Deselects all selected records.
|
|
* @deprecated 4.0 Use {@link Ext.selection.Model#deselectAll} instead.
|
|
* @since 2.3.0
|
|
*/
|
|
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()");
|
|
}
|
|
var sm = this.getSelectionModel();
|
|
return sm.deselectAll();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
/**
|
|
* A mechanism for displaying data using custom layout templates and formatting.
|
|
*
|
|
* The View uses an {@link Ext.XTemplate} as its internal templating mechanism, and is bound to an
|
|
* {@link Ext.data.Store} so that as the data in the store changes the view is automatically updated
|
|
* to reflect the changes. The view also provides built-in behavior for many common events that can
|
|
* occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a
|
|
* built-in selection model. **In order to use these features, an {@link #itemSelector} config must
|
|
* be provided for the View to determine what nodes it will be working with.**
|
|
*
|
|
* The example below binds a View to a {@link Ext.data.Store} and renders it into an {@link Ext.panel.Panel}.
|
|
*
|
|
* @example
|
|
* Ext.define('Image', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: [
|
|
* { name:'src', type:'string' },
|
|
* { name:'caption', type:'string' }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.data.Store', {
|
|
* id:'imagesStore',
|
|
* model: 'Image',
|
|
* data: [
|
|
* { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
|
|
* { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
|
|
* { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
|
|
* { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
|
|
* ]
|
|
* });
|
|
*
|
|
* var imageTpl = new Ext.XTemplate(
|
|
* '<tpl for=".">',
|
|
* '<div style="margin-bottom: 10px;" class="thumb-wrap">',
|
|
* '<img src="{src}" />',
|
|
* '<br/><span>{caption}</span>',
|
|
* '</div>',
|
|
* '</tpl>'
|
|
* );
|
|
*
|
|
* Ext.create('Ext.view.View', {
|
|
* store: Ext.data.StoreManager.lookup('imagesStore'),
|
|
* tpl: imageTpl,
|
|
* itemSelector: 'div.thumb-wrap',
|
|
* emptyText: 'No images available',
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.view.View', {
|
|
extend: Ext.view.AbstractView ,
|
|
alternateClassName: 'Ext.DataView',
|
|
alias: 'widget.dataview',
|
|
|
|
// private delay to buffer row highlighting/unhighlighting on mouse move.
|
|
// This is ignored if the public mouseOverOutBuffer remains a non-zero value
|
|
deferHighlight: Ext.isIE7m ? 100 : 0,
|
|
|
|
/**
|
|
* @cfg {Number} [mouseOverOutBuffer=20]
|
|
* The number of milliseconds to buffer mouseover and mouseout event handling on view items.
|
|
*
|
|
* Configure this as `false` to process mouseover and mouseout events immediately.
|
|
*/
|
|
mouseOverOutBuffer: 20,
|
|
|
|
inputTagRe: /^textarea$|^input$/i,
|
|
|
|
inheritableStatics: {
|
|
EventMap: {
|
|
mousedown: 'MouseDown',
|
|
mouseup: 'MouseUp',
|
|
click: 'Click',
|
|
dblclick: 'DblClick',
|
|
contextmenu: 'ContextMenu',
|
|
mouseover: 'MouseOver',
|
|
mouseout: 'MouseOut',
|
|
mouseenter: 'MouseEnter',
|
|
mouseleave: 'MouseLeave',
|
|
keydown: 'KeyDown',
|
|
focus: 'Focus'
|
|
}
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
//
|
|
if (me.mouseOverOutBuffer) {
|
|
me.handleMouseOverOrOut =
|
|
Ext.Function.createBuffered(me.handleMouseOverOrOut, me.mouseOverOutBuffer, me);
|
|
me.lastMouseOverOutEvent = new Ext.EventObjectImpl();
|
|
}
|
|
|
|
// Not buffering mouse over/out handling - buffer item highlighting.
|
|
else if (me.deferHighlight){
|
|
me.setHighlightedItem =
|
|
Ext.Function.createBuffered(me.setHighlightedItem, me.deferHighlight, me);
|
|
}
|
|
},
|
|
|
|
addCmpEvents: function() {
|
|
this.addEvents(
|
|
/**
|
|
* @event beforeitemmousedown
|
|
* Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemmousedown',
|
|
/**
|
|
* @event beforeitemmouseup
|
|
* Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemmouseup',
|
|
/**
|
|
* @event beforeitemmouseenter
|
|
* Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemmouseenter',
|
|
/**
|
|
* @event beforeitemmouseleave
|
|
* Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemmouseleave',
|
|
/**
|
|
* @event beforeitemclick
|
|
* Fires before the click event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemclick',
|
|
/**
|
|
* @event beforeitemdblclick
|
|
* Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemdblclick',
|
|
/**
|
|
* @event beforeitemcontextmenu
|
|
* Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforeitemcontextmenu',
|
|
/**
|
|
* @event beforeitemkeydown
|
|
* Fires before the keydown event on an item is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
|
|
*/
|
|
'beforeitemkeydown',
|
|
/**
|
|
* @event itemmousedown
|
|
* Fires when there is a mouse down on an item
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemmousedown',
|
|
/**
|
|
* @event itemmouseup
|
|
* Fires when there is a mouse up on an item
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemmouseup',
|
|
/**
|
|
* @event itemmouseenter
|
|
* Fires when the mouse enters an item.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemmouseenter',
|
|
/**
|
|
* @event itemmouseleave
|
|
* Fires when the mouse leaves an item.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemmouseleave',
|
|
/**
|
|
* @event itemclick
|
|
* Fires when an item is clicked.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemclick',
|
|
/**
|
|
* @event itemdblclick
|
|
* Fires when an item is double clicked.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemdblclick',
|
|
/**
|
|
* @event itemcontextmenu
|
|
* Fires when an item is right clicked.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'itemcontextmenu',
|
|
/**
|
|
* @event itemkeydown
|
|
* Fires when a key is pressed while an item is currently selected.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.data.Model} record The record that belongs to the item
|
|
* @param {HTMLElement} item The item's element
|
|
* @param {Number} index The item's index
|
|
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
|
|
*/
|
|
'itemkeydown',
|
|
/**
|
|
* @event beforecontainermousedown
|
|
* Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainermousedown',
|
|
/**
|
|
* @event beforecontainermouseup
|
|
* Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainermouseup',
|
|
/**
|
|
* @event beforecontainermouseover
|
|
* Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainermouseover',
|
|
/**
|
|
* @event beforecontainermouseout
|
|
* Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainermouseout',
|
|
/**
|
|
* @event beforecontainerclick
|
|
* Fires before the click event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainerclick',
|
|
/**
|
|
* @event beforecontainerdblclick
|
|
* Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainerdblclick',
|
|
/**
|
|
* @event beforecontainercontextmenu
|
|
* Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'beforecontainercontextmenu',
|
|
/**
|
|
* @event beforecontainerkeydown
|
|
* Fires before the keydown event on the container is processed. Returns false to cancel the default action.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
|
|
*/
|
|
'beforecontainerkeydown',
|
|
/**
|
|
* @event containermouseup
|
|
* Fires when there is a mouse up on the container
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'containermouseup',
|
|
/**
|
|
* @event containermouseover
|
|
* Fires when you move the mouse over the container.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'containermouseover',
|
|
/**
|
|
* @event containermouseout
|
|
* Fires when you move the mouse out of the container.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'containermouseout',
|
|
/**
|
|
* @event containerclick
|
|
* Fires when the container is clicked.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'containerclick',
|
|
/**
|
|
* @event containerdblclick
|
|
* Fires when the container is double clicked.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'containerdblclick',
|
|
/**
|
|
* @event containercontextmenu
|
|
* Fires when the container is right clicked.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object
|
|
*/
|
|
'containercontextmenu',
|
|
/**
|
|
* @event containerkeydown
|
|
* Fires when a key is pressed while the container is focused, and no item is currently selected.
|
|
* @param {Ext.view.View} this
|
|
* @param {Ext.EventObject} e The raw event object. Use {@link Ext.EventObject#getKey getKey()} to retrieve the key that was pressed.
|
|
*/
|
|
'containerkeydown',
|
|
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.selection.DataViewModel#selectionchange
|
|
*/
|
|
'selectionchange',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.selection.DataViewModel#beforeselect
|
|
*/
|
|
'beforeselect',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.selection.DataViewModel#beforedeselect
|
|
*/
|
|
'beforedeselect',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.selection.DataViewModel#select
|
|
*/
|
|
'select',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.selection.DataViewModel#deselect
|
|
*/
|
|
'deselect',
|
|
/**
|
|
* @event
|
|
* @inheritdoc Ext.selection.DataViewModel#focuschange
|
|
*/
|
|
'focuschange',
|
|
|
|
/**
|
|
* @event highlightitem
|
|
* Fires when a node is highlighted using keyboard navigation, or mouseover.
|
|
* @param {Ext.view.View} view This View Component.
|
|
* @param {Ext.Element} node The highlighted node.
|
|
*/
|
|
'highlightitem',
|
|
|
|
/**
|
|
* @event unhighlightitem
|
|
* Fires when a node is unhighlighted using keyboard navigation, or mouseout.
|
|
* @param {Ext.view.View} view This View Component.
|
|
* @param {Ext.Element} node The previously highlighted node.
|
|
*/
|
|
'unhighlightitem'
|
|
);
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
return this.getTargetEl();
|
|
},
|
|
|
|
// @private
|
|
afterRender: function(){
|
|
var me = this,
|
|
onMouseOverOut = me.mouseOverOutBuffer ? me.onMouseOverOut : me.handleMouseOverOrOut;
|
|
|
|
me.callParent();
|
|
me.mon(me.getTargetEl(), {
|
|
scope: me,
|
|
/*
|
|
* We need to make copies of this since some of the events fired here will end up triggering
|
|
* a new event to be called and the shared event object will be mutated. In future we should
|
|
* investigate if there are any issues with creating a new event object for each event that
|
|
* is fired.
|
|
*/
|
|
freezeEvent: true,
|
|
click: me.handleEvent,
|
|
mousedown: me.handleEvent,
|
|
mouseup: me.handleEvent,
|
|
dblclick: me.handleEvent,
|
|
contextmenu: me.handleEvent,
|
|
keydown: me.handleEvent,
|
|
mouseover: onMouseOverOut,
|
|
mouseout: onMouseOverOut
|
|
});
|
|
},
|
|
|
|
onMouseOverOut: function(e) {
|
|
var me = this;
|
|
|
|
// Determining if we are entering or leaving view items is deferred until
|
|
// mouse move churn settles down.
|
|
me.lastMouseOverOutEvent.setEvent(e.browserEvent, true);
|
|
me.handleMouseOverOrOut(me.lastMouseOverOutEvent);
|
|
},
|
|
|
|
handleMouseOverOrOut: function(e) {
|
|
var me = this,
|
|
isMouseout = e.type === 'mouseout',
|
|
method = isMouseout ? e.getRelatedTarget : e.getTarget,
|
|
nowOverItem = method.call(e, me.itemSelector) || method.call(e, me.dataRowSelector);
|
|
|
|
// If the mouse event of whatever type tells use that we are no longer over the current mouseOverItem...
|
|
if (!me.mouseOverItem || nowOverItem !== me.mouseOverItem) {
|
|
|
|
// First fire mouseleave for the item we just left
|
|
if (me.mouseOverItem) {
|
|
e.item = me.mouseOverItem;
|
|
e.newType = 'mouseleave';
|
|
me.handleEvent(e);
|
|
}
|
|
|
|
// If we are over an item, fire the mouseenter
|
|
me.mouseOverItem = nowOverItem;
|
|
if (me.mouseOverItem) {
|
|
e.item = me.mouseOverItem;
|
|
e.newType = 'mouseenter';
|
|
me.handleEvent(e);
|
|
}
|
|
}
|
|
},
|
|
|
|
handleEvent: function(e) {
|
|
var me = this,
|
|
key = e.type == 'keydown' && e.getKey();
|
|
|
|
if (me.processUIEvent(e) !== false) {
|
|
me.processSpecialEvent(e);
|
|
}
|
|
|
|
// After all listeners have processed the event, then unless the user is typing into an input field,
|
|
// prevent browser's default action on SPACE which is to focus the event's target element.
|
|
// Focusing causes the browser to attempt to scroll the element into view.
|
|
if (key === e.SPACE) {
|
|
if (!me.inputTagRe.test(e.getTarget().tagName)) {
|
|
e.stopEvent();
|
|
}
|
|
}
|
|
},
|
|
|
|
// Private template method
|
|
processItemEvent: Ext.emptyFn,
|
|
processContainerEvent: Ext.emptyFn,
|
|
processSpecialEvent: Ext.emptyFn,
|
|
|
|
processUIEvent: function(e) {
|
|
|
|
// If the target event has been removed from the body (data update causing view DOM to be updated),
|
|
// do not process. isAncestor uses native methods to check.
|
|
if (!Ext.getBody().isAncestor(e.target)) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
item = e.getTarget(me.getItemSelector(), me.getTargetEl()),
|
|
map = this.statics().EventMap,
|
|
index, record,
|
|
type = e.type,
|
|
newType = e.type,
|
|
sm;
|
|
|
|
// If the event is a mouseover/mouseout event converted to a mouseenter/mouseleave,
|
|
// use that event type and ensure that the item is correct.
|
|
if (e.newType) {
|
|
newType = e.newType;
|
|
item = e.item;
|
|
}
|
|
|
|
// For keydown events, try to get either the last focused item or the selected item.
|
|
// If we have not focused an item, we'll just fire a container keydown event.
|
|
if (!item && type == 'keydown') {
|
|
sm = me.getSelectionModel();
|
|
record = sm.lastFocused || sm.getLastSelected();
|
|
if (record) {
|
|
item = me.getNode(record, true);
|
|
}
|
|
}
|
|
|
|
if (item) {
|
|
if (!record) {
|
|
record = me.getRecord(item);
|
|
}
|
|
index = me.indexInStore ? me.indexInStore(record) : me.indexOf(item);
|
|
|
|
// It is possible for an event to arrive for which there is no record... this
|
|
// can happen with dblclick where the clicks are on removal actions (think a
|
|
// grid w/"delete row" action column)
|
|
if (!record || me.processItemEvent(record, item, index, e) === false) {
|
|
return false;
|
|
}
|
|
|
|
if (
|
|
(me['onBeforeItem' + map[newType]](record, item, index, e) === false) ||
|
|
(me.fireEvent('beforeitem' + newType, me, record, item, index, e) === false) ||
|
|
(me['onItem' + map[newType]](record, item, index, e) === false)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
me.fireEvent('item' + newType, me, record, item, index, e);
|
|
}
|
|
else {
|
|
if (
|
|
(me.processContainerEvent(e) === false) ||
|
|
(me['onBeforeContainer' + map[type]](e) === false) ||
|
|
(me.fireEvent('beforecontainer' + type, me, e) === false) ||
|
|
(me['onContainer' + map[type]](e) === false)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
me.fireEvent('container' + type, me, e);
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
onItemMouseEnter: function(record, item, index, e) {
|
|
if (this.trackOver) {
|
|
this.highlightItem(item);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onItemMouseLeave : function(record, item, index, e) {
|
|
if (this.trackOver) {
|
|
this.clearHighlight();
|
|
}
|
|
},
|
|
|
|
// private, template methods
|
|
onItemMouseDown: Ext.emptyFn,
|
|
onItemMouseUp: Ext.emptyFn,
|
|
onItemFocus: Ext.emptyFn,
|
|
onItemClick: Ext.emptyFn,
|
|
onItemDblClick: Ext.emptyFn,
|
|
onItemContextMenu: Ext.emptyFn,
|
|
onItemKeyDown: Ext.emptyFn,
|
|
onBeforeItemMouseDown: Ext.emptyFn,
|
|
onBeforeItemMouseUp: Ext.emptyFn,
|
|
onBeforeItemFocus: Ext.emptyFn,
|
|
onBeforeItemMouseEnter: Ext.emptyFn,
|
|
onBeforeItemMouseLeave: Ext.emptyFn,
|
|
onBeforeItemClick: Ext.emptyFn,
|
|
onBeforeItemDblClick: Ext.emptyFn,
|
|
onBeforeItemContextMenu: Ext.emptyFn,
|
|
onBeforeItemKeyDown: Ext.emptyFn,
|
|
|
|
// private, template methods
|
|
onContainerMouseDown: Ext.emptyFn,
|
|
onContainerMouseUp: Ext.emptyFn,
|
|
onContainerMouseOver: Ext.emptyFn,
|
|
onContainerMouseOut: Ext.emptyFn,
|
|
onContainerClick: Ext.emptyFn,
|
|
onContainerDblClick: Ext.emptyFn,
|
|
onContainerContextMenu: Ext.emptyFn,
|
|
onContainerKeyDown: Ext.emptyFn,
|
|
onBeforeContainerMouseDown: Ext.emptyFn,
|
|
onBeforeContainerMouseUp: Ext.emptyFn,
|
|
onBeforeContainerMouseOver: Ext.emptyFn,
|
|
onBeforeContainerMouseOut: Ext.emptyFn,
|
|
onBeforeContainerClick: Ext.emptyFn,
|
|
onBeforeContainerDblClick: Ext.emptyFn,
|
|
onBeforeContainerContextMenu: Ext.emptyFn,
|
|
onBeforeContainerKeyDown: Ext.emptyFn,
|
|
|
|
// @private
|
|
setHighlightedItem: function(item){
|
|
var me = this,
|
|
highlighted = me.highlightedItem,
|
|
overItemCls = me.overItemCls,
|
|
beforeOverItemCls = me.beforeOverItemCls,
|
|
previous;
|
|
|
|
if (highlighted != item){
|
|
if (highlighted) {
|
|
Ext.fly(highlighted).removeCls(overItemCls);
|
|
previous = highlighted.previousSibling;
|
|
if (beforeOverItemCls && previous) {
|
|
Ext.fly(previous).removeCls(beforeOverItemCls);
|
|
}
|
|
me.fireEvent('unhighlightitem', me, highlighted);
|
|
}
|
|
|
|
me.highlightedItem = item;
|
|
|
|
if (item) {
|
|
Ext.fly(item).addCls(me.overItemCls);
|
|
previous = item.previousSibling;
|
|
if (beforeOverItemCls && previous) {
|
|
Ext.fly(previous).addCls(beforeOverItemCls);
|
|
}
|
|
me.fireEvent('highlightitem', me, item);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Highlights a given item in the View. This is called by the mouseover handler if {@link #overItemCls}
|
|
* and {@link #trackOver} are configured, but can also be called manually by other code, for instance to
|
|
* handle stepping through the list via keyboard navigation.
|
|
* @param {HTMLElement} item The item to highlight
|
|
*/
|
|
highlightItem: function(item) {
|
|
this.setHighlightedItem(item);
|
|
},
|
|
|
|
/**
|
|
* Un-highlights the currently highlighted item, if any.
|
|
*/
|
|
clearHighlight: function() {
|
|
this.setHighlightedItem(undefined);
|
|
},
|
|
|
|
onUpdate: function(store, record){
|
|
var me = this,
|
|
node,
|
|
newNode,
|
|
highlighted;
|
|
|
|
if (me.viewReady) {
|
|
node = me.getNode(record);
|
|
newNode = me.callParent(arguments);
|
|
highlighted = me.highlightedItem;
|
|
|
|
if (highlighted && highlighted === node) {
|
|
delete me.highlightedItem;
|
|
if (newNode) {
|
|
me.highlightItem(newNode);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
refresh: function() {
|
|
this.clearHighlight();
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Focuses a node in the view.
|
|
* @param {Ext.data.Model} rec The record associated to the node that is to be focused.
|
|
*/
|
|
focusNode: function(rec){
|
|
var me = this,
|
|
node = me.getNode(rec, true),
|
|
el = me.el,
|
|
adjustmentY = 0,
|
|
adjustmentX = 0,
|
|
elRegion = el.getRegion(),
|
|
nodeRegion;
|
|
|
|
// Viewable region must not include scrollbars, so use
|
|
// DOM client dimensions
|
|
elRegion.bottom = elRegion.top + el.dom.clientHeight;
|
|
elRegion.right = elRegion.left + el.dom.clientWidth;
|
|
if (node) {
|
|
nodeRegion = Ext.fly(node).getRegion();
|
|
// node is above
|
|
if (nodeRegion.top < elRegion.top) {
|
|
adjustmentY = nodeRegion.top - elRegion.top;
|
|
// node is below
|
|
} else if (nodeRegion.bottom > elRegion.bottom) {
|
|
adjustmentY = nodeRegion.bottom - elRegion.bottom;
|
|
}
|
|
|
|
// node is left
|
|
if (nodeRegion.left < elRegion.left) {
|
|
adjustmentX = nodeRegion.left - elRegion.left;
|
|
// node is right
|
|
} else if (nodeRegion.right > elRegion.right) {
|
|
adjustmentX = nodeRegion.right - elRegion.right;
|
|
}
|
|
|
|
if (adjustmentX || adjustmentY) {
|
|
me.scrollBy(adjustmentX, adjustmentY, false);
|
|
}
|
|
el.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Component layout for {@link Ext.view.BoundList}.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.BoundList', {
|
|
extend: Ext.layout.component.Auto ,
|
|
alias: 'layout.boundlist',
|
|
|
|
type: 'component',
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
toolbar = owner.pagingToolbar;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (owner.floating) {
|
|
ownerContext.savedXY = owner.getXY();
|
|
// move way offscreen to prevent any constraining
|
|
// only move on the y axis to avoid triggering a horizontal scrollbar in rtl mode
|
|
owner.setXY([0, -9999]);
|
|
}
|
|
|
|
if (toolbar) {
|
|
ownerContext.toolbarContext = ownerContext.context.getCmp(toolbar);
|
|
}
|
|
ownerContext.listContext = ownerContext.getEl('listEl');
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext){
|
|
var owner = this.owner;
|
|
|
|
this.callParent(arguments);
|
|
if (ownerContext.heightModel.auto) {
|
|
// Set the el/listEl to be autoHeight since they may have been previously sized
|
|
// by another layout process. If the el was at maxHeight first, the listEl will
|
|
// always size to the maxHeight regardless of the content.
|
|
owner.el.setHeight('auto');
|
|
owner.listEl.setHeight('auto');
|
|
}
|
|
},
|
|
|
|
getLayoutItems: function() {
|
|
var toolbar = this.owner.pagingToolbar;
|
|
return toolbar ? [toolbar] : [];
|
|
},
|
|
|
|
isValidParent: function() {
|
|
// this only ever gets called with the toolbar, since it's rendered inside we
|
|
// know the parent is always valid
|
|
return true;
|
|
},
|
|
|
|
finishedLayout: function(ownerContext) {
|
|
var xy = ownerContext.savedXY;
|
|
|
|
this.callParent(arguments);
|
|
if (xy) {
|
|
this.owner.setXY(xy);
|
|
}
|
|
},
|
|
|
|
measureContentWidth: function(ownerContext) {
|
|
return this.owner.listEl.getWidth();
|
|
},
|
|
|
|
measureContentHeight: function(ownerContext) {
|
|
return this.owner.listEl.getHeight();
|
|
},
|
|
|
|
publishInnerHeight: function(ownerContext, height) {
|
|
var toolbar = ownerContext.toolbarContext,
|
|
toolbarHeight = 0;
|
|
|
|
if (toolbar) {
|
|
toolbarHeight = toolbar.getProp('height');
|
|
}
|
|
|
|
if (toolbarHeight === undefined) {
|
|
this.done = false;
|
|
} else {
|
|
ownerContext.listContext.setHeight(height - ownerContext.getFrameInfo().height - toolbarHeight);
|
|
}
|
|
},
|
|
|
|
calculateOwnerHeightFromContentHeight: function(ownerContext){
|
|
var height = this.callParent(arguments),
|
|
toolbar = ownerContext.toolbarContext;
|
|
|
|
if (toolbar) {
|
|
height += toolbar.getProp('height');
|
|
}
|
|
return height;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A simple class that renders text directly into a toolbar.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Panel with TextItem',
|
|
* width: 300,
|
|
* height: 200,
|
|
* tbar: [
|
|
* { xtype: 'tbtext', text: 'Sample Text Item' }
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* @constructor
|
|
* Creates a new TextItem
|
|
* @param {Object} text A text string, or a config object containing a #text property
|
|
*/
|
|
Ext.define('Ext.toolbar.TextItem', {
|
|
extend: Ext.toolbar.Item ,
|
|
|
|
alias: 'widget.tbtext',
|
|
alternateClassName: 'Ext.Toolbar.TextItem',
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The text to be used as innerHTML (html tags are accepted).
|
|
*/
|
|
text: '',
|
|
|
|
renderTpl: '{text}',
|
|
//
|
|
baseCls: Ext.baseCSSPrefix + 'toolbar-text',
|
|
|
|
beforeRender : function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
Ext.apply(me.renderData, {
|
|
text: me.text
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Updates this item's text, setting the text to be used as innerHTML.
|
|
* @param {String} text The text to display (html accepted).
|
|
*/
|
|
setText : function(text) {
|
|
var me = this;
|
|
me.text = text;
|
|
if (me.rendered) {
|
|
me.el.update(text);
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
|
|
* instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
|
|
* to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number}
|
|
* field which uses the spinner to increment and decrement the field's value by its
|
|
* {@link Ext.form.field.Number#step step} config value.
|
|
*
|
|
* For example:
|
|
*
|
|
* @example
|
|
* Ext.define('Ext.ux.CustomSpinner', {
|
|
* extend: 'Ext.form.field.Spinner',
|
|
* alias: 'widget.customspinner',
|
|
*
|
|
* // override onSpinUp (using step isn't neccessary)
|
|
* onSpinUp: function() {
|
|
* var me = this;
|
|
* if (!me.readOnly) {
|
|
* var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
|
|
* me.setValue((val + me.step) + ' Pack');
|
|
* }
|
|
* },
|
|
*
|
|
* // override onSpinDown
|
|
* onSpinDown: function() {
|
|
* var me = this;
|
|
* if (!me.readOnly) {
|
|
* var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
|
|
* if (val <= me.step) {
|
|
* me.setValue('Dry!');
|
|
* } else {
|
|
* me.setValue((val - me.step) + ' Pack');
|
|
* }
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.form.FormPanel', {
|
|
* title: 'Form with SpinnerField',
|
|
* bodyPadding: 5,
|
|
* width: 350,
|
|
* renderTo: Ext.getBody(),
|
|
* items:[{
|
|
* xtype: 'customspinner',
|
|
* fieldLabel: 'How Much Beer?',
|
|
* step: 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`.
|
|
*/
|
|
Ext.define('Ext.form.field.Spinner', {
|
|
extend: Ext.form.field.Trigger ,
|
|
alias: 'widget.spinnerfield',
|
|
alternateClassName: 'Ext.form.Spinner',
|
|
|
|
|
|
trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
|
|
trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
|
|
|
|
/**
|
|
* @cfg {Boolean} spinUpEnabled
|
|
* Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is
|
|
* created, use the {@link #setSpinUpEnabled} method.
|
|
*/
|
|
spinUpEnabled: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} spinDownEnabled
|
|
* Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is
|
|
* created, use the {@link #setSpinDownEnabled} method.
|
|
*/
|
|
spinDownEnabled: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} keyNavEnabled
|
|
* Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
|
|
*/
|
|
keyNavEnabled: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} mouseWheelEnabled
|
|
* Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
|
|
* Defaults to true.
|
|
*/
|
|
mouseWheelEnabled: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} repeatTriggerClick
|
|
* Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
|
|
* Defaults to true.
|
|
*/
|
|
repeatTriggerClick: true,
|
|
|
|
/**
|
|
* @method
|
|
* @protected
|
|
* This method is called when the spinner up button is clicked, or when the up arrow key is pressed if
|
|
* {@link #keyNavEnabled} is true. Must be implemented by subclasses.
|
|
*/
|
|
onSpinUp: Ext.emptyFn,
|
|
|
|
/**
|
|
* @method
|
|
* @protected
|
|
* This method is called when the spinner down button is clicked, or when the down arrow key is pressed if
|
|
* {@link #keyNavEnabled} is true. Must be implemented by subclasses.
|
|
*/
|
|
onSpinDown: Ext.emptyFn,
|
|
|
|
triggerTpl: '<td style="{triggerStyle}" class="{triggerCls}">' +
|
|
'<div class="' + Ext.baseCSSPrefix + 'trigger-index-0 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-up {spinnerUpCls} {childElCls}" role="button"></div>' +
|
|
'<div class="' + Ext.baseCSSPrefix + 'trigger-index-1 ' + Ext.baseCSSPrefix + 'form-trigger ' + Ext.baseCSSPrefix + 'form-spinner-down {spinnerDownCls} {childElCls}" role="button"></div>' +
|
|
'</td>' +
|
|
'</tr>',
|
|
|
|
initComponent: function() {
|
|
this.callParent();
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event spin
|
|
* Fires when the spinner is made to spin up or down.
|
|
* @param {Ext.form.field.Spinner} this
|
|
* @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
|
|
*/
|
|
'spin',
|
|
|
|
/**
|
|
* @event spinup
|
|
* Fires when the spinner is made to spin up.
|
|
* @param {Ext.form.field.Spinner} this
|
|
*/
|
|
'spinup',
|
|
|
|
/**
|
|
* @event spindown
|
|
* Fires when the spinner is made to spin down.
|
|
* @param {Ext.form.field.Spinner} this
|
|
*/
|
|
'spindown'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Override.
|
|
*/
|
|
onRender: function() {
|
|
var me = this,
|
|
triggers;
|
|
|
|
me.callParent(arguments);
|
|
triggers = me.triggerEl;
|
|
|
|
/**
|
|
* @property {Ext.Element} spinUpEl
|
|
* The spinner up button element
|
|
*/
|
|
me.spinUpEl = triggers.item(0);
|
|
/**
|
|
* @property {Ext.Element} spinDownEl
|
|
* The spinner down button element
|
|
*/
|
|
me.spinDownEl = triggers.item(1);
|
|
|
|
me.triggerCell = me.spinUpEl.parent();
|
|
|
|
// Init up/down arrow keys
|
|
if (me.keyNavEnabled) {
|
|
me.spinnerKeyNav = new Ext.util.KeyNav(me.inputEl, {
|
|
scope: me,
|
|
up: me.spinUp,
|
|
down: me.spinDown
|
|
});
|
|
}
|
|
|
|
// Init mouse wheel
|
|
if (me.mouseWheelEnabled) {
|
|
me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
|
|
}
|
|
},
|
|
|
|
getSubTplMarkup: function(values) {
|
|
var me = this,
|
|
childElCls = values.childElCls, // either '' or ' x-foo'
|
|
field = Ext.form.field.Base.prototype.getSubTplMarkup.apply(me, arguments);
|
|
|
|
return '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap' + childElCls + '" cellpadding="0" cellspacing="0">' +
|
|
'<tbody>' +
|
|
'<tr><td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell' + childElCls + '">' + field + '</td>' +
|
|
me.getTriggerMarkup() +
|
|
'</tbody></table>';
|
|
},
|
|
|
|
getTriggerMarkup: function() {
|
|
return this.getTpl('triggerTpl').apply(this.getTriggerData());
|
|
},
|
|
|
|
getTriggerData: function(){
|
|
var me = this,
|
|
hideTrigger = (me.readOnly || me.hideTrigger);
|
|
|
|
return {
|
|
triggerCls: Ext.baseCSSPrefix + 'trigger-cell',
|
|
triggerStyle: hideTrigger ? 'display:none' : '',
|
|
spinnerUpCls: !me.spinUpEnabled ? me.trigger1Cls + '-disabled': '',
|
|
spinnerDownCls: !me.spinDownEnabled ? me.trigger2Cls + '-disabled': ''
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Get the total width of the spinner button area.
|
|
* @return {Number} The total spinner button width
|
|
*/
|
|
getTriggerWidth: function() {
|
|
var me = this,
|
|
totalTriggerWidth = 0;
|
|
|
|
if (me.triggerWrap && !me.hideTrigger && !me.readOnly) {
|
|
totalTriggerWidth = me.triggerWidth;
|
|
}
|
|
return totalTriggerWidth;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handles the spinner up button clicks.
|
|
*/
|
|
onTrigger1Click: function() {
|
|
this.spinUp();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handles the spinner down button clicks.
|
|
*/
|
|
onTrigger2Click: function() {
|
|
this.spinDown();
|
|
},
|
|
|
|
// private
|
|
// Handle trigger mouse up gesture; refocuses the input element upon end of spin.
|
|
onTriggerWrapMouseup: function() {
|
|
this.inputEl.focus();
|
|
},
|
|
|
|
/**
|
|
* Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
|
|
* {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
|
|
* is false.
|
|
*/
|
|
spinUp: function() {
|
|
var me = this;
|
|
if (me.spinUpEnabled && !me.disabled) {
|
|
me.fireEvent('spin', me, 'up');
|
|
me.fireEvent('spinup', me);
|
|
me.onSpinUp();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
|
|
* {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
|
|
* is false.
|
|
*/
|
|
spinDown: function() {
|
|
var me = this;
|
|
if (me.spinDownEnabled && !me.disabled) {
|
|
me.fireEvent('spin', me, 'down');
|
|
me.fireEvent('spindown', me);
|
|
me.onSpinDown();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets whether the spinner up button is enabled.
|
|
* @param {Boolean} enabled true to enable the button, false to disable it.
|
|
*/
|
|
setSpinUpEnabled: function(enabled) {
|
|
var me = this,
|
|
wasEnabled = me.spinUpEnabled;
|
|
me.spinUpEnabled = enabled;
|
|
if (wasEnabled !== enabled && me.rendered) {
|
|
me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets whether the spinner down button is enabled.
|
|
* @param {Boolean} enabled true to enable the button, false to disable it.
|
|
*/
|
|
setSpinDownEnabled: function(enabled) {
|
|
var me = this,
|
|
wasEnabled = me.spinDownEnabled;
|
|
me.spinDownEnabled = enabled;
|
|
if (wasEnabled !== enabled && me.rendered) {
|
|
me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handles mousewheel events on the field
|
|
*/
|
|
onMouseWheel: function(e) {
|
|
var me = this,
|
|
delta;
|
|
if (me.hasFocus) {
|
|
delta = e.getWheelDelta();
|
|
if (delta > 0) {
|
|
me.spinUp();
|
|
} else if (delta < 0) {
|
|
me.spinDown();
|
|
}
|
|
e.stopEvent();
|
|
}
|
|
},
|
|
|
|
onDestroy: function() {
|
|
Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
|
|
this.callParent();
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,
|
|
* and numeric validation to limit the value to a range of valid numbers. The range of acceptable number
|
|
* values can be controlled by setting the {@link #minValue} and {@link #maxValue} configs, and fractional
|
|
* decimals can be disallowed by setting {@link #allowDecimals} to `false`.
|
|
*
|
|
* By default, the number field is also rendered with a set of up/down spinner buttons and has
|
|
* up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the
|
|
* {@link #step} value. To hide the spinner buttons set `{@link #hideTrigger hideTrigger}:true`; to disable
|
|
* the arrow key and mouse wheel handlers set `{@link #keyNavEnabled keyNavEnabled}:false` and
|
|
* `{@link #mouseWheelEnabled mouseWheelEnabled}:false`. See the example below.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'On The Wall',
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* items: [{
|
|
* xtype: 'numberfield',
|
|
* anchor: '100%',
|
|
* name: 'bottles',
|
|
* fieldLabel: 'Bottles of Beer',
|
|
* value: 99,
|
|
* maxValue: 99,
|
|
* minValue: 0
|
|
* }],
|
|
* buttons: [{
|
|
* text: 'Take one down, pass it around',
|
|
* handler: function() {
|
|
* this.up('form').down('[name=bottles]').spinDown();
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* # Removing UI Enhancements
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Personal Info',
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* items: [{
|
|
* xtype: 'numberfield',
|
|
* anchor: '100%',
|
|
* name: 'age',
|
|
* fieldLabel: 'Age',
|
|
* minValue: 0, //prevents negative numbers
|
|
*
|
|
* // Remove spinner buttons, and arrow key and mouse wheel listeners
|
|
* hideTrigger: true,
|
|
* keyNavEnabled: false,
|
|
* mouseWheelEnabled: false
|
|
* }]
|
|
* });
|
|
*
|
|
* # Using Step
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* renderTo: Ext.getBody(),
|
|
* title: 'Step',
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* items: [{
|
|
* xtype: 'numberfield',
|
|
* anchor: '100%',
|
|
* name: 'evens',
|
|
* fieldLabel: 'Even Numbers',
|
|
*
|
|
* // Set step so it skips every other number
|
|
* step: 2,
|
|
* value: 0,
|
|
*
|
|
* // Add change handler to force user-entered numbers to evens
|
|
* listeners: {
|
|
* change: function(field, value) {
|
|
* value = parseInt(value, 10);
|
|
* field.setValue(value + value % 2);
|
|
* }
|
|
* }
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Number', {
|
|
extend: Ext.form.field.Spinner ,
|
|
alias: 'widget.numberfield',
|
|
alternateClassName: ['Ext.form.NumberField', 'Ext.form.Number'],
|
|
|
|
/**
|
|
* @cfg {RegExp} stripCharsRe
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {RegExp} maskRe
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowExponential=true]
|
|
* Set to `false` to disallow Exponential number notation
|
|
*/
|
|
allowExponential: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowDecimals=true]
|
|
* False to disallow decimal values
|
|
*/
|
|
allowDecimals : true,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} decimalSeparator
|
|
* Character(s) to allow as the decimal separator
|
|
*/
|
|
decimalSeparator : '.',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {Boolean} [submitLocaleSeparator=true]
|
|
* False to ensure that the {@link #getSubmitValue} method strips
|
|
* always uses `.` as the separator, regardless of the {@link #decimalSeparator}
|
|
* configuration.
|
|
*/
|
|
submitLocaleSeparator: true,
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {Number} decimalPrecision
|
|
* The maximum precision to display after the decimal separator
|
|
*/
|
|
decimalPrecision : 2,
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Number} minValue
|
|
* The minimum allowed value. Will be used by the field's validation logic,
|
|
* and for {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}.
|
|
*
|
|
* Defaults to Number.NEGATIVE_INFINITY.
|
|
*/
|
|
minValue: Number.NEGATIVE_INFINITY,
|
|
|
|
/**
|
|
* @cfg {Number} maxValue
|
|
* The maximum allowed value. Will be used by the field's validation logic, and for
|
|
* {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}.
|
|
*
|
|
* Defaults to Number.MAX_VALUE.
|
|
*/
|
|
maxValue: Number.MAX_VALUE,
|
|
|
|
/**
|
|
* @cfg {Number} step
|
|
* Specifies a numeric interval by which the field's value will be incremented or decremented when the user invokes
|
|
* the spinner.
|
|
*/
|
|
step: 1,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} minText
|
|
* Error text to display if the minimum value validation fails.
|
|
*/
|
|
minText : 'The minimum value for this field is {0}',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} maxText
|
|
* Error text to display if the maximum value validation fails.
|
|
*/
|
|
maxText : 'The maximum value for this field is {0}',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} nanText
|
|
* Error text to display if the value is not a valid number. For example, this can happen if a valid character like
|
|
* '.' or '-' is left in the field with no number.
|
|
*/
|
|
nanText : '{0} is not a valid number',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} negativeText
|
|
* Error text to display if the value is negative and {@link #minValue} is set to 0. This is used instead of the
|
|
* {@link #minText} in that circumstance only.
|
|
*/
|
|
negativeText : 'The value cannot be negative',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} baseChars
|
|
* The base set of characters to evaluate as valid numbers.
|
|
*/
|
|
baseChars : '0123456789',
|
|
|
|
/**
|
|
* @cfg {Boolean} autoStripChars
|
|
* True to automatically strip not allowed characters from the field.
|
|
*/
|
|
autoStripChars: false,
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
me.setMinValue(me.minValue);
|
|
me.setMaxValue(me.maxValue);
|
|
},
|
|
|
|
/**
|
|
* Runs all of Number's validations and returns an array of any errors. Note that this first runs Text's
|
|
* validations, so the returned array is an amalgamation of all field errors. The additional validations run test
|
|
* that the value is a number, and that it is within the configured min and max values.
|
|
* @param {Object} [value] The value to get errors for (defaults to the current field value)
|
|
* @return {String[]} All validation errors for this field
|
|
*/
|
|
getErrors: function(value) {
|
|
var me = this,
|
|
errors = me.callParent(arguments),
|
|
format = Ext.String.format,
|
|
num;
|
|
|
|
value = Ext.isDefined(value) ? value : this.processRawValue(this.getRawValue());
|
|
|
|
if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
|
|
return errors;
|
|
}
|
|
|
|
value = String(value).replace(me.decimalSeparator, '.');
|
|
|
|
if(isNaN(value)){
|
|
errors.push(format(me.nanText, value));
|
|
}
|
|
|
|
num = me.parseValue(value);
|
|
|
|
if (me.minValue === 0 && num < 0) {
|
|
errors.push(this.negativeText);
|
|
}
|
|
else if (num < me.minValue) {
|
|
errors.push(format(me.minText, me.minValue));
|
|
}
|
|
|
|
if (num > me.maxValue) {
|
|
errors.push(format(me.maxText, me.maxValue));
|
|
}
|
|
|
|
|
|
return errors;
|
|
},
|
|
|
|
rawToValue: function(rawValue) {
|
|
var value = this.fixPrecision(this.parseValue(rawValue));
|
|
if (value === null) {
|
|
value = rawValue || null;
|
|
}
|
|
return value;
|
|
},
|
|
|
|
valueToRaw: function(value) {
|
|
var me = this,
|
|
decimalSeparator = me.decimalSeparator;
|
|
value = me.parseValue(value);
|
|
value = me.fixPrecision(value);
|
|
value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
|
|
value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
|
|
return value;
|
|
},
|
|
|
|
getSubmitValue: function() {
|
|
var me = this,
|
|
value = me.callParent();
|
|
|
|
if (!me.submitLocaleSeparator) {
|
|
value = value.replace(me.decimalSeparator, '.');
|
|
}
|
|
return value;
|
|
},
|
|
|
|
onChange: function() {
|
|
this.toggleSpinners();
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
toggleSpinners: function(){
|
|
var me = this,
|
|
value = me.getValue(),
|
|
valueIsNull = value === null,
|
|
enabled;
|
|
|
|
// If it's disabled, only allow it to be re-enabled if we are
|
|
// the ones who are disabling it.
|
|
if (me.spinUpEnabled || me.spinUpDisabledByToggle) {
|
|
enabled = valueIsNull || value < me.maxValue;
|
|
me.setSpinUpEnabled(enabled, true);
|
|
}
|
|
|
|
|
|
if (me.spinDownEnabled || me.spinDownDisabledByToggle) {
|
|
enabled = valueIsNull || value > me.minValue;
|
|
me.setSpinDownEnabled(enabled, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #minValue} with the new value.
|
|
* @param {Number} value The minimum value
|
|
*/
|
|
setMinValue : function(value) {
|
|
var me = this,
|
|
allowed;
|
|
|
|
me.minValue = Ext.Number.from(value, Number.NEGATIVE_INFINITY);
|
|
me.toggleSpinners();
|
|
|
|
// Build regexes for masking and stripping based on the configured options
|
|
if (me.disableKeyFilter !== true) {
|
|
allowed = me.baseChars + '';
|
|
|
|
if (me.allowExponential) {
|
|
allowed += me.decimalSeparator + 'e+-';
|
|
}
|
|
else {
|
|
if (me.allowDecimals) {
|
|
allowed += me.decimalSeparator;
|
|
}
|
|
if (me.minValue < 0) {
|
|
allowed += '-';
|
|
}
|
|
}
|
|
|
|
allowed = Ext.String.escapeRegex(allowed);
|
|
me.maskRe = new RegExp('[' + allowed + ']');
|
|
if (me.autoStripChars) {
|
|
me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi');
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #maxValue} with the new value.
|
|
* @param {Number} value The maximum value
|
|
*/
|
|
setMaxValue: function(value) {
|
|
this.maxValue = Ext.Number.from(value, Number.MAX_VALUE);
|
|
this.toggleSpinners();
|
|
},
|
|
|
|
// private
|
|
parseValue : function(value) {
|
|
value = parseFloat(String(value).replace(this.decimalSeparator, '.'));
|
|
return isNaN(value) ? null : value;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
fixPrecision : function(value) {
|
|
var me = this,
|
|
nan = isNaN(value),
|
|
precision = me.decimalPrecision;
|
|
|
|
if (nan || !value) {
|
|
return nan ? '' : value;
|
|
} else if (!me.allowDecimals || precision <= 0) {
|
|
precision = 0;
|
|
}
|
|
|
|
return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
|
|
},
|
|
|
|
beforeBlur : function() {
|
|
var me = this,
|
|
v = me.parseValue(me.getRawValue());
|
|
|
|
if (!Ext.isEmpty(v)) {
|
|
me.setValue(v);
|
|
}
|
|
},
|
|
|
|
setSpinUpEnabled: function(enabled, /* private */ internal){
|
|
this.callParent(arguments);
|
|
if (!internal) {
|
|
delete this.spinUpDisabledByToggle;
|
|
} else {
|
|
this.spinUpDisabledByToggle = !enabled;
|
|
}
|
|
},
|
|
|
|
onSpinUp: function() {
|
|
var me = this;
|
|
|
|
if (!me.readOnly) {
|
|
me.setSpinValue(Ext.Number.constrain(me.getValue() + me.step, me.minValue, me.maxValue));
|
|
}
|
|
},
|
|
|
|
setSpinDownEnabled: function(enabled, /* private */ internal){
|
|
this.callParent(arguments);
|
|
if (!internal) {
|
|
delete this.spinDownDisabledByToggle;
|
|
} else {
|
|
this.spinDownDisabledByToggle = !enabled;
|
|
}
|
|
},
|
|
|
|
onSpinDown: function() {
|
|
var me = this;
|
|
|
|
if (!me.readOnly) {
|
|
me.setSpinValue(Ext.Number.constrain(me.getValue() - me.step, me.minValue, me.maxValue));
|
|
}
|
|
},
|
|
|
|
setSpinValue: function(value) {
|
|
var me = this,
|
|
len;
|
|
|
|
if (me.enforceMaxLength) {
|
|
// We need to round the value here, otherwise we could end up with a
|
|
// very long number (think 0.1 + 0.2)
|
|
if (me.fixPrecision(value).toString().length > me.maxLength) {
|
|
return;
|
|
}
|
|
}
|
|
me.setValue(value);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* As the number of records increases, the time required for the browser to render them increases. Paging is used to
|
|
* reduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the
|
|
* available screen area, vertical scrollbars will be added.
|
|
*
|
|
* Paging is typically handled on the server side (see exception below). The client sends parameters to the server side,
|
|
* which the server needs to interpret and then respond with the appropriate data.
|
|
*
|
|
* Ext.toolbar.Paging is a specialized toolbar that is bound to a {@link Ext.data.Store} and provides automatic
|
|
* paging control. This Component {@link Ext.data.Store#method-load load}s blocks of data into the {@link #store} by passing
|
|
* parameters used for paging criteria.
|
|
*
|
|
* {@img Ext.toolbar.Paging/Ext.toolbar.Paging.png Ext.toolbar.Paging component}
|
|
*
|
|
* Paging Toolbar is typically used as one of the Grid's toolbars:
|
|
*
|
|
* @example
|
|
* var itemsPerPage = 2; // set the number of items you want per page
|
|
*
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* id:'simpsonsStore',
|
|
* autoLoad: false,
|
|
* fields:['name', 'email', 'phone'],
|
|
* pageSize: itemsPerPage, // items per page
|
|
* proxy: {
|
|
* type: 'ajax',
|
|
* url: 'pagingstore.js', // url that will load data with respect to start and limit params
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'items',
|
|
* totalProperty: 'total'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* // specify segment of data you want to load using params
|
|
* store.load({
|
|
* params:{
|
|
* start:0,
|
|
* limit: itemsPerPage
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Simpsons',
|
|
* store: store,
|
|
* columns: [
|
|
* { header: 'Name', dataIndex: 'name' },
|
|
* { header: 'Email', dataIndex: 'email', flex: 1 },
|
|
* { header: 'Phone', dataIndex: 'phone' }
|
|
* ],
|
|
* width: 400,
|
|
* height: 125,
|
|
* dockedItems: [{
|
|
* xtype: 'pagingtoolbar',
|
|
* store: store, // same store GridPanel is using
|
|
* dock: 'bottom',
|
|
* displayInfo: true
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* To use paging, you need to set a pageSize configuration on the Store, and pass the paging requirements to
|
|
* the server when the store is first loaded.
|
|
*
|
|
* store.load({
|
|
* params: {
|
|
* // specify params for the first page load if using paging
|
|
* start: 0,
|
|
* limit: myPageSize,
|
|
* // other params
|
|
* foo: 'bar'
|
|
* }
|
|
* });
|
|
*
|
|
* If using {@link Ext.data.Store#autoLoad store's autoLoad} configuration:
|
|
*
|
|
* var myStore = Ext.create('Ext.data.Store', {
|
|
* {@link Ext.data.Store#autoLoad autoLoad}: {start: 0, limit: 25},
|
|
* ...
|
|
* });
|
|
*
|
|
* The packet sent back from the server would have this form:
|
|
*
|
|
* {
|
|
* "success": true,
|
|
* "results": 2000,
|
|
* "rows": [ // ***Note:** this must be an Array
|
|
* { "id": 1, "name": "Bill", "occupation": "Gardener" },
|
|
* { "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
|
|
* ...
|
|
* { "id": 25, "name": "Sue", "occupation": "Botanist" }
|
|
* ]
|
|
* }
|
|
*
|
|
* ## Paging with Local Data
|
|
*
|
|
* Paging can also be accomplished with local data using extensions:
|
|
*
|
|
* - [Ext.ux.data.PagingStore][1]
|
|
* - Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
|
|
*
|
|
* [1]: http://sencha.com/forum/showthread.php?t=71532
|
|
*/
|
|
Ext.define('Ext.toolbar.Paging', {
|
|
extend: Ext.toolbar.Toolbar ,
|
|
alias: 'widget.pagingtoolbar',
|
|
alternateClassName: 'Ext.PagingToolbar',
|
|
|
|
mixins: {
|
|
bindable: Ext.util.Bindable
|
|
},
|
|
/**
|
|
* @cfg {Ext.data.Store} store (required)
|
|
* The {@link Ext.data.Store} the paging toolbar should use as its data source.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} displayInfo
|
|
* true to display the displayMsg
|
|
*/
|
|
displayInfo: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} prependButtons
|
|
* true to insert any configured items _before_ the paging buttons.
|
|
*/
|
|
prependButtons: false,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} displayMsg
|
|
* The paging status message to display. Note that this string is
|
|
* formatted using the braced numbers {0}-{2} as tokens that are replaced by the values for start, end and total
|
|
* respectively. These tokens should be preserved when overriding this string if showing those values is desired.
|
|
*/
|
|
displayMsg : 'Displaying {0} - {1} of {2}',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} emptyMsg
|
|
* The message to display when no records are found.
|
|
*/
|
|
emptyMsg : 'No data to display',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} beforePageText
|
|
* The text displayed before the input item.
|
|
*/
|
|
beforePageText : 'Page',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} afterPageText
|
|
* Customizable piece of the default paging text. Note that this string is formatted using
|
|
* {0} as a token that is replaced by the number of total pages. This token should be preserved when overriding this
|
|
* string if showing the total page count is desired.
|
|
*/
|
|
afterPageText : 'of {0}',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} firstText
|
|
* The quicktip text displayed for the first page button.
|
|
* **Note**: quick tips must be initialized for the quicktip to show.
|
|
*/
|
|
firstText : 'First Page',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} prevText
|
|
* The quicktip text displayed for the previous page button.
|
|
* **Note**: quick tips must be initialized for the quicktip to show.
|
|
*/
|
|
prevText : 'Previous Page',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} nextText
|
|
* The quicktip text displayed for the next page button.
|
|
* **Note**: quick tips must be initialized for the quicktip to show.
|
|
*/
|
|
nextText : 'Next Page',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} lastText
|
|
* The quicktip text displayed for the last page button.
|
|
* **Note**: quick tips must be initialized for the quicktip to show.
|
|
*/
|
|
lastText : 'Last Page',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} refreshText
|
|
* The quicktip text displayed for the Refresh button.
|
|
* **Note**: quick tips must be initialized for the quicktip to show.
|
|
*/
|
|
refreshText : 'Refresh',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Number} inputItemWidth
|
|
* The width in pixels of the input field used to display and change the current page number.
|
|
*/
|
|
inputItemWidth : 30,
|
|
|
|
/**
|
|
* Gets the standard paging items in the toolbar
|
|
* @private
|
|
*/
|
|
getPagingItems: function() {
|
|
var me = this;
|
|
|
|
return [{
|
|
itemId: 'first',
|
|
tooltip: me.firstText,
|
|
overflowText: me.firstText,
|
|
iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
|
|
disabled: true,
|
|
handler: me.moveFirst,
|
|
scope: me
|
|
},{
|
|
itemId: 'prev',
|
|
tooltip: me.prevText,
|
|
overflowText: me.prevText,
|
|
iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
|
|
disabled: true,
|
|
handler: me.movePrevious,
|
|
scope: me
|
|
},
|
|
'-',
|
|
me.beforePageText,
|
|
{
|
|
xtype: 'numberfield',
|
|
itemId: 'inputItem',
|
|
name: 'inputItem',
|
|
cls: Ext.baseCSSPrefix + 'tbar-page-number',
|
|
allowDecimals: false,
|
|
minValue: 1,
|
|
hideTrigger: true,
|
|
enableKeyEvents: true,
|
|
keyNavEnabled: false,
|
|
selectOnFocus: true,
|
|
submitValue: false,
|
|
// mark it as not a field so the form will not catch it when getting fields
|
|
isFormField: false,
|
|
width: me.inputItemWidth,
|
|
margins: '-1 2 3 2',
|
|
listeners: {
|
|
scope: me,
|
|
keydown: me.onPagingKeyDown,
|
|
blur: me.onPagingBlur
|
|
}
|
|
},{
|
|
xtype: 'tbtext',
|
|
itemId: 'afterTextItem',
|
|
text: Ext.String.format(me.afterPageText, 1)
|
|
},
|
|
'-',
|
|
{
|
|
itemId: 'next',
|
|
tooltip: me.nextText,
|
|
overflowText: me.nextText,
|
|
iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
|
|
disabled: true,
|
|
handler: me.moveNext,
|
|
scope: me
|
|
},{
|
|
itemId: 'last',
|
|
tooltip: me.lastText,
|
|
overflowText: me.lastText,
|
|
iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
|
|
disabled: true,
|
|
handler: me.moveLast,
|
|
scope: me
|
|
},
|
|
'-',
|
|
{
|
|
itemId: 'refresh',
|
|
tooltip: me.refreshText,
|
|
overflowText: me.refreshText,
|
|
iconCls: Ext.baseCSSPrefix + 'tbar-loading',
|
|
handler: me.doRefresh,
|
|
scope: me
|
|
}];
|
|
},
|
|
|
|
initComponent : function(){
|
|
var me = this,
|
|
pagingItems = me.getPagingItems(),
|
|
userItems = me.items || me.buttons || [];
|
|
|
|
if (me.prependButtons) {
|
|
me.items = userItems.concat(pagingItems);
|
|
} else {
|
|
me.items = pagingItems.concat(userItems);
|
|
}
|
|
delete me.buttons;
|
|
|
|
if (me.displayInfo) {
|
|
me.items.push('->');
|
|
me.items.push({xtype: 'tbtext', itemId: 'displayItem'});
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event change
|
|
* Fires after the active page has been changed.
|
|
* @param {Ext.toolbar.Paging} this
|
|
* @param {Object} pageData An object that has these properties:
|
|
*
|
|
* - `total` : Number
|
|
*
|
|
* The total number of records in the dataset as returned by the server
|
|
*
|
|
* - `currentPage` : Number
|
|
*
|
|
* The current page number
|
|
*
|
|
* - `pageCount` : Number
|
|
*
|
|
* The total number of pages (calculated from the total number of records in the dataset as returned by the
|
|
* server and the current {@link Ext.data.Store#pageSize pageSize})
|
|
*
|
|
* - `toRecord` : Number
|
|
*
|
|
* The starting record index for the current page
|
|
*
|
|
* - `fromRecord` : Number
|
|
*
|
|
* The ending record index for the current page
|
|
*/
|
|
'change',
|
|
|
|
/**
|
|
* @event beforechange
|
|
* Fires just before the active page is changed. Return false to prevent the active page from being changed.
|
|
* @param {Ext.toolbar.Paging} this
|
|
* @param {Number} page The page number that will be loaded on change
|
|
*/
|
|
'beforechange'
|
|
);
|
|
me.on('beforerender', me.onLoad, me, {single: true});
|
|
|
|
me.bindStore(me.store || 'ext-empty-store', true);
|
|
},
|
|
// @private
|
|
updateInfo : function(){
|
|
var me = this,
|
|
displayItem = me.child('#displayItem'),
|
|
store = me.store,
|
|
pageData = me.getPageData(),
|
|
count, msg;
|
|
|
|
if (displayItem) {
|
|
count = store.getCount();
|
|
if (count === 0) {
|
|
msg = me.emptyMsg;
|
|
} else {
|
|
msg = Ext.String.format(
|
|
me.displayMsg,
|
|
pageData.fromRecord,
|
|
pageData.toRecord,
|
|
pageData.total
|
|
);
|
|
}
|
|
displayItem.setText(msg);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onLoad : function(){
|
|
var me = this,
|
|
pageData,
|
|
currPage,
|
|
pageCount,
|
|
afterText,
|
|
count,
|
|
isEmpty,
|
|
item;
|
|
|
|
count = me.store.getCount();
|
|
isEmpty = count === 0;
|
|
if (!isEmpty) {
|
|
pageData = me.getPageData();
|
|
currPage = pageData.currentPage;
|
|
pageCount = pageData.pageCount;
|
|
afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
|
|
} else {
|
|
currPage = 0;
|
|
pageCount = 0;
|
|
afterText = Ext.String.format(me.afterPageText, 0);
|
|
}
|
|
|
|
Ext.suspendLayouts();
|
|
item = me.child('#afterTextItem');
|
|
if (item) {
|
|
item.setText(afterText);
|
|
}
|
|
item = me.getInputItem();
|
|
if (item) {
|
|
item.setDisabled(isEmpty).setValue(currPage);
|
|
}
|
|
me.setChildDisabled('#first', currPage === 1 || isEmpty);
|
|
me.setChildDisabled('#prev', currPage === 1 || isEmpty);
|
|
me.setChildDisabled('#next', currPage === pageCount || isEmpty);
|
|
me.setChildDisabled('#last', currPage === pageCount || isEmpty);
|
|
me.setChildDisabled('#refresh', false);
|
|
me.updateInfo();
|
|
Ext.resumeLayouts(true);
|
|
|
|
if (me.rendered) {
|
|
me.fireEvent('change', me, pageData);
|
|
}
|
|
},
|
|
|
|
setChildDisabled: function(selector, disabled){
|
|
var item = this.child(selector);
|
|
if (item) {
|
|
item.setDisabled(disabled);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getPageData : function(){
|
|
var store = this.store,
|
|
totalCount = store.getTotalCount();
|
|
|
|
return {
|
|
total : totalCount,
|
|
currentPage : store.currentPage,
|
|
pageCount: Math.ceil(totalCount / store.pageSize),
|
|
fromRecord: ((store.currentPage - 1) * store.pageSize) + 1,
|
|
toRecord: Math.min(store.currentPage * store.pageSize, totalCount)
|
|
|
|
};
|
|
},
|
|
|
|
// @private
|
|
onLoadError : function(){
|
|
if (!this.rendered) {
|
|
return;
|
|
}
|
|
this.setChildDisabled('#refresh', false);
|
|
},
|
|
|
|
getInputItem: function(){
|
|
return this.child('#inputItem');
|
|
},
|
|
|
|
// @private
|
|
readPageFromInput : function(pageData){
|
|
var inputItem = this.getInputItem(),
|
|
pageNum = false,
|
|
v;
|
|
|
|
if (inputItem) {
|
|
v = inputItem.getValue();
|
|
pageNum = parseInt(v, 10);
|
|
if (!v || isNaN(pageNum)) {
|
|
inputItem.setValue(pageData.currentPage);
|
|
return false;
|
|
}
|
|
}
|
|
return pageNum;
|
|
},
|
|
|
|
onPagingFocus : function(){
|
|
var inputItem = this.getInputItem();
|
|
if (inputItem) {
|
|
inputItem.select();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onPagingBlur : function(e){
|
|
var inputItem = this.getInputItem(),
|
|
curPage;
|
|
|
|
if (inputItem) {
|
|
curPage = this.getPageData().currentPage;
|
|
inputItem.setValue(curPage);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onPagingKeyDown : function(field, e){
|
|
var me = this,
|
|
k = e.getKey(),
|
|
pageData = me.getPageData(),
|
|
increment = e.shiftKey ? 10 : 1,
|
|
pageNum;
|
|
|
|
if (k == e.RETURN) {
|
|
e.stopEvent();
|
|
pageNum = me.readPageFromInput(pageData);
|
|
if (pageNum !== false) {
|
|
pageNum = Math.min(Math.max(1, pageNum), pageData.pageCount);
|
|
if(me.fireEvent('beforechange', me, pageNum) !== false){
|
|
me.store.loadPage(pageNum);
|
|
}
|
|
}
|
|
} else if (k == e.HOME || k == e.END) {
|
|
e.stopEvent();
|
|
pageNum = k == e.HOME ? 1 : pageData.pageCount;
|
|
field.setValue(pageNum);
|
|
} else if (k == e.UP || k == e.PAGE_UP || k == e.DOWN || k == e.PAGE_DOWN) {
|
|
e.stopEvent();
|
|
pageNum = me.readPageFromInput(pageData);
|
|
if (pageNum) {
|
|
if (k == e.DOWN || k == e.PAGE_DOWN) {
|
|
increment *= -1;
|
|
}
|
|
pageNum += increment;
|
|
if (pageNum >= 1 && pageNum <= pageData.pageCount) {
|
|
field.setValue(pageNum);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
beforeLoad : function(){
|
|
if (this.rendered) {
|
|
this.setChildDisabled('#refresh', true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Move to the first page, has the same effect as clicking the 'first' button.
|
|
*/
|
|
moveFirst : function(){
|
|
if (this.fireEvent('beforechange', this, 1) !== false){
|
|
this.store.loadPage(1);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Move to the previous page, has the same effect as clicking the 'previous' button.
|
|
*/
|
|
movePrevious : function(){
|
|
var me = this,
|
|
prev = me.store.currentPage - 1;
|
|
|
|
if (prev > 0) {
|
|
if (me.fireEvent('beforechange', me, prev) !== false) {
|
|
me.store.previousPage();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Move to the next page, has the same effect as clicking the 'next' button.
|
|
*/
|
|
moveNext : function(){
|
|
var me = this,
|
|
total = me.getPageData().pageCount,
|
|
next = me.store.currentPage + 1;
|
|
|
|
if (next <= total) {
|
|
if (me.fireEvent('beforechange', me, next) !== false) {
|
|
me.store.nextPage();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Move to the last page, has the same effect as clicking the 'last' button.
|
|
*/
|
|
moveLast : function(){
|
|
var me = this,
|
|
last = me.getPageData().pageCount;
|
|
|
|
if (me.fireEvent('beforechange', me, last) !== false) {
|
|
me.store.loadPage(last);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Refresh the current page, has the same effect as clicking the 'refresh' button.
|
|
*/
|
|
doRefresh : function(){
|
|
var me = this,
|
|
current = me.store.currentPage;
|
|
|
|
if (me.fireEvent('beforechange', me, current) !== false) {
|
|
me.store.loadPage(current);
|
|
}
|
|
},
|
|
|
|
getStoreListeners: function() {
|
|
return {
|
|
beforeload: this.beforeLoad,
|
|
load: this.onLoad,
|
|
exception: this.onLoadError
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Unbinds the paging toolbar from the specified {@link Ext.data.Store} **(deprecated)**
|
|
* @param {Ext.data.Store} store The data store to unbind
|
|
*/
|
|
unbind : function(store){
|
|
this.bindStore(null);
|
|
},
|
|
|
|
/**
|
|
* Binds the paging toolbar to the specified {@link Ext.data.Store} **(deprecated)**
|
|
* @param {Ext.data.Store} store The data store to bind
|
|
*/
|
|
bind : function(store){
|
|
this.bindStore(store);
|
|
},
|
|
|
|
// @private
|
|
onDestroy : function(){
|
|
this.unbind();
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* An internally used DataView for {@link Ext.form.field.ComboBox ComboBox}.
|
|
*/
|
|
Ext.define('Ext.view.BoundList', {
|
|
extend: Ext.view.View ,
|
|
alias: 'widget.boundlist',
|
|
alternateClassName: 'Ext.BoundList',
|
|
|
|
|
|
mixins: {
|
|
queryable: Ext.Queryable
|
|
},
|
|
|
|
/**
|
|
* @cfg {Number} [pageSize=0]
|
|
* If greater than `0`, a {@link Ext.toolbar.Paging} is displayed at the bottom of the list and store
|
|
* queries will execute with page {@link Ext.data.Operation#start start} and
|
|
* {@link Ext.data.Operation#limit limit} parameters.
|
|
*/
|
|
pageSize: 0,
|
|
|
|
/**
|
|
* @cfg {String} [displayField=""]
|
|
* The field from the store to show in the view.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.toolbar.Paging} pagingToolbar
|
|
* A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
|
|
* than zero and the BoundList has been rendered.
|
|
*/
|
|
|
|
// private overrides
|
|
baseCls: Ext.baseCSSPrefix + 'boundlist',
|
|
itemCls: Ext.baseCSSPrefix + 'boundlist-item',
|
|
listItemCls: '',
|
|
shadow: false,
|
|
trackOver: true,
|
|
refreshed: 0,
|
|
|
|
// This Component is used as a popup, not part of a complex layout. Display data immediately.
|
|
deferInitialRefresh: false,
|
|
|
|
componentLayout: 'boundlist',
|
|
|
|
childEls: [
|
|
'listEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<div id="{id}-listEl" class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '" style="overflow:auto"></div>',
|
|
'{%',
|
|
'var me=values.$comp, pagingToolbar=me.pagingToolbar;',
|
|
'if (pagingToolbar) {',
|
|
'pagingToolbar.ownerLayout = me.componentLayout;',
|
|
'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
|
|
'}',
|
|
'%}',
|
|
{
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
/**
|
|
* @cfg {String/Ext.XTemplate} tpl
|
|
* A String or Ext.XTemplate instance to apply to inner template.
|
|
*
|
|
* {@link Ext.view.BoundList} is used for the dropdown list of {@link Ext.form.field.ComboBox}.
|
|
* To customize the template you can do this:
|
|
*
|
|
* Ext.create('Ext.form.field.ComboBox', {
|
|
* fieldLabel : 'State',
|
|
* queryMode : 'local',
|
|
* displayField : 'text',
|
|
* valueField : 'abbr',
|
|
* store : Ext.create('StateStore', {
|
|
* fields : ['abbr', 'text'],
|
|
* data : [
|
|
* {"abbr":"AL", "name":"Alabama"},
|
|
* {"abbr":"AK", "name":"Alaska"},
|
|
* {"abbr":"AZ", "name":"Arizona"}
|
|
* //...
|
|
* ]
|
|
* }),
|
|
* listConfig : {
|
|
* tpl : '<tpl for="."><div class="x-boundlist-item">{abbr}</div></tpl>'
|
|
* }
|
|
* });
|
|
*
|
|
* Defaults to:
|
|
*
|
|
* Ext.create('Ext.XTemplate',
|
|
* '<ul><tpl for=".">',
|
|
* '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
|
|
* '</tpl></ul>'
|
|
* );
|
|
*
|
|
*/
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
baseCls = me.baseCls,
|
|
itemCls = me.itemCls;
|
|
|
|
me.selectedItemCls = baseCls + '-selected';
|
|
if (me.trackOver) {
|
|
me.overItemCls = baseCls + '-item-over';
|
|
}
|
|
me.itemSelector = "." + itemCls;
|
|
|
|
if (me.floating) {
|
|
me.addCls(baseCls + '-floating');
|
|
}
|
|
|
|
if (!me.tpl) {
|
|
// should be setting aria-posinset based on entire set of data
|
|
// not filtered set
|
|
me.tpl = new Ext.XTemplate(
|
|
'<ul class="' + Ext.plainListCls + '"><tpl for=".">',
|
|
'<li role="option" unselectable="on" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
|
|
'</tpl></ul>'
|
|
);
|
|
} else if (!me.tpl.isTemplate) {
|
|
me.tpl = new Ext.XTemplate(me.tpl);
|
|
}
|
|
|
|
if (me.pageSize) {
|
|
me.pagingToolbar = me.createPagingToolbar();
|
|
}
|
|
|
|
me.callParent();
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If there's a Menu among our ancestors, then add the menu class.
|
|
// This is so that the MenuManager does not see a mousedown in this Component as a document mousedown, outside the Menu
|
|
if (me.up('menu')) {
|
|
me.addCls(Ext.baseCSSPrefix + 'menu');
|
|
}
|
|
},
|
|
|
|
getRefOwner: function() {
|
|
return this.pickerField || this.callParent();
|
|
},
|
|
|
|
getRefItems: function() {
|
|
return this.pagingToolbar ? [ this.pagingToolbar ] : [];
|
|
},
|
|
|
|
createPagingToolbar: function() {
|
|
return Ext.widget('pagingtoolbar', {
|
|
id: this.id + '-paging-toolbar',
|
|
pageSize: this.pageSize,
|
|
store: this.dataSource,
|
|
border: false,
|
|
ownerCt: this,
|
|
ownerLayout: this.getComponentLayout()
|
|
});
|
|
},
|
|
|
|
// Do the job of a container layout at this point even though we are not a Container.
|
|
// TODO: Refactor as a Container.
|
|
finishRenderChildren: function () {
|
|
var toolbar = this.pagingToolbar;
|
|
|
|
this.callParent(arguments);
|
|
|
|
if (toolbar) {
|
|
toolbar.finishRender();
|
|
}
|
|
},
|
|
|
|
refresh: function(){
|
|
var me = this,
|
|
tpl = me.tpl,
|
|
toolbar = me.pagingToolbar,
|
|
rendered = me.rendered;
|
|
|
|
// Allow access to the context for XTemplate scriptlets
|
|
tpl.field = me.pickerField;
|
|
tpl.store = me.store;
|
|
me.callParent();
|
|
tpl.field = tpl.store = null;
|
|
|
|
// The view removes the targetEl from the DOM before updating the template
|
|
// Ensure the toolbar goes to the end
|
|
if (rendered && toolbar && toolbar.rendered && !me.preserveScrollOnRefresh) {
|
|
me.el.appendChild(toolbar.el);
|
|
}
|
|
|
|
// IE6 strict can sometimes have repaint issues when showing
|
|
// the list from a remote data source
|
|
if (rendered && Ext.isIE6 && Ext.isStrict) {
|
|
me.listEl.repaint();
|
|
}
|
|
},
|
|
|
|
bindStore : function(store, initial) {
|
|
var toolbar = this.pagingToolbar;
|
|
|
|
this.callParent(arguments);
|
|
if (toolbar) {
|
|
toolbar.bindStore(store, initial);
|
|
}
|
|
},
|
|
|
|
getTargetEl: function() {
|
|
return this.listEl || this.el;
|
|
},
|
|
|
|
/**
|
|
* A method that returns the inner template for displaying items in the list.
|
|
* This method is useful to override when using a more complex display value, for example
|
|
* inserting an icon along with the text.
|
|
*
|
|
* The XTemplate is created with a reference to the owning form field in the `field` property to provide access
|
|
* to context. For example to highlight the currently typed value, the getInnerTpl may be configured into a
|
|
* ComboBox as part of the {@link Ext.form.field.ComboBox#listConfig listConfig}:
|
|
*
|
|
* listConfig: {
|
|
* getInnerTpl: function() {
|
|
* return '{[values.name.replace(this.field.getRawValue(), "<b>" + this.field.getRawValue() + "</b>")]}';
|
|
* }
|
|
* }
|
|
* @param {String} displayField The {@link #displayField} for the BoundList.
|
|
* @return {String} The inner template
|
|
*/
|
|
getInnerTpl: function(displayField) {
|
|
return '{' + displayField + '}';
|
|
},
|
|
|
|
onDestroy: function() {
|
|
Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A specialized {@link Ext.util.KeyNav} implementation for navigating a {@link Ext.view.BoundList} using
|
|
* the keyboard. The up, down, pageup, pagedown, home, and end keys move the active highlight
|
|
* through the list. The enter key invokes the selection model's select action using the highlighted item.
|
|
*/
|
|
Ext.define('Ext.view.BoundListKeyNav', {
|
|
extend: Ext.util.KeyNav ,
|
|
|
|
|
|
/**
|
|
* @cfg {Ext.view.BoundList} boundList (required)
|
|
* The {@link Ext.view.BoundList} instance for which key navigation will be managed.
|
|
*/
|
|
|
|
constructor: function(el, config) {
|
|
var me = this;
|
|
me.boundList = config.boundList;
|
|
me.callParent([el, Ext.apply({}, config, me.defaultHandlers)]);
|
|
},
|
|
|
|
defaultHandlers: {
|
|
up: function() {
|
|
var me = this,
|
|
boundList = me.boundList,
|
|
allItems = boundList.all,
|
|
oldItem = boundList.highlightedItem,
|
|
oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
|
|
newItemIdx = oldItemIdx > 0 ? oldItemIdx - 1 : allItems.getCount() - 1; //wraps around
|
|
me.highlightAt(newItemIdx);
|
|
},
|
|
|
|
down: function() {
|
|
var me = this,
|
|
boundList = me.boundList,
|
|
allItems = boundList.all,
|
|
oldItem = boundList.highlightedItem,
|
|
oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
|
|
newItemIdx = oldItemIdx < allItems.getCount() - 1 ? oldItemIdx + 1 : 0; //wraps around
|
|
me.highlightAt(newItemIdx);
|
|
},
|
|
|
|
pageup: function() {
|
|
//TODO
|
|
},
|
|
|
|
pagedown: function() {
|
|
//TODO
|
|
},
|
|
|
|
home: function() {
|
|
this.highlightAt(0);
|
|
},
|
|
|
|
end: function() {
|
|
var me = this;
|
|
me.highlightAt(me.boundList.all.getCount() - 1);
|
|
},
|
|
|
|
enter: function(e) {
|
|
this.selectHighlighted(e);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Highlights the item at the given index.
|
|
* @param {Number} index
|
|
*/
|
|
highlightAt: function(index) {
|
|
var boundList = this.boundList,
|
|
item = boundList.all.item(index);
|
|
if (item) {
|
|
item = item.dom;
|
|
boundList.highlightItem(item);
|
|
boundList.getTargetEl().scrollChildIntoView(item, false);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Triggers selection of the currently highlighted item according to the behavior of
|
|
* the configured SelectionModel.
|
|
*/
|
|
selectHighlighted: function(e) {
|
|
var me = this,
|
|
boundList = me.boundList,
|
|
highlighted = boundList.highlightedItem,
|
|
selModel = boundList.getSelectionModel();
|
|
if (highlighted) {
|
|
selModel.selectWithEvent(boundList.getRecord(highlighted), e);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Layout class for {@link Ext.form.field.ComboBox} fields. Handles sizing the input field.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.ComboBox', {
|
|
extend: Ext.layout.component.field.Trigger ,
|
|
alias: 'layout.combobox',
|
|
|
|
|
|
type: 'combobox',
|
|
|
|
startingWidth: null,
|
|
|
|
getTextWidth: function () {
|
|
var me = this,
|
|
owner = me.owner,
|
|
store = owner.store,
|
|
field = owner.displayField,
|
|
storeLn = store.data.length,
|
|
value = '',
|
|
i = 0, n = 0, ln, item, width;
|
|
|
|
for (; i < storeLn; i++) {
|
|
item = store.getAt(i).data[field];
|
|
ln = item.length;
|
|
// compare the current item's length with the current longest length and store the value
|
|
if (ln > n) {
|
|
n = ln;
|
|
value = item;
|
|
}
|
|
}
|
|
|
|
width = Math.max(me.callParent(arguments), owner.inputEl.getTextWidth(value + owner.growAppend));
|
|
|
|
// it's important to know the starting width else the inputEl could be resized smaller than the boundlist
|
|
// NOTE that when removing items from the store that the startingWidth needs to be recalculated
|
|
if (!me.startingWidth || owner.removingRecords) {
|
|
me.startingWidth = width;
|
|
|
|
// also, if the width is less than growMin reset the default boundlist width
|
|
// or it will appear wider than the component if the trigger is clicked
|
|
if (width < owner.growMin) {
|
|
owner.defaultListConfig.minWidth = owner.growMin;
|
|
}
|
|
|
|
owner.removingRecords = false;
|
|
}
|
|
|
|
// only resize if the new width is greater than the starting width
|
|
return (width < me.startingWidth) ? me.startingWidth : width;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* A combobox control with support for autocomplete, remote loading, and many other features.
|
|
*
|
|
* A ComboBox is like a combination of a traditional HTML text `<input>` field and a `<select>`
|
|
* field; the user is able to type freely into the field, and/or pick values from a dropdown selection
|
|
* list. The user can input any value by default, even if it does not appear in the selection list;
|
|
* to prevent free-form values and restrict them to items in the list, set {@link #forceSelection} to `true`.
|
|
*
|
|
* The selection list's options are populated from any {@link Ext.data.Store}, including remote
|
|
* stores. The data items in the store are mapped to each option's displayed text and backing value via
|
|
* the {@link #valueField} and {@link #displayField} configurations, respectively.
|
|
*
|
|
* If your store is not remote, i.e. it depends only on local data and is loaded up front, you should be
|
|
* sure to set the {@link #queryMode} to `'local'`, as this will improve responsiveness for the user.
|
|
*
|
|
* # Example usage:
|
|
*
|
|
* @example
|
|
* // The data store containing the list of states
|
|
* var states = Ext.create('Ext.data.Store', {
|
|
* fields: ['abbr', 'name'],
|
|
* data : [
|
|
* {"abbr":"AL", "name":"Alabama"},
|
|
* {"abbr":"AK", "name":"Alaska"},
|
|
* {"abbr":"AZ", "name":"Arizona"}
|
|
* //...
|
|
* ]
|
|
* });
|
|
*
|
|
* // Create the combo box, attached to the states data store
|
|
* Ext.create('Ext.form.ComboBox', {
|
|
* fieldLabel: 'Choose State',
|
|
* store: states,
|
|
* queryMode: 'local',
|
|
* displayField: 'name',
|
|
* valueField: 'abbr',
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* # Events
|
|
*
|
|
* To do something when something in ComboBox is selected, configure the select event:
|
|
*
|
|
* var cb = Ext.create('Ext.form.ComboBox', {
|
|
* // all of your config options
|
|
* listeners:{
|
|
* scope: yourScope,
|
|
* 'select': yourFunction
|
|
* }
|
|
* });
|
|
*
|
|
* // Alternatively, you can assign events after the object is created:
|
|
* var cb = new Ext.form.field.ComboBox(yourOptions);
|
|
* cb.on('select', yourFunction, yourScope);
|
|
*
|
|
* # Multiple Selection
|
|
*
|
|
* ComboBox also allows selection of multiple items from the list; to enable multi-selection set the
|
|
* {@link #multiSelect} config to `true`.
|
|
*
|
|
* # Filtered Stores
|
|
*
|
|
* If you have a local store that is already filtered, you can use the {@link #lastQuery} config option
|
|
* to prevent the store from having the filter being cleared on first expand.
|
|
*
|
|
* ## Customized combobox
|
|
*
|
|
* Both the text shown in dropdown menu and text field can be easily customized:
|
|
*
|
|
* @example
|
|
* var states = Ext.create('Ext.data.Store', {
|
|
* fields: ['abbr', 'name'],
|
|
* data : [
|
|
* {"abbr":"AL", "name":"Alabama"},
|
|
* {"abbr":"AK", "name":"Alaska"},
|
|
* {"abbr":"AZ", "name":"Arizona"}
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.form.ComboBox', {
|
|
* fieldLabel: 'Choose State',
|
|
* store: states,
|
|
* queryMode: 'local',
|
|
* valueField: 'abbr',
|
|
* renderTo: Ext.getBody(),
|
|
* // Template for the dropdown menu.
|
|
* // Note the use of "x-boundlist-item" class,
|
|
* // this is required to make the items selectable.
|
|
* tpl: Ext.create('Ext.XTemplate',
|
|
* '<tpl for=".">',
|
|
* '<div class="x-boundlist-item">{abbr} - {name}</div>',
|
|
* '</tpl>'
|
|
* ),
|
|
* // template for the content inside text field
|
|
* displayTpl: Ext.create('Ext.XTemplate',
|
|
* '<tpl for=".">',
|
|
* '{abbr} - {name}',
|
|
* '</tpl>'
|
|
* )
|
|
* });
|
|
*
|
|
* See also the {@link #listConfig} option for additional configuration of the dropdown.
|
|
*
|
|
*/
|
|
Ext.define('Ext.form.field.ComboBox', {
|
|
extend: Ext.form.field.Picker ,
|
|
|
|
alternateClassName: 'Ext.form.ComboBox',
|
|
alias: ['widget.combobox', 'widget.combo'],
|
|
mixins: {
|
|
bindable: Ext.util.Bindable
|
|
},
|
|
|
|
componentLayout: 'combobox',
|
|
|
|
/**
|
|
* @cfg {String} [triggerCls='x-form-arrow-trigger']
|
|
* An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls}
|
|
* by default and `triggerCls` will be **appended** if specified.
|
|
*/
|
|
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
|
|
|
|
/**
|
|
* @cfg {String} [hiddenName=""]
|
|
* The name of an underlying hidden field which will be synchronized with the underlying value of the combo.
|
|
* This option is useful if the combo is part of a form element doing a regular form post. The hidden field
|
|
* will not be created unless a hiddenName is specified.
|
|
*/
|
|
hiddenName: '',
|
|
|
|
/**
|
|
* @property {Ext.Element} hiddenDataEl
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* @cfg {String}
|
|
* CSS class used to find the {@link #hiddenDataEl}
|
|
*/
|
|
hiddenDataCls: Ext.baseCSSPrefix + 'hide-display ' + Ext.baseCSSPrefix + 'form-data-hidden',
|
|
|
|
/**
|
|
* @cfg
|
|
* @inheritdoc
|
|
*/
|
|
fieldSubTpl: [
|
|
'<div class="{hiddenDataCls}" role="presentation"></div>',
|
|
'<input id="{id}" type="{type}" {inputAttrTpl} class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"',
|
|
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
|
|
'<tpl if="name"> name="{name}"</tpl>',
|
|
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
|
|
'<tpl if="size"> size="{size}"</tpl>',
|
|
'<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
|
|
'<tpl if="readOnly"> readonly="readonly"</tpl>',
|
|
'<tpl if="disabled"> disabled="disabled"</tpl>',
|
|
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
|
|
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
|
|
'/>',
|
|
{
|
|
compiled: true,
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
getSubTplData: function(){
|
|
var me = this;
|
|
Ext.applyIf(me.subTplData, {
|
|
hiddenDataCls: me.hiddenDataCls
|
|
});
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
afterRender: function(){
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.setHiddenValue(me.value);
|
|
},
|
|
|
|
/**
|
|
* @cfg {Ext.data.Store/String/Array} store
|
|
* The data source to which this combo is bound. Acceptable values for this property are:
|
|
*
|
|
* - **any {@link Ext.data.Store Store} subclass**
|
|
* - **an {@link Ext.data.Store#storeId ID of a store}**
|
|
* - **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.
|
|
*
|
|
* - **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']]`)
|
|
*
|
|
* 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}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} multiSelect
|
|
* If set to `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}.
|
|
*/
|
|
multiSelect: false,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} delimiter
|
|
* The character(s) used to separate the {@link #displayField display values} of multiple selected items when
|
|
* `{@link #multiSelect} = true`.
|
|
*/
|
|
delimiter: ', ',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} displayField
|
|
* The underlying {@link Ext.data.Field#name data field name} to bind to this ComboBox.
|
|
*
|
|
* See also `{@link #valueField}`.
|
|
*/
|
|
displayField: 'text',
|
|
|
|
/**
|
|
* @cfg {String} valueField (required)
|
|
* The underlying {@link Ext.data.Field#name data value name} to bind to this ComboBox.
|
|
*
|
|
* **Note**: use of a `valueField` requires the user to make a selection in order for a value to be mapped. See also
|
|
* `{@link #displayField}`.
|
|
*
|
|
* Defaults to match the value of the {@link #displayField} config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} triggerAction
|
|
* The action to execute when the trigger is clicked.
|
|
*
|
|
* - **`'all'`** :
|
|
*
|
|
* {@link #doQuery run the query} specified by the `{@link #allQuery}` config option
|
|
*
|
|
* - **`'last'`** :
|
|
*
|
|
* {@link #doQuery run the query} using the `{@link #lastQuery last query value}`.
|
|
*
|
|
* - **`'query'`** :
|
|
*
|
|
* {@link #doQuery run the query} using the {@link Ext.form.field.Base#getRawValue raw value}.
|
|
*
|
|
* See also `{@link #queryParam}`.
|
|
*/
|
|
triggerAction: 'all',
|
|
|
|
/**
|
|
* @cfg {String} allQuery
|
|
* The text query to send to the server to return all records for the list with no filtering
|
|
*/
|
|
allQuery: '',
|
|
|
|
/**
|
|
* @cfg {String} queryParam
|
|
* Name of the parameter used by the Store to pass the typed string when the ComboBox is configured with
|
|
* `{@link #queryMode}: 'remote'`. If explicitly set to a falsy value it will not be sent.
|
|
*/
|
|
queryParam: 'query',
|
|
|
|
/**
|
|
* @cfg {String} queryMode
|
|
* The mode in which the ComboBox uses the configured Store. Acceptable values are:
|
|
*
|
|
* - **`'remote'`** :
|
|
*
|
|
* 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#method-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 `true` because it has no meaning for
|
|
* autocomplete.
|
|
*
|
|
* - **`'local'`** :
|
|
*
|
|
* ComboBox loads local data
|
|
*
|
|
* var combo = new Ext.form.field.ComboBox({
|
|
* renderTo: document.body,
|
|
* queryMode: 'local',
|
|
* store: new Ext.data.ArrayStore({
|
|
* id: 0,
|
|
* fields: [
|
|
* 'myId', // numeric value is the key
|
|
* 'displayText'
|
|
* ],
|
|
* data: [[1, 'item1'], [2, 'item2']] // data is local
|
|
* }),
|
|
* valueField: 'myId',
|
|
* displayField: 'displayText',
|
|
* triggerAction: 'all'
|
|
* });
|
|
*/
|
|
queryMode: 'remote',
|
|
|
|
/**
|
|
* @cfg {Boolean} [queryCaching=true]
|
|
* When true, this prevents the combo from re-querying (either locally or remotely) when the current query
|
|
* is the same as the previous query.
|
|
*/
|
|
queryCaching: true,
|
|
|
|
/**
|
|
* @cfg {Number} pageSize
|
|
* If greater than `0`, 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.view.BoundList#pageSize limit}
|
|
* parameters. Only applies when `{@link #queryMode} = 'remote'`.
|
|
*/
|
|
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'`
|
|
*/
|
|
|
|
/**
|
|
* @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`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [anyMatch=false]
|
|
* Configure as `true` to allow match the typed characters at any position in the {@link #valueField}'s value.
|
|
*/
|
|
anyMatch: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [caseSensitive=false]
|
|
* Configure as `true` to make the filtering match with exact case matching
|
|
*/
|
|
caseSensitive: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} autoSelect
|
|
* `true` to automatically highlight the first result gathered by the data store in the dropdown list when it is
|
|
* opened. 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.
|
|
*/
|
|
autoSelect: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} typeAhead
|
|
* `true` to populate and autoselect the remainder of the text being typed after a configurable delay
|
|
* ({@link #typeAheadDelay}) if it matches a known value.
|
|
*/
|
|
typeAhead: false,
|
|
|
|
/**
|
|
* @cfg {Number} typeAheadDelay
|
|
* The length of time in milliseconds to wait until the typeahead text is displayed if `{@link #typeAhead} = true`
|
|
*/
|
|
typeAheadDelay: 250,
|
|
|
|
/**
|
|
* @cfg {Boolean} selectOnTab
|
|
* Whether the Tab key should select the currently highlighted item.
|
|
*/
|
|
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.
|
|
*/
|
|
forceSelection: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} growToLongestValue
|
|
* `false` to not allow the component to resize itself when its data changes
|
|
* (and its {@link #grow} property is `true`)
|
|
*/
|
|
growToLongestValue: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableRegEx
|
|
* *When {@link #queryMode} is `'local'` only*
|
|
*
|
|
* Set to `true` to have the ComboBox use the typed value as a RegExp source to filter the store to get possible matches.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} valueNotFoundText
|
|
* When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will
|
|
* be displayed as the field text if defined. If this default text is used, it means there
|
|
* is no value set and no validation will occur on this field.
|
|
*/
|
|
|
|
/**
|
|
* @property {String} lastQuery
|
|
* The value of the match string used to filter the store. Delete this property to force a requery. Example use:
|
|
*
|
|
* var combo = new Ext.form.field.ComboBox({
|
|
* ...
|
|
* queryMode: 'remote',
|
|
* listeners: {
|
|
* // delete the previous query in the beforequery event or set
|
|
* // combo.lastQuery = null (this will reload the store the next time it expands)
|
|
* beforequery: function(qe){
|
|
* delete qe.combo.lastQuery;
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* 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:
|
|
*
|
|
* var combo = new Ext.form.field.ComboBox({
|
|
* ...
|
|
* queryMode: 'local',
|
|
* triggerAction: 'all',
|
|
* lastQuery: ''
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} defaultListConfig
|
|
* Set of options that will be used as defaults for the user-configured {@link #listConfig} object.
|
|
*/
|
|
defaultListConfig: {
|
|
loadingHeight: 70,
|
|
minWidth: 70,
|
|
maxHeight: 300,
|
|
shadow: 'sides'
|
|
},
|
|
|
|
/**
|
|
* @cfg {String/HTMLElement/Ext.Element} transform
|
|
* The id, DOM node or {@link Ext.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.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} listConfig
|
|
* An optional set of configuration properties that will be passed to the {@link Ext.view.BoundList}'s constructor.
|
|
* Any configuration that is valid for BoundList can be included. Some of the more useful ones are:
|
|
*
|
|
* - {@link Ext.view.BoundList#cls cls} - defaults to empty
|
|
* - {@link Ext.view.BoundList#emptyText emptyText} - defaults to empty string
|
|
* - {@link Ext.view.BoundList#itemSelector itemSelector} - defaults to the value defined in BoundList
|
|
* - {@link Ext.view.BoundList#loadingText loadingText} - defaults to `'Loading...'`
|
|
* - {@link Ext.view.BoundList#minWidth minWidth} - defaults to `70`
|
|
* - {@link Ext.view.BoundList#maxWidth maxWidth} - defaults to `undefined`
|
|
* - {@link Ext.view.BoundList#maxHeight maxHeight} - defaults to `300`
|
|
* - {@link Ext.view.BoundList#resizable resizable} - defaults to `false`
|
|
* - {@link Ext.view.BoundList#shadow shadow} - defaults to `'sides'`
|
|
* - {@link Ext.view.BoundList#width width} - defaults to `undefined` (automatically set to the width of the ComboBox
|
|
* field if {@link #matchFieldWidth} is true)
|
|
* {@link Ext.view.BoundList#getInnerTpl getInnerTpl} A function which returns a template string which renders
|
|
* the ComboBox's {@link #displayField} value in the dropdown. This defaults to just outputting the raw value,
|
|
* but may use any {@link Ext.XTemplate XTemplate} methods to produce output.
|
|
*
|
|
* The running template is configured with some extra properties that provide some context:
|
|
* - field {@link Ext.form.field.ComboBox ComboBox} This combobox
|
|
* - store {@link Ext.data.Store Store} This combobox's data store
|
|
*/
|
|
|
|
//private
|
|
ignoreSelection: 0,
|
|
|
|
//private, tells the layout to recalculate its startingWidth when a record is removed from its bound store
|
|
removingRecords: null,
|
|
|
|
//private helper
|
|
resizeComboToGrow: function () {
|
|
var me = this;
|
|
return me.grow && me.growToLongestValue;
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
isDefined = Ext.isDefined,
|
|
store = me.store,
|
|
transform = me.transform,
|
|
transformSelect, isLocalMode;
|
|
|
|
Ext.applyIf(me.renderSelectors, {
|
|
hiddenDataEl: '.' + me.hiddenDataCls.split(' ').join('.')
|
|
});
|
|
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event beforequery
|
|
* Fires before all queries are processed. Return false to cancel the query or set the queryPlan's cancel
|
|
* property to true.
|
|
*
|
|
* @param {Object} queryPlan An object containing details about the query to be executed.
|
|
* @param {Ext.form.field.ComboBox} queryPlan.combo A reference to this ComboBox.
|
|
* @param {String} queryPlan.query The query value to be used to match against the ComboBox's {@link #valueField}.
|
|
* @param {Boolean} queryPlan.forceAll If `true`, causes the query to be executed even if the minChars threshold is not met.
|
|
* @param {Boolean} queryPlan.cancel A boolean value which, if set to `true` upon return, causes the query not to be executed.
|
|
* @param {Boolean} queryPlan.rawQuery If `true` indicates that the raw input field value is being used, and upon store load,
|
|
*/
|
|
'beforequery',
|
|
|
|
/**
|
|
* @event select
|
|
* Fires when at least one list item is selected.
|
|
* @param {Ext.form.field.ComboBox} combo This combo box
|
|
* @param {Array} records The selected records
|
|
*/
|
|
'select',
|
|
|
|
/**
|
|
* @event beforeselect
|
|
* Fires before the selected item is added to the collection
|
|
* @param {Ext.form.field.ComboBox} combo This combo box
|
|
* @param {Ext.data.Record} record The selected record
|
|
* @param {Number} index The index of the selected record
|
|
*/
|
|
'beforeselect',
|
|
|
|
/**
|
|
* @event beforedeselect
|
|
* Fires before the deselected item is removed from the collection
|
|
* @param {Ext.form.field.ComboBox} combo This combo box
|
|
* @param {Ext.data.Record} record The deselected record
|
|
* @param {Number} index The index of the deselected record
|
|
*/
|
|
'beforedeselect'
|
|
);
|
|
|
|
// Build store from 'transform' HTML select element's options
|
|
if (transform) {
|
|
transformSelect = Ext.getDom(transform);
|
|
if (transformSelect) {
|
|
if (!me.store) {
|
|
store = Ext.Array.map(Ext.Array.from(transformSelect.options), function(option){
|
|
return [option.value, option.text];
|
|
});
|
|
}
|
|
if (!me.name) {
|
|
me.name = transformSelect.name;
|
|
}
|
|
if (!('value' in me)) {
|
|
me.value = transformSelect.value;
|
|
}
|
|
}
|
|
}
|
|
|
|
me.bindStore(store || 'ext-empty-store', true);
|
|
store = me.store;
|
|
if (store.autoCreated) {
|
|
me.queryMode = 'local';
|
|
me.valueField = me.displayField = 'field1';
|
|
if (!store.expanded) {
|
|
me.displayField = 'field2';
|
|
}
|
|
}
|
|
|
|
if (!isDefined(me.valueField)) {
|
|
me.valueField = me.displayField;
|
|
}
|
|
|
|
isLocalMode = me.queryMode === 'local';
|
|
if (!isDefined(me.queryDelay)) {
|
|
me.queryDelay = isLocalMode ? 10 : 500;
|
|
}
|
|
if (!isDefined(me.minChars)) {
|
|
me.minChars = isLocalMode ? 0 : 4;
|
|
}
|
|
|
|
if (!me.displayTpl) {
|
|
me.displayTpl = new Ext.XTemplate(
|
|
'<tpl for=".">' +
|
|
'{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
|
|
'<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
|
|
'</tpl>'
|
|
);
|
|
} else if (Ext.isString(me.displayTpl)) {
|
|
me.displayTpl = new Ext.XTemplate(me.displayTpl);
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
me.doQueryTask = new Ext.util.DelayedTask(me.doRawQuery, me);
|
|
|
|
// store has already been loaded, setValue
|
|
if (me.store.getCount() > 0) {
|
|
me.setValue(me.value);
|
|
}
|
|
|
|
// render in place of 'transform' select
|
|
if (transformSelect) {
|
|
me.render(transformSelect.parentNode, transformSelect);
|
|
Ext.removeNode(transformSelect);
|
|
delete me.renderTo;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the store associated with this ComboBox.
|
|
* @return {Ext.data.Store} The store
|
|
*/
|
|
getStore : function(){
|
|
return this.store;
|
|
},
|
|
|
|
beforeBlur: function() {
|
|
this.doQueryTask.cancel();
|
|
this.assertValue();
|
|
},
|
|
|
|
// private
|
|
assertValue: function() {
|
|
var me = this,
|
|
value = me.getRawValue(),
|
|
rec, currentValue;
|
|
|
|
if (me.forceSelection) {
|
|
if (me.multiSelect) {
|
|
// For multiselect, check that the current displayed value matches the current
|
|
// selection, if it does not then revert to the most recent selection.
|
|
if (value !== me.getDisplayValue()) {
|
|
me.setValue(me.lastSelection);
|
|
}
|
|
} else {
|
|
// For single-select, match the displayed value to a record and select it,
|
|
// if it does not match a record then revert to the most recent selection.
|
|
rec = me.findRecordByDisplay(value);
|
|
if (rec) {
|
|
currentValue = me.value;
|
|
// Prevent an issue where we have duplicate display values with
|
|
// different underlying values.
|
|
if (!me.findRecordByValue(currentValue)) {
|
|
me.select(rec, true);
|
|
}
|
|
} else {
|
|
me.setValue(me.lastSelection);
|
|
}
|
|
}
|
|
}
|
|
me.collapse();
|
|
},
|
|
|
|
onTypeAhead: function() {
|
|
var me = this,
|
|
displayField = me.displayField,
|
|
record = me.store.findRecord(displayField, me.getRawValue()),
|
|
boundList = me.getPicker(),
|
|
newValue, len, selStart;
|
|
|
|
if (record) {
|
|
newValue = record.get(displayField);
|
|
len = newValue.length;
|
|
selStart = me.getRawValue().length;
|
|
|
|
boundList.highlightItem(boundList.getNode(record));
|
|
|
|
if (selStart !== 0 && selStart !== len) {
|
|
me.setRawValue(newValue);
|
|
me.selectText(selStart, newValue.length);
|
|
}
|
|
}
|
|
},
|
|
|
|
// invoked when a different store is bound to this combo
|
|
// than the original
|
|
resetToDefault: Ext.emptyFn,
|
|
|
|
beforeReset: function() {
|
|
this.callParent();
|
|
|
|
// If filtered on typed value, unfilter.
|
|
if (this.queryFilter && !this.queryFilter.disabled) {
|
|
this.queryFilter.disabled = true;
|
|
this.store.filter();
|
|
}
|
|
},
|
|
|
|
onUnbindStore: function(store) {
|
|
var me = this,
|
|
picker = me.picker;
|
|
|
|
// If we'd added a local filter, remove it
|
|
if (me.queryFilter) {
|
|
me.store.removeFilter(me.queryFilter);
|
|
}
|
|
if (!store && picker) {
|
|
picker.bindStore(null);
|
|
}
|
|
},
|
|
|
|
onBindStore: function(store, initial) {
|
|
var picker = this.picker;
|
|
if (!initial) {
|
|
this.resetToDefault();
|
|
}
|
|
|
|
if (picker) {
|
|
picker.bindStore(store);
|
|
}
|
|
},
|
|
|
|
getStoreListeners: function() {
|
|
var me = this;
|
|
|
|
return {
|
|
beforeload: me.onBeforeLoad,
|
|
clear: me.onClear,
|
|
datachanged: me.onDataChanged,
|
|
load: me.onLoad,
|
|
exception: me.onException,
|
|
remove: me.onRemove
|
|
};
|
|
},
|
|
|
|
onBeforeLoad: function(){
|
|
// If we're remote loading, the load mask will show which will trigger a deslectAll.
|
|
// This selection change will trigger the collapse in onListSelectionChange. As such
|
|
// we'll veto it for now and restore selection listeners when we've loaded.
|
|
++this.ignoreSelection;
|
|
},
|
|
|
|
onDataChanged: function() {
|
|
var me = this;
|
|
|
|
if (me.resizeComboToGrow()) {
|
|
me.updateLayout();
|
|
}
|
|
},
|
|
|
|
onClear: function() {
|
|
var me = this;
|
|
|
|
if (me.resizeComboToGrow()) {
|
|
me.removingRecords = true;
|
|
me.onDataChanged();
|
|
}
|
|
},
|
|
|
|
onRemove: function() {
|
|
var me = this;
|
|
|
|
if (me.resizeComboToGrow()) {
|
|
me.removingRecords = true;
|
|
}
|
|
},
|
|
|
|
onException: function(){
|
|
if (this.ignoreSelection > 0) {
|
|
--this.ignoreSelection;
|
|
}
|
|
this.collapse();
|
|
},
|
|
|
|
onLoad: function(store, records, success) {
|
|
var me = this;
|
|
|
|
if (me.ignoreSelection > 0) {
|
|
--me.ignoreSelection;
|
|
}
|
|
|
|
// If not querying using the raw field value, we can set the value now we have data
|
|
if (success && !store.lastOptions.rawQuery) {
|
|
// Set the value on load
|
|
|
|
// There's no value.
|
|
if (me.value == null) {
|
|
// Highlight the first item in the list if autoSelect: true
|
|
if (me.store.getCount()) {
|
|
me.doAutoSelect();
|
|
} else {
|
|
// assign whatever empty value we have to prevent change from firing
|
|
me.setValue(me.value);
|
|
}
|
|
} else {
|
|
me.setValue(me.value);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Execute the query with the raw contents within the textfield.
|
|
*/
|
|
doRawQuery: function() {
|
|
this.doQuery(this.getRawValue(), false, true);
|
|
},
|
|
|
|
/**
|
|
* Executes a query to filter the dropdown list. Fires the {@link #beforequery} event prior to performing the query
|
|
* allowing the query action to be canceled if needed.
|
|
*
|
|
* @param {String} queryString The string to use to filter available items by matching against the configured {@link #valueField}.
|
|
* @param {Boolean} [forceAll=false] `true` to 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.
|
|
* @param {Boolean} [rawQuery=false] Pass as true if the raw typed value is being used as the query string. This causes the
|
|
* resulting store load to leave the raw value undisturbed.
|
|
* @return {Boolean} true if the query was permitted to run, false if it was cancelled by a {@link #beforequery}
|
|
* handler.
|
|
*/
|
|
doQuery: function(queryString, forceAll, rawQuery) {
|
|
var me = this,
|
|
|
|
// Decide if, and how we are going to query the store
|
|
queryPlan = me.beforeQuery({
|
|
query: queryString || '',
|
|
rawQuery: rawQuery,
|
|
forceAll: forceAll,
|
|
combo: me,
|
|
cancel: false
|
|
});
|
|
|
|
// Allow veto.
|
|
if (queryPlan === false || queryPlan.cancel) {
|
|
return false;
|
|
}
|
|
|
|
// If they're using the same value as last time, just show the dropdown
|
|
if (me.queryCaching && queryPlan.query === me.lastQuery) {
|
|
me.expand();
|
|
}
|
|
|
|
// Otherwise filter or load the store
|
|
else {
|
|
me.lastQuery = queryPlan.query;
|
|
|
|
if (me.queryMode === 'local') {
|
|
me.doLocalQuery(queryPlan);
|
|
|
|
} else {
|
|
me.doRemoteQuery(queryPlan);
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* @template
|
|
* A method which may modify aspects of how the store is to be filtered (if {@link #queryMode} is `"local"`)
|
|
* of loaded (if {@link #queryMode} is `"remote"`).
|
|
*
|
|
* This is called by the {@link #doQuery method, and may be overridden in subclasses to modify
|
|
* the default behaviour.
|
|
*
|
|
* This method is passed an object containing information about the upcoming query operation which it may modify
|
|
* before returning.
|
|
*
|
|
* @param {Object} queryPlan An object containing details about the query to be executed.
|
|
* @param {String} queryPlan.query The query value to be used to match against the ComboBox's {@link #valueField}.
|
|
* @param {Boolean} queryPlan.forceAll If `true`, causes the query to be executed even if the minChars threshold is not met.
|
|
* @param {Boolean} queryPlan.cancel A boolean value which, if set to `true` upon return, causes the query not to be executed.
|
|
* @param {Boolean} queryPlan.rawQuery If `true` indicates that the raw input field value is being used, and upon store load,
|
|
* the input field value should **not** be overwritten.
|
|
*
|
|
*/
|
|
beforeQuery: function(queryPlan) {
|
|
var me = this;
|
|
|
|
// Allow beforequery event to veto by returning false
|
|
if (me.fireEvent('beforequery', queryPlan) === false) {
|
|
queryPlan.cancel = true;
|
|
}
|
|
|
|
// Allow beforequery event to veto by returning setting the cancel flag
|
|
else if (!queryPlan.cancel) {
|
|
|
|
// If the minChars threshold has not been met, and we're not forcing an "all" query, cancel the query
|
|
if (queryPlan.query.length < me.minChars && !queryPlan.forceAll) {
|
|
queryPlan.cancel = true;
|
|
}
|
|
}
|
|
return queryPlan;
|
|
},
|
|
|
|
doLocalQuery: function(queryPlan) {
|
|
var me = this,
|
|
queryString = queryPlan.query;
|
|
|
|
// Create our filter when first needed
|
|
if (!me.queryFilter) {
|
|
// Create the filter that we will use during typing to filter the Store
|
|
me.queryFilter = new Ext.util.Filter({
|
|
id: me.id + '-query-filter',
|
|
anyMatch: me.anyMatch,
|
|
caseSensitive: me.caseSensitive,
|
|
root: 'data',
|
|
property: me.displayField
|
|
});
|
|
me.store.addFilter(me.queryFilter, false);
|
|
}
|
|
|
|
// Querying by a string...
|
|
if (queryString || !queryPlan.forceAll) {
|
|
me.queryFilter.disabled = false;
|
|
me.queryFilter.setValue(me.enableRegEx ? new RegExp(queryString) : queryString);
|
|
}
|
|
|
|
// If forceAll being used, or no query string, disable the filter
|
|
else {
|
|
me.queryFilter.disabled = true;
|
|
}
|
|
|
|
// Filter the Store according to the updated filter
|
|
me.store.filter();
|
|
|
|
// Expand after adjusting the filter unless there are no matches
|
|
if (me.store.getCount()) {
|
|
me.expand();
|
|
} else {
|
|
me.collapse();
|
|
}
|
|
|
|
me.afterQuery(queryPlan);
|
|
},
|
|
|
|
doRemoteQuery: function(queryPlan) {
|
|
var me = this,
|
|
loadCallback = function() {
|
|
me.afterQuery(queryPlan);
|
|
};
|
|
|
|
// expand before loading so LoadMask can position itself correctly
|
|
me.expand();
|
|
|
|
// 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.
|
|
if (me.pageSize) {
|
|
// if we're paging, we've changed the query so start at page 1.
|
|
me.loadPage(1, {
|
|
rawQuery: queryPlan.rawQuery,
|
|
callback: loadCallback
|
|
});
|
|
} else {
|
|
me.store.load({
|
|
params: me.getParams(queryPlan.query),
|
|
rawQuery: queryPlan.rawQuery,
|
|
callback: loadCallback
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @template
|
|
* A method called when the filtering caused by the {@link #doQuery} call is complete and the store has been
|
|
* either filtered locally (if {@link #queryMode} is `"local"`), or has been loaded using the specified filtering.
|
|
*
|
|
* @param {Object} queryPlan An object containing details about the query was executed.
|
|
* @param {String} queryPlan.query The query value to be used to match against the ComboBox's {@link #valueField}.
|
|
* @param {Boolean} queryPlan.forceAll If `true`, causes the query to be executed even if the minChars threshold is not met.
|
|
* @param {Boolean} queryPlan.cancel A boolean value which, if set to `true` upon return, causes the query not to be executed.
|
|
* @param {Boolean} queryPlan.rawQuery If `true` indicates that the raw input field value is being used, and upon store load,
|
|
* the input field value should **not** be overwritten.
|
|
*
|
|
*/
|
|
afterQuery: function(queryPlan) {
|
|
var me = this;
|
|
|
|
if (me.store.getCount()) {
|
|
if (me.typeAhead) {
|
|
me.doTypeAhead();
|
|
}
|
|
|
|
// Clear current selection if it does not match the current value in the field
|
|
if (me.getRawValue() !== me.getDisplayValue()) {
|
|
me.ignoreSelection++;
|
|
me.picker.getSelectionModel().deselectAll();
|
|
me.ignoreSelection--;
|
|
}
|
|
|
|
if (queryPlan.rawQuery) {
|
|
me.syncSelection();
|
|
if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
|
|
me.doAutoSelect();
|
|
}
|
|
} else {
|
|
me.doAutoSelect();
|
|
}
|
|
}
|
|
},
|
|
|
|
loadPage: function(pageNum, options) {
|
|
this.store.loadPage(pageNum, Ext.apply({
|
|
params: this.getParams(this.lastQuery)
|
|
}, options));
|
|
},
|
|
|
|
onPageChange: function(toolbar, newPage){
|
|
/*
|
|
* Return false here so we can call load ourselves and inject the query param.
|
|
* We don't want to do this for every store load since the developer may load
|
|
* the store through some other means so we won't add the query param.
|
|
*/
|
|
this.loadPage(newPage);
|
|
return false;
|
|
},
|
|
|
|
// private
|
|
getParams: function(queryString) {
|
|
var params = {},
|
|
param = this.queryParam;
|
|
|
|
if (param) {
|
|
params[param] = queryString;
|
|
}
|
|
return params;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* If the autoSelect config is true, and the picker is open, highlights the first item.
|
|
*/
|
|
doAutoSelect: function() {
|
|
var me = this,
|
|
picker = me.picker,
|
|
lastSelected, itemNode;
|
|
if (picker && me.autoSelect && me.store.getCount() > 0) {
|
|
// Highlight the last selected item and scroll it into view
|
|
lastSelected = picker.getSelectionModel().lastSelected;
|
|
itemNode = picker.getNode(lastSelected || 0);
|
|
if (itemNode) {
|
|
picker.highlightItem(itemNode);
|
|
picker.listEl.scrollChildIntoView(itemNode, false);
|
|
}
|
|
}
|
|
},
|
|
|
|
doTypeAhead: function() {
|
|
if (!this.typeAheadTask) {
|
|
this.typeAheadTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
|
|
}
|
|
if (this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE) {
|
|
this.typeAheadTask.delay(this.typeAheadDelay);
|
|
}
|
|
},
|
|
|
|
onTriggerClick: function() {
|
|
var me = this;
|
|
if (!me.readOnly && !me.disabled) {
|
|
if (me.isExpanded) {
|
|
me.collapse();
|
|
} else {
|
|
me.onFocus({});
|
|
if (me.triggerAction === 'all') {
|
|
me.doQuery(me.allQuery, true);
|
|
} else if (me.triggerAction === 'last') {
|
|
me.doQuery(me.lastQuery, true);
|
|
} else {
|
|
me.doQuery(me.getRawValue(), false, true);
|
|
}
|
|
}
|
|
me.inputEl.focus();
|
|
}
|
|
},
|
|
|
|
onPaste: function(){
|
|
var me = this;
|
|
|
|
if (!me.readOnly && !me.disabled && me.editable) {
|
|
me.doQueryTask.delay(me.queryDelay);
|
|
}
|
|
},
|
|
|
|
// store the last key and doQuery if relevant
|
|
onKeyUp: function(e, t) {
|
|
var me = this,
|
|
key = e.getKey();
|
|
|
|
if (!me.readOnly && !me.disabled && me.editable) {
|
|
me.lastKey = key;
|
|
// we put this in a task so that we can cancel it if a user is
|
|
// in and out before the queryDelay elapses
|
|
|
|
// perform query w/ any normal key or backspace or delete
|
|
if (!e.isSpecialKey() || key == e.BACKSPACE || key == e.DELETE) {
|
|
me.doQueryTask.delay(me.queryDelay);
|
|
}
|
|
}
|
|
|
|
if (me.enableKeyEvents) {
|
|
me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
initEvents: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
/*
|
|
* 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) {
|
|
me.mon(me.inputEl, 'keyup', me.onKeyUp, me);
|
|
}
|
|
me.mon(me.inputEl, 'paste', me.onPaste, me);
|
|
},
|
|
|
|
onDestroy: function() {
|
|
Ext.destroy(this.listKeyNav);
|
|
this.bindStore(null);
|
|
this.callParent();
|
|
},
|
|
|
|
// The picker (the dropdown) must have its zIndex managed by the same ZIndexManager which is
|
|
// providing the zIndex of our Container.
|
|
onAdded: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (me.picker) {
|
|
me.picker.ownerCt = me.up('[floating]');
|
|
me.picker.registerWithOwnerCt();
|
|
}
|
|
},
|
|
|
|
createPicker: function() {
|
|
var me = this,
|
|
picker,
|
|
pickerCfg = Ext.apply({
|
|
xtype: 'boundlist',
|
|
pickerField: me,
|
|
selModel: {
|
|
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
|
|
},
|
|
floating: true,
|
|
hidden: true,
|
|
store: me.store,
|
|
displayField: me.displayField,
|
|
focusOnToFront: false,
|
|
pageSize: me.pageSize,
|
|
tpl: me.tpl
|
|
}, me.listConfig, me.defaultListConfig);
|
|
|
|
picker = me.picker = Ext.widget(pickerCfg);
|
|
if (me.pageSize) {
|
|
picker.pagingToolbar.on('beforechange', me.onPageChange, me);
|
|
}
|
|
|
|
me.mon(picker, {
|
|
itemclick: me.onItemClick,
|
|
refresh: me.onListRefresh,
|
|
scope: me
|
|
});
|
|
|
|
me.mon(picker.getSelectionModel(), {
|
|
beforeselect: me.onBeforeSelect,
|
|
beforedeselect: me.onBeforeDeselect,
|
|
selectionchange: me.onListSelectionChange,
|
|
scope: me
|
|
});
|
|
|
|
return picker;
|
|
},
|
|
|
|
alignPicker: function(){
|
|
var me = this,
|
|
picker = me.getPicker(),
|
|
heightAbove = me.getPosition()[1] - Ext.getBody().getScroll().top,
|
|
heightBelow = Ext.Element.getViewHeight() - heightAbove - me.getHeight(),
|
|
space = Math.max(heightAbove, heightBelow);
|
|
|
|
// Allow the picker to height itself naturally.
|
|
if (picker.height) {
|
|
delete picker.height;
|
|
picker.updateLayout();
|
|
}
|
|
// Then ensure that vertically, the dropdown will fit into the space either above or below the inputEl.
|
|
if (picker.getHeight() > space - 5) {
|
|
picker.setHeight(space - 5); // have some leeway so we aren't flush against
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
onListRefresh: function() {
|
|
// Picker will be aligned during the expand call
|
|
if (!this.expanding) {
|
|
this.alignPicker();
|
|
}
|
|
this.syncSelection();
|
|
},
|
|
|
|
onItemClick: function(picker, record){
|
|
/*
|
|
* If we're doing single selection, the selection change events won't fire when
|
|
* clicking on the selected element. Detect it here.
|
|
*/
|
|
var me = this,
|
|
selection = me.picker.getSelectionModel().getSelection(),
|
|
valueField = me.valueField;
|
|
|
|
if (!me.multiSelect && selection.length) {
|
|
if (record.get(valueField) === selection[0].get(valueField)) {
|
|
// Make sure we also update the display value if it's only partial
|
|
me.displayTplData = [record.data];
|
|
me.setRawValue(me.getDisplayValue());
|
|
me.collapse();
|
|
}
|
|
}
|
|
},
|
|
|
|
onBeforeSelect: function(list, record) {
|
|
return this.fireEvent('beforeselect', this, record, record.index);
|
|
},
|
|
|
|
onBeforeDeselect: function(list, record) {
|
|
return this.fireEvent('beforedeselect', this, record, record.index);
|
|
},
|
|
|
|
onListSelectionChange: function(list, selectedRecords) {
|
|
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 (!isMulti) {
|
|
Ext.defer(me.collapse, 1, me);
|
|
}
|
|
/*
|
|
* 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();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Enables the key nav for the BoundList when it is expanded.
|
|
*/
|
|
onExpand: function() {
|
|
var me = this,
|
|
keyNav = me.listKeyNav,
|
|
selectOnTab = me.selectOnTab,
|
|
picker = me.getPicker();
|
|
|
|
// Handle BoundList navigation from the input field. Insert a tab listener specially to enable selectOnTab.
|
|
if (keyNav) {
|
|
keyNav.enable();
|
|
} else {
|
|
keyNav = me.listKeyNav = new Ext.view.BoundListKeyNav(this.inputEl, {
|
|
boundList: picker,
|
|
forceKeyDown: true,
|
|
tab: function(e) {
|
|
if (selectOnTab) {
|
|
this.selectHighlighted(e);
|
|
me.triggerBlur();
|
|
}
|
|
// Tab key event is allowed to propagate to field
|
|
return true;
|
|
},
|
|
enter: function(e){
|
|
var selModel = picker.getSelectionModel(),
|
|
count = selModel.getCount();
|
|
|
|
this.selectHighlighted(e);
|
|
|
|
// Handle the case where the highlighted item is already selected
|
|
// In this case, the change event won't fire, so just collapse
|
|
if (!me.multiSelect && count === selModel.getCount()) {
|
|
me.collapse();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// While list is expanded, stop tab monitoring from Ext.form.field.Trigger so it doesn't short-circuit selectOnTab
|
|
if (selectOnTab) {
|
|
me.ignoreMonitorTab = true;
|
|
}
|
|
|
|
Ext.defer(keyNav.enable, 1, keyNav); //wait a bit so it doesn't react to the down arrow opening the picker
|
|
me.inputEl.focus();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Disables the key nav for the BoundList when it is collapsed.
|
|
*/
|
|
onCollapse: function() {
|
|
var me = this,
|
|
keyNav = me.listKeyNav;
|
|
if (keyNav) {
|
|
keyNav.disable();
|
|
me.ignoreMonitorTab = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Selects an item by a {@link Ext.data.Model Model}, or by a key value.
|
|
* @param {Object} r
|
|
*/
|
|
select: function(r, /* private */ assert) {
|
|
var me = this,
|
|
picker = me.picker,
|
|
doSelect = true,
|
|
fireSelect;
|
|
|
|
if (r && r.isModel && assert === true && picker) {
|
|
fireSelect = !picker.getSelectionModel().isSelected(r);
|
|
}
|
|
|
|
me.setValue(r, true);
|
|
// Select needs to be fired after setValue, so that when we call getValue
|
|
// in select it returns the correct value
|
|
if (fireSelect) {
|
|
me.fireEvent('select', me, r);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Finds the record by searching for a specific field/value combination.
|
|
* @param {String} field The name of the field to test.
|
|
* @param {Object} value The value to match the field against.
|
|
* @return {Ext.data.Model} The matched record or false.
|
|
*/
|
|
findRecord: function(field, value) {
|
|
var ds = this.store,
|
|
idx = ds.findExact(field, value);
|
|
return idx !== -1 ? ds.getAt(idx) : false;
|
|
},
|
|
|
|
/**
|
|
* Finds the record by searching values in the {@link #valueField}.
|
|
* @param {Object} value The value to match the field against.
|
|
* @return {Ext.data.Model} The matched record or false.
|
|
*/
|
|
findRecordByValue: function(value) {
|
|
return this.findRecord(this.valueField, value);
|
|
},
|
|
|
|
/**
|
|
* Finds the record by searching values in the {@link #displayField}.
|
|
* @param {Object} value The value to match the field against.
|
|
* @return {Ext.data.Model} The matched record or false.
|
|
*/
|
|
findRecordByDisplay: function(value) {
|
|
return this.findRecord(this.displayField, value);
|
|
},
|
|
|
|
/**
|
|
* Sets the specified value(s) into the field. For each value, if a record is found in the {@link #store} that
|
|
* matches based on the {@link #valueField}, then that record's {@link #displayField} will be displayed in the
|
|
* field. If no match is found, and the {@link #valueNotFoundText} config option is defined, then that will be
|
|
* displayed as the default field text. Otherwise a blank value will be shown, although the value will still be set.
|
|
* @param {String/String[]} value The value(s) to be set. Can be either a single String or {@link Ext.data.Model},
|
|
* or an Array of Strings or Models.
|
|
* @return {Ext.form.field.Field} this
|
|
*/
|
|
setValue: function(value, doSelect) {
|
|
var me = this,
|
|
valueNotFoundText = me.valueNotFoundText,
|
|
inputEl = me.inputEl,
|
|
i, len, record,
|
|
dataObj,
|
|
matchedRecords = [],
|
|
displayTplData = [],
|
|
processedValue = [];
|
|
|
|
if (me.store.loading) {
|
|
// Called while the Store is loading. Ensure it is processed by the onLoad method.
|
|
me.value = value;
|
|
me.setHiddenValue(me.value);
|
|
return me;
|
|
}
|
|
|
|
// This method processes multi-values, so ensure value is an array.
|
|
value = Ext.Array.from(value);
|
|
|
|
// Loop through values, matching each from the Store, and collecting matched records
|
|
for (i = 0, len = value.length; i < len; i++) {
|
|
record = value[i];
|
|
if (!record || !record.isModel) {
|
|
record = me.findRecordByValue(record);
|
|
}
|
|
// record found, select it.
|
|
if (record) {
|
|
matchedRecords.push(record);
|
|
displayTplData.push(record.data);
|
|
processedValue.push(record.get(me.valueField));
|
|
}
|
|
// record was not found, this could happen because
|
|
// store is not loaded or they set a value not in the store
|
|
else {
|
|
// If we are allowing insertion of values not represented in the Store, then push the value and
|
|
// create a fake record data object to push as a display value for use by the displayTpl
|
|
if (!me.forceSelection) {
|
|
processedValue.push(value[i]);
|
|
dataObj = {};
|
|
dataObj[me.displayField] = value[i];
|
|
displayTplData.push(dataObj);
|
|
// TODO: Add config to create new records on selection of a value that has no match in the Store
|
|
}
|
|
// Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
|
|
else if (Ext.isDefined(valueNotFoundText)) {
|
|
displayTplData.push(valueNotFoundText);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Set the value of this field. If we are multiselecting, then that is an array.
|
|
me.setHiddenValue(processedValue);
|
|
me.value = me.multiSelect ? processedValue : processedValue[0];
|
|
if (!Ext.isDefined(me.value)) {
|
|
me.value = null;
|
|
}
|
|
me.displayTplData = displayTplData; //store for getDisplayValue method
|
|
me.lastSelection = me.valueModels = matchedRecords;
|
|
|
|
if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
|
|
inputEl.removeCls(me.emptyCls);
|
|
}
|
|
|
|
// Calculate raw value from the collection of Model data
|
|
me.setRawValue(me.getDisplayValue());
|
|
me.checkChange();
|
|
|
|
if (doSelect !== false) {
|
|
me.syncSelection();
|
|
}
|
|
me.applyEmptyText();
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Set the value of {@link #hiddenDataEl}
|
|
* Dynamically adds and removes input[type=hidden] elements
|
|
*/
|
|
setHiddenValue: function(values){
|
|
var me = this,
|
|
name = me.hiddenName,
|
|
i,
|
|
dom, childNodes, input, valueCount, childrenCount;
|
|
|
|
if (!me.hiddenDataEl || !name) {
|
|
return;
|
|
}
|
|
values = Ext.Array.from(values);
|
|
dom = me.hiddenDataEl.dom;
|
|
childNodes = dom.childNodes;
|
|
input = childNodes[0];
|
|
valueCount = values.length;
|
|
childrenCount = childNodes.length;
|
|
|
|
if (!input && valueCount > 0) {
|
|
me.hiddenDataEl.update(Ext.DomHelper.markup({
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
name: name
|
|
}));
|
|
childrenCount = 1;
|
|
input = dom.firstChild;
|
|
}
|
|
while (childrenCount > valueCount) {
|
|
dom.removeChild(childNodes[0]);
|
|
-- childrenCount;
|
|
}
|
|
while (childrenCount < valueCount) {
|
|
dom.appendChild(input.cloneNode(true));
|
|
++ childrenCount;
|
|
}
|
|
for (i = 0; i < valueCount; i++) {
|
|
childNodes[i].value = values[i];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private Generates the string value to be displayed in the text field for the currently stored value
|
|
*/
|
|
getDisplayValue: function() {
|
|
return this.displayTpl.apply(this.displayTplData);
|
|
},
|
|
|
|
getValue: function() {
|
|
// If the user has not changed the raw field value since a value was selected from the list,
|
|
// then return the structured value from the selection. If the raw field value is different
|
|
// than what would be displayed due to selection, return that raw value.
|
|
var me = this,
|
|
picker = me.picker,
|
|
rawValue = me.getRawValue(), //current value of text field
|
|
value = me.value; //stored value from last selection or setValue() call
|
|
|
|
if (me.getDisplayValue() !== rawValue) {
|
|
value = rawValue;
|
|
me.value = me.displayTplData = me.valueModels = null;
|
|
if (picker) {
|
|
me.ignoreSelection++;
|
|
picker.getSelectionModel().deselectAll();
|
|
me.ignoreSelection--;
|
|
}
|
|
}
|
|
|
|
return value;
|
|
},
|
|
|
|
getSubmitValue: function() {
|
|
var value = this.getValue();
|
|
// If the value is null/undefined, we still return an empty string. If we
|
|
// don't, the field will never get posted to the server since nulls are ignored.
|
|
if (Ext.isEmpty(value)) {
|
|
value = '';
|
|
}
|
|
return value;
|
|
},
|
|
|
|
isEqual: function(v1, v2) {
|
|
var fromArray = Ext.Array.from,
|
|
i, len;
|
|
|
|
v1 = fromArray(v1);
|
|
v2 = fromArray(v2);
|
|
len = v1.length;
|
|
|
|
if (len !== v2.length) {
|
|
return false;
|
|
}
|
|
|
|
for(i = 0; i < len; i++) {
|
|
if (v2[i] !== v1[i]) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Clears any value currently set in the ComboBox.
|
|
*/
|
|
clearValue: function() {
|
|
this.setValue([]);
|
|
},
|
|
|
|
/**
|
|
* @private Synchronizes the selection in the picker to match the current value of the combobox.
|
|
*/
|
|
syncSelection: function() {
|
|
var me = this,
|
|
picker = me.picker,
|
|
selection, selModel,
|
|
values = me.valueModels || [],
|
|
vLen = values.length, v, value;
|
|
|
|
if (picker) {
|
|
// From the value, find the Models that are in the store's current data
|
|
selection = [];
|
|
for (v = 0; v < vLen; v++) {
|
|
value = values[v];
|
|
|
|
if (value && value.isModel && me.store.indexOf(value) >= 0) {
|
|
selection.push(value);
|
|
}
|
|
}
|
|
|
|
// Update the selection to match
|
|
me.ignoreSelection++;
|
|
selModel = picker.getSelectionModel();
|
|
selModel.deselectAll();
|
|
if (selection.length) {
|
|
selModel.select(selection, undefined, true);
|
|
}
|
|
me.ignoreSelection--;
|
|
}
|
|
},
|
|
|
|
onEditorTab: function(e){
|
|
var keyNav = this.listKeyNav;
|
|
|
|
if (this.selectOnTab && keyNav) {
|
|
keyNav.selectHighlighted(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.form.field.Spinner', {
|
|
override: 'Ext.form.field.Spinner',
|
|
|
|
getTriggerData: function(){
|
|
var data = this.callParent();
|
|
if (this.getHierarchyState().rtl) {
|
|
data.childElCls = this._rtlCls;
|
|
}
|
|
return data;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.form.field.Trigger', {
|
|
override: 'Ext.form.field.Trigger',
|
|
|
|
beforeRender: function(){
|
|
if (this.getHierarchyState().rtl) {
|
|
this.extraTriggerCls = this._rtlCls;
|
|
}
|
|
this.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.component.field.Trigger', {
|
|
override: 'Ext.layout.component.field.Trigger',
|
|
|
|
adjustIEInputPadding: function(ownerContext) {
|
|
var owner = this.owner;
|
|
|
|
// adjust for IE 6/7 strict content-box model
|
|
owner.inputCell.setStyle(
|
|
owner.getHierarchyState().rtl ? 'padding-left' : 'padding-right',
|
|
this.ieInputWidthAdjustment + 'px'
|
|
);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* A month picker component. This class is used by the {@link Ext.picker.Date Date picker} class
|
|
* to allow browsing and selection of year/months combinations.
|
|
*/
|
|
Ext.define('Ext.picker.Month', {
|
|
extend: Ext.Component ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alias: 'widget.monthpicker',
|
|
alternateClassName: 'Ext.MonthPicker',
|
|
|
|
childEls: [
|
|
'bodyEl', 'prevEl', 'nextEl', 'buttonsEl', 'monthEl', 'yearEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<div id="{id}-bodyEl" class="{baseCls}-body">',
|
|
'<div id="{id}-monthEl" class="{baseCls}-months">',
|
|
'<tpl for="months">',
|
|
'<div class="{parent.baseCls}-item {parent.baseCls}-month">',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a style="{parent.monthStyle}" hidefocus="on" class="{parent.baseCls}-item-inner" href="#">{.}</a>',
|
|
'</div>',
|
|
'</tpl>',
|
|
'</div>',
|
|
'<div id="{id}-yearEl" class="{baseCls}-years">',
|
|
'<div class="{baseCls}-yearnav">',
|
|
'<div class="{baseCls}-yearnav-button-ct">',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a id="{id}-prevEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-prev" href="#" hidefocus="on" ></a>',
|
|
'</div>',
|
|
'<div class="{baseCls}-yearnav-button-ct">',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a id="{id}-nextEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-next" href="#" hidefocus="on" ></a>',
|
|
'</div>',
|
|
'</div>',
|
|
'<tpl for="years">',
|
|
'<div class="{parent.baseCls}-item {parent.baseCls}-year">',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a hidefocus="on" class="{parent.baseCls}-item-inner" href="#">{.}</a>',
|
|
'</div>',
|
|
'</tpl>',
|
|
'</div>',
|
|
'<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
|
|
'</div>',
|
|
'<tpl if="showButtons">',
|
|
'<div id="{id}-buttonsEl" class="{baseCls}-buttons">{%',
|
|
'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;',
|
|
'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;',
|
|
'okBtn.ownerCt = cancelBtn.ownerCt = me;',
|
|
'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);',
|
|
'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);',
|
|
'%}</div>',
|
|
'</tpl>'
|
|
],
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} okText The text to display on the ok button.
|
|
*/
|
|
okText: 'OK',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} cancelText The text to display on the cancel button.
|
|
*/
|
|
cancelText: 'Cancel',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-monthpicker']
|
|
* The base CSS class to apply to the picker element.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'monthpicker',
|
|
|
|
/**
|
|
* @cfg {Boolean} showButtons True to show ok and cancel buttons below the picker.
|
|
*/
|
|
showButtons: true,
|
|
|
|
/**
|
|
* @cfg {String} [selectedCls='x-monthpicker-selected'] The class to be added to selected items in the picker.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Date/Number[]} value The default value to set. See {@link #setValue}
|
|
*/
|
|
|
|
measureWidth: 35,
|
|
measureMaxHeight: 20,
|
|
|
|
// used when attached to date picker which isnt showing buttons
|
|
smallCls: Ext.baseCSSPrefix + 'monthpicker-small',
|
|
|
|
// @private
|
|
totalYears: 10,
|
|
yearOffset: 5, // 10 years in total, 2 per row
|
|
monthOffset: 6, // 12 months, 2 per row
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
initComponent: function(){
|
|
var me = this;
|
|
|
|
me.selectedCls = me.baseCls + '-selected';
|
|
me.addEvents(
|
|
/**
|
|
* @event cancelclick
|
|
* Fires when the cancel button is pressed.
|
|
* @param {Ext.picker.Month} this
|
|
*/
|
|
'cancelclick',
|
|
|
|
/**
|
|
* @event monthclick
|
|
* Fires when a month is clicked.
|
|
* @param {Ext.picker.Month} this
|
|
* @param {Array} value The current value
|
|
*/
|
|
'monthclick',
|
|
|
|
/**
|
|
* @event monthdblclick
|
|
* Fires when a month is clicked.
|
|
* @param {Ext.picker.Month} this
|
|
* @param {Array} value The current value
|
|
*/
|
|
'monthdblclick',
|
|
|
|
/**
|
|
* @event okclick
|
|
* Fires when the ok button is pressed.
|
|
* @param {Ext.picker.Month} this
|
|
* @param {Array} value The current value
|
|
*/
|
|
'okclick',
|
|
|
|
/**
|
|
* @event select
|
|
* Fires when a month/year is selected.
|
|
* @param {Ext.picker.Month} this
|
|
* @param {Array} value The current value
|
|
*/
|
|
'select',
|
|
|
|
/**
|
|
* @event yearclick
|
|
* Fires when a year is clicked.
|
|
* @param {Ext.picker.Month} this
|
|
* @param {Array} value The current value
|
|
*/
|
|
'yearclick',
|
|
|
|
/**
|
|
* @event yeardblclick
|
|
* Fires when a year is clicked.
|
|
* @param {Ext.picker.Month} this
|
|
* @param {Array} value The current value
|
|
*/
|
|
'yeardblclick'
|
|
);
|
|
if (me.small) {
|
|
me.addCls(me.smallCls);
|
|
}
|
|
me.setValue(me.value);
|
|
me.activeYear = me.getYear(new Date().getFullYear() - 4, -4);
|
|
|
|
if (me.showButtons) {
|
|
me.okBtn = new Ext.button.Button({
|
|
text: me.okText,
|
|
handler: me.onOkClick,
|
|
scope: me
|
|
});
|
|
me.cancelBtn = new Ext.button.Button({
|
|
text: me.cancelText,
|
|
handler: me.onCancelClick,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
this.callParent();
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
beforeRender: function(){
|
|
var me = this,
|
|
i = 0,
|
|
months = [],
|
|
shortName = Ext.Date.getShortMonthName,
|
|
monthLen = me.monthOffset,
|
|
margin = me.monthMargin,
|
|
style = '';
|
|
|
|
me.callParent();
|
|
|
|
for (; i < monthLen; ++i) {
|
|
months.push(shortName(i), shortName(i + monthLen));
|
|
}
|
|
|
|
if (Ext.isDefined(margin)) {
|
|
style = 'margin: 0 ' + margin + 'px;';
|
|
}
|
|
|
|
Ext.apply(me.renderData, {
|
|
months: months,
|
|
years: me.getYears(),
|
|
showButtons: me.showButtons,
|
|
monthStyle: style
|
|
});
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
afterRender: function(){
|
|
var me = this,
|
|
body = me.bodyEl,
|
|
buttonsEl = me.buttonsEl;
|
|
|
|
me.callParent();
|
|
|
|
me.mon(body, 'click', me.onBodyClick, me);
|
|
me.mon(body, 'dblclick', me.onBodyClick, me);
|
|
|
|
// keep a reference to the year/month elements since we'll be re-using them
|
|
me.years = body.select('.' + me.baseCls + '-year a');
|
|
me.months = body.select('.' + me.baseCls + '-month a');
|
|
|
|
me.backRepeater = new Ext.util.ClickRepeater(me.prevEl, {
|
|
handler: Ext.Function.bind(me.adjustYear, me, [-me.totalYears])
|
|
});
|
|
|
|
me.prevEl.addClsOnOver(me.baseCls + '-yearnav-prev-over');
|
|
me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
|
|
handler: Ext.Function.bind(me.adjustYear, me, [me.totalYears])
|
|
});
|
|
me.nextEl.addClsOnOver(me.baseCls + '-yearnav-next-over');
|
|
me.updateBody();
|
|
|
|
if (!Ext.isDefined(me.monthMargin)) {
|
|
Ext.picker.Month.prototype.monthMargin = me.calculateMonthMargin();
|
|
}
|
|
},
|
|
|
|
calculateMonthMargin: function(){
|
|
// We use this method for locales where the short month name
|
|
// may be longer than we see in English. For example in the
|
|
// zh_TW locale the month ends up spanning lines, so we loosen
|
|
// the margins to get some extra space
|
|
var me = this,
|
|
monthEl = me.monthEl,
|
|
months = me.months,
|
|
first = months.first(),
|
|
itemMargin = first.getMargin('l');
|
|
|
|
while (itemMargin && me.getLargest() > me.measureMaxHeight) {
|
|
--itemMargin;
|
|
months.setStyle('margin', '0 ' + itemMargin + 'px');
|
|
}
|
|
return itemMargin;
|
|
},
|
|
|
|
getLargest: function(months){
|
|
var largest = 0;
|
|
this.months.each(function(item){
|
|
var h = item.getHeight();
|
|
if (h > largest) {
|
|
largest = h;
|
|
}
|
|
});
|
|
return largest;
|
|
|
|
},
|
|
|
|
/**
|
|
* Set the value for the picker.
|
|
* @param {Date/Number[]} value The value to set. It can be a Date object, where the month/year will be extracted, or
|
|
* it can be an array, with the month as the first index and the year as the second.
|
|
* @return {Ext.picker.Month} this
|
|
*/
|
|
setValue: function(value){
|
|
var me = this,
|
|
active = me.activeYear,
|
|
offset = me.monthOffset,
|
|
year,
|
|
index;
|
|
|
|
if (!value) {
|
|
me.value = [null, null];
|
|
} else if (Ext.isDate(value)) {
|
|
me.value = [value.getMonth(), value.getFullYear()];
|
|
} else {
|
|
me.value = [value[0], value[1]];
|
|
}
|
|
|
|
if (me.rendered) {
|
|
year = me.value[1];
|
|
if (year !== null) {
|
|
if ((year < active || year > active + me.yearOffset)) {
|
|
me.activeYear = year - me.yearOffset + 1;
|
|
}
|
|
}
|
|
me.updateBody();
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Gets the selected value. It is returned as an array [month, year]. It may
|
|
* be a partial value, for example [null, 2010]. The month is returned as
|
|
* 0 based.
|
|
* @return {Number[]} The selected value
|
|
*/
|
|
getValue: function(){
|
|
return this.value;
|
|
},
|
|
|
|
/**
|
|
* Checks whether the picker has a selection
|
|
* @return {Boolean} Returns true if both a month and year have been selected
|
|
*/
|
|
hasSelection: function(){
|
|
var value = this.value;
|
|
return value[0] !== null && value[1] !== null;
|
|
},
|
|
|
|
/**
|
|
* Get an array of years to be pushed in the template. It is not in strict
|
|
* numerical order because we want to show them in columns.
|
|
* @private
|
|
* @return {Number[]} An array of years
|
|
*/
|
|
getYears: function(){
|
|
var me = this,
|
|
offset = me.yearOffset,
|
|
start = me.activeYear, // put the "active" year on the left
|
|
end = start + offset,
|
|
i = start,
|
|
years = [];
|
|
|
|
for (; i < end; ++i) {
|
|
years.push(i, i + offset);
|
|
}
|
|
|
|
return years;
|
|
},
|
|
|
|
/**
|
|
* Update the years in the body based on any change
|
|
* @private
|
|
*/
|
|
updateBody: function(){
|
|
var me = this,
|
|
years = me.years,
|
|
months = me.months,
|
|
yearNumbers = me.getYears(),
|
|
cls = me.selectedCls,
|
|
value = me.getYear(null),
|
|
month = me.value[0],
|
|
monthOffset = me.monthOffset,
|
|
year,
|
|
yearItems, y, yLen, el;
|
|
|
|
if (me.rendered) {
|
|
years.removeCls(cls);
|
|
months.removeCls(cls);
|
|
|
|
yearItems = years.elements;
|
|
yLen = yearItems.length;
|
|
|
|
for (y = 0; y < yLen; y++) {
|
|
el = Ext.fly(yearItems[y]);
|
|
|
|
year = yearNumbers[y];
|
|
el.dom.innerHTML = year;
|
|
if (year == value) {
|
|
el.addCls(cls);
|
|
}
|
|
}
|
|
if (month !== null) {
|
|
if (month < monthOffset) {
|
|
month = month * 2;
|
|
} else {
|
|
month = (month - monthOffset) * 2 + 1;
|
|
}
|
|
months.item(month).addCls(cls);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the current year value, or the default.
|
|
* @private
|
|
* @param {Number} defaultValue The default value to use if the year is not defined.
|
|
* @param {Number} offset A number to offset the value by
|
|
* @return {Number} The year value
|
|
*/
|
|
getYear: function(defaultValue, offset) {
|
|
var year = this.value[1];
|
|
offset = offset || 0;
|
|
return year === null ? defaultValue : year + offset;
|
|
},
|
|
|
|
/**
|
|
* React to clicks on the body
|
|
* @private
|
|
*/
|
|
onBodyClick: function(e, t) {
|
|
var me = this,
|
|
isDouble = e.type == 'dblclick';
|
|
|
|
if (e.getTarget('.' + me.baseCls + '-month')) {
|
|
e.stopEvent();
|
|
me.onMonthClick(t, isDouble);
|
|
} else if (e.getTarget('.' + me.baseCls + '-year')) {
|
|
e.stopEvent();
|
|
me.onYearClick(t, isDouble);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Modify the year display by passing an offset.
|
|
* @param {Number} [offset=10] The offset to move by.
|
|
*/
|
|
adjustYear: function(offset){
|
|
if (typeof offset != 'number') {
|
|
offset = this.totalYears;
|
|
}
|
|
this.activeYear += offset;
|
|
this.updateBody();
|
|
},
|
|
|
|
/**
|
|
* React to the ok button being pressed
|
|
* @private
|
|
*/
|
|
onOkClick: function(){
|
|
this.fireEvent('okclick', this, this.value);
|
|
},
|
|
|
|
/**
|
|
* React to the cancel button being pressed
|
|
* @private
|
|
*/
|
|
onCancelClick: function(){
|
|
this.fireEvent('cancelclick', this);
|
|
},
|
|
|
|
/**
|
|
* React to a month being clicked
|
|
* @private
|
|
* @param {HTMLElement} target The element that was clicked
|
|
* @param {Boolean} isDouble True if the event was a doubleclick
|
|
*/
|
|
onMonthClick: function(target, isDouble){
|
|
var me = this;
|
|
me.value[0] = me.resolveOffset(me.months.indexOf(target), me.monthOffset);
|
|
me.updateBody();
|
|
me.fireEvent('month' + (isDouble ? 'dbl' : '') + 'click', me, me.value);
|
|
me.fireEvent('select', me, me.value);
|
|
},
|
|
|
|
/**
|
|
* React to a year being clicked
|
|
* @private
|
|
* @param {HTMLElement} target The element that was clicked
|
|
* @param {Boolean} isDouble True if the event was a doubleclick
|
|
*/
|
|
onYearClick: function(target, isDouble){
|
|
var me = this;
|
|
me.value[1] = me.activeYear + me.resolveOffset(me.years.indexOf(target), me.yearOffset);
|
|
me.updateBody();
|
|
me.fireEvent('year' + (isDouble ? 'dbl' : '') + 'click', me, me.value);
|
|
me.fireEvent('select', me, me.value);
|
|
|
|
},
|
|
|
|
/**
|
|
* Returns an offsetted number based on the position in the collection. Since our collections aren't
|
|
* numerically ordered, this function helps to normalize those differences.
|
|
* @private
|
|
* @param {Object} index
|
|
* @param {Object} offset
|
|
* @return {Number} The correctly offsetted number
|
|
*/
|
|
resolveOffset: function(index, offset){
|
|
if (index % 2 === 0) {
|
|
return (index / 2);
|
|
} else {
|
|
return offset + Math.floor(index / 2);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
beforeDestroy: function(){
|
|
var me = this;
|
|
me.years = me.months = null;
|
|
Ext.destroyMembers(me, 'backRepeater', 'nextRepeater', 'okBtn', 'cancelBtn');
|
|
me.callParent();
|
|
},
|
|
|
|
// Do the job of a container layout at this point even though we are not a Container.
|
|
// TODO: Refactor as a Container.
|
|
finishRenderChildren: function () {
|
|
var me = this;
|
|
|
|
this.callParent(arguments);
|
|
|
|
if (this.showButtons) {
|
|
me.okBtn.finishRender();
|
|
me.cancelBtn.finishRender();
|
|
}
|
|
},
|
|
|
|
onDestroy: function() {
|
|
Ext.destroyMembers(this, 'okBtn', 'cancelBtn');
|
|
this.callParent();
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* A date picker. This class is used by the Ext.form.field.Date field to allow browsing and selection of valid
|
|
* dates in a popup next to the field, but may also be used with other components.
|
|
*
|
|
* Typically you will need to implement a handler function to be notified when the user chooses a date from the picker;
|
|
* you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.
|
|
*
|
|
* By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
|
|
* {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.
|
|
*
|
|
* All the string values documented below may be overridden by including an Ext locale file in your page.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Choose a future date:',
|
|
* width: 200,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* items: [{
|
|
* xtype: 'datepicker',
|
|
* minDate: new Date(),
|
|
* handler: function(picker, date) {
|
|
* // do something with the selected date
|
|
* }
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.picker.Date', {
|
|
extend: Ext.Component ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alias: 'widget.datepicker',
|
|
alternateClassName: 'Ext.DatePicker',
|
|
|
|
childEls: [
|
|
'innerEl', 'eventEl', 'prevEl', 'nextEl', 'middleBtnEl', 'footerEl'
|
|
],
|
|
|
|
border: true,
|
|
|
|
renderTpl: [
|
|
'<div id="{id}-innerEl" role="grid">',
|
|
'<div role="presentation" class="{baseCls}-header">',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',
|
|
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',
|
|
'</div>',
|
|
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
|
|
'<thead role="presentation"><tr role="row">',
|
|
'<tpl for="dayNames">',
|
|
'<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
|
|
'<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
|
|
'</th>',
|
|
'</tpl>',
|
|
'</tr></thead>',
|
|
'<tbody role="presentation"><tr role="row">',
|
|
'<tpl for="days">',
|
|
'{#:this.isEndOfWeek}',
|
|
'<td role="gridcell" id="{[Ext.id()]}">',
|
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
|
'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
|
|
'</td>',
|
|
'</tpl>',
|
|
'</tr></tbody>',
|
|
'</table>',
|
|
'<tpl if="showToday">',
|
|
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
|
|
'</tpl>',
|
|
'</div>',
|
|
{
|
|
firstInitial: function(value) {
|
|
return Ext.picker.Date.prototype.getDayInitial(value);
|
|
},
|
|
isEndOfWeek: function(value) {
|
|
// convert from 1 based index to 0 based
|
|
// by decrementing value once.
|
|
value--;
|
|
var end = value % 7 === 0 && value !== 0;
|
|
return end ? '</tr><tr role="row">' : '';
|
|
},
|
|
renderTodayBtn: function(values, out) {
|
|
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
|
|
},
|
|
renderMonthBtn: function(values, out) {
|
|
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
|
|
}
|
|
}
|
|
],
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} todayText
|
|
* The text to display on the button that selects the current date
|
|
*/
|
|
todayText : 'Today',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} ariaTitle
|
|
* The text to display for the aria title
|
|
*/
|
|
ariaTitle: 'Date Picker: {0}',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} ariaTitleDateFormat
|
|
* The date format to display for the current value in the {@link #ariaTitle}
|
|
*/
|
|
ariaTitleDateFormat: 'F d, Y',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Function} handler
|
|
* Optional. A function that will handle the select event of this picker. The handler is passed the following
|
|
* parameters:
|
|
*
|
|
* - `picker` : Ext.picker.Date
|
|
*
|
|
* This Date picker.
|
|
*
|
|
* - `date` : Date
|
|
*
|
|
* The selected date.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope (`this` reference) in which the `{@link #handler}` function will be called.
|
|
*
|
|
* Defaults to this DatePicker instance.
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} todayTip
|
|
* A string used to format the message for displaying in a tooltip over the button that selects the current date.
|
|
* The `{0}` token in string is replaced by today's date.
|
|
*/
|
|
todayTip : '{0} (Spacebar)',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} minText
|
|
* The error text to display if the minDate validation fails.
|
|
*/
|
|
minText : 'This date is before the minimum date',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} maxText
|
|
* The error text to display if the maxDate validation fails.
|
|
*/
|
|
maxText : 'This date is after the maximum date',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} format
|
|
* The default date format string which can be overriden for localization support. The format must be valid
|
|
* according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} disabledDaysText
|
|
* The tooltip to display when the date falls on a disabled day.
|
|
*/
|
|
disabledDaysText : 'Disabled',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} disabledDatesText
|
|
* The tooltip text to display when the date falls on a disabled date.
|
|
*/
|
|
disabledDatesText : 'Disabled',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String[]} monthNames
|
|
* An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
|
|
* @deprecated This config is deprecated. In future the month names will be retrieved from {@link Ext.Date}
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String[]} dayNames
|
|
* An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
|
|
* @deprecated This config is deprecated. In future the day names will be retrieved from {@link Ext.Date}
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} nextText
|
|
* The next month navigation button tooltip
|
|
*/
|
|
nextText : 'Next Month (Control+Right)',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} prevText
|
|
* The previous month navigation button tooltip
|
|
*/
|
|
prevText : 'Previous Month (Control+Left)',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} monthYearText
|
|
* The header month selector tooltip
|
|
*/
|
|
monthYearText : 'Choose a month (Control+Up/Down to move years)',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} monthYearFormat
|
|
* The date format for the header month
|
|
*/
|
|
monthYearFormat: 'F Y',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {Number} [startDay=undefined]
|
|
* Day index at which the week should begin, 0-based.
|
|
*
|
|
* Defaults to `0` (Sunday).
|
|
*/
|
|
startDay : 0,
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {Boolean} showToday
|
|
* False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that
|
|
* selects the current date.
|
|
*/
|
|
showToday : true,
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Date} [minDate=null]
|
|
* Minimum allowable date (JavaScript date object)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Date} [maxDate=null]
|
|
* Maximum allowable date (JavaScript date object)
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number[]} [disabledDays=null]
|
|
* An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {RegExp} [disabledDatesRE=null]
|
|
* JavaScript regular expression used to disable a pattern of dates. The {@link #disabledDates}
|
|
* config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
|
|
* disabledDates value.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String[]} disabledDates
|
|
* An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular expression so
|
|
* they are very powerful. Some examples:
|
|
*
|
|
* - ['03/08/2003', '09/16/2003'] would disable those exact dates
|
|
* - ['03/08', '09/16'] would disable those days for every year
|
|
* - ['^03/08'] would only match the beginning (useful if you are using short years)
|
|
* - ['03/../2006'] would disable every day in March 2006
|
|
* - ['^03'] would disable every day in every March
|
|
*
|
|
* Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
|
|
* to support regular expressions, if you are using a date format that has '.' in it, you will have to escape the
|
|
* dot when restricting dates. For example: ['03\\.08\\.03'].
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} disableAnim
|
|
* True to disable animations when showing the month picker.
|
|
*/
|
|
disableAnim: false,
|
|
|
|
/**
|
|
* @cfg {String} [baseCls='x-datepicker']
|
|
* The base CSS class to apply to this components element.
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'datepicker',
|
|
|
|
/**
|
|
* @cfg {String} [selectedCls='x-datepicker-selected']
|
|
* The class to apply to the selected cell.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [disabledCellCls='x-datepicker-disabled']
|
|
* The class to apply to disabled cells.
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} longDayFormat
|
|
* The format for displaying a date in a longer format.
|
|
*/
|
|
longDayFormat: 'F d, Y',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Object} keyNavConfig
|
|
* Specifies optional custom key event handlers for the {@link Ext.util.KeyNav} attached to this date picker. Must
|
|
* conform to the config format recognized by the {@link Ext.util.KeyNav} constructor. Handlers specified in this
|
|
* object will replace default handlers of the same name.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} focusOnShow
|
|
* True to automatically focus the picker on show.
|
|
*/
|
|
focusOnShow: false,
|
|
|
|
// @private
|
|
// Set by other components to stop the picker focus being updated when the value changes.
|
|
focusOnSelect: true,
|
|
|
|
// Default value used to initialise each date in the DatePicker.
|
|
// __Note:__ 12 noon was chosen because it steers well clear of all DST timezone changes.
|
|
initHour: 12, // 24-hour format
|
|
|
|
numDays: 42,
|
|
|
|
// private, inherit docs
|
|
initComponent : function() {
|
|
var me = this,
|
|
clearTime = Ext.Date.clearTime;
|
|
|
|
me.selectedCls = me.baseCls + '-selected';
|
|
me.disabledCellCls = me.baseCls + '-disabled';
|
|
me.prevCls = me.baseCls + '-prevday';
|
|
me.activeCls = me.baseCls + '-active';
|
|
me.cellCls = me.baseCls + '-cell';
|
|
me.nextCls = me.baseCls + '-prevday';
|
|
me.todayCls = me.baseCls + '-today';
|
|
|
|
|
|
if (!me.format) {
|
|
me.format = Ext.Date.defaultFormat;
|
|
}
|
|
if (!me.dayNames) {
|
|
me.dayNames = Ext.Date.dayNames;
|
|
}
|
|
me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));
|
|
|
|
me.callParent();
|
|
|
|
me.value = me.value ?
|
|
clearTime(me.value, true) : clearTime(new Date());
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event select
|
|
* Fires when a date is selected
|
|
* @param {Ext.picker.Date} this DatePicker
|
|
* @param {Date} date The selected date
|
|
*/
|
|
'select'
|
|
);
|
|
|
|
me.initDisabledDays();
|
|
},
|
|
|
|
beforeRender: function () {
|
|
/*
|
|
* days array for looping through 6 full weeks (6 weeks * 7 days)
|
|
* Note that we explicitly force the size here so the template creates
|
|
* all the appropriate cells.
|
|
*/
|
|
var me = this,
|
|
days = new Array(me.numDays),
|
|
today = Ext.Date.format(new Date(), me.format);
|
|
|
|
// If there's a Menu among our ancestors, then add the menu class.
|
|
// This is so that the MenuManager does not see a mousedown in this Component as a document mousedown, outside the Menu
|
|
if (me.up('menu')) {
|
|
me.addCls(Ext.baseCSSPrefix + 'menu');
|
|
}
|
|
|
|
me.monthBtn = new Ext.button.Split({
|
|
ownerCt: me,
|
|
ownerLayout: me.getComponentLayout(),
|
|
text: '',
|
|
tooltip: me.monthYearText,
|
|
listeners: {
|
|
click: me.showMonthPicker,
|
|
arrowclick: me.showMonthPicker,
|
|
scope: me
|
|
}
|
|
});
|
|
|
|
if (me.showToday) {
|
|
me.todayBtn = new Ext.button.Button({
|
|
ownerCt: me,
|
|
ownerLayout: me.getComponentLayout(),
|
|
text: Ext.String.format(me.todayText, today),
|
|
tooltip: Ext.String.format(me.todayTip, today),
|
|
tooltipType: 'title',
|
|
handler: me.selectToday,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
me.callParent();
|
|
|
|
Ext.applyIf(me, {
|
|
renderData: {}
|
|
});
|
|
|
|
Ext.apply(me.renderData, {
|
|
dayNames: me.dayNames,
|
|
showToday: me.showToday,
|
|
prevText: me.prevText,
|
|
nextText: me.nextText,
|
|
days: days
|
|
});
|
|
|
|
me.protoEl.unselectable();
|
|
},
|
|
|
|
// Do the job of a container layout at this point even though we are not a Container.
|
|
// TODO: Refactor as a Container.
|
|
finishRenderChildren: function () {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
me.monthBtn.finishRender();
|
|
if (me.showToday) {
|
|
me.todayBtn.finishRender();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
onRender : function(container, position){
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.cells = me.eventEl.select('tbody td');
|
|
me.textNodes = me.eventEl.query('tbody td a');
|
|
|
|
me.mon(me.eventEl, {
|
|
scope: me,
|
|
mousewheel: me.handleMouseWheel,
|
|
click: {
|
|
fn: me.handleDateClick,
|
|
delegate: 'a.' + me.baseCls + '-date'
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
initEvents: function(){
|
|
var me = this,
|
|
eDate = Ext.Date,
|
|
day = eDate.DAY;
|
|
|
|
me.callParent();
|
|
|
|
me.prevRepeater = new Ext.util.ClickRepeater(me.prevEl, {
|
|
handler: me.showPrevMonth,
|
|
scope: me,
|
|
preventDefault: true,
|
|
stopDefault: true
|
|
});
|
|
|
|
me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
|
|
handler: me.showNextMonth,
|
|
scope: me,
|
|
preventDefault:true,
|
|
stopDefault:true
|
|
});
|
|
|
|
me.keyNav = new Ext.util.KeyNav(me.eventEl, Ext.apply({
|
|
scope: me,
|
|
left : function(e){
|
|
if(e.ctrlKey){
|
|
me.showPrevMonth();
|
|
}else{
|
|
me.update(eDate.add(me.activeDate, day, -1));
|
|
}
|
|
},
|
|
|
|
right : function(e){
|
|
if(e.ctrlKey){
|
|
me.showNextMonth();
|
|
}else{
|
|
me.update(eDate.add(me.activeDate, day, 1));
|
|
}
|
|
},
|
|
|
|
up : function(e){
|
|
if(e.ctrlKey){
|
|
me.showNextYear();
|
|
}else{
|
|
me.update(eDate.add(me.activeDate, day, -7));
|
|
}
|
|
},
|
|
|
|
down : function(e){
|
|
if(e.ctrlKey){
|
|
me.showPrevYear();
|
|
}else{
|
|
me.update(eDate.add(me.activeDate, day, 7));
|
|
}
|
|
},
|
|
|
|
pageUp:function (e) {
|
|
if (e.altKey) {
|
|
me.showPrevYear();
|
|
} else {
|
|
me.showPrevMonth();
|
|
}
|
|
},
|
|
|
|
pageDown:function (e) {
|
|
if (e.altKey) {
|
|
me.showNextYear();
|
|
} else {
|
|
me.showNextMonth();
|
|
}
|
|
},
|
|
|
|
tab:function (e) {
|
|
me.doCancelFieldFocus = true;
|
|
me.handleTabClick(e);
|
|
delete me.doCancelFieldFocus;
|
|
return true;
|
|
},
|
|
|
|
enter : function(e){
|
|
e.stopPropagation();
|
|
return true;
|
|
},
|
|
|
|
//space: ???
|
|
|
|
home:function (e) {
|
|
me.update(eDate.getFirstDateOfMonth(me.activeDate));
|
|
},
|
|
|
|
end:function (e) {
|
|
me.update(eDate.getLastDateOfMonth(me.activeDate));
|
|
}
|
|
}, me.keyNavConfig));
|
|
|
|
if (me.showToday) {
|
|
me.todayKeyListener = me.eventEl.addKeyListener(Ext.EventObject.SPACE, me.selectToday, me);
|
|
}
|
|
me.update(me.value);
|
|
},
|
|
|
|
handleTabClick:function (e) {
|
|
var me = this,
|
|
t = me.getSelectedDate(me.activeDate),
|
|
handler = me.handler;
|
|
|
|
// The following code is like handleDateClick without the e.stopEvent()
|
|
if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
|
|
me.doCancelFocus = me.focusOnSelect === false;
|
|
me.setValue(new Date(t.dateValue));
|
|
delete me.doCancelFocus;
|
|
me.fireEvent('select', me, me.value);
|
|
if (handler) {
|
|
handler.call(me.scope || me, me, me.value);
|
|
}
|
|
me.onSelect();
|
|
}
|
|
},
|
|
|
|
getSelectedDate:function (date) {
|
|
var me = this,
|
|
t = date.getTime(),
|
|
cells = me.cells,
|
|
cls = me.selectedCls,
|
|
cellItems = cells.elements,
|
|
c,
|
|
cLen = cellItems.length,
|
|
cell;
|
|
|
|
cells.removeCls(cls);
|
|
|
|
for (c = 0; c < cLen; c++) {
|
|
cell = Ext.fly(cellItems[c]);
|
|
|
|
if (cell.dom.firstChild.dateValue == t) {
|
|
return cell.dom.firstChild;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Setup the disabled dates regex based on config options
|
|
* @private
|
|
*/
|
|
initDisabledDays : function(){
|
|
var me = this,
|
|
dd = me.disabledDates,
|
|
re = '(?:',
|
|
len,
|
|
d, dLen, dI;
|
|
|
|
if(!me.disabledDatesRE && dd){
|
|
len = dd.length - 1;
|
|
|
|
dLen = dd.length;
|
|
|
|
for (d = 0; d < dLen; d++) {
|
|
dI = dd[d];
|
|
|
|
re += Ext.isDate(dI) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(dI, me.format)) + '$' : dI;
|
|
if (d != len) {
|
|
re += '|';
|
|
}
|
|
}
|
|
|
|
me.disabledDatesRE = new RegExp(re + ')');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing disabled dates with new values and refreshes the DatePicker.
|
|
* @param {String[]/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config for
|
|
* details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
setDisabledDates : function(dd){
|
|
var me = this;
|
|
|
|
if(Ext.isArray(dd)){
|
|
me.disabledDates = dd;
|
|
me.disabledDatesRE = null;
|
|
}else{
|
|
me.disabledDatesRE = dd;
|
|
}
|
|
me.initDisabledDays();
|
|
me.update(me.value, true);
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
|
|
* @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details
|
|
* on supported values.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
setDisabledDays : function(dd){
|
|
this.disabledDays = dd;
|
|
return this.update(this.value, true);
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
|
|
* @param {Date} value The minimum date that can be selected
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
setMinDate : function(dt){
|
|
this.minDate = dt;
|
|
return this.update(this.value, true);
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
|
|
* @param {Date} value The maximum date that can be selected
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
setMaxDate : function(dt){
|
|
this.maxDate = dt;
|
|
return this.update(this.value, true);
|
|
},
|
|
|
|
/**
|
|
* Sets the value of the date field
|
|
* @param {Date} value The date to set
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
setValue : function(value){
|
|
this.value = Ext.Date.clearTime(value, true);
|
|
return this.update(this.value);
|
|
},
|
|
|
|
/**
|
|
* Gets the current selected value of the date field
|
|
* @return {Date} The selected date
|
|
*/
|
|
getValue : function(){
|
|
return this.value;
|
|
},
|
|
|
|
//<locale type="function">
|
|
/**
|
|
* Gets a single character to represent the day of the week
|
|
* @return {String} The character
|
|
*/
|
|
getDayInitial: function(value){
|
|
return value.substr(0,1);
|
|
},
|
|
//</locale>
|
|
|
|
// @private
|
|
focus : function(){
|
|
this.update(this.activeDate);
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
onEnable: function(){
|
|
this.callParent();
|
|
this.setDisabledStatus(false);
|
|
this.update(this.activeDate);
|
|
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
onDisable : function(){
|
|
this.callParent();
|
|
this.setDisabledStatus(true);
|
|
},
|
|
|
|
/**
|
|
* Set the disabled state of various internal components
|
|
* @private
|
|
* @param {Boolean} disabled
|
|
*/
|
|
setDisabledStatus : function(disabled){
|
|
var me = this;
|
|
|
|
me.keyNav.setDisabled(disabled);
|
|
me.prevRepeater.setDisabled(disabled);
|
|
me.nextRepeater.setDisabled(disabled);
|
|
if (me.showToday) {
|
|
me.todayKeyListener.setDisabled(disabled);
|
|
me.todayBtn.setDisabled(disabled);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get the current active date.
|
|
* @private
|
|
* @return {Date} The active date
|
|
*/
|
|
getActive: function(){
|
|
return this.activeDate || this.value;
|
|
},
|
|
|
|
/**
|
|
* Run any animation required to hide/show the month picker.
|
|
* @private
|
|
* @param {Boolean} isHide True if it's a hide operation
|
|
*/
|
|
runAnimation: function(isHide){
|
|
var picker = this.monthPicker,
|
|
options = {
|
|
duration: 200,
|
|
callback: function(){
|
|
if (isHide) {
|
|
picker.hide();
|
|
} else {
|
|
picker.show();
|
|
}
|
|
}
|
|
};
|
|
|
|
if (isHide) {
|
|
picker.el.slideOut('t', options);
|
|
} else {
|
|
picker.el.slideIn('t', options);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides the month picker, if it's visible.
|
|
* @param {Boolean} [animate] Indicates whether to animate this action. If the animate
|
|
* parameter is not specified, the behavior will use {@link #disableAnim} to determine
|
|
* whether to animate or not.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
hideMonthPicker : function(animate){
|
|
var me = this,
|
|
picker = me.monthPicker;
|
|
|
|
if (picker) {
|
|
if (me.shouldAnimate(animate)) {
|
|
me.runAnimation(true);
|
|
} else {
|
|
picker.hide();
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Show the month picker
|
|
* @param {Boolean} [animate] Indicates whether to animate this action. If the animate
|
|
* parameter is not specified, the behavior will use {@link #disableAnim} to determine
|
|
* whether to animate or not.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
showMonthPicker : function(animate){
|
|
var me = this,
|
|
picker;
|
|
|
|
if (me.rendered && !me.disabled) {
|
|
picker = me.createMonthPicker();
|
|
picker.setValue(me.getActive());
|
|
picker.setSize(me.getSize());
|
|
picker.setPosition(-1, -1);
|
|
if (me.shouldAnimate(animate)) {
|
|
me.runAnimation(false);
|
|
} else {
|
|
picker.show();
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Checks whether a hide/show action should animate
|
|
* @private
|
|
* @param {Boolean} [animate] A possible animation value
|
|
* @return {Boolean} Whether to animate the action
|
|
*/
|
|
shouldAnimate: function(animate){
|
|
return Ext.isDefined(animate) ? animate : !this.disableAnim;
|
|
},
|
|
|
|
/**
|
|
* Create the month picker instance
|
|
* @private
|
|
* @return {Ext.picker.Month} picker
|
|
*/
|
|
createMonthPicker: function(){
|
|
var me = this,
|
|
picker = me.monthPicker;
|
|
|
|
if (!picker) {
|
|
me.monthPicker = picker = new Ext.picker.Month({
|
|
renderTo: me.el,
|
|
floating: true,
|
|
shadow: false,
|
|
small: me.showToday === false,
|
|
listeners: {
|
|
scope: me,
|
|
cancelclick: me.onCancelClick,
|
|
okclick: me.onOkClick,
|
|
yeardblclick: me.onOkClick,
|
|
monthdblclick: me.onOkClick
|
|
}
|
|
});
|
|
if (!me.disableAnim) {
|
|
// hide the element if we're animating to prevent an initial flicker
|
|
picker.el.setStyle('display', 'none');
|
|
}
|
|
me.on('beforehide', Ext.Function.bind(me.hideMonthPicker, me, [false]));
|
|
}
|
|
return picker;
|
|
},
|
|
|
|
/**
|
|
* Respond to an ok click on the month picker
|
|
* @private
|
|
*/
|
|
onOkClick: function(picker, value){
|
|
var me = this,
|
|
month = value[0],
|
|
year = value[1],
|
|
date = new Date(year, month, me.getActive().getDate());
|
|
|
|
if (date.getMonth() !== month) {
|
|
// 'fix' the JS rolling date conversion if needed
|
|
date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
|
|
}
|
|
me.setValue(date);
|
|
me.hideMonthPicker();
|
|
},
|
|
|
|
/**
|
|
* Respond to a cancel click on the month picker
|
|
* @private
|
|
*/
|
|
onCancelClick: function(){
|
|
// update the selected value, also triggers a focus
|
|
this.selectedUpdate(this.activeDate);
|
|
this.hideMonthPicker();
|
|
},
|
|
|
|
/**
|
|
* Show the previous month.
|
|
* @param {Object} e
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
showPrevMonth : function(e){
|
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
|
|
},
|
|
|
|
/**
|
|
* Show the next month.
|
|
* @param {Object} e
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
showNextMonth : function(e){
|
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
|
|
},
|
|
|
|
/**
|
|
* Show the previous year.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
showPrevYear : function(){
|
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
|
|
},
|
|
|
|
/**
|
|
* Show the next year.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
showNextYear : function(){
|
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
|
|
},
|
|
|
|
/**
|
|
* Respond to the mouse wheel event
|
|
* @private
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
handleMouseWheel : function(e){
|
|
e.stopEvent();
|
|
if(!this.disabled){
|
|
var delta = e.getWheelDelta();
|
|
if(delta > 0){
|
|
this.showPrevMonth();
|
|
} else if(delta < 0){
|
|
this.showNextMonth();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Respond to a date being clicked in the picker
|
|
* @private
|
|
* @param {Ext.EventObject} e
|
|
* @param {HTMLElement} t
|
|
*/
|
|
handleDateClick : function(e, t){
|
|
var me = this,
|
|
handler = me.handler;
|
|
|
|
e.stopEvent();
|
|
if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){
|
|
me.doCancelFocus = me.focusOnSelect === false;
|
|
me.setValue(new Date(t.dateValue));
|
|
delete me.doCancelFocus;
|
|
me.fireEvent('select', me, me.value);
|
|
if (handler) {
|
|
handler.call(me.scope || me, me, me.value);
|
|
}
|
|
// event handling is turned off on hide
|
|
// when we are using the picker in a field
|
|
// therefore onSelect comes AFTER the select
|
|
// event.
|
|
me.onSelect();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Perform any post-select actions
|
|
* @private
|
|
*/
|
|
onSelect: function() {
|
|
if (this.hideOnSelect) {
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the current value to today.
|
|
* @return {Ext.picker.Date} this
|
|
*/
|
|
selectToday : function(){
|
|
var me = this,
|
|
btn = me.todayBtn,
|
|
handler = me.handler;
|
|
|
|
if(btn && !btn.disabled){
|
|
me.setValue(Ext.Date.clearTime(new Date()));
|
|
me.fireEvent('select', me, me.value);
|
|
if (handler) {
|
|
handler.call(me.scope || me, me, me.value);
|
|
}
|
|
me.onSelect();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Update the selected cell
|
|
* @private
|
|
* @param {Date} date The new date
|
|
*/
|
|
selectedUpdate: function(date){
|
|
var me = this,
|
|
t = date.getTime(),
|
|
cells = me.cells,
|
|
cls = me.selectedCls,
|
|
cellItems = cells.elements,
|
|
c,
|
|
cLen = cellItems.length,
|
|
cell;
|
|
|
|
cells.removeCls(cls);
|
|
|
|
for (c = 0; c < cLen; c++) {
|
|
cell = Ext.fly(cellItems[c]);
|
|
|
|
if (cell.dom.firstChild.dateValue == t) {
|
|
me.fireEvent('highlightitem', me, cell);
|
|
cell.addCls(cls);
|
|
|
|
if(me.isVisible() && !me.doCancelFocus){
|
|
Ext.fly(cell.dom.firstChild).focus(50);
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Update the contents of the picker for a new month
|
|
* @private
|
|
* @param {Date} date The new date
|
|
*/
|
|
fullUpdate: function(date){
|
|
var me = this,
|
|
cells = me.cells.elements,
|
|
textNodes = me.textNodes,
|
|
disabledCls = me.disabledCellCls,
|
|
eDate = Ext.Date,
|
|
i = 0,
|
|
extraDays = 0,
|
|
visible = me.isVisible(),
|
|
newDate = +eDate.clearTime(date, true),
|
|
today = +eDate.clearTime(new Date()),
|
|
min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
|
|
max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
|
|
ddMatch = me.disabledDatesRE,
|
|
ddText = me.disabledDatesText,
|
|
ddays = me.disabledDays ? me.disabledDays.join('') : false,
|
|
ddaysText = me.disabledDaysText,
|
|
format = me.format,
|
|
days = eDate.getDaysInMonth(date),
|
|
firstOfMonth = eDate.getFirstDateOfMonth(date),
|
|
startingPos = firstOfMonth.getDay() - me.startDay,
|
|
previousMonth = eDate.add(date, eDate.MONTH, -1),
|
|
longDayFormat = me.longDayFormat,
|
|
prevStart,
|
|
current,
|
|
disableToday,
|
|
tempDate,
|
|
setCellClass,
|
|
html,
|
|
cls,
|
|
formatValue,
|
|
value;
|
|
|
|
if (startingPos < 0) {
|
|
startingPos += 7;
|
|
}
|
|
|
|
days += startingPos;
|
|
prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
|
|
current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);
|
|
|
|
if (me.showToday) {
|
|
tempDate = eDate.clearTime(new Date());
|
|
disableToday = (tempDate < min || tempDate > max ||
|
|
(ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
|
|
(ddays && ddays.indexOf(tempDate.getDay()) != -1));
|
|
|
|
if (!me.disabled) {
|
|
me.todayBtn.setDisabled(disableToday);
|
|
me.todayKeyListener.setDisabled(disableToday);
|
|
}
|
|
}
|
|
|
|
setCellClass = function(cell, cls){
|
|
value = +eDate.clearTime(current, true);
|
|
cell.title = eDate.format(current, longDayFormat);
|
|
// store dateValue number as an expando
|
|
cell.firstChild.dateValue = value;
|
|
if(value == today){
|
|
cls += ' ' + me.todayCls;
|
|
cell.title = me.todayText;
|
|
|
|
// Extra element for ARIA purposes
|
|
me.todayElSpan = Ext.DomHelper.append(cell.firstChild, {
|
|
tag:'span',
|
|
cls: Ext.baseCSSPrefix + 'hide-clip',
|
|
html:me.todayText
|
|
}, true);
|
|
}
|
|
if(value == newDate) {
|
|
cls += ' ' + me.selectedCls;
|
|
me.fireEvent('highlightitem', me, cell);
|
|
if (visible && me.floating) {
|
|
Ext.fly(cell.firstChild).focus(50);
|
|
}
|
|
}
|
|
|
|
if (value < min) {
|
|
cls += ' ' + disabledCls;
|
|
cell.title = me.minText;
|
|
}
|
|
else if (value > max) {
|
|
cls += ' ' + disabledCls;
|
|
cell.title = me.maxText;
|
|
}
|
|
else if (ddays && ddays.indexOf(current.getDay()) !== -1){
|
|
cell.title = ddaysText;
|
|
cls += ' ' + disabledCls;
|
|
}
|
|
else if (ddMatch && format){
|
|
formatValue = eDate.dateFormat(current, format);
|
|
if(ddMatch.test(formatValue)){
|
|
cell.title = ddText.replace('%0', formatValue);
|
|
cls += ' ' + disabledCls;
|
|
}
|
|
}
|
|
cell.className = cls + ' ' + me.cellCls;
|
|
};
|
|
|
|
for(; i < me.numDays; ++i) {
|
|
if (i < startingPos) {
|
|
html = (++prevStart);
|
|
cls = me.prevCls;
|
|
} else if (i >= days) {
|
|
html = (++extraDays);
|
|
cls = me.nextCls;
|
|
} else {
|
|
html = i - startingPos + 1;
|
|
cls = me.activeCls;
|
|
}
|
|
textNodes[i].innerHTML = html;
|
|
current.setDate(current.getDate() + 1);
|
|
setCellClass(cells[i], cls);
|
|
}
|
|
|
|
me.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));
|
|
},
|
|
|
|
/**
|
|
* Update the contents of the picker
|
|
* @private
|
|
* @param {Date} date The new date
|
|
* @param {Boolean} forceRefresh True to force a full refresh
|
|
*/
|
|
update : function(date, forceRefresh){
|
|
var me = this,
|
|
active = me.activeDate;
|
|
|
|
if (me.rendered) {
|
|
me.activeDate = date;
|
|
if(!forceRefresh && active && me.el && active.getMonth() == date.getMonth() && active.getFullYear() == date.getFullYear()){
|
|
me.selectedUpdate(date, active);
|
|
} else {
|
|
me.fullUpdate(date, active);
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
beforeDestroy : function() {
|
|
var me = this;
|
|
|
|
if (me.rendered) {
|
|
Ext.destroy(
|
|
me.todayKeyListener,
|
|
me.keyNav,
|
|
me.monthPicker,
|
|
me.monthBtn,
|
|
me.nextRepeater,
|
|
me.prevRepeater,
|
|
me.todayBtn
|
|
);
|
|
delete me.textNodes;
|
|
delete me.cells.elements;
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
// @private
|
|
// @inheritdoc
|
|
onShow: function() {
|
|
this.callParent(arguments);
|
|
if (this.focusOnShow) {
|
|
this.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* Provides a date input field with a {@link Ext.picker.Date date picker} dropdown and automatic date
|
|
* validation.
|
|
*
|
|
* This field recognizes and uses the JavaScript Date object as its main {@link #value} type. In addition,
|
|
* it recognizes string values which are parsed according to the {@link #format} and/or {@link #altFormats}
|
|
* configs. These may be reconfigured to use date formats appropriate for the user's locale.
|
|
*
|
|
* The field may be limited to a certain range of dates by using the {@link #minValue}, {@link #maxValue},
|
|
* {@link #disabledDays}, and {@link #disabledDates} config parameters. These configurations will be used both
|
|
* in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* title: 'Dates',
|
|
* items: [{
|
|
* xtype: 'datefield',
|
|
* anchor: '100%',
|
|
* fieldLabel: 'From',
|
|
* name: 'from_date',
|
|
* maxValue: new Date() // limited to the current date or prior
|
|
* }, {
|
|
* xtype: 'datefield',
|
|
* anchor: '100%',
|
|
* fieldLabel: 'To',
|
|
* name: 'to_date',
|
|
* value: new Date() // defaults to today
|
|
* }]
|
|
* });
|
|
*
|
|
* # Date Formats Examples
|
|
*
|
|
* This example shows a couple of different date format parsing scenarios. Both use custom date format
|
|
* configurations; the first one matches the configured `format` while the second matches the `altFormats`.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* title: 'Dates',
|
|
* items: [{
|
|
* xtype: 'datefield',
|
|
* anchor: '100%',
|
|
* fieldLabel: 'Date',
|
|
* name: 'date',
|
|
* // The value matches the format; will be parsed and displayed using that format.
|
|
* format: 'm d Y',
|
|
* value: '2 4 1978'
|
|
* }, {
|
|
* xtype: 'datefield',
|
|
* anchor: '100%',
|
|
* fieldLabel: 'Date',
|
|
* name: 'date',
|
|
* // The value does not match the format, but does match an altFormat; will be parsed
|
|
* // using the altFormat and displayed using the format.
|
|
* format: 'm d Y',
|
|
* altFormats: 'm,d,Y|m.d.Y',
|
|
* value: '2.4.1978'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Date', {
|
|
extend: Ext.form.field.Picker ,
|
|
alias: 'widget.datefield',
|
|
|
|
alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} format
|
|
* The default date format string which can be overriden for localization support. The format must be valid
|
|
* according to {@link Ext.Date#parse}.
|
|
*/
|
|
format : "m/d/Y",
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} altFormats
|
|
* Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined
|
|
* format.
|
|
*/
|
|
altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} disabledDaysText
|
|
* The tooltip to display when the date falls on a disabled day.
|
|
*/
|
|
disabledDaysText : "Disabled",
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} disabledDatesText
|
|
* The tooltip text to display when the date falls on a disabled date.
|
|
*/
|
|
disabledDatesText : "Disabled",
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} minText
|
|
* The error text to display when the date in the cell is before {@link #minValue}.
|
|
*/
|
|
minText : "The date in this field must be equal to or after {0}",
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} maxText
|
|
* The error text to display when the date in the cell is after {@link #maxValue}.
|
|
*/
|
|
maxText : "The date in this field must be equal to or before {0}",
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} invalidText
|
|
* The error text to display when the date in the field is invalid.
|
|
*/
|
|
invalidText : "{0} is not a valid date - it must be in the format {1}",
|
|
//</locale>
|
|
/**
|
|
* @cfg {String} [triggerCls='x-form-date-trigger']
|
|
* An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger'
|
|
* and triggerCls will be **appended** if specified (default class displays a calendar icon).
|
|
*/
|
|
triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',
|
|
/**
|
|
* @cfg {Boolean} showToday
|
|
* false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for
|
|
* spacebar that selects the current date.
|
|
*/
|
|
showToday : true,
|
|
/**
|
|
* @cfg {Date/String} minValue
|
|
* The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.
|
|
*/
|
|
/**
|
|
* @cfg {Date/String} maxValue
|
|
* The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.
|
|
*/
|
|
/**
|
|
* @cfg {Number[]} disabledDays
|
|
* An array of days to disable, 0 based. Some examples:
|
|
*
|
|
* // disable Sunday and Saturday:
|
|
* disabledDays: [0, 6]
|
|
* // disable weekdays:
|
|
* disabledDays: [1,2,3,4,5]
|
|
*/
|
|
/**
|
|
* @cfg {String[]} disabledDates
|
|
* An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so
|
|
* they are very powerful. Some examples:
|
|
*
|
|
* // disable these exact dates:
|
|
* disabledDates: ["03/08/2003", "09/16/2003"]
|
|
* // disable these days for every year:
|
|
* disabledDates: ["03/08", "09/16"]
|
|
* // only match the beginning (useful if you are using short years):
|
|
* disabledDates: ["^03/08"]
|
|
* // disable every day in March 2006:
|
|
* disabledDates: ["03/../2006"]
|
|
* // disable every day in every March:
|
|
* disabledDates: ["^03"]
|
|
*
|
|
* Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
|
|
* to support regular expressions, if you are using a {@link #format date format} that has "." in it, you will have
|
|
* to escape the dot when restricting dates. For example: `["03\\.08\\.03"]`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} submitFormat
|
|
* The date format string which will be submitted to the server. The format must be valid according to
|
|
* {@link Ext.Date#parse}.
|
|
*
|
|
* Defaults to {@link #format}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} useStrict
|
|
* True to enforce strict date parsing to prevent the default Javascript "date rollover".
|
|
* Defaults to the useStrict parameter set on Ext.Date
|
|
* See {@link Ext.Date#parse}.
|
|
*/
|
|
useStrict: undefined,
|
|
|
|
// in the absence of a time value, a default value of 12 noon will be used
|
|
// (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
|
|
initTime: '12', // 24 hour format
|
|
|
|
initTimeFormat: 'H',
|
|
|
|
matchFieldWidth: false,
|
|
//<locale>
|
|
/**
|
|
* @cfg {Number} [startDay=undefined]
|
|
* Day index at which the week should begin, 0-based.
|
|
*
|
|
* Defaults to `0` (Sunday).
|
|
*/
|
|
startDay: 0,
|
|
//</locale>
|
|
|
|
initComponent : function(){
|
|
var me = this,
|
|
isString = Ext.isString,
|
|
min, max;
|
|
|
|
min = me.minValue;
|
|
max = me.maxValue;
|
|
if(isString(min)){
|
|
me.minValue = me.parseDate(min);
|
|
}
|
|
if(isString(max)){
|
|
me.maxValue = me.parseDate(max);
|
|
}
|
|
me.disabledDatesRE = null;
|
|
me.initDisabledDays();
|
|
|
|
me.callParent();
|
|
},
|
|
|
|
initValue: function() {
|
|
var me = this,
|
|
value = me.value;
|
|
|
|
// If a String value was supplied, try to convert it to a proper Date
|
|
if (Ext.isString(value)) {
|
|
me.value = me.rawToValue(value);
|
|
}
|
|
|
|
me.callParent();
|
|
},
|
|
|
|
// private
|
|
initDisabledDays : function(){
|
|
if(this.disabledDates){
|
|
var dd = this.disabledDates,
|
|
len = dd.length - 1,
|
|
re = "(?:",
|
|
d,
|
|
dLen = dd.length,
|
|
date;
|
|
|
|
for (d = 0; d < dLen; d++) {
|
|
date = dd[d];
|
|
|
|
re += Ext.isDate(date) ? '^' + Ext.String.escapeRegex(date.dateFormat(this.format)) + '$' : date;
|
|
if (d !== len) {
|
|
re += '|';
|
|
}
|
|
}
|
|
|
|
this.disabledDatesRE = new RegExp(re + ')');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing disabled dates with new values and refreshes the Date picker.
|
|
* @param {String[]} disabledDates An array of date strings (see the {@link #disabledDates} config for details on
|
|
* supported values) used to disable a pattern of dates.
|
|
*/
|
|
setDisabledDates : function(dd){
|
|
var me = this,
|
|
picker = me.picker;
|
|
|
|
me.disabledDates = dd;
|
|
me.initDisabledDays();
|
|
if (picker) {
|
|
picker.setDisabledDates(me.disabledDatesRE);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
|
|
* @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details on
|
|
* supported values.
|
|
*/
|
|
setDisabledDays : function(dd){
|
|
var picker = this.picker;
|
|
|
|
this.disabledDays = dd;
|
|
if (picker) {
|
|
picker.setDisabledDays(dd);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #minValue} with the new value and refreshes the Date picker.
|
|
* @param {Date} value The minimum date that can be selected
|
|
*/
|
|
setMinValue : function(dt){
|
|
var me = this,
|
|
picker = me.picker,
|
|
minValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
|
|
|
|
me.minValue = minValue;
|
|
if (picker) {
|
|
picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
|
|
picker.setMinDate(minValue);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #maxValue} with the new value and refreshes the Date picker.
|
|
* @param {Date} value The maximum date that can be selected
|
|
*/
|
|
setMaxValue : function(dt){
|
|
var me = this,
|
|
picker = me.picker,
|
|
maxValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
|
|
|
|
me.maxValue = maxValue;
|
|
if (picker) {
|
|
picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
|
|
picker.setMaxDate(maxValue);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Runs all of Date's validations and returns an array of any errors. Note that this first runs Text's validations,
|
|
* so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
|
|
* the date format is valid, that the chosen date is within the min and max date constraints set, that the date
|
|
* chosen is not in the disabledDates regex and that the day chosed is not one of the disabledDays.
|
|
* @param {Object} [value] The value to get errors for (defaults to the current field value)
|
|
* @return {String[]} All validation errors for this field
|
|
*/
|
|
getErrors: function(value) {
|
|
var me = this,
|
|
format = Ext.String.format,
|
|
clearTime = Ext.Date.clearTime,
|
|
errors = me.callParent(arguments),
|
|
disabledDays = me.disabledDays,
|
|
disabledDatesRE = me.disabledDatesRE,
|
|
minValue = me.minValue,
|
|
maxValue = me.maxValue,
|
|
len = disabledDays ? disabledDays.length : 0,
|
|
i = 0,
|
|
svalue,
|
|
fvalue,
|
|
day,
|
|
time;
|
|
|
|
value = me.formatDate(value || me.processRawValue(me.getRawValue()));
|
|
|
|
if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
|
|
return errors;
|
|
}
|
|
|
|
svalue = value;
|
|
value = me.parseDate(value);
|
|
if (!value) {
|
|
errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
|
|
return errors;
|
|
}
|
|
|
|
time = value.getTime();
|
|
if (minValue && time < clearTime(minValue).getTime()) {
|
|
errors.push(format(me.minText, me.formatDate(minValue)));
|
|
}
|
|
|
|
if (maxValue && time > clearTime(maxValue).getTime()) {
|
|
errors.push(format(me.maxText, me.formatDate(maxValue)));
|
|
}
|
|
|
|
if (disabledDays) {
|
|
day = value.getDay();
|
|
|
|
for(; i < len; i++) {
|
|
if (day === disabledDays[i]) {
|
|
errors.push(me.disabledDaysText);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
fvalue = me.formatDate(value);
|
|
if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
|
|
errors.push(format(me.disabledDatesText, fvalue));
|
|
}
|
|
|
|
return errors;
|
|
},
|
|
|
|
rawToValue: function(rawValue) {
|
|
return this.parseDate(rawValue) || rawValue || null;
|
|
},
|
|
|
|
valueToRaw: function(value) {
|
|
return this.formatDate(this.parseDate(value));
|
|
},
|
|
|
|
/**
|
|
* @method setValue
|
|
* Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid date,
|
|
* using {@link #format} as the date format, according to the same rules as {@link Ext.Date#parse} (the default
|
|
* format used is "m/d/Y").
|
|
*
|
|
* Usage:
|
|
*
|
|
* //All of these calls set the same date value (May 4, 2006)
|
|
*
|
|
* //Pass a date object:
|
|
* var dt = new Date('5/4/2006');
|
|
* dateField.setValue(dt);
|
|
*
|
|
* //Pass a date string (default format):
|
|
* dateField.setValue('05/04/2006');
|
|
*
|
|
* //Pass a date string (custom format):
|
|
* dateField.format = 'Y-m-d';
|
|
* dateField.setValue('2006-05-04');
|
|
*
|
|
* @param {String/Date} date The date or valid date string
|
|
* @return {Ext.form.field.Date} this
|
|
*/
|
|
|
|
/**
|
|
* Attempts to parse a given string value using a given {@link Ext.Date#parse date format}.
|
|
* @param {String} value The value to attempt to parse
|
|
* @param {String} format A valid date format (see {@link Ext.Date#parse})
|
|
* @return {Date} The parsed Date object, or null if the value could not be successfully parsed.
|
|
*/
|
|
safeParse : function(value, format) {
|
|
var me = this,
|
|
utilDate = Ext.Date,
|
|
result = null,
|
|
strict = me.useStrict,
|
|
parsedDate;
|
|
|
|
if (utilDate.formatContainsHourInfo(format)) {
|
|
// if parse format contains hour information, no DST adjustment is necessary
|
|
result = utilDate.parse(value, format, strict);
|
|
} else {
|
|
// set time to 12 noon, then clear the time
|
|
parsedDate = utilDate.parse(value + ' ' + me.initTime, format + ' ' + me.initTimeFormat, strict);
|
|
if (parsedDate) {
|
|
result = utilDate.clearTime(parsedDate);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// @private
|
|
getSubmitValue: function() {
|
|
var format = this.submitFormat || this.format,
|
|
value = this.getValue();
|
|
|
|
return value ? Ext.Date.format(value, format) : '';
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
parseDate : function(value) {
|
|
if(!value || Ext.isDate(value)){
|
|
return value;
|
|
}
|
|
|
|
var me = this,
|
|
val = me.safeParse(value, me.format),
|
|
altFormats = me.altFormats,
|
|
altFormatsArray = me.altFormatsArray,
|
|
i = 0,
|
|
len;
|
|
|
|
if (!val && altFormats) {
|
|
altFormatsArray = altFormatsArray || altFormats.split('|');
|
|
len = altFormatsArray.length;
|
|
for (; i < len && !val; ++i) {
|
|
val = me.safeParse(value, altFormatsArray[i]);
|
|
}
|
|
}
|
|
return val;
|
|
},
|
|
|
|
// private
|
|
formatDate : function(date){
|
|
return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
|
|
},
|
|
|
|
createPicker: function() {
|
|
var me = this,
|
|
format = Ext.String.format;
|
|
|
|
return new Ext.picker.Date({
|
|
pickerField: me,
|
|
ownerCt: me.ownerCt,
|
|
renderTo: document.body,
|
|
floating: true,
|
|
hidden: true,
|
|
focusOnShow: true,
|
|
minDate: me.minValue,
|
|
maxDate: me.maxValue,
|
|
disabledDatesRE: me.disabledDatesRE,
|
|
disabledDatesText: me.disabledDatesText,
|
|
disabledDays: me.disabledDays,
|
|
disabledDaysText: me.disabledDaysText,
|
|
format: me.format,
|
|
showToday: me.showToday,
|
|
startDay: me.startDay,
|
|
minText: format(me.minText, me.formatDate(me.minValue)),
|
|
maxText: format(me.maxText, me.formatDate(me.maxValue)),
|
|
listeners: {
|
|
scope: me,
|
|
select: me.onSelect
|
|
},
|
|
keyNavConfig: {
|
|
esc: function() {
|
|
me.collapse();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
onDownArrow: function(e) {
|
|
this.callParent(arguments);
|
|
if (this.isExpanded) {
|
|
this.getPicker().focus();
|
|
}
|
|
},
|
|
|
|
onSelect: function(m, d) {
|
|
var me = this;
|
|
|
|
me.setValue(d);
|
|
me.fireEvent('select', me, d);
|
|
me.collapse();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets the Date picker's value to match the current field value when expanding.
|
|
*/
|
|
onExpand: function() {
|
|
var value = this.getValue();
|
|
this.picker.setValue(Ext.isDate(value) ? value : new Date());
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Focuses the field when collapsing the Date picker.
|
|
*/
|
|
onCollapse: function() {
|
|
this.focus(false, 60);
|
|
},
|
|
|
|
// private
|
|
beforeBlur : function(){
|
|
var me = this,
|
|
v = me.parseDate(me.getRawValue()),
|
|
focusTask = me.focusTask;
|
|
|
|
if (focusTask) {
|
|
focusTask.cancel();
|
|
}
|
|
|
|
if (v) {
|
|
me.setValue(v);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @cfg {Boolean} grow
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Number} growMin
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Number} growMax
|
|
* @private
|
|
*/
|
|
/**
|
|
* @method autoSize
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Ext.define('Ext.form.field.FileButton', {
|
|
extend: Ext.button.Button ,
|
|
alias: 'widget.filebutton',
|
|
|
|
childEls: [
|
|
'btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl', 'fileInputEl'
|
|
],
|
|
|
|
inputCls: Ext.baseCSSPrefix + 'form-file-input',
|
|
|
|
cls: Ext.baseCSSPrefix + 'form-file-btn',
|
|
|
|
preventDefault: false,
|
|
|
|
renderTpl: [
|
|
'<span id="{id}-btnWrap" class="{baseCls}-wrap',
|
|
'<tpl if="splitCls"> {splitCls}</tpl>',
|
|
'{childElCls}" unselectable="on">',
|
|
'<span id="{id}-btnEl" class="{baseCls}-button">',
|
|
'<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}',
|
|
'{childElCls}" unselectable="on">',
|
|
'{text}',
|
|
'</span>',
|
|
'<span role="img" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}',
|
|
'{childElCls} {glyphCls}" unselectable="on" style="',
|
|
'<tpl if="iconUrl">background-image:url({iconUrl});</tpl>',
|
|
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
|
|
'<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl"> </tpl>',
|
|
'</span>',
|
|
'</span>',
|
|
'</span>',
|
|
'<input id="{id}-fileInputEl" class="{childElCls} {inputCls}" type="file" size="1" name="{inputName}">'
|
|
],
|
|
|
|
getTemplateArgs: function(){
|
|
var args = this.callParent();
|
|
args.inputCls = this.inputCls;
|
|
args.inputName = this.inputName;
|
|
return args;
|
|
},
|
|
|
|
afterRender: function(){
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.fileInputEl.on('change', me.fireChange, me);
|
|
},
|
|
|
|
fireChange: function(e){
|
|
this.fireEvent('change', this, e, this.fileInputEl.dom.value);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates the file input element. It is inserted into the trigger button component, made
|
|
* invisible, and floated on top of the button's other content so that it will receive the
|
|
* button's clicks.
|
|
*/
|
|
createFileInput : function(isTemporary) {
|
|
var me = this;
|
|
me.fileInputEl = me.el.createChild({
|
|
name: me.inputName,
|
|
id: !isTemporary ? me.id + '-fileInputEl' : undefined,
|
|
cls: me.inputCls,
|
|
tag: 'input',
|
|
type: 'file',
|
|
size: 1
|
|
});
|
|
me.fileInputEl.on('change', me.fireChange, me);
|
|
},
|
|
|
|
reset: function(remove){
|
|
if (remove) {
|
|
this.fileInputEl.remove();
|
|
}
|
|
this.createFileInput(!remove);
|
|
},
|
|
|
|
restoreInput: function(el){
|
|
this.fileInputEl.remove();
|
|
el = Ext.get(el);
|
|
this.el.appendChild(el);
|
|
this.fileInputEl = el;
|
|
},
|
|
|
|
onDisable: function(){
|
|
this.callParent();
|
|
this.fileInputEl.dom.disabled = true;
|
|
},
|
|
|
|
onEnable : function() {
|
|
this.callParent();
|
|
this.fileInputEl.dom.disabled = false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @docauthor Jason Johnston <jason@sencha.com>
|
|
*
|
|
* A file upload field which has custom styling and allows control over the button text and other
|
|
* features of {@link Ext.form.field.Text text fields} like {@link Ext.form.field.Text#emptyText empty text}.
|
|
* It uses a hidden file input element behind the scenes to allow user selection of a file and to
|
|
* perform the actual upload during {@link Ext.form.Basic#submit form submit}.
|
|
*
|
|
* Because there is no secure cross-browser way to programmatically set the value of a file input,
|
|
* the standard Field `setValue` method is not implemented. The `{@link #getValue}` method will return
|
|
* a value that is browser-dependent; some have just the file name, some have a full path, some use
|
|
* a fake path.
|
|
*
|
|
* **IMPORTANT:** File uploads are not performed using normal 'Ajax' techniques; see the description for
|
|
* {@link Ext.form.Basic#hasUpload} for details.
|
|
*
|
|
* # Example Usage
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Upload a Photo',
|
|
* width: 400,
|
|
* bodyPadding: 10,
|
|
* frame: true,
|
|
* renderTo: Ext.getBody(),
|
|
* items: [{
|
|
* xtype: 'filefield',
|
|
* name: 'photo',
|
|
* fieldLabel: 'Photo',
|
|
* labelWidth: 50,
|
|
* msgTarget: 'side',
|
|
* allowBlank: false,
|
|
* anchor: '100%',
|
|
* buttonText: 'Select Photo...'
|
|
* }],
|
|
*
|
|
* buttons: [{
|
|
* text: 'Upload',
|
|
* handler: function() {
|
|
* var form = this.up('form').getForm();
|
|
* if(form.isValid()){
|
|
* form.submit({
|
|
* url: 'photo-upload.php',
|
|
* waitMsg: 'Uploading your photo...',
|
|
* success: function(fp, o) {
|
|
* Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
|
|
* }
|
|
* });
|
|
* }
|
|
* }
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.File', {
|
|
extend: Ext.form.field.Trigger ,
|
|
alias: ['widget.filefield', 'widget.fileuploadfield'],
|
|
alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],
|
|
|
|
|
|
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} buttonText
|
|
* The button text to display on the upload button. Note that if you supply a value for
|
|
* {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
|
|
*/
|
|
buttonText: 'Browse...',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} buttonOnly
|
|
* True to display the file upload field as a button with no visible text field. If true, all
|
|
* inherited Text members will still be available.
|
|
*/
|
|
buttonOnly: false,
|
|
|
|
/**
|
|
* @cfg {Number} buttonMargin
|
|
* The number of pixels of space reserved between the button and the text field. Note that this only
|
|
* applies if {@link #buttonOnly} = false.
|
|
*/
|
|
buttonMargin: 3,
|
|
|
|
/**
|
|
* @cfg {Boolean} clearOnSubmit
|
|
* True to clear the selected file value when the form this field belongs to
|
|
* is submitted to the server.
|
|
*/
|
|
clearOnSubmit: true,
|
|
|
|
/**
|
|
* @cfg {Object} buttonConfig
|
|
* A standard {@link Ext.button.Button} config object.
|
|
*/
|
|
|
|
/**
|
|
* @event change
|
|
* Fires when the underlying file input field's value has changed from the user selecting a new file from the system
|
|
* file selection dialog.
|
|
* @param {Ext.ux.form.FileUploadField} this
|
|
* @param {String} value The file value returned by the underlying file input field
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Element} fileInputEl
|
|
* A reference to the invisible file input element created for this upload field. Only populated after this
|
|
* component is rendered.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.button.Button} button
|
|
* A reference to the trigger Button component created for this upload field. Only populated after this component is
|
|
* rendered.
|
|
*/
|
|
|
|
|
|
// private
|
|
extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
|
|
|
|
/**
|
|
* @cfg {Boolean} readOnly
|
|
* Unlike with other form fields, the readOnly config defaults to true in File field.
|
|
*/
|
|
readOnly: true,
|
|
|
|
/**
|
|
* Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button
|
|
* @private
|
|
*/
|
|
triggerNoEditCls: '',
|
|
|
|
// private
|
|
componentLayout: 'triggerfield',
|
|
|
|
// private. Extract the file element, button outer element, and button active element.
|
|
childEls: ['browseButtonWrap'],
|
|
|
|
// private
|
|
onRender: function() {
|
|
var me = this,
|
|
id = me.id,
|
|
inputEl;
|
|
|
|
me.callParent(arguments);
|
|
|
|
inputEl = me.inputEl;
|
|
inputEl.dom.name = ''; //name goes on the fileInput, not the text input
|
|
|
|
// render the button here. This isn't ideal, however it will be
|
|
// rendered before layouts are resumed, also we modify the DOM
|
|
// below anyway
|
|
me.button = new Ext.form.field.FileButton(Ext.apply({
|
|
renderTo: id + '-browseButtonWrap',
|
|
ownerCt: me,
|
|
ownerLayout: me.componentLayout,
|
|
id: id + '-button',
|
|
ui: me.ui,
|
|
disabled: me.disabled,
|
|
text: me.buttonText,
|
|
style: me.buttonOnly ? '' : me.getButtonMarginProp() + me.buttonMargin + 'px',
|
|
inputName: me.getName(),
|
|
listeners: {
|
|
scope: me,
|
|
change: me.onFileChange
|
|
}
|
|
}, me.buttonConfig));
|
|
me.fileInputEl = me.button.fileInputEl;
|
|
|
|
if (me.buttonOnly) {
|
|
me.inputCell.setDisplayed(false);
|
|
}
|
|
|
|
// Ensure the trigger cell is sized correctly upon render
|
|
me.browseButtonWrap.dom.style.width = (me.browseButtonWrap.dom.lastChild.offsetWidth + me.button.getEl().getMargin('lr')) + 'px';
|
|
if (Ext.isIE) {
|
|
me.button.getEl().repaint();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the markup to be inserted into the subTplMarkup.
|
|
*/
|
|
getTriggerMarkup: function() {
|
|
return '<td id="' + this.id + '-browseButtonWrap"></td>';
|
|
},
|
|
|
|
/**
|
|
* @private Event handler fired when the user selects a file.
|
|
*/
|
|
onFileChange: function(button, e, value) {
|
|
this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
|
|
Ext.form.field.File.superclass.setValue.call(this, value);
|
|
},
|
|
|
|
/**
|
|
* Overridden to do nothing
|
|
* @method
|
|
*/
|
|
setValue: Ext.emptyFn,
|
|
|
|
reset : function(){
|
|
var me = this,
|
|
clear = me.clearOnSubmit;
|
|
if (me.rendered) {
|
|
me.button.reset(clear);
|
|
me.fileInputEl = me.button.fileInputEl;
|
|
if (clear) {
|
|
me.inputEl.dom.value = '';
|
|
}
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
onShow: function(){
|
|
this.callParent();
|
|
// If we started out hidden, the button may have a messed up layout
|
|
// since we don't act like a container
|
|
this.button.updateLayout();
|
|
},
|
|
|
|
onDisable: function(){
|
|
this.callParent();
|
|
this.button.disable();
|
|
},
|
|
|
|
onEnable: function(){
|
|
this.callParent();
|
|
this.button.enable();
|
|
},
|
|
|
|
isFileUpload: function() {
|
|
return true;
|
|
},
|
|
|
|
extractFileInput: function() {
|
|
var fileInput = this.button.fileInputEl.dom;
|
|
this.reset();
|
|
return fileInput;
|
|
},
|
|
|
|
restoreInput: function(el) {
|
|
var button = this.button;
|
|
button.restoreInput(el);
|
|
this.fileInputEl = button.fileInputEl;
|
|
},
|
|
|
|
onDestroy: function(){
|
|
Ext.destroyMembers(this, 'button');
|
|
delete this.fileInputEl;
|
|
this.callParent();
|
|
},
|
|
|
|
getButtonMarginProp: function() {
|
|
return 'margin-left:';
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.form.field.File', {
|
|
override: 'Ext.form.field.File',
|
|
|
|
getButtonMarginProp: function() {
|
|
return this.getHierarchyState().rtl ? 'margin-right:' : 'margin-left:';
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
|
|
*
|
|
* This creates an actual input element with type="submit" in the DOM. While its label is
|
|
* {@link #hideLabel not rendered} by default, it is still a real component and may be sized according
|
|
* to its owner container's layout.
|
|
*
|
|
* Because of this, in most cases it is more convenient and less problematic to simply
|
|
* {@link Ext.form.action.Action#params pass hidden parameters} directly when
|
|
* {@link Ext.form.Basic#submit submitting the form}.
|
|
*
|
|
* Example:
|
|
*
|
|
* new Ext.form.Panel({
|
|
* title: 'My Form',
|
|
* items: [{
|
|
* xtype: 'textfield',
|
|
* fieldLabel: 'Text Field',
|
|
* name: 'text_field',
|
|
* value: 'value from text field'
|
|
* }, {
|
|
* xtype: 'hiddenfield',
|
|
* name: 'hidden_field_1',
|
|
* value: 'value from hidden field'
|
|
* }],
|
|
*
|
|
* buttons: [{
|
|
* text: 'Submit',
|
|
* handler: function() {
|
|
* this.up('form').getForm().submit({
|
|
* params: {
|
|
* hidden_field_2: 'value from submit call'
|
|
* }
|
|
* });
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* Submitting the above form will result in three values sent to the server:
|
|
*
|
|
* text_field=value+from+text+field&hidden;_field_1=value+from+hidden+field&hidden_field_2=value+from+submit+call
|
|
*
|
|
*/
|
|
Ext.define('Ext.form.field.Hidden', {
|
|
extend: Ext.form.field.Base ,
|
|
alias: ['widget.hiddenfield', 'widget.hidden'],
|
|
alternateClassName: 'Ext.form.Hidden',
|
|
|
|
// private
|
|
inputType : 'hidden',
|
|
hideLabel: true,
|
|
hidden: true,
|
|
|
|
initComponent: function() {
|
|
this.formItemCls += '-hidden';
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Override. Treat undefined and null values as equal to an empty string value.
|
|
*/
|
|
isEqual: function(value1, value2) {
|
|
return this.isEqualAsString(value1, value2);
|
|
},
|
|
|
|
// These are all private overrides
|
|
initEvents: Ext.emptyFn,
|
|
setSize : Ext.emptyFn,
|
|
setWidth : Ext.emptyFn,
|
|
setHeight : Ext.emptyFn,
|
|
setPosition : Ext.emptyFn,
|
|
setPagePosition : Ext.emptyFn,
|
|
markInvalid : Ext.emptyFn,
|
|
clearInvalid : Ext.emptyFn
|
|
});
|
|
|
|
/**
|
|
* Color picker provides a simple color palette for choosing colors. The picker can be rendered to any container. The
|
|
* available default to a standard 40-color palette; this can be customized with the {@link #colors} config.
|
|
*
|
|
* Typically you will need to implement a handler function to be notified when the user chooses a color from the picker;
|
|
* you can register the handler using the {@link #event-select} event, or by implementing the {@link #handler} method.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.picker.Color', {
|
|
* value: '993300', // initial selected color
|
|
* renderTo: Ext.getBody(),
|
|
* listeners: {
|
|
* select: function(picker, selColor) {
|
|
* alert(selColor);
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.picker.Color', {
|
|
extend: Ext.Component ,
|
|
|
|
alias: 'widget.colorpicker',
|
|
alternateClassName: 'Ext.ColorPalette',
|
|
|
|
/**
|
|
* @cfg {String} [componentCls='x-color-picker']
|
|
* The CSS class to apply to the containing element.
|
|
*/
|
|
componentCls : Ext.baseCSSPrefix + 'color-picker',
|
|
|
|
/**
|
|
* @cfg {String} [selectedCls='x-color-picker-selected']
|
|
* The CSS class to apply to the selected element
|
|
*/
|
|
selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',
|
|
|
|
/**
|
|
* @cfg {String} itemCls
|
|
* The CSS class to apply to the color picker's items
|
|
*/
|
|
itemCls: Ext.baseCSSPrefix + 'color-picker-item',
|
|
|
|
/**
|
|
* @cfg {String} value
|
|
* The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex
|
|
* codes are case-sensitive.
|
|
*/
|
|
value : null,
|
|
|
|
/**
|
|
* @cfg {String} clickEvent
|
|
* The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
|
|
*/
|
|
clickEvent :'click',
|
|
|
|
/**
|
|
* @cfg {Boolean} allowReselect
|
|
* If set to true then reselecting a color that is already selected fires the {@link #event-select} event
|
|
*/
|
|
allowReselect : false,
|
|
|
|
/**
|
|
* @property {String[]} colors
|
|
* An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors,
|
|
* and each hex code should be unique. The width of the picker is controlled via CSS by adjusting the width property
|
|
* of the 'x-color-picker' class (or assigning a custom class), so you can balance the number of colors with the
|
|
* width setting until the box is symmetrical.
|
|
*
|
|
* You can override individual colors if needed:
|
|
*
|
|
* var cp = new Ext.picker.Color();
|
|
* cp.colors[0] = 'FF0000'; // change the first box to red
|
|
*
|
|
* Or you can provide a custom array of your own for complete control:
|
|
*
|
|
* var cp = new Ext.picker.Color();
|
|
* cp.colors = ['000000', '993300', '333300'];
|
|
*/
|
|
colors : [
|
|
'000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
|
|
'800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
|
|
'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
|
|
'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
|
|
'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
|
|
],
|
|
|
|
/**
|
|
* @cfg {Function} handler
|
|
* A function that will handle the select event of this picker. The handler is passed the following parameters:
|
|
*
|
|
* - `picker` : ColorPicker
|
|
*
|
|
* The {@link Ext.picker.Color picker}.
|
|
*
|
|
* - `color` : String
|
|
*
|
|
* The 6-digit color hex code (without the # symbol).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope (`this` reference) in which the `{@link #handler}` function will be called.
|
|
*
|
|
* Defaults to this Color picker instance.
|
|
*/
|
|
|
|
colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
|
|
|
|
renderTpl: [
|
|
'<tpl for="colors">',
|
|
'<a href="#" class="color-{.} {parent.itemCls}" hidefocus="on">',
|
|
'<span class="{parent.itemCls}-inner" style="background:#{.}"> </span>',
|
|
'</a>',
|
|
'</tpl>'
|
|
],
|
|
|
|
// @private
|
|
initComponent : function(){
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.addEvents(
|
|
/**
|
|
* @event select
|
|
* Fires when a color is selected
|
|
* @param {Ext.picker.Color} this
|
|
* @param {String} color The 6-digit color hex code (without the # symbol)
|
|
*/
|
|
'select'
|
|
);
|
|
|
|
if (me.handler) {
|
|
me.on('select', me.handler, me.scope, true);
|
|
}
|
|
},
|
|
|
|
|
|
// @private
|
|
initRenderData : function(){
|
|
var me = this;
|
|
return Ext.apply(me.callParent(), {
|
|
itemCls: me.itemCls,
|
|
colors: me.colors
|
|
});
|
|
},
|
|
|
|
onRender : function(){
|
|
var me = this,
|
|
clickEvent = me.clickEvent;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});
|
|
// always stop following the anchors
|
|
if(clickEvent != 'click'){
|
|
me.mon(me.el, 'click', Ext.emptyFn, me, {delegate: 'a', stopEvent: true});
|
|
}
|
|
},
|
|
|
|
// @private
|
|
afterRender : function(){
|
|
var me = this,
|
|
value;
|
|
|
|
me.callParent(arguments);
|
|
if (me.value) {
|
|
value = me.value;
|
|
me.value = null;
|
|
me.select(value, true);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
handleClick : function(event, target){
|
|
var me = this,
|
|
color;
|
|
|
|
event.stopEvent();
|
|
if (!me.disabled) {
|
|
color = target.className.match(me.colorRe)[1];
|
|
me.select(color.toUpperCase());
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Selects the specified color in the picker (fires the {@link #event-select} event)
|
|
* @param {String} color A valid 6-digit color hex code (# will be stripped if included)
|
|
* @param {Boolean} [suppressEvent=false] True to stop the select event from firing.
|
|
*/
|
|
select : function(color, suppressEvent){
|
|
|
|
var me = this,
|
|
selectedCls = me.selectedCls,
|
|
value = me.value,
|
|
el;
|
|
|
|
color = color.replace('#', '');
|
|
if (!me.rendered) {
|
|
me.value = color;
|
|
return;
|
|
}
|
|
|
|
|
|
if (color != value || me.allowReselect) {
|
|
el = me.el;
|
|
|
|
if (me.value) {
|
|
el.down('a.color-' + value).removeCls(selectedCls);
|
|
}
|
|
el.down('a.color-' + color).addCls(selectedCls);
|
|
me.value = color;
|
|
if (suppressEvent !== true) {
|
|
me.fireEvent('select', me, color);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Clears any selection and sets the value to `null`.
|
|
*/
|
|
clear: function(){
|
|
var me = this,
|
|
value = me.value,
|
|
el;
|
|
|
|
if (value && me.rendered) {
|
|
el = me.el.down('a.color-' + value);
|
|
el.removeCls(me.selectedCls);
|
|
}
|
|
me.value = null;
|
|
},
|
|
|
|
/**
|
|
* Get the currently selected color value.
|
|
* @return {String} value The selected value. Null if nothing is selected.
|
|
*/
|
|
getValue: function(){
|
|
return this.value || null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Layout class for {@link Ext.form.field.HtmlEditor} fields. Sizes textarea and iframe elements.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.HtmlEditor', {
|
|
extend: Ext.layout.component.field.FieldContainer ,
|
|
alias: ['layout.htmleditor'],
|
|
|
|
type: 'htmleditor',
|
|
|
|
naturalHeight: 150,
|
|
naturalWidth: 300,
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var owner = this.owner,
|
|
dom;
|
|
|
|
// In gecko, it can cause the browser to hang if we're running a layout with
|
|
// a heap of data in the textarea (think several images with data urls).
|
|
// So clear the value at the start, then re-insert it once we're done
|
|
if (Ext.isGecko) {
|
|
dom = owner.textareaEl.dom;
|
|
this.lastValue = dom.value;
|
|
dom.value = '';
|
|
}
|
|
this.callParent(arguments);
|
|
|
|
ownerContext.toolbarContext = ownerContext.context.getCmp(owner.toolbar);
|
|
ownerContext.inputCmpContext = ownerContext.context.getCmp(owner.inputCmp);
|
|
ownerContext.textAreaContext = ownerContext.getEl('textareaEl');
|
|
ownerContext.iframeContext = ownerContext.getEl('iframeEl');
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext) {
|
|
var me = this,
|
|
widthModel = ownerContext.widthModel,
|
|
heightModel = ownerContext.heightModel,
|
|
owner = me.owner,
|
|
iframeEl = owner.iframeEl,
|
|
textareaEl = owner.textareaEl;
|
|
|
|
me.callParent(arguments);
|
|
if (widthModel.shrinkWrap) {
|
|
iframeEl.setStyle('width', '');
|
|
textareaEl.setStyle('width', '');
|
|
} else if (widthModel.natural) {
|
|
ownerContext.bodyCellContext.setWidth(me.naturalWidth);
|
|
}
|
|
|
|
if (heightModel.natural || heightModel.shrinkWrap) {
|
|
iframeEl.setHeight(me.naturalHeight);
|
|
textareaEl.setHeight(me.naturalHeight);
|
|
}
|
|
},
|
|
|
|
finishedLayout: function(){
|
|
var owner = this.owner;
|
|
|
|
this.callParent(arguments);
|
|
// In IE6 quirks sometimes the element requires repainting
|
|
// to show properly.
|
|
if (Ext.isIE9m && Ext.isIEQuirks) {
|
|
owner.el.repaint();
|
|
}
|
|
if (Ext.isGecko) {
|
|
owner.textareaEl.dom.value = this.lastValue;
|
|
}
|
|
},
|
|
|
|
publishOwnerWidth: function(ownerContext, width){
|
|
this.callParent(arguments);
|
|
width -= ownerContext.inputCmpContext.getBorderInfo().width;
|
|
ownerContext.textAreaContext.setWidth(width);
|
|
ownerContext.iframeContext.setWidth(width);
|
|
},
|
|
|
|
// The offsets for the text area are needed for bugs in sizing with IE.
|
|
// The main issue behind it is that the iframe requires an initial height
|
|
// to be set while the component is auto sizing, however we need to switch
|
|
// it when using a configured size. A more permanent solution might be to
|
|
// have the iframe and text area be child components of the container
|
|
// as opposed to being directly inserted into the DOM.
|
|
publishInnerWidth: function(ownerContext, width){
|
|
var border = ownerContext.inputCmpContext.getBorderInfo().width,
|
|
ieBug = Ext.isStrict && Ext.isIE8m,
|
|
natural = ownerContext.widthModel.natural;
|
|
|
|
this.callParent(arguments);
|
|
width = ownerContext.bodyCellContext.props.width - border;
|
|
if (natural) {
|
|
if (ieBug) {
|
|
width -= 2;
|
|
}
|
|
ownerContext.textAreaContext.setWidth(width);
|
|
ownerContext.iframeContext.setWidth(width);
|
|
} else if (ieBug) {
|
|
ownerContext.textAreaContext.setWidth(width);
|
|
}
|
|
},
|
|
|
|
publishInnerHeight: function (ownerContext, height) {
|
|
var toolbarHeight = ownerContext.toolbarContext.getProp('height'),
|
|
sourceEdit = this.owner.sourceEditMode;
|
|
|
|
this.callParent(arguments);
|
|
height = ownerContext.bodyCellContext.props.height;
|
|
|
|
if (toolbarHeight !== undefined) {
|
|
height -= toolbarHeight + ownerContext.inputCmpContext.getFrameInfo().height;
|
|
if (Ext.isIE8 && Ext.isStrict) {
|
|
height -= 2;
|
|
} else if (Ext.isIEQuirks && (Ext.isIE8 || Ext.isIE9)) {
|
|
height -= 4;
|
|
}
|
|
ownerContext.iframeContext.setHeight(height);
|
|
ownerContext.textAreaContext.setHeight(height);
|
|
} else {
|
|
this.done = false;
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
|
|
* automatically hidden when needed. These are noted in the config options where appropriate.
|
|
*
|
|
* The editor's toolbar buttons have tooltips defined in the {@link #buttonTips} property, but they are not
|
|
* enabled by default unless the global {@link Ext.tip.QuickTipManager} singleton is
|
|
* {@link Ext.tip.QuickTipManager#init initialized}.
|
|
*
|
|
* An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an
|
|
* Editor within any element that has display set to 'none' can cause problems in Safari and Firefox due to their
|
|
* default iframe reloading bugs.
|
|
*
|
|
* # Example usage
|
|
*
|
|
* Simple example rendered with default options:
|
|
*
|
|
* @example
|
|
* Ext.tip.QuickTipManager.init(); // enable tooltips
|
|
* Ext.create('Ext.form.HtmlEditor', {
|
|
* width: 580,
|
|
* height: 250,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* Passed via xtype into a container and with custom options:
|
|
*
|
|
* @example
|
|
* Ext.tip.QuickTipManager.init(); // enable tooltips
|
|
* new Ext.panel.Panel({
|
|
* title: 'HTML Editor',
|
|
* renderTo: Ext.getBody(),
|
|
* width: 550,
|
|
* height: 250,
|
|
* frame: true,
|
|
* layout: 'fit',
|
|
* items: {
|
|
* xtype: 'htmleditor',
|
|
* enableColors: false,
|
|
* enableAlignments: false
|
|
* }
|
|
* });
|
|
*
|
|
* # Reflow issues
|
|
*
|
|
* In some browsers, a layout reflow will cause the underlying editor iframe to be reset. This
|
|
* is most commonly seen when using the editor in collapsed panels with animation. In these cases
|
|
* it is best to avoid animation. More information can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=90268
|
|
*/
|
|
Ext.define('Ext.form.field.HtmlEditor', {
|
|
extend: Ext.form.FieldContainer ,
|
|
mixins: {
|
|
field: Ext.form.field.Field
|
|
},
|
|
alias: 'widget.htmleditor',
|
|
alternateClassName: 'Ext.form.HtmlEditor',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentLayout: 'htmleditor',
|
|
|
|
componentTpl: [
|
|
'{beforeTextAreaTpl}',
|
|
'<textarea id="{id}-textareaEl" name="{name}" tabIndex="-1" {inputAttrTpl}',
|
|
' class="{textareaCls}" autocomplete="off">',
|
|
'{[Ext.util.Format.htmlEncode(values.value)]}',
|
|
'</textarea>',
|
|
'{afterTextAreaTpl}',
|
|
'{beforeIFrameTpl}',
|
|
'<iframe id="{id}-iframeEl" name="{iframeName}" frameBorder="0" {iframeAttrTpl}',
|
|
' src="{iframeSrc}" class="{iframeCls}"></iframe>',
|
|
'{afterIFrameTpl}',
|
|
{
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
stretchInputElFixed: true,
|
|
|
|
subTplInsertions: [
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeTextAreaTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the textarea element. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'beforeTextAreaTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterTextAreaTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the textarea element. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'afterTextAreaTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} beforeIFrameTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* before the iframe element. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'beforeIFrameTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} afterIFrameTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* after the iframe element. If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'afterIFrameTpl',
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.XTemplate} iframeAttrTpl
|
|
* An optional string or `XTemplate` configuration to insert in the field markup
|
|
* inside the iframe element (as attributes). If an `XTemplate` is used, the component's
|
|
* {@link Ext.form.field.Base#getSubTplData subTpl data} serves as the context.
|
|
*/
|
|
'iframeAttrTpl',
|
|
|
|
// inherited
|
|
'inputAttrTpl'
|
|
],
|
|
|
|
/**
|
|
* @cfg {Boolean} enableFormat
|
|
* Enable the bold, italic and underline buttons
|
|
*/
|
|
enableFormat: true,
|
|
/**
|
|
* @cfg {Boolean} enableFontSize
|
|
* Enable the increase/decrease font size buttons
|
|
*/
|
|
enableFontSize: true,
|
|
/**
|
|
* @cfg {Boolean} enableColors
|
|
* Enable the fore/highlight color buttons
|
|
*/
|
|
enableColors: true,
|
|
/**
|
|
* @cfg {Boolean} enableAlignments
|
|
* Enable the left, center, right alignment buttons
|
|
*/
|
|
enableAlignments: true,
|
|
/**
|
|
* @cfg {Boolean} enableLists
|
|
* Enable the bullet and numbered list buttons. Not available in Safari 2.
|
|
*/
|
|
enableLists: true,
|
|
/**
|
|
* @cfg {Boolean} enableSourceEdit
|
|
* Enable the switch to source edit button. Not available in Safari 2.
|
|
*/
|
|
enableSourceEdit: true,
|
|
/**
|
|
* @cfg {Boolean} enableLinks
|
|
* Enable the create link button. Not available in Safari 2.
|
|
*/
|
|
enableLinks: true,
|
|
/**
|
|
* @cfg {Boolean} enableFont
|
|
* Enable font selection. Not available in Safari 2.
|
|
*/
|
|
enableFont: true,
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} createLinkText
|
|
* The default text for the create link prompt
|
|
*/
|
|
createLinkText: 'Please enter the URL for the link:',
|
|
//</locale>
|
|
/**
|
|
* @cfg {String} [defaultLinkValue='http://']
|
|
* The default value for the create link prompt
|
|
*/
|
|
defaultLinkValue: 'http:/'+'/',
|
|
/**
|
|
* @cfg {String[]} fontFamilies
|
|
* An array of available font families
|
|
*/
|
|
fontFamilies: [
|
|
'Arial',
|
|
'Courier New',
|
|
'Tahoma',
|
|
'Times New Roman',
|
|
'Verdana'
|
|
],
|
|
/**
|
|
* @cfg {String} defaultValue
|
|
* A default value to be put into the editor to resolve focus issues.
|
|
*
|
|
* Defaults to (Non-breaking space) in Opera and IE6,
|
|
* (Zero-width space) in all other browsers.
|
|
*/
|
|
defaultValue: (Ext.isOpera || Ext.isIE6) ? ' ' : '​',
|
|
|
|
// private
|
|
extraFieldBodyCls: Ext.baseCSSPrefix + 'html-editor-wrap',
|
|
|
|
/**
|
|
* @cfg {String} defaultButtonUI
|
|
* A default {@link Ext.Component#ui ui} to use for the HtmlEditor's toolbar
|
|
* {@link Ext.button.Button Buttons}
|
|
*/
|
|
|
|
// @private
|
|
initialized: false,
|
|
// @private
|
|
activated: false,
|
|
// @private
|
|
sourceEditMode: false,
|
|
// @private
|
|
iframePad:3,
|
|
// @private
|
|
hideMode:'offsets',
|
|
|
|
maskOnDisable: true,
|
|
|
|
containerElCls: Ext.baseCSSPrefix + 'html-editor-container',
|
|
|
|
// @private
|
|
initComponent: function(){
|
|
var me = this;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event initialize
|
|
* Fires when the editor is fully initialized (including the iframe)
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
*/
|
|
'initialize',
|
|
/**
|
|
* @event activate
|
|
* Fires when the editor is first receives the focus. Any insertion must wait until after this event.
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
*/
|
|
'activate',
|
|
/**
|
|
* @event beforesync
|
|
* Fires before the textarea is updated with content from the editor iframe. Return false to cancel the
|
|
* sync.
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
* @param {String} html
|
|
*/
|
|
'beforesync',
|
|
/**
|
|
* @event beforepush
|
|
* Fires before the iframe editor is updated with content from the textarea. Return false to cancel the
|
|
* push.
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
* @param {String} html
|
|
*/
|
|
'beforepush',
|
|
/**
|
|
* @event sync
|
|
* Fires when the textarea is updated with content from the editor iframe.
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
* @param {String} html
|
|
*/
|
|
'sync',
|
|
/**
|
|
* @event push
|
|
* Fires when the iframe editor is updated with content from the textarea.
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
* @param {String} html
|
|
*/
|
|
'push',
|
|
/**
|
|
* @event editmodechange
|
|
* Fires when the editor switches edit modes
|
|
* @param {Ext.form.field.HtmlEditor} this
|
|
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
|
|
*/
|
|
'editmodechange'
|
|
);
|
|
|
|
me.items = [me.createToolbar(), me.createInputCmp()];
|
|
|
|
me.layout = {
|
|
type: 'vbox',
|
|
align: 'stretch'
|
|
};
|
|
|
|
me.callParent(arguments);
|
|
me.initField();
|
|
},
|
|
|
|
createInputCmp: function(){
|
|
this.inputCmp = Ext.widget(this.getInputCmpCfg());
|
|
return this.inputCmp;
|
|
},
|
|
|
|
getInputCmpCfg: function(){
|
|
var me = this,
|
|
id = me.id + '-inputCmp',
|
|
data = {
|
|
id : id,
|
|
name : me.name,
|
|
textareaCls : Ext.baseCSSPrefix + 'hidden',
|
|
value : me.value,
|
|
iframeName : Ext.id(),
|
|
iframeSrc : Ext.SSL_SECURE_URL,
|
|
iframeCls : Ext.baseCSSPrefix + 'htmleditor-iframe'
|
|
};
|
|
|
|
me.getInsertionRenderData(data, me.subTplInsertions);
|
|
|
|
return {
|
|
flex: 1,
|
|
xtype: 'component',
|
|
tpl: me.getTpl('componentTpl'),
|
|
childEls: ['iframeEl', 'textareaEl'],
|
|
id: id,
|
|
cls: Ext.baseCSSPrefix + 'html-editor-input',
|
|
data: data
|
|
};
|
|
},
|
|
|
|
/*
|
|
* Called when the editor creates its toolbar. Override this method if you need to
|
|
* add custom toolbar buttons.
|
|
* @param {Ext.form.field.HtmlEditor} editor
|
|
* @protected
|
|
*/
|
|
createToolbar: function(){
|
|
this.toolbar = Ext.widget(this.getToolbarCfg());
|
|
return this.toolbar;
|
|
},
|
|
|
|
getToolbarCfg: function(){
|
|
var me = this,
|
|
items = [], i,
|
|
tipsEnabled = Ext.quickTipsActive && Ext.tip.QuickTipManager.isEnabled(),
|
|
baseCSSPrefix = Ext.baseCSSPrefix,
|
|
fontSelectItem, undef;
|
|
|
|
function btn(id, toggle, handler){
|
|
return {
|
|
itemId: id,
|
|
cls: baseCSSPrefix + 'btn-icon',
|
|
iconCls: baseCSSPrefix + 'edit-'+id,
|
|
enableToggle:toggle !== false,
|
|
scope: me,
|
|
handler:handler||me.relayBtnCmd,
|
|
clickEvent: 'mousedown',
|
|
tooltip: tipsEnabled ? me.buttonTips[id] || undef : undef,
|
|
overflowText: me.buttonTips[id].title || undef,
|
|
tabIndex: -1
|
|
};
|
|
}
|
|
|
|
|
|
if (me.enableFont && !Ext.isSafari2) {
|
|
fontSelectItem = Ext.widget('component', {
|
|
itemId: 'fontSelect',
|
|
renderTpl: [
|
|
'<select id="{id}-selectEl" class="' + baseCSSPrefix + 'font-select">',
|
|
'</select>'
|
|
],
|
|
childEls: ['selectEl'],
|
|
afterRender: function() {
|
|
me.fontSelect = this.selectEl;
|
|
Ext.Component.prototype.afterRender.apply(this, arguments);
|
|
},
|
|
onDisable: function() {
|
|
var selectEl = this.selectEl;
|
|
if (selectEl) {
|
|
selectEl.dom.disabled = true;
|
|
}
|
|
Ext.Component.prototype.onDisable.apply(this, arguments);
|
|
},
|
|
onEnable: function() {
|
|
var selectEl = this.selectEl;
|
|
if (selectEl) {
|
|
selectEl.dom.disabled = false;
|
|
}
|
|
Ext.Component.prototype.onEnable.apply(this, arguments);
|
|
},
|
|
listeners: {
|
|
change: function() {
|
|
me.win.focus();
|
|
me.relayCmd('fontName', me.fontSelect.dom.value);
|
|
me.deferFocus();
|
|
},
|
|
element: 'selectEl'
|
|
}
|
|
});
|
|
|
|
items.push(
|
|
fontSelectItem,
|
|
'-'
|
|
);
|
|
}
|
|
|
|
if (me.enableFormat) {
|
|
items.push(
|
|
btn('bold'),
|
|
btn('italic'),
|
|
btn('underline')
|
|
);
|
|
}
|
|
|
|
if (me.enableFontSize) {
|
|
items.push(
|
|
'-',
|
|
btn('increasefontsize', false, me.adjustFont),
|
|
btn('decreasefontsize', false, me.adjustFont)
|
|
);
|
|
}
|
|
|
|
if (me.enableColors) {
|
|
items.push(
|
|
'-', {
|
|
itemId: 'forecolor',
|
|
cls: baseCSSPrefix + 'btn-icon',
|
|
iconCls: baseCSSPrefix + 'edit-forecolor',
|
|
overflowText: me.buttonTips.forecolor.title,
|
|
tooltip: tipsEnabled ? me.buttonTips.forecolor || undef : undef,
|
|
tabIndex:-1,
|
|
menu: Ext.widget('menu', {
|
|
plain: true,
|
|
|
|
items: [{
|
|
xtype: 'colorpicker',
|
|
allowReselect: true,
|
|
focus: Ext.emptyFn,
|
|
value: '000000',
|
|
plain: true,
|
|
clickEvent: 'mousedown',
|
|
handler: function(cp, color) {
|
|
me.relayCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#'+color : color);
|
|
this.up('menu').hide();
|
|
}
|
|
}]
|
|
})
|
|
}, {
|
|
itemId: 'backcolor',
|
|
cls: baseCSSPrefix + 'btn-icon',
|
|
iconCls: baseCSSPrefix + 'edit-backcolor',
|
|
overflowText: me.buttonTips.backcolor.title,
|
|
tooltip: tipsEnabled ? me.buttonTips.backcolor || undef : undef,
|
|
tabIndex:-1,
|
|
menu: Ext.widget('menu', {
|
|
plain: true,
|
|
|
|
items: [{
|
|
xtype: 'colorpicker',
|
|
focus: Ext.emptyFn,
|
|
value: 'FFFFFF',
|
|
plain: true,
|
|
allowReselect: true,
|
|
clickEvent: 'mousedown',
|
|
handler: function(cp, color) {
|
|
if (Ext.isGecko) {
|
|
me.execCmd('useCSS', false);
|
|
me.execCmd('hilitecolor', '#'+color);
|
|
me.execCmd('useCSS', true);
|
|
me.deferFocus();
|
|
} else {
|
|
me.relayCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE || Ext.isOpera ? '#'+color : color);
|
|
}
|
|
this.up('menu').hide();
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
);
|
|
}
|
|
|
|
if (me.enableAlignments) {
|
|
items.push(
|
|
'-',
|
|
btn('justifyleft'),
|
|
btn('justifycenter'),
|
|
btn('justifyright')
|
|
);
|
|
}
|
|
|
|
if (!Ext.isSafari2) {
|
|
if (me.enableLinks) {
|
|
items.push(
|
|
'-',
|
|
btn('createlink', false, me.createLink)
|
|
);
|
|
}
|
|
|
|
if (me.enableLists) {
|
|
items.push(
|
|
'-',
|
|
btn('insertorderedlist'),
|
|
btn('insertunorderedlist')
|
|
);
|
|
}
|
|
if (me.enableSourceEdit) {
|
|
items.push(
|
|
'-',
|
|
btn('sourceedit', true, function(btn){
|
|
me.toggleSourceEdit(!me.sourceEditMode);
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
// Everything starts disabled.
|
|
for (i = 0; i < items.length; i++) {
|
|
if (items[i].itemId !== 'sourceedit') {
|
|
items[i].disabled = true;
|
|
}
|
|
}
|
|
|
|
// build the toolbar
|
|
// Automatically rendered in AbstractComponent.afterRender's renderChildren call
|
|
return {
|
|
xtype: 'toolbar',
|
|
defaultButtonUI: me.defaultButtonUI,
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tb',
|
|
enableOverflow: true,
|
|
items: items,
|
|
|
|
// stop form submits
|
|
listeners: {
|
|
click: function(e){
|
|
e.preventDefault();
|
|
},
|
|
element: 'el'
|
|
}
|
|
};
|
|
},
|
|
|
|
getMaskTarget: function(){
|
|
// Can't be the body td directly because of issues with absolute positioning
|
|
// inside td's in FF
|
|
return Ext.isGecko ? this.inputCmp.el : this.bodyEl;
|
|
},
|
|
|
|
/**
|
|
* Sets the read only state of this field.
|
|
* @param {Boolean} readOnly Whether the field should be read only.
|
|
*/
|
|
setReadOnly: function(readOnly) {
|
|
var me = this,
|
|
textareaEl = me.textareaEl,
|
|
iframeEl = me.iframeEl,
|
|
body;
|
|
|
|
me.readOnly = readOnly;
|
|
|
|
if (textareaEl) {
|
|
textareaEl.dom.readOnly = readOnly;
|
|
}
|
|
|
|
if (me.initialized) {
|
|
body = me.getEditorBody();
|
|
if (Ext.isIE) {
|
|
// Hide the iframe while setting contentEditable so it doesn't grab focus
|
|
iframeEl.setDisplayed(false);
|
|
body.contentEditable = !readOnly;
|
|
iframeEl.setDisplayed(true);
|
|
} else {
|
|
me.setDesignMode(!readOnly);
|
|
}
|
|
if (body) {
|
|
body.style.cursor = readOnly ? 'default' : 'text';
|
|
}
|
|
me.disableItems(readOnly);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Called when the editor initializes the iframe with HTML contents. Override this method if you
|
|
* want to change the initialization markup of the iframe (e.g. to add stylesheets).
|
|
*
|
|
* **Note:** IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility.
|
|
* Also note that forcing IE7 mode works when the page is loaded normally, but if you are using IE's Web
|
|
* Developer Tools to manually set the document mode, that will take precedence and override what this
|
|
* code sets by default. This can be confusing when developing, but is not a user-facing issue.
|
|
* @protected
|
|
*/
|
|
getDocMarkup: function() {
|
|
var me = this,
|
|
h = me.iframeEl.getHeight() - me.iframePad * 2,
|
|
oldIE = Ext.isIE8m;
|
|
|
|
// - IE9+ require a strict doctype otherwise text outside visible area can't be selected.
|
|
// - Opera inserts <P> tags on Return key, so P margins must be removed to avoid double line-height.
|
|
// - On browsers other than IE, the font is not inherited by the IFRAME so it must be specified.
|
|
return Ext.String.format(
|
|
(oldIE ? '' : '<!DOCTYPE html>')
|
|
+ '<html><head><style type="text/css">'
|
|
+ (Ext.isOpera ? 'p{margin:0}' : '')
|
|
+ 'body{border:0;margin:0;padding:{0}px;direction:' + (me.rtl ? 'rtl;' : 'ltr;')
|
|
+ (oldIE ? Ext.emptyString : 'min-')
|
|
+ 'height:{1}px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:text;background-color:white;'
|
|
+ (Ext.isIE ? '' : 'font-size:12px;font-family:{2}')
|
|
+ '}</style></head><body></body></html>'
|
|
, me.iframePad, h, me.defaultFont);
|
|
},
|
|
|
|
// @private
|
|
getEditorBody: function() {
|
|
var doc = this.getDoc();
|
|
return doc.body || doc.documentElement;
|
|
},
|
|
|
|
// @private
|
|
getDoc: function() {
|
|
return (!Ext.isIE && this.iframeEl.dom.contentDocument) || this.getWin().document;
|
|
},
|
|
|
|
// @private
|
|
getWin: function() {
|
|
return Ext.isIE ? this.iframeEl.dom.contentWindow : window.frames[this.iframeEl.dom.name];
|
|
},
|
|
|
|
initDefaultFont: function(){
|
|
// It's not ideal to do this here since it's a write phase, but we need to know
|
|
// what the font used in the textarea is so that we can setup the appropriate font
|
|
// options in the select box. The select box will reflow once we populate it, so we want
|
|
// to do so before we layout the first time.
|
|
|
|
var me = this,
|
|
selIdx = 0,
|
|
fonts, font, select,
|
|
option, i, len, lower;
|
|
|
|
if (!me.defaultFont) {
|
|
font = me.textareaEl.getStyle('font-family');
|
|
font = Ext.String.capitalize(font.split(',')[0]);
|
|
fonts = Ext.Array.clone(me.fontFamilies);
|
|
Ext.Array.include(fonts, font);
|
|
fonts.sort();
|
|
me.defaultFont = font;
|
|
|
|
select = me.down('#fontSelect').selectEl.dom;
|
|
for (i = 0, len = fonts.length; i < len; ++i) {
|
|
font = fonts[i];
|
|
lower = font.toLowerCase();
|
|
option = new Option(font, lower);
|
|
if (font == me.defaultFont) {
|
|
selIdx = i;
|
|
}
|
|
option.style.fontFamily = lower;
|
|
|
|
if (Ext.isIE) {
|
|
select.add(option);
|
|
} else {
|
|
select.options.add(option);
|
|
}
|
|
}
|
|
// Old IE versions have a problem if we set the selected property
|
|
// in the loop, so set it after.
|
|
select.options[selIdx].selected = true;
|
|
}
|
|
},
|
|
|
|
isEqual: function(value1, value2){
|
|
return this.isEqualAsString(value1, value2);
|
|
},
|
|
|
|
// @private
|
|
afterRender: function() {
|
|
var me = this,
|
|
inputCmp = me.inputCmp;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.iframeEl = inputCmp.iframeEl;
|
|
me.textareaEl = inputCmp.textareaEl;
|
|
|
|
// The input element is interrogated by the layout to extract height when labelAlign is 'top'
|
|
// It must be set, and then switched between the iframe and the textarea
|
|
me.inputEl = me.iframeEl;
|
|
|
|
if (me.enableFont) {
|
|
me.initDefaultFont();
|
|
}
|
|
|
|
// Start polling for when the iframe document is ready to be manipulated
|
|
me.monitorTask = Ext.TaskManager.start({
|
|
run: me.checkDesignMode,
|
|
scope: me,
|
|
interval: 100
|
|
});
|
|
me.relayCmd('fontName', me.defaultFont);
|
|
},
|
|
|
|
initFrameDoc: function() {
|
|
var me = this,
|
|
doc, task;
|
|
|
|
Ext.TaskManager.stop(me.monitorTask);
|
|
|
|
doc = me.getDoc();
|
|
me.win = me.getWin();
|
|
|
|
doc.open();
|
|
doc.write(me.getDocMarkup());
|
|
doc.close();
|
|
|
|
task = { // must defer to wait for browser to be ready
|
|
run: function() {
|
|
var doc = me.getDoc();
|
|
if (doc.body || doc.readyState === 'complete') {
|
|
Ext.TaskManager.stop(task);
|
|
me.setDesignMode(true);
|
|
Ext.defer(me.initEditor, 10, me);
|
|
}
|
|
},
|
|
interval: 10,
|
|
duration:10000,
|
|
scope: me
|
|
};
|
|
Ext.TaskManager.start(task);
|
|
},
|
|
|
|
checkDesignMode: function() {
|
|
var me = this,
|
|
doc = me.getDoc();
|
|
if (doc && (!doc.editorInitialized || me.getDesignMode() !== 'on')) {
|
|
me.initFrameDoc();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets current design mode. To enable, mode can be true or 'on', off otherwise
|
|
*/
|
|
setDesignMode: function(mode) {
|
|
var me = this,
|
|
doc = me.getDoc();
|
|
if (doc) {
|
|
if (me.readOnly) {
|
|
mode = false;
|
|
}
|
|
doc.designMode = (/on|true/i).test(String(mode).toLowerCase()) ?'on':'off';
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getDesignMode: function() {
|
|
var doc = this.getDoc();
|
|
return !doc ? '' : String(doc.designMode).toLowerCase();
|
|
},
|
|
|
|
disableItems: function(disabled) {
|
|
var items = this.getToolbar().items.items,
|
|
i,
|
|
iLen = items.length,
|
|
item;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
item = items[i];
|
|
|
|
if (item.getItemId() !== 'sourceedit') {
|
|
item.setDisabled(disabled);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggles the editor between standard and source edit mode.
|
|
* @param {Boolean} [sourceEditMode] True for source edit, false for standard
|
|
*/
|
|
toggleSourceEdit: function(sourceEditMode) {
|
|
var me = this,
|
|
iframe = me.iframeEl,
|
|
textarea = me.textareaEl,
|
|
hiddenCls = Ext.baseCSSPrefix + 'hidden',
|
|
btn = me.getToolbar().getComponent('sourceedit');
|
|
|
|
if (!Ext.isBoolean(sourceEditMode)) {
|
|
sourceEditMode = !me.sourceEditMode;
|
|
}
|
|
me.sourceEditMode = sourceEditMode;
|
|
|
|
if (btn.pressed !== sourceEditMode) {
|
|
btn.toggle(sourceEditMode);
|
|
}
|
|
if (sourceEditMode) {
|
|
me.disableItems(true);
|
|
me.syncValue();
|
|
iframe.addCls(hiddenCls);
|
|
textarea.removeCls(hiddenCls);
|
|
textarea.dom.removeAttribute('tabIndex');
|
|
textarea.focus();
|
|
me.inputEl = textarea;
|
|
} else {
|
|
if (me.initialized) {
|
|
me.disableItems(me.readOnly);
|
|
}
|
|
me.pushValue();
|
|
iframe.removeCls(hiddenCls);
|
|
textarea.addCls(hiddenCls);
|
|
textarea.dom.setAttribute('tabIndex', -1);
|
|
me.deferFocus();
|
|
me.inputEl = iframe;
|
|
}
|
|
me.fireEvent('editmodechange', me, sourceEditMode);
|
|
me.updateLayout();
|
|
},
|
|
|
|
// @private used internally
|
|
createLink: function() {
|
|
var url = prompt(this.createLinkText, this.defaultLinkValue);
|
|
if (url && url !== 'http:/'+'/') {
|
|
this.relayCmd('createlink', url);
|
|
}
|
|
},
|
|
|
|
clearInvalid: Ext.emptyFn,
|
|
|
|
setValue: function(value) {
|
|
var me = this,
|
|
textarea = me.textareaEl,
|
|
inputCmp = me.inputCmp;
|
|
|
|
me.mixins.field.setValue.call(me, value);
|
|
if (value === null || value === undefined) {
|
|
value = '';
|
|
}
|
|
if (textarea) {
|
|
textarea.dom.value = value;
|
|
}
|
|
me.pushValue();
|
|
|
|
if (!me.rendered && me.inputCmp) {
|
|
me.inputCmp.data.value = value;
|
|
}
|
|
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* If you need/want custom HTML cleanup, this is the method you should override.
|
|
* @param {String} html The HTML to be cleaned
|
|
* @return {String} The cleaned HTML
|
|
* @protected
|
|
*/
|
|
cleanHtml: function(html) {
|
|
html = String(html);
|
|
if (Ext.isWebKit) { // strip safari nonsense
|
|
html = html.replace(/\sclass="(?:Apple-style-span|Apple-tab-span|khtml-block-placeholder)"/gi, '');
|
|
}
|
|
|
|
/*
|
|
* Neat little hack. Strips out all the non-digit characters from the default
|
|
* value and compares it to the character code of the first character in the string
|
|
* because it can cause encoding issues when posted to the server. We need the
|
|
* parseInt here because charCodeAt will return a number.
|
|
*/
|
|
if (html.charCodeAt(0) === parseInt(this.defaultValue.replace(/\D/g, ''), 10)) {
|
|
html = html.substring(1);
|
|
}
|
|
|
|
return html;
|
|
},
|
|
|
|
/**
|
|
* Syncs the contents of the editor iframe with the textarea.
|
|
* @protected
|
|
*/
|
|
syncValue: function(){
|
|
var me = this,
|
|
body, changed, html, bodyStyle, match, textElDom;
|
|
|
|
if (me.initialized) {
|
|
body = me.getEditorBody();
|
|
html = body.innerHTML;
|
|
textElDom = me.textareaEl.dom;
|
|
|
|
if (Ext.isWebKit) {
|
|
bodyStyle = body.getAttribute('style'); // Safari puts text-align styles on the body element!
|
|
match = bodyStyle.match(/text-align:(.*?);/i);
|
|
if (match && match[1]) {
|
|
html = '<div style="' + match[0] + '">' + html + '</div>';
|
|
}
|
|
}
|
|
|
|
html = me.cleanHtml(html);
|
|
|
|
if (me.fireEvent('beforesync', me, html) !== false) {
|
|
// Gecko inserts single <br> tag when input is empty
|
|
// and user toggles source mode. See https://sencha.jira.com/browse/EXTJSIV-8542
|
|
if (Ext.isGecko && textElDom.value === '' && html === '<br>') {
|
|
html = '';
|
|
}
|
|
|
|
if (textElDom.value !== html) {
|
|
textElDom.value = html;
|
|
changed = true;
|
|
}
|
|
|
|
me.fireEvent('sync', me, html);
|
|
|
|
if (changed) {
|
|
// we have to guard this to avoid infinite recursion because getValue
|
|
// calls this method...
|
|
me.checkChange();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getValue: function() {
|
|
var me = this,
|
|
value;
|
|
if (!me.sourceEditMode) {
|
|
me.syncValue();
|
|
}
|
|
value = me.rendered ? me.textareaEl.dom.value : me.value;
|
|
me.value = value;
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Pushes the value of the textarea into the iframe editor.
|
|
* @protected
|
|
*/
|
|
pushValue: function() {
|
|
var me = this,
|
|
v;
|
|
if(me.initialized){
|
|
v = me.textareaEl.dom.value || '';
|
|
if (!me.activated && v.length < 1) {
|
|
v = me.defaultValue;
|
|
}
|
|
if (me.fireEvent('beforepush', me, v) !== false) {
|
|
me.getEditorBody().innerHTML = v;
|
|
if (Ext.isGecko) {
|
|
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
|
|
me.setDesignMode(false); //toggle off first
|
|
me.setDesignMode(true);
|
|
}
|
|
me.fireEvent('push', me, v);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
deferFocus: function(){
|
|
this.focus(false, true);
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
var me = this,
|
|
win = me.win;
|
|
return win && !me.sourceEditMode ? win : me.textareaEl;
|
|
},
|
|
|
|
focus: function(selectText, delay) {
|
|
var me = this,
|
|
value, focusEl;
|
|
|
|
if (delay) {
|
|
if (!me.focusTask) {
|
|
me.focusTask = new Ext.util.DelayedTask(me.focus);
|
|
}
|
|
me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
|
|
}
|
|
else {
|
|
if (selectText) {
|
|
if (me.textareaEl && me.textareaEl.dom) {
|
|
value = me.textareaEl.dom.value;
|
|
}
|
|
if (value && value.length) { // Make sure there is content before calling SelectAll, otherwise the caret disappears.
|
|
me.execCmd('selectall', true);
|
|
}
|
|
}
|
|
focusEl = me.getFocusEl();
|
|
if (focusEl && focusEl.focus) {
|
|
focusEl.focus();
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
// @private
|
|
initEditor: function(){
|
|
//Destroying the component during/before initEditor can cause issues.
|
|
try {
|
|
var me = this,
|
|
dbody = me.getEditorBody(),
|
|
ss = me.textareaEl.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'),
|
|
doc,
|
|
fn;
|
|
|
|
ss['background-attachment'] = 'fixed'; // w3c
|
|
dbody.bgProperties = 'fixed'; // ie
|
|
|
|
Ext.DomHelper.applyStyles(dbody, ss);
|
|
|
|
doc = me.getDoc();
|
|
|
|
if (doc) {
|
|
try {
|
|
Ext.EventManager.removeAll(doc);
|
|
} catch(e) {}
|
|
}
|
|
|
|
/*
|
|
* We need to use createDelegate here, because when using buffer, the delayed task is added
|
|
* as a property to the function. When the listener is removed, the task is deleted from the function.
|
|
* Since onEditorEvent is shared on the prototype, if we have multiple html editors, the first time one of the editors
|
|
* is destroyed, it causes the fn to be deleted from the prototype, which causes errors. Essentially, we're just anonymizing the function.
|
|
*/
|
|
fn = Ext.Function.bind(me.onEditorEvent, me);
|
|
Ext.EventManager.on(doc, {
|
|
mousedown: fn,
|
|
dblclick: fn,
|
|
click: fn,
|
|
keyup: fn,
|
|
buffer:100
|
|
});
|
|
|
|
// These events need to be relayed from the inner document (where they stop
|
|
// bubbling) up to the outer document. This has to be done at the DOM level so
|
|
// the event reaches listeners on elements like the document body. The effected
|
|
// mechanisms that depend on this bubbling behavior are listed to the right
|
|
// of the event.
|
|
fn = me.onRelayedEvent;
|
|
Ext.EventManager.on(doc, {
|
|
mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
|
|
mousemove: fn, // window resize drag detection
|
|
mouseup: fn, // window resize termination
|
|
click: fn, // not sure, but just to be safe
|
|
dblclick: fn, // not sure again
|
|
scope: me
|
|
});
|
|
|
|
if (Ext.isGecko) {
|
|
Ext.EventManager.on(doc, 'keypress', me.applyCommand, me);
|
|
}
|
|
|
|
if (me.fixKeys) {
|
|
Ext.EventManager.on(doc, 'keydown', me.fixKeys, me);
|
|
}
|
|
if (me.fixKeysAfter) {
|
|
Ext.EventManager.on(doc, 'keyup', me.fixKeysAfter, me);
|
|
}
|
|
|
|
if (Ext.isIE9 && Ext.isStrict) {
|
|
Ext.EventManager.on(doc.documentElement, 'focus', me.focus, me);
|
|
}
|
|
|
|
// In old IEs, clicking on a toolbar button shifts focus from iframe
|
|
// and it loses selection. To avoid this, we save current selection
|
|
// and restore it.
|
|
if (Ext.isIE8m || (Ext.isIE9 && !Ext.isStrict)) {
|
|
Ext.EventManager.on(doc, 'focusout', function() {
|
|
me.savedSelection = doc.selection.type !== 'None' ? doc.selection.createRange() : null;
|
|
}, me);
|
|
|
|
Ext.EventManager.on(doc, 'focusin', function() {
|
|
if (me.savedSelection) {
|
|
me.savedSelection.select();
|
|
}
|
|
}, me);
|
|
}
|
|
|
|
// We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
|
|
Ext.EventManager.onWindowUnload(me.beforeDestroy, me);
|
|
doc.editorInitialized = true;
|
|
|
|
me.initialized = true;
|
|
me.pushValue();
|
|
me.setReadOnly(me.readOnly);
|
|
me.fireEvent('initialize', me);
|
|
} catch(ex) {
|
|
// ignore (why?)
|
|
}
|
|
},
|
|
|
|
// @private
|
|
beforeDestroy: function(){
|
|
var me = this,
|
|
monitorTask = me.monitorTask,
|
|
doc, prop;
|
|
|
|
if (monitorTask) {
|
|
Ext.TaskManager.stop(monitorTask);
|
|
}
|
|
if (me.rendered) {
|
|
Ext.EventManager.removeUnloadListener(me.beforeDestroy, me);
|
|
try {
|
|
doc = me.getDoc();
|
|
if (doc) {
|
|
// removeAll() doesn't currently know how to handle iframe document,
|
|
// so for now we have to wrap it in an Ext.Element using Ext.fly,
|
|
// or else IE6/7 will leak big time when the page is refreshed.
|
|
// TODO: this may not be needed once we find a more permanent fix.
|
|
// see EXTJSIV-5891.
|
|
Ext.EventManager.removeAll(Ext.fly(doc));
|
|
for (prop in doc) {
|
|
if (doc.hasOwnProperty && doc.hasOwnProperty(prop)) {
|
|
delete doc[prop];
|
|
}
|
|
}
|
|
}
|
|
} catch(e) {
|
|
// ignore (why?)
|
|
}
|
|
delete me.iframeEl;
|
|
delete me.textareaEl;
|
|
delete me.toolbar;
|
|
delete me.inputCmp;
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
// @private
|
|
onRelayedEvent: function (event) {
|
|
// relay event from the iframe's document to the document that owns the iframe...
|
|
|
|
var iframeEl = this.iframeEl,
|
|
|
|
// Get the left-based iframe position
|
|
iframeXY = Ext.Element.getTrueXY(iframeEl),
|
|
originalEventXY = event.getXY(),
|
|
|
|
// Get the left-based XY position.
|
|
// This is because the consumer of the injected event (Ext.EventManager) will
|
|
// perform its own RTL normalization.
|
|
eventXY = Ext.EventManager.getPageXY(event.browserEvent);
|
|
|
|
// the event from the inner document has XY relative to that document's origin,
|
|
// so adjust it to use the origin of the iframe in the outer document:
|
|
event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
|
|
|
|
event.injectEvent(iframeEl); // blame the iframe for the event...
|
|
|
|
event.xy = originalEventXY; // restore the original XY (just for safety)
|
|
},
|
|
|
|
// @private
|
|
onFirstFocus: function(){
|
|
var me = this,
|
|
selection, range;
|
|
me.activated = true;
|
|
me.disableItems(me.readOnly);
|
|
if (Ext.isGecko) { // prevent silly gecko errors
|
|
me.win.focus();
|
|
selection = me.win.getSelection();
|
|
if (!selection.focusNode || selection.focusNode.nodeType !== 3) {
|
|
range = selection.getRangeAt(0);
|
|
range.selectNodeContents(me.getEditorBody());
|
|
range.collapse(true);
|
|
me.deferFocus();
|
|
}
|
|
try {
|
|
me.execCmd('useCSS', true);
|
|
me.execCmd('styleWithCSS', false);
|
|
} catch(e) {
|
|
// ignore (why?)
|
|
}
|
|
}
|
|
me.fireEvent('activate', me);
|
|
},
|
|
|
|
// @private
|
|
adjustFont: function(btn) {
|
|
var adjust = btn.getItemId() === 'increasefontsize' ? 1 : -1,
|
|
size = this.getDoc().queryCommandValue('FontSize') || '2',
|
|
isPxSize = Ext.isString(size) && size.indexOf('px') !== -1,
|
|
isSafari;
|
|
size = parseInt(size, 10);
|
|
if (isPxSize) {
|
|
// Safari 3 values
|
|
// 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px
|
|
if (size <= 10) {
|
|
size = 1 + adjust;
|
|
}
|
|
else if (size <= 13) {
|
|
size = 2 + adjust;
|
|
}
|
|
else if (size <= 16) {
|
|
size = 3 + adjust;
|
|
}
|
|
else if (size <= 18) {
|
|
size = 4 + adjust;
|
|
}
|
|
else if (size <= 24) {
|
|
size = 5 + adjust;
|
|
}
|
|
else {
|
|
size = 6 + adjust;
|
|
}
|
|
size = Ext.Number.constrain(size, 1, 6);
|
|
} else {
|
|
isSafari = Ext.isSafari;
|
|
if (isSafari) { // safari
|
|
adjust *= 2;
|
|
}
|
|
size = Math.max(1, size + adjust) + (isSafari ? 'px' : 0);
|
|
}
|
|
this.relayCmd('FontSize', size);
|
|
},
|
|
|
|
// @private
|
|
onEditorEvent: function(e) {
|
|
this.updateToolbar();
|
|
},
|
|
|
|
/**
|
|
* Triggers a toolbar update by reading the markup state of the current selection in the editor.
|
|
* @protected
|
|
*/
|
|
updateToolbar: function() {
|
|
var me = this,
|
|
i, l, btns, doc, name, queriedName, fontSelect,
|
|
toolbarSubmenus;
|
|
|
|
if (me.readOnly) {
|
|
return;
|
|
}
|
|
|
|
if (!me.activated) {
|
|
me.onFirstFocus();
|
|
return;
|
|
}
|
|
|
|
btns = me.getToolbar().items.map;
|
|
doc = me.getDoc();
|
|
|
|
if (me.enableFont && !Ext.isSafari2) {
|
|
// When querying the fontName, Chrome may return an Array of font names
|
|
// with those containing spaces being placed between single-quotes.
|
|
queriedName = doc.queryCommandValue('fontName');
|
|
name = (queriedName ? queriedName.split(",")[0].replace(/^'/,'').replace(/'$/,'') : me.defaultFont).toLowerCase();
|
|
fontSelect = me.fontSelect.dom;
|
|
if (name !== fontSelect.value || name != queriedName) {
|
|
fontSelect.value = name;
|
|
}
|
|
}
|
|
|
|
function updateButtons() {
|
|
var state;
|
|
|
|
for (i = 0, l = arguments.length, name; i < l; i++) {
|
|
name = arguments[i];
|
|
|
|
// Firefox 18+ sometimes throws NS_ERROR_INVALID_POINTER exception
|
|
// See https://sencha.jira.com/browse/EXTJSIV-9766
|
|
try {
|
|
state = doc.queryCommandState(name);
|
|
}
|
|
catch (e) {
|
|
state = false;
|
|
}
|
|
|
|
btns[name].toggle(state);
|
|
}
|
|
}
|
|
if(me.enableFormat){
|
|
updateButtons('bold', 'italic', 'underline');
|
|
}
|
|
if(me.enableAlignments){
|
|
updateButtons('justifyleft', 'justifycenter', 'justifyright');
|
|
}
|
|
if(!Ext.isSafari2 && me.enableLists){
|
|
updateButtons('insertorderedlist', 'insertunorderedlist');
|
|
}
|
|
|
|
// Ensure any of our toolbar's owned menus are hidden.
|
|
// The overflow menu must control itself.
|
|
toolbarSubmenus = me.toolbar.query('menu');
|
|
for (i = 0; i < toolbarSubmenus.length; i++) {
|
|
toolbarSubmenus[i].hide();
|
|
}
|
|
me.syncValue();
|
|
},
|
|
|
|
// @private
|
|
relayBtnCmd: function(btn) {
|
|
this.relayCmd(btn.getItemId());
|
|
},
|
|
|
|
/**
|
|
* Executes a Midas editor command on the editor document and performs necessary focus and toolbar updates.
|
|
* **This should only be called after the editor is initialized.**
|
|
* @param {String} cmd The Midas command
|
|
* @param {String/Boolean} [value=null] The value to pass to the command
|
|
*/
|
|
relayCmd: function(cmd, value) {
|
|
Ext.defer(function() {
|
|
var me = this;
|
|
|
|
if (!this.isDestroyed) {
|
|
me.win.focus();
|
|
me.execCmd(cmd, value);
|
|
me.updateToolbar();
|
|
}
|
|
}, 10, this);
|
|
},
|
|
|
|
/**
|
|
* Executes a Midas editor command directly on the editor document. For visual commands, you should use
|
|
* {@link #relayCmd} instead. **This should only be called after the editor is initialized.**
|
|
* @param {String} cmd The Midas command
|
|
* @param {String/Boolean} [value=null] The value to pass to the command
|
|
*/
|
|
execCmd: function(cmd, value){
|
|
var me = this,
|
|
doc = me.getDoc();
|
|
doc.execCommand(cmd, false, (value == undefined ? null : value));
|
|
me.syncValue();
|
|
},
|
|
|
|
// @private
|
|
applyCommand: function(e){
|
|
if (e.ctrlKey) {
|
|
var me = this,
|
|
c = e.getCharCode(), cmd;
|
|
if (c > 0) {
|
|
c = String.fromCharCode(c);
|
|
switch (c) {
|
|
case 'b':
|
|
cmd = 'bold';
|
|
break;
|
|
case 'i':
|
|
cmd = 'italic';
|
|
break;
|
|
case 'u':
|
|
cmd = 'underline';
|
|
break;
|
|
}
|
|
if (cmd) {
|
|
me.win.focus();
|
|
me.execCmd(cmd);
|
|
me.deferFocus();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Inserts the passed text at the current cursor position.
|
|
* __Note:__ the editor must be initialized and activated to insert text.
|
|
* @param {String} text
|
|
*/
|
|
insertAtCursor: function(text){
|
|
var me = this,
|
|
range;
|
|
|
|
if (me.activated) {
|
|
me.win.focus();
|
|
if (Ext.isIE) {
|
|
range = me.getDoc().selection.createRange();
|
|
if (range) {
|
|
range.pasteHTML(text);
|
|
me.syncValue();
|
|
me.deferFocus();
|
|
}
|
|
}else{
|
|
me.execCmd('InsertHTML', text);
|
|
me.deferFocus();
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
fixKeys: (function() { // load time branching for fastest keydown performance
|
|
if (Ext.isIE) {
|
|
return function(e){
|
|
var me = this,
|
|
k = e.getKey(),
|
|
doc = me.getDoc(),
|
|
readOnly = me.readOnly,
|
|
range, target;
|
|
|
|
if (k === e.TAB) {
|
|
e.stopEvent();
|
|
if (!readOnly) {
|
|
range = doc.selection.createRange();
|
|
if (range){
|
|
if (range.collapse) {
|
|
range.collapse(true);
|
|
range.pasteHTML('    ');
|
|
}
|
|
|
|
me.deferFocus();
|
|
}
|
|
}
|
|
}
|
|
else if (k === e.ENTER) {
|
|
if (!readOnly) {
|
|
range = doc.selection.createRange();
|
|
if (range) {
|
|
target = range.parentElement();
|
|
if(!target || target.tagName.toLowerCase() !== 'li'){
|
|
e.stopEvent();
|
|
range.pasteHTML('<br />');
|
|
range.collapse(false);
|
|
range.select();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
if (Ext.isOpera) {
|
|
return function(e){
|
|
var me = this,
|
|
k = e.getKey(),
|
|
readOnly = me.readOnly;
|
|
if (k === e.TAB) {
|
|
e.stopEvent();
|
|
if (!readOnly) {
|
|
me.win.focus();
|
|
me.execCmd('InsertHTML','    ');
|
|
me.deferFocus();
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
return null; // not needed, so null
|
|
}()),
|
|
|
|
// @private
|
|
fixKeysAfter: (function() {
|
|
if (Ext.isIE) {
|
|
return function(e) {
|
|
var me = this,
|
|
k = e.getKey(),
|
|
doc = me.getDoc(),
|
|
readOnly = me.readOnly,
|
|
innerHTML;
|
|
|
|
if (!readOnly && (k === e.BACKSPACE || k === e.DELETE)) {
|
|
innerHTML = doc.body.innerHTML;
|
|
|
|
// If HtmlEditor had some input and user cleared it, IE inserts <p> </p>
|
|
// which makes an impression that there is still some text, and creeps
|
|
// into source mode when toggled. We don't want this.
|
|
//
|
|
// See https://sencha.jira.com/browse/EXTJSIV-8542
|
|
//
|
|
// N.B. There is **small** chance that user could go to source mode,
|
|
// type '<p> </p>', switch back to visual mode, type something else
|
|
// and then clear it -- the code below would clear the <p> tag as well,
|
|
// which could be considered a bug. However I see no way to distinguish
|
|
// between offending markup being entered manually and generated by IE,
|
|
// so this can be considered a nasty corner case.
|
|
//
|
|
if (innerHTML === '<p> </p>' || innerHTML === '<P> </P>') {
|
|
doc.body.innerHTML = '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}()),
|
|
|
|
/**
|
|
* Returns the editor's toolbar. **This is only available after the editor has been rendered.**
|
|
* @return {Ext.toolbar.Toolbar}
|
|
*/
|
|
getToolbar: function(){
|
|
return this.toolbar;
|
|
},
|
|
|
|
//<locale>
|
|
/**
|
|
* @property {Object} buttonTips
|
|
* Object collection of toolbar tooltips for the buttons in the editor. The key is the command id associated with
|
|
* that button and the value is a valid QuickTips object. For example:
|
|
*
|
|
* {
|
|
* bold: {
|
|
* title: 'Bold (Ctrl+B)',
|
|
* text: 'Make the selected text bold.',
|
|
* cls: 'x-html-editor-tip'
|
|
* },
|
|
* italic: {
|
|
* title: 'Italic (Ctrl+I)',
|
|
* text: 'Make the selected text italic.',
|
|
* cls: 'x-html-editor-tip'
|
|
* }
|
|
* // ...
|
|
* }
|
|
*/
|
|
buttonTips: {
|
|
bold: {
|
|
title: 'Bold (Ctrl+B)',
|
|
text: 'Make the selected text bold.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
italic: {
|
|
title: 'Italic (Ctrl+I)',
|
|
text: 'Make the selected text italic.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
underline: {
|
|
title: 'Underline (Ctrl+U)',
|
|
text: 'Underline the selected text.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
increasefontsize: {
|
|
title: 'Grow Text',
|
|
text: 'Increase the font size.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
decreasefontsize: {
|
|
title: 'Shrink Text',
|
|
text: 'Decrease the font size.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
backcolor: {
|
|
title: 'Text Highlight Color',
|
|
text: 'Change the background color of the selected text.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
forecolor: {
|
|
title: 'Font Color',
|
|
text: 'Change the color of the selected text.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
justifyleft: {
|
|
title: 'Align Text Left',
|
|
text: 'Align text to the left.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
justifycenter: {
|
|
title: 'Center Text',
|
|
text: 'Center text in the editor.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
justifyright: {
|
|
title: 'Align Text Right',
|
|
text: 'Align text to the right.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
insertunorderedlist: {
|
|
title: 'Bullet List',
|
|
text: 'Start a bulleted list.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
insertorderedlist: {
|
|
title: 'Numbered List',
|
|
text: 'Start a numbered list.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
createlink: {
|
|
title: 'Hyperlink',
|
|
text: 'Make the selected text a hyperlink.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
},
|
|
sourceedit: {
|
|
title: 'Source Edit',
|
|
text: 'Switch to source editing mode.',
|
|
cls: Ext.baseCSSPrefix + 'html-editor-tip'
|
|
}
|
|
}
|
|
//</locale>
|
|
|
|
// hide stuff that is not compatible
|
|
/**
|
|
* @event blur
|
|
* @private
|
|
*/
|
|
/**
|
|
* @event focus
|
|
* @private
|
|
*/
|
|
/**
|
|
* @event specialkey
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} fieldCls
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} focusCls
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} autoCreate
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} inputType
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} invalidCls
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} invalidText
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} msgFx
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} allowDomMove
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} applyTo
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} readOnly
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {String} tabIndex
|
|
* @private
|
|
*/
|
|
/**
|
|
* @method validate
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* A time picker which provides a list of times from which to choose. This is used by the Ext.form.field.Time
|
|
* class to allow browsing and selection of valid times, but could also be used with other components.
|
|
*
|
|
* By default, all times starting at midnight and incrementing every 15 minutes will be presented. This list of
|
|
* available times can be controlled using the {@link #minValue}, {@link #maxValue}, and {@link #increment}
|
|
* configuration properties. The format of the times presented in the list can be customized with the {@link #format}
|
|
* config.
|
|
*
|
|
* To handle when the user selects a time from the list, you can subscribe to the {@link #selectionchange} event.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.picker.Time', {
|
|
* width: 60,
|
|
* minValue: Ext.Date.parse('04:30:00 AM', 'h:i:s A'),
|
|
* maxValue: Ext.Date.parse('08:00:00 AM', 'h:i:s A'),
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.picker.Time', {
|
|
extend: Ext.view.BoundList ,
|
|
alias: 'widget.timepicker',
|
|
|
|
|
|
/**
|
|
* @cfg {Date} minValue
|
|
* The minimum time to be shown in the list of times. This must be a Date object (only the time fields will be
|
|
* used); no parsing of String values will be done.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Date} maxValue
|
|
* The maximum time to be shown in the list of times. This must be a Date object (only the time fields will be
|
|
* used); no parsing of String values will be done.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} increment
|
|
* The number of minutes between each time value in the list.
|
|
*/
|
|
increment: 15,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} [format=undefined]
|
|
* The default time format string which can be overriden for localization support. The format must be valid
|
|
* according to {@link Ext.Date#parse}.
|
|
*
|
|
* Defaults to `'g:i A'`, e.g., `'3:15 PM'`. For 24-hour time format try `'H:i'` instead.
|
|
*/
|
|
format : "g:i A",
|
|
//</locale>
|
|
|
|
/**
|
|
* @private
|
|
* The field in the implicitly-generated Model objects that gets displayed in the list. This is
|
|
* an internal field name only and is not useful to change via config.
|
|
*/
|
|
displayField: 'disp',
|
|
|
|
/**
|
|
* @private
|
|
* Year, month, and day that all times will be normalized into internally.
|
|
*/
|
|
initDate: [2008,0,1],
|
|
|
|
componentCls: Ext.baseCSSPrefix + 'timepicker',
|
|
|
|
/**
|
|
* @cfg
|
|
* @private
|
|
*/
|
|
loadMask: false,
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
dateUtil = Ext.Date,
|
|
clearTime = dateUtil.clearTime,
|
|
initDate = me.initDate;
|
|
|
|
// Set up absolute min and max for the entire day
|
|
me.absMin = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
|
|
me.absMax = dateUtil.add(clearTime(new Date(initDate[0], initDate[1], initDate[2])), 'mi', (24 * 60) - 1);
|
|
|
|
me.store = me.createStore();
|
|
|
|
// Add our min/max range filter, but do not apply it.
|
|
// The owning TimeField will filter it.
|
|
me.store.addFilter(me.rangeFilter = new Ext.util.Filter({
|
|
id: 'time-picker-filter'
|
|
}), false);
|
|
|
|
// Updates the range filter's filterFn according to our configured min and max
|
|
me.updateList();
|
|
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* Set the {@link #minValue} and update the list of available times. This must be a Date object (only the time
|
|
* fields will be used); no parsing of String values will be done.
|
|
* @param {Date} value
|
|
*/
|
|
setMinValue: function(value) {
|
|
this.minValue = value;
|
|
this.updateList();
|
|
},
|
|
|
|
/**
|
|
* Set the {@link #maxValue} and update the list of available times. This must be a Date object (only the time
|
|
* fields will be used); no parsing of String values will be done.
|
|
* @param {Date} value
|
|
*/
|
|
setMaxValue: function(value) {
|
|
this.maxValue = value;
|
|
this.updateList();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets the year/month/day of the given Date object to the {@link #initDate}, so that only
|
|
* the time fields are significant. This makes values suitable for time comparison.
|
|
* @param {Date} date
|
|
*/
|
|
normalizeDate: function(date) {
|
|
var initDate = this.initDate;
|
|
date.setFullYear(initDate[0], initDate[1], initDate[2]);
|
|
return date;
|
|
},
|
|
|
|
/**
|
|
* Update the list of available times in the list to be constrained within the {@link #minValue}
|
|
* and {@link #maxValue}.
|
|
*/
|
|
updateList: function() {
|
|
var me = this,
|
|
min = me.normalizeDate(me.minValue || me.absMin),
|
|
max = me.normalizeDate(me.maxValue || me.absMax);
|
|
|
|
me.rangeFilter.setFilterFn(function(record) {
|
|
var date = record.get('date');
|
|
return date >= min && date <= max;
|
|
});
|
|
me.store.filter();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates the internal {@link Ext.data.Store} that contains the available times. The store
|
|
* is loaded with all possible times, and it is later filtered to hide those times outside
|
|
* the minValue/maxValue.
|
|
*/
|
|
createStore: function() {
|
|
var me = this,
|
|
utilDate = Ext.Date,
|
|
times = [],
|
|
min = me.absMin,
|
|
max = me.absMax;
|
|
|
|
while(min <= max){
|
|
times.push({
|
|
disp: utilDate.dateFormat(min, me.format),
|
|
date: min
|
|
});
|
|
min = utilDate.add(min, 'mi', me.increment);
|
|
}
|
|
|
|
return new Ext.data.Store({
|
|
fields: ['disp', 'date'],
|
|
data: times
|
|
});
|
|
},
|
|
|
|
focusNode: function (rec) {
|
|
// We don't want the view being focused when interacting with the inputEl (see Ext.form.field.ComboBox:onKeyUp)
|
|
// so this is here to prevent focus of the boundlist view. See EXTJSIV-7319.
|
|
return false;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* Provides a time input field with a time dropdown and automatic time validation.
|
|
*
|
|
* This field recognizes and uses JavaScript Date objects as its main {@link #value} type (only the time portion of the
|
|
* date is used; the month/day/year are ignored). In addition, it recognizes string values which are parsed according to
|
|
* the {@link #format} and/or {@link #altFormats} configs. These may be reconfigured to use time formats appropriate for
|
|
* the user's locale.
|
|
*
|
|
* The field may be limited to a certain range of times by using the {@link #minValue} and {@link #maxValue} configs,
|
|
* and the interval between time options in the dropdown can be changed with the {@link #increment} config.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Time Card',
|
|
* width: 300,
|
|
* bodyPadding: 10,
|
|
* renderTo: Ext.getBody(),
|
|
* items: [{
|
|
* xtype: 'timefield',
|
|
* name: 'in',
|
|
* fieldLabel: 'Time In',
|
|
* minValue: '6:00 AM',
|
|
* maxValue: '8:00 PM',
|
|
* increment: 30,
|
|
* anchor: '100%'
|
|
* }, {
|
|
* xtype: 'timefield',
|
|
* name: 'out',
|
|
* fieldLabel: 'Time Out',
|
|
* minValue: '6:00 AM',
|
|
* maxValue: '8:00 PM',
|
|
* increment: 30,
|
|
* anchor: '100%'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.form.field.Time', {
|
|
extend: Ext.form.field.ComboBox ,
|
|
alias: 'widget.timefield',
|
|
|
|
alternateClassName: ['Ext.form.TimeField', 'Ext.form.Time'],
|
|
|
|
/**
|
|
* @cfg {String} [triggerCls='x-form-time-trigger']
|
|
* An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls}
|
|
* by default and triggerCls will be **appended** if specified.
|
|
*/
|
|
triggerCls: Ext.baseCSSPrefix + 'form-time-trigger',
|
|
|
|
/**
|
|
* @cfg {Date/String} minValue
|
|
* The minimum allowed time. Can be either a Javascript date object with a valid time value or a string time in a
|
|
* valid format -- see {@link #format} and {@link #altFormats}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Date/String} maxValue
|
|
* The maximum allowed time. Can be either a Javascript date object with a valid time value or a string time in a
|
|
* valid format -- see {@link #format} and {@link #altFormats}.
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} minText
|
|
* The error text to display when the entered time is before {@link #minValue}.
|
|
*/
|
|
minText : "The time in this field must be equal to or after {0}",
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} maxText
|
|
* The error text to display when the entered time is after {@link #maxValue}.
|
|
*/
|
|
maxText : "The time in this field must be equal to or before {0}",
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} invalidText
|
|
* The error text to display when the time in the field is invalid.
|
|
*/
|
|
invalidText : "{0} is not a valid time",
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} [format=undefined]
|
|
* The default time format string which can be overriden for localization support. The format must be valid
|
|
* according to {@link Ext.Date#parse}.
|
|
*
|
|
* Defaults to `'g:i A'`, e.g., `'3:15 PM'`. For 24-hour time format try `'H:i'` instead.
|
|
*/
|
|
format : "g:i A",
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} [submitFormat=undefined]
|
|
* The date format string which will be submitted to the server. The format must be valid according to
|
|
* {@link Ext.Date#parse}.
|
|
*
|
|
* Defaults to {@link #format}.
|
|
*/
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} altFormats
|
|
* Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
|
|
* format.
|
|
*/
|
|
altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A",
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Number} increment
|
|
* The number of minutes between each time value in the list.
|
|
*/
|
|
increment: 15,
|
|
|
|
/**
|
|
* @cfg {Number} pickerMaxHeight
|
|
* The maximum height of the {@link Ext.picker.Time} dropdown.
|
|
*/
|
|
pickerMaxHeight: 300,
|
|
|
|
/**
|
|
* @cfg {Boolean} selectOnTab
|
|
* Whether the Tab key should select the currently highlighted item.
|
|
*/
|
|
selectOnTab: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [snapToIncrement=false]
|
|
* Specify as `true` to enforce that only values on the {@link #increment} boundary are accepted.
|
|
*/
|
|
snapToIncrement: false,
|
|
|
|
/**
|
|
* @private
|
|
* This is the date to use when generating time values in the absence of either minValue
|
|
* or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an
|
|
* arbitrary "safe" date that can be any date aside from DST boundary dates.
|
|
*/
|
|
initDate: '1/1/2008',
|
|
initDateFormat: 'j/n/Y',
|
|
|
|
ignoreSelection: 0,
|
|
|
|
queryMode: 'local',
|
|
|
|
displayField: 'disp',
|
|
|
|
valueField: 'date',
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
min = me.minValue,
|
|
max = me.maxValue;
|
|
if (min) {
|
|
me.setMinValue(min);
|
|
}
|
|
if (max) {
|
|
me.setMaxValue(max);
|
|
}
|
|
me.displayTpl = new Ext.XTemplate(
|
|
'<tpl for=".">' +
|
|
'{[typeof values === "string" ? values : this.formatDate(values["' + me.displayField + '"])]}' +
|
|
'<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
|
|
'</tpl>', {
|
|
formatDate: Ext.Function.bind(me.formatDate, me)
|
|
});
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
transformOriginalValue: function(value) {
|
|
if (Ext.isString(value)) {
|
|
return this.rawToValue(value);
|
|
}
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
isEqual: function(v1, v2) {
|
|
return Ext.Date.isEqual(v1, v2);
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #minValue} with the new time and refreshes the picker's range.
|
|
* @param {Date/String} value The minimum time that can be selected
|
|
*/
|
|
setMinValue: function(value) {
|
|
var me = this,
|
|
picker = me.picker;
|
|
me.setLimit(value, true);
|
|
if (picker) {
|
|
picker.setMinValue(me.minValue);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Replaces any existing {@link #maxValue} with the new time and refreshes the picker's range.
|
|
* @param {Date/String} value The maximum time that can be selected
|
|
*/
|
|
setMaxValue: function(value) {
|
|
var me = this,
|
|
picker = me.picker;
|
|
me.setLimit(value, false);
|
|
if (picker) {
|
|
picker.setMaxValue(me.maxValue);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Updates either the min or max value. Converts the user's value into a Date object whose
|
|
* year/month/day is set to the {@link #initDate} so that only the time fields are significant.
|
|
*/
|
|
setLimit: function(value, isMin) {
|
|
var me = this,
|
|
d, val;
|
|
if (Ext.isString(value)) {
|
|
d = me.parseDate(value);
|
|
}
|
|
else if (Ext.isDate(value)) {
|
|
d = value;
|
|
}
|
|
if (d) {
|
|
val = Ext.Date.clearTime(new Date(me.initDate));
|
|
val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
|
|
}
|
|
// Invalid min/maxValue config should result in a null so that defaulting takes over
|
|
else {
|
|
val = null;
|
|
}
|
|
me[isMin ? 'minValue' : 'maxValue'] = val;
|
|
},
|
|
|
|
rawToValue: function(rawValue) {
|
|
return this.parseDate(rawValue) || rawValue || null;
|
|
},
|
|
|
|
valueToRaw: function(value) {
|
|
return this.formatDate(this.parseDate(value));
|
|
},
|
|
|
|
/**
|
|
* Runs all of Time's validations and returns an array of any errors. Note that this first runs Text's validations,
|
|
* so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
|
|
* the time format is valid, that the chosen time is within the {@link #minValue} and {@link #maxValue} constraints
|
|
* set.
|
|
* @param {Object} [value] The value to get errors for (defaults to the current field value)
|
|
* @return {String[]} All validation errors for this field
|
|
*/
|
|
getErrors: function(value) {
|
|
var me = this,
|
|
format = Ext.String.format,
|
|
errors = me.callParent(arguments),
|
|
minValue = me.minValue,
|
|
maxValue = me.maxValue,
|
|
date;
|
|
|
|
value = me.formatDate(value || me.processRawValue(me.getRawValue()));
|
|
|
|
if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
|
|
return errors;
|
|
}
|
|
|
|
date = me.parseDate(value);
|
|
if (!date) {
|
|
errors.push(format(me.invalidText, value, Ext.Date.unescapeFormat(me.format)));
|
|
return errors;
|
|
}
|
|
|
|
if (minValue && date < minValue) {
|
|
errors.push(format(me.minText, me.formatDate(minValue)));
|
|
}
|
|
|
|
if (maxValue && date > maxValue) {
|
|
errors.push(format(me.maxText, me.formatDate(maxValue)));
|
|
}
|
|
|
|
return errors;
|
|
},
|
|
|
|
formatDate: function() {
|
|
return Ext.form.field.Date.prototype.formatDate.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Parses an input value into a valid Date object.
|
|
* @param {String/Date} value
|
|
*/
|
|
parseDate: function(value) {
|
|
var me = this,
|
|
val = value,
|
|
altFormats = me.altFormats,
|
|
altFormatsArray = me.altFormatsArray,
|
|
i = 0,
|
|
len;
|
|
|
|
if (value && !Ext.isDate(value)) {
|
|
val = me.safeParse(value, me.format);
|
|
|
|
if (!val && altFormats) {
|
|
altFormatsArray = altFormatsArray || altFormats.split('|');
|
|
len = altFormatsArray.length;
|
|
for (; i < len && !val; ++i) {
|
|
val = me.safeParse(value, altFormatsArray[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If configured to snap, snap resulting parsed Date to the closest increment.
|
|
if (val && me.snapToIncrement) {
|
|
val = new Date(Ext.Number.snap(val.getTime(), me.increment * 60 * 1000));
|
|
}
|
|
return val;
|
|
},
|
|
|
|
safeParse: function(value, format){
|
|
var me = this,
|
|
utilDate = Ext.Date,
|
|
parsedDate,
|
|
result = null;
|
|
|
|
if (utilDate.formatContainsDateInfo(format)) {
|
|
// assume we've been given a full date
|
|
result = utilDate.parse(value, format);
|
|
} else {
|
|
// Use our initial safe date
|
|
parsedDate = utilDate.parse(me.initDate + ' ' + value, me.initDateFormat + ' ' + format);
|
|
if (parsedDate) {
|
|
result = parsedDate;
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// @private
|
|
getSubmitValue: function() {
|
|
var me = this,
|
|
format = me.submitFormat || me.format,
|
|
value = me.getValue();
|
|
|
|
return value ? Ext.Date.format(value, format) : null;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Creates the {@link Ext.picker.Time}
|
|
*/
|
|
createPicker: function() {
|
|
var me = this,
|
|
picker;
|
|
|
|
me.listConfig = Ext.apply({
|
|
xtype: 'timepicker',
|
|
selModel: {
|
|
mode: 'SINGLE'
|
|
},
|
|
cls: undefined,
|
|
minValue: me.minValue,
|
|
maxValue: me.maxValue,
|
|
increment: me.increment,
|
|
format: me.format,
|
|
maxHeight: me.pickerMaxHeight
|
|
}, me.listConfig);
|
|
picker = me.callParent();
|
|
me.bindStore(picker.store);
|
|
return picker;
|
|
},
|
|
|
|
onItemClick: function(picker, record){
|
|
// The selection change events won't fire when clicking on the selected element. Detect it here.
|
|
var me = this,
|
|
selected = picker.getSelectionModel().getSelection();
|
|
|
|
if (selected.length > 0) {
|
|
selected = selected[0];
|
|
if (selected && Ext.Date.isEqual(record.get('date'), selected.get('date'))) {
|
|
me.collapse();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handles a time being selected from the Time picker.
|
|
*/
|
|
onListSelectionChange: function(list, recordArray) {
|
|
if (recordArray.length) {
|
|
var me = this,
|
|
val = recordArray[0].get('date');
|
|
|
|
if (!me.ignoreSelection) {
|
|
me.skipSync = true;
|
|
me.setValue(val);
|
|
me.skipSync = false;
|
|
me.fireEvent('select', me, val);
|
|
me.picker.clearHighlight();
|
|
me.collapse();
|
|
me.inputEl.focus();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Synchronizes the selection in the picker to match the current value
|
|
*/
|
|
syncSelection: function() {
|
|
var me = this,
|
|
picker = me.picker,
|
|
toSelect,
|
|
selModel,
|
|
value,
|
|
data, d, dLen, rec;
|
|
|
|
if (picker && !me.skipSync) {
|
|
picker.clearHighlight();
|
|
value = me.getValue();
|
|
selModel = picker.getSelectionModel();
|
|
// Update the selection to match
|
|
me.ignoreSelection++;
|
|
if (value === null) {
|
|
selModel.deselectAll();
|
|
} else if (Ext.isDate(value)) {
|
|
// find value, select it
|
|
data = picker.store.data.items;
|
|
dLen = data.length;
|
|
|
|
for (d = 0; d < dLen; d++) {
|
|
rec = data[d];
|
|
|
|
if (Ext.Date.isEqual(rec.get('date'), value)) {
|
|
toSelect = rec;
|
|
break;
|
|
}
|
|
}
|
|
|
|
selModel.select(toSelect);
|
|
}
|
|
me.ignoreSelection--;
|
|
}
|
|
},
|
|
|
|
postBlur: function() {
|
|
var me = this,
|
|
val = me.getValue();
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Only set the raw value if the current value is valid and is not falsy
|
|
if (me.wasValid && val) {
|
|
me.setRawValue(me.formatDate(val));
|
|
}
|
|
},
|
|
|
|
setValue: function() {
|
|
|
|
// Store MUST be created for parent setValue to function
|
|
this.getPicker();
|
|
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
getValue: function() {
|
|
return this.parseDate(this.callParent(arguments));
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Internal utility class that provides a unique cell context.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.CellContext', {
|
|
|
|
/**
|
|
* @property {Boolean} isCellContext
|
|
* @readonly
|
|
* `true` in this class to identify an object as an instantiated CellContext, or subclass thereof.
|
|
*/
|
|
isCellContext: true,
|
|
|
|
constructor: function(view) {
|
|
this.view = view;
|
|
},
|
|
|
|
// Selection row/record & column/columnHeader
|
|
setPosition: function(row, col) {
|
|
var me = this;
|
|
|
|
// We were passed {row: 1, column: 2, view: myView}
|
|
if (arguments.length === 1) {
|
|
if (row.view) {
|
|
me.view = row.view;
|
|
}
|
|
col = row.column;
|
|
row = row.row;
|
|
}
|
|
|
|
me.setRow(row);
|
|
me.setColumn(col);
|
|
return me;
|
|
},
|
|
|
|
setRow: function(row) {
|
|
var me = this;
|
|
if (row !== undefined) {
|
|
// Row index passed
|
|
if (typeof row === 'number') {
|
|
me.row = Math.max(Math.min(row, me.view.dataSource.getCount() - 1), 0);
|
|
me.record = me.view.dataSource.getAt(row);
|
|
}
|
|
// row is a Record
|
|
else if (row.isModel) {
|
|
me.record = row;
|
|
me.row = me.view.indexOf(row);
|
|
}
|
|
// row is a grid row
|
|
else if (row.tagName) {
|
|
me.record = me.view.getRecord(row);
|
|
me.row = me.view.indexOf(me.record);
|
|
}
|
|
}
|
|
},
|
|
|
|
setColumn: function(col) {
|
|
var me = this,
|
|
columnManager = me.view.ownerCt.columnManager;
|
|
if (col !== undefined) {
|
|
// column index passed
|
|
if (typeof col === 'number') {
|
|
me.column = col;
|
|
me.columnHeader = columnManager.getHeaderAtIndex(col);
|
|
}
|
|
// column Header passed
|
|
else if (col.isHeader) {
|
|
me.columnHeader = col;
|
|
me.column = columnManager.getHeaderIndex(col);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Internal utility class that provides default configuration for cell editing.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.CellEditor', {
|
|
extend: Ext.Editor ,
|
|
constructor: function(config) {
|
|
config = Ext.apply({}, config);
|
|
|
|
if (config.field) {
|
|
config.field.monitorTab = false;
|
|
}
|
|
this.callParent([config]);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Hides the grid cell inner element when a cell editor is shown.
|
|
*/
|
|
onShow: function() {
|
|
var me = this,
|
|
innerCell = me.boundEl.first();
|
|
|
|
if (innerCell) {
|
|
if (me.isForTree) {
|
|
innerCell = innerCell.child(me.treeNodeSelector);
|
|
}
|
|
innerCell.hide();
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Shows the grid cell inner element when a cell editor is hidden
|
|
*/
|
|
onHide: function() {
|
|
var me = this,
|
|
innerCell = me.boundEl.first();
|
|
|
|
if (innerCell) {
|
|
if (me.isForTree) {
|
|
innerCell = innerCell.child(me.treeNodeSelector);
|
|
}
|
|
innerCell.show();
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fix checkbox blur when it is clicked.
|
|
*/
|
|
afterRender: function() {
|
|
var me = this,
|
|
field = me.field;
|
|
|
|
me.callParent(arguments);
|
|
if (field.isCheckbox) {
|
|
field.mon(field.inputEl, {
|
|
mousedown: me.onCheckBoxMouseDown,
|
|
click: me.onCheckBoxClick,
|
|
scope: me
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Because when checkbox is clicked it loses focus completeEdit is bypassed.
|
|
*/
|
|
onCheckBoxMouseDown: function() {
|
|
this.completeEdit = Ext.emptyFn;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Restore checkbox focus and completeEdit method.
|
|
*/
|
|
onCheckBoxClick: function() {
|
|
delete this.completeEdit;
|
|
this.field.focus(false, 10);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Realigns the Editor to the grid cell, or to the text node in the grid inner cell
|
|
* if the inner cell contains multiple child nodes.
|
|
*/
|
|
realign: function(autoSize) {
|
|
var me = this,
|
|
boundEl = me.boundEl,
|
|
innerCell = boundEl.first(),
|
|
width = boundEl.getWidth(),
|
|
offsets = Ext.Array.clone(me.offsets),
|
|
grid = me.grid,
|
|
xOffset;
|
|
|
|
if (me.isForTree) {
|
|
// When editing a tree, adjust the width and offsets of the editor to line
|
|
// up with the tree cell's text element
|
|
xOffset = me.getTreeNodeOffset(innerCell);
|
|
width -= Math.abs(xOffset);
|
|
offsets[0] += xOffset;
|
|
}
|
|
|
|
if (grid.columnLines) {
|
|
// Subtract the column border width so that the editor displays inside the
|
|
// borders. The column border could be either on the left or the right depending
|
|
// on whether the grid is RTL - using the sum of both borders works in both modes.
|
|
width -= boundEl.getBorderWidth('rl');
|
|
}
|
|
|
|
if (autoSize === true) {
|
|
me.field.setWidth(width);
|
|
}
|
|
|
|
me.alignTo(innerCell, me.alignment, offsets);
|
|
},
|
|
|
|
// private
|
|
getTreeNodeOffset: function(innerCell) {
|
|
return innerCell.child(this.treeNodeSelector).getOffsetsTo(innerCell)[0];
|
|
},
|
|
|
|
onEditorTab: function(e){
|
|
var field = this.field;
|
|
if (field.onEditorTab) {
|
|
field.onEditorTab(e);
|
|
}
|
|
},
|
|
|
|
alignment: "l-l",
|
|
hideEl : false,
|
|
cls: Ext.baseCSSPrefix + 'small-editor ' +
|
|
Ext.baseCSSPrefix + 'grid-editor ' +
|
|
Ext.baseCSSPrefix + 'grid-cell-editor',
|
|
treeNodeSelector: '.' + Ext.baseCSSPrefix + 'tree-node-text',
|
|
shim: false,
|
|
shadow: false
|
|
});
|
|
|
|
Ext.define('Ext.rtl.grid.CellEditor', {
|
|
override: 'Ext.grid.CellEditor',
|
|
|
|
getTreeNodeOffset: function(innerCell) {
|
|
var offset = this.callParent(arguments);
|
|
|
|
if (this.editingPlugin.grid.isOppositeRootDirection()) {
|
|
offset = -(innerCell.getWidth() - offset - innerCell.child(this.treeNodeSelector).getWidth());
|
|
}
|
|
return offset;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Component layout for grid column headers which have a title element at the top followed by content.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.ColumnComponentLayout', {
|
|
extend: Ext.layout.component.Auto ,
|
|
alias: 'layout.columncomponent',
|
|
|
|
type: 'columncomponent',
|
|
|
|
setWidthInDom: true,
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
ownerContext.titleContext = ownerContext.getEl('titleEl');
|
|
ownerContext.triggerContext = ownerContext.getEl('triggerEl');
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If shrinkwrapping, allow content width to stretch the element
|
|
if (ownerContext.widthModel.shrinkWrap) {
|
|
owner.el.setWidth('');
|
|
}
|
|
|
|
// When we are the last subheader, bordering is provided by our owning header, so we need
|
|
// to set border width to zero
|
|
var borderRightWidth = owner.isLast && owner.isSubHeader ? '0' : '';
|
|
if (borderRightWidth !== me.lastBorderRightWidth) {
|
|
owner.el.dom.style.borderRightWidth = me.lasBorderRightWidth = borderRightWidth;
|
|
}
|
|
|
|
owner.titleEl.setStyle({
|
|
paddingTop: '', // reset back to default padding of the style
|
|
paddingBottom: ''
|
|
});
|
|
},
|
|
|
|
// If not shrink wrapping, push height info down into child items
|
|
publishInnerHeight: function(ownerContext, outerHeight) {
|
|
// TreePanels (and grids with hideHeaders: true) set their column container height to zero ti hide them.
|
|
// This is because they need to lay out in order to calculate widths for the columns (eg flexes).
|
|
// If there is no height to lay out, bail out early.
|
|
if (!outerHeight) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
owner = me.owner,
|
|
innerHeight = outerHeight - ownerContext.getBorderInfo().height,
|
|
availableHeight = innerHeight,
|
|
textHeight,
|
|
titleHeight,
|
|
pt, pb;
|
|
|
|
// We do not have enough information to get the height of the titleEl
|
|
if (!owner.noWrap && !ownerContext.hasDomProp('width')) {
|
|
me.done = false;
|
|
return;
|
|
}
|
|
|
|
// If we are not a container, but just have HTML content...
|
|
if (ownerContext.hasRawContent) {
|
|
titleHeight = availableHeight;
|
|
|
|
// Vertically center the header text and ensure titleContext occupies availableHeight
|
|
textHeight = owner.textEl.getHeight();
|
|
if (textHeight) {
|
|
availableHeight -= textHeight;
|
|
if (availableHeight > 0) {
|
|
pt = Math.floor(availableHeight / 2);
|
|
pb = availableHeight - pt;
|
|
ownerContext.titleContext.setProp('padding-top', pt);
|
|
ownerContext.titleContext.setProp('padding-bottom', pb);
|
|
}
|
|
}
|
|
}
|
|
|
|
// There are child items
|
|
else {
|
|
titleHeight = owner.titleEl.getHeight();
|
|
ownerContext.setProp('innerHeight', innerHeight - titleHeight, false);
|
|
}
|
|
// Only IE6 and IEQuirks needs this.
|
|
// This is why we maintain titleHeight when setting it.
|
|
if ((Ext.isIE6 || Ext.isIEQuirks) && ownerContext.triggerContext) {
|
|
ownerContext.triggerContext.setHeight(titleHeight);
|
|
}
|
|
|
|
},
|
|
|
|
// We do not need the Direct2D sub pixel measurement here. Just the offsetHeight will do.
|
|
// TODO: When https://sencha.jira.com/browse/EXTJSIV-7734 is fixed to not do subpixel adjustment on height,
|
|
// remove this override.
|
|
measureContentHeight: function(ownerContext) {
|
|
return ownerContext.el.dom.offsetHeight;
|
|
},
|
|
|
|
publishOwnerHeight: function(ownerContext, contentHeight) {
|
|
this.callParent(arguments);
|
|
// Only IE6 and IEQuirks needs this.
|
|
// This is why we maintain titleHeight when setting it.
|
|
if ((Ext.isIE6 || Ext.isIEQuirks) && ownerContext.triggerContext) {
|
|
ownerContext.triggerContext.setHeight(contentHeight);
|
|
}
|
|
},
|
|
|
|
// If not shrink wrapping, push width info down into child items
|
|
publishInnerWidth: function(ownerContext, outerWidth) {
|
|
// If we are acting as a container, publish the innerWidth for the ColumnLayout to use
|
|
if (!ownerContext.hasRawContent) {
|
|
ownerContext.setProp('innerWidth', outerWidth - ownerContext.getBorderInfo().width, false);
|
|
}
|
|
},
|
|
|
|
// Push content height outwards when we are shrinkwrapping
|
|
calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
|
|
var result = this.callParent(arguments);
|
|
|
|
// If we are NOT a group header, we just use the auto component's measurement
|
|
if (!ownerContext.hasRawContent) {
|
|
if (this.owner.noWrap || ownerContext.hasDomProp('width')) {
|
|
return contentHeight + this.owner.titleEl.getHeight() + ownerContext.getBorderInfo().height;
|
|
}
|
|
|
|
// We do not have the information to return the height yet because we cannot know
|
|
// the final height of the text el
|
|
return null;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Push content width outwards when we are shrinkwrapping
|
|
calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
|
|
var owner = this.owner,
|
|
inner = Math.max(contentWidth, owner.textEl.getWidth() + ownerContext.titleContext.getPaddingInfo().width),
|
|
padWidth = ownerContext.getPaddingInfo().width,
|
|
triggerOffset = this.getTriggerOffset(owner, ownerContext);
|
|
|
|
return inner + padWidth + triggerOffset;
|
|
},
|
|
|
|
getTriggerOffset: function(owner, ownerContext) {
|
|
var width = 0;
|
|
if (ownerContext.widthModel.shrinkWrap && !owner.menuDisabled) {
|
|
// If we have any children underneath, then we already have space reserved
|
|
if (owner.query('>:not([hidden])').length === 0) {
|
|
width = owner.self.triggerElWidth;
|
|
}
|
|
}
|
|
return width;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* This class is used only by the grid's HeaderContainer docked child.
|
|
*
|
|
* It adds the ability to shrink the vertical size of the inner container element back if a grouped
|
|
* column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.
|
|
*
|
|
* Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls
|
|
* `setPadding` on the columns so that they lay out correctly.
|
|
*/
|
|
Ext.define('Ext.grid.ColumnLayout', {
|
|
extend: Ext.layout.container.HBox ,
|
|
alias: 'layout.gridcolumn',
|
|
type : 'gridcolumn',
|
|
|
|
reserveOffset: false,
|
|
|
|
firstHeaderCls: Ext.baseCSSPrefix + 'column-header-first',
|
|
lastHeaderCls: Ext.baseCSSPrefix + 'column-header-last',
|
|
|
|
initLayout: function() {
|
|
if (!this.scrollbarWidth) {
|
|
this.self.prototype.scrollbarWidth = Ext.getScrollbarSize().width;
|
|
}
|
|
this.grid = this.owner.up('[scrollerOwner]');
|
|
this.callParent();
|
|
},
|
|
|
|
// Collect the height of the table of data upon layout begin
|
|
beginLayout: function (ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
grid = me.grid,
|
|
view = grid.view,
|
|
items = me.getVisibleItems(),
|
|
len = items.length,
|
|
firstCls = me.firstHeaderCls,
|
|
lastCls = me.lastHeaderCls,
|
|
i, item;
|
|
|
|
// If we are one side of a locking grid, then if we are on the "normal" side, we have to grab the normal view
|
|
// for use in determining whether to subtract scrollbar width from available width.
|
|
// The locked side does not have scrollbars, so it should not look at the view.
|
|
if (grid.lockable) {
|
|
if (owner.up('tablepanel') === view.normalGrid) {
|
|
view = view.normalGrid.getView();
|
|
} else {
|
|
view = null;
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < len; i++) {
|
|
item = items[i];
|
|
|
|
// Keep the isLast flag correct so that the column's component layout can know whether or not
|
|
// it needs a right border. See ColumnComponentLayout.beginLayoutCycle
|
|
item.isLast = false;
|
|
item.removeCls([firstCls, lastCls]);
|
|
if (i === 0) {
|
|
item.addCls(firstCls);
|
|
}
|
|
|
|
if (i === len - 1) {
|
|
item.addCls(lastCls);
|
|
item.isLast = true;
|
|
}
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If the owner is the grid's HeaderContainer, and the UI displays old fashioned scrollbars and there is a rendered View with data in it,
|
|
// collect the View context to interrogate it for overflow, and possibly invalidate it if there is overflow
|
|
if (!owner.isColumn && Ext.getScrollbarSize().width && !grid.collapsed && view &&
|
|
view.rendered && (ownerContext.viewTable = view.body.dom)) {
|
|
ownerContext.viewContext = ownerContext.context.getCmp(view);
|
|
}
|
|
},
|
|
|
|
roundFlex: function(width) {
|
|
return Math.floor(width);
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
this.callParent(arguments);
|
|
|
|
// If we have calculated the widths, then if forceFit, and there are no flexes, we cannot tell the
|
|
// TableLayout we are done. We will have to go through the convertWidthsToFlexes stage.
|
|
if (ownerContext.state.parallelDone && (!this.owner.forceFit || ownerContext.flexedItems.length)) {
|
|
// TODO: auto width columns aren't necessarily done here.
|
|
// see view.TableLayout, there is a work around for that there
|
|
ownerContext.setProp('columnWidthsDone', true);
|
|
}
|
|
|
|
// Collect the height of the data table if we need it to determine overflow
|
|
if (ownerContext.viewContext) {
|
|
ownerContext.state.tableHeight = ownerContext.viewTable.offsetHeight;
|
|
}
|
|
},
|
|
|
|
completeLayout: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
state = ownerContext.state;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If we have not been through this already, and the owning Container is configured
|
|
// forceFit, is not a group column and and there is a valid width, then convert
|
|
// widths to flexes, and loop back.
|
|
if (!ownerContext.flexedItems.length && !state.flexesCalculated && owner.forceFit &&
|
|
|
|
// Recalculate based upon all columns now being flexed instead of sized.
|
|
// Set flag, so that we do not do this infinitely
|
|
me.convertWidthsToFlexes(ownerContext)) {
|
|
me.cacheFlexes(ownerContext);
|
|
ownerContext.invalidate({
|
|
state: {
|
|
flexesCalculated: true
|
|
}
|
|
});
|
|
} else {
|
|
ownerContext.setProp('columnWidthsDone', true);
|
|
}
|
|
},
|
|
|
|
convertWidthsToFlexes: function(ownerContext) {
|
|
var me = this,
|
|
totalWidth = 0,
|
|
calculated = me.sizeModels.calculated,
|
|
childItems, len, i, childContext, item;
|
|
|
|
childItems = ownerContext.childItems;
|
|
len = childItems.length;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
childContext = childItems[i];
|
|
item = childContext.target;
|
|
|
|
totalWidth += childContext.props.width;
|
|
|
|
// Only allow to be flexed if it's a resizable column
|
|
if (!(item.fixed || item.resizable === false)) {
|
|
|
|
// For forceFit, just use allocated width as the flex value, and the proportions
|
|
// will end up the same whatever HeaderContainer width they are being forced into.
|
|
item.flex = ownerContext.childItems[i].flex = childContext.props.width;
|
|
item.width = null;
|
|
childContext.widthModel = calculated;
|
|
}
|
|
}
|
|
|
|
// Only need to loop back if the total column width is not already an exact fit
|
|
return totalWidth !== ownerContext.props.width;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Local getContainerSize implementation accounts for vertical scrollbar in the view.
|
|
*/
|
|
getContainerSize: function(ownerContext) {
|
|
var me = this,
|
|
result,
|
|
viewContext = ownerContext.viewContext,
|
|
viewHeight;
|
|
|
|
// Column, NOT the main grid's HeaderContainer
|
|
if (me.owner.isColumn) {
|
|
result = me.getColumnContainerSize(ownerContext);
|
|
}
|
|
|
|
// This is the maingrid's HeaderContainer
|
|
else {
|
|
result = me.callParent(arguments);
|
|
|
|
// If we've collected a viewContext and we're not shrinkwrapping the height
|
|
// then we see if we have to narrow the width slightly to account for scrollbar
|
|
if (viewContext && !viewContext.heightModel.shrinkWrap &&
|
|
viewContext.target.componentLayout.ownerContext) { // if (its layout is running)
|
|
viewHeight = viewContext.getProp('height');
|
|
if (isNaN(viewHeight)) {
|
|
me.done = false;
|
|
} else if (ownerContext.state.tableHeight > viewHeight) {
|
|
result.width -= Ext.getScrollbarSize().width;
|
|
ownerContext.state.parallelDone = false;
|
|
viewContext.invalidate();
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO - flip the initial assumption to "we have a vscroll" to avoid the invalidate in most
|
|
// cases (and the expensive ones to boot)
|
|
|
|
return result;
|
|
},
|
|
|
|
getColumnContainerSize : function(ownerContext) {
|
|
var padding = ownerContext.paddingContext.getPaddingInfo(),
|
|
got = 0,
|
|
needed = 0,
|
|
gotWidth, gotHeight, width, height;
|
|
|
|
// In an shrinkWrap width/height case, we must not ask for any of these dimensions
|
|
// because they will be determined by contentWidth/Height which is calculated by
|
|
// this layout...
|
|
|
|
// Fit/Card layouts are able to set just the width of children, allowing child's
|
|
// resulting height to autosize the Container.
|
|
// See examples/tabs/tabs.html for an example of this.
|
|
|
|
if (!ownerContext.widthModel.shrinkWrap) {
|
|
++needed;
|
|
width = ownerContext.getProp('innerWidth');
|
|
gotWidth = (typeof width == 'number');
|
|
if (gotWidth) {
|
|
++got;
|
|
width -= padding.width;
|
|
if (width < 0) {
|
|
width = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!ownerContext.heightModel.shrinkWrap) {
|
|
++needed;
|
|
height = ownerContext.getProp('innerHeight');
|
|
gotHeight = (typeof height == 'number');
|
|
if (gotHeight) {
|
|
++got;
|
|
height -= padding.height;
|
|
if (height < 0) {
|
|
height = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
width: width,
|
|
height: height,
|
|
needed: needed,
|
|
got: got,
|
|
gotAll: got == needed,
|
|
gotWidth: gotWidth,
|
|
gotHeight: gotHeight
|
|
};
|
|
},
|
|
|
|
// FIX: when flexing we actually don't have enough space as we would
|
|
// typically because of the scrollOffset on the GridView, must reserve this
|
|
publishInnerCtSize: function(ownerContext) {
|
|
var me = this,
|
|
size = ownerContext.state.boxPlan.targetSize,
|
|
cw = ownerContext.peek('contentWidth'),
|
|
view;
|
|
|
|
// Allow the other co-operating objects to know whether the columns overflow the available width.
|
|
me.owner.tooNarrow = ownerContext.state.boxPlan.tooNarrow;
|
|
|
|
// InnerCt MUST stretch to accommodate all columns so that left/right scrolling is enabled in the header container.
|
|
if ((cw != null) && !me.owner.isColumn) {
|
|
size.width = cw;
|
|
|
|
// innerCt must also encompass any vertical scrollbar width if there may be one
|
|
view = me.owner.ownerCt.view;
|
|
if (view.scrollFlags.y) {
|
|
size.width += Ext.getScrollbarSize().width;
|
|
}
|
|
}
|
|
|
|
return me.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Manages and provides information about a TablePanel's *visible leaf* columns.
|
|
*/
|
|
Ext.define('Ext.grid.ColumnManager', {
|
|
alternateClassName: ['Ext.grid.ColumnModel'],
|
|
|
|
columns: null,
|
|
|
|
constructor: function(headerCt, secondHeaderCt) {
|
|
this.headerCt = headerCt;
|
|
|
|
// We are managing columns for a lockable grid...
|
|
if (secondHeaderCt) {
|
|
this.secondHeaderCt = secondHeaderCt;
|
|
}
|
|
},
|
|
|
|
getColumns: function() {
|
|
if (!this.columns) {
|
|
this.cacheColumns();
|
|
}
|
|
return this.columns;
|
|
},
|
|
|
|
/**
|
|
* Returns the index of a leaf level header regardless of what the nesting
|
|
* structure is.
|
|
*
|
|
* If a group header is passed, the index of the first leaf level heder within it is returned.
|
|
*
|
|
* @param {Ext.grid.column.Column} header The header to find the index of
|
|
* @return {Number} The index of the specified column header
|
|
*/
|
|
getHeaderIndex: function(header) {
|
|
// If we are being asked the index of a group header, find the first leaf header node, and return the index of that
|
|
if (header.isGroupHeader) {
|
|
header = header.down(':not([isGroupHeader])');
|
|
}
|
|
return Ext.Array.indexOf(this.getColumns(), header);
|
|
},
|
|
|
|
/**
|
|
* Get a leaf level header by index regardless of what the nesting
|
|
* structure is.
|
|
* @param {Number} index The column index for which to retrieve the column.
|
|
* @return {Ext.grid.column.Column} The header. `null` if it doesn't exist.
|
|
*/
|
|
getHeaderAtIndex: function(index) {
|
|
var columns = this.getColumns();
|
|
return columns.length ? columns[index] : null;
|
|
},
|
|
|
|
/**
|
|
* Get a leaf level header by index regardless of what the nesting
|
|
* structure is.
|
|
* @param {String} id The id
|
|
* @return {Ext.grid.column.Column} The header. `null` if it doesn't exist.
|
|
*/
|
|
getHeaderById: function(id) {
|
|
var columns = this.getColumns(),
|
|
len = columns.length,
|
|
i, header;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
header = columns[i];
|
|
if (header.getItemId() === id) {
|
|
return header;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* When passed a column index, returns the closet *visible* column to that. If the column at the passed index is visible,
|
|
* that is returned. If it is hidden, either the next visible, or the previous visible column is returned.
|
|
* @param {Number} index Position at which to find the closest visible column.
|
|
*/
|
|
getVisibleHeaderClosestToIndex: function(index) {
|
|
var result = this.getHeaderAtIndex(index);
|
|
if (result && result.hidden) {
|
|
result = result.next(':not([hidden])') || result.prev(':not([hidden])');
|
|
}
|
|
return result;
|
|
},
|
|
|
|
cacheColumns: function() {
|
|
this.columns = this.headerCt.getVisibleGridColumns();
|
|
if (this.secondHeaderCt) {
|
|
Ext.Array.push(this.columns, this.secondHeaderCt.getVisibleGridColumns());
|
|
}
|
|
},
|
|
|
|
invalidate: function() {
|
|
this.columns = null;
|
|
|
|
// If we are part of a lockable assembly, invalidate the root column manager
|
|
if (this.rootColumns) {
|
|
this.rootColumns.invalidate();
|
|
}
|
|
}
|
|
}, function() {
|
|
this.createAlias('indexOf', 'getHeaderIndex');
|
|
});
|
|
|
|
/**
|
|
* This is a base class for layouts that contain a single item that automatically expands to fill the layout's
|
|
* container. This class is intended to be extended or created via the layout:'fit'
|
|
* {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.
|
|
*
|
|
* Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using
|
|
* Fit layout, simply set `layout: 'fit'` on the container and add a single panel to it.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Fit Layout',
|
|
* width: 300,
|
|
* height: 150,
|
|
* layout:'fit',
|
|
* items: {
|
|
* title: 'Inner Panel',
|
|
* html: 'This is the inner panel content',
|
|
* bodyPadding: 20,
|
|
* border: false
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* If the container has multiple items, all of the items will all be equally sized. This is usually not
|
|
* desired, so to avoid this, place only a **single** item in the container. This sizing of all items
|
|
* can be used to provide a background {@link Ext.Img image} that is "behind" another item
|
|
* such as a {@link Ext.view.View dataview} if you also absolutely position the items.
|
|
*/
|
|
Ext.define('Ext.layout.container.Fit', {
|
|
|
|
/* Begin Definitions */
|
|
extend: Ext.layout.container.Container ,
|
|
alternateClassName: 'Ext.layout.FitLayout',
|
|
|
|
alias: 'layout.fit',
|
|
|
|
/* End Definitions */
|
|
|
|
itemCls: Ext.baseCSSPrefix + 'fit-item',
|
|
targetCls: Ext.baseCSSPrefix + 'layout-fit',
|
|
type: 'fit',
|
|
|
|
/**
|
|
* @cfg {Object} defaultMargins
|
|
* If the individual contained items do not have a margins property specified or margin specified via CSS, the
|
|
* default margins from this property will be applied to each item.
|
|
*
|
|
* This property may be specified as an object containing margins to apply in the format:
|
|
*
|
|
* {
|
|
* top: (top margin),
|
|
* right: (right margin),
|
|
* bottom: (bottom margin),
|
|
* left: (left margin)
|
|
* }
|
|
*
|
|
* This property may also be specified as a string containing space-separated, numeric margin values. The order of
|
|
* the sides associated with each value matches the way CSS processes margin values:
|
|
*
|
|
* - If there is only one value, it applies to all sides.
|
|
* - If there are two values, the top and bottom borders are set to the first value and the right and left are
|
|
* set to the second.
|
|
* - If there are three values, the top is set to the first value, the left and right are set to the second,
|
|
* and the bottom is set to the third.
|
|
* - If there are four values, they apply to the top, right, bottom, and left, respectively.
|
|
*
|
|
*/
|
|
defaultMargins: {
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
},
|
|
|
|
manageMargins: true,
|
|
|
|
sizePolicies: {
|
|
0: { readsWidth: 1, readsHeight: 1, setsWidth: 0, setsHeight: 0 },
|
|
1: { readsWidth: 0, readsHeight: 1, setsWidth: 1, setsHeight: 0 },
|
|
2: { readsWidth: 1, readsHeight: 0, setsWidth: 0, setsHeight: 1 },
|
|
3: { readsWidth: 0, readsHeight: 0, setsWidth: 1, setsHeight: 1 }
|
|
},
|
|
|
|
getItemSizePolicy: function (item, ownerSizeModel) {
|
|
// this layout's sizePolicy is derived from its owner's sizeModel:
|
|
var sizeModel = ownerSizeModel || this.owner.getSizeModel(),
|
|
mode = (sizeModel.width.shrinkWrap ? 0 : 1) |
|
|
(sizeModel.height.shrinkWrap ? 0 : 2);
|
|
|
|
return this.sizePolicies[mode];
|
|
},
|
|
|
|
beginLayoutCycle: function (ownerContext, firstCycle) {
|
|
var me = this,
|
|
// determine these before the lastSizeModels get updated:
|
|
resetHeight = me.lastHeightModel && me.lastHeightModel.calculated,
|
|
resetWidth = me.lastWidthModel && me.lastWidthModel.calculated,
|
|
resetSizes = resetWidth || resetHeight,
|
|
maxChildMinHeight = 0, maxChildMinWidth = 0,
|
|
c, childItems, i, item, length, margins, minHeight, minWidth, style, undef;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Clear any dimensions which we set before calculation, in case the current
|
|
// settings affect the available size. This particularly effects self-sizing
|
|
// containers such as fields, in which the target element is naturally sized,
|
|
// and should not be stretched by a sized child item.
|
|
if (resetSizes && ownerContext.targetContext.el.dom.tagName.toUpperCase() != 'TD') {
|
|
resetSizes = resetWidth = resetHeight = false;
|
|
}
|
|
|
|
childItems = ownerContext.childItems;
|
|
length = childItems.length;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
item = childItems[i];
|
|
|
|
// On the firstCycle, we determine the max of the minWidth/Height of the items
|
|
// since these can cause the container to grow scrollbars despite our attempts
|
|
// to fit the child to the container.
|
|
if (firstCycle) {
|
|
c = item.target;
|
|
minHeight = c.minHeight;
|
|
minWidth = c.minWidth;
|
|
|
|
if (minWidth || minHeight) {
|
|
margins = item.marginInfo || item.getMarginInfo();
|
|
// if the child item has undefined minWidth/Height, these will become
|
|
// NaN by adding the margins...
|
|
minHeight += margins.height;
|
|
minWidth += margins.height;
|
|
|
|
// if the child item has undefined minWidth/Height, these comparisons
|
|
// will evaluate to false... that is, "0 < NaN" == false...
|
|
if (maxChildMinHeight < minHeight) {
|
|
maxChildMinHeight = minHeight;
|
|
}
|
|
if (maxChildMinWidth < minWidth) {
|
|
maxChildMinWidth = minWidth;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (resetSizes) {
|
|
style = item.el.dom.style;
|
|
|
|
if (resetHeight) {
|
|
style.height = '';
|
|
}
|
|
if (resetWidth) {
|
|
style.width = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
if (firstCycle) {
|
|
ownerContext.maxChildMinHeight = maxChildMinHeight;
|
|
ownerContext.maxChildMinWidth = maxChildMinWidth;
|
|
}
|
|
|
|
// Cache the overflowX/Y flags, but make them false in shrinkWrap mode (since we
|
|
// won't be triggering overflow in that case) and false if we have no minSize (so
|
|
// no child to trigger an overflow).
|
|
c = ownerContext.target;
|
|
ownerContext.overflowX = (!ownerContext.widthModel.shrinkWrap &&
|
|
ownerContext.maxChildMinWidth &&
|
|
c.scrollFlags.x) || undef;
|
|
|
|
ownerContext.overflowY = (!ownerContext.heightModel.shrinkWrap &&
|
|
ownerContext.maxChildMinHeight &&
|
|
c.scrollFlags.y) || undef;
|
|
},
|
|
|
|
calculate : function (ownerContext) {
|
|
var me = this,
|
|
childItems = ownerContext.childItems,
|
|
length = childItems.length,
|
|
containerSize = me.getContainerSize(ownerContext),
|
|
info = {
|
|
length: length,
|
|
ownerContext: ownerContext,
|
|
targetSize: containerSize
|
|
},
|
|
shrinkWrapWidth = ownerContext.widthModel.shrinkWrap,
|
|
shrinkWrapHeight = ownerContext.heightModel.shrinkWrap,
|
|
overflowX = ownerContext.overflowX,
|
|
overflowY = ownerContext.overflowY,
|
|
scrollbars, scrollbarSize, padding, i, contentWidth, contentHeight;
|
|
|
|
if (overflowX || overflowY) {
|
|
// If we have children that have minHeight/Width, we may be forced to overflow
|
|
// and gain scrollbars. If so, we want to remove their space from the other
|
|
// axis so that we fit things inside the scrollbars rather than under them.
|
|
scrollbars = me.getScrollbarsNeeded(
|
|
overflowX && containerSize.width, overflowY && containerSize.height,
|
|
ownerContext.maxChildMinWidth, ownerContext.maxChildMinHeight);
|
|
|
|
if (scrollbars) {
|
|
scrollbarSize = Ext.getScrollbarSize();
|
|
if (scrollbars & 1) { // if we need the hscrollbar, remove its height
|
|
containerSize.height -= scrollbarSize.height;
|
|
}
|
|
if (scrollbars & 2) { // if we need the vscrollbar, remove its width
|
|
containerSize.width -= scrollbarSize.width;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Size the child items to the container (if non-shrinkWrap):
|
|
for (i = 0; i < length; ++i) {
|
|
info.index = i;
|
|
me.fitItem(childItems[i], info);
|
|
}
|
|
|
|
if (shrinkWrapHeight || shrinkWrapWidth) {
|
|
padding = ownerContext.targetContext.getPaddingInfo();
|
|
|
|
if (shrinkWrapWidth) {
|
|
if (overflowY && !containerSize.gotHeight) {
|
|
// if we might overflow vertically and don't have the container height,
|
|
// we don't know if we will need a vscrollbar or not, so we must wait
|
|
// for that height so that we can determine the contentWidth...
|
|
me.done = false;
|
|
} else {
|
|
contentWidth = info.contentWidth + padding.width;
|
|
// the scrollbar flag (if set) will indicate that an overflow exists on
|
|
// the horz(1) or vert(2) axis... if not set, then there could never be
|
|
// an overflow...
|
|
if (scrollbars & 2) { // if we need the vscrollbar, add its width
|
|
contentWidth += scrollbarSize.width;
|
|
}
|
|
if (!ownerContext.setContentWidth(contentWidth)) {
|
|
me.done = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (shrinkWrapHeight) {
|
|
if (overflowX && !containerSize.gotWidth) {
|
|
// if we might overflow horizontally and don't have the container width,
|
|
// we don't know if we will need a hscrollbar or not, so we must wait
|
|
// for that width so that we can determine the contentHeight...
|
|
me.done = false;
|
|
} else {
|
|
contentHeight = info.contentHeight + padding.height;
|
|
// the scrollbar flag (if set) will indicate that an overflow exists on
|
|
// the horz(1) or vert(2) axis... if not set, then there could never be
|
|
// an overflow...
|
|
if (scrollbars & 1) { // if we need the hscrollbar, add its height
|
|
contentHeight += scrollbarSize.height;
|
|
}
|
|
if (!ownerContext.setContentHeight(contentHeight)) {
|
|
me.done = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
fitItem: function (itemContext, info) {
|
|
var me = this;
|
|
|
|
if (itemContext.invalid) {
|
|
me.done = false;
|
|
return;
|
|
}
|
|
|
|
info.margins = itemContext.getMarginInfo();
|
|
info.needed = info.got = 0;
|
|
|
|
me.fitItemWidth(itemContext, info);
|
|
me.fitItemHeight(itemContext, info);
|
|
|
|
// If not all required dimensions have been satisfied, we're not done.
|
|
if (info.got != info.needed) {
|
|
me.done = false;
|
|
}
|
|
},
|
|
|
|
fitItemWidth: function (itemContext, info) {
|
|
var contentWidth, width;
|
|
// Attempt to set only dimensions that are being controlled, not shrinkWrap dimensions
|
|
if (info.ownerContext.widthModel.shrinkWrap) {
|
|
// contentWidth must include the margins to be consistent with setItemWidth
|
|
width = itemContext.getProp('width') + info.margins.width;
|
|
// because we add margins, width will be NaN or a number (not undefined)
|
|
|
|
contentWidth = info.contentWidth;
|
|
if (contentWidth === undefined) {
|
|
info.contentWidth = width;
|
|
} else {
|
|
info.contentWidth = Math.max(contentWidth, width);
|
|
}
|
|
} else if (itemContext.widthModel.calculated) {
|
|
++info.needed;
|
|
if (info.targetSize.gotWidth) {
|
|
++info.got;
|
|
this.setItemWidth(itemContext, info);
|
|
}
|
|
}
|
|
|
|
this.positionItemX(itemContext, info);
|
|
},
|
|
|
|
fitItemHeight: function (itemContext, info) {
|
|
var contentHeight, height;
|
|
if (info.ownerContext.heightModel.shrinkWrap) {
|
|
// contentHeight must include the margins to be consistent with setItemHeight
|
|
height = itemContext.getProp('height') + info.margins.height;
|
|
// because we add margins, height will be NaN or a number (not undefined)
|
|
|
|
contentHeight = info.contentHeight;
|
|
if (contentHeight === undefined) {
|
|
info.contentHeight = height;
|
|
} else {
|
|
info.contentHeight = Math.max(contentHeight, height);
|
|
}
|
|
} else if (itemContext.heightModel.calculated) {
|
|
++info.needed;
|
|
if (info.targetSize.gotHeight) {
|
|
++info.got;
|
|
this.setItemHeight(itemContext, info);
|
|
}
|
|
}
|
|
|
|
this.positionItemY(itemContext, info);
|
|
},
|
|
|
|
positionItemX: function (itemContext, info) {
|
|
var margins = info.margins;
|
|
|
|
// Adjust position to account for configured margins or if we have multiple items
|
|
// (all items should overlap):
|
|
if (info.index || margins.left) {
|
|
itemContext.setProp('x', margins.left);
|
|
}
|
|
|
|
if (margins.width) {
|
|
// Need the margins for shrink-wrapping but old IE sometimes collapses the left margin into the padding
|
|
itemContext.setProp('margin-right', margins.width);
|
|
}
|
|
},
|
|
|
|
positionItemY: function (itemContext, info) {
|
|
var margins = info.margins;
|
|
|
|
if (info.index || margins.top) {
|
|
itemContext.setProp('y', margins.top);
|
|
}
|
|
|
|
if (margins.height) {
|
|
// Need the margins for shrink-wrapping but old IE sometimes collapses the top margin into the padding
|
|
itemContext.setProp('margin-bottom', margins.height);
|
|
}
|
|
},
|
|
|
|
setItemHeight: function (itemContext, info) {
|
|
itemContext.setHeight(info.targetSize.height - info.margins.height);
|
|
},
|
|
|
|
setItemWidth: function (itemContext, info) {
|
|
itemContext.setWidth(info.targetSize.width - info.margins.width);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Nicolas Ferrero
|
|
*
|
|
* TablePanel is the basis of both {@link Ext.tree.Panel TreePanel} and {@link Ext.grid.Panel GridPanel}.
|
|
*
|
|
* TablePanel aggregates:
|
|
*
|
|
* - a Selection Model
|
|
* - a View
|
|
* - a Store
|
|
* - Scrollers
|
|
* - Ext.grid.header.Container
|
|
*
|
|
* @mixins Ext.grid.locking.Lockable
|
|
*/
|
|
Ext.define('Ext.panel.Table', {
|
|
extend: Ext.panel.Panel ,
|
|
|
|
alias: 'widget.tablepanel',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
extraBaseCls: Ext.baseCSSPrefix + 'grid',
|
|
extraBodyCls: Ext.baseCSSPrefix + 'grid-body',
|
|
|
|
layout: 'fit',
|
|
/**
|
|
* @property {Boolean} hasView
|
|
* True to indicate that a view has been injected into the panel.
|
|
*/
|
|
hasView: false,
|
|
|
|
// each panel should dictate what viewType and selType to use
|
|
/**
|
|
* @cfg {String} viewType
|
|
* An xtype of view to use. This is automatically set to 'gridview' by {@link Ext.grid.Panel Grid}
|
|
* and to 'treeview' by {@link Ext.tree.Panel Tree}.
|
|
* @protected
|
|
*/
|
|
viewType: null,
|
|
|
|
/**
|
|
* @cfg {Object} viewConfig
|
|
* A config object that will be applied to the grid's UI view. Any of the config options available for
|
|
* {@link Ext.view.Table} can be specified here. This option is ignored if {@link #view} is specified.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.view.Table} view
|
|
* The {@link Ext.view.Table} used by the grid. Use {@link #viewConfig} to just supply some config options to
|
|
* view (instead of creating an entire View instance).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} selType
|
|
* An xtype of selection model to use. Defaults to 'rowmodel'. This is used to create selection model if just
|
|
* a config object or nothing at all given in {@link #selModel} config.
|
|
*/
|
|
selType: 'rowmodel',
|
|
|
|
/**
|
|
* @cfg {Ext.selection.Model/Object} selModel
|
|
* A {@link Ext.selection.Model selection model} instance or config object. In latter case the {@link #selType}
|
|
* config option determines to which type of selection model this config is applied.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [multiSelect=false]
|
|
* True to enable 'MULTI' selection mode on selection model.
|
|
* @deprecated 4.1.1 Use {@link Ext.selection.Model#mode} 'MULTI' instead.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [simpleSelect=false]
|
|
* True to enable 'SIMPLE' selection mode on selection model.
|
|
* @deprecated 4.1.1 Use {@link Ext.selection.Model#mode} 'SIMPLE' instead.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.data.Store} store (required)
|
|
* The {@link Ext.data.Store Store} the grid should use as its data source.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Boolean} scroll
|
|
* Scrollers configuration. Valid values are 'both', 'horizontal' or 'vertical'.
|
|
* True implies 'both'. False implies 'none'.
|
|
*/
|
|
scroll: true,
|
|
|
|
/**
|
|
* @cfg {Ext.grid.column.Column[]/Object} columns
|
|
* An array of {@link Ext.grid.column.Column column} definition objects which define all columns that appear in this
|
|
* grid. Each column definition provides the header text for the column, and a definition of where the data for that
|
|
* column comes from.
|
|
*
|
|
* This can also be a configuration object for a {Ext.grid.header.Container HeaderContainer} which may override
|
|
* certain default configurations if necessary. For example, the special layout may be overridden to use a simpler
|
|
* layout, or one can set default values shared by all columns:
|
|
*
|
|
* columns: {
|
|
* items: [
|
|
* {
|
|
* text: "Column A"
|
|
* dataIndex: "field_A"
|
|
* },{
|
|
* text: "Column B",
|
|
* dataIndex: "field_B"
|
|
* },
|
|
* ...
|
|
* ],
|
|
* defaults: {
|
|
* flex: 1
|
|
* }
|
|
* }
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} forceFit
|
|
* True to force the columns to fit into the available width. Headers are first sized according to configuration,
|
|
* whether that be a specific width, or flex. Then they are all proportionally changed in width so that the entire
|
|
* content width is used. For more accurate control, it is more optimal to specify a flex setting on the columns
|
|
* that are to be stretched & explicit widths on columns that are not.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.grid.feature.Feature[]/Object[]/Ext.enums.Feature[]} features
|
|
* An array of grid Features to be added to this grid. Can also be just a single feature instead of array.
|
|
*
|
|
* Features config behaves much like {@link #plugins}.
|
|
* A feature can be added by either directly referencing the instance:
|
|
*
|
|
* features: [Ext.create('Ext.grid.feature.GroupingSummary', {groupHeaderTpl: 'Subject: {name}'})],
|
|
*
|
|
* By using config object with ftype:
|
|
*
|
|
* features: [{ftype: 'groupingsummary', groupHeaderTpl: 'Subject: {name}'}],
|
|
*
|
|
* Or with just a ftype:
|
|
*
|
|
* features: ['grouping', 'groupingsummary'],
|
|
*
|
|
* See {@link Ext.enums.Feature} for list of all ftypes.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [hideHeaders=false]
|
|
* True to hide column headers.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} deferRowRender
|
|
* Defaults to true to enable deferred row rendering.
|
|
*
|
|
* This allows the View 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 {Object} verticalScroller
|
|
* A config object to be used when configuring the {@link Ext.grid.plugin.BufferedRenderer scroll monitor} to control
|
|
* refreshing of data in an "infinite grid".
|
|
*
|
|
* Configurations of this object allow fine tuning of data caching which can improve performance and usability
|
|
* of the infinite grid.
|
|
*/
|
|
|
|
deferRowRender: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} sortableColumns
|
|
* False to disable column sorting via clicking the header and via the Sorting menu items.
|
|
*/
|
|
sortableColumns: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableLocking=false]
|
|
* Configure as `true` to enable locking support for this grid. Alternatively, locking will also be automatically
|
|
* enabled if any of the columns in the {@link #columns columns} configuration contain a {@link Ext.grid.column.Column#locked locked} config option.
|
|
*
|
|
* A locking grid is processed in a special way. The configuration options are cloned and *two* grids are created to be the locked (left) side
|
|
* and the normal (right) side. This Panel becomes merely a {@link Ext.container.Container container} which arranges both in an {@link Ext.layout.container.HBox HBox} layout.
|
|
*
|
|
* {@link #plugins Plugins} may be targeted at either locked, or unlocked grid, or, both, in which case the plugin is cloned and used on both sides.
|
|
*
|
|
* Plugins may also be targeted at the containing locking Panel.
|
|
*
|
|
* This is configured by specifying a `lockableScope` property in your plugin which may have the following values:
|
|
*
|
|
* * `"both"` (the default) - The plugin is added to both grids
|
|
* * `"top"` - The plugin is added to the containing Panel
|
|
* * `"locked"` - The plugin is added to the locked (left) grid
|
|
* * `"normal"` - The plugin is added to the normal (right) grid
|
|
*
|
|
* If `both` is specified, then each copy of the plugin gains a property `lockingPartner` which references its sibling on the other side so that they
|
|
* can synchronize operations is necessary.
|
|
*
|
|
* {@link #features Features} may also be configured with `lockableScope` and may target the locked grid, the normal grid or both grids. Features
|
|
* also get a `lockingPartner` reference injected.
|
|
*/
|
|
enableLocking: false,
|
|
|
|
// private property used to determine where to go down to find views
|
|
// this is here to support locking.
|
|
scrollerOwner: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableColumnMove=true]
|
|
* False to disable column dragging within this grid.
|
|
*/
|
|
enableColumnMove: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [sealedColumns=false]
|
|
* True to constrain column dragging so that a column cannot be dragged in or out of it's
|
|
* current group. Only relevant while {@link #enableColumnMove} is enabled.
|
|
*/
|
|
sealedColumns: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableColumnResize=true]
|
|
* False to disable column resizing within this grid.
|
|
*/
|
|
enableColumnResize: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableColumnHide=true]
|
|
* False to disable column hiding within this grid.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} columnLines Adds column line styling
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [rowLines=true] Adds row line styling
|
|
*/
|
|
rowLines: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [disableSelection=false]
|
|
* True to disable selection model.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} emptyText Default text (html tags are accepted) to display in the Panel body when the Store
|
|
* is empty. When specified, and the Store is empty, the text will be rendered inside a DIV with the CSS class "x-grid-empty".
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowDeselect=false]
|
|
* True to allow deselecting a record. This config is forwarded to {@link Ext.selection.Model#allowDeselect}.
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} optimizedColumnMove
|
|
* If you are writing a grid plugin or a {Ext.grid.feature.Feature Feature} which creates a column-based structure which
|
|
* needs a view refresh when columns are moved, then set this property in the grid.
|
|
*
|
|
* An example is the built in {@link Ext.grid.feature.AbstractSummary Summary} Feature. This creates summary rows, and the
|
|
* summary columns must be in the same order as the data columns. This plugin sets the `optimizedColumnMove` to `false.
|
|
*/
|
|
|
|
colLinesCls: Ext.baseCSSPrefix + 'grid-with-col-lines',
|
|
rowLinesCls: Ext.baseCSSPrefix + 'grid-with-row-lines',
|
|
noRowLinesCls: Ext.baseCSSPrefix + 'grid-no-row-lines',
|
|
hiddenHeaderCtCls: Ext.baseCSSPrefix + 'grid-header-ct-hidden',
|
|
hiddenHeaderCls: Ext.baseCSSPrefix + 'grid-header-hidden',
|
|
resizeMarkerCls: Ext.baseCSSPrefix + 'grid-resize-marker',
|
|
emptyCls: Ext.baseCSSPrefix + 'grid-empty',
|
|
|
|
initComponent: function() {
|
|
|
|
var me = this,
|
|
headerCtCfg = me.columns || me.colModel,
|
|
view,
|
|
i, len,
|
|
// Look up the configured Store. If none configured, use the fieldless, empty Store defined in Ext.data.Store.
|
|
store = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store'),
|
|
columns;
|
|
|
|
if (me.columnLines) {
|
|
me.addCls(me.colLinesCls);
|
|
}
|
|
|
|
me.addCls(me.rowLines ? me.rowLinesCls : me.noRowLinesCls);
|
|
|
|
|
|
// The columns/colModel config may be either a fully instantiated HeaderContainer, or an array of Column definitions, or a config object of a HeaderContainer
|
|
// Either way, we extract a columns property referencing an array of Column definitions.
|
|
if (headerCtCfg instanceof Ext.grid.header.Container) {
|
|
headerCtCfg.isRootHeader = true;
|
|
me.headerCt = headerCtCfg;
|
|
} else {
|
|
|
|
// If any of the Column objects contain a locked property, and are not processed, this is a lockable TablePanel, a
|
|
// special view will be injected by the Ext.grid.locking.Lockable mixin, so no processing of .
|
|
if (me.enableLocking || me.hasLockedColumns(headerCtCfg)) {
|
|
me.self.mixin('lockable', Ext.grid.locking.Lockable);
|
|
me.injectLockable();
|
|
}
|
|
// Not lockable - create the HeaderContainer
|
|
else {
|
|
if (Ext.isArray(headerCtCfg)) {
|
|
headerCtCfg = {
|
|
items: headerCtCfg
|
|
};
|
|
}
|
|
Ext.apply(headerCtCfg, {
|
|
grid: me,
|
|
forceFit: me.forceFit,
|
|
sortable: me.sortableColumns,
|
|
enableColumnMove: me.enableColumnMove,
|
|
enableColumnResize: me.enableColumnResize,
|
|
sealed: me.sealedColumns,
|
|
isRootHeader: true
|
|
});
|
|
|
|
if (Ext.isDefined(me.enableColumnHide)) {
|
|
headerCtCfg.enableColumnHide = me.enableColumnHide;
|
|
}
|
|
|
|
// Create our HeaderCOntainer from the generated configuration
|
|
if (!me.headerCt) {
|
|
me.headerCt = new Ext.grid.header.Container(headerCtCfg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Maintain backward compatibiliy by providing the initial column set as a property.
|
|
me.columns = me.headerCt.getGridColumns();
|
|
|
|
me.scrollTask = new Ext.util.DelayedTask(me.syncHorizontalScroll, me);
|
|
|
|
me.addEvents(
|
|
// documented on GridPanel
|
|
'reconfigure',
|
|
/**
|
|
* @event viewready
|
|
* Fires when the grid view is available (use this for selecting a default row).
|
|
* @param {Ext.panel.Table} this
|
|
*/
|
|
'viewready'
|
|
);
|
|
|
|
me.bodyCls = me.bodyCls || '';
|
|
me.bodyCls += (' ' + me.extraBodyCls);
|
|
|
|
me.cls = me.cls || '';
|
|
me.cls += (' ' + me.extraBaseCls);
|
|
|
|
// autoScroll is not a valid configuration
|
|
delete me.autoScroll;
|
|
|
|
// If this TablePanel is lockable (Either configured lockable, or any of the defined columns has a 'locked' property)
|
|
// then a special lockable view containing 2 side-by-side grids will have been injected so we do not need to set up any UI.
|
|
if (!me.hasView) {
|
|
|
|
// Extract the array of leaf Column objects
|
|
columns = me.headerCt.getGridColumns();
|
|
|
|
// If the Store is paging blocks of the dataset in, then it can only be sorted remotely.
|
|
if (store.buffered && !store.remoteSort) {
|
|
for (i = 0, len = columns.length; i < len; i++) {
|
|
columns[i].sortable = false;
|
|
}
|
|
}
|
|
|
|
if (me.hideHeaders) {
|
|
me.headerCt.height = 0;
|
|
// don't se the hidden property, we still need these to layout
|
|
me.headerCt.hiddenHeaders = true;
|
|
me.headerCt.addCls(me.hiddenHeaderCtCls);
|
|
me.addCls(me.hiddenHeaderCls);
|
|
// IE Quirks Mode fix
|
|
// If hidden configuration option was used, several layout calculations will be bypassed.
|
|
if (Ext.isIEQuirks) {
|
|
me.headerCt.style = {
|
|
display: 'none'
|
|
};
|
|
}
|
|
}
|
|
|
|
me.relayHeaderCtEvents(me.headerCt);
|
|
me.features = me.features || [];
|
|
if (!Ext.isArray(me.features)) {
|
|
me.features = [me.features];
|
|
}
|
|
me.dockedItems = [].concat(me.dockedItems || []);
|
|
me.dockedItems.unshift(me.headerCt);
|
|
me.viewConfig = me.viewConfig || {};
|
|
|
|
// AbstractDataView will look up a Store configured as an object
|
|
// getView converts viewConfig into a View instance
|
|
view = me.getView();
|
|
|
|
me.items = [view];
|
|
me.hasView = true;
|
|
|
|
// Add a listener to synchronize the horizontal scroll position of the headers
|
|
// with the table view's element... Unless we are not showing headers!
|
|
if (!me.hideHeaders) {
|
|
view.on({
|
|
scroll: {
|
|
fn: me.onHorizontalScroll,
|
|
element: 'el',
|
|
scope: me
|
|
}
|
|
});
|
|
}
|
|
|
|
// Attach this Panel to the Store
|
|
me.bindStore(store, true);
|
|
|
|
me.mon(view, {
|
|
viewready: me.onViewReady,
|
|
refresh: me.onRestoreHorzScroll,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
// Relay events from the View whether it be a LockingView, or a regular GridView
|
|
me.relayEvents(me.view, [
|
|
/**
|
|
* @event beforeitemmousedown
|
|
* @inheritdoc Ext.view.View#beforeitemmousedown
|
|
*/
|
|
'beforeitemmousedown',
|
|
/**
|
|
* @event beforeitemmouseup
|
|
* @inheritdoc Ext.view.View#beforeitemmouseup
|
|
*/
|
|
'beforeitemmouseup',
|
|
/**
|
|
* @event beforeitemmouseenter
|
|
* @inheritdoc Ext.view.View#beforeitemmouseenter
|
|
*/
|
|
'beforeitemmouseenter',
|
|
/**
|
|
* @event beforeitemmouseleave
|
|
* @inheritdoc Ext.view.View#beforeitemmouseleave
|
|
*/
|
|
'beforeitemmouseleave',
|
|
/**
|
|
* @event beforeitemclick
|
|
* @inheritdoc Ext.view.View#beforeitemclick
|
|
*/
|
|
'beforeitemclick',
|
|
/**
|
|
* @event beforeitemdblclick
|
|
* @inheritdoc Ext.view.View#beforeitemdblclick
|
|
*/
|
|
'beforeitemdblclick',
|
|
/**
|
|
* @event beforeitemcontextmenu
|
|
* @inheritdoc Ext.view.View#beforeitemcontextmenu
|
|
*/
|
|
'beforeitemcontextmenu',
|
|
/**
|
|
* @event itemmousedown
|
|
* @inheritdoc Ext.view.View#itemmousedown
|
|
*/
|
|
'itemmousedown',
|
|
/**
|
|
* @event itemmouseup
|
|
* @inheritdoc Ext.view.View#itemmouseup
|
|
*/
|
|
'itemmouseup',
|
|
/**
|
|
* @event itemmouseenter
|
|
* @inheritdoc Ext.view.View#itemmouseenter
|
|
*/
|
|
'itemmouseenter',
|
|
/**
|
|
* @event itemmouseleave
|
|
* @inheritdoc Ext.view.View#itemmouseleave
|
|
*/
|
|
'itemmouseleave',
|
|
/**
|
|
* @event itemclick
|
|
* @inheritdoc Ext.view.View#itemclick
|
|
*/
|
|
'itemclick',
|
|
/**
|
|
* @event itemdblclick
|
|
* @inheritdoc Ext.view.View#itemdblclick
|
|
*/
|
|
'itemdblclick',
|
|
/**
|
|
* @event itemcontextmenu
|
|
* @inheritdoc Ext.view.View#itemcontextmenu
|
|
*/
|
|
'itemcontextmenu',
|
|
/**
|
|
* @event beforecellclick
|
|
* @inheritdoc Ext.view.Table#beforecellclick
|
|
*/
|
|
'beforecellclick',
|
|
/**
|
|
* @event cellclick
|
|
* @inheritdoc Ext.view.Table#cellclick
|
|
*/
|
|
'cellclick',
|
|
/**
|
|
* @event beforecelldblclick
|
|
* @inheritdoc Ext.view.Table#beforecelldblclick
|
|
*/
|
|
'beforecelldblclick',
|
|
/**
|
|
* @event celldblclick
|
|
* @inheritdoc Ext.view.Table#celldblclick
|
|
*/
|
|
'celldblclick',
|
|
/**
|
|
* @event beforecellcontextmenu
|
|
* @inheritdoc Ext.view.Table#beforecellcontextmenu
|
|
*/
|
|
'beforecellcontextmenu',
|
|
/**
|
|
* @event cellcontextmenu
|
|
* @inheritdoc Ext.view.Table#cellcontextmenu
|
|
*/
|
|
'cellcontextmenu',
|
|
/**
|
|
* @event beforecellmousedown
|
|
* @inheritdoc Ext.view.Table#beforecellmousedown
|
|
*/
|
|
'beforecellmousedown',
|
|
/**
|
|
* @event cellmousedown
|
|
* @inheritdoc Ext.view.Table#cellmousedown
|
|
*/
|
|
'cellmousedown',
|
|
/**
|
|
* @event beforecellmouseup
|
|
* @inheritdoc Ext.view.Table#beforecellmouseup
|
|
*/
|
|
'beforecellmouseup',
|
|
/**
|
|
* @event cellmouseup
|
|
* @inheritdoc Ext.view.Table#cellmouseup
|
|
*/
|
|
'cellmouseup',
|
|
/**
|
|
* @event beforecellkeydown
|
|
* @inheritdoc Ext.view.Table#beforecellkeydown
|
|
*/
|
|
'beforecellkeydown',
|
|
/**
|
|
* @event cellkeydown
|
|
* @inheritdoc Ext.view.Table#cellkeydown
|
|
*/
|
|
'cellkeydown',
|
|
/**
|
|
* @event beforecontainermousedown
|
|
* @inheritdoc Ext.view.View#beforecontainermousedown
|
|
*/
|
|
'beforecontainermousedown',
|
|
/**
|
|
* @event beforecontainermouseup
|
|
* @inheritdoc Ext.view.View#beforecontainermouseup
|
|
*/
|
|
'beforecontainermouseup',
|
|
/**
|
|
* @event beforecontainermouseover
|
|
* @inheritdoc Ext.view.View#beforecontainermouseover
|
|
*/
|
|
'beforecontainermouseover',
|
|
/**
|
|
* @event beforecontainermouseout
|
|
* @inheritdoc Ext.view.View#beforecontainermouseout
|
|
*/
|
|
'beforecontainermouseout',
|
|
/**
|
|
* @event beforecontainerclick
|
|
* @inheritdoc Ext.view.View#beforecontainerclick
|
|
*/
|
|
'beforecontainerclick',
|
|
/**
|
|
* @event beforecontainerdblclick
|
|
* @inheritdoc Ext.view.View#beforecontainerdblclick
|
|
*/
|
|
'beforecontainerdblclick',
|
|
/**
|
|
* @event beforecontainercontextmenu
|
|
* @inheritdoc Ext.view.View#beforecontainercontextmenu
|
|
*/
|
|
'beforecontainercontextmenu',
|
|
/**
|
|
* @event containermouseup
|
|
* @inheritdoc Ext.view.View#containermouseup
|
|
*/
|
|
'containermouseup',
|
|
/**
|
|
* @event containermouseover
|
|
* @inheritdoc Ext.view.View#containermouseover
|
|
*/
|
|
'containermouseover',
|
|
/**
|
|
* @event containermouseout
|
|
* @inheritdoc Ext.view.View#containermouseout
|
|
*/
|
|
'containermouseout',
|
|
/**
|
|
* @event containerclick
|
|
* @inheritdoc Ext.view.View#containerclick
|
|
*/
|
|
'containerclick',
|
|
/**
|
|
* @event containerdblclick
|
|
* @inheritdoc Ext.view.View#containerdblclick
|
|
*/
|
|
'containerdblclick',
|
|
/**
|
|
* @event containercontextmenu
|
|
* @inheritdoc Ext.view.View#containercontextmenu
|
|
*/
|
|
'containercontextmenu',
|
|
/**
|
|
* @event selectionchange
|
|
* @inheritdoc Ext.selection.Model#selectionchange
|
|
*/
|
|
'selectionchange',
|
|
/**
|
|
* @event beforeselect
|
|
* @inheritdoc Ext.selection.RowModel#beforeselect
|
|
*/
|
|
'beforeselect',
|
|
/**
|
|
* @event select
|
|
* @inheritdoc Ext.selection.RowModel#select
|
|
*/
|
|
'select',
|
|
/**
|
|
* @event beforedeselect
|
|
* @inheritdoc Ext.selection.RowModel#beforedeselect
|
|
*/
|
|
'beforedeselect',
|
|
/**
|
|
* @event deselect
|
|
* @inheritdoc Ext.selection.RowModel#deselect
|
|
*/
|
|
'deselect'
|
|
]);
|
|
|
|
me.callParent(arguments);
|
|
me.addStateEvents(['columnresize', 'columnmove', 'columnhide', 'columnshow', 'sortchange', 'filterchange']);
|
|
|
|
// If lockable, the headerCt is just a collection of Columns, not a Container
|
|
if (!me.lockable && me.headerCt) {
|
|
me.headerCt.on('afterlayout', me.onRestoreHorzScroll, me);
|
|
}
|
|
},
|
|
|
|
// Private. Determine if there are any columns with a locked configuration option
|
|
hasLockedColumns: function(columns) {
|
|
var i,
|
|
len,
|
|
column;
|
|
|
|
// In case they specified a config object with items...
|
|
if (Ext.isObject(columns)) {
|
|
columns = columns.items;
|
|
}
|
|
for (i = 0, len = columns.length; i < len; i++) {
|
|
column = columns[i];
|
|
if (!column.processed && column.locked) {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
|
|
relayHeaderCtEvents: function (headerCt) {
|
|
this.relayEvents(headerCt, [
|
|
/**
|
|
* @event columnresize
|
|
* @inheritdoc Ext.grid.header.Container#columnresize
|
|
*/
|
|
'columnresize',
|
|
/**
|
|
* @event columnmove
|
|
* @inheritdoc Ext.grid.header.Container#columnmove
|
|
*/
|
|
'columnmove',
|
|
/**
|
|
* @event columnhide
|
|
* @inheritdoc Ext.grid.header.Container#columnhide
|
|
*/
|
|
'columnhide',
|
|
/**
|
|
* @event columnshow
|
|
* @inheritdoc Ext.grid.header.Container#columnshow
|
|
*/
|
|
'columnshow',
|
|
/**
|
|
* @event columnschanged
|
|
* @inheritdoc Ext.grid.header.Container#columnschanged
|
|
*/
|
|
'columnschanged',
|
|
/**
|
|
* @event sortchange
|
|
* @inheritdoc Ext.grid.header.Container#sortchange
|
|
*/
|
|
'sortchange',
|
|
/**
|
|
* @event headerclick
|
|
* @inheritdoc Ext.grid.header.Container#headerclick
|
|
*/
|
|
'headerclick',
|
|
/**
|
|
* @event headercontextmenu
|
|
* @inheritdoc Ext.grid.header.Container#headercontextmenu
|
|
*/
|
|
'headercontextmenu',
|
|
/**
|
|
* @event headertriggerclick
|
|
* @inheritdoc Ext.grid.header.Container#headertriggerclick
|
|
*/
|
|
'headertriggerclick'
|
|
]);
|
|
},
|
|
|
|
getState: function(){
|
|
var me = this,
|
|
state = me.callParent(),
|
|
storeState = me.store.getState();
|
|
|
|
state = me.addPropertyToState(state, 'columns', me.headerCt.getColumnsState());
|
|
|
|
if (storeState) {
|
|
state.storeState = storeState;
|
|
}
|
|
return state;
|
|
},
|
|
|
|
applyState: function(state) {
|
|
var me = this,
|
|
sorter = state.sort,
|
|
storeState = state.storeState,
|
|
store = me.store,
|
|
columns = state.columns;
|
|
|
|
delete state.columns;
|
|
|
|
// Ensure superclass has applied *its* state.
|
|
// AbstractComponent saves dimensions (and anchor/flex) plus collapsed state.
|
|
me.callParent(arguments);
|
|
|
|
if (columns) {
|
|
me.headerCt.applyColumnsState(columns);
|
|
}
|
|
|
|
// Old stored sort state. Deprecated and will die out.
|
|
if (sorter) {
|
|
if (store.remoteSort) {
|
|
// Pass false to prevent a sort from occurring
|
|
store.sort({
|
|
property: sorter.property,
|
|
direction: sorter.direction,
|
|
root: sorter.root
|
|
}, null, false);
|
|
} else {
|
|
store.sort(sorter.property, sorter.direction);
|
|
}
|
|
}
|
|
// New storeState which encapsulates groupers, sorters and filters
|
|
else if (storeState) {
|
|
store.applyState(storeState);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the store associated with this Panel.
|
|
* @return {Ext.data.Store} The store
|
|
*/
|
|
getStore: function(){
|
|
return this.store;
|
|
},
|
|
|
|
/**
|
|
* Gets the view for this panel.
|
|
* @return {Ext.view.Table}
|
|
*/
|
|
getView: function() {
|
|
var me = this,
|
|
sm;
|
|
|
|
if (!me.view) {
|
|
sm = me.getSelectionModel();
|
|
|
|
// TableView injects the view reference into this grid so that we have a reference as early as possible
|
|
Ext.widget(Ext.apply({
|
|
|
|
// Features need a reference to the grid, so configure a reference into the View
|
|
grid: me,
|
|
deferInitialRefresh: me.deferRowRender !== false,
|
|
trackOver: me.trackMouseOver !== false,
|
|
scroll: me.scroll,
|
|
xtype: me.viewType,
|
|
store: me.store,
|
|
headerCt: me.headerCt,
|
|
columnLines: me.columnLines,
|
|
rowLines: me.rowLines,
|
|
selModel: sm,
|
|
features: me.features,
|
|
panel: me,
|
|
emptyText: me.emptyText || ''
|
|
}, me.viewConfig));
|
|
|
|
// Normalize the application of the markup wrapping the emptyText config.
|
|
// `emptyText` can now be defined on the grid as well as on its viewConfig, and this led to the emptyText not
|
|
// having the wrapping markup when it was defined in the viewConfig. It should be backwards compatible.
|
|
// Note that in the unlikely event that emptyText is defined on both the grid config and the viewConfig that the viewConfig wins.
|
|
if (me.view.emptyText) {
|
|
me.view.emptyText = '<div class="' + me.emptyCls + '">' + me.view.emptyText + '</div>';
|
|
}
|
|
|
|
// TableView's custom component layout, Ext.view.TableLayout requires a reference to the headerCt because it depends on the headerCt doing its work.
|
|
me.view.getComponentLayout().headerCt = me.headerCt;
|
|
|
|
me.mon(me.view, {
|
|
uievent: me.processEvent,
|
|
scope: me
|
|
});
|
|
sm.view = me.view;
|
|
me.headerCt.view = me.view;
|
|
}
|
|
return me.view;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* autoScroll is never valid for all classes which extend TablePanel.
|
|
*/
|
|
setAutoScroll: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* Processes UI events from the view. Propagates them to whatever internal Components need to process them.
|
|
* @param {String} type Event type, eg 'click'
|
|
* @param {Ext.view.Table} view TableView Component
|
|
* @param {HTMLElement} cell Cell HtmlElement the event took place within
|
|
* @param {Number} recordIndex Index of the associated Store Model (-1 if none)
|
|
* @param {Number} cellIndex Cell index within the row
|
|
* @param {Ext.EventObject} e Original event
|
|
*/
|
|
processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
|
|
var me = this,
|
|
header;
|
|
|
|
if (cellIndex !== -1) {
|
|
header = me.columnManager.getColumns()[cellIndex];
|
|
return header.processEvent.apply(header, arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This method is obsolete in 4.1. The closest equivalent in
|
|
* 4.1 is {@link #doLayout}, but it is also possible that no
|
|
* layout is needed.
|
|
* @deprecated 4.1
|
|
*/
|
|
determineScrollbars: function () {
|
|
},
|
|
|
|
/**
|
|
* This method is obsolete in 4.1. The closest equivalent in 4.1 is
|
|
* {@link Ext.AbstractComponent#updateLayout}, but it is also possible that no layout
|
|
* is needed.
|
|
* @deprecated 4.1
|
|
*/
|
|
invalidateScroller: function () {
|
|
},
|
|
|
|
scrollByDeltaY: function(yDelta, animate) {
|
|
this.getView().scrollBy(0, yDelta, animate);
|
|
},
|
|
|
|
scrollByDeltaX: function(xDelta, animate) {
|
|
this.getView().scrollBy(xDelta, 0, animate);
|
|
},
|
|
|
|
afterCollapse: function() {
|
|
var me = this;
|
|
me.saveScrollPos();
|
|
me.saveScrollPos();
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
afterExpand: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.restoreScrollPos();
|
|
me.restoreScrollPos();
|
|
},
|
|
|
|
saveScrollPos: Ext.emptyFn,
|
|
|
|
restoreScrollPos: Ext.emptyFn,
|
|
|
|
onHeaderResize: function(){
|
|
this.delayScroll();
|
|
},
|
|
|
|
// Update the view when a header moves
|
|
onHeaderMove: function(headerCt, header, colsToMove, fromIdx, toIdx) {
|
|
var me = this;
|
|
|
|
// If there are Features or Plugins which create DOM which must match column order, they set the optimizedColumnMove flag to false.
|
|
// In this case we must refresh the view on column move.
|
|
if (me.optimizedColumnMove === false) {
|
|
me.view.refresh();
|
|
}
|
|
|
|
// Simplest case for default DOM structure is just to swap the columns round in the view.
|
|
else {
|
|
me.view.moveColumn(fromIdx, toIdx, colsToMove);
|
|
}
|
|
me.delayScroll();
|
|
},
|
|
|
|
// Section onHeaderHide is invoked after view.
|
|
onHeaderHide: function(headerCt, header) {
|
|
this.view.refresh();
|
|
this.delayScroll();
|
|
},
|
|
|
|
onHeaderShow: function(headerCt, header) {
|
|
this.view.refresh();
|
|
this.delayScroll();
|
|
},
|
|
|
|
delayScroll: function(){
|
|
var target = this.getScrollTarget().el;
|
|
if (target) {
|
|
this.scrollTask.delay(10, null, null, [target.dom.scrollLeft]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fires the TablePanel's viewready event when the view declares that its internal DOM is ready
|
|
*/
|
|
onViewReady: function() {
|
|
this.fireEvent('viewready', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Tracks when things happen to the view and preserves the horizontal scroll position.
|
|
*/
|
|
onRestoreHorzScroll: function() {
|
|
var left = this.scrollLeftPos;
|
|
if (left) {
|
|
// We need to restore the body scroll position here
|
|
this.syncHorizontalScroll(left, true);
|
|
}
|
|
},
|
|
|
|
getScrollerOwner: function() {
|
|
var rootCmp = this;
|
|
if (!this.scrollerOwner) {
|
|
rootCmp = this.up('[scrollerOwner]');
|
|
}
|
|
return rootCmp;
|
|
},
|
|
|
|
/**
|
|
* Gets left hand side marker for header resizing.
|
|
* @private
|
|
*/
|
|
getLhsMarker: function() {
|
|
var me = this;
|
|
return me.lhsMarker || (me.lhsMarker = Ext.DomHelper.append(me.el, {
|
|
cls: me.resizeMarkerCls
|
|
}, true));
|
|
},
|
|
|
|
/**
|
|
* Gets right hand side marker for header resizing.
|
|
* @private
|
|
*/
|
|
getRhsMarker: function() {
|
|
var me = this;
|
|
|
|
return me.rhsMarker || (me.rhsMarker = Ext.DomHelper.append(me.el, {
|
|
cls: me.resizeMarkerCls
|
|
}, true));
|
|
},
|
|
|
|
/**
|
|
* Returns the selection model being used and creates it via the configuration if it has not been created already.
|
|
* @return {Ext.selection.Model} selModel
|
|
*/
|
|
getSelectionModel: function(){
|
|
var me = this,
|
|
selModel = me.selModel,
|
|
applyMode, mode, type;
|
|
|
|
if (!selModel) {
|
|
selModel = {};
|
|
// no config, set our own mode
|
|
applyMode = true;
|
|
}
|
|
|
|
if (!selModel.events) {
|
|
// only config provided, set our mode if one doesn't exist on the config
|
|
type = selModel.selType || me.selType;
|
|
applyMode = !selModel.mode;
|
|
selModel = me.selModel = Ext.create('selection.' + type, selModel);
|
|
}
|
|
|
|
if (me.simpleSelect) {
|
|
mode = 'SIMPLE';
|
|
} else if (me.multiSelect) {
|
|
mode = 'MULTI';
|
|
}
|
|
|
|
Ext.applyIf(selModel, {
|
|
allowDeselect: me.allowDeselect
|
|
});
|
|
|
|
if (mode && applyMode) {
|
|
selModel.setSelectionMode(mode);
|
|
}
|
|
|
|
if (!selModel.hasRelaySetup) {
|
|
me.relayEvents(selModel, [
|
|
'selectionchange', 'beforeselect', 'beforedeselect', 'select', 'deselect'
|
|
]);
|
|
selModel.hasRelaySetup = true;
|
|
}
|
|
|
|
// lock the selection model if user
|
|
// has disabled selection
|
|
if (me.disableSelection) {
|
|
selModel.locked = true;
|
|
}
|
|
return selModel;
|
|
},
|
|
|
|
getScrollTarget: function(){
|
|
var owner = this.getScrollerOwner(),
|
|
items = owner.query('tableview');
|
|
|
|
return items[1] || items[0];
|
|
},
|
|
|
|
onHorizontalScroll: function(event, target) {
|
|
this.syncHorizontalScroll(target.scrollLeft);
|
|
},
|
|
|
|
syncHorizontalScroll: function(left, setBody) {
|
|
var me = this,
|
|
scrollTarget;
|
|
|
|
setBody = setBody === true;
|
|
// Only set the horizontal scroll if we've changed position,
|
|
// so that we don't set this on vertical scrolls
|
|
if (me.rendered && (setBody || left !== me.scrollLeftPos)) {
|
|
// Only set the body position if we're reacting to a refresh, otherwise
|
|
// we just need to set the header.
|
|
if (setBody) {
|
|
scrollTarget = me.getScrollTarget();
|
|
scrollTarget.el.dom.scrollLeft = left;
|
|
}
|
|
me.headerCt.el.dom.scrollLeft = left;
|
|
me.scrollLeftPos = left;
|
|
}
|
|
},
|
|
|
|
// template method meant to be overriden
|
|
onStoreLoad: Ext.emptyFn,
|
|
|
|
getEditorParent: function() {
|
|
return this.body;
|
|
},
|
|
|
|
bindStore: function(store, initial) {
|
|
var me = this,
|
|
view = me.getView(),
|
|
bufferedStore = store && store.buffered,
|
|
bufferedRenderer;
|
|
|
|
// Bind to store immediately because subsequent processing looks for grid's store property
|
|
me.store = store;
|
|
|
|
// If the Store is buffered, create a BufferedRenderer to monitor the View's scroll progress
|
|
// and scroll rows on/off when it detects we are nearing an edge.
|
|
// MUST be done before store is bound to the view so that the BufferedRenderer may inject its getViewRange implementation
|
|
// before the view tries to refresh.
|
|
bufferedRenderer = me.findPlugin('bufferedrenderer');
|
|
if (bufferedRenderer) {
|
|
me.verticalScroller = bufferedRenderer;
|
|
// If we're in a reconfigure rebind the BufferedRenderer
|
|
if (bufferedRenderer.store) {
|
|
bufferedRenderer.bindStore(store);
|
|
}
|
|
} else if (bufferedStore) {
|
|
me.verticalScroller = bufferedRenderer = me.addPlugin(Ext.apply({
|
|
ptype: 'bufferedrenderer'
|
|
}, me.initialConfig.verticalScroller));
|
|
}
|
|
|
|
if (view.store !== store) {
|
|
if (initial) {
|
|
// The initially created View will already be bound to the configured Store
|
|
view.bindStore(store, false, 'dataSource');
|
|
} else {
|
|
// Otherwise, we're coming from a reconfigure, so we need to set the actual
|
|
// store property on the view. It will set the data source
|
|
view.bindStore(store, false);
|
|
}
|
|
}
|
|
|
|
me.mon(store, {
|
|
load: me.onStoreLoad,
|
|
scope: me
|
|
});
|
|
me.storeRelayers = me.relayEvents(store, [
|
|
/**
|
|
* @event filterchange
|
|
* @inheritdoc Ext.data.Store#filterchange
|
|
*/
|
|
'filterchange'
|
|
]);
|
|
|
|
// If buffered rendering is being used, scroll position must be preserved across refreshes
|
|
if (bufferedRenderer) {
|
|
me.invalidateScrollerOnRefresh = false;
|
|
}
|
|
|
|
if (me.invalidateScrollerOnRefresh !== undefined) {
|
|
view.preserveScrollOnRefresh = !me.invalidateScrollerOnRefresh;
|
|
}
|
|
},
|
|
|
|
unbindStore: function() {
|
|
var me = this,
|
|
store = me.store;
|
|
|
|
if (store) {
|
|
me.store = null;
|
|
me.mun(store, {
|
|
load: me.onStoreLoad,
|
|
scope: me
|
|
});
|
|
Ext.destroy(me.storeRelayers);
|
|
}
|
|
},
|
|
|
|
// documented on GridPanel
|
|
reconfigure: function(store, columns) {
|
|
var me = this,
|
|
view = me.getView(),
|
|
originalDeferinitialRefresh,
|
|
oldStore = me.store,
|
|
headerCt = me.headerCt,
|
|
oldColumns = headerCt ? headerCt.items.getRange() : me.columns;
|
|
|
|
// Make copy in case the beforereconfigure listener mutates it.
|
|
if (columns) {
|
|
columns = Ext.Array.slice(columns);
|
|
}
|
|
|
|
me.fireEvent('beforereconfigure', me, store, columns, oldStore, oldColumns);
|
|
if (me.lockable) {
|
|
me.reconfigureLockable(store, columns);
|
|
} else {
|
|
Ext.suspendLayouts();
|
|
if (columns) {
|
|
// new columns, delete scroll pos
|
|
delete me.scrollLeftPos;
|
|
headerCt.removeAll();
|
|
headerCt.add(columns);
|
|
}
|
|
// The following test compares the result of an assignment of the store var with the oldStore var
|
|
// This saves a large amount of code.
|
|
if (store && (store = Ext.StoreManager.lookup(store)) !== oldStore) {
|
|
// Only unbind the store if a new one was passed
|
|
if (me.store) {
|
|
me.unbindStore();
|
|
}
|
|
|
|
// On reconfigure, view refresh must be inline.
|
|
originalDeferinitialRefresh = view.deferInitialRefresh;
|
|
view.deferInitialRefresh = false;
|
|
me.bindStore(store);
|
|
view.deferInitialRefresh = originalDeferinitialRefresh;
|
|
} else {
|
|
me.getView().refresh();
|
|
}
|
|
headerCt.setSortState();
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
me.fireEvent('reconfigure', me, store, columns, oldStore, oldColumns);
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
var task = this.scrollTask;
|
|
if (task) {
|
|
task.cancel();
|
|
this.scrollTask = null;
|
|
}
|
|
this.callParent();
|
|
},
|
|
|
|
onDestroy: function(){
|
|
if (this.lockable) {
|
|
this.destroyLockable();
|
|
}
|
|
this.callParent();
|
|
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Utility class for manipulating CSS rules
|
|
* @singleton
|
|
*/
|
|
Ext.define('Ext.util.CSS', function() {
|
|
var CSS,
|
|
rules = null,
|
|
doc = document,
|
|
camelRe = /(-[a-z])/gi,
|
|
camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
|
|
|
|
return {
|
|
|
|
singleton: true,
|
|
|
|
rules: rules,
|
|
|
|
initialized: false,
|
|
|
|
constructor: function() {
|
|
// Cache a reference to the singleton
|
|
CSS = this;
|
|
},
|
|
|
|
/**
|
|
* Creates a stylesheet from a text blob of rules.
|
|
* These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
|
|
* @param {String} cssText The text containing the css rules
|
|
* @param {String} id An id to add to the stylesheet for later removal
|
|
* @return {CSSStyleSheet}
|
|
*/
|
|
createStyleSheet : function(cssText, id) {
|
|
var ss,
|
|
head = doc.getElementsByTagName("head")[0],
|
|
styleEl = doc.createElement("style");
|
|
|
|
styleEl.setAttribute("type", "text/css");
|
|
if (id) {
|
|
styleEl.setAttribute("id", id);
|
|
}
|
|
|
|
if (Ext.isIE) {
|
|
head.appendChild(styleEl);
|
|
ss = styleEl.styleSheet;
|
|
ss.cssText = cssText;
|
|
} else {
|
|
try{
|
|
styleEl.appendChild(doc.createTextNode(cssText));
|
|
} catch(e) {
|
|
styleEl.cssText = cssText;
|
|
}
|
|
head.appendChild(styleEl);
|
|
ss = styleEl.styleSheet ? styleEl.styleSheet : (styleEl.sheet || doc.styleSheets[doc.styleSheets.length-1]);
|
|
}
|
|
CSS.cacheStyleSheet(ss);
|
|
return ss;
|
|
},
|
|
|
|
/**
|
|
* Removes a style or link tag by id
|
|
* @param {String} id The id of the tag
|
|
*/
|
|
removeStyleSheet : function(id) {
|
|
var existing = doc.getElementById(id);
|
|
if (existing) {
|
|
existing.parentNode.removeChild(existing);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Dynamically swaps an existing stylesheet reference for a new one
|
|
* @param {String} id The id of an existing link tag to remove
|
|
* @param {String} url The href of the new stylesheet to include
|
|
*/
|
|
swapStyleSheet : function(id, url) {
|
|
var ss;
|
|
CSS.removeStyleSheet(id);
|
|
ss = doc.createElement("link");
|
|
ss.setAttribute("rel", "stylesheet");
|
|
ss.setAttribute("type", "text/css");
|
|
ss.setAttribute("id", id);
|
|
ss.setAttribute("href", url);
|
|
doc.getElementsByTagName("head")[0].appendChild(ss);
|
|
},
|
|
|
|
/**
|
|
* Refresh the rule cache if you have dynamically added stylesheets
|
|
* @return {Object} An object (hash) of rules indexed by selector
|
|
*/
|
|
refreshCache : function() {
|
|
return CSS.getRules(true);
|
|
},
|
|
|
|
// @private
|
|
cacheStyleSheet : function(ss) {
|
|
if (!rules) {
|
|
rules = CSS.rules = {};
|
|
}
|
|
try {// try catch for cross domain access issue
|
|
var ssRules = ss.cssRules || ss.rules,
|
|
i = ssRules.length - 1,
|
|
imports = ss.imports,
|
|
len = imports ? imports.length : 0,
|
|
rule, j;
|
|
|
|
// Old IE has a different way of handling imports
|
|
for (j = 0; j < len; ++j) {
|
|
CSS.cacheStyleSheet(imports[j]);
|
|
}
|
|
|
|
for (; i >= 0; --i) {
|
|
rule = ssRules[i];
|
|
// If it's an @import rule, import its stylesheet
|
|
if (rule.styleSheet) {
|
|
CSS.cacheStyleSheet(rule.styleSheet);
|
|
}
|
|
CSS.cacheRule(rule, ss);
|
|
}
|
|
} catch(e) {}
|
|
},
|
|
|
|
cacheRule: function(cssRule, styleSheet) {
|
|
// If it's an @import rule, import its stylesheet
|
|
if (cssRule.styleSheet) {
|
|
return CSS.cacheStyleSheet(cssRule.styleSheet);
|
|
}
|
|
|
|
var selectorText = cssRule.selectorText,
|
|
selectorCount, j;
|
|
|
|
if (selectorText) {
|
|
|
|
// Split in case there are multiple, comma-delimited selectors
|
|
selectorText = selectorText.split(',');
|
|
selectorCount = selectorText.length;
|
|
for (j = 0; j < selectorCount; j++) {
|
|
// IE<8 does not keep a reference to parentStyleSheet in the rule, so we
|
|
// must cache an object like this until IE<8 is deprecated.
|
|
rules[Ext.String.trim(selectorText[j]).toLowerCase()] = {
|
|
parentStyleSheet: styleSheet,
|
|
cssRule: cssRule
|
|
};
|
|
};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets all css rules for the document
|
|
* @param {Boolean} refreshCache true to refresh the internal cache
|
|
* @return {Object} An object (hash) of rules indexed by selector
|
|
*/
|
|
getRules : function(refreshCache) {
|
|
var result = {},
|
|
selector;
|
|
|
|
if (rules === null || refreshCache) {
|
|
CSS.refreshCache();
|
|
}
|
|
for (selector in rules) {
|
|
result[selector] = rules[selector].cssRule;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
refreshCache: function() {
|
|
var ds = doc.styleSheets,
|
|
i = 0,
|
|
len = ds.length;
|
|
|
|
rules = CSS.rules = {}
|
|
for (; i < len; i++) {
|
|
try {
|
|
if (!ds[i].disabled) {
|
|
CSS.cacheStyleSheet(ds[i]);
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets an an individual CSS rule by selector(s)
|
|
* @param {String/String[]} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
|
|
* @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
|
|
* @return {CSSStyleRule} The CSS rule or null if one is not found
|
|
*/
|
|
getRule: function(selector, refreshCache, rawCache) {
|
|
var i, result;
|
|
|
|
if (!rules || refreshCache) {
|
|
CSS.refreshCache();
|
|
}
|
|
if (!Ext.isArray(selector)) {
|
|
result = rules[selector.toLowerCase()]
|
|
if (result && !rawCache) {
|
|
result = result.cssRule;
|
|
}
|
|
return result || null;
|
|
}
|
|
for (i = 0; i < selector.length; i++) {
|
|
if (rules[selector[i]]) {
|
|
return rawCache ? rules[selector[i].toLowerCase()] : rules[selector[i].toLowerCase()].cssRule;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Creates a rule.
|
|
* @param {CSSStyleSheet} styleSheet The StyleSheet to create the rule in as returned from {@link #createStyleSheet}.
|
|
* @param {String} selector The selector to target the rule.
|
|
* @param {String} property The cssText specification eg `"color:red;font-weight:bold;text-decoration:underline"`
|
|
* @return {CSSStyleRule} The created rule
|
|
*/
|
|
createRule: function(styleSheet, selector, cssText) {
|
|
var result,
|
|
ruleSet = styleSheet.cssRules || styleSheet.rules,
|
|
index = ruleSet.length;
|
|
|
|
if (styleSheet.insertRule) {
|
|
styleSheet.insertRule(selector + '{' + cssText + '}', index);
|
|
} else {
|
|
styleSheet.addRule(selector, cssText||' ');
|
|
}
|
|
CSS.cacheRule(result = ruleSet[index], styleSheet);
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Updates a rule property
|
|
* @param {String/String[]} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
|
|
* @param {String} property The css property or a cssText specification eg `"color:red;font-weight:bold;text-decoration:underline"`
|
|
* @param {String} value The new value for the property
|
|
* @return {Boolean} true If a rule was found and updated
|
|
*/
|
|
updateRule : function(selector, property, value) {
|
|
var rule, i, styles;
|
|
if (!Ext.isArray(selector)) {
|
|
rule = CSS.getRule(selector);
|
|
if (rule) {
|
|
// 2 arg form means cssText sent, so parse it and update each style
|
|
if (arguments.length == 2) {
|
|
styles = Ext.Element.parseStyles(property);
|
|
for (property in styles) {
|
|
rule.style[property.replace(camelRe, camelFn)] = styles[property];
|
|
}
|
|
} else {
|
|
rule.style[property.replace(camelRe, camelFn)] = value;
|
|
}
|
|
return true;
|
|
}
|
|
} else {
|
|
for (i = 0; i < selector.length; i++) {
|
|
if (CSS.updateRule(selector[i], property, value)) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
deleteRule: function(selector) {
|
|
var rule = CSS.getRule(selector, false, true),
|
|
styleSheet, index;
|
|
|
|
if (rule) {
|
|
styleSheet = rule.parentStyleSheet;
|
|
index = Ext.Array.indexOf(styleSheet.cssRules || styleSheet.rules, rule.cssRule);
|
|
if (styleSheet.deleteRule) {
|
|
styleSheet.deleteRule(index);
|
|
} else {
|
|
styleSheet.removeRule(index);
|
|
}
|
|
delete rules[selector];
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Component layout for {@link Ext.view.Table}
|
|
* @private
|
|
*
|
|
*/
|
|
Ext.define('Ext.view.TableLayout', {
|
|
extend: Ext.layout.component.Auto ,
|
|
|
|
|
|
alias: ['layout.tableview'],
|
|
type: 'tableview',
|
|
|
|
beginLayout: function(ownerContext) {
|
|
var me = this,
|
|
otherSide = me.owner.lockingPartner,
|
|
owner = me.owner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If we are in a twinned grid (locked view) then set up bidirectional links with the other side's layout context
|
|
if (otherSide) {
|
|
me.lockedGrid = me.owner.up('[lockable]');
|
|
me.lockedGrid.needsRowHeightSync = true;
|
|
if (!ownerContext.lockingPartner) {
|
|
ownerContext.lockingPartner = ownerContext.context.getItem(otherSide, otherSide.el);
|
|
if (ownerContext.lockingPartner && !ownerContext.lockingPartner.lockingPartner) {
|
|
ownerContext.lockingPartner.lockingPartner = ownerContext;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Grab a ContextItem for the header container
|
|
ownerContext.headerContext = ownerContext.context.getCmp(me.headerCt);
|
|
|
|
// Grab ContextItem for the table only if there is a table to size
|
|
if (me.owner.body.dom) {
|
|
ownerContext.bodyContext = ownerContext.getEl(me.owner.body);
|
|
}
|
|
if (Ext.isWebKit) {
|
|
owner.el.select(owner.getBodySelector()).setStyle('table-layout', 'auto');
|
|
}
|
|
},
|
|
|
|
calculate: function(ownerContext) {
|
|
var me = this,
|
|
lockingPartner = me.lockingPartner,
|
|
owner = me.owner,
|
|
contentHeight = 0,
|
|
emptyEl;
|
|
|
|
// We can only complete our work (setting the CSS rules governing column widths) if the
|
|
// Grid's HeaderContainer's ColumnLayout has set the widths of its columns.
|
|
if (ownerContext.headerContext.hasProp('columnWidthsDone')) {
|
|
if (!me.setColumnWidths(ownerContext)) {
|
|
me.done = false;
|
|
return;
|
|
}
|
|
ownerContext.state.columnWidthsSynced = true;
|
|
if (ownerContext.bodyContext) {
|
|
emptyEl = me.owner.el.down('.' + owner.ownerCt.emptyCls, true);
|
|
if (!emptyEl) {
|
|
contentHeight = ownerContext.bodyContext.el.dom.offsetHeight;
|
|
ownerContext.bodyContext.setHeight(contentHeight, false);
|
|
} else {
|
|
contentHeight = emptyEl.offsetHeight;
|
|
}
|
|
ownerContext.setProp('contentHeight', contentHeight);
|
|
}
|
|
|
|
// If we are part of a twinned table view set (locking grid)
|
|
// Then only complete when both sides are complete.
|
|
if (lockingPartner && !lockingPartner.state.columnWidthsSynced) {
|
|
me.done = false;
|
|
} else {
|
|
me.callParent(arguments);
|
|
}
|
|
|
|
} else {
|
|
me.done = false;
|
|
}
|
|
},
|
|
|
|
measureContentHeight: function(ownerContext) {
|
|
var lockingPartner = ownerContext.lockingPartner;
|
|
|
|
// Only able to produce a valid contentHeight if there's no table
|
|
// ... or we have flushed all column widths to the table (or both tables if we are a pair)
|
|
if (!ownerContext.bodyContext || (ownerContext.state.columnWidthsSynced && (!lockingPartner || lockingPartner.state.columnWidthsSynced))) {
|
|
return this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
setColumnWidths: function(ownerContext) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
context = ownerContext.context,
|
|
columns = me.headerCt.getVisibleGridColumns(),
|
|
column,
|
|
i = 0, len = columns.length,
|
|
tableWidth = 0,
|
|
columnLineWidth = 0,
|
|
childContext,
|
|
colWidth,
|
|
isContentBox = !Ext.isBorderBox;
|
|
|
|
// So that the setProp can trigger this layout.
|
|
if (context) {
|
|
context.currentLayout = me;
|
|
}
|
|
|
|
// Set column width corresponding to each header
|
|
for (i = 0; i < len; i++) {
|
|
column = columns[i];
|
|
childContext = context.getCmp(column);
|
|
colWidth = childContext.props.width;
|
|
if (isNaN(colWidth)) {
|
|
// We don't have a width set, so we need to trigger when this child
|
|
// actually gets a width assigned so we can continue. Technically this
|
|
// shouldn't happen however we have a bug inside ColumnLayout where
|
|
// columnWidthsDone is set incorrectly. This is just a workaround.
|
|
childContext.getProp('width');
|
|
return false;
|
|
}
|
|
tableWidth += colWidth;
|
|
// https://sencha.jira.com/browse/EXTJSIV-9263 - Browsers which cannot be switched to border box when doctype present (IE6 & IE7) - must subtract borders width from width of cells.
|
|
if (isContentBox && owner.columnLines) {
|
|
// https://sencha.jira.com/browse/EXTJSIV-9744 - default border width to 1 because
|
|
// We are looking at the *header* border widths and Neptune, being a borderless theme
|
|
// omits the border from the last column *HEADER*. But we are interrogating that to
|
|
// know the width of border lines between cells which are not omitted.
|
|
if (!columnLineWidth) {
|
|
columnLineWidth = context.getCmp(column).borderInfo.width || 1;
|
|
}
|
|
colWidth -= columnLineWidth;
|
|
}
|
|
|
|
// Select column sizing <col> elements within every <table> within the grid.
|
|
// 90% of the time, there will be only one table.
|
|
// The RowWrap and Summary Features embed tables within colspanning cells, and these also
|
|
// get <colgroup><col></colgroup> sizers which need updating.
|
|
// On IE8, sizing <col> elements to control column width was about 2.25 times
|
|
// faster than selecting all the cells in the column to be resized.
|
|
// Column sizing using dynamic CSS rules is *extremely* expensive on IE.
|
|
owner.body.select(owner.getColumnSizerSelector(column)).setWidth(colWidth);
|
|
|
|
}
|
|
// Set widths of all tables (includes tables embedded in RowWrap and Summary rows)
|
|
owner.el.select(owner.getBodySelector()).setWidth(tableWidth);
|
|
return true;
|
|
},
|
|
|
|
finishedLayout: function() {
|
|
var me = this,
|
|
owner = me.owner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (Ext.isWebKit) {
|
|
owner.el.select(owner.getBodySelector()).setStyle('table-layout', '');
|
|
}
|
|
// Make sure only one side gets to do the sync on completion - it's an expensive process.
|
|
// Only do it if the syncRowHeightConfig hasn't been set to false.
|
|
if (owner.refreshCounter && me.lockedGrid && me.lockedGrid.syncRowHeight && me.lockedGrid.needsRowHeightSync) {
|
|
me.lockedGrid.syncRowHeights();
|
|
me.lockedGrid.needsRowHeightSync = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* A cache of View elements keyed using the index of the associated record in the store.
|
|
*
|
|
* This implements the methods of {Ext.dom.CompositeElement} which are used by {@link Ext.view.AbstractView}
|
|
* to privide a map of record nodes and methods to manipulate the nodes.
|
|
*/
|
|
Ext.define('Ext.view.NodeCache', {
|
|
constructor: function(view) {
|
|
this.view = view;
|
|
this.clear();
|
|
this.el = new Ext.dom.AbstractElement.Fly();
|
|
},
|
|
|
|
/**
|
|
* Removes all elements from this NodeCache.
|
|
* @param {Boolean} [removeDom] True to also remove the elements from the document.
|
|
*/
|
|
clear: function(removeDom) {
|
|
var me = this,
|
|
elements = this.elements,
|
|
i, el;
|
|
|
|
if (removeDom) {
|
|
for (i in elements) {
|
|
el = elements[i];
|
|
el.parentNode.removeChild(el);
|
|
}
|
|
}
|
|
me.elements = {};
|
|
me.count = me.startIndex = 0;
|
|
me.endIndex = -1;
|
|
},
|
|
|
|
/**
|
|
* Clears this NodeCache and adds the elements passed.
|
|
* @param {HTMLElement[]} els An array of DOM elements from which to fill this NodeCache.
|
|
* @return {Ext.view.NodeCache} this
|
|
*/
|
|
fill: function(newElements, startIndex) {
|
|
var me = this,
|
|
elements = me.elements = {},
|
|
i,
|
|
len = newElements.length;
|
|
|
|
if (!startIndex) {
|
|
startIndex = 0;
|
|
}
|
|
for (i = 0; i < len; i++) {
|
|
elements[startIndex + i] = newElements[i];
|
|
}
|
|
me.startIndex = startIndex;
|
|
me.endIndex = startIndex + len - 1;
|
|
me.count = len;
|
|
return this;
|
|
},
|
|
|
|
insert: function(insertPoint, nodes) {
|
|
var me = this,
|
|
elements = me.elements,
|
|
i,
|
|
nodeCount = nodes.length;
|
|
|
|
// If not inserting into empty cache, validate, and possibly shuffle.
|
|
if (me.count) {
|
|
|
|
// Move following nodes forwards by <nodeCount> positions
|
|
if (insertPoint < me.count) {
|
|
for (i = me.endIndex + nodeCount; i >= insertPoint + nodeCount; i--) {
|
|
elements[i] = elements[i - nodeCount];
|
|
elements[i].setAttribute('data-recordIndex', i);
|
|
}
|
|
}
|
|
me.endIndex = me.endIndex + nodeCount;
|
|
}
|
|
// Empty cache. set up counters
|
|
else {
|
|
me.startIndex = insertPoint;
|
|
me.endIndex = insertPoint + nodeCount - 1;
|
|
}
|
|
|
|
// Insert new nodes into place
|
|
for (i = 0; i < nodeCount; i++, insertPoint++) {
|
|
elements[insertPoint] = nodes[i];
|
|
elements[insertPoint].setAttribute('data-recordIndex', insertPoint);
|
|
}
|
|
me.count += nodeCount;
|
|
},
|
|
|
|
item: function(index, asDom) {
|
|
var el = this.elements[index],
|
|
result = null;
|
|
|
|
if (el) {
|
|
result = asDom ? this.elements[index] : this.el.attach(this.elements[index]);
|
|
}
|
|
return result;
|
|
},
|
|
|
|
first: function(asDom) {
|
|
return this.item(this.startIndex, asDom);
|
|
},
|
|
|
|
last: function(asDom) {
|
|
return this.item(this.endIndex, asDom);
|
|
},
|
|
|
|
getCount : function() {
|
|
return this.count;
|
|
},
|
|
|
|
slice: function(start, end) {
|
|
var elements = this.elements,
|
|
result = [],
|
|
i;
|
|
|
|
if (arguments.length < 2) {
|
|
end = this.endIndex;
|
|
} else {
|
|
end = Math.min(this.endIndex, end - 1);
|
|
}
|
|
for (i = start||this.startIndex; i <= end; i++) {
|
|
result.push(elements[i]);
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Replaces the specified element with the passed element.
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
|
|
* element in this composite to replace.
|
|
* @param {String/Ext.Element} replacement The id of an element or the Element itself.
|
|
* @param {Boolean} [domReplace] True to remove and replace the element in the document too.
|
|
*/
|
|
replaceElement: function(el, replacement, domReplace) {
|
|
var elements = this.elements,
|
|
index = (typeof el === 'number') ? el : this.indexOf(el);
|
|
|
|
if (index > -1) {
|
|
replacement = Ext.getDom(replacement);
|
|
if (domReplace) {
|
|
el = elements[index];
|
|
el.parentNode.insertBefore(replacement, el);
|
|
Ext.removeNode(el);
|
|
replacement.setAttribute('data-recordIndex', index);
|
|
}
|
|
this.elements[index] = replacement;
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Find the index of the passed element within the composite collection.
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, or an Ext.dom.Element, or an HtmlElement
|
|
* to find within the composite collection.
|
|
* @return {Number} The index of the passed Ext.dom.Element in the composite collection, or -1 if not found.
|
|
*/
|
|
indexOf: function(el) {
|
|
var elements = this.elements,
|
|
index;
|
|
|
|
el = Ext.getDom(el);
|
|
for (index = this.startIndex; index <= this.endIndex; index++) {
|
|
if (elements[index] === el) {
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
},
|
|
|
|
removeRange: function(start, end, removeDom) {
|
|
var me = this,
|
|
elements = me.elements,
|
|
el,
|
|
i, removeCount, fromPos;
|
|
|
|
if (end === undefined) {
|
|
end = me.count;
|
|
} else {
|
|
end = Math.min(me.endIndex + 1, end + 1);
|
|
}
|
|
if (!start) {
|
|
start = 0;
|
|
}
|
|
removeCount = end - start;
|
|
for (i = start, fromPos = end; i < me.endIndex; i++, fromPos++) {
|
|
// Within removal range and we are removing from DOM
|
|
if (removeDom && i < end) {
|
|
Ext.removeNode(elements[i]);
|
|
}
|
|
// If the from position is occupied, shuffle that entry back into reference "i"
|
|
if (fromPos <= me.endIndex) {
|
|
el = elements[i] = elements[fromPos];
|
|
el.setAttribute('data-recordIndex', i);
|
|
}
|
|
// The from position has walked off the end, so delete reference "i"
|
|
else {
|
|
delete elements[i];
|
|
}
|
|
}
|
|
me.count -= removeCount;
|
|
me.endIndex -= removeCount;
|
|
},
|
|
|
|
/**
|
|
* Removes the specified element(s).
|
|
* @param {String/HTMLElement/Ext.Element/Number} el The id of an element, the Element itself, the index of the
|
|
* element in this composite or an array of any of those.
|
|
* @param {Boolean} [removeDom] True to also remove the element from the document
|
|
*/
|
|
removeElement: function(keys, removeDom) {
|
|
var me = this,
|
|
inKeys,
|
|
key,
|
|
elements = me.elements,
|
|
el,
|
|
deleteCount,
|
|
keyIndex = 0, index,
|
|
fromIndex;
|
|
|
|
// Sort the keys into ascending order so that we can iterate through the elements
|
|
// collection, and delete items encountered in the keys array as we encounter them.
|
|
if (Ext.isArray(keys)) {
|
|
inKeys = keys;
|
|
keys = [];
|
|
deleteCount = inKeys.length;
|
|
for (keyIndex = 0; keyIndex < deleteCount; keyIndex++) {
|
|
key = inKeys[keyIndex];
|
|
if (typeof key !== 'number') {
|
|
key = me.indexOf(key);
|
|
}
|
|
// Could be asked to remove data above the start, or below the end of rendered zone in a buffer rendered view
|
|
// So only collect keys which are within our range
|
|
if (key >= me.startIndex && key <= me.endIndex) {
|
|
keys[keys.length] = key;
|
|
}
|
|
}
|
|
Ext.Array.sort(keys);
|
|
deleteCount = keys.length;
|
|
} else {
|
|
// Could be asked to remove data above the start, or below the end of rendered zone in a buffer rendered view
|
|
if (keys < me.startIndex || keys > me.endIndex) {
|
|
return;
|
|
}
|
|
deleteCount = 1;
|
|
keys = [keys];
|
|
}
|
|
|
|
// Iterate through elements starting at the element referenced by the first deletion key.
|
|
// We also start off and index zero in the keys to delete array.
|
|
for (index = fromIndex = keys[0], keyIndex = 0; index <= me.endIndex; index++, fromIndex++) {
|
|
|
|
// If the current index matches the next key in the delete keys array, this
|
|
// entry is being deleted, so increment the fromIndex to skip it.
|
|
// Advance to next entry in keys array.
|
|
if (keyIndex < deleteCount && index === keys[keyIndex]) {
|
|
fromIndex++;
|
|
keyIndex++;
|
|
if (removeDom) {
|
|
Ext.removeNode(elements[index]);
|
|
}
|
|
}
|
|
|
|
// Shuffle entries forward of the delete range back into contiguity.
|
|
if (fromIndex <= me.endIndex && fromIndex >= me.startIndex) {
|
|
el = elements[index] = elements[fromIndex];
|
|
el.setAttribute('data-recordIndex', index);
|
|
} else {
|
|
delete elements[index];
|
|
}
|
|
}
|
|
me.endIndex -= deleteCount;
|
|
me.count -= deleteCount;
|
|
},
|
|
|
|
/**
|
|
* Appends/prepends records depending on direction flag
|
|
* @param {Ext.data.Model[]} newRecords Items to append/prepend
|
|
* @param {Number} direction `-1' = scroll up, `0` = scroll down.
|
|
* @param {Number} removeCount The number of records to remove from the end. if scrolling
|
|
* down, rows are removed from the top and the new rows are added at the bottom.
|
|
*/
|
|
scroll: function(newRecords, direction, removeCount) {
|
|
var me = this,
|
|
elements = me.elements,
|
|
recCount = newRecords.length,
|
|
i, el, removeEnd,
|
|
newNodes,
|
|
nodeContainer = me.view.getNodeContainer(),
|
|
frag = document.createDocumentFragment();
|
|
|
|
// Scrolling up (content moved down - new content needed at top, remove from bottom)
|
|
if (direction == -1) {
|
|
for (i = (me.endIndex - removeCount) + 1; i <= me.endIndex; i++) {
|
|
el = elements[i];
|
|
delete elements[i];
|
|
el.parentNode.removeChild(el);
|
|
}
|
|
me.endIndex -= removeCount;
|
|
|
|
// grab all nodes rendered, not just the data rows
|
|
newNodes = me.view.bufferRender(newRecords, me.startIndex -= recCount);
|
|
for (i = 0; i < recCount; i++) {
|
|
elements[me.startIndex + i] = newNodes[i];
|
|
frag.appendChild(newNodes[i]);
|
|
}
|
|
nodeContainer.insertBefore(frag, nodeContainer.firstChild);
|
|
}
|
|
|
|
// Scrolling down (content moved up - new content needed at bottom, remove from top)
|
|
else {
|
|
removeEnd = me.startIndex + removeCount;
|
|
for (i = me.startIndex; i < removeEnd; i++) {
|
|
el = elements[i];
|
|
delete elements[i];
|
|
el.parentNode.removeChild(el);
|
|
}
|
|
me.startIndex = i;
|
|
|
|
// grab all nodes rendered, not just the data rows
|
|
newNodes = me.view.bufferRender(newRecords, me.endIndex + 1);
|
|
for (i = 0; i < recCount; i++) {
|
|
elements[me.endIndex += 1] = newNodes[i];
|
|
frag.appendChild(newNodes[i]);
|
|
}
|
|
nodeContainer.appendChild(frag);
|
|
}
|
|
// Keep count consistent.
|
|
me.count = me.endIndex - me.startIndex + 1;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* This class does not provide ways to manipulate the underlying data of the configured
|
|
* {@link Ext.data.Store}.
|
|
*
|
|
* This is the base class for both {@link Ext.grid.View} and {@link Ext.tree.View} and is not
|
|
* to be used directly.
|
|
*/
|
|
Ext.define('Ext.view.Table', {
|
|
extend: Ext.view.View ,
|
|
alias: 'widget.tableview',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentLayout: 'tableview',
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'grid-view',
|
|
|
|
/**
|
|
* @cfg {String} [firstCls='x-grid-cell-first']
|
|
* A CSS class to add to the *first* cell in every row to enable special styling for the first column.
|
|
* If no styling is needed on the first column, this may be configured as `null`.
|
|
*/
|
|
firstCls: Ext.baseCSSPrefix + 'grid-cell-first',
|
|
|
|
/**
|
|
* @cfg {String} [lastCls='x-grid-cell-last']
|
|
* A CSS class to add to the *last* cell in every row to enable special styling for the last column.
|
|
* If no styling is needed on the last column, this may be configured as `null`.
|
|
*/
|
|
lastCls: Ext.baseCSSPrefix + 'grid-cell-last',
|
|
|
|
headerRowSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-header-row',
|
|
|
|
selectedItemCls: Ext.baseCSSPrefix + 'grid-row-selected',
|
|
beforeSelectedItemCls: Ext.baseCSSPrefix + 'grid-row-before-selected',
|
|
selectedCellCls: Ext.baseCSSPrefix + 'grid-cell-selected',
|
|
focusedItemCls: Ext.baseCSSPrefix + 'grid-row-focused',
|
|
beforeFocusedItemCls: Ext.baseCSSPrefix + 'grid-row-before-focused',
|
|
tableFocusedFirstCls: Ext.baseCSSPrefix + 'grid-table-focused-first',
|
|
tableSelectedFirstCls: Ext.baseCSSPrefix + 'grid-table-selected-first',
|
|
tableOverFirstCls: Ext.baseCSSPrefix + 'grid-table-over-first',
|
|
overItemCls: Ext.baseCSSPrefix + 'grid-row-over',
|
|
beforeOverItemCls: Ext.baseCSSPrefix + 'grid-row-before-over',
|
|
altRowCls: Ext.baseCSSPrefix + 'grid-row-alt',
|
|
dirtyCls: Ext.baseCSSPrefix + 'grid-dirty-cell',
|
|
rowClsRe: new RegExp('(?:^|\\s*)' + Ext.baseCSSPrefix + 'grid-row-(first|last|alt)(?:\\s+|$)', 'g'),
|
|
cellRe: new RegExp(Ext.baseCSSPrefix + 'grid-cell-([^\\s]+) ', ''),
|
|
positionBody: true,
|
|
|
|
// cfg docs inherited
|
|
trackOver: true,
|
|
|
|
/**
|
|
* Override this function to apply custom CSS classes to rows during rendering. This function should return the
|
|
* CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple
|
|
* class names, simply return them space-delimited within the string (e.g. 'my-class another-class').
|
|
* Example usage:
|
|
*
|
|
* viewConfig: {
|
|
* getRowClass: function(record, rowIndex, rowParams, store){
|
|
* return record.get("valid") ? "row-valid" : "row-error";
|
|
* }
|
|
* }
|
|
*
|
|
* @param {Ext.data.Model} record The record corresponding to the current row.
|
|
* @param {Number} index The row index.
|
|
* @param {Object} rowParams **DEPRECATED.** For row body use the
|
|
* {@link Ext.grid.feature.RowBody#getAdditionalData getAdditionalData} method of the rowbody feature.
|
|
* @param {Ext.data.Store} store The store this grid is bound to
|
|
* @return {String} a CSS class name to add to the row.
|
|
* @method
|
|
*/
|
|
getRowClass: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} stripeRows
|
|
* True to stripe the rows.
|
|
*
|
|
* This causes the CSS class **`x-grid-row-alt`** to be added to alternate rows of
|
|
* the grid. A default CSS rule is provided which sets a background color, but you can override this
|
|
* with a rule which either overrides the **background-color** style using the `!important`
|
|
* modifier, or which uses a CSS selector of higher specificity.
|
|
*/
|
|
stripeRows: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} markDirty
|
|
* True to show the dirty cell indicator when a cell has been modified.
|
|
*/
|
|
markDirty : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableTextSelection
|
|
* True to enable text selections.
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* Simple initial tpl for TableView just to satisfy the validation within AbstractView.initComponent.
|
|
*/
|
|
tpl: '{%values.view.tableTpl.applyOut(values, out)%}',
|
|
|
|
tableTpl: [
|
|
'{%',
|
|
// Add the row/column line classes to the table element.
|
|
'var view=values.view,tableCls=["' + Ext.baseCSSPrefix + '" + view.id + "-table ' + Ext.baseCSSPrefix + 'grid-table"];',
|
|
'if (view.columnLines) tableCls[tableCls.length]=view.ownerCt.colLinesCls;',
|
|
'if (view.rowLines) tableCls[tableCls.length]=view.ownerCt.rowLinesCls;',
|
|
'%}',
|
|
'<table role="presentation" id="{view.id}-table" class="{[tableCls.join(" ")]}" border="0" cellspacing="0" cellpadding="0" style="{tableStyle}" tabIndex="-1">',
|
|
'{[view.renderColumnSizer(out)]}',
|
|
'{[view.renderTHead(values, out)]}',
|
|
'{[view.renderTFoot(values, out)]}',
|
|
'<tbody id="{view.id}-body">',
|
|
'{%',
|
|
'view.renderRows(values.rows, values.viewStartIndex, out);',
|
|
'%}',
|
|
'</tbody>',
|
|
'</table>',
|
|
{
|
|
priority: 0
|
|
}
|
|
],
|
|
|
|
rowTpl: [
|
|
'{%',
|
|
'var dataRowCls = values.recordIndex === -1 ? "" : " ' + Ext.baseCSSPrefix + 'grid-data-row";',
|
|
'%}',
|
|
'<tr role="row" {[values.rowId ? ("id=\\"" + values.rowId + "\\"") : ""]} ',
|
|
'data-boundView="{view.id}" ',
|
|
'data-recordId="{record.internalId}" ',
|
|
'data-recordIndex="{recordIndex}" ',
|
|
'class="{[values.itemClasses.join(" ")]} {[values.rowClasses.join(" ")]}{[dataRowCls]}" ',
|
|
'{rowAttr:attributes} tabIndex="-1">',
|
|
'<tpl for="columns">' +
|
|
'{%',
|
|
'parent.view.renderCell(values, parent.record, parent.recordIndex, xindex - 1, out, parent)',
|
|
'%}',
|
|
'</tpl>',
|
|
'</tr>',
|
|
{
|
|
priority: 0
|
|
}
|
|
],
|
|
|
|
cellTpl: [
|
|
'<td role="gridcell" class="{tdCls}" {tdAttr} id="{[Ext.id()]}">',
|
|
'<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner {innerCls}"',
|
|
'style="text-align:{align};<tpl if="style">{style}</tpl>">{value}</div>',
|
|
'</td>', {
|
|
priority: 0
|
|
}
|
|
],
|
|
|
|
/**
|
|
* @private
|
|
* Flag to disable refreshing SelectionModel on view refresh. Table views render rows with selected CSS class already added if necessary.
|
|
*/
|
|
refreshSelmodelOnRefresh: false,
|
|
|
|
tableValues: {},
|
|
|
|
// Private properties used during the row and cell render process.
|
|
// They are allocated here on the prototype, and cleared/re-used to avoid GC churn during repeated rendering.
|
|
rowValues: {
|
|
itemClasses: [],
|
|
rowClasses: []
|
|
},
|
|
cellValues: {
|
|
classes: [
|
|
Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-td' // for styles shared between cell and rowwrap
|
|
]
|
|
},
|
|
|
|
/// Private used for buffered rendering
|
|
renderBuffer: document.createElement('div'),
|
|
|
|
constructor: function(config) {
|
|
// Adjust our base class if we are inside a TreePanel
|
|
if (config.grid.isTree) {
|
|
config.baseCls = Ext.baseCSSPrefix + 'tree-view';
|
|
}
|
|
this.callParent([config]);
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
scroll = me.scroll;
|
|
|
|
this.addEvents(
|
|
/**
|
|
* @event beforecellclick
|
|
* Fired before the cell click is processed. Return false to cancel the default action.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'beforecellclick',
|
|
/**
|
|
* @event cellclick
|
|
* Fired when table cell is clicked.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'cellclick',
|
|
/**
|
|
* @event beforecelldblclick
|
|
* Fired before the cell double click is processed. Return false to cancel the default action.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'beforecelldblclick',
|
|
/**
|
|
* @event celldblclick
|
|
* Fired when table cell is double clicked.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'celldblclick',
|
|
/**
|
|
* @event beforecellcontextmenu
|
|
* Fired before the cell right click is processed. Return false to cancel the default action.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'beforecellcontextmenu',
|
|
/**
|
|
* @event cellcontextmenu
|
|
* Fired when table cell is right clicked.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'cellcontextmenu',
|
|
/**
|
|
* @event beforecellmousedown
|
|
* Fired before the cell mouse down is processed. Return false to cancel the default action.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'beforecellmousedown',
|
|
/**
|
|
* @event cellmousedown
|
|
* Fired when the mousedown event is captured on the cell.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'cellmousedown',
|
|
/**
|
|
* @event beforecellmouseup
|
|
* Fired before the cell mouse up is processed. Return false to cancel the default action.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'beforecellmouseup',
|
|
/**
|
|
* @event cellmouseup
|
|
* Fired when the mouseup event is captured on the cell.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'cellmouseup',
|
|
/**
|
|
* @event beforecellkeydown
|
|
* Fired before the cell key down is processed. Return false to cancel the default action.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'beforecellkeydown',
|
|
/**
|
|
* @event cellkeydown
|
|
* Fired when the keydown event is captured on the cell.
|
|
* @param {Ext.view.Table} this
|
|
* @param {HTMLElement} td The TD element for the cell.
|
|
* @param {Number} cellIndex
|
|
* @param {Ext.data.Model} record
|
|
* @param {HTMLElement} tr The TR element for the cell.
|
|
* @param {Number} rowIndex
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
'cellkeydown'
|
|
);
|
|
|
|
/**
|
|
* @private
|
|
* @property {Ext.dom.AbstractElement.Fly} body
|
|
* A flyweight Ext.Element which encapsulates a reference to the view's main row containing element.
|
|
* *Note that the `dom` reference will not be present until the first data refresh*
|
|
*/
|
|
me.body = new Ext.dom.Element.Fly();
|
|
me.body.id = me.id + 'gridBody';
|
|
|
|
// Scrolling within a TableView is controlled by the scroll config of its owning GridPanel
|
|
// It must see undefined in this property in order to leave the scroll styles alone at afterRender time
|
|
me.autoScroll = undefined;
|
|
|
|
// If trackOver has been turned off, null out the overCls because documented behaviour
|
|
// in AbstractView is to turn trackOver on if overItemCls is set.
|
|
if (!me.trackOver) {
|
|
me.overItemCls = null;
|
|
me.beforeOverItemCls = null;
|
|
}
|
|
|
|
// Convert grid scroll config to standard Component scrolling configurations.
|
|
if (scroll === true || scroll === 'both') {
|
|
me.autoScroll = true;
|
|
} else if (scroll === 'horizontal') {
|
|
me.overflowX = 'auto';
|
|
} else if (scroll === 'vertical') {
|
|
me.overflowY = 'auto';
|
|
}
|
|
me.selModel.view = me;
|
|
me.headerCt.view = me;
|
|
|
|
// Features need a reference to the grid.
|
|
// Grid needs an immediate reference to its view so that the view cabn reliably be got from the grid during initialization
|
|
me.grid.view = me;
|
|
me.initFeatures(me.grid);
|
|
delete me.grid;
|
|
|
|
// The real tpl is generated, but AbstractView.initComponent insists upon the presence of a fully instantiated XTemplate at construction time.
|
|
me.tpl = me.getTpl('tpl');
|
|
me.itemSelector = me.getItemSelector();
|
|
me.all = new Ext.view.NodeCache(me);
|
|
me.callParent();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Move a grid column from one position to another
|
|
* @param {Number} fromIdx The index from which to move columns
|
|
* @param {Number} toIdx The index at which to insert columns.
|
|
* @param {Number} [colsToMove=1] The number of columns to move beginning at the `fromIdx`
|
|
*/
|
|
moveColumn: function(fromIdx, toIdx, colsToMove) {
|
|
var me = this,
|
|
fragment = (colsToMove > 1) ? document.createDocumentFragment() : undefined,
|
|
destinationCellIdx = toIdx,
|
|
colCount = me.getGridColumns().length,
|
|
lastIndex = colCount - 1,
|
|
doFirstLastClasses = (me.firstCls || me.lastCls) && (toIdx === 0 || toIdx == colCount || fromIdx === 0 || fromIdx == lastIndex),
|
|
i,
|
|
j,
|
|
rows, len, tr, cells,
|
|
tables;
|
|
|
|
// Dragging between locked and unlocked side first refreshes the view, and calls onHeaderMoved with
|
|
// fromIndex and toIndex the same.
|
|
if (me.rendered && toIdx !== fromIdx) {
|
|
// Grab all rows which have column cells in.
|
|
// That is data rows and column sizing rows.
|
|
rows = me.el.query(me.getDataRowSelector());
|
|
|
|
if (toIdx > fromIdx && fragment) {
|
|
destinationCellIdx -= colsToMove;
|
|
}
|
|
|
|
for (i = 0, len = rows.length; i < len; i++) {
|
|
tr = rows[i];
|
|
cells = tr.childNodes;
|
|
|
|
// Keep first cell class and last cell class correct *only if needed*
|
|
if (doFirstLastClasses) {
|
|
|
|
if (cells.length === 1) {
|
|
Ext.fly(cells[0]).addCls(me.firstCls);
|
|
Ext.fly(cells[0]).addCls(me.lastCls);
|
|
continue;
|
|
}
|
|
if (fromIdx === 0) {
|
|
Ext.fly(cells[0]).removeCls(me.firstCls);
|
|
Ext.fly(cells[1]).addCls(me.firstCls);
|
|
} else if (fromIdx === lastIndex) {
|
|
Ext.fly(cells[lastIndex]).removeCls(me.lastCls);
|
|
Ext.fly(cells[lastIndex - 1]).addCls(me.lastCls);
|
|
}
|
|
if (toIdx === 0) {
|
|
Ext.fly(cells[0]).removeCls(me.firstCls);
|
|
Ext.fly(cells[fromIdx]).addCls(me.firstCls);
|
|
} else if (toIdx === colCount) {
|
|
Ext.fly(cells[lastIndex]).removeCls(me.lastCls);
|
|
Ext.fly(cells[fromIdx]).addCls(me.lastCls);
|
|
}
|
|
}
|
|
|
|
if (fragment) {
|
|
for (j = 0; j < colsToMove; j++) {
|
|
fragment.appendChild(cells[fromIdx]);
|
|
}
|
|
tr.insertBefore(fragment, cells[destinationCellIdx] || null);
|
|
} else {
|
|
tr.insertBefore(cells[fromIdx], cells[destinationCellIdx] || null);
|
|
}
|
|
}
|
|
|
|
// Shuffle the <colgroup> elements at the ta=op of all <tables> in the grid
|
|
tables = me.el.query(me.getBodySelector());
|
|
for (i = 0, len = tables.length; i < len; i++) {
|
|
tr = tables[i];
|
|
if (fragment) {
|
|
for (j = 0; j < colsToMove; j++) {
|
|
fragment.appendChild(tr.childNodes[fromIdx]);
|
|
}
|
|
tr.insertBefore(fragment, tr.childNodes[destinationCellIdx] || null);
|
|
} else {
|
|
tr.insertBefore(tr.childNodes[fromIdx], tr.childNodes[destinationCellIdx] || null);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 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
|
|
*/
|
|
addElListener: function(eventName, fn, scope){
|
|
this.mon(this, eventName, fn, scope, {
|
|
element: 'el'
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Get the leaf columns used for rendering the grid rows.
|
|
* @private
|
|
*/
|
|
getGridColumns: function() {
|
|
return this.ownerCt.columnManager.getColumns();
|
|
},
|
|
|
|
/**
|
|
* Get a leaf level header by index regardless of what the nesting
|
|
* structure is.
|
|
* @private
|
|
* @param {Number} index The index
|
|
*/
|
|
getHeaderAtIndex: function(index) {
|
|
return this.ownerCt.columnManager.getHeaderAtIndex(index);
|
|
},
|
|
|
|
/**
|
|
* Get the cell (td) for a particular record and column.
|
|
* @param {Ext.data.Model} record
|
|
* @param {Ext.grid.column.Column} column
|
|
* @private
|
|
*/
|
|
getCell: function(record, column) {
|
|
var row = this.getNode(record, true);
|
|
return Ext.fly(row).down(column.getCellSelector());
|
|
},
|
|
|
|
/**
|
|
* Get a reference to a feature
|
|
* @param {String} id The id of the feature
|
|
* @return {Ext.grid.feature.Feature} The feature. Undefined if not found
|
|
*/
|
|
getFeature: function(id) {
|
|
var features = this.featuresMC;
|
|
if (features) {
|
|
return features.get(id);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// Finds a features by ftype in the features array
|
|
findFeature: function(ftype) {
|
|
if (this.features) {
|
|
return Ext.Array.findBy(this.features, function(feature) {
|
|
if (feature.ftype === ftype) {
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initializes each feature and bind it to this view.
|
|
* @private
|
|
*/
|
|
initFeatures: function(grid) {
|
|
var me = this,
|
|
i,
|
|
features,
|
|
feature,
|
|
len;
|
|
|
|
me.tableTpl = Ext.XTemplate.getTpl(this, 'tableTpl');
|
|
me.rowTpl = Ext.XTemplate.getTpl(this, 'rowTpl');
|
|
me.cellTpl = Ext.XTemplate.getTpl(this, 'cellTpl');
|
|
|
|
me.featuresMC = new Ext.util.MixedCollection();
|
|
features = me.features = me.constructFeatures();
|
|
len = features ? features.length : 0;
|
|
for (i = 0; i < len; i++) {
|
|
feature = features[i];
|
|
|
|
// inject a reference to view and grid - Features need both
|
|
feature.view = me;
|
|
feature.grid = grid;
|
|
me.featuresMC.add(feature);
|
|
feature.init(grid);
|
|
}
|
|
},
|
|
|
|
renderTHead: function(values, out) {
|
|
var headers = values.view.headerFns,
|
|
len, i;
|
|
|
|
if (headers) {
|
|
for (i = 0, len = headers.length; i < len; ++i) {
|
|
headers[i].call(this, values, out);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Currently, we don't have ordering support for header/footer functions,
|
|
// they will be pushed on at construction time. If the need does arise,
|
|
// we can add this functionality in the future, but for now it's not
|
|
// really necessary since currently only the summary feature uses this.
|
|
addHeaderFn: function(){
|
|
var headers = this.headerFns;
|
|
if (!headers) {
|
|
headers = this.headerFns = [];
|
|
}
|
|
headers.push(fn);
|
|
},
|
|
|
|
renderTFoot: function(values, out){
|
|
var footers = values.view.footerFns,
|
|
len, i;
|
|
|
|
if (footers) {
|
|
for (i = 0, len = footers.length; i < len; ++i) {
|
|
footers[i].call(this, values, out);
|
|
}
|
|
}
|
|
},
|
|
|
|
addFooterFn: function(fn){
|
|
var footers = this.footerFns;
|
|
if (!footers) {
|
|
footers = this.footerFns = [];
|
|
}
|
|
footers.push(fn);
|
|
},
|
|
|
|
addTableTpl: function(newTpl) {
|
|
return this.addTpl('tableTpl', newTpl);
|
|
},
|
|
|
|
addRowTpl: function(newTpl) {
|
|
return this.addTpl('rowTpl', newTpl);
|
|
},
|
|
|
|
addCellTpl: function(newTpl) {
|
|
return this.addTpl('cellTpl', newTpl);
|
|
},
|
|
|
|
addTpl: function(which, newTpl) {
|
|
var me = this,
|
|
tpl,
|
|
prevTpl;
|
|
|
|
newTpl = Ext.Object.chain(newTpl);
|
|
|
|
// If we have been passed an object of the form
|
|
// {
|
|
// before: fn
|
|
// after: fn
|
|
// }
|
|
if (!newTpl.isTemplate) {
|
|
newTpl.applyOut = me.tplApplyOut;
|
|
}
|
|
|
|
// Stop at the first TPL who's priority is less than the passed rowTpl
|
|
for (tpl = me[which]; newTpl.priority < tpl.priority; tpl = tpl.nextTpl) {
|
|
prevTpl = tpl;
|
|
}
|
|
|
|
// If we had skipped over some, link the previous one to the passed rowTpl
|
|
if (prevTpl) {
|
|
prevTpl.nextTpl = newTpl;
|
|
}
|
|
// First one
|
|
else {
|
|
me[which] = newTpl;
|
|
}
|
|
newTpl.nextTpl = tpl;
|
|
return newTpl;
|
|
},
|
|
|
|
tplApplyOut: function(values, out) {
|
|
if (this.before) {
|
|
if (this.before(values, out) === false) {
|
|
return;
|
|
}
|
|
}
|
|
this.nextTpl.applyOut(values, out);
|
|
if (this.after) {
|
|
this.after(values, out);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Converts the features array as configured, into an array of instantiated Feature objects.
|
|
*
|
|
* Must have no side effects other than Feature instantiation.
|
|
*
|
|
* MUST NOT update the this.features property, and MUST NOT update the instantiated Features.
|
|
*/
|
|
constructFeatures: function() {
|
|
var me = this,
|
|
features = me.features,
|
|
feature,
|
|
result,
|
|
i = 0, len;
|
|
|
|
if (features) {
|
|
result = [];
|
|
len = features.length;
|
|
for (; i < len; i++) {
|
|
feature = features[i];
|
|
if (!feature.isFeature) {
|
|
feature = Ext.create('feature.' + feature.ftype, feature);
|
|
}
|
|
result[i] = feature;
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
|
|
if (!me.enableTextSelection) {
|
|
me.protoEl.unselectable();
|
|
}
|
|
},
|
|
|
|
// Private template method implemented starting at the AbstractView class.
|
|
onViewScroll: function(e, t) {
|
|
this.callParent(arguments);
|
|
this.fireEvent('bodyscroll', e, t);
|
|
},
|
|
|
|
// private
|
|
// Create the DOM element which enapsulates the passed record.
|
|
// Used when updating existing rows, so drills down into resulting structure .
|
|
createRowElement: function(record, index) {
|
|
var me = this,
|
|
div = me.renderBuffer;
|
|
|
|
me.tpl.overwrite(div, me.collectData([record], index));
|
|
// Return first element within node containing element
|
|
return Ext.fly(div).down(me.getNodeContainerSelector(), true).firstChild;
|
|
},
|
|
|
|
// private
|
|
// Override so that we can use a quicker way to access the row nodes.
|
|
// They are simply all child nodes of the TBODY element.
|
|
bufferRender: function(records, index) {
|
|
var me = this,
|
|
div = me.renderBuffer;
|
|
|
|
me.tpl.overwrite(div, me.collectData(records, index));
|
|
return Ext.Array.toArray(Ext.fly(div).down(me.getNodeContainerSelector(), true).childNodes);
|
|
},
|
|
|
|
collectData: function(records, startIndex) {
|
|
this.rowValues.view = this;
|
|
|
|
return {
|
|
view: this,
|
|
rows: records,
|
|
viewStartIndex: startIndex,
|
|
tableStyle: this.bufferedRenderer ? ('position:absolute;top:' + this.bufferedRenderer.bodyTop) : ''
|
|
};
|
|
},
|
|
|
|
// Overridden implementation.
|
|
// Called by refresh to collect the view item nodes.
|
|
// Note that these may be wrapping rows which *contain* rows which map to records
|
|
collectNodes: function(targetEl) {
|
|
this.all.fill(this.getNodeContainer().childNodes, this.all.startIndex);
|
|
},
|
|
|
|
// Private. Called when the table changes height.
|
|
// For example, see examples/grid/group-summary-grid.html
|
|
// If we have flexed column headers, we need to update the header layout
|
|
// because it may have to accommodate (or cease to accommodate) a vertical scrollbar.
|
|
// Only do this on platforms which have a space-consuming scrollbar.
|
|
// Only do it when vertical scrolling is enabled.
|
|
refreshSize: function() {
|
|
var me = this,
|
|
grid,
|
|
bodySelector = me.getBodySelector();
|
|
|
|
// On every update of the layout system due to data update, capture the view's main element in our private flyweight.
|
|
// IF there *is* a main element. Some TplFactories emit naked rows.
|
|
if (bodySelector) {
|
|
me.body.attach(me.el.child(bodySelector, true));
|
|
}
|
|
|
|
if (!me.hasLoadingHeight) {
|
|
grid = me.up('tablepanel');
|
|
|
|
// Suspend layouts in case the superclass requests a layout. We might too, so they
|
|
// must be coalescsed.
|
|
Ext.suspendLayouts();
|
|
|
|
me.callParent();
|
|
|
|
// Since columns and tables are not sized by generated CSS rules any more, EVERY table refresh
|
|
// has to be followed by a layout to ensure correct table and column sizing.
|
|
grid.updateLayout();
|
|
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
statics: {
|
|
getBoundView: function(node) {
|
|
return Ext.getCmp(node.getAttribute('data-boundView'));
|
|
}
|
|
},
|
|
|
|
getRecord: function(node) {
|
|
node = this.getNode(node);
|
|
if (node) {
|
|
var recordIndex = node.getAttribute('data-recordIndex');
|
|
if (recordIndex) {
|
|
recordIndex = parseInt(recordIndex, 10);
|
|
if (recordIndex > -1) {
|
|
// The index is the index in the original Store, not in a GroupStore
|
|
// The Grouping Feature increments the index to skip over unrendered records in collapsed groups
|
|
return this.store.data.getAt(recordIndex);
|
|
}
|
|
}
|
|
return this.dataSource.data.get(node.getAttribute('data-recordId'));
|
|
}
|
|
},
|
|
|
|
indexOf: function(node) {
|
|
node = this.getNode(node, false);
|
|
if (!node && node !== 0) {
|
|
return -1;
|
|
}
|
|
return this.all.indexOf(node);
|
|
},
|
|
|
|
indexInStore: function(node) {
|
|
node = this.getNode(node, true);
|
|
if (!node && node !== 0) {
|
|
return -1;
|
|
}
|
|
var recordIndex = node.getAttribute('data-recordIndex');
|
|
if (recordIndex) {
|
|
return parseInt(recordIndex, 10);
|
|
}
|
|
return this.dataSource.indexOf(this.getRecord(node));
|
|
},
|
|
|
|
renderRows: function(rows, viewStartIndex, out) {
|
|
var rowValues = this.rowValues,
|
|
rowCount = rows.length,
|
|
i;
|
|
|
|
rowValues.view = this;
|
|
rowValues.columns = this.ownerCt.columnManager.getColumns();
|
|
|
|
for (i = 0; i < rowCount; i++, viewStartIndex++) {
|
|
rowValues.itemClasses.length = rowValues.rowClasses.length = 0;
|
|
this.renderRow(rows[i], viewStartIndex, out);
|
|
}
|
|
|
|
// Dereference objects since rowValues is a persistent on our prototype
|
|
rowValues.view = rowValues.columns = rowValues.record = null;
|
|
},
|
|
|
|
/* Alternative column sizer element renderer.
|
|
renderTHeadColumnSizer: function(out) {
|
|
var columns = this.getGridColumns(),
|
|
len = columns.length, i,
|
|
column, width;
|
|
|
|
out.push('<thead><tr class="' + Ext.baseCSSPrefix + 'grid-header-row">');
|
|
for (i = 0; i < len; i++) {
|
|
column = columns[i];
|
|
width = column.hidden ? 0 : (column.lastBox ? column.lastBox.width : Ext.grid.header.Container.prototype.defaultWidth);
|
|
out.push('<th class="', Ext.baseCSSPrefix, 'grid-cell-', columns[i].getItemId(), '" style="width:' + width + 'px"></th>');
|
|
}
|
|
out.push('</tr></thead>');
|
|
},
|
|
*/
|
|
|
|
renderColumnSizer: function(out) {
|
|
var columns = this.getGridColumns(),
|
|
len = columns.length, i,
|
|
column, width;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
column = columns[i];
|
|
width = column.hidden ? 0 : (column.lastBox ? column.lastBox.width : Ext.grid.header.Container.prototype.defaultWidth);
|
|
out.push('<colgroup><col class="', Ext.baseCSSPrefix, 'grid-cell-', columns[i].getItemId(), '" style="width:' + width + 'px"></colgroup>');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Renders the HTML markup string for a single row into the passed array as a sequence of strings, or
|
|
* returns the HTML markup for a single row.
|
|
*
|
|
* @param {Ext.data.Model} record The record to render.
|
|
* @param {String[]} [out] A string array onto which to append the resulting HTML string. If omitted,
|
|
* the resulting HTML string is returned.
|
|
* @return {String} **only when the out parameter is omitted** The resulting HTML string.
|
|
*/
|
|
renderRow: function(record, rowIdx, out) {
|
|
var me = this,
|
|
isMetadataRecord = rowIdx === -1,
|
|
selModel = me.selModel,
|
|
rowValues = me.rowValues,
|
|
itemClasses = rowValues.itemClasses,
|
|
rowClasses = rowValues.rowClasses,
|
|
cls,
|
|
rowTpl = me.rowTpl;
|
|
|
|
// Set up mandatory properties on rowValues
|
|
rowValues.record = record;
|
|
rowValues.recordId = record.internalId;
|
|
rowValues.recordIndex = rowIdx;
|
|
rowValues.rowId = me.getRowId(record);
|
|
rowValues.itemCls = rowValues.rowCls = '';
|
|
if (!rowValues.columns) {
|
|
rowValues.columns = me.ownerCt.columnManager.getColumns();
|
|
}
|
|
|
|
itemClasses.length = rowClasses.length = 0;
|
|
|
|
// If it's a metadata record such as a summary record.
|
|
// So do not decorate it with the regular CSS.
|
|
// The Feature which renders it must know how to decorate it.
|
|
if (!isMetadataRecord) {
|
|
itemClasses[0] = Ext.baseCSSPrefix + "grid-row";
|
|
if (selModel && selModel.isRowSelected) {
|
|
if (selModel.isRowSelected(rowIdx + 1)) {
|
|
itemClasses.push(me.beforeSelectedItemCls);
|
|
}
|
|
if (selModel.isRowSelected(record)) {
|
|
itemClasses.push(me.selectedItemCls);
|
|
}
|
|
}
|
|
|
|
if (me.stripeRows && rowIdx % 2 !== 0) {
|
|
rowClasses.push(me.altRowCls);
|
|
}
|
|
|
|
if (me.getRowClass) {
|
|
cls = me.getRowClass(record, rowIdx, null, me.dataSource);
|
|
if (cls) {
|
|
rowClasses.push(cls);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (out) {
|
|
rowTpl.applyOut(rowValues, out);
|
|
} else {
|
|
return rowTpl.apply(rowValues);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Emits the HTML representing a single grid cell into the passed output stream (which is an array of strings).
|
|
*
|
|
* @param {Ext.grid.column.Column} column The column definition for which to render a cell.
|
|
* @param {Number} recordIndex The row index (zero based within the {@link #store}) for which to render the cell.
|
|
* @param {Number} columnIndex The column index (zero based) for which to render the cell.
|
|
* @param {String[]} out The output stream into which the HTML strings are appended.
|
|
*/
|
|
renderCell: function(column, record, recordIndex, columnIndex, out) {
|
|
var me = this,
|
|
selModel = me.selModel,
|
|
cellValues = me.cellValues,
|
|
classes = cellValues.classes,
|
|
fieldValue = record.data[column.dataIndex],
|
|
cellTpl = me.cellTpl,
|
|
value, clsInsertPoint;
|
|
|
|
cellValues.record = record;
|
|
cellValues.column = column;
|
|
cellValues.recordIndex = recordIndex;
|
|
cellValues.columnIndex = columnIndex;
|
|
cellValues.cellIndex = columnIndex;
|
|
cellValues.align = column.align;
|
|
cellValues.tdCls = column.tdCls;
|
|
cellValues.innerCls = column.innerCls;
|
|
cellValues.style = cellValues.tdAttr = "";
|
|
cellValues.unselectableAttr = me.enableTextSelection ? '' : 'unselectable="on"';
|
|
|
|
if (column.renderer && column.renderer.call) {
|
|
value = column.renderer.call(column.scope || me.ownerCt, fieldValue, cellValues, record, recordIndex, columnIndex, me.dataSource, me);
|
|
if (cellValues.css) {
|
|
// This warning attribute is used by the compat layer
|
|
// TODO: remove when compat layer becomes deprecated
|
|
record.cssWarning = true;
|
|
cellValues.tdCls += ' ' + cellValues.css;
|
|
delete cellValues.css;
|
|
}
|
|
} else {
|
|
value = fieldValue;
|
|
}
|
|
cellValues.value = (value == null || value === '') ? ' ' : value;
|
|
|
|
// Calculate classes to add to cell
|
|
classes[1] = Ext.baseCSSPrefix + 'grid-cell-' + column.getItemId();
|
|
|
|
// On IE8, array[len] = 'foo' is twice as fast as array.push('foo')
|
|
// So keep an insertion point and use assignment to help IE!
|
|
clsInsertPoint = 2;
|
|
|
|
if (column.tdCls) {
|
|
classes[clsInsertPoint++] = column.tdCls;
|
|
}
|
|
if (me.markDirty && record.isModified(column.dataIndex)) {
|
|
classes[clsInsertPoint++] = me.dirtyCls;
|
|
}
|
|
if (column.isFirstVisible) {
|
|
classes[clsInsertPoint++] = me.firstCls;
|
|
}
|
|
if (column.isLastVisible) {
|
|
classes[clsInsertPoint++] = me.lastCls;
|
|
}
|
|
if (!me.enableTextSelection) {
|
|
classes[clsInsertPoint++] = Ext.baseCSSPrefix + 'unselectable';
|
|
}
|
|
|
|
classes[clsInsertPoint++] = cellValues.tdCls;
|
|
if (selModel && selModel.isCellSelected && selModel.isCellSelected(me, recordIndex, columnIndex)) {
|
|
classes[clsInsertPoint++] = (me.selectedCellCls);
|
|
}
|
|
|
|
// Chop back array to only what we've set
|
|
classes.length = clsInsertPoint;
|
|
|
|
cellValues.tdCls = classes.join(' ');
|
|
|
|
cellTpl.applyOut(cellValues, out);
|
|
|
|
// Dereference objects since cellValues is a persistent var in the XTemplate's scope chain
|
|
cellValues.column = null;
|
|
},
|
|
|
|
/**
|
|
* Returns the node given the passed Record, or index or node.
|
|
* @param {HTMLElement/String/Number/Ext.data.Model} nodeInfo The node or record
|
|
* @param {Boolean} [dataRow] `true` to return the data row (not the top level row if wrapped), `false`
|
|
* to return the top level row.
|
|
* @return {HTMLElement} The node or null if it wasn't found
|
|
*/
|
|
getNode: function(nodeInfo, dataRow) {
|
|
var fly,
|
|
result = this.callParent(arguments);
|
|
|
|
if (result && result.tagName) {
|
|
if (dataRow) {
|
|
if (!(fly = Ext.fly(result)).is(this.dataRowSelector)) {
|
|
return fly.down(this.dataRowSelector, true);
|
|
}
|
|
} else if (dataRow === false) {
|
|
if (!(fly = Ext.fly(result)).is(this.itemSelector)) {
|
|
return fly.up(this.itemSelector, null, true);
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
getRowId: function(record){
|
|
return this.id + '-record-' + record.internalId;
|
|
},
|
|
|
|
constructRowId: function(internalId){
|
|
return this.id + '-record-' + internalId;
|
|
},
|
|
|
|
getNodeById: function(id, dataRow){
|
|
id = this.constructRowId(id);
|
|
return this.retrieveNode(id, dataRow);
|
|
},
|
|
|
|
getNodeByRecord: function(record, dataRow) {
|
|
var id = this.getRowId(record);
|
|
return this.retrieveNode(id, dataRow);
|
|
},
|
|
|
|
retrieveNode: function(id, dataRow){
|
|
var result = this.el.getById(id, true),
|
|
itemSelector = this.itemSelector,
|
|
fly;
|
|
|
|
if (dataRow === false && result) {
|
|
if (!(fly = Ext.fly(result)).is(itemSelector)) {
|
|
return fly.up(itemSelector, null, true);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Links back from grid rows are installed by the XTemplate as data attributes
|
|
updateIndexes: Ext.emptyFn,
|
|
|
|
// Outer table
|
|
bodySelector: 'table',
|
|
|
|
// Element which contains rows
|
|
nodeContainerSelector: 'tbody',
|
|
|
|
// view item (may be a wrapper)
|
|
itemSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-row',
|
|
|
|
// row which contains cells as opposed to wrapping rows
|
|
dataRowSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-data-row',
|
|
|
|
// cell
|
|
cellSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell',
|
|
|
|
// `<column sizer>`
|
|
sizerSelector: 'col.' + Ext.baseCSSPrefix + 'grid-cell',
|
|
|
|
innerSelector: 'div.' + Ext.baseCSSPrefix + 'grid-cell-inner',
|
|
|
|
getNodeContainer: function() {
|
|
return this.el.down(this.nodeContainerSelector, true);
|
|
},
|
|
|
|
/**
|
|
* Returns a CSS selector which selects the outermost element(s) in this view.
|
|
*/
|
|
getBodySelector: function() {
|
|
return this.bodySelector + '.' + Ext.baseCSSPrefix + this.id + '-table';
|
|
},
|
|
|
|
/**
|
|
* Returns a CSS selector which selects the element which contains record nodes.
|
|
*/
|
|
getNodeContainerSelector: function() {
|
|
return this.nodeContainerSelector;
|
|
},
|
|
|
|
/**
|
|
* Returns a CSS selector which selects the element(s) which define the width of a column.
|
|
*
|
|
* This is used by the {@link Ext.view.TableLayout} when resizing columns.
|
|
*
|
|
*/
|
|
getColumnSizerSelector: function(header) {
|
|
return this.sizerSelector + '-' + header.getItemId();
|
|
},
|
|
|
|
/**
|
|
* Returns a CSS selector which selects items of the view rendered by the rowTpl
|
|
*/
|
|
getItemSelector: function() {
|
|
return this.itemSelector;
|
|
},
|
|
|
|
/**
|
|
* Returns a CSS selector which selects a row which contains cells.
|
|
*
|
|
* These *may not* correspond to actual records in the store. This selector may be used
|
|
* to identify things like total rows or header rows as injected by features which modify
|
|
* the rowTpl.
|
|
*
|
|
*/
|
|
getDataRowSelector: function() {
|
|
return this.dataRowSelector;
|
|
},
|
|
|
|
/**
|
|
* Returns a CSS selector which selects a particular column if the desired header is passed,
|
|
* or a general cell selector is no parameter is passed.
|
|
*
|
|
* @param {Ext.grid.column.Column} [header] The column for which to return the selector. If
|
|
* omitted, the general cell selector which matches **ant cell** will be returned.
|
|
*
|
|
*/
|
|
getCellSelector: function(header) {
|
|
var result = this.cellSelector;
|
|
if (header) {
|
|
result += '-' + header.getItemId();
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/*
|
|
* Returns a CSS selector which selects the content carrying element within cells.
|
|
*/
|
|
getCellInnerSelector: function(header) {
|
|
return this.getCellSelector(header) + ' ' + this.innerSelector;
|
|
},
|
|
|
|
/**
|
|
* Adds a CSS Class to a specific row.
|
|
* @param {HTMLElement/String/Number/Ext.data.Model} rowInfo An HTMLElement, index or instance of a model
|
|
* representing this row
|
|
* @param {String} cls
|
|
*/
|
|
addRowCls: function(rowInfo, cls) {
|
|
var row = this.getNode(rowInfo, false);
|
|
if (row) {
|
|
Ext.fly(row).addCls(cls);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes a CSS Class from a specific row.
|
|
* @param {HTMLElement/String/Number/Ext.data.Model} rowInfo An HTMLElement, index or instance of a model
|
|
* representing this row
|
|
* @param {String} cls
|
|
*/
|
|
removeRowCls: function(rowInfo, cls) {
|
|
var row = this.getNode(rowInfo, false);
|
|
if (row) {
|
|
Ext.fly(row).removeCls(cls);
|
|
}
|
|
},
|
|
|
|
setHighlightedItem: function(item) {
|
|
var me = this,
|
|
highlighted = me.highlightedItem;
|
|
|
|
if (highlighted && me.el.isAncestor(highlighted) && me.isRowStyleFirst(highlighted)) {
|
|
me.getRowStyleTableEl(highlighted).removeCls(me.tableOverFirstCls);
|
|
}
|
|
|
|
if (item && me.isRowStyleFirst(item)) {
|
|
me.getRowStyleTableEl(item).addCls(me.tableOverFirstCls);
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// GridSelectionModel invokes onRowSelect as selection changes
|
|
onRowSelect : function(rowIdx) {
|
|
var me = this;
|
|
|
|
me.addRowCls(rowIdx, me.selectedItemCls);
|
|
if (me.isRowStyleFirst(rowIdx)) {
|
|
me.getRowStyleTableEl(rowIdx).addCls(me.tableSelectedFirstCls);
|
|
} else {
|
|
me.addRowCls(rowIdx - 1, me.beforeSelectedItemCls);
|
|
}
|
|
},
|
|
|
|
// GridSelectionModel invokes onRowDeselect as selection changes
|
|
onRowDeselect : function(rowIdx) {
|
|
var me = this;
|
|
|
|
me.removeRowCls(rowIdx, [me.selectedItemCls, me.focusedItemCls]);
|
|
if (me.isRowStyleFirst(rowIdx)) {
|
|
me.getRowStyleTableEl(rowIdx).removeCls([me.tableFocusedFirstCls, me.tableSelectedFirstCls]);
|
|
} else {
|
|
me.removeRowCls(rowIdx - 1, [me.beforeFocusedItemCls, me.beforeSelectedItemCls]);
|
|
}
|
|
},
|
|
|
|
onCellSelect: function(position) {
|
|
var cell = this.getCellByPosition(position);
|
|
if (cell) {
|
|
cell.addCls(this.selectedCellCls);
|
|
this.scrollCellIntoView(cell);
|
|
}
|
|
},
|
|
|
|
onCellDeselect: function(position) {
|
|
var cell = this.getCellByPosition(position, true);
|
|
if (cell) {
|
|
Ext.fly(cell).removeCls(this.selectedCellCls);
|
|
}
|
|
|
|
},
|
|
|
|
getCellByPosition: function(position, returnDom) {
|
|
if (position) {
|
|
var row = this.getNode(position.row, true),
|
|
header = this.ownerCt.columnManager.getHeaderAtIndex(position.column);
|
|
|
|
if (header && row) {
|
|
return Ext.fly(row).down(this.getCellSelector(header), returnDom);
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
var me = this,
|
|
result;
|
|
|
|
if (me.refreshCounter) {
|
|
result = me.focusedRow;
|
|
|
|
// No focused row or the row focused is no longer in the DOM
|
|
if (!(result && me.el.contains(result))) {
|
|
|
|
// Focus first visible row
|
|
if (me.all.getCount() && (result = me.getNode(me.all.item(0).dom, true))) {
|
|
me.focusRow(result);
|
|
} else {
|
|
result = me.body;
|
|
}
|
|
}
|
|
} else {
|
|
return me.el;
|
|
}
|
|
return Ext.get(result);
|
|
},
|
|
|
|
// GridSelectionModel invokes onRowFocus to 'highlight'
|
|
// the last row focused
|
|
onRowFocus: function(rowIdx, highlight, supressFocus) {
|
|
var me = this;
|
|
|
|
if (highlight) {
|
|
me.addRowCls(rowIdx, me.focusedItemCls);
|
|
if (me.isRowStyleFirst(rowIdx)) {
|
|
me.getRowStyleTableEl(rowIdx).addCls(me.tableFocusedFirstCls);
|
|
} else {
|
|
me.addRowCls(rowIdx - 1, me.beforeFocusedItemCls);
|
|
}
|
|
if (!supressFocus) {
|
|
me.focusRow(rowIdx);
|
|
}
|
|
//this.el.dom.setAttribute('aria-activedescendant', row.id);
|
|
} else {
|
|
me.removeRowCls(rowIdx, me.focusedItemCls);
|
|
if (me.isRowStyleFirst(rowIdx)) {
|
|
me.getRowStyleTableEl(rowIdx).removeCls(me.tableFocusedFirstCls);
|
|
} else {
|
|
me.removeRowCls(rowIdx - 1, me.beforeFocusedItemCls);
|
|
}
|
|
}
|
|
|
|
if ((Ext.isIE6 || Ext.isIE7) && !me.ownerCt.rowLines) {
|
|
me.repaintRow(rowIdx)
|
|
}
|
|
},
|
|
|
|
focus: function(selectText, delay) {
|
|
var me = this,
|
|
saveScroll = Ext.isIE && !delay,
|
|
scrollPos;
|
|
|
|
// IE does horizontal scrolling when row is focused
|
|
if (saveScroll) {
|
|
scrollPos = me.el.dom.scrollLeft;
|
|
}
|
|
this.callParent(arguments);
|
|
if (saveScroll) {
|
|
me.el.dom.scrollLeft = scrollPos;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Focuses a particular row and brings it into view. Will fire the rowfocus event.
|
|
* @param {HTMLElement/String/Number/Ext.data.Model} row An HTMLElement template node, index of a template node, the id of a template node or the
|
|
* @param {Boolean/Number} [delay] Delay the focus this number of milliseconds (true for 10 milliseconds).
|
|
* record associated with the node.
|
|
*/
|
|
focusRow: function(row, delay) {
|
|
var me = this,
|
|
rowIdx,
|
|
gridCollapsed = me.ownerCt && me.ownerCt.collapsed,
|
|
record;
|
|
|
|
// Do not attempt to focus if hidden or owning grid is collapsed
|
|
if (me.isVisible(true) && !gridCollapsed && (row = me.getNode(row, true))) {
|
|
me.scrollRowIntoView(row);
|
|
record = me.getRecord(row);
|
|
rowIdx = me.indexInStore(row);
|
|
|
|
me.selModel.setLastFocused(record);
|
|
me.focusedRow = row;
|
|
me.focus(false, delay, function() {
|
|
me.fireEvent('rowfocus', record, row, rowIdx);
|
|
});
|
|
}
|
|
},
|
|
|
|
scrollRowIntoView: function(row) {
|
|
row = this.getNode(row, true);
|
|
if (row) {
|
|
Ext.fly(row).scrollIntoView(this.el, false);
|
|
}
|
|
},
|
|
|
|
focusCell: function(position) {
|
|
var me = this,
|
|
cell = me.getCellByPosition(position),
|
|
record = me.getRecord(position.row);
|
|
|
|
me.focusRow(record);
|
|
if (cell) {
|
|
me.scrollCellIntoView(cell);
|
|
me.fireEvent('cellfocus', record, cell, position);
|
|
}
|
|
},
|
|
|
|
scrollCellIntoView: function(cell) {
|
|
// Allow cell context object to be passed.
|
|
// TODO: change to .isCellContext check when implement cell context class
|
|
if (cell.row != null && cell.column != null) {
|
|
cell = this.getCellByPosition(cell);
|
|
}
|
|
if (cell) {
|
|
Ext.fly(cell).scrollIntoView(this.el, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Scrolls by delta. This affects this individual view ONLY and does not
|
|
* synchronize across views or scrollers.
|
|
* @param {Number} delta
|
|
* @param {String} [dir] Valid values are scrollTop and scrollLeft. Defaults to scrollTop.
|
|
* @private
|
|
*/
|
|
scrollByDelta: function(delta, dir) {
|
|
dir = dir || 'scrollTop';
|
|
var elDom = this.el.dom;
|
|
elDom[dir] = (elDom[dir] += delta);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Used to test if a row being updated is a basic data row as opposed to containing extra markup
|
|
* provided by a Feature, eg a wrapping row containing extra elements such as group header, group summary,
|
|
* row body etc.
|
|
*
|
|
* If A row being updated *is not* a data row, then the elements within it which are not valid data rows
|
|
* must be copied.
|
|
* @param row
|
|
* @return {Boolean} `true` if the passed element is a basic data row.
|
|
*/
|
|
isDataRow: function(row) {
|
|
return Ext.fly(row).hasCls(Ext.baseCSSPrefix + 'grid-data-row');
|
|
},
|
|
|
|
syncRowHeights: function(firstRow, secondRow) {
|
|
firstRow = Ext.get(firstRow);
|
|
secondRow = Ext.get(secondRow);
|
|
firstRow.dom.style.height = secondRow.dom.style.height = '';
|
|
var me = this,
|
|
rowTpl = me.rowTpl,
|
|
firstRowHeight = firstRow.dom.offsetHeight,
|
|
secondRowHeight = secondRow.dom.offsetHeight;
|
|
|
|
// If the two rows *need* syncing...
|
|
if (firstRowHeight !== secondRowHeight) {
|
|
|
|
// loop thru all of rowTpls asking them to sync the two row heights if they know how to.
|
|
while (rowTpl) {
|
|
if (rowTpl.syncRowHeights) {
|
|
// If any rowTpl in the chain returns false, quit processing
|
|
if (rowTpl.syncRowHeights(firstRow, secondRow) === false) {
|
|
break;
|
|
}
|
|
}
|
|
rowTpl = rowTpl.nextTpl;
|
|
}
|
|
|
|
// If that did not fix it, see if we have nested data rows, and equalize the data row heights
|
|
firstRowHeight = firstRow.dom.offsetHeight;
|
|
secondRowHeight = secondRow.dom.offsetHeight;
|
|
if (firstRowHeight !== secondRowHeight) {
|
|
|
|
// See if the real data row has been nested deeper by a Feature.
|
|
firstRow = firstRow.down('[data-recordId]') || firstRow;
|
|
secondRow = secondRow.down('[data-recordId]') || secondRow;
|
|
|
|
// Yes, there's a nested data row on each side. Sync the heights of the two.
|
|
if (firstRow && secondRow) {
|
|
firstRow.dom.style.height = secondRow.dom.style.height = '';
|
|
firstRowHeight = firstRow.dom.offsetHeight;
|
|
secondRowHeight = secondRow.dom.offsetHeight;
|
|
|
|
if (firstRowHeight > secondRowHeight) {
|
|
firstRow.setHeight(firstRowHeight);
|
|
secondRow.setHeight(firstRowHeight);
|
|
} else if (secondRowHeight > firstRowHeight) {
|
|
firstRow.setHeight(secondRowHeight);
|
|
secondRow.setHeight(secondRowHeight);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
onIdChanged: function(store, rec, oldId, newId, oldInternalId){
|
|
var me = this,
|
|
rowDom;
|
|
|
|
if (me.viewReady) {
|
|
rowDom = me.getNodeById(oldInternalId);
|
|
if (rowDom) {
|
|
rowDom.setAttribute('data-recordId', rec.internalId);
|
|
rowDom.id = me.getRowId(rec);
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
onUpdate : function(store, record, operation, changedFieldNames) {
|
|
var me = this,
|
|
rowTpl = me.rowTpl,
|
|
index,
|
|
oldRow, oldRowDom,
|
|
newRowDom,
|
|
newAttrs, attLen, attName, attrIndex,
|
|
overItemCls, beforeOverItemCls,
|
|
focusedItemCls, beforeFocusedItemCls,
|
|
selectedItemCls, beforeSelectedItemCls,
|
|
columns;
|
|
|
|
if (me.viewReady) {
|
|
// Table row being updated
|
|
oldRowDom = me.getNodeByRecord(record, false);
|
|
|
|
// Row might not be rendered due to buffered rendering or being part of a collapsed group...
|
|
if (oldRowDom) {
|
|
overItemCls = me.overItemCls;
|
|
beforeOverItemCls = me.overItemCls;
|
|
focusedItemCls = me.focusedItemCls;
|
|
beforeFocusedItemCls = me.beforeFocusedItemCls;
|
|
selectedItemCls = me.selectedItemCls;
|
|
beforeSelectedItemCls = me.beforeSelectedItemCls;
|
|
|
|
index = me.indexInStore(record);
|
|
oldRow = Ext.fly(oldRowDom, '_internal');
|
|
newRowDom = me.createRowElement(record, index);
|
|
if (oldRow.hasCls(overItemCls)) {
|
|
Ext.fly(newRowDom).addCls(overItemCls);
|
|
}
|
|
if (oldRow.hasCls(beforeOverItemCls)) {
|
|
Ext.fly(newRowDom).addCls(beforeOverItemCls);
|
|
}
|
|
if (oldRow.hasCls(focusedItemCls)) {
|
|
Ext.fly(newRowDom).addCls(focusedItemCls);
|
|
}
|
|
if (oldRow.hasCls(beforeFocusedItemCls)) {
|
|
Ext.fly(newRowDom).addCls(beforeFocusedItemCls);
|
|
}
|
|
if (oldRow.hasCls(selectedItemCls)) {
|
|
Ext.fly(newRowDom).addCls(selectedItemCls);
|
|
}
|
|
if (oldRow.hasCls(beforeSelectedItemCls)) {
|
|
Ext.fly(newRowDom).addCls(beforeSelectedItemCls);
|
|
}
|
|
columns = me.ownerCt.columnManager.getColumns();
|
|
|
|
// Copy new row attributes across. Use IE-specific method if possible.
|
|
// In IE10, there is a problem where the className will not get updated
|
|
// in the view, even though the className on the dom element is correct.
|
|
// See EXTJSIV-9462
|
|
if (Ext.isIE9m && oldRowDom.mergeAttributes) {
|
|
oldRowDom.mergeAttributes(newRowDom, true);
|
|
} else {
|
|
newAttrs = newRowDom.attributes;
|
|
attLen = newAttrs.length;
|
|
for (attrIndex = 0; attrIndex < attLen; attrIndex++) {
|
|
attName = newAttrs[attrIndex].name;
|
|
if (attName !== 'id') {
|
|
oldRowDom.setAttribute(attName, newAttrs[attrIndex].value);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If we have columns which may *need* updating (think locked side of lockable grid with all columns unlocked)
|
|
// and the changed record is within our view, then update the view
|
|
if (columns.length) {
|
|
me.updateColumns(record, me.getNode(oldRowDom, true), me.getNode(newRowDom, true), columns, changedFieldNames);
|
|
}
|
|
|
|
// loop thru all of rowTpls asking them to sync the content they are responsible for if any.
|
|
while (rowTpl) {
|
|
if (rowTpl.syncContent) {
|
|
if (rowTpl.syncContent(oldRowDom, newRowDom) === false) {
|
|
break;
|
|
}
|
|
}
|
|
rowTpl = rowTpl.nextTpl;
|
|
}
|
|
|
|
// Since we don't actually replace the row, we need to fire the event with the old row
|
|
// because it's the thing that is still in the DOM
|
|
me.fireEvent('itemupdate', record, index, oldRowDom);
|
|
me.refreshSize();
|
|
}
|
|
}
|
|
},
|
|
|
|
updateColumns: function(record, oldRowDom, newRowDom, columns, changedFieldNames) {
|
|
var me = this,
|
|
newAttrs, attLen, attName, attrIndex,
|
|
colCount = columns.length,
|
|
colIndex,
|
|
column,
|
|
oldCell, newCell,
|
|
row,
|
|
|
|
// See if our View has an editingPlugin, or if we are a locking twin, see if the top LockingView
|
|
// has an editingPlugin.
|
|
// We do not support one editing plugin on the top lockable and some other on the twinned views.
|
|
editingPlugin = me.editingPlugin || (me.lockingPartner && me.ownerCt.ownerLockable.view.editingPlugin),
|
|
|
|
// See if the found editing plugin is active.
|
|
isEditing = editingPlugin && editingPlugin.editing,
|
|
cellSelector = me.getCellSelector();
|
|
|
|
// Copy new row attributes across. Use IE-specific method if possible.
|
|
// Must do again at this level because the row DOM passed here may be the nested row in a row wrap.
|
|
if (oldRowDom.mergeAttributes) {
|
|
oldRowDom.mergeAttributes(newRowDom, true);
|
|
} else {
|
|
newAttrs = newRowDom.attributes;
|
|
attLen = newAttrs.length;
|
|
for (attrIndex = 0; attrIndex < attLen; attrIndex++) {
|
|
attName = newAttrs[attrIndex].name;
|
|
if (attName !== 'id') {
|
|
oldRowDom.setAttribute(attName, newAttrs[attrIndex].value);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Replace changed cells in the existing row structure with the new version from the rendered row.
|
|
for (colIndex = 0; colIndex < colCount; colIndex++) {
|
|
column = columns[colIndex];
|
|
|
|
// If the field at this column index was changed, or column has a custom renderer
|
|
// (which means value could rely on any other changed field) the update the cell's content.
|
|
if (me.shouldUpdateCell(record, column, changedFieldNames)) {
|
|
|
|
// Pluck out cells using the column's unique cell selector.
|
|
// Becuse in a wrapped row, there may be several TD elements.
|
|
cellSelector = me.getCellSelector(column);
|
|
oldCell = Ext.DomQuery.selectNode(cellSelector, oldRowDom);
|
|
newCell = Ext.DomQuery.selectNode(cellSelector, newRowDom);
|
|
|
|
// If an editor plugin is active, we carefully replace just the *contents* of the cell.
|
|
if (isEditing) {
|
|
Ext.fly(oldCell).syncContent(newCell);
|
|
}
|
|
// Otherwise, we simply replace whole TDs with a new version
|
|
else {
|
|
// Use immediate parentNode when replacing in case the main row was a wrapping row
|
|
row = oldCell.parentNode;
|
|
row.insertBefore(newCell, oldCell);
|
|
row.removeChild(oldCell);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
shouldUpdateCell: function(record, column, changedFieldNames){
|
|
// Though this may not be the most efficient, a renderer could be dependent on any field in the
|
|
// store, so we must always update the cell.
|
|
// If no changeFieldNames array was passed, we have to assume that that information
|
|
// is unknown and update all cells.
|
|
if (column.hasCustomRenderer || !changedFieldNames) {
|
|
return true;
|
|
}
|
|
|
|
if (changedFieldNames) {
|
|
var len = changedFieldNames.length,
|
|
i, field;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
field = changedFieldNames[i];
|
|
if (field === column.dataIndex || field === record.idProperty) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Refreshes the grid view. Sets the sort state and focuses the previously focused row.
|
|
*/
|
|
refresh: function() {
|
|
var me = this,
|
|
hasFocus = me.el && me.el.isAncestor(Ext.Element.getActiveElement());
|
|
|
|
me.callParent(arguments);
|
|
me.headerCt.setSortState();
|
|
|
|
// Create horizontal stretcher element if no records in view and there is overflow of the header container.
|
|
// Element will be transient and destroyed by the next refresh.
|
|
if (me.el && !me.all.getCount() && me.headerCt && me.headerCt.tooNarrow) {
|
|
me.el.createChild({style:'position:absolute;height:1px;width:1px;left:' + (me.headerCt.getFullWidth() - 1) + 'px'});
|
|
}
|
|
|
|
if (hasFocus) {
|
|
me.selModel.onLastFocusChanged(null, me.selModel.lastFocused);
|
|
}
|
|
},
|
|
|
|
processItemEvent: function(record, row, rowIndex, e) {
|
|
// Only process the event if it occurred within a row which maps to a record in the store
|
|
if (this.indexInStore(row) !== -1) {
|
|
var me = this,
|
|
cell = e.getTarget(me.getCellSelector(), row),
|
|
cellIndex,
|
|
map = me.statics().EventMap,
|
|
selModel = me.getSelectionModel(),
|
|
type = e.type,
|
|
features = me.features,
|
|
len = features.length,
|
|
i, result, feature, header;
|
|
|
|
if (type == 'keydown' && !cell && selModel.getCurrentPosition) {
|
|
// CellModel, otherwise we can't tell which cell to invoke
|
|
cell = me.getCellByPosition(selModel.getCurrentPosition(), true);
|
|
}
|
|
|
|
// cellIndex is an attribute only of TD elements. Other TplFactories must use the data-cellIndex attribute.
|
|
if (cell) {
|
|
if (!cell.parentNode) {
|
|
// If we have no parentNode, the td has been removed from the DOM, probably via an update,
|
|
// so just jump out since the target for the event isn't valid
|
|
return false;
|
|
}
|
|
// We can't use the cellIndex because we don't render hidden columns
|
|
header = me.getHeaderByCell(cell);
|
|
cellIndex = Ext.Array.indexOf(me.getGridColumns(), header);
|
|
} else {
|
|
cellIndex = -1;
|
|
}
|
|
|
|
result = me.fireEvent('uievent', type, me, cell, rowIndex, cellIndex, e, record, row);
|
|
|
|
if (result === false || me.callParent(arguments) === false) {
|
|
me.selModel.onVetoUIEvent(type, me, cell, rowIndex, cellIndex, e, record, row);
|
|
return false;
|
|
}
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
feature = features[i];
|
|
// In some features, the first/last row might be wrapped to contain extra info,
|
|
// such as grouping or summary, so we may need to stop the event
|
|
if (feature.wrapsItem) {
|
|
if (feature.vetoEvent(record, row, rowIndex, e) === false) {
|
|
// If the feature is vetoing the event, there's a good chance that
|
|
// it's for some feature action in the wrapped row.
|
|
me.processSpecialEvent(e);
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Don't handle cellmouseenter and cellmouseleave events for now
|
|
if (type == 'mouseover' || type == 'mouseout') {
|
|
return true;
|
|
}
|
|
|
|
if(!cell) {
|
|
// if the element whose event is being processed is not an actual cell (for example if using a rowbody
|
|
// feature and the rowbody element's event is being processed) then do not fire any "cell" events
|
|
return true;
|
|
}
|
|
|
|
return !(
|
|
// 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) ||
|
|
(me.fireEvent('cell' + type, me, cell, cellIndex, record, row, rowIndex, e) === false)
|
|
);
|
|
} else {
|
|
// If it's not in the store, it could be a feature event, so check here
|
|
this.processSpecialEvent(e);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
processSpecialEvent: function(e) {
|
|
var me = this,
|
|
features = me.features,
|
|
ln = features.length,
|
|
type = e.type,
|
|
i, feature, prefix, featureTarget,
|
|
beforeArgs, args,
|
|
panel = me.ownerCt;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (type == 'mouseover' || type == 'mouseout') {
|
|
return;
|
|
}
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
feature = features[i];
|
|
if (feature.hasFeatureEvent) {
|
|
featureTarget = e.getTarget(feature.eventSelector, me.getTargetEl());
|
|
if (featureTarget) {
|
|
prefix = feature.eventPrefix;
|
|
// allows features to implement getFireEventArgs to change the
|
|
// 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) ||
|
|
// panel grid event
|
|
(panel.fireEvent.apply(panel, beforeArgs) === false) ||
|
|
// view event
|
|
(me.fireEvent.apply(me, args) === false) ||
|
|
// panel event
|
|
(panel.fireEvent.apply(panel, args) === false)
|
|
) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
onCellMouseDown: Ext.emptyFn,
|
|
onCellMouseUp: Ext.emptyFn,
|
|
onCellClick: Ext.emptyFn,
|
|
onCellDblClick: Ext.emptyFn,
|
|
onCellContextMenu: Ext.emptyFn,
|
|
onCellKeyDown: Ext.emptyFn,
|
|
onBeforeCellMouseDown: Ext.emptyFn,
|
|
onBeforeCellMouseUp: Ext.emptyFn,
|
|
onBeforeCellClick: Ext.emptyFn,
|
|
onBeforeCellDblClick: Ext.emptyFn,
|
|
onBeforeCellContextMenu: Ext.emptyFn,
|
|
onBeforeCellKeyDown: Ext.emptyFn,
|
|
|
|
/**
|
|
* Expands a particular header to fit the max content width.
|
|
* @deprecated Use {@link #autoSizeColumn} instead.
|
|
*/
|
|
expandToFit: function(header) {
|
|
this.autoSizeColumn(header);
|
|
},
|
|
|
|
/**
|
|
* Sizes the passed header to fit the max content width.
|
|
* *Note that group columns shrinkwrap around the size of leaf columns. Auto sizing a group column
|
|
* autosizes descendant leaf columns.*
|
|
* @param {Ext.grid.column.Column/Number} header The header (or index of header) to auto size.
|
|
*/
|
|
autoSizeColumn: function(header) {
|
|
if (Ext.isNumber(header)) {
|
|
header = this.getGridColumns[header];
|
|
}
|
|
if (header) {
|
|
if (header.isGroupHeader) {
|
|
header.autoSize();
|
|
return;
|
|
}
|
|
delete header.flex;
|
|
header.setWidth(this.getMaxContentWidth(header));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the max contentWidth of the header's text and all cells
|
|
* in the grid under this header.
|
|
* @private
|
|
*/
|
|
getMaxContentWidth: function(header) {
|
|
var me = this,
|
|
cells = me.el.query(header.getCellInnerSelector()),
|
|
originalWidth = header.getWidth(),
|
|
i = 0,
|
|
ln = cells.length,
|
|
hasPaddingBug = Ext.supports.ScrollWidthInlinePaddingBug,
|
|
columnSizer = me.body.select(me.getColumnSizerSelector(header)),
|
|
max = Math.max,
|
|
paddingAdjust, maxWidth;
|
|
|
|
if (hasPaddingBug && ln > 0) {
|
|
paddingAdjust = me.getCellPaddingAfter(cells[0]);
|
|
}
|
|
|
|
// Set column width to 1px so we can detect the content width by measuring scrollWidth
|
|
columnSizer.setWidth(1);
|
|
|
|
// Allow for padding round text of header
|
|
maxWidth = header.textEl.dom.offsetWidth + header.titleEl.getPadding('lr');
|
|
for (; i < ln; i++) {
|
|
maxWidth = max(maxWidth, cells[i].scrollWidth);
|
|
}
|
|
if (hasPaddingBug) {
|
|
// in some browsers, the "after" padding is not accounted for in the scrollWidth
|
|
maxWidth += paddingAdjust;
|
|
}
|
|
|
|
// 40 is the minimum column width. TODO: should this be configurable?
|
|
maxWidth = max(maxWidth, 40);
|
|
|
|
// Set column width back to original width
|
|
columnSizer.setWidth(originalWidth);
|
|
|
|
return maxWidth;
|
|
},
|
|
|
|
getPositionByEvent: function(e) {
|
|
var me = this,
|
|
cellNode = e.getTarget(me.cellSelector),
|
|
rowNode = e.getTarget(me.itemSelector),
|
|
record = me.getRecord(rowNode),
|
|
header = me.getHeaderByCell(cellNode);
|
|
|
|
return me.getPosition(record, header);
|
|
},
|
|
|
|
getHeaderByCell: function(cell) {
|
|
if (cell) {
|
|
var match = cell.className.match(this.cellRe);
|
|
if (match && match[1]) {
|
|
return this.ownerCt.columnManager.getHeaderById(match[1]);
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* @param {Object} position The current row and column: an object containing the following properties:
|
|
*
|
|
* - row - The row index
|
|
* - column - The column index
|
|
*
|
|
* @param {String} direction 'up', 'down', 'right' and 'left'
|
|
* @param {Ext.EventObject} e event
|
|
* @param {Boolean} preventWrap Set to true to prevent wrap around to the next or previous row.
|
|
* @param {Function} verifierFn A function to verify the validity of the calculated position.
|
|
* When using this function, you must return true to allow the newPosition to be returned.
|
|
* @param {Object} scope Scope to run the verifierFn in
|
|
* @returns {Ext.grid.CellContext} An object encapsulating the unique cell position.
|
|
*
|
|
* @private
|
|
*/
|
|
walkCells: function(pos, direction, e, preventWrap, verifierFn, scope) {
|
|
|
|
// Caller (probably CellModel) had no current position. This can happen
|
|
// if the main el is focused and any navigation key is presssed.
|
|
if (!pos) {
|
|
return false;
|
|
}
|
|
|
|
var me = this,
|
|
row = pos.row,
|
|
column = pos.column,
|
|
rowCount = me.dataSource.getCount(),
|
|
lastCol = me.ownerCt.columnManager.getColumns().length - 1,
|
|
newRow = row,
|
|
newColumn = column,
|
|
activeHeader = me.ownerCt.columnManager.getHeaderAtIndex(column);
|
|
|
|
// no active header or its currently hidden
|
|
if (!activeHeader || activeHeader.hidden || !rowCount) {
|
|
return false;
|
|
}
|
|
|
|
e = e || {};
|
|
direction = direction.toLowerCase();
|
|
switch (direction) {
|
|
case 'right':
|
|
// has the potential to wrap if its last
|
|
if (column === lastCol) {
|
|
// if bottom row and last column, deny right
|
|
if (preventWrap || row === rowCount - 1) {
|
|
return false;
|
|
}
|
|
if (!e.ctrlKey) {
|
|
// otherwise wrap to nextRow and firstCol
|
|
newRow = me.walkRows(row, 1);
|
|
if (newRow !== row) {
|
|
newColumn = 0;
|
|
}
|
|
}
|
|
// go right
|
|
} else {
|
|
if (!e.ctrlKey) {
|
|
newColumn = column + 1;
|
|
} else {
|
|
newColumn = lastCol;
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'left':
|
|
// has the potential to wrap
|
|
if (column === 0) {
|
|
// if top row and first column, deny left
|
|
if (preventWrap || row === 0) {
|
|
return false;
|
|
}
|
|
if (!e.ctrlKey) {
|
|
// otherwise wrap to prevRow and lastCol
|
|
newRow = me.walkRows(row, -1);
|
|
if (newRow !== row) {
|
|
newColumn = lastCol;
|
|
}
|
|
}
|
|
// go left
|
|
} else {
|
|
if (!e.ctrlKey) {
|
|
newColumn = column - 1;
|
|
} else {
|
|
newColumn = 0;
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'up':
|
|
// if top row, deny up
|
|
if (row === 0) {
|
|
return false;
|
|
// go up
|
|
} else {
|
|
if (!e.ctrlKey) {
|
|
newRow = me.walkRows(row, -1);
|
|
} else {
|
|
// Go to first row by walking down from row -1
|
|
newRow = me.walkRows(-1, 1);
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'down':
|
|
// if bottom row, deny down
|
|
if (row === rowCount - 1) {
|
|
return false;
|
|
// go down
|
|
} else {
|
|
if (!e.ctrlKey) {
|
|
newRow = me.walkRows(row, 1);
|
|
} else {
|
|
// Go to first row by walking up from beyond the last row
|
|
newRow = me.walkRows(rowCount, -1);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
if (verifierFn && verifierFn.call(scope || me, {row: newRow, column: newColumn}) !== true) {
|
|
return false;
|
|
} else {
|
|
return new Ext.grid.CellContext(me).setPosition(newRow, newColumn);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Increments the passed row index by the passed increment which may be +ve or -ve
|
|
*
|
|
* Skips hidden rows.
|
|
*
|
|
* If no row is visible in the specified direction, returns the input row index unchanged.
|
|
* @param {Number} startRow The zero-based row index to start from.
|
|
* @param {Number} distance The distance to move the row by. May be +ve or -ve.
|
|
*/
|
|
walkRows: function(startRow, distance) {
|
|
// Note that we use the **dataSource** here because row indices mean view row indices
|
|
// so records in collapsed groups must be omitted.
|
|
var me = this,
|
|
moved = 0,
|
|
lastValid = startRow,
|
|
node,
|
|
last = (me.dataSource.buffered ? me.dataSource.getTotalCount() : me.dataSource.getCount()) - 1,
|
|
limit = (distance < 0) ? 0 : last,
|
|
increment = limit ? 1 : -1,
|
|
result = startRow;
|
|
|
|
do {
|
|
// Walked off the end: return the last encountered valid row
|
|
if (limit ? result >= limit : result <= 0) {
|
|
return lastValid || limit;
|
|
}
|
|
|
|
// Move the result pointer on by one position. We have to count intervening VISIBLE nodes
|
|
result += increment;
|
|
|
|
// Stepped onto VISIBLE record: Increment the moved count.
|
|
// We must not count stepping onto a non-rendered record as a move.
|
|
if ((node = Ext.fly(me.getNode(result, true))) && node.isVisible(true)) {
|
|
moved += increment;
|
|
lastValid = result;
|
|
}
|
|
} while (moved !== distance);
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Navigates from the passed record by the passed increment which may be +ve or -ve
|
|
*
|
|
* Skips hidden records.
|
|
*
|
|
* If no record is visible in the specified direction, returns the starting record index unchanged.
|
|
* @param {Ext.data.Model} startRec The Record to start from.
|
|
* @param {Number} distance The distance to move from the record. May be +ve or -ve.
|
|
*/
|
|
walkRecs: function(startRec, distance) {
|
|
// Note that we use the **store** to access the records by index because the dataSource omits records in collapsed groups.
|
|
// This is used by selection models which use the **store**
|
|
var me = this,
|
|
moved = 0,
|
|
lastValid = startRec,
|
|
node,
|
|
last = (me.store.buffered ? me.store.getTotalCount() : me.store.getCount()) - 1,
|
|
limit = (distance < 0) ? 0 : last,
|
|
increment = limit ? 1 : -1,
|
|
testIndex = me.store.indexOf(startRec),
|
|
rec;
|
|
|
|
do {
|
|
// Walked off the end: return the last encountered valid record
|
|
if (limit ? testIndex >= limit : testIndex <= 0) {
|
|
return lastValid;
|
|
}
|
|
|
|
// Move the result pointer on by one position. We have to count intervening VISIBLE nodes
|
|
testIndex += increment;
|
|
|
|
// Stepped onto VISIBLE record: Increment the moved count.
|
|
// We must not count stepping onto a non-rendered record as a move.
|
|
rec = me.store.getAt(testIndex);
|
|
if ((node = Ext.fly(me.getNodeByRecord(rec, true))) && node.isVisible(true)) {
|
|
moved += increment;
|
|
lastValid = rec;
|
|
}
|
|
} while (moved !== distance);
|
|
return lastValid;
|
|
},
|
|
|
|
getFirstVisibleRowIndex: function() {
|
|
var me = this,
|
|
count = (me.dataSource.buffered ? me.dataSource.getTotalCount() : me.dataSource.getCount()),
|
|
result = me.indexOf(me.all.first()) - 1;
|
|
|
|
do {
|
|
result += 1;
|
|
if (result === count) {
|
|
return;
|
|
}
|
|
} while (!Ext.fly(me.getNode(result, true)).isVisible(true));
|
|
return result;
|
|
},
|
|
|
|
getLastVisibleRowIndex: function() {
|
|
var me = this,
|
|
result = me.indexOf(me.all.last());
|
|
|
|
do {
|
|
result -= 1;
|
|
if (result === -1) {
|
|
return;
|
|
}
|
|
} while (!Ext.fly(me.getNode(result, true)).isVisible(true));
|
|
return result;
|
|
},
|
|
|
|
getHeaderCt: function() {
|
|
return this.headerCt;
|
|
},
|
|
|
|
getPosition: function(record, header) {
|
|
return new Ext.grid.CellContext(this).setPosition(record, header);
|
|
},
|
|
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
|
|
if (me.rendered) {
|
|
me.el.removeAllListeners();
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this,
|
|
features = me.featuresMC,
|
|
len,
|
|
i;
|
|
|
|
if (features) {
|
|
for (i = 0, len = features.getCount(); i < len; ++i) {
|
|
features.getAt(i).destroy();
|
|
}
|
|
}
|
|
me.featuresMC = null;
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
// after adding a row stripe rows from then on
|
|
onAdd: function(ds, records, index) {
|
|
this.callParent(arguments);
|
|
this.doStripeRows(index);
|
|
},
|
|
|
|
// after removing a row stripe rows from then on
|
|
onRemove: function(ds, records, indexes) {
|
|
this.callParent(arguments);
|
|
this.doStripeRows(indexes[0]);
|
|
},
|
|
|
|
/**
|
|
* Stripes rows from a particular row index.
|
|
* @param {Number} startRow
|
|
* @param {Number} [endRow] argument specifying the last row to process.
|
|
* By default process up to the last row.
|
|
* @private
|
|
*/
|
|
doStripeRows: function(startRow, endRow) {
|
|
var me = this,
|
|
rows,
|
|
rowsLn,
|
|
i,
|
|
row;
|
|
|
|
// ensure stripeRows configuration is turned on
|
|
if (me.rendered && me.stripeRows) {
|
|
rows = me.getNodes(startRow, endRow);
|
|
|
|
for (i = 0, rowsLn = rows.length; i < rowsLn; i++) {
|
|
row = rows[i];
|
|
// Remove prior applied row classes.
|
|
row.className = row.className.replace(me.rowClsRe, ' ');
|
|
startRow++;
|
|
// Every odd row will get an additional cls
|
|
if (startRow % 2 === 0) {
|
|
row.className += (' ' + me.altRowCls);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
repaintRow: function(rowIdx) {
|
|
var node = this.getNode(rowIdx),
|
|
tds = node.childNodes,
|
|
i = tds.length;
|
|
|
|
while (i--) {
|
|
tds[i].className = tds[i].className;
|
|
}
|
|
},
|
|
|
|
// private
|
|
// returns the table that gains a top border when the first grid row is focused, selected,
|
|
// or hovered. Usually the main grid table but can be a sub-table, if a grouping
|
|
// feature is being used.
|
|
getRowStyleTableEl: function(item /* view item or row index */) {
|
|
var me = this;
|
|
|
|
if (!item.tagName) {
|
|
item = this.getNode(item);
|
|
}
|
|
|
|
return (me.isGrouping ? Ext.fly(item) : this.el).down('table.x-grid-table');
|
|
},
|
|
|
|
// private
|
|
// returns true if the row should be treated as the first row stylistically. Typically
|
|
// only returns true for the first row in a grid. Returns true for the first row
|
|
// in each group of a grouped grid.
|
|
isRowStyleFirst: function(item /* view item or row index */) {
|
|
var me = this,
|
|
index;
|
|
|
|
// An item not in the view
|
|
if (item === -1) {
|
|
return false;
|
|
}
|
|
|
|
if (!item.tagName) {
|
|
index = item;
|
|
item = this.getNode(item);
|
|
} else {
|
|
index = me.indexOf(item);
|
|
}
|
|
|
|
return (!index || me.isGrouping && Ext.fly(item).hasCls(Ext.baseCSSPrefix + 'grid-group-row'));
|
|
},
|
|
|
|
getCellPaddingAfter: function(cell) {
|
|
return Ext.fly(cell).getPadding('r');
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* The grid View class provides extra {@link Ext.grid.Panel} specific functionality to the
|
|
* {@link Ext.view.Table}. In general, this class is not instanced directly, instead a viewConfig
|
|
* option is passed to the grid:
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* // other options
|
|
* viewConfig: {
|
|
* stripeRows: false
|
|
* }
|
|
* });
|
|
*
|
|
* ## Drag Drop
|
|
*
|
|
* Drag and drop functionality can be achieved in the grid by attaching a {@link Ext.grid.plugin.DragDrop} plugin
|
|
* when creating the view.
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* // other options
|
|
* viewConfig: {
|
|
* plugins: {
|
|
* ddGroup: 'people-group',
|
|
* ptype: 'gridviewdragdrop',
|
|
* enableDrop: false
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.View', {
|
|
extend: Ext.view.Table ,
|
|
alias: 'widget.gridview',
|
|
|
|
/**
|
|
* @cfg {Boolean}
|
|
* True to stripe the rows.
|
|
*
|
|
* This causes the CSS class **`x-grid-row-alt`** to be added to alternate rows of the grid. A default CSS rule is
|
|
* provided which sets a background color, but you can override this with a rule which either overrides the
|
|
* **background-color** style using the `!important` modifier, or which uses a CSS selector of higher specificity.
|
|
*/
|
|
stripeRows: true,
|
|
|
|
autoScroll: true
|
|
});
|
|
|
|
/**
|
|
* @author Aaron Conran
|
|
* @docauthor Ed Spencer
|
|
*
|
|
* Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged
|
|
* `<table>`, GridPanel makes it easy to fetch, sort and filter large amounts of data.
|
|
*
|
|
* Grids are composed of two main pieces - a {@link Ext.data.Store Store} full of data and a set of columns to render.
|
|
*
|
|
* ## Basic GridPanel
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'simpsonsStore',
|
|
* fields:['name', 'email', 'phone'],
|
|
* data:{'items':[
|
|
* { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
|
|
* { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
|
|
* { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
|
|
* { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
|
|
* ]},
|
|
* proxy: {
|
|
* type: 'memory',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'items'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Simpsons',
|
|
* store: Ext.data.StoreManager.lookup('simpsonsStore'),
|
|
* columns: [
|
|
* { text: 'Name', dataIndex: 'name' },
|
|
* { text: 'Email', dataIndex: 'email', flex: 1 },
|
|
* { text: 'Phone', dataIndex: 'phone' }
|
|
* ],
|
|
* height: 200,
|
|
* width: 400,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline.
|
|
* In most apps we would be placing the grid inside another container and wouldn't need to use the
|
|
* {@link #height}, {@link #width} and {@link #renderTo} configurations but they are included here to make it easy to get
|
|
* up and running.
|
|
*
|
|
* The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath
|
|
* and finally the grid rows under the headers.
|
|
*
|
|
* ## Configuring columns
|
|
*
|
|
* By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each
|
|
* column header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns.
|
|
* It's easy to configure each column - here we use the same example as above and just modify the columns config:
|
|
*
|
|
* columns: [
|
|
* {
|
|
* text: 'Name',
|
|
* dataIndex: 'name',
|
|
* sortable: false,
|
|
* hideable: false,
|
|
* flex: 1
|
|
* },
|
|
* {
|
|
* text: 'Email',
|
|
* dataIndex: 'email',
|
|
* hidden: true
|
|
* },
|
|
* {
|
|
* text: 'Phone',
|
|
* dataIndex: 'phone',
|
|
* width: 100
|
|
* }
|
|
* ]
|
|
*
|
|
* We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email
|
|
* column hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to
|
|
* a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns
|
|
* have been accounted for. See the {@link Ext.grid.column.Column column docs} for more details.
|
|
*
|
|
* ## Renderers
|
|
*
|
|
* As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is
|
|
* tied to a particular column and is passed the value that would be rendered into each cell in that column. For example,
|
|
* we could define a renderer function for the email column to turn each email address into a mailto link:
|
|
*
|
|
* columns: [
|
|
* {
|
|
* text: 'Email',
|
|
* dataIndex: 'email',
|
|
* renderer: function(value) {
|
|
* return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
|
|
* }
|
|
* }
|
|
* ]
|
|
*
|
|
* See the {@link Ext.grid.column.Column column docs} for more information on renderers.
|
|
*
|
|
* ## Selection Models
|
|
*
|
|
* Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or
|
|
* update that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of
|
|
* the data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and
|
|
* CellSelectionModel, where individual cells are selected.
|
|
*
|
|
* Grids use a Row Selection Model by default, but this is easy to customise like so:
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* selType: 'cellmodel',
|
|
* store: ...
|
|
* });
|
|
*
|
|
* Specifying the `cellmodel` changes a couple of things. Firstly, clicking on a cell now
|
|
* selects just that cell (using a {@link Ext.selection.RowModel rowmodel} will select the entire row), and secondly the
|
|
* keyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in
|
|
* conjunction with editing.
|
|
*
|
|
* ## Sorting & Filtering
|
|
*
|
|
* Every grid is attached to a {@link Ext.data.Store Store}, which provides multi-sort and filtering capabilities. It's
|
|
* easy to set up a grid to be sorted from the start:
|
|
*
|
|
* var myGrid = Ext.create('Ext.grid.Panel', {
|
|
* store: {
|
|
* fields: ['name', 'email', 'phone'],
|
|
* sorters: ['name', 'phone']
|
|
* },
|
|
* columns: [
|
|
* { text: 'Name', dataIndex: 'name' },
|
|
* { text: 'Email', dataIndex: 'email' }
|
|
* ]
|
|
* });
|
|
*
|
|
* Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on
|
|
* more than one field at run time it's easy to do so by adding new sorters to the store:
|
|
*
|
|
* myGrid.store.sort([
|
|
* { property: 'name', direction: 'ASC' },
|
|
* { property: 'email', direction: 'DESC' }
|
|
* ]);
|
|
*
|
|
* See {@link Ext.data.Store} for examples of filtering.
|
|
*
|
|
* ## State saving
|
|
*
|
|
* When configured {@link #stateful}, grids save their column state (order and width) encapsulated within the default
|
|
* Panel state of changed width and height and collapsed/expanded state.
|
|
*
|
|
* Each {@link #columns column} of the grid may be configured with a {@link Ext.grid.column.Column#stateId stateId} which
|
|
* identifies that column locally within the grid.
|
|
*
|
|
* ## Plugins and Features
|
|
*
|
|
* Grid supports addition of extra functionality through features and plugins:
|
|
*
|
|
* - {@link Ext.grid.plugin.CellEditing CellEditing} - editing grid contents one cell at a time.
|
|
*
|
|
* - {@link Ext.grid.plugin.RowEditing RowEditing} - editing grid contents an entire row at a time.
|
|
*
|
|
* - {@link Ext.grid.plugin.DragDrop DragDrop} - drag-drop reordering of grid rows.
|
|
*
|
|
* - {@link Ext.toolbar.Paging Paging toolbar} - paging through large sets of data.
|
|
*
|
|
* - {@link Ext.grid.plugin.BufferedRenderer Infinite scrolling} - another way to handle large sets of data.
|
|
*
|
|
* - {@link Ext.grid.RowNumberer RowNumberer} - automatically numbered rows.
|
|
*
|
|
* - {@link Ext.grid.feature.Grouping Grouping} - grouping together rows having the same value in a particular field.
|
|
*
|
|
* - {@link Ext.grid.feature.Summary Summary} - a summary row at the bottom of a grid.
|
|
*
|
|
* - {@link Ext.grid.feature.GroupingSummary GroupingSummary} - a summary row at the bottom of each group.
|
|
*/
|
|
Ext.define('Ext.grid.Panel', {
|
|
extend: Ext.panel.Table ,
|
|
|
|
alias: ['widget.gridpanel', 'widget.grid'],
|
|
alternateClassName: ['Ext.list.ListView', 'Ext.ListView', 'Ext.grid.GridPanel'],
|
|
viewType: 'gridview',
|
|
|
|
lockable: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} rowLines False to remove row line styling
|
|
*/
|
|
rowLines: true
|
|
|
|
// Columns config is required in Grid
|
|
/**
|
|
* @cfg {Ext.grid.column.Column[]/Object} columns (required)
|
|
* @inheritdoc
|
|
*/
|
|
|
|
/**
|
|
* @event beforereconfigure
|
|
* Fires before a reconfigure to enable modification of incoming Store and columns.
|
|
* @param {Ext.grid.Panel} this
|
|
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
|
|
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
|
|
* @param {Ext.data.Store} oldStore The store that will be replaced
|
|
* @param {Ext.grid.column.Column[]} The column headers that will be replaced.
|
|
*/
|
|
|
|
/**
|
|
* @event reconfigure
|
|
* Fires after a reconfigure.
|
|
* @param {Ext.grid.Panel} this
|
|
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
|
|
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
|
|
* @param {Ext.data.Store} oldStore The store that was replaced
|
|
* @param {Ext.grid.column.Column[]} The column headers that were replaced.
|
|
*/
|
|
|
|
/**
|
|
* @method reconfigure
|
|
* Reconfigures the grid with a new store/columns. Either the store or the columns can be omitted if you don't wish
|
|
* to change them.
|
|
* @param {Ext.data.Store} store (Optional) The new store.
|
|
* @param {Object[]} columns (Optional) An array of column configs
|
|
*/
|
|
});
|
|
|
|
Ext.define('Ext.rtl.view.Table', {
|
|
override: 'Ext.view.Table',
|
|
|
|
rtlCellTpl: [
|
|
'<td class="' + Ext.baseCSSPrefix + 'rtl {tdCls}" {tdAttr}>',
|
|
'<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'rtl ' + Ext.baseCSSPrefix + 'grid-cell-inner {innerCls}"',
|
|
' style="text-align:{[this.getAlign(values.align)]};<tpl if="style">{style}</tpl>">{value}</div>',
|
|
'</td>',
|
|
{
|
|
priority: 0,
|
|
rtlAlign: {
|
|
right: 'left',
|
|
left: 'right',
|
|
center: 'center'
|
|
},
|
|
getAlign: function(align) {
|
|
return this.rtlAlign[align];
|
|
}
|
|
}
|
|
],
|
|
|
|
beforeRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
if (me.getHierarchyState().rtl) {
|
|
me.addCellTpl(me.getTpl('rtlCellTpl'));
|
|
}
|
|
},
|
|
|
|
getCellPaddingAfter: function(cell) {
|
|
return Ext.fly(cell).getPadding(this.getHierarchyState().rtl ? 'l' : 'r');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* A set of overrides required by the presence of the BufferedRenderer plugin.
|
|
*
|
|
* These overrides of Ext.view.Table take into account the affect of a buffered renderer and
|
|
* divert execution from the default course where necessary.
|
|
*/
|
|
Ext.define('Ext.grid.plugin.BufferedRendererTableView', {
|
|
override: 'Ext.view.Table',
|
|
|
|
// Listener function for the Store's add event
|
|
onAdd: function(store, records, index) {
|
|
var me = this,
|
|
bufferedRenderer = me.bufferedRenderer,
|
|
rows = me.all;
|
|
|
|
// The newly added records will put us over the buffered view size, so we cannot just add as normal.
|
|
if (me.rendered && bufferedRenderer && (rows.getCount() + records.length) > bufferedRenderer.viewSize) {
|
|
|
|
// Index puts the new row(s) in the visible area, then we have to refresh the view
|
|
if (index < rows.startIndex + bufferedRenderer.viewSize && (index + records.length) > rows.startIndex) {
|
|
me.refreshView();
|
|
}
|
|
// New rows outside of visible area, just ensure that the scroll range is updated
|
|
else {
|
|
bufferedRenderer.stretchView(me, bufferedRenderer.getScrollHeight());
|
|
}
|
|
}
|
|
// No BufferedRenderer present
|
|
// or
|
|
// View has not yet reached the viewSize: we can add as normal.
|
|
else {
|
|
me.callParent([store, records, index]);
|
|
}
|
|
},
|
|
|
|
onRemove: function(store, records, indices) {
|
|
var me = this,
|
|
bufferedRenderer = me.bufferedRenderer;
|
|
|
|
// Ensure all records are removed from the view
|
|
me.callParent([store, records, indices]);
|
|
|
|
// If there's a BufferedRenderer, the view must refresh to keep the view correct.
|
|
// Removing *may* have removed all of the rendered rows, leaving whitespace below the group header,
|
|
// so the refresh will be needed to keep the buffer rendered zone valid - to pull records up from
|
|
// below the removed zone into visibility.
|
|
if (me.rendered && bufferedRenderer) {
|
|
if (me.dataSource.getCount() > bufferedRenderer.viewSize) {
|
|
me.refreshView();
|
|
}
|
|
// No overflow, still we have to ensure the scroll range is updated
|
|
else {
|
|
bufferedRenderer.stretchView(me, bufferedRenderer.getScrollHeight());
|
|
}
|
|
}
|
|
},
|
|
|
|
// When there's a buffered renderer present, store refresh events cause TableViews to go to scrollTop:0
|
|
onDataRefresh: function() {
|
|
var me = this;
|
|
|
|
if (me.bufferedRenderer) {
|
|
// Clear NodeCache. Do NOT remove nodes from DOM - that would blur the view, and then refresh will not refocus after the refresh.
|
|
me.all.clear();
|
|
me.bufferedRenderer.onStoreClear();
|
|
}
|
|
me.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* Private Container class used by the {@link Ext.grid.RowEditor} to hold its buttons.
|
|
*/
|
|
Ext.define('Ext.grid.RowEditorButtons', {
|
|
extend: Ext.container.Container ,
|
|
alias: 'widget.roweditorbuttons',
|
|
|
|
frame: true,
|
|
shrinkWrap: true,
|
|
position: 'bottom',
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
rowEditor = config.rowEditor,
|
|
cssPrefix = Ext.baseCSSPrefix,
|
|
plugin = rowEditor.editingPlugin;
|
|
|
|
config = Ext.apply({
|
|
baseCls: cssPrefix + 'grid-row-editor-buttons',
|
|
defaults: {
|
|
xtype: 'button',
|
|
ui: rowEditor.buttonUI,
|
|
scope: plugin,
|
|
flex: 1,
|
|
minWidth: Ext.panel.Panel.prototype.minButtonWidth
|
|
},
|
|
items: [{
|
|
cls: cssPrefix + 'row-editor-update-button',
|
|
itemId: 'update',
|
|
handler: plugin.completeEdit,
|
|
text: rowEditor.saveBtnText,
|
|
disabled: rowEditor.updateButtonDisabled
|
|
}, {
|
|
cls: cssPrefix + 'row-editor-cancel-button',
|
|
handler: plugin.cancelEdit,
|
|
text: rowEditor.cancelBtnText
|
|
}]
|
|
}, config);
|
|
|
|
me.callParent([config]);
|
|
|
|
me.addClsWithUI(me.position);
|
|
},
|
|
|
|
setButtonPosition: function(position) {
|
|
var me = this;
|
|
|
|
me.removeClsWithUI(me.position);
|
|
me.position = position;
|
|
me.addClsWithUI(position);
|
|
},
|
|
|
|
getFramingInfoCls: function(){
|
|
return this.baseCls + '-' + this.ui + '-' + this.position;
|
|
},
|
|
|
|
getFrameInfo: function() {
|
|
var frameInfo = this.callParent();
|
|
|
|
// Trick Renderable into rendering the top framing elements, even though they
|
|
// are not needed in the default "bottom" position. This allows us to flip the
|
|
// buttons into "top" position without re-rendering.
|
|
frameInfo.top = true;
|
|
|
|
return frameInfo;
|
|
}
|
|
});
|
|
|
|
// Currently has the following issues:
|
|
// - Does not handle postEditValue
|
|
// - Fields without editors need to sync with their values in Store
|
|
// - starting to edit another record while already editing and dirty should probably prevent it
|
|
// - aggregating validation messages
|
|
// - tabIndex is not managed bc we leave elements in dom, and simply move via positioning
|
|
// - layout issues when changing sizes/width while hidden (layout bug)
|
|
|
|
/**
|
|
* Internal utility class used to provide row editing functionality. For developers, they should use
|
|
* the RowEditing plugin to use this functionality with a grid.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.RowEditor', {
|
|
extend: Ext.form.Panel ,
|
|
alias: 'widget.roweditor',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//<locale>
|
|
saveBtnText : 'Update',
|
|
//</locale>
|
|
//<locale>
|
|
cancelBtnText: 'Cancel',
|
|
//</locale>
|
|
//<locale>
|
|
errorsText: 'Errors',
|
|
//</locale>
|
|
//<locale>
|
|
dirtyText: 'You need to commit or cancel your changes',
|
|
//</locale>
|
|
|
|
lastScrollLeft: 0,
|
|
lastScrollTop: 0,
|
|
|
|
border: false,
|
|
|
|
buttonUI: 'default',
|
|
|
|
// Change the hideMode to offsets so that we get accurate measurements when
|
|
// the roweditor is hidden for laying out things like a TriggerField.
|
|
hideMode: 'offsets',
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
grid = me.editingPlugin.grid,
|
|
Container = Ext.container.Container;
|
|
|
|
me.cls = Ext.baseCSSPrefix + 'grid-editor ' + Ext.baseCSSPrefix + 'grid-row-editor';
|
|
|
|
me.layout = {
|
|
type: 'hbox',
|
|
align: 'middle'
|
|
};
|
|
|
|
me.lockable = grid.lockable;
|
|
|
|
// Create field containing structure for when editing a lockable grid.
|
|
if (me.lockable) {
|
|
me.items = [
|
|
// Locked columns container shrinkwraps the fields
|
|
me.lockedColumnContainer = new Container({
|
|
id: grid.id + '-locked-editor-cells',
|
|
layout: {
|
|
type: 'hbox',
|
|
align: 'middle'
|
|
},
|
|
// Locked grid has a border, we must be exactly the same width
|
|
margin: '0 1 0 0'
|
|
}),
|
|
|
|
// Normal columns container flexes the remaining RowEditor width
|
|
me.normalColumnContainer = new Container({
|
|
flex: 1,
|
|
id: grid.id + '-normal-editor-cells',
|
|
layout: {
|
|
type: 'hbox',
|
|
align: 'middle'
|
|
}
|
|
})
|
|
];
|
|
} else {
|
|
me.lockedColumnContainer = me.normalColumnContainer = me;
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.fields) {
|
|
me.addFieldsForColumn(me.fields, true);
|
|
me.insertColumnEditor(me.fields);
|
|
delete me.fields;
|
|
}
|
|
|
|
me.mon(me.hierarchyEventSource, {
|
|
scope: me,
|
|
show: me.repositionIfVisible
|
|
});
|
|
me.getForm().trackResetOnLoad = true;
|
|
},
|
|
|
|
//
|
|
// Grid listener added when this is rendered.
|
|
// Keep our containing element sized correctly
|
|
//
|
|
onGridResize: function() {
|
|
var me = this,
|
|
clientWidth = me.getClientWidth(),
|
|
grid = me.editingPlugin.grid,
|
|
gridBody = grid.body,
|
|
btns = me.getFloatingButtons();
|
|
|
|
me.setLocalX(gridBody.getOffsetsTo(grid)[0] + gridBody.getBorderWidth('l') - grid.el.getBorderWidth('l'));
|
|
|
|
me.setWidth(clientWidth);
|
|
btns.setLocalX((clientWidth - btns.getWidth()) / 2);
|
|
},
|
|
|
|
onFieldRender: function(field){
|
|
var me = this,
|
|
column = field.column;
|
|
|
|
if (column.isVisible()) {
|
|
me.syncFieldWidth(column);
|
|
} else if (!column.rendered) {
|
|
// column is pending a layout, so we can't set the width until it does
|
|
me.view.headerCt.on({
|
|
afterlayout: Ext.Function.bind(me.syncFieldWidth, me, [column]),
|
|
single: true
|
|
});
|
|
}
|
|
},
|
|
|
|
syncFieldWidth: function(column) {
|
|
var field = column.getEditor(),
|
|
width;
|
|
field._marginWidth = (field._marginWidth || field.el.getMargin('lr'));
|
|
width = column.getWidth() - field._marginWidth;
|
|
field.setWidth(width);
|
|
if (field.xtype === 'displayfield') {
|
|
// displayfield must have the width set on the inputEl for ellipsis to work
|
|
field.inputWidth = width;
|
|
}
|
|
},
|
|
|
|
onFieldChange: function() {
|
|
var me = this,
|
|
form = me.getForm(),
|
|
valid = form.isValid();
|
|
if (me.errorSummary && me.isVisible()) {
|
|
me[valid ? 'hideToolTip' : 'showToolTip']();
|
|
}
|
|
me.updateButton(valid);
|
|
me.isValid = valid;
|
|
},
|
|
|
|
updateButton: function(valid){
|
|
var buttons = this.floatingButtons;
|
|
if (buttons) {
|
|
buttons.child('#update').setDisabled(!valid);
|
|
} else {
|
|
// set flag so we can disabled when created if needed
|
|
this.updateButtonDisabled = !valid;
|
|
}
|
|
},
|
|
|
|
afterRender: function() {
|
|
var me = this,
|
|
plugin = me.editingPlugin,
|
|
grid = plugin.grid,
|
|
view = grid.lockable ? grid.normalGrid.view : grid.view,
|
|
field;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// The scrollingViewEl is the TableView which scrolls
|
|
me.scrollingView = view;
|
|
me.scrollingViewEl = view.el;
|
|
view.mon(me.scrollingViewEl, 'scroll', me.onViewScroll, me);
|
|
|
|
// Prevent from bubbling click events to the grid view
|
|
me.mon(me.el, {
|
|
click: Ext.emptyFn,
|
|
stopPropagation: true
|
|
});
|
|
|
|
// Ensure that the editor width always matches the total header width
|
|
me.mon(grid, {
|
|
resize: me.onGridResize,
|
|
scope: me
|
|
});
|
|
|
|
me.el.swallowEvent([
|
|
'keypress',
|
|
'keydown'
|
|
]);
|
|
|
|
me.fieldScroller = me.normalColumnContainer.layout.innerCt;
|
|
me.fieldScroller.dom.style.overflow = 'hidden';
|
|
me.fieldScroller.on({
|
|
scroll: me.onFieldContainerScroll,
|
|
scope: me
|
|
});
|
|
|
|
me.keyNav = new Ext.util.KeyNav(me.el, {
|
|
enter: plugin.completeEdit,
|
|
esc: plugin.onEscKey,
|
|
scope: plugin
|
|
});
|
|
|
|
me.mon(plugin.view, {
|
|
beforerefresh: me.onBeforeViewRefresh,
|
|
refresh: me.onViewRefresh,
|
|
itemremove: me.onViewItemRemove,
|
|
scope: me
|
|
});
|
|
|
|
// Prevent trying to reposition while we set everything up
|
|
me.preventReposition = true;
|
|
Ext.Array.each(me.query('[isFormField]'), function(field) {
|
|
if (field.column.isVisible()) {
|
|
me.onColumnShow(field.column);
|
|
}
|
|
}, me);
|
|
delete me.preventReposition;
|
|
},
|
|
|
|
onBeforeViewRefresh: function(view) {
|
|
var me = this,
|
|
viewDom = view.el.dom;
|
|
|
|
if (me.el.dom.parentNode === viewDom) {
|
|
viewDom.removeChild(me.el.dom);
|
|
}
|
|
},
|
|
|
|
onViewRefresh: function(view) {
|
|
var me = this,
|
|
context = me.context,
|
|
row;
|
|
|
|
// Recover our row node after a view refresh
|
|
if (context && (row = view.getNode(context.record, true))) {
|
|
context.row = row;
|
|
me.reposition();
|
|
if (me.tooltip && me.tooltip.isVisible()) {
|
|
me.tooltip.setTarget(context.row);
|
|
}
|
|
} else {
|
|
me.editingPlugin.cancelEdit();
|
|
}
|
|
},
|
|
|
|
onViewItemRemove: function(record, index) {
|
|
var context = this.context;
|
|
if (context && record === context.record) {
|
|
// if the record being edited was removed, cancel editing
|
|
this.editingPlugin.cancelEdit();
|
|
}
|
|
},
|
|
|
|
onViewScroll: function() {
|
|
var me = this,
|
|
viewEl = me.editingPlugin.view.el,
|
|
scrollingViewEl = me.scrollingViewEl,
|
|
scrollTop = scrollingViewEl.dom.scrollTop,
|
|
scrollLeft = scrollingViewEl.getScrollLeft(),
|
|
scrollLeftChanged = scrollLeft !== me.lastScrollLeft,
|
|
scrollTopChanged = scrollTop !== me.lastScrollTop,
|
|
row;
|
|
|
|
me.lastScrollTop = scrollTop;
|
|
me.lastScrollLeft = scrollLeft;
|
|
if (me.isVisible()) {
|
|
row = Ext.getDom(me.context.row.id);
|
|
|
|
// Only reposition if the row is in the DOM (buffered rendering may mean the context row is not there)
|
|
if (row && viewEl.contains(row)) {
|
|
if (scrollTopChanged) {
|
|
|
|
// The row element in the context may be stale due to buffered rendering removing out-of-view rows, then re-inserting newly rendered ones
|
|
me.context.row = row;
|
|
me.reposition(null, true);
|
|
if ((me.tooltip && me.tooltip.isVisible()) || me.hiddenTip) {
|
|
me.repositionTip();
|
|
}
|
|
|
|
me.syncEditorClip();
|
|
}
|
|
}
|
|
// If row is NOT in the DOM, ensure the editor is out of sight
|
|
else {
|
|
me.setLocalY(-400);
|
|
}
|
|
}
|
|
|
|
// Keep fields' left/right scroll position synced with view's left/right scroll
|
|
if (me.rendered && scrollLeftChanged) {
|
|
me.syncFieldsHorizontalScroll();
|
|
}
|
|
},
|
|
|
|
// Synchronize the horizontal scroll position of the fields with the state of the grid view
|
|
syncFieldsHorizontalScroll: function() {
|
|
// Set overflow style here because it is an embedded element and the "style" Component config does not target it.
|
|
this.fieldScroller.setScrollLeft(this.lastScrollLeft);
|
|
},
|
|
|
|
// Synchronize the horizontal scroll position of the grid view with the fields.
|
|
onFieldContainerScroll: function() {
|
|
this.scrollingViewEl.setScrollLeft(this.fieldScroller.getScrollLeft());
|
|
},
|
|
|
|
onColumnResize: function(column, width) {
|
|
var me = this;
|
|
|
|
if (me.rendered) {
|
|
// Need to ensure our lockable/normal horizontal scrollrange is set
|
|
me.onGridResize();
|
|
me.onViewScroll();
|
|
if (!column.isGroupHeader) {
|
|
me.syncFieldWidth(column);
|
|
me.repositionIfVisible();
|
|
}
|
|
}
|
|
},
|
|
|
|
onColumnHide: function(column) {
|
|
if (!column.isGroupHeader) {
|
|
column.getEditor().hide();
|
|
this.repositionIfVisible();
|
|
}
|
|
},
|
|
|
|
onColumnShow: function(column) {
|
|
var me = this;
|
|
|
|
if (me.rendered && !column.isGroupHeader) {
|
|
column.getEditor().show();
|
|
me.syncFieldWidth(column);
|
|
if (!me.preventReposition) {
|
|
this.repositionIfVisible();
|
|
}
|
|
}
|
|
},
|
|
|
|
onColumnMove: function(column, fromIdx, toIdx) {
|
|
var me = this,
|
|
i, incr = 1, len, field, fieldIdx,
|
|
fieldContainer = column.isLocked() ? me.lockedColumnContainer : me.normalColumnContainer;
|
|
|
|
// If moving a group, move each leaf header
|
|
if (column.isGroupHeader) {
|
|
Ext.suspendLayouts();
|
|
column = column.getGridColumns();
|
|
|
|
if (toIdx > fromIdx) {
|
|
toIdx--;
|
|
incr = 0;
|
|
}
|
|
|
|
this.addFieldsForColumn(column);
|
|
for (i = 0, len = column.length; i < len; i++, fromIdx += incr, toIdx += incr) {
|
|
field = column[i].getEditor();
|
|
fieldIdx = fieldContainer.items.indexOf(field);
|
|
|
|
// If the field is not in the container (moved from the main headerCt, INTO a group header)
|
|
// then insert it into the correct place
|
|
if (fieldIdx === -1) {
|
|
fieldContainer.insert(toIdx, field);
|
|
}
|
|
|
|
// If the field has not already been processed by an onColumnAdd (move from a group header INTO the main headerCt), then move it
|
|
else if (fieldIdx != toIdx) {
|
|
fieldContainer.move(fromIdx, toIdx);
|
|
}
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
} else {
|
|
if (toIdx > fromIdx) {
|
|
toIdx--;
|
|
}
|
|
this.addFieldsForColumn(column);
|
|
field = column.getEditor();
|
|
fieldIdx = fieldContainer.items.indexOf(field);
|
|
if (fieldIdx === -1) {
|
|
fieldContainer.insert(toIdx, field);
|
|
}
|
|
else if (fieldIdx != toIdx) {
|
|
fieldContainer.move(fromIdx, toIdx);
|
|
}
|
|
}
|
|
},
|
|
|
|
onColumnAdd: function(column) {
|
|
|
|
// If a column header added, process its leaves
|
|
if (column.isGroupHeader) {
|
|
column = column.getGridColumns();
|
|
}
|
|
//this.preventReposition = true;
|
|
this.addFieldsForColumn(column);
|
|
this.insertColumnEditor(column);
|
|
this.preventReposition = false;
|
|
},
|
|
|
|
insertColumnEditor: function(column) {
|
|
var me = this,
|
|
fieldContainer,
|
|
len, i;
|
|
|
|
if (Ext.isArray(column)) {
|
|
for (i = 0, len = column.length; i < len; i++) {
|
|
me.insertColumnEditor(column[i]);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!column.getEditor) {
|
|
return;
|
|
}
|
|
|
|
fieldContainer = column.isLocked() ? me.lockedColumnContainer : me.normalColumnContainer;
|
|
|
|
// Insert the column's field into the editor panel.
|
|
fieldContainer.insert(column.getVisibleIndex(), column.getEditor());
|
|
},
|
|
|
|
onColumnRemove: function(ct, column) {
|
|
column = column.isGroupHeader ? column.getGridColumns() : column;
|
|
this.removeColumnEditor(column);
|
|
},
|
|
|
|
removeColumnEditor: function(column) {
|
|
var me = this,
|
|
field,
|
|
len, i;
|
|
|
|
if (Ext.isArray(column)) {
|
|
for (i = 0, len = column.length; i < len; i++) {
|
|
me.removeColumnEditor(column[i]);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (column.hasEditor()) {
|
|
field = column.getEditor();
|
|
if (field && field.ownerCt) {
|
|
field.ownerCt.remove(field, false);
|
|
}
|
|
}
|
|
},
|
|
|
|
onColumnReplace: function(map, fieldId, column, oldColumn) {
|
|
this.onColumnRemove(oldColumn.ownerCt, oldColumn);
|
|
},
|
|
|
|
getFloatingButtons: function() {
|
|
var me = this,
|
|
btns = me.floatingButtons;
|
|
|
|
if (!btns) {
|
|
me.floatingButtons = btns = new Ext.grid.RowEditorButtons({
|
|
rowEditor: me
|
|
});
|
|
}
|
|
return btns;
|
|
},
|
|
|
|
repositionIfVisible: function(c) {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
// If we're showing ourselves, jump out
|
|
// If the component we're showing doesn't contain the view
|
|
if (c && (c == me || !c.el.isAncestor(view.el))) {
|
|
return;
|
|
}
|
|
|
|
if (me.isVisible() && view.isVisible(true)) {
|
|
me.reposition();
|
|
}
|
|
},
|
|
|
|
getRefOwner: function() {
|
|
return this.editingPlugin.grid;
|
|
},
|
|
|
|
// Lie to the CQ system about our nesting structure.
|
|
// Pretend all the fields are always immediate children.
|
|
// Include the two buttons.
|
|
getRefItems: function() {
|
|
var me = this,
|
|
result;
|
|
|
|
if (me.lockable) {
|
|
result = me.lockedColumnContainer.getRefItems();
|
|
result.push.apply(result, me.normalColumnContainer.getRefItems());
|
|
} else {
|
|
result = me.callParent();
|
|
}
|
|
result.push.apply(result, me.getFloatingButtons().getRefItems());
|
|
return result;
|
|
},
|
|
|
|
reposition: function(animateConfig, fromScrollHandler) {
|
|
var me = this,
|
|
context = me.context,
|
|
row = context && Ext.get(context.row),
|
|
yOffset = 0,
|
|
rowTop,
|
|
localY,
|
|
deltaY,
|
|
afterPosition;
|
|
|
|
// Position this editor if the context row is rendered (buffered rendering may mean that it's not in the DOM at all)
|
|
if (row && Ext.isElement(row.dom)) {
|
|
|
|
deltaY = me.syncButtonPosition(me.getScrollDelta());
|
|
|
|
if (!me.editingPlugin.grid.rowLines) {
|
|
// When the grid does not have rowLines we add a bottom border to the previous
|
|
// row when the row is focused, but subtract the border width from the
|
|
// top padding to keep the row from changing size. This adjusts the top offset
|
|
// of the cell edtor to account for the added border.
|
|
yOffset = -parseInt(row.first().getStyle('border-bottom-width'));
|
|
}
|
|
rowTop = me.calculateLocalRowTop(row);
|
|
localY = me.calculateEditorTop(rowTop) + yOffset;
|
|
|
|
// If not being called from scroll handler...
|
|
// If the editor's top will end up above the fold
|
|
// or the bottom will end up below the fold,
|
|
// organize an afterPosition handler which will bring it into view and focus the correct input field
|
|
if (!fromScrollHandler) {
|
|
afterPosition = function() {
|
|
if (deltaY) {
|
|
me.scrollingViewEl.scrollBy(0, deltaY, true);
|
|
}
|
|
me.focusContextCell();
|
|
}
|
|
}
|
|
|
|
me.syncEditorClip();
|
|
|
|
// Get the y position of the row relative to its top-most static parent.
|
|
// offsetTop will be relative to the table, and is incorrect
|
|
// when mixed with certain grid features (e.g., grouping).
|
|
if (animateConfig) {
|
|
me.animate(Ext.applyIf({
|
|
to: {
|
|
top: localY
|
|
},
|
|
duration: animateConfig.duration || 125,
|
|
callback: afterPosition
|
|
}, animateConfig));
|
|
} else {
|
|
me.setLocalY(localY);
|
|
if (afterPosition) {
|
|
afterPosition();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the scroll delta required to scroll the context row into view in order to make
|
|
* the whole of this editor visible.
|
|
* @return {Number} the scroll delta. Zero if scrolling is not required.
|
|
*/
|
|
getScrollDelta: function() {
|
|
var me = this,
|
|
scrollingViewDom = me.scrollingViewEl.dom,
|
|
context = me.context,
|
|
body = me.body,
|
|
deltaY = 0;
|
|
|
|
if (context) {
|
|
deltaY = Ext.fly(context.row).getOffsetsTo(scrollingViewDom)[1] - body.getBorderPadding().beforeY;
|
|
if (deltaY > 0) {
|
|
deltaY = Math.max(deltaY + me.getHeight() + me.floatingButtons.getHeight() -
|
|
scrollingViewDom.clientHeight - body.getBorderWidth('b'), 0);
|
|
}
|
|
}
|
|
return deltaY;
|
|
},
|
|
|
|
//
|
|
// Calculates the top pixel position of the passed row within the view's scroll space.
|
|
// So in a large, scrolled grid, this could be several thousand pixels.
|
|
//
|
|
calculateLocalRowTop: function(row) {
|
|
var grid = this.editingPlugin.grid;
|
|
return Ext.fly(row).getOffsetsTo(grid)[1] - grid.el.getBorderWidth('t') + this.lastScrollTop;
|
|
},
|
|
|
|
// Given the top pixel position of a row in the scroll space,
|
|
// calculate the editor top position in the view's encapsulating element.
|
|
// This will only ever be in the visible range of the view's element.
|
|
calculateEditorTop: function(rowTop) {
|
|
return rowTop - this.body.getBorderPadding().beforeY - this.lastScrollTop;
|
|
},
|
|
|
|
getClientWidth: function() {
|
|
var me = this,
|
|
grid = me.editingPlugin.grid,
|
|
result;
|
|
|
|
if (me.lockable) {
|
|
result =
|
|
grid.lockedGrid.getWidth() +
|
|
grid.normalGrid.view.el.dom.clientWidth - 1;
|
|
}
|
|
else {
|
|
result = grid.view.el.dom.clientWidth;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
getEditor: function(fieldInfo) {
|
|
var me = this;
|
|
|
|
if (Ext.isNumber(fieldInfo)) {
|
|
// Query only form fields. This just future-proofs us in case we add
|
|
// other components to RowEditor later on. Don't want to mess with
|
|
// indices.
|
|
return me.query('[isFormField]')[fieldInfo];
|
|
} else if (fieldInfo.isHeader && !fieldInfo.isGroupHeader) {
|
|
return fieldInfo.getEditor();
|
|
}
|
|
},
|
|
|
|
addFieldsForColumn: function(column, initial) {
|
|
var me = this,
|
|
i,
|
|
length, field;
|
|
|
|
if (Ext.isArray(column)) {
|
|
for (i = 0, length = column.length; i < length; i++) {
|
|
me.addFieldsForColumn(column[i], initial);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (column.getEditor) {
|
|
|
|
// Get a default display field if necessary
|
|
field = column.getEditor(null, {
|
|
xtype: 'displayfield',
|
|
// Override Field's implementation so that the default display fields will not return values. This is done because
|
|
// the display field will pick up column renderers from the grid.
|
|
getModelData: function() {
|
|
return null;
|
|
}
|
|
});
|
|
if (column.align === 'right') {
|
|
field.fieldStyle = 'text-align:right';
|
|
}
|
|
|
|
if (column.xtype === 'actioncolumn') {
|
|
field.fieldCls += ' ' + Ext.baseCSSPrefix + 'form-action-col-field'
|
|
}
|
|
|
|
if (me.isVisible() && me.context) {
|
|
if (field.is('displayfield')) {
|
|
me.renderColumnData(field, me.context.record, column);
|
|
} else {
|
|
field.suspendEvents();
|
|
field.setValue(me.context.record.get(column.dataIndex));
|
|
field.resumeEvents();
|
|
}
|
|
}
|
|
if (column.hidden) {
|
|
me.onColumnHide(column);
|
|
} else if (column.rendered && !initial) {
|
|
// Setting after initial render
|
|
me.onColumnShow(column);
|
|
}
|
|
}
|
|
},
|
|
|
|
loadRecord: function(record) {
|
|
var me = this,
|
|
form = me.getForm(),
|
|
fields = form.getFields(),
|
|
items = fields.items,
|
|
length = items.length,
|
|
i, displayFields,
|
|
isValid;
|
|
|
|
// temporarily suspend events on form fields before loading record to prevent the fields' change events from firing
|
|
for (i = 0; i < length; i++) {
|
|
items[i].suspendEvents();
|
|
}
|
|
|
|
form.loadRecord(record);
|
|
|
|
for (i = 0; i < length; i++) {
|
|
items[i].resumeEvents();
|
|
}
|
|
|
|
isValid = form.isValid();
|
|
if (me.errorSummary) {
|
|
if (isValid) {
|
|
me.hideToolTip();
|
|
} else {
|
|
me.showToolTip();
|
|
}
|
|
}
|
|
|
|
me.updateButton(isValid);
|
|
|
|
// render display fields so they honor the column renderer/template
|
|
displayFields = me.query('>displayfield');
|
|
length = displayFields.length;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
me.renderColumnData(displayFields[i], record);
|
|
}
|
|
},
|
|
|
|
renderColumnData: function(field, record, activeColumn) {
|
|
var me = this,
|
|
grid = me.editingPlugin.grid,
|
|
headerCt = grid.headerCt,
|
|
view = me.scrollingView,
|
|
store = view.dataSource,
|
|
column = activeColumn || field.column,
|
|
value = record.get(column.dataIndex),
|
|
renderer = column.editRenderer || column.renderer,
|
|
metaData,
|
|
rowIdx,
|
|
colIdx;
|
|
|
|
// honor our column's renderer (TemplateHeader sets renderer for us!)
|
|
if (renderer) {
|
|
metaData = { tdCls: '', style: '' };
|
|
rowIdx = store.indexOf(record);
|
|
colIdx = headerCt.getHeaderIndex(column);
|
|
|
|
value = renderer.call(
|
|
column.scope || headerCt.ownerCt,
|
|
value,
|
|
metaData,
|
|
record,
|
|
rowIdx,
|
|
colIdx,
|
|
store,
|
|
view
|
|
);
|
|
}
|
|
|
|
field.setRawValue(value);
|
|
field.resetOriginalValue();
|
|
},
|
|
|
|
beforeEdit: function() {
|
|
var me = this,
|
|
scrollDelta;
|
|
|
|
if (me.isVisible() && me.errorSummary && !me.autoCancel && me.isDirty()) {
|
|
|
|
// Scroll the visible RowEditor that is in error state back into view
|
|
scrollDelta = me.getScrollDelta();
|
|
if (scrollDelta) {
|
|
me.scrollingViewEl.scrollBy(0, scrollDelta, true)
|
|
}
|
|
me.showToolTip();
|
|
return false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Start editing the specified grid at the specified position.
|
|
* @param {Ext.data.Model} record The Store data record which backs the row to be edited.
|
|
* @param {Ext.data.Model} columnHeader The Column object defining the column to be edited.
|
|
*/
|
|
startEdit: function(record, columnHeader) {
|
|
var me = this,
|
|
editingPlugin = me.editingPlugin,
|
|
grid = editingPlugin.grid,
|
|
context = me.context = editingPlugin.context;
|
|
|
|
if (!me.rendered) {
|
|
me.width = me.getClientWidth();
|
|
me.render(grid.el, grid.el.dom.firstChild);
|
|
me.getFloatingButtons().render(me.el);
|
|
// On first show we need to ensure that we have the scroll positions cached
|
|
me.onViewScroll();
|
|
} else {
|
|
me.syncFieldsHorizontalScroll();
|
|
}
|
|
|
|
if (me.isVisible()) {
|
|
me.reposition(true);
|
|
} else {
|
|
me.show();
|
|
}
|
|
|
|
// Make sure the container el is correctly sized.
|
|
me.onGridResize();
|
|
|
|
// make sure our row is selected before editing
|
|
context.grid.getSelectionModel().select(record);
|
|
|
|
// Reload the record data
|
|
me.loadRecord(record);
|
|
},
|
|
|
|
// determines the amount by which the row editor will overflow, and flips the buttons
|
|
// to the top of the editor if the required scroll amount is greater than the available
|
|
// scroll space. Returns the scrollDelta required to scroll the editor into view after
|
|
// adjusting the button position.
|
|
syncButtonPosition: function(scrollDelta) {
|
|
var me = this,
|
|
floatingButtons = me.getFloatingButtons(),
|
|
scrollingViewElDom = me.scrollingViewEl.dom,
|
|
overflow = this.getScrollDelta() - (scrollingViewElDom.scrollHeight -
|
|
scrollingViewElDom.scrollTop - scrollingViewElDom.clientHeight);
|
|
|
|
if (overflow > 0) {
|
|
if (!me._buttonsOnTop) {
|
|
floatingButtons.setButtonPosition('top');
|
|
me._buttonsOnTop = true;
|
|
}
|
|
scrollDelta = 0;
|
|
} else if (me._buttonsOnTop) {
|
|
floatingButtons.setButtonPosition('bottom');
|
|
me._buttonsOnTop = false;
|
|
}
|
|
|
|
return scrollDelta;
|
|
},
|
|
|
|
// since the editor is rendered to the grid el, it must be clipped when scrolled
|
|
// outside of the grid view area so that it does not overlap the scrollbar or docked items
|
|
syncEditorClip: function() {
|
|
var me = this,
|
|
overflow = me.getScrollDelta(),
|
|
btnHeight;
|
|
|
|
if (overflow) {
|
|
// The editor is overflowing outside of the view area, either above or below
|
|
me.isOverflowing = true;
|
|
btnHeight = me.floatingButtons.getHeight();
|
|
|
|
if (overflow > 0) {
|
|
// editor is overflowing the bottom of the view
|
|
me.clipBottom(Math.max(me.getHeight() - overflow + btnHeight, -btnHeight));
|
|
} else if (overflow < 0) {
|
|
// editor is overflowing the top of the view
|
|
overflow = Math.abs(overflow);
|
|
me.clipTop(Math.max(overflow, 0));
|
|
}
|
|
} else if (me.isOverflowing) {
|
|
me.clearClip();
|
|
me.isOverflowing = false;
|
|
}
|
|
},
|
|
|
|
// Focus the cell on start edit based upon the current context
|
|
focusContextCell: function() {
|
|
var field = this.getEditor(this.context.column);
|
|
if (field && field.focus) {
|
|
field.focus();
|
|
}
|
|
},
|
|
|
|
cancelEdit: function() {
|
|
var me = this,
|
|
form = me.getForm(),
|
|
fields = form.getFields(),
|
|
items = fields.items,
|
|
length = items.length,
|
|
i;
|
|
|
|
me.hide();
|
|
form.clearInvalid();
|
|
|
|
// temporarily suspend events on form fields before reseting the form to prevent the fields' change events from firing
|
|
for (i = 0; i < length; i++) {
|
|
items[i].suspendEvents();
|
|
}
|
|
|
|
form.reset();
|
|
|
|
for (i = 0; i < length; i++) {
|
|
items[i].resumeEvents();
|
|
}
|
|
},
|
|
|
|
completeEdit: function() {
|
|
var me = this,
|
|
form = me.getForm();
|
|
|
|
if (!form.isValid()) {
|
|
return false;
|
|
}
|
|
|
|
form.updateRecord(me.context.record);
|
|
me.hide();
|
|
return true;
|
|
},
|
|
|
|
onShow: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.reposition();
|
|
},
|
|
|
|
onHide: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
if (me.tooltip) {
|
|
me.hideToolTip();
|
|
}
|
|
if (me.context) {
|
|
me.context.view.focusRow(me.context.record);
|
|
me.context = null;
|
|
}
|
|
},
|
|
|
|
isDirty: function() {
|
|
var me = this,
|
|
form = me.getForm();
|
|
return form.isDirty();
|
|
},
|
|
|
|
getToolTip: function() {
|
|
return this.tooltip || (this.tooltip = new Ext.tip.ToolTip({
|
|
cls: Ext.baseCSSPrefix + 'grid-row-editor-errors',
|
|
title: this.errorsText,
|
|
autoHide: false,
|
|
closable: true,
|
|
closeAction: 'disable',
|
|
anchor: 'left',
|
|
anchorToTarget: false
|
|
}));
|
|
},
|
|
|
|
hideToolTip: function() {
|
|
var me = this,
|
|
tip = me.getToolTip();
|
|
if (tip.rendered) {
|
|
tip.disable();
|
|
}
|
|
me.hiddenTip = false;
|
|
},
|
|
|
|
showToolTip: function() {
|
|
var me = this,
|
|
tip = me.getToolTip();
|
|
|
|
tip.showAt([0, 0]);
|
|
tip.update(me.getErrors());
|
|
me.repositionTip();
|
|
tip.enable();
|
|
},
|
|
|
|
repositionTip: function() {
|
|
var me = this,
|
|
tip = me.getToolTip(),
|
|
context = me.context,
|
|
row = Ext.get(context.row),
|
|
viewEl = me.scrollingViewEl,
|
|
viewHeight = viewEl.dom.clientHeight,
|
|
viewTop = me.lastScrollTop,
|
|
viewBottom = viewTop + viewHeight,
|
|
rowHeight = row.getHeight(),
|
|
rowTop = row.getOffsetsTo(me.context.view.body)[1],
|
|
rowBottom = rowTop + rowHeight;
|
|
|
|
if (rowBottom > viewTop && rowTop < viewBottom) {
|
|
tip.showAt(tip.getAlignToXY(viewEl, 'tl-tr', [15, row.getOffsetsTo(viewEl)[1]]));
|
|
me.hiddenTip = false;
|
|
} else {
|
|
tip.hide();
|
|
me.hiddenTip = true;
|
|
}
|
|
},
|
|
|
|
getErrors: function() {
|
|
var me = this,
|
|
errors = [],
|
|
fields = me.query('>[isFormField]'),
|
|
length = fields.length,
|
|
i;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
errors = errors.concat(
|
|
Ext.Array.map(fields[i].getErrors(), me.createErrorListItem)
|
|
);
|
|
}
|
|
|
|
// Only complain about unsaved changes if all the fields are valid
|
|
if (!errors.length && !me.autoCancel && me.isDirty()) {
|
|
errors[0] = me.createErrorListItem(me.dirtyText);
|
|
}
|
|
|
|
return '<ul class="' + Ext.plainListCls + '">' + errors.join('') + '</ul>';
|
|
},
|
|
|
|
createErrorListItem: function(e) {
|
|
return '<li class="' + Ext.baseCSSPrefix + 'grid-row-editor-errors-item">' + e + '</li>';
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
Ext.destroy(this.floatingButtons, this.tooltip);
|
|
this.callParent();
|
|
},
|
|
|
|
clipBottom: function(value) {
|
|
this.el.setStyle('clip', 'rect(-1000px auto ' + value + 'px auto)');
|
|
},
|
|
|
|
clipTop: function(value) {
|
|
this.el.setStyle('clip', 'rect(' + value + 'px auto 1000px auto)');
|
|
},
|
|
|
|
clearClip: function(el) {
|
|
this.el.setStyle(
|
|
'clip',
|
|
Ext.isIE8m || Ext.isIEQuirks ? 'rect(-1000px auto 1000px auto)' : 'auto'
|
|
);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.grid.RowEditor', {
|
|
override: 'Ext.grid.RowEditor',
|
|
|
|
setButtonPosition: function(btnEl, left){
|
|
if (this.getHierarchyState().rtl) {
|
|
btnEl.rtlSetLocalXY(left, this.el.dom.offsetHeight - 1);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.view.DropZone', {
|
|
extend: Ext.dd.DropZone ,
|
|
|
|
indicatorHtml: '<div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-left"></div><div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-right"></div>',
|
|
indicatorCls: Ext.baseCSSPrefix + 'grid-drop-indicator',
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
Ext.apply(me, config);
|
|
|
|
// Create a ddGroup unless one has been configured.
|
|
// User configuration of ddGroups allows users to specify which
|
|
// DD instances can interact with each other. Using one
|
|
// based on the id of the View would isolate it and mean it can only
|
|
// interact with a DragZone on the same View also using a generated ID.
|
|
if (!me.ddGroup) {
|
|
me.ddGroup = 'view-dd-zone-' + me.view.id;
|
|
}
|
|
|
|
// The DropZone's encapsulating element is the View's main element. It must be this because drop gestures
|
|
// may require scrolling on hover near a scrolling boundary. In Ext 4.x two DD instances may not use the
|
|
// same element, so a DragZone on this same View must use the View's parent element as its element.
|
|
me.callParent([me.view.el]);
|
|
},
|
|
|
|
// 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() {
|
|
var me = this,
|
|
result;
|
|
|
|
me.lock();
|
|
result = me.view.fireEvent.apply(me.view, arguments);
|
|
me.unlock();
|
|
return result;
|
|
},
|
|
|
|
getTargetFromEvent : function(e) {
|
|
var node = e.getTarget(this.view.getItemSelector()),
|
|
mouseY, nodeList, testNode, i, len, box;
|
|
|
|
// Not over a row node: The content may be narrower than the View's encapsulating element, so return the closest.
|
|
// If we fall through because the mouse is below the nodes (or there are no nodes), we'll get an onContainerOver call.
|
|
if (!node) {
|
|
mouseY = e.getPageY();
|
|
for (i = 0, nodeList = this.view.getNodes(), len = nodeList.length; i < len; i++) {
|
|
testNode = nodeList[i];
|
|
box = Ext.fly(testNode).getBox();
|
|
if (mouseY <= box.bottom) {
|
|
return testNode;
|
|
}
|
|
}
|
|
}
|
|
return node;
|
|
},
|
|
|
|
getIndicator: function() {
|
|
var me = this;
|
|
|
|
if (!me.indicator) {
|
|
me.indicator = new Ext.Component({
|
|
html: me.indicatorHtml,
|
|
cls: me.indicatorCls,
|
|
ownerCt: me.view,
|
|
floating: true,
|
|
shadow: false
|
|
});
|
|
}
|
|
return me.indicator;
|
|
},
|
|
|
|
getPosition: function(e, node) {
|
|
var y = e.getXY()[1],
|
|
region = Ext.fly(node).getRegion(),
|
|
pos;
|
|
|
|
if ((region.bottom - y) >= (region.bottom - region.top) / 2) {
|
|
pos = "before";
|
|
} else {
|
|
pos = "after";
|
|
}
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* @private Determines whether the record at the specified offset from the passed record
|
|
* is in the drag payload.
|
|
* @param records
|
|
* @param record
|
|
* @param offset
|
|
* @returns {Boolean} True if the targeted record is in the drag payload
|
|
*/
|
|
containsRecordAtOffset: function(records, record, offset) {
|
|
if (!record) {
|
|
return false;
|
|
}
|
|
var view = this.view,
|
|
recordIndex = view.indexOf(record),
|
|
nodeBefore = view.getNode(recordIndex + offset, true),
|
|
recordBefore = nodeBefore ? view.getRecord(nodeBefore) : null;
|
|
|
|
return recordBefore && Ext.Array.contains(records, recordBefore);
|
|
},
|
|
|
|
positionIndicator: function(node, data, e) {
|
|
var me = this,
|
|
view = me.view,
|
|
pos = me.getPosition(e, node),
|
|
overRecord = view.getRecord(node),
|
|
draggingRecords = data.records,
|
|
indicatorY;
|
|
|
|
if (!Ext.Array.contains(draggingRecords, overRecord) && (
|
|
pos == 'before' && !me.containsRecordAtOffset(draggingRecords, overRecord, -1) ||
|
|
pos == 'after' && !me.containsRecordAtOffset(draggingRecords, overRecord, 1)
|
|
)) {
|
|
me.valid = true;
|
|
|
|
if (me.overRecord != overRecord || me.currentPosition != pos) {
|
|
|
|
indicatorY = Ext.fly(node).getY() - view.el.getY() - 1;
|
|
if (pos == 'after') {
|
|
indicatorY += Ext.fly(node).getHeight();
|
|
}
|
|
me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, indicatorY);
|
|
|
|
// Cache the overRecord and the 'before' or 'after' indicator.
|
|
me.overRecord = overRecord;
|
|
me.currentPosition = pos;
|
|
}
|
|
} else {
|
|
me.invalidateDrop();
|
|
}
|
|
},
|
|
|
|
invalidateDrop: function() {
|
|
if (this.valid) {
|
|
this.valid = false;
|
|
this.getIndicator().hide();
|
|
}
|
|
},
|
|
|
|
// The mouse is over a View node
|
|
onNodeOver: function(node, dragZone, e, data) {
|
|
var me = this;
|
|
|
|
if (!Ext.Array.contains(data.records, me.view.getRecord(node))) {
|
|
me.positionIndicator(node, data, e);
|
|
}
|
|
return me.valid ? me.dropAllowed : me.dropNotAllowed;
|
|
},
|
|
|
|
// Moved out of the DropZone without dropping.
|
|
// Remove drop position indicator
|
|
notifyOut: function(node, dragZone, e, data) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.overRecord = me.currentPosition = null
|
|
me.valid = false;
|
|
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 me = this,
|
|
view = me.view,
|
|
count = view.dataSource.getCount();
|
|
|
|
// There are records, so position after the last one
|
|
if (count) {
|
|
me.positionIndicator(view.all.last(), data, e);
|
|
}
|
|
|
|
// No records, position the indicator at the top
|
|
else {
|
|
me.overRecord = me.currentPosition = null;
|
|
me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, 0);
|
|
me.valid = true;
|
|
}
|
|
return me.dropAllowed;
|
|
},
|
|
|
|
onContainerDrop : function(dd, e, data) {
|
|
return this.onNodeDrop(dd, null, e, data);
|
|
},
|
|
|
|
onNodeDrop: function(targetNode, dragZone, e, data) {
|
|
var me = this,
|
|
dropHandled = false,
|
|
|
|
// Create a closure to perform the operation which the event handler may use.
|
|
// Users may now set the wait parameter in 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 either the
|
|
// processDrop or cancelDrop methods.
|
|
dropHandlers = {
|
|
wait: false,
|
|
processDrop: function () {
|
|
me.invalidateDrop();
|
|
me.handleNodeDrop(data, me.overRecord, me.currentPosition);
|
|
dropHandled = true;
|
|
me.fireViewEvent('drop', targetNode, data, me.overRecord, me.currentPosition);
|
|
},
|
|
|
|
cancelDrop: function() {
|
|
me.invalidateDrop();
|
|
dropHandled = true;
|
|
}
|
|
},
|
|
performOperation = false;
|
|
|
|
if (me.valid) {
|
|
performOperation = me.fireViewEvent('beforedrop', targetNode, data, me.overRecord, me.currentPosition, dropHandlers);
|
|
if (dropHandlers.wait) {
|
|
return;
|
|
}
|
|
|
|
if (performOperation !== false) {
|
|
// If either of the drop handlers were called in the event handler, do not do it again.
|
|
if (!dropHandled) {
|
|
dropHandlers.processDrop();
|
|
}
|
|
}
|
|
}
|
|
return performOperation;
|
|
},
|
|
|
|
destroy: function(){
|
|
Ext.destroy(this.indicator);
|
|
delete this.indicator;
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.ViewDropZone', {
|
|
extend: Ext.view.DropZone ,
|
|
|
|
indicatorHtml: '<div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-left"></div><div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-right"></div>',
|
|
indicatorCls: Ext.baseCSSPrefix + 'grid-drop-indicator',
|
|
|
|
handleNodeDrop : function(data, record, position) {
|
|
var view = this.view,
|
|
store = view.getStore(),
|
|
index, records, i, len;
|
|
|
|
// If the copy flag is set, create a copy of the models
|
|
if (data.copy) {
|
|
records = data.records;
|
|
data.records = [];
|
|
for (i = 0, len = records.length; i < len; i++) {
|
|
data.records.push(records[i].copy());
|
|
}
|
|
} else {
|
|
/*
|
|
* Remove from the source store. We do this regardless of whether the store
|
|
* is the same bacsue the store currently doesn't handle moving records
|
|
* within the store. In the future it should be possible to do this.
|
|
* Here was pass the isMove parameter if we're moving to the same view.
|
|
*/
|
|
data.view.store.remove(data.records, data.view === view);
|
|
}
|
|
|
|
if (record && position) {
|
|
index = store.indexOf(record);
|
|
|
|
// 'after', or undefined (meaning a drop at index -1 on an empty View)...
|
|
if (position !== 'before') {
|
|
index++;
|
|
}
|
|
store.insert(index, data.records);
|
|
}
|
|
// No position specified - append.
|
|
else {
|
|
store.add(data.records);
|
|
}
|
|
|
|
view.getSelectionModel().select(data.records);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Plugin to add header resizing functionality to a HeaderContainer.
|
|
* Always resizing header to the left of the splitter you are resizing.
|
|
*/
|
|
Ext.define('Ext.grid.plugin.HeaderResizer', {
|
|
extend: Ext.AbstractPlugin ,
|
|
|
|
alias: 'plugin.gridheaderresizer',
|
|
|
|
disabled: false,
|
|
|
|
config: {
|
|
/**
|
|
* @cfg {Boolean} dynamic
|
|
* True to resize on the fly rather than using a proxy marker.
|
|
* @accessor
|
|
*/
|
|
dynamic: false
|
|
},
|
|
|
|
colHeaderCls: Ext.baseCSSPrefix + 'column-header',
|
|
|
|
minColWidth: 40,
|
|
maxColWidth: 1000,
|
|
wResizeCursor: 'col-resize',
|
|
eResizeCursor: 'col-resize',
|
|
// not using w and e resize bc we are only ever resizing one
|
|
// column
|
|
//wResizeCursor: Ext.isWebKit ? 'w-resize' : 'col-resize',
|
|
//eResizeCursor: Ext.isWebKit ? 'e-resize' : 'col-resize',
|
|
|
|
init: function(headerCt) {
|
|
this.headerCt = headerCt;
|
|
headerCt.on('render', this.afterHeaderRender, this, {single: true});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
if (this.tracker) {
|
|
this.tracker.destroy();
|
|
}
|
|
},
|
|
|
|
afterHeaderRender: function() {
|
|
var headerCt = this.headerCt,
|
|
el = headerCt.el;
|
|
|
|
headerCt.mon(el, 'mousemove', this.onHeaderCtMouseMove, this);
|
|
|
|
this.tracker = new Ext.dd.DragTracker({
|
|
disabled: this.disabled,
|
|
onBeforeStart: Ext.Function.bind(this.onBeforeStart, this),
|
|
onStart: Ext.Function.bind(this.onStart, this),
|
|
onDrag: Ext.Function.bind(this.onDrag, this),
|
|
onEnd: Ext.Function.bind(this.onEnd, this),
|
|
tolerance: 3,
|
|
autoStart: 300,
|
|
el: el
|
|
});
|
|
},
|
|
|
|
// As we mouse over individual headers, change the cursor to indicate
|
|
// that resizing is available, and cache the resize target header for use
|
|
// if/when they mousedown.
|
|
onHeaderCtMouseMove: function(e, t) {
|
|
var me = this,
|
|
prevSiblings,
|
|
headerEl, overHeader, resizeHeader, resizeHeaderOwnerGrid, ownerGrid;
|
|
|
|
if (me.headerCt.dragging) {
|
|
if (me.activeHd) {
|
|
me.activeHd.el.dom.style.cursor = '';
|
|
delete me.activeHd;
|
|
}
|
|
} else {
|
|
headerEl = e.getTarget('.' + me.colHeaderCls, 3, true);
|
|
|
|
if (headerEl){
|
|
overHeader = Ext.getCmp(headerEl.id);
|
|
|
|
// On left edge, go back to the previous non-hidden header.
|
|
if (overHeader.isOnLeftEdge(e)) {
|
|
resizeHeader = overHeader.previousNode('gridcolumn:not([hidden]):not([isGroupHeader])')
|
|
// There may not *be* a previous non-hidden header.
|
|
if (resizeHeader) {
|
|
|
|
ownerGrid = me.headerCt.up('tablepanel');
|
|
resizeHeaderOwnerGrid = resizeHeader.up('tablepanel');
|
|
|
|
// Need to check that previousNode didn't go outside the current grid/tree
|
|
// But in the case of a Grid which contains a locked and normal grid, allow previousNode to jump
|
|
// from the first column of the normalGrid to the last column of the lockedGrid
|
|
if (!((resizeHeaderOwnerGrid === ownerGrid) || ((ownerGrid.ownerCt.isXType('tablepanel')) && ownerGrid.ownerCt.view.lockedGrid === resizeHeaderOwnerGrid))) {
|
|
resizeHeader = null;
|
|
}
|
|
}
|
|
}
|
|
// Else, if on the right edge, we're resizing the column we are over
|
|
else if (overHeader.isOnRightEdge(e)) {
|
|
resizeHeader = overHeader;
|
|
}
|
|
// Between the edges: we are not resizing
|
|
else {
|
|
resizeHeader = null;
|
|
}
|
|
|
|
// We *are* resizing
|
|
if (resizeHeader) {
|
|
// If we're attempting to resize a group header, that cannot be resized,
|
|
// so find its last visible leaf header; Group headers are sized
|
|
// by the size of their child headers.
|
|
if (resizeHeader.isGroupHeader) {
|
|
prevSiblings = resizeHeader.getGridColumns();
|
|
resizeHeader = prevSiblings[prevSiblings.length - 1];
|
|
}
|
|
|
|
// Check if the header is resizable. Continue checking the old "fixed" property, bug also
|
|
// check whether the resizable property is set to false.
|
|
if (resizeHeader && !(resizeHeader.fixed || (resizeHeader.resizable === false) || me.disabled)) {
|
|
me.activeHd = resizeHeader;
|
|
overHeader.el.dom.style.cursor = me.eResizeCursor;
|
|
if (overHeader.triggerEl) {
|
|
overHeader.triggerEl.dom.style.cursor = me.eResizeCursor;
|
|
}
|
|
}
|
|
// reset
|
|
} else {
|
|
overHeader.el.dom.style.cursor = '';
|
|
if (overHeader.triggerEl) {
|
|
overHeader.triggerEl.dom.style.cursor = '';
|
|
}
|
|
me.activeHd = null;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// only start when there is an activeHd
|
|
onBeforeStart : function(e) {
|
|
// cache the activeHd because it will be cleared.
|
|
this.dragHd = this.activeHd;
|
|
|
|
if (!!this.dragHd && !this.headerCt.dragging) {
|
|
this.tracker.constrainTo = this.getConstrainRegion();
|
|
return true;
|
|
} else {
|
|
this.headerCt.dragging = false;
|
|
return false;
|
|
}
|
|
},
|
|
|
|
// get the region to constrain to, takes into account max and min col widths
|
|
getConstrainRegion: function() {
|
|
var me = this,
|
|
dragHdEl = me.dragHd.el,
|
|
rightAdjust = 0,
|
|
nextHd,
|
|
lockedGrid;
|
|
|
|
// If forceFit, then right constraint is based upon not being able to force the next header
|
|
// beyond the minColWidth. If there is no next header, then the header may not be expanded.
|
|
if (me.headerCt.forceFit) {
|
|
nextHd = me.dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
|
|
if (nextHd) {
|
|
if (!me.headerInSameGrid(nextHd)) {
|
|
nextHd = null;
|
|
}
|
|
rightAdjust = nextHd.getWidth() - me.minColWidth;
|
|
}
|
|
}
|
|
|
|
// If resize header is in a locked grid, the maxWidth has to be 30px within the available locking grid's width
|
|
else if ((lockedGrid = me.dragHd.up('tablepanel')).isLocked) {
|
|
rightAdjust = me.dragHd.up('[scrollerOwner]').getWidth() - lockedGrid.getWidth() - 30;
|
|
}
|
|
|
|
// Else ue our default max width
|
|
else {
|
|
rightAdjust = me.maxColWidth - dragHdEl.getWidth();
|
|
}
|
|
|
|
return me.adjustConstrainRegion(
|
|
dragHdEl.getRegion(),
|
|
0,
|
|
rightAdjust,
|
|
0,
|
|
me.minColWidth
|
|
);
|
|
},
|
|
|
|
// initialize the left and right hand side markers around
|
|
// the header that we are resizing
|
|
onStart: function(e){
|
|
var me = this,
|
|
dragHd = me.dragHd,
|
|
width = dragHd.el.getWidth(),
|
|
headerCt = dragHd.getOwnerHeaderCt(),
|
|
x, y, gridSection, markerOwner, lhsMarker, rhsMarker, markerHeight;
|
|
|
|
me.headerCt.dragging = true;
|
|
me.origWidth = width;
|
|
|
|
// setup marker proxies
|
|
if (!me.dynamic) {
|
|
gridSection = markerOwner = headerCt.up('tablepanel');
|
|
if (gridSection.ownerLockable) {
|
|
markerOwner = gridSection.ownerLockable;
|
|
}
|
|
x = me.getLeftMarkerX(markerOwner);
|
|
lhsMarker = markerOwner.getLhsMarker();
|
|
rhsMarker = markerOwner.getRhsMarker();
|
|
markerHeight = gridSection.body.getHeight() + headerCt.getHeight();
|
|
y = headerCt.getOffsetsTo(markerOwner)[1];
|
|
|
|
lhsMarker.setLocalY(y);
|
|
rhsMarker.setLocalY(y);
|
|
lhsMarker.setHeight(markerHeight);
|
|
rhsMarker.setHeight(markerHeight);
|
|
me.setMarkerX(lhsMarker, x);
|
|
me.setMarkerX(rhsMarker, x + width);
|
|
}
|
|
},
|
|
|
|
// synchronize the rhsMarker with the mouse movement
|
|
onDrag: function(e){
|
|
var me = this,
|
|
markerOwner;
|
|
|
|
if (me.dynamic) {
|
|
me.doResize();
|
|
} else {
|
|
markerOwner = this.headerCt.up('tablepanel');
|
|
if (markerOwner.ownerLockable) {
|
|
markerOwner = markerOwner.ownerLockable;
|
|
}
|
|
this.setMarkerX(this.getMovingMarker(markerOwner), this.calculateDragX(markerOwner));
|
|
}
|
|
},
|
|
|
|
getMovingMarker: function(markerOwner){
|
|
return markerOwner.getRhsMarker();
|
|
},
|
|
|
|
onEnd: function(e) {
|
|
this.headerCt.dragging = false;
|
|
if (this.dragHd) {
|
|
if (!this.dynamic) {
|
|
var markerOwner = this.headerCt.up('tablepanel');
|
|
|
|
// hide markers
|
|
if (markerOwner.ownerLockable) {
|
|
markerOwner = markerOwner.ownerLockable;
|
|
}
|
|
this.setMarkerX(markerOwner.getLhsMarker(), -9999);
|
|
this.setMarkerX(markerOwner.getRhsMarker(), -9999);
|
|
}
|
|
this.doResize();
|
|
}
|
|
},
|
|
|
|
doResize: function() {
|
|
var me = this,
|
|
dragHd = me.dragHd,
|
|
nextHd,
|
|
offset;
|
|
|
|
if (dragHd) {
|
|
offset = me.tracker.getOffset('point');
|
|
|
|
// resize the dragHd
|
|
if (dragHd.flex) {
|
|
delete dragHd.flex;
|
|
}
|
|
|
|
Ext.suspendLayouts();
|
|
|
|
// Set the new column width.
|
|
me.adjustColumnWidth(offset[0]);
|
|
|
|
// In the case of forceFit, change the following Header width.
|
|
// Constraining so that neither neighbour can be sized to below minWidth is handled in getConstrainRegion
|
|
if (me.headerCt.forceFit) {
|
|
nextHd = dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
|
|
if (nextHd && !me.headerInSameGrid(nextHd)) {
|
|
nextHd = null;
|
|
}
|
|
if (nextHd) {
|
|
delete nextHd.flex;
|
|
nextHd.setWidth(nextHd.getWidth() - offset[0]);
|
|
}
|
|
}
|
|
|
|
// Apply the two width changes by laying out the owning HeaderContainer
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
// nextNode can traverse out of this grid, possibly to others on the page, so limit it here
|
|
headerInSameGrid: function(header) {
|
|
var grid = this.dragHd.up('tablepanel');
|
|
|
|
return !!header.up(grid);
|
|
},
|
|
|
|
disable: function() {
|
|
this.disabled = true;
|
|
if (this.tracker) {
|
|
this.tracker.disable();
|
|
}
|
|
},
|
|
|
|
enable: function() {
|
|
this.disabled = false;
|
|
if (this.tracker) {
|
|
this.tracker.enable();
|
|
}
|
|
},
|
|
|
|
calculateDragX: function(markerOwner) {
|
|
return this.tracker.getXY('point')[0] - markerOwner.getX() - markerOwner.el.getBorderWidth('l');
|
|
},
|
|
|
|
getLeftMarkerX: function(markerOwner) {
|
|
return this.dragHd.getX() - markerOwner.getX() - markerOwner.el.getBorderWidth('l') - 1;
|
|
},
|
|
|
|
setMarkerX: function(marker, x) {
|
|
marker.setLocalX(x);
|
|
},
|
|
|
|
adjustConstrainRegion: function(region, t, r, b, l) {
|
|
return region.adjust(t, r, b, l);
|
|
},
|
|
|
|
adjustColumnWidth: function(offsetX) {
|
|
this.dragHd.setWidth(this.origWidth + offsetX);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.header.DragZone', {
|
|
extend: Ext.dd.DragZone ,
|
|
colHeaderSelector: '.' + Ext.baseCSSPrefix + 'column-header',
|
|
colInnerSelector: '.' + Ext.baseCSSPrefix + 'column-header-inner',
|
|
maxProxyWidth: 120,
|
|
|
|
constructor: function(headerCt) {
|
|
this.headerCt = headerCt;
|
|
this.ddGroup = this.getDDGroup();
|
|
this.callParent([headerCt.el]);
|
|
this.proxy.el.addCls(Ext.baseCSSPrefix + 'grid-col-dd');
|
|
},
|
|
|
|
getDDGroup: function() {
|
|
return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
|
|
},
|
|
|
|
getDragData: function(e) {
|
|
if (e.getTarget(this.colInnerSelector)) {
|
|
var header = e.getTarget(this.colHeaderSelector),
|
|
headerCmp,
|
|
ddel;
|
|
|
|
if (header) {
|
|
headerCmp = Ext.getCmp(header.id);
|
|
if (!this.headerCt.dragging && headerCmp.draggable && !(headerCmp.isOnLeftEdge(e) || headerCmp.isOnRightEdge(e))) {
|
|
ddel = document.createElement('div');
|
|
ddel.innerHTML = Ext.getCmp(header.id).text;
|
|
return {
|
|
ddel: ddel,
|
|
header: headerCmp
|
|
};
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
onBeforeDrag: function() {
|
|
return !(this.headerCt.dragging || this.disabled);
|
|
},
|
|
|
|
onInitDrag: function() {
|
|
this.headerCt.dragging = true;
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
onDragDrop: function() {
|
|
this.headerCt.dragging = false;
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
afterRepair: function() {
|
|
this.callParent();
|
|
this.headerCt.dragging = false;
|
|
},
|
|
|
|
getRepairXY: function() {
|
|
return this.dragData.header.el.getXY();
|
|
},
|
|
|
|
disable: function() {
|
|
this.disabled = true;
|
|
},
|
|
|
|
enable: function() {
|
|
this.disabled = false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.header.DropZone', {
|
|
extend: Ext.dd.DropZone ,
|
|
colHeaderCls: Ext.baseCSSPrefix + 'column-header',
|
|
proxyOffsets: [-4, -9],
|
|
|
|
constructor: function(headerCt){
|
|
this.headerCt = headerCt;
|
|
this.ddGroup = this.getDDGroup();
|
|
this.callParent([headerCt.el]);
|
|
},
|
|
|
|
getDDGroup: function() {
|
|
return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
|
|
},
|
|
|
|
getTargetFromEvent : function(e){
|
|
return e.getTarget('.' + this.colHeaderCls);
|
|
},
|
|
|
|
getTopIndicator: function() {
|
|
if (!this.topIndicator) {
|
|
this.self.prototype.topIndicator = Ext.DomHelper.append(Ext.getBody(), {
|
|
cls: "col-move-top",
|
|
html: " "
|
|
}, true);
|
|
this.self.prototype.indicatorXOffset = Math.floor((this.topIndicator.dom.offsetWidth + 1) / 2);
|
|
}
|
|
return this.topIndicator;
|
|
},
|
|
|
|
getBottomIndicator: function() {
|
|
if (!this.bottomIndicator) {
|
|
this.self.prototype.bottomIndicator = Ext.DomHelper.append(Ext.getBody(), {
|
|
cls: "col-move-bottom",
|
|
html: " "
|
|
}, true);
|
|
}
|
|
return this.bottomIndicator;
|
|
},
|
|
|
|
getLocation: function(e, t) {
|
|
var x = e.getXY()[0],
|
|
region = Ext.fly(t).getRegion(),
|
|
pos;
|
|
|
|
if ((region.right - x) <= (region.right - region.left) / 2) {
|
|
pos = "after";
|
|
} else {
|
|
pos = "before";
|
|
}
|
|
return {
|
|
pos: pos,
|
|
header: Ext.getCmp(t.id),
|
|
node: t
|
|
};
|
|
},
|
|
|
|
positionIndicator: function(data, node, e){
|
|
var me = this,
|
|
dragHeader = data.header,
|
|
dropLocation = me.getLocation(e, node),
|
|
targetHeader = dropLocation.header,
|
|
pos = dropLocation.pos,
|
|
nextHd,
|
|
prevHd,
|
|
topIndicator, bottomIndicator, topAnchor, bottomAnchor,
|
|
topXY, bottomXY, headerCtEl, minX, maxX,
|
|
allDropZones, ln, i, dropZone;
|
|
|
|
// Avoid expensive CQ lookups and DOM calculations if dropPosition has not changed
|
|
if (targetHeader === me.lastTargetHeader && pos === me.lastDropPos) {
|
|
return;
|
|
}
|
|
nextHd = dragHeader.nextSibling('gridcolumn:not([hidden])');
|
|
prevHd = dragHeader.previousSibling('gridcolumn:not([hidden])');
|
|
me.lastTargetHeader = targetHeader;
|
|
me.lastDropPos = pos;
|
|
|
|
// Cannot drag to before non-draggable start column
|
|
if (!targetHeader.draggable && pos === 'before' && targetHeader.getIndex() === 0) {
|
|
return false;
|
|
}
|
|
|
|
data.dropLocation = dropLocation;
|
|
|
|
if ((dragHeader !== targetHeader) &&
|
|
((pos === "before" && nextHd !== targetHeader) ||
|
|
(pos === "after" && prevHd !== targetHeader)) &&
|
|
!targetHeader.isDescendantOf(dragHeader)) {
|
|
|
|
// As we move in between different DropZones that are in the same
|
|
// group (such as the case when in a locked grid), invalidateDrop
|
|
// on the other dropZones.
|
|
allDropZones = Ext.dd.DragDropManager.getRelated(me);
|
|
ln = allDropZones.length;
|
|
i = 0;
|
|
|
|
for (; i < ln; i++) {
|
|
dropZone = allDropZones[i];
|
|
if (dropZone !== me && dropZone.invalidateDrop) {
|
|
dropZone.invalidateDrop();
|
|
}
|
|
}
|
|
|
|
me.valid = true;
|
|
topIndicator = me.getTopIndicator();
|
|
bottomIndicator = me.getBottomIndicator();
|
|
if (pos === 'before') {
|
|
topAnchor = 'bc-tl';
|
|
bottomAnchor = 'tc-bl';
|
|
} else {
|
|
topAnchor = 'bc-tr';
|
|
bottomAnchor = 'tc-br';
|
|
}
|
|
|
|
// Calculate arrow positions. Offset them to align exactly with column border line
|
|
topXY = topIndicator.getAlignToXY(targetHeader.el, topAnchor);
|
|
bottomXY = bottomIndicator.getAlignToXY(targetHeader.el, bottomAnchor);
|
|
|
|
// constrain the indicators to the viewable section
|
|
headerCtEl = me.headerCt.el;
|
|
minX = headerCtEl.getX() - me.indicatorXOffset;
|
|
maxX = headerCtEl.getX() + headerCtEl.getWidth();
|
|
|
|
topXY[0] = Ext.Number.constrain(topXY[0], minX, maxX);
|
|
bottomXY[0] = Ext.Number.constrain(bottomXY[0], minX, maxX);
|
|
|
|
// position and show indicators
|
|
topIndicator.setXY(topXY);
|
|
bottomIndicator.setXY(bottomXY);
|
|
topIndicator.show();
|
|
bottomIndicator.show();
|
|
|
|
// invalidate drop operation and hide indicators
|
|
} else {
|
|
me.invalidateDrop();
|
|
}
|
|
},
|
|
|
|
invalidateDrop: function() {
|
|
this.valid = false;
|
|
this.hideIndicators();
|
|
},
|
|
|
|
onNodeOver: function(node, dragZone, e, data) {
|
|
var me = this,
|
|
from = data.header,
|
|
doPosition,
|
|
to,
|
|
fromPanel,
|
|
toPanel;
|
|
|
|
if (data.header.el.dom === node) {
|
|
doPosition = false;
|
|
} else {
|
|
data.isLock = data.isUnlock = false;
|
|
to = me.getLocation(e, node).header;
|
|
|
|
// Dragging within the same container - always valid
|
|
doPosition = (from.ownerCt === to.ownerCt);
|
|
|
|
// If from different containers, and they are not sealed, then continue checking
|
|
if (!doPosition && (!from.ownerCt.sealed && !to.ownerCt.sealed)) {
|
|
|
|
doPosition = true;
|
|
fromPanel = from.up('tablepanel');
|
|
toPanel = to.up('tablepanel');
|
|
|
|
// If it's a lock operation, check that it's allowable.
|
|
data.isLock = toPanel.isLocked && !fromPanel.isLocked;
|
|
data.isUnlock = !toPanel.isLocked && fromPanel.isLocked;
|
|
if ((data.isUnlock && from.lockable === false) || (data.isLock && !from.isLockable())) {
|
|
doPosition = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (doPosition) {
|
|
me.positionIndicator(data, node, e);
|
|
} else {
|
|
me.valid = false;
|
|
}
|
|
return me.valid ? me.dropAllowed : me.dropNotAllowed;
|
|
},
|
|
|
|
hideIndicators: function() {
|
|
var me = this;
|
|
|
|
me.getTopIndicator().hide();
|
|
me.getBottomIndicator().hide();
|
|
me.lastTargetHeader = me.lastDropPos = null;
|
|
|
|
},
|
|
|
|
onNodeOut: function() {
|
|
this.hideIndicators();
|
|
},
|
|
|
|
onNodeDrop: function(node, dragZone, e, data) {
|
|
if (this.valid) {
|
|
var dragHeader = data.header,
|
|
dropLocation = data.dropLocation,
|
|
targetHeader = dropLocation.header,
|
|
fromCt = dragHeader.ownerCt,
|
|
localFromIdx = fromCt.items.indexOf(dragHeader), // Container.items is a MixedCollection
|
|
toCt = targetHeader.ownerCt,
|
|
localToIdx = toCt.items.indexOf(targetHeader),
|
|
headerCt = this.headerCt,
|
|
columnManager= headerCt.columnManager,
|
|
fromIdx = columnManager.getHeaderIndex(dragHeader),
|
|
toIdx = columnManager.getHeaderIndex(targetHeader),
|
|
colsToMove = dragHeader.isGroupHeader ? dragHeader.query(':not([isGroupHeader])').length : 1,
|
|
sameCt = fromCt === toCt,
|
|
scrollerOwner, savedWidth;
|
|
|
|
// Drop position is to the right of the targetHeader, increment the toIdx correctly
|
|
if (dropLocation.pos === 'after') {
|
|
localToIdx++;
|
|
toIdx += targetHeader.isGroupHeader ? targetHeader.query(':not([isGroupHeader])').length : 1;
|
|
}
|
|
|
|
// If we are dragging in between two HeaderContainers that have had the lockable
|
|
// mixin injected we will lock/unlock headers in between sections, and then continue
|
|
// with another execution of onNodeDrop to ensure the header is dropped into the correct group
|
|
if (data.isLock) {
|
|
scrollerOwner = fromCt.up('[scrollerOwner]');
|
|
scrollerOwner.lock(dragHeader, localToIdx);
|
|
data.isLock = false;
|
|
|
|
// Now that the header has been transferred into the correct HeaderContainer, recurse, and continue the drop operation with the same dragData
|
|
this.onNodeDrop(node, dragZone, e, data);
|
|
} else if (data.isUnlock) {
|
|
scrollerOwner = fromCt.up('[scrollerOwner]');
|
|
scrollerOwner.unlock(dragHeader, localToIdx);
|
|
data.isUnlock = false;
|
|
|
|
// Now that the header has been transferred into the correct HeaderContainer, recurse, and continue the drop operation with the same dragData
|
|
this.onNodeDrop(node, dragZone, e, data);
|
|
}
|
|
|
|
// This is a drop within the same HeaderContainer.
|
|
else {
|
|
this.invalidateDrop();
|
|
// Cache the width here, we need to get it before we removed it from the DOM
|
|
savedWidth = dragHeader.getWidth();
|
|
|
|
// Dragging within the same container.
|
|
if (sameCt) {
|
|
// A no-op. This can happen when cross lockable drag operations recurse (see above).
|
|
// If a drop was a lock/unlock, and the lock/unlock call placed the column in the
|
|
// desired position (lock places at end, unlock places at beginning) then we're done.
|
|
if (localToIdx === localFromIdx) {
|
|
// We still need to inform the rest of the components so that events can be fired.
|
|
headerCt.onHeaderMoved(dragHeader, colsToMove, fromIdx, toIdx);
|
|
return;
|
|
}
|
|
// If dragging rightwards, then after removal, the insertion index will be less.
|
|
if (localToIdx > localFromIdx) {
|
|
localToIdx -= 1;
|
|
}
|
|
}
|
|
|
|
// Suspend layouts while we sort all this out.
|
|
Ext.suspendLayouts();
|
|
|
|
if (sameCt) {
|
|
toCt.move(localFromIdx, localToIdx);
|
|
} else {
|
|
fromCt.remove(dragHeader, false);
|
|
toCt.insert(localToIdx, dragHeader);
|
|
}
|
|
|
|
// Group headers acquire the aggregate width of their child headers
|
|
// Therefore a child header may not flex; it must contribute a fixed width.
|
|
// But we restore the flex value when moving back into the main header container
|
|
if (toCt.isGroupHeader) {
|
|
// Adjust the width of the "to" group header only if we dragged in from somewhere else.
|
|
if (!sameCt) {
|
|
dragHeader.savedFlex = dragHeader.flex;
|
|
delete dragHeader.flex;
|
|
dragHeader.width = savedWidth;
|
|
}
|
|
} else {
|
|
if (dragHeader.savedFlex) {
|
|
dragHeader.flex = dragHeader.savedFlex;
|
|
delete dragHeader.width;
|
|
}
|
|
}
|
|
|
|
// Refresh columns cache in case we remove an emptied group column
|
|
headerCt.purgeCache();
|
|
Ext.resumeLayouts(true);
|
|
headerCt.onHeaderMoved(dragHeader, colsToMove, fromIdx, toIdx);
|
|
|
|
// Ext.grid.header.Container will handle the removal of empty groups, don't handle it here
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.plugin.HeaderReorderer', {
|
|
extend: Ext.AbstractPlugin ,
|
|
|
|
alias: 'plugin.gridheaderreorderer',
|
|
|
|
init: function(headerCt) {
|
|
this.headerCt = headerCt;
|
|
headerCt.on({
|
|
render: this.onHeaderCtRender,
|
|
single: true,
|
|
scope: this
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.dragZone, this.dropZone);
|
|
},
|
|
|
|
onHeaderCtRender: function() {
|
|
var me = this;
|
|
|
|
me.dragZone = new Ext.grid.header.DragZone(me.headerCt);
|
|
me.dropZone = new Ext.grid.header.DropZone(me.headerCt);
|
|
if (me.disabled) {
|
|
me.dragZone.disable();
|
|
}
|
|
},
|
|
|
|
enable: function() {
|
|
this.disabled = false;
|
|
if (this.dragZone) {
|
|
this.dragZone.enable();
|
|
}
|
|
},
|
|
|
|
disable: function() {
|
|
this.disabled = true;
|
|
if (this.dragZone) {
|
|
this.dragZone.disable();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
Ext.define('Ext.grid.header.Container', {
|
|
extend: Ext.container.Container ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
border: true,
|
|
|
|
alias: 'widget.headercontainer',
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
|
|
dock: 'top',
|
|
|
|
/**
|
|
* @cfg {Number} weight
|
|
* HeaderContainer overrides the default weight of 0 for all docked items to 100.
|
|
* This is so that it has more priority over things like toolbars.
|
|
*/
|
|
weight: 100,
|
|
|
|
defaultType: 'gridcolumn',
|
|
|
|
detachOnRemove: false,
|
|
|
|
/**
|
|
* @cfg {Number} defaultWidth
|
|
* Width of the header if no width or flex is specified.
|
|
*/
|
|
defaultWidth: 100,
|
|
|
|
/**
|
|
* @cfg {Boolean} [sealed=false]
|
|
* Specify as `true` to constrain column dragging so that a column cannot be dragged into or out of this column.
|
|
*
|
|
* **Note that this config is only valid for column headers which contain child column headers, eg:**
|
|
* {
|
|
* sealed: true
|
|
* text: 'ExtJS',
|
|
* columns: [{
|
|
* text: '3.0.4',
|
|
* dataIndex: 'ext304'
|
|
* }, {
|
|
* text: '4.1.0',
|
|
* dataIndex: 'ext410'
|
|
* }
|
|
* }
|
|
*
|
|
*/
|
|
|
|
//<locale>
|
|
sortAscText: 'Sort Ascending',
|
|
//</locale>
|
|
//<locale>
|
|
sortDescText: 'Sort Descending',
|
|
//</locale>
|
|
//<locale>
|
|
sortClearText: 'Clear Sort',
|
|
//</locale>
|
|
//<locale>
|
|
columnsText: 'Columns',
|
|
//</locale>
|
|
|
|
headerOpenCls: Ext.baseCSSPrefix + 'column-header-open',
|
|
|
|
menuSortAscCls: Ext.baseCSSPrefix + 'hmenu-sort-asc',
|
|
|
|
menuSortDescCls: Ext.baseCSSPrefix + 'hmenu-sort-desc',
|
|
|
|
menuColsIcon: Ext.baseCSSPrefix + 'cols-icon',
|
|
|
|
// private; will probably be removed by 4.0
|
|
triStateSort: false,
|
|
|
|
ddLock: false,
|
|
|
|
dragging: false,
|
|
|
|
/**
|
|
* @property {Boolean} isGroupHeader
|
|
* True if this HeaderContainer is in fact a group header which contains sub headers.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} sortable
|
|
* Provides the default sortable state for all Headers within this HeaderContainer.
|
|
* Also turns on or off the menus in the HeaderContainer. Note that the menu is
|
|
* shared across every header and therefore turning it off will remove the menu
|
|
* items for every header.
|
|
*/
|
|
sortable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableColumnHide=true]
|
|
* False to disable column hiding within this grid.
|
|
*/
|
|
enableColumnHide: true,
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.headerCounter = 0;
|
|
me.plugins = me.plugins || [];
|
|
|
|
// TODO: Pass in configurations to turn on/off dynamic
|
|
// resizing and disable resizing all together
|
|
|
|
// Only set up a Resizer and Reorderer for the topmost HeaderContainer.
|
|
// Nested Group Headers are themselves HeaderContainers
|
|
if (!me.isColumn) {
|
|
if (me.enableColumnResize) {
|
|
me.resizer = new Ext.grid.plugin.HeaderResizer();
|
|
me.plugins.push(me.resizer);
|
|
}
|
|
if (me.enableColumnMove) {
|
|
me.reorderer = new Ext.grid.plugin.HeaderReorderer();
|
|
me.plugins.push(me.reorderer);
|
|
}
|
|
}
|
|
|
|
// If this is a leaf column header, and is NOT functioning as a container,
|
|
// use Container layout with a no-op calculate method.
|
|
if (me.isColumn && (!me.items || me.items.length === 0)) {
|
|
me.isContainer = false;
|
|
me.layout = {
|
|
type: 'container',
|
|
calculate: Ext.emptyFn
|
|
};
|
|
}
|
|
|
|
// HeaderContainer and Group header needs a gridcolumn layout.
|
|
else {
|
|
me.layout = Ext.apply({
|
|
type: 'gridcolumn',
|
|
align: 'stretch'
|
|
}, me.initialConfig.layout);
|
|
|
|
// Create the owning grid's ColumnManager
|
|
if (me.isRootHeader) {
|
|
me.grid.columnManager = me.columnManager = new Ext.grid.ColumnManager(me);
|
|
}
|
|
}
|
|
|
|
me.defaults = me.defaults || {};
|
|
Ext.applyIf(me.defaults, {
|
|
triStateSort: me.triStateSort,
|
|
sortable: me.sortable
|
|
});
|
|
|
|
me.menuTask = new Ext.util.DelayedTask(me.updateMenuDisabledState, me);
|
|
me.callParent();
|
|
me.addEvents(
|
|
/**
|
|
* @event columnresize
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
* @param {Number} width
|
|
*/
|
|
'columnresize',
|
|
|
|
/**
|
|
* @event headerclick
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
* @param {Ext.EventObject} e
|
|
* @param {HTMLElement} t
|
|
*/
|
|
'headerclick',
|
|
|
|
/**
|
|
* @event headercontextmenu
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
* @param {Ext.EventObject} e
|
|
* @param {HTMLElement} t
|
|
*/
|
|
'headercontextmenu',
|
|
|
|
/**
|
|
* @event headertriggerclick
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
* @param {Ext.EventObject} e
|
|
* @param {HTMLElement} t
|
|
*/
|
|
'headertriggerclick',
|
|
|
|
/**
|
|
* @event columnmove
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
* @param {Number} fromIdx
|
|
* @param {Number} toIdx
|
|
*/
|
|
'columnmove',
|
|
/**
|
|
* @event columnhide
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
*/
|
|
'columnhide',
|
|
/**
|
|
* @event columnshow
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
*/
|
|
'columnshow',
|
|
/**
|
|
* @event columnschanged
|
|
* Fired after the columns change in any way, when a column has been hidden or shown, or when a column
|
|
* is added to or removed from this header container.
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
*/
|
|
'columnschanged',
|
|
/**
|
|
* @event sortchange
|
|
* @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
|
|
* @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
|
|
* @param {String} direction
|
|
*/
|
|
'sortchange',
|
|
/**
|
|
* @event menucreate
|
|
* Fired immediately after the column header menu is created.
|
|
* @param {Ext.grid.header.Container} ct This instance
|
|
* @param {Ext.menu.Menu} menu The Menu that was created
|
|
*/
|
|
'menucreate'
|
|
);
|
|
},
|
|
|
|
isLayoutRoot: function(){
|
|
// Since we're docked, the width is always calculated
|
|
// If we're hidden, the height is explicitly 0, which
|
|
// means we'll be considered a layout root. However, we
|
|
// still need the view to layout to update the underlying
|
|
// table to match the size.
|
|
if (this.hiddenHeaders) {
|
|
return false;
|
|
}
|
|
return this.callParent();
|
|
},
|
|
|
|
// Find the topmost HeaderContainer
|
|
getOwnerHeaderCt: function() {
|
|
var me = this;
|
|
return me.isRootHeader ? me : me.up('[isRootHeader]');
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this;
|
|
|
|
if (me.menu) {
|
|
me.menu.un('hide', me.onMenuHide, me);
|
|
}
|
|
me.menuTask.cancel();
|
|
Ext.destroy(me.resizer, me.reorderer);
|
|
me.callParent();
|
|
},
|
|
|
|
applyColumnsState: function(columns) {
|
|
if (!columns || !columns.length) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
items = me.items.items,
|
|
count = items.length,
|
|
i = 0,
|
|
length = columns.length,
|
|
c, col, columnState, index;
|
|
|
|
for (c = 0; c < length; c++) {
|
|
columnState = columns[c];
|
|
|
|
for (index = count; index--; ) {
|
|
col = items[index];
|
|
if (col.getStateId && col.getStateId() == columnState.id) {
|
|
// If a column in the new grid matches up with a saved state...
|
|
// Ensure that the column is restored to the state order.
|
|
// i is incremented upon every column match, so all persistent
|
|
// columns are ordered before any new columns.
|
|
if (i !== index) {
|
|
me.moveHeader(index, i);
|
|
}
|
|
|
|
if (col.applyColumnState) {
|
|
col.applyColumnState(columnState);
|
|
}
|
|
++i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getColumnsState: function () {
|
|
var me = this,
|
|
columns = [],
|
|
state;
|
|
|
|
me.items.each(function (col) {
|
|
state = col.getColumnState && col.getColumnState();
|
|
if (state) {
|
|
columns.push(state);
|
|
}
|
|
});
|
|
|
|
return columns;
|
|
},
|
|
|
|
// Invalidate column cache on add
|
|
// We cannot refresh the View on every add because this method is called
|
|
// when the HeaderDropZone moves Headers around, that will also refresh the view
|
|
onAdd: function(c) {
|
|
var me = this;
|
|
|
|
if (!c.headerId) {
|
|
c.headerId = c.initialConfig.id || Ext.id(null, 'header-');
|
|
}
|
|
|
|
// Only generate a stateId if it really needs one - ie, it cannot yield a stateId
|
|
if (!c.getStateId()) {
|
|
// This was the headerId generated in 4.0, so to preserve saved state, we now
|
|
// assign a default stateId in that same manner. The stateId's of a column are
|
|
// not global at the stateProvider, but are local to the grid state data. The
|
|
// headerId should still follow our standard naming convention.
|
|
c.stateId = c.initialConfig.id || ('h' + (++me.headerCounter));
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
me.onColumnsChanged();
|
|
},
|
|
|
|
onMove: function() {
|
|
this.callParent(arguments);
|
|
this.onColumnsChanged();
|
|
},
|
|
|
|
onShow: function() {
|
|
this.callParent(arguments);
|
|
this.onColumnsChanged();
|
|
},
|
|
|
|
// Private
|
|
// Called whenever a column is added or removed or moved.
|
|
// Ensures that the gridColumns caches are cleared.
|
|
onColumnsChanged: function() {
|
|
var headerCt = this;
|
|
|
|
// Each HeaderContainer up the chain must have its cache purged so that its getGridColumns method will return correct results.
|
|
while (headerCt) {
|
|
headerCt.purgeCache();
|
|
if (headerCt.isRootHeader) {
|
|
break;
|
|
}
|
|
headerCt = headerCt.ownerCt;
|
|
}
|
|
|
|
if (headerCt && headerCt.rendered) {
|
|
headerCt.fireEvent('columnschanged', headerCt);
|
|
}
|
|
},
|
|
|
|
// Invalidate column cache on remove
|
|
// We cannot refresh the View on every remove because this method is called
|
|
// when the HeaderDropZone moves Headers around, that will also refresh the view
|
|
onRemove: function(c) {
|
|
var me = this,
|
|
ownerCt = me.ownerCt;
|
|
|
|
me.callParent(arguments);
|
|
|
|
|
|
if (!me.destroying) {
|
|
me.onColumnsChanged();
|
|
if (me.isGroupHeader && !me.items.getCount() && ownerCt) {
|
|
// Detach the header from the DOM here. Since we're removing and destroying the container,
|
|
// the inner DOM may get overwritten, since Container::deatchOnRemove gets processed after
|
|
// onRemove.
|
|
me.detachComponent(c);
|
|
// If we don't have any items left and we're a group, remove ourselves.
|
|
// This will cascade up if necessary
|
|
Ext.suspendLayouts();
|
|
ownerCt.remove(me);
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
applyDefaults: function(config) {
|
|
var ret;
|
|
/*
|
|
* Ensure header.Container defaults don't get applied to a RowNumberer
|
|
* if an xtype is supplied. This isn't an ideal solution however it's
|
|
* much more likely that a RowNumberer with no options will be created,
|
|
* wanting to use the defaults specified on the class as opposed to
|
|
* those setup on the Container.
|
|
*/
|
|
if (config && !config.isComponent && config.xtype == 'rownumberer') {
|
|
ret = config;
|
|
} else {
|
|
ret = this.callParent(arguments);
|
|
|
|
// Apply default width unless it's a group header (in which case it must be left to shrinkwrap), or it's flexed
|
|
if (!config.isGroupHeader && !('width' in ret) && !ret.flex) {
|
|
ret.width = this.defaultWidth;
|
|
}
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
setSortState: function(){
|
|
var store = this.up('[store]').store,
|
|
// grab the first sorter, since there may also be groupers
|
|
// in this collection
|
|
first = store.getFirstSorter(),
|
|
hd;
|
|
|
|
if (first) {
|
|
hd = this.down('gridcolumn[dataIndex=' + first.property +']');
|
|
if (hd) {
|
|
hd.setSortState(first.direction, false, true);
|
|
}
|
|
} else {
|
|
this.clearOtherSortStates(null);
|
|
}
|
|
},
|
|
|
|
getHeaderMenu: function(){
|
|
var menu = this.getMenu(),
|
|
item;
|
|
|
|
if (menu) {
|
|
item = menu.child('#columnItem');
|
|
if (item) {
|
|
return item.menu;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
onHeaderVisibilityChange: function(header, visible){
|
|
var me = this,
|
|
menu = me.getHeaderMenu(),
|
|
item;
|
|
|
|
// Invalidate column collections upon column hide/show
|
|
me.purgeCache();
|
|
|
|
if (menu) {
|
|
// If the header was hidden programmatically, sync the Menu state
|
|
item = me.getMenuItemForHeader(menu, header);
|
|
if (item) {
|
|
item.setChecked(visible, true);
|
|
}
|
|
// delay this since the headers may fire a number of times if we're hiding/showing groups
|
|
if (menu.isVisible()) {
|
|
me.menuTask.delay(50);
|
|
}
|
|
}
|
|
},
|
|
|
|
updateMenuDisabledState: function(menu) {
|
|
var me = this,
|
|
columns = me.query(':not([hidden])'),
|
|
i,
|
|
len = columns.length,
|
|
item,
|
|
checkItem,
|
|
method;
|
|
|
|
// If called from menu creation, it will be passed to avoid infinite recursion
|
|
if (!menu) {
|
|
menu = me.getMenu();
|
|
}
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
item = columns[i];
|
|
checkItem = me.getMenuItemForHeader(menu, item);
|
|
if (checkItem) {
|
|
method = item.isHideable() ? 'enable' : 'disable';
|
|
if (checkItem.menu) {
|
|
method += 'CheckChange';
|
|
}
|
|
checkItem[method]();
|
|
}
|
|
}
|
|
},
|
|
|
|
getMenuItemForHeader: function(menu, header) {
|
|
return header ? menu.down('menucheckitem[headerId=' + header.id + ']') : null;
|
|
},
|
|
|
|
onHeaderShow: function(header) {
|
|
// Pass up to the GridSection
|
|
var me = this,
|
|
gridSection = me.ownerCt;
|
|
|
|
if (me.forceFit) {
|
|
delete me.flex;
|
|
|
|
}
|
|
|
|
me.onHeaderVisibilityChange(header, true);
|
|
|
|
// Only update the grid UI when we are notified about base level Header shows;
|
|
// Group header shows just cause a layout of the HeaderContainer
|
|
if (!header.isGroupHeader) {
|
|
if (gridSection) {
|
|
gridSection.onHeaderShow(me, header);
|
|
}
|
|
}
|
|
me.fireEvent('columnshow', me, header);
|
|
me.fireEvent('columnschanged', this);
|
|
},
|
|
|
|
onHeaderHide: function(header) {
|
|
// Pass up to the GridSection
|
|
var me = this,
|
|
gridSection = me.ownerCt;
|
|
|
|
me.onHeaderVisibilityChange(header, false);
|
|
|
|
// Only update the UI when we are notified about base level Header hides;
|
|
if (!header.isGroupHeader) {
|
|
if (gridSection) {
|
|
gridSection.onHeaderHide(me, header);
|
|
}
|
|
}
|
|
me.fireEvent('columnhide', me, header);
|
|
me.fireEvent('columnschanged', this);
|
|
},
|
|
|
|
/**
|
|
* Temporarily lock the headerCt. This makes it so that clicking on headers
|
|
* don't trigger actions like sorting or opening of the header menu. This is
|
|
* done because extraneous events may be fired on the headers after interacting
|
|
* with a drag drop operation.
|
|
* @private
|
|
*/
|
|
tempLock: function() {
|
|
this.ddLock = true;
|
|
Ext.Function.defer(function() {
|
|
this.ddLock = false;
|
|
}, 200, this);
|
|
},
|
|
|
|
onHeaderResize: function(header, w, suppressFocus) {
|
|
var me = this,
|
|
view = me.view,
|
|
gridSection = me.ownerCt;
|
|
|
|
// Do not react to header sizing during initial Panel layout when there is no view content to size.
|
|
if (view && view.body.dom) {
|
|
me.tempLock();
|
|
if (gridSection) {
|
|
gridSection.onHeaderResize(me, header, w);
|
|
}
|
|
}
|
|
me.fireEvent('columnresize', this, header, w);
|
|
},
|
|
|
|
onHeaderClick: function(header, e, t) {
|
|
header.fireEvent('headerclick', this, header, e, t);
|
|
this.fireEvent('headerclick', this, header, e, t);
|
|
},
|
|
|
|
onHeaderContextMenu: function(header, e, t) {
|
|
header.fireEvent('headercontextmenu', this, header, e, t);
|
|
this.fireEvent('headercontextmenu', this, header, e, t);
|
|
},
|
|
|
|
onHeaderTriggerClick: function(header, e, t) {
|
|
// generate and cache menu, provide ability to cancel/etc
|
|
var me = this;
|
|
if (header.fireEvent('headertriggerclick', me, header, e, t) !== false && me.fireEvent('headertriggerclick', me, header, e, t) !== false) {
|
|
me.showMenuBy(t, header);
|
|
}
|
|
},
|
|
|
|
showMenuBy: function(t, header) {
|
|
var menu = this.getMenu(),
|
|
ascItem = menu.down('#ascItem'),
|
|
descItem = menu.down('#descItem'),
|
|
sortableMth;
|
|
|
|
// Use ownerButton as the upward link. Menus *must have no ownerCt* - they are global floaters.
|
|
// Upward navigation is done using the up() method.
|
|
menu.activeHeader = menu.ownerButton = header;
|
|
header.setMenuActive(true);
|
|
|
|
// enable or disable asc & desc menu items based on header being sortable
|
|
sortableMth = header.sortable ? 'enable' : 'disable';
|
|
if (ascItem) {
|
|
ascItem[sortableMth]();
|
|
}
|
|
if (descItem) {
|
|
descItem[sortableMth]();
|
|
}
|
|
menu.showBy(t);
|
|
},
|
|
|
|
// remove the trigger open class when the menu is hidden
|
|
onMenuHide: function(menu) {
|
|
menu.activeHeader.setMenuActive(false);
|
|
},
|
|
|
|
moveHeader: function(fromIdx, toIdx) {
|
|
// An automatically expiring lock
|
|
this.tempLock();
|
|
this.onHeaderMoved(this.move(fromIdx, toIdx), 1, fromIdx, toIdx);
|
|
},
|
|
|
|
purgeCache: function() {
|
|
var me = this,
|
|
menu = me.menu;
|
|
|
|
// Delete column cache - column order has changed.
|
|
me.gridDataColumns = me.hideableColumns = null;
|
|
|
|
// ColumnManager. Only the top
|
|
if (me.columnManager) {
|
|
me.columnManager.invalidate();
|
|
}
|
|
|
|
// Menu changes when columns are moved. It will be recreated.
|
|
// Menu does not change when columns are hidden or shown (which is all that happens when menu is visible)
|
|
if (menu && menu.hidden) {
|
|
// Must hide before destroy so that trigger el is deactivated
|
|
menu.hide();
|
|
menu.destroy();
|
|
me.menu = null;
|
|
}
|
|
},
|
|
|
|
onHeaderMoved: function(header, colsToMove, fromIdx, toIdx) {
|
|
var me = this,
|
|
gridSection = me.ownerCt;
|
|
|
|
if (gridSection && gridSection.onHeaderMove) {
|
|
gridSection.onHeaderMove(me, header, colsToMove, fromIdx, toIdx);
|
|
}
|
|
me.fireEvent("columnmove", me, header, fromIdx, toIdx);
|
|
},
|
|
|
|
/**
|
|
* Gets the menu (and will create it if it doesn't already exist)
|
|
* @private
|
|
*/
|
|
getMenu: function() {
|
|
var me = this;
|
|
|
|
if (!me.menu) {
|
|
me.menu = new Ext.menu.Menu({
|
|
hideOnParentHide: false, // Persists when owning ColumnHeader is hidden
|
|
items: me.getMenuItems(),
|
|
listeners: {
|
|
hide: me.onMenuHide,
|
|
scope: me
|
|
}
|
|
});
|
|
me.fireEvent('menucreate', me, me.menu);
|
|
}
|
|
me.updateMenuDisabledState(me.menu);
|
|
return me.menu;
|
|
},
|
|
|
|
/**
|
|
* Returns an array of menu items to be placed into the shared menu
|
|
* across all headers in this header container.
|
|
* @returns {Array} menuItems
|
|
*/
|
|
getMenuItems: function() {
|
|
var me = this,
|
|
menuItems = [],
|
|
hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null;
|
|
|
|
if (me.sortable) {
|
|
menuItems = [{
|
|
itemId: 'ascItem',
|
|
text: me.sortAscText,
|
|
cls: me.menuSortAscCls,
|
|
handler: me.onSortAscClick,
|
|
scope: me
|
|
},{
|
|
itemId: 'descItem',
|
|
text: me.sortDescText,
|
|
cls: me.menuSortDescCls,
|
|
handler: me.onSortDescClick,
|
|
scope: me
|
|
}];
|
|
}
|
|
if (hideableColumns && hideableColumns.length) {
|
|
if (me.sortable) {
|
|
menuItems.push('-');
|
|
}
|
|
menuItems.push({
|
|
itemId: 'columnItem',
|
|
text: me.columnsText,
|
|
cls: me.menuColsIcon,
|
|
menu: hideableColumns,
|
|
hideOnClick: false
|
|
});
|
|
}
|
|
return menuItems;
|
|
},
|
|
|
|
// sort asc when clicking on item in menu
|
|
onSortAscClick: function() {
|
|
var menu = this.getMenu(),
|
|
activeHeader = menu.activeHeader;
|
|
|
|
activeHeader.setSortState('ASC');
|
|
},
|
|
|
|
// sort desc when clicking on item in menu
|
|
onSortDescClick: function() {
|
|
var menu = this.getMenu(),
|
|
activeHeader = menu.activeHeader;
|
|
|
|
activeHeader.setSortState('DESC');
|
|
},
|
|
|
|
/**
|
|
* Returns an array of menu CheckItems corresponding to all immediate children
|
|
* of the passed Container which have been configured as hideable.
|
|
*/
|
|
getColumnMenu: function(headerContainer) {
|
|
var menuItems = [],
|
|
i = 0,
|
|
item,
|
|
items = headerContainer.query('>gridcolumn[hideable]'),
|
|
itemsLn = items.length,
|
|
menuItem;
|
|
|
|
for (; i < itemsLn; i++) {
|
|
item = items[i];
|
|
menuItem = new Ext.menu.CheckItem({
|
|
text: item.menuText || item.text,
|
|
checked: !item.hidden,
|
|
hideOnClick: false,
|
|
headerId: item.id,
|
|
menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
|
|
checkHandler: this.onColumnCheckChange,
|
|
scope: this
|
|
});
|
|
menuItems.push(menuItem);
|
|
|
|
// If the header is ever destroyed - for instance by dragging out the last remaining sub header,
|
|
// then the associated menu item must also be destroyed.
|
|
item.on({
|
|
destroy: Ext.Function.bind(menuItem.destroy, menuItem)
|
|
});
|
|
}
|
|
return menuItems;
|
|
},
|
|
|
|
onColumnCheckChange: function(checkItem, checked) {
|
|
var header = Ext.getCmp(checkItem.headerId);
|
|
header[checked ? 'show' : 'hide']();
|
|
},
|
|
|
|
/**
|
|
* Returns the number of <b>grid columns</b> descended from this HeaderContainer.
|
|
* Group Columns are HeaderContainers. All grid columns are returned, including hidden ones.
|
|
*/
|
|
getColumnCount: function() {
|
|
return this.getGridColumns().length;
|
|
},
|
|
|
|
/**
|
|
* Gets the full width of all columns that are visible.
|
|
*/
|
|
getFullWidth: function() {
|
|
var fullWidth = 0,
|
|
headers = this.getVisibleGridColumns(),
|
|
headersLn = headers.length,
|
|
i = 0,
|
|
header;
|
|
|
|
|
|
for (; i < headersLn; i++) {
|
|
header = headers[i];
|
|
// use headers getDesiredWidth if its there
|
|
if (header.getDesiredWidth) {
|
|
fullWidth += header.getDesiredWidth() || 0;
|
|
// if injected a diff cmp use getWidth
|
|
} else {
|
|
fullWidth += header.getWidth();
|
|
}
|
|
}
|
|
return fullWidth;
|
|
},
|
|
|
|
// invoked internally by a header when not using triStateSorting
|
|
clearOtherSortStates: function(activeHeader) {
|
|
var headers = this.getGridColumns(),
|
|
headersLn = headers.length,
|
|
i = 0;
|
|
|
|
for (; i < headersLn; i++) {
|
|
if (headers[i] !== activeHeader) {
|
|
// unset the sortstate and dont recurse
|
|
headers[i].setSortState(null, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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.
|
|
* @returns {Array}
|
|
*/
|
|
getVisibleGridColumns: function() {
|
|
var allColumns = this.getGridColumns(),
|
|
result = [],
|
|
len = allColumns.length, i;
|
|
|
|
// Use an inline check instead of ComponentQuery filtering for better performance for
|
|
// repeated grid row rendering - as in buffered rendering.
|
|
for (i = 0; i < len; i++) {
|
|
if (!allColumns[i].hidden) {
|
|
result[result.length] = allColumns[i];
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Returns an array of all columns which appear in the grid's View. This goes down to the leaf column header
|
|
* level, and does not return **grouped** headers which contain sub headers.
|
|
*
|
|
* It includes hidden headers even though they are not rendered. This is for collection of menu items for the column hide/show menu.
|
|
*
|
|
* Headers which have a hidden ancestor have a `hiddenAncestor: true` property injected so that they can also be rendered at zero width without interrogating
|
|
* that header's ownerCt axis for a hidden ancestor.
|
|
* @returns {Array}
|
|
*/
|
|
getGridColumns: function(/* private - used in recursion*/inResult, hiddenAncestor) {
|
|
if (!inResult && this.gridDataColumns) {
|
|
return this.gridDataColumns;
|
|
}
|
|
|
|
var me = this,
|
|
result = inResult || [],
|
|
items, i, len, item,
|
|
lastVisibleColumn;
|
|
|
|
hiddenAncestor = hiddenAncestor || me.hidden;
|
|
if (me.items) {
|
|
items = me.items.items;
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
item = items[i];
|
|
if (item.isGroupHeader) {
|
|
item.getGridColumns(result, hiddenAncestor);
|
|
} else {
|
|
item.hiddenAncestor = hiddenAncestor;
|
|
result.push(item);
|
|
}
|
|
}
|
|
}
|
|
if (!inResult) {
|
|
me.gridDataColumns = result;
|
|
}
|
|
|
|
// If top level, correct first and last visible column flags
|
|
if (!inResult && len) {
|
|
// Set firstVisible and lastVisible flags
|
|
for (i = 0, len = result.length; i < len; i++) {
|
|
item = result[i];
|
|
item.isFirstVisible = item.isLastVisible = false;
|
|
if (!(item.hidden || item.hiddenAncestor)) {
|
|
if (!lastVisibleColumn) {
|
|
item.isFirstVisible = true;
|
|
}
|
|
lastVisibleColumn = item;
|
|
}
|
|
}
|
|
// If we haven't hidden all columns, tag the last visible one encountered
|
|
if (lastVisibleColumn) {
|
|
lastVisibleColumn.isLastVisible = true;
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* For use by column headers in determining whether there are any hideable columns when deciding whether or not
|
|
* the header menu should be disabled.
|
|
*/
|
|
getHideableColumns: function() {
|
|
var me = this,
|
|
result = me.hideableColumns;
|
|
|
|
if (!result) {
|
|
result = me.hideableColumns = me.query('[hideable]');
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Returns the index of a leaf level header regardless of what the nesting
|
|
* structure is.
|
|
*
|
|
* If a group header is passed, the index of the first leaf level header within it is returned.
|
|
*
|
|
* @param {Ext.grid.column.Column} header The header to find the index of
|
|
* @return {Number} The index of the specified column header
|
|
*/
|
|
getHeaderIndex: function(header) {
|
|
return this.columnManager.getHeaderIndex(header);
|
|
},
|
|
|
|
/**
|
|
* Get a leaf level header by index regardless of what the nesting
|
|
* structure is.
|
|
* @param {Number} index The column index for which to retrieve the column.
|
|
*/
|
|
getHeaderAtIndex: function(index) {
|
|
return this.columnManager.getHeaderAtIndex(index);
|
|
},
|
|
|
|
/**
|
|
* When passed a column index, returns the closet *visible* column to that. If the column at the passed index is visible,
|
|
* that is returned. If it is hidden, either the next visible, or the previous visible column is returned.
|
|
* @param {Number} index Position at which to find the closest visible column.
|
|
*/
|
|
getVisibleHeaderClosestToIndex: function(index) {
|
|
return this.columnManager.getVisibleHeaderClosestToIndex(index);
|
|
},
|
|
|
|
autoSizeColumn : function(header) {
|
|
var view = this.view;
|
|
if (view) {
|
|
view.autoSizeColumn(header);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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
|
|
* contain other columns inside. In general, this class will not be created directly, rather
|
|
* an array of column configurations will be passed to the grid:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'employeeStore',
|
|
* fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
|
|
* data:[
|
|
* {firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},
|
|
* {firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},
|
|
* {firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},
|
|
* {firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},
|
|
* {firstname:"Angela", lastname:"Martin", seniority: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: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}
|
|
* ],
|
|
* width: 400,
|
|
* forceFit: true,
|
|
* 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.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
|
|
*
|
|
* # 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
|
|
* - {@link #hideable}: Specifies whether the column can be hidden using the column menu
|
|
* - {@link #menuDisabled}: Disables the column header menu
|
|
* - {@link #cfg-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
|
|
*/
|
|
Ext.define('Ext.grid.column.Column', {
|
|
extend: Ext.grid.header.Container ,
|
|
alias: 'widget.gridcolumn',
|
|
|
|
alternateClassName: 'Ext.grid.Column',
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'column-header',
|
|
|
|
// Not the standard, automatically applied overCls because we must filter out overs of child headers.
|
|
hoverCls: Ext.baseCSSPrefix + 'column-header-over',
|
|
|
|
handleWidth: 4,
|
|
|
|
sortState: null,
|
|
|
|
possibleSortStates: ['ASC', 'DESC'],
|
|
|
|
childEls: [
|
|
'titleEl', 'triggerEl', 'textEl'
|
|
],
|
|
|
|
/**
|
|
* @private
|
|
* @cfg {Boolean} [noWrap=true]
|
|
* The default setting indicates that external CSS rules dictate that the title is `white-space: nowrap` and
|
|
* therefore, width cannot affect the measured height by causing text wrapping. This is what the Sencha-supplied
|
|
* styles set. If you change those styles to allow text wrapping, you must set this to `false`.
|
|
*/
|
|
noWrap: true,
|
|
|
|
renderTpl:
|
|
'<div id="{id}-titleEl" {tipMarkup}class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
|
|
'<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text' +
|
|
'{childElCls}">' +
|
|
'{text}' +
|
|
'</span>' +
|
|
'<tpl if="!menuDisabled">'+
|
|
'<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger' +
|
|
'{childElCls}"></div>' +
|
|
'</tpl>' +
|
|
'</div>' +
|
|
'{%this.renderContainer(out,values)%}',
|
|
|
|
/**
|
|
* @cfg {Object[]} columns
|
|
* An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the
|
|
* `columns` config.
|
|
*
|
|
* Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out
|
|
* of a group. Note that if all sub columns are dragged out of a group, the group is destroyed.
|
|
*/
|
|
|
|
/**
|
|
* @override
|
|
* @cfg {String} stateId
|
|
* An identifier which identifies this column uniquely within the owning grid's {@link #stateful state}.
|
|
*
|
|
* This does not have to be *globally* unique. A column's state is not saved standalone. It is encapsulated within
|
|
* the owning grid's state.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} dataIndex
|
|
* The name of the field in the grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from
|
|
* which to draw the column's value. **Required.**
|
|
*/
|
|
dataIndex: null,
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The header text to be used as innerHTML (html tags are accepted) to display in the Grid.
|
|
* **Note**: to have a clickable header with no text displayed you can use the default of ` ` aka ` `.
|
|
*/
|
|
text: ' ',
|
|
|
|
/**
|
|
* @cfg {String} header
|
|
* The header text.
|
|
* @deprecated 4.0 Use {@link #text} instead.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} menuText
|
|
* The text to render in the column visibility selection menu for this column. If not
|
|
* specified, will default to the text value.
|
|
*/
|
|
menuText: null,
|
|
|
|
/**
|
|
* @cfg {String} [emptyCellText=undefined]
|
|
* The text to diplay in empty cells (cells with a value of `undefined`, `null`, or `''`).
|
|
*
|
|
* Defaults to ` ` aka ` `.
|
|
*/
|
|
emptyCellText: ' ',
|
|
|
|
/**
|
|
* @cfg {Boolean} sortable
|
|
* False to disable sorting of this column. Whether local/remote sorting is used is specified in
|
|
* `{@link Ext.data.Store#remoteSort}`.
|
|
*/
|
|
sortable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} lockable
|
|
* If the grid is configured with {@link Ext.panel.Table#enableLocking enableLocking}, or has columns which are
|
|
* configured with a {@link #locked} value, this option may be used to disable user-driven locking or unlocking
|
|
* of this column. This column will remain in the side into which its own {@link #locked} configuration placed it.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} groupable
|
|
* 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
|
|
* True to prevent the column from being resizable.
|
|
* @deprecated 4.0 Use {@link #resizable} instead.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [locked=false]
|
|
* True to lock this column in place. Implicitly enables locking on the grid.
|
|
* See also {@link Ext.grid.Panel#enableLocking}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} resizable
|
|
* False to prevent the column from being resizable.
|
|
*/
|
|
resizable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} hideable
|
|
* False to prevent the user from hiding this column.
|
|
*/
|
|
hideable: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} menuDisabled
|
|
* True to disable the column header menu containing sort/hide options.
|
|
*/
|
|
menuDisabled: false,
|
|
|
|
/**
|
|
* @cfg {Function/String} renderer
|
|
* A renderer is an 'interceptor' method which can be used to transform data (value, appearance, etc.)
|
|
* before it is rendered. Example:
|
|
*
|
|
* {
|
|
* renderer: function(value){
|
|
* if (value === 1) {
|
|
* return '1 person';
|
|
* }
|
|
* return value + ' people';
|
|
* }
|
|
* }
|
|
*
|
|
* Additionally a string naming an {@link Ext.util.Format} method can be passed:
|
|
*
|
|
* {
|
|
* renderer: 'uppercase'
|
|
* }
|
|
*
|
|
* @cfg {Object} renderer.value The data value for the current cell
|
|
* @cfg {Object} renderer.metaData A collection of metadata about the current cell; can be used or modified
|
|
* by the renderer. Recognized properties are: tdCls, tdAttr, and style.
|
|
* @cfg {Ext.data.Model} renderer.record The record for the current row
|
|
* @cfg {Number} renderer.rowIndex The index of the current row
|
|
* @cfg {Number} renderer.colIndex The index of the current column
|
|
* @cfg {Ext.data.Store} renderer.store The data store
|
|
* @cfg {Ext.view.View} renderer.view The current view
|
|
* @cfg {String} renderer.return The HTML string to be rendered.
|
|
*/
|
|
renderer: false,
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope to use when calling the {@link #renderer} function.
|
|
*/
|
|
|
|
/**
|
|
* @method defaultRenderer
|
|
* When defined this will take precedence over the {@link Ext.grid.column.Column#renderer renderer} config.
|
|
* This is meant to be defined in subclasses that wish to supply their own renderer.
|
|
* @protected
|
|
* @template
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} editRenderer
|
|
* A renderer to be used in conjunction with {@link Ext.grid.plugin.RowEditing RowEditing}. This renderer is used to
|
|
* display a custom value for non-editable fields.
|
|
*/
|
|
editRenderer: false,
|
|
|
|
/**
|
|
* @cfg {String} align
|
|
* Sets the alignment of the header and rendered columns.
|
|
* Possible values are: `'left'`, `'center'`, and `'right'`.
|
|
*/
|
|
align: 'left',
|
|
|
|
/**
|
|
* @cfg {Boolean} draggable
|
|
* False to disable drag-drop reordering of this column.
|
|
*/
|
|
draggable: true,
|
|
|
|
/**
|
|
* @cfg {String} tooltip
|
|
* A tooltip to display for this column header
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} [tooltipType="qtip"]
|
|
* The type of {@link #tooltip} to use. Either 'qtip' for QuickTips or 'title' for title attribute.
|
|
*/
|
|
tooltipType: 'qtip',
|
|
|
|
// Header does not use the typical ComponentDraggable class and therefore we
|
|
// override this with an emptyFn. It is controlled at the HeaderDragZone.
|
|
initDraggable: Ext.emptyFn,
|
|
|
|
/**
|
|
* @cfg {String} tdCls
|
|
* A CSS class names to apply to the table cells for this column.
|
|
*/
|
|
tdCls: '',
|
|
|
|
/**
|
|
* @cfg {Object/String} editor
|
|
* An optional xtype or config object for a {@link Ext.form.field.Field Field} to use for editing.
|
|
* Only applicable if the grid is using an {@link Ext.grid.plugin.Editing Editing} plugin.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object/String} field
|
|
* Alias for {@link #editor}.
|
|
* @deprecated 4.0.5 Use {@link #editor} instead.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Element} triggerEl
|
|
* Element that acts as button for column header dropdown menu.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Element} textEl
|
|
* Element that contains the text in column header.
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} isHeader
|
|
* @deprecated see isColumn
|
|
* Set in this class to identify, at runtime, instances which are not instances of the
|
|
* HeaderContainer base class, but are in fact, the subclass: Header.
|
|
*/
|
|
isHeader: true,
|
|
|
|
/**
|
|
* @property {Boolean} isColumn
|
|
* @readonly
|
|
* Set in this class to identify, at runtime, instances which are not instances of the
|
|
* HeaderContainer base class, but are in fact simple column headers.
|
|
*/
|
|
isColumn: true,
|
|
|
|
ascSortCls: Ext.baseCSSPrefix + 'column-header-sort-ASC',
|
|
descSortCls: Ext.baseCSSPrefix + 'column-header-sort-DESC',
|
|
|
|
componentLayout: 'columncomponent',
|
|
|
|
groupSubHeaderCls: Ext.baseCSSPrefix + 'group-sub-header',
|
|
|
|
groupHeaderCls: Ext.baseCSSPrefix + 'group-header',
|
|
|
|
clickTargetName: 'titleEl',
|
|
|
|
// So that when removing from group headers which are then empty and then get destroyed, there's no child DOM left
|
|
detachOnRemove : true,
|
|
|
|
// We need to override the default component resizable behaviour here
|
|
initResizable: Ext.emptyFn,
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
renderer,
|
|
listeners;
|
|
|
|
if (me.header != null) {
|
|
me.text = me.header;
|
|
me.header = null;
|
|
}
|
|
|
|
if (!me.triStateSort) {
|
|
me.possibleSortStates.length = 2;
|
|
}
|
|
|
|
// A group header; It contains items which are themselves Headers
|
|
if (me.columns != null) {
|
|
me.isGroupHeader = true;
|
|
|
|
|
|
// The headers become child items
|
|
me.items = me.columns;
|
|
me.columns = me.flex = me.width = null;
|
|
me.cls = (me.cls||'') + ' ' + me.groupHeaderCls;
|
|
|
|
// A group cannot be sorted, or resized - it shrinkwraps its children
|
|
me.sortable = me.resizable = false;
|
|
me.align = 'center';
|
|
} else {
|
|
// Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the
|
|
// HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes
|
|
// method extends the available layout space to accommodate the "desiredWidth" of all the columns.
|
|
if (me.flex) {
|
|
me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
|
|
}
|
|
}
|
|
me.addCls(Ext.baseCSSPrefix + 'column-header-align-' + me.align);
|
|
|
|
renderer = me.renderer;
|
|
if (renderer) {
|
|
// When specifying a renderer as a string, it always resolves
|
|
// to Ext.util.Format
|
|
if (typeof renderer == 'string') {
|
|
me.renderer = Ext.util.Format[renderer];
|
|
}
|
|
me.hasCustomRenderer = true;
|
|
} else if (me.defaultRenderer) {
|
|
me.scope = me;
|
|
me.renderer = me.defaultRenderer;
|
|
}
|
|
|
|
// Initialize as a HeaderContainer
|
|
me.callParent(arguments);
|
|
|
|
listeners = {
|
|
element: me.clickTargetName,
|
|
click: me.onTitleElClick,
|
|
contextmenu: me.onTitleElContextMenu,
|
|
mouseenter: me.onTitleMouseOver,
|
|
mouseleave: me.onTitleMouseOut,
|
|
scope: me
|
|
};
|
|
if (me.resizable) {
|
|
listeners.dblclick = me.onTitleElDblClick;
|
|
}
|
|
me.on(listeners);
|
|
},
|
|
|
|
onAdd: function(child) {
|
|
if (child.isColumn) {
|
|
child.isSubHeader = true;
|
|
child.addCls(this.groupSubHeaderCls);
|
|
}
|
|
if (this.hidden) {
|
|
child.hide();
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
onRemove: function(child) {
|
|
if (child.isSubHeader) {
|
|
child.isSubHeader = false;
|
|
child.removeCls(this.groupSubHeaderCls);
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
initRenderData: function() {
|
|
var me = this,
|
|
tipMarkup = '',
|
|
tip = me.tooltip,
|
|
attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
|
|
|
|
if (!Ext.isEmpty(tip)) {
|
|
tipMarkup = attr + '="' + tip + '" ';
|
|
}
|
|
|
|
return Ext.applyIf(me.callParent(arguments), {
|
|
text: me.text,
|
|
menuDisabled: me.menuDisabled,
|
|
tipMarkup: tipMarkup
|
|
});
|
|
},
|
|
|
|
applyColumnState: function (state) {
|
|
var me = this;
|
|
|
|
// apply any columns
|
|
me.applyColumnsState(state.columns);
|
|
|
|
// Only state properties which were saved should be restored.
|
|
// (Only user-changed properties were saved by getState)
|
|
if (state.hidden != null) {
|
|
me.hidden = state.hidden;
|
|
}
|
|
if (state.locked != null) {
|
|
me.locked = state.locked;
|
|
}
|
|
if (state.sortable != null) {
|
|
me.sortable = state.sortable;
|
|
}
|
|
if (state.width != null) {
|
|
me.flex = null;
|
|
me.width = state.width;
|
|
} else if (state.flex != null) {
|
|
me.width = null;
|
|
me.flex = state.flex;
|
|
}
|
|
},
|
|
|
|
getColumnState: function () {
|
|
var me = this,
|
|
items = me.items.items,
|
|
// Check for the existence of items, since column.Action won't have them
|
|
iLen = items ? items.length : 0,
|
|
i,
|
|
columns = [],
|
|
state = {
|
|
id: me.getStateId()
|
|
};
|
|
|
|
me.savePropsToState(['hidden', 'sortable', 'locked', 'flex', 'width'], state);
|
|
|
|
if (me.isGroupHeader) {
|
|
for (i = 0; i < iLen; i++) {
|
|
columns.push(items[i].getColumnState());
|
|
}
|
|
|
|
if (columns.length) {
|
|
state.columns = columns;
|
|
}
|
|
} else if (me.isSubHeader && me.ownerCt.hidden) {
|
|
// don't set hidden on the children so they can auto height
|
|
delete me.hidden;
|
|
}
|
|
|
|
if ('width' in state) {
|
|
delete state.flex; // width wins
|
|
}
|
|
return state;
|
|
},
|
|
|
|
getStateId: function () {
|
|
return this.stateId || this.headerId;
|
|
},
|
|
|
|
/**
|
|
* Sets the header text for this Column.
|
|
* @param {String} text The header to display on this Column.
|
|
*/
|
|
setText: function(text) {
|
|
this.text = text;
|
|
if (this.rendered) {
|
|
this.textEl.update(text);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the index of this column only if this column is a base level Column. If it
|
|
* is a group column, it returns `false`.
|
|
* @return {Number}
|
|
*/
|
|
getIndex: function() {
|
|
return this.isGroupColumn ? false : this.getOwnerHeaderCt().getHeaderIndex(this);
|
|
},
|
|
|
|
/**
|
|
* Returns the index of this column in the list of *visible* columns only if this column is a base level Column. If it
|
|
* is a group column, it returns `false`.
|
|
* @return {Number}
|
|
*/
|
|
getVisibleIndex: function() {
|
|
return this.isGroupColumn ? false : Ext.Array.indexOf(this.getOwnerHeaderCt().getVisibleGridColumns(), this);
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this,
|
|
grid = me.up('tablepanel');
|
|
|
|
me.callParent();
|
|
|
|
// Disable the menu if there's nothing to show in the menu, ie:
|
|
// Column cannot be sorted, grouped or locked, and there are no grid columns which may be hidden
|
|
if (grid && (!me.sortable || grid.sortableColumns === false) && !me.groupable &&
|
|
!me.lockable && (grid.enableColumnHide === false ||
|
|
!me.getOwnerHeaderCt().getHideableColumns().length)) {
|
|
me.menuDisabled = true;
|
|
}
|
|
|
|
me.protoEl.unselectable();
|
|
},
|
|
|
|
afterRender: function() {
|
|
var me = this,
|
|
triggerEl = me.triggerEl,
|
|
triggerWidth;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// 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) {
|
|
me.mon(me.getFocusEl(), {
|
|
focus: me.onTitleMouseOver,
|
|
blur: me.onTitleMouseOut,
|
|
scope: me
|
|
});
|
|
}
|
|
|
|
if (triggerEl && me.self.triggerElWidth === undefined) {
|
|
triggerEl.setStyle('display', 'block');
|
|
me.self.triggerElWidth = triggerEl.getWidth();
|
|
triggerEl.setStyle('display', '');
|
|
}
|
|
|
|
me.keyNav = new Ext.util.KeyNav(me.el, {
|
|
enter: me.onEnterKey,
|
|
down: me.onDownKey,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
// private
|
|
// Inform the header container about the resize
|
|
afterComponentLayout: function(width, height, oldWidth, oldHeight) {
|
|
var me = this,
|
|
ownerHeaderCt = me.getOwnerHeaderCt();
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (ownerHeaderCt && (oldWidth != null || me.flex) && width !== oldWidth) {
|
|
ownerHeaderCt.onHeaderResize(me, width, true);
|
|
}
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this;
|
|
// force destroy on the textEl, IE reports a leak
|
|
Ext.destroy(me.textEl, me.keyNav, me.field);
|
|
me.keyNav = null;
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onTitleMouseOver: function() {
|
|
this.titleEl.addCls(this.hoverCls);
|
|
},
|
|
|
|
onTitleMouseOut: function() {
|
|
this.titleEl.removeCls(this.hoverCls);
|
|
},
|
|
|
|
onDownKey: function(e) {
|
|
if (this.triggerEl) {
|
|
this.onTitleElClick(e, this.triggerEl.dom || this.el.dom);
|
|
}
|
|
},
|
|
|
|
onEnterKey: function(e) {
|
|
this.onTitleElClick(e, this.el.dom);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Double click handler which, if on left or right edges, auto-sizes the column to the left.
|
|
* @param e The dblclick event
|
|
*/
|
|
onTitleElDblClick: function(e, t) {
|
|
var me = this,
|
|
prev,
|
|
leafColumns;
|
|
|
|
// On left edge, resize previous *leaf* column in the grid
|
|
if (me.isOnLeftEdge(e)) {
|
|
|
|
// Look for the previous visible column header which is a leaf
|
|
// Note: previousNode can walk out of the container (this may be first child of a group)
|
|
prev = me.previousNode('gridcolumn:not([hidden]):not([isGroupHeader])');
|
|
|
|
// If found in the same grid, autosize it
|
|
if (prev && prev.getOwnerHeaderCt() === me.getOwnerHeaderCt()) {
|
|
prev.autoSize();
|
|
}
|
|
}
|
|
// On right edge, resize this column, or last sub-column within it
|
|
else if (me.isOnRightEdge(e)) {
|
|
|
|
// Click on right but in child container - autosize last leaf column
|
|
if (me.isGroupHeader && e.getPoint().isContainedBy(me.layout.innerCt)) {
|
|
leafColumns = me.query('gridcolumn:not([hidden]):not([isGroupHeader])');
|
|
this.getOwnerHeaderCt().autoSizeColumn(leafColumns[leafColumns.length - 1]);
|
|
return;
|
|
}
|
|
me.autoSize();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sizes this Column to fit the max content width.
|
|
* *Note that group columns shrinkwrap around the size of leaf columns. Auto sizing a group column
|
|
* autosizes descendant leaf columns.*
|
|
* @param {Ext.grid.column.Column/Number} The header (or index of header) to auto size.
|
|
*/
|
|
autoSize: function() {
|
|
var me = this,
|
|
leafColumns,
|
|
numLeaves, i,
|
|
headerCt;
|
|
|
|
// Group headers are shrinkwrap width, so autosizing one means autosizing leaf descendants.
|
|
if (me.isGroupHeader) {
|
|
leafColumns = me.query('gridcolumn:not([hidden]):not([isGroupHeader])');
|
|
numLeaves = leafColumns.length;
|
|
headerCt = this.getOwnerHeaderCt();
|
|
Ext.suspendLayouts();
|
|
for (i = 0; i < numLeaves; i++) {
|
|
headerCt.autoSizeColumn(leafColumns[i]);
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
return;
|
|
}
|
|
this.getOwnerHeaderCt().autoSizeColumn(this);
|
|
},
|
|
|
|
onTitleElClick: function(e, t) {
|
|
|
|
// The grid's docked HeaderContainer.
|
|
var me = this,
|
|
ownerHeaderCt = me.getOwnerHeaderCt();
|
|
|
|
if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
|
|
// Firefox doesn't check the current target in a within check.
|
|
// Therefore we check the target directly and then within (ancestors)
|
|
if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
|
|
ownerHeaderCt.onHeaderTriggerClick(me, e, t);
|
|
// if its not on the left hand edge, sort
|
|
} else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
|
|
me.toggleSortState();
|
|
ownerHeaderCt.onHeaderClick(me, e, t);
|
|
}
|
|
}
|
|
},
|
|
|
|
onTitleElContextMenu: function(e, t) {
|
|
// The grid's docked HeaderContainer.
|
|
var me = this,
|
|
ownerHeaderCt = me.getOwnerHeaderCt();
|
|
|
|
if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
|
|
ownerHeaderCt.onHeaderContextMenu(me, e, t);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Process UI events from the view. The owning TablePanel calls this method, relaying events from the TableView
|
|
* @param {String} type Event type, eg 'click'
|
|
* @param {Ext.view.Table} view TableView Component
|
|
* @param {HTMLElement} cell Cell HtmlElement the event took place within
|
|
* @param {Number} recordIndex Index of the associated Store Model (-1 if none)
|
|
* @param {Number} cellIndex Cell index within the row
|
|
* @param {Ext.EventObject} e Original event
|
|
*/
|
|
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
|
|
return this.fireEvent.apply(this, arguments);
|
|
},
|
|
|
|
toggleSortState: function() {
|
|
var me = this,
|
|
idx,
|
|
nextIdx;
|
|
|
|
if (me.sortable) {
|
|
idx = Ext.Array.indexOf(me.possibleSortStates, me.sortState);
|
|
|
|
nextIdx = (idx + 1) % me.possibleSortStates.length;
|
|
me.setSortState(me.possibleSortStates[nextIdx]);
|
|
}
|
|
},
|
|
|
|
doSort: function(state) {
|
|
var tablePanel = this.up('tablepanel'),
|
|
store = tablePanel.store;
|
|
|
|
// If the owning Panel's store is a NodeStore, this means that we are the unlocked side
|
|
// of a locked TreeGrid. We must use the TreeStore's sort method because we cannot
|
|
// reorder the NodeStore - that would break the tree.
|
|
if (tablePanel.ownerLockable && store.isNodeStore) {
|
|
store = tablePanel.ownerLockable.lockedGrid.store;
|
|
}
|
|
store.sort({
|
|
property: this.getSortParam(),
|
|
direction: state
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Returns the parameter to sort upon when sorting this header. By default this returns the dataIndex and will not
|
|
* need to be overriden in most cases.
|
|
* @return {String}
|
|
*/
|
|
getSortParam: function() {
|
|
return this.dataIndex;
|
|
},
|
|
|
|
setSortState: function(state, skipClear, initial) {
|
|
var me = this,
|
|
ascCls = me.ascSortCls,
|
|
descCls = me.descSortCls,
|
|
ownerHeaderCt = me.getOwnerHeaderCt(),
|
|
oldSortState = me.sortState;
|
|
|
|
state = state || null;
|
|
|
|
if (!me.sorting && oldSortState !== state && (me.getSortParam() != null)) {
|
|
// don't trigger a sort on the first time, we just want to update the UI
|
|
if (state && !initial) {
|
|
// when sorting, it will call setSortState on the header again once
|
|
// refresh is called
|
|
me.sorting = true;
|
|
me.doSort(state);
|
|
me.sorting = false;
|
|
}
|
|
switch (state) {
|
|
case 'DESC':
|
|
me.addCls(descCls);
|
|
me.removeCls(ascCls);
|
|
break;
|
|
case 'ASC':
|
|
me.addCls(ascCls);
|
|
me.removeCls(descCls);
|
|
break;
|
|
default:
|
|
me.removeCls([ascCls, descCls]);
|
|
}
|
|
if (ownerHeaderCt && !me.triStateSort && !skipClear) {
|
|
ownerHeaderCt.clearOtherSortStates(me);
|
|
}
|
|
me.sortState = state;
|
|
// we only want to fire the event if we have a null state when using triStateSort
|
|
if (me.triStateSort || state != null) {
|
|
ownerHeaderCt.fireEvent('sortchange', ownerHeaderCt, me, state);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Determines whether the UI should be allowed to offer an option to hide this column.
|
|
*
|
|
* A column may *not* be hidden if to do so would leave the grid with no visible columns.
|
|
*
|
|
* This is used to determine the enabled/disabled state of header hide menu items.
|
|
*/
|
|
isHideable: function() {
|
|
var result = {
|
|
hideCandidate: this,
|
|
result: this.hideable
|
|
};
|
|
|
|
if (result.result) {
|
|
this.ownerCt.bubble(this.hasOtherMenuEnabledChildren, null, [result]);
|
|
}
|
|
return result.result;
|
|
},
|
|
|
|
// Private bubble function used in determining whether this column is hideable.
|
|
// Executes in the scope of each component in the bubble sequence
|
|
hasOtherMenuEnabledChildren: function(result) {
|
|
var visibleChildren,
|
|
count;
|
|
|
|
// If we've bubbled out the top of the topmost HeaderContainer without finding a level with at least one visible,
|
|
// menu-enabled child *which is not the hideCandidate*, no hide!
|
|
if (!this.isXType('headercontainer')) {
|
|
result.result = false;
|
|
return false;
|
|
}
|
|
// If we find an ancestor level with at leat one visible, menu-enabled child *which is not the hideCandidate*,
|
|
// then the hideCandidate is hideable.
|
|
// Note that we are not using CQ #id matchers - ':not(#' + result.hideCandidate.id + ')' - to exclude
|
|
// the hideCandidate because CQ queries are cached for the document's lifetime.
|
|
visibleChildren = this.query('>:not([hidden]):not([menuDisabled])');
|
|
count = visibleChildren.length;
|
|
if (Ext.Array.contains(visibleChildren, result.hideCandidate)) {
|
|
count--;
|
|
}
|
|
if (count) {
|
|
return false;
|
|
}
|
|
// If we go up, it's because the hideCandidate was the only hideable child, so *this* becomes the hide candidate.
|
|
result.hideCandidate = this;
|
|
},
|
|
|
|
/**
|
|
* Determines whether the UI should be allowed to offer an option to lock or unlock this column. Note
|
|
* that this includes dragging a column into the opposite side of a {@link Ext.panel.Table#enableLocking lockable} grid.
|
|
*
|
|
* A column may *not* be moved from one side to the other of a {@link Ext.panel.Table#enableLocking lockable} grid
|
|
* if to do so would leave one side with no visible columns.
|
|
*
|
|
* This is used to determine the enabled/disabled state of the lock/unlock
|
|
* menu item used in {@link Ext.panel.Table#enableLocking lockable} grids, and to determine dropppabilty when dragging a header.
|
|
*/
|
|
isLockable: function() {
|
|
var result = {
|
|
result: this.lockable !== false
|
|
};
|
|
|
|
if (result.result) {
|
|
this.ownerCt.bubble(this.hasMultipleVisibleChildren, null, [result]);
|
|
}
|
|
return result.result;
|
|
},
|
|
|
|
/*
|
|
* Determines whether this column is in the locked side of a grid. It may be a descendant node of a locked column
|
|
* and as such will *not* have the {@link #locked} flag set.
|
|
*/
|
|
isLocked: function() {
|
|
return this.locked || !!this.up('[isColumn][locked]', '[isRootHeader]');
|
|
},
|
|
|
|
// Private bubble function used in determining whether this column is lockable.
|
|
// Executes in the scope of each component in the bubble sequence
|
|
hasMultipleVisibleChildren: function(result) {
|
|
// If we've bubbled out the top of the topmost HeaderContainer without finding a level with more than one visible child, no hide!
|
|
if (!this.isXType('headercontainer')) {
|
|
result.result = false;
|
|
return false;
|
|
}
|
|
// If we find an ancestor level with more than one visible child, it's fine to hide
|
|
if (this.query('>:not([hidden])').length > 1) {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
hide: function(fromOwner) {
|
|
var me = this,
|
|
ownerHeaderCt = me.getOwnerHeaderCt(),
|
|
owner = me.ownerCt,
|
|
ownerIsGroup,
|
|
item, items, len, i;
|
|
|
|
if (!me.isVisible()) {
|
|
// Already hidden
|
|
return me;
|
|
}
|
|
|
|
// If we have no ownerHeaderCt, it's during object construction, so
|
|
// just set the hidden flag and jump out
|
|
if (!ownerHeaderCt) {
|
|
me.callParent();
|
|
return me;
|
|
}
|
|
|
|
// Save our last shown width so we can gain space when shown back into fully flexed HeaderContainer.
|
|
// If we are, say, flex: 1 and all others are fixed width, then removing will do a layout which will
|
|
// convert all widths to flexes which will mean this flex value is too small.
|
|
if (ownerHeaderCt.forceFit) {
|
|
me.visibleSiblingCount = ownerHeaderCt.getVisibleGridColumns().length - 1;
|
|
if (me.flex) {
|
|
me.savedWidth = me.getWidth();
|
|
me.flex = null;
|
|
}
|
|
}
|
|
|
|
ownerIsGroup = owner.isGroupHeader;
|
|
|
|
// owner is a group, hide call didn't come from the owner
|
|
if (ownerIsGroup && !fromOwner) {
|
|
items = owner.query('>:not([hidden])');
|
|
// The owner only has one item that isn't hidden and it's me; hide the owner.
|
|
if (items.length === 1 && items[0] == me) {
|
|
me.ownerCt.hide();
|
|
return;
|
|
}
|
|
}
|
|
|
|
Ext.suspendLayouts();
|
|
|
|
if (me.isGroupHeader) {
|
|
items = me.items.items;
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
item = items[i];
|
|
if (!item.hidden) {
|
|
item.hide(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
me.callParent();
|
|
// Notify owning HeaderContainer
|
|
ownerHeaderCt.onHeaderHide(me);
|
|
|
|
Ext.resumeLayouts(true);
|
|
return me;
|
|
},
|
|
|
|
show: function(fromOwner, fromChild) {
|
|
var me = this,
|
|
ownerHeaderCt = me.getOwnerHeaderCt(),
|
|
ownerCt = me.ownerCt,
|
|
items,
|
|
len, i,
|
|
item,
|
|
myWidth,
|
|
availFlex,
|
|
totalFlex,
|
|
oldLen,
|
|
defaultWidth = Ext.grid.header.Container.prototype.defaultWidth;
|
|
|
|
if (me.isVisible()) {
|
|
return me;
|
|
}
|
|
|
|
if (!me.rendered) {
|
|
me.hidden = false;
|
|
return;
|
|
}
|
|
|
|
availFlex = ownerHeaderCt.el.getViewSize().width - (ownerHeaderCt.view.el.dom.scrollHeight > ownerHeaderCt.view.el.dom.clientHeight ? Ext.getScrollbarSize().width : 0);
|
|
|
|
// Size all other columns to accommodate re-shown column
|
|
if (ownerHeaderCt.forceFit) {
|
|
// Find all non-flexed visible siblings
|
|
items = Ext.ComponentQuery.query(':not([flex])', ownerHeaderCt.getVisibleGridColumns());
|
|
|
|
// Not all siblings have been converted to flex.
|
|
// The full conversion of all to flex only happens when the headerCt's ColumnLayout detects that there are no flexed children.
|
|
// Therefore, to force the fit, it converts all widths to flexes.
|
|
// So as long as we are not in that situation with artificial flexes, original column widths can be restored.
|
|
if (items.length) {
|
|
me.width = me.savedWidth || me.width || defaultWidth;
|
|
}
|
|
// Showing back into a fully flexed HeaderContainer
|
|
else {
|
|
items = ownerHeaderCt.getVisibleGridColumns();
|
|
len = items.length;
|
|
oldLen = me.visibleSiblingCount;
|
|
|
|
// Attempt to restore to a flex equal to saved width.
|
|
// If no saved width, it's the first show, use the width.
|
|
// The first show of a flex inside a forceFit container cannot work properly because flex values will
|
|
// have been allocated as the flexed pixel width.
|
|
myWidth = (me.savedWidth || me.width || defaultWidth);
|
|
|
|
// Scale the restoration width depending on whether there are now more or fewer visible
|
|
// siblings than we this column was hidden.
|
|
//
|
|
// For example, if this was hidden when there was only one other sibling, it's going to
|
|
// look VERY greedy now if it tries to claim all the space saved in 'savedWidth'.
|
|
//
|
|
// Likewise if there were lots of other columns present when this was hidden, but few now, this would
|
|
// get squeezed out of existence.
|
|
myWidth = Math.min(myWidth * (oldLen / len), defaultWidth,
|
|
Math.max(availFlex - (len * defaultWidth), defaultWidth));
|
|
|
|
me.width = null;
|
|
me.flex = myWidth;
|
|
availFlex -= myWidth;
|
|
totalFlex = 0;
|
|
for (i = 0; i < len; i++) {
|
|
item = items[i];
|
|
item.flex = (item.width || item.getWidth());
|
|
totalFlex += item.flex;
|
|
item.width = null;
|
|
}
|
|
|
|
// Now distribute the flex values so that they all add up to the total available flex *minus the flex of this*
|
|
// The theory here is that the column should *ideally* return to its original size with its flex value being its
|
|
// original size and the remaining flex distributed according to width proportions.
|
|
for (i = 0; i < len; i++) {
|
|
item = items[i];
|
|
item.flex = item.flex / totalFlex * availFlex;
|
|
}
|
|
}
|
|
}
|
|
|
|
Ext.suspendLayouts();
|
|
|
|
// If a sub header, ensure that the group header is visible
|
|
if (me.isSubHeader && ownerCt.hidden) {
|
|
ownerCt.show(false, true);
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
|
|
// If we've just shown a group with all its sub headers hidden, then show all its sub headers
|
|
if (me.isGroupHeader && fromChild !== true && !me.query(':not([hidden])').length) {
|
|
items = me.items.items;
|
|
for (i = 0, len = items.length; i < len; i++) {
|
|
item = items[i];
|
|
if (item.hidden) {
|
|
item.show(true);
|
|
}
|
|
}
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
|
|
// Notify owning HeaderContainer AFTER layout has been flushed so that header and headerCt widths are all correct
|
|
ownerCt = me.getOwnerHeaderCt();
|
|
if (ownerCt) {
|
|
ownerCt.onHeaderShow(me);
|
|
}
|
|
},
|
|
|
|
getDesiredWidth: function() {
|
|
var me = this;
|
|
if (me.rendered && me.componentLayout && me.componentLayout.lastComponentSize) {
|
|
// headers always have either a width or a flex
|
|
// because HeaderContainer sets a defaults width
|
|
// therefore we can ignore the natural width
|
|
// we use the componentLayout's tracked width so that
|
|
// we can calculate the desired width when rendered
|
|
// but not visible because its being obscured by a layout
|
|
return me.componentLayout.lastComponentSize.width;
|
|
// Flexed but yet to be rendered this could be the case
|
|
// where a HeaderContainer and Headers are simply used as data
|
|
// structures and not rendered.
|
|
}
|
|
else if (me.flex) {
|
|
// this is going to be wrong, the defaultWidth
|
|
return me.width;
|
|
}
|
|
else {
|
|
return me.width;
|
|
}
|
|
},
|
|
|
|
getCellSelector: function() {
|
|
return '.' + Ext.baseCSSPrefix + 'grid-cell-' + this.getItemId();
|
|
},
|
|
|
|
getCellInnerSelector: function() {
|
|
return this.getCellSelector() + ' .' + Ext.baseCSSPrefix + 'grid-cell-inner';
|
|
},
|
|
|
|
isOnLeftEdge: function(e) {
|
|
return (e.getXY()[0] - this.getX() <= this.handleWidth);
|
|
},
|
|
|
|
isOnRightEdge: function(e) {
|
|
return (this.getX() + this.getWidth() - e.getXY()[0] <= this.handleWidth);
|
|
},
|
|
|
|
// Called when the column menu is activated/deactivated.
|
|
// Change the UI to indicate active/inactive menu
|
|
setMenuActive: function(isMenuOpen) {
|
|
this.titleEl[isMenuOpen ? 'addCls' : 'removeCls'](this.headerOpenCls);
|
|
}
|
|
|
|
// intentionally omit getEditor and setEditor definitions bc we applyIf into columns
|
|
// when the editing plugin is injected
|
|
|
|
/**
|
|
* @method getEditor
|
|
* 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 field has not been instantiated it will be
|
|
* created. Note: These methods only have an implementation if an Editing plugin has been enabled on the grid.
|
|
* @param {Object} record The {@link Ext.data.Model Model} instance being edited.
|
|
* @param {Object} defaultField An object representing a default field to be created
|
|
* @return {Ext.form.field.Field} field
|
|
*/
|
|
/**
|
|
* @method setEditor
|
|
* 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.
|
|
* @param {Object} field An object representing a field to be created. If no xtype is specified a 'textfield' is
|
|
* assumed.
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* A Grid header type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
|
|
* handler for each icon.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'employeeStore',
|
|
* fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
|
|
* data:[
|
|
* {firstname:"Michael", lastname:"Scott"},
|
|
* {firstname:"Dwight", lastname:"Schrute"},
|
|
* {firstname:"Jim", lastname:"Halpert"},
|
|
* {firstname:"Kevin", lastname:"Malone"},
|
|
* {firstname:"Angela", lastname:"Martin"}
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Action Column Demo',
|
|
* store: Ext.data.StoreManager.lookup('employeeStore'),
|
|
* columns: [
|
|
* {text: 'First Name', dataIndex:'firstname'},
|
|
* {text: 'Last Name', dataIndex:'lastname'},
|
|
* {
|
|
* xtype:'actioncolumn',
|
|
* width:50,
|
|
* items: [{
|
|
* icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
|
|
* tooltip: 'Edit',
|
|
* handler: function(grid, rowIndex, colIndex) {
|
|
* var rec = grid.getStore().getAt(rowIndex);
|
|
* alert("Edit " + rec.get('firstname'));
|
|
* }
|
|
* },{
|
|
* icon: 'extjs/examples/restful/images/delete.png',
|
|
* tooltip: 'Delete',
|
|
* handler: function(grid, rowIndex, colIndex) {
|
|
* var rec = grid.getStore().getAt(rowIndex);
|
|
* alert("Terminate " + rec.get('firstname'));
|
|
* }
|
|
* }]
|
|
* }
|
|
* ],
|
|
* width: 250,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* The action column can be at any index in the columns array, and a grid can have any number of
|
|
* action columns.
|
|
*/
|
|
Ext.define('Ext.grid.column.Action', {
|
|
extend: Ext.grid.column.Column ,
|
|
alias: ['widget.actioncolumn'],
|
|
alternateClassName: 'Ext.grid.ActionColumn',
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* The URL of an image to display as the clickable element in the column.
|
|
*
|
|
* Defaults to `{@link Ext#BLANK_IMAGE_URL}`.
|
|
*/
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with
|
|
* a `{@link #getClass}` function.
|
|
*/
|
|
/**
|
|
* @cfg {Function} handler
|
|
* A function called when the icon is clicked.
|
|
* @cfg {Ext.view.Table} handler.view The owning TableView.
|
|
* @cfg {Number} handler.rowIndex The row index clicked on.
|
|
* @cfg {Number} handler.colIndex The column index clicked on.
|
|
* @cfg {Object} handler.item The clicked item (or this Column if multiple {@link #cfg-items} were not configured).
|
|
* @cfg {Event} handler.e The click event.
|
|
* @cfg {Ext.data.Model} handler.record The Record underlying the clicked row.
|
|
* @cfg {HTMLElement} handler.row The table row clicked upon.
|
|
*/
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope (`this` reference) in which the `{@link #handler}`, `{@link #getClass}`, `{@link #cfg-isDisabled}` and `{@link #getTip}` fuctions are executed.
|
|
* Defaults to this Column.
|
|
*/
|
|
/**
|
|
* @cfg {String} tooltip
|
|
* A tooltip message to be displayed on hover. {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must
|
|
* have been initialized.
|
|
*
|
|
* The tooltip may also be determined on a row by row basis by configuring a {@link #getTip} method.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} disabled
|
|
* If true, the action will not respond to click events, and will be displayed semi-opaque.
|
|
*
|
|
* This Column may also be disabled on a row by row basis by configuring a {@link #cfg-isDisabled} method.
|
|
*/
|
|
/**
|
|
* @cfg {Boolean} [stopSelection=true]
|
|
* Prevent grid selection upon mousedown.
|
|
*/
|
|
/**
|
|
* @cfg {Function} getClass
|
|
* A function which returns the CSS class to apply to the icon image.
|
|
* @cfg {Object} getClass.v The value of the column's configured field (if any).
|
|
* @cfg {Object} getClass.metadata An object in which you may set the following attributes:
|
|
* @cfg {String} getClass.metadata.css A CSS class name to add to the cell's TD element.
|
|
* @cfg {String} getClass.metadata.attr An HTML attribute definition string to apply to the data container
|
|
* element *within* the table cell (e.g. 'style="color:red;"').
|
|
* @cfg {Ext.data.Model} getClass.r The Record providing the data.
|
|
* @cfg {Number} getClass.rowIndex The row index.
|
|
* @cfg {Number} getClass.colIndex The column index.
|
|
* @cfg {Ext.data.Store} getClass.store The Store which is providing the data Model.
|
|
*/
|
|
/**
|
|
* @cfg {Function} isDisabled A function which determines whether the action item for any row is disabled and returns `true` or `false`.
|
|
* @cfg {Ext.view.Table} isDisabled.view The owning TableView.
|
|
* @cfg {Number} isDisabled.rowIndex The row index.
|
|
* @cfg {Number} isDisabled.colIndex The column index.
|
|
* @cfg {Object} isDisabled.item The clicked item (or this Column if multiple {@link #cfg-items} were not configured).
|
|
* @cfg {Ext.data.Model} isDisabled.record The Record underlying the row.
|
|
*/
|
|
/**
|
|
* @cfg {Function} getTip A function which returns the tooltip string for any row.
|
|
* @cfg {Object} getTip.v The value of the column's configured field (if any).
|
|
* @cfg {Object} getTip.metadata An object in which you may set the following attributes:
|
|
* @cfg {String} getTip.metadata.css A CSS class name to add to the cell's TD element.
|
|
* @cfg {String} getTip.metadata.attr An HTML attribute definition string to apply to the data
|
|
* container element _within_ the table cell (e.g. 'style="color:red;"').
|
|
* @cfg {Ext.data.Model} getTip.r The Record providing the data.
|
|
* @cfg {Number} getTip.rowIndex The row index.
|
|
* @cfg {Number} getTip.colIndex The column index.
|
|
* @cfg {Ext.data.Store} getTip.store The Store which is providing the data Model.
|
|
*
|
|
*/
|
|
/**
|
|
* @cfg {Object[]} items
|
|
* An Array which may contain multiple icon definitions, each element of which may contain:
|
|
*
|
|
* @cfg {String} items.icon The url of an image to display as the clickable element in the column.
|
|
*
|
|
* @cfg {String} items.iconCls A CSS class to apply to the icon image. To determine the class dynamically,
|
|
* configure the item with a `getClass` function.
|
|
*
|
|
* @cfg {Function} items.getClass A function which returns the CSS class to apply to the icon image.
|
|
* @cfg {Object} items.getClass.v The value of the column's configured field (if any).
|
|
* @cfg {Object} items.getClass.metadata An object in which you may set the following attributes:
|
|
* @cfg {String} items.getClass.metadata.css A CSS class name to add to the cell's TD element.
|
|
* @cfg {String} items.getClass.metadata.attr An HTML attribute definition string to apply to the data
|
|
* container element _within_ the table cell (e.g. 'style="color:red;"').
|
|
* @cfg {Ext.data.Model} items.getClass.r The Record providing the data.
|
|
* @cfg {Number} items.getClass.rowIndex The row index.
|
|
* @cfg {Number} items.getClass.colIndex The column index.
|
|
* @cfg {Ext.data.Store} items.getClass.store The Store which is providing the data Model.
|
|
*
|
|
* @cfg {Function} items.handler A function called when the icon is clicked.
|
|
* @cfg {Ext.view.Table} items.handler.view The owning TableView.
|
|
* @cfg {Number} items.handler.rowIndex The row index clicked on.
|
|
* @cfg {Number} items.handler.colIndex The column index clicked on.
|
|
* @cfg {Object} items.handler.item The clicked item (or this Column if multiple {@link #cfg-items} were not configured).
|
|
* @cfg {Event} items.handler.e The click event.
|
|
* @cfg {Ext.data.Model} items.handler.record The Record underlying the clicked row.
|
|
* @cfg {HTMLElement} items.row The table row clicked upon.
|
|
*
|
|
* @cfg {Function} items.isDisabled A function which determines whether the action item for any row is disabled and returns `true` or `false`.
|
|
* @cfg {Ext.view.Table} items.isDisabled.view The owning TableView.
|
|
* @cfg {Number} items.isDisabled.rowIndex The row index.
|
|
* @cfg {Number} items.isDisabled.colIndex The column index.
|
|
* @cfg {Object} items.isDisabled.item The clicked item (or this Column if multiple {@link #cfg-items} were not configured).
|
|
* @cfg {Ext.data.Model} items.isDisabled.record The Record underlying the row.
|
|
*
|
|
* @cfg {Function} items.getTip A function which returns the tooltip string for any row.
|
|
* @cfg {Object} items.getTip.v The value of the column's configured field (if any).
|
|
* @cfg {Object} items.getTip.metadata An object in which you may set the following attributes:
|
|
* @cfg {String} items.getTip.metadata.css A CSS class name to add to the cell's TD element.
|
|
* @cfg {String} items.getTip.metadata.attr An HTML attribute definition string to apply to the data
|
|
* container element _within_ the table cell (e.g. 'style="color:red;"').
|
|
* @cfg {Ext.data.Model} items.getTip.r The Record providing the data.
|
|
* @cfg {Number} items.getTip.rowIndex The row index.
|
|
* @cfg {Number} items.getTip.colIndex The column index.
|
|
* @cfg {Ext.data.Store} items.getTip.store The Store which is providing the data Model.
|
|
*
|
|
* @cfg {Object} items.scope The scope (`this` reference) in which the `handler`, `getClass`, `isDisabled` and `getTip` functions
|
|
* are executed. Fallback defaults are this Column's configured scope, then this Column.
|
|
*
|
|
* @cfg {String} items.tooltip A tooltip message to be displayed on hover.
|
|
* {@link Ext.tip.QuickTipManager#init Ext.tip.QuickTipManager} must have been initialized.
|
|
*
|
|
* The tooltip may also be determined on a row by row basis by configuring a `getTip` method.
|
|
*
|
|
* @cfg {Boolean} items.disabled If true, the action will not respond to click events, and will be displayed semi-opaque.
|
|
*
|
|
* This item may also be disabled on a row by row basis by configuring an `isDisabled` method.
|
|
*/
|
|
/**
|
|
* @property {Array} items
|
|
* An array of action items copied from the configured {@link #cfg-items items} configuration. Each will have
|
|
* an `enable` and `disable` method added which will enable and disable the associated action, and
|
|
* update the displayed icon accordingly.
|
|
*/
|
|
|
|
actionIdRe: new RegExp(Ext.baseCSSPrefix + 'action-col-(\\d+)'),
|
|
|
|
/**
|
|
* @cfg {String} altText
|
|
* The alt text to use for the image element.
|
|
*/
|
|
altText: '',
|
|
|
|
/**
|
|
* @cfg {String} [menuText=<i>Actions</i>]
|
|
* Text to display in this column's menu item if no {@link #text} was specified as a header.
|
|
*/
|
|
menuText: '<i>Actions</i>',
|
|
|
|
sortable: false,
|
|
|
|
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-action-col',
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
cfg = Ext.apply({}, config),
|
|
// Items may be defined on the prototype
|
|
items = cfg.items || me.items || [me],
|
|
hasGetClass,
|
|
i,
|
|
len;
|
|
|
|
|
|
me.origRenderer = cfg.renderer || me.renderer;
|
|
me.origScope = cfg.scope || me.scope;
|
|
|
|
me.renderer = me.scope = cfg.renderer = cfg.scope = null;
|
|
|
|
// This is a Container. Delete the items config to be reinstated after construction.
|
|
cfg.items = null;
|
|
me.callParent([cfg]);
|
|
|
|
// Items is an array property of ActionColumns
|
|
me.items = items;
|
|
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
if (items[i].getClass) {
|
|
hasGetClass = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Also need to check for getClass, since it changes how the cell renders
|
|
if (me.origRenderer || hasGetClass) {
|
|
me.hasCustomRenderer = true;
|
|
}
|
|
},
|
|
|
|
// Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
|
|
// class name x-action-col-{n}
|
|
defaultRenderer: function(v, meta, record, rowIdx, colIdx, store, view){
|
|
var me = this,
|
|
prefix = Ext.baseCSSPrefix,
|
|
scope = me.origScope || me,
|
|
items = me.items,
|
|
len = items.length,
|
|
i = 0,
|
|
item, ret, disabled, tooltip;
|
|
|
|
// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
|
|
// Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
|
|
// we will pass an incorrect value to getClass/getTip
|
|
ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
|
|
|
|
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
|
|
for (; i < len; i++) {
|
|
item = items[i];
|
|
|
|
disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false);
|
|
tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
|
|
|
|
// Only process the item action setup once.
|
|
if (!item.hasActionConfiguration) {
|
|
|
|
// Apply our documented default to all items
|
|
item.stopSelection = me.stopSelection;
|
|
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
|
|
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
|
|
item.hasActionConfiguration = true;
|
|
}
|
|
|
|
ret += '<img role="button" alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
|
|
'" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
|
|
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
|
|
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
|
|
}
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* Enables this ActionColumn's action at the specified index.
|
|
* @param {Number/Ext.grid.column.Action} index
|
|
* @param {Boolean} [silent=false]
|
|
*/
|
|
enableAction: function(index, silent) {
|
|
var me = this;
|
|
|
|
if (!index) {
|
|
index = 0;
|
|
} else if (!Ext.isNumber(index)) {
|
|
index = Ext.Array.indexOf(me.items, index);
|
|
}
|
|
me.items[index].disabled = false;
|
|
me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).removeCls(me.disabledCls);
|
|
if (!silent) {
|
|
me.fireEvent('enable', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disables this ActionColumn's action at the specified index.
|
|
* @param {Number/Ext.grid.column.Action} index
|
|
* @param {Boolean} [silent=false]
|
|
*/
|
|
disableAction: function(index, silent) {
|
|
var me = this;
|
|
|
|
if (!index) {
|
|
index = 0;
|
|
} else if (!Ext.isNumber(index)) {
|
|
index = Ext.Array.indexOf(me.items, index);
|
|
}
|
|
me.items[index].disabled = true;
|
|
me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'action-col-' + index).addCls(me.disabledCls);
|
|
if (!silent) {
|
|
me.fireEvent('disable', me);
|
|
}
|
|
},
|
|
|
|
destroy: function() {
|
|
delete this.items;
|
|
delete this.renderer;
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Process and refire events routed from the GridView's processEvent method.
|
|
* Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection.
|
|
* Returns the event handler's status to allow canceling of GridView's bubbling process.
|
|
*/
|
|
processEvent : function(type, view, cell, recordIndex, cellIndex, e, record, row){
|
|
var me = this,
|
|
target = e.getTarget(),
|
|
match,
|
|
item, fn,
|
|
key = type == 'keydown' && e.getKey(),
|
|
disabled;
|
|
|
|
// If the target was not within a cell (ie it's a keydown event from the View), then
|
|
// rely on the selection data injected by View.processUIEvent to grab the
|
|
// first action icon from the selected cell.
|
|
if (key && !Ext.fly(target).findParent(view.getCellSelector())) {
|
|
target = Ext.fly(cell).down('.' + Ext.baseCSSPrefix + 'action-col-icon', true);
|
|
}
|
|
|
|
// NOTE: The statement below tests the truthiness of an assignment.
|
|
if (target && (match = target.className.match(me.actionIdRe))) {
|
|
item = me.items[parseInt(match[1], 10)];
|
|
disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, record) : false);
|
|
if (item && !disabled) {
|
|
if (type == 'click' || (key == e.ENTER || key == e.SPACE)) {
|
|
fn = item.handler || me.handler;
|
|
if (fn) {
|
|
fn.call(item.scope || me.origScope || me, view, recordIndex, cellIndex, item, e, record, row);
|
|
}
|
|
} else if (type == 'mousedown' && item.stopSelection !== false) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
cascade: function(fn, scope) {
|
|
fn.call(scope||this, this);
|
|
},
|
|
|
|
// Private override because this cannot function as a Container, and it has an items property which is an Array, NOT a MixedCollection.
|
|
getRefItems: function() {
|
|
return [];
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.grid.column.Column', {
|
|
override: 'Ext.grid.column.Column',
|
|
|
|
isOnLeftEdge: function(e) {
|
|
return (!this.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) ?
|
|
(this.getX() + this.getWidth() - e.getXY()[0] <= this.handleWidth) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
isOnRightEdge: function(e) {
|
|
return (!this.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) ?
|
|
(e.getXY()[0] - this.getX() <= this.handleWidth) : this.callParent(arguments);
|
|
}
|
|
|
|
});
|
|
|
|
Ext.define('Ext.rtl.grid.plugin.HeaderResizer', {
|
|
override: 'Ext.grid.plugin.HeaderResizer',
|
|
|
|
adjustColumnWidth: function(offsetX) {
|
|
if (this.headerCt.isOppositeRootDirection()) {
|
|
offsetX = -offsetX;
|
|
}
|
|
this.callParent([offsetX]);
|
|
},
|
|
|
|
adjustConstrainRegion: function(region, t, r, b, l) {
|
|
return this.headerCt.isOppositeRootDirection() ?
|
|
region.adjust(t, -l, b, -r) : this.callParent(arguments);
|
|
},
|
|
|
|
calculateDragX: function(gridSection) {
|
|
var gridX = gridSection.getX(),
|
|
mouseX = this.tracker.getXY('point')[0];
|
|
|
|
if (this.headerCt.isOppositeRootDirection()) {
|
|
return mouseX - gridX;
|
|
} else {
|
|
return this.callParent(arguments);
|
|
}
|
|
|
|
},
|
|
|
|
getViewOffset: function(gridSection, view) {
|
|
var headerCtRtl = this.headerCt.getHierarchyState().rtl,
|
|
borderWidth = gridSection.el.getBorderWidth(headerCtRtl ? 'r': 'l'),
|
|
offset = view.getX() - gridSection.getX();
|
|
|
|
if (!headerCtRtl !== !Ext.rootHierarchyState.rtl) {
|
|
offset = -(offset + view.getWidth() - gridSection.getWidth());
|
|
}
|
|
|
|
return offset - borderWidth;
|
|
},
|
|
|
|
getMovingMarker: function(markerOwner){
|
|
if (this.headerCt.isOppositeRootDirection()) {
|
|
return markerOwner.getLhsMarker();
|
|
} else {
|
|
return markerOwner.getRhsMarker();
|
|
}
|
|
},
|
|
|
|
setMarkerX: function(marker, x) {
|
|
var headerCt = this.headerCt;
|
|
if (headerCt.getHierarchyState().rtl && !headerCt.isOppositeRootDirection()) {
|
|
marker.rtlSetLocalX(x);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Column definition class which renders boolean data fields. See the {@link Ext.grid.column.Column#xtype xtype}
|
|
* config option of {@link Ext.grid.column.Column} for more details.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'sampleStore',
|
|
* fields:[
|
|
* {name: 'framework', type: 'string'},
|
|
* {name: 'rocks', type: 'boolean'}
|
|
* ],
|
|
* data:{'items':[
|
|
* { 'framework': "Ext JS 4", 'rocks': true },
|
|
* { 'framework': "Sencha Touch", 'rocks': true },
|
|
* { 'framework': "Ext GWT", 'rocks': true },
|
|
* { 'framework': "Other Guys", 'rocks': false }
|
|
* ]},
|
|
* proxy: {
|
|
* type: 'memory',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'items'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Boolean Column Demo',
|
|
* store: Ext.data.StoreManager.lookup('sampleStore'),
|
|
* columns: [
|
|
* { text: 'Framework', dataIndex: 'framework', flex: 1 },
|
|
* {
|
|
* xtype: 'booleancolumn',
|
|
* text: 'Rocks',
|
|
* trueText: 'Yes',
|
|
* falseText: 'No',
|
|
* dataIndex: 'rocks'
|
|
* }
|
|
* ],
|
|
* height: 200,
|
|
* width: 400,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.column.Boolean', {
|
|
extend: Ext.grid.column.Column ,
|
|
alias: ['widget.booleancolumn'],
|
|
alternateClassName: 'Ext.grid.BooleanColumn',
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} trueText
|
|
* The string returned by the renderer when the column value is not falsey.
|
|
*/
|
|
trueText: 'true',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} falseText
|
|
* The string returned by the renderer when the column value is falsey (but not undefined).
|
|
*/
|
|
falseText: 'false',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} undefinedText
|
|
* The string returned by the renderer when the column value is undefined.
|
|
*/
|
|
undefinedText: ' ',
|
|
|
|
/**
|
|
* @cfg {Object} renderer
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* @hide
|
|
*/
|
|
|
|
defaultRenderer: function(value){
|
|
if (value === undefined) {
|
|
return this.undefinedText;
|
|
}
|
|
|
|
if (!value || value === 'false') {
|
|
return this.falseText;
|
|
}
|
|
return this.trueText;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.
|
|
*
|
|
* Example usage:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* fields : ['name', 'email', 'phone', 'active'],
|
|
* data : {
|
|
* items : [
|
|
* { name : 'Lisa', email : 'lisa@simpsons.com', phone : '555-111-1224', active : true },
|
|
* { name : 'Bart', email : 'bart@simpsons.com', phone : '555-222-1234', active : true },
|
|
* { name : 'Homer', email : 'home@simpsons.com', phone : '555-222-1244', active : false },
|
|
* { name : 'Marge', email : 'marge@simpsons.com', phone : '555-222-1254', active : true }
|
|
* ]
|
|
* },
|
|
* proxy : {
|
|
* type : 'memory',
|
|
* reader : {
|
|
* type : 'json',
|
|
* root : 'items'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title : 'Simpsons',
|
|
* height : 200,
|
|
* width : 400,
|
|
* renderTo : Ext.getBody(),
|
|
* store : store,
|
|
* columns : [
|
|
* { text : 'Name', dataIndex : 'name' },
|
|
* { text : 'Email', dataIndex : 'email', flex : 1 },
|
|
* { text : 'Phone', dataIndex : 'phone' },
|
|
* { xtype : 'checkcolumn', text : 'Active', dataIndex : 'active' }
|
|
* ]
|
|
* });
|
|
*
|
|
* The check column can be at any index in the columns array.
|
|
*/
|
|
Ext.define('Ext.grid.column.CheckColumn', {
|
|
extend: Ext.grid.column.Column ,
|
|
alternateClassName: 'Ext.ux.CheckColumn',
|
|
alias: 'widget.checkcolumn',
|
|
|
|
/**
|
|
* @cfg
|
|
* @hide
|
|
* Overridden from base class. Must center to line up with editor.
|
|
*/
|
|
align: 'center',
|
|
|
|
/**
|
|
* @cfg {Boolean} [stopSelection=true]
|
|
* Prevent grid selection upon mousedown.
|
|
*/
|
|
stopSelection: true,
|
|
|
|
tdCls: Ext.baseCSSPrefix + 'grid-cell-checkcolumn',
|
|
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-checkcolumn',
|
|
|
|
clickTargetName: 'el',
|
|
|
|
constructor: function() {
|
|
this.addEvents(
|
|
/**
|
|
* @event beforecheckchange
|
|
* Fires when before checked state of a row changes.
|
|
* The change may be vetoed by returning `false` from a listener.
|
|
* @param {Ext.ux.CheckColumn} this CheckColumn
|
|
* @param {Number} rowIndex The row index
|
|
* @param {Boolean} checked True if the box is to be checked
|
|
*/
|
|
'beforecheckchange',
|
|
/**
|
|
* @event checkchange
|
|
* Fires when the checked state of a row changes
|
|
* @param {Ext.ux.CheckColumn} this CheckColumn
|
|
* @param {Number} rowIndex The row index
|
|
* @param {Boolean} checked True if the box is now checked
|
|
*/
|
|
'checkchange'
|
|
);
|
|
this.scope = this;
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Process and refire events routed from the GridView's processEvent method.
|
|
*/
|
|
processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
|
|
var me = this,
|
|
key = type === 'keydown' && e.getKey(),
|
|
mousedown = type == 'mousedown';
|
|
|
|
if (!me.disabled && (mousedown || (key == e.ENTER || key == e.SPACE))) {
|
|
var dataIndex = me.dataIndex,
|
|
checked = !record.get(dataIndex);
|
|
|
|
// Allow apps to hook beforecheckchange
|
|
if (me.fireEvent('beforecheckchange', me, recordIndex, checked) !== false) {
|
|
record.set(dataIndex, checked);
|
|
me.fireEvent('checkchange', me, recordIndex, checked);
|
|
|
|
// Mousedown on the now nonexistent cell causes the view to blur, so stop it continuing.
|
|
if (mousedown) {
|
|
e.stopEvent();
|
|
}
|
|
|
|
// Selection will not proceed after this because of the DOM update caused by the record modification
|
|
// Invoke the SelectionModel unless configured not to do so
|
|
if (!me.stopSelection) {
|
|
view.selModel.selectByPosition({
|
|
row: recordIndex,
|
|
column: cellIndex
|
|
});
|
|
}
|
|
|
|
// Prevent the view from propagating the event to the selection model - we have done that job.
|
|
return false;
|
|
} else {
|
|
// Prevent the view from propagating the event to the selection model if configured to do so.
|
|
return !me.stopSelection;
|
|
}
|
|
} else {
|
|
return me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Enables this CheckColumn.
|
|
* @param {Boolean} [silent=false]
|
|
*/
|
|
onEnable: function(silent) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'grid-cell-' + me.id).removeCls(me.disabledCls);
|
|
if (!silent) {
|
|
me.fireEvent('enable', me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disables this CheckColumn.
|
|
* @param {Boolean} [silent=false]
|
|
*/
|
|
onDisable: function(silent) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
me.up('tablepanel').el.select('.' + Ext.baseCSSPrefix + 'grid-cell-' + me.id).addCls(me.disabledCls);
|
|
if (!silent) {
|
|
me.fireEvent('disable', me);
|
|
}
|
|
},
|
|
|
|
// Note: class names are not placed on the prototype bc renderer scope
|
|
// is not in the header.
|
|
renderer : function(value, meta) {
|
|
var cssPrefix = Ext.baseCSSPrefix,
|
|
cls = [cssPrefix + 'grid-checkcolumn'];
|
|
|
|
if (this.disabled) {
|
|
meta.tdCls += ' ' + this.disabledCls;
|
|
}
|
|
if (value) {
|
|
cls.push(cssPrefix + 'grid-checkcolumn-checked');
|
|
}
|
|
return '<img class="' + cls.join(' ') + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Column definition class which renders a passed date according to the default locale, or a configured
|
|
* {@link #format}.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'sampleStore',
|
|
* fields:[
|
|
* { name: 'symbol', type: 'string' },
|
|
* { name: 'date', type: 'date' },
|
|
* { name: 'change', type: 'number' },
|
|
* { name: 'volume', type: 'number' },
|
|
* { name: 'topday', type: 'date' }
|
|
* ],
|
|
* data:[
|
|
* { symbol: "msft", date: '2011/04/22', change: 2.43, volume: 61606325, topday: '04/01/2010' },
|
|
* { symbol: "goog", date: '2011/04/22', change: 0.81, volume: 3053782, topday: '04/11/2010' },
|
|
* { symbol: "apple", date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' },
|
|
* { symbol: "sencha", date: '2011/04/22', change: 8.85, volume: 5556351, topday: '04/22/2010' }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Date Column Demo',
|
|
* store: Ext.data.StoreManager.lookup('sampleStore'),
|
|
* columns: [
|
|
* { text: 'Symbol', dataIndex: 'symbol', flex: 1 },
|
|
* { text: 'Date', dataIndex: 'date', xtype: 'datecolumn', format:'Y-m-d' },
|
|
* { text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
|
|
* { text: 'Volume', dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' },
|
|
* { text: 'Top Day', dataIndex: 'topday', xtype: 'datecolumn', format:'l' }
|
|
* ],
|
|
* height: 200,
|
|
* width: 450,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.column.Date', {
|
|
extend: Ext.grid.column.Column ,
|
|
alias: ['widget.datecolumn'],
|
|
|
|
alternateClassName: 'Ext.grid.DateColumn',
|
|
|
|
/**
|
|
* @cfg {String} format
|
|
* A formatting string as used by {@link Ext.Date#format} to format a Date for this Column.
|
|
*
|
|
* Defaults to the default date from {@link Ext.Date#defaultFormat} which itself my be overridden
|
|
* in a locale file.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} renderer
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* @hide
|
|
*/
|
|
|
|
initComponent: function(){
|
|
if (!this.format) {
|
|
this.format = Ext.Date.defaultFormat;
|
|
}
|
|
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
defaultRenderer: function(value){
|
|
return Ext.util.Format.date(value, this.format);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Column definition class which renders a numeric data field according to a {@link #format} string.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'sampleStore',
|
|
* fields:[
|
|
* { name: 'symbol', type: 'string' },
|
|
* { name: 'price', type: 'number' },
|
|
* { name: 'change', type: 'number' },
|
|
* { name: 'volume', type: 'number' }
|
|
* ],
|
|
* data:[
|
|
* { symbol: "msft", price: 25.76, change: 2.43, volume: 61606325 },
|
|
* { symbol: "goog", price: 525.73, change: 0.81, volume: 3053782 },
|
|
* { symbol: "apple", price: 342.41, change: 1.35, volume: 24484858 },
|
|
* { symbol: "sencha", price: 142.08, change: 8.85, volume: 5556351 }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Number Column Demo',
|
|
* store: Ext.data.StoreManager.lookup('sampleStore'),
|
|
* columns: [
|
|
* { text: 'Symbol', dataIndex: 'symbol', flex: 1 },
|
|
* { text: 'Current Price', dataIndex: 'price', renderer: Ext.util.Format.usMoney },
|
|
* { text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
|
|
* { text: 'Volume', dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' }
|
|
* ],
|
|
* height: 200,
|
|
* width: 400,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.column.Number', {
|
|
extend: Ext.grid.column.Column ,
|
|
alias: ['widget.numbercolumn'],
|
|
|
|
alternateClassName: 'Ext.grid.NumberColumn',
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} format
|
|
* A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column.
|
|
*/
|
|
format : '0,000.00',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Object} renderer
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* @hide
|
|
*/
|
|
|
|
defaultRenderer: function(value){
|
|
return Ext.util.Format.number(value, this.format);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A special type of Grid {@link Ext.grid.column.Column} that provides automatic
|
|
* row numbering.
|
|
*
|
|
* Usage:
|
|
*
|
|
* columns: [
|
|
* {xtype: 'rownumberer'},
|
|
* {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
|
|
* {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
|
|
* {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
|
|
* {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
|
|
* {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
|
|
* ]
|
|
*
|
|
*/
|
|
Ext.define('Ext.grid.column.RowNumberer', {
|
|
extend: Ext.grid.column.Column ,
|
|
alternateClassName: 'Ext.grid.RowNumberer',
|
|
alias: 'widget.rownumberer',
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* Any valid text or HTML fragment to display in the header cell for the row number column.
|
|
*/
|
|
text: " ",
|
|
|
|
/**
|
|
* @cfg {Number} width
|
|
* The default width in pixels of the row number column.
|
|
*/
|
|
width: 23,
|
|
|
|
/**
|
|
* @cfg {Boolean} sortable
|
|
* @hide
|
|
*/
|
|
sortable: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [draggable=false]
|
|
* False to disable drag-drop reordering of this column.
|
|
*/
|
|
draggable: false,
|
|
|
|
// Flag to Lockable to move instances of this column to the locked side.
|
|
autoLock: true,
|
|
|
|
// May not be moved from its preferred locked side when grid is enableLocking:true
|
|
lockable: false,
|
|
|
|
align: 'right',
|
|
|
|
constructor : function(config){
|
|
var me = this;
|
|
|
|
// Copy the prototype's default width setting into an instance property to provide
|
|
// a default width which will not be overridden by AbstractContainer.applyDefaults use of Ext.applyIf
|
|
me.width = me.width;
|
|
|
|
me.callParent(arguments);
|
|
me.scope = me;
|
|
},
|
|
|
|
// private
|
|
resizable: false,
|
|
hideable: false,
|
|
menuDisabled: true,
|
|
dataIndex: '',
|
|
cls: Ext.baseCSSPrefix + 'row-numberer',
|
|
tdCls: Ext.baseCSSPrefix + 'grid-cell-row-numberer ' + Ext.baseCSSPrefix + 'grid-cell-special',
|
|
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-numberer',
|
|
rowspan: undefined,
|
|
|
|
// private
|
|
renderer: function(value, metaData, record, rowIdx, colIdx, store) {
|
|
var rowspan = this.rowspan,
|
|
page = store.currentPage,
|
|
result = record.index;
|
|
|
|
if (rowspan) {
|
|
metaData.tdAttr = 'rowspan="' + rowspan + '"';
|
|
}
|
|
|
|
if (result == null) {
|
|
result = rowIdx;
|
|
if (page > 1) {
|
|
result += (page - 1) * store.pageSize;
|
|
}
|
|
}
|
|
return result + 1;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s
|
|
* {@link Ext.data.Model#persistenceProperty data} using a {@link #tpl configured}
|
|
* {@link Ext.XTemplate XTemplate}.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'employeeStore',
|
|
* fields:['firstname', 'lastname', 'seniority', 'department'],
|
|
* groupField: 'department',
|
|
* data:[
|
|
* { firstname: "Michael", lastname: "Scott", seniority: 7, department: "Management" },
|
|
* { firstname: "Dwight", lastname: "Schrute", seniority: 2, department: "Sales" },
|
|
* { firstname: "Jim", lastname: "Halpert", seniority: 3, department: "Sales" },
|
|
* { firstname: "Kevin", lastname: "Malone", seniority: 4, department: "Accounting" },
|
|
* { firstname: "Angela", lastname: "Martin", seniority: 5, department: "Accounting" }
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Column Template Demo',
|
|
* store: Ext.data.StoreManager.lookup('employeeStore'),
|
|
* columns: [
|
|
* { text: 'Full Name', xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
|
|
* { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
|
|
* ],
|
|
* height: 200,
|
|
* width: 300,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.column.Template', {
|
|
extend: Ext.grid.column.Column ,
|
|
alias: ['widget.templatecolumn'],
|
|
|
|
alternateClassName: 'Ext.grid.TemplateColumn',
|
|
|
|
/**
|
|
* @cfg {String/Ext.XTemplate} tpl
|
|
* An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use to process a
|
|
* {@link Ext.data.Model Model}'s {@link Ext.data.Model#persistenceProperty data} to produce a
|
|
* column's rendered value.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} renderer
|
|
* @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* @hide
|
|
*/
|
|
|
|
initComponent: function(){
|
|
var me = this;
|
|
me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : new Ext.XTemplate(me.tpl);
|
|
// Set this here since the template may access any record values,
|
|
// so we must always run the update for this column
|
|
me.hasCustomRenderer = true;
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
defaultRenderer: function(value, meta, record) {
|
|
var data = Ext.apply({}, record.data, record.getAssociatedData());
|
|
return this.tpl.apply(data);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A feature is a type of plugin that is specific to the {@link Ext.grid.Panel}. It provides several
|
|
* hooks that allows the developer to inject additional functionality at certain points throughout the
|
|
* grid creation cycle. This class provides the base template methods that are available to the developer,
|
|
* it should be extended.
|
|
*
|
|
* There are several built in features that extend this class, for example:
|
|
*
|
|
* - {@link Ext.grid.feature.Grouping} - Shows grid rows in groups as specified by the {@link Ext.data.Store}
|
|
* - {@link Ext.grid.feature.RowBody} - Adds a body section for each grid row that can contain markup.
|
|
* - {@link Ext.grid.feature.Summary} - Adds a summary row at the bottom of the grid with aggregate totals for a column.
|
|
*
|
|
* ## Using Features
|
|
* A feature is added to the grid by specifying it an array of features in the configuration:
|
|
*
|
|
* var groupingFeature = Ext.create('Ext.grid.feature.Grouping');
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* // other options
|
|
* features: [groupingFeature]
|
|
* });
|
|
*
|
|
* ## Writing Features
|
|
*
|
|
* A Feature may add new DOM structure within the structure of a grid.
|
|
*
|
|
* A grid is essentially a `<table>` element. A {@link Ext.view.Table TableView} instance uses three {@link Ext.XTemplate XTemplates}
|
|
* to render the grid, `tableTpl`, `rowTpl`, `cellTpl`.
|
|
*
|
|
* * A {@link Ext.view.Table TableView} uses its `tableTpl` to emit the `<table>` and `<tbody>` HTML tags into its output stream. It also emits a `<thead>` which contains a
|
|
* sizing row. To ender the rows, it invokes {@link Ext.view.Table#renderRows} passing the `rows` member of its data object.
|
|
*
|
|
* The `tableTpl`'s data object Looks like this:
|
|
* {
|
|
* view: owningTableView,
|
|
* rows: recordsToRender,
|
|
* viewStartIndex: indexOfFirstRecordInStore,
|
|
* tableStyle: styleString
|
|
* }
|
|
*
|
|
* * A {@link Ext.view.Table TableView} uses its `rowTpl` to emit a `<tr>` HTML tag to its output stream. To render cells,
|
|
* it invokes {@link Ext.view.Table#renderCell} passing the `rows` member of its data object.
|
|
*
|
|
* The `rowTpl`'s data object looks like this:
|
|
*
|
|
* {
|
|
* view: owningTableView,
|
|
* record: recordToRender,
|
|
* recordIndex: indexOfRecordInStore,
|
|
* columns: arrayOfColumnDefinitions,
|
|
* itemClasses: arrayOfClassNames, // For outermost row in case of wrapping
|
|
* rowClasses: arrayOfClassNames, // For internal data bearing row in case of wrapping
|
|
* rowStyle: styleString
|
|
* }
|
|
*
|
|
* * A {@link Ext.view.Table TableView} uses its `cellTpl` to emit a `<td>` HTML tag to its output stream.
|
|
*
|
|
* The `cellTpl's` data object looks like this:
|
|
*
|
|
* {
|
|
* record: recordToRender
|
|
* column: columnToRender;
|
|
* recordIndex: indexOfRecordInStore,
|
|
* columnIndex: columnIndex,
|
|
* align: columnAlign,
|
|
* tdCls: classForCell
|
|
* }
|
|
*
|
|
* A Feature may inject its own tableTpl or rowTpl or cellTpl into the {@link Ext.view.Table TableView}'s rendering by
|
|
* calling {@link Ext.view.Table#addTableTpl} or {@link Ext.view.Table#addRowTpl} or {@link Ext.view.Table#addCellTpl}.
|
|
*
|
|
* The passed XTemplate is added *upstream* of the default template for the table element in a link list of XTemplates which contribute
|
|
* to the element's HTML. It may emit appropriate HTML strings into the output stream *around* a call to
|
|
*
|
|
* this.nextTpl.apply(values, out, parent);
|
|
*
|
|
* This passes the current value context, output stream and the parent value context to the next XTemplate in the list.
|
|
*
|
|
* @abstract
|
|
*/
|
|
Ext.define('Ext.grid.feature.Feature', {
|
|
extend: Ext.util.Observable ,
|
|
alias: 'feature.feature',
|
|
|
|
wrapsItem: false,
|
|
|
|
/*
|
|
* @property {Boolean} isFeature
|
|
* `true` in this class to identify an object as an instantiated Feature, or subclass thereof.
|
|
*/
|
|
isFeature: true,
|
|
|
|
/**
|
|
* True when feature is disabled.
|
|
*/
|
|
disabled: false,
|
|
|
|
/**
|
|
* @property {Boolean}
|
|
* Most features will expose additional events, some may not and will
|
|
* need to change this to false.
|
|
*/
|
|
hasFeatureEvent: true,
|
|
|
|
/**
|
|
* @property {String}
|
|
* Prefix to use when firing events on the view.
|
|
* For example a prefix of group would expose "groupclick", "groupcontextmenu", "groupdblclick".
|
|
*/
|
|
eventPrefix: null,
|
|
|
|
/**
|
|
* @property {String}
|
|
* Selector used to determine when to fire the event with the eventPrefix.
|
|
*/
|
|
eventSelector: null,
|
|
|
|
/**
|
|
* @property {Ext.view.Table}
|
|
* Reference to the TableView.
|
|
*/
|
|
view: null,
|
|
|
|
/**
|
|
* @property {Ext.grid.Panel}
|
|
* Reference to the grid panel
|
|
*/
|
|
grid: null,
|
|
|
|
constructor: function(config) {
|
|
this.initialConfig = config;
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
clone: function() {
|
|
return new this.self(this.initialConfig);
|
|
},
|
|
|
|
init: Ext.emptyFn,
|
|
|
|
destroy: function(){
|
|
this.clearListeners();
|
|
},
|
|
|
|
/**
|
|
* 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}
|
|
*
|
|
* The method must also return the eventName as the first index of the array
|
|
* to be passed to fireEvent.
|
|
* @template
|
|
*/
|
|
getFireEventArgs: function(eventName, view, featureTarget, e) {
|
|
return [eventName, view, featureTarget, e];
|
|
},
|
|
|
|
vetoEvent: Ext.emptyFn,
|
|
|
|
/**
|
|
* Enables the feature.
|
|
*/
|
|
enable: function() {
|
|
this.disabled = false;
|
|
},
|
|
|
|
/**
|
|
* Disables the feature.
|
|
*/
|
|
disable: function() {
|
|
this.disabled = true;
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* 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', {
|
|
|
|
extend: Ext.grid.feature.Feature ,
|
|
|
|
alias: 'feature.abstractsummary',
|
|
|
|
summaryRowCls: Ext.baseCSSPrefix + 'grid-row-summary',
|
|
summaryTableCls: Ext.plainTableCls + ' ' + Ext.baseCSSPrefix + 'grid-table',
|
|
summaryRowSelector: '.' + Ext.baseCSSPrefix + 'grid-row-summary',
|
|
|
|
// High priority rowTpl interceptor which sees summary rows early, and renders them correctly and then aborts the row rendering chain.
|
|
// This will only see action when summary rows are being updated and Table.onUpdate->Table.bufferRender renders the individual updated sumary row.
|
|
summaryRowTpl: {
|
|
before: function(values, out) {
|
|
// If a summary record comes through the rendering pipeline, render it simply, and return false from the
|
|
// before method which aborts the tpl chain
|
|
if (values.record.isSummary) {
|
|
this.summaryFeature.outputSummaryRecord(values.record, values, out);
|
|
return false;
|
|
}
|
|
},
|
|
priority: 1000
|
|
},
|
|
|
|
/**
|
|
* @cfg {Boolean}
|
|
* True to show the summary row.
|
|
*/
|
|
showSummaryRow: true,
|
|
|
|
// Listen for store updates. Eg, from an Editor.
|
|
init: function() {
|
|
var me = this;
|
|
me.view.summaryFeature = me;
|
|
me.rowTpl = me.view.self.prototype.rowTpl;
|
|
|
|
// Add a high priority interceptor which renders summary records simply
|
|
// This will only see action ona bufferedRender situation where summary records are updated.
|
|
me.view.addRowTpl(me.summaryRowTpl).summaryFeature = me;
|
|
},
|
|
|
|
/**
|
|
* Toggle whether or not to show the summary row.
|
|
* @param {Boolean} visible True to show the summary row
|
|
*/
|
|
toggleSummaryRow: function(visible) {
|
|
this.showSummaryRow = !!visible;
|
|
},
|
|
|
|
outputSummaryRecord: function(summaryRecord, contextValues, out) {
|
|
var view = contextValues.view,
|
|
savedRowValues = view.rowValues,
|
|
columns = contextValues.columns || view.headerCt.getVisibleGridColumns(),
|
|
colCount = columns.length, i, column,
|
|
// Set up a row rendering values object so that we can call the rowTpl directly to inject
|
|
// the markup of a grid row into the output stream.
|
|
values = {
|
|
view: view,
|
|
record: summaryRecord,
|
|
rowStyle: '',
|
|
rowClasses: [ this.summaryRowCls ],
|
|
itemClasses: [],
|
|
recordIndex: -1,
|
|
rowId: view.getRowId(summaryRecord),
|
|
columns: columns
|
|
};
|
|
|
|
// Because we are using the regular row rendering pathway, temporarily swap out the renderer for the summaryRenderer
|
|
for (i = 0; i < colCount; i++) {
|
|
column = columns[i];
|
|
column.savedRenderer = column.renderer;
|
|
if (column.summaryRenderer) {
|
|
column.renderer = column.summaryRenderer;
|
|
} else if (!column.summaryType) {
|
|
column.renderer = Ext.emptyFn;
|
|
}
|
|
|
|
// Summary records may contain values based upon the column's ID if the column is not mapped from a field
|
|
if (!column.dataIndex) {
|
|
column.dataIndex = column.id;
|
|
}
|
|
}
|
|
|
|
// Use the base template to render a summary row
|
|
view.rowValues = values;
|
|
view.self.prototype.rowTpl.applyOut(values, out);
|
|
view.rowValues = savedRowValues;
|
|
|
|
// Restore regular column renderers
|
|
for (i = 0; i < colCount; i++) {
|
|
column = columns[i];
|
|
column.renderer = column.savedRenderer;
|
|
column.savedRenderer = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get the summary data for a field.
|
|
* @private
|
|
* @param {Ext.data.Store} store The store to get the data from
|
|
* @param {String/Function} type The type of aggregation. If a function is specified it will
|
|
* be passed to the stores aggregate function.
|
|
* @param {String} field The field to aggregate on
|
|
* @param {Boolean} group True to aggregate in grouped mode
|
|
* @return {Number/String/Object} See the return type for the store functions.
|
|
* if the group parameter is `true` An object is returned with a property named for each group who's
|
|
* value is the summary value.
|
|
*/
|
|
getSummary: function(store, type, field, group){
|
|
var records = group.records;
|
|
|
|
if (type) {
|
|
if (Ext.isFunction(type)) {
|
|
return store.getAggregate(type, null, records, [field]);
|
|
}
|
|
|
|
switch (type) {
|
|
case 'count':
|
|
return records.length;
|
|
case 'min':
|
|
return store.getMin(records, field);
|
|
case 'max':
|
|
return store.getMax(records, field);
|
|
case 'sum':
|
|
return store.getSum(records, field);
|
|
case 'average':
|
|
return store.getAverage(records, field);
|
|
default:
|
|
return '';
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Used by the Grouping Feature when {@link #showSummaryRow} is `true`.
|
|
*
|
|
* Generates group summary data for the whole store.
|
|
* @private
|
|
* @return {Object} An object hash keyed by group name containing summary records.
|
|
*/
|
|
generateSummaryData: function(){
|
|
var me = this,
|
|
store = me.view.store,
|
|
groups = store.groups.items,
|
|
reader = store.proxy.reader,
|
|
len = groups.length,
|
|
groupField = me.getGroupField(),
|
|
data = {},
|
|
lockingPartner = me.lockingPartner,
|
|
i, group, record,
|
|
root, summaryRows, hasRemote,
|
|
convertedSummaryRow, remoteData;
|
|
|
|
/**
|
|
* @cfg {String} [remoteRoot=undefined]
|
|
* The name of the property which contains the Array of summary objects.
|
|
* It allows to use server-side calculated summaries.
|
|
*/
|
|
if (me.remoteRoot && reader.rawData) {
|
|
hasRemote = true;
|
|
remoteData = {};
|
|
// reset reader root and rebuild extractors to extract summaries data
|
|
root = reader.root;
|
|
reader.root = me.remoteRoot;
|
|
reader.buildExtractors(true);
|
|
summaryRows = reader.getRoot(reader.rawData)||[];
|
|
len = summaryRows.length;
|
|
|
|
// Ensure the Reader has a data conversion function to convert a raw data row into a Record data hash
|
|
if (!reader.convertRecordData) {
|
|
reader.buildExtractors();
|
|
}
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
convertedSummaryRow = {};
|
|
|
|
// Convert a raw data row into a Record's hash object using the Reader
|
|
reader.convertRecordData(convertedSummaryRow, summaryRows[i]);
|
|
remoteData[convertedSummaryRow[groupField]] = convertedSummaryRow;
|
|
}
|
|
|
|
// restore initial reader configuration
|
|
reader.root = root;
|
|
reader.buildExtractors(true);
|
|
}
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
group = groups[i];
|
|
// Something has changed or it doesn't exist, populate it
|
|
if (hasRemote || group.isDirty() || !group.hasAggregate()) {
|
|
if (hasRemote) {
|
|
record = me.populateRemoteRecord(group, remoteData);
|
|
} else {
|
|
record = me.populateRecord(group);
|
|
}
|
|
// Clear the dirty state of the group if this is the only Summary, or this is the right hand (normal grid's) summary
|
|
if (!lockingPartner || (me.view.ownerCt === me.view.ownerCt.ownerLockable.normalGrid)) {
|
|
group.commit();
|
|
}
|
|
} else {
|
|
record = group.getAggregateRecord();
|
|
}
|
|
data[group.key] = record;
|
|
}
|
|
|
|
return data;
|
|
},
|
|
|
|
populateRemoteRecord: function(group, data) {
|
|
var record = group.getAggregateRecord(true),
|
|
groupData = data[group.key],
|
|
field;
|
|
|
|
record.beginEdit();
|
|
for (field in groupData) {
|
|
if (groupData.hasOwnProperty(field)) {
|
|
if (field !== record.idProperty) {
|
|
record.set(field, groupData[field]);
|
|
}
|
|
}
|
|
}
|
|
record.endEdit(true);
|
|
record.commit(true);
|
|
|
|
return record;
|
|
},
|
|
|
|
populateRecord: function(group){
|
|
var me = this,
|
|
view = me.grid.ownerLockable ? me.grid.ownerLockable.view : me.view,
|
|
store = me.view.store,
|
|
record = group.getAggregateRecord(),
|
|
// Use the full column set, regardless of locking
|
|
columns = view.headerCt.getGridColumns(),
|
|
len = columns.length,
|
|
i, column, fieldName;
|
|
|
|
record.beginEdit();
|
|
for (i = 0; i < len; ++i) {
|
|
column = columns[i];
|
|
// Use the column id if there's no mapping, could be a calculated field
|
|
fieldName = column.dataIndex || column.id;
|
|
record.set(fieldName, me.getSummary(store, column.summaryType, fieldName, group));
|
|
}
|
|
record.endEdit(true);
|
|
record.commit();
|
|
|
|
return record;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private record store class which takes the place of the view's data store to provide a grouped
|
|
* view of the data when the Grouping feature is used.
|
|
*
|
|
* Relays granular mutation events from the underlying store as refresh events to the view.
|
|
*
|
|
* On mutation events from the underlying store, updates the summary rows by firing update events on the corresponding
|
|
* summary records.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.feature.GroupStore', {
|
|
extend: Ext.util.Observable ,
|
|
|
|
isStore: true,
|
|
|
|
constructor: function(groupingFeature, store) {
|
|
var me = this;
|
|
|
|
me.superclass.constructor.apply(me, arguments);
|
|
me.groupingFeature = groupingFeature;
|
|
me.bindStore(store);
|
|
me.processStore(store);
|
|
me.view.dataSource = me;
|
|
},
|
|
|
|
bindStore: function(store) {
|
|
var me = this;
|
|
|
|
if (me.store) {
|
|
Ext.destroy(me.storeListeners);
|
|
me.store = null;
|
|
}
|
|
if (store) {
|
|
me.storeListeners = store.on({
|
|
bulkremove: me.onBulkRemove,
|
|
add: me.onAdd,
|
|
update: me.onUpdate,
|
|
refresh: me.onRefresh,
|
|
clear: me.onClear,
|
|
scope: me,
|
|
destroyable: true
|
|
});
|
|
me.store = store;
|
|
}
|
|
},
|
|
|
|
processStore: function(store) {
|
|
var me = this,
|
|
groups = store.getGroups(),
|
|
groupCount = groups.length,
|
|
i,
|
|
group,
|
|
groupPlaceholder,
|
|
data = me.data,
|
|
oldGroupCache = me.groupingFeature.groupCache,
|
|
groupCache = me.groupingFeature.clearGroupCache(),
|
|
collapseAll = me.groupingFeature.startCollapsed;
|
|
|
|
if (data) {
|
|
data.clear();
|
|
} else {
|
|
data = me.data = new Ext.util.MixedCollection(false, Ext.data.Store.recordIdFn);
|
|
}
|
|
|
|
if (store.getCount()) {
|
|
|
|
// Upon first process of a loaded store, clear the "always" collapse" flag
|
|
me.groupingFeature.startCollapsed = false;
|
|
|
|
for (i = 0; i < groupCount; i++) {
|
|
|
|
// group contains eg
|
|
// { children: [childRec0, childRec1...], name: <group field value for group> }
|
|
group = groups[i];
|
|
|
|
// Cache group information by group name
|
|
groupCache[group.name] = group;
|
|
group.isCollapsed = collapseAll || (oldGroupCache[group.name] && oldGroupCache[group.name].isCollapsed);
|
|
|
|
// If group is collapsed, then represent it by one dummy row which is never visible, but which acts
|
|
// as a start and end group trigger.
|
|
if (group.isCollapsed) {
|
|
group.placeholder = groupPlaceholder = new store.model(null, 'group-' + group.name + '-placeholder');
|
|
groupPlaceholder.set(me.getGroupField(), group.name);
|
|
groupPlaceholder.rows = groupPlaceholder.children = group.children;
|
|
groupPlaceholder.isCollapsedPlaceholder = true;
|
|
data.add(groupPlaceholder);
|
|
}
|
|
|
|
// Expanded group - add the group's child records.
|
|
else {
|
|
data.insert(me.data.length, group.children);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
isCollapsed: function(name) {
|
|
return this.groupingFeature.groupCache[name].isCollapsed;
|
|
},
|
|
|
|
isInCollapsedGroup: function(record) {
|
|
var groupData;
|
|
|
|
if (this.store.isGrouped() && (groupData = this.groupingFeature.groupCache[record.get(this.getGroupField())])) {
|
|
return groupData.isCollapsed || false;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
getCount: function() {
|
|
return this.data.getCount();
|
|
},
|
|
|
|
getTotalCount: function() {
|
|
return this.data.getCount();
|
|
},
|
|
|
|
// This class is only created for fully loaded, non-buffered stores
|
|
rangeCached: function(start, end) {
|
|
return end < this.getCount();
|
|
},
|
|
|
|
getRange: function(start, end, options) {
|
|
var result = this.data.getRange(start, end);
|
|
|
|
if (options && options.callback) {
|
|
options.callback.call(options.scope || this, result, start, end, options);
|
|
}
|
|
return result;
|
|
},
|
|
|
|
getAt: function(index) {
|
|
return this.getRange(index, index)[0];
|
|
},
|
|
|
|
getById: function(id) {
|
|
return this.store.getById(id);
|
|
},
|
|
|
|
expandGroup: function(group) {
|
|
var me = this,
|
|
startIdx;
|
|
|
|
if (typeof group === 'string') {
|
|
group = me.groupingFeature.groupCache[group];
|
|
}
|
|
|
|
if (group && group.children.length && (startIdx = me.indexOf(group.children[0], true, true)) !== -1) {
|
|
|
|
// Any event handlers must see the new state
|
|
group.isCollapsed = false;
|
|
me.isExpandingOrCollapsing = 1;
|
|
|
|
// Remove the collapsed group placeholder record
|
|
me.data.removeAt(startIdx);
|
|
me.fireEvent('bulkremove', me, [me.getGroupPlaceholder(group)], [startIdx]);
|
|
|
|
// Insert the child records in its place
|
|
me.data.insert(startIdx, group.children);
|
|
me.fireEvent('add', me, group.children, startIdx);
|
|
|
|
me.fireEvent('groupexpand', me, group);
|
|
me.isExpandingOrCollapsing = 0;
|
|
}
|
|
},
|
|
|
|
collapseGroup: function(group) {
|
|
var me = this,
|
|
startIdx,
|
|
placeholder,
|
|
i, j, len,
|
|
removeIndices;
|
|
|
|
if (typeof group === 'string') {
|
|
group = me.groupingFeature.groupCache[group];
|
|
}
|
|
|
|
if (group && (len = group.children.length) && (startIdx = me.indexOf(group.children[0], true)) !== -1) {
|
|
|
|
// Any event handlers must see the new state
|
|
group.isCollapsed = true;
|
|
me.isExpandingOrCollapsing = 2;
|
|
|
|
// Remove the group child records
|
|
me.data.removeRange(startIdx, len);
|
|
|
|
// Indices argument is mandatory and used by views - we MUST build it.
|
|
removeIndices = new Array(len);
|
|
for (i = 0, j = startIdx; i < len; i++, j++) {
|
|
removeIndices[i] = j;
|
|
}
|
|
me.fireEvent('bulkremove', me, group.children, removeIndices);
|
|
|
|
// Insert a placeholder record in their place
|
|
me.data.insert(startIdx, placeholder = me.getGroupPlaceholder(group));
|
|
me.fireEvent('add', me, [placeholder], startIdx);
|
|
|
|
me.fireEvent('groupcollapse', me, group);
|
|
me.isExpandingOrCollapsing = 0;
|
|
}
|
|
},
|
|
|
|
getGroupPlaceholder: function(group) {
|
|
if (!group.placeholder) {
|
|
var groupPlaceholder = group.placeholder = new this.store.model(null, 'group-' + group.name + '-placeholder');
|
|
groupPlaceholder.set(this.getGroupField(), group.name);
|
|
groupPlaceholder.rows = groupPlaceholder.children = group.children;
|
|
groupPlaceholder.isCollapsedPlaceholder = true;
|
|
}
|
|
return group.placeholder;
|
|
},
|
|
|
|
// Find index of record in group store.
|
|
// If it's in a collapsed group, then it's -1, not present
|
|
// Otherwise, loop through groups keeping tally of intervening records.
|
|
indexOf: function(record, viewOnly, includeCollapsed) {
|
|
var me = this,
|
|
groups,
|
|
groupCount,
|
|
i,
|
|
group,
|
|
groupIndex,
|
|
result = 0;
|
|
|
|
if (record && (includeCollapsed || !me.isInCollapsedGroup(record))) {
|
|
groups = me.store.getGroups();
|
|
groupCount = groups.length;
|
|
for (i = 0; i < groupCount; i++) {
|
|
|
|
// group contains eg
|
|
// { children: [childRec0, childRec1...], name: <group field value for group> }
|
|
group = groups[i];
|
|
if (group.name === this.store.getGroupString(record)) {
|
|
groupIndex = Ext.Array.indexOf(group.children, record);
|
|
return result + groupIndex;
|
|
}
|
|
|
|
result += (viewOnly && me.isCollapsed(group.name)) ? 1 : group.children.length;
|
|
}
|
|
}
|
|
return -1;
|
|
},
|
|
|
|
/**
|
|
* Get the index within the entire dataset. From 0 to the totalCount.
|
|
*
|
|
* Like #indexOf, this method is effected by filtering.
|
|
*
|
|
* @param {Ext.data.Model} record The Ext.data.Model object to find.
|
|
* @return {Number} The index of the passed Record. Returns -1 if not found.
|
|
*/
|
|
indexOfTotal: function(record) {
|
|
var index = record.index;
|
|
if (index || index === 0) {
|
|
return index;
|
|
}
|
|
return this.istore.ndexOf(record);
|
|
},
|
|
|
|
onRefresh: function(store) {
|
|
this.processStore(this.store);
|
|
this.fireEvent('refresh', this);
|
|
},
|
|
|
|
onBulkRemove: function(store, records, indices) {
|
|
this.processStore(this.store);
|
|
this.fireEvent('refresh', this);
|
|
},
|
|
|
|
onClear: function(store, records, startIndex) {
|
|
this.processStore(this.store);
|
|
this.fireEvent('clear', this);
|
|
},
|
|
|
|
onAdd: function(store, records, startIndex) {
|
|
this.processStore(this.store);
|
|
this.fireEvent('refresh', this);
|
|
},
|
|
|
|
onUpdate: function(store, record, operation, modifiedFieldNames) {
|
|
var me = this,
|
|
groupInfo = me.groupingFeature.getRecordGroup(record),
|
|
firstRec, lastRec;
|
|
|
|
// The grouping field value has been modified.
|
|
// This could either move a record from one group to another, or introduce a new group.
|
|
// Either way, we have to refresh the grid
|
|
if (store.isGrouped()) {
|
|
if (modifiedFieldNames && Ext.Array.contains(modifiedFieldNames, me.groupingFeature.getGroupField())) {
|
|
return me.onRefresh(me.store);
|
|
}
|
|
|
|
// Fire an update event on the collapsed group placeholder record
|
|
if (groupInfo.isCollapsed) {
|
|
me.fireEvent('update', me, groupInfo.placeholder);
|
|
}
|
|
|
|
// Not in a collapsed group, fire update event on the modified record
|
|
// and, if in a grouped store, on the first and last records in the group.
|
|
else {
|
|
Ext.suspendLayouts();
|
|
|
|
// Propagate the record's update event
|
|
me.fireEvent('update', me, record, operation, modifiedFieldNames);
|
|
|
|
// Fire update event on first and last record in group (only once if a single row group)
|
|
// So that custom header TPL is applied, and the summary row is updated
|
|
firstRec = groupInfo.children[0];
|
|
lastRec = groupInfo.children[groupInfo.children.length - 1];
|
|
|
|
// Do not pass modifiedFieldNames so that the TableView's shouldUpdateCell call always returns true.
|
|
if (firstRec !== record) {
|
|
me.fireEvent('update', me, firstRec, 'edit');
|
|
}
|
|
if (lastRec !== record && lastRec !== firstRec) {
|
|
me.fireEvent('update', me, lastRec, 'edit');
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
} else {
|
|
// Propagate the record's update event
|
|
me.fireEvent('update', me, record, operation, modifiedFieldNames);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This feature allows to display the grid rows aggregated into groups as specified by the {@link Ext.data.Store#groupers}
|
|
* specified on the Store. The group will show the title for the group name and then the appropriate records for the group
|
|
* underneath. The groups can also be expanded and collapsed.
|
|
*
|
|
* ## Extra Events
|
|
*
|
|
* This feature adds several extra events that will be fired on the grid to interact with the groups:
|
|
*
|
|
* - {@link #groupclick}
|
|
* - {@link #groupdblclick}
|
|
* - {@link #groupcontextmenu}
|
|
* - {@link #groupexpand}
|
|
* - {@link #groupcollapse}
|
|
*
|
|
* ## Menu Augmentation
|
|
*
|
|
* This feature adds extra options to the grid column menu to provide the user with functionality to modify the grouping.
|
|
* This can be disabled by setting the {@link #enableGroupingMenu} option. The option to disallow grouping from being turned off
|
|
* by the user is {@link #enableNoGroups}.
|
|
*
|
|
* ## Controlling Group Text
|
|
*
|
|
* The {@link #groupHeaderTpl} is used to control the rendered title for each group. It can modified to customized
|
|
* the default display.
|
|
*
|
|
* ## Example Usage
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.Store', {
|
|
* storeId:'employeeStore',
|
|
* fields:['name', 'seniority', 'department'],
|
|
* groupField: 'department',
|
|
* data: {'employees':[
|
|
* { "name": "Michael Scott", "seniority": 7, "department": "Management" },
|
|
* { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
|
|
* { "name": "Jim Halpert", "seniority": 3, "department": "Sales" },
|
|
* { "name": "Kevin Malone", "seniority": 4, "department": "Accounting" },
|
|
* { "name": "Angela Martin", "seniority": 5, "department": "Accounting" }
|
|
* ]},
|
|
* proxy: {
|
|
* type: 'memory',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'employees'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Employees',
|
|
* store: Ext.data.StoreManager.lookup('employeeStore'),
|
|
* columns: [
|
|
* { text: 'Name', dataIndex: 'name' },
|
|
* { text: 'Seniority', dataIndex: 'seniority' }
|
|
* ],
|
|
* features: [{ftype:'grouping'}],
|
|
* width: 200,
|
|
* height: 275,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* **Note:** To use grouping with a grid that has {@link Ext.grid.column.Column#locked locked columns}, you need to supply
|
|
* the grouping feature as a config object - so the grid can create two instances of the grouping feature.
|
|
*
|
|
* @author Nigel White
|
|
*/
|
|
Ext.define('Ext.grid.feature.Grouping', {
|
|
extend: Ext.grid.feature.Feature ,
|
|
mixins: {
|
|
summary: Ext.grid.feature.AbstractSummary
|
|
},
|
|
|
|
|
|
alias: 'feature.grouping',
|
|
|
|
eventPrefix: 'group',
|
|
groupCls: Ext.baseCSSPrefix + 'grid-group-hd',
|
|
eventSelector: '.' + Ext.baseCSSPrefix + 'grid-group-hd',
|
|
|
|
refreshData: {},
|
|
groupInfo: {},
|
|
wrapsItem: true,
|
|
|
|
/**
|
|
* @event groupclick
|
|
* @param {Ext.view.Table} view
|
|
* @param {HTMLElement} node
|
|
* @param {String} group The name of the group
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
|
|
/**
|
|
* @event groupdblclick
|
|
* @param {Ext.view.Table} view
|
|
* @param {HTMLElement} node
|
|
* @param {String} group The name of the group
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
|
|
/**
|
|
* @event groupcontextmenu
|
|
* @param {Ext.view.Table} view
|
|
* @param {HTMLElement} node
|
|
* @param {String} group The name of the group
|
|
* @param {Ext.EventObject} e
|
|
*/
|
|
|
|
/**
|
|
* @event groupcollapse
|
|
* @param {Ext.view.Table} view
|
|
* @param {HTMLElement} node
|
|
* @param {String} group The name of the group
|
|
*/
|
|
|
|
/**
|
|
* @event groupexpand
|
|
* @param {Ext.view.Table} view
|
|
* @param {HTMLElement} node
|
|
* @param {String} group The name of the group
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Array/Ext.Template} groupHeaderTpl
|
|
* A string Template snippet, an array of strings (optionally followed by an object containing Template methods) to be used to construct a Template, or a Template instance.
|
|
*
|
|
* - Example 1 (Template snippet):
|
|
*
|
|
* groupHeaderTpl: 'Group: {name}'
|
|
*
|
|
* - Example 2 (Array):
|
|
*
|
|
* groupHeaderTpl: [
|
|
* 'Group: ',
|
|
* '<div>{name:this.formatName}</div>',
|
|
* {
|
|
* formatName: function(name) {
|
|
* return Ext.String.trim(name);
|
|
* }
|
|
* }
|
|
* ]
|
|
*
|
|
* - Example 3 (Template Instance):
|
|
*
|
|
* groupHeaderTpl: Ext.create('Ext.XTemplate',
|
|
* 'Group: ',
|
|
* '<div>{name:this.formatName}</div>',
|
|
* {
|
|
* formatName: function(name) {
|
|
* return Ext.String.trim(name);
|
|
* }
|
|
* }
|
|
* )
|
|
*
|
|
* @cfg {String} groupHeaderTpl.groupField The field name being grouped by.
|
|
* @cfg {String} groupHeaderTpl.columnName The column header associated with the field being grouped by *if there is a column for the field*, falls back to the groupField name.
|
|
* @cfg {Mixed} groupHeaderTpl.groupValue The value of the {@link Ext.data.Store#groupField groupField} for the group header being rendered.
|
|
* @cfg {String} groupHeaderTpl.renderedGroupValue The rendered value of the {@link Ext.data.Store#groupField groupField} for the group header being rendered, as produced by the column renderer.
|
|
* @cfg {String} groupHeaderTpl.name An alias for renderedGroupValue
|
|
* @cfg {Ext.data.Model[]} groupHeaderTpl.rows Deprecated - use children instead. An array containing the child records for the group being rendered. *Not available if the store is {@link Ext.data.Store#buffered buffered}*
|
|
* @cfg {Ext.data.Model[]} groupHeaderTpl.children An array containing the child records for the group being rendered. *Not available if the store is {@link Ext.data.Store#buffered buffered}*
|
|
*/
|
|
groupHeaderTpl: '{columnName}: {name}',
|
|
|
|
/**
|
|
* @cfg {Number} [depthToIndent=17]
|
|
* Number of pixels to indent per grouping level
|
|
*/
|
|
depthToIndent: 17,
|
|
|
|
collapsedCls: Ext.baseCSSPrefix + 'grid-group-collapsed',
|
|
hdCollapsedCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed',
|
|
hdNotCollapsibleCls: Ext.baseCSSPrefix + 'grid-group-hd-not-collapsible',
|
|
collapsibleCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsible',
|
|
ctCls: Ext.baseCSSPrefix + 'group-hd-container',
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} [groupByText="Group by this field"]
|
|
* Text displayed in the grid header menu for grouping by header.
|
|
*/
|
|
groupByText : 'Group by this field',
|
|
//</locale>
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} [showGroupsText="Show in groups"]
|
|
* Text displayed in the grid header for enabling/disabling grouping.
|
|
*/
|
|
showGroupsText : 'Show in groups',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} [hideGroupedHeader=false]
|
|
* True to hide the header that is currently grouped.
|
|
*/
|
|
hideGroupedHeader : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [startCollapsed=false]
|
|
* True to start all groups collapsed.
|
|
*/
|
|
startCollapsed : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableGroupingMenu=true]
|
|
* True to enable the grouping control in the header menu.
|
|
*/
|
|
enableGroupingMenu : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableNoGroups=true]
|
|
* True to allow the user to turn off grouping.
|
|
*/
|
|
enableNoGroups : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [collapsible=true]
|
|
* Set to `false` to disable collapsing groups from the UI.
|
|
*
|
|
* This is set to `false` when the associated {@link Ext.data.Store store} is
|
|
* {@link Ext.data.Store#buffered buffered}.
|
|
*/
|
|
collapsible: true,
|
|
|
|
//<locale>
|
|
expandTip: 'Click to expand. CTRL key collapses all others',
|
|
//</locale>
|
|
|
|
//<locale>
|
|
collapseTip: 'Click to collapse. CTRL/click collapses all others',
|
|
//</locale>
|
|
|
|
showSummaryRow: false,
|
|
|
|
tableTpl: {
|
|
before: function(values) {
|
|
// Do not process if we are disabled, and do not process summary records
|
|
if (this.groupingFeature.disabled || values.rows.length === 1 && values.rows[0].isSummary) {
|
|
return;
|
|
}
|
|
this.groupingFeature.setup(values.rows, values.view.rowValues);
|
|
},
|
|
after: function(values) {
|
|
// Do not process if we are disabled, and do not process summary records
|
|
if (this.groupingFeature.disabled || values.rows.length === 1 && values.rows[0].isSummary) {
|
|
return;
|
|
}
|
|
this.groupingFeature.cleanup(values.rows, values.view.rowValues);
|
|
},
|
|
priority: 200
|
|
},
|
|
|
|
groupTpl: [
|
|
'{%',
|
|
'var me = this.groupingFeature;',
|
|
// If grouping is disabled, do not call setupRowData, and do not wrap
|
|
'if (me.disabled) {',
|
|
'values.needsWrap = false;',
|
|
'} else {',
|
|
'me.setupRowData(values.record, values.recordIndex, values);',
|
|
'values.needsWrap = !me.disabled && (values.isFirstRow || values.summaryRecord);',
|
|
'}',
|
|
'%}',
|
|
'<tpl if="needsWrap">',
|
|
'<tr data-boundView="{view.id}" data-recordId="{record.internalId}" data-recordIndex="{[values.isCollapsedGroup ? -1 : values.recordIndex]}"',
|
|
'class="{[values.itemClasses.join(" ")]} ' + Ext.baseCSSPrefix + 'grid-wrap-row<tpl if="!summaryRecord"> ' + Ext.baseCSSPrefix + 'grid-group-row</tpl>">',
|
|
'<td class="' + Ext.baseCSSPrefix + 'group-hd-container" colspan="{columns.length}">',
|
|
'<tpl if="isFirstRow">',
|
|
'{%',
|
|
// Group title is visible if not locking, or we are the locked side, or the locked side has no columns/
|
|
// Use visibility to keep row heights synced without intervention.
|
|
'var groupTitleStyle = (!values.view.lockingPartner || (values.view.ownerCt === values.view.ownerCt.ownerLockable.lockedGrid) || (values.view.lockingPartner.headerCt.getVisibleGridColumns().length === 0)) ? "" : "visibility:hidden";',
|
|
'%}',
|
|
'<div id="{groupId}" class="' + Ext.baseCSSPrefix + 'grid-group-hd {collapsibleCls}" tabIndex="0">',
|
|
'<div class="' + Ext.baseCSSPrefix + 'grid-group-title" style="{[groupTitleStyle]}">',
|
|
'{[values.groupHeaderTpl.apply(values.groupInfo, parent) || " "]}',
|
|
'</div>',
|
|
'</div>',
|
|
'</tpl>',
|
|
|
|
// Only output the child rows if this is *not* a collapsed group
|
|
'<tpl if="summaryRecord || !isCollapsedGroup">',
|
|
'<table class="', Ext.baseCSSPrefix, '{view.id}-table ', Ext.baseCSSPrefix, 'grid-table',
|
|
'<tpl if="summaryRecord"> ', Ext.baseCSSPrefix, 'grid-table-summary</tpl>"',
|
|
'border="0" cellspacing="0" cellpadding="0" style="width:100%">',
|
|
'{[values.view.renderColumnSizer(out)]}',
|
|
// Only output the first row if this is *not* a collapsed group
|
|
'<tpl if="!isCollapsedGroup">',
|
|
'{%',
|
|
'values.itemClasses.length = 0;',
|
|
'this.nextTpl.applyOut(values, out, parent);',
|
|
'%}',
|
|
'</tpl>',
|
|
'<tpl if="summaryRecord">',
|
|
'{%me.outputSummaryRecord(values.summaryRecord, values, out);%}',
|
|
'</tpl>',
|
|
'</table>',
|
|
'</tpl>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tpl else>',
|
|
'{%this.nextTpl.applyOut(values, out, parent);%}',
|
|
'</tpl>', {
|
|
priority: 200,
|
|
|
|
syncRowHeights: function(firstRow, secondRow) {
|
|
firstRow = Ext.fly(firstRow, 'syncDest');
|
|
secondRow = Ext.fly(secondRow, 'sycSrc');
|
|
var owner = this.owner,
|
|
firstHd = firstRow.down(owner.eventSelector, true),
|
|
secondHd,
|
|
firstSummaryRow = firstRow.down(owner.summaryRowSelector, true),
|
|
secondSummaryRow,
|
|
firstHeight, secondHeight;
|
|
|
|
// Sync the heights of header elements in each row if they need it.
|
|
if (firstHd && (secondHd = secondRow.down(owner.eventSelector, true))) {
|
|
firstHd.style.height = secondHd.style.height = '';
|
|
if ((firstHeight = firstHd.offsetHeight) > (secondHeight = secondHd.offsetHeight)) {
|
|
Ext.fly(secondHd).setHeight(firstHeight);
|
|
}
|
|
else if (secondHeight > firstHeight) {
|
|
Ext.fly(firstHd).setHeight(secondHeight);
|
|
}
|
|
}
|
|
|
|
// Sync the heights of summary row in each row if they need it.
|
|
if (firstSummaryRow && (secondSummaryRow = secondRow.down(owner.summaryRowSelector, true))) {
|
|
firstSummaryRow.style.height = secondSummaryRow.style.height = '';
|
|
if ((firstHeight = firstSummaryRow.offsetHeight) > (secondHeight = secondSummaryRow.offsetHeight)) {
|
|
Ext.fly(secondSummaryRow).setHeight(firstHeight);
|
|
}
|
|
else if (secondHeight > firstHeight) {
|
|
Ext.fly(firstSummaryRow).setHeight(secondHeight);
|
|
}
|
|
}
|
|
},
|
|
|
|
syncContent: function(destRow, sourceRow) {
|
|
destRow = Ext.fly(destRow, 'syncDest');
|
|
sourceRow = Ext.fly(sourceRow, 'sycSrc');
|
|
var owner = this.owner,
|
|
destHd = destRow.down(owner.eventSelector, true),
|
|
sourceHd = sourceRow.down(owner.eventSelector, true),
|
|
destSummaryRow = destRow.down(owner.summaryRowSelector, true),
|
|
sourceSummaryRow = sourceRow.down(owner.summaryRowSelector, true);
|
|
|
|
// Sync the content of header element.
|
|
if (destHd && sourceHd) {
|
|
Ext.fly(destHd).syncContent(sourceHd);
|
|
}
|
|
|
|
// Sync the content of summary row element.
|
|
if (destSummaryRow && sourceSummaryRow) {
|
|
Ext.fly(destSummaryRow).syncContent(sourceSummaryRow);
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
constructor: function() {
|
|
this.groupCache = {};
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
init: function(grid) {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
view.isGrouping = true;
|
|
|
|
// The expensively maintained groupCache is shared between twinned Grouping features.
|
|
if (me.lockingPartner && me.lockingPartner.groupCache) {
|
|
me.groupCache = me.lockingPartner.groupCache;
|
|
}
|
|
|
|
me.mixins.summary.init.call(me);
|
|
|
|
me.callParent(arguments);
|
|
view.headerCt.on({
|
|
columnhide: me.onColumnHideShow,
|
|
columnshow: me.onColumnHideShow,
|
|
columnmove: me.onColumnMove,
|
|
scope: me
|
|
});
|
|
|
|
// Add a table level processor
|
|
view.addTableTpl(me.tableTpl).groupingFeature = me;
|
|
|
|
// Add a row level processor
|
|
view.addRowTpl(Ext.XTemplate.getTpl(me, 'groupTpl')).groupingFeature = me;
|
|
|
|
view.preserveScrollOnRefresh = true;
|
|
|
|
// Sparse store - we can never collapse groups
|
|
if (view.store.buffered) {
|
|
me.collapsible = false;
|
|
}
|
|
// If it's a local store we can build a grouped store for use as the view's dataSource
|
|
else {
|
|
|
|
// Share the GroupStore between both sides of a locked grid
|
|
if (this.lockingPartner && this.lockingPartner.dataSource) {
|
|
me.dataSource = view.dataSource = this.lockingPartner.dataSource;
|
|
} else {
|
|
me.dataSource = view.dataSource = new Ext.grid.feature.GroupStore(me, view.store);
|
|
}
|
|
}
|
|
|
|
me.grid.on({
|
|
reconfigure: me.onReconfigure
|
|
});
|
|
view.on({
|
|
afterrender: me.afterViewRender,
|
|
scope: me,
|
|
single: true
|
|
});
|
|
},
|
|
|
|
clearGroupCache: function() {
|
|
var me = this,
|
|
groupCache = me.groupCache = {};
|
|
|
|
if (me.lockingPartner) {
|
|
me.lockingPartner.groupCache = groupCache;
|
|
}
|
|
return groupCache;
|
|
},
|
|
|
|
vetoEvent: function(record, row, rowIndex, e) {
|
|
// Do not veto mouseover/mouseout
|
|
if (e.type !== 'mouseover' && e.type !== 'mouseout' && e.type !== 'mouseenter' && e.type !== 'mouseleave' && e.getTarget(this.eventSelector)) {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
enable: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
store = view.store,
|
|
groupToggleMenuItem;
|
|
|
|
me.lastGroupField = me.getGroupField();
|
|
|
|
view.isGrouping = true;
|
|
if (me.lastGroupIndex) {
|
|
me.block();
|
|
store.group(me.lastGroupIndex);
|
|
me.unblock();
|
|
}
|
|
me.callParent();
|
|
groupToggleMenuItem = me.view.headerCt.getMenu().down('#groupToggleMenuItem');
|
|
if (groupToggleMenuItem) {
|
|
groupToggleMenuItem.setChecked(true, true);
|
|
}
|
|
me.refreshIf();
|
|
},
|
|
|
|
disable: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
store = view.store,
|
|
groupToggleMenuItem,
|
|
lastGroup;
|
|
|
|
view.isGrouping = false;
|
|
lastGroup = store.groupers.first();
|
|
if (lastGroup) {
|
|
me.lastGroupIndex = lastGroup.property;
|
|
me.block();
|
|
store.clearGrouping();
|
|
me.unblock();
|
|
}
|
|
|
|
me.callParent();
|
|
groupToggleMenuItem = me.view.headerCt.getMenu().down('#groupToggleMenuItem');
|
|
if (groupToggleMenuItem) {
|
|
groupToggleMenuItem.setChecked(false, true);
|
|
}
|
|
me.refreshIf();
|
|
},
|
|
|
|
refreshIf: function() {
|
|
var ownerCt = this.grid.ownerCt,
|
|
view = this.view;
|
|
|
|
if (!view.store.remoteGroup && !this.blockRefresh) {
|
|
|
|
// We are one side of a lockable grid, so refresh the locking view
|
|
if (ownerCt && ownerCt.lockable) {
|
|
ownerCt.view.refresh();
|
|
} else {
|
|
view.refresh();
|
|
}
|
|
}
|
|
},
|
|
|
|
// Attach events to view
|
|
afterViewRender: function() {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
view.on({
|
|
scope: me,
|
|
groupclick: me.onGroupClick
|
|
});
|
|
|
|
if (me.enableGroupingMenu) {
|
|
me.injectGroupingMenu();
|
|
}
|
|
|
|
me.pruneGroupedHeader();
|
|
|
|
me.lastGroupField = me.getGroupField();
|
|
me.block();
|
|
me.onGroupChange();
|
|
me.unblock();
|
|
},
|
|
|
|
injectGroupingMenu: function() {
|
|
var me = this,
|
|
headerCt = me.view.headerCt;
|
|
|
|
headerCt.showMenuBy = me.showMenuBy;
|
|
headerCt.getMenuItems = me.getMenuItems();
|
|
},
|
|
|
|
onColumnHideShow: function(headerOwnerCt, header) {
|
|
var view = this.view,
|
|
headerCt = view.headerCt,
|
|
menu = headerCt.getMenu(),
|
|
groupToggleMenuItem = menu.down('#groupMenuItem'),
|
|
colCount = headerCt.getGridColumns().length,
|
|
items,
|
|
len,
|
|
i;
|
|
|
|
// "Group by this field" must be disabled if there's only one column left visible.
|
|
if (groupToggleMenuItem) {
|
|
if (headerCt.getVisibleGridColumns().length > 1) {
|
|
groupToggleMenuItem.enable();
|
|
} else {
|
|
groupToggleMenuItem.disable();
|
|
}
|
|
}
|
|
|
|
// header containing TDs have to span all columns, hiddens are just zero width
|
|
if (view.rendered) {
|
|
items = view.el.query('.' + this.ctCls);
|
|
for (i = 0, len = items.length; i < len; ++i) {
|
|
items[i].colSpan = colCount;
|
|
}
|
|
}
|
|
},
|
|
|
|
// Update first and last records in groups when column moves
|
|
// Because of the RowWrap template, this will update the groups' headers and footers
|
|
onColumnMove: function() {
|
|
var me = this,
|
|
store = me.view.store,
|
|
groups,
|
|
i, len,
|
|
groupInfo, firstRec, lastRec;
|
|
|
|
if (store.isGrouped()) {
|
|
groups = store.getGroups();
|
|
len = groups.length;
|
|
|
|
// Iterate through groups, firing updates on boundary records
|
|
for (i = 0; i < len; i++) {
|
|
groupInfo = groups[i];
|
|
firstRec = groupInfo.children[0];
|
|
lastRec = groupInfo.children[groupInfo.children.length - 1];
|
|
|
|
// Must pass the modifiedFields parameter as null so that the
|
|
// listener options does not take that place in the arguments list
|
|
store.fireEvent('update', store, firstRec, 'edit', null);
|
|
if (lastRec !== firstRec) {
|
|
store.fireEvent('update', store, lastRec, 'edit', null);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
showMenuBy: function(t, header) {
|
|
var menu = this.getMenu(),
|
|
groupMenuItem = menu.down('#groupMenuItem'),
|
|
groupMenuMeth = header.groupable === false || this.view.headerCt.getVisibleGridColumns().length < 2 ? 'disable' : 'enable',
|
|
groupToggleMenuItem = menu.down('#groupToggleMenuItem'),
|
|
isGrouped = this.view.store.isGrouped();
|
|
|
|
groupMenuItem[groupMenuMeth]();
|
|
if (groupToggleMenuItem) {
|
|
groupToggleMenuItem.setChecked(isGrouped, true);
|
|
groupToggleMenuItem[isGrouped ? 'enable' : 'disable']();
|
|
}
|
|
Ext.grid.header.Container.prototype.showMenuBy.apply(this, arguments);
|
|
},
|
|
|
|
getMenuItems: function() {
|
|
var me = this,
|
|
groupByText = me.groupByText,
|
|
disabled = me.disabled || !me.getGroupField(),
|
|
showGroupsText = me.showGroupsText,
|
|
enableNoGroups = me.enableNoGroups,
|
|
getMenuItems = me.view.headerCt.getMenuItems;
|
|
|
|
// runs in the scope of headerCt
|
|
return function() {
|
|
|
|
// We cannot use the method from HeaderContainer's prototype here
|
|
// because other plugins or features may already have injected an implementation
|
|
var o = getMenuItems.call(this);
|
|
o.push('-', {
|
|
iconCls: Ext.baseCSSPrefix + 'group-by-icon',
|
|
itemId: 'groupMenuItem',
|
|
text: groupByText,
|
|
handler: me.onGroupMenuItemClick,
|
|
scope: me
|
|
});
|
|
if (enableNoGroups) {
|
|
o.push({
|
|
itemId: 'groupToggleMenuItem',
|
|
text: showGroupsText,
|
|
checked: !disabled,
|
|
checkHandler: me.onGroupToggleMenuItemClick,
|
|
scope: me
|
|
});
|
|
}
|
|
return o;
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Group by the header the user has clicked on.
|
|
* @private
|
|
*/
|
|
onGroupMenuItemClick: function(menuItem, e) {
|
|
var me = this,
|
|
menu = menuItem.parentMenu,
|
|
hdr = menu.activeHeader,
|
|
view = me.view,
|
|
store = view.store;
|
|
|
|
me.lastGroupIndex = null;
|
|
me.block();
|
|
me.enable();
|
|
store.group(hdr.dataIndex);
|
|
me.pruneGroupedHeader();
|
|
me.unblock();
|
|
me.refreshIf();
|
|
},
|
|
|
|
block: function(fromPartner) {
|
|
this.blockRefresh = this.view.blockRefresh = true;
|
|
if (this.lockingPartner && !fromPartner) {
|
|
this.lockingPartner.block(true);
|
|
}
|
|
},
|
|
|
|
unblock: function(fromPartner) {
|
|
this.blockRefresh = this.view.blockRefresh = false;
|
|
if (this.lockingPartner && !fromPartner) {
|
|
this.lockingPartner.unblock(true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Turn on and off grouping via the menu
|
|
* @private
|
|
*/
|
|
onGroupToggleMenuItemClick: function(menuItem, checked) {
|
|
this[checked ? 'enable' : 'disable']();
|
|
},
|
|
|
|
/**
|
|
* Prunes the grouped header from the header container
|
|
* @private
|
|
*/
|
|
pruneGroupedHeader: function() {
|
|
var me = this,
|
|
header = me.getGroupedHeader();
|
|
|
|
if (me.hideGroupedHeader && header) {
|
|
Ext.suspendLayouts();
|
|
if (me.prunedHeader && me.prunedHeader !== header) {
|
|
me.prunedHeader.show();
|
|
}
|
|
me.prunedHeader = header;
|
|
header.hide();
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
getHeaderNode: function(groupName) {
|
|
return Ext.get(this.createGroupId(groupName));
|
|
},
|
|
|
|
getGroup: function(name) {
|
|
var cache = this.groupCache,
|
|
item = cache[name];
|
|
|
|
if (!item) {
|
|
item = cache[name] = {
|
|
isCollapsed: false
|
|
};
|
|
}
|
|
return item;
|
|
},
|
|
|
|
/**
|
|
* Returns `true` if the named group is expanded.
|
|
* @param {String} groupName The group name as returned from {@link Ext.data.Store#getGroupString getGroupString}. This is usually the value of
|
|
* the {@link Ext.data.Store#groupField groupField}.
|
|
* @return {Boolean} `true` if the group defined by that value is expanded.
|
|
*/
|
|
isExpanded: function(groupName) {
|
|
return !this.getGroup(groupName).isCollapsed;
|
|
},
|
|
|
|
/**
|
|
* Expand a group
|
|
* @param {String} groupName The group name
|
|
* @param {Boolean} focus Pass `true` to focus the group after expand.
|
|
*/
|
|
expand: function(groupName, focus) {
|
|
this.doCollapseExpand(false, groupName, focus);
|
|
},
|
|
|
|
/**
|
|
* Expand all groups
|
|
*/
|
|
expandAll: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
groupCache = me.groupCache,
|
|
groupName,
|
|
lockingPartner = me.lockingPartner,
|
|
partnerView;
|
|
|
|
// Clear all collapsed flags.
|
|
// groupCache is shared between two lockingPartners
|
|
for (groupName in groupCache) {
|
|
if (groupCache.hasOwnProperty(groupName)) {
|
|
groupCache[groupName].isCollapsed = false;
|
|
}
|
|
}
|
|
Ext.suspendLayouts();
|
|
view.suspendEvent('beforerefresh', 'refresh');
|
|
if (lockingPartner) {
|
|
partnerView = lockingPartner.view
|
|
partnerView.suspendEvent('beforerefresh', 'refresh');
|
|
}
|
|
me.dataSource.onRefresh();
|
|
view.resumeEvent('beforerefresh', 'refresh');
|
|
if (lockingPartner) {
|
|
partnerView.resumeEvent('beforerefresh', 'refresh');
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
|
|
// Fire event for all groups post expand
|
|
for (groupName in groupCache) {
|
|
if (groupCache.hasOwnProperty(groupName)) {
|
|
me.afterCollapseExpand(false, groupName);
|
|
if (lockingPartner) {
|
|
lockingPartner.afterCollapseExpand(false, groupName);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collapse a group
|
|
* @param {String} groupName The group name
|
|
* @param {Boolean} focus Pass `true` to focus the group after expand.
|
|
*/
|
|
collapse: function(groupName, focus) {
|
|
this.doCollapseExpand(true, groupName, focus);
|
|
},
|
|
|
|
// private
|
|
// Returns true if all groups are collapsed
|
|
isAllCollapsed: function() {
|
|
var me = this,
|
|
groupCache = me.groupCache,
|
|
groupName;
|
|
|
|
// Clear all collapsed flags.
|
|
// groupCache is shared between two lockingPartners
|
|
for (groupName in groupCache) {
|
|
if (groupCache.hasOwnProperty(groupName)) {
|
|
if (!groupCache[groupName].isCollapsed) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
// private
|
|
// Returns true if all groups are expanded
|
|
isAllExpanded: function() {
|
|
var me = this,
|
|
groupCache = me.groupCache,
|
|
groupName;
|
|
|
|
// Clear all collapsed flags.
|
|
// groupCache is shared between two lockingPartners
|
|
for (groupName in groupCache) {
|
|
if (groupCache.hasOwnProperty(groupName)) {
|
|
if (groupCache[groupName].isCollapsed) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Collapse all groups
|
|
*/
|
|
collapseAll: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
groupCache = me.groupCache,
|
|
groupName,
|
|
lockingPartner = me.lockingPartner,
|
|
partnerView;
|
|
|
|
// Set all collapsed flags
|
|
// groupCache is shared between two lockingPartners
|
|
for (groupName in groupCache) {
|
|
if (groupCache.hasOwnProperty(groupName)) {
|
|
groupCache[groupName].isCollapsed = true;
|
|
}
|
|
}
|
|
Ext.suspendLayouts();
|
|
view.suspendEvent('beforerefresh', 'refresh');
|
|
if (lockingPartner) {
|
|
partnerView = lockingPartner.view
|
|
partnerView.suspendEvent('beforerefresh', 'refresh');
|
|
}
|
|
me.dataSource.onRefresh();
|
|
view.resumeEvent('beforerefresh', 'refresh');
|
|
if (lockingPartner) {
|
|
partnerView.resumeEvent('beforerefresh', 'refresh');
|
|
}
|
|
|
|
if (lockingPartner && !lockingPartner.isAllCollapsed()) {
|
|
lockingPartner.collapseAll();
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
|
|
// Fire event for all groups post collapse
|
|
for (groupName in groupCache) {
|
|
if (groupCache.hasOwnProperty(groupName)) {
|
|
me.afterCollapseExpand(true, groupName);
|
|
if (lockingPartner) {
|
|
lockingPartner.afterCollapseExpand(true, groupName);
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
doCollapseExpand: function(collapsed, groupName, focus) {
|
|
var me = this,
|
|
lockingPartner = me.lockingPartner,
|
|
group = me.groupCache[groupName];
|
|
|
|
// groupCache is shared between two lockingPartners
|
|
if (group.isCollapsed != collapsed) {
|
|
|
|
// The GroupStore is shared by partnered Grouping features, so this will refresh both sides.
|
|
// We only want one layout as a result though, so suspend layouts while refreshing.
|
|
Ext.suspendLayouts();
|
|
if (collapsed) {
|
|
me.dataSource.collapseGroup(group);
|
|
} else {
|
|
me.dataSource.expandGroup(group);
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
|
|
// Sync the group state and focus the row if requested.
|
|
me.afterCollapseExpand(collapsed, groupName, focus);
|
|
|
|
// Sync the lockingPartner's group state.
|
|
// Do not pass on focus flag. If we were told to focus, we must focus, not the other side.
|
|
if (lockingPartner) {
|
|
lockingPartner.afterCollapseExpand(collapsed, groupName, false);
|
|
}
|
|
}
|
|
},
|
|
|
|
afterCollapseExpand: function(collapsed, groupName, focus) {
|
|
var me = this,
|
|
view = me.view,
|
|
header;
|
|
|
|
header = Ext.get(this.getHeaderNode(groupName));
|
|
view.fireEvent(collapsed ? 'groupcollapse' : 'groupexpand', view, header, groupName);
|
|
if (focus) {
|
|
header.up(view.getItemSelector()).scrollIntoView(view.el, null, true);
|
|
}
|
|
},
|
|
|
|
onGroupChange: function() {
|
|
var me = this,
|
|
field = me.getGroupField(),
|
|
menuItem,
|
|
visibleGridColumns,
|
|
groupingByLastVisibleColumn;
|
|
|
|
if (me.hideGroupedHeader) {
|
|
if (me.lastGroupField) {
|
|
menuItem = me.getMenuItem(me.lastGroupField);
|
|
if (menuItem) {
|
|
menuItem.setChecked(true);
|
|
}
|
|
}
|
|
if (field) {
|
|
visibleGridColumns = me.view.headerCt.getVisibleGridColumns();
|
|
|
|
// See if we are being asked to group by the sole remaining visible column.
|
|
// If so, then do not hide that column.
|
|
groupingByLastVisibleColumn = ((visibleGridColumns.length === 1) && (visibleGridColumns[0].dataIndex == field));
|
|
menuItem = me.getMenuItem(field);
|
|
if (menuItem && !groupingByLastVisibleColumn) {
|
|
menuItem.setChecked(false);
|
|
}
|
|
}
|
|
}
|
|
me.refreshIf();
|
|
me.lastGroupField = field;
|
|
},
|
|
|
|
/**
|
|
* Gets the related menu item for a dataIndex
|
|
* @private
|
|
* @return {Ext.grid.header.Container} The header
|
|
*/
|
|
getMenuItem: function(dataIndex){
|
|
var view = this.view,
|
|
header = view.headerCt.down('gridcolumn[dataIndex=' + dataIndex + ']'),
|
|
menu = view.headerCt.getMenu();
|
|
|
|
return header ? menu.down('menuitem[headerId='+ header.id +']') : null;
|
|
},
|
|
|
|
onGroupKey: function(keyCode, event) {
|
|
var me = this,
|
|
groupName = me.getGroupName(event.target);
|
|
|
|
if (groupName) {
|
|
me.onGroupClick(me.view, event.target, groupName, event);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggle between expanded/collapsed state when clicking on
|
|
* the group.
|
|
* @private
|
|
*/
|
|
onGroupClick: function(view, rowElement, groupName, e) {
|
|
var me = this,
|
|
groupCache = me.groupCache,
|
|
groupIsCollapsed = !me.isExpanded(groupName),
|
|
g;
|
|
|
|
if (me.collapsible) {
|
|
|
|
// CTRL means collapse all others
|
|
if (e.ctrlKey) {
|
|
Ext.suspendLayouts();
|
|
for (g in groupCache) {
|
|
if (g === groupName) {
|
|
if (groupIsCollapsed) {
|
|
me.expand(groupName);
|
|
}
|
|
} else {
|
|
me.doCollapseExpand(true, g, false);
|
|
}
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
return;
|
|
}
|
|
|
|
if (groupIsCollapsed) {
|
|
me.expand(groupName);
|
|
} else {
|
|
me.collapse(groupName);
|
|
}
|
|
}
|
|
},
|
|
|
|
setupRowData: function(record, idx, rowValues) {
|
|
var me = this,
|
|
data = me.refreshData,
|
|
groupInfo = me.groupInfo,
|
|
header = data.header,
|
|
groupField = data.groupField,
|
|
store = me.view.dataSource,
|
|
grouper, groupName, prev, next;
|
|
|
|
rowValues.isCollapsedGroup = false;
|
|
rowValues.summaryRecord = null;
|
|
|
|
if (data.doGrouping) {
|
|
grouper = me.view.store.groupers.first();
|
|
|
|
// This is a placeholder record which represents a whole collapsed group
|
|
// It is a special case.
|
|
if (record.children) {
|
|
groupName = grouper.getGroupString(record.children[0]);
|
|
|
|
rowValues.isFirstRow = rowValues.isLastRow = true;
|
|
rowValues.itemClasses.push(me.hdCollapsedCls);
|
|
rowValues.isCollapsedGroup = true;
|
|
rowValues.groupInfo = groupInfo;
|
|
groupInfo.groupField = groupField;
|
|
groupInfo.name = groupName;
|
|
groupInfo.groupValue = record.children[0].get(groupField);
|
|
groupInfo.columnName = header ? header.text : groupField;
|
|
rowValues.collapsibleCls = me.collapsible ? me.collapsibleCls : me.hdNotCollapsibleCls;
|
|
rowValues.groupId = me.createGroupId(groupName);
|
|
groupInfo.rows = groupInfo.children = record.children;
|
|
if (me.showSummaryRow) {
|
|
rowValues.summaryRecord = data.summaryData[groupName];
|
|
}
|
|
return;
|
|
}
|
|
|
|
groupName = grouper.getGroupString(record);
|
|
|
|
// See if the current record is the last in the group
|
|
rowValues.isFirstRow = idx === 0;
|
|
if (!rowValues.isFirstRow) {
|
|
prev = store.getAt(idx - 1);
|
|
// If the previous row is of a different group, then we're at the first for a new group
|
|
if (prev) {
|
|
// Must use Model's comparison because Date objects are never equal
|
|
rowValues.isFirstRow = !prev.isEqual(grouper.getGroupString(prev), groupName);
|
|
}
|
|
}
|
|
|
|
// See if the current record is the last in the group
|
|
rowValues.isLastRow = idx == store.getTotalCount() - 1;
|
|
if (!rowValues.isLastRow) {
|
|
next = store.getAt(idx + 1);
|
|
if (next) {
|
|
// Must use Model's comparison because Date objects are never equal
|
|
rowValues.isLastRow = !next.isEqual(grouper.getGroupString(next), groupName);
|
|
}
|
|
}
|
|
|
|
if (rowValues.isFirstRow) {
|
|
groupInfo.groupField = groupField;
|
|
groupInfo.name = groupName;
|
|
groupInfo.groupValue = record.get(groupField);
|
|
groupInfo.columnName = header ? header.text : groupField;
|
|
rowValues.collapsibleCls = me.collapsible ? me.collapsibleCls : me.hdNotCollapsibleCls;
|
|
rowValues.groupId = me.createGroupId(groupName);
|
|
|
|
if (!me.isExpanded(groupName)) {
|
|
rowValues.itemClasses.push(me.hdCollapsedCls);
|
|
rowValues.isCollapsedGroup = true;
|
|
}
|
|
|
|
// We only get passed a GroupStore if the store is not buffered
|
|
if (store.buffered) {
|
|
groupInfo.rows = groupInfo.children = [];
|
|
} else {
|
|
groupInfo.rows = groupInfo.children = me.getRecordGroup(record).children;
|
|
}
|
|
rowValues.groupInfo = groupInfo;
|
|
}
|
|
|
|
if (rowValues.isLastRow) {
|
|
// Add the group's summary record to the last record in the group
|
|
if (me.showSummaryRow) {
|
|
rowValues.summaryRecord = data.summaryData[groupName];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
setup: function(rows, rowValues) {
|
|
var me = this,
|
|
data = me.refreshData,
|
|
isGrouping = !me.disabled && me.view.store.isGrouped();
|
|
|
|
me.skippedRows = 0;
|
|
if (rowValues.view.bufferedRenderer) {
|
|
rowValues.view.bufferedRenderer.variableRowHeight = true;
|
|
}
|
|
data.groupField = me.getGroupField();
|
|
data.header = me.getGroupedHeader(data.groupField);
|
|
data.doGrouping = isGrouping;
|
|
rowValues.groupHeaderTpl = Ext.XTemplate.getTpl(me, 'groupHeaderTpl');
|
|
|
|
if (isGrouping && me.showSummaryRow) {
|
|
data.summaryData = me.generateSummaryData();
|
|
}
|
|
},
|
|
|
|
cleanup: function(rows, rowValues) {
|
|
var data = this.refreshData;
|
|
|
|
rowValues.groupInfo = rowValues.groupHeaderTpl = rowValues.isFirstRow = null;
|
|
data.groupField = data.header = null;
|
|
},
|
|
|
|
getGroupName: function(element) {
|
|
var me = this,
|
|
view = me.view,
|
|
eventSelector = me.eventSelector,
|
|
parts,
|
|
targetEl,
|
|
row;
|
|
|
|
// See if element is, or is within a group header. If so, we can extract its name
|
|
targetEl = Ext.fly(element).findParent(eventSelector);
|
|
|
|
if (!targetEl) {
|
|
// Otherwise, navigate up to the row and look down to see if we can find it
|
|
row = Ext.fly(element).findParent(view.itemSelector);
|
|
if (row) {
|
|
targetEl = row.down(eventSelector, true);
|
|
}
|
|
}
|
|
|
|
if (targetEl) {
|
|
parts = targetEl.id.split(view.id + '-hd-');
|
|
if (parts.length === 2) {
|
|
return Ext.htmlDecode(parts[1]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the group data object for the group to which the passed record belongs **if the Store is grouped**.
|
|
*
|
|
* @param {Ext.data.Model} record The record for which to return group information.
|
|
* @return {Object} A single group data block as returned from {@link Ext.data.Store#getGroups Store.getGroups}. Returns
|
|
* `undefined` if the Store is not grouped.
|
|
*
|
|
*/
|
|
getRecordGroup: function(record) {
|
|
var grouper = this.view.store.groupers.first();
|
|
if (grouper) {
|
|
return this.groupCache[grouper.getGroupString(record)];
|
|
}
|
|
},
|
|
|
|
createGroupId: function(group) {
|
|
return this.view.id + '-hd-' + Ext.htmlEncode(group);
|
|
},
|
|
|
|
createGroupCls: function(group) {
|
|
return this.view.id + '-' + Ext.htmlEncode(group) + '-item';
|
|
},
|
|
|
|
getGroupField: function(){
|
|
return this.view.store.getGroupField();
|
|
},
|
|
|
|
getGroupedHeader: function(groupField) {
|
|
var me = this,
|
|
headerCt = me.view.headerCt,
|
|
partner = me.lockingPartner,
|
|
selector, header;
|
|
|
|
groupField = groupField || this.getGroupField();
|
|
|
|
if (groupField) {
|
|
selector = '[dataIndex=' + groupField + ']';
|
|
header = headerCt.down(selector);
|
|
// The header may exist in the locking partner, so check there as well
|
|
if (!header && partner) {
|
|
header = partner.view.headerCt.down(selector);
|
|
}
|
|
}
|
|
return header || null;
|
|
},
|
|
|
|
getFireEventArgs: function(type, view, targetEl, e) {
|
|
return [type, view, targetEl, this.getGroupName(targetEl), e];
|
|
},
|
|
|
|
destroy: function(){
|
|
var me = this,
|
|
dataSource = me.dataSource;
|
|
|
|
me.view = me.prunedHeader = me.grid = me.groupCache = me.dataSource = null;
|
|
me.callParent();
|
|
if (dataSource) {
|
|
dataSource.bindStore(null);
|
|
}
|
|
},
|
|
|
|
onReconfigure: function(grid, store, columns, oldStore, oldColumns) {
|
|
var me = grid;
|
|
|
|
if (store && store !== oldStore) {
|
|
// Grouping involves injecting a dataSource in early
|
|
if (store.buffered !== oldStore.buffered) {
|
|
Ext.Error.raise('Cannot reconfigure grouping switching between buffered and non-buffered stores');
|
|
}
|
|
if (store.buffered) {
|
|
me.bindStore(store);
|
|
me.dataSource.processStore(store);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This feature adds an aggregate summary row at the bottom of each group that is provided
|
|
* by the {@link Ext.grid.feature.Grouping} feature. There are two aspects to the summary:
|
|
*
|
|
* ## Calculation
|
|
*
|
|
* The summary value needs to be calculated for each column in the grid. This is controlled
|
|
* by the summaryType option specified on the column. There are several built in summary types,
|
|
* which can be specified as a string on the column configuration. These call underlying methods
|
|
* on the store:
|
|
*
|
|
* - {@link Ext.data.Store#count count}
|
|
* - {@link Ext.data.Store#sum sum}
|
|
* - {@link Ext.data.Store#min min}
|
|
* - {@link Ext.data.Store#max max}
|
|
* - {@link Ext.data.Store#average average}
|
|
*
|
|
* Alternatively, the summaryType can be a function definition. If this is the case,
|
|
* the function is called with an array of records to calculate the summary value.
|
|
*
|
|
* ## Rendering
|
|
*
|
|
* Similar to a column, the summary also supports a summaryRenderer function. This
|
|
* summaryRenderer is called before displaying a value. The function is optional, if
|
|
* not specified the default calculated value is shown. The summaryRenderer is called with:
|
|
*
|
|
* - value {Object} - The calculated value.
|
|
* - summaryData {Object} - Contains all raw summary values for the row.
|
|
* - field {String} - The name of the field we are calculating
|
|
*
|
|
* ## Example Usage
|
|
*
|
|
* @example
|
|
* Ext.define('TestResult', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['student', 'subject', {
|
|
* name: 'mark',
|
|
* type: 'int'
|
|
* }]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* width: 200,
|
|
* height: 240,
|
|
* renderTo: document.body,
|
|
* features: [{
|
|
* groupHeaderTpl: 'Subject: {name}',
|
|
* ftype: 'groupingsummary'
|
|
* }],
|
|
* store: {
|
|
* model: 'TestResult',
|
|
* groupField: 'subject',
|
|
* data: [{
|
|
* student: 'Student 1',
|
|
* subject: 'Math',
|
|
* mark: 84
|
|
* },{
|
|
* student: 'Student 1',
|
|
* subject: 'Science',
|
|
* mark: 72
|
|
* },{
|
|
* student: 'Student 2',
|
|
* subject: 'Math',
|
|
* mark: 96
|
|
* },{
|
|
* student: 'Student 2',
|
|
* subject: 'Science',
|
|
* mark: 68
|
|
* }]
|
|
* },
|
|
* columns: [{
|
|
* dataIndex: 'student',
|
|
* text: 'Name',
|
|
* summaryType: 'count',
|
|
* summaryRenderer: function(value){
|
|
* return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
|
|
* }
|
|
* }, {
|
|
* dataIndex: 'mark',
|
|
* text: 'Mark',
|
|
* summaryType: 'average'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.feature.GroupingSummary', {
|
|
|
|
extend: Ext.grid.feature.Grouping ,
|
|
|
|
alias: 'feature.groupingsummary',
|
|
|
|
showSummaryRow: true,
|
|
|
|
vetoEvent: function(record, row, rowIndex, e){
|
|
var result = this.callParent(arguments);
|
|
if (result !== false) {
|
|
if (e.getTarget(this.summaryRowSelector)) {
|
|
result = false;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The rowbody feature enhances the grid's markup to have an additional
|
|
* tr -> td -> div which spans the entire width of the original row.
|
|
*
|
|
* This is useful to to associate additional information with a particular
|
|
* record in a grid.
|
|
*
|
|
* Rowbodies are initially hidden unless you override setupRowData.
|
|
*
|
|
* Will expose additional events on the gridview with the prefix of 'rowbody'.
|
|
* For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.
|
|
*
|
|
* # Example
|
|
*
|
|
* @example
|
|
* Ext.define('Animal', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['name', 'latin', 'desc']
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* width: 400,
|
|
* height: 300,
|
|
* renderTo: Ext.getBody(),
|
|
* store: {
|
|
* model: 'Animal',
|
|
* data: [
|
|
* {name: 'Tiger', latin: 'Panthera tigris',
|
|
* desc: 'The largest cat species, weighing up to 306 kg (670 lb).'},
|
|
* {name: 'Roman snail', latin: 'Helix pomatia',
|
|
* desc: 'A species of large, edible, air-breathing land snail.'},
|
|
* {name: 'Yellow-winged darter', latin: 'Sympetrum flaveolum',
|
|
* desc: 'A dragonfly found in Europe and mid and Northern China.'},
|
|
* {name: 'Superb Fairy-wren', latin: 'Malurus cyaneus',
|
|
* desc: 'Common and familiar across south-eastern Australia.'}
|
|
* ]
|
|
* },
|
|
* columns: [{
|
|
* dataIndex: 'name',
|
|
* text: 'Common name',
|
|
* width: 125
|
|
* }, {
|
|
* dataIndex: 'latin',
|
|
* text: 'Scientific name',
|
|
* flex: 1
|
|
* }],
|
|
* features: [{
|
|
* ftype: 'rowbody',
|
|
* setupRowData: function(record, rowIndex, rowValues) {
|
|
* var headerCt = this.view.headerCt,
|
|
* colspan = headerCt.getColumnCount();
|
|
* // Usually you would style the my-body-class in CSS file
|
|
* return {
|
|
* rowBody: '<div style="padding: 1em">'+record.get("desc")+'</div>',
|
|
* rowBodyCls: "my-body-class",
|
|
* rowBodyColspan: colspan
|
|
* };
|
|
* }
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.feature.RowBody', {
|
|
extend: Ext.grid.feature.Feature ,
|
|
alias: 'feature.rowbody',
|
|
|
|
rowBodyCls: Ext.baseCSSPrefix + 'grid-row-body',
|
|
rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',
|
|
rowBodyTdSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell-rowbody',
|
|
eventPrefix: 'rowbody',
|
|
eventSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',
|
|
|
|
tableTpl: {
|
|
before: function(values, out) {
|
|
var view = values.view,
|
|
rowValues = view.rowValues;
|
|
|
|
this.rowBody.setup(values.rows, rowValues);
|
|
},
|
|
after: function(values, out) {
|
|
var view = values.view,
|
|
rowValues = view.rowValues;
|
|
|
|
this.rowBody.cleanup(values.rows, rowValues);
|
|
},
|
|
priority: 100
|
|
},
|
|
|
|
extraRowTpl: [
|
|
'{%',
|
|
'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values);',
|
|
'this.nextTpl.applyOut(values, out, parent);',
|
|
'%}',
|
|
'<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls}">',
|
|
'<td class="' + Ext.baseCSSPrefix + 'grid-cell-rowbody' + '" colspan="{rowBodyColspan}">',
|
|
'<div class="' + Ext.baseCSSPrefix + 'grid-rowbody' + ' {rowBodyDivCls}">{rowBody}</div>',
|
|
'</td>',
|
|
'</tr>', {
|
|
priority: 100,
|
|
|
|
syncRowHeights: function(firstRow, secondRow) {
|
|
var owner = this.owner,
|
|
firstRowBody = Ext.fly(firstRow).down(owner.eventSelector, true),
|
|
secondRowBody,
|
|
firstHeight, secondHeight;
|
|
|
|
// Sync the heights of row body elements in each row if they need it.
|
|
if (firstRowBody && (secondRowBody = Ext.fly(secondRow).down(owner.eventSelector, true))) {
|
|
if ((firstHeight = firstRowBody.offsetHeight) > (secondHeight = secondRowBody.offsetHeight)) {
|
|
Ext.fly(secondRowBody).setHeight(firstHeight);
|
|
}
|
|
else if (secondHeight > firstHeight) {
|
|
Ext.fly(firstRowBody).setHeight(secondHeight);
|
|
}
|
|
}
|
|
},
|
|
|
|
syncContent: function(destRow, sourceRow) {
|
|
var owner = this.owner,
|
|
destRowBody = Ext.fly(destRow).down(owner.eventSelector, true),
|
|
sourceRowBody;
|
|
|
|
// Sync the heights of row body elements in each row if they need it.
|
|
if (destRowBody && (sourceRowBody = Ext.fly(sourceRow).down(owner.eventSelector, true))) {
|
|
Ext.fly(destRowBody).syncContent(sourceRowBody);
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
init: function(grid) {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
view.rowBodyFeature = me;
|
|
|
|
// If we are not inside a wrapped row, we must listen for mousedown in the body row to trigger selection.
|
|
// Also need to remove the body row on removing a record.
|
|
if (!view.findFeature('rowwrap')) {
|
|
grid.mon(view, {
|
|
element: 'el',
|
|
mousedown: me.onMouseDown,
|
|
scope: me
|
|
});
|
|
|
|
me.mon(grid.getStore(), 'remove', me.onStoreRemove, me);
|
|
}
|
|
|
|
view.headerCt.on({
|
|
columnschanged: me.onColumnsChanged,
|
|
scope: me
|
|
});
|
|
view.addTableTpl(me.tableTpl).rowBody = me;
|
|
view.addRowTpl(Ext.XTemplate.getTpl(this, 'extraRowTpl'));
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onStoreRemove: function(store, model, index){
|
|
var view = this.view,
|
|
node;
|
|
|
|
if (view.rendered) {
|
|
node = view.getNode(index);
|
|
if (node) {
|
|
node = Ext.fly(node).next(this.eventSelector);
|
|
if (node) {
|
|
node.remove();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// Needed when not used inside a RowWrap to select the data row when mousedown on the body row.
|
|
onMouseDown: function(e) {
|
|
var me = this,
|
|
tableRow = e.getTarget(me.eventSelector);
|
|
|
|
// If we have mousedowned on a row body TR and its previous sibling is a grid row, pass that onto the view for processing
|
|
if (tableRow && Ext.fly(tableRow = tableRow.previousSibling).is(me.view.getItemSelector())) {
|
|
e.target = tableRow;
|
|
me.view.handleEvent(e);
|
|
}
|
|
},
|
|
|
|
getSelectedRow: function(view, rowIndex) {
|
|
var selectedRow = view.getNode(rowIndex, false);
|
|
if (selectedRow) {
|
|
return Ext.fly(selectedRow).down(this.eventSelector);
|
|
}
|
|
return null;
|
|
},
|
|
|
|
// When columns added/removed, keep row body colspan in sync with number of columns.
|
|
onColumnsChanged: function(headerCt) {
|
|
var items = this.view.el.query(this.rowBodyTdSelector),
|
|
colspan = headerCt.getVisibleGridColumns().length,
|
|
len = items.length,
|
|
i;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
items[i].colSpan = colspan;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @method getAdditionalData
|
|
* Provides additional data to the prepareData call within the grid view.
|
|
* The rowbody feature adds 3 additional variables into the grid view's template.
|
|
* These are rowBodyCls, rowBodyColspan, and rowBody.
|
|
* @param {Object} data The data for this particular record.
|
|
* @param {Number} idx The row index for this record.
|
|
* @param {Ext.data.Model} record The record instance
|
|
* @param {Object} orig The original result from the prepareData call to massage.
|
|
*/
|
|
setupRowData: function(record, rowIndex, rowValues) {
|
|
if (this.getAdditionalData) {
|
|
Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));
|
|
}
|
|
},
|
|
|
|
setup: function(rows, rowValues) {
|
|
rowValues.rowBodyCls = this.rowBodyCls;
|
|
rowValues.rowBodyColspan = rowValues.view.getGridColumns().length;
|
|
},
|
|
|
|
cleanup: function(rows, rowValues) {
|
|
rowValues.rowBodyCls = rowValues.rowBodyColspan = rowValues.rowBody = null;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.feature.RowWrap', {
|
|
extend: Ext.grid.feature.Feature ,
|
|
alias: 'feature.rowwrap',
|
|
|
|
rowWrapTd: 'td.' + Ext.baseCSSPrefix + 'grid-rowwrap',
|
|
|
|
// turn off feature events.
|
|
hasFeatureEvent: false,
|
|
|
|
tableTpl: {
|
|
before: function(values, out) {
|
|
if (values.view.bufferedRenderer) {
|
|
values.view.bufferedRenderer.variableRowHeight = true;
|
|
}
|
|
},
|
|
priority: 200
|
|
},
|
|
|
|
wrapTpl: [
|
|
'<tr data-boundView="{view.id}" data-recordId="{record.internalId}" data-recordIndex="{recordIndex}" class="{[values.itemClasses.join(" ")]} ' + Ext.baseCSSPrefix + 'grid-wrap-row">',
|
|
'<td class="' + Ext.baseCSSPrefix + 'grid-rowwrap ' + Ext.baseCSSPrefix + 'grid-td" colSpan="{columns.length}">',
|
|
'<table class="' + Ext.baseCSSPrefix + '{view.id}-table ' + Ext.baseCSSPrefix + 'grid-table" border="0" cellspacing="0" cellpadding="0">',
|
|
'{[values.view.renderColumnSizer(out)]}',
|
|
'{%',
|
|
'values.itemClasses.length = 0;',
|
|
'this.nextTpl.applyOut(values, out, parent)',
|
|
'%}',
|
|
'</table>',
|
|
'</td>',
|
|
'</tr>', {
|
|
priority: 200
|
|
}
|
|
],
|
|
|
|
init: function(grid) {
|
|
var me = this;
|
|
me.view.addTableTpl(me.tableTpl);
|
|
me.view.addRowTpl(Ext.XTemplate.getTpl(me, 'wrapTpl'));
|
|
me.view.headerCt.on({
|
|
columnhide: me.onColumnHideShow,
|
|
columnshow: me.onColumnHideShow,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
// Keep row wtap colspan in sync with number of *visible* columns.
|
|
onColumnHideShow: function() {
|
|
var view = this.view,
|
|
items = view.el.query(this.rowWrapTd),
|
|
colspan = view.headerCt.getVisibleGridColumns().length,
|
|
len = items.length,
|
|
i;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
items[i].colSpan = colspan;
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This feature is used to place a summary row at the bottom of the grid. If using a grouping,
|
|
* see {@link Ext.grid.feature.GroupingSummary}. There are 2 aspects to calculating the summaries,
|
|
* calculation and rendering.
|
|
*
|
|
* ## Calculation
|
|
* The summary value needs to be calculated for each column in the grid. This is controlled
|
|
* by the summaryType option specified on the column. There are several built in summary types,
|
|
* which can be specified as a string on the column configuration. These call underlying methods
|
|
* on the store:
|
|
*
|
|
* - {@link Ext.data.Store#count count}
|
|
* - {@link Ext.data.Store#sum sum}
|
|
* - {@link Ext.data.Store#min min}
|
|
* - {@link Ext.data.Store#max max}
|
|
* - {@link Ext.data.Store#average average}
|
|
*
|
|
* Alternatively, the summaryType can be a function definition. If this is the case,
|
|
* the function is called with an array of records to calculate the summary value.
|
|
*
|
|
* ## Rendering
|
|
* Similar to a column, the summary also supports a summaryRenderer function. This
|
|
* summaryRenderer is called before displaying a value. The function is optional, if
|
|
* not specified the default calculated value is shown. The summaryRenderer is called with:
|
|
*
|
|
* - value {Object} - The calculated value.
|
|
* - summaryData {Object} - Contains all raw summary values for the row.
|
|
* - field {String} - The name of the field we are calculating
|
|
*
|
|
* ## Example Usage
|
|
*
|
|
* @example
|
|
* Ext.define('TestResult', {
|
|
* extend: 'Ext.data.Model',
|
|
* fields: ['student', {
|
|
* name: 'mark',
|
|
* type: 'int'
|
|
* }]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* width: 400,
|
|
* height: 200,
|
|
* title: 'Summary Test',
|
|
* style: 'padding: 20px',
|
|
* renderTo: document.body,
|
|
* features: [{
|
|
* ftype: 'summary'
|
|
* }],
|
|
* store: {
|
|
* model: 'TestResult',
|
|
* data: [{
|
|
* student: 'Student 1',
|
|
* mark: 84
|
|
* },{
|
|
* student: 'Student 2',
|
|
* mark: 72
|
|
* },{
|
|
* student: 'Student 3',
|
|
* mark: 96
|
|
* },{
|
|
* student: 'Student 4',
|
|
* mark: 68
|
|
* }]
|
|
* },
|
|
* columns: [{
|
|
* dataIndex: 'student',
|
|
* text: 'Name',
|
|
* summaryType: 'count',
|
|
* summaryRenderer: function(value, summaryData, dataIndex) {
|
|
* return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
|
|
* }
|
|
* }, {
|
|
* dataIndex: 'mark',
|
|
* text: 'Mark',
|
|
* summaryType: 'average'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.feature.Summary', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.grid.feature.AbstractSummary ,
|
|
|
|
alias: 'feature.summary',
|
|
|
|
/**
|
|
* @cfg {String} dock
|
|
* Configure `'top'` or `'bottom'` top create a fixed summary row either above or below the scrollable table.
|
|
*
|
|
*/
|
|
dock: undefined,
|
|
|
|
dockedSummaryCls: Ext.baseCSSPrefix + 'docked-summary',
|
|
|
|
panelBodyCls: Ext.baseCSSPrefix + 'summary-',
|
|
|
|
init: function(grid) {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.dock) {
|
|
grid.headerCt.on({
|
|
afterlayout: me.onStoreUpdate,
|
|
scope: me
|
|
});
|
|
grid.on({
|
|
beforerender: function() {
|
|
var tableCls = [me.summaryTableCls];
|
|
if (view.columnLines) {
|
|
tableCls[tableCls.length] = view.ownerCt.colLinesCls;
|
|
}
|
|
me.summaryBar = grid.addDocked({
|
|
childEls: ['innerCt'],
|
|
renderTpl: [
|
|
'<div id="{id}-innerCt">',
|
|
'<table cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
|
|
'<tr class="' + me.summaryRowCls + '"></tr>',
|
|
'</table>',
|
|
'</div>'
|
|
],
|
|
style: 'overflow:hidden',
|
|
itemId: 'summaryBar',
|
|
cls: [ me.dockedSummaryCls, me.dockedSummaryCls + '-' + me.dock ],
|
|
xtype: 'component',
|
|
dock: me.dock,
|
|
weight: 10000000
|
|
})[0];
|
|
},
|
|
afterrender: function() {
|
|
grid.body.addCls(me.panelBodyCls + me.dock);
|
|
view.mon(view.el, {
|
|
scroll: me.onViewScroll,
|
|
scope: me
|
|
});
|
|
me.onStoreUpdate();
|
|
},
|
|
single: true
|
|
});
|
|
|
|
// Stretch the innerCt of the summary bar upon headerCt layout
|
|
grid.headerCt.afterComponentLayout = Ext.Function.createSequence(grid.headerCt.afterComponentLayout, function() {
|
|
me.summaryBar.innerCt.setWidth(this.getFullWidth() + Ext.getScrollbarSize().width);
|
|
});
|
|
} else {
|
|
me.view.addFooterFn(me.renderTFoot);
|
|
}
|
|
|
|
grid.on({
|
|
columnmove: me.onStoreUpdate,
|
|
scope: me
|
|
});
|
|
|
|
// On change of data, we have to update the docked summary.
|
|
view.mon(view.store, {
|
|
update: me.onStoreUpdate,
|
|
datachanged: me.onStoreUpdate,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
renderTFoot: function(values, out) {
|
|
var view = values.view,
|
|
me = view.findFeature('summary');
|
|
|
|
if (me.showSummaryRow) {
|
|
out.push('<tfoot>');
|
|
me.outputSummaryRecord(me.createSummaryRecord(view), values, out);
|
|
out.push('</tfoot>');
|
|
}
|
|
},
|
|
|
|
vetoEvent: function(record, row, rowIndex, e) {
|
|
return !e.getTarget(this.summaryRowSelector);
|
|
},
|
|
|
|
onViewScroll: function() {
|
|
this.summaryBar.el.dom.scrollLeft = this.view.el.dom.scrollLeft;
|
|
},
|
|
|
|
createSummaryRecord: function(view) {
|
|
var columns = view.headerCt.getVisibleGridColumns(),
|
|
info = {
|
|
records: view.store.getRange()
|
|
},
|
|
colCount = columns.length, i, column,
|
|
summaryRecord = this.summaryRecord || (this.summaryRecord = new view.store.model(null, view.id + '-summary-record'));
|
|
|
|
// Set the summary field values
|
|
summaryRecord.beginEdit();
|
|
for (i = 0; i < colCount; i++) {
|
|
column = columns[i];
|
|
|
|
// In summary records, if there's no dataIndex, then the value in regular rows must come from a renderer.
|
|
// We set the data value in using the column ID.
|
|
if (!column.dataIndex) {
|
|
column.dataIndex = column.id;
|
|
}
|
|
|
|
summaryRecord.set(column.dataIndex, this.getSummary(view.store, column.summaryType, column.dataIndex, info));
|
|
}
|
|
summaryRecord.endEdit(true);
|
|
// It's not dirty
|
|
summaryRecord.commit(true);
|
|
summaryRecord.isSummary = true;
|
|
|
|
return summaryRecord;
|
|
},
|
|
|
|
onStoreUpdate: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
record = me.createSummaryRecord(view),
|
|
newRowDom = view.createRowElement(record, -1),
|
|
oldRowDom, partner,
|
|
p;
|
|
|
|
if (!view.rendered) {
|
|
return;
|
|
}
|
|
|
|
// Summary row is inside the docked summaryBar Component
|
|
if (me.dock) {
|
|
oldRowDom = me.summaryBar.el.down('.' + me.summaryRowCls, true);
|
|
}
|
|
// Summary row is a regular row in a THEAD inside the View.
|
|
// Downlinked through the summary record's ID'
|
|
else {
|
|
oldRowDom = me.view.getNode(record);
|
|
}
|
|
|
|
if (oldRowDom) {
|
|
p = oldRowDom.parentNode;
|
|
p.insertBefore(newRowDom, oldRowDom);
|
|
p.removeChild(oldRowDom);
|
|
|
|
partner = me.lockingPartner;
|
|
// For locking grids...
|
|
// Update summary on other side (unless we have been called from the other side)
|
|
if (partner && partner.grid.rendered && !me.calledFromLockingPartner) {
|
|
partner.calledFromLockingPartner = true;
|
|
partner.onStoreUpdate();
|
|
partner.calledFromLockingPartner = false;
|
|
}
|
|
}
|
|
// If docked, the updated row will need sizing because it's outside the View
|
|
if (me.dock) {
|
|
me.onColumnHeaderLayout();
|
|
}
|
|
},
|
|
|
|
// Synchronize column widths in the docked summary Component
|
|
onColumnHeaderLayout: function() {
|
|
var view = this.view,
|
|
columns = view.headerCt.getVisibleGridColumns(),
|
|
column,
|
|
len = columns.length, i,
|
|
summaryEl = this.summaryBar.el,
|
|
el;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
column = columns[i];
|
|
el = summaryEl.down(view.getCellSelector(column));
|
|
if (el) {
|
|
if (column.hidden) {
|
|
el.setDisplayed(false);
|
|
} else {
|
|
el.setDisplayed(true);
|
|
el.setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private class which acts as a HeaderContainer for the Lockable which aggregates all columns
|
|
* from both sides of the Loackable. It is never rendered, it's just used to interrogate the
|
|
* column collection.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.locking.HeaderContainer', {
|
|
extend: Ext.grid.header.Container ,
|
|
|
|
|
|
|
|
|
|
constructor: function(lockable) {
|
|
var me = this,
|
|
events,
|
|
event,
|
|
eventNames = [],
|
|
lockedGrid = lockable.lockedGrid,
|
|
normalGrid = lockable.normalGrid;
|
|
|
|
me.lockable = lockable;
|
|
me.callParent();
|
|
|
|
// Create the unified column manager for the lockable grid assembly
|
|
lockedGrid.columnManager.rootColumns =
|
|
normalGrid.columnManager.rootColumns =
|
|
lockable.columnManager =
|
|
me.columnManager = new Ext.grid.ColumnManager(lockedGrid.headerCt, normalGrid.headerCt);
|
|
|
|
// Relay events from both sides' headerCts
|
|
events = lockedGrid.headerCt.events;
|
|
for (event in events) {
|
|
if (events.hasOwnProperty(event)) {
|
|
eventNames.push(event);
|
|
}
|
|
}
|
|
me.relayEvents(lockedGrid.headerCt, eventNames);
|
|
me.relayEvents(normalGrid.headerCt, eventNames);
|
|
},
|
|
|
|
getRefItems: function() {
|
|
return this.lockable.lockedGrid.headerCt.getRefItems().concat(this.lockable.normalGrid.headerCt.getRefItems());
|
|
},
|
|
|
|
// This is the function which all other column access methods are based upon
|
|
// Return the full column set for the whole Lockable assembly
|
|
getGridColumns: function() {
|
|
return this.lockable.lockedGrid.headerCt.getGridColumns().concat(this.lockable.normalGrid.headerCt.getGridColumns());
|
|
},
|
|
|
|
// Lockable uses its headerCt to gather column state
|
|
getColumnsState: function () {
|
|
var me = this,
|
|
locked = me.lockable.lockedGrid.headerCt.getColumnsState(),
|
|
normal = me.lockable.normalGrid.headerCt.getColumnsState();
|
|
|
|
return locked.concat(normal);
|
|
},
|
|
|
|
// Lockable uses its headerCt to apply column state
|
|
applyColumnsState: function (columns) {
|
|
var me = this,
|
|
lockedGrid = me.lockable.lockedGrid,
|
|
lockedHeaderCt = lockedGrid.headerCt,
|
|
normalHeaderCt = me.lockable.normalGrid.headerCt,
|
|
lockedCols = Ext.Array.toValueMap(lockedHeaderCt.items.items, 'headerId'),
|
|
normalCols = Ext.Array.toValueMap(normalHeaderCt.items.items, 'headerId'),
|
|
locked = [],
|
|
normal = [],
|
|
lockedWidth = 1,
|
|
length = columns.length,
|
|
i, existing,
|
|
lockedDefault,
|
|
col;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
col = columns[i];
|
|
|
|
lockedDefault = lockedCols[col.id];
|
|
existing = lockedDefault || normalCols[col.id];
|
|
|
|
if (existing) {
|
|
if (existing.applyColumnState) {
|
|
existing.applyColumnState(col);
|
|
}
|
|
if (existing.locked === undefined) {
|
|
existing.locked = !!lockedDefault;
|
|
}
|
|
if (existing.locked) {
|
|
locked.push(existing);
|
|
if (!existing.hidden && typeof existing.width == 'number') {
|
|
lockedWidth += existing.width;
|
|
}
|
|
} else {
|
|
normal.push(existing);
|
|
}
|
|
}
|
|
}
|
|
|
|
// state and config must have the same columns (compare counts for now):
|
|
if (locked.length + normal.length == lockedHeaderCt.items.getCount() + normalHeaderCt.items.getCount()) {
|
|
lockedHeaderCt.removeAll(false);
|
|
normalHeaderCt.removeAll(false);
|
|
|
|
lockedHeaderCt.add(locked);
|
|
normalHeaderCt.add(normal);
|
|
|
|
lockedGrid.setWidth(lockedWidth);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is used internally to provide a single interface when using
|
|
* a locking grid. Internally, the locking grid creates two separate grids,
|
|
* so this class is used to map calls appropriately.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.grid.locking.View', {
|
|
alternateClassName: 'Ext.grid.LockingView',
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} isLockingView
|
|
* `true` in this class to identify an object as an instantiated LockingView, or subclass thereof.
|
|
*/
|
|
isLockingView: true,
|
|
|
|
eventRelayRe: /^(beforeitem|beforecontainer|item|container|cell|refresh)/,
|
|
|
|
constructor: function(config){
|
|
var me = this,
|
|
eventNames = [],
|
|
eventRe = me.eventRelayRe,
|
|
locked = config.locked.getView(),
|
|
normal = config.normal.getView(),
|
|
events,
|
|
event;
|
|
|
|
Ext.apply(me, {
|
|
lockedView: locked,
|
|
normalView: normal,
|
|
lockedGrid: config.locked,
|
|
normalGrid: config.normal,
|
|
panel: config.panel
|
|
});
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
// relay events
|
|
events = locked.events;
|
|
for (event in events) {
|
|
if (events.hasOwnProperty(event) && eventRe.test(event)) {
|
|
eventNames.push(event);
|
|
}
|
|
}
|
|
me.relayEvents(locked, eventNames);
|
|
me.relayEvents(normal, eventNames);
|
|
|
|
normal.on({
|
|
scope: me,
|
|
itemmouseleave: me.onItemMouseLeave,
|
|
itemmouseenter: me.onItemMouseEnter
|
|
});
|
|
|
|
locked.on({
|
|
scope: me,
|
|
itemmouseleave: me.onItemMouseLeave,
|
|
itemmouseenter: me.onItemMouseEnter
|
|
});
|
|
|
|
me.panel.on({
|
|
render: me.onPanelRender,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
onPanelRender: function() {
|
|
var me = this,
|
|
mask = me.loadMask,
|
|
cfg = {
|
|
target: me.panel,
|
|
msg: me.loadingText,
|
|
msgCls: me.loadingCls,
|
|
useMsg: me.loadingUseMsg,
|
|
store: me.panel.store
|
|
};
|
|
|
|
// Because this is used as a View, it should have an el. Use the owning Lockable's body.
|
|
// It also has to fire a render event so that Editing plugins can attach listeners
|
|
me.el = me.panel.body;
|
|
me.fireEvent('render', me);
|
|
|
|
if (mask) {
|
|
// either a config object
|
|
if (Ext.isObject(mask)) {
|
|
cfg = Ext.apply(cfg, mask);
|
|
}
|
|
// Attach the LoadMask to a *Component* so that it can be sensitive to resizing during long loads.
|
|
// If this DataView is floating, then mask this DataView.
|
|
// Otherwise, mask its owning Container (or this, if there *is* no owning Container).
|
|
// LoadMask captures the element upon render.
|
|
me.loadMask = new Ext.LoadMask(cfg);
|
|
}
|
|
},
|
|
|
|
getGridColumns: function() {
|
|
var cols = this.lockedGrid.headerCt.getVisibleGridColumns();
|
|
return cols.concat(this.normalGrid.headerCt.getVisibleGridColumns());
|
|
},
|
|
|
|
getEl: function(column){
|
|
return this.getViewForColumn(column).getEl();
|
|
},
|
|
|
|
getViewForColumn: function(column) {
|
|
var view = this.lockedView,
|
|
inLocked;
|
|
|
|
view.headerCt.cascade(function(col){
|
|
if (col === column) {
|
|
inLocked = true;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
return inLocked ? view : this.normalView;
|
|
},
|
|
|
|
onItemMouseEnter: function(view, record){
|
|
var me = this,
|
|
locked = me.lockedView,
|
|
other = me.normalView,
|
|
item;
|
|
|
|
if (view.trackOver) {
|
|
if (view !== locked) {
|
|
other = locked;
|
|
}
|
|
item = other.getNode(record, false);
|
|
other.highlightItem(item);
|
|
}
|
|
},
|
|
|
|
onItemMouseLeave: function(view, record){
|
|
var me = this,
|
|
locked = me.lockedView,
|
|
other = me.normalView;
|
|
|
|
if (view.trackOver) {
|
|
if (view !== locked) {
|
|
other = locked;
|
|
}
|
|
other.clearHighlight();
|
|
}
|
|
},
|
|
|
|
relayFn: function(name, args){
|
|
args = args || [];
|
|
|
|
var view = this.lockedView;
|
|
view[name].apply(view, args);
|
|
view = this.normalView;
|
|
view[name].apply(view, args);
|
|
},
|
|
|
|
getSelectionModel: function(){
|
|
return this.panel.getSelectionModel();
|
|
},
|
|
|
|
getStore: function(){
|
|
return this.panel.store;
|
|
},
|
|
|
|
getNode: function(nodeInfo, dataRow) {
|
|
// default to the normal view
|
|
return this.normalView.getNode(nodeInfo, dataRow);
|
|
},
|
|
|
|
getCell: function(record, column) {
|
|
var view = this.getViewForColumn(column),
|
|
row = view.getNode(record, true);
|
|
|
|
return Ext.fly(row).down(column.getCellSelector());
|
|
},
|
|
|
|
indexOf: function(record) {
|
|
var result = this.lockedView.indexOf(record);
|
|
if (!result) {
|
|
result = this.normalView.indexOf(record);
|
|
}
|
|
return result;
|
|
},
|
|
|
|
focus: function() {
|
|
var p = this.getSelectionModel().getCurrentPosition(),
|
|
v = p ? p.view : this.normalView;
|
|
|
|
v.focus();
|
|
},
|
|
|
|
focusRow: function(row) {
|
|
this.normalView.focusRow(row);
|
|
},
|
|
|
|
focusCell: function(position) {
|
|
position.view.focusCell(position);
|
|
},
|
|
|
|
isVisible: function(deep) {
|
|
return this.panel.isVisible(deep);
|
|
},
|
|
|
|
getRecord: function(node) {
|
|
var result = this.lockedView.getRecord(node);
|
|
if (!result) {
|
|
result = this.normalView.getRecord(node);
|
|
}
|
|
return result;
|
|
},
|
|
|
|
scrollBy: function(){
|
|
var normal = this.normalView;
|
|
normal.scrollBy.apply(normal, arguments);
|
|
},
|
|
|
|
addElListener: function(eventName, fn, scope){
|
|
this.relayFn('addElListener', arguments);
|
|
},
|
|
|
|
refreshNode: function(){
|
|
this.relayFn('refreshNode', arguments);
|
|
},
|
|
|
|
refresh: function(){
|
|
this.relayFn('refresh', arguments);
|
|
},
|
|
|
|
bindStore: function(){
|
|
this.relayFn('bindStore', arguments);
|
|
},
|
|
|
|
addRowCls: function(){
|
|
this.relayFn('addRowCls', arguments);
|
|
},
|
|
|
|
removeRowCls: function(){
|
|
this.relayFn('removeRowCls', arguments);
|
|
},
|
|
|
|
destroy: function(){
|
|
var me = this,
|
|
mask = me.loadMask;
|
|
|
|
// Typically the mask unbinding is handled by the view, but
|
|
// we aren't a normal view, so clear it out here
|
|
me.clearListeners();
|
|
if (mask && mask.bindStore) {
|
|
mask.bindStore(null);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*
|
|
* Lockable is a private mixin which injects lockable behavior into any
|
|
* TablePanel subclass such as GridPanel or TreePanel. TablePanel will
|
|
* automatically inject the Ext.grid.locking.Lockable mixin in when one of the
|
|
* these conditions are met:
|
|
*
|
|
* - The TablePanel has the lockable configuration set to true
|
|
* - One of the columns in the TablePanel has locked set to true/false
|
|
*
|
|
* Each TablePanel subclass must register an alias. It should have an array
|
|
* of configurations to copy to the 2 separate tablepanel's that will be generated
|
|
* to note what configurations should be copied. These are named normalCfgCopy and
|
|
* lockedCfgCopy respectively.
|
|
*
|
|
* Columns which are locked must specify a fixed width. They do NOT support a
|
|
* flex width.
|
|
*
|
|
* Configurations which are specified in this class will be available on any grid or
|
|
* tree which is using the lockable functionality.
|
|
*/
|
|
Ext.define('Ext.grid.locking.Lockable', {
|
|
alternateClassName: 'Ext.grid.Lockable',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} syncRowHeight Synchronize rowHeight between the normal and
|
|
* locked grid view. This is turned on by default. If your grid is guaranteed
|
|
* to have rows of all the same height, you should set this to false to
|
|
* optimize performance.
|
|
*/
|
|
syncRowHeight: true,
|
|
|
|
/**
|
|
* @cfg {String} subGridXType The xtype of the subgrid to specify. If this is
|
|
* not specified lockable will determine the subgrid xtype to create by the
|
|
* following rule. Use the superclasses xtype if the superclass is NOT
|
|
* tablepanel, otherwise use the xtype itself.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} lockedViewConfig A view configuration to be applied to the
|
|
* locked side of the grid. Any conflicting configurations between lockedViewConfig
|
|
* and viewConfig will be overwritten by the lockedViewConfig.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} normalViewConfig A view configuration to be applied to the
|
|
* normal/unlocked side of the grid. Any conflicting configurations between normalViewConfig
|
|
* and viewConfig will be overwritten by the normalViewConfig.
|
|
*/
|
|
|
|
headerCounter: 0,
|
|
|
|
/**
|
|
* @cfg {Number} scrollDelta
|
|
* Number of pixels to scroll when scrolling the locked section with mousewheel.
|
|
*/
|
|
scrollDelta: 40,
|
|
|
|
/**
|
|
* @cfg {Object} lockedGridConfig
|
|
* Any special configuration options for the locked part of the grid
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} normalGridConfig
|
|
* Any special configuration options for the normal part of the grid
|
|
*/
|
|
|
|
lockedGridCls: Ext.baseCSSPrefix + 'grid-inner-locked',
|
|
|
|
// i8n text
|
|
//<locale>
|
|
unlockText: 'Unlock',
|
|
//</locale>
|
|
//<locale>
|
|
lockText: 'Lock',
|
|
//</locale>
|
|
|
|
// Required for the Lockable Mixin. These are the configurations which will be copied to the
|
|
// normal and locked sub tablepanels
|
|
bothCfgCopy: [
|
|
'invalidateScrollerOnRefresh',
|
|
'hideHeaders',
|
|
'enableColumnHide',
|
|
'enableColumnMove',
|
|
'enableColumnResize',
|
|
'sortableColumns',
|
|
'columnLines',
|
|
'rowLines'
|
|
],
|
|
normalCfgCopy: [
|
|
'verticalScroller',
|
|
'verticalScrollDock',
|
|
'verticalScrollerType',
|
|
'scroll'
|
|
],
|
|
lockedCfgCopy: [],
|
|
|
|
determineXTypeToCreate: function(lockedSide) {
|
|
var me = this,
|
|
typeToCreate,
|
|
xtypes, xtypesLn, xtype, superxtype;
|
|
|
|
if (me.subGridXType) {
|
|
typeToCreate = me.subGridXType;
|
|
} else {
|
|
// Treeness only moves down into the locked side.
|
|
// The normal side is always just a grid
|
|
if (!lockedSide) {
|
|
return 'gridpanel';
|
|
}
|
|
xtypes = this.getXTypes().split('/');
|
|
xtypesLn = xtypes.length;
|
|
xtype = xtypes[xtypesLn - 1];
|
|
superxtype = xtypes[xtypesLn - 2];
|
|
|
|
if (superxtype !== 'tablepanel') {
|
|
typeToCreate = superxtype;
|
|
} else {
|
|
typeToCreate = xtype;
|
|
}
|
|
}
|
|
|
|
return typeToCreate;
|
|
},
|
|
|
|
// injectLockable will be invoked before initComponent's parent class implementation
|
|
// is called, so throughout this method this. are configurations
|
|
injectLockable: function() {
|
|
// ensure lockable is set to true in the TablePanel
|
|
this.lockable = true;
|
|
// Instruct the TablePanel it already has a view and not to create one.
|
|
// We are going to aggregate 2 copies of whatever TablePanel we are using
|
|
this.hasView = true;
|
|
|
|
var me = this,
|
|
scrollbarHeight = Ext.getScrollbarSize().height,
|
|
store = me.store = Ext.StoreManager.lookup(me.store),
|
|
|
|
// share the selection model
|
|
selModel = me.getSelectionModel(),
|
|
|
|
// Hash of {lockedFeatures:[],normalFeatures:[]}
|
|
allFeatures,
|
|
|
|
// Hash of {topPlugins:[],lockedPlugins:[],normalPlugins:[]}
|
|
allPlugins,
|
|
|
|
lockedGrid,
|
|
normalGrid,
|
|
i,
|
|
columns,
|
|
lockedHeaderCt,
|
|
normalHeaderCt,
|
|
lockedView,
|
|
normalView,
|
|
listeners,
|
|
bufferedRenderer = me.findPlugin('bufferedrenderer');
|
|
|
|
allFeatures = me.constructLockableFeatures();
|
|
|
|
// This is just a "shell" Panel which acts as a Container for the two grids and must not use the features
|
|
if (me.features) {
|
|
me.features = null;
|
|
}
|
|
|
|
// Distribute plugins to whichever Component needs them
|
|
allPlugins = me.constructLockablePlugins();
|
|
me.plugins = allPlugins.topPlugins;
|
|
|
|
lockedGrid = Ext.apply({
|
|
id: me.id + '-locked',
|
|
isLocked: true,
|
|
ownerLockable: me,
|
|
xtype: me.determineXTypeToCreate(true),
|
|
store: store,
|
|
scrollerOwner: false,
|
|
// Lockable does NOT support animations for Tree
|
|
// Because the right side is just a grid, and the grid view doen't animate bulk insertions/removals
|
|
animate: false,
|
|
// If the OS does not show a space-taking scrollbar, the locked view can be overflow-y:auto
|
|
scroll: scrollbarHeight ? false : 'vertical',
|
|
selModel: selModel,
|
|
border: false,
|
|
cls: me.lockedGridCls,
|
|
isLayoutRoot: function() {
|
|
return false;
|
|
},
|
|
features: allFeatures.lockedFeatures,
|
|
plugins: allPlugins.lockedPlugins
|
|
}, me.lockedGridConfig);
|
|
|
|
normalGrid = Ext.apply({
|
|
id: me.id + '-normal',
|
|
isLocked: false,
|
|
ownerLockable: me,
|
|
xtype: me.determineXTypeToCreate(),
|
|
store: store,
|
|
scrollerOwner: false,
|
|
selModel: selModel,
|
|
border: false,
|
|
isLayoutRoot: function() {
|
|
return false;
|
|
},
|
|
features: allFeatures.normalFeatures,
|
|
plugins: allPlugins.normalPlugins
|
|
}, me.normalGridConfig);
|
|
|
|
me.addCls(Ext.baseCSSPrefix + 'grid-locked');
|
|
|
|
// Copy appropriate configurations to the respective aggregated tablepanel instances.
|
|
// Pass 4th param true to NOT exclude those settings on our prototype.
|
|
// Delete them from the master tablepanel.
|
|
Ext.copyTo(normalGrid, me, me.bothCfgCopy, true);
|
|
Ext.copyTo(lockedGrid, me, me.bothCfgCopy, true);
|
|
Ext.copyTo(normalGrid, me, me.normalCfgCopy, true);
|
|
Ext.copyTo(lockedGrid, me, me.lockedCfgCopy, true);
|
|
for (i = 0; i < me.normalCfgCopy.length; i++) {
|
|
delete me[me.normalCfgCopy[i]];
|
|
}
|
|
for (i = 0; i < me.lockedCfgCopy.length; i++) {
|
|
delete me[me.lockedCfgCopy[i]];
|
|
}
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event processcolumns
|
|
* Fires when the configured (or **reconfigured**) column set is split into two depending on the {@link Ext.grid.column.Column#locked locked} flag.
|
|
* @param {Ext.grid.column.Column[]} lockedColumns The locked columns.
|
|
* @param {Ext.grid.column.Column[]} normalColumns The normal columns.
|
|
*/
|
|
'processcolumns',
|
|
|
|
/**
|
|
* @event lockcolumn
|
|
* Fires when a column is locked.
|
|
* @param {Ext.grid.Panel} this The gridpanel.
|
|
* @param {Ext.grid.column.Column} column The column being locked.
|
|
*/
|
|
'lockcolumn',
|
|
|
|
/**
|
|
* @event unlockcolumn
|
|
* Fires when a column is unlocked.
|
|
* @param {Ext.grid.Panel} this The gridpanel.
|
|
* @param {Ext.grid.column.Column} column The column being unlocked.
|
|
*/
|
|
'unlockcolumn'
|
|
);
|
|
|
|
me.addStateEvents(['lockcolumn', 'unlockcolumn']);
|
|
|
|
columns = me.processColumns(me.columns);
|
|
|
|
// Locked grid has a right border. Locked grid must shrinkwrap columns with no horiontal scroll, so
|
|
// we must increment by the border width: 1px. TODO: Use shrinkWrapDock on the locked grid when it works.
|
|
lockedGrid.width = columns.lockedWidth + Ext.num(selModel.headerWidth, 0) + (columns.locked.items.length ? 1 : 0);
|
|
lockedGrid.columns = columns.locked;
|
|
normalGrid.columns = columns.normal;
|
|
|
|
// normal grid should flex the rest of the width
|
|
normalGrid.flex = 1;
|
|
lockedGrid.viewConfig = me.lockedViewConfig || {};
|
|
lockedGrid.viewConfig.loadingUseMsg = false;
|
|
lockedGrid.viewConfig.loadMask = false;
|
|
|
|
// Padding below locked grid body only if there are scrollbars on this system
|
|
// This takes the place of any spacer element.
|
|
// Important: The height has to be postprocessed after render to override
|
|
// the inline border styles injected by automatic component border settings.
|
|
if (scrollbarHeight) {
|
|
lockedGrid.viewConfig.style = 'border-bottom:' + scrollbarHeight +
|
|
'px solid #f6f6f6;' + (lockedGrid.viewConfig.style || '');
|
|
}
|
|
|
|
normalGrid.viewConfig = me.normalViewConfig || {};
|
|
normalGrid.viewConfig.loadMask = false;
|
|
|
|
|
|
Ext.applyIf(lockedGrid.viewConfig, me.viewConfig);
|
|
Ext.applyIf(normalGrid.viewConfig, me.viewConfig);
|
|
|
|
me.lockedGrid = Ext.ComponentManager.create(lockedGrid);
|
|
|
|
if (me.isTree) {
|
|
// Tree must not animate because the partner grid is unable to animate
|
|
me.lockedGrid.getView().animate = false;
|
|
|
|
// When this is a locked tree, the normal side is just a gridpanel, so needs the flat NodeStore
|
|
normalGrid.store = me.lockedGrid.view.store;
|
|
|
|
// To stay in sync with the tree side; trees don't use deferInitialRefresh by default. Overrideable by user config.
|
|
normalGrid.deferRowRender = false;
|
|
|
|
// Match configs between sides
|
|
normalGrid.viewConfig.stripeRows = me.lockedGrid.view.stripeRows;
|
|
normalGrid.rowLines = me.lockedGrid.rowLines;
|
|
}
|
|
|
|
// Set up a bidirectional relationship between the two sides of the locked view
|
|
lockedView = me.lockedGrid.getView();
|
|
normalGrid.viewConfig.lockingPartner = lockedView;
|
|
me.normalGrid = Ext.ComponentManager.create(normalGrid);
|
|
lockedView.lockingPartner = normalView = me.normalGrid.getView();
|
|
|
|
me.view = new Ext.grid.locking.View({
|
|
loadingText: normalView.loadingText,
|
|
loadingCls: normalView.loadingCls,
|
|
loadingUseMsg: normalView.loadingUseMsg,
|
|
loadMask: me.loadMask !== false,
|
|
locked: me.lockedGrid,
|
|
normal: me.normalGrid,
|
|
panel: me
|
|
});
|
|
|
|
// Set up listeners for the locked view. If its SelModel ever scrolls it, the normal view must sync
|
|
listeners = bufferedRenderer ? {} : {
|
|
scroll: {
|
|
fn: me.onLockedViewScroll,
|
|
element: 'el',
|
|
scope: me
|
|
}
|
|
};
|
|
|
|
// If there are system scrollbars, we have to monitor the mousewheel and fake a scroll
|
|
// Also we need to postprocess the border width because of inline border setting styles.
|
|
// The locked grid needs a bottom border to match with any scrollbar present in the normal grid .
|
|
// Keep locked section's bottom border width synched
|
|
if (scrollbarHeight) {
|
|
me.lockedGrid.on({
|
|
afterlayout: me.afterLockedViewLayout,
|
|
scope: me
|
|
});
|
|
|
|
// Ensure the overflow flags have been calculated from the various overflow configs
|
|
lockedView.getOverflowStyle();
|
|
|
|
// If the locked view is configured to scoll vertically, force the columns to fit initially.
|
|
if (lockedView.scrollFlags.y) {
|
|
me.lockedGrid.headerCt.forceFit = true;
|
|
}
|
|
// If the locked view is not configured to scoll vertically, we must listen for mousewheel events to scroll it.
|
|
else {
|
|
listeners.mousewheel = {
|
|
fn: me.onLockedViewMouseWheel,
|
|
element: 'el',
|
|
scope: me
|
|
};
|
|
}
|
|
}
|
|
lockedView.on(listeners);
|
|
|
|
// Set up listeners for the normal view
|
|
listeners = bufferedRenderer ? {} : {
|
|
scroll: {
|
|
fn: me.onNormalViewScroll,
|
|
element: 'el',
|
|
scope: me
|
|
},
|
|
scope: me
|
|
};
|
|
normalView.on(listeners);
|
|
|
|
lockedHeaderCt = me.lockedGrid.headerCt;
|
|
normalHeaderCt = me.normalGrid.headerCt;
|
|
|
|
// The top grid, and the LockingView both need to have a headerCt which is usable.
|
|
// It is part of their private API that framework code uses when dealing with a grid or grid view
|
|
me.headerCt = me.view.headerCt = new Ext.grid.locking.HeaderContainer(me);
|
|
|
|
lockedHeaderCt.lockedCt = true;
|
|
lockedHeaderCt.lockableInjected = true;
|
|
normalHeaderCt.lockableInjected = true;
|
|
|
|
lockedHeaderCt.on({
|
|
// buffer to wait until multiple adds have fired
|
|
add: {
|
|
buffer: 1,
|
|
scope: me,
|
|
fn: me.onLockedHeaderAdd
|
|
},
|
|
columnshow: me.onLockedHeaderShow,
|
|
columnhide: me.onLockedHeaderHide,
|
|
sortchange: me.onLockedHeaderSortChange,
|
|
columnresize: me.onLockedHeaderResize,
|
|
scope: me
|
|
});
|
|
|
|
normalHeaderCt.on({
|
|
sortchange: me.onNormalHeaderSortChange,
|
|
scope: me
|
|
});
|
|
|
|
me.modifyHeaderCt();
|
|
me.items = [me.lockedGrid, me.normalGrid];
|
|
|
|
me.relayHeaderCtEvents(lockedHeaderCt);
|
|
me.relayHeaderCtEvents(normalHeaderCt);
|
|
|
|
// The top level Lockable container does not get bound to the store, so we need to programatically add the relayer so that
|
|
// The filterchange state event is fired.
|
|
me.storeRelayers = me.relayEvents(store, [
|
|
/**
|
|
* @event filterchange
|
|
* @inheritdoc Ext.data.Store#filterchange
|
|
*/
|
|
'filterchange'
|
|
]);
|
|
|
|
me.layout = {
|
|
type: 'hbox',
|
|
align: 'stretch'
|
|
};
|
|
},
|
|
|
|
getLockingViewConfig: function(){
|
|
return {
|
|
xclass: 'Ext.grid.locking.View',
|
|
locked: this.lockedGrid,
|
|
normal: this.normalGrid,
|
|
panel: this
|
|
};
|
|
},
|
|
|
|
processColumns: function(columns) {
|
|
// split apart normal and locked
|
|
var i,
|
|
len,
|
|
column,
|
|
cp = this.dummyHdrCtr || (this.self.prototype.dummyHdrCtr = new Ext.grid.header.Container()),
|
|
lockedHeaders = [],
|
|
normalHeaders = [],
|
|
lockedHeaderCt = {
|
|
itemId: 'lockedHeaderCt',
|
|
stretchMaxPartner: '^^>>#normalHeaderCt',
|
|
items: lockedHeaders
|
|
},
|
|
normalHeaderCt = {
|
|
itemId: 'normalHeaderCt',
|
|
stretchMaxPartner: '^^>>#lockedHeaderCt',
|
|
items: normalHeaders
|
|
},
|
|
result = {
|
|
lockedWidth: 0,
|
|
locked: lockedHeaderCt,
|
|
normal: normalHeaderCt
|
|
};
|
|
|
|
// In case they specified a config object with items...
|
|
if (Ext.isObject(columns)) {
|
|
Ext.applyIf(lockedHeaderCt, columns);
|
|
Ext.applyIf(normalHeaderCt, columns);
|
|
Ext.apply(cp, columns);
|
|
columns = columns.items;
|
|
}
|
|
|
|
for (i = 0, len = columns.length; i < len; ++i) {
|
|
column = columns[i];
|
|
|
|
// Use the HeaderContainer object to correctly configure and create the column.
|
|
// MUST instantiate now because the locked or autoLock config which we read here might be in the prototype.
|
|
// MUST use a Container instance so that defaults from an object columns config get applied.
|
|
if (!column.isComponent) {
|
|
column = cp.lookupComponent(cp.applyDefaults(column));
|
|
}
|
|
|
|
// mark the column as processed so that the locked attribute does not
|
|
// trigger the locked subgrid to try to become a split lockable grid itself.
|
|
column.processed = true;
|
|
if (column.locked || column.autoLock) {
|
|
if (!column.hidden) {
|
|
result.lockedWidth += this.getColumnWidth(column) || cp.defaultWidth;
|
|
}
|
|
lockedHeaders.push(column);
|
|
} else {
|
|
normalHeaders.push(column);
|
|
}
|
|
if (!column.headerId) {
|
|
column.headerId = (column.initialConfig || column).id || ('h' + (++this.headerCounter));
|
|
}
|
|
}
|
|
this.fireEvent('processcolumns', this, lockedHeaders, normalHeaders);
|
|
return result;
|
|
},
|
|
|
|
// Used when calculating total locked column width in processColumns
|
|
// Use shrinkwrapping of child columns if no top level width.
|
|
getColumnWidth: function(column) {
|
|
var result = column.width || 0,
|
|
subcols, len, i;
|
|
|
|
if (!result && column.isGroupHeader) {
|
|
subcols = column.items.items;
|
|
len = subcols.length;
|
|
for (i = 0; i < len; i++) {
|
|
result += this.getColumnWidth(subcols[i]);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// Due to automatic component border setting using inline style, to create the scrollbar-replacing
|
|
// bottom border, we have to postprocess the locked view *after* render.
|
|
// If there are visible normal columns, we do need the fat bottom border.
|
|
afterLockedViewLayout: function() {
|
|
var me = this,
|
|
lockedView = me.lockedGrid.getView(),
|
|
lockedViewEl = lockedView.el.dom,
|
|
spacerHeight = (me.normalGrid.headerCt.tooNarrow ? Ext.getScrollbarSize().height : 0);
|
|
|
|
// If locked view is configured to scroll horizontally, and it overflows horizontally, then we do not need the spacer
|
|
if (lockedView.scrollFlags.x && lockedViewEl.scrollWidth > lockedViewEl.clientWidth) {
|
|
spacerHeight = 0;
|
|
}
|
|
|
|
lockedView.el.dom.style.borderBottomWidth = spacerHeight + 'px';
|
|
|
|
// Legacy IE browsers which cannot be forced to use the sensible border box model.
|
|
// We have to account in the element's style height for flip-flopping border width
|
|
if (!Ext.isBorderBox) {
|
|
lockedView.el.setHeight(lockedView.lastBox.height);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Listen for mousewheel events on the locked section which does not scroll.
|
|
* Scroll it in response, and the other section will automatically sync.
|
|
*/
|
|
onLockedViewMouseWheel: function(e) {
|
|
var me = this,
|
|
scrollDelta = -me.scrollDelta,
|
|
deltaY = scrollDelta * e.getWheelDeltas().y,
|
|
vertScrollerEl = me.lockedGrid.getView().el.dom,
|
|
verticalCanScrollDown, verticalCanScrollUp;
|
|
|
|
if (!me.ignoreMousewheel) {
|
|
if (vertScrollerEl) {
|
|
verticalCanScrollDown = vertScrollerEl.scrollTop !== vertScrollerEl.scrollHeight - vertScrollerEl.clientHeight;
|
|
verticalCanScrollUp = vertScrollerEl.scrollTop !== 0;
|
|
}
|
|
|
|
if ((deltaY < 0 && verticalCanScrollUp) || (deltaY > 0 && verticalCanScrollDown)) {
|
|
e.stopEvent();
|
|
|
|
// Inhibit processing of any scroll events we *may* cause here.
|
|
// Some OSs do not fire a scroll event when we set the scrollTop of an overflow:hidden element,
|
|
// so we invoke the scroll handler programatically below.
|
|
vertScrollerEl.scrollTop += deltaY;
|
|
me.normalGrid.getView().el.dom.scrollTop = vertScrollerEl.scrollTop;
|
|
|
|
// Invoke the scroll event handler programatically to sync everything.
|
|
me.onNormalViewScroll();
|
|
}
|
|
}
|
|
},
|
|
|
|
onLockedViewScroll: function() {
|
|
var me = this,
|
|
lockedView = me.lockedGrid.getView(),
|
|
normalView = me.normalGrid.getView(),
|
|
normalDom = normalView.el.dom,
|
|
lockedDom = lockedView.el.dom,
|
|
normalTable,
|
|
lockedTable;
|
|
|
|
// See onNormalViewScroll
|
|
if (normalDom.scrollTop !== lockedDom.scrollTop) {
|
|
normalDom.scrollTop = lockedDom.scrollTop;
|
|
|
|
// For buffered views, the absolute position is important as well as scrollTop
|
|
if (me.store.buffered) {
|
|
lockedTable = lockedView.el.child('table', true);
|
|
normalTable = normalView.el.child('table', true);
|
|
normalTable.style.position = 'absolute';
|
|
normalTable.style.top = lockedTable.style.top;
|
|
}
|
|
}
|
|
},
|
|
|
|
onNormalViewScroll: function() {
|
|
var me = this,
|
|
lockedView = me.lockedGrid.getView(),
|
|
normalView = me.normalGrid.getView(),
|
|
normalDom = normalView.el.dom,
|
|
lockedDom = lockedView.el.dom,
|
|
normalTable,
|
|
lockedTable;
|
|
|
|
// When we set the position, it will cause a scroll event on the other view, so we need to
|
|
// check the top here. We can't just set a flag, like:
|
|
// if (!me.scrolling) {
|
|
// me.scrolling = true;
|
|
// other.scrollTop = this.scrollTop;
|
|
// me.scrolling = false;
|
|
// }
|
|
// The browser waits until the "thread" finishes before setting the
|
|
// top, so by the time we set scrolling = false it hasn't hit the other
|
|
// scroll event yet
|
|
if (normalDom.scrollTop !== lockedDom.scrollTop) {
|
|
lockedDom.scrollTop = normalDom.scrollTop;
|
|
|
|
// For buffered views, the absolute position is important as well as scrollTop
|
|
if (me.store.buffered) {
|
|
lockedTable = lockedView.el.child('table', true);
|
|
normalTable = normalView.el.child('table', true);
|
|
lockedTable.style.position = 'absolute';
|
|
lockedTable.style.top = normalTable.style.top;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Synchronizes the row heights between the locked and non locked portion of the grid for each
|
|
* row. If one row is smaller than the other, the height will be increased to match the larger one.
|
|
*/
|
|
syncRowHeights: function() {
|
|
var me = this,
|
|
i,
|
|
lockedView = me.lockedGrid.getView(),
|
|
normalView = me.normalGrid.getView(),
|
|
lockedRowEls = lockedView.all.slice(),
|
|
normalRowEls = normalView.all.slice(),
|
|
ln = lockedRowEls.length,
|
|
scrollTop;
|
|
|
|
// Ensure there are an equal number of locked and normal rows before synchronization
|
|
if (normalRowEls.length === ln) {
|
|
|
|
// Loop thru all rows and ask the TableView class to sync the sides.
|
|
for (i = 0; i < ln; i++) {
|
|
normalView.syncRowHeights(lockedRowEls[i], normalRowEls[i]);
|
|
}
|
|
|
|
// Synchronize the scrollTop positions of the two views
|
|
scrollTop = normalView.el.dom.scrollTop;
|
|
normalView.el.dom.scrollTop = scrollTop;
|
|
lockedView.el.dom.scrollTop = scrollTop;
|
|
}
|
|
},
|
|
|
|
// inject Lock and Unlock text
|
|
// Hide/show Lock/Unlock options
|
|
modifyHeaderCt: function() {
|
|
var me = this;
|
|
me.lockedGrid.headerCt.getMenuItems = me.getMenuItems(me.lockedGrid.headerCt.getMenuItems, true);
|
|
me.normalGrid.headerCt.getMenuItems = me.getMenuItems(me.normalGrid.headerCt.getMenuItems, false);
|
|
me.lockedGrid.headerCt.showMenuBy = Ext.Function.createInterceptor(me.lockedGrid.headerCt.showMenuBy, me.showMenuBy);
|
|
me.normalGrid.headerCt.showMenuBy = Ext.Function.createInterceptor(me.normalGrid.headerCt.showMenuBy, me.showMenuBy);
|
|
},
|
|
|
|
onUnlockMenuClick: function() {
|
|
this.unlock();
|
|
},
|
|
|
|
onLockMenuClick: function() {
|
|
this.lock();
|
|
},
|
|
|
|
showMenuBy: function(t, header) {
|
|
var menu = this.getMenu(),
|
|
unlockItem = menu.down('#unlockItem'),
|
|
lockItem = menu.down('#lockItem'),
|
|
sep = unlockItem.prev();
|
|
|
|
if (header.lockable === false) {
|
|
sep.hide();
|
|
unlockItem.hide();
|
|
lockItem.hide();
|
|
} else {
|
|
sep.show();
|
|
unlockItem.show();
|
|
lockItem.show();
|
|
if (!unlockItem.initialConfig.disabled) {
|
|
unlockItem.setDisabled(header.lockable === false);
|
|
}
|
|
if (!lockItem.initialConfig.disabled) {
|
|
lockItem.setDisabled(!header.isLockable());
|
|
}
|
|
}
|
|
},
|
|
|
|
getMenuItems: function(getMenuItems, locked) {
|
|
var me = this,
|
|
unlockText = me.unlockText,
|
|
lockText = me.lockText,
|
|
unlockCls = Ext.baseCSSPrefix + 'hmenu-unlock',
|
|
lockCls = Ext.baseCSSPrefix + 'hmenu-lock',
|
|
unlockHandler = Ext.Function.bind(me.onUnlockMenuClick, me),
|
|
lockHandler = Ext.Function.bind(me.onLockMenuClick, me);
|
|
|
|
// runs in the scope of headerCt
|
|
return function() {
|
|
|
|
// We cannot use the method from HeaderContainer's prototype here
|
|
// because other plugins or features may already have injected an implementation
|
|
var o = getMenuItems.call(this);
|
|
o.push('-', {
|
|
itemId: 'unlockItem',
|
|
cls: unlockCls,
|
|
text: unlockText,
|
|
handler: unlockHandler,
|
|
disabled: !locked
|
|
});
|
|
o.push({
|
|
itemId: 'lockItem',
|
|
cls: lockCls,
|
|
text: lockText,
|
|
handler: lockHandler,
|
|
disabled: locked
|
|
});
|
|
return o;
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Updates the overall view after columns have been resized, or moved from
|
|
* the locked to unlocked side or vice-versa.
|
|
*
|
|
* If all columns are removed from either side, that side must be hidden, and the
|
|
* sole remaining column owning grid then becomes *the* grid. It must flex to occupy the
|
|
* whole of the locking view. And it must also allow scrolling.
|
|
*
|
|
* If columns are shared between the two sides, the *locked* grid shrinkwraps the
|
|
* width of the visible locked columns while the normal grid flexes in what space remains.
|
|
*
|
|
* @return {Boolean} `true` if there are visible locked columns which need refreshing.
|
|
*
|
|
*/
|
|
syncLockedWidth: function() {
|
|
var me = this,
|
|
locked = me.lockedGrid,
|
|
lockedView = locked.view,
|
|
lockedViewEl = lockedView.el.dom,
|
|
normal = me.normalGrid,
|
|
lockedColCount = locked.headerCt.getVisibleGridColumns().length,
|
|
normalColCount = normal.headerCt.getVisibleGridColumns().length;
|
|
|
|
Ext.suspendLayouts();
|
|
|
|
// If there are still visible normal columns, then the normal grid will flex
|
|
// while we effectively shrinkwrap the width of the locked columns
|
|
if (normalColCount) {
|
|
normal.show();
|
|
if (lockedColCount) {
|
|
|
|
// The locked grid shrinkwraps the total column width while the normal grid flexes in what remains
|
|
// UNLESS it has been set to forceFit
|
|
if (!locked.headerCt.forceFit) {
|
|
delete locked.flex;
|
|
// Don't pass the purge flag here
|
|
locked.setWidth(locked.headerCt.getFullWidth());
|
|
}
|
|
locked.addCls(me.lockedGridCls);
|
|
locked.show();
|
|
} else {
|
|
// No visible locked columns: hide the locked grid
|
|
// We also need to trigger a refresh to clear out any
|
|
// old dom nodes
|
|
locked.getView().refresh();
|
|
locked.hide();
|
|
}
|
|
|
|
// Fix it so that the locked view scrolls the way it was initially configured to do.
|
|
lockedView.el.setStyle(lockedView.getOverflowStyle());
|
|
|
|
// Ignore mousewheel events if the view is configured to scroll vertically
|
|
me.ignoreMousewheel = lockedView.scrollFlags.y;
|
|
}
|
|
|
|
// There are no normal grid columns. The "locked" grid has to be *the*
|
|
// grid, and cannot have a shrinkwrapped width, but must flex the entire width.
|
|
else {
|
|
normal.hide();
|
|
|
|
// When the normal grid is hidden, we no longer need the bottom border "scrollbar replacement"
|
|
lockedViewEl.style.borderBottomWidth = '0';
|
|
|
|
// The locked now becomes *the* grid and has to flex to occupy the full view width
|
|
locked.flex = 1;
|
|
delete locked.width;
|
|
locked.removeCls(me.lockedGridCls);
|
|
locked.show();
|
|
|
|
// Fix it so that the "locked" has the same scroll settings as the normal view.
|
|
// Because it is the only grid view visible now.
|
|
lockedView.el.setStyle(normal.view.getOverflowStyle());
|
|
me.ignoreMousewheel = true;
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
return [lockedColCount, normalColCount];
|
|
},
|
|
|
|
onLockedHeaderAdd: function() {
|
|
// Columns can be added to the locked grid whwen reconfiguring or during a lock
|
|
// operation when syncLockedWidth will be called anyway, so allow adding to be ignored
|
|
if (!this.ignoreAddLockedColumn) {
|
|
this.syncLockedWidth();
|
|
}
|
|
},
|
|
|
|
onLockedHeaderResize: function() {
|
|
this.syncLockedWidth();
|
|
},
|
|
|
|
onLockedHeaderHide: function() {
|
|
this.syncLockedWidth();
|
|
},
|
|
|
|
onLockedHeaderShow: function() {
|
|
this.syncLockedWidth();
|
|
},
|
|
|
|
onLockedHeaderSortChange: function(headerCt, header, sortState) {
|
|
if (sortState) {
|
|
// no real header, and silence the event so we dont get into an
|
|
// infinite loop
|
|
this.normalGrid.headerCt.clearOtherSortStates(null, true);
|
|
}
|
|
},
|
|
|
|
onNormalHeaderSortChange: function(headerCt, header, sortState) {
|
|
if (sortState) {
|
|
// no real header, and silence the event so we dont get into an
|
|
// infinite loop
|
|
this.lockedGrid.headerCt.clearOtherSortStates(null, true);
|
|
}
|
|
},
|
|
|
|
// going from unlocked section to locked
|
|
/**
|
|
* Locks the activeHeader as determined by which menu is open OR a header
|
|
* as specified.
|
|
* @param {Ext.grid.column.Column} [header] Header to unlock from the locked section.
|
|
* Defaults to the header which has the menu open currently.
|
|
* @param {Number} [toIdx] The index to move the unlocked header to.
|
|
* Defaults to appending as the last item.
|
|
* @private
|
|
*/
|
|
lock: function(activeHd, toIdx) {
|
|
var me = this,
|
|
normalGrid = me.normalGrid,
|
|
lockedGrid = me.lockedGrid,
|
|
normalHCt = normalGrid.headerCt,
|
|
lockedHCt = lockedGrid.headerCt,
|
|
refreshFlags,
|
|
ownerCt;
|
|
|
|
activeHd = activeHd || normalHCt.getMenu().activeHeader;
|
|
ownerCt = activeHd.ownerCt;
|
|
|
|
// isLockable will test for making the locked side too wide
|
|
if (!activeHd.isLockable()) {
|
|
return;
|
|
}
|
|
|
|
// if column was previously flexed, get/set current width
|
|
// and remove the flex
|
|
if (activeHd.flex) {
|
|
activeHd.width = activeHd.getWidth();
|
|
activeHd.flex = null;
|
|
}
|
|
|
|
Ext.suspendLayouts();
|
|
ownerCt.remove(activeHd, false);
|
|
activeHd.locked = true;
|
|
|
|
// Flag to the locked column add listener to do nothing
|
|
me.ignoreAddLockedColumn = true;
|
|
if (Ext.isDefined(toIdx)) {
|
|
lockedHCt.insert(toIdx, activeHd);
|
|
} else {
|
|
lockedHCt.add(activeHd);
|
|
}
|
|
me.ignoreAddLockedColumn = false;
|
|
|
|
refreshFlags = me.syncLockedWidth();
|
|
if (refreshFlags[0]) {
|
|
lockedGrid.getView().refresh();
|
|
}
|
|
if (refreshFlags[1]) {
|
|
normalGrid.getView().refresh();
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
|
|
me.fireEvent('lockcolumn', me, activeHd);
|
|
},
|
|
|
|
// going from locked section to unlocked
|
|
/**
|
|
* Unlocks the activeHeader as determined by which menu is open OR a header
|
|
* as specified.
|
|
* @param {Ext.grid.column.Column} [header] Header to unlock from the locked section.
|
|
* Defaults to the header which has the menu open currently.
|
|
* @param {Number} [toIdx=0] The index to move the unlocked header to.
|
|
* @private
|
|
*/
|
|
unlock: function(activeHd, toIdx) {
|
|
var me = this,
|
|
normalGrid = me.normalGrid,
|
|
lockedGrid = me.lockedGrid,
|
|
normalHCt = normalGrid.headerCt,
|
|
lockedHCt = lockedGrid.headerCt,
|
|
refreshFlags;
|
|
|
|
// Unlocking; user expectation is that the unlocked column is inserted at the beginning.
|
|
if (!Ext.isDefined(toIdx)) {
|
|
toIdx = 0;
|
|
}
|
|
activeHd = activeHd || lockedHCt.getMenu().activeHeader;
|
|
|
|
Ext.suspendLayouts();
|
|
activeHd.ownerCt.remove(activeHd, false);
|
|
activeHd.locked = false;
|
|
normalHCt.insert(toIdx, activeHd);
|
|
|
|
// syncLockedWidth returns visible column counts for both grids.
|
|
// only refresh what needs refreshing
|
|
refreshFlags = me.syncLockedWidth();
|
|
|
|
if (refreshFlags[0]) {
|
|
lockedGrid.getView().refresh();
|
|
}
|
|
if (refreshFlags[1]) {
|
|
normalGrid.getView().refresh();
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
|
|
me.fireEvent('unlockcolumn', me, activeHd);
|
|
},
|
|
|
|
// we want to totally override the reconfigure behaviour here, since we're creating 2 sub-grids
|
|
reconfigureLockable: function(store, columns) {
|
|
var me = this,
|
|
oldStore = me.store,
|
|
lockedGrid = me.lockedGrid,
|
|
normalGrid = me.normalGrid;
|
|
|
|
Ext.suspendLayouts();
|
|
if (columns) {
|
|
lockedGrid.headerCt.removeAll();
|
|
normalGrid.headerCt.removeAll();
|
|
|
|
columns = me.processColumns(columns);
|
|
|
|
// Flag to the locked column add listener to do nothing
|
|
me.ignoreAddLockedColumn = true;
|
|
lockedGrid.headerCt.add(columns.locked.items);
|
|
me.ignoreAddLockedColumn = false;
|
|
normalGrid.headerCt.add(columns.normal.items);
|
|
|
|
// Ensure locked grid is set up correctly with correct width and bottom border,
|
|
// and that both grids' visibility and scrollability status is correct
|
|
me.syncLockedWidth();
|
|
}
|
|
|
|
if (store && store !== oldStore) {
|
|
store = Ext.data.StoreManager.lookup(store);
|
|
me.store = store;
|
|
lockedGrid.bindStore(store);
|
|
normalGrid.bindStore(store);
|
|
} else {
|
|
lockedGrid.getView().refresh();
|
|
normalGrid.getView().refresh();
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
},
|
|
|
|
constructLockableFeatures: function() {
|
|
var features = this.features,
|
|
feature,
|
|
featureClone,
|
|
lockedFeatures,
|
|
normalFeatures,
|
|
i = 0, len;
|
|
|
|
if (features) {
|
|
lockedFeatures = [];
|
|
normalFeatures = [];
|
|
len = features.length;
|
|
for (; i < len; i++) {
|
|
feature = features[i];
|
|
if (!feature.isFeature) {
|
|
feature = Ext.create('feature.' + feature.ftype, feature);
|
|
}
|
|
switch (feature.lockableScope) {
|
|
case 'locked':
|
|
lockedFeatures.push(feature);
|
|
break;
|
|
case 'normal':
|
|
normalFeatures.push(feature);
|
|
break;
|
|
default:
|
|
feature.lockableScope = 'both';
|
|
lockedFeatures.push(feature);
|
|
normalFeatures.push(featureClone = feature.clone());
|
|
|
|
// When cloned to either side, each gets a "lockingPartner" reference to the other
|
|
featureClone.lockingPartner = feature;
|
|
feature.lockingPartner = featureClone;
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
normalFeatures: normalFeatures,
|
|
lockedFeatures: lockedFeatures
|
|
};
|
|
},
|
|
|
|
constructLockablePlugins: function() {
|
|
var plugins = this.plugins,
|
|
plugin,
|
|
normalPlugin,
|
|
lockedPlugin,
|
|
topPlugins,
|
|
lockedPlugins,
|
|
normalPlugins,
|
|
i = 0, len;
|
|
|
|
if (plugins) {
|
|
topPlugins = [];
|
|
lockedPlugins = [];
|
|
normalPlugins = [];
|
|
len = plugins.length;
|
|
for (; i < len; i++) {
|
|
// Plugin will already have been instantiated by the AbstractComponent constructor
|
|
plugin = plugins[i];
|
|
|
|
switch (plugin.lockableScope) {
|
|
case 'both':
|
|
lockedPlugins.push(lockedPlugin = plugin.clonePlugin());
|
|
normalPlugins.push(normalPlugin = plugin.clonePlugin());
|
|
|
|
// When cloned to both sides, each gets a "lockingPartner" reference to the other
|
|
lockedPlugin.lockingPartner = normalPlugin;
|
|
normalPlugin.lockingPartner = lockedPlugin;
|
|
|
|
// If the plugin has to be propagated down to both, a new plugin config object must be given to that side
|
|
// and this plugin must be destroyed.
|
|
Ext.destroy(plugin);
|
|
break;
|
|
case 'locked':
|
|
lockedPlugins.push(plugin);
|
|
break;
|
|
case 'normal':
|
|
normalPlugins.push(plugin);
|
|
break;
|
|
default:
|
|
topPlugins.push(plugin);
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
topPlugins: topPlugins,
|
|
normalPlugins: normalPlugins,
|
|
lockedPlugins: lockedPlugins
|
|
};
|
|
},
|
|
|
|
destroyLockable: function(){
|
|
// The locking view isn't a "real" view, so we need to destroy it manually
|
|
Ext.destroy(this.view);
|
|
}
|
|
}, function() {
|
|
this.borrow(Ext.AbstractComponent, ['constructPlugin']);
|
|
});
|
|
|
|
/**
|
|
* Used as a view by {@link Ext.tree.Panel TreePanel}.
|
|
*/
|
|
Ext.define('Ext.tree.View', {
|
|
extend: Ext.view.Table ,
|
|
alias: 'widget.treeview',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isTreeView
|
|
* `true` in this class to identify an object as an instantiated TreeView, or subclass thereof.
|
|
*/
|
|
isTreeView: true,
|
|
|
|
loadingCls: Ext.baseCSSPrefix + 'grid-tree-loading',
|
|
expandedCls: Ext.baseCSSPrefix + 'grid-tree-node-expanded',
|
|
leafCls: Ext.baseCSSPrefix + 'grid-tree-node-leaf',
|
|
|
|
expanderSelector: '.' + Ext.baseCSSPrefix + 'tree-expander',
|
|
checkboxSelector: '.' + Ext.baseCSSPrefix + 'tree-checkbox',
|
|
expanderIconOverCls: Ext.baseCSSPrefix + 'tree-expander-over',
|
|
|
|
// Class to add to the node wrap element used to hold nodes when a parent is being
|
|
// collapsed or expanded. During the animation, UI interaction is forbidden by testing
|
|
// for an ancestor node with this class.
|
|
nodeAnimWrapCls: Ext.baseCSSPrefix + 'tree-animator-wrap',
|
|
|
|
blockRefresh: true,
|
|
|
|
/**
|
|
* @cfg {Boolean}
|
|
* @inheritdoc
|
|
*/
|
|
loadMask: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} rootVisible
|
|
* False to hide the root node.
|
|
*/
|
|
rootVisible: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} deferInitialRefresh
|
|
* Must be false for Tree Views because the root node must be rendered in order to be updated with its child nodes.
|
|
*/
|
|
deferInitialRefresh: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} animate
|
|
* True to enable animated expand/collapse (defaults to the value of {@link Ext#enableFx Ext.enableFx})
|
|
*/
|
|
|
|
expandDuration: 250,
|
|
collapseDuration: 250,
|
|
|
|
toggleOnDblClick: true,
|
|
|
|
stripeRows: false,
|
|
|
|
// fields that will trigger a change in the ui that aren't likely to be bound to a column
|
|
uiFields: ['expanded', 'loaded', 'checked', 'expandable', 'leaf', 'icon', 'iconCls', 'loading', 'qtip', 'qtitle'],
|
|
|
|
// treeRowTpl which is inserted into thwe rowTpl chain before the base rowTpl. Sets tree-specific classes and attributes
|
|
treeRowTpl: [
|
|
'{%',
|
|
'this.processRowValues(values);',
|
|
'this.nextTpl.applyOut(values, out, parent);',
|
|
'delete values.rowAttr["data-qtip"];',
|
|
'delete values.rowAttr["data-qtitle"];',
|
|
'%}', {
|
|
priority: 10,
|
|
processRowValues: function(rowValues) {
|
|
var record = rowValues.record,
|
|
view = rowValues.view,
|
|
qtip = record.get('qtip'),
|
|
qtitle = record.get('qttle');
|
|
|
|
rowValues.rowAttr = {};
|
|
if (qtip) {
|
|
rowValues.rowAttr['data-qtip'] = qtip;
|
|
}
|
|
if (qtitle) {
|
|
rowValues.rowAttr['data-qtitle'] = qtitle;
|
|
}
|
|
if (record.isExpanded()) {
|
|
rowValues.rowClasses.push(view.expandedCls);
|
|
}
|
|
if (record.isLeaf()) {
|
|
rowValues.rowClasses.push(view.leafCls);
|
|
}
|
|
if (record.isLoading()) {
|
|
rowValues.rowClasses.push(view.loadingCls);
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
treeStore = me.panel.getStore(),
|
|
store = me.store;
|
|
|
|
if (me.initialConfig.animate === undefined) {
|
|
me.animate = Ext.enableFx;
|
|
}
|
|
|
|
if (!store || store === treeStore) {
|
|
me.store = store = new Ext.data.NodeStore({
|
|
treeStore: treeStore,
|
|
recursive: true,
|
|
rootVisible: me.rootVisible
|
|
});
|
|
}
|
|
|
|
if (me.node) {
|
|
me.setRootNode(me.node);
|
|
}
|
|
me.animQueue = {};
|
|
me.animWraps = {};
|
|
me.addEvents(
|
|
/**
|
|
* @event afteritemexpand
|
|
* Fires after an item has been visually expanded and is visible in the tree.
|
|
* @param {Ext.data.NodeInterface} node The node that was expanded
|
|
* @param {Number} index The index of the node
|
|
* @param {HTMLElement} item The HTML element for the node that was expanded
|
|
*/
|
|
'afteritemexpand',
|
|
/**
|
|
* @event afteritemcollapse
|
|
* Fires after an item has been visually collapsed and is no longer visible in the tree.
|
|
* @param {Ext.data.NodeInterface} node The node that was collapsed
|
|
* @param {Number} index The index of the node
|
|
* @param {HTMLElement} item The HTML element for the node that was collapsed
|
|
*/
|
|
'afteritemcollapse',
|
|
/**
|
|
* @event nodedragover
|
|
* Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed.
|
|
* @param {Ext.data.NodeInterface} targetNode The target node
|
|
* @param {String} position The drop position, "before", "after" or "append",
|
|
* @param {Object} dragData Data relating to the drag operation
|
|
* @param {Ext.EventObject} e The event object for the drag
|
|
*/
|
|
'nodedragover'
|
|
);
|
|
me.callParent(arguments);
|
|
me.addRowTpl(Ext.XTemplate.getTpl(me, 'treeRowTpl'));
|
|
},
|
|
|
|
onBeforeFill: function(treeStore, fillRoot) {
|
|
this.store.suspendEvents();
|
|
},
|
|
|
|
onFillComplete: function(treeStore, fillRoot, newNodes) {
|
|
var me = this,
|
|
store = me.store,
|
|
start = store.indexOf(newNodes[0]);
|
|
|
|
store.resumeEvents();
|
|
|
|
// Always update the current node, since the load may be triggered
|
|
// by .load() directly instead of .expand() on the node
|
|
fillRoot.triggerUIUpdate();
|
|
|
|
// In the cases of expand, the records might not be in the store yet,
|
|
// so jump out early and expand will handle it later
|
|
if (!newNodes.length || start === -1) {
|
|
return;
|
|
}
|
|
|
|
// Insert new nodes into the view
|
|
me.onAdd(me.store, newNodes, start);
|
|
|
|
me.refreshPartner();
|
|
},
|
|
|
|
onBeforeSort: function() {
|
|
this.store.suspendEvents();
|
|
},
|
|
|
|
onSort: function(o) {
|
|
// The store will fire sort events for the nodes that bubble from the tree.
|
|
// We only want the final one when sorting is completed, fired by the store
|
|
if (o.isStore) {
|
|
this.store.resumeEvents();
|
|
this.refresh();
|
|
this.refreshPartner();
|
|
}
|
|
},
|
|
|
|
refreshPartner: function() {
|
|
var partner = this.lockingPartner;
|
|
if (partner) {
|
|
partner.refresh();
|
|
}
|
|
},
|
|
|
|
getMaskStore: function() {
|
|
return this.panel.getStore();
|
|
},
|
|
|
|
afterRender: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
|
|
me.el.on({
|
|
scope: me,
|
|
delegate: me.expanderSelector,
|
|
mouseover: me.onExpanderMouseOver,
|
|
mouseout: me.onExpanderMouseOut,
|
|
click: {
|
|
delegate: me.checkboxSelector,
|
|
fn: me.onCheckboxChange,
|
|
scope: me
|
|
}
|
|
});
|
|
},
|
|
|
|
afterComponentLayout: function() {
|
|
this.callParent(arguments);
|
|
var stretcher = this.stretcher;
|
|
if (stretcher) {
|
|
stretcher.setWidth((this.getWidth() - Ext.getScrollbarSize().width));
|
|
}
|
|
},
|
|
|
|
processUIEvent: function(e) {
|
|
// If the clicked node is part of an animation, ignore the click.
|
|
// This is because during a collapse animation, the associated Records
|
|
// will already have been removed from the Store, and the event is not processable.
|
|
if (e.getTarget('.' + this.nodeAnimWrapCls, this.el)) {
|
|
return false;
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
onClear: function() {
|
|
this.store.removeAll();
|
|
},
|
|
|
|
setRootNode: function(node) {
|
|
var me = this;
|
|
me.store.setNode(node);
|
|
me.node = node;
|
|
},
|
|
|
|
onCheckboxChange: function(e, t) {
|
|
var me = this,
|
|
item = e.getTarget(me.getItemSelector(), me.getTargetEl());
|
|
|
|
if (item) {
|
|
me.onCheckChange(me.getRecord(item));
|
|
}
|
|
},
|
|
|
|
onCheckChange: function(record) {
|
|
var checked = record.get('checked');
|
|
if (Ext.isBoolean(checked)) {
|
|
checked = !checked;
|
|
record.set('checked', checked);
|
|
this.fireEvent('checkchange', record, checked);
|
|
}
|
|
},
|
|
|
|
getChecked: function() {
|
|
var checked = [];
|
|
this.node.cascadeBy(function(rec){
|
|
if (rec.get('checked')) {
|
|
checked.push(rec);
|
|
}
|
|
});
|
|
return checked;
|
|
},
|
|
|
|
isItemChecked: function(rec) {
|
|
return rec.get('checked');
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
createAnimWrap: function(record, index) {
|
|
var me = this,
|
|
node = me.getNode(record),
|
|
tmpEl, nodeEl,
|
|
columnSizer = [];
|
|
|
|
me.renderColumnSizer(columnSizer);
|
|
nodeEl = Ext.get(node);
|
|
tmpEl = nodeEl.insertSibling({
|
|
tag: 'tr',
|
|
html: [
|
|
'<td colspan="' + me.panel.headerCt.getColumnCount() + '">',
|
|
'<div class="' + me.nodeAnimWrapCls + '">',
|
|
// Table has to have correct classes to get sized by the dynamic CSS rules
|
|
'<table class="' + Ext.baseCSSPrefix + me.id + '-table ' + Ext.baseCSSPrefix + 'grid-table" style="border:0" cellspacing="0" cellpadding="0">',
|
|
columnSizer.join(''),
|
|
'<tbody></tbody></table>',
|
|
'</div>',
|
|
'</td>'
|
|
].join('')
|
|
}, 'after');
|
|
|
|
return {
|
|
record: record,
|
|
node: node,
|
|
el: tmpEl,
|
|
expanding: false,
|
|
collapsing: false,
|
|
animating: false,
|
|
animateEl: tmpEl.down('div'),
|
|
targetEl: tmpEl.down('tbody')
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the animation wrapper element for the specified parent node, used to wrap the child nodes as
|
|
* they slide up or down during expand/collapse.
|
|
*
|
|
* @param parent The parent node to be expanded or collapsed
|
|
*
|
|
* @param [bubble=true] If the passed parent node does not already have a wrap element created, by default
|
|
* this function will bubble up to each parent node looking for a valid wrap element to reuse, returning
|
|
* the first one it finds. This is the appropriate behavior, e.g., for the collapse direction, so that the
|
|
* entire expanded set of branch nodes can collapse as a single unit.
|
|
*
|
|
* However for expanding each parent node should instead always create its own animation wrap if one
|
|
* doesn't exist, so that its children can expand independently of any other nodes -- this is crucial
|
|
* when executing the "expand all" behavior. If multiple nodes attempt to reuse the same ancestor wrap
|
|
* element concurrently during expansion it will lead to problems as the first animation to complete will
|
|
* delete the wrap el out from under other running animations. For that reason, when expanding you should
|
|
* always pass `bubble: false` to be on the safe side.
|
|
*
|
|
* If the passed parent has no wrap (or there is no valid ancestor wrap after bubbling), this function
|
|
* will return null and the calling code should then call {@link #createAnimWrap} if needed.
|
|
*
|
|
* @return {Ext.Element} The wrapping element as created in {@link #createAnimWrap}, or null
|
|
*/
|
|
getAnimWrap: function(parent, bubble) {
|
|
if (!this.animate) {
|
|
return null;
|
|
}
|
|
|
|
var wraps = this.animWraps,
|
|
wrap = wraps[parent.internalId];
|
|
|
|
if (bubble !== false) {
|
|
while (!wrap && parent) {
|
|
parent = parent.parentNode;
|
|
if (parent) {
|
|
wrap = wraps[parent.internalId];
|
|
}
|
|
}
|
|
}
|
|
return wrap;
|
|
},
|
|
|
|
doAdd: function(records, index) {
|
|
// If we are adding records which have a parent that is currently expanding
|
|
// lets add them to the animation wrap
|
|
var me = this,
|
|
nodes = me.bufferRender(records, index, true),
|
|
record = records[0],
|
|
parent = record.parentNode,
|
|
all = me.all,
|
|
relativeIndex,
|
|
animWrap = me.getAnimWrap(parent),
|
|
targetEl, children, len;
|
|
|
|
if (!animWrap || !animWrap.expanding) {
|
|
return me.callParent(arguments);
|
|
}
|
|
|
|
// We need the parent that has the animWrap, not the node's parent
|
|
parent = animWrap.record;
|
|
|
|
// If there is an anim wrap we do our special magic logic
|
|
targetEl = animWrap.targetEl;
|
|
children = targetEl.dom.childNodes;
|
|
len = children.length;
|
|
|
|
// The relative index is the index in the full flat collection minus the index of the wraps parent
|
|
relativeIndex = index - me.indexInStore(parent) - 1;
|
|
|
|
// If we are adding records to the wrap that have a higher relative index then there are currently children
|
|
// it means we have to append the nodes to the wrap
|
|
if (!len || relativeIndex >= len) {
|
|
targetEl.appendChild(nodes);
|
|
}
|
|
// If there are already more children then the relative index it means we are adding child nodes of
|
|
// some expanded node in the anim wrap. In this case we have to insert the nodes in the right location
|
|
else {
|
|
Ext.fly(children[relativeIndex]).insertSibling(nodes, 'before', true);
|
|
}
|
|
|
|
// We also have to update the node cache of the DataView
|
|
all.insert(index, nodes);
|
|
|
|
// If we were in an animation we need to now change the animation
|
|
// because the targetEl just got higher.
|
|
if (animWrap.isAnimating) {
|
|
me.onExpand(parent);
|
|
}
|
|
},
|
|
|
|
onRemove : function(ds, records, indexes) {
|
|
var me = this,
|
|
empty, i;
|
|
|
|
if (me.viewReady) {
|
|
empty = me.store.getCount() === 0;
|
|
|
|
// Nothing left, just refresh the view.
|
|
if (empty) {
|
|
me.refresh();
|
|
}
|
|
else {
|
|
// Remove in reverse order so that indices remain correct
|
|
for (i = indexes.length - 1; i >= 0; --i) {
|
|
me.doRemove(records[i], indexes[i]);
|
|
}
|
|
}
|
|
|
|
// Only loop through firing the event if there's anyone listening
|
|
if (me.hasListeners.itemremove) {
|
|
for (i = indexes.length - 1; i >= 0; --i) {
|
|
me.fireEvent('itemremove', records[i], indexes[i]);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
doRemove: function(record, index) {
|
|
// If we are adding records which have a parent that is currently expanding
|
|
// lets add them to the animation wrap
|
|
var me = this,
|
|
all = me.all,
|
|
animWrap = me.getAnimWrap(record),
|
|
item = all.item(index),
|
|
node = item ? item.dom : null;
|
|
|
|
if (!node || !animWrap || !animWrap.collapsing) {
|
|
return me.callParent(arguments);
|
|
}
|
|
|
|
// Insert the item at the beginning of the animate el - child nodes are removed
|
|
// in reverse order so that the index can be used.
|
|
animWrap.targetEl.dom.insertBefore(node, animWrap.targetEl.dom.firstChild);
|
|
all.removeElement(index);
|
|
},
|
|
|
|
onBeforeExpand: function(parent, records, index) {
|
|
var me = this,
|
|
animWrap;
|
|
|
|
if (me.rendered && me.all.getCount() && me.animate) {
|
|
if (me.getNode(parent)) {
|
|
animWrap = me.getAnimWrap(parent, false);
|
|
if (!animWrap) {
|
|
animWrap = me.animWraps[parent.internalId] = me.createAnimWrap(parent);
|
|
animWrap.animateEl.setHeight(0);
|
|
}
|
|
else if (animWrap.collapsing) {
|
|
// If we expand this node while it is still expanding then we
|
|
// have to remove the nodes from the animWrap.
|
|
animWrap.targetEl.select(me.itemSelector).remove();
|
|
}
|
|
animWrap.expanding = true;
|
|
animWrap.collapsing = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
onExpand: function(parent) {
|
|
var me = this,
|
|
queue = me.animQueue,
|
|
id = parent.getId(),
|
|
node = me.getNode(parent),
|
|
index = node ? me.indexOf(node) : -1,
|
|
animWrap,
|
|
animateEl,
|
|
targetEl,
|
|
fromHeight = Ext.isIEQuirks ? 1 : 0 // Quirks mode on IE seems to have issues with 0;
|
|
|
|
if (me.singleExpand) {
|
|
me.ensureSingleExpand(parent);
|
|
}
|
|
|
|
// The item is not visible yet
|
|
if (index === -1) {
|
|
return;
|
|
}
|
|
|
|
animWrap = me.getAnimWrap(parent, false);
|
|
|
|
if (!animWrap) {
|
|
parent.isExpandingOrCollapsing = false;
|
|
me.fireEvent('afteritemexpand', parent, index, node);
|
|
me.refreshSize();
|
|
return;
|
|
}
|
|
|
|
animateEl = animWrap.animateEl;
|
|
targetEl = animWrap.targetEl;
|
|
|
|
animateEl.stopAnimation();
|
|
queue[id] = true;
|
|
|
|
// Must set element height because animation does not set initial condition until first tick has elapsed
|
|
animateEl.dom.style.height = fromHeight + 'px';
|
|
animateEl.animate({
|
|
from: {
|
|
height: fromHeight
|
|
},
|
|
to: {
|
|
height: targetEl.getHeight()
|
|
},
|
|
duration: me.expandDuration,
|
|
listeners: {
|
|
afteranimate: function() {
|
|
// Move all the nodes out of the anim wrap to their proper location
|
|
// Must do this in afteranimate because lastframe does not fire if the
|
|
// animation is stopped.
|
|
var items = targetEl.query(me.itemSelector);
|
|
if (items.length) {
|
|
animWrap.el.insertSibling(items, 'before', true);
|
|
}
|
|
animWrap.el.remove();
|
|
me.refreshSize();
|
|
delete me.animWraps[animWrap.record.internalId];
|
|
delete queue[id];
|
|
}
|
|
},
|
|
callback: function() {
|
|
parent.isExpandingOrCollapsing = false;
|
|
me.fireEvent('afteritemexpand', parent, index, node);
|
|
}
|
|
});
|
|
|
|
animWrap.isAnimating = true;
|
|
},
|
|
|
|
// Triggered by the NodeStore's onNodeCollapse event.
|
|
onBeforeCollapse: function(parent, records, index, callback, scope) {
|
|
var me = this,
|
|
animWrap;
|
|
|
|
if (me.rendered && me.all.getCount()) {
|
|
if (me.animate) {
|
|
// Only process if the collapsing node is in the UI.
|
|
// A node may be collapsed as part of a recursive ancestor collapse, and if it
|
|
// has already been removed from the UI by virtue of an ancestor being collapsed, we should not do anything.
|
|
if (Ext.Array.contains(parent.stores, me.store)) {
|
|
animWrap = me.getAnimWrap(parent);
|
|
if (!animWrap) {
|
|
animWrap = me.animWraps[parent.internalId] = me.createAnimWrap(parent, index);
|
|
}
|
|
else if (animWrap.expanding) {
|
|
// If we collapse this node while it is still expanding then we
|
|
// have to remove the nodes from the animWrap.
|
|
animWrap.targetEl.select(this.itemSelector).remove();
|
|
}
|
|
animWrap.expanding = false;
|
|
animWrap.collapsing = true;
|
|
animWrap.callback = callback;
|
|
animWrap.scope = scope;
|
|
}
|
|
} else {
|
|
// Cache any passed callback for use in the onCollapse post collapse handler non-animated codepath
|
|
me.onCollapseCallback = callback;
|
|
me.onCollapseScope = scope;
|
|
}
|
|
}
|
|
},
|
|
|
|
onCollapse: function(parent) {
|
|
var me = this,
|
|
queue = me.animQueue,
|
|
id = parent.getId(),
|
|
node = me.getNode(parent),
|
|
index = node ? me.indexOf(node) : -1,
|
|
animWrap = me.getAnimWrap(parent),
|
|
animateEl;
|
|
|
|
// If the collapsed node is already removed from the UI
|
|
// by virtue of being a descendant of a collapsed node, then
|
|
// we have nothing to do here.
|
|
if (!me.all.getCount() || !Ext.Array.contains(parent.stores, me.store)) {
|
|
return;
|
|
}
|
|
|
|
// Not animating, all items will have been added, so updateLayout and resume layouts
|
|
if (!animWrap) {
|
|
parent.isExpandingOrCollapsing = false;
|
|
me.fireEvent('afteritemcollapse', parent, index, node);
|
|
me.refreshSize();
|
|
|
|
// Call any collapse callback cached in the onBeforeCollapse handler
|
|
Ext.callback(me.onCollapseCallback, me.onCollapseScope);
|
|
me.onCollapseCallback = me.onCollapseScope = null;
|
|
return;
|
|
}
|
|
|
|
animateEl = animWrap.animateEl;
|
|
|
|
queue[id] = true;
|
|
|
|
animateEl.stopAnimation();
|
|
animateEl.animate({
|
|
to: {
|
|
height: Ext.isIEQuirks ? 1 : 0 // Quirks mode on IE seems to have issues with 0
|
|
},
|
|
duration: me.collapseDuration,
|
|
listeners: {
|
|
afteranimate: function() {
|
|
// In case lastframe did not fire because the animation was stopped.
|
|
animWrap.el.remove();
|
|
me.refreshSize();
|
|
delete me.animWraps[animWrap.record.internalId];
|
|
delete queue[id];
|
|
}
|
|
},
|
|
callback: function() {
|
|
parent.isExpandingOrCollapsing = false;
|
|
me.fireEvent('afteritemcollapse', parent, index, node);
|
|
|
|
// Call any collapse callback cached in the onBeforeCollapse handler
|
|
Ext.callback(animWrap.callback, animWrap.scope);
|
|
animWrap.callback = animWrap.scope = null;
|
|
}
|
|
});
|
|
animWrap.isAnimating = true;
|
|
},
|
|
|
|
/**
|
|
* Checks if a node is currently undergoing animation
|
|
* @private
|
|
* @param {Ext.data.Model} node The node
|
|
* @return {Boolean} True if the node is animating
|
|
*/
|
|
isAnimating: function(node) {
|
|
return !!this.animQueue[node.getId()];
|
|
},
|
|
|
|
/**
|
|
* Expands a record that is loaded in the view.
|
|
*
|
|
* If an animated collapse or expand of the record is in progress, this call will be ignored.
|
|
* @param {Ext.data.Model} record The record to expand
|
|
* @param {Boolean} [deep] True to expand nodes all the way down the tree hierarchy.
|
|
* @param {Function} [callback] The function to run after the expand is completed
|
|
* @param {Object} [scope] The scope of the callback function.
|
|
*/
|
|
expand: function(record, deep, callback, scope) {
|
|
var me = this,
|
|
doAnimate = !!me.animate,
|
|
result;
|
|
|
|
// Block toggling if we are already animating an expand or collapse operation.
|
|
if (!doAnimate || !record.isExpandingOrCollapsing) {
|
|
if (!record.isLeaf()) {
|
|
record.isExpandingOrCollapsing = doAnimate;
|
|
}
|
|
|
|
// Need to suspend layouts because the expand process makes multiple changes to the UI
|
|
// in addition to inserting new nodes. Folder and elbow images have to change, so we
|
|
// need to coalesce all resulting layouts.
|
|
Ext.suspendLayouts();
|
|
result = record.expand(deep, callback, scope);
|
|
Ext.resumeLayouts(true);
|
|
return result;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collapses a record that is loaded in the view.
|
|
*
|
|
* If an animated collapse or expand of the record is in progress, this call will be ignored.
|
|
* @param {Ext.data.Model} record The record to collapse
|
|
* @param {Boolean} [deep] True to collapse nodes all the way up the tree hierarchy.
|
|
* @param {Function} [callback] The function to run after the collapse is completed
|
|
* @param {Object} [scope] The scope of the callback function.
|
|
*/
|
|
collapse: function(record, deep, callback, scope) {
|
|
var me = this,
|
|
doAnimate = !!me.animate;
|
|
|
|
// Block toggling if we are already animating an expand or collapse operation.
|
|
if (!doAnimate || !record.isExpandingOrCollapsing) {
|
|
if (!record.isLeaf()) {
|
|
record.isExpandingOrCollapsing = doAnimate;
|
|
}
|
|
return record.collapse(deep, callback, scope);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggles a record between expanded and collapsed.
|
|
*
|
|
* If an animated collapse or expand of the record is in progress, this call will be ignored.
|
|
* @param {Ext.data.Model} record
|
|
* @param {Boolean} [deep] True to collapse nodes all the way up the tree hierarchy.
|
|
* @param {Function} [callback] The function to run after the expand/collapse is completed
|
|
* @param {Object} [scope] The scope of the callback function.
|
|
*/
|
|
toggle: function(record, deep, callback, scope) {
|
|
if (record.isExpanded()) {
|
|
this.collapse(record, deep, callback, scope);
|
|
} else {
|
|
this.expand(record, deep, callback, scope);
|
|
}
|
|
},
|
|
|
|
onItemDblClick: function(record, item, index) {
|
|
var me = this,
|
|
editingPlugin = me.editingPlugin;
|
|
|
|
me.callParent(arguments);
|
|
if (me.toggleOnDblClick && record.isExpandable() && !(editingPlugin && editingPlugin.clicksToEdit === 2)) {
|
|
me.toggle(record);
|
|
}
|
|
},
|
|
|
|
onBeforeItemMouseDown: function(record, item, index, e) {
|
|
if (e.getTarget(this.expanderSelector, item)) {
|
|
return false;
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
onItemClick: function(record, item, index, e) {
|
|
if (e.getTarget(this.expanderSelector, item) && record.isExpandable()) {
|
|
this.toggle(record, e.ctrlKey);
|
|
return false;
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
onExpanderMouseOver: function(e, t) {
|
|
e.getTarget(this.cellSelector, 10, true).addCls(this.expanderIconOverCls);
|
|
},
|
|
|
|
onExpanderMouseOut: function(e, t) {
|
|
e.getTarget(this.cellSelector, 10, true).removeCls(this.expanderIconOverCls);
|
|
},
|
|
|
|
getStoreListeners: function(){
|
|
var me = this,
|
|
listeners = me.callParent(arguments);
|
|
|
|
return Ext.apply(listeners, {
|
|
beforeexpand: me.onBeforeExpand,
|
|
expand: me.onExpand,
|
|
beforecollapse: me.onBeforeCollapse,
|
|
collapse: me.onCollapse,
|
|
write: me.onStoreWrite,
|
|
datachanged: me.onStoreDataChanged
|
|
});
|
|
},
|
|
|
|
onBindStore: function(){
|
|
var me = this,
|
|
treeStore = me.getTreeStore();
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.mon(treeStore, {
|
|
scope: me,
|
|
beforefill: me.onBeforeFill,
|
|
fillcomplete: me.onFillComplete
|
|
});
|
|
|
|
if (!treeStore.remoteSort) {
|
|
// If we're local sorting, we don't want the view to be
|
|
// continually updated during the sort process
|
|
me.mon(treeStore, {
|
|
scope: me,
|
|
beforesort: me.onBeforeSort,
|
|
sort: me.onSort
|
|
});
|
|
}
|
|
},
|
|
|
|
onUnbindStore: function(){
|
|
var me = this,
|
|
treeStore = me.getTreeStore();
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.mun(treeStore, {
|
|
scope: me,
|
|
beforefill: me.onBeforeFill,
|
|
fillcomplete: me.onFillComplete
|
|
});
|
|
|
|
if (!treeStore.remoteSort) {
|
|
me.mun(treeStore, {
|
|
scope: me,
|
|
beforesort: me.onBeforeSort,
|
|
sort: me.onSort
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the base TreeStore from the bound TreePanel.
|
|
*/
|
|
getTreeStore: function() {
|
|
return this.panel.store;
|
|
},
|
|
|
|
ensureSingleExpand: function(node) {
|
|
var parent = node.parentNode;
|
|
if (parent) {
|
|
parent.eachChild(function(child) {
|
|
if (child !== node && child.isExpanded()) {
|
|
child.collapse();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
shouldUpdateCell: function(record, column, changedFieldNames){
|
|
if (changedFieldNames) {
|
|
var i = 0,
|
|
len = changedFieldNames.length;
|
|
|
|
for (; i < len; ++i) {
|
|
if (Ext.Array.contains(this.uiFields, changedFieldNames[i])) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Re-fires the NodeStore's "write" event as a TreeStore event
|
|
* @private
|
|
* @param {Ext.data.NodeStore} store
|
|
* @param {Ext.data.Operation} operation
|
|
*/
|
|
onStoreWrite: function(store, operation) {
|
|
var treeStore = this.panel.store;
|
|
treeStore.fireEvent('write', treeStore, operation);
|
|
},
|
|
|
|
/**
|
|
* Re-fires the NodeStore's "datachanged" event as a TreeStore event
|
|
* @private
|
|
* @param {Ext.data.NodeStore} store
|
|
* @param {Ext.data.Operation} operation
|
|
*/
|
|
onStoreDataChanged: function(store, operation) {
|
|
var treeStore = this.panel.store;
|
|
treeStore.fireEvent('datachanged', treeStore);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
* A set of overrides required by the presence of the BufferedRenderer plugin.
|
|
*
|
|
* These overrides of Ext.tree.View take into account the affect of a buffered renderer and
|
|
* divert execution from the default course where necessary.
|
|
*/
|
|
Ext.define('Ext.grid.plugin.BufferedRendererTreeView', {
|
|
override: 'Ext.tree.View',
|
|
|
|
onRemove: function(store, records, indices) {
|
|
var me = this;
|
|
// Using buffered rendering - removal (eg folder node collapse)
|
|
// Has to refresh the view
|
|
if (me.rendered && me.bufferedRenderer) {
|
|
me.refreshView();
|
|
}
|
|
// No BufferedRenderer preent
|
|
else {
|
|
me.callParent([store, records, indices]);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Implements buffered rendering of a grid, allowing users can scroll
|
|
* through thousands of records without the performance penalties of
|
|
* renderering all the records on screen at once.
|
|
*
|
|
* The number of rows rendered outside the visible area, and the
|
|
* buffering of pages of data from the remote server for immediate
|
|
* rendering upon scroll can be controlled by configuring the plugin.
|
|
*
|
|
* You can tell it to create a larger table to provide more scrolling
|
|
* before new rows need to be added to the leading edge of the table.
|
|
*
|
|
* var myStore = Ext.create('Ext.data.Store', {
|
|
* // ...
|
|
* pageSize: 100,
|
|
* // ...
|
|
* });
|
|
*
|
|
* var grid = Ext.create('Ext.grid.Panel', {
|
|
* // ...
|
|
* autoLoad: true,
|
|
* plugins: {
|
|
* ptype: 'bufferedrenderer',
|
|
* trailingBufferZone: 20, // Keep 20 rows rendered in the table behind scroll
|
|
* leadingBufferZone: 50 // Keep 50 rows rendered in the table ahead of scroll
|
|
* },
|
|
* // ...
|
|
* });
|
|
*
|
|
* ## Implementation notes
|
|
*
|
|
* This class monitors scrolling of the {@link Ext.view.Table
|
|
* TableView} within a {@link Ext.grid.Panel GridPanel} to render a small section of
|
|
* the dataset.
|
|
*
|
|
*/
|
|
Ext.define('Ext.grid.plugin.BufferedRenderer', {
|
|
extend: Ext.AbstractPlugin ,
|
|
|
|
|
|
|
|
|
|
alias: 'plugin.bufferedrenderer',
|
|
lockableScope: 'both',
|
|
|
|
/**
|
|
* @cfg {Number}
|
|
* @deprecated This config is now ignored.
|
|
*/
|
|
percentageFromEdge: 0.35,
|
|
|
|
/**
|
|
* @cfg {Boolean} [variableRowHeight=false]
|
|
* Configure as `true` if the row heights are not all the same height as the first row. Only configure this is needed - this will be if the
|
|
* rows contain unpredictably sized data, or you have changed the cell's text overflow stype to `'wrap'`.
|
|
*/
|
|
variableRowHeight: false,
|
|
|
|
/**
|
|
* @cfg {Number}
|
|
* The zone which causes new rows to be appended to the view. As soon as the edge
|
|
* of the rendered grid is this number of rows from the edge of the viewport, the view is moved.
|
|
*/
|
|
numFromEdge: 8,
|
|
|
|
/**
|
|
* @cfg {Number}
|
|
* The number of extra rows to render on the trailing side of scrolling
|
|
* **outside the {@link #numFromEdge}** buffer as scrolling proceeds.
|
|
*/
|
|
trailingBufferZone: 10,
|
|
|
|
/**
|
|
* @cfg {Number}
|
|
* The number of extra rows to render on the leading side of scrolling
|
|
* **outside the {@link #numFromEdge}** buffer as scrolling proceeds.
|
|
*/
|
|
leadingBufferZone: 20,
|
|
|
|
/**
|
|
* @cfg {Boolean} [synchronousRender=true]
|
|
* By default, on detection of a scroll event which brings the end of the rendered table within
|
|
* `{@link #numFromEdge}` rows of the grid viewport, if the required rows are available in the Store,
|
|
* the BufferedRenderer will render rows from the Store *immediately* before returning from the event handler.
|
|
* This setting helps avoid the impression of whitespace appearing during scrolling.
|
|
*
|
|
* Set this to `true` to defer the render until the scroll event handler exits. This allows for faster
|
|
* scrolling, but also allows whitespace to be more easily scrolled into view.
|
|
*
|
|
*/
|
|
synchronousRender: true,
|
|
|
|
/**
|
|
* @cfg {Number}
|
|
* This is the time in milliseconds to buffer load requests when scrolling the PagingScrollbar.
|
|
*/
|
|
scrollToLoadBuffer: 200,
|
|
|
|
// private. Initial value of zero.
|
|
viewSize: 0,
|
|
// private. Start at default value
|
|
rowHeight: 21,
|
|
/**
|
|
* @property {Number} position
|
|
* Current pixel scroll position of the associated {@link Ext.view.Table View}.
|
|
*/
|
|
position: 0,
|
|
lastScrollDirection: 1,
|
|
bodyTop: 0,
|
|
|
|
// Initialize this as a plugin
|
|
init: function(grid) {
|
|
var me = this,
|
|
view = grid.view,
|
|
viewListeners = {
|
|
scroll: {
|
|
fn: me.onViewScroll,
|
|
element: 'el',
|
|
scope: me
|
|
},
|
|
boxready: me.onViewResize,
|
|
resize: me.onViewResize,
|
|
refresh: me.onViewRefresh,
|
|
scope: me,
|
|
destroyable: true
|
|
};
|
|
|
|
// If we are using default row heights, then do not sync row heights for efficiency
|
|
if (!me.variableRowHeight && grid.ownerLockable) {
|
|
grid.ownerLockable.syncRowHeight = false;
|
|
}
|
|
|
|
// If we are going to be handling a NodeStore then it's driven by node addition and removal, *not* refreshing.
|
|
// The view overrides required above change the view's onAdd and onRemove behaviour to call onDataRefresh when necessary.
|
|
if (grid.isTree || grid.ownerLockable && grid.ownerLockable.isTree) {
|
|
view.blockRefresh = false;
|
|
view.loadMask = true;
|
|
}
|
|
if (view.positionBody) {
|
|
viewListeners.refresh = me.onViewRefresh;
|
|
}
|
|
me.grid = grid;
|
|
me.view = view;
|
|
view.bufferedRenderer = me;
|
|
view.preserveScrollOnRefresh = true;
|
|
|
|
me.bindStore(view.dataSource);
|
|
view.getViewRange = function() {
|
|
return me.getViewRange();
|
|
};
|
|
|
|
me.position = 0;
|
|
|
|
me.gridListeners = grid.on('reconfigure', me.onReconfigure, me);
|
|
me.viewListeners = view.on(viewListeners);
|
|
},
|
|
|
|
bindStore: function(store) {
|
|
var me = this;
|
|
if (me.store) {
|
|
me.unbindStore();
|
|
}
|
|
me.storeListeners = store.on({
|
|
scope: me,
|
|
clear: me.onStoreClear,
|
|
destroyable: true
|
|
});
|
|
me.store = store;
|
|
|
|
// If the view has acquired a size, calculate a new view size and scroll range when the store changes.
|
|
if (me.view.componentLayout.layoutCount) {
|
|
me.onViewResize(me.view, 0, me.view.getHeight());
|
|
}
|
|
},
|
|
|
|
onReconfigure: function(grid, store){
|
|
if (store && store !== this.store) {
|
|
this.bindStore(store);
|
|
}
|
|
},
|
|
|
|
unbindStore: function() {
|
|
this.storeListeners.destroy();
|
|
this.store = null;
|
|
},
|
|
|
|
onStoreClear: function() {
|
|
var me = this;
|
|
|
|
// Do not do anything if view is not rendered, or if the reason for cache clearing is store destruction
|
|
if (me.view.rendered && !me.store.isDestroyed) {
|
|
// Temporarily disable scroll monitoring until the scroll event caused by any following *change* of scrollTop has fired.
|
|
// Otherwise it will attempt to process a scroll on a stale view
|
|
if (me.scrollTop !== 0) {
|
|
me.ignoreNextScrollEvent = true;
|
|
me.view.el.dom.scrollTop = me.bodyTop = me.scrollTop = 0;
|
|
}
|
|
|
|
me.position = me.scrollHeight = 0;
|
|
me.lastScrollDirection = me.scrollOffset = null;
|
|
|
|
// MUST delete, not null out because the calculation checks hasOwnProperty
|
|
delete me.rowHeight;
|
|
}
|
|
},
|
|
|
|
onViewRefresh: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
oldScrollHeight = me.scrollHeight,
|
|
scrollHeight;
|
|
|
|
// View has rows, delete the rowHeight property to trigger a recalculation when scrollRange is calculated
|
|
if (view.all.getCount()) {
|
|
// We need to calculate the table size based upon the new viewport size and current row height
|
|
// It tests hasOwnProperty so must delete the property to make it recalculate.
|
|
delete me.rowHeight;
|
|
}
|
|
|
|
// Calculates scroll range. Also calculates rowHeight if we do not have an own rowHeight property.
|
|
// That will be the case if the view contains some rows.
|
|
scrollHeight = me.getScrollHeight();
|
|
|
|
if (!oldScrollHeight || scrollHeight != oldScrollHeight) {
|
|
me.stretchView(view, scrollHeight);
|
|
}
|
|
|
|
if (me.scrollTop !== view.el.dom.scrollTop) {
|
|
// The view may have refreshed and scrolled to the top, for example
|
|
// on a sort. If so, it's as if we scrolled to the top, so we'll simulate
|
|
// it here.
|
|
me.onViewScroll();
|
|
} else {
|
|
me.setBodyTop(me.bodyTop);
|
|
|
|
// With new data, the height may have changed, so recalculate the rowHeight and viewSize.
|
|
if (view.all.getCount()) {
|
|
me.viewSize = 0;
|
|
me.onViewResize(view, null, view.getHeight());
|
|
}
|
|
}
|
|
},
|
|
|
|
onViewResize: function(view, width, height, oldWidth, oldHeight) {
|
|
// Only process first layout (the boxready event) or height resizes.
|
|
if (!oldHeight || height !== oldHeight) {
|
|
var me = this,
|
|
newViewSize;
|
|
|
|
// Recalculate the view size in rows now that the grid view has changed height
|
|
newViewSize = Math.ceil(height / me.rowHeight) + me.trailingBufferZone + me.leadingBufferZone;
|
|
me.viewSize = me.setViewSize(newViewSize);
|
|
}
|
|
},
|
|
|
|
stretchView: function(view, scrollRange) {
|
|
var me = this,
|
|
recordCount = (me.store.buffered ? me.store.getTotalCount() : me.store.getCount());
|
|
|
|
if (me.stretcher) {
|
|
me.stretcher.dom.style.marginTop = (scrollRange - 1) + 'px';
|
|
} else {
|
|
var el = view.el;
|
|
|
|
// If the view has already been refreshed by the time we get here (eg, the grid, has undergone a reconfigure operation - which performs a refresh),
|
|
// keep it informed of fixed nodes which it must leave alone on refresh.
|
|
if (view.refreshCounter) {
|
|
view.fixedNodes++;
|
|
}
|
|
|
|
// If this is the last page, correct the scroll range to be just enough to fit.
|
|
if (recordCount && (me.view.all.endIndex === recordCount - 1)) {
|
|
scrollRange = me.bodyTop + view.body.dom.offsetHeight;
|
|
}
|
|
this.stretcher = el.createChild({
|
|
style: {
|
|
width: '1px',
|
|
height: '1px',
|
|
'marginTop': (scrollRange - 1) + 'px',
|
|
left: 0,
|
|
position: 'absolute'
|
|
}
|
|
}, el.dom.firstChild);
|
|
}
|
|
},
|
|
|
|
setViewSize: function(viewSize) {
|
|
if (viewSize !== this.viewSize) {
|
|
|
|
// Must be set for getFirstVisibleRowIndex to work
|
|
this.scrollTop = this.view.el.dom.scrollTop;
|
|
|
|
var me = this,
|
|
store = me.store,
|
|
elCount = me.view.all.getCount(),
|
|
start, end,
|
|
lockingPartner = me.lockingPartner;
|
|
|
|
me.viewSize = store.viewSize = viewSize;
|
|
|
|
// If a store loads before we have calculated a viewSize, it loads me.defaultViewSize records.
|
|
// This may be larger or smaller than the final viewSize so the store needs adjusting when the view size is calculated.
|
|
if (elCount) {
|
|
start = me.view.all.startIndex;
|
|
end = Math.min(start + viewSize - 1, (store.buffered ? store.getTotalCount() : store.getCount()) - 1);
|
|
|
|
// While rerendering our range, the locking partner must not sync
|
|
if (lockingPartner) {
|
|
lockingPartner.disable();
|
|
}
|
|
me.renderRange(start, end);
|
|
if (lockingPartner) {
|
|
lockingPartner.enable();
|
|
}
|
|
}
|
|
}
|
|
return viewSize;
|
|
},
|
|
|
|
getViewRange: function() {
|
|
var me = this,
|
|
rows = me.view.all,
|
|
store = me.store;
|
|
|
|
if (store.data.getCount()) {
|
|
return store.getRange(rows.startIndex, rows.startIndex + (me.viewSize || me.store.defaultViewSize) - 1);
|
|
} else {
|
|
return [];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Scrolls to and optionlly selects the specified row index **in the total dataset**.
|
|
*
|
|
* @param {Number} recordIdx The zero-based position in the dataset to scroll to.
|
|
* @param {Boolean} doSelect Pass as `true` to select the specified row.
|
|
* @param {Function} callback A function to call when the row has been scrolled to.
|
|
* @param {Number} callback.recordIdx The resulting record index (may have changed if the passed index was outside the valid range).
|
|
* @param {Ext.data.Model} callback.record The resulting record from the store.
|
|
* @param {Object} scope The scope (`this` reference) in which to execute the callback. Defaults to this BufferedRenderer.
|
|
*
|
|
*/
|
|
scrollTo: function(recordIdx, doSelect, callback, scope) {
|
|
var me = this,
|
|
view = me.view,
|
|
viewDom = view.el.dom,
|
|
store = me.store,
|
|
total = store.buffered ? store.getTotalCount() : store.getCount(),
|
|
startIdx, endIdx,
|
|
targetRec,
|
|
targetRow,
|
|
tableTop;
|
|
|
|
// Sanitize the requested record
|
|
recordIdx = Math.min(Math.max(recordIdx, 0), total - 1);
|
|
|
|
// Calculate view start index
|
|
startIdx = Math.max(Math.min(recordIdx - ((me.leadingBufferZone + me.trailingBufferZone) / 2), total - me.viewSize + 1), 0);
|
|
tableTop = startIdx * me.rowHeight;
|
|
endIdx = Math.min(startIdx + me.viewSize - 1, total - 1);
|
|
|
|
store.getRange(startIdx, endIdx, {
|
|
callback: function(range, start, end) {
|
|
|
|
me.renderRange(start, end, true);
|
|
|
|
targetRec = store.data.getRange(recordIdx, recordIdx)[0];
|
|
targetRow = view.getNode(targetRec, false);
|
|
view.body.dom.style.top = tableTop + 'px';
|
|
me.position = me.scrollTop = viewDom.scrollTop = tableTop = Math.min(Math.max(0, tableTop - view.body.getOffsetsTo(targetRow)[1]), viewDom.scrollHeight - viewDom.clientHeight);
|
|
|
|
// https://sencha.jira.com/browse/EXTJSIV-7166 IE 6, 7 and 8 won't scroll all the way down first time
|
|
if (Ext.isIE) {
|
|
viewDom.scrollTop = tableTop;
|
|
}
|
|
if (doSelect) {
|
|
view.selModel.select(targetRec);
|
|
}
|
|
if (callback) {
|
|
callback.call(scope||me, recordIdx, targetRec);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
onViewScroll: function(e, t) {
|
|
var me = this,
|
|
store = me.store,
|
|
totalCount = (store.buffered ? store.getTotalCount() : store.getCount()),
|
|
vscrollDistance,
|
|
scrollDirection,
|
|
scrollTop = me.scrollTop = me.view.el.dom.scrollTop,
|
|
scrollHandled = false;
|
|
|
|
// Flag set when the scrollTop is programatically set to zero upon cache clear.
|
|
// We must not attempt to process that as a scroll event.
|
|
if (me.ignoreNextScrollEvent) {
|
|
me.ignoreNextScrollEvent = false;
|
|
return;
|
|
}
|
|
|
|
// Only check for nearing the edge if we are enabled, and if there is overflow beyond our view bounds.
|
|
// If there is no paging to be done (Store's dataset is all in memory) we will be disabled.
|
|
if (!(me.disabled || totalCount < me.viewSize)) {
|
|
|
|
vscrollDistance = scrollTop - me.position;
|
|
scrollDirection = vscrollDistance > 0 ? 1 : -1;
|
|
|
|
// Moved at leat 20 pixels, or cvhanged direction, so test whether the numFromEdge is triggered
|
|
if (Math.abs(vscrollDistance) >= 20 || (scrollDirection !== me.lastScrollDirection)) {
|
|
me.lastScrollDirection = scrollDirection;
|
|
me.handleViewScroll(me.lastScrollDirection);
|
|
scrollHandled = true;
|
|
}
|
|
}
|
|
|
|
// Keep other side synced immediately if there was no rendering work to do.
|
|
if (!scrollHandled) {
|
|
if (me.lockingPartner && me.lockingPartner.scrollTop !== scrollTop) {
|
|
me.lockingPartner.view.el.dom.scrollTop = scrollTop;
|
|
}
|
|
}
|
|
},
|
|
|
|
handleViewScroll: function(direction) {
|
|
var me = this,
|
|
rows = me.view.all,
|
|
store = me.store,
|
|
viewSize = me.viewSize,
|
|
totalCount = (store.buffered ? store.getTotalCount() : store.getCount()),
|
|
requestStart,
|
|
requestEnd;
|
|
|
|
// We're scrolling up
|
|
if (direction == -1) {
|
|
|
|
// If table starts at record zero, we have nothing to do
|
|
if (rows.startIndex) {
|
|
if ((me.getFirstVisibleRowIndex() - rows.startIndex) < me.numFromEdge) {
|
|
requestStart = Math.max(0, me.getLastVisibleRowIndex() + me.trailingBufferZone - viewSize);
|
|
}
|
|
}
|
|
}
|
|
// We're scrolling down
|
|
else {
|
|
|
|
// If table ends at last record, we have nothing to do
|
|
if (rows.endIndex < totalCount - 1) {
|
|
if ((rows.endIndex - me.getLastVisibleRowIndex()) < me.numFromEdge) {
|
|
requestStart = Math.max(0, me.getFirstVisibleRowIndex() - me.trailingBufferZone);
|
|
}
|
|
}
|
|
}
|
|
|
|
// We scrolled close to the edge and the Store needs reloading
|
|
if (requestStart != null) {
|
|
requestEnd = Math.min(requestStart + viewSize - 1, totalCount - 1);
|
|
|
|
// If calculated view range has moved, then render it
|
|
if (requestStart !== rows.startIndex || requestEnd !== rows.endIndex) {
|
|
me.renderRange(requestStart, requestEnd);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// If we did not have to render, then just sync the partner's scroll position
|
|
if (me.lockingPartner && me.lockingPartner.view.el && me.lockingPartner.scrollTop !== me.scrollTop) {
|
|
me.lockingPartner.view.el.dom.scrollTop = me.scrollTop;
|
|
}
|
|
},
|
|
|
|
renderRange: function(start, end, forceSynchronous) {
|
|
var me = this,
|
|
store = me.store;
|
|
|
|
// If range is avaliable synchronously, process it now.
|
|
if (store.rangeCached(start, end)) {
|
|
me.cancelLoad();
|
|
|
|
if (me.synchronousRender || forceSynchronous) {
|
|
me.onRangeFetched(null, start, end);
|
|
} else {
|
|
if (!me.renderTask) {
|
|
me.renderTask = new Ext.util.DelayedTask(me.onRangeFetched, me, null, false);
|
|
}
|
|
// Render the new range very soon after this scroll event handler exits.
|
|
// If scrolling very quickly, a few more scroll events may fire before
|
|
// the render takes place. Each one will just *update* the arguments with which
|
|
// the pending invocation is called.
|
|
me.renderTask.delay(1, null, null, [null, start, end]);
|
|
}
|
|
}
|
|
|
|
// Required range is not in the prefetch buffer. Ask the store to prefetch it.
|
|
else {
|
|
me.attemptLoad(start, end);
|
|
}
|
|
},
|
|
|
|
onRangeFetched: function(range, start, end, fromLockingPartner) {
|
|
var me = this,
|
|
view = me.view,
|
|
oldStart,
|
|
rows = view.all,
|
|
removeCount,
|
|
increment = 0,
|
|
calculatedTop = start * me.rowHeight,
|
|
top,
|
|
lockingPartner = me.lockingPartner;
|
|
|
|
// View may have been destroyed since the DelayedTask was kicked off.
|
|
if (view.isDestroyed) {
|
|
return;
|
|
}
|
|
|
|
// If called as a callback from the Store, the range will be passed, if called from renderRange, it won't
|
|
if (!range) {
|
|
range = me.store.getRange(start, end);
|
|
|
|
// Store may have been cleared since the DelayedTask was kicked off.
|
|
if (!range) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
// No overlapping nodes, we'll need to render the whole range
|
|
if (start > rows.endIndex || end < rows.startIndex) {
|
|
rows.clear(true);
|
|
top = calculatedTop;
|
|
}
|
|
|
|
if (!rows.getCount()) {
|
|
view.doAdd(range, start);
|
|
}
|
|
// Moved down the dataset (content moved up): remove rows from top, add to end
|
|
else if (end > rows.endIndex) {
|
|
removeCount = Math.max(start - rows.startIndex, 0);
|
|
|
|
// We only have to bump the table down by the height of removed rows if rows are not a standard size
|
|
if (me.variableRowHeight) {
|
|
increment = rows.item(rows.startIndex + removeCount, true).offsetTop;
|
|
}
|
|
rows.scroll(Ext.Array.slice(range, rows.endIndex + 1 - start), 1, removeCount, start, end);
|
|
|
|
// We only have to bump the table down by the height of removed rows if rows are not a standard size
|
|
if (me.variableRowHeight) {
|
|
// Bump the table downwards by the height scraped off the top
|
|
top = me.bodyTop + increment;
|
|
} else {
|
|
top = calculatedTop;
|
|
}
|
|
}
|
|
// Moved up the dataset: remove rows from end, add to top
|
|
else {
|
|
removeCount = Math.max(rows.endIndex - end, 0);
|
|
oldStart = rows.startIndex;
|
|
rows.scroll(Ext.Array.slice(range, 0, rows.startIndex - start), -1, removeCount, start, end);
|
|
|
|
// We only have to bump the table up by the height of top-added rows if rows are not a standard size
|
|
if (me.variableRowHeight) {
|
|
// Bump the table upwards by the height added to the top
|
|
top = me.bodyTop - rows.item(oldStart, true).offsetTop;
|
|
} else {
|
|
top = calculatedTop;
|
|
}
|
|
}
|
|
// The position property is the scrollTop value *at which the table was last correct*
|
|
// MUST be set at table render/adjustment time
|
|
me.position = me.scrollTop;
|
|
|
|
// Position the table element. top will be undefined if fixed row height, so table position will
|
|
// be calculated.
|
|
if (view.positionBody) {
|
|
me.setBodyTop(top, calculatedTop);
|
|
}
|
|
|
|
// Sync the other side to exactly the same range from the dataset.
|
|
// Then ensure that we are still at exactly the same scroll position.
|
|
if (lockingPartner && !lockingPartner.disabled && !fromLockingPartner) {
|
|
lockingPartner.onRangeFetched(range, start, end, true);
|
|
if (lockingPartner.scrollTop !== me.scrollTop) {
|
|
lockingPartner.view.el.dom.scrollTop = me.scrollTop;
|
|
}
|
|
}
|
|
},
|
|
|
|
setBodyTop: function(bodyTop, calculatedTop) {
|
|
var me = this,
|
|
view = me.view,
|
|
store = me.store,
|
|
body = view.body.dom,
|
|
delta;
|
|
|
|
bodyTop = Math.floor(bodyTop);
|
|
|
|
// See if there's a difference between the calculated top and the requested top.
|
|
// This can be caused by non-standard row heights introduced by features or non-standard
|
|
// data in rows.
|
|
if (calculatedTop !== undefined) {
|
|
delta = bodyTop - calculatedTop;
|
|
bodyTop = calculatedTop;
|
|
}
|
|
body.style.position = 'absolute';
|
|
body.style.top = (me.bodyTop = bodyTop) + 'px';
|
|
|
|
// Adjust scrollTop to keep user-perceived position the same in the case of the calculated position not matching where the actual position was.
|
|
// Set position property so that scroll handler does not fire in response.
|
|
if (delta) {
|
|
me.scrollTop = me.position = view.el.dom.scrollTop -= delta;
|
|
}
|
|
|
|
// If this is the last page, correct the scroll range to be just enough to fit.
|
|
if (view.all.endIndex === (store.buffered ? store.getTotalCount() : store.getCount()) - 1) {
|
|
me.stretchView(view, me.bodyTop + body.offsetHeight);
|
|
}
|
|
},
|
|
|
|
getFirstVisibleRowIndex: function(startRow, endRow, viewportTop, viewportBottom) {
|
|
var me = this,
|
|
view = me.view,
|
|
rows = view.all,
|
|
elements = rows.elements,
|
|
clientHeight = view.el.dom.clientHeight,
|
|
target,
|
|
targetTop;
|
|
|
|
// If variableRowHeight, we have to search for the first row who's bottom edge is within the viewport
|
|
if (rows.getCount() && me.variableRowHeight) {
|
|
if (!arguments.length) {
|
|
startRow = rows.startIndex;
|
|
endRow = rows.endIndex;
|
|
viewportTop = me.scrollTop;
|
|
viewportBottom = viewportTop + clientHeight;
|
|
|
|
// Teleported so that body is outside viewport: Use rowHeight calculation
|
|
if (me.bodyTop > viewportBottom || me.bodyTop + view.body.getHeight() < viewportTop) {
|
|
return Math.floor(me.scrollTop / me.rowHeight);
|
|
}
|
|
|
|
// In first, non-recursive call, begin targetting the most likely first row
|
|
target = startRow + Math.min(me.numFromEdge + ((me.lastScrollDirection == -1) ? me.leadingBufferZone : me.trailingBufferZone), Math.floor((endRow - startRow) / 2));
|
|
} else {
|
|
target = startRow + Math.floor((endRow - startRow) / 2);
|
|
}
|
|
targetTop = me.bodyTop + elements[target].offsetTop;
|
|
|
|
// If target is entirely above the viewport, chop downwards
|
|
if (targetTop + elements[target].offsetHeight < viewportTop) {
|
|
return me.getFirstVisibleRowIndex(target + 1, endRow, viewportTop, viewportBottom);
|
|
}
|
|
|
|
// Target is first
|
|
if (targetTop <= viewportTop) {
|
|
return target;
|
|
}
|
|
// Not narrowed down to 1 yet; chop upwards
|
|
else if (target !== startRow) {
|
|
return me.getFirstVisibleRowIndex(startRow, target - 1, viewportTop, viewportBottom);
|
|
}
|
|
}
|
|
return Math.floor(me.scrollTop / me.rowHeight);
|
|
},
|
|
|
|
getLastVisibleRowIndex: function(startRow, endRow, viewportTop, viewportBottom) {
|
|
var me = this,
|
|
view = me.view,
|
|
rows = view.all,
|
|
elements = rows.elements,
|
|
clientHeight = view.el.dom.clientHeight,
|
|
target,
|
|
targetTop, targetBottom;
|
|
|
|
// If variableRowHeight, we have to search for the first row who's bottom edge is below the bottom of the viewport
|
|
if (rows.getCount() && me.variableRowHeight) {
|
|
if (!arguments.length) {
|
|
startRow = rows.startIndex;
|
|
endRow = rows.endIndex;
|
|
viewportTop = me.scrollTop;
|
|
viewportBottom = viewportTop + clientHeight;
|
|
|
|
// Teleported so that body is outside viewport: Use rowHeight calculation
|
|
if (me.bodyTop > viewportBottom || me.bodyTop + view.body.getHeight() < viewportTop) {
|
|
return Math.floor(me.scrollTop / me.rowHeight) + Math.ceil(clientHeight / me.rowHeight);
|
|
}
|
|
|
|
// In first, non-recursive call, begin targetting the most likely last row
|
|
target = endRow - Math.min(me.numFromEdge + ((me.lastScrollDirection == 1) ? me.leadingBufferZone : me.trailingBufferZone), Math.floor((endRow - startRow) / 2));
|
|
} else {
|
|
target = startRow + Math.floor((endRow - startRow) / 2);
|
|
}
|
|
targetTop = me.bodyTop + elements[target].offsetTop;
|
|
|
|
// If target is entirely below the viewport, chop upwards
|
|
if (targetTop > viewportBottom) {
|
|
return me.getLastVisibleRowIndex(startRow, target - 1, viewportTop, viewportBottom);
|
|
}
|
|
targetBottom = targetTop + elements[target].offsetHeight;
|
|
|
|
// Target is last
|
|
if (targetBottom >= viewportBottom) {
|
|
return target;
|
|
}
|
|
// Not narrowed down to 1 yet; chop downwards
|
|
else if (target !== endRow) {
|
|
return me.getLastVisibleRowIndex(target + 1, endRow, viewportTop, viewportBottom);
|
|
}
|
|
}
|
|
return me.getFirstVisibleRowIndex() + Math.ceil(clientHeight / me.rowHeight);
|
|
},
|
|
|
|
getScrollHeight: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
store = me.store,
|
|
doCalcHeight = !me.hasOwnProperty('rowHeight'),
|
|
storeCount = me.store.getCount();
|
|
|
|
if (!storeCount) {
|
|
return 0;
|
|
}
|
|
if (doCalcHeight) {
|
|
if (view.all.getCount()) {
|
|
me.rowHeight = Math.floor(view.body.getHeight() / view.all.getCount());
|
|
}
|
|
}
|
|
return this.scrollHeight = Math.floor((store.buffered ? store.getTotalCount() : store.getCount()) * me.rowHeight);
|
|
},
|
|
|
|
attemptLoad: function(start, end) {
|
|
var me = this;
|
|
if (me.scrollToLoadBuffer) {
|
|
if (!me.loadTask) {
|
|
me.loadTask = new Ext.util.DelayedTask(me.doAttemptLoad, me, []);
|
|
}
|
|
me.loadTask.delay(me.scrollToLoadBuffer, me.doAttemptLoad, me, [start, end]);
|
|
} else {
|
|
me.store.getRange(start, end, {
|
|
callback: me.onRangeFetched,
|
|
scope: me,
|
|
fireEvent: false
|
|
});
|
|
}
|
|
},
|
|
|
|
cancelLoad: function() {
|
|
if (this.loadTask) {
|
|
this.loadTask.cancel();
|
|
}
|
|
},
|
|
|
|
doAttemptLoad: function(start, end) {
|
|
this.store.getRange(start, end, {
|
|
callback: this.onRangeFetched,
|
|
scope: this,
|
|
fireEvent: false
|
|
});
|
|
},
|
|
|
|
destroy: function() {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
if (view && view.el) {
|
|
view.el.un('scroll', me.onViewScroll, me); // un does not understand the element options
|
|
}
|
|
|
|
// Remove listeners from old grid, view and store
|
|
Ext.destroy(me.viewListeners, me.storeListeners, me.gridListeners);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class provides an abstract grid editing plugin on selected {@link Ext.grid.column.Column columns}.
|
|
* The editable columns are specified by providing an {@link Ext.grid.column.Column#editor editor}
|
|
* in the {@link Ext.grid.column.Column column configuration}.
|
|
*
|
|
* **Note:** This class should not be used directly. See {@link Ext.grid.plugin.CellEditing} and
|
|
* {@link Ext.grid.plugin.RowEditing}.
|
|
*/
|
|
Ext.define('Ext.grid.plugin.Editing', {
|
|
alias: 'editing.editing',
|
|
extend: Ext.AbstractPlugin ,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @cfg {Number} clicksToEdit
|
|
* The number of clicks on a grid required to display the editor.
|
|
* The only accepted values are **1** and **2**.
|
|
*/
|
|
clicksToEdit: 2,
|
|
|
|
/**
|
|
* @cfg {String} triggerEvent
|
|
* The event which triggers editing. Supercedes the {@link #clicksToEdit} configuration. Maybe one of:
|
|
*
|
|
* * cellclick
|
|
* * celldblclick
|
|
* * cellfocus
|
|
* * rowfocus
|
|
*/
|
|
triggerEvent: undefined,
|
|
|
|
relayedEvents: [
|
|
'beforeedit',
|
|
'edit',
|
|
'validateedit',
|
|
'canceledit'
|
|
],
|
|
|
|
// @private
|
|
defaultFieldXType: 'textfield',
|
|
|
|
// cell, row, form
|
|
editStyle: '',
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeedit
|
|
* Fires before editing is triggered. Return false from event handler to stop the editing.
|
|
*
|
|
* @param {Ext.grid.plugin.Editing} editor
|
|
* @param {Object} context The editing context with the following properties:
|
|
* @param {Ext.grid.Panel} context.grid The owning grid Panel.
|
|
* @param {Ext.data.Model} context.record The record being edited.
|
|
* @param {String} context.field The name of the field being edited.
|
|
* @param {Mixed} context.value The field's current value.
|
|
* @param {HTMLElement} context.row The grid row element.
|
|
* @param {Ext.grid.column.Column} context.column The Column being edited.
|
|
* @param {Number} context.rowIdx The index of the row being edited.
|
|
* @param {Number} context.colIdx The index of the column being edited.
|
|
* @param {Boolean} context.cancel Set this to `true` to cancel the edit or return false from your handler.
|
|
* @param {Mixed} context.originalValue Alias for value (only when using {@link Ext.grid.plugin.CellEditing CellEditing}).
|
|
*/
|
|
'beforeedit',
|
|
|
|
/**
|
|
* @event edit
|
|
* Fires after a editing. Usage example:
|
|
*
|
|
* grid.on('edit', function(editor, e) {
|
|
* // commit the changes right after editing finished
|
|
* e.record.commit();
|
|
* });
|
|
*
|
|
* @param {Ext.grid.plugin.Editing} editor
|
|
* @param {Object} context The editing context with the following properties:
|
|
* @param {Ext.grid.Panel} context.grid The owning grid Panel.
|
|
* @param {Ext.data.Model} context.record The record being edited.
|
|
* @param {String} context.field The name of the field being edited.
|
|
* @param {Mixed} context.value The field's current value.
|
|
* @param {HTMLElement} context.row The grid row element.
|
|
* @param {Ext.grid.column.Column} context.column The Column being edited.
|
|
* @param {Number} context.rowIdx The index of the row being edited.
|
|
* @param {Number} context.colIdx The index of the column being edited.
|
|
*/
|
|
'edit',
|
|
|
|
/**
|
|
* @event validateedit
|
|
* Fires after editing, but before the value is set in the record. Return false from event handler to
|
|
* cancel the change.
|
|
*
|
|
* Usage example showing how to remove the red triangle (dirty record indicator) from some records (not all). By
|
|
* observing the grid's validateedit event, it can be cancelled if the edit occurs on a targeted row (for example)
|
|
* and then setting the field's new value in the Record directly:
|
|
*
|
|
* grid.on('validateedit', function(editor, e) {
|
|
* var myTargetRow = 6;
|
|
*
|
|
* if (e.rowIdx == myTargetRow) {
|
|
* e.cancel = true;
|
|
* e.record.data[e.field] = e.value;
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Ext.grid.plugin.Editing} editor
|
|
* @param {Object} context The editing context with the following properties:
|
|
* @param {Ext.grid.Panel} context.grid The owning grid Panel.
|
|
* @param {Ext.data.Model} context.record The record being edited.
|
|
* @param {String} context.field The name of the field being edited.
|
|
* @param {Mixed} context.value The field's current value.
|
|
* @param {HTMLElement} context.row The grid row element.
|
|
* @param {Ext.grid.column.Column} context.column The Column being edited.
|
|
* @param {Number} context.rowIdx The index of the row being edited.
|
|
* @param {Number} context.colIdx The index of the column being edited.
|
|
*/
|
|
'validateedit',
|
|
/**
|
|
* @event canceledit
|
|
* Fires when the user started editing but then cancelled the edit.
|
|
* @param {Ext.grid.plugin.Editing} editor
|
|
* @param {Object} context The editing context with the following properties:
|
|
* @param {Ext.grid.Panel} context.grid The owning grid Panel.
|
|
* @param {Ext.data.Model} context.record The record being edited.
|
|
* @param {String} context.field The name of the field being edited.
|
|
* @param {Mixed} context.value The field's current value.
|
|
* @param {HTMLElement} context.row The grid row element.
|
|
* @param {Ext.grid.column.Column} context.column The Column being edited.
|
|
* @param {Number} context.rowIdx The index of the row being edited.
|
|
* @param {Number} context.colIdx The index of the column being edited.
|
|
*/
|
|
'canceledit'
|
|
|
|
);
|
|
me.callParent(arguments);
|
|
me.mixins.observable.constructor.call(me);
|
|
// TODO: Deprecated, remove in 5.0
|
|
me.on("edit", function(editor, e) {
|
|
me.fireEvent("afteredit", editor, e);
|
|
});
|
|
},
|
|
|
|
// @private
|
|
init: function(grid) {
|
|
var me = this;
|
|
|
|
me.grid = grid;
|
|
me.view = grid.view;
|
|
me.initEvents();
|
|
|
|
// Set up fields at render and reconfigure time
|
|
me.mon(grid, {
|
|
reconfigure: me.onReconfigure,
|
|
scope: me,
|
|
beforerender: {
|
|
fn: me.onReconfigure,
|
|
single: true,
|
|
scope: me
|
|
}
|
|
});
|
|
|
|
grid.relayEvents(me, me.relayedEvents);
|
|
|
|
// If the editable grid is owned by a lockable, relay up another level.
|
|
if (me.grid.ownerLockable) {
|
|
me.grid.ownerLockable.relayEvents(me, me.relayedEvents);
|
|
}
|
|
// Marks the grid as editable, so that the SelectionModel
|
|
// can make appropriate decisions during navigation
|
|
grid.isEditable = true;
|
|
grid.editingPlugin = grid.view.editingPlugin = me;
|
|
},
|
|
|
|
/**
|
|
* Fires after the grid is reconfigured
|
|
* @private
|
|
*/
|
|
onReconfigure: function() {
|
|
var grid = this.grid;
|
|
|
|
// In a Lockable assembly, the owner's view aggregates all grid columns across both sides.
|
|
// We grab all columns here.
|
|
grid = grid.ownerLockable ? grid.ownerLockable : grid;
|
|
this.initFieldAccessors(grid.getView().getGridColumns());
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
var me = this,
|
|
grid = me.grid;
|
|
|
|
Ext.destroy(me.keyNav);
|
|
// Clear all listeners from all our events, clear all managed listeners we added to other Observables
|
|
me.clearListeners();
|
|
|
|
if (grid) {
|
|
me.removeFieldAccessors(grid.columnManager.getColumns());
|
|
grid.editingPlugin = grid.view.editingPlugin = me.grid = me.view = me.editor = me.keyNav = null;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getEditStyle: function() {
|
|
return this.editStyle;
|
|
},
|
|
|
|
// @private
|
|
initFieldAccessors: function(columns) {
|
|
// If we have been passed a group header, process its leaf headers
|
|
if (columns.isGroupHeader) {
|
|
columns = columns.getGridColumns();
|
|
}
|
|
|
|
// Ensure we are processing an array
|
|
else if (!Ext.isArray(columns)) {
|
|
columns = [columns];
|
|
}
|
|
|
|
var me = this,
|
|
c,
|
|
cLen = columns.length,
|
|
column;
|
|
|
|
for (c = 0; c < cLen; c++) {
|
|
column = columns[c];
|
|
|
|
if (!column.getEditor) {
|
|
column.getEditor = function(record, defaultField) {
|
|
return me.getColumnField(this, defaultField);
|
|
};
|
|
}
|
|
if (!column.hasEditor) {
|
|
column.hasEditor = function() {
|
|
return me.hasColumnField(this);
|
|
};
|
|
}
|
|
if (!column.setEditor) {
|
|
column.setEditor = function(field) {
|
|
me.setColumnField(this, field);
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
removeFieldAccessors: function(columns) {
|
|
// If we have been passed a group header, process its leaf headers
|
|
if (columns.isGroupHeader) {
|
|
columns = columns.getGridColumns();
|
|
}
|
|
|
|
// Ensure we are processing an array
|
|
else if (!Ext.isArray(columns)) {
|
|
columns = [columns];
|
|
}
|
|
|
|
var c,
|
|
cLen = columns.length,
|
|
column;
|
|
|
|
for (c = 0; c < cLen; c++) {
|
|
column = columns[c];
|
|
|
|
column.getEditor = column.hasEditor = column.setEditor = null;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// remaps to the public API of Ext.grid.column.Column.getEditor
|
|
getColumnField: function(columnHeader, defaultField) {
|
|
var field = columnHeader.field;
|
|
if (!(field && field.isFormField)) {
|
|
field = columnHeader.field = this.createColumnField(columnHeader, defaultField);
|
|
}
|
|
return field;
|
|
},
|
|
|
|
// @private
|
|
// remaps to the public API of Ext.grid.column.Column.hasEditor
|
|
hasColumnField: function(columnHeader) {
|
|
return !!columnHeader.field;
|
|
},
|
|
|
|
// @private
|
|
// remaps to the public API of Ext.grid.column.Column.setEditor
|
|
setColumnField: function(columnHeader, field) {
|
|
columnHeader.field = field;
|
|
columnHeader.field = this.createColumnField(columnHeader);
|
|
},
|
|
|
|
createColumnField: function(columnHeader, defaultField) {
|
|
var field = columnHeader.field;
|
|
|
|
if (!field && columnHeader.editor) {
|
|
field = columnHeader.editor;
|
|
columnHeader.editor = null;
|
|
}
|
|
|
|
if (!field && defaultField) {
|
|
field = defaultField;
|
|
}
|
|
|
|
if (field) {
|
|
if (field.isFormField) {
|
|
field.column = columnHeader;
|
|
} else {
|
|
if (Ext.isString(field)) {
|
|
field = {
|
|
name: columnHeader.dataIndex,
|
|
xtype: field,
|
|
column: columnHeader
|
|
};
|
|
} else {
|
|
field = Ext.apply({
|
|
name: columnHeader.dataIndex,
|
|
column: columnHeader
|
|
}, field);
|
|
}
|
|
field = Ext.ComponentManager.create(field, this.defaultFieldXType);
|
|
}
|
|
columnHeader.field = field;
|
|
}
|
|
return field;
|
|
},
|
|
|
|
// @private
|
|
initEvents: function() {
|
|
var me = this;
|
|
me.initEditTriggers();
|
|
me.initCancelTriggers();
|
|
},
|
|
|
|
// @abstract
|
|
initCancelTriggers: Ext.emptyFn,
|
|
|
|
// @private
|
|
initEditTriggers: function() {
|
|
var me = this,
|
|
view = me.view;
|
|
|
|
// Listen for the edit trigger event.
|
|
if (me.triggerEvent == 'cellfocus') {
|
|
me.mon(view, 'cellfocus', me.onCellFocus, me);
|
|
} else if (me.triggerEvent == 'rowfocus') {
|
|
me.mon(view, 'rowfocus', me.onRowFocus, me);
|
|
} else {
|
|
|
|
// Prevent the View from processing when the SelectionModel focuses.
|
|
// This is because the SelectionModel processes the mousedown event, and
|
|
// focusing causes a scroll which means that the subsequent mouseup might
|
|
// take place at a different document XY position, and will therefore
|
|
// not trigger a click.
|
|
// This Editor must call the View's focusCell method directly when we recieve a request to edit
|
|
if (view.getSelectionModel().isCellModel) {
|
|
view.onCellFocus = Ext.Function.bind(me.beforeViewCellFocus, me);
|
|
}
|
|
|
|
// Listen for whichever click event we are configured to use
|
|
me.mon(view, me.triggerEvent || ('cell' + (me.clicksToEdit === 1 ? 'click' : 'dblclick')), me.onCellClick, me);
|
|
}
|
|
|
|
// add/remove header event listeners need to be added immediately because
|
|
// columns can be added/removed before render
|
|
me.initAddRemoveHeaderEvents()
|
|
// wait until render to initialize keynav events since they are attached to an element
|
|
view.on('render', me.initKeyNavHeaderEvents, me, {single: true});
|
|
},
|
|
|
|
// Override of View's method so that we can pre-empt the View's processing if the view is being triggered by a mousedown
|
|
beforeViewCellFocus: function(position) {
|
|
// Pass call on to view if the navigation is from the keyboard, or we are not going to edit this cell.
|
|
if (this.view.selModel.keyNavigation || !this.editing || !this.isCellEditable || !this.isCellEditable(position.row, position.columnHeader)) {
|
|
this.view.focusCell.apply(this.view, arguments);
|
|
}
|
|
},
|
|
|
|
// @private Used if we are triggered by the rowfocus event
|
|
onRowFocus: function(record, row, rowIdx) {
|
|
this.startEdit(row, 0);
|
|
},
|
|
|
|
// @private Used if we are triggered by the cellfocus event
|
|
onCellFocus: function(record, cell, position) {
|
|
this.startEdit(position.row, position.column);
|
|
},
|
|
|
|
// @private Used if we are triggered by a cellclick event
|
|
onCellClick: function(view, cell, colIdx, record, row, rowIdx, e) {
|
|
// cancel editing if the element that was clicked was a tree expander
|
|
if(!view.expanderSelector || !e.getTarget(view.expanderSelector)) {
|
|
this.startEdit(record, view.ownerCt.columnManager.getHeaderAtIndex(colIdx));
|
|
}
|
|
},
|
|
|
|
initAddRemoveHeaderEvents: function(){
|
|
var me = this;
|
|
me.mon(me.grid.headerCt, {
|
|
scope: me,
|
|
add: me.onColumnAdd,
|
|
remove: me.onColumnRemove,
|
|
columnmove: me.onColumnMove
|
|
});
|
|
},
|
|
|
|
initKeyNavHeaderEvents: function() {
|
|
var me = this;
|
|
|
|
me.keyNav = Ext.create('Ext.util.KeyNav', me.view.el, {
|
|
enter: me.onEnterKey,
|
|
esc: me.onEscKey,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
// @private
|
|
onColumnAdd: function(ct, column) {
|
|
this.initFieldAccessors(column);
|
|
},
|
|
|
|
// @private
|
|
onColumnRemove: function(ct, column) {
|
|
this.removeFieldAccessors(column);
|
|
},
|
|
|
|
// @private
|
|
// Inject field accessors on move because if the move FROM the main headerCt and INTO a grouped header,
|
|
// the accessors will have been deleted but not added. They are added conditionally.
|
|
onColumnMove: function(headerCt, column, fromIdx, toIdx) {
|
|
this.initFieldAccessors(column);
|
|
},
|
|
|
|
// @private
|
|
onEnterKey: function(e) {
|
|
var me = this,
|
|
grid = me.grid,
|
|
selModel = grid.getSelectionModel(),
|
|
record,
|
|
pos,
|
|
columnHeader;
|
|
|
|
// Calculate editing start position from SelectionModel if there is a selection
|
|
// Note that the condition below tests the result of an assignment to the "pos" variable.
|
|
if (selModel.getCurrentPosition && (pos = selModel.getCurrentPosition())) {
|
|
record = pos.record;
|
|
columnHeader = pos.columnHeader;
|
|
}
|
|
// RowSelectionModel
|
|
else {
|
|
record = selModel.getLastSelected();
|
|
columnHeader = grid.columnManager.getHeaderAtIndex(0);
|
|
}
|
|
|
|
// If there was a selection to provide a starting context...
|
|
if (record && columnHeader) {
|
|
me.startEdit(record, columnHeader);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onEscKey: function(e) {
|
|
return this.cancelEdit();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* @template
|
|
* Template method called before editing begins.
|
|
* @param {Object} context The current editing context
|
|
* @return {Boolean} Return false to cancel the editing process
|
|
*/
|
|
beforeEdit: Ext.emptyFn,
|
|
|
|
/**
|
|
* Starts editing the specified record, using the specified Column definition to define which field is being edited.
|
|
* @param {Ext.data.Model/Number} record The Store data record which backs the row to be edited, or index of the record in Store.
|
|
* @param {Ext.grid.column.Column/Number} columnHeader The Column object defining the column to be edited, or index of the column.
|
|
*/
|
|
startEdit: function(record, columnHeader) {
|
|
var me = this,
|
|
context,
|
|
layoutView = me.grid.lockable ? me.grid : me.view;
|
|
|
|
// The view must have had a layout to show the editor correctly, defer until that time.
|
|
// In case a grid's startup code invokes editing immediately.
|
|
if (!layoutView.componentLayoutCounter) {
|
|
layoutView.on({
|
|
boxready: Ext.Function.bind(me.startEdit, me, [record, columnHeader]),
|
|
single: true
|
|
});
|
|
return false;
|
|
}
|
|
|
|
// If grid collapsed, or view not truly visible, don't even calculate a context - we cannot edit
|
|
if (me.grid.collapsed || !me.grid.view.isVisible(true)) {
|
|
return false;
|
|
}
|
|
|
|
context = me.getEditingContext(record, columnHeader);
|
|
if (context == null) {
|
|
return false;
|
|
}
|
|
if (!me.preventBeforeCheck) {
|
|
if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @property {Boolean} editing
|
|
* Set to `true` while the editing plugin is active and an Editor is visible.
|
|
*/
|
|
me.editing = true;
|
|
return context;
|
|
},
|
|
|
|
// TODO: Have this use a new class Ext.grid.CellContext for use here, and in CellSelectionModel
|
|
/**
|
|
* @private
|
|
* Collects all information necessary for any subclasses to perform their editing functions.
|
|
* @param record
|
|
* @param columnHeader
|
|
* @returns {Object/undefined} The editing context based upon the passed record and column
|
|
*/
|
|
getEditingContext: function(record, columnHeader) {
|
|
var me = this,
|
|
grid = me.grid,
|
|
view = me.view,
|
|
gridRow = view.getNode(record, true),
|
|
rowIdx, colIdx;
|
|
|
|
// An intervening listener may have deleted the Record
|
|
if (!gridRow) {
|
|
return;
|
|
}
|
|
|
|
// Coerce the column index to the closest visible column
|
|
columnHeader = grid.columnManager.getVisibleHeaderClosestToIndex(Ext.isNumber(columnHeader) ? columnHeader : columnHeader.getVisibleIndex());
|
|
|
|
// No corresponding column. Possible if all columns have been moved to the other side of a lockable grid pair
|
|
if (!columnHeader) {
|
|
return;
|
|
}
|
|
|
|
colIdx = columnHeader.getVisibleIndex();
|
|
|
|
if (Ext.isNumber(record)) {
|
|
// look up record if numeric row index was passed
|
|
rowIdx = record;
|
|
record = view.getRecord(gridRow);
|
|
} else {
|
|
rowIdx = view.indexOf(gridRow);
|
|
}
|
|
|
|
// The record may be removed from the store but the view
|
|
// not yet updated, so check it exists
|
|
if (!record) {
|
|
return;
|
|
}
|
|
|
|
return {
|
|
grid : grid,
|
|
view : view,
|
|
store : view.dataSource,
|
|
record : record,
|
|
field : columnHeader.dataIndex,
|
|
value : record.get(columnHeader.dataIndex),
|
|
row : gridRow,
|
|
column : columnHeader,
|
|
rowIdx : rowIdx,
|
|
colIdx : colIdx
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Cancels any active edit that is in progress.
|
|
*/
|
|
cancelEdit: function() {
|
|
var me = this;
|
|
|
|
me.editing = false;
|
|
me.fireEvent('canceledit', me, me.context);
|
|
},
|
|
|
|
/**
|
|
* Completes the edit if there is an active edit in progress.
|
|
*/
|
|
completeEdit: function() {
|
|
var me = this;
|
|
|
|
if (me.editing && me.validateEdit()) {
|
|
me.fireEvent('edit', me, me.context);
|
|
}
|
|
|
|
me.context = null;
|
|
me.editing = false;
|
|
},
|
|
|
|
// @abstract
|
|
validateEdit: function() {
|
|
var me = this,
|
|
context = me.context;
|
|
|
|
return me.fireEvent('validateedit', me, context) !== false && !context.cancel;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The Ext.grid.plugin.CellEditing plugin injects editing at a cell level for a Grid. Only a single
|
|
* cell will be editable at a time. The field that will be used for the editor is defined at the
|
|
* {@link Ext.grid.column.Column#editor editor}. The editor can be a field instance or a field configuration.
|
|
*
|
|
* If an editor is not specified for a particular column then that cell will not be editable and it will
|
|
* be skipped when activated via the mouse or the keyboard.
|
|
*
|
|
* The editor may be shared for each column in the grid, or a different one may be specified for each column.
|
|
* An appropriate field type should be chosen to match the data structure that it will be editing. For example,
|
|
* to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
|
|
*
|
|
* ## Example
|
|
*
|
|
* A grid with editor for the name and the email columns:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'simpsonsStore',
|
|
* fields:['name', 'email', 'phone'],
|
|
* data:{'items':[
|
|
* {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
|
|
* {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
|
|
* {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
|
|
* {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
|
|
* ]},
|
|
* proxy: {
|
|
* type: 'memory',
|
|
* reader: {
|
|
* type: 'json',
|
|
* root: 'items'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Simpsons',
|
|
* store: Ext.data.StoreManager.lookup('simpsonsStore'),
|
|
* columns: [
|
|
* {header: 'Name', dataIndex: 'name', editor: 'textfield'},
|
|
* {header: 'Email', dataIndex: 'email', flex:1,
|
|
* editor: {
|
|
* xtype: 'textfield',
|
|
* allowBlank: false
|
|
* }
|
|
* },
|
|
* {header: 'Phone', dataIndex: 'phone'}
|
|
* ],
|
|
* selType: 'cellmodel',
|
|
* plugins: [
|
|
* Ext.create('Ext.grid.plugin.CellEditing', {
|
|
* clicksToEdit: 1
|
|
* })
|
|
* ],
|
|
* height: 200,
|
|
* width: 400,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* This requires a little explanation. We're passing in `store` and `columns` as normal, but
|
|
* we also specify a {@link Ext.grid.column.Column#field field} on two of our columns. For the
|
|
* Name column we just want a default textfield to edit the value, so we specify 'textfield'.
|
|
* For the Email column we customized the editor slightly by passing allowBlank: false, which
|
|
* will provide inline validation.
|
|
*
|
|
* To support cell editing, we also specified that the grid should use the 'cellmodel'
|
|
* {@link Ext.grid.Panel#selType selType}, and created an instance of the CellEditing plugin,
|
|
* which we configured to activate each editor after a single click.
|
|
*
|
|
*/
|
|
Ext.define('Ext.grid.plugin.CellEditing', {
|
|
alias: 'plugin.cellediting',
|
|
extend: Ext.grid.plugin.Editing ,
|
|
|
|
lockableScope: 'both',
|
|
|
|
/**
|
|
* @event beforeedit
|
|
* Fires before cell editing is triggered. Return false from event handler to stop the editing.
|
|
*
|
|
* @param {Ext.grid.plugin.CellEditing} editor
|
|
* @param {Object} e An edit event with the following properties:
|
|
*
|
|
* - grid - The grid
|
|
* - record - The record being edited
|
|
* - field - The field name being edited
|
|
* - value - The value for the field being edited.
|
|
* - row - The grid table row
|
|
* - column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.
|
|
* - rowIdx - The row index that is being edited
|
|
* - colIdx - The column index that is being edited
|
|
* - cancel - Set this to true to cancel the edit or return false from your handler.
|
|
*/
|
|
/**
|
|
* @event edit
|
|
* Fires after a cell is edited. Usage example:
|
|
*
|
|
* grid.on('edit', function(editor, e) {
|
|
* // commit the changes right after editing finished
|
|
* e.record.commit();
|
|
* });
|
|
*
|
|
* @param {Ext.grid.plugin.CellEditing} editor
|
|
* @param {Object} e An edit event with the following properties:
|
|
*
|
|
* - grid - The grid
|
|
* - record - The record that was edited
|
|
* - field - The field name that was edited
|
|
* - value - The value being set
|
|
* - originalValue - The original value for the field, before the edit.
|
|
* - row - The grid table row
|
|
* - column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.
|
|
* - rowIdx - The row index that was edited
|
|
* - colIdx - The column index that was edited
|
|
*/
|
|
/**
|
|
* @event validateedit
|
|
* Fires after a cell is edited, but before the value is set in the record. Return false from event handler to
|
|
* cancel the change.
|
|
*
|
|
* Usage example showing how to remove the red triangle (dirty record indicator) from some records (not all). By
|
|
* observing the grid's validateedit event, it can be cancelled if the edit occurs on a targeted row (for
|
|
* example) and then setting the field's new value in the Record directly:
|
|
*
|
|
* grid.on('validateedit', function(editor, e) {
|
|
* var myTargetRow = 6;
|
|
*
|
|
* if (e.row == myTargetRow) {
|
|
* e.cancel = true;
|
|
* e.record.data[e.field] = e.value;
|
|
* }
|
|
* });
|
|
*
|
|
* @param {Ext.grid.plugin.CellEditing} editor
|
|
* @param {Object} e An edit event with the following properties:
|
|
*
|
|
* - grid - The grid
|
|
* - record - The record being edited
|
|
* - field - The field name being edited
|
|
* - value - The value being set
|
|
* - originalValue - The original value for the field, before the edit.
|
|
* - row - The grid table row
|
|
* - column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.
|
|
* - rowIdx - The row index that is being edited
|
|
* - colIdx - The column index that is being edited
|
|
* - cancel - Set this to true to cancel the edit or return false from your handler.
|
|
*/
|
|
/**
|
|
* @event canceledit
|
|
* Fires when the user started editing a cell but then cancelled the edit.
|
|
* @param {Ext.grid.plugin.CellEditing} editor
|
|
* @param {Object} e An edit event with the following properties:
|
|
*
|
|
* - grid - The grid
|
|
* - record - The record that was edited
|
|
* - field - The field name that was edited
|
|
* - value - The value being set
|
|
* - row - The grid table row
|
|
* - column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.
|
|
* - rowIdx - The row index that was edited
|
|
* - colIdx - The column index that was edited
|
|
*/
|
|
|
|
init: function(grid) {
|
|
var me = this,
|
|
lockingPartner = me.lockingPartner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Share editor apparatus with lockingPartner becuse columns may move from side to side
|
|
if (lockingPartner) {
|
|
if (lockingPartner.editors) {
|
|
me.editors = lockingPartner.editors;
|
|
} else {
|
|
me.editors = lockingPartner.editors = new Ext.util.MixedCollection(false, function(editor) {
|
|
return editor.editorId;
|
|
});
|
|
}
|
|
} else {
|
|
me.editors = new Ext.util.MixedCollection(false, function(editor) {
|
|
return editor.editorId;
|
|
});
|
|
}
|
|
},
|
|
|
|
onReconfigure: function(grid, store, columns){
|
|
// Only reconfigure editors if passed a new set of columns
|
|
if (columns) {
|
|
this.editors.clear();
|
|
}
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
var me = this;
|
|
if (me.editors) {
|
|
me.editors.each(Ext.destroy, Ext);
|
|
me.editors.clear();
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onBodyScroll: function() {
|
|
var me = this,
|
|
ed = me.getActiveEditor(),
|
|
scroll = me.view.el.getScroll();
|
|
|
|
// Scroll happened during editing...
|
|
// If editing is on the other side of a lockable, then ignore it
|
|
if (ed && ed.editing && ed.editingPlugin === me) {
|
|
// Terminate editing only on vertical scroll. Horiz scroll can be caused by tabbing between cells.
|
|
if (scroll.top !== me.scroll.top) {
|
|
if (ed.field) {
|
|
if (ed.field.triggerBlur) {
|
|
ed.field.triggerBlur();
|
|
} else {
|
|
ed.field.blur();
|
|
}
|
|
}
|
|
}
|
|
// Horiz scroll just requires that the editor be realigned.
|
|
else {
|
|
ed.realign();
|
|
}
|
|
}
|
|
me.scroll = scroll;
|
|
},
|
|
|
|
// @private
|
|
// Template method called from base class's initEvents
|
|
initCancelTriggers: function() {
|
|
var me = this,
|
|
grid = me.grid,
|
|
view = grid.view;
|
|
|
|
me.mon(view, 'bodyscroll', me.onBodyScroll, me);
|
|
me.mon(grid, {
|
|
columnresize: me.cancelEdit,
|
|
columnmove: me.cancelEdit,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
isCellEditable: function(record, columnHeader) {
|
|
var me = this,
|
|
context = me.getEditingContext(record, columnHeader);
|
|
|
|
if (me.grid.view.isVisible(true) && context) {
|
|
columnHeader = context.column;
|
|
record = context.record;
|
|
if (columnHeader && me.getEditor(record, columnHeader)) {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Starts editing the specified record, using the specified Column definition to define which field is being edited.
|
|
* @param {Ext.data.Model/Number} record The Store data record which backs the row to be edited, or index of the record.
|
|
* @param {Ext.grid.column.Column/Number} columnHeader The Column object defining the column to be edited, or index of the column.
|
|
* @return {Boolean} `true` if editing was started, `false` otherwise.
|
|
*/
|
|
startEdit: function(record, columnHeader, /* private */ context) {
|
|
var me = this,
|
|
ed;
|
|
|
|
if (!context) {
|
|
me.preventBeforeCheck = true;
|
|
context = me.callParent(arguments);
|
|
delete me.preventBeforeCheck;
|
|
if (context === false) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Cancel editing if EditingContext could not be found (possibly because record has been deleted by an intervening listener),
|
|
// or if the grid view is not currently visible
|
|
if (context && me.grid.view.isVisible(true)) {
|
|
|
|
record = context.record;
|
|
columnHeader = context.column;
|
|
|
|
// Complete the edit now, before getting the editor's target cell DOM element.
|
|
// Completing the edit hides the editor, causes a row update and sets up a delayed focus on the row.
|
|
// Also allows any post-edit events to take effect before continuing
|
|
me.completeEdit();
|
|
|
|
// See if the field is editable for the requested record
|
|
if (columnHeader && !columnHeader.getEditor(record)) {
|
|
return false;
|
|
}
|
|
|
|
// Switch to new context *after* completing the current edit
|
|
me.context = context;
|
|
|
|
context.originalValue = context.value = record.get(columnHeader.dataIndex);
|
|
|
|
if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel) {
|
|
return false;
|
|
}
|
|
|
|
ed = me.getEditor(record, columnHeader);
|
|
|
|
// Whether we are going to edit or not, ensure the edit cell is scrolled into view
|
|
me.grid.view.cancelFocus();
|
|
me.view.scrollCellIntoView(me.getCell(record, columnHeader));
|
|
if (ed) {
|
|
me.showEditor(ed, context, context.value);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
},
|
|
|
|
showEditor: function(ed, context, value) {
|
|
var me = this,
|
|
record = context.record,
|
|
columnHeader = context.column,
|
|
sm = me.grid.getSelectionModel(),
|
|
selection = sm.getCurrentPosition(),
|
|
otherView = selection && selection.view;
|
|
|
|
// Selection is for another view.
|
|
// This can happen in a lockable grid where there are two grids, each with a separate Editing plugin
|
|
if (otherView && otherView !== me.view) {
|
|
return me.lockingPartner.showEditor(ed, me.lockingPartner.getEditingContext(selection.record, selection.columnHeader), value);
|
|
}
|
|
|
|
me.setEditingContext(context);
|
|
me.setActiveEditor(ed);
|
|
me.setActiveRecord(record);
|
|
me.setActiveColumn(columnHeader);
|
|
|
|
// Select cell on edit only if it's not the currently selected cell
|
|
if (sm.selectByPosition && (!selection || selection.column !== context.colIdx || selection.row !== context.rowIdx)) {
|
|
sm.selectByPosition({
|
|
row: context.rowIdx,
|
|
column: context.colIdx,
|
|
view: me.view
|
|
});
|
|
}
|
|
|
|
ed.startEdit(me.getCell(record, columnHeader), value, context);
|
|
me.editing = true;
|
|
me.scroll = me.view.el.getScroll();
|
|
},
|
|
|
|
completeEdit: function() {
|
|
var activeEd = this.getActiveEditor();
|
|
if (activeEd) {
|
|
activeEd.completeEdit();
|
|
this.editing = false;
|
|
}
|
|
},
|
|
|
|
// internal getters/setters
|
|
setEditingContext: function(context) {
|
|
this.context = context;
|
|
if (this.lockingPartner) {
|
|
this.lockingPartner.context = context;
|
|
}
|
|
},
|
|
|
|
setActiveEditor: function(ed) {
|
|
this.activeEditor = ed;
|
|
if (this.lockingPartner) {
|
|
this.lockingPartner.activeEditor = ed;
|
|
}
|
|
},
|
|
|
|
getActiveEditor: function() {
|
|
return this.activeEditor;
|
|
},
|
|
|
|
setActiveColumn: function(column) {
|
|
this.activeColumn = column;
|
|
if (this.lockingPartner) {
|
|
this.lockingPartner.activeColumn = column;
|
|
}
|
|
},
|
|
|
|
getActiveColumn: function() {
|
|
return this.activeColumn;
|
|
},
|
|
|
|
setActiveRecord: function(record) {
|
|
this.activeRecord = record;
|
|
if (this.lockingPartner) {
|
|
this.lockingPartner.activeRecord = record;
|
|
}
|
|
},
|
|
|
|
getActiveRecord: function() {
|
|
return this.activeRecord;
|
|
},
|
|
|
|
getEditor: function(record, column) {
|
|
var me = this,
|
|
editors = me.editors,
|
|
editorId = column.getItemId(),
|
|
editor = editors.getByKey(editorId),
|
|
// Add to top level grid if we are editing one side of a locking system
|
|
editorOwner = me.grid.ownerLockable || me.grid;
|
|
|
|
if (!editor) {
|
|
editor = column.getEditor(record);
|
|
if (!editor) {
|
|
return false;
|
|
}
|
|
|
|
// Allow them to specify a CellEditor in the Column
|
|
if (editor instanceof Ext.grid.CellEditor) {
|
|
editor.floating = true;
|
|
}
|
|
// But if it's just a Field, wrap it.
|
|
else {
|
|
editor = new Ext.grid.CellEditor({
|
|
floating: true,
|
|
editorId: editorId,
|
|
field: editor
|
|
});
|
|
}
|
|
// Add the Editor as a floating child of the grid
|
|
editorOwner.add(editor);
|
|
editor.on({
|
|
scope: me,
|
|
specialkey: me.onSpecialKey,
|
|
complete: me.onEditComplete,
|
|
canceledit: me.cancelEdit
|
|
});
|
|
column.on('removed', me.cancelActiveEdit, me);
|
|
editors.add(editor);
|
|
}
|
|
|
|
if (column.isTreeColumn) {
|
|
editor.isForTree = column.isTreeColumn;
|
|
editor.addCls(Ext.baseCSSPrefix + 'tree-cell-editor')
|
|
}
|
|
editor.grid = me.grid;
|
|
|
|
// Keep upward pointer correct for each use - editors are shared between locking sides
|
|
editor.editingPlugin = me;
|
|
return editor;
|
|
},
|
|
|
|
cancelActiveEdit: function(column){
|
|
var context = this.context
|
|
if (context && context.column === column) {
|
|
this.cancelEdit();
|
|
}
|
|
},
|
|
|
|
// inherit docs
|
|
setColumnField: function(column, field) {
|
|
var ed = this.editors.getByKey(column.getItemId());
|
|
Ext.destroy(ed, column.field);
|
|
this.editors.removeAtKey(column.getItemId());
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Gets the cell (td) for a particular record and column.
|
|
* @param {Ext.data.Model} record
|
|
* @param {Ext.grid.column.Column} column
|
|
* @private
|
|
*/
|
|
getCell: function(record, column) {
|
|
return this.grid.getView().getCell(record, column);
|
|
},
|
|
|
|
onSpecialKey: function(ed, field, e) {
|
|
var sm;
|
|
|
|
if (e.getKey() === e.TAB) {
|
|
e.stopEvent();
|
|
|
|
if (ed) {
|
|
// Allow the field to act on tabs before onEditorTab, which ends
|
|
// up calling completeEdit. This is useful for picker type fields.
|
|
ed.onEditorTab(e);
|
|
}
|
|
|
|
sm = ed.up('tablepanel').getSelectionModel();
|
|
if (sm.onEditorTab) {
|
|
return sm.onEditorTab(ed.editingPlugin, e);
|
|
}
|
|
}
|
|
},
|
|
|
|
onEditComplete : function(ed, value, startValue) {
|
|
var me = this,
|
|
activeColumn = me.getActiveColumn(),
|
|
context = me.context,
|
|
record;
|
|
|
|
if (activeColumn) {
|
|
record = context.record;
|
|
|
|
me.setActiveEditor(null);
|
|
me.setActiveColumn(null);
|
|
me.setActiveRecord(null);
|
|
|
|
context.value = value;
|
|
if (!me.validateEdit()) {
|
|
return;
|
|
}
|
|
|
|
// Only update the record if the new value is different than the
|
|
// startValue. When the view refreshes its el will gain focus
|
|
if (!record.isEqual(value, startValue)) {
|
|
record.set(activeColumn.dataIndex, value);
|
|
}
|
|
|
|
// Restore focus back to the view.
|
|
// Use delay so that if we are completing due to tabbing, we can cancel the focus task
|
|
context.view.focus(false, true);
|
|
me.fireEvent('edit', me, context);
|
|
me.editing = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Cancels any active editing.
|
|
*/
|
|
cancelEdit: function() {
|
|
var me = this,
|
|
activeEd = me.getActiveEditor();
|
|
|
|
me.setActiveEditor(null);
|
|
me.setActiveColumn(null);
|
|
me.setActiveRecord(null);
|
|
if (activeEd) {
|
|
activeEd.cancelEdit();
|
|
me.context.view.focus();
|
|
me.callParent(arguments);
|
|
return;
|
|
}
|
|
// If we aren't editing, return true to allow the event to bubble
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Starts editing by position (row/column)
|
|
* @param {Object} position A position with keys of row and column.
|
|
*/
|
|
startEditByPosition: function(position) {
|
|
|
|
// If a raw {row:0, column:0} object passed.
|
|
if (!position.isCellContext) {
|
|
position = new Ext.grid.CellContext(this.view).setPosition(position);
|
|
}
|
|
|
|
// Coerce the edit column to the closest visible column
|
|
position.setColumn(this.view.getHeaderCt().getVisibleHeaderClosestToIndex(position.column).getIndex());
|
|
|
|
return this.startEdit(position.record, position.columnHeader);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.grid.plugin.DivRenderer', {
|
|
alias: 'plugin.divrenderer',
|
|
extend: Ext.AbstractPlugin ,
|
|
|
|
tableTpl: [
|
|
'<div id="{view.id}-table" class="' + Ext.baseCSSPrefix + '{view.id}-table ' + Ext.baseCSSPrefix + 'grid-table" style="{tableStyle}">',
|
|
'{%',
|
|
'values.view.renderRows(values.rows, values.viewStartIndex, out);',
|
|
'%}',
|
|
'</div>',
|
|
{
|
|
priority: 0
|
|
}
|
|
],
|
|
|
|
rowTpl: [
|
|
'{%',
|
|
'var dataRowCls = values.recordIndex === -1 ? "" : " ' + Ext.baseCSSPrefix + 'grid-data-row";',
|
|
'%}',
|
|
'<dl {[values.rowId ? ("id=\\"" + values.rowId + "\\"") : ""]} ',
|
|
'data-boundView="{view.id}" ',
|
|
'data-recordId="{record.internalId}" ',
|
|
'data-recordIndex="{recordIndex}" ',
|
|
'class="{[values.itemClasses.join(" ")]} {[values.rowClasses.join(" ")]}{[dataRowCls]}" ',
|
|
'style="position:relative" ',
|
|
'{rowAttr:attributes}>',
|
|
'<tpl for="columns">' +
|
|
'{%',
|
|
'parent.view.renderCell(values, parent.record, parent.recordIndex, xindex - 1, out, parent)',
|
|
'%}',
|
|
'</tpl>',
|
|
'</dl>',
|
|
{
|
|
priority: 0
|
|
}
|
|
],
|
|
|
|
cellTpl: [
|
|
'<dt class="{tdCls}" {tdAttr} data-cellIndex="{cellIndex}">',
|
|
'<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner"',
|
|
'style="text-align:{align};<tpl if="style">{style}</tpl>">{value}</div>',
|
|
'</dt>', {
|
|
priority: 0
|
|
}
|
|
],
|
|
|
|
selectors: {
|
|
// Outer table
|
|
bodySelector: 'div',
|
|
|
|
// Element which contains rows
|
|
nodeContainerSelector: 'div',
|
|
|
|
// view item (may be a wrapper)
|
|
itemSelector: 'dl.' + Ext.baseCSSPrefix + 'grid-row',
|
|
|
|
// row which contains cells as opposed to wrapping rows
|
|
dataRowSelector: 'dl.' + Ext.baseCSSPrefix + 'grid-data-row',
|
|
|
|
// cell
|
|
cellSelector: 'dt.' + Ext.baseCSSPrefix + 'grid-cell',
|
|
|
|
innerSelector: 'div.' + Ext.baseCSSPrefix + 'grid-cell-inner',
|
|
|
|
getNodeContainerSelector: function() {
|
|
return this.getBodySelector();
|
|
},
|
|
|
|
getNodeContainer: function() {
|
|
return this.el.getById(this.id + '-table', true);
|
|
}
|
|
},
|
|
|
|
init: function(grid) {
|
|
var view = grid.getView();
|
|
view.tableTpl = Ext.XTemplate.getTpl(this, 'tableTpl');
|
|
view.rowTpl = Ext.XTemplate.getTpl(this, 'rowTpl');
|
|
view.cellTpl = Ext.XTemplate.getTpl(this, 'cellTpl');
|
|
Ext.apply(view, this.selectors);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This plugin provides drag and/or drop functionality for a {@link Ext.grid.View GridView}.
|
|
*
|
|
* It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a {@link
|
|
* Ext.grid.View GridView} and loads the data object which is passed to a cooperating {@link Ext.dd.DragZone DragZone}'s
|
|
* methods with the following properties:
|
|
*
|
|
* - `copy` : {@link Boolean}
|
|
*
|
|
* The value of the {@link Ext.grid.View GridView}'s `copy` property, or `true` if the GridView was configured with `allowCopy: true` _and_
|
|
* the control key was pressed when the drag operation was begun.
|
|
*
|
|
* - `view` : {@link Ext.grid.View GridView}
|
|
*
|
|
* The source GridView from which the drag originated.
|
|
*
|
|
* - `ddel` : HtmlElement
|
|
*
|
|
* The drag proxy element which moves with the mouse
|
|
*
|
|
* - `item` : HtmlElement
|
|
*
|
|
* The GridView node upon which the mousedown event was registered.
|
|
*
|
|
* - `records` : {@link Array}
|
|
*
|
|
* An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source {@link Ext.grid.View GridView}.
|
|
*
|
|
* It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
|
|
* members of the same ddGroup which processes such data objects.
|
|
*
|
|
* Adding this plugin to a view means that two new events may be fired from the client GridView, `{@link #beforedrop
|
|
* beforedrop}` and `{@link #drop drop}`
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'simpsonsStore',
|
|
* fields:['name'],
|
|
* data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
|
|
* proxy: {
|
|
* type: 'memory',
|
|
* reader: 'array'
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* store: 'simpsonsStore',
|
|
* columns: [
|
|
* {header: 'Name', dataIndex: 'name', flex: true}
|
|
* ],
|
|
* viewConfig: {
|
|
* plugins: {
|
|
* ptype: 'gridviewdragdrop',
|
|
* dragText: 'Drag and drop to reorganize'
|
|
* }
|
|
* },
|
|
* height: 200,
|
|
* width: 400,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.plugin.DragDrop', {
|
|
extend: Ext.AbstractPlugin ,
|
|
alias: 'plugin.gridviewdragdrop',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @event beforedrop
|
|
* **This event is fired through the GridView. Add listeners to the {@link Ext.grid.View GridView} object**
|
|
*
|
|
* Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the GridView.
|
|
*
|
|
* Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
|
|
* back to the point from which the drag began.
|
|
*
|
|
* The dropHandlers parameter can be used to defer the processing of this event. For example to wait for the result of
|
|
* a message box confirmation or an asynchronous server call. See the details of this property for more information.
|
|
*
|
|
* @example
|
|
* view.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {
|
|
* // Defer the handling
|
|
* dropHandlers.wait = true;
|
|
* Ext.MessageBox.confirm('Drop', 'Are you sure', function(btn){
|
|
* if (btn === 'yes') {
|
|
* dropHandlers.processDrop();
|
|
* } else {
|
|
* dropHandlers.cancelDrop();
|
|
* }
|
|
* });
|
|
* });
|
|
*
|
|
* Any other return value continues with the data transfer operation, unless the wait property is set.
|
|
*
|
|
* @param {HTMLElement} node The {@link Ext.grid.View GridView} node **if any** over which the mouse was positioned.
|
|
*
|
|
* Any other return value continues with the data transfer operation.
|
|
*
|
|
* @param {Object} data The data object gathered at mousedown time by the cooperating
|
|
* {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
|
|
* properties:
|
|
* @param {Boolean} data.copy The value of the GridView's `copy` property, or `true` if the GridView was configured with
|
|
* `allowCopy: true` and the control key was pressed when the drag operation was begun
|
|
* @param {Ext.grid.View} data.view The source GridView from which the drag originated.
|
|
* @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
|
|
* @param {HTMLElement} data.item The GridView node upon which the mousedown event was registered.
|
|
* @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
|
|
* dragged from the source GridView.
|
|
*
|
|
* @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
|
|
*
|
|
* @param {String} dropPosition `"before"` or `"after"` depending on whether the mouse is above or below the midline
|
|
* of the node.
|
|
*
|
|
* @param {Object} dropHandlers
|
|
* This parameter allows the developer to control when the drop action takes place. It is useful if any asynchronous
|
|
* processing needs to be completed before performing the drop. This object has the following properties:
|
|
*
|
|
* @param {Boolean} dropHandlers.wait Indicates whether the drop should be deferred. Set this property to true to defer the drop.
|
|
* @param {Function} dropHandlers.processDrop A function to be called to complete the drop operation.
|
|
* @param {Function} dropHandlers.cancelDrop A function to be called to cancel the drop operation.
|
|
*/
|
|
|
|
/**
|
|
* @event drop
|
|
* **This event is fired through the GridView. Add listeners to the GridView object** Fired when a drop operation
|
|
* has been completed and the data has been moved or copied.
|
|
*
|
|
* @param {HTMLElement} node The GridView node **if any** over which the mouse was positioned.
|
|
*
|
|
* @param {Object} data The data object gathered at mousedown time by the cooperating {@link Ext.dd.DragZone
|
|
* DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following properties:
|
|
*
|
|
* - `copy` : {@link Boolean}
|
|
*
|
|
* The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` and
|
|
* the control key was pressed when the drag operation was begun
|
|
*
|
|
* - `view` : {@link Ext.grid.View GridView}
|
|
*
|
|
* The source GridView from which the drag originated.
|
|
*
|
|
* - `ddel` : HtmlElement
|
|
*
|
|
* The drag proxy element which moves with the mouse
|
|
*
|
|
* - `item` : HtmlElement
|
|
*
|
|
* The {@link Ext.grid.View GridView}{@link Ext.grid.View GridView} node upon which the mousedown event was registered.
|
|
*
|
|
* - `records` : {@link Array}
|
|
*
|
|
* An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
|
|
*
|
|
* @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
|
|
*
|
|
* @param {String} dropPosition `"before"` or `"after"` depending on whether the mouse is above or below the midline
|
|
* of the node.
|
|
*/
|
|
//<locale>
|
|
|
|
/**
|
|
* @cfg
|
|
* The text to show while dragging.
|
|
*
|
|
* Two placeholders can be used in the text:
|
|
*
|
|
* - `{0}` The number of selected items.
|
|
* - `{1}` 's' when more than 1 items (only useful for English).
|
|
*/
|
|
dragText : '{0} selected row{1}',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {String} ddGroup
|
|
* A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and
|
|
* DropZone used by this plugin will only interact with other drag drop objects in the same group.
|
|
*/
|
|
ddGroup : "GridDD",
|
|
|
|
/**
|
|
* @cfg {String} dragGroup
|
|
* The {@link #ddGroup} to which the DragZone will belong.
|
|
*
|
|
* This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other
|
|
* Drag/DropZones which are members of the same {@link #ddGroup}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} dropGroup
|
|
* The {@link #ddGroup} to which the DropZone will belong.
|
|
*
|
|
* This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other
|
|
* Drag/DropZones which are members of the same {@link #ddGroup}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} enableDrop
|
|
* `false` to disallow the View from accepting drop gestures.
|
|
*/
|
|
enableDrop: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableDrag
|
|
* `false` to disallow dragging items from the View.
|
|
*/
|
|
enableDrag: true,
|
|
|
|
/**
|
|
* `true` to register this container with the Scrollmanager for auto scrolling during drag operations.
|
|
* A {@link Ext.dd.ScrollManager} configuration may also be passed.
|
|
* @cfg {Object/Boolean} containerScroll
|
|
*/
|
|
containerScroll: false,
|
|
|
|
init : function(view) {
|
|
view.on('render', this.onViewRender, this, {single: true});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.dragZone, this.dropZone);
|
|
},
|
|
|
|
enable: function() {
|
|
var me = this;
|
|
if (me.dragZone) {
|
|
me.dragZone.unlock();
|
|
}
|
|
if (me.dropZone) {
|
|
me.dropZone.unlock();
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
disable: function() {
|
|
var me = this;
|
|
if (me.dragZone) {
|
|
me.dragZone.lock();
|
|
}
|
|
if (me.dropZone) {
|
|
me.dropZone.lock();
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
onViewRender : function(view) {
|
|
var me = this,
|
|
scrollEl;
|
|
|
|
if (me.enableDrag) {
|
|
if (me.containerScroll) {
|
|
scrollEl = view.getEl();
|
|
}
|
|
|
|
me.dragZone = new Ext.view.DragZone({
|
|
view: view,
|
|
ddGroup: me.dragGroup || me.ddGroup,
|
|
dragText: me.dragText,
|
|
containerScroll: me.containerScroll,
|
|
scrollEl: scrollEl
|
|
});
|
|
}
|
|
|
|
if (me.enableDrop) {
|
|
me.dropZone = new Ext.grid.ViewDropZone({
|
|
view: view,
|
|
ddGroup: me.dropGroup || me.ddGroup
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
|
|
* a small floating dialog will be shown for the appropriate row. Each editable column will show a field
|
|
* for editing. There is a button to save or cancel all changes for the edit.
|
|
*
|
|
* The field that will be used for the editor is defined at the
|
|
* {@link Ext.grid.column.Column#editor editor}. The editor can be a field instance or a field configuration.
|
|
* If an editor is not specified for a particular column then that column won't be editable and the value of
|
|
* the column will be displayed. To provide a custom renderer for non-editable values, use the
|
|
* {@link Ext.grid.column.Column#editRenderer editRenderer} configuration on the column.
|
|
*
|
|
* The editor may be shared for each column in the grid, or a different one may be specified for each column.
|
|
* An appropriate field type should be chosen to match the data structure that it will be editing. For example,
|
|
* to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.data.Store', {
|
|
* storeId:'simpsonsStore',
|
|
* fields:['name', 'email', 'phone'],
|
|
* data: [
|
|
* {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
|
|
* {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
|
|
* {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
|
|
* {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
|
|
* ]
|
|
* });
|
|
*
|
|
* Ext.create('Ext.grid.Panel', {
|
|
* title: 'Simpsons',
|
|
* store: Ext.data.StoreManager.lookup('simpsonsStore'),
|
|
* columns: [
|
|
* {header: 'Name', dataIndex: 'name', editor: 'textfield'},
|
|
* {header: 'Email', dataIndex: 'email', flex:1,
|
|
* editor: {
|
|
* xtype: 'textfield',
|
|
* allowBlank: false
|
|
* }
|
|
* },
|
|
* {header: 'Phone', dataIndex: 'phone'}
|
|
* ],
|
|
* selType: 'rowmodel',
|
|
* plugins: [
|
|
* Ext.create('Ext.grid.plugin.RowEditing', {
|
|
* clicksToEdit: 1
|
|
* })
|
|
* ],
|
|
* height: 200,
|
|
* width: 400,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
*/
|
|
Ext.define('Ext.grid.plugin.RowEditing', {
|
|
extend: Ext.grid.plugin.Editing ,
|
|
alias: 'plugin.rowediting',
|
|
|
|
|
|
|
|
|
|
|
|
lockableScope: 'top',
|
|
|
|
editStyle: 'row',
|
|
|
|
/**
|
|
* @cfg {Boolean} autoCancel
|
|
* `true` to automatically cancel any pending changes when the row editor begins editing a new row.
|
|
* `false` to force the user to explicitly cancel the pending changes.
|
|
*/
|
|
autoCancel: true,
|
|
|
|
/**
|
|
* @cfg {Number} clicksToMoveEditor
|
|
* The number of clicks to move the row editor to a new row while it is visible and actively editing another row.
|
|
* This will default to the same value as {@link Ext.grid.plugin.Editing#clicksToEdit clicksToEdit}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} errorSummary
|
|
* True to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
|
|
* in the row editor. Set to false to prevent the tooltip from showing.
|
|
*/
|
|
errorSummary: true,
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (!me.clicksToMoveEditor) {
|
|
me.clicksToMoveEditor = me.clicksToEdit;
|
|
}
|
|
|
|
me.autoCancel = !!me.autoCancel;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.editor);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Starts editing the specified record, using the specified Column definition to define which field is being edited.
|
|
* @param {Ext.data.Model} record The Store data record which backs the row to be edited.
|
|
* @param {Ext.data.Model} columnHeader The Column object defining the column to be edited.
|
|
* @return {Boolean} `true` if editing was started, `false` otherwise.
|
|
*/
|
|
startEdit: function(record, columnHeader) {
|
|
var me = this,
|
|
editor = me.getEditor(),
|
|
context;
|
|
|
|
if (editor.beforeEdit() !== false) {
|
|
context = me.callParent(arguments);
|
|
if (context) {
|
|
me.context = context;
|
|
|
|
// If editing one side of a lockable grid, cancel any edit on the other side.
|
|
if (me.lockingPartner) {
|
|
me.lockingPartner.cancelEdit();
|
|
}
|
|
editor.startEdit(context.record, context.column, context);
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
// @private
|
|
cancelEdit: function() {
|
|
var me = this;
|
|
|
|
if (me.editing) {
|
|
me.getEditor().cancelEdit();
|
|
me.callParent(arguments);
|
|
return;
|
|
}
|
|
// If we aren't editing, return true to allow the event to bubble
|
|
return true;
|
|
},
|
|
|
|
// @private
|
|
completeEdit: function() {
|
|
var me = this;
|
|
|
|
if (me.editing && me.validateEdit()) {
|
|
me.editing = false;
|
|
me.fireEvent('edit', me, me.context);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
validateEdit: function() {
|
|
var me = this,
|
|
editor = me.editor,
|
|
context = me.context,
|
|
record = context.record,
|
|
newValues = {},
|
|
originalValues = {},
|
|
editors = editor.query('>[isFormField]'),
|
|
e,
|
|
eLen = editors.length,
|
|
name, item;
|
|
|
|
for (e = 0; e < eLen; e++) {
|
|
item = editors[e];
|
|
name = item.name;
|
|
|
|
newValues[name] = item.getValue();
|
|
originalValues[name] = record.get(name);
|
|
}
|
|
|
|
Ext.apply(context, {
|
|
newValues : newValues,
|
|
originalValues : originalValues
|
|
});
|
|
|
|
return me.callParent(arguments) && me.getEditor().completeEdit();
|
|
},
|
|
|
|
// @private
|
|
getEditor: function() {
|
|
var me = this;
|
|
|
|
if (!me.editor) {
|
|
me.editor = me.initEditor();
|
|
}
|
|
return me.editor;
|
|
},
|
|
|
|
// @private
|
|
initEditor: function() {
|
|
return new Ext.grid.RowEditor(this.initEditorConfig());
|
|
},
|
|
|
|
initEditorConfig: function(){
|
|
var me = this,
|
|
grid = me.grid,
|
|
view = me.view,
|
|
headerCt = grid.headerCt,
|
|
btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
|
|
b,
|
|
bLen = btns.length,
|
|
cfg = {
|
|
autoCancel: me.autoCancel,
|
|
errorSummary: me.errorSummary,
|
|
fields: headerCt.getGridColumns(),
|
|
hidden: true,
|
|
view: view,
|
|
// keep a reference..
|
|
editingPlugin: me
|
|
},
|
|
item;
|
|
|
|
for (b = 0; b < bLen; b++) {
|
|
item = btns[b];
|
|
|
|
if (Ext.isDefined(me[item])) {
|
|
cfg[item] = me[item];
|
|
}
|
|
}
|
|
return cfg;
|
|
},
|
|
|
|
// @private
|
|
initEditTriggers: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.clicksToMoveEditor !== me.clicksToEdit) {
|
|
me.mon(view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);
|
|
}
|
|
|
|
view.on({
|
|
render: function() {
|
|
me.mon(me.grid.headerCt, {
|
|
scope: me,
|
|
columnresize: me.onColumnResize,
|
|
columnhide: me.onColumnHide,
|
|
columnshow: me.onColumnShow
|
|
});
|
|
},
|
|
single: true
|
|
});
|
|
},
|
|
|
|
startEditByClick: function() {
|
|
var me = this;
|
|
if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
|
|
me.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
moveEditorByClick: function() {
|
|
var me = this;
|
|
if (me.editing) {
|
|
me.superclass.onCellClick.apply(me, arguments);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onColumnAdd: function(ct, column) {
|
|
if (column.isHeader) {
|
|
var me = this,
|
|
editor;
|
|
|
|
me.initFieldAccessors(column);
|
|
|
|
// Only inform the editor about a new column if the editor has already been instantiated,
|
|
// so do not use getEditor which instantiates the editor if not present.
|
|
editor = me.editor;
|
|
if (editor && editor.onColumnAdd) {
|
|
editor.onColumnAdd(column);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onColumnRemove: function(ct, column) {
|
|
if (column.isHeader) {
|
|
var me = this,
|
|
editor = me.getEditor();
|
|
|
|
if (editor && editor.onColumnRemove) {
|
|
editor.onColumnRemove(ct, column);
|
|
}
|
|
me.removeFieldAccessors(column);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onColumnResize: function(ct, column, width) {
|
|
if (column.isHeader) {
|
|
var me = this,
|
|
editor = me.getEditor();
|
|
|
|
if (editor && editor.onColumnResize) {
|
|
editor.onColumnResize(column, width);
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onColumnHide: function(ct, column) {
|
|
// no isHeader check here since its already a columnhide event.
|
|
var me = this,
|
|
editor = me.getEditor();
|
|
|
|
if (editor && editor.onColumnHide) {
|
|
editor.onColumnHide(column);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onColumnShow: function(ct, column) {
|
|
// no isHeader check here since its already a columnshow event.
|
|
var me = this,
|
|
editor = me.getEditor();
|
|
|
|
if (editor && editor.onColumnShow) {
|
|
editor.onColumnShow(column);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onColumnMove: function(ct, column, fromIdx, toIdx) {
|
|
// no isHeader check here since its already a columnmove event.
|
|
var me = this,
|
|
editor = me.getEditor();
|
|
|
|
// Inject field accessors on move because if the move FROM the main headerCt and INTO a grouped header,
|
|
// the accessors will have been deleted but not added. They are added conditionally.
|
|
me.initFieldAccessors(column);
|
|
|
|
if (editor && editor.onColumnMove) {
|
|
// Must adjust the toIdx to account for removal if moving rightwards
|
|
// because RowEditor.onColumnMove just calls Container.move which does not do this.
|
|
editor.onColumnMove(column, fromIdx, toIdx);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
setColumnField: function(column, field) {
|
|
var me = this,
|
|
editor = me.getEditor();
|
|
|
|
editor.removeField(column);
|
|
me.callParent(arguments);
|
|
me.getEditor().setField(column);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.grid.plugin.RowEditing', {
|
|
override: 'Ext.grid.plugin.RowEditing',
|
|
|
|
initEditorConfig: function(){
|
|
var cfg = this.callParent();
|
|
cfg.rtl = this.grid.getHierarchyState().rtl;
|
|
return cfg;
|
|
}
|
|
});
|
|
|
|
// feature idea to enable Ajax loading and then the content
|
|
// cache would actually make sense. Should we dictate that they use
|
|
// data or support raw html as well?
|
|
|
|
/**
|
|
* Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
|
|
* a second row body which expands/contracts. The expand/contract behavior is configurable to react
|
|
* on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
|
|
*/
|
|
Ext.define('Ext.grid.plugin.RowExpander', {
|
|
extend: Ext.AbstractPlugin ,
|
|
lockableScope: 'normal',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alias: 'plugin.rowexpander',
|
|
|
|
rowBodyTpl: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} expandOnEnter
|
|
* <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
|
|
* key is pressed (defaults to <tt>true</tt>).
|
|
*/
|
|
expandOnEnter: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} expandOnDblClick
|
|
* <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
|
|
* (defaults to <tt>true</tt>).
|
|
*/
|
|
expandOnDblClick: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} selectRowOnExpand
|
|
* <tt>true</tt> to select a row when clicking on the expander icon
|
|
* (defaults to <tt>false</tt>).
|
|
*/
|
|
selectRowOnExpand: false,
|
|
|
|
rowBodyTrSelector: '.x-grid-rowbody-tr',
|
|
rowBodyHiddenCls: 'x-grid-row-body-hidden',
|
|
rowCollapsedCls: 'x-grid-row-collapsed',
|
|
|
|
addCollapsedCls: {
|
|
before: function(values, out) {
|
|
var me = this.rowExpander;
|
|
if (!me.recordsExpanded[values.record.internalId]) {
|
|
values.itemClasses.push(me.rowCollapsedCls);
|
|
}
|
|
},
|
|
priority: 500
|
|
},
|
|
|
|
/**
|
|
* @event expandbody
|
|
* **Fired through the grid's View**
|
|
* @param {HTMLElement} rowNode The <tr> element which owns the expanded row.
|
|
* @param {Ext.data.Model} record The record providing the data.
|
|
* @param {HTMLElement} expandRow The <tr> element containing the expanded data.
|
|
*/
|
|
/**
|
|
* @event collapsebody
|
|
* **Fired through the grid's View.**
|
|
* @param {HTMLElement} rowNode The <tr> element which owns the expanded row.
|
|
* @param {Ext.data.Model} record The record providing the data.
|
|
* @param {HTMLElement} expandRow The <tr> element containing the expanded data.
|
|
*/
|
|
|
|
setCmp: function(grid) {
|
|
var me = this,
|
|
rowBodyTpl,
|
|
features;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.recordsExpanded = {};
|
|
|
|
me.rowBodyTpl = Ext.XTemplate.getTpl(me, 'rowBodyTpl');
|
|
rowBodyTpl = this.rowBodyTpl;
|
|
features = [{
|
|
ftype: 'rowbody',
|
|
lockableScope: 'normal',
|
|
recordsExpanded: me.recordsExpanded,
|
|
rowBodyHiddenCls: me.rowBodyHiddenCls,
|
|
rowCollapsedCls: me.rowCollapsedCls,
|
|
setupRowData: me.getRowBodyFeatureData,
|
|
setup: me.setup,
|
|
getRowBodyContents: function(record) {
|
|
return rowBodyTpl.applyTemplate(record.getData());
|
|
}
|
|
},{
|
|
ftype: 'rowwrap',
|
|
lockableScope: 'normal'
|
|
}];
|
|
|
|
if (grid.features) {
|
|
grid.features = Ext.Array.push(features, grid.features);
|
|
} else {
|
|
grid.features = features;
|
|
}
|
|
// NOTE: features have to be added before init (before Table.initComponent)
|
|
},
|
|
|
|
init: function(grid) {
|
|
var me = this,
|
|
reconfigurable = grid,
|
|
view, lockedView;
|
|
|
|
me.callParent(arguments);
|
|
me.grid = grid;
|
|
view = me.view = grid.getView();
|
|
// Columns have to be added in init (after columns has been used to create the headerCt).
|
|
// Otherwise, shared column configs get corrupted, e.g., if put in the prototype.
|
|
me.addExpander();
|
|
|
|
// Bind to view for key and mouse events
|
|
// Add row processor which adds collapsed class
|
|
me.bindView(view);
|
|
view.addRowTpl(me.addCollapsedCls).rowExpander = me;
|
|
|
|
// If the owning grid is lockable, then disable row height syncing - we do it here.
|
|
// Also ensure the collapsed class is applied to the locked side by adding a row processor.
|
|
if (grid.ownerLockable) {
|
|
// If our client grid is the normal side of a lockable grid, we listen to its lockable owner's beforereconfigure
|
|
reconfigurable = grid.ownerLockable;
|
|
reconfigurable.syncRowHeight = false;
|
|
lockedView = reconfigurable.lockedGrid.getView();
|
|
|
|
// Bind to locked view for key and mouse events
|
|
// Add row processor which adds collapsed class
|
|
me.bindView(lockedView);
|
|
lockedView.addRowTpl(me.addCollapsedCls).rowExpander = me;
|
|
|
|
// Refresh row heights of expended rows on the locked (non body containing) side upon lock & unlock.
|
|
// The locked side's expanded rows will collapse back because there's no body there
|
|
reconfigurable.mon(reconfigurable, 'columnschanged', me.refreshRowHeights, me);
|
|
reconfigurable.mon(reconfigurable.store, 'datachanged', me.refreshRowHeights, me);
|
|
}
|
|
reconfigurable.on('beforereconfigure', me.beforeReconfigure, me);
|
|
|
|
if (grid.ownerLockable && !grid.rowLines) {
|
|
// grids without row lines can gain a border when focused. When they do, the
|
|
// stylesheet adjusts the padding of the cells so that the height of the row
|
|
// does not change. It is necessary to refresh the row heights for lockable
|
|
// grids on focus to keep the height of the expander cells in sync.
|
|
view.on('rowfocus', me.refreshRowHeights, me);
|
|
}
|
|
},
|
|
|
|
beforeReconfigure: function(grid, store, columns, oldStore, oldColumns) {
|
|
var expander = this.getHeaderConfig();
|
|
expander.locked = true;
|
|
columns.unshift(expander);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Inject the expander column into the correct grid.
|
|
*
|
|
* If we are expanding the normal side of a lockable grid, poke the column into the locked side
|
|
*/
|
|
addExpander: function() {
|
|
var me = this,
|
|
expanderGrid = me.grid,
|
|
expanderHeader = me.getHeaderConfig();
|
|
|
|
// If this is the normal side of a lockable grid, find the other side.
|
|
if (expanderGrid.ownerLockable) {
|
|
expanderGrid = expanderGrid.ownerLockable.lockedGrid;
|
|
expanderGrid.width += expanderHeader.width;
|
|
}
|
|
expanderGrid.headerCt.insert(0, expanderHeader);
|
|
},
|
|
|
|
getRowBodyFeatureData: function(record, idx, rowValues) {
|
|
var me = this
|
|
me.self.prototype.setupRowData.apply(me, arguments);
|
|
|
|
rowValues.rowBody = me.getRowBodyContents(record);
|
|
rowValues.rowBodyCls = me.recordsExpanded[record.internalId] ? '' : me.rowBodyHiddenCls;
|
|
},
|
|
|
|
setup: function(rows, rowValues){
|
|
var me = this;
|
|
me.self.prototype.setup.apply(me, arguments);
|
|
// If we are lockable, the expander column is moved into the locked side, so we don't have to span it
|
|
if (!me.grid.ownerLockable) {
|
|
rowValues.rowBodyColspan -= 1;
|
|
}
|
|
},
|
|
|
|
bindView: function(view) {
|
|
if (this.expandOnEnter) {
|
|
view.on('itemkeydown', this.onKeyDown, this);
|
|
}
|
|
if (this.expandOnDblClick) {
|
|
view.on('itemdblclick', this.onDblClick, this);
|
|
}
|
|
},
|
|
|
|
onKeyDown: function(view, record, row, rowIdx, e) {
|
|
if (e.getKey() == e.ENTER) {
|
|
var ds = view.store,
|
|
sels = view.getSelectionModel().getSelection(),
|
|
ln = sels.length,
|
|
i = 0;
|
|
|
|
for (; i < ln; i++) {
|
|
rowIdx = ds.indexOf(sels[i]);
|
|
this.toggleRow(rowIdx, sels[i]);
|
|
}
|
|
}
|
|
},
|
|
|
|
onDblClick: function(view, record, row, rowIdx, e) {
|
|
this.toggleRow(rowIdx, record);
|
|
},
|
|
|
|
toggleRow: function(rowIdx, record) {
|
|
var me = this,
|
|
view = me.view,
|
|
rowNode = view.getNode(rowIdx),
|
|
row = Ext.fly(rowNode, '_rowExpander'),
|
|
nextBd = row.down(me.rowBodyTrSelector, true),
|
|
isCollapsed = row.hasCls(me.rowCollapsedCls),
|
|
addOrRemoveCls = isCollapsed ? 'removeCls' : 'addCls',
|
|
ownerLock, rowHeight, fireView;
|
|
|
|
// Suspend layouts because of possible TWO views having their height change
|
|
Ext.suspendLayouts();
|
|
row[addOrRemoveCls](me.rowCollapsedCls);
|
|
Ext.fly(nextBd)[addOrRemoveCls](me.rowBodyHiddenCls);
|
|
me.recordsExpanded[record.internalId] = isCollapsed;
|
|
view.refreshSize();
|
|
|
|
// Sync the height and class of the row on the locked side
|
|
if (me.grid.ownerLockable) {
|
|
ownerLock = me.grid.ownerLockable;
|
|
fireView = ownerLock.getView();
|
|
view = ownerLock.lockedGrid.view;
|
|
rowHeight = row.getHeight();
|
|
row = Ext.fly(view.getNode(rowIdx), '_rowExpander');
|
|
row.setHeight(rowHeight);
|
|
row[addOrRemoveCls](me.rowCollapsedCls);
|
|
view.refreshSize();
|
|
} else {
|
|
fireView = view;
|
|
}
|
|
fireView.fireEvent(isCollapsed ? 'expandbody' : 'collapsebody', row.dom, record, nextBd);
|
|
// Coalesce laying out due to view size changes
|
|
Ext.resumeLayouts(true);
|
|
},
|
|
|
|
// refreshRowHeights often gets called in the middle of some complex processing.
|
|
// For example, it's called on the store's datachanged event, but it must execute
|
|
// *after* other objects interested in datachanged have done their job.
|
|
// Or it's called on column lock/unlock, but that could be just the start of a cross-container
|
|
// drag/drop of column headers which then moves the column into its final place.
|
|
// So this throws execution forwards until the idle event.
|
|
refreshRowHeights: function() {
|
|
Ext.globalEvents.on({
|
|
idle: this.doRefreshRowHeights,
|
|
scope: this,
|
|
single: true
|
|
});
|
|
},
|
|
|
|
doRefreshRowHeights: function() {
|
|
var me = this,
|
|
recordsExpanded = me.recordsExpanded,
|
|
key, record,
|
|
lockedView = me.grid.ownerLockable.lockedGrid.view,
|
|
normalView = me.grid.ownerLockable.normalGrid.view,
|
|
normalRow,
|
|
lockedRow,
|
|
lockedHeight,
|
|
normalHeight;
|
|
|
|
for (key in recordsExpanded) {
|
|
if (recordsExpanded.hasOwnProperty(key)) {
|
|
record = this.view.store.data.get(key);
|
|
lockedRow = lockedView.getNode(record, false);
|
|
normalRow = normalView.getNode(record, false);
|
|
lockedRow.style.height = normalRow.style.height = '';
|
|
lockedHeight = lockedRow.offsetHeight;
|
|
normalHeight = normalRow.offsetHeight;
|
|
if (normalHeight > lockedHeight) {
|
|
lockedRow.style.height = normalHeight + 'px';
|
|
} else if (lockedHeight > normalHeight) {
|
|
normalRow.style.height = lockedHeight + 'px';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getHeaderConfig: function() {
|
|
var me = this;
|
|
|
|
return {
|
|
width: 24,
|
|
lockable: false,
|
|
sortable: false,
|
|
resizable: false,
|
|
draggable: false,
|
|
hideable: false,
|
|
menuDisabled: true,
|
|
tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
|
|
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
|
|
renderer: function(value, metadata) {
|
|
// Only has to span 2 rows if it is not in a lockable grid.
|
|
if (!me.grid.ownerLockable) {
|
|
metadata.tdAttr += ' rowspan="2"';
|
|
}
|
|
return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander"></div>';
|
|
},
|
|
processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
|
|
if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
|
|
me.toggleRow(rowIndex, record);
|
|
return me.selectRowOnExpand;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A specialized grid implementation intended to mimic the traditional property grid as typically seen in
|
|
* development IDEs. Each row in the grid represents a property of some object, and the data is stored
|
|
* as a set of name/value pairs in {@link Ext.grid.property.Property Properties}. By default, the editors
|
|
* shown are inferred from the data in the cell. More control over this can be specified by using the
|
|
* {@link #sourceConfig} option. Example usage:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.grid.property.Grid', {
|
|
* title: 'Properties Grid',
|
|
* width: 300,
|
|
* renderTo: Ext.getBody(),
|
|
* source: {
|
|
* "(name)": "My Object",
|
|
* "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
|
|
* "Available": false,
|
|
* "Version": 0.01,
|
|
* "Description": "A test object"
|
|
* }
|
|
* });
|
|
*/
|
|
Ext.define('Ext.grid.property.Grid', {
|
|
|
|
extend: Ext.grid.Panel ,
|
|
|
|
alias: 'widget.propertygrid',
|
|
|
|
alternateClassName: 'Ext.grid.PropertyGrid',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Object} sourceConfig
|
|
* This option allows various configurations to be set for each field in the property grid.
|
|
* None of these configurations are required
|
|
*
|
|
* ####displayName
|
|
* A custom name to appear as label for this field. If specified, the display name will be shown
|
|
* in the name column instead of the property name. Example usage:
|
|
*
|
|
* new Ext.grid.property.Grid({
|
|
* source: {
|
|
* clientIsAvailable: true
|
|
* },
|
|
* sourceConfig: {
|
|
* clientIsAvailable: {
|
|
* // Custom name different to the field
|
|
* displayName: 'Available'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* ####renderer
|
|
* A function used to transform the underlying value before it is displayed in the grid.
|
|
* By default, the grid supports strongly-typed rendering of strings, dates, numbers and booleans using built-in form editors,
|
|
* but any custom type can be supported and associated with the type of the value. Example usage:
|
|
*
|
|
* new Ext.grid.property.Grid({
|
|
* source: {
|
|
* clientIsAvailable: true
|
|
* },
|
|
* sourceConfig: {
|
|
* clientIsAvailable: {
|
|
* // Custom renderer to change the color based on the value
|
|
* renderer: function(v){
|
|
* var color = v ? 'green' : 'red';
|
|
* return '<span style="color: ' + color + ';">' + v + '</span>';
|
|
* }
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* ####type
|
|
* Used to explicitly specify the editor type for a particular value. By default, the type is
|
|
* automatically inferred from the value. See {@link #inferTypes}. Accepted values are:
|
|
*
|
|
* - 'date'
|
|
* - 'boolean'
|
|
* - 'number'
|
|
* - 'string'
|
|
*
|
|
* For more advanced control an editor configuration can be passed (see the next section).
|
|
* Example usage:
|
|
*
|
|
* new Ext.grid.property.Grid({
|
|
* source: {
|
|
* attending: null
|
|
* },
|
|
* sourceConfig: {
|
|
* attending: {
|
|
* // Force the type to be a numberfield, a null value would otherwise default to a textfield
|
|
* type: 'number'
|
|
* }
|
|
* }
|
|
* });
|
|
*
|
|
* ####editor
|
|
* Allows the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing
|
|
* of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
|
|
* associated with a custom input control by specifying a custom editor. Example usage
|
|
*
|
|
* new Ext.grid.property.Grid({
|
|
* // Data object containing properties to edit
|
|
* source: {
|
|
* evtStart: '10:00 AM'
|
|
* },
|
|
*
|
|
* sourceConfig: {
|
|
* evtStart: {
|
|
* editor: Ext.create('Ext.form.field.Time', {selectOnFocus: true}),
|
|
* displayName: 'Start Time'
|
|
* }
|
|
* }
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} propertyNames
|
|
* An object containing custom property name/display name pairs.
|
|
* If specified, the display name will be shown in the name column instead of the property name.
|
|
* @deprecated See {@link #sourceConfig} displayName
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} source
|
|
* A data object to use as the data source of the grid (see {@link #setSource} for details).
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} customEditors
|
|
* An object containing name/value pairs of custom editor type definitions that allow
|
|
* the grid to support additional types of editable fields. By default, the grid supports strongly-typed editing
|
|
* of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
|
|
* associated with a custom input control by specifying a custom editor. The name of the editor
|
|
* type should correspond with the name of the property that will use the editor. Example usage:
|
|
*
|
|
* var grid = new Ext.grid.property.Grid({
|
|
*
|
|
* // Custom editors for certain property names
|
|
* customEditors: {
|
|
* evtStart: Ext.create('Ext.form.TimeField', {selectOnFocus: true})
|
|
* },
|
|
*
|
|
* // Displayed name for property names in the source
|
|
* propertyNames: {
|
|
* evtStart: 'Start Time'
|
|
* },
|
|
*
|
|
* // Data object containing properties to edit
|
|
* source: {
|
|
* evtStart: '10:00 AM'
|
|
* }
|
|
* });
|
|
* @deprecated See {@link #sourceConfig} editor
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} customRenderers
|
|
* An object containing name/value pairs of custom renderer type definitions that allow
|
|
* the grid to support custom rendering of fields. By default, the grid supports strongly-typed rendering
|
|
* of strings, dates, numbers and booleans using built-in form editors, but any custom type can be supported and
|
|
* associated with the type of the value. The name of the renderer type should correspond with the name of the property
|
|
* that it will render. Example usage:
|
|
*
|
|
* var grid = Ext.create('Ext.grid.property.Grid', {
|
|
* customRenderers: {
|
|
* Available: function(v){
|
|
* if (v) {
|
|
* return '<span style="color: green;">Yes</span>';
|
|
* } else {
|
|
* return '<span style="color: red;">No</span>';
|
|
* }
|
|
* }
|
|
* },
|
|
* source: {
|
|
* Available: true
|
|
* }
|
|
* });
|
|
* @deprecated See {@link #sourceConfig} renderer
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} valueField
|
|
* The name of the field from the property store to use as the value field name.
|
|
* This may be useful if you do not configure the property Grid from an object, but use your own store configuration.
|
|
*/
|
|
valueField: 'value',
|
|
|
|
/**
|
|
* @cfg {String} nameField
|
|
* The name of the field from the property store to use as the property field name.
|
|
* This may be useful if you do not configure the property Grid from an object, but use your own store configuration.
|
|
*/
|
|
nameField: 'name',
|
|
|
|
/**
|
|
* @cfg {Boolean} inferTypes
|
|
* True to automatically infer the {@link #sourceConfig type} based on the initial value passed
|
|
* for each field. This ensures the editor remains the correct type even if the value is blanked
|
|
* and becomes empty.
|
|
*/
|
|
inferTypes: true,
|
|
|
|
/**
|
|
* @cfg {Number/String} [nameColumnWidth=115]
|
|
* Specify the width for the name column. The value column will take any remaining space.
|
|
*/
|
|
|
|
// private config overrides
|
|
enableColumnMove: false,
|
|
columnLines: true,
|
|
stripeRows: false,
|
|
trackMouseOver: false,
|
|
clicksToEdit: 1,
|
|
enableHdMenu: false,
|
|
|
|
gridCls: Ext.baseCSSPrefix + 'property-grid',
|
|
|
|
// private
|
|
initComponent : function(){
|
|
var me = this;
|
|
|
|
me.source = me.source || {};
|
|
me.addCls(me.gridCls);
|
|
me.plugins = me.plugins || [];
|
|
|
|
// Enable cell editing. Inject a custom startEdit which always edits column 1 regardless of which column was clicked.
|
|
me.plugins.push(new Ext.grid.plugin.CellEditing({
|
|
clicksToEdit: me.clicksToEdit,
|
|
|
|
// 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.
|
|
return this.self.prototype.startEdit.call(this, record, me.headerCt.child('#' + me.valueField));
|
|
}
|
|
}));
|
|
|
|
me.selModel = {
|
|
selType: 'cellmodel',
|
|
onCellSelect: function(position) {
|
|
if (position.column != 1) {
|
|
position.column = 1;
|
|
}
|
|
return this.self.prototype.onCellSelect.call(this, position);
|
|
}
|
|
};
|
|
|
|
me.sourceConfig = Ext.apply({}, me.sourceConfig);
|
|
|
|
// Create a property.Store from the source object unless configured with a store
|
|
if (!me.store) {
|
|
me.propStore = me.store = new Ext.grid.property.Store(me, me.source);
|
|
}
|
|
me.configure(me.sourceConfig);
|
|
|
|
if (me.sortableColumns) {
|
|
me.store.sort('name', 'ASC');
|
|
}
|
|
me.columns = new Ext.grid.property.HeaderContainer(me, me.store);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforepropertychange
|
|
* Fires before a property value changes. Handlers can return false to cancel the property change
|
|
* (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
|
|
* @param {Object} value The current edited property value
|
|
* @param {Object} oldValue The original property value prior to editing
|
|
*/
|
|
'beforepropertychange',
|
|
/**
|
|
* @event propertychange
|
|
* Fires after a property value has changed.
|
|
* @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
|
|
* @param {Object} value The current edited property value
|
|
* @param {Object} oldValue The original property value prior to editing
|
|
*/
|
|
'propertychange'
|
|
);
|
|
me.callParent();
|
|
|
|
// Inject a custom implementation of walkCells which only goes up or down
|
|
me.getView().walkCells = this.walkCells;
|
|
|
|
// Set up our default editor set for the 4 atomic data types
|
|
me.editors = {
|
|
'date' : new Ext.grid.CellEditor({ field: new Ext.form.field.Date({selectOnFocus: true})}),
|
|
'string' : new Ext.grid.CellEditor({ field: new Ext.form.field.Text({selectOnFocus: true})}),
|
|
'number' : new Ext.grid.CellEditor({ field: new Ext.form.field.Number({selectOnFocus: true})}),
|
|
'boolean' : new Ext.grid.CellEditor({ field: new Ext.form.field.ComboBox({
|
|
editable: false,
|
|
store: [[ true, me.headerCt.trueText ], [false, me.headerCt.falseText ]]
|
|
})})
|
|
};
|
|
|
|
// Track changes to the data so we can fire our events.
|
|
me.store.on('update', me.onUpdate, me);
|
|
},
|
|
|
|
configure: function(config){
|
|
var me = this,
|
|
store = me.store,
|
|
i = 0,
|
|
len = me.store.getCount(),
|
|
nameField = me.nameField,
|
|
valueField = me.valueField,
|
|
name, value, rec, type;
|
|
|
|
me.configureLegacy(config);
|
|
|
|
if (me.inferTypes) {
|
|
for (; i < len; ++i) {
|
|
rec = store.getAt(i);
|
|
name = rec.get(nameField);
|
|
if (!me.getConfig(name, 'type')) {
|
|
value = rec.get(valueField);
|
|
if (Ext.isDate(value)) {
|
|
type = 'date';
|
|
} else if (Ext.isNumber(value)) {
|
|
type = 'number';
|
|
} else if (Ext.isBoolean(value)) {
|
|
type = 'boolean';
|
|
} else {
|
|
type = 'string';
|
|
}
|
|
me.setConfig(name, 'type', type);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getConfig: function(fieldName, key, defaultValue) {
|
|
var config = this.sourceConfig[fieldName],
|
|
out;
|
|
|
|
if (config) {
|
|
out = config[key];
|
|
}
|
|
return out || defaultValue;
|
|
},
|
|
|
|
setConfig: function(fieldName, key, value) {
|
|
var sourceCfg = this.sourceConfig,
|
|
o = sourceCfg[fieldName];
|
|
|
|
if (!o) {
|
|
o = sourceCfg[fieldName] = {
|
|
__copied: true
|
|
};
|
|
} else if (!o.__copied) {
|
|
o = Ext.apply({
|
|
__copied: true
|
|
}, o);
|
|
sourceCfg[fieldName] = o;
|
|
}
|
|
o[key] = value;
|
|
return value;
|
|
},
|
|
|
|
// to be deprecated in 4.2
|
|
configureLegacy: function(config){
|
|
var me = this,
|
|
o, key, value;
|
|
|
|
me.copyLegacyObject(config, me.customRenderers, 'renderer');
|
|
me.copyLegacyObject(config, me.customEditors, 'editor');
|
|
me.copyLegacyObject(config, me.propertyNames, 'displayName');
|
|
|
|
},
|
|
|
|
copyLegacyObject: function(config, o, keyName){
|
|
var key, value;
|
|
|
|
for (key in o) {
|
|
if (o.hasOwnProperty(key)) {
|
|
if (!config[key]) {
|
|
config[key] = {};
|
|
}
|
|
config[key][keyName] = o[key];
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
onUpdate : function(store, record, operation) {
|
|
var me = this,
|
|
v, oldValue;
|
|
|
|
if (me.rendered && operation == Ext.data.Model.EDIT) {
|
|
v = record.get(me.valueField);
|
|
oldValue = record.modified.value;
|
|
if (me.fireEvent('beforepropertychange', me.source, record.getId(), v, oldValue) !== false) {
|
|
if (me.source) {
|
|
me.source[record.getId()] = v;
|
|
}
|
|
record.commit();
|
|
me.fireEvent('propertychange', me.source, record.getId(), v, oldValue);
|
|
} else {
|
|
record.reject();
|
|
}
|
|
}
|
|
},
|
|
|
|
// Custom implementation of walkCells which only goes up and down.
|
|
walkCells: function(pos, direction, e, preventWrap, verifierFn, scope) {
|
|
if (direction == 'left') {
|
|
direction = 'up';
|
|
} else if (direction == 'right') {
|
|
direction = 'down';
|
|
}
|
|
pos = Ext.view.Table.prototype.walkCells.call(this, pos, direction, e, preventWrap, verifierFn, scope);
|
|
if (pos && !pos.column) {
|
|
pos.column = 1;
|
|
}
|
|
return pos;
|
|
},
|
|
|
|
// @private
|
|
// 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),
|
|
val = record.get(me.valueField),
|
|
editor = me.getConfig(propName, 'editor'),
|
|
type = me.getConfig(propName, 'type'),
|
|
editors = me.editors;
|
|
|
|
// A custom editor was found. If not already wrapped with a CellEditor, wrap it, and stash it back
|
|
// If it's not even a Field, just a config object, instantiate it before wrapping it.
|
|
if (editor) {
|
|
if (!(editor instanceof Ext.grid.CellEditor)) {
|
|
if (!(editor instanceof Ext.form.field.Base)) {
|
|
editor = Ext.ComponentManager.create(editor, 'textfield');
|
|
}
|
|
editor = me.setConfig(propName, 'editor', new Ext.grid.CellEditor({ field: editor }));
|
|
}
|
|
} else if (type) {
|
|
switch (type) {
|
|
case 'date':
|
|
editor = editors.date;
|
|
break;
|
|
case 'number':
|
|
editor = editors.number;
|
|
break;
|
|
case 'boolean':
|
|
editor = me.editors['boolean'];
|
|
break;
|
|
default:
|
|
editor = editors.string;
|
|
}
|
|
} else if (Ext.isDate(val)) {
|
|
editor = editors.date;
|
|
} else if (Ext.isNumber(val)) {
|
|
editor = editors.number;
|
|
} else if (Ext.isBoolean(val)) {
|
|
editor = editors['boolean'];
|
|
} else {
|
|
editor = editors.string;
|
|
}
|
|
|
|
// Give the editor a unique ID because the CellEditing plugin caches them
|
|
editor.editorId = propName;
|
|
return editor;
|
|
},
|
|
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
me.destroyEditors(me.editors);
|
|
me.destroyEditors(me.customEditors);
|
|
delete me.source;
|
|
},
|
|
|
|
destroyEditors: function (editors) {
|
|
for (var ed in editors) {
|
|
if (editors.hasOwnProperty(ed)) {
|
|
Ext.destroy(editors[ed]);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the source data object containing the property data. The data object can contain one or more name/value
|
|
* pairs representing all of the properties of an object to display in the grid, and this data will automatically
|
|
* be loaded into the grid's {@link #store}. The values should be supplied in the proper data type if needed,
|
|
* otherwise string type will be assumed. If the grid already contains data, this method will replace any
|
|
* existing data. See also the {@link #source} config value. Example usage:
|
|
*
|
|
* grid.setSource({
|
|
* "(name)": "My Object",
|
|
* "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'), // date type
|
|
* "Available": false, // boolean type
|
|
* "Version": .01, // decimal type
|
|
* "Description": "A test object"
|
|
* });
|
|
*
|
|
* @param {Object} source The data object.
|
|
* @param {Object} [sourceConfig] A new {@link #sourceConfig object}. If this argument is not passed
|
|
* the current configuration will be re-used. To reset the config, pass `null` or an empty object literal.
|
|
*/
|
|
setSource: function(source, sourceConfig) {
|
|
var me = this;
|
|
|
|
me.source = source;
|
|
if (sourceConfig !== undefined) {
|
|
me.sourceConfig = Ext.apply({}, sourceConfig);
|
|
me.configure(me.sourceConfig);
|
|
}
|
|
me.propStore.setSource(source);
|
|
},
|
|
|
|
/**
|
|
* Gets the source data object containing the property data. See {@link #setSource} for details regarding the
|
|
* format of the data object.
|
|
* @return {Object} The data object.
|
|
*/
|
|
getSource: function() {
|
|
return this.propStore.getSource();
|
|
},
|
|
|
|
/**
|
|
* Sets the value of a property.
|
|
* @param {String} prop The name of the property to set.
|
|
* @param {Object} value The value to test.
|
|
* @param {Boolean} [create=false] `true` to create the property if it doesn't already exist.
|
|
*/
|
|
setProperty: function(prop, value, create) {
|
|
this.propStore.setValue(prop, value, create);
|
|
},
|
|
|
|
/**
|
|
* Removes a property from the grid.
|
|
* @param {String} prop The name of the property to remove.
|
|
*/
|
|
removeProperty: function(prop) {
|
|
this.propStore.remove(prop);
|
|
}
|
|
|
|
/**
|
|
* @cfg {Object} store
|
|
* @private
|
|
*/
|
|
/**
|
|
* @cfg {Object} columns
|
|
* @private
|
|
*/
|
|
});
|
|
|
|
/**
|
|
* A custom HeaderContainer for the {@link Ext.grid.property.Grid}.
|
|
* Generally it should not need to be used directly.
|
|
*/
|
|
Ext.define('Ext.grid.property.HeaderContainer', {
|
|
|
|
extend: Ext.grid.header.Container ,
|
|
|
|
alternateClassName: 'Ext.grid.PropertyColumnModel',
|
|
|
|
nameWidth: 115,
|
|
|
|
// @private strings used for locale support
|
|
//<locale>
|
|
nameText : 'Name',
|
|
//</locale>
|
|
//<locale>
|
|
valueText : 'Value',
|
|
//</locale>
|
|
//<locale>
|
|
dateFormat : 'm/j/Y',
|
|
//</locale>
|
|
//<locale>
|
|
trueText: 'true',
|
|
//</locale>
|
|
//<locale>
|
|
falseText: 'false',
|
|
//</locale>
|
|
|
|
// @private
|
|
nameColumnCls: Ext.baseCSSPrefix + 'grid-property-name',
|
|
nameColumnInnerCls: Ext.baseCSSPrefix + 'grid-cell-inner-property-name',
|
|
|
|
/**
|
|
* 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([{
|
|
isRootHeader: true,
|
|
enableColumnResize: Ext.isDefined(grid.enableColumnResize) ? grid.enableColumnResize : me.enableColumnResize,
|
|
enableColumnMove: Ext.isDefined(grid.enableColumnMove) ? grid.enableColumnMove : me.enableColumnMove,
|
|
items: [{
|
|
header: me.nameText,
|
|
width: grid.nameColumnWidth || me.nameWidth,
|
|
sortable: grid.sortableColumns,
|
|
dataIndex: grid.nameField,
|
|
renderer: Ext.Function.bind(me.renderProp, me),
|
|
itemId: grid.nameField,
|
|
menuDisabled :true,
|
|
tdCls: me.nameColumnCls,
|
|
innerCls: me.nameColumnInnerCls
|
|
}, {
|
|
header: me.valueText,
|
|
renderer: Ext.Function.bind(me.renderCell, me),
|
|
getEditor: Ext.Function.bind(me.getCellEditor, me),
|
|
sortable: grid.sortableColumns,
|
|
flex: 1,
|
|
fixed: true,
|
|
dataIndex: grid.valueField,
|
|
itemId: grid.valueField,
|
|
menuDisabled: true
|
|
}]
|
|
}]);
|
|
},
|
|
|
|
getCellEditor: function(record){
|
|
return this.grid.getCellEditor(record, this);
|
|
},
|
|
|
|
// @private
|
|
// Render a property name cell
|
|
renderProp : function(v) {
|
|
return this.getPropertyName(v);
|
|
},
|
|
|
|
// @private
|
|
// Render a property value cell
|
|
renderCell : function(val, meta, rec) {
|
|
var me = this,
|
|
grid = me.grid,
|
|
renderer = grid.getConfig(rec.get(grid.nameField), 'renderer'),
|
|
result = val;
|
|
|
|
if (renderer) {
|
|
return renderer.apply(me, arguments);
|
|
}
|
|
if (Ext.isDate(val)) {
|
|
result = me.renderDate(val);
|
|
} else if (Ext.isBoolean(val)) {
|
|
result = me.renderBool(val);
|
|
}
|
|
return Ext.util.Format.htmlEncode(result);
|
|
},
|
|
|
|
// @private
|
|
renderDate : Ext.util.Format.date,
|
|
|
|
// @private
|
|
renderBool : function(bVal) {
|
|
return this[bVal ? 'trueText' : 'falseText'];
|
|
},
|
|
|
|
// @private
|
|
// Renders custom property names instead of raw names if defined in the Grid
|
|
getPropertyName : function(name) {
|
|
return this.grid.getConfig(name, 'displayName', name);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A specific {@link Ext.data.Model} type that represents a name/value pair and is made to work with the
|
|
* {@link Ext.grid.property.Grid}. Typically, Properties do not need to be created directly as they can be
|
|
* created implicitly by simply using the appropriate data configs either via the
|
|
* {@link Ext.grid.property.Grid#source} config property or by calling {@link Ext.grid.property.Grid#setSource}.
|
|
* However, if the need arises, these records can also be created explicitly as shown below. Example usage:
|
|
*
|
|
* var rec = new Ext.grid.property.Property({
|
|
* name: 'birthday',
|
|
* value: Ext.Date.parse('17/06/1962', 'd/m/Y')
|
|
* });
|
|
* // Add record to an already populated grid
|
|
* grid.store.addSorted(rec);
|
|
*
|
|
* @constructor
|
|
* Creates new property.
|
|
* @param {Object} config A data object in the format:
|
|
* @param {String/String[]} config.name A name or names for the property.
|
|
* @param {Mixed/Mixed[]} config.value A value or values for the property.
|
|
* The specified value's type will be read automatically by the grid to determine the type of editor to use when
|
|
* displaying it.
|
|
* @return {Object}
|
|
*/
|
|
Ext.define('Ext.grid.property.Property', {
|
|
extend: Ext.data.Model ,
|
|
|
|
alternateClassName: 'Ext.PropGridProperty',
|
|
|
|
fields: [{
|
|
name: 'name',
|
|
type: 'string'
|
|
}, {
|
|
name: 'value'
|
|
}],
|
|
idProperty: 'name'
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
Ext.define('Ext.grid.property.Store', {
|
|
|
|
extend: Ext.data.Store ,
|
|
|
|
alternateClassName: 'Ext.grid.PropertyStore',
|
|
|
|
sortOnLoad: false,
|
|
|
|
|
|
|
|
/**
|
|
* Creates new property store.
|
|
* @param {Ext.grid.Panel} grid The grid this store will be bound to
|
|
* @param {Object} source The source data config object
|
|
*/
|
|
constructor : function(grid, source){
|
|
var me = this;
|
|
|
|
me.grid = grid;
|
|
me.source = source;
|
|
me.callParent([{
|
|
data: source,
|
|
model: Ext.grid.property.Property,
|
|
proxy: me.getProxy()
|
|
}]);
|
|
},
|
|
|
|
// Return a singleton, customized Proxy object which configures itself with a custom Reader
|
|
getProxy: function() {
|
|
if (!this.proxy) {
|
|
Ext.grid.property.Store.prototype.proxy = new Ext.data.proxy.Memory({
|
|
model: Ext.grid.property.Property,
|
|
reader: this.getReader()
|
|
});
|
|
}
|
|
return this.proxy;
|
|
},
|
|
|
|
// Return a singleton, customized Reader object which reads Ext.grid.property.Property records from an object.
|
|
getReader: function() {
|
|
if (!this.reader) {
|
|
Ext.grid.property.Store.prototype.reader = new Ext.data.reader.Reader({
|
|
model: Ext.grid.property.Property,
|
|
|
|
buildExtractors: Ext.emptyFn,
|
|
|
|
read: function(dataObject) {
|
|
return this.readRecords(dataObject);
|
|
},
|
|
|
|
readRecords: function(dataObject) {
|
|
var val,
|
|
propName,
|
|
result = {
|
|
records: [],
|
|
success: true
|
|
};
|
|
|
|
for (propName in dataObject) {
|
|
if (dataObject.hasOwnProperty(propName)) {
|
|
val = dataObject[propName];
|
|
if (this.isEditableValue(val)) {
|
|
result.records.push(new Ext.grid.property.Property({
|
|
name: propName,
|
|
value: val
|
|
}, propName));
|
|
}
|
|
}
|
|
}
|
|
result.total = result.count = result.records.length;
|
|
return new Ext.data.ResultSet(result);
|
|
},
|
|
|
|
// @private
|
|
isEditableValue: function(val){
|
|
return Ext.isPrimitive(val) || Ext.isDate(val) || val === null;
|
|
}
|
|
});
|
|
}
|
|
return this.reader;
|
|
},
|
|
|
|
// @protected
|
|
// Should only be called by the grid. Use grid.setSource instead.
|
|
setSource : function(dataObject) {
|
|
var me = this;
|
|
|
|
me.source = dataObject;
|
|
me.suspendEvents();
|
|
me.removeAll();
|
|
me.proxy.data = dataObject;
|
|
me.load();
|
|
me.resumeEvents();
|
|
me.fireEvent('datachanged', me);
|
|
me.fireEvent('refresh', me);
|
|
},
|
|
|
|
// @private
|
|
getProperty : function(row) {
|
|
return Ext.isNumber(row) ? this.getAt(row) : this.getById(row);
|
|
},
|
|
|
|
// @private
|
|
setValue : function(prop, value, create){
|
|
var me = this,
|
|
rec = me.getRec(prop);
|
|
|
|
if (rec) {
|
|
rec.set('value', value);
|
|
me.source[prop] = value;
|
|
} else if (create) {
|
|
// only create if specified.
|
|
me.source[prop] = value;
|
|
rec = new Ext.grid.property.Property({name: prop, value: value}, prop);
|
|
me.add(rec);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
remove : function(prop) {
|
|
var rec = this.getRec(prop);
|
|
if (rec) {
|
|
this.callParent([rec]);
|
|
delete this.source[prop];
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getRec : function(prop) {
|
|
return this.getById(prop);
|
|
},
|
|
|
|
// @protected
|
|
// Should only be called by the grid. Use grid.getSource instead.
|
|
getSource : function() {
|
|
return this.source;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class provides a DOM ClassList API to buffer access to an element's class.
|
|
* Instances of this class are created by {@link Ext.layout.ContextItem#getClassList}.
|
|
*/
|
|
Ext.define('Ext.layout.ClassList', (function () {
|
|
|
|
var splitWords = Ext.String.splitWords,
|
|
toMap = Ext.Array.toMap;
|
|
|
|
return {
|
|
dirty: false,
|
|
|
|
constructor: function (owner) {
|
|
this.owner = owner;
|
|
this.map = toMap(this.classes = splitWords(owner.el.className));
|
|
},
|
|
|
|
/**
|
|
* Adds a single class to the class list.
|
|
*/
|
|
add: function (cls) {
|
|
var me = this;
|
|
|
|
if (!me.map[cls]) {
|
|
me.map[cls] = true;
|
|
me.classes.push(cls);
|
|
if (!me.dirty) {
|
|
me.dirty = true;
|
|
me.owner.markDirty();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds one or more classes in an array or space-delimited string to the class list.
|
|
*/
|
|
addMany: function (classes) {
|
|
Ext.each(splitWords(classes), this.add, this);
|
|
},
|
|
|
|
contains: function (cls) {
|
|
return this.map[cls];
|
|
},
|
|
|
|
flush: function () {
|
|
this.owner.el.className = this.classes.join(' ');
|
|
this.dirty = false;
|
|
},
|
|
|
|
/**
|
|
* Removes a single class from the class list.
|
|
*/
|
|
remove: function (cls) {
|
|
var me = this;
|
|
|
|
if (me.map[cls]) {
|
|
delete me.map[cls];
|
|
me.classes = Ext.Array.filter(me.classes, function (c) {
|
|
return c != cls;
|
|
});
|
|
if (!me.dirty) {
|
|
me.dirty = true;
|
|
me.owner.markDirty();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes one or more classes in an array or space-delimited string from the class
|
|
* list.
|
|
*/
|
|
removeMany: function (classes) {
|
|
var me = this,
|
|
remove = toMap(splitWords(classes));
|
|
|
|
me.classes = Ext.Array.filter(me.classes, function (c) {
|
|
if (!remove[c]) {
|
|
return true;
|
|
}
|
|
|
|
delete me.map[c];
|
|
if (!me.dirty) {
|
|
me.dirty = true;
|
|
me.owner.markDirty();
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
};
|
|
}()));
|
|
|
|
/**
|
|
* An internal Queue class.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.util.Queue', {
|
|
|
|
constructor: function() {
|
|
this.clear();
|
|
},
|
|
|
|
add : function(obj) {
|
|
var me = this,
|
|
key = me.getKey(obj);
|
|
|
|
if (!me.map[key]) {
|
|
++me.length;
|
|
me.items.push(obj);
|
|
me.map[key] = obj;
|
|
}
|
|
|
|
return obj;
|
|
},
|
|
|
|
/**
|
|
* Removes all items from the collection.
|
|
*/
|
|
clear : function(){
|
|
var me = this,
|
|
items = me.items;
|
|
|
|
me.items = [];
|
|
me.map = {};
|
|
me.length = 0;
|
|
|
|
return items;
|
|
},
|
|
|
|
contains: function (obj) {
|
|
var key = this.getKey(obj);
|
|
|
|
return this.map.hasOwnProperty(key);
|
|
},
|
|
|
|
/**
|
|
* Returns the number of items in the collection.
|
|
* @return {Number} the number of items in the collection.
|
|
*/
|
|
getCount : function(){
|
|
return this.length;
|
|
},
|
|
|
|
getKey : function(obj){
|
|
return obj.id;
|
|
},
|
|
|
|
/**
|
|
* Remove an item from the collection.
|
|
* @param {Object} obj The item to remove.
|
|
* @return {Object} The item removed or false if no item was removed.
|
|
*/
|
|
remove : function(obj){
|
|
var me = this,
|
|
key = me.getKey(obj),
|
|
items = me.items,
|
|
index;
|
|
|
|
if (me.map[key]) {
|
|
index = Ext.Array.indexOf(items, obj);
|
|
Ext.Array.erase(items, index, 1);
|
|
delete me.map[key];
|
|
--me.length;
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class manages state information for a component or element during a layout.
|
|
*
|
|
* # Blocks
|
|
*
|
|
* A "block" is a required value that is preventing further calculation. When a layout has
|
|
* encountered a situation where it cannot possibly calculate results, it can associate
|
|
* itself with the context item and missing property so that it will not be rescheduled
|
|
* until that property is set.
|
|
*
|
|
* Blocks are a one-shot registration. Once the property changes, the block is removed.
|
|
*
|
|
* Be careful with blocks. If *any* further calculations can be made, a block is not the
|
|
* right choice.
|
|
*
|
|
* # Triggers
|
|
*
|
|
* Whenever any call to {@link #getProp}, {@link #getDomProp}, {@link #hasProp} or
|
|
* {@link #hasDomProp} is made, the current layout is automatically registered as being
|
|
* dependent on that property in the appropriate state. Any changes to the property will
|
|
* trigger the layout and it will be queued in the {@link Ext.layout.Context}.
|
|
*
|
|
* Triggers, once added, remain for the entire layout. Any changes to the property will
|
|
* reschedule all unfinished layouts in their trigger set.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.ContextItem', {
|
|
|
|
|
|
|
|
heightModel: null,
|
|
widthModel: null,
|
|
sizeModel: null,
|
|
|
|
/**
|
|
* There are several cases that allow us to skip (opt out) of laying out a component
|
|
* and its children as long as its `lastBox` is not marked as `invalid`. If anything
|
|
* happens to change things, the `lastBox` is marked as `invalid` by `updateLayout`
|
|
* as it ascends the component hierarchy.
|
|
*
|
|
* @property {Boolean} optOut
|
|
* @private
|
|
* @readonly
|
|
*/
|
|
optOut: false,
|
|
|
|
ownerSizePolicy: null, // plaed here by AbstractComponent.getSizeModel
|
|
|
|
boxChildren: null,
|
|
|
|
boxParent: null,
|
|
isBorderBoxValue: null,
|
|
|
|
children: [],
|
|
|
|
dirty: null,
|
|
|
|
// The number of dirty properties
|
|
dirtyCount: 0,
|
|
|
|
hasRawContent: true,
|
|
|
|
isContextItem: true,
|
|
|
|
isTopLevel: false,
|
|
|
|
consumersContentHeight: 0,
|
|
consumersContentWidth: 0,
|
|
consumersContainerHeight: 0,
|
|
consumersContainerWidth: 0,
|
|
consumersHeight: 0,
|
|
consumersWidth: 0,
|
|
|
|
ownerCtContext: null,
|
|
|
|
remainingChildDimensions: 0,
|
|
|
|
// the current set of property values:
|
|
props: null,
|
|
|
|
/**
|
|
* @property {Object} state
|
|
* State variables that are cleared when invalidated. Only applies to component items.
|
|
*/
|
|
state: null,
|
|
|
|
/**
|
|
* @property {Boolean} wrapsComponent
|
|
* True if this item wraps a Component (rather than an Element).
|
|
* @readonly
|
|
*/
|
|
wrapsComponent: false,
|
|
|
|
constructor: function (config) {
|
|
var me = this,
|
|
sizeModels = Ext.layout.SizeModel.sizeModels,
|
|
configured = sizeModels.configured,
|
|
shrinkWrap = sizeModels.shrinkWrap,
|
|
el, lastBox, ownerCt, ownerCtContext, props, sizeModel, target,
|
|
lastWidth, lastHeight, sameWidth, sameHeight, widthModel, heightModel, optOut;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
el = me.el;
|
|
me.id = el.id;
|
|
|
|
// These hold collections of layouts that are either blocked or triggered by sets
|
|
// to our properties (either ASAP or after flushing to the DOM). All of them have
|
|
// the same structure:
|
|
//
|
|
// me.blocks = {
|
|
// width: {
|
|
// 'layout-1001': layout1001
|
|
// }
|
|
// }
|
|
//
|
|
// The property name is the primary key which yields an object keyed by layout id
|
|
// with the layout instance as the value. This prevents duplicate entries for one
|
|
// layout and gives O(1) access to the layout instance when we need to iterate and
|
|
// process them.
|
|
//
|
|
// me.blocks = {};
|
|
// me.domBlocks = {};
|
|
// me.domTriggers = {};
|
|
// me.triggers = {};
|
|
|
|
me.flushedProps = {};
|
|
me.props = props = {};
|
|
|
|
// the set of cached styles for the element:
|
|
me.styles = {};
|
|
|
|
target = me.target;
|
|
|
|
if (!target.isComponent) {
|
|
lastBox = el.lastBox;
|
|
} else {
|
|
me.wrapsComponent = true;
|
|
me.framing = target.frameSize || null;
|
|
me.isComponentChild = target.ownerLayout && target.ownerLayout.isComponentLayout;
|
|
|
|
lastBox = target.lastBox;
|
|
|
|
// These items are created top-down, so the ContextItem of our ownerCt should
|
|
// be available (if it is part of this layout run).
|
|
ownerCt = target.ownerCt;
|
|
if (ownerCt && (ownerCtContext = ownerCt.el && me.context.items[ownerCt.el.id])) {
|
|
me.ownerCtContext = ownerCtContext;
|
|
}
|
|
|
|
// If our ownerCtContext is in the run, it will have a SizeModel that we use to
|
|
// optimize the determination of our sizeModel.
|
|
me.sizeModel = sizeModel = target.getSizeModel(ownerCtContext &&
|
|
ownerCtContext.widthModel.pairsByHeightOrdinal[ownerCtContext.heightModel.ordinal]);
|
|
|
|
// NOTE: The initial determination of sizeModel is valid (thankfully) and is
|
|
// needed to cope with adding components to a layout run on-the-fly (e.g., in
|
|
// the menu overflow handler of a box layout). Since this is the case, we do
|
|
// not need to recompute the sizeModel in init unless it is a "full" init (as
|
|
// our ownerCt's sizeModel could have changed in that case).
|
|
|
|
me.widthModel = widthModel = sizeModel.width;
|
|
me.heightModel = heightModel = sizeModel.height;
|
|
|
|
// The lastBox is populated early but does not get an "invalid" property
|
|
// until layout has occurred. The "false" value is placed in the lastBox
|
|
// by Component.finishedLayout.
|
|
if (lastBox && lastBox.invalid === false) {
|
|
sameWidth = (target.width === (lastWidth = lastBox.width));
|
|
sameHeight = (target.height === (lastHeight = lastBox.height));
|
|
|
|
if (widthModel === shrinkWrap && heightModel === shrinkWrap) {
|
|
optOut = true;
|
|
} else if (widthModel === configured && sameWidth) {
|
|
optOut = heightModel === shrinkWrap ||
|
|
(heightModel === configured && sameHeight);
|
|
}
|
|
|
|
if (optOut) {
|
|
// Flag this component and capture its last size...
|
|
me.optOut = true;
|
|
props.width = lastWidth;
|
|
props.height = lastHeight;
|
|
}
|
|
}
|
|
}
|
|
|
|
me.lastBox = lastBox;
|
|
},
|
|
|
|
/**
|
|
* Clears all properties on this object except (perhaps) those not calculated by this
|
|
* component. This is more complex than it would seem because a layout can decide to
|
|
* invalidate its results and run the component's layouts again, but since some of the
|
|
* values may be calculated by the container, care must be taken to preserve those
|
|
* values.
|
|
*
|
|
* @param {Boolean} full True if all properties are to be invalidated, false to keep
|
|
* those calculated by the ownerCt.
|
|
* @return {Mixed} A value to pass as the first argument to {@link #initContinue}.
|
|
* @private
|
|
*/
|
|
init: function (full, options) {
|
|
var me = this,
|
|
oldProps = me.props,
|
|
oldDirty = me.dirty,
|
|
ownerCtContext = me.ownerCtContext,
|
|
ownerLayout = me.target.ownerLayout,
|
|
firstTime = !me.state,
|
|
ret = full || firstTime,
|
|
children, i, n, ownerCt, sizeModel, target,
|
|
oldHeightModel = me.heightModel,
|
|
oldWidthModel = me.widthModel,
|
|
newHeightModel, newWidthModel,
|
|
remainingCount = 0;
|
|
|
|
me.dirty = me.invalid = false;
|
|
me.props = {};
|
|
|
|
// Reset the number of child dimensions since the children will add their part:
|
|
me.remainingChildDimensions = 0;
|
|
|
|
if (me.boxChildren) {
|
|
me.boxChildren.length = 0; // keep array (more GC friendly)
|
|
}
|
|
|
|
if (!firstTime) {
|
|
me.clearAllBlocks('blocks');
|
|
me.clearAllBlocks('domBlocks');
|
|
}
|
|
|
|
// For Element wrappers, we are done...
|
|
if (!me.wrapsComponent) {
|
|
return ret;
|
|
}
|
|
|
|
// From here on, we are only concerned with Component wrappers...
|
|
target = me.target;
|
|
me.state = {}; // only Component wrappers need a "state"
|
|
|
|
if (firstTime) {
|
|
// This must occur before we proceed since it can do many things (like add
|
|
// child items perhaps):
|
|
if (target.beforeLayout && target.beforeLayout !== Ext.emptyFn) {
|
|
target.beforeLayout();
|
|
}
|
|
|
|
// Determine the ownerCtContext if we aren't given one. Normally the firstTime
|
|
// we meet a component is before the context is run, but it is possible for
|
|
// components to be added to a run that is already in progress. If so, we have
|
|
// to lookup the ownerCtContext since the odds are very high that the new
|
|
// component is a child of something already in the run. It is currently
|
|
// unsupported to drag in the owner of a running component (needs testing).
|
|
if (!ownerCtContext && (ownerCt = target.ownerCt)) {
|
|
ownerCtContext = me.context.items[ownerCt.el.id];
|
|
}
|
|
|
|
if (ownerCtContext) {
|
|
me.ownerCtContext = ownerCtContext;
|
|
me.isBoxParent = target.ownerLayout.isItemBoxParent(me);
|
|
} else {
|
|
me.isTopLevel = true; // this is used by initAnimation...
|
|
}
|
|
|
|
me.frameBodyContext = me.getEl('frameBody');
|
|
} else {
|
|
ownerCtContext = me.ownerCtContext;
|
|
|
|
// In theory (though untested), this flag can change on-the-fly...
|
|
me.isTopLevel = !ownerCtContext;
|
|
|
|
// Init the children element items since they may have dirty state (no need to
|
|
// do this the firstTime).
|
|
children = me.children;
|
|
for (i = 0, n = children.length; i < n; ++i) {
|
|
children[i].init(true);
|
|
}
|
|
}
|
|
|
|
// We need to know how we will determine content size: containers can look at the
|
|
// results of their items but non-containers or item-less containers with just raw
|
|
// markup need to be measured in the DOM:
|
|
me.hasRawContent = !(target.isContainer && target.items.items.length > 0);
|
|
|
|
if (full) {
|
|
// We must null these out or getSizeModel will assume they are the correct,
|
|
// dynamic size model and return them (the previous dynamic sizeModel).
|
|
me.widthModel = me.heightModel = null;
|
|
sizeModel = target.getSizeModel(ownerCtContext &&
|
|
ownerCtContext.widthModel.pairsByHeightOrdinal[ownerCtContext.heightModel.ordinal]);
|
|
|
|
if (firstTime) {
|
|
me.sizeModel = sizeModel;
|
|
}
|
|
|
|
me.widthModel = sizeModel.width;
|
|
me.heightModel = sizeModel.height;
|
|
|
|
// if we are a container child (e.g., not a docked item), and this is a full
|
|
// init, that means our parent was invalidated, and therefore both our width
|
|
// and our height are included in remainingChildDimensions
|
|
if (ownerCtContext && !me.isComponentChild) {
|
|
ownerCtContext.remainingChildDimensions += 2;
|
|
}
|
|
} else if (oldProps) {
|
|
// these are almost always calculated by the ownerCt (we might need to track
|
|
// this at some point more carefully):
|
|
me.recoverProp('x', oldProps, oldDirty);
|
|
me.recoverProp('y', oldProps, oldDirty);
|
|
|
|
// if these are calculated by the ownerCt, don't trash them:
|
|
if (me.widthModel.calculated) {
|
|
me.recoverProp('width', oldProps, oldDirty);
|
|
} else if ('width' in oldProps) {
|
|
++remainingCount;
|
|
}
|
|
if (me.heightModel.calculated) {
|
|
me.recoverProp('height', oldProps, oldDirty);
|
|
} else if ('height' in oldProps) {
|
|
++remainingCount;
|
|
}
|
|
|
|
// if we are a container child and this is not a full init, that means our
|
|
// parent was not invalidated and therefore only the dimensions that were
|
|
// set last time and removed from remainingChildDimensions last time, need to
|
|
// be added back to remainingChildDimensions. This only needs to happen for
|
|
// properties that we don't recover above (model=calculated)
|
|
if (ownerCtContext && !me.isComponentChild) {
|
|
ownerCtContext.remainingChildDimensions += remainingCount;
|
|
}
|
|
}
|
|
|
|
if (oldProps && ownerLayout && ownerLayout.manageMargins) {
|
|
me.recoverProp('margin-top', oldProps, oldDirty);
|
|
me.recoverProp('margin-right', oldProps, oldDirty);
|
|
me.recoverProp('margin-bottom', oldProps, oldDirty);
|
|
me.recoverProp('margin-left', oldProps, oldDirty);
|
|
}
|
|
|
|
// Process any invalidate options present. These can only come from explicit calls
|
|
// to the invalidate() method.
|
|
if (options) {
|
|
// Consider a container box with wrapping text. If the box is made wider, the
|
|
// text will take up less height (until there is no more wrapping). Conversely,
|
|
// if the box is made narrower, the height starts to increase due to wrapping.
|
|
//
|
|
// Imposing a minWidth constraint would increase the width. This may decrease
|
|
// the height. If the box is shrinkWrap, however, the width will already be
|
|
// such that there is no wrapping, so the height will not further decrease.
|
|
// Since the height will also not increase if we widen the box, there is no
|
|
// problem simultaneously imposing a minHeight or maxHeight constraint.
|
|
//
|
|
// When we impose as maxWidth constraint, however, we are shrinking the box
|
|
// which may increase the height. If we are imposing a maxHeight constraint,
|
|
// that is fine because a further increased height will still need to be
|
|
// constrained. But if we are imposing a minHeight constraint, we cannot know
|
|
// whether the increase in height due to wrapping will be greater than the
|
|
// minHeight. If we impose a minHeight constraint at the same time, then, we
|
|
// could easily be locking in the wrong height.
|
|
//
|
|
// It is important to note that this logic applies to simultaneously *adding*
|
|
// both a maxWidth and a minHeight constraint. It is perfectly fine to have
|
|
// a state with both constraints, but we cannot add them both at once.
|
|
newHeightModel = options.heightModel;
|
|
newWidthModel = options.widthModel;
|
|
if (newWidthModel && newHeightModel && oldWidthModel && oldHeightModel) {
|
|
if (oldWidthModel.shrinkWrap && oldHeightModel.shrinkWrap) {
|
|
if (newWidthModel.constrainedMax && newHeightModel.constrainedMin) {
|
|
newHeightModel = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Apply size model updates (if any) and state updates (if any).
|
|
if (newWidthModel) {
|
|
me.widthModel = newWidthModel;
|
|
}
|
|
if (newHeightModel) {
|
|
me.heightModel = newHeightModel;
|
|
}
|
|
|
|
if (options.state) {
|
|
Ext.apply(me.state, options.state);
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
initContinue: function (full) {
|
|
var me = this,
|
|
ownerCtContext = me.ownerCtContext,
|
|
comp = me.target,
|
|
widthModel = me.widthModel,
|
|
hierarchyState = comp.getHierarchyState(),
|
|
boxParent;
|
|
|
|
if (widthModel.fixed) { // calculated or configured
|
|
hierarchyState.inShrinkWrapTable = false;
|
|
} else {
|
|
delete hierarchyState.inShrinkWrapTable;
|
|
}
|
|
|
|
if (full) {
|
|
if (ownerCtContext && widthModel.shrinkWrap) {
|
|
boxParent = ownerCtContext.isBoxParent ? ownerCtContext : ownerCtContext.boxParent;
|
|
if (boxParent) {
|
|
boxParent.addBoxChild(me);
|
|
}
|
|
} else if (widthModel.natural) {
|
|
me.boxParent = ownerCtContext;
|
|
}
|
|
}
|
|
|
|
return full;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
initDone: function(containerLayoutDone) {
|
|
var me = this,
|
|
props = me.props,
|
|
state = me.state;
|
|
|
|
// These properties are only set when they are true:
|
|
if (me.remainingChildDimensions === 0) {
|
|
props.containerChildrenSizeDone = true;
|
|
}
|
|
if (containerLayoutDone) {
|
|
props.containerLayoutDone = true;
|
|
}
|
|
|
|
if (me.boxChildren && me.boxChildren.length && me.widthModel.shrinkWrap) {
|
|
// set a very large width to allow the children to measure their natural
|
|
// widths (this is cleared once all children have been measured):
|
|
me.el.setWidth(10000);
|
|
|
|
// don't run layouts for this component until we clear this width...
|
|
state.blocks = (state.blocks || 0) + 1;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
initAnimation: function() {
|
|
var me = this,
|
|
target = me.target,
|
|
ownerCtContext = me.ownerCtContext;
|
|
|
|
if (ownerCtContext && ownerCtContext.isTopLevel) {
|
|
// See which properties we are supposed to animate to their new state.
|
|
// If there are any, queue ourself to be animated by the owning Context
|
|
me.animatePolicy = target.ownerLayout.getAnimatePolicy(me);
|
|
} else if (!ownerCtContext && target.isCollapsingOrExpanding && target.animCollapse) {
|
|
// Collapsing/expnding a top level Panel with animation. We need to fabricate
|
|
// an animatePolicy depending on which dimension the collapse is using,
|
|
// isCollapsingOrExpanding is set during the collapse/expand process.
|
|
me.animatePolicy = target.componentLayout.getAnimatePolicy(me);
|
|
}
|
|
|
|
if (me.animatePolicy) {
|
|
me.context.queueAnimation(me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Queue the addition of a class name (or array of class names) to this ContextItem's target when next flushed.
|
|
*/
|
|
addCls: function(newCls) {
|
|
this.getClassList().addMany(newCls);
|
|
},
|
|
|
|
/**
|
|
* Queue the removal of a class name (or array of class names) from this ContextItem's target when next flushed.
|
|
*/
|
|
removeCls: function(removeCls) {
|
|
this.getClassList().removeMany(removeCls);
|
|
},
|
|
|
|
/**
|
|
* Adds a block.
|
|
*
|
|
* @param {String} name The name of the block list ('blocks' or 'domBlocks').
|
|
* @param {Ext.layout.Layout} layout The layout that is blocked.
|
|
* @param {String} propName The property name that blocked the layout (e.g., 'width').
|
|
* @private
|
|
*/
|
|
addBlock: function (name, layout, propName) {
|
|
var me = this,
|
|
collection = me[name] || (me[name] = {}),
|
|
blockedLayouts = collection[propName] || (collection[propName] = {});
|
|
|
|
if (!blockedLayouts[layout.id]) {
|
|
blockedLayouts[layout.id] = layout;
|
|
++layout.blockCount;
|
|
++me.context.blockCount;
|
|
}
|
|
},
|
|
|
|
addBoxChild: function (boxChildItem) {
|
|
var me = this,
|
|
children,
|
|
widthModel = boxChildItem.widthModel;
|
|
|
|
boxChildItem.boxParent = this;
|
|
|
|
// Children that are widthModel.auto (regardless of heightModel) that measure the
|
|
// DOM (by virtue of hasRawContent), need to wait for their "box parent" to be sized.
|
|
// If they measure too early, they will be wrong results. In the widthModel.shrinkWrap
|
|
// case, the boxParent "crushes" the child. In the case of widthModel.natural, the
|
|
// boxParent's width is likely a key part of the child's width (e.g., "50%" or just
|
|
// normal block-level behavior of 100% width)
|
|
boxChildItem.measuresBox = widthModel.shrinkWrap ? boxChildItem.hasRawContent : widthModel.natural;
|
|
|
|
if (boxChildItem.measuresBox) {
|
|
children = me.boxChildren;
|
|
|
|
if (children) {
|
|
children.push(boxChildItem);
|
|
} else {
|
|
me.boxChildren = [ boxChildItem ];
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Adds x and y values from a props object to a styles object as "left" and "top" values.
|
|
* Overridden to add the x property as "right" in rtl mode.
|
|
* @property {Object} styles A styles object for an Element
|
|
* @property {Object} props A ContextItem props object
|
|
* @return {Number} count The number of styles that were set.
|
|
* @private
|
|
*/
|
|
addPositionStyles: function(styles, props) {
|
|
var x = props.x,
|
|
y = props.y,
|
|
count = 0;
|
|
|
|
if (x !== undefined) {
|
|
styles.left = x + 'px';
|
|
++count;
|
|
}
|
|
if (y !== undefined) {
|
|
styles.top = y + 'px';
|
|
++count;
|
|
}
|
|
return count;
|
|
},
|
|
|
|
/**
|
|
* Adds a trigger.
|
|
*
|
|
* @param {String} propName The property name that triggers the layout (e.g., 'width').
|
|
* @param {Boolean} inDom True if the trigger list is `domTriggers`, false if `triggers`.
|
|
* @private
|
|
*/
|
|
addTrigger: function (propName, inDom) {
|
|
var me = this,
|
|
name = inDom ? 'domTriggers' : 'triggers',
|
|
collection = me[name] || (me[name] = {}),
|
|
context = me.context,
|
|
layout = context.currentLayout,
|
|
triggers = collection[propName] || (collection[propName] = {});
|
|
|
|
if (!triggers[layout.id]) {
|
|
triggers[layout.id] = layout;
|
|
++layout.triggerCount;
|
|
|
|
triggers = context.triggers[inDom ? 'dom' : 'data'];
|
|
(triggers[layout.id] || (triggers[layout.id] = [])).push({
|
|
item: this,
|
|
prop: propName
|
|
});
|
|
|
|
if (me.props[propName] !== undefined) {
|
|
if (!inDom || !(me.dirty && (propName in me.dirty))) {
|
|
++layout.firedTriggers;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
boxChildMeasured: function () {
|
|
var me = this,
|
|
state = me.state,
|
|
count = (state.boxesMeasured = (state.boxesMeasured || 0) + 1);
|
|
|
|
if (count == me.boxChildren.length) {
|
|
// all of our children have measured themselves, so we can clear the width
|
|
// and resume layouts for this component...
|
|
state.clearBoxWidth = 1;
|
|
++me.context.progressCount;
|
|
me.markDirty();
|
|
}
|
|
},
|
|
|
|
borderNames: [ 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],
|
|
marginNames: [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ],
|
|
paddingNames: [ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ],
|
|
trblNames: [ 'top', 'right', 'bottom', 'left' ],
|
|
|
|
cacheMissHandlers: {
|
|
borderInfo: function (me) {
|
|
var info = me.getStyles(me.borderNames, me.trblNames);
|
|
|
|
info.width = info.left + info.right;
|
|
info.height = info.top + info.bottom;
|
|
|
|
return info;
|
|
},
|
|
|
|
marginInfo: function (me) {
|
|
var info = me.getStyles(me.marginNames, me.trblNames);
|
|
|
|
info.width = info.left + info.right;
|
|
info.height = info.top + info.bottom;
|
|
|
|
return info;
|
|
},
|
|
|
|
paddingInfo: function (me) {
|
|
// if this context item's target is a framed component the padding is on the frameBody, not on the main el
|
|
var item = me.frameBodyContext || me,
|
|
info = item.getStyles(me.paddingNames, me.trblNames);
|
|
|
|
info.width = info.left + info.right;
|
|
info.height = info.top + info.bottom;
|
|
|
|
return info;
|
|
}
|
|
},
|
|
|
|
checkCache: function (entry) {
|
|
return this.cacheMissHandlers[entry](this);
|
|
},
|
|
|
|
clearAllBlocks: function (name) {
|
|
var collection = this[name],
|
|
propName;
|
|
|
|
if (collection) {
|
|
for (propName in collection) {
|
|
this.clearBlocks(name, propName);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes any blocks on a property in the specified set. Any layouts that were blocked
|
|
* by this property and are not still blocked (by other properties) will be rescheduled.
|
|
*
|
|
* @param {String} name The name of the block list ('blocks' or 'domBlocks').
|
|
* @param {String} propName The property name that blocked the layout (e.g., 'width').
|
|
* @private
|
|
*/
|
|
clearBlocks: function (name, propName) {
|
|
var collection = this[name],
|
|
blockedLayouts = collection && collection[propName],
|
|
context, layout, layoutId;
|
|
|
|
if (blockedLayouts) {
|
|
delete collection[propName];
|
|
|
|
context = this.context;
|
|
|
|
for (layoutId in blockedLayouts) {
|
|
layout = blockedLayouts[layoutId];
|
|
|
|
--context.blockCount;
|
|
if (! --layout.blockCount && !layout.pending && !layout.done) {
|
|
context.queueLayout(layout);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Registers a layout in the block list for the given property. Once the property is
|
|
* set in the {@link Ext.layout.Context}, the layout is unblocked.
|
|
*
|
|
* @param {Ext.layout.Layout} layout
|
|
* @param {String} propName The property name that blocked the layout (e.g., 'width').
|
|
*/
|
|
block: function (layout, propName) {
|
|
this.addBlock('blocks', layout, propName);
|
|
},
|
|
|
|
/**
|
|
* Registers a layout in the DOM block list for the given property. Once the property
|
|
* flushed to the DOM by the {@link Ext.layout.Context}, the layout is unblocked.
|
|
*
|
|
* @param {Ext.layout.Layout} layout
|
|
* @param {String} propName The property name that blocked the layout (e.g., 'width').
|
|
*/
|
|
domBlock: function (layout, propName) {
|
|
this.addBlock('domBlocks', layout, propName);
|
|
},
|
|
|
|
/**
|
|
* Reschedules any layouts associated with a given trigger.
|
|
*
|
|
* @param {String} name The name of the trigger list ('triggers' or 'domTriggers').
|
|
* @param {String} propName The property name that triggers the layout (e.g., 'width').
|
|
* @private
|
|
*/
|
|
fireTriggers: function (name, propName) {
|
|
var collection = this[name],
|
|
triggers = collection && collection[propName],
|
|
context = this.context,
|
|
layout, layoutId;
|
|
|
|
if (triggers) {
|
|
for (layoutId in triggers) {
|
|
layout = triggers[layoutId];
|
|
++layout.firedTriggers;
|
|
if (!layout.done && !layout.blockCount && !layout.pending) {
|
|
context.queueLayout(layout);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Flushes any updates in the dirty collection to the DOM. This is only called if there
|
|
* are dirty entries because this object is only added to the flushQueue of the
|
|
* {@link Ext.layout.Context} when entries become dirty.
|
|
*/
|
|
flush: function () {
|
|
var me = this,
|
|
dirty = me.dirty,
|
|
state = me.state,
|
|
targetEl = me.el;
|
|
|
|
me.dirtyCount = 0;
|
|
|
|
// Flush added/removed classes
|
|
if (me.classList && me.classList.dirty) {
|
|
me.classList.flush();
|
|
}
|
|
|
|
// Set any queued DOM attributes
|
|
if ('attributes' in me) {
|
|
targetEl.set(me.attributes);
|
|
delete me.attributes;
|
|
}
|
|
|
|
// Set any queued DOM HTML content
|
|
if ('innerHTML' in me) {
|
|
targetEl.innerHTML = me.innerHTML;
|
|
delete me.innerHTML;
|
|
}
|
|
|
|
if (state && state.clearBoxWidth) {
|
|
state.clearBoxWidth = 0;
|
|
me.el.setStyle('width', null);
|
|
|
|
if (! --state.blocks) {
|
|
me.context.queueItemLayouts(me);
|
|
}
|
|
}
|
|
|
|
if (dirty) {
|
|
delete me.dirty;
|
|
me.writeProps(dirty, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
flushAnimations: function() {
|
|
var me = this,
|
|
animateFrom = me.previousSize,
|
|
target, targetAnim, duration, animateProps, anim,
|
|
changeCount, j, propsLen, propName, oldValue, newValue;
|
|
|
|
// Only animate if the Component has been previously layed out: first layout should not animate
|
|
if (animateFrom) {
|
|
target = me.target;
|
|
targetAnim = target.layout && target.layout.animate;
|
|
if (targetAnim) {
|
|
duration = Ext.isNumber(targetAnim) ? targetAnim : targetAnim.duration;
|
|
}
|
|
animateProps = Ext.Object.getKeys(me.animatePolicy);
|
|
|
|
// Create an animation block using the targetAnim configuration to provide defaults.
|
|
// They may want custom duration, or easing, or listeners.
|
|
anim = Ext.apply({}, {
|
|
from: {},
|
|
to: {},
|
|
duration: duration || Ext.fx.Anim.prototype.duration
|
|
}, targetAnim);
|
|
|
|
for (changeCount = 0, j = 0, propsLen = animateProps.length; j < propsLen; j++) {
|
|
propName = animateProps[j];
|
|
oldValue = animateFrom[propName];
|
|
newValue = me.peek(propName);
|
|
if (oldValue != newValue) {
|
|
propName = me.translateProps[propName]||propName;
|
|
anim.from[propName] = oldValue;
|
|
anim.to[propName] = newValue;
|
|
++changeCount;
|
|
}
|
|
}
|
|
|
|
// If any values have changed, kick off animation from the cached old values to the new values
|
|
if (changeCount) {
|
|
// It'a Panel being collapsed. rollback, and then fix the class name string
|
|
if (me.isCollapsingOrExpanding === 1) {
|
|
target.componentLayout.undoLayout(me);
|
|
}
|
|
|
|
// Otherwise, undo just the animated properties so the animation can proceed from the old layout.
|
|
else {
|
|
me.writeProps(anim.from);
|
|
}
|
|
me.el.animate(anim);
|
|
|
|
Ext.fx.Manager.getFxQueue(me.el.id)[0].on({
|
|
afteranimate: function() {
|
|
if (me.isCollapsingOrExpanding === 1) {
|
|
target.componentLayout.redoLayout(me);
|
|
target.afterCollapse(true);
|
|
} else if (me.isCollapsingOrExpanding === 2) {
|
|
target.afterExpand(true);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Gets the border information for the element as an object with left, top, right and
|
|
* bottom properties holding border size in pixels. This object is only read from the
|
|
* DOM on first request and is cached.
|
|
* @return {Object}
|
|
*/
|
|
getBorderInfo: function () {
|
|
var me = this,
|
|
info = me.borderInfo;
|
|
|
|
if (!info) {
|
|
me.borderInfo = info = me.checkCache('borderInfo');
|
|
}
|
|
|
|
return info;
|
|
},
|
|
|
|
/**
|
|
* Returns a ClassList-like object to buffer access to this item's element's classes.
|
|
*/
|
|
getClassList: function () {
|
|
return this.classList || (this.classList = new Ext.layout.ClassList(this));
|
|
},
|
|
|
|
/**
|
|
* @member Ext.layout.ContextItem
|
|
* Returns the context item for an owned element. This should only be called on a
|
|
* component's item. The list of child items is used to manage invalidating calculated
|
|
* results.
|
|
* @param {String/Ext.dom.Element} nameOrEl The element or the name of an owned element
|
|
* @param {Ext.layout.container.Container/Ext.Component} [owner] The owner of the
|
|
* named element if the passed "nameOrEl" parameter is a String. Defaults to this
|
|
* ContextItem's "target" property. For more details on owned elements see
|
|
* {@link Ext.Component#cfg-childEls childEls} and
|
|
* {@link Ext.Component#renderSelectors renderSelectors}
|
|
* @return {Ext.layout.ContextItem}
|
|
*/
|
|
getEl: function (nameOrEl, owner) {
|
|
var me = this,
|
|
src, el, elContext;
|
|
|
|
if (nameOrEl) {
|
|
if (nameOrEl.dom) {
|
|
el = nameOrEl;
|
|
} else {
|
|
src = me.target;
|
|
if (owner) {
|
|
src = owner;
|
|
}
|
|
|
|
el = src[nameOrEl];
|
|
if (typeof el == 'function') { // ex 'getTarget'
|
|
el = el.call(src);
|
|
if (el === me.el) {
|
|
return this; // comp.getTarget() often returns comp.el
|
|
}
|
|
}
|
|
}
|
|
|
|
if (el) {
|
|
elContext = me.context.getEl(me, el);
|
|
}
|
|
}
|
|
|
|
return elContext || null;
|
|
},
|
|
|
|
/**
|
|
* Gets the "frame" information for the element as an object with left, top, right and
|
|
* bottom properties holding border+framing size in pixels. This object is calculated
|
|
* on first request and is cached.
|
|
* @return {Object}
|
|
*/
|
|
getFrameInfo: function () {
|
|
var me = this,
|
|
info = me.frameInfo,
|
|
framing, border;
|
|
|
|
if (!info) {
|
|
framing = me.framing;
|
|
border = me.getBorderInfo();
|
|
|
|
me.frameInfo = info =
|
|
framing ? {
|
|
top : framing.top + border.top,
|
|
right : framing.right + border.right,
|
|
bottom: framing.bottom + border.bottom,
|
|
left : framing.left + border.left,
|
|
width : framing.width + border.width,
|
|
height: framing.height + border.height
|
|
} : border;
|
|
}
|
|
|
|
return info;
|
|
},
|
|
|
|
/**
|
|
* Gets the margin information for the element as an object with left, top, right and
|
|
* bottom properties holding margin size in pixels. This object is only read from the
|
|
* DOM on first request and is cached.
|
|
* @return {Object}
|
|
*/
|
|
getMarginInfo: function () {
|
|
var me = this,
|
|
info = me.marginInfo,
|
|
comp, manageMargins, margins, ownerLayout, ownerLayoutId;
|
|
|
|
if (!info) {
|
|
if (!me.wrapsComponent) {
|
|
info = me.checkCache('marginInfo');
|
|
} else {
|
|
comp = me.target;
|
|
ownerLayout = comp.ownerLayout;
|
|
ownerLayoutId = ownerLayout ? ownerLayout.id : null;
|
|
manageMargins = ownerLayout && ownerLayout.manageMargins;
|
|
|
|
// Option #1 for configuring margins on components is the "margin" config
|
|
// property. When supplied, this config is written to the DOM during the
|
|
// render process (see AbstractComponent#initStyles).
|
|
//
|
|
// Option #2 is available to some layouts (e.g., Box, Border, Fit) that
|
|
// handle margin calculations themselves. These layouts support a "margins"
|
|
// config property on their items and they have a "defaultMargins" config
|
|
// property. These margin values are added to the "natural" margins read
|
|
// from the DOM and 0's are written to the DOM after they are added.
|
|
|
|
// To avoid having to do all this on every layout, we cache the results on
|
|
// the component in the (private) "margin$" property. We identify the cache
|
|
// results as belonging to the appropriate ownerLayout in case items are
|
|
// moved around.
|
|
|
|
info = comp.margin$;
|
|
if (info && info.ownerId !== ownerLayoutId) {
|
|
// got one but from the wrong owner
|
|
info = null;
|
|
|
|
// if (manageMargins) {
|
|
// TODO: clear inline margins (the 0's we wrote last time)???
|
|
// }
|
|
}
|
|
|
|
if (!info) { // if (no cache)
|
|
// CSS margins are only checked if there isn't a margin property on the component
|
|
info = me.parseMargins(comp, comp.margin) || me.checkCache('marginInfo');
|
|
|
|
// Some layouts also support margins and defaultMargins, e.g. Fit, Border, Box
|
|
if (manageMargins) {
|
|
margins = me.parseMargins(comp, comp.margins, ownerLayout.defaultMargins);
|
|
|
|
if (margins) { // if (using 'margins' and/or 'defaultMargins')
|
|
// margin and margins can both be present at the same time and must be combined
|
|
info = {
|
|
top: info.top + margins.top,
|
|
right: info.right + margins.right,
|
|
bottom: info.bottom + margins.bottom,
|
|
left: info.left + margins.left
|
|
};
|
|
}
|
|
|
|
me.setProp('margin-top', 0);
|
|
me.setProp('margin-right', 0);
|
|
me.setProp('margin-bottom', 0);
|
|
me.setProp('margin-left', 0);
|
|
}
|
|
|
|
// cache the layout margins and tag them with the layout id:
|
|
info.ownerId = ownerLayoutId;
|
|
comp.margin$ = info;
|
|
}
|
|
|
|
info.width = info.left + info.right;
|
|
info.height = info.top + info.bottom;
|
|
}
|
|
|
|
me.marginInfo = info;
|
|
}
|
|
|
|
return info;
|
|
},
|
|
|
|
/**
|
|
* clears the margin cache so that marginInfo get re-read from the dom on the next call to getMarginInfo()
|
|
* This is needed in some special cases where the margins have changed since the last layout, making the cached
|
|
* values invalid. For example collapsed window headers have different margin than expanded ones.
|
|
*/
|
|
clearMarginCache: function() {
|
|
delete this.marginInfo;
|
|
delete this.target.margin$;
|
|
},
|
|
|
|
/**
|
|
* Gets the padding information for the element as an object with left, top, right and
|
|
* bottom properties holding padding size in pixels. This object is only read from the
|
|
* DOM on first request and is cached.
|
|
* @return {Object}
|
|
*/
|
|
getPaddingInfo: function () {
|
|
var me = this,
|
|
info = me.paddingInfo;
|
|
|
|
if (!info) {
|
|
me.paddingInfo = info = me.checkCache('paddingInfo');
|
|
}
|
|
|
|
return info;
|
|
},
|
|
|
|
/**
|
|
* Gets a property of this object. Also tracks the current layout as dependent on this
|
|
* property so that changes to it will trigger the layout to be recalculated.
|
|
* @param {String} propName The property name that blocked the layout (e.g., 'width').
|
|
* @return {Object} The property value or undefined if not yet set.
|
|
*/
|
|
getProp: function (propName) {
|
|
var me = this,
|
|
result = me.props[propName];
|
|
|
|
me.addTrigger(propName);
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Gets a property of this object if it is correct in the DOM. Also tracks the current
|
|
* layout as dependent on this property so that DOM writes of it will trigger the
|
|
* layout to be recalculated.
|
|
* @param {String} propName The property name (e.g., 'width').
|
|
* @return {Object} The property value or undefined if not yet set or is dirty.
|
|
*/
|
|
getDomProp: function (propName) {
|
|
var me = this,
|
|
result = (me.dirty && (propName in me.dirty)) ? undefined : me.props[propName];
|
|
|
|
me.addTrigger(propName, true);
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* Returns a style for this item. Each style is read from the DOM only once on first
|
|
* request and is then cached. If the value is an integer, it is parsed automatically
|
|
* (so '5px' is not returned, but rather 5).
|
|
*
|
|
* @param {String} styleName The CSS style name.
|
|
* @return {Object} The value of the DOM style (parsed as necessary).
|
|
*/
|
|
getStyle: function (styleName) {
|
|
var me = this,
|
|
styles = me.styles,
|
|
info, value;
|
|
|
|
if (styleName in styles) {
|
|
value = styles[styleName];
|
|
} else {
|
|
info = me.styleInfo[styleName];
|
|
value = me.el.getStyle(styleName);
|
|
|
|
if (info && info.parseInt) {
|
|
value = parseInt(value, 10) || 0;
|
|
}
|
|
|
|
styles[styleName] = value;
|
|
}
|
|
|
|
return value;
|
|
},
|
|
|
|
/**
|
|
* Returns styles for this item. Each style is read from the DOM only once on first
|
|
* request and is then cached. If the value is an integer, it is parsed automatically
|
|
* (so '5px' is not returned, but rather 5).
|
|
*
|
|
* @param {String[]} styleNames The CSS style names.
|
|
* @param {String[]} [altNames] The alternate names for the returned styles. If given,
|
|
* these names must correspond one-for-one to the `styleNames`.
|
|
* @return {Object} The values of the DOM styles (parsed as necessary).
|
|
*/
|
|
getStyles: function (styleNames, altNames) {
|
|
var me = this,
|
|
styleCache = me.styles,
|
|
values = {},
|
|
hits = 0,
|
|
n = styleNames.length,
|
|
i, missing, missingAltNames, name, info, styleInfo, styles, value;
|
|
|
|
altNames = altNames || styleNames;
|
|
|
|
// We are optimizing this for all hits or all misses. If we hit on all styles, we
|
|
// don't create a missing[]. If we miss on all styles, we also don't create one.
|
|
for (i = 0; i < n; ++i) {
|
|
name = styleNames[i];
|
|
|
|
if (name in styleCache) {
|
|
values[altNames[i]] = styleCache[name];
|
|
++hits;
|
|
|
|
if (i && hits==1) { // if (first hit was after some misses)
|
|
missing = styleNames.slice(0, i);
|
|
missingAltNames = altNames.slice(0, i);
|
|
}
|
|
} else if (hits) {
|
|
(missing || (missing = [])).push(name);
|
|
(missingAltNames || (missingAltNames = [])).push(altNames[i]);
|
|
}
|
|
}
|
|
|
|
if (hits < n) {
|
|
missing = missing || styleNames;
|
|
missingAltNames = missingAltNames || altNames;
|
|
styleInfo = me.styleInfo;
|
|
|
|
styles = me.el.getStyle(missing);
|
|
|
|
for (i = missing.length; i--; ) {
|
|
name = missing[i];
|
|
info = styleInfo[name];
|
|
value = styles[name];
|
|
|
|
if (info && info.parseInt) {
|
|
value = parseInt(value, 10) || 0;
|
|
}
|
|
|
|
values[missingAltNames[i]] = value;
|
|
styleCache[name] = value;
|
|
}
|
|
}
|
|
|
|
return values;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the given property has been set. This is equivalent to calling
|
|
* {@link #getProp} and not getting an undefined result. In particular, this call
|
|
* registers the current layout to be triggered by changes to this property.
|
|
*
|
|
* @param {String} propName The property name (e.g., 'width').
|
|
* @return {Boolean}
|
|
*/
|
|
hasProp: function (propName) {
|
|
return this.getProp(propName) != null;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the given property is correct in the DOM. This is equivalent to
|
|
* calling {@link #getDomProp} and not getting an undefined result. In particular,
|
|
* this call registers the current layout to be triggered by flushes of this property.
|
|
*
|
|
* @param {String} propName The property name (e.g., 'width').
|
|
* @return {Boolean}
|
|
*/
|
|
hasDomProp: function (propName) {
|
|
return this.getDomProp(propName) != null;
|
|
},
|
|
|
|
/**
|
|
* Invalidates the component associated with this item. The layouts for this component
|
|
* and all of its contained items will be re-run after first clearing any computed
|
|
* values.
|
|
*
|
|
* If state needs to be carried forward beyond the invalidation, the `options` parameter
|
|
* can be used.
|
|
*
|
|
* @param {Object} options An object describing how to handle the invalidation.
|
|
* @param {Object} options.state An object to {@link Ext#apply} to the {@link #state}
|
|
* of this item after invalidation clears all other properties.
|
|
* @param {Function} options.before A function to call after the context data is cleared
|
|
* and before the {@link Ext.layout.Layout#beginLayoutCycle} methods are called.
|
|
* @param {Ext.layout.ContextItem} options.before.item This ContextItem.
|
|
* @param {Object} options.before.options The options object passed to {@link #invalidate}.
|
|
* @param {Function} options.after A function to call after the context data is cleared
|
|
* and after the {@link Ext.layout.Layout#beginLayoutCycle} methods are called.
|
|
* @param {Ext.layout.ContextItem} options.after.item This ContextItem.
|
|
* @param {Object} options.after.options The options object passed to {@link #invalidate}.
|
|
* @param {Object} options.scope The scope to use when calling the callback functions.
|
|
*/
|
|
invalidate: function (options) {
|
|
this.context.queueInvalidate(this, options);
|
|
},
|
|
|
|
markDirty: function () {
|
|
if (++this.dirtyCount == 1) {
|
|
// our first dirty property... queue us for flush
|
|
this.context.queueFlush(this);
|
|
}
|
|
},
|
|
|
|
onBoxMeasured: function () {
|
|
var boxParent = this.boxParent,
|
|
state = this.state;
|
|
|
|
if (boxParent && boxParent.widthModel.shrinkWrap && !state.boxMeasured && this.measuresBox) {
|
|
// since an autoWidth boxParent is holding a width on itself to allow each
|
|
// child to measure
|
|
state.boxMeasured = 1; // best to only call once per child
|
|
boxParent.boxChildMeasured();
|
|
}
|
|
},
|
|
|
|
parseMargins: function (comp, margins, defaultMargins) {
|
|
if (margins === true) {
|
|
margins = 5;
|
|
}
|
|
|
|
var type = typeof margins,
|
|
ret;
|
|
|
|
if (type == 'string' || type == 'number') {
|
|
ret = comp.parseBox(margins);
|
|
} else if (margins || defaultMargins) {
|
|
ret = { top: 0, right: 0, bottom: 0, left: 0 }; // base defaults
|
|
|
|
if (defaultMargins) {
|
|
Ext.apply(ret, this.parseMargins(comp, defaultMargins)); // + layout defaults
|
|
}
|
|
|
|
if (margins) {
|
|
margins = Ext.apply(ret, comp.parseBox(margins)); // + config
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
},
|
|
|
|
peek: function (propName) {
|
|
return this.props[propName];
|
|
},
|
|
|
|
/**
|
|
* Recovers a property value from the last computation and restores its value and
|
|
* dirty state.
|
|
*
|
|
* @param {String} propName The name of the property to recover.
|
|
* @param {Object} oldProps The old "props" object from which to recover values.
|
|
* @param {Object} oldDirty The old "dirty" object from which to recover state.
|
|
*/
|
|
recoverProp: function (propName, oldProps, oldDirty) {
|
|
var me = this,
|
|
props = me.props,
|
|
dirty;
|
|
|
|
if (propName in oldProps) {
|
|
props[propName] = oldProps[propName];
|
|
|
|
if (oldDirty && propName in oldDirty) {
|
|
dirty = me.dirty || (me.dirty = {});
|
|
dirty[propName] = oldDirty[propName];
|
|
}
|
|
}
|
|
},
|
|
|
|
redo: function(deep) {
|
|
var me = this,
|
|
items, len, i;
|
|
|
|
me.revertProps(me.props);
|
|
|
|
if (deep && me.wrapsComponent) {
|
|
// Rollback the state of child Components
|
|
if (me.childItems) {
|
|
for (i = 0, items = me.childItems, len = items.length; i < len; i++) {
|
|
items[i].redo(deep);
|
|
}
|
|
}
|
|
|
|
// Rollback the state of child Elements
|
|
for (i = 0, items = me.children, len = items.length; i < len; i++) {
|
|
items[i].redo();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Removes a cached ContextItem that was created using {@link #getEl}. It may be
|
|
* necessary to call this method if the dom reference for owned element changes so
|
|
* that {@link #getEl} can be called again to reinitialize the ContextItem with the
|
|
* new element.
|
|
* @param {String/Ext.dom.Element} nameOrEl The element or the name of an owned element
|
|
* @param {Ext.layout.container.Container/Ext.Component} [owner] The owner of the
|
|
* named element if the passed "nameOrEl" parameter is a String. Defaults to this
|
|
* ContextItem's "target" property.
|
|
*/
|
|
removeEl: function(nameOrEl, owner) {
|
|
var me = this,
|
|
src, el;
|
|
|
|
if (nameOrEl) {
|
|
if (nameOrEl.dom) {
|
|
el = nameOrEl;
|
|
} else {
|
|
src = me.target;
|
|
if (owner) {
|
|
src = owner;
|
|
}
|
|
|
|
el = src[nameOrEl];
|
|
if (typeof el == 'function') { // ex 'getTarget'
|
|
el = el.call(src);
|
|
if (el === me.el) {
|
|
return this; // comp.getTarget() often returns comp.el
|
|
}
|
|
}
|
|
}
|
|
|
|
if (el) {
|
|
me.context.removeEl(me, el);
|
|
}
|
|
}
|
|
},
|
|
|
|
revertProps: function (props) {
|
|
var name,
|
|
flushed = this.flushedProps,
|
|
reverted = {};
|
|
|
|
for (name in props) {
|
|
if (flushed.hasOwnProperty(name)) {
|
|
reverted[name] = props[name];
|
|
}
|
|
}
|
|
|
|
this.writeProps(reverted);
|
|
},
|
|
|
|
/**
|
|
* Queue the setting of a DOM attribute on this ContextItem's target when next flushed.
|
|
*/
|
|
setAttribute: function(name, value) {
|
|
var me = this;
|
|
if (!me.attributes) {
|
|
me.attributes = {};
|
|
}
|
|
me.attributes[name] = value;
|
|
me.markDirty();
|
|
},
|
|
|
|
setBox: function (box) {
|
|
var me = this;
|
|
|
|
if ('left' in box) {
|
|
me.setProp('x', box.left);
|
|
}
|
|
if ('top' in box) {
|
|
me.setProp('y', box.top);
|
|
}
|
|
|
|
// if sizeModel says we should not be setting these, the appropriate calls will be
|
|
// null operations... otherwise, we must set these values, so what we have in box
|
|
// is what we go with (undefined, NaN and no change are handled at a lower level):
|
|
me.setSize(box.width, box.height);
|
|
},
|
|
|
|
/**
|
|
* Sets the contentHeight property. If the component uses raw content, then only the
|
|
* measured height is acceptable.
|
|
*
|
|
* Calculated values can sometimes be NaN or undefined, which generally mean the
|
|
* calculation is not done. To indicate that such as value was passed, 0 is returned.
|
|
* Otherwise, 1 is returned.
|
|
*
|
|
* If the caller is not measuring (i.e., they are calculating) and the component has raw
|
|
* content, 1 is returned indicating that the caller is done.
|
|
*/
|
|
setContentHeight: function (height, measured) {
|
|
if (!measured && this.hasRawContent) {
|
|
return 1;
|
|
}
|
|
|
|
return this.setProp('contentHeight', height);
|
|
},
|
|
|
|
/**
|
|
* Sets the contentWidth property. If the component uses raw content, then only the
|
|
* measured width is acceptable.
|
|
*
|
|
* Calculated values can sometimes be NaN or undefined, which generally means that the
|
|
* calculation is not done. To indicate that such as value was passed, 0 is returned.
|
|
* Otherwise, 1 is returned.
|
|
*
|
|
* If the caller is not measuring (i.e., they are calculating) and the component has raw
|
|
* content, 1 is returned indicating that the caller is done.
|
|
*/
|
|
setContentWidth: function (width, measured) {
|
|
if (!measured && this.hasRawContent) {
|
|
return 1;
|
|
}
|
|
|
|
return this.setProp('contentWidth', width);
|
|
},
|
|
|
|
/**
|
|
* Sets the contentWidth and contentHeight properties. If the component uses raw content,
|
|
* then only the measured values are acceptable.
|
|
*
|
|
* Calculated values can sometimes be NaN or undefined, which generally means that the
|
|
* calculation is not done. To indicate that either passed value was such a value, false
|
|
* returned. Otherwise, true is returned.
|
|
*
|
|
* If the caller is not measuring (i.e., they are calculating) and the component has raw
|
|
* content, true is returned indicating that the caller is done.
|
|
*/
|
|
setContentSize: function (width, height, measured) {
|
|
return this.setContentWidth(width, measured) +
|
|
this.setContentHeight(height, measured) == 2;
|
|
},
|
|
|
|
/**
|
|
* Sets a property value. This will unblock and/or trigger dependent layouts if the
|
|
* property value is being changed. Values of NaN and undefined are not accepted by
|
|
* this method.
|
|
*
|
|
* @param {String} propName The property name (e.g., 'width').
|
|
* @param {Object} value The new value of the property.
|
|
* @param {Boolean} dirty Optionally specifies if the value is currently in the DOM
|
|
* (default is `true` which indicates the value is not in the DOM and must be flushed
|
|
* at some point).
|
|
* @return {Number} 1 if this call specified the property value, 0 if not.
|
|
*/
|
|
setProp: function (propName, value, dirty) {
|
|
var me = this,
|
|
valueType = typeof value,
|
|
borderBox, info;
|
|
|
|
if (valueType == 'undefined' || (valueType === 'number' && isNaN(value))) {
|
|
return 0;
|
|
}
|
|
if (me.props[propName] === value) {
|
|
return 1;
|
|
}
|
|
|
|
me.props[propName] = value;
|
|
++me.context.progressCount;
|
|
|
|
if (dirty === false) {
|
|
// if the prop is equivalent to what is in the DOM (we won't be writing it),
|
|
// we need to clear hard blocks (domBlocks) on that property.
|
|
me.fireTriggers('domTriggers', propName);
|
|
me.clearBlocks('domBlocks', propName);
|
|
} else {
|
|
info = me.styleInfo[propName];
|
|
if (info) {
|
|
if (!me.dirty) {
|
|
me.dirty = {};
|
|
}
|
|
|
|
if (propName == 'width' || propName == 'height') {
|
|
borderBox = me.isBorderBoxValue;
|
|
if (borderBox === null) {
|
|
me.isBorderBoxValue = borderBox = !!me.el.isBorderBox();
|
|
}
|
|
|
|
if (!borderBox) {
|
|
me.borderInfo || me.getBorderInfo();
|
|
me.paddingInfo || me.getPaddingInfo();
|
|
}
|
|
}
|
|
me.dirty[propName] = value;
|
|
me.markDirty();
|
|
}
|
|
}
|
|
|
|
// we always clear soft blocks on set
|
|
me.fireTriggers('triggers', propName);
|
|
me.clearBlocks('blocks', propName);
|
|
return 1;
|
|
},
|
|
|
|
/**
|
|
* Sets the height and constrains the height to min/maxHeight range.
|
|
*
|
|
* @param {Number} height The height.
|
|
* @param {Boolean} [dirty=true] Specifies if the value is currently in the DOM. A
|
|
* value of `false` indicates that the value is already in the DOM.
|
|
* @return {Number} The actual height after constraining.
|
|
*/
|
|
setHeight: function (height, dirty /*, private {Boolean} force */) {
|
|
var me = this,
|
|
comp = me.target,
|
|
ownerCtContext = me.ownerCtContext,
|
|
frameBody, frameInfo, min, oldHeight, rem;
|
|
|
|
if (height < 0) {
|
|
height = 0;
|
|
}
|
|
if (!me.wrapsComponent) {
|
|
if (!me.setProp('height', height, dirty)) {
|
|
return NaN;
|
|
}
|
|
} else {
|
|
min = me.collapsedVert ? 0 : (comp.minHeight || 0);
|
|
height = Ext.Number.constrain(height, min, comp.maxHeight);
|
|
oldHeight = me.props.height;
|
|
if (!me.setProp('height', height, dirty)) {
|
|
return NaN;
|
|
}
|
|
|
|
// if we are a container child, since the height is now known we can decrement
|
|
// the number of remainingChildDimensions that the ownerCtContext is waiting on.
|
|
if (ownerCtContext && !me.isComponentChild && isNaN(oldHeight)) {
|
|
rem = --ownerCtContext.remainingChildDimensions;
|
|
if (!rem) {
|
|
// if there are 0 remainingChildDimensions set containerChildrenSizeDone
|
|
// on the ownerCtContext to indicate that all of its children's dimensions
|
|
// are known
|
|
ownerCtContext.setProp('containerChildrenSizeDone', true);
|
|
}
|
|
}
|
|
|
|
frameBody = me.frameBodyContext;
|
|
if (frameBody){
|
|
frameInfo = me.getFrameInfo();
|
|
frameBody.setHeight(height - frameInfo.height, dirty);
|
|
}
|
|
}
|
|
|
|
return height;
|
|
},
|
|
|
|
/**
|
|
* Sets the height and constrains the width to min/maxWidth range.
|
|
*
|
|
* @param {Number} width The width.
|
|
* @param {Boolean} [dirty=true] Specifies if the value is currently in the DOM. A
|
|
* value of `false` indicates that the value is already in the DOM.
|
|
* @return {Number} The actual width after constraining.
|
|
*/
|
|
setWidth: function (width, dirty /*, private {Boolean} force */) {
|
|
var me = this,
|
|
comp = me.target,
|
|
ownerCtContext = me.ownerCtContext,
|
|
frameBody, frameInfo, min, oldWidth, rem;
|
|
|
|
if (width < 0) {
|
|
width = 0;
|
|
}
|
|
if (!me.wrapsComponent) {
|
|
if (!me.setProp('width', width, dirty)) {
|
|
return NaN;
|
|
}
|
|
} else {
|
|
min = me.collapsedHorz ? 0 : (comp.minWidth || 0);
|
|
width = Ext.Number.constrain(width, min, comp.maxWidth);
|
|
oldWidth = me.props.width
|
|
if (!me.setProp('width', width, dirty)) {
|
|
return NaN;
|
|
}
|
|
|
|
// if we are a container child, since the width is now known we can decrement
|
|
// the number of remainingChildDimensions that the ownerCtContext is waiting on.
|
|
if (ownerCtContext && !me.isComponentChild && isNaN(oldWidth)) {
|
|
rem = --ownerCtContext.remainingChildDimensions;
|
|
if (!rem) {
|
|
// if there are 0 remainingChildDimensions set containerChildrenSizeDone
|
|
// on the ownerCtContext to indicate that all of its children's dimensions
|
|
// are known
|
|
ownerCtContext.setProp('containerChildrenSizeDone', true);
|
|
}
|
|
}
|
|
|
|
//if ((frameBody = me.target.frameBody) && (frameBody = me.getEl(frameBody))){
|
|
frameBody = me.frameBodyContext;
|
|
if (frameBody) {
|
|
frameInfo = me.getFrameInfo();
|
|
frameBody.setWidth(width - frameInfo.width, dirty);
|
|
}
|
|
|
|
/*if (owner.frameMC) {
|
|
frameContext = ownerContext.frameContext ||
|
|
(ownerContext.frameContext = ownerContext.getEl('frameMC'));
|
|
width += (frameContext.paddingInfo || frameContext.getPaddingInfo()).width;
|
|
}*/
|
|
}
|
|
|
|
return width;
|
|
},
|
|
|
|
setSize: function (width, height, dirty) {
|
|
this.setWidth(width, dirty);
|
|
this.setHeight(height, dirty);
|
|
},
|
|
|
|
translateProps: {
|
|
x: 'left',
|
|
y: 'top'
|
|
},
|
|
|
|
undo: function(deep) {
|
|
var me = this,
|
|
items, len, i;
|
|
|
|
me.revertProps(me.lastBox);
|
|
|
|
if (deep && me.wrapsComponent) {
|
|
// Rollback the state of child Components
|
|
if (me.childItems) {
|
|
for (i = 0, items = me.childItems, len = items.length; i < len; i++) {
|
|
items[i].undo(deep);
|
|
}
|
|
}
|
|
|
|
// Rollback the state of child Elements
|
|
for (i = 0, items = me.children, len = items.length; i < len; i++) {
|
|
items[i].undo();
|
|
}
|
|
}
|
|
},
|
|
|
|
unsetProp: function (propName) {
|
|
var dirty = this.dirty;
|
|
|
|
delete this.props[propName];
|
|
if (dirty) {
|
|
delete dirty[propName];
|
|
}
|
|
},
|
|
|
|
writeProps: function(dirtyProps, flushing) {
|
|
if (!(dirtyProps && typeof dirtyProps == 'object')) {
|
|
return;
|
|
}
|
|
|
|
var me = this,
|
|
el = me.el,
|
|
styles = {},
|
|
styleCount = 0, // used as a boolean, the exact count doesn't matter
|
|
styleInfo = me.styleInfo,
|
|
|
|
info,
|
|
propName,
|
|
numericValue,
|
|
width = dirtyProps.width,
|
|
height = dirtyProps.height,
|
|
isBorderBox = me.isBorderBoxValue,
|
|
target = me.target,
|
|
max = Math.max,
|
|
paddingWidth = 0,
|
|
paddingHeight = 0,
|
|
hasWidth, hasHeight, isAbsolute, scrollbarSize, style, targetEl;
|
|
|
|
// Process non-style properties:
|
|
if ('displayed' in dirtyProps) {
|
|
el.setDisplayed(dirtyProps.displayed);
|
|
}
|
|
|
|
// Unblock any hard blocks (domBlocks) and copy dom styles into 'styles'
|
|
for (propName in dirtyProps) {
|
|
if (flushing) {
|
|
me.fireTriggers('domTriggers', propName);
|
|
me.clearBlocks('domBlocks', propName);
|
|
me.flushedProps[propName] = 1;
|
|
}
|
|
|
|
info = styleInfo[propName];
|
|
if (info && info.dom) {
|
|
// Numeric dirty values should have their associated suffix added
|
|
if (info.suffix && (numericValue = parseInt(dirtyProps[propName], 10))) {
|
|
styles[propName] = numericValue + info.suffix;
|
|
}
|
|
// Non-numeric (eg "auto") go in unchanged.
|
|
else {
|
|
styles[propName] = dirtyProps[propName];
|
|
}
|
|
++styleCount;
|
|
}
|
|
}
|
|
|
|
// convert x/y into setPosition (for a component) or left/top styles (for an el)
|
|
if ('x' in dirtyProps || 'y' in dirtyProps) {
|
|
if (target.isComponent) {
|
|
target.setPosition(dirtyProps.x, dirtyProps.y);
|
|
} else {
|
|
// we wrap an element, so convert x/y to styles:
|
|
styleCount += me.addPositionStyles(styles, dirtyProps);
|
|
}
|
|
}
|
|
|
|
// Support for the content-box box model...
|
|
if (!isBorderBox && (width > 0 || height > 0)) { // no need to subtract from 0
|
|
// The width and height values assume the border-box box model,
|
|
// so we must remove the padding & border to calculate the content-box.
|
|
if(!me.frameBodyContext) {
|
|
// Padding needs to be removed only if the element is not framed.
|
|
paddingWidth = me.paddingInfo.width;
|
|
paddingHeight = me.paddingInfo.height;
|
|
}
|
|
if (width) {
|
|
width = max(parseInt(width, 10) - (me.borderInfo.width + paddingWidth), 0);
|
|
styles.width = width + 'px';
|
|
++styleCount;
|
|
}
|
|
if (height) {
|
|
height = max(parseInt(height, 10) - (me.borderInfo.height + paddingHeight), 0);
|
|
styles.height = height + 'px';
|
|
++styleCount;
|
|
}
|
|
}
|
|
|
|
// IE9 strict subtracts the scrollbar size from the element size when the element
|
|
// is absolutely positioned and uses box-sizing: border-box. To workaround this
|
|
// issue we have to add the the scrollbar size.
|
|
//
|
|
// See http://social.msdn.microsoft.com/Forums/da-DK/iewebdevelopment/thread/47c5148f-a142-4a99-9542-5f230c78cb3b
|
|
//
|
|
if (me.wrapsComponent && Ext.isIE9 && Ext.isStrict) {
|
|
// when we set a width and we have a vertical scrollbar (overflowY), we need
|
|
// to add the scrollbar width... conversely for the height and overflowX
|
|
if ((hasWidth = width !== undefined && me.hasOverflowY) ||
|
|
(hasHeight = height !== undefined && me.hasOverflowX)) {
|
|
// check that the component is absolute positioned and border-box:
|
|
isAbsolute = me.isAbsolute;
|
|
if (isAbsolute === undefined) {
|
|
isAbsolute = false;
|
|
targetEl = me.target.getTargetEl();
|
|
style = targetEl.getStyle('position');
|
|
|
|
if (style == 'absolute') {
|
|
style = targetEl.getStyle('box-sizing');
|
|
isAbsolute = (style == 'border-box');
|
|
}
|
|
|
|
me.isAbsolute = isAbsolute; // cache it
|
|
}
|
|
|
|
if (isAbsolute) {
|
|
scrollbarSize = Ext.getScrollbarSize();
|
|
|
|
if (hasWidth) {
|
|
width = parseInt(width, 10) + scrollbarSize.width;
|
|
styles.width = width + 'px';
|
|
++styleCount;
|
|
}
|
|
if (hasHeight) {
|
|
height = parseInt(height, 10) + scrollbarSize.height;
|
|
styles.height = height + 'px';
|
|
++styleCount;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// we make only one call to setStyle to allow it to optimize itself:
|
|
if (styleCount) {
|
|
el.setStyle(styles);
|
|
}
|
|
}
|
|
}, function () {
|
|
|
|
var px = { dom: true, parseInt: true, suffix: 'px' },
|
|
isDom = { dom: true },
|
|
faux = { dom: false };
|
|
|
|
// If a property exists in styleInfo, it participates in some way with the DOM. It may
|
|
// be virtualized (like 'x' and y') and be indirect, but still requires a flush cycle
|
|
// to reach the DOM. Properties (like 'contentWidth' and 'contentHeight') have no real
|
|
// presence in the DOM and hence have no flush intanglements.
|
|
//
|
|
// For simple styles, the object value on the right contains properties that help in
|
|
// decoding values read by getStyle and preparing values to pass to setStyle.
|
|
//
|
|
this.prototype.styleInfo = {
|
|
containerChildrenSizeDone: faux,
|
|
containerLayoutDone: faux,
|
|
displayed: faux,
|
|
done: faux,
|
|
x: faux,
|
|
y: faux,
|
|
|
|
// For Ext.grid.ColumnLayout
|
|
columnWidthsDone: faux,
|
|
|
|
left: px,
|
|
top: px,
|
|
right: px,
|
|
bottom: px,
|
|
width: px,
|
|
height: px,
|
|
|
|
'border-top-width': px,
|
|
'border-right-width': px,
|
|
'border-bottom-width': px,
|
|
'border-left-width': px,
|
|
|
|
'margin-top': px,
|
|
'margin-right': px,
|
|
'margin-bottom': px,
|
|
'margin-left': px,
|
|
|
|
'padding-top': px,
|
|
'padding-right': px,
|
|
'padding-bottom': px,
|
|
'padding-left': px,
|
|
|
|
'line-height': isDom,
|
|
display: isDom
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Manages context information during a layout.
|
|
*
|
|
* # Algorithm
|
|
*
|
|
* This class performs the following jobs:
|
|
*
|
|
* - Cache DOM reads to avoid reading the same values repeatedly.
|
|
* - Buffer DOM writes and flush them as a block to avoid read/write interleaving.
|
|
* - Track layout dependencies so each layout does not have to figure out the source of
|
|
* its dependent values.
|
|
* - Intelligently run layouts when the values on which they depend change (a trigger).
|
|
* - Allow layouts to avoid processing when required values are unavailable (a block).
|
|
*
|
|
* Work done during layout falls into either a "read phase" or a "write phase" and it is
|
|
* essential to always be aware of the current phase. Most methods in
|
|
* {@link Ext.layout.Layout Layout} are called during a read phase:
|
|
* {@link Ext.layout.Layout#calculate calculate},
|
|
* {@link Ext.layout.Layout#completeLayout completeLayout} and
|
|
* {@link Ext.layout.Layout#finalizeLayout finalizeLayout}. The exceptions to this are
|
|
* {@link Ext.layout.Layout#beginLayout beginLayout},
|
|
* {@link Ext.layout.Layout#beginLayoutCycle beginLayoutCycle} and
|
|
* {@link Ext.layout.Layout#finishedLayout finishedLayout} which are called during
|
|
* a write phase. While {@link Ext.layout.Layout#finishedLayout finishedLayout} is called
|
|
* a write phase, it is really intended to be a catch-all for post-processing after a
|
|
* layout run.
|
|
*
|
|
* In a read phase, it is OK to read the DOM but this should be done using the appropriate
|
|
* {@link Ext.layout.ContextItem ContextItem} where possible since that provides a cache
|
|
* to avoid redundant reads. No writes should be made to the DOM in a read phase! Instead,
|
|
* the values should be written to the proper ContextItem for later write-back.
|
|
*
|
|
* The rules flip-flop in a write phase. The only difference is that ContextItem methods
|
|
* like {@link Ext.layout.ContextItem#getStyle getStyle} will still read the DOM unless the
|
|
* value was previously read. This detail is unknowable from the outside of ContextItem, so
|
|
* read calls to ContextItem should also be avoided in a write phase.
|
|
*
|
|
* Calculating interdependent layouts requires a certain amount of iteration. In a given
|
|
* cycle, some layouts will contribute results that allow other layouts to proceed. The
|
|
* general flow then is to gather all of the layouts (both component and container) in a
|
|
* component tree and queue them all for processing. The initial queue order is bottom-up
|
|
* and component layout first, then container layout (if applicable) for each component.
|
|
*
|
|
* This initial step also calls the beginLayout method on all layouts to clear any values
|
|
* from the DOM that might interfere with calculations and measurements. In other words,
|
|
* this is a "write phase" and reads from the DOM should be strictly avoided.
|
|
*
|
|
* Next the layout enters into its iterations or "cycles". Each cycle consists of calling
|
|
* the {@link Ext.layout.Layout#calculate calculate} method on all layouts in the
|
|
* {@link #layoutQueue}. These calls are part of a "read phase" and writes to the DOM should
|
|
* be strictly avoided.
|
|
*
|
|
* # Considerations
|
|
*
|
|
* **RULE 1**: Respect the read/write cycles. Always use the {@link Ext.layout.ContextItem#getProp getProp}
|
|
* or {@link Ext.layout.ContextItem#getDomProp getDomProp} methods to get calculated values;
|
|
* only use the {@link Ext.layout.ContextItem#getStyle getStyle} method to read styles; use
|
|
* {@link Ext.layout.ContextItem#setProp setProp} to set DOM values. Some reads will, of
|
|
* course, still go directly to the DOM, but if there is a method in
|
|
* {@link Ext.layout.ContextItem ContextItem} to do a certain job, it should be used instead
|
|
* of a lower-level equivalent.
|
|
*
|
|
* The basic logic flow in {@link Ext.layout.Layout#calculate calculate} consists of gathering
|
|
* values by calling {@link Ext.layout.ContextItem#getProp getProp} or
|
|
* {@link Ext.layout.ContextItem#getDomProp getDomProp}, calculating results and publishing
|
|
* them by calling {@link Ext.layout.ContextItem#setProp setProp}. It is important to realize
|
|
* that {@link Ext.layout.ContextItem#getProp getProp} will return `undefined` if the value
|
|
* is not yet known. But the act of calling the method is enough to track the fact that the
|
|
* calling layout depends (in some way) on this value. In other words, the calling layout is
|
|
* "triggered" by the properties it requests.
|
|
*
|
|
* **RULE 2**: Avoid calling {@link Ext.layout.ContextItem#getProp getProp} unless the value
|
|
* is needed. Gratuitous calls cause inefficiency because the layout will appear to depend on
|
|
* values that it never actually uses. This applies equally to
|
|
* {@link Ext.layout.ContextItem#getDomProp getDomProp} and the test-only methods
|
|
* {@link Ext.layout.ContextItem#hasProp hasProp} and {@link Ext.layout.ContextItem#hasDomProp hasDomProp}.
|
|
*
|
|
* Because {@link Ext.layout.ContextItem#getProp getProp} can return `undefined`, it is often
|
|
* the case that subsequent math will produce NaN's. This is usually not a problem as the
|
|
* NaN's simply propagate along and result in final results that are NaN. Both `undefined`
|
|
* and NaN are ignored by {@link Ext.layout.ContextItem#setProp}, so it is often not necessary
|
|
* to even know that this is happening. It does become important for determining if a layout
|
|
* is not done or if it might lead to publishing an incorrect (but not NaN or `undefined`)
|
|
* value.
|
|
*
|
|
* **RULE 3**: If a layout has not calculated all the values it is required to calculate, it
|
|
* must set {@link Ext.layout.Layout#done done} to `false` before returning from
|
|
* {@link Ext.layout.Layout#calculate calculate}. This value is always `true` on entry because
|
|
* it is simpler to detect the incomplete state rather than the complete state (especially up
|
|
* and down a class hierarchy).
|
|
*
|
|
* **RULE 4**: A layout must never publish an incomplete (wrong) result. Doing so would cause
|
|
* dependent layouts to run their calculations on those wrong values, producing more wrong
|
|
* values and some layouts may even incorrectly flag themselves as {@link Ext.layout.Layout#done done}
|
|
* before the correct values are determined and republished. Doing this will poison the
|
|
* calculations.
|
|
*
|
|
* **RULE 5**: Each value should only be published by one layout. If multiple layouts attempt
|
|
* to publish the same values, it would be nearly impossible to avoid breaking **RULE 4**. To
|
|
* help detect this problem, the layout diagnostics will trap on an attempt to set a value
|
|
* from different layouts.
|
|
*
|
|
* Complex layouts can produce many results as part of their calculations. These values are
|
|
* important for other layouts to proceed and need to be published by the earliest possible
|
|
* call to {@link Ext.layout.Layout#calculate} to avoid unnecessary cycles and poor performance. It is
|
|
* also possible, however, for some results to be related in a way such that publishing them
|
|
* may be an all-or-none proposition (typically to avoid breaking *RULE 4*).
|
|
*
|
|
* **RULE 6**: Publish results as soon as they are known to be correct rather than wait for
|
|
* all values to be calculated. Waiting for everything to be complete can lead to deadlock.
|
|
* The key here is not to forget **RULE 4** in the process.
|
|
*
|
|
* Some layouts depend on certain critical values as part of their calculations. For example,
|
|
* HBox depends on width and cannot do anything until the width is known. In these cases, it
|
|
* is best to use {@link Ext.layout.ContextItem#block block} or
|
|
* {@link Ext.layout.ContextItem#domBlock domBlock} and thereby avoid processing the layout
|
|
* until the needed value is available.
|
|
*
|
|
* **RULE 7**: Use {@link Ext.layout.ContextItem#block block} or
|
|
* {@link Ext.layout.ContextItem#domBlock domBlock} when values are required to make progress.
|
|
* This will mimize wasted recalculations.
|
|
*
|
|
* **RULE 8**: Blocks should only be used when no forward progress can be made. If even one
|
|
* value could still be calculated, a block could result in a deadlock.
|
|
*
|
|
* Historically, layouts have been invoked directly by component code, sometimes in places
|
|
* like an `afterLayout` method for a child component. With the flexibility now available
|
|
* to solve complex, iterative issues, such things should be done in a responsible layout
|
|
* (be it component or container).
|
|
*
|
|
* **RULE 9**: Use layouts to solve layout issues and don't wait for the layout to finish to
|
|
* perform further layouts. This is especially important now that layouts process entire
|
|
* component trees and not each layout in isolation.
|
|
*
|
|
* # Sequence Diagram
|
|
*
|
|
* The simplest sequence diagram for a layout run looks roughly like this:
|
|
*
|
|
* Context Layout 1 Item 1 Layout 2 Item 2
|
|
* | | | | |
|
|
* ---->X-------------->X | | |
|
|
* run X---------------|-----------|---------->X |
|
|
* X beginLayout | | | |
|
|
* X | | | |
|
|
* A X-------------->X | | |
|
|
* X calculate X---------->X | |
|
|
* X C X getProp | | |
|
|
* B X X---------->X | |
|
|
* X | setProp | | |
|
|
* X | | | |
|
|
* D X---------------|-----------|---------->X |
|
|
* X calculate | | X---------->X
|
|
* X | | | setProp |
|
|
* E X | | | |
|
|
* X---------------|-----------|---------->X |
|
|
* X completeLayout| | F | |
|
|
* X | | | |
|
|
* G X | | | |
|
|
* H X-------------->X | | |
|
|
* X calculate X---------->X | |
|
|
* X I X getProp | | |
|
|
* X X---------->X | |
|
|
* X | setProp | | |
|
|
* J X-------------->X | | |
|
|
* X completeLayout| | | |
|
|
* X | | | |
|
|
* K X-------------->X | | |
|
|
* X---------------|-----------|---------->X |
|
|
* X finalizeLayout| | | |
|
|
* X | | | |
|
|
* L X-------------->X | | |
|
|
* X---------------|-----------|---------->X |
|
|
* X finishedLayout| | | |
|
|
* X | | | |
|
|
* M X-------------->X | | |
|
|
* X---------------|-----------|---------->X |
|
|
* X notifyOwner | | | |
|
|
* N | | | | |
|
|
* - - - - -
|
|
*
|
|
*
|
|
* Notes:
|
|
*
|
|
* **A.** This is a call from the {@link #run} method to the {@link #runCycle} method.
|
|
* Each layout in the queue will have its {@link Ext.layout.Layout#calculate calculate}
|
|
* method called.
|
|
*
|
|
* **B.** After each {@link Ext.layout.Layout#calculate calculate} method is called the
|
|
* {@link Ext.layout.Layout#done done} flag is checked to see if the Layout has completed.
|
|
* If it has completed and that layout object implements a
|
|
* {@link Ext.layout.Layout#completeLayout completeLayout} method, this layout is queued to
|
|
* receive its call. Otherwise, the layout will be queued again unless there are blocks or
|
|
* triggers that govern its requeueing.
|
|
*
|
|
* **C.** The call to {@link Ext.layout.ContextItem#getProp getProp} is made to the Item
|
|
* and that will be tracked as a trigger (keyed by the name of the property being requested).
|
|
* Changes to this property will cause this layout to be requeued. The call to
|
|
* {@link Ext.layout.ContextItem#setProp setProp} will place a value in the item and not
|
|
* directly into the DOM.
|
|
*
|
|
* **D.** Call the other layouts now in the first cycle (repeat **B** and **C** for each
|
|
* layout).
|
|
*
|
|
* **E.** After completing a cycle, if progress was made (new properties were written to
|
|
* the context) and if the {@link #layoutQueue} is not empty, the next cycle is run. If no
|
|
* progress was made or no layouts are ready to run, all buffered values are written to
|
|
* the DOM (a flush).
|
|
*
|
|
* **F.** After flushing, any layouts that were marked as {@link Ext.layout.Layout#done done}
|
|
* that also have a {@link Ext.layout.Layout#completeLayout completeLayout} method are called.
|
|
* This can cause them to become no longer done (see {@link #invalidate}). As with
|
|
* {@link Ext.layout.Layout#calculate calculate}, this is considered a "read phase" and
|
|
* direct DOM writes should be avoided.
|
|
*
|
|
* **G.** Flushing and calling any pending {@link Ext.layout.Layout#completeLayout completeLayout}
|
|
* methods will likely trigger layouts that called {@link Ext.layout.ContextItem#getDomProp getDomProp}
|
|
* and unblock layouts that have called {@link Ext.layout.ContextItem#domBlock domBlock}.
|
|
* These variants are used when a layout needs the value to be correct in the DOM and not
|
|
* simply known. If this does not cause at least one layout to enter the queue, we have a
|
|
* layout FAILURE. Otherwise, we continue with the next cycle.
|
|
*
|
|
* **H.** Call {@link Ext.layout.Layout#calculate calculate} on any layouts in the queue
|
|
* at the start of this cycle. Just a repeat of **B** through **G**.
|
|
*
|
|
* **I.** Once the layout has calculated all that it is resposible for, it can leave itself
|
|
* in the {@link Ext.layout.Layout#done done} state. This is the value on entry to
|
|
* {@link Ext.layout.Layout#calculate calculate} and must be cleared in that call if the
|
|
* layout has more work to do.
|
|
*
|
|
* **J.** Now that all layouts are done, flush any DOM values and
|
|
* {@link Ext.layout.Layout#completeLayout completeLayout} calls. This can again cause
|
|
* layouts to become not done, and so we will be back on another cycle if that happens.
|
|
*
|
|
* **K.** After all layouts are done, call the {@link Ext.layout.Layout#finalizeLayout finalizeLayout}
|
|
* method on any layouts that have one. As with {@link Ext.layout.Layout#completeLayout completeLayout},
|
|
* this can cause layouts to become no longer done. This is less desirable than using
|
|
* {@link Ext.layout.Layout#completeLayout completeLayout} because it will cause all
|
|
* {@link Ext.layout.Layout#finalizeLayout finalizeLayout} methods to be called again
|
|
* when we think things are all wrapped up.
|
|
*
|
|
* **L.** After finishing the last iteration, layouts that have a
|
|
* {@link Ext.layout.Layout#finishedLayout finishedLayout} method will be called. This
|
|
* call will only happen once per run and cannot cause layouts to be run further.
|
|
*
|
|
* **M.** After calling finahedLayout, layouts that have a
|
|
* {@link Ext.layout.Layout#notifyOwner notifyOwner} method will be called. This
|
|
* call will only happen once per run and cannot cause layouts to be run further.
|
|
*
|
|
* **N.** One last flush to make sure everything has been written to the DOM.
|
|
*
|
|
* # Inter-Layout Collaboration
|
|
*
|
|
* Many layout problems require collaboration between multiple layouts. In some cases, this
|
|
* is as simple as a component's container layout providing results used by its component
|
|
* layout or vise-versa. A slightly more distant collaboration occurs in a box layout when
|
|
* stretchmax is used: the child item's component layout provides results that are consumed
|
|
* by the ownerCt's box layout to determine the size of the children.
|
|
*
|
|
* The various forms of interdependence between a container and its children are described by
|
|
* each components' {@link Ext.AbstractComponent#getSizeModel size model}.
|
|
*
|
|
* To facilitate this collaboration, the following pairs of properties are published to the
|
|
* component's {@link Ext.layout.ContextItem ContextItem}:
|
|
*
|
|
* - width/height: These hold the final size of the component. The layout indicated by the
|
|
* {@link Ext.AbstractComponent#getSizeModel size model} is responsible for setting these.
|
|
* - contentWidth/contentHeight: These hold size information published by the container
|
|
* layout or from DOM measurement. These describe the content only. These values are
|
|
* used by the component layout to determine the outer width/height when that component
|
|
* is {@link Ext.AbstractComponent#shrinkWrap shrink-wrapped}. They are also used to
|
|
* determine overflow. All container layouts must publish these values for dimensions
|
|
* that are shrink-wrapped. If a component has raw content (not container items), the
|
|
* componentLayout must publish these values instead.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.Context', {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
remainingLayouts: 0,
|
|
|
|
/**
|
|
* @property {Number} state One of these values:
|
|
*
|
|
* - 0 - Before run
|
|
* - 1 - Running
|
|
* - 2 - Run complete
|
|
*/
|
|
state: 0,
|
|
|
|
constructor: function (config) {
|
|
var me = this;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
// holds the ContextItem collection, keyed by element id
|
|
me.items = {};
|
|
|
|
// a collection of layouts keyed by layout id
|
|
me.layouts = {};
|
|
|
|
// the number of blocks of any kind:
|
|
me.blockCount = 0;
|
|
// the number of cycles that have been run:
|
|
me.cycleCount = 0;
|
|
// the number of flushes to the DOM:
|
|
me.flushCount = 0;
|
|
// the number of layout calculate calls:
|
|
me.calcCount = 0;
|
|
|
|
me.animateQueue = me.newQueue();
|
|
me.completionQueue = me.newQueue();
|
|
me.finalizeQueue = me.newQueue();
|
|
me.finishQueue = me.newQueue();
|
|
me.flushQueue = me.newQueue();
|
|
|
|
me.invalidateData = {};
|
|
|
|
/**
|
|
* @property {Ext.util.Queue} layoutQueue
|
|
* List of layouts to perform.
|
|
*/
|
|
me.layoutQueue = me.newQueue();
|
|
|
|
// this collection is special because we ensure that there are no parent/child pairs
|
|
// present, only distinct top-level components
|
|
me.invalidQueue = [];
|
|
|
|
me.triggers = {
|
|
data: {
|
|
/*
|
|
layoutId: [
|
|
{ item: contextItem, prop: propertyName }
|
|
]
|
|
*/
|
|
},
|
|
dom: {}
|
|
};
|
|
},
|
|
|
|
callLayout: function (layout, methodName) {
|
|
this.currentLayout = layout;
|
|
layout[methodName](this.getCmp(layout.owner));
|
|
},
|
|
|
|
cancelComponent: function (comp, isChild, isDestroying) {
|
|
var me = this,
|
|
components = comp,
|
|
isArray = !comp.isComponent,
|
|
length = isArray ? components.length : 1,
|
|
i, k, klen, items, layout, newQueue, oldQueue, entry, temp,
|
|
ownerCtContext;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
if (isArray) {
|
|
comp = components[i];
|
|
}
|
|
|
|
// If the component is being destroyed, remove the component's ContextItem from its parent's contextItem.childItems array
|
|
if (isDestroying && comp.ownerCt) {
|
|
ownerCtContext = this.items[comp.ownerCt.el.id];
|
|
if (ownerCtContext) {
|
|
Ext.Array.remove(ownerCtContext.childItems, me.getCmp(comp));
|
|
}
|
|
}
|
|
|
|
if (!isChild) {
|
|
oldQueue = me.invalidQueue;
|
|
klen = oldQueue.length;
|
|
|
|
if (klen) {
|
|
me.invalidQueue = newQueue = [];
|
|
for (k = 0; k < klen; ++k) {
|
|
entry = oldQueue[k];
|
|
temp = entry.item.target;
|
|
if (temp != comp && !temp.isDescendant(comp)) {
|
|
newQueue.push(entry);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
layout = comp.componentLayout;
|
|
me.cancelLayout(layout);
|
|
|
|
if (layout.getLayoutItems) {
|
|
items = layout.getLayoutItems();
|
|
if (items.length) {
|
|
me.cancelComponent(items, true);
|
|
}
|
|
}
|
|
|
|
if (comp.isContainer && !comp.collapsed) {
|
|
layout = comp.layout;
|
|
me.cancelLayout(layout);
|
|
|
|
items = layout.getVisibleItems();
|
|
if (items.length) {
|
|
me.cancelComponent(items, true);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
cancelLayout: function (layout) {
|
|
var me = this;
|
|
|
|
me.completionQueue.remove(layout);
|
|
me.finalizeQueue.remove(layout);
|
|
me.finishQueue.remove(layout);
|
|
me.layoutQueue.remove(layout);
|
|
|
|
if (layout.running) {
|
|
me.layoutDone(layout);
|
|
}
|
|
|
|
layout.ownerContext = null;
|
|
},
|
|
|
|
clearTriggers: function (layout, inDom) {
|
|
var id = layout.id,
|
|
collection = this.triggers[inDom ? 'dom' : 'data'],
|
|
triggers = collection && collection[id],
|
|
length = (triggers && triggers.length) || 0,
|
|
i, item, trigger;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
trigger = triggers[i];
|
|
item = trigger.item;
|
|
|
|
collection = inDom ? item.domTriggers : item.triggers;
|
|
delete collection[trigger.prop][id];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Flushes any pending writes to the DOM by calling each ContextItem in the flushQueue.
|
|
*/
|
|
flush: function () {
|
|
var me = this,
|
|
items = me.flushQueue.clear(),
|
|
length = items.length, i;
|
|
|
|
if (length) {
|
|
++me.flushCount;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
items[i].flush();
|
|
}
|
|
}
|
|
},
|
|
|
|
flushAnimations: function() {
|
|
var me = this,
|
|
items = me.animateQueue.clear(),
|
|
len = items.length,
|
|
i;
|
|
|
|
if (len) {
|
|
for (i = 0; i < len; i++) {
|
|
// Each Component may refuse to participate in animations.
|
|
// This is used by the BoxReorder plugin which drags a Component,
|
|
// during which that Component must be exempted from layout positioning.
|
|
if (items[i].target.animate !== false) {
|
|
items[i].flushAnimations();
|
|
}
|
|
}
|
|
|
|
// Ensure the first frame fires now to avoid a browser repaint with the elements in the "to" state
|
|
// before they are returned to their "from" state by the animation.
|
|
Ext.fx.Manager.runner();
|
|
}
|
|
},
|
|
|
|
flushInvalidates: function () {
|
|
var me = this,
|
|
queue = me.invalidQueue,
|
|
length = queue && queue.length,
|
|
comp, components, entry, i;
|
|
|
|
me.invalidQueue = [];
|
|
|
|
if (length) {
|
|
components = [];
|
|
for (i = 0; i < length; ++i) {
|
|
comp = (entry = queue[i]).item.target;
|
|
// we filter out-of-body components here but allow them into the queue to
|
|
// ensure that their child components are coalesced out (w/no additional
|
|
// cost beyond our normal effort to avoid parent/child components in the
|
|
// queue)
|
|
if (!comp.container.isDetachedBody) {
|
|
components.push(comp);
|
|
|
|
if (entry.options) {
|
|
me.invalidateData[comp.id] = entry.options;
|
|
}
|
|
}
|
|
}
|
|
|
|
me.invalidate(components, null);
|
|
}
|
|
},
|
|
|
|
flushLayouts: function (queueName, methodName, dontClear) {
|
|
var me = this,
|
|
layouts = dontClear ? me[queueName].items : me[queueName].clear(),
|
|
length = layouts.length,
|
|
i, layout;
|
|
|
|
if (length) {
|
|
for (i = 0; i < length; ++i) {
|
|
layout = layouts[i];
|
|
if (!layout.running) {
|
|
me.callLayout(layout, methodName);
|
|
}
|
|
}
|
|
me.currentLayout = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the ContextItem for a component.
|
|
* @param {Ext.Component} cmp
|
|
*/
|
|
getCmp: function (cmp) {
|
|
return this.getItem(cmp, cmp.el);
|
|
},
|
|
|
|
/**
|
|
* Returns the ContextItem for an element.
|
|
* @param {Ext.layout.ContextItem} parent
|
|
* @param {Ext.dom.Element} el
|
|
*/
|
|
getEl: function (parent, el) {
|
|
var item = this.getItem(el, el);
|
|
|
|
if (!item.parent) {
|
|
item.parent = parent;
|
|
|
|
// all items share an empty children array (to avoid null checks), so we can
|
|
// only push on to the children array if there is already something there (we
|
|
// copy-on-write):
|
|
if (parent.children.length) {
|
|
parent.children.push(item);
|
|
} else {
|
|
parent.children = [ item ]; // now parent has its own children[] (length=1)
|
|
}
|
|
}
|
|
|
|
return item;
|
|
},
|
|
|
|
getItem: function (target, el) {
|
|
var id = el.id,
|
|
items = this.items,
|
|
item = items[id] ||
|
|
(items[id] = new Ext.layout.ContextItem({
|
|
context: this,
|
|
target: target,
|
|
el: el
|
|
}));
|
|
|
|
return item;
|
|
},
|
|
|
|
handleFailure: function () {
|
|
// This method should never be called, but is need when layouts fail (hence the
|
|
// "should never"). We just disconnect any of the layouts from the run and return
|
|
// them to the state they would be in had the layout completed properly.
|
|
var layouts = this.layouts,
|
|
layout, key;
|
|
|
|
Ext.failedLayouts = (Ext.failedLayouts || 0) + 1;
|
|
|
|
for (key in layouts) {
|
|
layout = layouts[key];
|
|
|
|
if (layouts.hasOwnProperty(key)) {
|
|
layout.running = false;
|
|
layout.ownerContext = null;
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Invalidates one or more components' layouts (component and container). This can be
|
|
* called before run to identify the components that need layout or during the run to
|
|
* restart the layout of a component. This is called internally to flush any queued
|
|
* invalidations at the start of a cycle. If called during a run, it is not expected
|
|
* that new components will be introduced to the layout.
|
|
*
|
|
* @param {Ext.Component/Array} components An array of Components or a single Component.
|
|
* @param {Boolean} full True if all properties should be invalidated, otherwise only
|
|
* those calculated by the component should be invalidated.
|
|
*/
|
|
invalidate: function (components, full) {
|
|
var me = this,
|
|
isArray = !components.isComponent,
|
|
containerLayoutDone,
|
|
firstTime, i, comp, item, items, length, componentLayout, layout,
|
|
invalidateOptions, token;
|
|
|
|
for (i = 0, length = isArray ? components.length : 1; i < length; ++i) {
|
|
comp = isArray ? components[i] : components;
|
|
|
|
if (comp.rendered && !comp.hidden) {
|
|
item = me.getCmp(comp);
|
|
|
|
// Layout optimizations had to be disabled because they break
|
|
// Dock layout behavior.
|
|
// if (item.optOut) {
|
|
// continue;
|
|
// }
|
|
|
|
componentLayout = comp.componentLayout;
|
|
firstTime = !componentLayout.ownerContext;
|
|
layout = (comp.isContainer && !comp.collapsed) ? comp.layout : null;
|
|
|
|
// Extract any invalidate() options for this item.
|
|
invalidateOptions = me.invalidateData[item.id];
|
|
delete me.invalidateData[item.id];
|
|
|
|
// We invalidate the contextItem's in a top-down manner so that SizeModel
|
|
// info for containers is available to their children. This is a critical
|
|
// optimization since sizeModel determination often requires knowing the
|
|
// sizeModel of the ownerCt. If this weren't cached as we descend, this
|
|
// would be an O(N^2) operation! (where N=number of components, or 300+/-
|
|
// in Themes)
|
|
token = item.init(full, invalidateOptions);
|
|
|
|
if (invalidateOptions) {
|
|
me.processInvalidate(invalidateOptions, item, 'before');
|
|
}
|
|
|
|
// Allow the component layout a chance to effect its size model before we
|
|
// recurse down the component hierarchy (since children need to know the
|
|
// size model of their ownerCt).
|
|
if (componentLayout.beforeLayoutCycle) {
|
|
componentLayout.beforeLayoutCycle(item);
|
|
}
|
|
|
|
if (layout && layout.beforeLayoutCycle) {
|
|
// allow the container layout take a peek as well. Table layout can
|
|
// influence its children's styling due to the interaction of nesting
|
|
// table-layout:fixed and auto inside each other without intervening
|
|
// elements of known size.
|
|
layout.beforeLayoutCycle(item);
|
|
}
|
|
|
|
// Finish up the item-level processing that is based on the size model of
|
|
// the component.
|
|
token = item.initContinue(token);
|
|
|
|
// Start this state variable at true, since that is the value we want if
|
|
// they do not apply (i.e., no work of this kind on which to wait).
|
|
containerLayoutDone = true;
|
|
|
|
// A ComponentLayout MUST implement getLayoutItems to allow its children
|
|
// to be collected. Ext.container.Container does this, but non-Container
|
|
// Components which manage Components as part of their structure (e.g.,
|
|
// HtmlEditor) must still return child Components via getLayoutItems.
|
|
if (componentLayout.getLayoutItems) {
|
|
componentLayout.renderChildren();
|
|
|
|
items = componentLayout.getLayoutItems();
|
|
if (items.length) {
|
|
me.invalidate(items, true);
|
|
}
|
|
}
|
|
|
|
if (layout) {
|
|
containerLayoutDone = false;
|
|
layout.renderChildren();
|
|
|
|
items = layout.getVisibleItems();
|
|
if (items.length) {
|
|
me.invalidate(items, true);
|
|
}
|
|
}
|
|
|
|
// Finish the processing that requires the size models of child items to
|
|
// be determined (and some misc other stuff).
|
|
item.initDone(containerLayoutDone);
|
|
|
|
// Inform the layouts that we are about to begin (or begin again) now that
|
|
// the size models of the component and its children are setup.
|
|
me.resetLayout(componentLayout, item, firstTime);
|
|
if (layout) {
|
|
me.resetLayout(layout, item, firstTime);
|
|
}
|
|
|
|
// This has to occur after the component layout has had a chance to begin
|
|
// so that we can determine what kind of animation might be needed. TODO-
|
|
// move this determination into the layout itself.
|
|
item.initAnimation();
|
|
|
|
if (invalidateOptions) {
|
|
me.processInvalidate(invalidateOptions, item, 'after');
|
|
}
|
|
}
|
|
}
|
|
|
|
me.currentLayout = null;
|
|
},
|
|
|
|
layoutDone: function (layout) {
|
|
var ownerContext = layout.ownerContext;
|
|
|
|
layout.running = false;
|
|
|
|
// Once a component layout completes, we can mark it as "done".
|
|
if (layout.isComponentLayout) {
|
|
if (ownerContext.measuresBox) {
|
|
ownerContext.onBoxMeasured(); // be sure to release our boxParent
|
|
}
|
|
|
|
ownerContext.setProp('done', true);
|
|
} else {
|
|
ownerContext.setProp('containerLayoutDone', true);
|
|
}
|
|
|
|
--this.remainingLayouts;
|
|
++this.progressCount; // a layout completion is progress
|
|
},
|
|
|
|
newQueue: function () {
|
|
return new Ext.util.Queue();
|
|
},
|
|
|
|
processInvalidate: function (options, item, name) {
|
|
// When calling a callback, the currentLayout needs to be adjusted so
|
|
// that whichever layout caused the invalidate is the currentLayout...
|
|
if (options[name]) {
|
|
var me = this,
|
|
currentLayout = me.currentLayout;
|
|
|
|
me.currentLayout = options.layout || null;
|
|
|
|
options[name](item, options);
|
|
|
|
me.currentLayout = currentLayout;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Queues a ContextItem to have its {@link Ext.layout.ContextItem#flushAnimations} method called.
|
|
*
|
|
* @param {Ext.layout.ContextItem} item
|
|
* @private
|
|
*/
|
|
queueAnimation: function (item) {
|
|
this.animateQueue.add(item);
|
|
},
|
|
|
|
/**
|
|
* Queues a layout to have its {@link Ext.layout.Layout#completeLayout} method called.
|
|
*
|
|
* @param {Ext.layout.Layout} layout
|
|
* @private
|
|
*/
|
|
queueCompletion: function (layout) {
|
|
this.completionQueue.add(layout);
|
|
},
|
|
|
|
/**
|
|
* Queues a layout to have its {@link Ext.layout.Layout#finalizeLayout} method called.
|
|
*
|
|
* @param {Ext.layout.Layout} layout
|
|
* @private
|
|
*/
|
|
queueFinalize: function (layout) {
|
|
this.finalizeQueue.add(layout);
|
|
},
|
|
|
|
/**
|
|
* Queues a ContextItem for the next flush to the DOM. This should only be called by
|
|
* the {@link Ext.layout.ContextItem} class.
|
|
*
|
|
* @param {Ext.layout.ContextItem} item
|
|
* @private
|
|
*/
|
|
queueFlush: function (item) {
|
|
this.flushQueue.add(item);
|
|
},
|
|
|
|
chainFns: function (oldOptions, newOptions, funcName) {
|
|
var me = this,
|
|
oldLayout = oldOptions.layout,
|
|
newLayout = newOptions.layout,
|
|
oldFn = oldOptions[funcName],
|
|
newFn = newOptions[funcName];
|
|
|
|
// Call newFn last so it can get the final word on things... also, the "this"
|
|
// pointer will be passed correctly by createSequence with oldFn first.
|
|
return function (contextItem) {
|
|
var prev = me.currentLayout;
|
|
if (oldFn) {
|
|
me.currentLayout = oldLayout;
|
|
oldFn.call(oldOptions.scope || oldOptions, contextItem, oldOptions);
|
|
}
|
|
me.currentLayout = newLayout;
|
|
newFn.call(newOptions.scope || newOptions, contextItem, newOptions);
|
|
me.currentLayout = prev;
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Queue a component (and its tree) to be invalidated on the next cycle.
|
|
*
|
|
* @param {Ext.Component/Ext.layout.ContextItem} item The component or ContextItem to invalidate.
|
|
* @param {Object} options An object describing how to handle the invalidation (see
|
|
* {@link Ext.layout.ContextItem#invalidate} for details).
|
|
* @private
|
|
*/
|
|
queueInvalidate: function (item, options) {
|
|
var me = this,
|
|
newQueue = [],
|
|
oldQueue = me.invalidQueue,
|
|
index = oldQueue.length,
|
|
comp, old, oldComp, oldOptions, oldState;
|
|
|
|
if (item.isComponent) {
|
|
item = me.getCmp(comp = item);
|
|
} else {
|
|
comp = item.target;
|
|
}
|
|
|
|
item.invalid = true;
|
|
|
|
// See if comp is contained by any component already in the queue (ignore comp if
|
|
// that is the case). Eliminate any components in the queue that are contained by
|
|
// comp (by not adding them to newQueue).
|
|
while (index--) {
|
|
old = oldQueue[index];
|
|
oldComp = old.item.target;
|
|
|
|
if (comp.isDescendant(oldComp)) {
|
|
return; // oldComp contains comp, so this invalidate is redundant
|
|
}
|
|
|
|
if (oldComp == comp) {
|
|
// if already in the queue, update the options...
|
|
if (!(oldOptions = old.options)) {
|
|
old.options = options;
|
|
} else if (options) {
|
|
if (options.widthModel) {
|
|
oldOptions.widthModel = options.widthModel;
|
|
}
|
|
if (options.heightModel) {
|
|
oldOptions.heightModel = options.heightModel;
|
|
}
|
|
if (!(oldState = oldOptions.state)) {
|
|
oldOptions.state = options.state;
|
|
} else if (options.state) {
|
|
Ext.apply(oldState, options.state);
|
|
}
|
|
|
|
if (options.before) {
|
|
oldOptions.before = me.chainFns(oldOptions, options, 'before');
|
|
}
|
|
if (options.after) {
|
|
oldOptions.after = me.chainFns(oldOptions, options, 'after');
|
|
}
|
|
}
|
|
|
|
// leave the old queue alone now that we've update this comp's entry...
|
|
return;
|
|
}
|
|
|
|
if (!oldComp.isDescendant(comp)) {
|
|
newQueue.push(old); // comp does not contain oldComp
|
|
}
|
|
// else if (oldComp isDescendant of comp) skip
|
|
}
|
|
// newQueue contains only those components not a descendant of comp
|
|
|
|
// to get here, comp must not be a child of anything already in the queue, so it
|
|
// needs to be added along with its "options":
|
|
newQueue.push({ item: item, options: options });
|
|
|
|
me.invalidQueue = newQueue;
|
|
},
|
|
|
|
queueItemLayouts: function (item) {
|
|
var comp = item.isComponent ? item : item.target,
|
|
layout = comp.componentLayout;
|
|
|
|
if (!layout.pending && !layout.invalid && !layout.done) {
|
|
this.queueLayout(layout);
|
|
}
|
|
|
|
layout = comp.layout;
|
|
if (layout && !layout.pending && !layout.invalid && !layout.done) {
|
|
this.queueLayout(layout);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Queues a layout for the next calculation cycle. This should not be called if the
|
|
* layout is done, blocked or already in the queue. The only classes that should call
|
|
* this method are this class and {@link Ext.layout.ContextItem}.
|
|
*
|
|
* @param {Ext.layout.Layout} layout The layout to add to the queue.
|
|
* @private
|
|
*/
|
|
queueLayout: function (layout) {
|
|
this.layoutQueue.add(layout);
|
|
layout.pending = true;
|
|
},
|
|
|
|
/**
|
|
* Removes the ContextItem for an element from the cache and from the parent's
|
|
* "children" array.
|
|
* @param {Ext.layout.ContextItem} parent
|
|
* @param {Ext.dom.Element} el
|
|
*/
|
|
removeEl: function (parent, el) {
|
|
var id = el.id,
|
|
children = parent.children,
|
|
items = this.items;
|
|
|
|
if(children) {
|
|
Ext.Array.remove(children, items[id]);
|
|
}
|
|
delete items[id];
|
|
},
|
|
|
|
/**
|
|
* Resets the given layout object. This is called at the start of the run and can also
|
|
* be called during the run by calling {@link #invalidate}.
|
|
*/
|
|
resetLayout: function (layout, ownerContext, firstTime) {
|
|
var me = this;
|
|
|
|
me.currentLayout = layout;
|
|
|
|
layout.done = false;
|
|
layout.pending = true;
|
|
layout.firedTriggers = 0;
|
|
|
|
me.layoutQueue.add(layout);
|
|
|
|
if (firstTime) {
|
|
me.layouts[layout.id] = layout; // track the layout for this run by its id
|
|
layout.running = true;
|
|
|
|
if (layout.finishedLayout) {
|
|
me.finishQueue.add(layout);
|
|
}
|
|
|
|
// reset or update per-run counters:
|
|
|
|
++me.remainingLayouts;
|
|
++layout.layoutCount; // the number of whole layouts run for the layout
|
|
|
|
layout.ownerContext = ownerContext;
|
|
layout.beginCount = 0; // the number of beginLayout calls
|
|
layout.blockCount = 0; // the number of blocks set for the layout
|
|
layout.calcCount = 0; // the number of times calculate is called
|
|
layout.triggerCount = 0; // the number of triggers set for the layout
|
|
|
|
if (!layout.initialized) {
|
|
layout.initLayout();
|
|
}
|
|
|
|
layout.beginLayout(ownerContext);
|
|
} else {
|
|
++layout.beginCount;
|
|
|
|
if (!layout.running) {
|
|
// back into the mahem with this one:
|
|
++me.remainingLayouts;
|
|
layout.running = true;
|
|
|
|
if (layout.isComponentLayout) {
|
|
// this one is fun... if we call setProp('done', false) that would still
|
|
// trigger/unblock layouts, but what layouts are really looking for with
|
|
// this property is for it to go to true, not just be set to a value...
|
|
ownerContext.unsetProp('done');
|
|
}
|
|
|
|
// and it needs to be removed from the completion and/or finalize queues...
|
|
me.completionQueue.remove(layout);
|
|
me.finalizeQueue.remove(layout);
|
|
}
|
|
}
|
|
|
|
layout.beginLayoutCycle(ownerContext, firstTime);
|
|
},
|
|
|
|
/**
|
|
* Runs the layout calculations. This can be called only once on this object.
|
|
* @return {Boolean} True if all layouts were completed, false if not.
|
|
*/
|
|
run: function () {
|
|
var me = this,
|
|
flushed = false,
|
|
watchDog = 100;
|
|
|
|
me.flushInvalidates();
|
|
|
|
me.state = 1;
|
|
me.totalCount = me.layoutQueue.getCount();
|
|
|
|
// We may start with unflushed data placed by beginLayout calls. Since layouts may
|
|
// use setProp as a convenience, even in a write phase, we don't want to transition
|
|
// to a read phase with unflushed data since we can write it now "cheaply". Also,
|
|
// these value could easily be needed in the DOM in order to really get going with
|
|
// the calculations. In particular, fixed (configured) dimensions fall into this
|
|
// category.
|
|
me.flush();
|
|
|
|
// While we have layouts that have not completed...
|
|
while ((me.remainingLayouts || me.invalidQueue.length) && watchDog--) {
|
|
if (me.invalidQueue.length) {
|
|
me.flushInvalidates();
|
|
}
|
|
|
|
// if any of them can run right now, run them
|
|
if (me.runCycle()) {
|
|
flushed = false; // progress means we probably need to flush something
|
|
// but not all progress appears in the flushQueue (e.g. 'contentHeight')
|
|
} else if (!flushed) {
|
|
// as long as we are making progress, flush updates to the DOM and see if
|
|
// that triggers or unblocks any layouts...
|
|
me.flush();
|
|
flushed = true; // all flushed now, so more progress is required
|
|
|
|
me.flushLayouts('completionQueue', 'completeLayout');
|
|
} else if (!me.invalidQueue.length) {
|
|
// after a flush, we must make progress or something is WRONG
|
|
me.state = 2;
|
|
break;
|
|
}
|
|
|
|
if (!(me.remainingLayouts || me.invalidQueue.length)) {
|
|
me.flush();
|
|
me.flushLayouts('completionQueue', 'completeLayout');
|
|
me.flushLayouts('finalizeQueue', 'finalizeLayout');
|
|
}
|
|
}
|
|
|
|
return me.runComplete();
|
|
},
|
|
|
|
runComplete: function () {
|
|
var me = this;
|
|
|
|
me.state = 2;
|
|
|
|
if (me.remainingLayouts) {
|
|
me.handleFailure();
|
|
return false;
|
|
}
|
|
|
|
me.flush();
|
|
|
|
// Call finishedLayout on all layouts, but do not clear the queue.
|
|
me.flushLayouts('finishQueue', 'finishedLayout', true);
|
|
|
|
// Call notifyOwner on all layouts and then clear the queue.
|
|
me.flushLayouts('finishQueue', 'notifyOwner');
|
|
|
|
me.flush(); // in case any setProp calls were made
|
|
|
|
me.flushAnimations();
|
|
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* Performs one layout cycle by calling each layout in the layout queue.
|
|
* @return {Boolean} True if some progress was made, false if not.
|
|
* @protected
|
|
*/
|
|
runCycle: function () {
|
|
var me = this,
|
|
layouts = me.layoutQueue.clear(),
|
|
length = layouts.length,
|
|
i;
|
|
|
|
++me.cycleCount;
|
|
|
|
// This value is incremented by ContextItem#setProp whenever new values are set
|
|
// (thereby detecting forward progress):
|
|
me.progressCount = 0;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
me.runLayout(me.currentLayout = layouts[i]);
|
|
}
|
|
|
|
me.currentLayout = null;
|
|
|
|
return me.progressCount > 0;
|
|
},
|
|
|
|
/**
|
|
* Runs one layout as part of a cycle.
|
|
* @private
|
|
*/
|
|
runLayout: function (layout) {
|
|
var me = this,
|
|
ownerContext = me.getCmp(layout.owner);
|
|
|
|
layout.pending = false;
|
|
|
|
if (ownerContext.state.blocks) {
|
|
return;
|
|
}
|
|
|
|
// We start with the assumption that the layout will finish and if it does not, it
|
|
// must clear this flag. It turns out this is much simpler than knowing when a layout
|
|
// is done (100% correctly) when base classes and derived classes are collaborating.
|
|
// Knowing that some part of the layout is not done is much more obvious.
|
|
layout.done = true;
|
|
|
|
++layout.calcCount;
|
|
++me.calcCount;
|
|
|
|
layout.calculate(ownerContext);
|
|
|
|
if (layout.done) {
|
|
me.layoutDone(layout);
|
|
|
|
if (layout.completeLayout) {
|
|
me.queueCompletion(layout);
|
|
}
|
|
if (layout.finalizeLayout) {
|
|
me.queueFinalize(layout);
|
|
}
|
|
} else if (!layout.pending && !layout.invalid && !(layout.blockCount + layout.triggerCount - layout.firedTriggers)) {
|
|
// A layout that is not done and has no blocks or triggers that will queue it
|
|
// automatically, must be queued now:
|
|
me.queueLayout(layout);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Set the size of a component, element or composite or an array of components or elements.
|
|
* @param {Ext.Component/Ext.Component[]/Ext.dom.Element/Ext.dom.Element[]/Ext.dom.CompositeElement} items
|
|
* The item(s) to size.
|
|
* @param {Number} width The new width to set (ignored if undefined or NaN).
|
|
* @param {Number} height The new height to set (ignored if undefined or NaN).
|
|
*/
|
|
setItemSize: function(item, width, height) {
|
|
var items = item,
|
|
len = 1,
|
|
contextItem, i;
|
|
|
|
// NOTE: we don't pre-check for validity because:
|
|
// - maybe only one dimension is valid
|
|
// - the diagnostics layer will track the setProp call to help find who is trying
|
|
// (but failing) to set a property
|
|
// - setProp already checks this anyway
|
|
|
|
if (item.isComposite) {
|
|
items = item.elements;
|
|
len = items.length;
|
|
item = items[0];
|
|
} else if (!item.dom && !item.el) { // array by process of elimination
|
|
len = items.length;
|
|
item = items[0];
|
|
}
|
|
// else len = 1 and items = item (to avoid error on "items[++i]")
|
|
|
|
for (i = 0; i < len; ) {
|
|
contextItem = this.get(item);
|
|
contextItem.setSize(width, height);
|
|
|
|
item = items[++i]; // this accomodation avoids making an array of 1
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @override Ext.rtl.layout.ContextItem
|
|
* This override adds RTL support to Ext.layout.ContextItem.
|
|
*/
|
|
Ext.define('Ext.rtl.layout.ContextItem', {
|
|
override: 'Ext.layout.ContextItem',
|
|
|
|
addPositionStyles: function(styles, props) {
|
|
var x = props.x,
|
|
y = props.y,
|
|
count = 0;
|
|
|
|
if (x !== undefined) {
|
|
styles[this.parent.target.getHierarchyState().rtl ? 'right' : 'left'] = x + 'px';
|
|
++count;
|
|
}
|
|
if (y !== undefined) {
|
|
styles.top = y + 'px';
|
|
++count;
|
|
}
|
|
return count;
|
|
}
|
|
|
|
});
|
|
|
|
// @define Ext.layout.SizePolicy
|
|
|
|
/**
|
|
* This class describes how a layout will interact with a component it manages.
|
|
*
|
|
* There are special instances of this class stored as static properties to avoid object
|
|
* instantiation. All instances of this class should be treated as readonly objects.
|
|
*
|
|
* @class Ext.layout.SizePolicy
|
|
* @protected
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} readsWidth
|
|
* Indicates that the `width` of the component is consumed.
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} readsHeight
|
|
* Indicates that the `height` of the component is consumed.
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} setsWidth
|
|
* Indicates that the `width` of the component will be set (i.e., calculated).
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* @property {Boolean} setsHeight
|
|
* Indicates that the `height` of the component will be set (i.e., calculated).
|
|
* @readonly
|
|
*/
|
|
|
|
/**
|
|
* Component layout for components which maintain an inner body element which must be resized to synchronize with the
|
|
* Component size.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.Body', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.body'],
|
|
|
|
extend: Ext.layout.component.Auto ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'body',
|
|
|
|
beginLayout: function (ownerContext) {
|
|
this.callParent(arguments);
|
|
|
|
ownerContext.bodyContext = ownerContext.getEl('body');
|
|
},
|
|
|
|
beginLayoutCycle: function(ownerContext, firstCycle){
|
|
var me = this,
|
|
lastWidthModel = me.lastWidthModel,
|
|
lastHeightModel = me.lastHeightModel,
|
|
body = me.owner.body;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
|
|
body.setWidth(null);
|
|
}
|
|
|
|
if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
|
|
body.setHeight(null);
|
|
}
|
|
},
|
|
|
|
// Padding is exciting here because we have 2 el's: owner.el and owner.body. Content
|
|
// size always includes the padding of the targetEl, which should be owner.body. But
|
|
// it is common to have padding on owner.el also (such as a panel header), so we need
|
|
// to do some more padding work if targetContext is not owner.el. The base class has
|
|
// already handled the ownerContext's frameInfo (border+framing) so all that is left
|
|
// is padding.
|
|
|
|
calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
|
|
var height = this.callParent(arguments);
|
|
|
|
if (ownerContext.targetContext != ownerContext) {
|
|
height += ownerContext.getPaddingInfo().height;
|
|
}
|
|
|
|
return height;
|
|
},
|
|
|
|
calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
|
|
var width = this.callParent(arguments);
|
|
|
|
if (ownerContext.targetContext != ownerContext) {
|
|
width += ownerContext.getPaddingInfo().width;
|
|
}
|
|
|
|
return width;
|
|
},
|
|
|
|
measureContentWidth: function (ownerContext) {
|
|
return ownerContext.bodyContext.setWidth(ownerContext.bodyContext.el.dom.offsetWidth, false);
|
|
},
|
|
|
|
measureContentHeight: function (ownerContext) {
|
|
return ownerContext.bodyContext.setHeight(ownerContext.bodyContext.el.dom.offsetHeight, false);
|
|
},
|
|
|
|
publishInnerHeight: function (ownerContext, height) {
|
|
var innerHeight = height - ownerContext.getFrameInfo().height,
|
|
targetContext = ownerContext.targetContext;
|
|
|
|
if (targetContext != ownerContext) {
|
|
innerHeight -= ownerContext.getPaddingInfo().height;
|
|
}
|
|
|
|
// return the value here, it may get used in a subclass
|
|
return ownerContext.bodyContext.setHeight(innerHeight, !ownerContext.heightModel.natural);
|
|
},
|
|
|
|
publishInnerWidth: function (ownerContext, width) {
|
|
var innerWidth = width - ownerContext.getFrameInfo().width,
|
|
targetContext = ownerContext.targetContext;
|
|
|
|
if (targetContext != ownerContext) {
|
|
innerWidth -= ownerContext.getPaddingInfo().width;
|
|
}
|
|
|
|
ownerContext.bodyContext.setWidth(innerWidth, !ownerContext.widthModel.natural);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Component layout for Ext.form.FieldSet components
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.FieldSet', {
|
|
extend: Ext.layout.component.Body ,
|
|
alias: ['layout.fieldset'],
|
|
|
|
type: 'fieldset',
|
|
|
|
defaultCollapsedWidth: 100,
|
|
|
|
beforeLayoutCycle: function (ownerContext) {
|
|
if (ownerContext.target.collapsed) {
|
|
ownerContext.heightModel = this.sizeModels.shrinkWrap;
|
|
}
|
|
},
|
|
|
|
beginLayoutCycle: function (ownerContext) {
|
|
var target = ownerContext.target,
|
|
lastSize;
|
|
|
|
this.callParent(arguments);
|
|
|
|
// Each time we begin (2nd+ would be due to invalidate) we need to publish the
|
|
// known contentHeight if we are collapsed:
|
|
//
|
|
if (target.collapsed) {
|
|
ownerContext.setContentHeight(0);
|
|
// if we're collapsed, ignore a minHeight because it's likely going to
|
|
// be greater than the collapsed height
|
|
ownerContext.restoreMinHeight = target.minHeight;
|
|
delete target.minHeight;
|
|
|
|
// If we are also shrinkWrap width, we must provide a contentWidth (since the
|
|
// container layout is not going to run).
|
|
//
|
|
if (ownerContext.widthModel.shrinkWrap) {
|
|
lastSize = target.lastComponentSize;
|
|
ownerContext.setContentWidth((lastSize && lastSize.contentWidth) || this.defaultCollapsedWidth);
|
|
}
|
|
}
|
|
},
|
|
|
|
finishedLayout: function(ownerContext) {
|
|
var owner = this.owner,
|
|
restore = ownerContext.restoreMinHeight;
|
|
|
|
this.callParent(arguments);
|
|
if (restore) {
|
|
owner.minHeight = restore;
|
|
}
|
|
},
|
|
|
|
calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
|
|
var border = ownerContext.getBorderInfo(),
|
|
legend = ownerContext.target.legend;
|
|
|
|
// Height of fieldset is content height plus top border width (which is either the
|
|
// legend height or top border width) plus bottom border width
|
|
return ownerContext.getProp('contentHeight') +
|
|
ownerContext.getPaddingInfo().height +
|
|
// In IE8m and IEquirks the top padding is on the body el
|
|
((Ext.isIEQuirks || Ext.isIE8m) ?
|
|
ownerContext.bodyContext.getPaddingInfo().top : 0) +
|
|
(legend ? legend.getHeight() : border.top) +
|
|
border.bottom;
|
|
},
|
|
|
|
publishInnerHeight: function (ownerContext, height) {
|
|
// Subtract the legend off here and pass it up to the body
|
|
// We do this because we don't want to set an incorrect body height
|
|
// and then setting it again with the correct value
|
|
var legend = ownerContext.target.legend;
|
|
if (legend) {
|
|
height -= legend.getHeight();
|
|
}
|
|
this.callParent([ownerContext, height]);
|
|
},
|
|
|
|
getLayoutItems : function() {
|
|
var legend = this.owner.legend;
|
|
return legend ? [legend] : [];
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.layout.component.field.Slider', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: ['layout.sliderfield'],
|
|
|
|
extend: Ext.layout.component.field.Field ,
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'sliderfield',
|
|
|
|
beginLayout: function(ownerContext) {
|
|
this.callParent(arguments);
|
|
|
|
ownerContext.endElContext = ownerContext.getEl('endEl');
|
|
ownerContext.innerElContext = ownerContext.getEl('innerEl');
|
|
ownerContext.bodyElContext = ownerContext.getEl('bodyEl');
|
|
},
|
|
|
|
publishInnerHeight: function (ownerContext, height) {
|
|
var innerHeight = height - this.measureLabelErrorHeight(ownerContext),
|
|
endElPad,
|
|
inputPad;
|
|
if (this.owner.vertical) {
|
|
endElPad = ownerContext.endElContext.getPaddingInfo();
|
|
inputPad = ownerContext.inputContext.getPaddingInfo();
|
|
ownerContext.innerElContext.setHeight(innerHeight - inputPad.height - endElPad.height);
|
|
} else {
|
|
ownerContext.bodyElContext.setHeight(innerHeight);
|
|
}
|
|
},
|
|
|
|
publishInnerWidth: function (ownerContext, width) {
|
|
if (!this.owner.vertical) {
|
|
var endElPad = ownerContext.endElContext.getPaddingInfo(),
|
|
inputPad = ownerContext.inputContext.getPaddingInfo();
|
|
|
|
ownerContext.innerElContext.setWidth(width - inputPad.left - endElPad.right - ownerContext.labelContext.getProp('width'));
|
|
}
|
|
},
|
|
|
|
beginLayoutFixed: function(ownerContext, width, suffix) {
|
|
var me = this,
|
|
ieInputWidthAdjustment = me.ieInputWidthAdjustment;
|
|
|
|
if (ieInputWidthAdjustment) {
|
|
// adjust for IE 6/7 strict content-box model
|
|
// RTL: This might have to be padding-left unless the senses of the padding styles switch when in RTL mode.
|
|
me.owner.bodyEl.setStyle('padding-right', ieInputWidthAdjustment + 'px');
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the
|
|
* ability for x/y positioning using the standard x and y component config options.
|
|
*
|
|
* 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.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.form.Panel', {
|
|
* title: 'Absolute Layout',
|
|
* width: 300,
|
|
* height: 275,
|
|
* layout: {
|
|
* type: 'absolute'
|
|
* // layout-specific configs go here
|
|
* //itemCls: 'x-abs-layout-item',
|
|
* },
|
|
* url:'save-form.php',
|
|
* defaultType: 'textfield',
|
|
* items: [{
|
|
* x: 10,
|
|
* y: 10,
|
|
* xtype:'label',
|
|
* text: 'Send To:'
|
|
* },{
|
|
* x: 80,
|
|
* y: 10,
|
|
* name: 'to',
|
|
* anchor:'90%' // anchor width by percentage
|
|
* },{
|
|
* x: 10,
|
|
* y: 40,
|
|
* xtype:'label',
|
|
* text: 'Subject:'
|
|
* },{
|
|
* x: 80,
|
|
* y: 40,
|
|
* name: 'subject',
|
|
* anchor: '90%' // anchor width by percentage
|
|
* },{
|
|
* x:0,
|
|
* y: 80,
|
|
* xtype: 'textareafield',
|
|
* name: 'msg',
|
|
* anchor: '100% 100%' // anchor width and height
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Absolute', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.absolute',
|
|
extend: Ext.layout.container.Anchor ,
|
|
alternateClassName: 'Ext.layout.AbsoluteLayout',
|
|
|
|
/* End Definitions */
|
|
|
|
targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',
|
|
itemCls: Ext.baseCSSPrefix + 'abs-layout-item',
|
|
|
|
/**
|
|
* @cfg {Boolean} ignoreOnContentChange
|
|
* True indicates that changes to one item in this layout do not effect the layout in
|
|
* general. This may need to be set to false if {@link Ext.Component#autoScroll}
|
|
* is enabled for the container.
|
|
*/
|
|
ignoreOnContentChange: true,
|
|
|
|
type: 'absolute',
|
|
|
|
// private
|
|
adjustWidthAnchor: function(value, childContext) {
|
|
var padding = this.targetPadding,
|
|
x = childContext.getStyle('left');
|
|
|
|
return value - x + padding.left;
|
|
},
|
|
|
|
// private
|
|
adjustHeightAnchor: function(value, childContext) {
|
|
var padding = this.targetPadding,
|
|
y = childContext.getStyle('top');
|
|
|
|
return value - y + padding.top;
|
|
},
|
|
|
|
isItemLayoutRoot: function (item) {
|
|
return this.ignoreOnContentChange || this.callParent(arguments);
|
|
},
|
|
|
|
isItemShrinkWrap: function (item) {
|
|
return true;
|
|
},
|
|
|
|
beginLayout: function (ownerContext) {
|
|
var me = this,
|
|
target = me.getTarget();
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Do not set position: relative; when the absolute layout target is the body
|
|
if (target.dom !== document.body) {
|
|
target.position();
|
|
}
|
|
|
|
me.targetPadding = ownerContext.targetContext.getPaddingInfo();
|
|
},
|
|
|
|
isItemBoxParent: function (itemContext) {
|
|
return true;
|
|
},
|
|
|
|
onContentChange: function () {
|
|
if (this.ignoreOnContentChange) {
|
|
return false;
|
|
}
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
calculateContentSize: function (ownerContext, dimensions) {
|
|
var me = this,
|
|
containerDimensions = (dimensions || 0) |
|
|
((ownerContext.widthModel.shrinkWrap ? 1 : 0) |
|
|
(ownerContext.heightModel.shrinkWrap ? 2 : 0)),
|
|
calcWidth = (containerDimensions & 1) || undefined,
|
|
calcHeight = (containerDimensions & 2) || undefined,
|
|
childItems = ownerContext.childItems,
|
|
length = childItems.length,
|
|
contentHeight = 0,
|
|
contentWidth = 0,
|
|
needed = 0,
|
|
props = ownerContext.props,
|
|
targetPadding, child, childContext, height, i, margins, width;
|
|
|
|
if (calcWidth) {
|
|
if (isNaN(props.contentWidth)) {
|
|
++needed;
|
|
} else {
|
|
calcWidth = undefined;
|
|
}
|
|
}
|
|
if (calcHeight) {
|
|
if (isNaN(props.contentHeight)) {
|
|
++needed;
|
|
} else {
|
|
calcHeight = undefined;
|
|
}
|
|
}
|
|
|
|
if (needed) {
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
child = childContext.target;
|
|
height = calcHeight && childContext.getProp('height');
|
|
width = calcWidth && childContext.getProp('width');
|
|
margins = childContext.getMarginInfo();
|
|
|
|
height += margins.bottom;
|
|
width += margins.right;
|
|
|
|
contentHeight = Math.max(contentHeight, (child.y || 0) + height);
|
|
contentWidth = Math.max(contentWidth, (child.x || 0) + width);
|
|
|
|
if (isNaN(contentHeight) && isNaN(contentWidth)) {
|
|
me.done = false;
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (calcWidth || calcHeight) {
|
|
targetPadding = ownerContext.targetContext.getPaddingInfo();
|
|
}
|
|
if (calcWidth && !ownerContext.setContentWidth(contentWidth + targetPadding.width)) {
|
|
me.done = false;
|
|
}
|
|
if (calcHeight && !ownerContext.setContentHeight(contentHeight + targetPadding.height)) {
|
|
me.done = false;
|
|
}
|
|
|
|
/* add a '/' to turn on this log ('//* enables, '/*' disables)
|
|
if (me.done) {
|
|
var el = ownerContext.targetContext.el.dom;
|
|
Ext.log(this.owner.id, '.contentSize: ', contentWidth, 'x', contentHeight,
|
|
' => scrollSize: ', el.scrollWidth, 'x', el.scrollHeight);
|
|
}/**/
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.Absolute', {
|
|
override: 'Ext.layout.container.Absolute',
|
|
|
|
adjustWidthAnchor: function(value, childContext) {
|
|
if (this.owner.getHierarchyState().rtl) {
|
|
var padding = this.targetPadding,
|
|
x = childContext.getStyle('right');
|
|
|
|
return value - x + padding.right;
|
|
} else {
|
|
return this.callParent(arguments);
|
|
}
|
|
}
|
|
})
|
|
|
|
/**
|
|
* This is a layout that manages multiple Panels in an expandable accordion style such that by default only
|
|
* one Panel can be expanded at any given time (set {@link #multi} config to have more open). Each Panel has
|
|
* built-in support for expanding and collapsing.
|
|
*
|
|
* Note: Only Ext Panels and all subclasses of Ext.panel.Panel may be used in an accordion layout Container.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Accordion Layout',
|
|
* width: 300,
|
|
* height: 300,
|
|
* defaults: {
|
|
* // applied to each contained panel
|
|
* bodyStyle: 'padding:15px'
|
|
* },
|
|
* layout: {
|
|
* // layout-specific configs go here
|
|
* type: 'accordion',
|
|
* titleCollapse: false,
|
|
* animate: true,
|
|
* activeOnTop: true
|
|
* },
|
|
* items: [{
|
|
* title: 'Panel 1',
|
|
* html: 'Panel content!'
|
|
* },{
|
|
* title: 'Panel 2',
|
|
* html: 'Panel content!'
|
|
* },{
|
|
* title: 'Panel 3',
|
|
* html: 'Panel content!'
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Accordion', {
|
|
extend: Ext.layout.container.VBox ,
|
|
alias: ['layout.accordion'],
|
|
alternateClassName: 'Ext.layout.AccordionLayout',
|
|
|
|
targetCls: Ext.baseCSSPrefix + 'accordion-layout-ct',
|
|
itemCls: [Ext.baseCSSPrefix + 'box-item', Ext.baseCSSPrefix + 'accordion-item'],
|
|
|
|
align: 'stretch',
|
|
|
|
/**
|
|
* @cfg {Boolean} fill
|
|
* True to adjust the active item's height to fill the available space in the container, false to use the
|
|
* item's current height, or auto height if not explicitly set.
|
|
*/
|
|
fill : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} autoWidth
|
|
* Child Panels have their width actively managed to fit within the accordion's width.
|
|
* @removed This config is ignored in ExtJS 4
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} titleCollapse
|
|
* True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
|
|
* expand/collapse only when the toggle tool button is clicked. When set to false,
|
|
* {@link #hideCollapseTool} should be false also. An explicit {@link Ext.panel.Panel#titleCollapse} declared
|
|
* on the panel will override this setting.
|
|
*/
|
|
titleCollapse : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} hideCollapseTool
|
|
* True to hide the contained Panels' collapse/expand toggle buttons, false to display them.
|
|
* When set to true, {@link #titleCollapse} is automatically set to true.
|
|
*/
|
|
hideCollapseTool : false,
|
|
|
|
/**
|
|
* @cfg {Boolean} collapseFirst
|
|
* True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
|
|
* in the contained Panels' title bars, false to render it last. By default, this will use the
|
|
* {@link Ext.panel.Panel#collapseFirst} setting on the panel. If the config option is specified on the layout,
|
|
* it will override the panel value.
|
|
*/
|
|
collapseFirst : undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} animate
|
|
* True to slide the contained panels open and closed during expand/collapse using animation, false to open and
|
|
* close directly with no animation. Note: The layout performs animated collapsing
|
|
* and expanding, *not* the child Panels.
|
|
*/
|
|
animate : true,
|
|
/**
|
|
* @cfg {Boolean} activeOnTop
|
|
* Only valid when {@link #multi} is `false` and {@link #animate} is `false`.
|
|
*
|
|
* True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
|
|
* false to keep the panels in the rendered order.
|
|
*/
|
|
activeOnTop : false,
|
|
/**
|
|
* @cfg {Boolean} multi
|
|
* Set to true to enable multiple accordion items to be open at once.
|
|
*/
|
|
multi: false,
|
|
|
|
defaultAnimatePolicy: {
|
|
y: true,
|
|
height: true
|
|
},
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (!me.multi && me.animate) {
|
|
me.animatePolicy = Ext.apply({}, me.defaultAnimatePolicy);
|
|
} else {
|
|
me.animatePolicy = null;
|
|
}
|
|
},
|
|
|
|
beforeRenderItems: function (items) {
|
|
var me = this,
|
|
ln = items.length,
|
|
i = 0,
|
|
owner = me.owner,
|
|
collapseFirst = me.collapseFirst,
|
|
hasCollapseFirst = Ext.isDefined(collapseFirst),
|
|
expandedItem = me.getExpanded(true)[0],
|
|
multi = me.multi,
|
|
comp;
|
|
|
|
for (; i < ln; i++) {
|
|
comp = items[i];
|
|
if (!comp.rendered) {
|
|
// Set up initial properties for Panels in an accordion.
|
|
if (!multi || comp.collapsible !== false) {
|
|
comp.collapsible = true;
|
|
}
|
|
|
|
if (comp.collapsible) {
|
|
if (hasCollapseFirst) {
|
|
comp.collapseFirst = collapseFirst;
|
|
}
|
|
if (me.hideCollapseTool) {
|
|
comp.hideCollapseTool = me.hideCollapseTool;
|
|
comp.titleCollapse = true;
|
|
} else if (me.titleCollapse && comp.titleCollapse === undefined) {
|
|
// Only force titleCollapse if we don't explicitly
|
|
// set one on the child panel
|
|
comp.titleCollapse = me.titleCollapse;
|
|
}
|
|
}
|
|
|
|
delete comp.hideHeader;
|
|
delete comp.width;
|
|
comp.title = comp.title || ' ';
|
|
comp.addBodyCls(Ext.baseCSSPrefix + 'accordion-body');
|
|
|
|
// If only one child Panel is allowed to be expanded
|
|
// then collapse all except the first one found with collapsed:false
|
|
// If we have hasExpanded set, we've already done this
|
|
if (!multi) {
|
|
if (expandedItem) {
|
|
comp.collapsed = expandedItem !== comp;
|
|
} else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) {
|
|
expandedItem = comp;
|
|
} else {
|
|
comp.collapsed = true;
|
|
}
|
|
|
|
// If only one child Panel may be expanded, then intercept expand/show requests.
|
|
owner.mon(comp, {
|
|
show: me.onComponentShow,
|
|
beforeexpand: me.onComponentExpand,
|
|
beforecollapse: me.onComponentCollapse,
|
|
scope: me
|
|
});
|
|
}
|
|
// Need to still check this outside multi because we don't want
|
|
// a single item to be able to collapse
|
|
owner.mon(comp, 'beforecollapse', me.onComponentCollapse, me);
|
|
comp.headerOverCls = Ext.baseCSSPrefix + 'accordion-hd-over';
|
|
}
|
|
}
|
|
|
|
// If no collapsed:false Panels found, make the first one expanded.
|
|
if (!multi) {
|
|
if (!expandedItem) {
|
|
if (ln) {
|
|
items[0].collapsed = false;
|
|
}
|
|
} else if (me.activeOnTop) {
|
|
expandedItem.collapsed = false;
|
|
me.configureItem(expandedItem);
|
|
if (owner.items.indexOf(expandedItem) > 0) {
|
|
owner.insert(0, expandedItem);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getItemsRenderTree: function(items) {
|
|
this.beforeRenderItems(items);
|
|
return this.callParent(arguments);
|
|
},
|
|
|
|
renderItems : function(items, target) {
|
|
this.beforeRenderItems(items);
|
|
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
configureItem: function(item) {
|
|
this.callParent(arguments);
|
|
|
|
// We handle animations for the expand/collapse of items.
|
|
// Items do not have individual borders
|
|
item.animCollapse = item.border = false;
|
|
|
|
// If filling available space, all Panels flex.
|
|
if (this.fill) {
|
|
item.flex = 1;
|
|
}
|
|
},
|
|
|
|
beginLayout: function (ownerContext) {
|
|
this.callParent(arguments);
|
|
this.updatePanelClasses(ownerContext);
|
|
},
|
|
|
|
updatePanelClasses: function(ownerContext) {
|
|
var children = ownerContext.visibleItems,
|
|
ln = children.length,
|
|
siblingCollapsed = true,
|
|
i, child, header;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
child = children[i];
|
|
header = child.header;
|
|
header.addCls(Ext.baseCSSPrefix + 'accordion-hd');
|
|
|
|
if (siblingCollapsed) {
|
|
header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
|
|
} else {
|
|
header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
|
|
}
|
|
|
|
if (i + 1 == ln && child.collapsed) {
|
|
header.addCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
|
|
} else {
|
|
header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
|
|
}
|
|
|
|
siblingCollapsed = child.collapsed;
|
|
}
|
|
},
|
|
|
|
// When a Component expands, adjust the heights of the other Components to be just enough to accommodate
|
|
// their headers.
|
|
// The expanded Component receives the only flex value, and so gets all remaining space.
|
|
onComponentExpand: function(toExpand) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
multi = me.multi,
|
|
animate = me.animate,
|
|
moveToTop = !multi && !me.animate && me.activeOnTop,
|
|
expanded,
|
|
expandedCount, i,
|
|
previousValue;
|
|
|
|
if (!me.processing) {
|
|
me.processing = true;
|
|
previousValue = owner.deferLayouts;
|
|
owner.deferLayouts = true;
|
|
expanded = multi ? [] : me.getExpanded();
|
|
expandedCount = expanded.length;
|
|
|
|
// Collapse all other expanded child items (Won't loop if multi is true)
|
|
for (i = 0; i < expandedCount; i++) {
|
|
expanded[i].collapse();
|
|
}
|
|
|
|
if (moveToTop) {
|
|
// Prevent extra layout when moving the item
|
|
Ext.suspendLayouts();
|
|
owner.insert(0, toExpand);
|
|
Ext.resumeLayouts();
|
|
}
|
|
|
|
owner.deferLayouts = previousValue;
|
|
me.processing = false;
|
|
}
|
|
},
|
|
|
|
onComponentCollapse: function(comp) {
|
|
var me = this,
|
|
owner = me.owner,
|
|
toExpand,
|
|
expanded,
|
|
previousValue;
|
|
|
|
if (me.owner.items.getCount() === 1) {
|
|
// do not allow collapse if there is only one item
|
|
return false;
|
|
}
|
|
|
|
if (!me.processing) {
|
|
me.processing = true;
|
|
previousValue = owner.deferLayouts;
|
|
owner.deferLayouts = true;
|
|
toExpand = comp.next() || comp.prev();
|
|
|
|
// If we are allowing multi, and the "toCollapse" component is NOT the only expanded Component,
|
|
// then ask the box layout to collapse it to its header.
|
|
if (me.multi) {
|
|
expanded = me.getExpanded();
|
|
|
|
// If the collapsing Panel is the only expanded one, expand the following Component.
|
|
// All this is handling fill: true, so there must be at least one expanded,
|
|
if (expanded.length === 1) {
|
|
toExpand.expand();
|
|
}
|
|
|
|
} else if (toExpand) {
|
|
toExpand.expand();
|
|
}
|
|
owner.deferLayouts = previousValue;
|
|
me.processing = false;
|
|
}
|
|
},
|
|
|
|
onComponentShow: function(comp) {
|
|
// Showing a Component means that you want to see it, so expand it.
|
|
this.onComponentExpand(comp);
|
|
},
|
|
|
|
getExpanded: function(explicitCheck){
|
|
var items = this.owner.items.items,
|
|
len = items.length,
|
|
i = 0,
|
|
out = [],
|
|
add,
|
|
item;
|
|
|
|
for (; i < len; ++i) {
|
|
item = items[i];
|
|
if (explicitCheck) {
|
|
add = item.hasOwnProperty('collapsed') && item.collapsed === false;
|
|
} else {
|
|
add = !item.collapsed;
|
|
}
|
|
if (add) {
|
|
out.push(item);
|
|
}
|
|
}
|
|
return out;
|
|
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class functions **between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
|
|
* layout** to resize both immediate siblings.
|
|
*
|
|
* A Splitter will preserve the flex ratio of any flexed siblings it is required to resize. It does this by setting the `flex` property of *all* flexed siblings
|
|
* to equal their pixel size. The actual numerical `flex` property in the Components will change, but the **ratio** to the total flex value will be preserved.
|
|
*
|
|
* A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
|
|
* The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#method-collapse collapse} or {@link Ext.panel.Panel#method-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`.
|
|
*/
|
|
Ext.define('Ext.resizer.Splitter', {
|
|
extend: Ext.Component ,
|
|
|
|
|
|
alias: 'widget.splitter',
|
|
|
|
childEls: [
|
|
'collapseEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<tpl if="collapsible===true">',
|
|
'<div id="{id}-collapseEl" class="', Ext.baseCSSPrefix, 'collapse-el ',
|
|
Ext.baseCSSPrefix, 'layout-split-{collapseDir}{childElCls}"> ',
|
|
'</div>',
|
|
'</tpl>'
|
|
],
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'splitter',
|
|
collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',
|
|
|
|
// Default to tree, allow internal classes to disable resizing
|
|
canResize: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} collapsible
|
|
* True to show a mini-collapse tool in the Splitter to toggle expand and collapse on the {@link #collapseTarget} Panel.
|
|
* Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.
|
|
*/
|
|
collapsible: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} performCollapse
|
|
* Set to false to prevent this Splitter's mini-collapse tool from managing the collapse
|
|
* state of the {@link #collapseTarget}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} collapseOnDblClick
|
|
* True to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
|
|
*/
|
|
collapseOnDblClick: true,
|
|
|
|
/**
|
|
* @cfg {Number} defaultSplitMin
|
|
* Provides a default minimum width or height for the two components
|
|
* that the splitter is between.
|
|
*/
|
|
defaultSplitMin: 40,
|
|
|
|
/**
|
|
* @cfg {Number} defaultSplitMax
|
|
* Provides a default maximum width or height for the two components
|
|
* that the splitter is between.
|
|
*/
|
|
defaultSplitMax: 1000,
|
|
|
|
/**
|
|
* @cfg {String} collapsedCls
|
|
* A class to add to the splitter when it is collapsed. See {@link #collapsible}.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Ext.panel.Panel} collapseTarget
|
|
* A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next'.
|
|
*
|
|
* Or the immediate sibling Panel to collapse.
|
|
*
|
|
* The orientation of the mini-collapse tool will be inferred from this setting.
|
|
*
|
|
* **Note that only Panels may be collapsed.**
|
|
*/
|
|
collapseTarget: 'next',
|
|
|
|
/**
|
|
* @property {String} orientation
|
|
* Orientation of this Splitter. `'vertical'` when used in an hbox layout, `'horizontal'`
|
|
* when used in a vbox layout.
|
|
*/
|
|
|
|
horizontal: false,
|
|
vertical: false,
|
|
|
|
/**
|
|
* @cfg {Number} size
|
|
* The size of the splitter. This becomes the height for vertical splitters and
|
|
* width for horizontal splitters.
|
|
*/
|
|
size: 5,
|
|
|
|
/**
|
|
* Returns the config object (with an `xclass` property) for the splitter tracker. This
|
|
* is overridden by {@link Ext.resizer.BorderSplitter BorderSplitter} to create a
|
|
* {@link Ext.resizer.BorderSplitterTracker BorderSplitterTracker}.
|
|
* @protected
|
|
*/
|
|
getTrackerConfig: function () {
|
|
return {
|
|
xclass: 'Ext.resizer.SplitterTracker',
|
|
el: this.el,
|
|
splitter: this
|
|
};
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this,
|
|
target = me.getCollapseTarget();
|
|
|
|
me.callParent();
|
|
|
|
if (target.collapsed) {
|
|
me.addCls(me.collapsedClsInternal);
|
|
}
|
|
if (!me.canResize) {
|
|
me.addCls(me.baseCls + '-noresize');
|
|
}
|
|
|
|
Ext.applyIf(me.renderData, {
|
|
collapseDir: me.getCollapseDirection(),
|
|
collapsible: me.collapsible || target.collapsible
|
|
});
|
|
|
|
me.protoEl.unselectable();
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this,
|
|
collapseEl;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Add listeners on the mini-collapse tool unless performCollapse is set to false
|
|
if (me.performCollapse !== false) {
|
|
if (me.renderData.collapsible) {
|
|
me.mon(me.collapseEl, 'click', me.toggleTargetCmp, me);
|
|
}
|
|
if (me.collapseOnDblClick) {
|
|
me.mon(me.el, 'dblclick', me.toggleTargetCmp, me);
|
|
}
|
|
}
|
|
|
|
// Ensure the mini collapse icon is set to the correct direction when the target is collapsed/expanded by any means
|
|
me.mon(me.getCollapseTarget(), {
|
|
collapse: me.onTargetCollapse,
|
|
expand: me.onTargetExpand,
|
|
beforeexpand: me.onBeforeTargetExpand,
|
|
beforecollapse: me.onBeforeTargetCollapse,
|
|
scope: me
|
|
});
|
|
|
|
if (me.canResize) {
|
|
me.tracker = Ext.create(me.getTrackerConfig());
|
|
// Relay the most important events to our owner (could open wider later):
|
|
me.relayEvents(me.tracker, [ 'beforedragstart', 'dragstart', 'dragend' ]);
|
|
}
|
|
|
|
collapseEl = me.collapseEl;
|
|
if (collapseEl) {
|
|
collapseEl.lastCollapseDirCls = me.collapseDirProps[me.collapseDirection].cls;
|
|
}
|
|
},
|
|
|
|
getCollapseDirection: function() {
|
|
var me = this,
|
|
dir = me.collapseDirection,
|
|
collapseTarget, idx, items, type;
|
|
|
|
if (!dir) {
|
|
collapseTarget = me.collapseTarget;
|
|
if (collapseTarget.isComponent) {
|
|
dir = collapseTarget.collapseDirection;
|
|
}
|
|
|
|
if (!dir) {
|
|
// Avoid duplication of string tests.
|
|
// Create a two bit truth table of the configuration of the Splitter:
|
|
// Collapse Target | orientation
|
|
// 0 0 = next, horizontal
|
|
// 0 1 = next, vertical
|
|
// 1 0 = prev, horizontal
|
|
// 1 1 = prev, vertical
|
|
type = me.ownerCt.layout.type;
|
|
if (collapseTarget.isComponent) {
|
|
items = me.ownerCt.items;
|
|
idx = Number(items.indexOf(collapseTarget) === items.indexOf(me) - 1) << 1 | Number(type === 'hbox');
|
|
} else {
|
|
idx = Number(me.collapseTarget === 'prev') << 1 | Number(type === 'hbox');
|
|
}
|
|
|
|
// Read the data out the truth table
|
|
dir = ['bottom', 'right', 'top', 'left'][idx];
|
|
}
|
|
|
|
me.collapseDirection = dir;
|
|
}
|
|
|
|
me.setOrientation((dir === 'top' || dir === 'bottom') ? 'horizontal' : 'vertical');
|
|
|
|
return dir;
|
|
},
|
|
|
|
getCollapseTarget: function() {
|
|
var me = this;
|
|
|
|
return me.collapseTarget.isComponent ? me.collapseTarget
|
|
: me.collapseTarget === 'prev' ? me.previousSibling() : me.nextSibling();
|
|
},
|
|
|
|
setCollapseEl: function(display){
|
|
var el = this.collapseEl;
|
|
if (el) {
|
|
el.setDisplayed(display);
|
|
}
|
|
},
|
|
|
|
onBeforeTargetExpand: function(target) {
|
|
this.setCollapseEl('none');
|
|
},
|
|
|
|
onBeforeTargetCollapse: function(){
|
|
this.setCollapseEl('none');
|
|
},
|
|
|
|
onTargetCollapse: function(target) {
|
|
this.el.addCls([this.collapsedClsInternal, this.collapsedCls]);
|
|
this.setCollapseEl('');
|
|
},
|
|
|
|
onTargetExpand: function(target) {
|
|
this.el.removeCls([this.collapsedClsInternal, this.collapsedCls]);
|
|
this.setCollapseEl('');
|
|
},
|
|
|
|
collapseDirProps: {
|
|
top: {
|
|
cls: Ext.baseCSSPrefix + 'layout-split-top'
|
|
},
|
|
right: {
|
|
cls: Ext.baseCSSPrefix + 'layout-split-right'
|
|
},
|
|
bottom: {
|
|
cls: Ext.baseCSSPrefix + 'layout-split-bottom'
|
|
},
|
|
left: {
|
|
cls: Ext.baseCSSPrefix + 'layout-split-left'
|
|
}
|
|
},
|
|
|
|
orientationProps: {
|
|
horizontal: {
|
|
opposite: 'vertical',
|
|
fixedAxis: 'height',
|
|
stretchedAxis: 'width'
|
|
},
|
|
vertical: {
|
|
opposite: 'horizontal',
|
|
fixedAxis: 'width',
|
|
stretchedAxis: 'height'
|
|
}
|
|
},
|
|
|
|
applyCollapseDirection: function () {
|
|
var me = this,
|
|
collapseEl = me.collapseEl,
|
|
collapseDirProps = me.collapseDirProps[me.collapseDirection],
|
|
cls;
|
|
|
|
if (collapseEl) {
|
|
cls = collapseEl.lastCollapseDirCls;
|
|
if (cls) {
|
|
collapseEl.removeCls(cls);
|
|
}
|
|
|
|
collapseEl.addCls(collapseEl.lastCollapseDirCls = collapseDirProps.cls);
|
|
}
|
|
},
|
|
|
|
applyOrientation: function () {
|
|
var me = this,
|
|
orientation = me.orientation,
|
|
orientationProps = me.orientationProps[orientation],
|
|
defaultSize = me.size,
|
|
fixedSizeProp = orientationProps.fixedAxis,
|
|
stretchSizeProp = orientationProps.stretchedAxis,
|
|
cls = me.baseCls + '-';
|
|
|
|
me[orientation] = true;
|
|
me[orientationProps.opposite] = false;
|
|
|
|
if (!me.hasOwnProperty(fixedSizeProp) || me[fixedSizeProp] === '100%') {
|
|
me[fixedSizeProp] = defaultSize;
|
|
}
|
|
if (!me.hasOwnProperty(stretchSizeProp) || me[stretchSizeProp] === defaultSize) {
|
|
me[stretchSizeProp] = '100%';
|
|
}
|
|
|
|
me.removeCls(cls + orientationProps.opposite);
|
|
me.addCls(cls + orientation);
|
|
},
|
|
|
|
setOrientation: function (orientation) {
|
|
var me = this;
|
|
|
|
if (me.orientation !== orientation) {
|
|
me.orientation = orientation;
|
|
me.applyOrientation();
|
|
}
|
|
},
|
|
|
|
updateOrientation: function () {
|
|
delete this.collapseDirection; // recompute
|
|
this.getCollapseDirection();
|
|
this.applyCollapseDirection();
|
|
},
|
|
|
|
toggleTargetCmp: function(e, t) {
|
|
var cmp = this.getCollapseTarget(),
|
|
placeholder = cmp.placeholder,
|
|
toggle;
|
|
|
|
// We can only toggle the target if it offers the expand/collapse API
|
|
if (Ext.isFunction(cmp.expand) && Ext.isFunction(cmp.collapse)) {
|
|
if (placeholder && !placeholder.hidden) {
|
|
toggle = true;
|
|
} else {
|
|
toggle = !cmp.hidden;
|
|
}
|
|
|
|
if (toggle) {
|
|
if (cmp.collapsed) {
|
|
cmp.expand();
|
|
} else if (cmp.collapseDirection) {
|
|
cmp.collapse();
|
|
} else {
|
|
cmp.collapse(this.renderData.collapseDir);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/*
|
|
* Work around IE bug. %age margins do not get recalculated on element resize unless repaint called.
|
|
*/
|
|
setSize: function() {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
if (Ext.isIE && me.el) {
|
|
me.el.repaint();
|
|
}
|
|
},
|
|
|
|
beforeDestroy: function(){
|
|
Ext.destroy(this.tracker);
|
|
this.callParent();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private utility class for Ext.layout.container.Border.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.resizer.BorderSplitter', {
|
|
extend: Ext.resizer.Splitter ,
|
|
|
|
|
|
|
|
alias: 'widget.bordersplitter',
|
|
|
|
// must be configured in by the border layout:
|
|
collapseTarget: null,
|
|
|
|
getTrackerConfig: function () {
|
|
var trackerConfig = this.callParent();
|
|
|
|
trackerConfig.xclass = 'Ext.resizer.BorderSplitterTracker';
|
|
|
|
return trackerConfig;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars
|
|
* between regions and built-in {@link Ext.panel.Panel#collapsible expanding and collapsing} of regions.
|
|
*
|
|
* This class is intended to be extended or created via the `layout:'border'` {@link Ext.container.Container#layout}
|
|
* config, and should generally not need to be created directly via the new keyword.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* width: 500,
|
|
* height: 300,
|
|
* title: 'Border Layout',
|
|
* layout: 'border',
|
|
* items: [{
|
|
* title: 'South Region is resizable',
|
|
* region: 'south', // position for region
|
|
* xtype: 'panel',
|
|
* height: 100,
|
|
* split: true, // enable resizing
|
|
* margins: '0 5 5 5'
|
|
* },{
|
|
* // xtype: 'panel' implied by default
|
|
* title: 'West Region is collapsible',
|
|
* region:'west',
|
|
* xtype: 'panel',
|
|
* margins: '5 0 0 5',
|
|
* width: 200,
|
|
* collapsible: true, // make collapsible
|
|
* id: 'west-region-container',
|
|
* layout: 'fit'
|
|
* },{
|
|
* title: 'Center Region',
|
|
* region: 'center', // center region is required, no width/height specified
|
|
* xtype: 'panel',
|
|
* layout: 'fit',
|
|
* margins: '5 5 0 0'
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* # Notes
|
|
*
|
|
* - When using the split option, the layout will automatically insert a {@link Ext.resizer.Splitter}
|
|
* into the appropriate place. This will modify the underlying
|
|
* {@link Ext.container.Container#property-items items} collection in the container.
|
|
*
|
|
* - Any Container using the Border layout **must** have a child item with `region:'center'`.
|
|
* The child item in the center region will always be resized to fill the remaining space
|
|
* not used by the other regions in the layout.
|
|
*
|
|
* - Any child items with a region of `west` or `east` may be configured with either an initial
|
|
* `width`, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage width
|
|
* **string** (Which is simply divided by 100 and used as a flex value).
|
|
* The 'center' region has a flex value of `1`.
|
|
*
|
|
* - Any child items with a region of `north` or `south` may be configured with either an initial
|
|
* `height`, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage height
|
|
* **string** (Which is simply divided by 100 and used as a flex value).
|
|
* The 'center' region has a flex value of `1`.
|
|
*
|
|
* - **There is no BorderLayout.Region class in ExtJS 4.0+**
|
|
*/
|
|
Ext.define('Ext.layout.container.Border', {
|
|
|
|
extend: Ext.layout.container.Container ,
|
|
alias: 'layout.border',
|
|
alternateClassName: 'Ext.layout.BorderLayout',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
targetCls: Ext.baseCSSPrefix + 'border-layout-ct',
|
|
|
|
itemCls: [Ext.baseCSSPrefix + 'border-item', Ext.baseCSSPrefix + 'box-item'],
|
|
|
|
type: 'border',
|
|
|
|
isBorderLayout: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} split
|
|
* This configuration option is to be applied to the **child `items`** managed by this layout.
|
|
* Each region with `split:true` will get a {@link Ext.resizer.BorderSplitter Splitter} that
|
|
* allows for manual resizing of the container. Except for the `center` region.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [splitterResize=true]
|
|
* This configuration option is to be applied to the **child `items`** managed by this layout and
|
|
* is used in conjunction with {@link #split}. By default, when specifying {@link #split}, the region
|
|
* can be dragged to be resized. Set this option to false to show the split bar but prevent resizing.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String/Object} padding
|
|
* Sets the padding to be applied to all child items managed by this layout.
|
|
*
|
|
* This property can be specified as a string containing space-separated, numeric
|
|
* padding values. The order of the sides associated with each value matches the way
|
|
* CSS processes padding values:
|
|
*
|
|
* - If there is only one value, it applies to all sides.
|
|
* - If there are two values, the top and bottom borders are set to the first value
|
|
* and the right and left are set to the second.
|
|
* - If there are three values, the top is set to the first value, the left and right
|
|
* are set to the second, and the bottom is set to the third.
|
|
* - If there are four values, they apply to the top, right, bottom, and left,
|
|
* respectively.
|
|
*
|
|
*/
|
|
padding: undefined,
|
|
|
|
percentageRe: /(\d+)%/,
|
|
|
|
horzMarginProp: 'left',
|
|
padOnContainerProp: 'left',
|
|
padNotOnContainerProp: 'right',
|
|
|
|
/**
|
|
* Reused meta-data objects that describe axis properties.
|
|
* @private
|
|
*/
|
|
axisProps: {
|
|
horz: {
|
|
borderBegin: 'west',
|
|
borderEnd: 'east',
|
|
horizontal: true,
|
|
posProp: 'x',
|
|
sizeProp: 'width',
|
|
sizePropCap: 'Width'
|
|
},
|
|
vert: {
|
|
borderBegin: 'north',
|
|
borderEnd: 'south',
|
|
horizontal: false,
|
|
posProp: 'y',
|
|
sizeProp: 'height',
|
|
sizePropCap: 'Height'
|
|
}
|
|
},
|
|
|
|
// @private
|
|
centerRegion: null,
|
|
|
|
manageMargins: true,
|
|
|
|
panelCollapseAnimate: true,
|
|
|
|
panelCollapseMode: 'placeholder',
|
|
|
|
/**
|
|
* @cfg {Object} regionWeights
|
|
* The default weights to assign to regions in the border layout. These values are
|
|
* used when a region does not contain a `weight` property. This object must have
|
|
* properties for all regions ("north", "south", "east" and "west").
|
|
*
|
|
* **IMPORTANT:** Since this is an object, changing its properties will impact ALL
|
|
* instances of Border layout. If this is not desired, provide a replacement object as
|
|
* a config option instead:
|
|
*
|
|
* layout: {
|
|
* type: 'border',
|
|
* regionWeights: {
|
|
* west: 20,
|
|
* north: 10,
|
|
* south: -10,
|
|
* east: -20
|
|
* }
|
|
* }
|
|
*
|
|
* The region with the highest weight is assigned space from the border before other
|
|
* regions. Regions of equal weight are assigned space based on their position in the
|
|
* owner's items list (first come, first served).
|
|
*/
|
|
regionWeights: {
|
|
north: 20,
|
|
south: 10,
|
|
center: 0,
|
|
west: -10,
|
|
east: -20
|
|
},
|
|
|
|
//----------------------------------
|
|
// Layout processing
|
|
|
|
/**
|
|
* Creates the axis objects for the layout. These are only missing size information
|
|
* which is added during {@link #calculate}.
|
|
* @private
|
|
*/
|
|
beginAxis: function (ownerContext, regions, name) {
|
|
var me = this,
|
|
props = me.axisProps[name],
|
|
isVert = !props.horizontal,
|
|
sizeProp = props.sizeProp,
|
|
totalFlex = 0,
|
|
childItems = ownerContext.childItems,
|
|
length = childItems.length,
|
|
center, i, childContext, centerFlex, comp, region, match, size, type, target, placeholder;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
comp = childContext.target;
|
|
|
|
childContext.layoutPos = {};
|
|
|
|
if (comp.region) {
|
|
childContext.region = region = comp.region;
|
|
|
|
childContext.isCenter = comp.isCenter;
|
|
childContext.isHorz = comp.isHorz;
|
|
childContext.isVert = comp.isVert;
|
|
|
|
childContext.weight = comp.weight || me.regionWeights[region] || 0;
|
|
regions[comp.id] = childContext;
|
|
|
|
if (comp.isCenter) {
|
|
center = childContext;
|
|
centerFlex = comp.flex;
|
|
ownerContext.centerRegion = center;
|
|
|
|
continue;
|
|
}
|
|
|
|
if (isVert !== childContext.isVert) {
|
|
continue;
|
|
}
|
|
|
|
// process regions "isVert ? north||south : east||center||west"
|
|
|
|
childContext.reverseWeighting = (region == props.borderEnd);
|
|
|
|
size = comp[sizeProp];
|
|
type = typeof size;
|
|
|
|
if (!comp.collapsed) {
|
|
if (type == 'string' && (match = me.percentageRe.exec(size))) {
|
|
childContext.percentage = parseInt(match[1], 10);
|
|
} else if (comp.flex) {
|
|
totalFlex += childContext.flex = comp.flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Special cases for a collapsed center region
|
|
if (center) {
|
|
target = center.target;
|
|
|
|
if ((placeholder = target.placeholderFor)) {
|
|
if (!centerFlex && isVert === placeholder.collapsedVertical()) {
|
|
// The center region is a placeholder, collapsed in this axis
|
|
centerFlex = 0;
|
|
center.collapseAxis = name;
|
|
}
|
|
} else if (target.collapsed && (isVert === target.collapsedVertical())) {
|
|
// The center region is a collapsed header, collapsed in this axis
|
|
centerFlex = 0;
|
|
center.collapseAxis = name;
|
|
}
|
|
}
|
|
|
|
if (centerFlex == null) {
|
|
// If we still don't have a center flex, default to 1
|
|
centerFlex = 1;
|
|
}
|
|
|
|
totalFlex += centerFlex;
|
|
|
|
return Ext.apply({
|
|
before : isVert ? 'top' : 'left',
|
|
totalFlex : totalFlex
|
|
}, props);
|
|
},
|
|
|
|
beginLayout: function (ownerContext) {
|
|
var me = this,
|
|
items = me.getLayoutItems(),
|
|
pad = me.padding,
|
|
type = typeof pad,
|
|
padOnContainer = false,
|
|
childContext, item, length, i, regions, collapseTarget,
|
|
doShow, hidden, region;
|
|
|
|
// We sync the visibility state of splitters with their region:
|
|
if (pad) {
|
|
if (type == 'string' || type == 'number') {
|
|
pad = Ext.util.Format.parseBox(pad);
|
|
}
|
|
} else {
|
|
pad = ownerContext.getEl('getTargetEl').getPaddingInfo();
|
|
padOnContainer = true;
|
|
}
|
|
ownerContext.outerPad = pad;
|
|
ownerContext.padOnContainer = padOnContainer;
|
|
|
|
for (i = 0, length = items.length; i < length; ++i) {
|
|
item = items[i];
|
|
collapseTarget = me.getSplitterTarget(item);
|
|
if (collapseTarget) { // if (splitter)
|
|
doShow = undefined;
|
|
hidden = !!item.hidden;
|
|
if (!collapseTarget.split) {
|
|
if (collapseTarget.isCollapsingOrExpanding) {
|
|
doShow = !!collapseTarget.collapsed;
|
|
}
|
|
} else if (hidden !== collapseTarget.hidden) {
|
|
doShow = !collapseTarget.hidden;
|
|
}
|
|
|
|
if (doShow) {
|
|
item.show();
|
|
} else if (doShow === false) {
|
|
item.hide();
|
|
}
|
|
}
|
|
}
|
|
|
|
// The above synchronized visibility of splitters with their regions, so we need
|
|
// to make this call after that so that childItems and visibleItems are correct:
|
|
//
|
|
me.callParent(arguments);
|
|
|
|
items = ownerContext.childItems;
|
|
length = items.length;
|
|
regions = {};
|
|
|
|
ownerContext.borderAxisHorz = me.beginAxis(ownerContext, regions, 'horz');
|
|
ownerContext.borderAxisVert = me.beginAxis(ownerContext, regions, 'vert');
|
|
|
|
// Now that weights are assigned to the region's contextItems, we assign those
|
|
// same weights to the contextItem for the splitters. We also cross link the
|
|
// contextItems for the collapseTarget and its splitter.
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = items[i];
|
|
collapseTarget = me.getSplitterTarget(childContext.target);
|
|
|
|
if (collapseTarget) { // if (splitter)
|
|
region = regions[collapseTarget.id]
|
|
if (!region) {
|
|
// if the region was hidden it will not be part of childItems, and
|
|
// so beginAxis() won't add it to the regions object, so we have
|
|
// to create the context item here.
|
|
region = ownerContext.getEl(collapseTarget.el, me);
|
|
region.region = collapseTarget.region;
|
|
}
|
|
childContext.collapseTarget = collapseTarget = region;
|
|
childContext.weight = collapseTarget.weight;
|
|
childContext.reverseWeighting = collapseTarget.reverseWeighting;
|
|
collapseTarget.splitter = childContext;
|
|
childContext.isHorz = collapseTarget.isHorz;
|
|
childContext.isVert = collapseTarget.isVert;
|
|
}
|
|
}
|
|
|
|
// Now we want to sort the childItems by their weight.
|
|
me.sortWeightedItems(items, 'reverseWeighting');
|
|
me.setupSplitterNeighbors(items);
|
|
},
|
|
|
|
calculate: function (ownerContext) {
|
|
var me = this,
|
|
containerSize = me.getContainerSize(ownerContext),
|
|
childItems = ownerContext.childItems,
|
|
length = childItems.length,
|
|
horz = ownerContext.borderAxisHorz,
|
|
vert = ownerContext.borderAxisVert,
|
|
pad = ownerContext.outerPad,
|
|
padOnContainer = ownerContext.padOnContainer,
|
|
i, childContext, childMargins, size, horzPercentTotal, vertPercentTotal;
|
|
|
|
horz.begin = pad[me.padOnContainerProp];
|
|
vert.begin = pad.top;
|
|
// If the padding is already on the container we need to add it to the space
|
|
// If not on the container, it's "virtual" padding.
|
|
|
|
horzPercentTotal = horz.end = horz.flexSpace = containerSize.width + (padOnContainer ? pad[me.padOnContainerProp] : -pad[me.padNotOnContainerProp]);
|
|
vertPercentTotal = vert.end = vert.flexSpace = containerSize.height + (padOnContainer ? pad.top : -pad.bottom);
|
|
|
|
// Reduce flexSpace on each axis by the fixed/auto sized dimensions of items that
|
|
// aren't flexed along that axis.
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
childMargins = childContext.getMarginInfo();
|
|
|
|
// Margins are always fixed size and must be removed from the space used for percentages and flexes
|
|
if (childContext.isHorz || childContext.isCenter) {
|
|
horz.addUnflexed(childMargins.width);
|
|
horzPercentTotal -= childMargins.width;
|
|
}
|
|
|
|
if (childContext.isVert || childContext.isCenter) {
|
|
vert.addUnflexed(childMargins.height);
|
|
vertPercentTotal -= childMargins.height;
|
|
}
|
|
|
|
// Fixed size components must have their sizes removed from the space used for flex
|
|
if (!childContext.flex && !childContext.percentage) {
|
|
if (childContext.isHorz || (childContext.isCenter && childContext.collapseAxis === 'horz')) {
|
|
size = childContext.getProp('width');
|
|
|
|
horz.addUnflexed(size);
|
|
|
|
// splitters should not count towards percentages
|
|
if (childContext.collapseTarget) {
|
|
horzPercentTotal -= size;
|
|
}
|
|
} else if (childContext.isVert || (childContext.isCenter && childContext.collapseAxis === 'vert')) {
|
|
size = childContext.getProp('height');
|
|
|
|
vert.addUnflexed(size);
|
|
|
|
// splitters should not count towards percentages
|
|
if (childContext.collapseTarget) {
|
|
vertPercentTotal -= size;
|
|
}
|
|
}
|
|
// else ignore center since it is fully flexed
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
childMargins = childContext.getMarginInfo();
|
|
|
|
// Calculate the percentage sizes. After this calculation percentages are very similar to fixed sizes
|
|
if (childContext.percentage) {
|
|
if (childContext.isHorz) {
|
|
size = Math.ceil(horzPercentTotal * childContext.percentage / 100);
|
|
size = childContext.setWidth(size);
|
|
horz.addUnflexed(size);
|
|
} else if (childContext.isVert) {
|
|
size = Math.ceil(vertPercentTotal * childContext.percentage / 100);
|
|
size = childContext.setHeight(size);
|
|
vert.addUnflexed(size);
|
|
}
|
|
// center shouldn't have a percentage but if it does it should be ignored
|
|
}
|
|
}
|
|
|
|
|
|
// If we haven't gotten sizes for all unflexed dimensions on an axis, the flexSpace
|
|
// will be NaN so we won't be calculating flexed dimensions until that is resolved.
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
childContext = childItems[i];
|
|
|
|
if (!childContext.isCenter) {
|
|
me.calculateChildAxis(childContext, horz);
|
|
me.calculateChildAxis(childContext, vert);
|
|
}
|
|
}
|
|
|
|
// Once all items are placed, the final size of the center can be determined. If we
|
|
// can determine both width and height, we are done. We use '+' instead of '&&' to
|
|
// avoid short-circuiting (we want to call both):
|
|
if (me.finishAxis(ownerContext, vert) + me.finishAxis(ownerContext, horz) < 2) {
|
|
me.done = false;
|
|
} else {
|
|
// Size information is published as we place regions but position is hard to do
|
|
// that way (while avoiding published multiple times) so we publish all the
|
|
// positions at the end.
|
|
me.finishPositions(childItems);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Performs the calculations for a region on a specified axis.
|
|
* @private
|
|
*/
|
|
calculateChildAxis: function (childContext, axis) {
|
|
var collapseTarget = childContext.collapseTarget,
|
|
setSizeMethod = 'set' + axis.sizePropCap,
|
|
sizeProp = axis.sizeProp,
|
|
childMarginSize = childContext.getMarginInfo()[sizeProp],
|
|
region, isBegin, flex, pos, size;
|
|
|
|
if (collapseTarget) { // if (splitter)
|
|
region = collapseTarget.region;
|
|
} else {
|
|
region = childContext.region;
|
|
flex = childContext.flex;
|
|
}
|
|
|
|
isBegin = region == axis.borderBegin;
|
|
|
|
if (!isBegin && region != axis.borderEnd) {
|
|
// a north/south region on the horizontal axis or an east/west region on the
|
|
// vertical axis: stretch to fill remaining space:
|
|
childContext[setSizeMethod](axis.end - axis.begin - childMarginSize);
|
|
pos = axis.begin;
|
|
} else {
|
|
if (flex) {
|
|
size = Math.ceil(axis.flexSpace * (flex / axis.totalFlex));
|
|
size = childContext[setSizeMethod](size);
|
|
} else if (childContext.percentage) {
|
|
// Like getProp but without registering a dependency - we calculated the size, we don't depend on it
|
|
size = childContext.peek(sizeProp);
|
|
} else {
|
|
size = childContext.getProp(sizeProp);
|
|
}
|
|
|
|
size += childMarginSize;
|
|
|
|
if (isBegin) {
|
|
pos = axis.begin;
|
|
axis.begin += size;
|
|
} else {
|
|
axis.end = pos = axis.end - size;
|
|
}
|
|
}
|
|
|
|
childContext.layoutPos[axis.posProp] = pos;
|
|
},
|
|
|
|
/**
|
|
* Finishes the calculations on an axis. This basically just assigns the remaining
|
|
* space to the center region.
|
|
* @private
|
|
*/
|
|
finishAxis: function (ownerContext, axis) {
|
|
var size = axis.end - axis.begin,
|
|
center = ownerContext.centerRegion;
|
|
|
|
if (center) {
|
|
center['set' + axis.sizePropCap](size - center.getMarginInfo()[axis.sizeProp]);
|
|
center.layoutPos[axis.posProp] = axis.begin;
|
|
}
|
|
|
|
return Ext.isNumber(size) ? 1 : 0;
|
|
},
|
|
|
|
/**
|
|
* Finishes by setting the positions on the child items.
|
|
* @private
|
|
*/
|
|
finishPositions: function (childItems) {
|
|
var length = childItems.length,
|
|
index, childContext,
|
|
marginProp = this.horzMarginProp;
|
|
|
|
for (index = 0; index < length; ++index) {
|
|
childContext = childItems[index];
|
|
|
|
childContext.setProp('x', childContext.layoutPos.x + childContext.marginInfo[marginProp]);
|
|
childContext.setProp('y', childContext.layoutPos.y + childContext.marginInfo.top);
|
|
}
|
|
},
|
|
|
|
getLayoutItems: function() {
|
|
var owner = this.owner,
|
|
ownerItems = (owner && owner.items && owner.items.items) || [],
|
|
length = ownerItems.length,
|
|
items = [],
|
|
i = 0,
|
|
ownerItem, placeholderFor;
|
|
|
|
for (; i < length; i++) {
|
|
ownerItem = ownerItems[i];
|
|
placeholderFor = ownerItem.placeholderFor;
|
|
// There are a couple of scenarios where we do NOT want an item to
|
|
// be included in the layout items:
|
|
//
|
|
// 1. If the item is floated. This can happen when a region's header
|
|
// is clicked to "float" the item, then another region's header or
|
|
// is clicked quickly before the first floated region has had a
|
|
// chance to slide out. When this happens, the second click triggers
|
|
// a layout, the purpose of which is to determine what the size of the
|
|
// second region will be after it is floated, so it can be animated
|
|
// to that size. In this case the existing floated item should not be
|
|
// included in the layout items because it will not be visible once
|
|
// it's slideout animation has completed.
|
|
//
|
|
// 2. If the item is a placeholder for a panel that is currently
|
|
// being expanded. Similar to scenario 1, a second layout can be
|
|
// triggered by another panel being expanded/collapsed/floated before
|
|
// the first panel has finished it's expand animation. If this is the
|
|
// case we do not want the placeholder to be included in the layout
|
|
// items because it will not be once the panel has finished expanding.
|
|
//
|
|
// If the component is hidden, we need none of these shenanigans
|
|
if (ownerItem.hidden || ((!ownerItem.floated || ownerItem.isCollapsingOrExpanding === 2) &&
|
|
!(placeholderFor && placeholderFor.isCollapsingOrExpanding === 2))) {
|
|
items.push(ownerItem);
|
|
}
|
|
}
|
|
|
|
return items;
|
|
},
|
|
|
|
getPlaceholder: function (comp) {
|
|
return comp.getPlaceholder && comp.getPlaceholder();
|
|
},
|
|
|
|
getSplitterTarget: function (splitter) {
|
|
var collapseTarget = splitter.collapseTarget;
|
|
|
|
if (collapseTarget && collapseTarget.collapsed) {
|
|
return collapseTarget.placeholder || collapseTarget;
|
|
}
|
|
|
|
return collapseTarget;
|
|
},
|
|
|
|
isItemBoxParent: function (itemContext) {
|
|
return true;
|
|
},
|
|
|
|
isItemShrinkWrap: function (item) {
|
|
return true;
|
|
},
|
|
|
|
//----------------------------------
|
|
// Event handlers
|
|
|
|
/**
|
|
* Inserts the splitter for a given region. A reference to the splitter is also stored
|
|
* on the component as "splitter".
|
|
* @private
|
|
*/
|
|
insertSplitter: function (item, index, hidden, splitterCfg) {
|
|
var region = item.region,
|
|
splitter = Ext.apply({
|
|
xtype: 'bordersplitter',
|
|
collapseTarget: item,
|
|
id: item.id + '-splitter',
|
|
hidden: hidden,
|
|
canResize: item.splitterResize !== false,
|
|
splitterFor: item
|
|
}, splitterCfg),
|
|
at = index + ((region === 'south' || region === 'east') ? 0 : 1);
|
|
|
|
if (item.collapseMode === 'mini') {
|
|
splitter.collapsedCls = item.collapsedCls;
|
|
}
|
|
|
|
item.splitter = this.owner.add(at, splitter);
|
|
},
|
|
|
|
/**
|
|
* Called when a region (actually when any component) is added to the container. The
|
|
* region is decorated with some helpful properties (isCenter, isHorz, isVert) and its
|
|
* splitter is added if its "split" property is true.
|
|
* @private
|
|
*/
|
|
onAdd: function (item, index) {
|
|
var me = this,
|
|
placeholderFor = item.placeholderFor,
|
|
region = item.region,
|
|
split,
|
|
hidden,
|
|
cfg;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (region) {
|
|
Ext.apply(item, me.regionFlags[region]);
|
|
|
|
if (item.initBorderRegion) {
|
|
// This method should always be present but perhaps the override is being
|
|
// excluded.
|
|
item.initBorderRegion();
|
|
}
|
|
|
|
if (region === 'center') {
|
|
me.centerRegion = item;
|
|
} else {
|
|
split = item.split;
|
|
hidden = !!item.hidden;
|
|
|
|
if (typeof split === 'object') {
|
|
cfg = split;
|
|
split = true;
|
|
}
|
|
|
|
if ((item.isHorz || item.isVert) && (split || item.collapseMode == 'mini')) {
|
|
me.insertSplitter(item, index, hidden || !split, cfg);
|
|
}
|
|
}
|
|
|
|
if (!item.hasOwnProperty('collapseMode')) {
|
|
item.collapseMode = me.panelCollapseMode;
|
|
}
|
|
|
|
if (!item.hasOwnProperty('animCollapse')) {
|
|
if (item.collapseMode !== 'placeholder') {
|
|
// other collapse modes do not animate nicely in a border layout, so
|
|
// default them to off:
|
|
item.animCollapse = false;
|
|
} else {
|
|
item.animCollapse = me.panelCollapseAnimate;
|
|
}
|
|
}
|
|
} else if (placeholderFor) {
|
|
Ext.apply(item, me.regionFlags[placeholderFor.region]);
|
|
item.region = placeholderFor.region;
|
|
item.weight = placeholderFor.weight;
|
|
}
|
|
},
|
|
|
|
onDestroy: function() {
|
|
this.centerRegion = null;
|
|
this.callParent();
|
|
},
|
|
|
|
onRemove: function (item) {
|
|
var me = this,
|
|
region = item.region,
|
|
splitter = item.splitter;
|
|
|
|
if (region) {
|
|
if (item.isCenter) {
|
|
me.centerRegion = null;
|
|
}
|
|
|
|
delete item.isCenter;
|
|
delete item.isHorz;
|
|
delete item.isVert;
|
|
|
|
if (splitter) {
|
|
me.owner.doRemove(splitter, true); // avoid another layout
|
|
delete item.splitter;
|
|
}
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
//----------------------------------
|
|
// Misc
|
|
|
|
regionMeta: {
|
|
center: { splitterDelta: 0 },
|
|
|
|
north: { splitterDelta: 1 },
|
|
south: { splitterDelta: -1 },
|
|
|
|
west: { splitterDelta: 1 },
|
|
east: { splitterDelta: -1 }
|
|
},
|
|
|
|
/**
|
|
* Flags and configs that get set of regions based on their `region` property.
|
|
* @private
|
|
*/
|
|
regionFlags: {
|
|
center: { isCenter: true, isHorz: false, isVert: false },
|
|
|
|
north: { isCenter: false, isHorz: false, isVert: true, collapseDirection: 'top' },
|
|
south: { isCenter: false, isHorz: false, isVert: true, collapseDirection: 'bottom' },
|
|
|
|
west: { isCenter: false, isHorz: true, isVert: false, collapseDirection: 'left' },
|
|
east: { isCenter: false, isHorz: true, isVert: false, collapseDirection: 'right' }
|
|
},
|
|
|
|
setupSplitterNeighbors: function (items) {
|
|
var edgeRegions = {
|
|
//north: null,
|
|
//south: null,
|
|
//east: null,
|
|
//west: null
|
|
},
|
|
length = items.length,
|
|
touchedRegions = this.touchedRegions,
|
|
i, j, center, count, edge, comp, region, splitter, touched;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
comp = items[i].target;
|
|
region = comp.region;
|
|
|
|
if (comp.isCenter) {
|
|
center = comp;
|
|
} else if (region) {
|
|
touched = touchedRegions[region];
|
|
|
|
for (j = 0, count = touched.length; j < count; ++j) {
|
|
edge = edgeRegions[touched[j]];
|
|
if (edge) {
|
|
edge.neighbors.push(comp);
|
|
}
|
|
}
|
|
|
|
if (comp.placeholderFor) {
|
|
// placeholder, so grab the splitter for the actual panel
|
|
splitter = comp.placeholderFor.splitter;
|
|
} else {
|
|
splitter = comp.splitter;
|
|
}
|
|
if (splitter) {
|
|
splitter.neighbors = [];
|
|
}
|
|
|
|
edgeRegions[region] = splitter;
|
|
}
|
|
}
|
|
|
|
if (center) {
|
|
touched = touchedRegions.center;
|
|
|
|
for (j = 0, count = touched.length; j < count; ++j) {
|
|
edge = edgeRegions[touched[j]];
|
|
if (edge) {
|
|
edge.neighbors.push(center);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Lists the regions that would consider an interior region a neighbor. For example,
|
|
* a north region would consider an east or west region its neighbords (as well as
|
|
* an inner north region).
|
|
* @private
|
|
*/
|
|
touchedRegions: {
|
|
center: [ 'north', 'south', 'east', 'west' ],
|
|
|
|
north: [ 'north', 'east', 'west' ],
|
|
south: [ 'south', 'east', 'west' ],
|
|
east: [ 'east', 'north', 'south' ],
|
|
west: [ 'west', 'north', 'south' ]
|
|
},
|
|
|
|
sizePolicies: {
|
|
vert: {
|
|
readsWidth: 0,
|
|
readsHeight: 1,
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
},
|
|
horz: {
|
|
readsWidth: 1,
|
|
readsHeight: 0,
|
|
setsWidth: 0,
|
|
setsHeight: 1
|
|
},
|
|
flexAll: {
|
|
readsWidth: 0,
|
|
readsHeight: 0,
|
|
setsWidth: 1,
|
|
setsHeight: 1
|
|
}
|
|
},
|
|
|
|
getItemSizePolicy: function (item) {
|
|
var me = this,
|
|
policies = this.sizePolicies,
|
|
collapseTarget, size, policy, placeholderFor;
|
|
|
|
if (item.isCenter) {
|
|
placeholderFor = item.placeholderFor;
|
|
|
|
if (placeholderFor) {
|
|
if (placeholderFor.collapsedVertical()) {
|
|
return policies.vert;
|
|
}
|
|
return policies.horz;
|
|
}
|
|
if (item.collapsed) {
|
|
if (item.collapsedVertical()) {
|
|
return policies.vert;
|
|
}
|
|
return policies.horz;
|
|
}
|
|
return policies.flexAll;
|
|
}
|
|
|
|
collapseTarget = item.collapseTarget;
|
|
|
|
if (collapseTarget) {
|
|
return collapseTarget.isVert ? policies.vert : policies.horz;
|
|
}
|
|
|
|
if (item.region) {
|
|
if (item.isVert) {
|
|
size = item.height;
|
|
policy = policies.vert;
|
|
} else {
|
|
size = item.width;
|
|
policy = policies.horz;
|
|
}
|
|
|
|
if (item.flex || (typeof size == 'string' && me.percentageRe.test(size))) {
|
|
return policies.flexAll;
|
|
}
|
|
|
|
return policy;
|
|
}
|
|
|
|
return me.autoSizePolicy;
|
|
}
|
|
}, function () {
|
|
var methods = {
|
|
addUnflexed: function (px) {
|
|
this.flexSpace = Math.max(this.flexSpace - px, 0);
|
|
}
|
|
},
|
|
props = this.prototype.axisProps;
|
|
|
|
Ext.apply(props.horz, methods);
|
|
Ext.apply(props.vert, methods);
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.Border', {
|
|
override: 'Ext.layout.container.Border',
|
|
|
|
initLayout: function(){
|
|
var me = this;
|
|
|
|
if (me.owner.getHierarchyState().rtl) {
|
|
me.padOnContainerProp = 'right';
|
|
me.padNotOnContainerProp = 'left';
|
|
me.horzMarginProp = 'right';
|
|
} else {
|
|
me.padOnContainerProp = 'left';
|
|
me.padNotOnContainerProp = 'right';
|
|
me.horzMarginProp = 'left';
|
|
}
|
|
me.callParent(arguments);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* 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 next panel to display
|
|
* (or its id or index). The layout itself does not provide a user interface for handling this navigation,
|
|
* so that functionality must be provided by the developer.
|
|
*
|
|
* To change the active card of a container, call the setActiveItem method of its layout:
|
|
*
|
|
* @example
|
|
* var p = Ext.create('Ext.panel.Panel', {
|
|
* layout: 'card',
|
|
* items: [
|
|
* { html: 'Card 1' },
|
|
* { html: 'Card 2' }
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* p.getLayout().setActiveItem(1);
|
|
*
|
|
* The {@link Ext.Component#beforedeactivate beforedeactivate} and {@link Ext.Component#beforeactivate beforeactivate}
|
|
* events can be used to prevent a card from activating or deactivating by returning `false`.
|
|
*
|
|
* @example
|
|
* var active = 0;
|
|
* var main = Ext.create('Ext.panel.Panel', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* layout: 'card',
|
|
* tbar: [{
|
|
* text: 'Next',
|
|
* handler: function(){
|
|
* var layout = main.getLayout();
|
|
* ++active;
|
|
* layout.setActiveItem(active);
|
|
* active = main.items.indexOf(layout.getActiveItem());
|
|
* }
|
|
* }],
|
|
* items: [{
|
|
* title: 'P1'
|
|
* }, {
|
|
* title: 'P2'
|
|
* }, {
|
|
* title: 'P3',
|
|
* listeners: {
|
|
* beforeactivate: function(){
|
|
* return false;
|
|
* }
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* 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.
|
|
*
|
|
* @example
|
|
* 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',
|
|
* 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: '<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()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Card', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.layout.container.Fit ,
|
|
|
|
alternateClassName: 'Ext.layout.CardLayout',
|
|
|
|
alias: 'layout.card',
|
|
|
|
/* End Definitions */
|
|
|
|
type: 'card',
|
|
|
|
hideInactive: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} deferredRender
|
|
* True to render each contained item at the time it becomes active, false to render all contained items
|
|
* as soon as the layout is rendered (defaults to false). If there is a significant amount of content or
|
|
* a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
|
|
* true might improve performance.
|
|
*/
|
|
deferredRender : false,
|
|
|
|
getRenderTree: function () {
|
|
var me = this,
|
|
activeItem = me.getActiveItem();
|
|
|
|
if (activeItem) {
|
|
|
|
// If they veto the activate, we have no active item
|
|
if (activeItem.hasListeners.beforeactivate && activeItem.fireEvent('beforeactivate', activeItem) === false) {
|
|
|
|
// We must null our activeItem reference, AND the one in our owning Container.
|
|
// Because upon layout invalidation, renderChildren will use this.getActiveItem which
|
|
// uses this.activeItem || this.owner.activeItem
|
|
activeItem = me.activeItem = me.owner.activeItem = null;
|
|
}
|
|
|
|
// Item is to be the active one. Fire event after it is first layed out
|
|
else if (activeItem.hasListeners.activate) {
|
|
activeItem.on({
|
|
boxready: function() {
|
|
activeItem.fireEvent('activate', activeItem);
|
|
},
|
|
single: true
|
|
});
|
|
}
|
|
|
|
if (me.deferredRender) {
|
|
if (activeItem) {
|
|
return me.getItemsRenderTree([activeItem]);
|
|
}
|
|
} else {
|
|
return me.callParent(arguments);
|
|
}
|
|
}
|
|
},
|
|
|
|
renderChildren: function () {
|
|
var me = this,
|
|
active = me.getActiveItem();
|
|
|
|
if (!me.deferredRender) {
|
|
me.callParent();
|
|
} else if (active) {
|
|
// ensure the active item is configured for the layout
|
|
me.renderItems([active], me.getRenderTarget());
|
|
}
|
|
},
|
|
|
|
isValidParent : function(item, target, position) {
|
|
// Note: Card layout does not care about order within the target because only one is ever visible.
|
|
// We only care whether the item is a direct child of the target.
|
|
var itemEl = item.el ? item.el.dom : Ext.getDom(item);
|
|
return (itemEl && itemEl.parentNode === (target.dom || target)) || false;
|
|
},
|
|
|
|
/**
|
|
* Return the active (visible) component in the layout.
|
|
* @returns {Ext.Component}
|
|
*/
|
|
getActiveItem: function() {
|
|
var me = this,
|
|
// Ensure the calculated result references a Component
|
|
result = me.parseActiveItem(me.activeItem || (me.owner && me.owner.activeItem));
|
|
|
|
// Sanitize the result in case the active item is no longer there.
|
|
if (result && me.owner.items.indexOf(result) != -1) {
|
|
me.activeItem = result;
|
|
} else {
|
|
me.activeItem = null;
|
|
}
|
|
|
|
return me.activeItem;
|
|
},
|
|
|
|
// @private
|
|
parseActiveItem: function(item) {
|
|
if (item && item.isComponent) {
|
|
return item;
|
|
} else if (typeof item == 'number' || item === undefined) {
|
|
return this.getLayoutItems()[item || 0];
|
|
} else {
|
|
return this.owner.getComponent(item);
|
|
}
|
|
},
|
|
|
|
// @private. Called before both dynamic render, and bulk render.
|
|
// Ensure that the active item starts visible, and inactive ones start invisible
|
|
configureItem: function(item) {
|
|
if (item === this.getActiveItem()) {
|
|
item.hidden = false;
|
|
} else {
|
|
item.hidden = true;
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
onRemove: function(component) {
|
|
var me = this;
|
|
|
|
if (component === me.activeItem) {
|
|
me.activeItem = null;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
getAnimation: function(newCard, owner) {
|
|
var newAnim = (newCard || {}).cardSwitchAnimation;
|
|
if (newAnim === false) {
|
|
return false;
|
|
}
|
|
return newAnim || owner.cardSwitchAnimation;
|
|
},
|
|
|
|
/**
|
|
* Return the active (visible) component in the layout to the next card
|
|
* @returns {Ext.Component} The next component or false.
|
|
*/
|
|
getNext: function() {
|
|
var wrap = arguments[0],
|
|
items = this.getLayoutItems(),
|
|
index = Ext.Array.indexOf(items, this.activeItem);
|
|
|
|
return items[index + 1] || (wrap ? items[0] : false);
|
|
},
|
|
|
|
/**
|
|
* Sets the active (visible) component in the layout to the next card
|
|
* @return {Ext.Component} the activated component or false when nothing activated.
|
|
*/
|
|
next: function() {
|
|
var anim = arguments[0],
|
|
wrap = arguments[1];
|
|
return this.setActiveItem(this.getNext(wrap), anim);
|
|
},
|
|
|
|
/**
|
|
* Return the active (visible) component in the layout to the previous card
|
|
* @returns {Ext.Component} The previous component or false.
|
|
*/
|
|
getPrev: function() {
|
|
var wrap = arguments[0],
|
|
items = this.getLayoutItems(),
|
|
index = Ext.Array.indexOf(items, this.activeItem);
|
|
|
|
return items[index - 1] || (wrap ? items[items.length - 1] : false);
|
|
},
|
|
|
|
/**
|
|
* Sets the active (visible) component in the layout to the previous card
|
|
* @return {Ext.Component} the activated component or false when nothing activated.
|
|
*/
|
|
prev: function() {
|
|
var anim = arguments[0],
|
|
wrap = arguments[1];
|
|
return this.setActiveItem(this.getPrev(wrap), anim);
|
|
},
|
|
|
|
/**
|
|
* 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,
|
|
rendered = owner.rendered,
|
|
newIndex;
|
|
|
|
newCard = me.parseActiveItem(newCard);
|
|
newIndex = owner.items.indexOf(newCard);
|
|
|
|
// If the card is not a child of the owner, then add it.
|
|
// Without doing a layout!
|
|
if (newIndex == -1) {
|
|
newIndex = owner.items.items.length;
|
|
Ext.suspendLayouts();
|
|
newCard = owner.add(newCard);
|
|
Ext.resumeLayouts();
|
|
}
|
|
|
|
// Is this a valid, different card?
|
|
if (newCard && oldCard != newCard) {
|
|
// Fire the beforeactivate and beforedeactivate events on the cards
|
|
if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
|
|
return false;
|
|
}
|
|
if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
|
|
return false;
|
|
}
|
|
|
|
if (rendered) {
|
|
Ext.suspendLayouts();
|
|
|
|
// If the card has not been rendered yet, now is the time to do so.
|
|
if (!newCard.rendered) {
|
|
me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
|
|
}
|
|
|
|
if (oldCard) {
|
|
if (me.hideInactive) {
|
|
oldCard.hide();
|
|
oldCard.hiddenByLayout = true;
|
|
}
|
|
oldCard.fireEvent('deactivate', oldCard, newCard);
|
|
}
|
|
// Make sure the new card is shown
|
|
if (newCard.hidden) {
|
|
newCard.show();
|
|
}
|
|
|
|
// Layout needs activeItem to be correct, so set it if the show has not been vetoed
|
|
if (!newCard.hidden) {
|
|
me.activeItem = newCard;
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
} else {
|
|
me.activeItem = newCard;
|
|
}
|
|
|
|
newCard.fireEvent('activate', newCard, oldCard);
|
|
|
|
return me.activeItem;
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This is the layout style of choice for creating structural layouts in a multi-column format where the width of each
|
|
* column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This
|
|
* class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config,
|
|
* and should generally not need to be created directly via the new keyword.
|
|
*
|
|
* ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific
|
|
* config property of `columnWidth` that can be included in the config of any panel added to it. The layout will use
|
|
* the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or
|
|
* columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
|
|
*
|
|
* The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth
|
|
* property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).
|
|
*
|
|
* The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of
|
|
* contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto)
|
|
* are skipped, but their widths are subtracted from the overall container width.
|
|
*
|
|
* During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages
|
|
* based on the total **remaining** container width. In other words, percentage width panels are designed to fill
|
|
* the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any
|
|
* number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added
|
|
* together, otherwise your layout may not render as expected.
|
|
*
|
|
* @example
|
|
* // All columns are percentages -- they must add up to 1
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Column Layout - Percentage Only',
|
|
* width: 350,
|
|
* height: 250,
|
|
* layout:'column',
|
|
* items: [{
|
|
* title: 'Column 1',
|
|
* columnWidth: 0.25
|
|
* },{
|
|
* title: 'Column 2',
|
|
* columnWidth: 0.55
|
|
* },{
|
|
* title: 'Column 3',
|
|
* columnWidth: 0.20
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* // Mix of width and columnWidth -- all columnWidth values must add up
|
|
* // to 1. The first column will take up exactly 120px, and the last two
|
|
* // columns will fill the remaining container width.
|
|
*
|
|
* Ext.create('Ext.Panel', {
|
|
* title: 'Column Layout - Mixed',
|
|
* width: 350,
|
|
* height: 250,
|
|
* layout:'column',
|
|
* items: [{
|
|
* title: 'Column 1',
|
|
* width: 120
|
|
* },{
|
|
* title: 'Column 2',
|
|
* columnWidth: 0.7
|
|
* },{
|
|
* title: 'Column 3',
|
|
* columnWidth: 0.3
|
|
* }],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.layout.container.Column', {
|
|
|
|
extend: Ext.layout.container.Auto ,
|
|
alias: ['layout.column'],
|
|
alternateClassName: 'Ext.layout.ColumnLayout',
|
|
|
|
type: 'column',
|
|
|
|
itemCls: Ext.baseCSSPrefix + 'column',
|
|
|
|
targetCls: Ext.baseCSSPrefix + 'column-layout-ct',
|
|
|
|
// Columns with a columnWidth have their width managed.
|
|
columnWidthSizePolicy: {
|
|
readsWidth: 0,
|
|
readsHeight: 1,
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
},
|
|
|
|
createsInnerCt: true,
|
|
|
|
manageOverflow: true,
|
|
|
|
isItemShrinkWrap: function(ownerContext){
|
|
return true;
|
|
},
|
|
|
|
getItemSizePolicy: function (item, ownerSizeModel) {
|
|
if (item.columnWidth) {
|
|
if (!ownerSizeModel) {
|
|
ownerSizeModel = this.owner.getSizeModel();
|
|
}
|
|
|
|
if (!ownerSizeModel.width.shrinkWrap) {
|
|
return this.columnWidthSizePolicy;
|
|
}
|
|
}
|
|
return this.autoSizePolicy;
|
|
},
|
|
|
|
calculateItems: function (ownerContext, containerSize) {
|
|
var me = this,
|
|
targetContext = ownerContext.targetContext,
|
|
items = ownerContext.childItems,
|
|
len = items.length,
|
|
contentWidth = 0,
|
|
gotWidth = containerSize.gotWidth,
|
|
blocked, availableWidth, i, itemContext, itemMarginWidth, itemWidth;
|
|
|
|
// No parallel measurement, cannot lay out boxes.
|
|
if (gotWidth === false) { //\\ TODO: Deal with target padding width
|
|
// TODO: only block if we have items with columnWidth
|
|
targetContext.domBlock(me, 'width');
|
|
blocked = true;
|
|
} else if (gotWidth) {
|
|
availableWidth = containerSize.width;
|
|
} else {
|
|
// gotWidth is undefined, which means we must be width shrink wrap.
|
|
// cannot calculate columnWidths if we're shrink wrapping.
|
|
return true;
|
|
}
|
|
|
|
// we need the widths of the columns we don't manage to proceed so we block on them
|
|
// if they are not ready...
|
|
for (i = 0; i < len; ++i) {
|
|
itemContext = items[i];
|
|
|
|
// this is needed below for non-calculated columns, but is also needed in the
|
|
// next loop for calculated columns... this way we only call getMarginInfo in
|
|
// this loop and use the marginInfo property in the next...
|
|
itemMarginWidth = itemContext.getMarginInfo().width;
|
|
|
|
if (!itemContext.widthModel.calculated) {
|
|
itemWidth = itemContext.getProp('width');
|
|
if (typeof itemWidth != 'number') {
|
|
itemContext.block(me, 'width');
|
|
blocked = true;
|
|
}
|
|
|
|
contentWidth += itemWidth + itemMarginWidth;
|
|
}
|
|
}
|
|
|
|
if (!blocked) {
|
|
availableWidth = (availableWidth < contentWidth) ? 0 : availableWidth - contentWidth;
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
itemContext = items[i];
|
|
if (itemContext.widthModel.calculated) {
|
|
itemMarginWidth = itemContext.marginInfo.width; // always set by above loop
|
|
itemWidth = itemContext.target.columnWidth;
|
|
itemWidth = Math.floor(itemWidth * availableWidth) - itemMarginWidth;
|
|
itemWidth = itemContext.setWidth(itemWidth); // constrains to min/maxWidth
|
|
contentWidth += itemWidth + itemMarginWidth;
|
|
}
|
|
}
|
|
|
|
ownerContext.setContentWidth(contentWidth + ownerContext.paddingContext.getPaddingInfo().width);
|
|
}
|
|
|
|
// we registered all the values that block this calculation, so abort now if blocked...
|
|
return !blocked;
|
|
},
|
|
|
|
setCtSizeIfNeeded: function(ownerContext, containerSize) {
|
|
var me = this,
|
|
padding = ownerContext.paddingContext.getPaddingInfo();
|
|
|
|
me.callParent(arguments);
|
|
|
|
// IE6/7/quirks lose right padding when using the shrink wrap template, so
|
|
// reduce the size of the outerCt by the amount of right padding.
|
|
if ((Ext.isIEQuirks || Ext.isIE7m) && me.isShrinkWrapTpl && padding.right) {
|
|
ownerContext.outerCtContext.setProp('width',
|
|
containerSize.width + padding.left);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
Ext.define('Ext.rtl.layout.container.Column', {
|
|
override: 'Ext.layout.container.Column',
|
|
|
|
// Override to put the RTL class onto the innerCt so that columns can have a rule which switches float direction
|
|
getRenderData: function () {
|
|
var renderData = this.callParent();
|
|
|
|
if (this.owner.getHierarchyState().rtl) {
|
|
renderData.innerCtCls =
|
|
(renderData.innerCtCls || '') + ' ' + Ext.baseCSSPrefix + 'rtl';
|
|
}
|
|
|
|
return renderData;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This is a layout that will render form Fields, one under the other all stretched to the Container width.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.Panel', {
|
|
* width: 500,
|
|
* height: 300,
|
|
* title: "FormLayout Panel",
|
|
* layout: 'form',
|
|
* renderTo: Ext.getBody(),
|
|
* bodyPadding: 5,
|
|
* defaultType: 'textfield',
|
|
* items: [{
|
|
* fieldLabel: 'First Name',
|
|
* name: 'first',
|
|
* allowBlank:false
|
|
* },{
|
|
* fieldLabel: 'Last Name',
|
|
* name: 'last'
|
|
* },{
|
|
* fieldLabel: 'Company',
|
|
* name: 'company'
|
|
* }, {
|
|
* fieldLabel: 'Email',
|
|
* name: 'email',
|
|
* vtype:'email'
|
|
* }, {
|
|
* fieldLabel: 'DOB',
|
|
* name: 'dob',
|
|
* xtype: 'datefield'
|
|
* }, {
|
|
* fieldLabel: 'Age',
|
|
* name: 'age',
|
|
* xtype: 'numberfield',
|
|
* minValue: 0,
|
|
* maxValue: 100
|
|
* }, {
|
|
* xtype: 'timefield',
|
|
* fieldLabel: 'Time',
|
|
* name: 'time',
|
|
* minValue: '8:00am',
|
|
* maxValue: '6:00pm'
|
|
* }]
|
|
* });
|
|
*
|
|
* Note that any configured {@link Ext.Component#padding padding} will be ignored on items within a Form layout.
|
|
*/
|
|
Ext.define('Ext.layout.container.Form', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
alias: 'layout.form',
|
|
extend: Ext.layout.container.Container ,
|
|
alternateClassName: 'Ext.layout.FormLayout',
|
|
|
|
/* End Definitions */
|
|
|
|
tableCls: Ext.baseCSSPrefix + 'form-layout-table',
|
|
|
|
type: 'form',
|
|
|
|
createsInnerCt: true,
|
|
|
|
manageOverflow: true,
|
|
|
|
// Begin with no previous adjustments
|
|
lastOverflowAdjust: {
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
|
|
childEls: ['formTable'],
|
|
|
|
padRow: '<tr><td class="' + Ext.baseCSSPrefix + 'form-item-pad" colspan="3"></td></tr>',
|
|
|
|
renderTpl: [
|
|
'<table id="{ownerId}-formTable" class="{tableCls}" style="width:100%" cellpadding="0">',
|
|
'{%this.renderBody(out,values)%}',
|
|
'</table>',
|
|
'{%this.renderPadder(out,values)%}'
|
|
],
|
|
|
|
getRenderData: function(){
|
|
var data = this.callParent();
|
|
data.tableCls = this.tableCls;
|
|
return data;
|
|
},
|
|
|
|
calculate : function (ownerContext) {
|
|
var me = this,
|
|
containerSize = me.getContainerSize(ownerContext, true),
|
|
tableWidth,
|
|
childItems,
|
|
i = 0, length,
|
|
shrinkwrapHeight = ownerContext.sizeModel.height.shrinkWrap;
|
|
|
|
if (shrinkwrapHeight) {
|
|
if (ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
|
ownerContext.setProp('contentHeight', me.formTable.dom.offsetHeight + ownerContext.targetContext.getPaddingInfo().height);
|
|
} else {
|
|
me.done = false;
|
|
}
|
|
}
|
|
|
|
// Once we have been widthed, we can impose that width (in a non-dirty setting) upon all children at once
|
|
if (containerSize.gotWidth) {
|
|
tableWidth = me.formTable.dom.offsetWidth;
|
|
childItems = ownerContext.childItems;
|
|
|
|
for (length = childItems.length; i < length; ++i) {
|
|
childItems[i].setWidth(tableWidth, false);
|
|
}
|
|
} else {
|
|
me.done = false;
|
|
}
|
|
},
|
|
|
|
getRenderTarget: function() {
|
|
return this.formTable;
|
|
},
|
|
|
|
getRenderTree: function() {
|
|
var me = this,
|
|
result = me.callParent(arguments),
|
|
i, len;
|
|
|
|
for (i = 0, len = result.length; i < len; i++) {
|
|
result[i] = me.transformItemRenderTree(result[i]);
|
|
}
|
|
return result;
|
|
},
|
|
|
|
transformItemRenderTree: function(item) {
|
|
|
|
if (item.tag && item.tag == 'table') {
|
|
item.tag = 'tbody';
|
|
delete item.cellspacing;
|
|
delete item.cellpadding;
|
|
|
|
// IE6 doesn't separate cells nicely to provide input field
|
|
// vertical separation. It also does not support transparent borders
|
|
// which is how the extra 1px is added to the 2px each side cell spacing.
|
|
// So it needs a 5px high pad row.
|
|
if (Ext.isIE6) {
|
|
item.cn = this.padRow;
|
|
}
|
|
|
|
return item;
|
|
}
|
|
|
|
return {
|
|
tag: 'tbody',
|
|
cn: {
|
|
tag: 'tr',
|
|
cn: {
|
|
tag: 'td',
|
|
colspan: 3,
|
|
style: 'width:100%',
|
|
cn: item
|
|
}
|
|
}
|
|
};
|
|
|
|
},
|
|
|
|
isValidParent: function(item, target, position) {
|
|
return true;
|
|
},
|
|
|
|
isItemShrinkWrap: function(item) {
|
|
return ((item.shrinkWrap === true) ? 3 : item.shrinkWrap||0) & 2;
|
|
},
|
|
|
|
getItemSizePolicy: function(item) {
|
|
return {
|
|
setsWidth: 1,
|
|
setsHeight: 0
|
|
};
|
|
},
|
|
|
|
|
|
// All of the below methods are old methods moved here from Container layout
|
|
// TODO: remove these methods once Form layout extends Auto layout
|
|
|
|
beginLayoutCycle: function (ownerContext, firstCycle) {
|
|
var padEl = this.overflowPadderEl;
|
|
|
|
if (padEl) {
|
|
padEl.setStyle('display', 'none');
|
|
}
|
|
|
|
// Begin with the scrollbar adjustment that we used last time - this is more likely to be correct
|
|
// than beginning with no adjustment at all
|
|
if (!ownerContext.state.overflowAdjust) {
|
|
ownerContext.state.overflowAdjust = this.lastOverflowAdjust;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles overflow processing for a container. This should be called once the layout
|
|
* has determined contentWidth/Height. In addition to the ownerContext passed to the
|
|
* {@link #calculate} method, this method also needs the containerSize (the object
|
|
* returned by {@link #getContainerSize}).
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
* @param {Object} containerSize
|
|
* @param {Number} dimensions A bit mask for the overflow managed dimensions. The 0-bit
|
|
* is for `width` and the 1-bit is for `height`. In other words, a value of 1 would be
|
|
* only `width`, 2 would be only `height` and 3 would be both.
|
|
*/
|
|
calculateOverflow: function (ownerContext, containerSize, dimensions) {
|
|
var me = this,
|
|
targetContext = ownerContext.targetContext,
|
|
manageOverflow = me.manageOverflow,
|
|
state = ownerContext.state,
|
|
overflowAdjust = state.overflowAdjust,
|
|
padWidth, padHeight, padElContext, padding, scrollRangeFlags,
|
|
scrollbarSize, contentW, contentH, ownerW, ownerH, scrollbars,
|
|
xauto, yauto;
|
|
|
|
if (manageOverflow && !state.secondPass && !me.reserveScrollbar) {
|
|
// Determine the dimensions that have overflow:auto applied. If these come by
|
|
// way of component config, this does not require a DOM read:
|
|
xauto = (me.getOverflowXStyle(ownerContext) === 'auto');
|
|
yauto = (me.getOverflowYStyle(ownerContext) === 'auto');
|
|
|
|
// If the container layout is not using width, we don't need to adjust for the
|
|
// vscroll (likewise for height). Perhaps we don't even need to run the layout
|
|
// again if the adjustments won't have any effect on the result!
|
|
if (!containerSize.gotWidth) {
|
|
xauto = false;
|
|
}
|
|
if (!containerSize.gotHeight) {
|
|
yauto = false;
|
|
}
|
|
|
|
if (xauto || yauto) {
|
|
scrollbarSize = Ext.getScrollbarSize();
|
|
|
|
// as a container we calculate contentWidth/Height, so we don't want
|
|
// to use getProp and make it look like we are triggered by them...
|
|
contentW = ownerContext.peek('contentWidth');
|
|
contentH = ownerContext.peek('contentHeight');
|
|
// The content size includes the target element's padding. Since
|
|
// the containerSize excludes the target element's padding, we need
|
|
// to subtract this padding from the content size before checking
|
|
// to see if scrollbars are needed.
|
|
padding = targetContext.getPaddingInfo();
|
|
contentW -= padding.width;
|
|
contentH -= padding.height;
|
|
ownerW = containerSize.width;
|
|
ownerH = containerSize.height;
|
|
|
|
scrollbars = me.getScrollbarsNeeded(ownerW, ownerH, contentW, contentH);
|
|
state.overflowState = scrollbars;
|
|
|
|
if (typeof dimensions == 'number') {
|
|
scrollbars &= ~dimensions; // ignore dimensions that have no effect
|
|
}
|
|
|
|
overflowAdjust = {
|
|
width: (xauto && (scrollbars & 2)) ? scrollbarSize.width : 0,
|
|
height: (yauto && (scrollbars & 1)) ? scrollbarSize.height : 0
|
|
};
|
|
|
|
// We can have 0-sized scrollbars (new Mac OS) and so don't invalidate
|
|
// the layout unless this will change something...
|
|
if (overflowAdjust.width !== me.lastOverflowAdjust.width || overflowAdjust.height !== me.lastOverflowAdjust.height) {
|
|
me.done = false;
|
|
|
|
// we pass overflowAdjust and overflowState in as state for the next
|
|
// cycle (these are discarded if one of our ownerCt's invalidates):
|
|
ownerContext.invalidate({
|
|
state: {
|
|
overflowAdjust: overflowAdjust,
|
|
overflowState: state.overflowState,
|
|
secondPass: true
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!me.done) {
|
|
return;
|
|
}
|
|
|
|
padElContext = ownerContext.padElContext ||
|
|
(ownerContext.padElContext = ownerContext.getEl('overflowPadderEl', me));
|
|
|
|
// Even if overflow does not effect the layout, we still do need the padEl to be
|
|
// sized or hidden appropriately...
|
|
if (padElContext) {
|
|
scrollbars = state.overflowState; // the true overflow state
|
|
padWidth = ownerContext.peek('contentWidth');
|
|
// the padder element must have a height of at least 1px, or its width will be ignored by the container.
|
|
// The extra height is adjusted for by adding a -1px top margin to the padder element
|
|
padHeight = 1;
|
|
|
|
if (scrollbars) {
|
|
padding = targetContext.getPaddingInfo();
|
|
scrollRangeFlags = me.scrollRangeFlags;
|
|
|
|
if ((scrollbars & 2) && (scrollRangeFlags & 1)) { // if (vscroll and loses bottom)
|
|
padHeight += padding.bottom;
|
|
}
|
|
|
|
if ((scrollbars & 1) && (scrollRangeFlags & 4)) { // if (hscroll and loses right)
|
|
padWidth += padding.right;
|
|
}
|
|
padElContext.setProp('display', '');
|
|
padElContext.setSize(padWidth, padHeight);
|
|
} else {
|
|
padElContext.setProp('display', 'none');
|
|
}
|
|
}
|
|
},
|
|
|
|
completeLayout: function (ownerContext) {
|
|
// Cache the scrollbar adjustment
|
|
this.lastOverflowAdjust = ownerContext.state.overflowAdjust;
|
|
},
|
|
|
|
/**
|
|
* Creates an element that makes bottom/right body padding consistent across browsers.
|
|
* This element is sized based on the need for scrollbars in {@link #calculateOverflow}.
|
|
* If the {@link #manageOverflow} option is false, this element is not created.
|
|
*
|
|
* See {@link #getScrollRangeFlags} for more details.
|
|
*/
|
|
doRenderPadder: function (out, renderData) {
|
|
// Careful! This method is bolted on to the renderTpl so all we get for context is
|
|
// the renderData! The "this" pointer is the renderTpl instance!
|
|
|
|
var me = renderData.$layout,
|
|
owner = me.owner,
|
|
scrollRangeFlags = me.getScrollRangeFlags();
|
|
|
|
if (me.manageOverflow) {
|
|
if (scrollRangeFlags & 5) { // if (loses parent bottom and/or right padding)
|
|
out.push('<div id="',owner.id,'-overflowPadderEl" ',
|
|
// the padder element must have a height of at least 1px, or its width will be ignored by the container.
|
|
// The extra height is adjusted for by adding a -1px top margin to the padder element
|
|
// A side effect of this approach is that click events will not register on bottom 1px of the container's
|
|
// last child item, unless that item has a bottom margin. To fix this we make the padder element
|
|
// relatively positioned and give it a large negative z-index. -99999 seems sufficient.
|
|
'style="font-size: 1px; height: 1px; margin-top: -1px; position: relative; z-index: -99999');
|
|
|
|
out.push('"></div>');
|
|
|
|
me.scrollRangeFlags = scrollRangeFlags; // remember for calculateOverflow
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the container size (that of the target). Only the fixed-sized dimensions can
|
|
* be returned because the shrinkWrap dimensions are based on the contentWidth/Height
|
|
* as determined by the container layout.
|
|
*
|
|
* If the {@link #calculateOverflow} method is used and if {@link #manageOverflow} is
|
|
* true, this may adjust the width/height by the size of scrollbars.
|
|
*
|
|
* @param {Ext.layout.ContextItem} ownerContext The owner's context item.
|
|
* @param {Boolean} [inDom=false] True if the container size must be in the DOM.
|
|
* @param {Boolean} [ignoreOverflow=true] if true scrollbar size will not be
|
|
* subtracted from container size.
|
|
* @return {Object} The size
|
|
* @return {Number} return.width The width
|
|
* @return {Number} return.height The height
|
|
* @protected
|
|
*/
|
|
getContainerSize : function(ownerContext, inDom, ignoreOverflow) {
|
|
// Subtle But Important:
|
|
//
|
|
// We don't want to call getProp/hasProp et.al. unless we in fact need that value
|
|
// for our results! If we call it and don't need it, the layout manager will think
|
|
// we depend on it and will schedule us again should it change.
|
|
|
|
var targetContext = ownerContext.targetContext,
|
|
frameInfo = targetContext.getFrameInfo(),
|
|
// if we're managing padding the padding is on the innerCt instead of the targetEl
|
|
padding = targetContext.getPaddingInfo(),
|
|
got = 0,
|
|
needed = 0,
|
|
overflowAdjust = ignoreOverflow ? null : ownerContext.state.overflowAdjust,
|
|
gotWidth, gotHeight, width, height;
|
|
|
|
// In an shrinkWrap width/height case, we must not ask for any of these dimensions
|
|
// because they will be determined by contentWidth/Height which is calculated by
|
|
// this layout...
|
|
|
|
// Fit/Card layouts are able to set just the width of children, allowing child's
|
|
// resulting height to autosize the Container.
|
|
// See examples/tabs/tabs.html for an example of this.
|
|
|
|
if (!ownerContext.widthModel.shrinkWrap) {
|
|
++needed;
|
|
width = inDom ? targetContext.getDomProp('width') : targetContext.getProp('width');
|
|
gotWidth = (typeof width == 'number');
|
|
if (gotWidth) {
|
|
++got;
|
|
width -= frameInfo.width + padding.width;
|
|
if (overflowAdjust) {
|
|
width -= overflowAdjust.width;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!ownerContext.heightModel.shrinkWrap) {
|
|
++needed;
|
|
height = inDom ? targetContext.getDomProp('height') : targetContext.getProp('height');
|
|
gotHeight = (typeof height == 'number');
|
|
if (gotHeight) {
|
|
++got;
|
|
height -= frameInfo.height + padding.height;
|
|
if (overflowAdjust) {
|
|
height -= overflowAdjust.height;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
width: width,
|
|
height: height,
|
|
needed: needed,
|
|
got: got,
|
|
gotAll: got == needed,
|
|
gotWidth: gotWidth,
|
|
gotHeight: gotHeight
|
|
};
|
|
},
|
|
|
|
/**
|
|
* returns the overflow-x style of the render target
|
|
* @protected
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
* @return {String}
|
|
*/
|
|
getOverflowXStyle: function(ownerContext) {
|
|
var me = this;
|
|
|
|
return me.overflowXStyle ||
|
|
(me.overflowXStyle = me.owner.scrollFlags.overflowX || ownerContext.targetContext.getStyle('overflow-x'));
|
|
},
|
|
|
|
/**
|
|
* returns the overflow-y style of the render target
|
|
* @protected
|
|
* @param {Ext.layout.ContextItem} ownerContext
|
|
* @return {String}
|
|
*/
|
|
getOverflowYStyle: function(ownerContext) {
|
|
var me = this;
|
|
|
|
return me.overflowYStyle ||
|
|
(me.overflowYStyle = me.owner.scrollFlags.overflowY || ownerContext.targetContext.getStyle('overflow-y'));
|
|
},
|
|
|
|
/**
|
|
* Returns flags indicating cross-browser handling of scrollHeight/Width. In particular,
|
|
* IE has issues with padding-bottom in a scrolling element (it does not include that
|
|
* padding in the scrollHeight). Also, margin-bottom on a child in a scrolling element
|
|
* can be lost.
|
|
*
|
|
* All browsers seem to ignore margin-right on children and padding-right on the parent
|
|
* element (the one with the overflow)
|
|
*
|
|
* This method returns a number with the follow bit positions set based on things not
|
|
* accounted for in scrollHeight and scrollWidth:
|
|
*
|
|
* - 1: Scrolling element's padding-bottom is not included in scrollHeight.
|
|
* - 2: Last child's margin-bottom is not included in scrollHeight.
|
|
* - 4: Scrolling element's padding-right is not included in scrollWidth.
|
|
* - 8: Child's margin-right is not included in scrollWidth.
|
|
*
|
|
* To work around the margin-bottom issue, it is sufficient to create a 0px tall last
|
|
* child that will "hide" the margin. This can also be handled by wrapping the children
|
|
* in an element, again "hiding" the margin. Wrapping the elements is about the only
|
|
* way to preserve their right margins. This is the strategy used by Column layout.
|
|
*
|
|
* To work around the padding-bottom problem, since it is comes from a style on the
|
|
* parent element, about the only simple fix is to create a last child with height
|
|
* equal to padding-bottom. To preserve the right padding, the sizing element needs to
|
|
* have a width that includes the right padding.
|
|
*/
|
|
getScrollRangeFlags: (function () {
|
|
var flags = -1;
|
|
|
|
return function () {
|
|
if (flags < 0) {
|
|
var div = Ext.getBody().createChild({
|
|
//cls: 'x-border-box x-hide-offsets',
|
|
cls: Ext.baseCSSPrefix + 'border-box',
|
|
style: {
|
|
width: '100px', height: '100px', padding: '10px',
|
|
overflow: 'auto'
|
|
},
|
|
children: [{
|
|
style: {
|
|
border: '1px solid red',
|
|
width: '150px', height: '150px',
|
|
margin: '0 5px 5px 0' // TRBL
|
|
}
|
|
}]
|
|
}),
|
|
scrollHeight = div.dom.scrollHeight,
|
|
scrollWidth = div.dom.scrollWidth,
|
|
heightFlags = {
|
|
// right answer, nothing missing:
|
|
175: 0,
|
|
// missing parent padding-bottom:
|
|
165: 1,
|
|
// missing child margin-bottom:
|
|
170: 2,
|
|
// missing both
|
|
160: 3
|
|
},
|
|
widthFlags = {
|
|
// right answer, nothing missing:
|
|
175: 0,
|
|
// missing parent padding-right:
|
|
165: 4,
|
|
// missing child margin-right:
|
|
170: 8,
|
|
// missing both
|
|
160: 12
|
|
};
|
|
|
|
flags = (heightFlags[scrollHeight] || 0) | (widthFlags[scrollWidth] || 0);
|
|
//Ext.log('flags=',flags.toString(2));
|
|
div.remove();
|
|
}
|
|
|
|
return flags;
|
|
};
|
|
}()),
|
|
|
|
initLayout: function() {
|
|
var me = this,
|
|
scrollbarWidth = Ext.getScrollbarSize().width;
|
|
|
|
me.callParent();
|
|
|
|
// Create a default lastOverflowAdjust based upon scrolling configuration.
|
|
// If the Container is to overflow, or we *always* reserve space for a scrollbar
|
|
// then reserve space for a vertical scrollbar
|
|
if (scrollbarWidth && me.manageOverflow && !me.hasOwnProperty('lastOverflowAdjust')) {
|
|
if (me.owner.scrollFlags.y || me.reserveScrollbar) {
|
|
me.lastOverflowAdjust = {
|
|
width: scrollbarWidth,
|
|
height: 0
|
|
};
|
|
}
|
|
}
|
|
},
|
|
|
|
setupRenderTpl: function (renderTpl) {
|
|
this.callParent(arguments);
|
|
|
|
renderTpl.renderPadder = this.doRenderPadder;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A base class for all menu items that require menu-related functionality such as click handling,
|
|
* sub-menus, icons, etc.
|
|
*
|
|
* @example
|
|
* 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',
|
|
|
|
mixins: {
|
|
queryable: Ext.Queryable
|
|
},
|
|
|
|
/**
|
|
* @property {Boolean} activated
|
|
* Whether or not this item is currently activated
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.menu.Menu} parentMenu
|
|
* The parent Menu of this item.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} activeCls
|
|
* The CSS class added to the menu item when the item is activated (focused/mouseover).
|
|
*/
|
|
activeCls: Ext.baseCSSPrefix + 'menu-item-active',
|
|
|
|
/**
|
|
* @cfg {String} ariaRole
|
|
* @private
|
|
*/
|
|
ariaRole: 'menuitem',
|
|
|
|
/**
|
|
* @cfg {Boolean} canActivate
|
|
* Whether or not this menu item can be activated when focused/mouseovered.
|
|
*/
|
|
canActivate: true,
|
|
|
|
/**
|
|
* @cfg {Number} clickHideDelay
|
|
* The delay in milliseconds to wait before hiding the menu after clicking the menu item.
|
|
* This only has an effect when `hideOnClick: true`.
|
|
*/
|
|
clickHideDelay: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} destroyMenu
|
|
* Whether or not to destroy any associated sub-menu when this item is destroyed.
|
|
*/
|
|
destroyMenu: true,
|
|
|
|
/**
|
|
* @cfg {String} disabledCls
|
|
* The CSS class added to the menu item when the item is disabled.
|
|
*/
|
|
disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled',
|
|
|
|
/**
|
|
* @cfg {String} [href='#']
|
|
* The href attribute to use for the underlying anchor link.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} hrefTarget
|
|
* The target attribute to use for the underlying anchor link.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} hideOnClick
|
|
* Whether to not to hide the owning menu when this item is clicked.
|
|
*/
|
|
hideOnClick: true,
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* The path to an icon to display in this item.
|
|
*
|
|
* Defaults to `Ext.BLANK_IMAGE_URL`.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* A CSS class that specifies a `background-image` to use as the icon for this item.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number/String} glyph
|
|
* A numeric unicode character code to use as the icon for this item. The default
|
|
* font-family for glyphs can be set globally using
|
|
* {@link Ext#setGlyphFontFamily Ext.setGlyphFontFamily()}. Alternatively, this
|
|
* config option accepts a string with the charCode and font-family separated by the
|
|
* `@` symbol. For example '65@My Font Family'.
|
|
*/
|
|
|
|
isMenuItem: true,
|
|
|
|
/**
|
|
* @cfg {Ext.menu.Menu/Object} menu
|
|
* Either an instance of {@link Ext.menu.Menu} or a config object for an {@link Ext.menu.Menu}
|
|
* which will act as a sub-menu to this item.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.menu.Menu} menu The sub-menu associated with this item, if one was configured.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} menuAlign
|
|
* The default {@link Ext.util.Positionable#getAlignToXY Ext.util.Positionable.getAlignToXY} anchor position value for this
|
|
* item's sub-menu relative to this item's position.
|
|
*/
|
|
menuAlign: 'tl-tr?',
|
|
|
|
/**
|
|
* @cfg {Number} menuExpandDelay
|
|
* The delay in milliseconds before this item's sub-menu expands after this item is moused over.
|
|
*/
|
|
menuExpandDelay: 200,
|
|
|
|
/**
|
|
* @cfg {Number} menuHideDelay
|
|
* The delay in milliseconds before this item's sub-menu hides after this item is moused out.
|
|
*/
|
|
menuHideDelay: 200,
|
|
|
|
/**
|
|
* @cfg {Boolean} plain
|
|
* Whether or not this item is plain text/html with no icon or visual activation.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} tooltip
|
|
* The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or
|
|
* QuickTips config object.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} tooltipType
|
|
* The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.
|
|
*/
|
|
tooltipType: 'qtip',
|
|
|
|
arrowCls: Ext.baseCSSPrefix + 'menu-item-arrow',
|
|
|
|
childEls: [
|
|
'itemEl', 'iconEl', 'textEl', 'arrowEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<tpl if="plain">',
|
|
'{text}',
|
|
'<tpl else>',
|
|
'<a id="{id}-itemEl"',
|
|
' class="' + Ext.baseCSSPrefix + 'menu-item-link{childElCls}"',
|
|
' href="{href}"',
|
|
'<tpl if="hrefTarget"> target="{hrefTarget}"</tpl>',
|
|
' hidefocus="true"',
|
|
// For most browsers the text is already unselectable but Opera needs an explicit unselectable="on".
|
|
' unselectable="on"',
|
|
'<tpl if="tabIndex">',
|
|
' tabIndex="{tabIndex}"',
|
|
'</tpl>',
|
|
'>',
|
|
'<div role="img" id="{id}-iconEl" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}',
|
|
'{childElCls} {glyphCls}" style="<tpl if="icon">background-image:url({icon});</tpl>',
|
|
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
|
|
'<tpl if="glyph">&#{glyph};</tpl>',
|
|
'</div>',
|
|
'<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'menu-item-text" unselectable="on">{text}</span>',
|
|
'<img id="{id}-arrowEl" src="{blank}" class="{arrowCls}',
|
|
'{childElCls}"/>',
|
|
'</a>',
|
|
'</tpl>'
|
|
],
|
|
|
|
maskOnDisable: false,
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* The text/html to display in this item.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} handler
|
|
* A function called when the menu item is clicked (can be used instead of {@link #click} event).
|
|
* @cfg {Ext.menu.Item} handler.item The item that was clicked
|
|
* @cfg {Ext.EventObject} handler.e The underyling {@link Ext.EventObject}.
|
|
*/
|
|
|
|
activate: function() {
|
|
var me = this;
|
|
|
|
if (!me.activated && me.canActivate && me.rendered && !me.isDisabled() && me.isVisible()) {
|
|
me.el.addCls(me.activeCls);
|
|
me.focus();
|
|
me.activated = true;
|
|
me.fireEvent('activate', me);
|
|
}
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
return this.itemEl;
|
|
},
|
|
|
|
deactivate: function() {
|
|
var me = this;
|
|
|
|
if (me.activated) {
|
|
me.el.removeCls(me.activeCls);
|
|
me.blur();
|
|
me.hideMenu();
|
|
me.activated = false;
|
|
me.fireEvent('deactivate', me);
|
|
}
|
|
},
|
|
|
|
deferHideMenu: function() {
|
|
if (this.menu.isVisible()) {
|
|
this.menu.hide();
|
|
}
|
|
},
|
|
|
|
cancelDeferHide: function(){
|
|
clearTimeout(this.hideMenuTimer);
|
|
},
|
|
|
|
deferHideParentMenus: function() {
|
|
var ancestor;
|
|
Ext.menu.Manager.hideAll();
|
|
|
|
if (!Ext.Element.getActiveElement()) {
|
|
// If we have just hidden all Menus, and there is no currently focused element in the dom, transfer focus to the first visible ancestor if any.
|
|
ancestor = this.up(':not([hidden])');
|
|
if (ancestor) {
|
|
ancestor.focus();
|
|
}
|
|
}
|
|
},
|
|
|
|
expandMenu: function(delay) {
|
|
var me = this;
|
|
|
|
if (me.menu) {
|
|
me.cancelDeferHide();
|
|
if (delay === 0) {
|
|
me.doExpandMenu();
|
|
} else {
|
|
clearTimeout(me.expandMenuTimer);
|
|
me.expandMenuTimer = Ext.defer(me.doExpandMenu, Ext.isNumber(delay) ? delay : me.menuExpandDelay, me);
|
|
}
|
|
}
|
|
},
|
|
|
|
doExpandMenu: function() {
|
|
var me = this,
|
|
menu = me.menu;
|
|
|
|
if (me.activated && (!menu.rendered || !menu.isVisible())) {
|
|
me.parentMenu.activeChild = menu;
|
|
menu.parentItem = me;
|
|
menu.parentMenu = me.parentMenu;
|
|
menu.showBy(me, me.menuAlign);
|
|
}
|
|
},
|
|
|
|
getRefItems: function(deep) {
|
|
var menu = this.menu,
|
|
items;
|
|
|
|
if (menu) {
|
|
items = menu.getRefItems(deep);
|
|
items.unshift(menu);
|
|
}
|
|
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'],
|
|
menu;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event activate
|
|
* Fires when this item is activated
|
|
* @param {Ext.menu.Item} item The activated item
|
|
*/
|
|
'activate',
|
|
|
|
/**
|
|
* @event click
|
|
* Fires when this item is clicked
|
|
* @param {Ext.menu.Item} item The item that was clicked
|
|
* @param {Ext.EventObject} e The underyling {@link Ext.EventObject}.
|
|
*/
|
|
'click',
|
|
|
|
/**
|
|
* @event deactivate
|
|
* Fires when this tiem is deactivated
|
|
* @param {Ext.menu.Item} item The deactivated item
|
|
*/
|
|
'deactivate',
|
|
|
|
/**
|
|
* @event textchange
|
|
* Fired when the item's text is changed by the {@link #setText} method.
|
|
* @param {Ext.menu.Item} this
|
|
* @param {String} oldText
|
|
* @param {String} newText
|
|
*/
|
|
'textchange',
|
|
|
|
/**
|
|
* @event iconchange
|
|
* Fired when the item's icon is changed by the {@link #setIcon} or {@link #setIconCls} methods.
|
|
* @param {Ext.menu.Item} this
|
|
* @param {String} oldIcon
|
|
* @param {String} newIcon
|
|
*/
|
|
'iconchange'
|
|
);
|
|
|
|
if (me.plain) {
|
|
cls.push(prefix + 'menu-item-plain');
|
|
}
|
|
|
|
if (me.cls) {
|
|
cls.push(me.cls);
|
|
}
|
|
|
|
me.cls = cls.join(' ');
|
|
|
|
if (me.menu) {
|
|
menu = me.menu;
|
|
delete me.menu;
|
|
me.setMenu(menu);
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onClick: function(e) {
|
|
var me = this,
|
|
clickHideDelay = me.clickHideDelay;
|
|
|
|
if (!me.href) {
|
|
e.stopEvent();
|
|
}
|
|
|
|
if (me.disabled) {
|
|
return;
|
|
}
|
|
|
|
if (me.hideOnClick) {
|
|
if (!clickHideDelay) {
|
|
me.deferHideParentMenus();
|
|
} else {
|
|
me.deferHideParentMenusTimer = Ext.defer(me.deferHideParentMenus, clickHideDelay, me);
|
|
}
|
|
}
|
|
|
|
Ext.callback(me.handler, me.scope || me, [me, e]);
|
|
me.fireEvent('click', me, e);
|
|
|
|
if (!me.hideOnClick) {
|
|
me.focus();
|
|
}
|
|
},
|
|
|
|
onRemoved: function() {
|
|
var me = this;
|
|
|
|
// Removing the active item, must deactivate it.
|
|
if (me.activated && me.parentMenu.activeItem === me) {
|
|
me.parentMenu.deactivateActiveItem();
|
|
}
|
|
me.callParent(arguments);
|
|
me.parentMenu = me.ownerButton = null;
|
|
},
|
|
|
|
// @private
|
|
beforeDestroy: function() {
|
|
var me = this;
|
|
if (me.rendered) {
|
|
me.clearTip();
|
|
}
|
|
me.callParent();
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this;
|
|
|
|
clearTimeout(me.expandMenuTimer);
|
|
me.cancelDeferHide();
|
|
clearTimeout(me.deferHideParentMenusTimer);
|
|
|
|
me.setMenu(null);
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this,
|
|
blank = Ext.BLANK_IMAGE_URL,
|
|
glyph = me.glyph,
|
|
glyphFontFamily = Ext._glyphFontFamily,
|
|
glyphParts, iconCls, arrowCls;
|
|
|
|
me.callParent();
|
|
|
|
if (me.iconAlign === 'right') {
|
|
iconCls = me.checkChangeDisabled ? me.disabledCls : '';
|
|
arrowCls = Ext.baseCSSPrefix + 'menu-item-icon-right ' + me.iconCls;
|
|
} else {
|
|
iconCls = (me.iconCls || '') + (me.checkChangeDisabled ? ' ' + me.disabledCls : '');
|
|
arrowCls = me.menu ? me.arrowCls : '';
|
|
}
|
|
|
|
if (typeof glyph === 'string') {
|
|
glyphParts = glyph.split('@');
|
|
glyph = glyphParts[0];
|
|
glyphFontFamily = glyphParts[1];
|
|
}
|
|
|
|
Ext.applyIf(me.renderData, {
|
|
href: me.href || '#',
|
|
hrefTarget: me.hrefTarget,
|
|
icon: me.icon,
|
|
iconCls: iconCls,
|
|
glyph: glyph,
|
|
glyphCls: glyph ? Ext.baseCSSPrefix + 'menu-item-glyph' : undefined,
|
|
glyphFontFamily: glyphFontFamily,
|
|
hasIcon: !!(me.icon || me.iconCls || glyph),
|
|
iconAlign: me.iconAlign,
|
|
plain: me.plain,
|
|
text: me.text,
|
|
arrowCls: arrowCls,
|
|
blank: blank,
|
|
tabIndex: me.tabIndex
|
|
});
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.tooltip) {
|
|
me.setTooltip(me.tooltip, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Set a child menu for this item. See the {@link #cfg-menu} configuration.
|
|
* @param {Ext.menu.Menu/Object} menu A menu, or menu configuration. null may be
|
|
* passed to remove the menu.
|
|
* @param {Boolean} [destroyMenu] True to destroy any existing menu. False to
|
|
* prevent destruction. If not specified, the {@link #destroyMenu} configuration
|
|
* will be used.
|
|
*/
|
|
setMenu: function(menu, destroyMenu) {
|
|
var me = this,
|
|
oldMenu = me.menu,
|
|
arrowEl = me.arrowEl;
|
|
|
|
if (oldMenu) {
|
|
delete oldMenu.parentItem;
|
|
delete oldMenu.parentMenu;
|
|
delete oldMenu.ownerItem;
|
|
|
|
if (destroyMenu === true || (destroyMenu !== false && me.destroyMenu)) {
|
|
Ext.destroy(oldMenu);
|
|
}
|
|
}
|
|
if (menu) {
|
|
me.menu = Ext.menu.Manager.get(menu);
|
|
me.menu.ownerItem = me;
|
|
} else {
|
|
me.menu = null;
|
|
}
|
|
|
|
if (me.rendered && !me.destroying && arrowEl) {
|
|
arrowEl[me.menu ? 'addCls' : 'removeCls'](me.arrowCls);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the {@link #click} handler of this item
|
|
* @param {Function} fn The handler function
|
|
* @param {Object} [scope] The scope of the handler function
|
|
*/
|
|
setHandler: function(fn, scope) {
|
|
this.handler = fn || null;
|
|
this.scope = scope;
|
|
},
|
|
|
|
/**
|
|
* Sets the {@link #icon} on this item.
|
|
* @param {String} icon The new icon
|
|
*/
|
|
setIcon: function(icon){
|
|
var iconEl = this.iconEl,
|
|
oldIcon = this.icon;
|
|
if (iconEl) {
|
|
iconEl.src = icon || Ext.BLANK_IMAGE_URL;
|
|
}
|
|
this.icon = icon;
|
|
this.fireEvent('iconchange', this, oldIcon, icon);
|
|
},
|
|
|
|
/**
|
|
* Sets the {@link #iconCls} of this item
|
|
* @param {String} iconCls The CSS class to set to {@link #iconCls}
|
|
*/
|
|
setIconCls: function(iconCls) {
|
|
var me = this,
|
|
iconEl = me.iconEl,
|
|
oldCls = me.iconCls;
|
|
|
|
if (iconEl) {
|
|
if (me.iconCls) {
|
|
iconEl.removeCls(me.iconCls);
|
|
}
|
|
|
|
if (iconCls) {
|
|
iconEl.addCls(iconCls);
|
|
}
|
|
}
|
|
|
|
me.iconCls = iconCls;
|
|
me.fireEvent('iconchange', me, oldCls, 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,
|
|
oldText = me.text;
|
|
|
|
me.text = text;
|
|
|
|
if (me.rendered) {
|
|
el.update(text || '');
|
|
// cannot just call layout on the component due to stretchmax
|
|
me.ownerCt.updateLayout();
|
|
}
|
|
me.fireEvent('textchange', me, oldText, text);
|
|
},
|
|
|
|
getTipAttr: function(){
|
|
return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
|
|
},
|
|
|
|
//private
|
|
clearTip: function() {
|
|
if (Ext.quickTipsActive && Ext.isObject(this.tooltip)) {
|
|
Ext.tip.QuickTipManager.unregister(this.itemEl);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the tooltip for this menu item.
|
|
*
|
|
* @param {String/Object} tooltip This may be:
|
|
*
|
|
* - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
|
|
* - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}.
|
|
*
|
|
* @return {Ext.menu.Item} this
|
|
*/
|
|
setTooltip: function(tooltip, initial) {
|
|
var me = this;
|
|
|
|
if (me.rendered) {
|
|
if (!initial) {
|
|
me.clearTip();
|
|
}
|
|
|
|
if (Ext.quickTipsActive && Ext.isObject(tooltip)) {
|
|
Ext.tip.QuickTipManager.register(Ext.apply({
|
|
target: me.itemEl.id
|
|
},
|
|
tooltip));
|
|
me.tooltip = tooltip;
|
|
} else {
|
|
me.itemEl.dom.setAttribute(me.getTipAttr(), tooltip);
|
|
}
|
|
} else {
|
|
me.tooltip = tooltip;
|
|
}
|
|
|
|
return me;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.
|
|
*
|
|
* @example
|
|
* 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',
|
|
|
|
/**
|
|
* @cfg {Boolean} [checked=false]
|
|
* True to render the menuitem initially checked.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} checkHandler
|
|
* Alternative for the {@link #checkchange} event. Gets called with the same parameters.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* Scope for the {@link #checkHandler} callback.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} group
|
|
* Name of a radio group that the item belongs.
|
|
*
|
|
* Specifying this option will turn check item into a radio item.
|
|
*
|
|
* Note that the group name must be globally unique.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} checkedCls
|
|
* The CSS class used by {@link #cls} to show the checked state.
|
|
* Defaults to `Ext.baseCSSPrefix + 'menu-item-checked'`.
|
|
*/
|
|
checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
|
|
/**
|
|
* @cfg {String} uncheckedCls
|
|
* The CSS class used by {@link #cls} to show the unchecked state.
|
|
* Defaults to `Ext.baseCSSPrefix + 'menu-item-unchecked'`.
|
|
*/
|
|
uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked',
|
|
/**
|
|
* @cfg {String} groupCls
|
|
* The CSS class applied to this item's icon image to denote being a part of a radio group.
|
|
* Defaults to `Ext.baseCSSClass + 'menu-group-icon'`.
|
|
* Any specified {@link #iconCls} overrides this.
|
|
*/
|
|
groupCls: Ext.baseCSSPrefix + 'menu-group-icon',
|
|
|
|
/**
|
|
* @cfg {Boolean} [hideOnClick=false]
|
|
* Whether to not to hide the owning menu when this item is clicked.
|
|
* Defaults to `false` for checkbox items, and to `true` for radio group items.
|
|
*/
|
|
hideOnClick: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} [checkChangeDisabled=false]
|
|
* True to prevent the checked item from being toggled. Any submenu will still be accessible.
|
|
*/
|
|
checkChangeDisabled: false,
|
|
|
|
childEls: [
|
|
'itemEl', 'iconEl', 'textEl', 'checkEl'
|
|
],
|
|
|
|
showCheckbox: true,
|
|
|
|
renderTpl: [
|
|
'<tpl if="plain">',
|
|
'{text}',
|
|
'<tpl else>',
|
|
'{%var showCheckbox = values.showCheckbox,',
|
|
' rightCheckbox = showCheckbox && values.hasIcon && (values.iconAlign !== "left"), textCls = rightCheckbox ? "' + Ext.baseCSSPrefix + 'right-check-item-text" : "";%}',
|
|
'<a id="{id}-itemEl" class="' + Ext.baseCSSPrefix + 'menu-item-link{childElCls}" href="{href}" <tpl if="hrefTarget">target="{hrefTarget}"</tpl> hidefocus="true" unselectable="on"',
|
|
'<tpl if="tabIndex">',
|
|
' tabIndex="{tabIndex}"',
|
|
'</tpl>',
|
|
'>',
|
|
'{%if (values.hasIcon && (values.iconAlign !== "left")) {%}',
|
|
'<div role="img" id="{id}-iconEl" class="' + Ext.baseCSSPrefix + 'menu-item-icon {iconCls}',
|
|
'{childElCls} {glyphCls}" style="<tpl if="icon">background-image:url({icon});</tpl>',
|
|
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
|
|
'<tpl if="glyph">&#{glyph};</tpl>',
|
|
'</div>',
|
|
'{%} else if (showCheckbox){%}',
|
|
'<img id="{id}-checkEl" src="{blank}" class="' + Ext.baseCSSPrefix + 'menu-item-icon{childElCls}" />',
|
|
'{%}%}',
|
|
'<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'menu-item-text {[textCls]}{childElCls}" <tpl if="arrowCls">style="margin-right: 17px;"</tpl> >{text}</span>',
|
|
|
|
// CheckItem with an icon puts the icon on the right unless iconAlign=='left'
|
|
'{%if (rightCheckbox) {%}',
|
|
'<img id="{id}-checkEl" src="{blank}" class="' + Ext.baseCSSPrefix + 'menu-item-icon-right{childElCls}" />',
|
|
'{%} else if (values.arrowCls) {%}',
|
|
'<img id="{id}-arrowEl" src="{blank}" class="{arrowCls}{childElCls}"/>',
|
|
'{%}%}',
|
|
'</a>',
|
|
'</tpl>'
|
|
],
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
// coerce to bool straight away
|
|
me.checked = !!me.checked;
|
|
me.addEvents(
|
|
/**
|
|
* @event beforecheckchange
|
|
* Fires before a change event. Return false to cancel.
|
|
* @param {Ext.menu.CheckItem} this
|
|
* @param {Boolean} checked
|
|
*/
|
|
'beforecheckchange',
|
|
|
|
/**
|
|
* @event checkchange
|
|
* Fires after a change event.
|
|
* @param {Ext.menu.CheckItem} this
|
|
* @param {Boolean} checked
|
|
*/
|
|
'checkchange'
|
|
);
|
|
|
|
me.callParent(arguments);
|
|
|
|
Ext.menu.Manager.registerCheckable(me);
|
|
|
|
if (me.group) {
|
|
me.showCheckbox = false
|
|
if (!(me.iconCls || me.icon || me.glyph)) {
|
|
me.iconCls = me.groupCls;
|
|
}
|
|
if (me.initialConfig.hideOnClick !== false) {
|
|
me.hideOnClick = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeRender: function() {
|
|
this.callParent();
|
|
this.renderData.showCheckbox = this.showCheckbox;
|
|
},
|
|
|
|
afterRender: function() {
|
|
var me = this;
|
|
me.callParent();
|
|
me.checked = !me.checked;
|
|
me.setChecked(!me.checked, true);
|
|
if (me.checkChangeDisabled) {
|
|
me.disableCheckChange();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disables just the checkbox functionality of this menu Item. If this menu item has a submenu, that submenu
|
|
* will still be accessible
|
|
*/
|
|
disableCheckChange: function() {
|
|
var me = this,
|
|
checkEl = me.checkEl;
|
|
|
|
if (checkEl) {
|
|
checkEl.addCls(me.disabledCls);
|
|
}
|
|
// In some cases the checkbox will disappear until repainted
|
|
// Happens in everything except IE9 strict, see: EXTJSIV-6412
|
|
if (!(Ext.isIE10p || (Ext.isIE9 && Ext.isStrict)) && me.rendered) {
|
|
me.el.repaint();
|
|
}
|
|
me.checkChangeDisabled = true;
|
|
},
|
|
|
|
/**
|
|
* Reenables the checkbox functionality of this menu item after having been disabled by {@link #disableCheckChange}
|
|
*/
|
|
enableCheckChange: function() {
|
|
var me = this,
|
|
checkEl = me.checkEl;
|
|
|
|
if (checkEl) {
|
|
checkEl.removeCls(me.disabledCls);
|
|
}
|
|
me.checkChangeDisabled = false;
|
|
},
|
|
|
|
onClick: function(e) {
|
|
var me = this;
|
|
if(!me.disabled && !me.checkChangeDisabled && !(me.checked && me.group)) {
|
|
me.setChecked(!me.checked);
|
|
}
|
|
this.callParent([e]);
|
|
},
|
|
|
|
onDestroy: function() {
|
|
Ext.menu.Manager.unregisterCheckable(this);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Sets the checked state of the item
|
|
* @param {Boolean} checked True to check, false to uncheck
|
|
* @param {Boolean} [suppressEvents=false] True to prevent firing the checkchange events.
|
|
*/
|
|
setChecked: function(checked, suppressEvents) {
|
|
var me = this;
|
|
if (me.checked !== checked && (suppressEvents || me.fireEvent('beforecheckchange', me, checked) !== false)) {
|
|
if (me.el) {
|
|
me.el[checked ? 'addCls' : 'removeCls'](me.checkedCls)[!checked ? 'addCls' : 'removeCls'](me.uncheckedCls);
|
|
}
|
|
me.checked = checked;
|
|
Ext.menu.Manager.onCheckChange(me, checked);
|
|
if (!suppressEvents) {
|
|
Ext.callback(me.checkHandler, me.scope, [me, checked]);
|
|
me.fireEvent('checkchange', me, checked);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.menu.KeyNav', {
|
|
extend: Ext.util.KeyNav ,
|
|
|
|
|
|
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
me.menu = config.target;
|
|
me.callParent([Ext.apply({
|
|
down: me.down,
|
|
enter: me.enter,
|
|
esc: me.escape,
|
|
left: me.left,
|
|
right: me.right,
|
|
space: me.enter,
|
|
tab: me.tab,
|
|
up: me.up
|
|
}, config)]);
|
|
},
|
|
|
|
down: function(e) {
|
|
var me = this,
|
|
fi = me.menu.focusedItem;
|
|
|
|
if (fi && e.getKey() == Ext.EventObject.DOWN && me.isWhitelisted(fi)) {
|
|
return true;
|
|
}
|
|
me.focusNextItem(1);
|
|
},
|
|
|
|
enter: function(e) {
|
|
var menu = this.menu,
|
|
focused = menu.focusedItem;
|
|
|
|
if (menu.activeItem) {
|
|
menu.onClick(e);
|
|
} else if (focused && focused.isFormField) {
|
|
// prevent stopEvent being called
|
|
return true;
|
|
}
|
|
},
|
|
|
|
escape: function(e) {
|
|
Ext.menu.Manager.hideAll();
|
|
},
|
|
|
|
focusNextItem: function(step) {
|
|
var menu = this.menu,
|
|
items = menu.items,
|
|
focusedItem = menu.focusedItem,
|
|
startIdx = focusedItem ? items.indexOf(focusedItem) : -1,
|
|
idx = startIdx + step,
|
|
len = items.length,
|
|
count = 0,
|
|
item;
|
|
|
|
// Limit the count, since we might not be able to find something to focus
|
|
while (count < len && idx !== startIdx) {
|
|
if (idx < 0) {
|
|
idx = len - 1;
|
|
} else if (idx >= len) {
|
|
idx = 0;
|
|
}
|
|
|
|
item = items.getAt(idx);
|
|
if (menu.canActivateItem(item)) {
|
|
menu.setActiveItem(item);
|
|
break;
|
|
}
|
|
idx += step;
|
|
++count;
|
|
}
|
|
},
|
|
|
|
isWhitelisted: function(item) {
|
|
return Ext.FocusManager.isWhitelisted(item);
|
|
},
|
|
|
|
left: function(e) {
|
|
var menu = this.menu,
|
|
fi = menu.focusedItem;
|
|
|
|
if (fi && this.isWhitelisted(fi)) {
|
|
return true;
|
|
}
|
|
|
|
menu.hide();
|
|
if (menu.parentMenu) {
|
|
menu.parentMenu.focus();
|
|
}
|
|
},
|
|
|
|
right: function(e) {
|
|
var menu = this.menu,
|
|
fi = menu.focusedItem,
|
|
ai = menu.activeItem,
|
|
am;
|
|
|
|
if (fi && this.isWhitelisted(fi)) {
|
|
return true;
|
|
}
|
|
|
|
if (ai) {
|
|
am = menu.activeItem.menu;
|
|
if (am) {
|
|
ai.expandMenu(0);
|
|
am.setActiveItem(am.child(':focusable'));
|
|
}
|
|
}
|
|
},
|
|
|
|
tab: function(e) {
|
|
var me = this;
|
|
|
|
if (e.shiftKey) {
|
|
me.up(e);
|
|
} else {
|
|
me.down(e);
|
|
}
|
|
},
|
|
|
|
up: function(e) {
|
|
var me = this,
|
|
fi = me.menu.focusedItem;
|
|
|
|
if (fi && e.getKey() == Ext.EventObject.UP && me.isWhitelisted(fi)) {
|
|
return true;
|
|
}
|
|
me.focusNextItem(-1);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will
|
|
* add one of these by using "-" in your call to add() or in your items config rather than creating one directly.
|
|
*
|
|
* @example
|
|
* 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'
|
|
* },{
|
|
* xtype: 'menuseparator'
|
|
* },{
|
|
* text: 'separator above'
|
|
* },{
|
|
* text: 'regular item'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.menu.Separator', {
|
|
extend: Ext.menu.Item ,
|
|
alias: 'widget.menuseparator',
|
|
|
|
/**
|
|
* @cfg {String} activeCls
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} canActivate
|
|
* @private
|
|
*/
|
|
canActivate: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} clickHideDelay
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} destroyMenu
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} disabledCls
|
|
* @private
|
|
*/
|
|
|
|
focusable: false,
|
|
|
|
/**
|
|
* @cfg {String} href
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} hrefTarget
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} hideOnClick
|
|
* @private
|
|
*/
|
|
hideOnClick: false,
|
|
|
|
/**
|
|
* @cfg {String} icon
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} iconCls
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} menu
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} menuAlign
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} menuExpandDelay
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} menuHideDelay
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} plain
|
|
* @private
|
|
*/
|
|
plain: true,
|
|
|
|
/**
|
|
* @cfg {String} separatorCls
|
|
* The CSS class used by the separator item to show the incised line.
|
|
*/
|
|
separatorCls: Ext.baseCSSPrefix + 'menu-item-separator',
|
|
|
|
/**
|
|
* @cfg {String} text
|
|
* @private
|
|
*/
|
|
text: ' ',
|
|
|
|
beforeRender: function(ct, pos) {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
me.addCls(me.separatorCls);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A menu object. This is the container to which you may add {@link Ext.menu.Item menu items}.
|
|
*
|
|
* Menus may contain either {@link Ext.menu.Item menu items}, or general {@link Ext.Component Components}.
|
|
* Menus may also contain {@link Ext.panel.AbstractPanel#dockedItems docked items} because it extends {@link Ext.panel.Panel}.
|
|
*
|
|
* By default, non {@link Ext.menu.Item menu items} are indented so that they line up with the text of menu items. clearing
|
|
* the icon column. To make a contained general {@link Ext.Component Component} left aligned configure the child
|
|
* Component with `indent: false.
|
|
*
|
|
* 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}.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.menu.Menu', {
|
|
* width: 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,
|
|
* 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 ,
|
|
alias: 'widget.menu',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @property {Ext.menu.Menu} parentMenu
|
|
* The parent Menu of this Menu.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [enableKeyNav=true]
|
|
* True to enable keyboard navigation for controlling the menu.
|
|
* This option should generally be disabled when form fields are
|
|
* being used inside the menu.
|
|
*/
|
|
enableKeyNav: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [allowOtherMenus=false]
|
|
* True to allow multiple menus to be displayed at the same time.
|
|
*/
|
|
allowOtherMenus: false,
|
|
|
|
/**
|
|
* @cfg {String} ariaRole
|
|
* @private
|
|
*/
|
|
ariaRole: 'menu',
|
|
|
|
/**
|
|
* @cfg {Boolean} autoRender
|
|
* Floating is true, so autoRender always happens.
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [floating=true]
|
|
* A Menu configured as `floating: true` (the default) will be rendered as an absolutely positioned,
|
|
* {@link Ext.Component#floating floating} {@link Ext.Component Component}. If configured as `floating: false`, the Menu may be
|
|
* used as a child item of another {@link Ext.container.Container Container}.
|
|
*/
|
|
floating: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain
|
|
* Menus are constrained to the document body by default.
|
|
* @private
|
|
*/
|
|
constrain: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [hidden=undefined]
|
|
* True to initially render the Menu as hidden, requiring to be shown manually.
|
|
*
|
|
* Defaults to `true` when `floating: true`, and defaults to `false` when `floating: false`.
|
|
*/
|
|
hidden: true,
|
|
|
|
hideMode: 'visibility',
|
|
|
|
/**
|
|
* @cfg {Boolean} [ignoreParentClicks=false]
|
|
* True to ignore clicks on any item in this menu that is a parent item (displays a submenu)
|
|
* so that the submenu is not dismissed when clicking the parent item.
|
|
*/
|
|
ignoreParentClicks: false,
|
|
|
|
/**
|
|
* @property {Boolean} isMenu
|
|
* `true` in this class to identify an object as an instantiated Menu, or subclass thereof.
|
|
*/
|
|
isMenu: true,
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [showSeparator=true]
|
|
* True to show the icon separator.
|
|
*/
|
|
showSeparator : true,
|
|
|
|
/**
|
|
* @cfg {Number} [minWidth=120]
|
|
* The minimum width of the Menu. The default minWidth only applies when the {@link #floating} config is true.
|
|
*/
|
|
minWidth: undefined,
|
|
|
|
defaultMinWidth: 120,
|
|
|
|
/**
|
|
* @cfg {Boolean} [plain=false]
|
|
* True to remove the incised line down the left side of the menu and to not indent general Component items.
|
|
*
|
|
* {@link Ext.menu.Item MenuItem}s will *always* have space at their start for an icon. With the `plain` setting,
|
|
* non {@link Ext.menu.Item MenuItem} child components will not be indented to line up.
|
|
*
|
|
* Basically, `plain:true` makes a Menu behave more like a regular {@link Ext.layout.container.HBox HBox layout}
|
|
* {@link Ext.panel.Panel Panel} which just has the same background as a Menu.
|
|
*
|
|
* See also the {@link #showSeparator} config.
|
|
*/
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
prefix = Ext.baseCSSPrefix,
|
|
cls = [prefix + 'menu'],
|
|
bodyCls = me.bodyCls ? [me.bodyCls] : [],
|
|
isFloating = me.floating !== false;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event click
|
|
* Fires when this menu is clicked
|
|
* @param {Ext.menu.Menu} menu The menu which has been clicked
|
|
* @param {Ext.Component} item The menu item that was clicked. `undefined` if not applicable.
|
|
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}.
|
|
*/
|
|
'click',
|
|
|
|
/**
|
|
* @event mouseenter
|
|
* Fires when the mouse enters this menu
|
|
* @param {Ext.menu.Menu} menu The menu
|
|
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}
|
|
*/
|
|
'mouseenter',
|
|
|
|
/**
|
|
* @event mouseleave
|
|
* Fires when the mouse leaves this menu
|
|
* @param {Ext.menu.Menu} menu The menu
|
|
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}
|
|
*/
|
|
'mouseleave',
|
|
|
|
/**
|
|
* @event mouseover
|
|
* Fires when the mouse is hovering over this menu
|
|
* @param {Ext.menu.Menu} menu The menu
|
|
* @param {Ext.Component} item The menu item that the mouse is over. `undefined` if not applicable.
|
|
* @param {Ext.EventObject} e The underlying {@link Ext.EventObject}
|
|
*/
|
|
'mouseover'
|
|
);
|
|
|
|
Ext.menu.Manager.register(me);
|
|
|
|
// Menu classes
|
|
if (me.plain) {
|
|
cls.push(prefix + 'menu-plain');
|
|
}
|
|
me.cls = cls.join(' ');
|
|
|
|
// Menu body classes
|
|
bodyCls.push(prefix + 'menu-body', Ext.dom.Element.unselectableCls);
|
|
me.bodyCls = bodyCls.join(' ');
|
|
|
|
// Internal vbox layout, with scrolling overflow
|
|
// Placed in initComponent (rather than prototype) in order to support dynamic layout/scroller
|
|
// options if we wish to allow for such configurations on the Menu.
|
|
// e.g., scrolling speed, vbox align stretch, etc.
|
|
if (!me.layout) {
|
|
me.layout = {
|
|
type: 'vbox',
|
|
align: 'stretchmax',
|
|
overflowHandler: 'Scroller'
|
|
};
|
|
}
|
|
|
|
if (isFloating) {
|
|
// only apply the minWidth when we're floating & one hasn't already been set
|
|
if (me.minWidth === undefined) {
|
|
me.minWidth = me.defaultMinWidth;
|
|
}
|
|
} else {
|
|
// hidden defaults to false if floating is configured as false
|
|
me.hidden = !!me.initialConfig.hidden;
|
|
me.constrain = false;
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// Private implementation for Menus. They are a special case.
|
|
// They are always global floaters, never contained.
|
|
registerWithOwnerCt: function() {
|
|
if (this.floating) {
|
|
this.ownerCt = null;
|
|
Ext.WindowManager.register(this);
|
|
}
|
|
},
|
|
|
|
// Menus do not have owning containers on which they depend for visibility. They stand outside
|
|
// any container hierarchy.
|
|
initHierarchyEvents: Ext.emptyFn,
|
|
|
|
// Menus are never contained, and must not ascertain their visibility from the ancestor hierarchy
|
|
isVisible: function() {
|
|
return this.callParent();
|
|
},
|
|
|
|
// As menus are never contained, a Menu's visibility only ever depends upon its own hidden state.
|
|
// Ignore hiddenness from the ancestor hierarchy, override it with local hidden state.
|
|
getHierarchyState: function() {
|
|
var result = this.callParent();
|
|
result.hidden = this.hidden;
|
|
return result;
|
|
},
|
|
|
|
beforeRender: function() {
|
|
this.callParent(arguments);
|
|
|
|
// Menus are usually floating: true, which means they shrink wrap their items.
|
|
// However, when they are contained, and not auto sized, we must stretch the items.
|
|
if (!this.getSizeModel().width.shrinkWrap) {
|
|
this.layout.align = 'stretch';
|
|
}
|
|
},
|
|
|
|
onBoxReady: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// TODO: Move this to a subTemplate When we support them in the future
|
|
if (me.showSeparator) {
|
|
me.iconSepEl = me.layout.getElementTarget().insertFirst({
|
|
cls: Ext.baseCSSPrefix + 'menu-icon-separator',
|
|
html: ' '
|
|
});
|
|
}
|
|
|
|
me.mon(me.el, {
|
|
click: me.onClick,
|
|
mouseover: me.onMouseOver,
|
|
scope: me
|
|
});
|
|
me.mouseMonitor = me.el.monitorMouseLeave(100, me.onMouseLeave, me);
|
|
|
|
// A Menu is a Panel. The KeyNav can use the Panel's KeyMap
|
|
if (me.enableKeyNav) {
|
|
me.keyNav = new Ext.menu.KeyNav({
|
|
target: me,
|
|
keyMap: me.getKeyMap()
|
|
});
|
|
}
|
|
},
|
|
|
|
getRefOwner: function() {
|
|
// If a submenu, this will have a parentMenu property
|
|
// If a menu of a Button, it will have an ownerButton property
|
|
// Else use the default method.
|
|
return this.parentMenu || this.ownerButton || this.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Returns whether a menu item can be activated or not.
|
|
* @return {Boolean}
|
|
*/
|
|
canActivateItem: function(item) {
|
|
return item && !item.isDisabled() && item.isVisible() && (item.canActivate || item.getXTypes().indexOf('menuitem') < 0);
|
|
},
|
|
|
|
/**
|
|
* Deactivates the current active item on the menu, if one exists.
|
|
*/
|
|
deactivateActiveItem: function(andBlurFocusedItem) {
|
|
var me = this,
|
|
activeItem = me.activeItem,
|
|
focusedItem = me.focusedItem;
|
|
|
|
if (activeItem) {
|
|
activeItem.deactivate();
|
|
if (!activeItem.activated) {
|
|
delete me.activeItem;
|
|
}
|
|
}
|
|
|
|
// Blur the focused item if we are being asked to do that too
|
|
// Only needed if we are being hidden - mouseout does not blur.
|
|
if (focusedItem && andBlurFocusedItem) {
|
|
focusedItem.blur();
|
|
delete me.focusedItem;
|
|
}
|
|
},
|
|
|
|
// @inheritdoc
|
|
getFocusEl: function() {
|
|
return this.focusedItem || this.el;
|
|
},
|
|
|
|
// @inheritdoc
|
|
hide: function() {
|
|
this.deactivateActiveItem(true);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
getItemFromEvent: function(e) {
|
|
return this.getChildByElement(e.getTarget());
|
|
},
|
|
|
|
lookupComponent: function(cmp) {
|
|
var me = this;
|
|
|
|
if (typeof cmp == 'string') {
|
|
cmp = me.lookupItemFromString(cmp);
|
|
} else if (Ext.isObject(cmp)) {
|
|
cmp = me.lookupItemFromObject(cmp);
|
|
}
|
|
|
|
// Apply our minWidth to all of our child components so it's accounted
|
|
// for in our VBox layout
|
|
cmp.minWidth = cmp.minWidth || me.minWidth;
|
|
|
|
return cmp;
|
|
},
|
|
|
|
// @private
|
|
lookupItemFromObject: function(cmp) {
|
|
var me = this,
|
|
prefix = Ext.baseCSSPrefix,
|
|
cls;
|
|
|
|
if (!cmp.isComponent) {
|
|
if (!cmp.xtype) {
|
|
cmp = Ext.create('Ext.menu.' + (Ext.isBoolean(cmp.checked) ? 'Check': '') + 'Item', cmp);
|
|
} else {
|
|
cmp = Ext.ComponentManager.create(cmp, cmp.xtype);
|
|
}
|
|
}
|
|
|
|
if (cmp.isMenuItem) {
|
|
cmp.parentMenu = me;
|
|
}
|
|
|
|
if (!cmp.isMenuItem && !cmp.dock) {
|
|
cls = [prefix + 'menu-item-cmp'];
|
|
|
|
// The "plain" setting means that the menu does not look so much like a menu. It's more like a grey Panel.
|
|
// So it has no vertical separator.
|
|
// Plain menus also will not indent non MenuItem components; there is nothing to indent them to the right of.
|
|
if (!me.plain && (cmp.indent !== false || cmp.iconCls === 'no-icon')) {
|
|
cls.push(prefix + 'menu-item-indent');
|
|
}
|
|
|
|
if (cmp.rendered) {
|
|
cmp.el.addCls(cls);
|
|
} else {
|
|
cmp.cls = (cmp.cls || '') + ' ' + cls.join(' ');
|
|
}
|
|
}
|
|
return cmp;
|
|
},
|
|
|
|
// @private
|
|
lookupItemFromString: function(cmp) {
|
|
return (cmp == 'separator' || cmp == '-') ?
|
|
new Ext.menu.Separator()
|
|
: new Ext.menu.Item({
|
|
canActivate: false,
|
|
hideOnClick: false,
|
|
plain: true,
|
|
text: cmp
|
|
});
|
|
},
|
|
|
|
onClick: function(e) {
|
|
var me = this,
|
|
item;
|
|
|
|
if (me.disabled) {
|
|
e.stopEvent();
|
|
return;
|
|
}
|
|
|
|
item = (e.type === 'click') ? me.getItemFromEvent(e) : me.activeItem;
|
|
if (item && item.isMenuItem) {
|
|
if (!item.menu || !me.ignoreParentClicks) {
|
|
item.onClick(e);
|
|
} else {
|
|
e.stopEvent();
|
|
}
|
|
}
|
|
// Click event may be fired without an item, so we need a second check
|
|
if (!item || item.disabled) {
|
|
item = undefined;
|
|
}
|
|
me.fireEvent('click', me, item, e);
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this;
|
|
|
|
Ext.menu.Manager.unregister(me);
|
|
me.parentMenu = me.ownerButton = null;
|
|
if (me.rendered) {
|
|
me.el.un(me.mouseMonitor);
|
|
Ext.destroy(me.keyNav);
|
|
me.keyNav = null;
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
onMouseLeave: function(e) {
|
|
var me = this;
|
|
|
|
me.deactivateActiveItem();
|
|
|
|
if (me.disabled) {
|
|
return;
|
|
}
|
|
|
|
me.fireEvent('mouseleave', me, e);
|
|
},
|
|
|
|
onMouseOver: function(e) {
|
|
var me = this,
|
|
fromEl = e.getRelatedTarget(),
|
|
mouseEnter = !me.el.contains(fromEl),
|
|
item = me.getItemFromEvent(e),
|
|
parentMenu = me.parentMenu,
|
|
parentItem = me.parentItem;
|
|
|
|
if (mouseEnter && parentMenu) {
|
|
parentMenu.setActiveItem(parentItem);
|
|
parentItem.cancelDeferHide();
|
|
parentMenu.mouseMonitor.mouseenter();
|
|
}
|
|
|
|
if (me.disabled) {
|
|
return;
|
|
}
|
|
|
|
// Do not activate the item if the mouseover was within the item, and it's already active
|
|
if (item && !item.activated) {
|
|
me.setActiveItem(item);
|
|
if (item.activated && item.expandMenu) {
|
|
item.expandMenu();
|
|
}
|
|
}
|
|
if (mouseEnter) {
|
|
me.fireEvent('mouseenter', me, e);
|
|
}
|
|
me.fireEvent('mouseover', me, item, e);
|
|
},
|
|
|
|
setActiveItem: function(item) {
|
|
var me = this;
|
|
|
|
if (item && (item != me.activeItem)) {
|
|
me.deactivateActiveItem();
|
|
if (me.canActivateItem(item)) {
|
|
if (item.activate) {
|
|
item.activate();
|
|
if (item.activated) {
|
|
me.activeItem = item;
|
|
me.focusedItem = item;
|
|
me.focus();
|
|
}
|
|
} else {
|
|
item.focus();
|
|
me.focusedItem = item;
|
|
}
|
|
}
|
|
item.el.scrollIntoView(me.layout.getRenderTarget());
|
|
}
|
|
},
|
|
|
|
showBy: function(cmp, pos, off) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
if (!me.hidden) {
|
|
// show may have been vetoed
|
|
me.setVerticalPosition();
|
|
}
|
|
return me;
|
|
},
|
|
|
|
beforeShow: function() {
|
|
var me = this,
|
|
viewHeight;
|
|
|
|
// Constrain the height to the containing element's viewable area
|
|
if (me.floating) {
|
|
me.savedMaxHeight = me.maxHeight;
|
|
viewHeight = me.container.getViewSize().height;
|
|
me.maxHeight = Math.min(me.maxHeight || viewHeight, viewHeight);
|
|
}
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
afterShow: function() {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// Restore configured maxHeight
|
|
if (me.floating) {
|
|
me.maxHeight = me.savedMaxHeight;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// adjust the vertical position of the menu if the height of the
|
|
// menu is equal (or greater than) the viewport size
|
|
setVerticalPosition: function() {
|
|
var me = this,
|
|
max,
|
|
y = me.getY(),
|
|
returnY = y,
|
|
height = me.getHeight(),
|
|
viewportHeight = Ext.Element.getViewportHeight().height,
|
|
parentEl = me.el.parent(),
|
|
viewHeight = parentEl.getViewSize().height,
|
|
normalY = y - parentEl.getScroll().top; // factor in scrollTop of parent
|
|
|
|
parentEl = null;
|
|
|
|
if (me.floating) {
|
|
max = me.maxHeight ? me.maxHeight : viewHeight - normalY;
|
|
if (height > viewHeight) {
|
|
returnY = y - normalY;
|
|
} else if (max < height) {
|
|
returnY = y - (height - max);
|
|
} else if((y + height) > viewportHeight){ // keep the document from scrolling
|
|
returnY = viewportHeight - height;
|
|
}
|
|
}
|
|
me.setY(returnY);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A menu containing a Ext.picker.Color Component.
|
|
*
|
|
* Notes:
|
|
*
|
|
* - Although not listed here, the **constructor** for this class accepts all of the
|
|
* configuration options of {@link Ext.picker.Color}.
|
|
* - If subclassing ColorMenu, any configuration options for the ColorPicker must be
|
|
* applied to the **initialConfig** property of the ColorMenu. Applying
|
|
* {@link Ext.picker.Color ColorPicker} configuration settings to `this` will **not**
|
|
* affect the ColorPicker's configuration.
|
|
*
|
|
* Example:
|
|
*
|
|
* @example
|
|
* 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'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.menu.ColorPicker', {
|
|
extend: Ext.menu.Menu ,
|
|
|
|
alias: 'widget.colormenu',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} hideOnClick
|
|
* False to continue showing the menu after a color is selected.
|
|
*/
|
|
hideOnClick : true,
|
|
|
|
/**
|
|
* @cfg {String} pickerId
|
|
* An id to assign to the underlying color picker.
|
|
*/
|
|
pickerId : null,
|
|
|
|
/**
|
|
* @cfg {Number} maxHeight
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.picker.Color} picker
|
|
* The {@link Ext.picker.Color} instance for this ColorMenu
|
|
*/
|
|
|
|
/**
|
|
* @event click
|
|
* @private
|
|
*/
|
|
|
|
initComponent : function(){
|
|
var me = this,
|
|
cfg = Ext.apply({}, me.initialConfig);
|
|
|
|
// Ensure we don't get duplicate listeners
|
|
delete cfg.listeners;
|
|
Ext.apply(me, {
|
|
plain: true,
|
|
showSeparator: false,
|
|
items: Ext.applyIf({
|
|
cls: Ext.baseCSSPrefix + 'menu-color-item',
|
|
id: me.pickerId,
|
|
xtype: 'colorpicker'
|
|
}, cfg)
|
|
});
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.picker = me.down('colorpicker');
|
|
|
|
/**
|
|
* @event select
|
|
* @inheritdoc Ext.picker.Color#select
|
|
*/
|
|
me.relayEvents(me.picker, ['select']);
|
|
|
|
if (me.hideOnClick) {
|
|
me.on('select', me.hidePickerOnSelect, me);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hides picker on select if hideOnClick is true
|
|
* @private
|
|
*/
|
|
hidePickerOnSelect: function() {
|
|
Ext.menu.Manager.hideAll();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A menu containing an Ext.picker.Date Component.
|
|
*
|
|
* Notes:
|
|
*
|
|
* - Although not listed here, the **constructor** for this class accepts all of the
|
|
* configuration options of **{@link Ext.picker.Date}**.
|
|
* - If subclassing DateMenu, any configuration options for the DatePicker must be applied
|
|
* to the **initialConfig** property of the DateMenu. Applying {@link Ext.picker.Date Date Picker}
|
|
* configuration settings to **this** will **not** affect the Date Picker's configuration.
|
|
*
|
|
* Example:
|
|
*
|
|
* @example
|
|
* var dateMenu = Ext.create('Ext.menu.DatePicker', {
|
|
* handler: function(dp, date){
|
|
* Ext.Msg.alert('Date Selected', 'You selected ' + 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'
|
|
* }]
|
|
* });
|
|
*/
|
|
Ext.define('Ext.menu.DatePicker', {
|
|
extend: Ext.menu.Menu ,
|
|
|
|
alias: 'widget.datemenu',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {Boolean} hideOnClick
|
|
* False to continue showing the menu after a date is selected.
|
|
*/
|
|
hideOnClick : true,
|
|
|
|
/**
|
|
* @cfg {String} pickerId
|
|
* An id to assign to the underlying date picker.
|
|
*/
|
|
pickerId : null,
|
|
|
|
/**
|
|
* @cfg {Number} maxHeight
|
|
* @private
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.picker.Date} picker
|
|
* The {@link Ext.picker.Date} instance for this DateMenu
|
|
*/
|
|
|
|
initComponent : function(){
|
|
var me = this,
|
|
cfg = Ext.apply({}, me.initialConfig);
|
|
|
|
// Ensure we clear any listeners so they aren't duplicated
|
|
delete cfg.listeners;
|
|
|
|
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,
|
|
xtype: 'datepicker'
|
|
}, cfg)
|
|
});
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.picker = me.down('datepicker');
|
|
/**
|
|
* @event select
|
|
* @inheritdoc Ext.picker.Date#select
|
|
*/
|
|
me.relayEvents(me.picker, ['select']);
|
|
|
|
if (me.hideOnClick) {
|
|
me.on('select', me.hidePickerOnSelect, me);
|
|
}
|
|
},
|
|
|
|
hidePickerOnSelect: function() {
|
|
Ext.menu.Manager.hideAll();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This class is used to display small visual icons in the header of a panel. There are a set of
|
|
* 25 icons that can be specified by using the {@link #type} config. The {@link #callback} config
|
|
* can be used to provide a function that will respond to any click events. In general, this class
|
|
* will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
|
|
* configuration on the Panel itself.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* width: 200,
|
|
* height: 200,
|
|
* renderTo: document.body,
|
|
* title: 'A Panel',
|
|
* tools: [{
|
|
* type: 'help',
|
|
* callback: function() {
|
|
* // show help here
|
|
* }
|
|
* }, {
|
|
* itemId: 'refresh',
|
|
* type: 'refresh',
|
|
* hidden: true,
|
|
* callback: function() {
|
|
* // do refresh
|
|
* }
|
|
* }, {
|
|
* type: 'search',
|
|
* callback: function (panel) {
|
|
* // do search
|
|
* panel.down('#refresh').show();
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* The `callback` config was added in Ext JS 4.2.1 as an alternative to {@link #handler}
|
|
* to provide a more convenient list of arguments. In Ext JS 4.2.1 it is also possible to
|
|
* pass a method name instead of a direct function:
|
|
*
|
|
* tools: [{
|
|
* type: 'help',
|
|
* callback: 'onHelp',
|
|
* scope: this
|
|
* },
|
|
* ...
|
|
*
|
|
* The `callback` (or `handler`) name is looked up on the `scope` which will also be the
|
|
* `this` reference when the method is called.
|
|
*/
|
|
Ext.define('Ext.panel.Tool', {
|
|
extend: Ext.Component ,
|
|
|
|
alias: 'widget.tool',
|
|
|
|
/**
|
|
* @property {Boolean} isTool
|
|
* `true` in this class to identify an object as an instantiated Tool, or subclass thereof.
|
|
*/
|
|
isTool: true,
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'tool',
|
|
disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
|
|
|
|
/**
|
|
* @cfg
|
|
* @private
|
|
*/
|
|
toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
|
|
/**
|
|
* @cfg
|
|
* @private
|
|
*/
|
|
toolOverCls: Ext.baseCSSPrefix + 'tool-over',
|
|
|
|
ariaRole: 'button',
|
|
|
|
childEls: [
|
|
'toolEl'
|
|
],
|
|
|
|
renderTpl: [
|
|
'<img role="presentation" id="{id}-toolEl" src="{blank}" class="{baseCls}-img {baseCls}-{type}' +
|
|
'{childElCls}" role="presentation"/>'
|
|
],
|
|
|
|
/**
|
|
* @cfg {Ext.Component} toolOwner
|
|
* The owner to report to the `callback` method. Default is `null` for the `ownerCt`.
|
|
* @since 4.2
|
|
*/
|
|
toolOwner: null,
|
|
|
|
/**
|
|
* @cfg {Function} callback A function to execute when the tool is clicked.
|
|
* @cfg {Ext.Component} callback.owner The logical owner of the tool. In a typical
|
|
* `Ext.panel.Panel`, this is set to the owning panel. This value comes from the
|
|
* `toolOwner` config.
|
|
* @cfg {Ext.panel.Tool} callback.tool The tool that is calling.
|
|
* @cfg {Ext.EventObject} callback.event The click event.
|
|
* @since 4.2
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Function} handler
|
|
* A function to execute when the tool is clicked. Arguments passed are:
|
|
*
|
|
* - **event** : Ext.EventObject - The click event.
|
|
* - **toolEl** : Ext.Element - The tool Element.
|
|
* - **owner** : Ext.panel.Header - The host panel header.
|
|
* - **tool** : Ext.panel.Tool - The tool object
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} scope
|
|
* The scope to execute the {@link #callback} or {@link #handler} function. Defaults
|
|
* to the tool.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} type
|
|
* The type of tool to render. The following types are available:
|
|
*
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-close"></span> close
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minimize"></span> minimize
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-maximize"></span> maximize
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-restore"></span> restore
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-toggle"></span> toggle
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-gear"></span> gear
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-prev"></span> prev
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-next"></span> next
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-pin"></span> pin
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-unpin"></span> unpin
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-right"></span> right
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-left"></span> left
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-down"></span> down
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-up"></span> up
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-refresh"></span> refresh
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-plus"></span> plus
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minus"></span> minus
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-search"></span> search
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-save"></span> save
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-help"></span> help
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-print"></span> print
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-expand"></span> expand
|
|
* - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-collapse"></span> collapse
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Object} tooltip
|
|
* The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config
|
|
* object
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} tooltipType
|
|
* The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
|
|
*/
|
|
tooltipType: 'qtip',
|
|
|
|
/**
|
|
* @cfg {Boolean} stopEvent
|
|
* Specify as false to allow click event to propagate.
|
|
*/
|
|
stopEvent: true,
|
|
|
|
// Tool size is fixed so that Box layout can avoid measurements.
|
|
height: 15,
|
|
width: 15,
|
|
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
me.addEvents(
|
|
/**
|
|
* @event click
|
|
* Fires when the tool is clicked
|
|
* @param {Ext.panel.Tool} this
|
|
* @param {Ext.EventObject} e The event object
|
|
*/
|
|
'click'
|
|
);
|
|
|
|
|
|
me.type = me.type || me.id;
|
|
|
|
Ext.applyIf(me.renderData, {
|
|
baseCls: me.baseCls,
|
|
blank: Ext.BLANK_IMAGE_URL,
|
|
type: me.type
|
|
});
|
|
|
|
// alias qtip, should use tooltip since it's what we have in the docs
|
|
me.tooltip = me.tooltip || me.qtip;
|
|
me.callParent();
|
|
},
|
|
|
|
// inherit docs
|
|
afterRender: function() {
|
|
var me = this,
|
|
attr;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.el.on({
|
|
click: me.onClick,
|
|
mousedown: me.onMouseDown,
|
|
mouseover: me.onMouseOver,
|
|
mouseout: me.onMouseOut,
|
|
scope: me
|
|
});
|
|
|
|
if (me.tooltip) {
|
|
if (Ext.quickTipsActive && Ext.isObject(me.tooltip)) {
|
|
Ext.tip.QuickTipManager.register(Ext.apply({
|
|
target: me.id
|
|
}, me.tooltip));
|
|
}
|
|
else {
|
|
attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
|
|
me.el.dom.setAttribute(attr, me.tooltip);
|
|
}
|
|
}
|
|
},
|
|
|
|
getFocusEl: function() {
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* Sets the type of the tool. Allows the icon to be changed.
|
|
* @param {String} type The new type. See the {@link #type} config.
|
|
* @return {Ext.panel.Tool} this
|
|
*/
|
|
setType: function(type) {
|
|
var me = this,
|
|
oldType = me.type;
|
|
|
|
me.type = type;
|
|
if (me.rendered) {
|
|
if (oldType) {
|
|
me.toolEl.removeCls(me.baseCls + '-' + oldType);
|
|
}
|
|
me.toolEl.addCls(me.baseCls + '-' + type);
|
|
} else {
|
|
me.renderData.type = type;
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* Called when the tool element is clicked
|
|
* @private
|
|
* @param {Ext.EventObject} e
|
|
* @param {HTMLElement} target The target element
|
|
*/
|
|
onClick: function(e, target) {
|
|
var me = this;
|
|
|
|
if (me.disabled) {
|
|
return false;
|
|
}
|
|
|
|
//remove the pressed + over class
|
|
me.el.removeCls(me.toolPressedCls);
|
|
me.el.removeCls(me.toolOverCls);
|
|
|
|
if (me.stopEvent !== false) {
|
|
e.stopEvent();
|
|
}
|
|
|
|
if (me.handler) {
|
|
Ext.callback(me.handler, me.scope || me, [e, target, me.ownerCt, me]);
|
|
} else if (me.callback) {
|
|
Ext.callback(me.callback, me.scope || me, [me.toolOwner || me.ownerCt, me, e]);
|
|
}
|
|
me.fireEvent('click', me, e);
|
|
return true;
|
|
},
|
|
|
|
// inherit docs
|
|
onDestroy: function(){
|
|
if (Ext.quickTipsActive && Ext.isObject(this.tooltip)) {
|
|
Ext.tip.QuickTipManager.unregister(this.id);
|
|
}
|
|
this.callParent();
|
|
},
|
|
|
|
/**
|
|
* Called when the user presses their mouse button down on a tool
|
|
* Adds the press class ({@link #toolPressedCls})
|
|
* @private
|
|
*/
|
|
onMouseDown: function() {
|
|
if (this.disabled) {
|
|
return false;
|
|
}
|
|
|
|
this.el.addCls(this.toolPressedCls);
|
|
},
|
|
|
|
/**
|
|
* Called when the user rolls over a tool
|
|
* Adds the over class ({@link #toolOverCls})
|
|
* @private
|
|
*/
|
|
onMouseOver: function() {
|
|
if (this.disabled) {
|
|
return false;
|
|
}
|
|
this.el.addCls(this.toolOverCls);
|
|
},
|
|
|
|
/**
|
|
* Called when the user rolls out from a tool.
|
|
* Removes the over class ({@link #toolOverCls})
|
|
* @private
|
|
*/
|
|
onMouseOut: function() {
|
|
this.el.removeCls(this.toolOverCls);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private utility class for Ext.Splitter.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.resizer.SplitterTracker', {
|
|
extend: Ext.dd.DragTracker ,
|
|
|
|
enabled: true,
|
|
|
|
overlayCls: Ext.baseCSSPrefix + 'resizable-overlay',
|
|
|
|
createDragOverlay: function () {
|
|
var overlay;
|
|
|
|
overlay = this.overlay = Ext.getBody().createChild({
|
|
cls: this.overlayCls,
|
|
html: ' '
|
|
});
|
|
|
|
overlay.unselectable();
|
|
overlay.setSize(Ext.Element.getViewWidth(true), Ext.Element.getViewHeight(true));
|
|
overlay.show();
|
|
},
|
|
|
|
getPrevCmp: function() {
|
|
var splitter = this.getSplitter();
|
|
return splitter.previousSibling(':not([hidden])');
|
|
},
|
|
|
|
getNextCmp: function() {
|
|
var splitter = this.getSplitter();
|
|
return splitter.nextSibling(':not([hidden])');
|
|
},
|
|
|
|
// ensure the tracker is enabled, store boxes of previous and next
|
|
// components and calculate the constrain region
|
|
onBeforeStart: function(e) {
|
|
var me = this,
|
|
prevCmp = me.getPrevCmp(),
|
|
nextCmp = me.getNextCmp(),
|
|
collapseEl = me.getSplitter().collapseEl,
|
|
target = e.getTarget(),
|
|
box;
|
|
|
|
if (!prevCmp || !nextCmp) {
|
|
return false;
|
|
}
|
|
|
|
if (collapseEl && target === me.getSplitter().collapseEl.dom) {
|
|
return false;
|
|
}
|
|
|
|
// SplitterTracker is disabled if any of its adjacents are collapsed.
|
|
if (nextCmp.collapsed || prevCmp.collapsed) {
|
|
return false;
|
|
}
|
|
|
|
// store boxes of previous and next
|
|
me.prevBox = prevCmp.getEl().getBox();
|
|
me.nextBox = nextCmp.getEl().getBox();
|
|
me.constrainTo = box = me.calculateConstrainRegion();
|
|
|
|
if (!box) {
|
|
return false;
|
|
}
|
|
|
|
return box;
|
|
},
|
|
|
|
// We move the splitter el. Add the proxy class.
|
|
onStart: function(e) {
|
|
var splitter = this.getSplitter();
|
|
this.createDragOverlay();
|
|
splitter.addCls(splitter.baseCls + '-active');
|
|
},
|
|
|
|
// calculate the constrain Region in which the splitter el may be moved.
|
|
calculateConstrainRegion: function() {
|
|
var me = this,
|
|
splitter = me.getSplitter(),
|
|
splitWidth = splitter.getWidth(),
|
|
defaultMin = splitter.defaultSplitMin,
|
|
orient = splitter.orientation,
|
|
prevBox = me.prevBox,
|
|
prevCmp = me.getPrevCmp(),
|
|
nextBox = me.nextBox,
|
|
nextCmp = me.getNextCmp(),
|
|
// prev and nextConstrainRegions are the maximumBoxes minus the
|
|
// minimumBoxes. The result is always the intersection
|
|
// of these two boxes.
|
|
prevConstrainRegion, nextConstrainRegion, constrainOptions;
|
|
|
|
// vertical splitters, so resizing left to right
|
|
if (orient === 'vertical') {
|
|
constrainOptions = {
|
|
prevCmp: prevCmp,
|
|
nextCmp: nextCmp,
|
|
prevBox: prevBox,
|
|
nextBox: nextBox,
|
|
defaultMin: defaultMin,
|
|
splitWidth: splitWidth
|
|
};
|
|
// Region constructor accepts (top, right, bottom, left)
|
|
// anchored/calculated from the left
|
|
prevConstrainRegion = new Ext.util.Region(
|
|
prevBox.y,
|
|
me.getVertPrevConstrainRight(constrainOptions),
|
|
prevBox.bottom,
|
|
me.getVertPrevConstrainLeft(constrainOptions)
|
|
);
|
|
// anchored/calculated from the right
|
|
nextConstrainRegion = new Ext.util.Region(
|
|
nextBox.y,
|
|
me.getVertNextConstrainRight(constrainOptions),
|
|
nextBox.bottom,
|
|
me.getVertNextConstrainLeft(constrainOptions)
|
|
);
|
|
} else {
|
|
// anchored/calculated from the top
|
|
prevConstrainRegion = new Ext.util.Region(
|
|
prevBox.y + (prevCmp.minHeight || defaultMin),
|
|
prevBox.right,
|
|
// Bottom boundary is y + maxHeight if there IS a maxHeight.
|
|
// Otherwise it is calculated based upon the minWidth of the next Component
|
|
(prevCmp.maxHeight ? prevBox.y + prevCmp.maxHeight : nextBox.bottom - (nextCmp.minHeight || defaultMin)) + splitWidth,
|
|
prevBox.x
|
|
);
|
|
// anchored/calculated from the bottom
|
|
nextConstrainRegion = new Ext.util.Region(
|
|
// Top boundary is bottom - maxHeight if there IS a maxHeight.
|
|
// Otherwise it is calculated based upon the minHeight of the previous Component
|
|
(nextCmp.maxHeight ? nextBox.bottom - nextCmp.maxHeight : prevBox.y + (prevCmp.minHeight || defaultMin)) - splitWidth,
|
|
nextBox.right,
|
|
nextBox.bottom - (nextCmp.minHeight || defaultMin),
|
|
nextBox.x
|
|
);
|
|
}
|
|
|
|
// intersection of the two regions to provide region draggable
|
|
return prevConstrainRegion.intersect(nextConstrainRegion);
|
|
},
|
|
|
|
// Performs the actual resizing of the previous and next components
|
|
performResize: function(e, offset) {
|
|
var me = this,
|
|
splitter = me.getSplitter(),
|
|
orient = splitter.orientation,
|
|
prevCmp = me.getPrevCmp(),
|
|
nextCmp = me.getNextCmp(),
|
|
owner = splitter.ownerCt,
|
|
flexedSiblings = owner.query('>[flex]'),
|
|
len = flexedSiblings.length,
|
|
vertical = orient === 'vertical',
|
|
i = 0,
|
|
dimension = vertical ? 'width' : 'height',
|
|
totalFlex = 0,
|
|
item, size;
|
|
|
|
// Convert flexes to pixel values proportional to the total pixel width of all flexes.
|
|
for (; i < len; i++) {
|
|
item = flexedSiblings[i];
|
|
size = vertical ? item.getWidth() : item.getHeight();
|
|
totalFlex += size;
|
|
item.flex = size;
|
|
}
|
|
|
|
offset = vertical ? offset[0] : offset[1];
|
|
|
|
if (prevCmp) {
|
|
size = me.prevBox[dimension] + offset;
|
|
if (prevCmp.flex) {
|
|
prevCmp.flex = size;
|
|
} else {
|
|
prevCmp[dimension] = size;
|
|
}
|
|
}
|
|
if (nextCmp) {
|
|
size = me.nextBox[dimension] - offset;
|
|
if (nextCmp.flex) {
|
|
nextCmp.flex = size;
|
|
} else {
|
|
nextCmp[dimension] = size;
|
|
}
|
|
}
|
|
|
|
owner.updateLayout();
|
|
},
|
|
|
|
// 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');
|
|
me.performResize(e, me.getResizeOffset());
|
|
},
|
|
|
|
// Track the proxy and set the proper XY coordinates
|
|
// while constraining the drag
|
|
onDrag: function(e) {
|
|
var me = this,
|
|
offset = me.getOffset('dragTarget'),
|
|
splitter = me.getSplitter(),
|
|
splitEl = splitter.getEl(),
|
|
orient = splitter.orientation;
|
|
|
|
if (orient === "vertical") {
|
|
splitEl.setX(me.startRegion.left + offset[0]);
|
|
} else {
|
|
splitEl.setY(me.startRegion.top + offset[1]);
|
|
}
|
|
},
|
|
|
|
getSplitter: function() {
|
|
return this.splitter;
|
|
},
|
|
|
|
getVertPrevConstrainRight: function(o) {
|
|
// Right boundary is x + maxWidth if there IS a maxWidth.
|
|
// Otherwise it is calculated based upon the minWidth of the next Component
|
|
return (o.prevCmp.maxWidth ? o.prevBox.x + o.prevCmp.maxWidth :
|
|
o.nextBox.right - (o.nextCmp.minWidth || o.defaultMin)) + o.splitWidth;
|
|
},
|
|
|
|
getVertPrevConstrainLeft: function(o) {
|
|
return o.prevBox.x + (o.prevCmp.minWidth || o.defaultMin);
|
|
},
|
|
|
|
|
|
getVertNextConstrainRight: function(o) {
|
|
return o.nextBox.right - (o.nextCmp.minWidth || o.defaultMin);
|
|
},
|
|
|
|
getVertNextConstrainLeft: function(o) {
|
|
// Left boundary is right - maxWidth if there IS a maxWidth.
|
|
// Otherwise it is calculated based upon the minWidth of the previous Component
|
|
return (o.nextCmp.maxWidth ? o.nextBox.right - o.nextCmp.maxWidth :
|
|
o.prevBox.x + (o.prevBox.minWidth || o.defaultMin)) - o.splitWidth;
|
|
},
|
|
|
|
getResizeOffset: function() {
|
|
return this.getOffset('dragTarget');
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private utility class for Ext.BorderSplitter.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.resizer.BorderSplitterTracker', {
|
|
extend: Ext.resizer.SplitterTracker ,
|
|
|
|
|
|
getPrevCmp: null,
|
|
getNextCmp: null,
|
|
|
|
// calculate the constrain Region in which the splitter el may be moved.
|
|
calculateConstrainRegion: function() {
|
|
var me = this,
|
|
splitter = me.splitter,
|
|
collapseTarget = splitter.collapseTarget,
|
|
defaultSplitMin = splitter.defaultSplitMin,
|
|
sizePropCap = splitter.vertical ? 'Width' : 'Height',
|
|
minSizeProp = 'min' + sizePropCap,
|
|
maxSizeProp = 'max' + sizePropCap,
|
|
getSizeMethod = 'get' + sizePropCap,
|
|
neighbors = splitter.neighbors,
|
|
length = neighbors.length,
|
|
box = collapseTarget.el.getBox(),
|
|
left = box.x,
|
|
top = box.y,
|
|
right = box.right,
|
|
bottom = box.bottom,
|
|
size = splitter.vertical ? (right - left) : (bottom - top),
|
|
//neighborSizes = [],
|
|
i, neighbor, minRange, maxRange, maxGrowth, maxShrink, targetSize;
|
|
|
|
// if size=100 and minSize=80, we can reduce by 20 so minRange = minSize-size = -20
|
|
minRange = (collapseTarget[minSizeProp] || Math.min(size,defaultSplitMin)) - size;
|
|
|
|
// if maxSize=150, maxRange = maxSize - size = 50
|
|
maxRange = collapseTarget[maxSizeProp];
|
|
if (!maxRange) {
|
|
maxRange = 1e9;
|
|
} else {
|
|
maxRange -= size;
|
|
}
|
|
targetSize = size;
|
|
|
|
for (i = 0; i < length; ++i) {
|
|
neighbor = neighbors[i];
|
|
size = neighbor[getSizeMethod]();
|
|
//neighborSizes.push(size);
|
|
|
|
maxGrowth = size - neighbor[maxSizeProp]; // NaN if no maxSize or negative
|
|
maxShrink = size - (neighbor[minSizeProp] || Math.min(size,defaultSplitMin));
|
|
|
|
if (!isNaN(maxGrowth)) {
|
|
// if neighbor can only grow by 10 (maxGrowth = -10), minRange cannot be
|
|
// -20 anymore, but now only -10:
|
|
if (minRange < maxGrowth) {
|
|
minRange = maxGrowth;
|
|
}
|
|
}
|
|
|
|
// if neighbor can shrink by 20 (maxShrink=20), maxRange cannot be 50 anymore,
|
|
// but now only 20:
|
|
if (maxRange > maxShrink) {
|
|
maxRange = maxShrink;
|
|
}
|
|
}
|
|
|
|
if (maxRange - minRange < 2) {
|
|
return null;
|
|
}
|
|
|
|
box = new Ext.util.Region(top, right, bottom, left);
|
|
|
|
me.constraintAdjusters[me.getCollapseDirection()](box, minRange, maxRange, splitter);
|
|
|
|
me.dragInfo = {
|
|
minRange: minRange,
|
|
maxRange: maxRange,
|
|
//neighborSizes: neighborSizes,
|
|
targetSize: targetSize
|
|
};
|
|
|
|
return box;
|
|
},
|
|
|
|
constraintAdjusters: {
|
|
// splitter is to the right of the box
|
|
left: function (box, minRange, maxRange, splitter) {
|
|
box[0] = box.x = box.left = box.right + minRange;
|
|
box.right += maxRange + splitter.getWidth();
|
|
},
|
|
|
|
// splitter is below the box
|
|
top: function (box, minRange, maxRange, splitter) {
|
|
box[1] = box.y = box.top = box.bottom + minRange;
|
|
box.bottom += maxRange + splitter.getHeight();
|
|
},
|
|
|
|
// splitter is above the box
|
|
bottom: function (box, minRange, maxRange, splitter) {
|
|
box.bottom = box.top - minRange;
|
|
box.top -= maxRange + splitter.getHeight();
|
|
},
|
|
|
|
// splitter is to the left of the box
|
|
right: function (box, minRange, maxRange, splitter) {
|
|
box.right = box.left - minRange;
|
|
box[0] = box.x = box.left = box.x - maxRange + splitter.getWidth();
|
|
}
|
|
},
|
|
|
|
onBeforeStart: function(e) {
|
|
var me = this,
|
|
splitter = me.splitter,
|
|
collapseTarget = splitter.collapseTarget,
|
|
neighbors = splitter.neighbors,
|
|
collapseEl = me.getSplitter().collapseEl,
|
|
target = e.getTarget(),
|
|
length = neighbors.length,
|
|
i, neighbor;
|
|
|
|
if (collapseEl && target === splitter.collapseEl.dom) {
|
|
return false;
|
|
}
|
|
|
|
if (collapseTarget.collapsed) {
|
|
return false;
|
|
}
|
|
|
|
// disabled if any neighbors are collapsed in parallel direction.
|
|
for (i = 0; i < length; ++i) {
|
|
neighbor = neighbors[i];
|
|
|
|
if (neighbor.collapsed && neighbor.isHorz === collapseTarget.isHorz) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (!(me.constrainTo = me.calculateConstrainRegion())) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
performResize: function(e, offset) {
|
|
var me = this,
|
|
splitter = me.splitter,
|
|
collapseDirection = splitter.getCollapseDirection(),
|
|
collapseTarget = splitter.collapseTarget,
|
|
// a vertical splitter adjusts horizontal dimensions
|
|
adjusters = me.splitAdjusters[splitter.vertical ? 'horz' : 'vert'],
|
|
delta = offset[adjusters.index],
|
|
dragInfo = me.dragInfo,
|
|
//neighbors = splitter.neighbors,
|
|
//length = neighbors.length,
|
|
//neighborSizes = dragInfo.neighborSizes,
|
|
//isVert = collapseTarget.isVert,
|
|
//i, neighbor,
|
|
owner;
|
|
|
|
if (collapseDirection == 'right' || collapseDirection == 'bottom') {
|
|
// these splitters grow by moving left/up, so flip the sign of delta...
|
|
delta = -delta;
|
|
}
|
|
|
|
// now constrain delta to our computed range:
|
|
delta = Math.min(Math.max(dragInfo.minRange, delta), dragInfo.maxRange);
|
|
|
|
if (delta) {
|
|
(owner = splitter.ownerCt).suspendLayouts();
|
|
|
|
adjusters.adjustTarget(collapseTarget, dragInfo.targetSize, delta);
|
|
|
|
//for (i = 0; i < length; ++i) {
|
|
// neighbor = neighbors[i];
|
|
// if (!neighbor.isCenter && !neighbor.maintainFlex && neighbor.isVert == isVert) {
|
|
// delete neighbor.flex;
|
|
// adjusters.adjustNeighbor(neighbor, neighborSizes[i], delta);
|
|
// }
|
|
//}
|
|
|
|
owner.resumeLayouts(true);
|
|
}
|
|
},
|
|
|
|
splitAdjusters: {
|
|
horz: {
|
|
index: 0,
|
|
//adjustNeighbor: function (neighbor, size, delta) {
|
|
// neighbor.setSize(size - delta);
|
|
//},
|
|
adjustTarget: function (target, size, delta) {
|
|
target.flex = null;
|
|
target.setSize(size + delta);
|
|
}
|
|
},
|
|
vert: {
|
|
index: 1,
|
|
//adjustNeighbor: function (neighbor, size, delta) {
|
|
// neighbor.setSize(undefined, size - delta);
|
|
//},
|
|
adjustTarget: function (target, targetSize, delta) {
|
|
target.flex = null;
|
|
target.setSize(undefined, targetSize + delta);
|
|
}
|
|
}
|
|
},
|
|
|
|
getCollapseDirection: function() {
|
|
return this.splitter.getCollapseDirection();
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.resizer.BorderSplitterTracker', {
|
|
override: 'Ext.resizer.BorderSplitterTracker',
|
|
|
|
rtlDirections: {
|
|
top: 'top',
|
|
right: 'left',
|
|
bottom: 'bottom',
|
|
left: 'right'
|
|
},
|
|
|
|
getCollapseDirection: function() {
|
|
var direction = this.splitter.getCollapseDirection();
|
|
if (!this.splitter.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) {
|
|
direction = this.rtlDirections[direction];
|
|
}
|
|
return direction;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.resizer.SplitterTracker', {
|
|
override: 'Ext.resizer.SplitterTracker',
|
|
|
|
getVertPrevConstrainLeft: function(o) {
|
|
return (!this.splitter.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) ?
|
|
((o.prevCmp.maxWidth ? o.prevBox.right - o.prevCmp.maxWidth :
|
|
o.nextBox.x + (o.nextCmp.minWidth || o.defaultMin)) - o.splitWidth) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
getVertPrevConstrainRight: function(o) {
|
|
return (!this.splitter.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) ?
|
|
o.prevBox.right - (o.prevCmp.minWidth || o.defaultMin) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
|
|
getVertNextConstrainLeft: function(o) {
|
|
return (!this.splitter.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) ?
|
|
o.nextBox.x + (o.nextCmp.minWidth || o.defaultMin) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
getVertNextConstrainRight: function(o) {
|
|
return (!this.splitter.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) ?
|
|
((o.nextCmp.maxWidth ? o.nextBox.x + o.nextCmp.maxWidth :
|
|
o.prevBox.right - (o.prevBox.minWidth || o.defaultMin)) + o.splitWidth) :
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
getResizeOffset: function() {
|
|
var offset = this.getOffset('dragTarget');
|
|
if (!this.splitter.getHierarchyState().rtl !== !Ext.rootHierarchyState.rtl) {
|
|
offset[0] = -offset[0];
|
|
}
|
|
return offset;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Provides a handle for 9-point resizing of Elements or Components.
|
|
*/
|
|
Ext.define('Ext.resizer.Handle', {
|
|
extend: Ext.Component ,
|
|
handleCls: '',
|
|
baseHandleCls: Ext.baseCSSPrefix + 'resizable-handle',
|
|
// Ext.resizer.Resizer.prototype.possiblePositions define the regions
|
|
// which will be passed in as a region configuration.
|
|
region: '',
|
|
|
|
beforeRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
me.protoEl.unselectable();
|
|
|
|
me.addCls(
|
|
me.baseHandleCls,
|
|
me.baseHandleCls + '-' + me.region,
|
|
me.handleCls
|
|
);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Private utility class for Ext.resizer.Resizer.
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.resizer.ResizeTracker', {
|
|
extend: Ext.dd.DragTracker ,
|
|
dynamic: true,
|
|
preserveRatio: false,
|
|
|
|
// Default to no constraint
|
|
constrainTo: null,
|
|
|
|
proxyCls: Ext.baseCSSPrefix + 'resizable-proxy',
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
widthRatio, heightRatio,
|
|
throttledResizeFn;
|
|
|
|
if (!config.el) {
|
|
if (config.target.isComponent) {
|
|
me.el = config.target.getEl();
|
|
} else {
|
|
me.el = config.target;
|
|
}
|
|
}
|
|
this.callParent(arguments);
|
|
|
|
// Ensure that if we are preserving aspect ratio, the largest minimum is honoured
|
|
if (me.preserveRatio && me.minWidth && me.minHeight) {
|
|
widthRatio = me.minWidth / me.el.getWidth();
|
|
heightRatio = me.minHeight / me.el.getHeight();
|
|
|
|
// largest ratio of minimum:size must be preserved.
|
|
// So if a 400x200 pixel image has
|
|
// minWidth: 50, maxWidth: 50, the maxWidth will be 400 * (50/200)... that is 100
|
|
if (heightRatio > widthRatio) {
|
|
me.minWidth = me.el.getWidth() * heightRatio;
|
|
} else {
|
|
me.minHeight = me.el.getHeight() * widthRatio;
|
|
}
|
|
}
|
|
|
|
// If configured as throttled, create an instance version of resize which calls
|
|
// a throttled function to perform the resize operation.
|
|
if (me.throttle) {
|
|
throttledResizeFn = Ext.Function.createThrottled(function() {
|
|
Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
|
|
}, me.throttle);
|
|
|
|
me.resize = function(box, direction, atEnd) {
|
|
if (atEnd) {
|
|
Ext.resizer.ResizeTracker.prototype.resize.apply(me, arguments);
|
|
} else {
|
|
throttledResizeFn.apply(null, arguments);
|
|
}
|
|
};
|
|
}
|
|
},
|
|
|
|
onBeforeStart: function(e) {
|
|
// record the startBox
|
|
this.startBox = this.target.getBox();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the object that will be resized on every mousemove event.
|
|
* If dynamic is false, this will be a proxy, otherwise it will be our actual target.
|
|
*/
|
|
getDynamicTarget: function() {
|
|
var me = this,
|
|
target = me.target;
|
|
|
|
if (me.dynamic) {
|
|
return target;
|
|
} else if (!me.proxy) {
|
|
me.proxy = me.createProxy(target);
|
|
}
|
|
me.proxy.show();
|
|
return me.proxy;
|
|
},
|
|
|
|
/**
|
|
* Create a proxy for this resizer
|
|
* @param {Ext.Component/Ext.Element} target The target
|
|
* @return {Ext.Element} A proxy element
|
|
*/
|
|
createProxy: function(target){
|
|
var proxy,
|
|
cls = this.proxyCls;
|
|
|
|
if (target.isComponent) {
|
|
proxy = target.getProxy().addCls(cls);
|
|
} else {
|
|
proxy = target.createProxy({
|
|
tag: 'div',
|
|
cls: cls,
|
|
id: target.id + '-rzproxy'
|
|
}, Ext.getBody());
|
|
}
|
|
proxy.removeCls(Ext.baseCSSPrefix + 'proxy-el');
|
|
return proxy;
|
|
},
|
|
|
|
onStart: function(e) {
|
|
// returns the Ext.ResizeHandle that the user started dragging
|
|
this.activeResizeHandle = Ext.get(this.getDragTarget().id);
|
|
|
|
// If we are using a proxy, ensure it is sized.
|
|
if (!this.dynamic) {
|
|
this.resize(this.startBox, {
|
|
horizontal: 'none',
|
|
vertical: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
onDrag: function(e) {
|
|
// dynamic resizing, update dimensions during resize
|
|
if (this.dynamic || this.proxy) {
|
|
this.updateDimensions(e);
|
|
}
|
|
},
|
|
|
|
updateDimensions: function(e, atEnd) {
|
|
var me = this,
|
|
region = me.activeResizeHandle.region,
|
|
offset = me.getOffset(me.constrainTo ? 'dragTarget' : null),
|
|
box = me.startBox,
|
|
ratio,
|
|
widthAdjust = 0,
|
|
heightAdjust = 0,
|
|
snappedWidth,
|
|
snappedHeight,
|
|
adjustX = 0,
|
|
adjustY = 0,
|
|
dragRatio,
|
|
horizDir = offset[0] < 0 ? 'right' : 'left',
|
|
vertDir = offset[1] < 0 ? 'down' : 'up',
|
|
oppositeCorner,
|
|
axis, // 1 = x, 2 = y, 3 = x and y.
|
|
newBox,
|
|
newHeight, newWidth;
|
|
|
|
region = me.convertRegionName(region);
|
|
|
|
switch (region) {
|
|
case 'south':
|
|
heightAdjust = offset[1];
|
|
axis = 2;
|
|
break;
|
|
case 'north':
|
|
heightAdjust = -offset[1];
|
|
adjustY = -heightAdjust;
|
|
axis = 2;
|
|
break;
|
|
case 'east':
|
|
widthAdjust = offset[0];
|
|
axis = 1;
|
|
break;
|
|
case 'west':
|
|
widthAdjust = -offset[0];
|
|
adjustX = -widthAdjust;
|
|
axis = 1;
|
|
break;
|
|
case 'northeast':
|
|
heightAdjust = -offset[1];
|
|
adjustY = -heightAdjust;
|
|
widthAdjust = offset[0];
|
|
oppositeCorner = [box.x, box.y + box.height];
|
|
axis = 3;
|
|
break;
|
|
case 'southeast':
|
|
heightAdjust = offset[1];
|
|
widthAdjust = offset[0];
|
|
oppositeCorner = [box.x, box.y];
|
|
axis = 3;
|
|
break;
|
|
case 'southwest':
|
|
widthAdjust = -offset[0];
|
|
adjustX = -widthAdjust;
|
|
heightAdjust = offset[1];
|
|
oppositeCorner = [box.x + box.width, box.y];
|
|
axis = 3;
|
|
break;
|
|
case 'northwest':
|
|
heightAdjust = -offset[1];
|
|
adjustY = -heightAdjust;
|
|
widthAdjust = -offset[0];
|
|
adjustX = -widthAdjust;
|
|
oppositeCorner = [box.x + box.width, box.y + box.height];
|
|
axis = 3;
|
|
break;
|
|
}
|
|
|
|
newBox = {
|
|
width: box.width + widthAdjust,
|
|
height: box.height + heightAdjust,
|
|
x: box.x + adjustX,
|
|
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);
|
|
|
|
// 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);
|
|
|
|
// 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;
|
|
}
|
|
|
|
// If this is configured to preserve the aspect ratio, or they are dragging using the shift key
|
|
if (me.preserveRatio || e.shiftKey) {
|
|
ratio = me.startBox.width / me.startBox.height;
|
|
|
|
// Calculate aspect ratio constrained values.
|
|
newHeight = Math.min(Math.max(me.minHeight, newBox.width / ratio), me.maxHeight);
|
|
newWidth = Math.min(Math.max(me.minWidth, newBox.height * ratio), me.maxWidth);
|
|
|
|
// X axis: width-only change, height must obey
|
|
if (axis == 1) {
|
|
newBox.height = newHeight;
|
|
}
|
|
|
|
// Y axis: height-only change, width must obey
|
|
else if (axis == 2) {
|
|
newBox.width = newWidth;
|
|
}
|
|
|
|
// Corner drag.
|
|
else {
|
|
// Drag ratio is the ratio of the mouse point from the opposite corner.
|
|
// Basically what edge we are dragging, a horizontal edge or a vertical edge.
|
|
dragRatio = Math.abs(oppositeCorner[0] - this.lastXY[0]) / Math.abs(oppositeCorner[1] - this.lastXY[1]);
|
|
|
|
// If drag ratio > aspect ratio then width is dominant and height must obey
|
|
if (dragRatio > ratio) {
|
|
newBox.height = newHeight;
|
|
} else {
|
|
newBox.width = newWidth;
|
|
}
|
|
|
|
// Handle dragging start coordinates
|
|
if (region == 'northeast') {
|
|
newBox.y = box.y - (newBox.height - box.height);
|
|
} else if (region == 'northwest') {
|
|
newBox.y = box.y - (newBox.height - box.height);
|
|
newBox.x = box.x - (newBox.width - box.width);
|
|
} else if (region == 'southwest') {
|
|
newBox.x = box.x - (newBox.width - box.width);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (heightAdjust === 0) {
|
|
vertDir = 'none';
|
|
}
|
|
if (widthAdjust === 0) {
|
|
horizDir = 'none';
|
|
}
|
|
me.resize(newBox, {
|
|
horizontal: horizDir,
|
|
vertical: vertDir
|
|
}, atEnd);
|
|
},
|
|
|
|
getResizeTarget: function(atEnd) {
|
|
return atEnd ? this.target : this.getDynamicTarget();
|
|
},
|
|
|
|
resize: function(box, direction, atEnd) {
|
|
var me = this,
|
|
target = me.getResizeTarget(atEnd);
|
|
|
|
target.setBox(box);
|
|
|
|
// update the originalTarget if it was wrapped, and the target passed in was the wrap el.
|
|
if (me.originalTarget && (me.dynamic || atEnd)) {
|
|
me.originalTarget.setBox(box);
|
|
}
|
|
},
|
|
|
|
onEnd: function(e) {
|
|
this.updateDimensions(e, true);
|
|
if (this.proxy) {
|
|
this.proxy.hide();
|
|
}
|
|
},
|
|
|
|
convertRegionName: function(name) {
|
|
return name;
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.resizer.ResizeTracker', {
|
|
override: 'Ext.resizer.ResizeTracker',
|
|
|
|
_rtlRegionNames: {
|
|
south: 'south',
|
|
north: 'north',
|
|
east: 'west',
|
|
west: 'east',
|
|
northeast: 'northwest',
|
|
southeast: 'southwest',
|
|
southwest: 'southeast',
|
|
northwest: 'northeast'
|
|
},
|
|
|
|
convertRegionName: function(name) {
|
|
return (Ext.rootHierarchyState.rtl) ? this._rtlRegionNames[name] : name;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Applies drag handles to an element or component to make it resizable. The drag handles are inserted into the element
|
|
* (or component's element) and positioned absolute.
|
|
*
|
|
* Textarea and img elements will be wrapped with an additional div because these elements do not support child nodes.
|
|
* The original element can be accessed through the originalTarget property.
|
|
*
|
|
* Here is the list of valid resize handles:
|
|
*
|
|
* Value Description
|
|
* ------ -------------------
|
|
* 'n' north
|
|
* 's' south
|
|
* 'e' east
|
|
* 'w' west
|
|
* 'nw' northwest
|
|
* 'sw' southwest
|
|
* 'se' southeast
|
|
* 'ne' northeast
|
|
* 'all' all
|
|
*
|
|
* {@img Ext.resizer.Resizer/Ext.resizer.Resizer.png Ext.resizer.Resizer component}
|
|
*
|
|
* Here's an example showing the creation of a typical Resizer:
|
|
*
|
|
* Ext.create('Ext.resizer.Resizer', {
|
|
* el: 'elToResize',
|
|
* handles: 'all',
|
|
* minWidth: 200,
|
|
* minHeight: 100,
|
|
* maxWidth: 500,
|
|
* maxHeight: 400,
|
|
* pinned: true
|
|
* });
|
|
*/
|
|
Ext.define('Ext.resizer.Resizer', {
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
|
|
alternateClassName: 'Ext.Resizable',
|
|
|
|
handleCls: Ext.baseCSSPrefix + 'resizable-handle',
|
|
pinnedCls: Ext.baseCSSPrefix + 'resizable-pinned',
|
|
overCls: Ext.baseCSSPrefix + 'resizable-over',
|
|
wrapCls: Ext.baseCSSPrefix + 'resizable-wrap',
|
|
delimiterRe: /(?:\s*[,;]\s*)|\s+/,
|
|
|
|
/**
|
|
* @cfg {Boolean} dynamic
|
|
* Specify as true to update the {@link #target} (Element or {@link Ext.Component Component}) dynamically during
|
|
* dragging. This is `true` by default, but the {@link Ext.Component Component} class passes `false` when it is
|
|
* configured as {@link Ext.Component#resizable}.
|
|
*
|
|
* If specified as `false`, a proxy element is displayed during the resize operation, and the {@link #target} is
|
|
* updated on mouseup.
|
|
*/
|
|
dynamic: true,
|
|
|
|
/**
|
|
* @cfg {String} handles
|
|
* String consisting of the resize handles to display. Defaults to 's e se' for Elements and fixed position
|
|
* Components. Defaults to 8 point resizing for floating Components (such as Windows). Specify either `'all'` or any
|
|
* of `'n s e w ne nw se sw'`.
|
|
*/
|
|
handles: 's e se',
|
|
|
|
/**
|
|
* @cfg {Number} height
|
|
* Optional. The height to set target to in pixels
|
|
*/
|
|
height : null,
|
|
|
|
/**
|
|
* @cfg {Number} width
|
|
* Optional. The width to set the target to in pixels
|
|
*/
|
|
width : null,
|
|
|
|
/**
|
|
* @cfg {Number} heightIncrement
|
|
* The increment to snap the height resize in pixels.
|
|
*/
|
|
heightIncrement : 0,
|
|
|
|
/**
|
|
* @cfg {Number} widthIncrement
|
|
* The increment to snap the width resize in pixels.
|
|
*/
|
|
widthIncrement : 0,
|
|
|
|
/**
|
|
* @cfg {Number} minHeight
|
|
* The minimum height for the element
|
|
*/
|
|
minHeight : 20,
|
|
|
|
/**
|
|
* @cfg {Number} minWidth
|
|
* The minimum width for the element
|
|
*/
|
|
minWidth : 20,
|
|
|
|
/**
|
|
* @cfg {Number} maxHeight
|
|
* The maximum height for the element
|
|
*/
|
|
maxHeight : 10000,
|
|
|
|
/**
|
|
* @cfg {Number} maxWidth
|
|
* The maximum width for the element
|
|
*/
|
|
maxWidth : 10000,
|
|
|
|
/**
|
|
* @cfg {Boolean} pinned
|
|
* True to ensure that the resize handles are always visible, false indicates resizing by cursor changes only
|
|
*/
|
|
pinned: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} preserveRatio
|
|
* True to preserve the original ratio between height and width during resize
|
|
*/
|
|
preserveRatio: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} transparent
|
|
* True for transparent handles. This is only applied at config time.
|
|
*/
|
|
transparent: false,
|
|
|
|
/**
|
|
* @cfg {Ext.Element/Ext.util.Region} constrainTo
|
|
* An element, or a {@link Ext.util.Region Region} into which the resize operation must be constrained.
|
|
*/
|
|
|
|
possiblePositions: {
|
|
n: 'north',
|
|
s: 'south',
|
|
e: 'east',
|
|
w: 'west',
|
|
se: 'southeast',
|
|
sw: 'southwest',
|
|
nw: 'northwest',
|
|
ne: 'northeast'
|
|
},
|
|
|
|
/**
|
|
* @cfg {Ext.Element/Ext.Component} target
|
|
* The Element or Component to resize.
|
|
*/
|
|
|
|
/**
|
|
* @property {Ext.Element} el
|
|
* Outer element for resizing behavior.
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
target,
|
|
targetEl,
|
|
tag,
|
|
handles = me.handles,
|
|
handleCls,
|
|
possibles,
|
|
len,
|
|
i = 0,
|
|
pos,
|
|
handleEls = [],
|
|
eastWestStyle, style,
|
|
box, targetBaseCls,
|
|
unselectableCls = Ext.dom.Element.unselectableCls;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforeresize
|
|
* Fired before resize is allowed. Return false to cancel resize.
|
|
* @param {Ext.resizer.Resizer} this
|
|
* @param {Number} width The start width
|
|
* @param {Number} height The start height
|
|
* @param {Ext.EventObject} e The mousedown event
|
|
*/
|
|
'beforeresize',
|
|
/**
|
|
* @event resizedrag
|
|
* Fires during resizing. Return false to cancel resize.
|
|
* @param {Ext.resizer.Resizer} this
|
|
* @param {Number} width The new width
|
|
* @param {Number} height The new height
|
|
* @param {Ext.EventObject} e The mousedown event
|
|
*/
|
|
'resizedrag',
|
|
/**
|
|
* @event resize
|
|
* Fired after a resize.
|
|
* @param {Ext.resizer.Resizer} this
|
|
* @param {Number} width The new width
|
|
* @param {Number} height The new height
|
|
* @param {Ext.EventObject} e The mouseup event
|
|
*/
|
|
'resize'
|
|
);
|
|
|
|
if (Ext.isString(config) || Ext.isElement(config) || config.dom) {
|
|
target = config;
|
|
config = arguments[1] || {};
|
|
config.target = target;
|
|
}
|
|
// will apply config to this
|
|
me.mixins.observable.constructor.call(me, config);
|
|
|
|
// If target is a Component, ensure that we pull the element out.
|
|
// Resizer must examine the underlying Element.
|
|
target = me.target;
|
|
if (target) {
|
|
if (target.isComponent) {
|
|
|
|
// Resizable Components get a new UI class on them which makes them overflow:visible
|
|
// if the border width is non-zero and therefore the SASS has embedded the handles
|
|
// in the borders using -ve position.
|
|
target.addClsWithUI('resizable');
|
|
|
|
me.el = target.getEl();
|
|
if (target.minWidth) {
|
|
me.minWidth = target.minWidth;
|
|
}
|
|
if (target.minHeight) {
|
|
me.minHeight = target.minHeight;
|
|
}
|
|
if (target.maxWidth) {
|
|
me.maxWidth = target.maxWidth;
|
|
}
|
|
if (target.maxHeight) {
|
|
me.maxHeight = target.maxHeight;
|
|
}
|
|
if (target.floating) {
|
|
if (!me.hasOwnProperty('handles')) {
|
|
me.handles = 'n ne e se s sw w nw';
|
|
}
|
|
}
|
|
} else {
|
|
me.el = me.target = Ext.get(target);
|
|
}
|
|
}
|
|
// Backwards compatibility with Ext3.x's Resizable which used el as a config.
|
|
else {
|
|
me.target = me.el = Ext.get(me.el);
|
|
}
|
|
|
|
// Tags like textarea and img cannot
|
|
// have children and therefore must
|
|
// be wrapped
|
|
tag = me.el.dom.tagName.toUpperCase();
|
|
if (tag == 'TEXTAREA' || tag == 'IMG' || tag == 'TABLE') {
|
|
/**
|
|
* @property {Ext.Element/Ext.Component} originalTarget
|
|
* Reference to the original resize target if the element of the original resize target was a
|
|
* {@link Ext.form.field.Field Field}, or an IMG or a TEXTAREA which must be wrapped in a DIV.
|
|
*/
|
|
me.originalTarget = me.target;
|
|
targetEl = me.el;
|
|
box = targetEl.getBox();
|
|
me.target = me.el = me.el.wrap({
|
|
cls: me.wrapCls,
|
|
id: me.el.id + '-rzwrap',
|
|
style: targetEl.getStyles('margin-top', 'margin-bottom')
|
|
});
|
|
|
|
// Transfer originalTarget's positioning+sizing+margins
|
|
me.el.setPositioning(targetEl.getPositioning());
|
|
targetEl.clearPositioning();
|
|
me.el.setBox(box);
|
|
|
|
// Position the wrapped element absolute so that it does not stretch the wrapper
|
|
targetEl.setStyle('position', 'absolute');
|
|
}
|
|
|
|
// Position the element, this enables us to absolute position
|
|
// the handles within this.el
|
|
me.el.position();
|
|
if (me.pinned) {
|
|
me.el.addCls(me.pinnedCls);
|
|
}
|
|
|
|
/**
|
|
* @property {Ext.resizer.ResizeTracker} resizeTracker
|
|
*/
|
|
me.resizeTracker = new Ext.resizer.ResizeTracker({
|
|
disabled: me.disabled,
|
|
target: me.target,
|
|
constrainTo: me.constrainTo,
|
|
overCls: me.overCls,
|
|
throttle: me.throttle,
|
|
originalTarget: me.originalTarget,
|
|
delegate: '.' + me.handleCls,
|
|
dynamic: me.dynamic,
|
|
preserveRatio: me.preserveRatio,
|
|
heightIncrement: me.heightIncrement,
|
|
widthIncrement: me.widthIncrement,
|
|
minHeight: me.minHeight,
|
|
maxHeight: me.maxHeight,
|
|
minWidth: me.minWidth,
|
|
maxWidth: me.maxWidth
|
|
});
|
|
|
|
// Relay the ResizeTracker's superclass events as our own resize events
|
|
me.resizeTracker.on({
|
|
mousedown: me.onBeforeResize,
|
|
drag: me.onResize,
|
|
dragend: me.onResizeEnd,
|
|
scope: me
|
|
});
|
|
|
|
if (me.handles == 'all') {
|
|
me.handles = 'n s e w ne nw se sw';
|
|
}
|
|
|
|
handles = me.handles = me.handles.split(me.delimiterRe);
|
|
possibles = me.possiblePositions;
|
|
len = handles.length;
|
|
|
|
handleCls = me.handleCls + ' ' + me.handleCls + '-{0}';
|
|
if (me.target.isComponent) {
|
|
targetBaseCls = me.target.baseCls
|
|
handleCls += ' ' + targetBaseCls + '-handle ' + targetBaseCls + '-handle-{0}';
|
|
if (Ext.supports.CSS3BorderRadius) {
|
|
handleCls += ' ' + targetBaseCls + '-handle-{0}-br';
|
|
}
|
|
}
|
|
|
|
// Needs heighting on IE6!
|
|
eastWestStyle = Ext.isIE6 ? ' style="height:' + me.el.getHeight() + 'px"' : '';
|
|
|
|
for (; i < len; i++){
|
|
// if specified and possible, create
|
|
if (handles[i] && possibles[handles[i]]) {
|
|
pos = possibles[handles[i]];
|
|
if (pos === 'east' || pos === 'west') {
|
|
style = eastWestStyle;
|
|
} else {
|
|
style = '';
|
|
}
|
|
|
|
handleEls.push(
|
|
'<div id="', me.el.id, '-', pos, '-handle"',
|
|
' class="', Ext.String.format(handleCls, pos), ' ', unselectableCls, '"',
|
|
' unselectable="on"',
|
|
style,
|
|
'></div>'
|
|
);
|
|
}
|
|
}
|
|
Ext.DomHelper.append(me.el, handleEls.join(''));
|
|
|
|
// store a reference to each handle element in this.east, this.west, etc
|
|
for (i = 0; i < len; i++){
|
|
// if specified and possible, create
|
|
if (handles[i] && possibles[handles[i]]) {
|
|
pos = possibles[handles[i]];
|
|
me[pos] = me.el.getById(me.el.id + '-' + pos + '-handle');
|
|
me[pos].region = pos;
|
|
|
|
if (me.transparent) {
|
|
me[pos].setOpacity(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Constrain within configured maxima
|
|
if (Ext.isNumber(me.width)) {
|
|
me.width = Ext.Number.constrain(me.width, me.minWidth, me.maxWidth);
|
|
}
|
|
if (Ext.isNumber(me.height)) {
|
|
me.height = Ext.Number.constrain(me.height, me.minHeight, me.maxHeight);
|
|
}
|
|
|
|
// Size the target (and originalTarget)
|
|
if (me.width !== null || me.height !== null) {
|
|
if (me.originalTarget) {
|
|
me.originalTarget.setWidth(me.width);
|
|
me.originalTarget.setHeight(me.height);
|
|
}
|
|
me.resizeTo(me.width, me.height);
|
|
}
|
|
|
|
me.forceHandlesHeight();
|
|
},
|
|
|
|
disable: function() {
|
|
this.resizeTracker.disable();
|
|
},
|
|
|
|
enable: function() {
|
|
this.resizeTracker.enable();
|
|
},
|
|
|
|
/**
|
|
* @private Relay the Tracker's mousedown event as beforeresize
|
|
* @param tracker The Resizer
|
|
* @param e The Event
|
|
*/
|
|
onBeforeResize: function(tracker, e) {
|
|
var box = this.el.getBox();
|
|
return this.fireEvent('beforeresize', this, box.width, box.height, e);
|
|
},
|
|
|
|
/**
|
|
* @private Relay the Tracker's drag event as resizedrag
|
|
* @param tracker The Resizer
|
|
* @param e The Event
|
|
*/
|
|
onResize: function(tracker, e) {
|
|
var me = this,
|
|
box = me.el.getBox();
|
|
|
|
me.forceHandlesHeight();
|
|
return me.fireEvent('resizedrag', me, box.width, box.height, e);
|
|
},
|
|
|
|
/**
|
|
* @private Relay the Tracker's dragend event as resize
|
|
* @param tracker The Resizer
|
|
* @param e The Event
|
|
*/
|
|
onResizeEnd: function(tracker, e) {
|
|
var me = this,
|
|
box = me.el.getBox();
|
|
|
|
me.forceHandlesHeight();
|
|
return me.fireEvent('resize', me, box.width, box.height, e);
|
|
},
|
|
|
|
/**
|
|
* Perform a manual resize and fires the 'resize' event.
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
*/
|
|
resizeTo : function(width, height) {
|
|
var me = this;
|
|
me.target.setSize(width, height);
|
|
me.fireEvent('resize', me, width, height, null);
|
|
},
|
|
|
|
/**
|
|
* Returns the element that was configured with the el or target config property. If a component was configured with
|
|
* the target property then this will return the element of this component.
|
|
*
|
|
* Textarea and img elements will be wrapped with an additional div because these elements do not support child
|
|
* nodes. The original element can be accessed through the originalTarget property.
|
|
* @return {Ext.Element} element
|
|
*/
|
|
getEl : function() {
|
|
return this.el;
|
|
},
|
|
|
|
/**
|
|
* Returns the element or component that was configured with the target config property.
|
|
*
|
|
* Textarea and img elements will be wrapped with an additional div because these elements do not support child
|
|
* nodes. The original element can be accessed through the originalTarget property.
|
|
* @return {Ext.Element/Ext.Component}
|
|
*/
|
|
getTarget: function() {
|
|
return this.target;
|
|
},
|
|
|
|
destroy: function() {
|
|
var me = this,
|
|
i,
|
|
handles = me.handles,
|
|
len = handles.length,
|
|
positions = me.possiblePositions,
|
|
handle;
|
|
|
|
me.resizeTracker.destroy();
|
|
for (i = 0; i < len; i++) {
|
|
if (handle = me[positions[handles[i]]]) {
|
|
handle.remove();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Fix IE6 handle height issue.
|
|
*/
|
|
forceHandlesHeight : function() {
|
|
var me = this,
|
|
handle;
|
|
if (Ext.isIE6) {
|
|
handle = me.east;
|
|
if (handle) {
|
|
handle.setHeight(me.el.getHeight());
|
|
}
|
|
handle = me.west;
|
|
if (handle) {
|
|
handle.setHeight(me.el.getHeight());
|
|
}
|
|
me.el.repaint();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
*
|
|
*/
|
|
Ext.define('Ext.selection.CellModel', {
|
|
extend: Ext.selection.Model ,
|
|
alias: 'selection.cellmodel',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {"SINGLE"} mode
|
|
* Mode of selection. Valid values are:
|
|
*
|
|
* - **"SINGLE"** - Only allows selecting one item at a time. This is the default.
|
|
*/
|
|
|
|
|
|
isCellModel: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableKeyNav
|
|
* Turns on/off keyboard navigation within the grid.
|
|
*/
|
|
enableKeyNav: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} preventWrap
|
|
* Set this configuration to true to prevent wrapping around of selection as
|
|
* a user navigates to the first or last column.
|
|
*/
|
|
preventWrap: false,
|
|
|
|
// private property to use when firing a deselect when no old selection exists.
|
|
noSelection: {
|
|
row: -1,
|
|
column: -1
|
|
},
|
|
|
|
constructor: function() {
|
|
this.addEvents(
|
|
/**
|
|
* @event deselect
|
|
* Fired after a cell is deselected
|
|
* @param {Ext.selection.CellModel} this
|
|
* @param {Ext.data.Model} record The record of the deselected cell
|
|
* @param {Number} row The row index deselected
|
|
* @param {Number} column The column index deselected
|
|
*/
|
|
'deselect',
|
|
|
|
/**
|
|
* @event select
|
|
* Fired after a cell is selected
|
|
* @param {Ext.selection.CellModel} this
|
|
* @param {Ext.data.Model} record The record of the selected cell
|
|
* @param {Number} row The row index selected
|
|
* @param {Number} column The column index selected
|
|
*/
|
|
'select'
|
|
);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
bindComponent: function(view) {
|
|
var me = this,
|
|
grid = view.ownerCt;
|
|
me.primaryView = view;
|
|
me.views = me.views || [];
|
|
me.views.push(view);
|
|
me.bindStore(view.getStore(), true);
|
|
|
|
view.on({
|
|
cellmousedown: me.onMouseDown,
|
|
refresh: me.onViewRefresh,
|
|
scope: me
|
|
});
|
|
if (grid.optimizedColumnMove !== false) {
|
|
grid.on('columnmove', me.onColumnMove, me);
|
|
}
|
|
|
|
if (me.enableKeyNav) {
|
|
me.initKeyNav(view);
|
|
}
|
|
},
|
|
|
|
initKeyNav: function(view) {
|
|
var me = this;
|
|
|
|
if (!view.rendered) {
|
|
view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
|
|
return;
|
|
}
|
|
|
|
view.el.set({
|
|
tabIndex: -1
|
|
});
|
|
|
|
// view.el has tabIndex -1 to allow for
|
|
// keyboard events to be passed to it.
|
|
me.keyNav = new Ext.util.KeyNav({
|
|
target: view.el,
|
|
ignoreInputFields: true,
|
|
up: me.onKeyUp,
|
|
down: me.onKeyDown,
|
|
right: me.onKeyRight,
|
|
left: me.onKeyLeft,
|
|
tab: me.onKeyTab,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
getHeaderCt: function() {
|
|
var selection = this.getCurrentPosition(),
|
|
view = selection ? selection.view : this.primaryView;
|
|
|
|
return view.headerCt;
|
|
},
|
|
|
|
onKeyUp: function(e) {
|
|
this.doMove('up', e);
|
|
},
|
|
|
|
onKeyDown: function(e) {
|
|
this.doMove('down', e);
|
|
},
|
|
|
|
onKeyLeft: function(e) {
|
|
this.doMove('left', e);
|
|
},
|
|
|
|
onKeyRight: function(e) {
|
|
this.doMove('right', e);
|
|
},
|
|
|
|
doMove: function(direction, e){
|
|
this.keyNavigation = true;
|
|
this.move(direction, e);
|
|
this.keyNavigation = false;
|
|
},
|
|
|
|
onVetoUIEvent: Ext.emptyFn,
|
|
|
|
select: function(pos, keepExisting, suppressEvent) {
|
|
var me = this,
|
|
row,
|
|
oldPos = me.getCurrentPosition(),
|
|
store = me.view.store;
|
|
|
|
if (pos || pos === 0) {
|
|
if (pos.isModel) {
|
|
row = store.indexOf(pos);
|
|
if (row !== -1) {
|
|
pos = {
|
|
row: row,
|
|
column: oldPos ? oldPos.column : 0
|
|
};
|
|
} else {
|
|
pos = null;
|
|
}
|
|
} else if (typeof pos === 'number') {
|
|
pos = {
|
|
row: pos,
|
|
column: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
if (pos) {
|
|
me.selectByPosition(pos, suppressEvent);
|
|
} else {
|
|
me.deselect();
|
|
}
|
|
},
|
|
|
|
deselect: function(record, suppressEvent){
|
|
this.selectByPosition(null, suppressEvent);
|
|
},
|
|
|
|
move: function(dir, e) {
|
|
var me = this,
|
|
pos = me.getCurrentPosition(),
|
|
newPos;
|
|
|
|
if (pos) {
|
|
// Calculate the new row and column position
|
|
newPos = pos.view.walkCells(pos, dir, e, me.preventWrap);
|
|
// If walk was successful, select new Position
|
|
if (newPos) {
|
|
newPos.view = pos.view;
|
|
return me.setCurrentPosition(newPos);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the current position in the format {row: row, column: column}
|
|
*/
|
|
getCurrentPosition: function() {
|
|
// If it's during a select, return nextSelection since we buffer
|
|
// the real selection until after the event fires
|
|
return this.selecting ? this.nextSelection : this.selection;
|
|
},
|
|
|
|
/**
|
|
* Sets the current position
|
|
* @param {Object} position The position to set.
|
|
* @param {Boolean} suppressEvent True to suppress selection events
|
|
*/
|
|
setCurrentPosition: function(pos, suppressEvent) {
|
|
var me = this,
|
|
last = me.selection;
|
|
|
|
// onSelectChange uses lastSelection and nextSelection
|
|
me.lastSelection = last;
|
|
if (last) {
|
|
// If the position is the same, jump out & don't fire the event
|
|
if (pos && (pos.record === last.record && pos.columnHeader === last.columnHeader && pos.view === last.view)) {
|
|
pos = null;
|
|
} else {
|
|
me.onCellDeselect(me.selection, suppressEvent);
|
|
}
|
|
}
|
|
|
|
if (pos) {
|
|
me.nextSelection = new Ext.grid.CellContext(me.primaryView).setPosition(pos);
|
|
// set this flag here so we know to use nextSelection
|
|
// if the node is updated during a select
|
|
me.selecting = true;
|
|
me.onCellSelect(me.nextSelection, suppressEvent);
|
|
me.selecting = false;
|
|
// Deselect triggered by new selection will kill the selection property, so restore it here.
|
|
return (me.selection = me.nextSelection);
|
|
}
|
|
},
|
|
|
|
isCellSelected: function(view, row, column) {
|
|
var me = this,
|
|
testPos,
|
|
pos = me.getCurrentPosition();
|
|
|
|
if (pos && pos.view === view) {
|
|
testPos = new Ext.grid.CellContext(view).setPosition({
|
|
row: row,
|
|
column: column
|
|
});
|
|
return (testPos.record === pos.record) && (testPos.columnHeader === pos.columnHeader);
|
|
}
|
|
},
|
|
|
|
// Keep selection model in consistent state upon record deletion.
|
|
onStoreRemove: function(store, records, indexes) {
|
|
var me = this,
|
|
pos = me.getCurrentPosition(),
|
|
i, length = records.length,
|
|
index, shuffleCount = 0;
|
|
|
|
me.callParent(arguments);
|
|
if (pos) {
|
|
// All deletions are after the selection - do nothing
|
|
if (indexes[0] > pos.row) {
|
|
return;
|
|
}
|
|
|
|
for (i = 0; i < length; i++) {
|
|
index = indexes[i];
|
|
|
|
// Deleted a row that was before the selected row, selection will be bumped up by one
|
|
if (index < pos.row) {
|
|
shuffleCount++;
|
|
}
|
|
// We've gone past the selection.
|
|
else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Deletions were before the selection - bump it up
|
|
if (shuffleCount) {
|
|
pos.setRow(pos.row - shuffleCount);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Set the current position based on where the user clicks.
|
|
* @private
|
|
*/
|
|
onMouseDown: function(view, cell, cellIndex, record, row, recordIndex, e) {
|
|
|
|
// Record index will be -1 if the clicked record is a metadata record and not selectable
|
|
if (recordIndex !== -1) {
|
|
this.setCurrentPosition({
|
|
view: view,
|
|
row: row,
|
|
column: cellIndex
|
|
});
|
|
}
|
|
},
|
|
|
|
// notify the view that the cell has been selected to update the ui
|
|
// appropriately and bring the cell into focus
|
|
onCellSelect: function(position, supressEvent) {
|
|
if (position && position.row !== undefined && position.row > -1) {
|
|
this.doSelect(position.record, /*keepExisting*/false, supressEvent);
|
|
}
|
|
},
|
|
|
|
// notify view that the cell has been deselected to update the ui
|
|
// appropriately
|
|
onCellDeselect: function(position, supressEvent) {
|
|
if (position && position.row !== undefined) {
|
|
this.doDeselect(position.record, supressEvent);
|
|
}
|
|
},
|
|
|
|
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
|
|
var me = this,
|
|
pos,
|
|
eventName,
|
|
view;
|
|
|
|
if (isSelected) {
|
|
pos = me.nextSelection;
|
|
eventName = 'select';
|
|
} else {
|
|
pos = me.lastSelection || me.noSelection;
|
|
eventName = 'deselect';
|
|
}
|
|
|
|
// CellModel may be shared between two sides of a Lockable.
|
|
// The position must include a reference to the view in which the selection is current.
|
|
// Ensure we use the view specifiied by the position.
|
|
view = pos.view || me.primaryView;
|
|
|
|
if ((suppressEvent || me.fireEvent('before' + eventName, me, record, pos.row, pos.column)) !== false &&
|
|
commitFn() !== false) {
|
|
|
|
if (isSelected) {
|
|
view.focusRow(record, true);
|
|
view.onCellSelect(pos);
|
|
} else {
|
|
view.onCellDeselect(pos);
|
|
delete me.selection;
|
|
}
|
|
|
|
if (!suppressEvent) {
|
|
me.fireEvent(eventName, me, record, pos.row, pos.column);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Tab key from the View's KeyNav, *not* from an editor.
|
|
onKeyTab: function(e, t) {
|
|
var me = this,
|
|
pos = me.getCurrentPosition(),
|
|
editingPlugin;
|
|
|
|
if (pos) {
|
|
editingPlugin = pos.view.editingPlugin;
|
|
// If we were in editing mode, but just focused on a non-editable cell, behave as if we tabbed off an editable field
|
|
if (editingPlugin && me.wasEditing) {
|
|
me.onEditorTab(editingPlugin, e)
|
|
} else {
|
|
me.move(e.shiftKey ? 'left' : 'right', e);
|
|
}
|
|
}
|
|
},
|
|
|
|
onEditorTab: function(editingPlugin, e) {
|
|
var me = this,
|
|
direction = e.shiftKey ? 'left' : 'right',
|
|
position = me.move(direction, e);
|
|
|
|
// Navigation had somewhere to go.... not hit the buffers.
|
|
if (position) {
|
|
// If we were able to begin editing clear the wasEditing flag. It gets set during navigation off an active edit.
|
|
if (editingPlugin.startEdit(position.record, position.columnHeader)) {
|
|
me.wasEditing = false;
|
|
}
|
|
// If we could not continue editing...
|
|
// Set a flag that we should go back into editing mode upon next onKeyTab call
|
|
else {
|
|
me.wasEditing = true;
|
|
}
|
|
}
|
|
},
|
|
|
|
refresh: function() {
|
|
var pos = this.getCurrentPosition(),
|
|
selRowIdx;
|
|
|
|
// Synchronize the current position's row with the row of the last selected record.
|
|
if (pos && (selRowIdx = this.store.indexOf(this.selected.last())) !== -1) {
|
|
pos.row = selRowIdx;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* When grid uses {@link Ext.panel.Table#optimizedColumnMove optimizedColumnMove} (the default), this is added as a
|
|
* {@link Ext.panel.Table#columnmove columnmove} handler to correctly maintain the
|
|
* selected column using the same column header.
|
|
*
|
|
* If optimizedColumnMove === false, (which some grid Features set) then the view is refreshed,
|
|
* so this is not added as a handler because the selected column.
|
|
*/
|
|
onColumnMove: function(headerCt, header, fromIdx, toIdx) {
|
|
var grid = headerCt.up('tablepanel');
|
|
if (grid) {
|
|
this.onViewRefresh(grid.view);
|
|
}
|
|
},
|
|
|
|
onUpdate: function(record) {
|
|
var me = this,
|
|
pos;
|
|
|
|
if (me.isSelected(record)) {
|
|
pos = me.selecting ? me.nextSelection : me.selection;
|
|
me.view.onCellSelect(pos);
|
|
}
|
|
},
|
|
|
|
onViewRefresh: function(view) {
|
|
var me = this,
|
|
pos = me.getCurrentPosition(),
|
|
headerCt = view.headerCt,
|
|
record, columnHeader;
|
|
|
|
// Re-establish selection of the same cell coordinate.
|
|
// DO NOT fire events because the selected
|
|
if (pos && pos.view === view) {
|
|
record = pos.record;
|
|
columnHeader = pos.columnHeader;
|
|
|
|
// After a refresh, recreate the selection using the same record and grid column as before
|
|
if (!columnHeader.isDescendantOf(headerCt)) {
|
|
// column header is not a child of the header container
|
|
// this happens when the grid is reconfigured with new columns
|
|
// make a best effor to select something by matching on id, then text, then dataIndex
|
|
columnHeader = headerCt.queryById(columnHeader.id) ||
|
|
headerCt.down('[text="' + columnHeader.text + '"]') ||
|
|
headerCt.down('[dataIndex="' + columnHeader.dataIndex + '"]');
|
|
}
|
|
|
|
// If we have a columnHeader (either the column header that already exists in
|
|
// the headerCt, or a suitable match that was found after reconfiguration)
|
|
// AND the record still exists in the store (or a record matching the id of
|
|
// the previously selected record) We are ok to go ahead and set the selection
|
|
if (columnHeader && (view.store.indexOfId(record.getId()) !== -1)) {
|
|
me.setCurrentPosition({
|
|
row: record,
|
|
column: columnHeader,
|
|
view: view
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
selectByPosition: function(position, suppressEvent) {
|
|
this.setCurrentPosition(position, suppressEvent);
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.selection.CellModel', {
|
|
override: 'Ext.selection.CellModel',
|
|
|
|
doMove: function(direction, e) {
|
|
if (this.view.getHierarchyState().rtl) {
|
|
if (direction == 'left') {
|
|
direction = 'right';
|
|
} else if (direction == 'right') {
|
|
direction = 'left';
|
|
}
|
|
}
|
|
this.callParent([direction, e]);
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Implements row based navigation via keyboard.
|
|
*
|
|
* Must synchronize across grid sections.
|
|
*/
|
|
Ext.define('Ext.selection.RowModel', {
|
|
extend: Ext.selection.Model ,
|
|
alias: 'selection.rowmodel',
|
|
|
|
|
|
/**
|
|
* @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.
|
|
*/
|
|
enableKeyNav: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} [ignoreRightMouseSelection=false]
|
|
* True to ignore selections that are made when using the right mouse button if there are
|
|
* records that are already selected. If no records are selected, selection will continue
|
|
* as normal
|
|
*/
|
|
ignoreRightMouseSelection: false,
|
|
|
|
constructor: function() {
|
|
this.addEvents(
|
|
/**
|
|
* @event beforedeselect
|
|
* Fired before a record is deselected. If any listener returns false, the
|
|
* deselection is cancelled.
|
|
* @param {Ext.selection.RowModel} 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.RowModel} 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
|
|
* @param {Ext.selection.RowModel} this
|
|
* @param {Ext.data.Model} record The deselected record
|
|
* @param {Number} index The row index deselected
|
|
*/
|
|
'deselect',
|
|
|
|
/**
|
|
* @event select
|
|
* Fired after a record is selected
|
|
* @param {Ext.selection.RowModel} this
|
|
* @param {Ext.data.Model} record The selected record
|
|
* @param {Number} index The row index selected
|
|
*/
|
|
'select'
|
|
);
|
|
this.views = [];
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
bindComponent: function(view) {
|
|
var me = this;
|
|
|
|
view.on({
|
|
itemmousedown: me.onRowMouseDown,
|
|
itemclick: me.onRowClick,
|
|
scope: me
|
|
});
|
|
|
|
if (me.enableKeyNav) {
|
|
me.initKeyNav(view);
|
|
}
|
|
},
|
|
|
|
initKeyNav: function(view) {
|
|
var me = this;
|
|
|
|
if (!view.rendered) {
|
|
view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
|
|
return;
|
|
}
|
|
|
|
// view.el has tabIndex -1 to allow for
|
|
// keyboard events to be passed to it.
|
|
view.el.set({
|
|
tabIndex: -1
|
|
});
|
|
|
|
// Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto
|
|
me.keyNav = new Ext.util.KeyNav({
|
|
target: view,
|
|
ignoreInputFields: true,
|
|
eventName: 'itemkeydown',
|
|
processEvent: function(view, record, node, index, event) {
|
|
event.record = record;
|
|
event.recordIndex = index;
|
|
return event;
|
|
},
|
|
up: me.onKeyUp,
|
|
down: me.onKeyDown,
|
|
right: me.onKeyRight,
|
|
left: me.onKeyLeft,
|
|
pageDown: me.onKeyPageDown,
|
|
pageUp: me.onKeyPageUp,
|
|
home: me.onKeyHome,
|
|
end: me.onKeyEnd,
|
|
space: me.onKeySpace,
|
|
enter: me.onKeyEnter,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
onUpdate: function(record) {
|
|
var me = this,
|
|
view = me.view,
|
|
index;
|
|
|
|
if (view && me.isSelected(record)) {
|
|
index = view.indexOf(record);
|
|
view.onRowSelect(index);
|
|
if (record === me.lastFocused) {
|
|
view.onRowFocus(index, true);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Returns the number of rows currently visible on the screen or
|
|
// false if there were no rows. This assumes that all rows are
|
|
// of the same height and the first view is accurate.
|
|
getRowsVisible: function() {
|
|
var rowsVisible = false,
|
|
view = this.views[0],
|
|
firstRow = view.all.first(),
|
|
rowHeight, gridViewHeight;
|
|
|
|
if (firstRow) {
|
|
rowHeight = firstRow.getHeight();
|
|
gridViewHeight = view.el.getHeight();
|
|
rowsVisible = Math.floor(gridViewHeight / rowHeight);
|
|
}
|
|
|
|
return rowsVisible;
|
|
},
|
|
|
|
// go to last visible record in grid.
|
|
onKeyEnd: function(e) {
|
|
var me = this,
|
|
view = me.views[0];
|
|
|
|
if (view.bufferedRenderer) {
|
|
// If rendering is buffered, we cannot just increment the row - the row may not be there
|
|
// We have to ask the BufferedRenderer to navigate to the target.
|
|
// And that may involve asynchronous I/O, so must postprocess in a callback.
|
|
view.bufferedRenderer.scrollTo(me.store.getCount() - 1, false, function(newIdx, newRecord) {
|
|
me.afterKeyNavigate(e, newRecord)
|
|
});
|
|
} else {
|
|
me.afterKeyNavigate(e, view.getRecord(view.all.getCount() - 1))
|
|
}
|
|
},
|
|
|
|
// go to first visible record in grid.
|
|
onKeyHome: function(e) {
|
|
var me = this,
|
|
view = me.views[0];
|
|
|
|
if (view.bufferedRenderer) {
|
|
// If rendering is buffered, we cannot just increment the row - the row may not be there
|
|
// We have to ask the BufferedRenderer to navigate to the target.
|
|
// And that may involve asynchronous I/O, so must postprocess in a callback.
|
|
view.bufferedRenderer.scrollTo(0, false, function(newIdx, newRecord) {
|
|
me.afterKeyNavigate(e, newRecord)
|
|
});
|
|
} else {
|
|
me.afterKeyNavigate(e, view.getRecord(0));
|
|
}
|
|
},
|
|
|
|
// Go one page up from the lastFocused record in the grid.
|
|
onKeyPageUp: function(e) {
|
|
var me = this,
|
|
view = me.views[0],
|
|
rowsVisible = me.getRowsVisible(),
|
|
newIdx,
|
|
newRecord;
|
|
|
|
if (rowsVisible) {
|
|
// If rendering is buffered, we cannot just increment the row - the row may not be there
|
|
// We have to ask the BufferedRenderer to navigate to the target.
|
|
// And that may involve asynchronous I/O, so must postprocess in a callback.
|
|
if (view.bufferedRenderer) {
|
|
newIdx = Math.max(e.recordIndex - rowsVisible, 0);
|
|
(me.lastKeyEvent || (me.lastKeyEvent = new Ext.EventObjectImpl())).setEvent(e.browserEvent);
|
|
view.bufferedRenderer.scrollTo(newIdx, false, me.afterBufferedScrollTo, me);
|
|
} else {
|
|
newRecord = view.walkRecs(e.record, -rowsVisible);
|
|
me.afterKeyNavigate(e, newRecord);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Go one page down from the lastFocused record in the grid.
|
|
onKeyPageDown: function(e) {
|
|
var me = this,
|
|
view = me.views[0],
|
|
rowsVisible = me.getRowsVisible(),
|
|
newIdx,
|
|
newRecord;
|
|
|
|
if (rowsVisible) {
|
|
// If rendering is buffered, we cannot just increment the row - the row may not be there
|
|
// We have to ask the BufferedRenderer to navigate to the target.
|
|
// And that may involve asynchronous I/O, so must postprocess in a callback.
|
|
if (view.bufferedRenderer) {
|
|
newIdx = Math.min(e.recordIndex + rowsVisible, me.store.getCount() - 1);
|
|
(me.lastKeyEvent || (me.lastKeyEvent = new Ext.EventObjectImpl())).setEvent(e.browserEvent);
|
|
view.bufferedRenderer.scrollTo(newIdx, false, me.afterBufferedScrollTo, me);
|
|
} else {
|
|
newRecord = view.walkRecs(e.record, rowsVisible);
|
|
me.afterKeyNavigate(e, newRecord);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Select/Deselect based on pressing Spacebar.
|
|
onKeySpace: function(e) {
|
|
var record = this.lastFocused;
|
|
|
|
if (record) {
|
|
this.afterKeyNavigate(e, record);
|
|
}
|
|
},
|
|
|
|
onKeyEnter: Ext.emptyFn,
|
|
|
|
// Navigate one record up. This could be a selection or
|
|
// could be simply focusing a record for discontiguous
|
|
// selection. Provides bounds checking.
|
|
onKeyUp: function(e) {
|
|
var newRecord = this.views[0].walkRecs(e.record, -1);
|
|
|
|
if (newRecord) {
|
|
this.afterKeyNavigate(e, newRecord);
|
|
}
|
|
},
|
|
|
|
// Navigate one record down. This could be a selection or
|
|
// could be simply focusing a record for discontiguous
|
|
// selection. Provides bounds checking.
|
|
onKeyDown: function(e) {
|
|
var newRecord = this.views[0].walkRecs(e.record, 1);
|
|
|
|
if (newRecord) {
|
|
this.afterKeyNavigate(e, newRecord);
|
|
}
|
|
},
|
|
|
|
afterBufferedScrollTo: function(newIdx, newRecord) {
|
|
this.afterKeyNavigate(this.lastKeyEvent, newRecord)
|
|
},
|
|
|
|
scrollByDeltaX: function(delta) {
|
|
var view = this.views[0],
|
|
section = view.up(),
|
|
hScroll = section.horizontalScroller;
|
|
|
|
if (hScroll) {
|
|
hScroll.scrollByDeltaX(delta);
|
|
}
|
|
},
|
|
|
|
onKeyLeft: function(e) {
|
|
this.scrollByDeltaX(-this.deltaScroll);
|
|
},
|
|
|
|
onKeyRight: function(e) {
|
|
this.scrollByDeltaX(this.deltaScroll);
|
|
},
|
|
|
|
// Select the record with the event included so that
|
|
// we can take into account ctrlKey, shiftKey, etc
|
|
onRowMouseDown: function(view, record, item, index, e) {
|
|
var me = this;
|
|
|
|
// Record index will be -1 if the clicked record is a metadata record and not selectable
|
|
if (index !== -1) {
|
|
if (!me.allowRightMouseSelection(e)) {
|
|
return;
|
|
}
|
|
|
|
if (!me.isSelected(record)) {
|
|
me.mousedownAction = true;
|
|
me.processSelection(view, record, item, index, e);
|
|
} else {
|
|
me.mousedownAction = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
// If the mousedown event is vetoed, we still want to treat it as though we've had
|
|
// a mousedown because we don't want to proceed on click. For example, the click on
|
|
// an action column vetoes the mousedown event so the click isn't processed.
|
|
onVetoUIEvent: function(type, view, cell, rowIndex, cellIndex, e, record){
|
|
if (type == 'mousedown') {
|
|
this.mousedownAction = !this.isSelected(record);
|
|
}
|
|
},
|
|
|
|
onRowClick: function(view, record, item, index, e) {
|
|
if (this.mousedownAction) {
|
|
this.mousedownAction = false;
|
|
} else {
|
|
this.processSelection(view, record, item, index, e);
|
|
}
|
|
},
|
|
|
|
processSelection: function(view, record, item, index, e) {
|
|
this.selectWithEvent(record, e);
|
|
},
|
|
|
|
/**
|
|
* Checks whether a selection should proceed based on the ignoreRightMouseSelection
|
|
* option.
|
|
* @private
|
|
* @param {Ext.EventObject} e The event
|
|
* @return {Boolean} False if the selection should not proceed
|
|
*/
|
|
allowRightMouseSelection: function(e) {
|
|
var disallow = this.ignoreRightMouseSelection && e.button !== 0;
|
|
if (disallow) {
|
|
disallow = this.hasSelection();
|
|
}
|
|
return !disallow;
|
|
},
|
|
|
|
// Allow the GridView to update the UI by
|
|
// adding/removing a CSS class from the row.
|
|
onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
|
|
var me = this,
|
|
views = me.views,
|
|
viewsLn = views.length,
|
|
rowIdx = views[0].indexOf(record),
|
|
eventName = isSelected ? 'select' : 'deselect',
|
|
i = 0;
|
|
|
|
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);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Provide indication of what row was last focused via
|
|
// the gridview.
|
|
onLastFocusChanged: function(oldFocused, newFocused, supressFocus) {
|
|
var views = this.views,
|
|
viewsLn = views.length,
|
|
rowIdx,
|
|
i = 0;
|
|
|
|
if (oldFocused) {
|
|
rowIdx = views[0].indexOf(oldFocused);
|
|
if (rowIdx != -1) {
|
|
for (; i < viewsLn; i++) {
|
|
views[i].onRowFocus(rowIdx, false, true);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (newFocused) {
|
|
rowIdx = views[0].indexOf(newFocused);
|
|
if (rowIdx != -1) {
|
|
for (i = 0; i < viewsLn; i++) {
|
|
views[i].onRowFocus(rowIdx, true, supressFocus);
|
|
}
|
|
}
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
onEditorTab: function(editingPlugin, e) {
|
|
var me = this,
|
|
view = me.views[0],
|
|
record = editingPlugin.getActiveRecord(),
|
|
header = editingPlugin.getActiveColumn(),
|
|
position = view.getPosition(record, header),
|
|
direction = e.shiftKey ? 'left' : 'right';
|
|
|
|
// We want to continue looping while:
|
|
// 1) We have a valid position
|
|
// 2) There is no editor at that position
|
|
// 3) There is an editor, but editing has been cancelled (veto event)
|
|
|
|
do {
|
|
position = view.walkCells(position, direction, e, me.preventWrap);
|
|
} while (position && (!position.columnHeader.getEditor(record) || !editingPlugin.startEditByPosition(position)));
|
|
},
|
|
|
|
/**
|
|
* Returns position of the first selected cell in the selection in the format {row: row, column: column}
|
|
*/
|
|
getCurrentPosition: function() {
|
|
var firstSelection = this.selected.items[0];
|
|
if (firstSelection) {
|
|
return new Ext.grid.CellContext(this.view).setPosition(this.store.indexOf(firstSelection), 0);
|
|
}
|
|
},
|
|
|
|
selectByPosition: function(position) {
|
|
this.select(this.store.getAt(position.row));
|
|
},
|
|
|
|
/**
|
|
* Selects the record immediately following the currently selected record.
|
|
* @param {Boolean} [keepExisting] True to retain existing selections
|
|
* @param {Boolean} [suppressEvent] Set to false to not fire a select event
|
|
* @return {Boolean} `true` if there is a next record, else `false`
|
|
*/
|
|
selectNext: function(keepExisting, suppressEvent) {
|
|
var me = this,
|
|
store = me.store,
|
|
selection = me.getSelection(),
|
|
record = selection[selection.length - 1],
|
|
index = me.views[0].indexOf(record) + 1,
|
|
success;
|
|
|
|
if (index === store.getCount() || index === 0) {
|
|
success = false;
|
|
} else {
|
|
me.doSelect(index, keepExisting, suppressEvent);
|
|
success = true;
|
|
}
|
|
return success;
|
|
},
|
|
|
|
/**
|
|
* Selects the record that precedes the currently selected record.
|
|
* @param {Boolean} [keepExisting] True to retain existing selections
|
|
* @param {Boolean} [suppressEvent] Set to false to not fire a select event
|
|
* @return {Boolean} `true` if there is a previous record, else `false`
|
|
*/
|
|
selectPrevious: function(keepExisting, suppressEvent) {
|
|
var me = this,
|
|
selection = me.getSelection(),
|
|
record = selection[0],
|
|
index = me.views[0].indexOf(record) - 1,
|
|
success;
|
|
|
|
if (index < 0) {
|
|
success = false;
|
|
} else {
|
|
me.doSelect(index, keepExisting, suppressEvent);
|
|
success = true;
|
|
}
|
|
return success;
|
|
},
|
|
|
|
isRowSelected: function(record, index) {
|
|
return this.isSelected(record);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Adds custom behavior for left/right keyboard navigation for use with a tree.
|
|
* Depends on the view having an expand and collapse method which accepts a
|
|
* record. This selection model is created by default for {@link Ext.tree.Panel}.
|
|
*/
|
|
Ext.define('Ext.selection.TreeModel', {
|
|
extend: Ext.selection.RowModel ,
|
|
alias: 'selection.treemodel',
|
|
|
|
/**
|
|
* @cfg {Boolean} pruneRemoved @hide
|
|
*/
|
|
|
|
constructor: function(config) {
|
|
this.callParent(arguments);
|
|
|
|
// If pruneRemoved is required, we must listen to the *TreeStore* to know when nodes
|
|
// are added and removed
|
|
if (this.pruneRemoved) {
|
|
this.pruneRemoved = false;
|
|
this.pruneRemovedNodes = true;
|
|
}
|
|
},
|
|
|
|
// binds the store to the selModel.
|
|
bindStore: function(store, initial) {
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
|
|
// TreePanel should have injected a reference to the TreeStore so that we can
|
|
// listen for node removal.
|
|
if (me.pruneRemovedNodes) {
|
|
me.view.mon(me.treeStore, {
|
|
remove: me.onNodeRemove,
|
|
scope: me
|
|
});
|
|
}
|
|
},
|
|
|
|
onNodeRemove: function(parent, node, isMove) {
|
|
// deselection of deleted records done in base Model class
|
|
if (!isMove) {
|
|
this.deselectDeletedRecords([node]);
|
|
}
|
|
},
|
|
|
|
onKeyRight: function(e, t) {
|
|
this.navExpand(e, t);
|
|
},
|
|
|
|
navExpand: function(e, t) {
|
|
var focused = this.getLastFocused(),
|
|
view = this.view;
|
|
|
|
if (focused) {
|
|
// tree node is already expanded, go down instead
|
|
// this handles both the case where we navigate to firstChild and if
|
|
// there are no children to the nextSibling
|
|
if (focused.isExpanded()) {
|
|
this.onKeyDown(e, t);
|
|
// if its not a leaf node, expand it
|
|
} else if (focused.isExpandable()) {
|
|
// If we are the normal side of a locking pair, only the tree view can do expanding
|
|
if (!view.isTreeView) {
|
|
view = view.lockingPartner;
|
|
}
|
|
|
|
view.expand(focused);
|
|
}
|
|
}
|
|
},
|
|
|
|
onKeyLeft: function(e, t) {
|
|
this.navCollapse(e, t);
|
|
},
|
|
|
|
navCollapse: function(e, t) {
|
|
var me = this,
|
|
focused = this.getLastFocused(),
|
|
view = this.view,
|
|
parentNode;
|
|
|
|
if (focused) {
|
|
parentNode = focused.parentNode;
|
|
// if focused node is already expanded, collapse it
|
|
if (focused.isExpanded()) {
|
|
// If we are the normal side of a locking pair, only the tree view can do collapsing
|
|
if (!view.isTreeView) {
|
|
view = view.lockingPartner;
|
|
}
|
|
|
|
view.collapse(focused);
|
|
// has a parentNode and its not root
|
|
// TODO: this needs to cover the case where the root isVisible
|
|
} else if (parentNode && !parentNode.isRoot()) {
|
|
// Select a range of records when doing multiple selection.
|
|
if (e.shiftKey) {
|
|
me.selectRange(parentNode, focused, e.ctrlKey, 'up');
|
|
me.setLastFocused(parentNode);
|
|
// just move focus, not selection
|
|
} else if (e.ctrlKey) {
|
|
me.setLastFocused(parentNode);
|
|
// select it
|
|
} else {
|
|
me.select(parentNode);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
onKeySpace: function(e, t) {
|
|
if (e.record.data.checked != null) {
|
|
this.toggleCheck(e);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
onKeyEnter: function(e, t) {
|
|
if (e.record.data.checked != null) {
|
|
this.toggleCheck(e);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
toggleCheck: function(e) {
|
|
var view = this.view,
|
|
selected = this.getLastSelected();
|
|
|
|
e.stopEvent();
|
|
if (selected) {
|
|
// If we are the normal side of a locking pair, only the tree view can do on heckChange
|
|
if (!view.isTreeView) {
|
|
view = view.lockingPartner;
|
|
}
|
|
|
|
view.onCheckChange(selected);
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.selection.TreeModel', {
|
|
override: 'Ext.selection.TreeModel',
|
|
|
|
onKeyRight: function(e, t) {
|
|
if (this.view.getHierarchyState().rtl) {
|
|
this.navCollapse(e, t);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
onKeyLeft: function(e, t) {
|
|
if (this.view.getHierarchyState().rtl) {
|
|
this.navExpand(e, t);
|
|
} else {
|
|
this.callParent(arguments);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.slider.Thumb
|
|
* @private
|
|
* Represents a single thumb element on a Slider. This would not usually be created manually and would instead
|
|
* be created internally by an {@link Ext.slider.Multi Multi slider}.
|
|
*/
|
|
Ext.define('Ext.slider.Thumb', {
|
|
|
|
/**
|
|
* @private
|
|
* @property {Number} topThumbZIndex
|
|
* The number used internally to set the z index of the top thumb (see promoteThumb for details)
|
|
*/
|
|
topZIndex: 10000,
|
|
|
|
/**
|
|
* @cfg {Ext.slider.MultiSlider} slider (required)
|
|
* The Slider to render to.
|
|
*/
|
|
|
|
/**
|
|
* Creates new slider thumb.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor: function(config) {
|
|
var me = this;
|
|
|
|
/**
|
|
* @property {Ext.slider.MultiSlider} slider
|
|
* The slider this thumb is contained within
|
|
*/
|
|
Ext.apply(me, config || {}, {
|
|
cls: Ext.baseCSSPrefix + 'slider-thumb',
|
|
|
|
/**
|
|
* @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
|
|
*/
|
|
constrain: false
|
|
});
|
|
me.callParent([config]);
|
|
},
|
|
|
|
/**
|
|
* Renders the thumb into a slider
|
|
*/
|
|
render: function() {
|
|
var me = this;
|
|
me.el = me.slider.innerEl.insertFirst(me.getElConfig());
|
|
me.onRender();
|
|
},
|
|
|
|
onRender: function() {
|
|
if (this.disabled) {
|
|
this.disable();
|
|
}
|
|
this.initEvents();
|
|
},
|
|
|
|
getElConfig: function() {
|
|
var me = this,
|
|
slider = me.slider,
|
|
style = {};
|
|
|
|
style[slider.vertical ? 'bottom' : slider.horizontalProp] = slider.calculateThumbPosition(slider.normalizeValue(me.value)) + '%';
|
|
return {
|
|
style: style,
|
|
id : this.id,
|
|
cls : this.cls
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* move the thumb
|
|
*/
|
|
move: function(v, animate) {
|
|
var me = this,
|
|
el = me.el,
|
|
slider = me.slider,
|
|
styleProp = slider.vertical ? 'bottom' : slider.horizontalProp,
|
|
to,
|
|
from;
|
|
|
|
v += '%';
|
|
|
|
if (!animate) {
|
|
el.dom.style[styleProp] = v;
|
|
} else {
|
|
to = {};
|
|
to[styleProp] = v;
|
|
|
|
if (!Ext.supports.GetPositionPercentage) {
|
|
from = {};
|
|
from[styleProp] = el.dom.style[styleProp];
|
|
}
|
|
|
|
new Ext.fx.Anim({
|
|
target: el,
|
|
duration: 350,
|
|
from: from,
|
|
to: to
|
|
});
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Bring thumb dom element to front.
|
|
*/
|
|
bringToFront: function() {
|
|
this.el.setStyle('zIndex', this.topZIndex);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Send thumb dom element to back.
|
|
*/
|
|
sendToBack: function() {
|
|
this.el.setStyle('zIndex', '');
|
|
},
|
|
|
|
/**
|
|
* Enables the thumb if it is currently disabled
|
|
*/
|
|
enable: function() {
|
|
var me = this;
|
|
|
|
me.disabled = false;
|
|
if (me.el) {
|
|
me.el.removeCls(me.slider.disabledCls);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Disables the thumb if it is currently enabled
|
|
*/
|
|
disable: function() {
|
|
var me = this;
|
|
|
|
me.disabled = true;
|
|
if (me.el) {
|
|
me.el.addCls(me.slider.disabledCls);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets up an Ext.dd.DragTracker for this thumb
|
|
*/
|
|
initEvents: function() {
|
|
var me = this,
|
|
el = me.el;
|
|
|
|
me.tracker = new Ext.dd.DragTracker({
|
|
onBeforeStart: Ext.Function.bind(me.onBeforeDragStart, me),
|
|
onStart : Ext.Function.bind(me.onDragStart, me),
|
|
onDrag : Ext.Function.bind(me.onDrag, me),
|
|
onEnd : Ext.Function.bind(me.onDragEnd, me),
|
|
tolerance : 3,
|
|
autoStart : 300,
|
|
overCls : Ext.baseCSSPrefix + 'slider-thumb-over'
|
|
});
|
|
|
|
me.tracker.initEl(el);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
|
|
* this returns false to disable the DragTracker too.
|
|
* @return {Boolean} False if the slider is currently disabled
|
|
*/
|
|
onBeforeDragStart : function(e) {
|
|
if (this.disabled) {
|
|
return false;
|
|
} else {
|
|
this.slider.promoteThumb(this);
|
|
return true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
|
|
* to the thumb and fires the 'dragstart' event
|
|
*/
|
|
onDragStart: function(e){
|
|
var me = this,
|
|
slider = me.slider;
|
|
|
|
slider.onDragStart(me, e);
|
|
me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
|
|
me.dragging = me.slider.dragging = true;
|
|
me.dragStartValue = me.value;
|
|
|
|
slider.fireEvent('dragstart', slider, e, me);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
|
|
* the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
|
|
*/
|
|
onDrag: function(e) {
|
|
var me = this,
|
|
slider = me.slider,
|
|
index = me.index,
|
|
newValue = me.getValueFromTracker(),
|
|
above,
|
|
below;
|
|
|
|
// If dragged out of range, value will be undefined
|
|
if (newValue !== undefined) {
|
|
if (me.constrain) {
|
|
above = slider.thumbs[index + 1];
|
|
below = slider.thumbs[index - 1];
|
|
|
|
if (below !== undefined && newValue <= below.value) {
|
|
newValue = below.value;
|
|
}
|
|
|
|
if (above !== undefined && newValue >= above.value) {
|
|
newValue = above.value;
|
|
}
|
|
}
|
|
slider.setValue(index, newValue, false);
|
|
slider.fireEvent('drag', slider, e, me);
|
|
}
|
|
},
|
|
|
|
getValueFromTracker: function() {
|
|
var slider = this.slider,
|
|
trackPoint = slider.getTrackpoint(this.tracker.getXY());
|
|
|
|
// If dragged out of range, value will be undefined
|
|
if (trackPoint !== undefined) {
|
|
return slider.reversePixelValue(trackPoint);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
|
|
* fires the 'changecomplete' event with the new value
|
|
*/
|
|
onDragEnd: function(e) {
|
|
var me = this,
|
|
slider = me.slider,
|
|
value = me.value;
|
|
|
|
slider.onDragEnd(me, e);
|
|
me.el.removeCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
|
|
|
|
me.dragging = slider.dragging = false;
|
|
slider.fireEvent('dragend', slider, e);
|
|
|
|
if (me.dragStartValue != value) {
|
|
slider.fireEvent('changecomplete', slider, value, me);
|
|
}
|
|
},
|
|
|
|
destroy: function() {
|
|
Ext.destroy(this.tracker);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this class is not created
|
|
* directly, instead pass the {@link Ext.slider.Multi#useTips} and {@link Ext.slider.Multi#tipText} configuration
|
|
* options to the slider directly.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.slider.Single', {
|
|
* width: 214,
|
|
* minValue: 0,
|
|
* maxValue: 100,
|
|
* useTips: true,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* Optionally provide your own tip text by passing tipText:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.slider.Single', {
|
|
* width: 214,
|
|
* minValue: 0,
|
|
* maxValue: 100,
|
|
* useTips: true,
|
|
* tipText: function(thumb){
|
|
* return Ext.String.format('**{0}% complete**', thumb.value);
|
|
* },
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.slider.Tip', {
|
|
extend: Ext.tip.Tip ,
|
|
minWidth: 10,
|
|
alias: 'widget.slidertip',
|
|
|
|
/**
|
|
* @cfg {Array} [offsets=null]
|
|
* Offsets for aligning the tip to the slider. See {@link Ext.util.Positionable#alignTo}. Default values
|
|
* for offsets are provided by specifying the {@link #position} config.
|
|
*/
|
|
offsets : null,
|
|
|
|
/**
|
|
* @cfg {String} [align=null]
|
|
* Alignment configuration for the tip to the slider. See {@link Ext.util.Positionable#alignTo}. Default
|
|
* values for alignment are provided by specifying the {@link #position} config.
|
|
*/
|
|
align: null,
|
|
|
|
/**
|
|
* @cfg {String} [position=For horizontal sliders, "top", for vertical sliders, "left"]
|
|
* Sets the position for where the tip will be displayed related to the thumb. This sets
|
|
* defaults for {@link #align} and {@link #offsets} configurations. If {@link #align} or
|
|
* {@link #offsets} configurations are specified, they will override the defaults defined
|
|
* by position.
|
|
*/
|
|
position: '',
|
|
|
|
defaultVerticalPosition: 'left',
|
|
|
|
defaultHorizontalPosition: 'top',
|
|
|
|
isSliderTip: true,
|
|
|
|
init: function(slider) {
|
|
var me = this,
|
|
align,
|
|
offsets;
|
|
|
|
if (!me.position) {
|
|
me.position = slider.vertical ? me.defaultVerticalPosition : me.defaultHorizontalPosition;
|
|
}
|
|
|
|
switch (me.position) {
|
|
case 'top':
|
|
offsets = [0, -10];
|
|
align = 'b-t?';
|
|
break;
|
|
case 'bottom':
|
|
offsets = [0, 10];
|
|
align = 't-b?';
|
|
break;
|
|
case 'left':
|
|
offsets = [-10, 0];
|
|
align = 'r-l?';
|
|
break;
|
|
case 'right':
|
|
offsets = [10, 0];
|
|
align = 'l-r?';
|
|
}
|
|
|
|
if (!me.align) {
|
|
me.align = align;
|
|
}
|
|
|
|
if (!me.offsets) {
|
|
me.offsets = offsets;
|
|
}
|
|
|
|
slider.on({
|
|
scope : me,
|
|
dragstart: me.onSlide,
|
|
drag : me.onSlide,
|
|
dragend : me.hide,
|
|
destroy : me.destroy
|
|
});
|
|
},
|
|
/**
|
|
* @private
|
|
* Called whenever a dragstart or drag event is received on the associated Thumb.
|
|
* Aligns the Tip with the Thumb's new position.
|
|
* @param {Ext.slider.MultiSlider} slider The slider
|
|
* @param {Ext.EventObject} e The Event object
|
|
* @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
|
|
*/
|
|
onSlide : function(slider, e, thumb) {
|
|
var me = this;
|
|
me.show();
|
|
me.update(me.getText(thumb));
|
|
me.el.alignTo(thumb.el, me.align, me.offsets);
|
|
},
|
|
|
|
/**
|
|
* Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider
|
|
* Thumb that the Tip is attached to. Override to customize.
|
|
* @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
|
|
* @return {String} The text to display in the tip
|
|
* @protected
|
|
* @template
|
|
*/
|
|
getText : function(thumb) {
|
|
return String(thumb.value);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking
|
|
* and animation. Can be added as an item to any container.
|
|
*
|
|
* Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.slider.Multi', {
|
|
* width: 200,
|
|
* values: [25, 50, 75],
|
|
* increment: 5,
|
|
* minValue: 0,
|
|
* maxValue: 100,
|
|
*
|
|
* // this defaults to true, setting to false allows the thumbs to pass each other
|
|
* constrainThumbs: false,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.slider.Multi', {
|
|
extend: Ext.form.field.Base ,
|
|
alias: 'widget.multislider',
|
|
alternateClassName: 'Ext.slider.MultiSlider',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
childEls: [
|
|
'endEl', 'innerEl'
|
|
],
|
|
|
|
// note: {id} here is really {inputId}, but {cmpId} is available
|
|
fieldSubTpl: [
|
|
'<div id="{id}" class="' + Ext.baseCSSPrefix + 'slider {fieldCls} {vertical}',
|
|
'{childElCls}',
|
|
'" aria-valuemin="{minValue}" aria-valuemax="{maxValue}" aria-valuenow="{value}" aria-valuetext="{value}">',
|
|
'<div id="{cmpId}-endEl" class="' + Ext.baseCSSPrefix + 'slider-end" role="presentation">',
|
|
'<div id="{cmpId}-innerEl" class="' + Ext.baseCSSPrefix + 'slider-inner" role="presentation">',
|
|
'{%this.renderThumbs(out, values)%}',
|
|
'</div>',
|
|
'</div>',
|
|
'</div>',
|
|
{
|
|
renderThumbs: function(out, values) {
|
|
var me = values.$comp,
|
|
i = 0,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
thumb,
|
|
thumbConfig;
|
|
|
|
for (; i < len; i++) {
|
|
thumb = thumbs[i];
|
|
thumbConfig = thumb.getElConfig();
|
|
thumbConfig.id = me.id + '-thumb-' + i;
|
|
Ext.DomHelper.generateMarkup(thumbConfig, out);
|
|
}
|
|
},
|
|
disableFormats: true
|
|
}
|
|
],
|
|
|
|
horizontalProp: 'left',
|
|
|
|
/**
|
|
* @cfg {Number} value
|
|
* A value with which to initialize the slider. Setting this will only result in the creation
|
|
* of a single slider thumb; if you want multiple thumbs then use the {@link #values} config instead.
|
|
*
|
|
* Defaults to #minValue.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number[]} values
|
|
* Array of Number values with which to initalize the slider. A separate slider thumb will be created for each value
|
|
* in this array. This will take precedence over the single {@link #value} config.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} vertical
|
|
* Orient the Slider vertically rather than horizontally.
|
|
*/
|
|
vertical: false,
|
|
|
|
/**
|
|
* @cfg {Number} minValue
|
|
* The minimum value for the Slider.
|
|
*/
|
|
minValue: 0,
|
|
|
|
/**
|
|
* @cfg {Number} maxValue
|
|
* The maximum value for the Slider.
|
|
*/
|
|
maxValue: 100,
|
|
|
|
/**
|
|
* @cfg {Number/Boolean} decimalPrecision The number of decimal places to which to round the Slider's value.
|
|
*
|
|
* To disable rounding, configure as **false**.
|
|
*/
|
|
decimalPrecision: 0,
|
|
|
|
/**
|
|
* @cfg {Number} keyIncrement
|
|
* How many units to change the Slider when adjusting with keyboard navigation. If the increment
|
|
* config is larger, it will be used instead.
|
|
*/
|
|
keyIncrement: 1,
|
|
|
|
/**
|
|
* @cfg {Number} increment
|
|
* How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
|
|
*/
|
|
increment: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} [zeroBasedSnapping=false]
|
|
* Set to `true` to calculate snap points based on {@link #increment}s from zero as opposed to
|
|
* from this Slider's {@link #minValue}.
|
|
*
|
|
* By Default, valid snap points are calculated starting {@link #increment}s from the {@link #minValue}
|
|
*/
|
|
|
|
/**
|
|
* @private
|
|
* @property {Number[]} clickRange
|
|
* Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],
|
|
* the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'
|
|
* value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range
|
|
*/
|
|
clickRange: [5,15],
|
|
|
|
/**
|
|
* @cfg {Boolean} clickToChange
|
|
* Determines whether or not clicking on the Slider axis will change the slider.
|
|
*/
|
|
clickToChange : true,
|
|
|
|
/**
|
|
* @cfg {Boolean} animate
|
|
* Turn on or off animation.
|
|
*/
|
|
animate: true,
|
|
|
|
/**
|
|
* @property {Boolean} dragging
|
|
* True while the thumb is in a drag operation
|
|
*/
|
|
dragging: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} constrainThumbs
|
|
* True to disallow thumbs from overlapping one another.
|
|
*/
|
|
constrainThumbs: true,
|
|
|
|
componentLayout: 'sliderfield',
|
|
|
|
/**
|
|
* @cfg {Object/Boolean} useTips
|
|
* True to use an {@link Ext.slider.Tip} to display tips for the value. This option may also
|
|
* provide a configuration object for an {@link Ext.slider.Tip}.
|
|
*/
|
|
useTips : true,
|
|
|
|
/**
|
|
* @cfg {Function} [tipText=undefined]
|
|
* A function used to display custom text for the slider tip.
|
|
*
|
|
* Defaults to null, which will use the default on the plugin.
|
|
*
|
|
* @cfg {Ext.slider.Thumb} tipText.thumb The Thumb that the Tip is attached to
|
|
* @cfg {String} tipText.return The text to display in the tip
|
|
*/
|
|
tipText : null,
|
|
|
|
ariaRole: 'slider',
|
|
|
|
// private override
|
|
initValue: function() {
|
|
var me = this,
|
|
extValue = Ext.value,
|
|
// Fallback for initial values: values config -> value config -> minValue config -> 0
|
|
values = extValue(me.values, [extValue(me.value, extValue(me.minValue, 0))]),
|
|
i = 0,
|
|
len = values.length;
|
|
|
|
// Store for use in dirty check
|
|
me.originalValue = values;
|
|
|
|
// Add a thumb for each value
|
|
for (; i < len; i++) {
|
|
me.addThumb(values[i]);
|
|
}
|
|
},
|
|
|
|
// private override
|
|
initComponent : function() {
|
|
var me = this,
|
|
tipPlug,
|
|
hasTip,
|
|
p, pLen, plugins;
|
|
|
|
/**
|
|
* @property {Array} thumbs
|
|
* Array containing references to each thumb
|
|
*/
|
|
me.thumbs = [];
|
|
|
|
me.keyIncrement = Math.max(me.increment, me.keyIncrement);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event beforechange
|
|
* Fires before the slider value is changed. By returning false from an event handler, you can cancel the
|
|
* event and prevent the slider from changing.
|
|
* @param {Ext.slider.Multi} slider The slider
|
|
* @param {Number} newValue The new value which the slider is being changed to.
|
|
* @param {Number} oldValue The old value which the slider was previously.
|
|
*/
|
|
'beforechange',
|
|
|
|
/**
|
|
* @event change
|
|
* Fires when the slider value is changed.
|
|
* @param {Ext.slider.Multi} slider The slider
|
|
* @param {Number} newValue The new value which the slider has been changed to.
|
|
* @param {Ext.slider.Thumb} thumb The thumb that was changed
|
|
*/
|
|
'change',
|
|
|
|
/**
|
|
* @event changecomplete
|
|
* Fires when the slider value is changed by the user and any drag operations have completed.
|
|
* @param {Ext.slider.Multi} slider The slider
|
|
* @param {Number} newValue The new value which the slider has been changed to.
|
|
* @param {Ext.slider.Thumb} thumb The thumb that was changed
|
|
*/
|
|
'changecomplete',
|
|
|
|
/**
|
|
* @event dragstart
|
|
* Fires after a drag operation has started.
|
|
* @param {Ext.slider.Multi} slider The slider
|
|
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
|
|
*/
|
|
'dragstart',
|
|
|
|
/**
|
|
* @event drag
|
|
* Fires continuously during the drag operation while the mouse is moving.
|
|
* @param {Ext.slider.Multi} slider The slider
|
|
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
|
|
*/
|
|
'drag',
|
|
|
|
/**
|
|
* @event dragend
|
|
* Fires after the drag operation has completed.
|
|
* @param {Ext.slider.Multi} slider The slider
|
|
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
|
|
*/
|
|
'dragend'
|
|
);
|
|
|
|
me.callParent();
|
|
|
|
// only can use it if it exists.
|
|
if (me.useTips) {
|
|
if (Ext.isObject(me.useTips)) {
|
|
tipPlug = Ext.apply({}, me.useTips);
|
|
} else {
|
|
tipPlug = me.tipText ? {getText: me.tipText} : {};
|
|
}
|
|
|
|
plugins = me.plugins = me.plugins || [];
|
|
pLen = plugins.length;
|
|
|
|
for (p = 0; p < pLen; p++) {
|
|
if (plugins[p].isSliderTip) {
|
|
hasTip = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!hasTip) {
|
|
me.plugins.push(new Ext.slider.Tip(tipPlug));
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates a new thumb and adds it to the slider
|
|
* @param {Number} [value=0] The initial value to set on the thumb.
|
|
* @return {Ext.slider.Thumb} The thumb
|
|
*/
|
|
addThumb: function(value) {
|
|
var me = this,
|
|
thumb = new Ext.slider.Thumb({
|
|
ownerCt : me,
|
|
ownerLayout : me.getComponentLayout(),
|
|
value : value,
|
|
slider : me,
|
|
index : me.thumbs.length,
|
|
constrain : me.constrainThumbs,
|
|
disabled : !!me.readOnly
|
|
});
|
|
|
|
me.thumbs.push(thumb);
|
|
|
|
//render the thumb now if needed
|
|
if (me.rendered) {
|
|
thumb.render();
|
|
}
|
|
|
|
return thumb;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Moves the given thumb above all other by increasing its z-index. This is called when as drag
|
|
* any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
|
|
* required when the thumbs are stacked on top of each other at one of the ends of the slider's
|
|
* range, which can result in the user not being able to move any of them.
|
|
* @param {Ext.slider.Thumb} topThumb The thumb to move to the top
|
|
*/
|
|
promoteThumb: function(topThumb) {
|
|
var thumbs = this.thumbs,
|
|
ln = thumbs.length,
|
|
zIndex, thumb, i;
|
|
|
|
for (i = 0; i < ln; i++) {
|
|
thumb = thumbs[i];
|
|
|
|
if (thumb == topThumb) {
|
|
thumb.bringToFront();
|
|
} else {
|
|
thumb.sendToBack();
|
|
}
|
|
}
|
|
},
|
|
|
|
// private override
|
|
getSubTplData : function() {
|
|
var me = this;
|
|
|
|
return Ext.apply(me.callParent(), {
|
|
$comp: me,
|
|
vertical: me.vertical ? Ext.baseCSSPrefix + 'slider-vert' : Ext.baseCSSPrefix + 'slider-horz',
|
|
minValue: me.minValue,
|
|
maxValue: me.maxValue,
|
|
value: me.value,
|
|
childElCls: ''
|
|
});
|
|
},
|
|
|
|
onRender : function() {
|
|
var me = this,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
i = 0,
|
|
thumb;
|
|
|
|
me.callParent(arguments);
|
|
|
|
for (i = 0; i < len; i++) {
|
|
thumb = thumbs[i];
|
|
thumb.el = me.el.getById(me.id + '-thumb-' + i);
|
|
thumb.onRender();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
|
|
*/
|
|
initEvents : function() {
|
|
var me = this;
|
|
me.mon(me.el, {
|
|
scope : me,
|
|
mousedown: me.onMouseDown,
|
|
keydown : me.onKeyDown
|
|
});
|
|
},
|
|
|
|
onDragStart: Ext.emptyFn,
|
|
onDragEnd: Ext.emptyFn,
|
|
|
|
/**
|
|
* @private
|
|
* Given an `[x, y]` position within the slider's track (Points outside the slider's track are coerced to either the minimum or maximum value),
|
|
* calculate how many pixels **from the slider origin** (left for horizontal Sliders and bottom for vertical Sliders) that point is.
|
|
*
|
|
* If the point is outside the range of the Slider's track, the return value is `undefined`
|
|
* @param {Number[]} xy The point to calculate the track point for
|
|
*/
|
|
getTrackpoint : function(xy) {
|
|
var me = this,
|
|
vertical = me.vertical,
|
|
sliderTrack = me.innerEl,
|
|
trackLength, result,
|
|
positionProperty;
|
|
|
|
if (vertical) {
|
|
positionProperty = 'top';
|
|
trackLength = sliderTrack.getHeight();
|
|
} else {
|
|
positionProperty = me.horizontalProp;
|
|
trackLength = sliderTrack.getWidth();
|
|
}
|
|
xy = me.transformTrackPoints(sliderTrack.translatePoints(xy));
|
|
result = Ext.Number.constrain(xy[positionProperty], 0, trackLength);
|
|
return vertical ? trackLength - result : result;
|
|
},
|
|
|
|
transformTrackPoints: Ext.identityFn,
|
|
|
|
/**
|
|
* @private
|
|
* Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
|
|
* this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
|
|
* @param {Ext.EventObject} e The click event
|
|
*/
|
|
onMouseDown : function(e) {
|
|
var me = this,
|
|
thumbClicked = false,
|
|
i = 0,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
trackPoint;
|
|
|
|
if (me.disabled) {
|
|
return;
|
|
}
|
|
|
|
//see if the click was on any of the thumbs
|
|
for (; i < len; i++) {
|
|
thumbClicked = thumbClicked || e.target == thumbs[i].el.dom;
|
|
}
|
|
|
|
if (me.clickToChange && !thumbClicked) {
|
|
trackPoint = me.getTrackpoint(e.getXY());
|
|
if (trackPoint !== undefined) {
|
|
me.onClickChange(trackPoint);
|
|
}
|
|
}
|
|
me.focus();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Moves the thumb to the indicated position.
|
|
* Only changes the value if the click was within this.clickRange.
|
|
* @param {Number} trackPoint local pixel offset **from the origin** (left for horizontal and bottom for vertical) along the Slider's axis at which the click event occured.
|
|
*/
|
|
onClickChange : function(trackPoint) {
|
|
var me = this,
|
|
thumb, index;
|
|
|
|
// How far along the track *from the origin* was the click.
|
|
// If vertical, the origin is the bottom of the slider track.
|
|
|
|
//find the nearest thumb to the click event
|
|
thumb = me.getNearest(trackPoint);
|
|
if (!thumb.disabled) {
|
|
index = thumb.index;
|
|
me.setValue(index, Ext.util.Format.round(me.reversePixelValue(trackPoint), me.decimalPrecision), undefined, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the nearest thumb to a click event, along with its distance
|
|
* @param {Number} trackPoint local pixel position along the Slider's axis to find the Thumb for
|
|
* @return {Object} The closest thumb object and its distance from the click event
|
|
*/
|
|
getNearest: function(trackPoint) {
|
|
var me = this,
|
|
clickValue = me.reversePixelValue(trackPoint),
|
|
nearestDistance = me.getRange() + 5, //add a small fudge for the end of the slider
|
|
nearest = null,
|
|
thumbs = me.thumbs,
|
|
i = 0,
|
|
len = thumbs.length,
|
|
thumb,
|
|
value,
|
|
dist;
|
|
|
|
for (; i < len; i++) {
|
|
thumb = me.thumbs[i];
|
|
value = thumb.value;
|
|
dist = Math.abs(value - clickValue);
|
|
|
|
if (Math.abs(dist <= nearestDistance)) {
|
|
nearest = thumb;
|
|
nearestDistance = dist;
|
|
}
|
|
}
|
|
return nearest;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
|
|
* by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
|
|
* @param {Ext.EventObject} e The Event object
|
|
*/
|
|
onKeyDown : function(e) {
|
|
/*
|
|
* The behaviour for keyboard handling with multiple thumbs is currently undefined.
|
|
* There's no real sane default for it, so leave it like this until we come up
|
|
* with a better way of doing it.
|
|
*/
|
|
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:
|
|
e.stopEvent();
|
|
val = e.ctrlKey ? me.maxValue : me.getValue(0) + me.keyIncrement;
|
|
me.setValue(0, val, undefined, true);
|
|
break;
|
|
case e.DOWN:
|
|
case e.LEFT:
|
|
e.stopEvent();
|
|
val = e.ctrlKey ? me.minValue : me.getValue(0) - me.keyIncrement;
|
|
me.setValue(0, val, undefined, true);
|
|
break;
|
|
default:
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns a snapped, constrained value when given a desired value
|
|
* @param {Number} value Raw number value
|
|
* @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
|
|
*/
|
|
normalizeValue : function(v) {
|
|
var me = this,
|
|
snapFn = me.zeroBasedSnapping ? 'snap' : 'snapInRange';
|
|
|
|
v = Ext.Number[snapFn](v, me.increment, me.minValue, me.maxValue);
|
|
v = Ext.util.Format.round(v, me.decimalPrecision);
|
|
v = Ext.Number.constrain(v, me.minValue, me.maxValue);
|
|
return v;
|
|
},
|
|
|
|
/**
|
|
* Sets the minimum value for the slider instance. If the current value is less than the minimum value, the current
|
|
* value will be changed.
|
|
* @param {Number} val The new minimum value
|
|
*/
|
|
setMinValue : function(val) {
|
|
var me = this,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
thumb, i;
|
|
|
|
me.minValue = val;
|
|
if (me.rendered) {
|
|
me.inputEl.dom.setAttribute('aria-valuemin', val);
|
|
}
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
thumb = thumbs[i];
|
|
if (thumb.value < val) {
|
|
me.setValue(i, val, false);
|
|
}
|
|
}
|
|
me.syncThumbs();
|
|
},
|
|
|
|
/**
|
|
* Sets the maximum value for the slider instance. If the current value is more than the maximum value, the current
|
|
* value will be changed.
|
|
* @param {Number} val The new maximum value
|
|
*/
|
|
setMaxValue : function(val) {
|
|
var me = this,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
thumb, i;
|
|
|
|
me.maxValue = val;
|
|
if (me.rendered) {
|
|
me.inputEl.dom.setAttribute('aria-valuemax', val);
|
|
}
|
|
|
|
for (i = 0; i < len; ++i) {
|
|
thumb = thumbs[i];
|
|
if (thumb.value > val) {
|
|
me.setValue(i, val, false);
|
|
}
|
|
}
|
|
me.syncThumbs();
|
|
},
|
|
|
|
/**
|
|
* Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and
|
|
* maxValue.
|
|
*
|
|
* Setting a single value:
|
|
* // Set the second slider value, don't animate
|
|
* mySlider.setValue(1, 50, false);
|
|
*
|
|
* Setting multiple values at once
|
|
* // Set 3 thumb values, animate
|
|
* mySlider.setValue([20, 40, 60], true);
|
|
*
|
|
* @param {Number/Number[]} index Index of the thumb to move. Alternatively, it can be an array of values to set
|
|
* for each thumb in the slider.
|
|
* @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
|
|
* @param {Boolean} [animate=true] Turn on or off animation
|
|
* @return {Ext.slider.Multi} this
|
|
*/
|
|
setValue : function(index, value, animate, changeComplete) {
|
|
var me = this,
|
|
thumbs = me.thumbs,
|
|
thumb, len, i, values;
|
|
|
|
if (Ext.isArray(index)) {
|
|
values = index;
|
|
animate = value;
|
|
|
|
for (i = 0, len = values.length; i < len; ++i) {
|
|
thumb = thumbs[i];
|
|
if (thumb) {
|
|
me.setValue(i, values[i], animate);
|
|
}
|
|
}
|
|
return me;
|
|
}
|
|
|
|
thumb = me.thumbs[index];
|
|
// ensures value is contstrained and snapped
|
|
value = me.normalizeValue(value);
|
|
|
|
if (value !== thumb.value && me.fireEvent('beforechange', me, value, thumb.value, thumb) !== false) {
|
|
thumb.value = value;
|
|
if (me.rendered) {
|
|
// TODO this only handles a single value; need a solution for exposing multiple values to aria.
|
|
// Perhaps this should go on each thumb element rather than the outer element.
|
|
me.inputEl.set({
|
|
'aria-valuenow': value,
|
|
'aria-valuetext': value
|
|
});
|
|
|
|
thumb.move(me.calculateThumbPosition(value), Ext.isDefined(animate) ? animate !== false : me.animate);
|
|
|
|
me.fireEvent('change', me, value, thumb);
|
|
me.checkDirty();
|
|
if (changeComplete) {
|
|
me.fireEvent('changecomplete', me, value, thumb);
|
|
}
|
|
}
|
|
}
|
|
return me;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Given a value within this Slider's range, calculates a Thumb's percentage CSS position to map that value.
|
|
*/
|
|
calculateThumbPosition : function(v) {
|
|
var me = this,
|
|
minValue = me.minValue,
|
|
pos = (v - minValue) / me.getRange() * 100;
|
|
|
|
// If the total number of records is <= pageSize then return minValue.
|
|
if (isNaN(pos)) {
|
|
pos = minValue;
|
|
}
|
|
|
|
return pos;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
|
|
* the ratio is 2
|
|
* @return {Number} The ratio of pixels to mapped values
|
|
*/
|
|
getRatio : function() {
|
|
var me = this,
|
|
innerEl = me.innerEl,
|
|
trackLength = me.vertical ? innerEl.getHeight() : innerEl.getWidth(),
|
|
valueRange = me.getRange();
|
|
|
|
return valueRange === 0 ? trackLength : (trackLength / valueRange);
|
|
},
|
|
|
|
getRange: function(){
|
|
return this.maxValue - this.minValue;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Given a pixel location along the slider, returns the mapped slider value for that pixel.
|
|
* E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePixelValue(50)
|
|
* returns 200
|
|
* @param {Number} pos The position along the slider to return a mapped value for
|
|
* @return {Number} The mapped value for the given position
|
|
*/
|
|
reversePixelValue : function(pos) {
|
|
return this.minValue + (pos / this.getRatio());
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Given a Thumb's percentage position along the slider, returns the mapped slider value for that pixel.
|
|
* E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reversePercentageValue(25)
|
|
* returns 200
|
|
* @param {Number} pos The percentage along the slider track to return a mapped value for
|
|
* @return {Number} The mapped value for the given position
|
|
*/
|
|
reversePercentageValue : function(pos) {
|
|
return this.minValue + this.getRange() * (pos / 100);
|
|
},
|
|
|
|
//private
|
|
onDisable: function() {
|
|
var me = this,
|
|
i = 0,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
thumb,
|
|
el,
|
|
xy;
|
|
|
|
me.callParent();
|
|
|
|
for (; i < len; i++) {
|
|
thumb = thumbs[i];
|
|
el = thumb.el;
|
|
|
|
thumb.disable();
|
|
|
|
if(Ext.isIE) {
|
|
//IE breaks when using overflow visible and opacity other than 1.
|
|
//Create a place holder for the thumb and display it.
|
|
xy = el.getXY();
|
|
el.hide();
|
|
|
|
me.innerEl.addCls(me.disabledCls).dom.disabled = true;
|
|
|
|
if (!me.thumbHolder) {
|
|
me.thumbHolder = me.endEl.createChild({cls: Ext.baseCSSPrefix + 'slider-thumb ' + me.disabledCls});
|
|
}
|
|
|
|
me.thumbHolder.show().setXY(xy);
|
|
}
|
|
}
|
|
},
|
|
|
|
//private
|
|
onEnable: function() {
|
|
var me = this,
|
|
i = 0,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
thumb,
|
|
el;
|
|
|
|
this.callParent();
|
|
|
|
for (; i < len; i++) {
|
|
thumb = thumbs[i];
|
|
el = thumb.el;
|
|
|
|
thumb.enable();
|
|
|
|
if (Ext.isIE) {
|
|
me.innerEl.removeCls(me.disabledCls).dom.disabled = false;
|
|
|
|
if (me.thumbHolder) {
|
|
me.thumbHolder.hide();
|
|
}
|
|
|
|
el.show();
|
|
me.syncThumbs();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Synchronizes thumbs position to the proper proportion of the total component width based on the current slider
|
|
* {@link #value}. This will be called automatically when the Slider is resized by a layout, but if it is rendered
|
|
* auto width, this method can be called from another resize handler to sync the Slider if necessary.
|
|
*/
|
|
syncThumbs : function() {
|
|
if (this.rendered) {
|
|
var thumbs = this.thumbs,
|
|
length = thumbs.length,
|
|
i = 0;
|
|
|
|
for (; i < length; i++) {
|
|
thumbs[i].move(this.calculateThumbPosition(thumbs[i].value));
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the current value of the slider
|
|
* @param {Number} index The index of the thumb to return a value for
|
|
* @return {Number/Number[]} The current value of the slider at the given index, or an array of all thumb values if
|
|
* no index is given.
|
|
*/
|
|
getValue : function(index) {
|
|
return Ext.isNumber(index) ? this.thumbs[index].value : this.getValues();
|
|
},
|
|
|
|
/**
|
|
* Returns an array of values - one for the location of each thumb
|
|
* @return {Number[]} The set of thumb values
|
|
*/
|
|
getValues: function() {
|
|
var values = [],
|
|
i = 0,
|
|
thumbs = this.thumbs,
|
|
len = thumbs.length;
|
|
|
|
for (; i < len; i++) {
|
|
values.push(thumbs[i].value);
|
|
}
|
|
|
|
return values;
|
|
},
|
|
|
|
getSubmitValue: function() {
|
|
var me = this;
|
|
return (me.disabled || !me.submitValue) ? null : me.getValue();
|
|
},
|
|
|
|
reset: function() {
|
|
var me = this,
|
|
arr = [].concat(me.originalValue),
|
|
a = 0,
|
|
aLen = arr.length,
|
|
val;
|
|
|
|
for (; a < aLen; a++) {
|
|
val = arr[a];
|
|
|
|
me.setValue(a, val);
|
|
}
|
|
|
|
me.clearInvalid();
|
|
// delete here so we reset back to the original state
|
|
delete me.wasValid;
|
|
},
|
|
|
|
setReadOnly: function(readOnly){
|
|
var me = this,
|
|
thumbs = me.thumbs,
|
|
len = thumbs.length,
|
|
i = 0;
|
|
|
|
me.callParent(arguments);
|
|
readOnly = me.readOnly;
|
|
|
|
for (; i < len; ++i) {
|
|
if (readOnly) {
|
|
thumbs[i].disable();
|
|
} else {
|
|
thumbs[i].enable();
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// private
|
|
beforeDestroy : function() {
|
|
var me = this,
|
|
thumbs = me.thumbs,
|
|
t = 0,
|
|
tLen = thumbs.length,
|
|
thumb;
|
|
|
|
Ext.destroy(me.innerEl, me.endEl, me.focusEl);
|
|
|
|
for (; t < tLen; t++) {
|
|
thumb = thumbs[t];
|
|
|
|
Ext.destroy(thumb);
|
|
}
|
|
|
|
me.callParent();
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.slider.Multi', {
|
|
override: 'Ext.slider.Multi',
|
|
|
|
initComponent: function(){
|
|
if (this.getHierarchyState().rtl) {
|
|
this.horizontalProp = 'right';
|
|
}
|
|
this.callParent();
|
|
},
|
|
|
|
onDragStart: function(){
|
|
this.callParent(arguments);
|
|
// Cache the width so we don't recalculate it during the drag
|
|
this._rtlInnerWidth = this.innerEl.getWidth();
|
|
},
|
|
|
|
onDragEnd: function(){
|
|
this.callParent(arguments);
|
|
delete this._rtlInnerWidth;
|
|
},
|
|
|
|
transformTrackPoints: function(pos){
|
|
var left, innerWidth;
|
|
|
|
if (this.isOppositeRootDirection()) {
|
|
left = pos.left;
|
|
delete pos.left;
|
|
|
|
innerWidth = typeof this._rtlInnerWidth !== 'undefined' ? this._rtlInnerWidth : this.innerEl.getWidth();
|
|
pos.right = innerWidth - left;
|
|
|
|
return pos;
|
|
} else {
|
|
return this.callParent(arguments);
|
|
}
|
|
},
|
|
|
|
getSubTplData : function() {
|
|
var me = this,
|
|
data = me.callParent(),
|
|
rtlCls = me._rtlCls;
|
|
|
|
if (rtlCls && me.getHierarchyState().rtl) {
|
|
data.childElCls = ' ' + rtlCls;
|
|
}
|
|
|
|
return data;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
*
|
|
* 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}
|
|
*/
|
|
Ext.define('Ext.tab.Tab', {
|
|
extend: Ext.button.Button ,
|
|
alias: 'widget.tab',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isTab
|
|
* `true` in this class to identify an object as an instantiated Tab, or subclass thereof.
|
|
*/
|
|
isTab: true,
|
|
|
|
baseCls: Ext.baseCSSPrefix + 'tab',
|
|
closeElOverCls: Ext.baseCSSPrefix + 'tab-close-btn-over',
|
|
|
|
/**
|
|
* @cfg {String} activeCls
|
|
* The CSS class to be applied to a Tab when it is active.
|
|
* Providing your own CSS for this class enables you to customize the active state.
|
|
*/
|
|
activeCls: 'active',
|
|
|
|
/**
|
|
* @cfg {String} [disabledCls='x-tab-disabled']
|
|
* The CSS class to be applied to a Tab when it is disabled.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} closableCls
|
|
* The CSS class which is added to the tab when it is closable
|
|
*/
|
|
closableCls: 'closable',
|
|
|
|
/**
|
|
* @cfg {Boolean} closable
|
|
* True to make the Tab start closable (the close icon will be visible).
|
|
*/
|
|
closable: true,
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg {String} closeText
|
|
* The accessible text label for the close button link; only used when {@link #cfg-closable} = true.
|
|
*/
|
|
closeText: 'Close Tab',
|
|
//</locale>
|
|
|
|
/**
|
|
* @property {Boolean} active
|
|
* Indicates that this tab is currently active. This is NOT a public configuration.
|
|
* @readonly
|
|
*/
|
|
active: false,
|
|
|
|
/**
|
|
* @property {Boolean} closable
|
|
* True if the tab is currently closable
|
|
*/
|
|
|
|
childEls: [
|
|
'closeEl'
|
|
],
|
|
|
|
scale: false,
|
|
|
|
position: 'top',
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event activate
|
|
* Fired when the tab is activated.
|
|
* @param {Ext.tab.Tab} this
|
|
*/
|
|
'activate',
|
|
|
|
/**
|
|
* @event deactivate
|
|
* Fired when the tab is deactivated.
|
|
* @param {Ext.tab.Tab} this
|
|
*/
|
|
'deactivate',
|
|
|
|
/**
|
|
* @event beforeclose
|
|
* Fires if the user clicks on the Tab's close button, but before the {@link #close} event is fired. Return
|
|
* false from any listener to stop the close event being fired
|
|
* @param {Ext.tab.Tab} tab The Tab object
|
|
*/
|
|
'beforeclose',
|
|
|
|
/**
|
|
* @event close
|
|
* Fires to indicate that the tab is to be closed, usually because the user has clicked the close button.
|
|
* @param {Ext.tab.Tab} tab The Tab object
|
|
*/
|
|
'close'
|
|
);
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.card) {
|
|
me.setCard(me.card);
|
|
}
|
|
|
|
me.overCls = ['over', me.position + '-over'];
|
|
},
|
|
|
|
getTemplateArgs: function() {
|
|
var me = this,
|
|
result = me.callParent();
|
|
|
|
result.closable = me.closable;
|
|
result.closeText = me.closeText;
|
|
|
|
return result;
|
|
},
|
|
|
|
getFramingInfoCls: function(){
|
|
return this.baseCls + '-' + this.ui + '-' + this.position;
|
|
},
|
|
|
|
beforeRender: function() {
|
|
var me = this,
|
|
tabBar = me.up('tabbar'),
|
|
tabPanel = me.up('tabpanel');
|
|
|
|
me.callParent();
|
|
|
|
me.addClsWithUI(me.position);
|
|
|
|
if (me.active) {
|
|
me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
|
|
}
|
|
|
|
// Set all the state classNames, as they need to include the UI
|
|
// me.disabledCls = me.getClsWithUIs('disabled');
|
|
|
|
me.syncClosableUI();
|
|
|
|
// Propagate minTabWidth and maxTabWidth settings from the owning TabBar then TabPanel
|
|
if (!me.minWidth) {
|
|
me.minWidth = (tabBar) ? tabBar.minTabWidth : me.minWidth;
|
|
if (!me.minWidth && tabPanel) {
|
|
me.minWidth = tabPanel.minTabWidth;
|
|
}
|
|
if (me.minWidth && me.iconCls) {
|
|
me.minWidth += 25;
|
|
}
|
|
}
|
|
if (!me.maxWidth) {
|
|
me.maxWidth = (tabBar) ? tabBar.maxTabWidth : me.maxWidth;
|
|
if (!me.maxWidth && tabPanel) {
|
|
me.maxWidth = tabPanel.maxTabWidth;
|
|
}
|
|
}
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this;
|
|
|
|
me.setElOrientation();
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (me.closable) {
|
|
me.closeEl.addClsOnOver(me.closeElOverCls);
|
|
}
|
|
|
|
me.keyNav = new Ext.util.KeyNav(me.el, {
|
|
enter: me.onEnterKey,
|
|
del: me.onDeleteKey,
|
|
scope: me
|
|
});
|
|
},
|
|
|
|
setElOrientation: function() {
|
|
var position = this.position;
|
|
|
|
if (position === 'left' || position === 'right') {
|
|
this.el.setVertical(position === 'right' ? 90 : 270);
|
|
}
|
|
},
|
|
|
|
// inherit docs
|
|
enable : function(silent) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.removeClsWithUI(me.position + '-disabled');
|
|
|
|
return me;
|
|
},
|
|
|
|
// inherit docs
|
|
disable : function(silent) {
|
|
var me = this;
|
|
|
|
me.callParent(arguments);
|
|
|
|
me.addClsWithUI(me.position + '-disabled');
|
|
|
|
return me;
|
|
},
|
|
|
|
onDestroy: function() {
|
|
var me = this;
|
|
|
|
Ext.destroy(me.keyNav);
|
|
delete me.keyNav;
|
|
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
/**
|
|
* Sets the tab as either closable or not.
|
|
* @param {Boolean} closable Pass false to make the tab not closable. Otherwise the tab will be made closable (eg a
|
|
* close button will appear on the tab)
|
|
*/
|
|
setClosable: function(closable) {
|
|
var me = this;
|
|
|
|
// Closable must be true if no args
|
|
closable = (!arguments.length || !!closable);
|
|
|
|
if (me.closable != closable) {
|
|
me.closable = closable;
|
|
|
|
// set property on the user-facing item ('card'):
|
|
if (me.card) {
|
|
me.card.closable = closable;
|
|
}
|
|
|
|
me.syncClosableUI();
|
|
|
|
if (me.rendered) {
|
|
me.syncClosableElements();
|
|
|
|
// Tab will change width to accommodate close icon
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This method ensures that the closeBtn element exists or not based on 'closable'.
|
|
* @private
|
|
*/
|
|
syncClosableElements: function () {
|
|
var me = this,
|
|
closeEl = me.closeEl;
|
|
|
|
if (me.closable) {
|
|
if (!closeEl) {
|
|
closeEl = me.closeEl = me.btnWrap.insertSibling({
|
|
tag: 'a',
|
|
cls: me.baseCls + '-close-btn',
|
|
href: '#',
|
|
title: me.closeText
|
|
}, 'after');
|
|
}
|
|
closeEl.addClsOnOver(me.closeElOverCls);
|
|
} else if (closeEl) {
|
|
closeEl.remove();
|
|
delete me.closeEl;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* This method ensures that the UI classes are added or removed based on 'closable'.
|
|
* @private
|
|
*/
|
|
syncClosableUI: function () {
|
|
var me = this,
|
|
classes = [me.closableCls, me.closableCls + '-' + me.position];
|
|
|
|
if (me.closable) {
|
|
me.addClsWithUI(classes);
|
|
} else {
|
|
me.removeClsWithUI(classes);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets this tab's attached card. Usually this is handled automatically by the {@link Ext.tab.Panel} that this Tab
|
|
* belongs to and would not need to be done by the developer
|
|
* @param {Ext.Component} card The card to set
|
|
*/
|
|
setCard: function(card) {
|
|
var me = this;
|
|
|
|
me.card = card;
|
|
me.setText(me.title || card.title);
|
|
me.setIconCls(me.iconCls || card.iconCls);
|
|
me.setIcon(me.icon || card.icon);
|
|
me.setGlyph(me.glyph || card.glyph);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Listener attached to click events on the Tab's close button
|
|
*/
|
|
onCloseClick: function() {
|
|
var me = this;
|
|
|
|
if (me.fireEvent('beforeclose', me) !== false) {
|
|
if (me.tabBar) {
|
|
if (me.tabBar.closeTab(me) === false) {
|
|
// beforeclose on the panel vetoed the event, stop here
|
|
return;
|
|
}
|
|
} else {
|
|
// if there's no tabbar, fire the close event
|
|
me.fireClose();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Fires the close event on the tab.
|
|
* @private
|
|
*/
|
|
fireClose: function(){
|
|
this.fireEvent('close', this);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onEnterKey: function(e) {
|
|
var me = this;
|
|
|
|
if (me.tabBar) {
|
|
me.tabBar.onClick(e, me.el);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onDeleteKey: function(e) {
|
|
if (this.closable) {
|
|
this.onCloseClick();
|
|
}
|
|
},
|
|
|
|
// @private
|
|
activate : function(supressEvent) {
|
|
var me = this;
|
|
|
|
me.active = true;
|
|
me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
|
|
|
|
if (supressEvent !== true) {
|
|
me.fireEvent('activate', me);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
deactivate : function(supressEvent) {
|
|
var me = this;
|
|
|
|
me.active = false;
|
|
me.removeClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
|
|
|
|
if (supressEvent !== true) {
|
|
me.fireEvent('deactivate', me);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Represents a 2D point with x and y properties, useful for comparison and instantiation
|
|
* from an event:
|
|
*
|
|
* var point = Ext.util.Point.fromEvent(e);
|
|
*
|
|
*/
|
|
Ext.define('Ext.util.Point', {
|
|
|
|
/* Begin Definitions */
|
|
extend: Ext.util.Region ,
|
|
|
|
statics: {
|
|
|
|
/**
|
|
* Returns a new instance of Ext.util.Point base on the pageX / pageY values of the given event
|
|
* @static
|
|
* @param {Ext.EventObject/Event} e The event
|
|
* @return {Ext.util.Point}
|
|
*/
|
|
fromEvent: function(e) {
|
|
e = e.browserEvent || e;
|
|
e = (e.changedTouches && e.changedTouches.length > 0) ? e.changedTouches[0] : e;
|
|
return new this(e.pageX, e.pageY);
|
|
}
|
|
},
|
|
|
|
/* End Definitions */
|
|
|
|
/**
|
|
* Creates a point from two coordinates.
|
|
* @param {Number} x X coordinate.
|
|
* @param {Number} y Y coordinate.
|
|
*/
|
|
constructor: function(x, y) {
|
|
this.callParent([y, x, y, x]);
|
|
},
|
|
|
|
/**
|
|
* Returns a human-eye-friendly string that represents this point,
|
|
* useful for debugging
|
|
* @return {String}
|
|
*/
|
|
toString: function() {
|
|
return "Point[" + this.x + "," + this.y + "]";
|
|
},
|
|
|
|
/**
|
|
* Compare this point and another point
|
|
* @param {Ext.util.Point/Object} p The point to compare with, either an instance
|
|
* of Ext.util.Point or an object with left and top properties
|
|
* @return {Boolean} Returns whether they are equivalent
|
|
*/
|
|
equals: function(p) {
|
|
return (this.x == p.x && this.y == p.y);
|
|
},
|
|
|
|
/**
|
|
* Whether the given point is not away from this point within the given threshold amount.
|
|
* @param {Ext.util.Point/Object} p The point to check with, either an instance
|
|
* of Ext.util.Point or an object with left and top properties
|
|
* @param {Object/Number} threshold Can be either an object with x and y properties or a number
|
|
* @return {Boolean}
|
|
*/
|
|
isWithin: function(p, threshold) {
|
|
if (!Ext.isObject(threshold)) {
|
|
threshold = {
|
|
x: threshold,
|
|
y: threshold
|
|
};
|
|
}
|
|
|
|
return (this.x <= p.x + threshold.x && this.x >= p.x - threshold.x &&
|
|
this.y <= p.y + threshold.y && this.y >= p.y - threshold.y);
|
|
},
|
|
|
|
/**
|
|
* Determins whether this Point contained by the passed Region, Component or element.
|
|
* @param {Ext.util.Region/Ext.Component/Ext.dom.Element/HTMLElement} region
|
|
* The rectangle to check that this Point is within.
|
|
* @return {Boolean}
|
|
*/
|
|
isContainedBy: function(region) {
|
|
if (!(region instanceof Ext.util.Region)) {
|
|
region = Ext.get(region.el || region).getRegion();
|
|
}
|
|
return region.contains(this);
|
|
},
|
|
|
|
/**
|
|
* Compare this point with another point when the x and y values of both points are rounded. E.g:
|
|
* [100.3,199.8] will equals to [100, 200]
|
|
* @param {Ext.util.Point/Object} p The point to compare with, either an instance
|
|
* of Ext.util.Point or an object with x and y properties
|
|
* @return {Boolean}
|
|
*/
|
|
roundedEquals: function(p) {
|
|
return (Math.round(this.x) == Math.round(p.x) && Math.round(this.y) == Math.round(p.y));
|
|
}
|
|
}, function() {
|
|
/**
|
|
* @method
|
|
* Alias for {@link #translateBy}
|
|
* @inheritdoc Ext.util.Region#translateBy
|
|
*/
|
|
this.prototype.translate = Ext.util.Region.prototype.translateBy;
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer
|
|
* TabBar is used internally by a {@link Ext.tab.Panel TabPanel} and typically should not need to be created manually.
|
|
* The tab bar automatically removes the default title provided by {@link Ext.panel.Header}
|
|
*/
|
|
Ext.define('Ext.tab.Bar', {
|
|
extend: Ext.panel.Header ,
|
|
alias: 'widget.tabbar',
|
|
baseCls: Ext.baseCSSPrefix + 'tab-bar',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @property {Boolean} isTabBar
|
|
* `true` in this class to identify an object as an instantiated Tab Bar, or subclass thereof.
|
|
*/
|
|
isTabBar: true,
|
|
|
|
/**
|
|
* @cfg {String} title @hide
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} iconCls @hide
|
|
*/
|
|
|
|
// @private
|
|
defaultType: 'tab',
|
|
|
|
/**
|
|
* @cfg {Boolean} plain
|
|
* True to not show the full background on the tabbar
|
|
*/
|
|
plain: false,
|
|
|
|
childEls: [
|
|
'body', 'strip'
|
|
],
|
|
|
|
// @private
|
|
renderTpl: [
|
|
'<div id="{id}-body" class="{baseCls}-body {bodyCls} {bodyTargetCls}{childElCls}<tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
|
|
'{%this.renderContainer(out,values)%}',
|
|
'</div>',
|
|
'<div id="{id}-strip" class="{baseCls}-strip {baseCls}-strip-{dock}{childElCls}',
|
|
'<tpl if="ui"> {baseCls}-strip-{ui}',
|
|
'<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl>',
|
|
'</tpl>">',
|
|
'</div>'
|
|
],
|
|
|
|
/**
|
|
* @cfg {Number} minTabWidth
|
|
* The minimum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#minTabWidth minTabWidth} value.
|
|
* @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#minTabWidth minTabWidth} config on the TabPanel.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} maxTabWidth
|
|
* The maximum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#maxTabWidth maxTabWidth} value.
|
|
* @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#maxTabWidth maxTabWidth} config on the TabPanel.
|
|
*/
|
|
|
|
_reverseDockNames: {
|
|
left: 'right',
|
|
right: 'left'
|
|
},
|
|
|
|
// @private
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
if (me.plain) {
|
|
me.addCls(me.baseCls + '-plain');
|
|
}
|
|
|
|
me.addClsWithUI(me.orientation);
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event change
|
|
* Fired when the currently-active tab has changed
|
|
* @param {Ext.tab.Bar} tabBar The TabBar
|
|
* @param {Ext.tab.Tab} tab The new Tab
|
|
* @param {Ext.Component} card The card that was just shown in the TabPanel
|
|
*/
|
|
'change'
|
|
);
|
|
|
|
// Element onClick listener added by Header base class
|
|
me.callParent(arguments);
|
|
Ext.merge(me.layout, me.initialConfig.layout);
|
|
|
|
// TabBar must override the Header's align setting.
|
|
me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
|
|
me.layout.overflowHandler = new Ext.layout.container.boxOverflow.Scroller(me.layout);
|
|
|
|
me.remove(me.titleCmp);
|
|
delete me.titleCmp;
|
|
|
|
Ext.apply(me.renderData, {
|
|
bodyCls: me.bodyCls,
|
|
dock: me.dock
|
|
});
|
|
},
|
|
|
|
onRender: function() {
|
|
var me = this;
|
|
|
|
me.callParent();
|
|
|
|
if (me.orientation === 'vertical' && (Ext.isIE8 || Ext.isIE9) && Ext.isStrict) {
|
|
me.el.on({
|
|
mousemove: me.onMouseMove,
|
|
scope: me
|
|
});
|
|
}
|
|
},
|
|
|
|
afterRender: function() {
|
|
var layout = this.layout;
|
|
|
|
this.callParent();
|
|
if (Ext.isIE9 && Ext.isStrict && this.orientation === 'vertical') {
|
|
// EXTJSIV-8765: focusing a vertically-oriented tab in IE9 strict can cause
|
|
// the innerCt to scroll if the tabs have bordering.
|
|
layout.innerCt.on('scroll', function() {
|
|
layout.innerCt.dom.scrollLeft = 0;
|
|
});
|
|
}
|
|
},
|
|
|
|
afterLayout: function() {
|
|
this.adjustTabPositions();
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
adjustTabPositions: function() {
|
|
var items = this.items.items,
|
|
i = items.length,
|
|
tab;
|
|
|
|
// When tabs are rotated vertically we don't have a reliable way to position
|
|
// them using CSS in modern browsers. This is because of the way transform-orign
|
|
// works - it requires the width to be known, and the width is not known in css.
|
|
// Consequently we have to make an adjustment to the tab's position in these browsers.
|
|
// This is similar to what we do in Ext.panel.Header#adjustTitlePosition
|
|
if (!Ext.isIE9m) {
|
|
if (this.dock === 'right') {
|
|
// rotated 90 degrees around using the top left corner as the axis.
|
|
// tabs need to be shifted to the right by their width
|
|
while (i--) {
|
|
tab = items[i];
|
|
if (tab.isVisible()) {
|
|
tab.el.setStyle('left', tab.lastBox.width + 'px');
|
|
}
|
|
}
|
|
} else if (this.dock === 'left') {
|
|
// rotated 270 degrees around using the top left corner as the axis.
|
|
// tabs need to be shifted down by their height
|
|
while (i--) {
|
|
tab = items[i];
|
|
if (tab.isVisible()) {
|
|
tab.el.setStyle('left', -tab.lastBox.height + 'px');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
getLayout: function() {
|
|
var me = this;
|
|
me.layout.type = (me.orientation === 'horizontal') ? 'hbox' : 'vbox';
|
|
return me.callParent(arguments);
|
|
},
|
|
|
|
// @private
|
|
onAdd: function(tab) {
|
|
tab.position = this.dock;
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
onRemove: function(tab) {
|
|
var me = this;
|
|
|
|
if (tab === me.previousTab) {
|
|
me.previousTab = null;
|
|
}
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
afterComponentLayout : function(width) {
|
|
var me = this,
|
|
needsScroll = me.needsScroll;
|
|
|
|
me.callParent(arguments);
|
|
|
|
if (needsScroll) {
|
|
me.layout.overflowHandler.scrollToItem(me.activeTab);
|
|
}
|
|
delete me.needsScroll;
|
|
},
|
|
|
|
// @private
|
|
onClick: function(e, target) {
|
|
var me = this,
|
|
tabPanel = me.tabPanel,
|
|
tabEl, tab, isCloseClick, tabInfo;
|
|
|
|
if (e.getTarget('.' + Ext.baseCSSPrefix + 'box-scroller')) {
|
|
return;
|
|
}
|
|
|
|
if (me.orientation === 'vertical' && (Ext.isIE8 || Ext.isIE9) && Ext.isStrict) {
|
|
tabInfo = me.getTabInfoFromPoint(e.getXY());
|
|
tab = tabInfo.tab;
|
|
isCloseClick = tabInfo.close;
|
|
} else {
|
|
// The target might not be a valid tab el.
|
|
tabEl = e.getTarget('.' + Ext.tab.Tab.prototype.baseCls);
|
|
tab = tabEl && Ext.getCmp(tabEl.id);
|
|
isCloseClick = tab && tab.closeEl && (target === tab.closeEl.dom);
|
|
}
|
|
|
|
if (isCloseClick) {
|
|
e.preventDefault();
|
|
}
|
|
if (tab && tab.isDisabled && !tab.isDisabled()) {
|
|
if (tab.closable && isCloseClick) {
|
|
tab.onCloseClick();
|
|
} else {
|
|
if (tabPanel) {
|
|
// TabPanel will card setActiveTab of the TabBar
|
|
tabPanel.setActiveTab(tab.card);
|
|
} else {
|
|
me.setActiveTab(tab);
|
|
}
|
|
tab.focus();
|
|
}
|
|
}
|
|
},
|
|
|
|
// private
|
|
onMouseMove: function(e) {
|
|
var me = this,
|
|
overTab = me._overTab,
|
|
tabInfo, tab;
|
|
|
|
if (e.getTarget('.' + Ext.baseCSSPrefix + 'box-scroller')) {
|
|
return;
|
|
}
|
|
|
|
tabInfo = me.getTabInfoFromPoint(e.getXY());
|
|
tab = tabInfo.tab;
|
|
|
|
if (tab !== overTab) {
|
|
if (overTab && overTab.rendered) {
|
|
overTab.onMouseLeave(e);
|
|
me._overTab = null;
|
|
}
|
|
if (tab) {
|
|
tab.onMouseEnter(e);
|
|
me._overTab = tab;
|
|
if (!tab.disabled) {
|
|
me.el.setStyle('cursor', 'pointer');
|
|
}
|
|
} else {
|
|
me.el.setStyle('cursor', 'default');
|
|
}
|
|
}
|
|
},
|
|
|
|
onMouseLeave: function(e) {
|
|
var overTab = this._overTab;
|
|
|
|
if (overTab && overTab.rendered) {
|
|
overTab.onMouseLeave(e);
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// in IE8 and IE9 the clickable region of a rotated element is not its new rotated
|
|
// position, but it's original unrotated position. The result is that rotated tabs do
|
|
// not capture click and mousenter/mosueleave events correctly. This method accepts
|
|
// an xy position and calculates if the coordinates are within a tab and if they
|
|
// are within the tab's close icon (if any)
|
|
getTabInfoFromPoint: function(xy) {
|
|
var me = this,
|
|
tabs = me.items.items,
|
|
length = tabs.length,
|
|
innerCt = me.layout.innerCt,
|
|
innerCtXY = innerCt.getXY(),
|
|
point = new Ext.util.Point(xy[0], xy[1]),
|
|
i = 0,
|
|
lastBox, tabRegion, closeEl, close, closeXY, closeX, closeY, closeWidth,
|
|
closeHeight, tabX, tabY, tabWidth, tabHeight, closeRegion, isTabReversed,
|
|
direction, tab;
|
|
|
|
for (; i < length; i++) {
|
|
lastBox = tabs[i].lastBox;
|
|
tabX = innerCtXY[0] + lastBox.x;
|
|
tabY = innerCtXY[1] - innerCt.dom.scrollTop + lastBox.y;
|
|
tabWidth = lastBox.width;
|
|
tabHeight = lastBox.height;
|
|
tabRegion = new Ext.util.Region(
|
|
tabY,
|
|
tabX + tabWidth,
|
|
tabY + tabHeight,
|
|
tabX
|
|
);
|
|
if (tabRegion.contains(point)) {
|
|
tab = tabs[i];
|
|
closeEl = tab.closeEl;
|
|
if (closeEl) {
|
|
closeXY = closeEl.getXY();
|
|
closeWidth = closeEl.getWidth();
|
|
closeHeight = closeEl.getHeight();
|
|
// Read the dom to determine if the contents of the tab are reversed
|
|
// (rotated 180 degrees). If so, we can cache the result becuase
|
|
// it's safe to assume all tabs in the tabbar will be the same
|
|
if (me._isTabReversed === undefined) {
|
|
me._isTabReversed = isTabReversed =
|
|
// use currentStyle because getComputedStyle won't get the
|
|
// filter property in IE9
|
|
(tab.btnWrap.dom.currentStyle.filter.indexOf('rotation=2') !== -1);
|
|
}
|
|
|
|
direction = isTabReversed ? this._reverseDockNames[me.dock] : me.dock;
|
|
|
|
if (direction === 'right') {
|
|
closeX = tabX + tabWidth - ((closeXY[1] - tabY) + closeEl.getHeight());
|
|
closeY = tabY + (closeXY[0] - tabX);
|
|
} else {
|
|
closeX = tabX + (closeXY[1] - tabY);
|
|
closeY = tabY + tabX + tabHeight - closeXY[0] - closeEl.getWidth();
|
|
}
|
|
|
|
closeRegion = new Ext.util.Region(
|
|
closeY,
|
|
closeX + closeWidth,
|
|
closeY + closeHeight,
|
|
closeX
|
|
);
|
|
|
|
close = closeRegion.contains(point);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
return {
|
|
tab: tab,
|
|
close: close
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
|
|
* @param {Ext.tab.Tab} toClose The tab to close
|
|
*/
|
|
closeTab: function(toClose) {
|
|
var me = this,
|
|
card = toClose.card,
|
|
tabPanel = me.tabPanel,
|
|
toActivate;
|
|
|
|
if (card && card.fireEvent('beforeclose', card) === false) {
|
|
return false;
|
|
}
|
|
|
|
// If we are closing the active tab, revert to the previously active tab (or the previous or next enabled sibling if
|
|
// there *is* no previously active tab, or the previously active tab is the one that's being closed or the previously
|
|
// active tab has since been disabled)
|
|
toActivate = me.findNextActivatable(toClose);
|
|
|
|
// We are going to remove the associated card, and then, if that was sucessful, remove the Tab,
|
|
// And then potentially activate another Tab. We should not layout for each of these operations.
|
|
Ext.suspendLayouts();
|
|
|
|
if (tabPanel && card) {
|
|
// Remove the ownerCt so the tab doesn't get destroyed if the remove is successful
|
|
// We need this so we can have the tab fire it's own close event.
|
|
delete toClose.ownerCt;
|
|
|
|
// we must fire 'close' before removing the card from panel, otherwise
|
|
// the event will no loger have any listener
|
|
card.fireEvent('close', card);
|
|
tabPanel.remove(card);
|
|
|
|
// Remove succeeded
|
|
if (!tabPanel.getComponent(card)) {
|
|
/*
|
|
* Force the close event to fire. By the time this function returns,
|
|
* the tab is already destroyed and all listeners have been purged
|
|
* so the tab can't fire itself.
|
|
*/
|
|
toClose.fireClose();
|
|
me.remove(toClose);
|
|
} else {
|
|
// Restore the ownerCt from above
|
|
toClose.ownerCt = me;
|
|
Ext.resumeLayouts(true);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// If we are closing the active tab, revert to the previously active tab (or the previous sibling or the nnext sibling)
|
|
if (toActivate) {
|
|
// Our owning TabPanel calls our setActiveTab method, so only call that if this Bar is being used
|
|
// in some other context (unlikely)
|
|
if (tabPanel) {
|
|
tabPanel.setActiveTab(toActivate.card);
|
|
} else {
|
|
me.setActiveTab(toActivate);
|
|
}
|
|
toActivate.focus();
|
|
}
|
|
Ext.resumeLayouts(true);
|
|
},
|
|
|
|
// private - used by TabPanel too.
|
|
// Works out the next tab to activate when one tab is closed.
|
|
findNextActivatable: function(toClose) {
|
|
var me = this;
|
|
if (toClose.active && me.items.getCount() > 1) {
|
|
return (me.previousTab && me.previousTab !== toClose && !me.previousTab.disabled) ? me.previousTab : (toClose.next('tab[disabled=false]') || toClose.prev('tab[disabled=false]'));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Marks the given tab as active
|
|
* @param {Ext.tab.Tab} tab The tab to mark active
|
|
* @param {Boolean} initial True if we're setting the tab during setup
|
|
*/
|
|
setActiveTab: function(tab, initial) {
|
|
var me = this;
|
|
|
|
if (!tab.disabled && tab !== me.activeTab) {
|
|
if (me.activeTab) {
|
|
if (me.activeTab.isDestroyed) {
|
|
me.previousTab = null;
|
|
} else {
|
|
me.previousTab = me.activeTab;
|
|
me.activeTab.deactivate();
|
|
}
|
|
}
|
|
tab.activate();
|
|
|
|
me.activeTab = tab;
|
|
me.needsScroll = true;
|
|
|
|
// We don't fire the change event when setting the first tab.
|
|
// Also no need to run a layout
|
|
if (!initial) {
|
|
me.fireEvent('change', me, tab, tab.card);
|
|
// Ensure that after the currently in progress layout, the active tab is scrolled into view
|
|
me.updateLayout();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.tab.Bar', {
|
|
override: 'Ext.tab.Bar',
|
|
adjustTabPositions: function() {
|
|
var items = this.items.items,
|
|
i = items.length,
|
|
tab;
|
|
|
|
if (!this.getHierarchyState().rtl) {
|
|
return this.callParent();
|
|
}
|
|
|
|
// When tabs are rotated vertically we don't have a reliable way to position
|
|
// them using CSS in modern browsers. This is because of the way transform-orign
|
|
// works - it requires the width to be known, and the width is not known in css.
|
|
// Consequently we have to make an adjustment to the tab's position in these browsers.
|
|
// This is similar to what we do in Ext.panel.Header#adjustTitlePosition
|
|
if (!Ext.isIE9m) {
|
|
if (this.dock === 'left') {
|
|
// rotated 90 degrees around using the top left corner as the axis.
|
|
// tabs need to be shifted to the right by their height
|
|
while (i--) {
|
|
tab = items[i];
|
|
tab.el.setStyle('right', -tab.lastBox.height + 'px');
|
|
}
|
|
} else if (this.dock === 'right') {
|
|
// rotated 270 degrees around using the top right corner as the axis.
|
|
// tabs need to be shifted to the left by their width
|
|
while (i--) {
|
|
tab = items[i];
|
|
tab.el.setStyle('right', tab.lastBox.width + 'px');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
|
|
/**
|
|
* Provides indentation and folder structure markup for a Tree taking into account
|
|
* depth and position within the tree hierarchy.
|
|
*
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.tree.Column', {
|
|
extend: Ext.grid.column.Column ,
|
|
alias: 'widget.treecolumn',
|
|
|
|
tdCls: Ext.baseCSSPrefix + 'grid-cell-treecolumn',
|
|
|
|
autoLock: true,
|
|
lockable: false,
|
|
draggable: false,
|
|
hideable: false,
|
|
|
|
iconCls: Ext.baseCSSPrefix + 'tree-icon',
|
|
checkboxCls: Ext.baseCSSPrefix + 'tree-checkbox',
|
|
elbowCls: Ext.baseCSSPrefix + 'tree-elbow',
|
|
expanderCls: Ext.baseCSSPrefix + 'tree-expander',
|
|
textCls: Ext.baseCSSPrefix + 'tree-node-text',
|
|
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-treecolumn',
|
|
isTreeColumn: true,
|
|
|
|
cellTpl: [
|
|
'<tpl for="lines">',
|
|
'<img src="{parent.blankUrl}" class="{parent.childCls} {parent.elbowCls}-img ',
|
|
'{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>"/>',
|
|
'</tpl>',
|
|
'<img src="{blankUrl}" class="{childCls} {elbowCls}-img {elbowCls}',
|
|
'<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>"/>',
|
|
'<tpl if="checked !== null">',
|
|
'<input type="button" role="checkbox" <tpl if="checked">aria-checked="true" </tpl>',
|
|
'class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"/>',
|
|
'</tpl>',
|
|
'<img src="{blankUrl}" class="{childCls} {baseIconCls} ',
|
|
'{baseIconCls}-<tpl if="leaf">leaf<tpl else>parent</tpl> {iconCls}"',
|
|
'<tpl if="icon">style="background-image:url({icon})"</tpl>/>',
|
|
'<tpl if="href">',
|
|
'<a href="{href}" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
|
|
'<tpl else>',
|
|
'<span class="{textCls} {childCls}">{value}</span>',
|
|
'</tpl>'
|
|
],
|
|
|
|
initComponent: function() {
|
|
var me = this;
|
|
|
|
me.origRenderer = me.renderer;
|
|
me.origScope = me.scope || window;
|
|
|
|
me.renderer = me.treeRenderer;
|
|
me.scope = me;
|
|
|
|
me.callParent();
|
|
},
|
|
|
|
treeRenderer: function(value, metaData, record, rowIdx, colIdx, store, view){
|
|
var me = this,
|
|
cls = record.get('cls'),
|
|
renderer = me.origRenderer,
|
|
data = record.data,
|
|
parent = record.parentNode,
|
|
rootVisible = view.rootVisible,
|
|
lines = [],
|
|
parentData;
|
|
|
|
if (cls) {
|
|
metaData.tdCls += ' ' + cls;
|
|
}
|
|
|
|
while (parent && (rootVisible || parent.data.depth > 0)) {
|
|
parentData = parent.data;
|
|
lines[rootVisible ? parentData.depth : parentData.depth - 1] =
|
|
parentData.isLast ? 0 : 1;
|
|
parent = parent.parentNode;
|
|
}
|
|
|
|
return me.getTpl('cellTpl').apply({
|
|
record: record,
|
|
baseIconCls: me.iconCls,
|
|
iconCls: data.iconCls,
|
|
icon: data.icon,
|
|
checkboxCls: me.checkboxCls,
|
|
checked: data.checked,
|
|
elbowCls: me.elbowCls,
|
|
expanderCls: me.expanderCls,
|
|
textCls: me.textCls,
|
|
leaf: data.leaf,
|
|
expandable: record.isExpandable(),
|
|
isLast: data.isLast,
|
|
blankUrl: Ext.BLANK_IMAGE_URL,
|
|
href: data.href,
|
|
hrefTarget: data.hrefTarget,
|
|
lines: lines,
|
|
metaData: metaData,
|
|
// subclasses or overrides can implement a getChildCls() method, which can
|
|
// return an extra class to add to all of the cell's child elements (icon,
|
|
// expander, elbow, checkbox). This is used by the rtl override to add the
|
|
// "x-rtl" class to these elements.
|
|
childCls: me.getChildCls ? me.getChildCls() + ' ' : '',
|
|
value: renderer ? renderer.apply(me.origScope, arguments) : value
|
|
});
|
|
}
|
|
});
|
|
|
|
Ext.define('Ext.rtl.tree.Column', {
|
|
override: 'Ext.tree.Column',
|
|
|
|
getChildCls: function() {
|
|
return this._childCls || (this._childCls =
|
|
(this.getHierarchyState().rtl ? Ext.baseCSSPrefix + 'rtl' : ''));
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A selection model that renders a column of checkboxes that can be toggled to
|
|
* select or deselect rows. The default mode for this selection model is MULTI.
|
|
*
|
|
* The selection model will inject a header for the checkboxes in the first view
|
|
* and according to the {@link #injectCheckbox} configuration.
|
|
*/
|
|
Ext.define('Ext.selection.CheckboxModel', {
|
|
alias: 'selection.checkboxmodel',
|
|
extend: Ext.selection.RowModel ,
|
|
|
|
/**
|
|
* @cfg {"SINGLE"/"SIMPLE"/"MULTI"} mode
|
|
* Modes of selection.
|
|
* Valid values are `"SINGLE"`, `"SIMPLE"`, and `"MULTI"`.
|
|
*/
|
|
mode: 'MULTI',
|
|
|
|
/**
|
|
* @cfg {Number/String} [injectCheckbox=0]
|
|
* The index at which to insert the checkbox column.
|
|
* Supported values are a numeric index, and the strings 'first' and 'last'.
|
|
*/
|
|
injectCheckbox: 0,
|
|
|
|
/**
|
|
* @cfg {Boolean} checkOnly
|
|
* True if rows can only be selected by clicking on the checkbox column.
|
|
*/
|
|
checkOnly: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} showHeaderCheckbox
|
|
* Configure as `false` to not display the header checkbox at the top of the column.
|
|
* When {@link Ext.data.Store#buffered} is set to `true`, this configuration will
|
|
* not be available because the buffered data set does not always contain all data.
|
|
*/
|
|
showHeaderCheckbox: undefined,
|
|
|
|
/**
|
|
* @cfg {String} [checkSelector="x-grid-row-checker"]
|
|
* The selector for determining whether the checkbox element is clicked. This may be changed to
|
|
* allow for a wider area to be clicked, for example, the whole cell for the selector.
|
|
*/
|
|
checkSelector: '.' + Ext.baseCSSPrefix + 'grid-row-checker',
|
|
|
|
headerWidth: 24,
|
|
|
|
// private
|
|
checkerOnCls: Ext.baseCSSPrefix + 'grid-hd-checker-on',
|
|
|
|
constructor: function(){
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
|
|
// If mode is single and showHeaderCheck isn't explicity set to
|
|
// true, hide it.
|
|
if (me.mode === 'SINGLE' && me.showHeaderCheckbox !== true) {
|
|
me.showHeaderCheckbox = false;
|
|
}
|
|
},
|
|
|
|
beforeViewRender: function(view) {
|
|
var me = this,
|
|
owner;
|
|
|
|
me.callParent(arguments);
|
|
|
|
// if we have a locked header, only hook up to the first
|
|
if (!me.hasLockedHeader() || view.headerCt.lockedCt) {
|
|
if (me.showHeaderCheckbox !== false) {
|
|
view.headerCt.on('headerclick', me.onHeaderClick, me);
|
|
}
|
|
me.addCheckbox(view, true);
|
|
owner = view.ownerCt;
|
|
// Listen to the outermost reconfigure event
|
|
if (view.headerCt.lockedCt) {
|
|
owner = owner.ownerCt;
|
|
}
|
|
me.mon(owner, 'reconfigure', me.onReconfigure, me);
|
|
}
|
|
},
|
|
|
|
bindComponent: function(view) {
|
|
var me = this;
|
|
me.sortable = false;
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
hasLockedHeader: function(){
|
|
var views = this.views,
|
|
vLen = views.length,
|
|
v;
|
|
|
|
for (v = 0; v < vLen; v++) {
|
|
if (views[v].headerCt.lockedCt) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Add the header checkbox to the header row
|
|
* @private
|
|
* @param {Boolean} initial True if we're binding for the first time.
|
|
*/
|
|
addCheckbox: function(view, initial){
|
|
var me = this,
|
|
checkbox = me.injectCheckbox,
|
|
headerCt = view.headerCt;
|
|
|
|
// Preserve behaviour of false, but not clear why that would ever be done.
|
|
if (checkbox !== false) {
|
|
if (checkbox == 'first') {
|
|
checkbox = 0;
|
|
} else if (checkbox == 'last') {
|
|
checkbox = headerCt.getColumnCount();
|
|
}
|
|
Ext.suspendLayouts();
|
|
if (view.getStore().buffered) {
|
|
me.showHeaderCheckbox = false;
|
|
}
|
|
headerCt.add(checkbox, me.getHeaderConfig());
|
|
Ext.resumeLayouts();
|
|
}
|
|
|
|
if (initial !== true) {
|
|
view.refresh();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handles the grid's reconfigure event. Adds the checkbox header if the columns have been reconfigured.
|
|
* @private
|
|
* @param {Ext.panel.Table} grid
|
|
* @param {Ext.data.Store} store
|
|
* @param {Object[]} columns
|
|
*/
|
|
onReconfigure: function(grid, store, columns) {
|
|
if(columns) {
|
|
this.addCheckbox(this.views[0]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggle the ui header between checked and unchecked state.
|
|
* @param {Boolean} isChecked
|
|
* @private
|
|
*/
|
|
toggleUiHeader: function(isChecked) {
|
|
var view = this.views[0],
|
|
headerCt = view.headerCt,
|
|
checkHd = headerCt.child('gridcolumn[isCheckerHd]'),
|
|
cls = this.checkerOnCls;
|
|
|
|
if (checkHd) {
|
|
if (isChecked) {
|
|
checkHd.addCls(cls);
|
|
} else {
|
|
checkHd.removeCls(cls);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggle between selecting all and deselecting all when clicking on
|
|
* a checkbox header.
|
|
*/
|
|
onHeaderClick: function(headerCt, header, e) {
|
|
if (header.isCheckerHd) {
|
|
e.stopEvent();
|
|
var me = this,
|
|
isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
|
|
|
|
// Prevent focus changes on the view, since we're selecting/deselecting all records
|
|
me.preventFocus = true;
|
|
if (isChecked) {
|
|
me.deselectAll();
|
|
} else {
|
|
me.selectAll();
|
|
}
|
|
delete me.preventFocus;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Retrieve a configuration to be used in a HeaderContainer.
|
|
* This should be used when injectCheckbox is set to false.
|
|
*/
|
|
getHeaderConfig: function() {
|
|
var me = this,
|
|
showCheck = me.showHeaderCheckbox !== false;
|
|
|
|
return {
|
|
isCheckerHd: showCheck,
|
|
text : ' ',
|
|
clickTargetName: 'el',
|
|
width: me.headerWidth,
|
|
sortable: false,
|
|
draggable: false,
|
|
resizable: false,
|
|
hideable: false,
|
|
menuDisabled: true,
|
|
dataIndex: '',
|
|
cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
|
|
renderer: Ext.Function.bind(me.renderer, me),
|
|
editRenderer: me.editRenderer || me.renderEmpty,
|
|
locked: me.hasLockedHeader()
|
|
};
|
|
},
|
|
|
|
renderEmpty: function() {
|
|
return ' ';
|
|
},
|
|
|
|
// After refresh, ensure that the header checkbox state matches
|
|
refresh: function() {
|
|
this.callParent(arguments);
|
|
this.updateHeaderState();
|
|
},
|
|
|
|
/**
|
|
* Generates the HTML to be rendered in the injected checkbox column for each row.
|
|
* Creates the standard checkbox markup by default; can be overridden to provide custom rendering.
|
|
* See {@link Ext.grid.column.Column#renderer} for description of allowed parameters.
|
|
*/
|
|
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
|
|
var baseCSSPrefix = Ext.baseCSSPrefix;
|
|
metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
|
|
return '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
|
|
},
|
|
|
|
processSelection: function(view, record, item, index, e){
|
|
var me = this,
|
|
checker = e.getTarget(me.checkSelector),
|
|
mode;
|
|
|
|
// checkOnly set, but we didn't click on a checker.
|
|
if (me.checkOnly && !checker) {
|
|
return;
|
|
}
|
|
|
|
if (checker) {
|
|
mode = me.getSelectionMode();
|
|
// dont change the mode if its single otherwise
|
|
// we would get multiple selection
|
|
if (mode !== 'SINGLE') {
|
|
me.setSelectionMode('SIMPLE');
|
|
}
|
|
me.selectWithEvent(record, e);
|
|
me.setSelectionMode(mode);
|
|
} else {
|
|
me.selectWithEvent(record, e);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Synchronize header checker value as selection changes.
|
|
* @private
|
|
*/
|
|
onSelectChange: function() {
|
|
this.callParent(arguments);
|
|
if (!this.suspendChange) {
|
|
this.updateHeaderState();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onStoreLoad: function() {
|
|
this.callParent(arguments);
|
|
this.updateHeaderState();
|
|
},
|
|
|
|
onStoreAdd: function() {
|
|
this.callParent(arguments);
|
|
this.updateHeaderState();
|
|
},
|
|
|
|
onStoreRemove: function() {
|
|
this.callParent(arguments);
|
|
this.updateHeaderState();
|
|
},
|
|
|
|
onStoreRefresh: function(){
|
|
this.callParent(arguments);
|
|
this.updateHeaderState();
|
|
},
|
|
|
|
maybeFireSelectionChange: function(fireEvent) {
|
|
if (fireEvent && !this.suspendChange) {
|
|
this.updateHeaderState();
|
|
}
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
resumeChanges: function(){
|
|
this.callParent();
|
|
if (!this.suspendChange) {
|
|
this.updateHeaderState();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
updateHeaderState: function() {
|
|
// check to see if all records are selected
|
|
var me = this,
|
|
store = me.store,
|
|
storeCount = store.getCount(),
|
|
views = me.views,
|
|
hdSelectStatus = false,
|
|
selectedCount = 0,
|
|
selected, len, i;
|
|
|
|
if (!store.buffered && storeCount > 0) {
|
|
selected = me.selected;
|
|
hdSelectStatus = true;
|
|
for (i = 0, len = selected.getCount(); i < len; ++i) {
|
|
if (!me.storeHasSelected(selected.getAt(i))) {
|
|
break;
|
|
}
|
|
++selectedCount;
|
|
}
|
|
hdSelectStatus = storeCount === selectedCount;
|
|
}
|
|
|
|
if (views && views.length) {
|
|
me.toggleUiHeader(hdSelectStatus);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking
|
|
* and animation. Can be added as an item to any container.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.slider.Single', {
|
|
* width: 200,
|
|
* value: 50,
|
|
* increment: 10,
|
|
* minValue: 0,
|
|
* maxValue: 100,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* The class Ext.slider.Single is aliased to Ext.Slider for backwards compatibility.
|
|
*/
|
|
Ext.define('Ext.slider.Single', {
|
|
extend: Ext.slider.Multi ,
|
|
alias: ['widget.slider', 'widget.sliderfield'],
|
|
alternateClassName: ['Ext.Slider', 'Ext.form.SliderField', 'Ext.slider.SingleSlider', 'Ext.slider.Slider'],
|
|
|
|
/**
|
|
* Returns the current value of the slider
|
|
* @return {Number} The current value of the slider
|
|
*/
|
|
getValue: function() {
|
|
// just returns the value of the first thumb, which should be the only one in a single slider
|
|
return this.callParent([0]);
|
|
},
|
|
|
|
/**
|
|
* Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and
|
|
* maxValue.
|
|
* @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
|
|
* @param {Boolean} [animate] Turn on or off animation
|
|
*/
|
|
setValue: function(value, animate) {
|
|
var args = arguments,
|
|
len = args.length;
|
|
|
|
// this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
|
|
// index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
|
|
// signature without the required index. The index will always be 0 for a single slider
|
|
if (len == 1 || (len <= 3 && typeof args[1] != 'number')) {
|
|
args = Ext.toArray(args);
|
|
args.unshift(0);
|
|
}
|
|
return this.callParent(args);
|
|
},
|
|
|
|
// private
|
|
getNearest : function(){
|
|
// Since there's only 1 thumb, it's always the nearest
|
|
return this.thumbs[0];
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A Provider implementation which saves and retrieves state via cookies. The CookieProvider supports the usual cookie
|
|
* options, such as:
|
|
*
|
|
* - {@link #path}
|
|
* - {@link #expires}
|
|
* - {@link #domain}
|
|
* - {@link #secure}
|
|
*
|
|
* Example:
|
|
*
|
|
* var cp = Ext.create('Ext.state.CookieProvider', {
|
|
* path: "/cgi-bin/",
|
|
* expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
|
|
* domain: "sencha.com"
|
|
* });
|
|
*
|
|
* Ext.state.Manager.setProvider(cp);
|
|
*
|
|
*/
|
|
Ext.define('Ext.state.CookieProvider', {
|
|
extend: Ext.state.Provider ,
|
|
|
|
/**
|
|
* @cfg {String} path
|
|
* The path for which the cookie is active. Defaults to root '/' which makes it active for all pages in the site.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Date} expires
|
|
* The cookie expiration date. Defaults to 7 days from now.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} domain
|
|
* The domain to save the cookie for. Note that you cannot specify a different domain than your page is on, but you can
|
|
* specify a sub-domain, or simply the domain itself like 'sencha.com' to include all sub-domains if you need to access
|
|
* cookies across different sub-domains. Defaults to null which uses the same domain the page is running on including
|
|
* the 'www' like 'www.sencha.com'.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [secure=false]
|
|
* True if the site is using SSL
|
|
*/
|
|
|
|
/**
|
|
* Creates a new CookieProvider.
|
|
* @param {Object} [config] Config object.
|
|
*/
|
|
constructor : function(config){
|
|
var me = this;
|
|
me.path = "/";
|
|
me.expires = new Date(Ext.Date.now() + (1000*60*60*24*7)); //7 days
|
|
me.domain = null;
|
|
me.secure = false;
|
|
me.callParent(arguments);
|
|
me.state = me.readCookies();
|
|
},
|
|
|
|
// private
|
|
set : function(name, value){
|
|
var me = this;
|
|
|
|
if(typeof value == "undefined" || value === null){
|
|
me.clear(name);
|
|
return;
|
|
}
|
|
me.setCookie(name, value);
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// private
|
|
clear : function(name){
|
|
this.clearCookie(name);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
// private
|
|
readCookies : function(){
|
|
var cookies = {},
|
|
c = document.cookie + ";",
|
|
re = /\s?(.*?)=(.*?);/g,
|
|
prefix = this.prefix,
|
|
len = prefix.length,
|
|
matches,
|
|
name,
|
|
value;
|
|
|
|
while((matches = re.exec(c)) != null){
|
|
name = matches[1];
|
|
value = matches[2];
|
|
if (name && name.substring(0, len) == prefix){
|
|
cookies[name.substr(len)] = this.decodeValue(value);
|
|
}
|
|
}
|
|
return cookies;
|
|
},
|
|
|
|
// private
|
|
setCookie : function(name, value){
|
|
var me = this;
|
|
|
|
document.cookie = me.prefix + name + "=" + me.encodeValue(value) +
|
|
((me.expires == null) ? "" : ("; expires=" + me.expires.toGMTString())) +
|
|
((me.path == null) ? "" : ("; path=" + me.path)) +
|
|
((me.domain == null) ? "" : ("; domain=" + me.domain)) +
|
|
((me.secure == true) ? "; secure" : "");
|
|
},
|
|
|
|
// private
|
|
clearCookie : function(name){
|
|
var me = this;
|
|
|
|
document.cookie = me.prefix + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
|
|
((me.path == null) ? "" : ("; path=" + me.path)) +
|
|
((me.domain == null) ? "" : ("; domain=" + me.domain)) +
|
|
((me.secure == true) ? "; secure" : "");
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.state.LocalStorageProvider
|
|
* A Provider implementation which saves and retrieves state via the HTML5 localStorage object.
|
|
* If the browser does not support local storage, there will be no attempt to read the state.
|
|
* Before creating this class, a check should be made to {@link Ext.supports#LocalStorage}.
|
|
*/
|
|
|
|
Ext.define('Ext.state.LocalStorageProvider', {
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.state.Provider ,
|
|
|
|
alias: 'state.localstorage',
|
|
|
|
/* End Definitions */
|
|
|
|
constructor: function(){
|
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.store = me.getStorageObject();
|
|
if (me.store) {
|
|
me.state = me.readLocalStorage();
|
|
} else {
|
|
me.state = {};
|
|
}
|
|
},
|
|
|
|
readLocalStorage: function(){
|
|
var store = this.store,
|
|
i = 0,
|
|
len = store.length,
|
|
prefix = this.prefix,
|
|
prefixLen = prefix.length,
|
|
data = {},
|
|
key;
|
|
|
|
for (; i < len; ++i) {
|
|
key = store.key(i);
|
|
if (key.substring(0, prefixLen) == prefix) {
|
|
data[key.substr(prefixLen)] = this.decodeValue(store.getItem(key));
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
|
|
set : function(name, value){
|
|
var me = this;
|
|
|
|
me.clear(name);
|
|
if (typeof value == "undefined" || value === null) {
|
|
return;
|
|
}
|
|
me.store.setItem(me.prefix + name, me.encodeValue(value));
|
|
me.callParent(arguments);
|
|
},
|
|
|
|
// private
|
|
clear : function(name){
|
|
this.store.removeItem(this.prefix + name);
|
|
this.callParent(arguments);
|
|
},
|
|
|
|
getStorageObject: function(){
|
|
if (Ext.supports.LocalStorage) {
|
|
return window.localStorage;
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @author Ed Spencer, Tommy Maintz, Brian Moeskau
|
|
*
|
|
* A basic tab container. TabPanels can be used exactly like a standard {@link Ext.panel.Panel} for
|
|
* layout purposes, but also have special support for containing child Components
|
|
* (`{@link Ext.container.Container#cfg-items items}`) that are managed using a
|
|
* {@link Ext.layout.container.Card CardLayout layout manager}, and displayed as separate tabs.
|
|
*
|
|
* **Note:** By default, a tab's close tool _destroys_ the child tab Component and all its descendants.
|
|
* This makes the child tab Component, and all its descendants **unusable**. To enable re-use of a tab,
|
|
* configure the TabPanel with `{@link #autoDestroy autoDestroy: false}`.
|
|
*
|
|
* ## TabPanel's layout
|
|
*
|
|
* TabPanels use a Dock layout to position the {@link Ext.tab.Bar TabBar} at the top of the widget.
|
|
* Panels added to the TabPanel will have their header hidden by default because the Tab will
|
|
* automatically take the Panel's configured title and icon.
|
|
*
|
|
* TabPanels use their {@link Ext.panel.Header header} or {@link Ext.panel.Panel#fbar footer}
|
|
* element (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
|
|
* This means that a TabPanel will not display any configured title, and will not display any 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:
|
|
*
|
|
* @example
|
|
* 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'
|
|
* }
|
|
* }]
|
|
* });
|
|
*
|
|
* ## Vetoing Changes
|
|
*
|
|
* User interaction when changing the tabs can be vetoed by listening to the {@link #beforetabchange} event.
|
|
* By returning `false`, the tab change will not occur.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.tab.Panel', {
|
|
* renderTo: Ext.getBody(),
|
|
* width: 200,
|
|
* height: 200,
|
|
* listeners: {
|
|
* beforetabchange: function(tabs, newTab, oldTab) {
|
|
* return newTab.title != 'P2';
|
|
* }
|
|
* },
|
|
* items: [{
|
|
* title: 'P1'
|
|
* }, {
|
|
* title: 'P2'
|
|
* }, {
|
|
* title: 'P3'
|
|
* }]
|
|
* });
|
|
*
|
|
* # 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. If you do not set an {@link #activeTab}, no tabs will be
|
|
* active by default.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.tab.Panel', {
|
|
* width: 300,
|
|
* height: 200,
|
|
* activeTab: 0,
|
|
* items: [
|
|
* {
|
|
* title: 'Tab 1',
|
|
* bodyPadding: 10,
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* It is easy to control the visibility of items in the tab bar. Specify hidden: true to have the
|
|
* tab button hidden initially. Items can be subsequently hidden and show by accessing the
|
|
* tab property on the child item.
|
|
*
|
|
* @example
|
|
* var tabs = Ext.create('Ext.tab.Panel', {
|
|
* width: 400,
|
|
* height: 400,
|
|
* renderTo: document.body,
|
|
* items: [{
|
|
* title: 'Home',
|
|
* html: 'Home',
|
|
* itemId: 'home'
|
|
* }, {
|
|
* title: 'Users',
|
|
* html: 'Users',
|
|
* itemId: 'users',
|
|
* hidden: true
|
|
* }, {
|
|
* title: 'Tickets',
|
|
* html: 'Tickets',
|
|
* itemId: 'tickets'
|
|
* }]
|
|
* });
|
|
*
|
|
* setTimeout(function(){
|
|
* tabs.child('#home').tab.hide();
|
|
* var users = tabs.child('#users');
|
|
* users.tab.show();
|
|
* tabs.setActiveTab(users);
|
|
* }, 1000);
|
|
*
|
|
* You can remove the background of the TabBar by setting the {@link #plain} property to `true`.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.tab.Panel', {
|
|
* width: 300,
|
|
* height: 200,
|
|
* activeTab: 0,
|
|
* plain: true,
|
|
* items: [
|
|
* {
|
|
* title: 'Tab 1',
|
|
* bodyPadding: 10,
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* Another useful configuration of TabPanel is {@link #tabPosition}. This allows you to change the
|
|
* position where the tabs are displayed. The available options for this are `'top'` (default) and
|
|
* `'bottom'`.
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.tab.Panel', {
|
|
* width: 300,
|
|
* height: 200,
|
|
* activeTab: 0,
|
|
* bodyPadding: 10,
|
|
* tabPosition: 'bottom',
|
|
* items: [
|
|
* {
|
|
* title: 'Tab 1',
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* The {@link #setActiveTab} is a very useful method in TabPanel which will allow you to change the
|
|
* current active tab. You can either give it an index or an instance of a tab. For example:
|
|
*
|
|
* @example
|
|
* var tabs = Ext.create('Ext.tab.Panel', {
|
|
* items: [
|
|
* {
|
|
* id : 'my-tab',
|
|
* title: 'Tab 1',
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* var tab = Ext.getCmp('my-tab');
|
|
*
|
|
* Ext.create('Ext.button.Button', {
|
|
* renderTo: Ext.getBody(),
|
|
* text : 'Select the first tab',
|
|
* scope : this,
|
|
* handler : function() {
|
|
* tabs.setActiveTab(tab);
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.button.Button', {
|
|
* text : 'Select the second tab',
|
|
* scope : this,
|
|
* handler : function() {
|
|
* tabs.setActiveTab(1);
|
|
* },
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* The {@link #getActiveTab} is a another useful method in TabPanel which will return the current active tab.
|
|
*
|
|
* @example
|
|
* var tabs = Ext.create('Ext.tab.Panel', {
|
|
* items: [
|
|
* {
|
|
* title: 'Tab 1',
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* Ext.create('Ext.button.Button', {
|
|
* text : 'Get active tab',
|
|
* scope : this,
|
|
* handler : function() {
|
|
* var tab = tabs.getActiveTab();
|
|
* alert('Current tab: ' + tab.title);
|
|
* },
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* Adding a new tab is very simple with a TabPanel. You simple call the {@link #method-add} method with an config
|
|
* object for a panel.
|
|
*
|
|
* @example
|
|
* var tabs = Ext.create('Ext.tab.Panel', {
|
|
* items: [
|
|
* {
|
|
* title: 'Tab 1',
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* Ext.create('Ext.button.Button', {
|
|
* text : 'New tab',
|
|
* scope : this,
|
|
* handler : function() {
|
|
* var tab = tabs.add({
|
|
* // we use the tabs.items property to get the length of current items/tabs
|
|
* title: 'Tab ' + (tabs.items.length + 1),
|
|
* html : 'Another one'
|
|
* });
|
|
*
|
|
* tabs.setActiveTab(tab);
|
|
* },
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* Additionally, removing a tab is very also simple with a TabPanel. You simple call the {@link #method-remove} method
|
|
* with an config object for a panel.
|
|
*
|
|
* @example
|
|
* var tabs = Ext.create('Ext.tab.Panel', {
|
|
* items: [
|
|
* {
|
|
* title: 'Tab 1',
|
|
* html : 'A simple tab'
|
|
* },
|
|
* {
|
|
* id : 'remove-this-tab',
|
|
* title: 'Tab 2',
|
|
* html : 'Another one'
|
|
* }
|
|
* ],
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*
|
|
* Ext.create('Ext.button.Button', {
|
|
* text : 'Remove tab',
|
|
* scope : this,
|
|
* handler : function() {
|
|
* var tab = Ext.getCmp('remove-this-tab');
|
|
* tabs.remove(tab);
|
|
* },
|
|
* renderTo : Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.tab.Panel', {
|
|
extend: Ext.panel.Panel ,
|
|
alias: 'widget.tabpanel',
|
|
alternateClassName: ['Ext.TabPanel'],
|
|
|
|
|
|
|
|
/**
|
|
* @cfg {"top"/"bottom"/"left"/"right"} tabPosition
|
|
* The position where the tab strip should be rendered. Can be `top`, `bottom`,
|
|
* `left` or `right`
|
|
*/
|
|
tabPosition : 'top',
|
|
|
|
/**
|
|
* @cfg {String/Number} activeItem
|
|
* Doesn't apply for {@link Ext.tab.Panel TabPanel}, use {@link #activeTab} instead.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String/Number/Ext.Component} activeTab
|
|
* The tab to activate initially. Either an ID, index or the tab component itself.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Object} tabBar
|
|
* Optional configuration object for the internal {@link Ext.tab.Bar}.
|
|
* If present, this is passed straight through to the TabBar's constructor
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.enums.Layout/Object} layout
|
|
* Optional configuration object for the internal {@link Ext.layout.container.Card card layout}.
|
|
* If present, this is passed straight through to the layout's constructor
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} removePanelHeader
|
|
* True to instruct each Panel added to the TabContainer to not render its header element.
|
|
* This is to ensure that the title of the panel does not appear twice.
|
|
*/
|
|
removePanelHeader: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} plain
|
|
* True to not show the full background on the TabBar.
|
|
*/
|
|
plain: false,
|
|
|
|
/**
|
|
* @cfg {String} [itemCls='x-tabpanel-child']
|
|
* The class added to each child item of this TabPanel.
|
|
*/
|
|
itemCls: Ext.baseCSSPrefix + 'tabpanel-child',
|
|
|
|
/**
|
|
* @cfg {Number} minTabWidth
|
|
* The minimum width for a tab in the {@link #cfg-tabBar}.
|
|
*/
|
|
minTabWidth: undefined,
|
|
|
|
/**
|
|
* @cfg {Number} maxTabWidth The maximum width for each tab.
|
|
*/
|
|
maxTabWidth: undefined,
|
|
|
|
/**
|
|
* @cfg {Boolean} deferredRender
|
|
*
|
|
* True by default to defer the rendering of child {@link Ext.container.Container#cfg-items items} to the browsers DOM
|
|
* until a tab is activated. False will render all contained {@link Ext.container.Container#cfg-items items} as soon as
|
|
* the {@link Ext.layout.container.Card layout} is rendered. If there is a significant amount of content or a lot of
|
|
* heavy controls being rendered into panels that are not displayed by default, setting this to true might improve
|
|
* performance.
|
|
*
|
|
* The deferredRender property is internally passed to the layout manager for TabPanels ({@link
|
|
* Ext.layout.container.Card}) as its {@link Ext.layout.container.Card#deferredRender} configuration value.
|
|
*
|
|
* **Note**: leaving deferredRender as true means that the content within an unactivated tab will not be available
|
|
*/
|
|
deferredRender : true,
|
|
|
|
//inherit docs
|
|
initComponent: function() {
|
|
var me = this,
|
|
dockedItems = [].concat(me.dockedItems || []),
|
|
activeTab = me.activeTab || (me.activeTab = 0),
|
|
tabPosition = me.tabPosition;
|
|
|
|
// Configure the layout with our deferredRender, and with our activeTeb
|
|
me.layout = new Ext.layout.container.Card(Ext.apply({
|
|
owner: me,
|
|
deferredRender: me.deferredRender,
|
|
itemCls: me.itemCls,
|
|
activeItem: activeTab
|
|
}, me.layout));
|
|
|
|
/**
|
|
* @property {Ext.tab.Bar} tabBar Internal reference to the docked TabBar
|
|
*/
|
|
me.tabBar = new Ext.tab.Bar(Ext.apply({
|
|
ui: me.ui,
|
|
dock: me.tabPosition,
|
|
orientation: (tabPosition == 'top' || tabPosition == 'bottom') ? 'horizontal' : 'vertical',
|
|
plain: me.plain,
|
|
cardLayout: me.layout,
|
|
tabPanel: me
|
|
}, me.tabBar));
|
|
|
|
dockedItems.push(me.tabBar);
|
|
me.dockedItems = dockedItems;
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event
|
|
* Fires before a tab change (activated by {@link #setActiveTab}). Return false in any listener to cancel
|
|
* the tabchange
|
|
* @param {Ext.tab.Panel} tabPanel The TabPanel
|
|
* @param {Ext.Component} newCard The card that is about to be activated
|
|
* @param {Ext.Component} oldCard The card that is currently active
|
|
*/
|
|
'beforetabchange',
|
|
|
|
/**
|
|
* @event
|
|
* Fires when a new tab has been activated (activated by {@link #setActiveTab}).
|
|
* @param {Ext.tab.Panel} tabPanel The TabPanel
|
|
* @param {Ext.Component} newCard The newly activated item
|
|
* @param {Ext.Component} oldCard The previously active item
|
|
*/
|
|
'tabchange'
|
|
);
|
|
|
|
me.callParent(arguments);
|
|
|
|
// We have to convert the numeric index/string ID config into its component reference
|
|
activeTab = me.activeTab = me.getComponent(activeTab);
|
|
|
|
// Ensure that the active child's tab is rendered in the active UI state
|
|
if (activeTab) {
|
|
me.tabBar.setActiveTab(activeTab.tab, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Makes the given card active. Makes it the visible card in the TabPanel's CardLayout and highlights the Tab.
|
|
* @param {String/Number/Ext.Component} card The card to make active. Either an ID, index or the component itself.
|
|
* @return {Ext.Component} The resulting active child Component. The call may have been vetoed, or otherwise
|
|
* modified by an event listener.
|
|
*/
|
|
setActiveTab: function(card) {
|
|
var me = this,
|
|
previous;
|
|
|
|
card = me.getComponent(card);
|
|
if (card) {
|
|
previous = me.getActiveTab();
|
|
|
|
if (previous !== card && me.fireEvent('beforetabchange', me, card, previous) === false) {
|
|
return false;
|
|
}
|
|
|
|
// We may be passed a config object, so add it.
|
|
// Without doing a layout!
|
|
if (!card.isComponent) {
|
|
Ext.suspendLayouts();
|
|
card = me.add(card);
|
|
Ext.resumeLayouts();
|
|
}
|
|
|
|
// MUST set the activeTab first so that the machinery which listens for show doesn't
|
|
// think that the show is "driving" the activation and attempt to recurse into here.
|
|
me.activeTab = card;
|
|
|
|
// Attempt to switch to the requested card. Suspend layouts because if that was successful
|
|
// we have to also update the active tab in the tab bar which is another layout operation
|
|
// and we must coalesce them.
|
|
Ext.suspendLayouts();
|
|
me.layout.setActiveItem(card);
|
|
|
|
// Read the result of the card layout. Events dear boy, events!
|
|
card = me.activeTab = me.layout.getActiveItem();
|
|
|
|
// Card switch was not vetoed by an event listener
|
|
if (card && card !== previous) {
|
|
|
|
// Update the active tab in the tab bar and resume layouts.
|
|
me.tabBar.setActiveTab(card.tab);
|
|
Ext.resumeLayouts(true);
|
|
|
|
// previous will be undefined or this.activeTab at instantiation
|
|
if (previous !== card) {
|
|
me.fireEvent('tabchange', me, card, previous);
|
|
}
|
|
}
|
|
// Card switch was vetoed by an event listener. Resume layouts (Nothing should have changed on a veto).
|
|
else {
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
return card;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Returns the item that is currently active inside this TabPanel.
|
|
* @return {Ext.Component} The currently active item.
|
|
*/
|
|
getActiveTab: function() {
|
|
var me = this,
|
|
// Ensure the calculated result references a Component
|
|
result = me.getComponent(me.activeTab);
|
|
|
|
// Sanitize the result in case the active tab is no longer there.
|
|
if (result && me.items.indexOf(result) != -1) {
|
|
me.activeTab = result;
|
|
} else {
|
|
me.activeTab = null;
|
|
}
|
|
|
|
return me.activeTab;
|
|
},
|
|
|
|
/**
|
|
* Returns the {@link Ext.tab.Bar} currently used in this TabPanel
|
|
* @return {Ext.tab.Bar} The TabBar
|
|
*/
|
|
getTabBar: function() {
|
|
return this.tabBar;
|
|
},
|
|
|
|
/**
|
|
* @protected
|
|
* Makes sure we have a Tab for each item added to the TabPanel
|
|
*/
|
|
onAdd: function(item, index) {
|
|
var me = this,
|
|
cfg = item.tabConfig || {},
|
|
defaultConfig = {
|
|
xtype: 'tab',
|
|
ui: me.tabBar.ui,
|
|
card: item,
|
|
disabled: item.disabled,
|
|
closable: item.closable,
|
|
hidden: item.hidden && !item.hiddenByLayout, // only hide if it wasn't hidden by the layout itself
|
|
tooltip: item.tooltip,
|
|
tabBar: me.tabBar,
|
|
position: me.tabPosition,
|
|
closeText: item.closeText
|
|
};
|
|
|
|
cfg = Ext.applyIf(cfg, defaultConfig);
|
|
|
|
// Create the correspondiong tab in the tab bar
|
|
item.tab = me.tabBar.insert(index, cfg);
|
|
|
|
item.on({
|
|
scope : me,
|
|
enable: me.onItemEnable,
|
|
disable: me.onItemDisable,
|
|
beforeshow: me.onItemBeforeShow,
|
|
iconchange: me.onItemIconChange,
|
|
iconclschange: me.onItemIconClsChange,
|
|
titlechange: me.onItemTitleChange
|
|
});
|
|
|
|
if (item.isPanel) {
|
|
if (me.removePanelHeader) {
|
|
if (item.rendered) {
|
|
if (item.header) {
|
|
item.header.hide();
|
|
}
|
|
} else {
|
|
item.header = false;
|
|
}
|
|
}
|
|
if (item.isPanel && me.border) {
|
|
item.setBorder(false);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Enable corresponding tab when item is enabled.
|
|
*/
|
|
onItemEnable: function(item){
|
|
item.tab.enable();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Disable corresponding tab when item is enabled.
|
|
*/
|
|
onItemDisable: function(item){
|
|
item.tab.disable();
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Sets activeTab before item is shown.
|
|
*/
|
|
onItemBeforeShow: function(item) {
|
|
if (item !== this.activeTab) {
|
|
this.setActiveTab(item);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Update the tab icon when panel icon has been set or changed.
|
|
*/
|
|
onItemIconChange: function(item, newIcon) {
|
|
item.tab.setIcon(newIcon);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Update the tab iconCls when panel iconCls has been set or changed.
|
|
*/
|
|
onItemIconClsChange: function(item, newIconCls) {
|
|
item.tab.setIconCls(newIconCls);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Update the tab title when panel title has been set or changed.
|
|
*/
|
|
onItemTitleChange: function(item, newTitle) {
|
|
item.tab.setText(newTitle);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Unlink the removed child item from its (@link Ext.tab.Tab Tab}.
|
|
*
|
|
* If we're removing the currently active tab, activate the nearest one. The item is removed when we call super,
|
|
* so we can do preprocessing before then to find the card's index
|
|
*/
|
|
doRemove: function(item, autoDestroy) {
|
|
var me = this,
|
|
toActivate;
|
|
|
|
// Destroying, or removing the last item, nothing to activate
|
|
if (me.destroying || me.items.getCount() == 1) {
|
|
me.activeTab = null;
|
|
}
|
|
|
|
// Ask the TabBar which tab to activate next.
|
|
// Set the active child panel using the index of that tab
|
|
else if ((toActivate = me.tabBar.items.indexOf(me.tabBar.findNextActivatable(item.tab))) !== -1) {
|
|
me.setActiveTab(toActivate);
|
|
}
|
|
this.callParent(arguments);
|
|
|
|
// Remove the two references
|
|
delete item.tab.card;
|
|
delete item.tab;
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* Makes sure we remove the corresponding Tab when an item is removed
|
|
*/
|
|
onRemove: function(item, destroying) {
|
|
var me = this;
|
|
|
|
item.un({
|
|
scope : me,
|
|
enable: me.onItemEnable,
|
|
disable: me.onItemDisable,
|
|
beforeshow: me.onItemBeforeShow
|
|
});
|
|
if (!me.destroying && item.tab.ownerCt === me.tabBar) {
|
|
me.tabBar.remove(item.tab);
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A simple element that adds extra horizontal space between items in a toolbar.
|
|
* By default a 2px wide space is added via CSS specification:
|
|
*
|
|
* .x-toolbar .x-toolbar-spacer {
|
|
* width: 2px;
|
|
* }
|
|
*
|
|
* Example:
|
|
*
|
|
* @example
|
|
* Ext.create('Ext.panel.Panel', {
|
|
* title: 'Toolbar Spacer Example',
|
|
* width: 300,
|
|
* height: 200,
|
|
* tbar : [
|
|
* 'Item 1',
|
|
* { xtype: 'tbspacer' }, // or ' '
|
|
* 'Item 2',
|
|
* // space width is also configurable via javascript
|
|
* { xtype: 'tbspacer', width: 50 }, // add a 50px space
|
|
* 'Item 3'
|
|
* ],
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*/
|
|
Ext.define('Ext.toolbar.Spacer', {
|
|
extend: Ext.Component ,
|
|
alias: 'widget.tbspacer',
|
|
alternateClassName: 'Ext.Toolbar.Spacer',
|
|
baseCls: Ext.baseCSSPrefix + 'toolbar-spacer',
|
|
focusable: false
|
|
});
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* Simple TreePanel using inline data:
|
|
*
|
|
* @example
|
|
* var store = Ext.create('Ext.data.TreeStore', {
|
|
* root: {
|
|
* expanded: true,
|
|
* children: [
|
|
* { text: "detention", leaf: true },
|
|
* { text: "homework", expanded: true, children: [
|
|
* { text: "book report", leaf: true },
|
|
* { text: "algebra", leaf: true}
|
|
* ] },
|
|
* { text: "buy lottery tickets", leaf: true }
|
|
* ]
|
|
* }
|
|
* });
|
|
*
|
|
* Ext.create('Ext.tree.Panel', {
|
|
* title: 'Simple Tree',
|
|
* width: 200,
|
|
* height: 150,
|
|
* store: store,
|
|
* rootVisible: false,
|
|
* renderTo: Ext.getBody()
|
|
* });
|
|
*
|
|
* For the tree node config options (like `text`, `leaf`, `expanded`), see the documentation of
|
|
* {@link Ext.data.NodeInterface NodeInterface} config options.
|
|
*/
|
|
Ext.define('Ext.tree.Panel', {
|
|
extend: Ext.panel.Table ,
|
|
alias: 'widget.treepanel',
|
|
alternateClassName: ['Ext.tree.TreePanel', 'Ext.TreePanel'],
|
|
|
|
viewType: 'treeview',
|
|
selType: 'treemodel',
|
|
|
|
treeCls: Ext.baseCSSPrefix + 'tree-panel',
|
|
|
|
deferRowRender: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} rowLines
|
|
* False so that rows are not separated by lines.
|
|
*/
|
|
rowLines: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} lines
|
|
* False to disable tree lines.
|
|
*/
|
|
lines: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} useArrows
|
|
* True to use Vista-style arrows in the tree.
|
|
*/
|
|
useArrows: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} singleExpand
|
|
* True if only 1 node per branch may be expanded.
|
|
*/
|
|
singleExpand: false,
|
|
|
|
ddConfig: {
|
|
enableDrag: true,
|
|
enableDrop: true
|
|
},
|
|
|
|
/**
|
|
* @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.
|
|
*/
|
|
rootVisible: true,
|
|
|
|
/**
|
|
* @cfg {String} displayField
|
|
* The field inside the model that will be used as the node's text.
|
|
*/
|
|
displayField: 'text',
|
|
|
|
/**
|
|
* @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,
|
|
|
|
// Required for the Lockable Mixin. These are the configurations which will be copied to the
|
|
// normal and locked sub tablepanels
|
|
normalCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible', 'scroll'],
|
|
lockedCfgCopy: ['displayField', 'root', 'singleExpand', 'useArrows', 'lines', 'rootVisible'],
|
|
|
|
isTree: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} hideHeaders
|
|
* True to hide the headers.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} folderSort
|
|
* True to automatically prepend a leaf sorter to the store.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Ext.data.TreeStore} store (required)
|
|
* The {@link Ext.data.TreeStore Store} the tree should use as its data source.
|
|
*/
|
|
|
|
arrowCls: Ext.baseCSSPrefix + 'tree-arrows',
|
|
linesCls: Ext.baseCSSPrefix + 'tree-lines',
|
|
noLinesCls: Ext.baseCSSPrefix + 'tree-no-lines',
|
|
autoWidthCls: Ext.baseCSSPrefix + 'autowidth-table',
|
|
|
|
constructor: function(config) {
|
|
config = config || {};
|
|
if (config.animate === undefined) {
|
|
config.animate = Ext.isBoolean(this.animate) ? this.animate : Ext.enableFx;
|
|
}
|
|
this.enableAnimations = config.animate;
|
|
delete config.animate;
|
|
|
|
this.callParent([config]);
|
|
},
|
|
|
|
initComponent: function() {
|
|
var me = this,
|
|
cls = [me.treeCls],
|
|
store = me.store,
|
|
view;
|
|
|
|
if (me.useArrows) {
|
|
cls.push(me.arrowCls);
|
|
me.lines = false;
|
|
}
|
|
|
|
if (me.lines) {
|
|
cls.push(me.linesCls);
|
|
} else if (!me.useArrows) {
|
|
cls.push(me.noLinesCls);
|
|
}
|
|
|
|
if (Ext.isString(store)) {
|
|
store = me.store = Ext.StoreMgr.lookup(store);
|
|
} else if (!store || Ext.isObject(store) && !store.isStore) {
|
|
store = me.store = new Ext.data.TreeStore(Ext.apply({
|
|
root: me.root,
|
|
fields: me.fields,
|
|
model: me.model,
|
|
folderSort: me.folderSort
|
|
}, store));
|
|
} else if (me.root) {
|
|
store = me.store = Ext.data.StoreManager.lookup(store);
|
|
store.setRootNode(me.root);
|
|
if (me.folderSort !== undefined) {
|
|
store.folderSort = me.folderSort;
|
|
store.sort();
|
|
}
|
|
}
|
|
|
|
// I'm not sure if we want to this. It might be confusing
|
|
// if (me.initialConfig.rootVisible === undefined && !me.getRootNode()) {
|
|
// me.rootVisible = false;
|
|
// }
|
|
|
|
me.viewConfig = Ext.apply({
|
|
rootVisible: me.rootVisible,
|
|
animate: me.enableAnimations,
|
|
singleExpand: me.singleExpand,
|
|
node: store.getRootNode(),
|
|
hideHeaders: me.hideHeaders
|
|
}, me.viewConfig);
|
|
|
|
// If the user specifies the headers collection manually then dont inject our own
|
|
if (!me.columns) {
|
|
if (me.initialConfig.hideHeaders === undefined) {
|
|
me.hideHeaders = true;
|
|
}
|
|
me.addCls(me.autoWidthCls);
|
|
me.columns = [{
|
|
xtype : 'treecolumn',
|
|
text : 'Name',
|
|
width : Ext.isIE6 ? '100%' : 10000, // IE6 needs width:100%
|
|
dataIndex: me.displayField
|
|
}];
|
|
}
|
|
|
|
if (me.cls) {
|
|
cls.push(me.cls);
|
|
}
|
|
me.cls = cls.join(' ');
|
|
|
|
me.callParent();
|
|
|
|
// TreeModel has to know about the TreeStore so that pruneRemoved can work properly upon removal
|
|
// of nodes.
|
|
me.selModel.treeStore = me.store;
|
|
|
|
view = me.getView();
|
|
|
|
// Relay events from the TreeView.
|
|
// An injected LockingView relays events from its locked side's View
|
|
me.relayEvents(view, [
|
|
/**
|
|
* @event checkchange
|
|
* Fires when a node with a checkbox's checked property changes
|
|
* @param {Ext.data.NodeInterface} node The node who's checked property was changed
|
|
* @param {Boolean} checked The node's new checked state
|
|
*/
|
|
'checkchange',
|
|
/**
|
|
* @event afteritemexpand
|
|
* @inheritdoc Ext.tree.View#afteritemexpand
|
|
*/
|
|
'afteritemexpand',
|
|
/**
|
|
* @event afteritemcollapse
|
|
* @inheritdoc Ext.tree.View#afteritemcollapse
|
|
*/
|
|
'afteritemcollapse'
|
|
]);
|
|
|
|
// If there has been a LockingView injected, this processing will be performed by the locked TreePanel
|
|
if (!view.isLockingView) {
|
|
// If the root is not visible and there is no rootnode defined, then just lets load the store
|
|
if (!view.rootVisible && !me.getRootNode()) {
|
|
me.setRootNode({
|
|
expanded: true
|
|
});
|
|
}
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// Hook into the TreeStore.
|
|
// Do not callParent in TreePanel's bindStore
|
|
// The TreeStore is only relevant to the tree - the View has its own NodeStore
|
|
bindStore: function(store, initial) {
|
|
var me = this;
|
|
|
|
me.store = store;
|
|
|
|
// Connect to store. Return a Destroyable object
|
|
me.storeListeners = me.mon(store, {
|
|
destroyable: true,
|
|
load: me.onStoreLoad,
|
|
rootchange: me.onRootChange,
|
|
clear: me.onClear,
|
|
scope: me
|
|
});
|
|
|
|
// Relay store events. relayEvents always returns a Destroyable object.
|
|
me.storeRelayers = me.relayEvents(store, [
|
|
/**
|
|
* @event beforeload
|
|
* @inheritdoc Ext.data.TreeStore#beforeload
|
|
*/
|
|
'beforeload',
|
|
|
|
/**
|
|
* @event load
|
|
* @inheritdoc Ext.data.TreeStore#load
|
|
*/
|
|
'load'
|
|
]);
|
|
|
|
// Relay store events with prefix. Return a Destroyable object
|
|
me.storeRelayers1 = me.mon(store, {
|
|
destroyable: true,
|
|
|
|
/**
|
|
* @event itemappend
|
|
* @inheritdoc Ext.data.TreeStore#append
|
|
*/
|
|
append: me.createRelayer('itemappend'),
|
|
|
|
/**
|
|
* @event itemremove
|
|
* @inheritdoc Ext.data.TreeStore#remove
|
|
*/
|
|
remove: me.createRelayer('itemremove'),
|
|
|
|
/**
|
|
* @event itemmove
|
|
* @inheritdoc Ext.data.TreeStore#move
|
|
*/
|
|
move: me.createRelayer('itemmove', [0, 4]),
|
|
|
|
/**
|
|
* @event iteminsert
|
|
* @inheritdoc Ext.data.TreeStore#insert
|
|
*/
|
|
insert: me.createRelayer('iteminsert'),
|
|
|
|
/**
|
|
* @event beforeitemappend
|
|
* @inheritdoc Ext.data.TreeStore#beforeappend
|
|
*/
|
|
beforeappend: me.createRelayer('beforeitemappend'),
|
|
|
|
/**
|
|
* @event beforeitemremove
|
|
* @inheritdoc Ext.data.TreeStore#beforeremove
|
|
*/
|
|
beforeremove: me.createRelayer('beforeitemremove'),
|
|
|
|
/**
|
|
* @event beforeitemmove
|
|
* @inheritdoc Ext.data.TreeStore#beforemove
|
|
*/
|
|
beforemove: me.createRelayer('beforeitemmove'),
|
|
|
|
/**
|
|
* @event beforeiteminsert
|
|
* @inheritdoc Ext.data.TreeStore#beforeinsert
|
|
*/
|
|
beforeinsert: me.createRelayer('beforeiteminsert'),
|
|
|
|
/**
|
|
* @event itemexpand
|
|
* @inheritdoc Ext.data.TreeStore#expand
|
|
*/
|
|
expand: me.createRelayer('itemexpand', [0, 1]),
|
|
|
|
/**
|
|
* @event itemcollapse
|
|
* @inheritdoc Ext.data.TreeStore#collapse
|
|
*/
|
|
collapse: me.createRelayer('itemcollapse', [0, 1]),
|
|
|
|
/**
|
|
* @event beforeitemexpand
|
|
* @inheritdoc Ext.data.TreeStore#beforeexpand
|
|
*/
|
|
beforeexpand: me.createRelayer('beforeitemexpand', [0, 1]),
|
|
|
|
/**
|
|
* @event beforeitemcollapse
|
|
* @inheritdoc Ext.data.TreeStore#beforecollapse
|
|
*/
|
|
beforecollapse: me.createRelayer('beforeitemcollapse', [0, 1])
|
|
});
|
|
|
|
// TreeStore must have an upward link to the TreePanel so that nodes can find their owning tree in NodeInterface.getOwnerTree
|
|
store.ownerTree = me;
|
|
|
|
if (!initial) {
|
|
me.view.setRootNode(me.getRootNode());
|
|
}
|
|
},
|
|
|
|
// @private
|
|
// TODO: Decide whether it is possible to reconfigure a TreePanel.
|
|
unbindStore: function() {
|
|
var me = this,
|
|
store = me.store;
|
|
|
|
if (store) {
|
|
Ext.destroy(me.storeListeners, me.storeRelayers, me.storeRelayers1);
|
|
delete store.ownerTree;
|
|
}
|
|
},
|
|
|
|
onClear: function(){
|
|
this.view.onClear();
|
|
},
|
|
|
|
/**
|
|
* Sets root node of this tree.
|
|
* @param {Ext.data.Model/Ext.data.NodeInterface/Object} root
|
|
* @return {Ext.data.NodeInterface} The new root
|
|
*/
|
|
setRootNode: function() {
|
|
return this.store.setRootNode.apply(this.store, arguments);
|
|
},
|
|
|
|
/**
|
|
* Returns the root node for this tree.
|
|
* @return {Ext.data.NodeInterface}
|
|
*/
|
|
getRootNode: function() {
|
|
return this.store.getRootNode();
|
|
},
|
|
|
|
onRootChange: function(root) {
|
|
this.view.setRootNode(root);
|
|
},
|
|
|
|
/**
|
|
* Retrieve an array of checked records.
|
|
* @return {Ext.data.NodeInterface[]} An array containing the checked records
|
|
*/
|
|
getChecked: function() {
|
|
return this.getView().getChecked();
|
|
},
|
|
|
|
isItemChecked: function(rec) {
|
|
return rec.get('checked');
|
|
},
|
|
|
|
/**
|
|
* Expands a record that is loaded in the tree.
|
|
* @param {Ext.data.Model} record The record to expand
|
|
* @param {Boolean} [deep] True to expand nodes all the way down the tree hierarchy.
|
|
* @param {Function} [callback] The function to run after the expand is completed
|
|
* @param {Object} [scope] The scope of the callback function.
|
|
*/
|
|
expandNode: function(record, deep, callback, scope) {
|
|
return this.getView().expand(record, deep, callback, scope || this);
|
|
},
|
|
|
|
/**
|
|
* Collapses a record that is loaded in the tree.
|
|
* @param {Ext.data.Model} record The record to collapse
|
|
* @param {Boolean} [deep] True to collapse nodes all the way up the tree hierarchy.
|
|
* @param {Function} [callback] The function to run after the collapse is completed
|
|
* @param {Object} [scope] The scope of the callback function.
|
|
*/
|
|
collapseNode: function(record, deep, callback, scope) {
|
|
return this.getView().collapse(record, deep, callback, scope || this);
|
|
},
|
|
|
|
/**
|
|
* Expand all nodes
|
|
* @param {Function} [callback] A function to execute when the expand finishes.
|
|
* @param {Object} [scope] The scope of the callback function
|
|
*/
|
|
expandAll : function(callback, scope) {
|
|
var me = this,
|
|
root = me.getRootNode(),
|
|
animate = me.enableAnimations;
|
|
if (root) {
|
|
if (!animate) {
|
|
Ext.suspendLayouts();
|
|
}
|
|
root.expand(true, callback, scope || me);
|
|
if (!animate) {
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Collapse all nodes
|
|
* @param {Function} [callback] A function to execute when the collapse finishes.
|
|
* @param {Object} [scope] The scope of the callback function
|
|
*/
|
|
collapseAll : function(callback, scope) {
|
|
var me = this,
|
|
root = me.getRootNode(),
|
|
animate = me.enableAnimations,
|
|
view = me.getView();
|
|
|
|
if (root) {
|
|
if (!animate) {
|
|
Ext.suspendLayouts();
|
|
}
|
|
scope = scope || me;
|
|
if (view.rootVisible) {
|
|
root.collapse(true, callback, scope);
|
|
} else {
|
|
root.collapseChildren(true, callback, scope);
|
|
}
|
|
if (!animate) {
|
|
Ext.resumeLayouts(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 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] The field to get the data from. Defaults to the model idProperty.
|
|
* @param {String} [separator='/'] A separator to use.
|
|
* @param {Function} [callback] 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] The scope of the callback function
|
|
*/
|
|
expandPath: function(path, field, separator, callback, scope) {
|
|
var me = this,
|
|
current = me.getRootNode(),
|
|
index = 1,
|
|
view = me.getView(),
|
|
keys,
|
|
expander;
|
|
|
|
field = field || me.getRootNode().idProperty;
|
|
separator = separator || '/';
|
|
|
|
if (Ext.isEmpty(path)) {
|
|
Ext.callback(callback, scope || me, [false, null]);
|
|
return;
|
|
}
|
|
|
|
keys = path.split(separator);
|
|
if (current.get(field) != keys[1]) {
|
|
// invalid root
|
|
Ext.callback(callback, scope || me, [false, current]);
|
|
return;
|
|
}
|
|
|
|
expander = function(){
|
|
if (++index === keys.length) {
|
|
Ext.callback(callback, scope || me, [true, current]);
|
|
return;
|
|
}
|
|
var node = current.findChild(field, keys[index]);
|
|
if (!node) {
|
|
Ext.callback(callback, scope || me, [false, current]);
|
|
return;
|
|
}
|
|
current = node;
|
|
current.expand(false, expander);
|
|
};
|
|
current.expand(false, expander);
|
|
},
|
|
|
|
/**
|
|
* Expand the tree to the path of a particular node, then select it.
|
|
* @param {String} path The path to select. The path should include a leading separator.
|
|
* @param {String} [field] The field to get the data from. Defaults to the model idProperty.
|
|
* @param {String} [separator='/'] A separator to use.
|
|
* @param {Function} [callback] 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] The scope of the callback function
|
|
*/
|
|
selectPath: function(path, field, separator, callback, scope) {
|
|
var me = this,
|
|
root,
|
|
keys,
|
|
last;
|
|
|
|
field = field || me.getRootNode().idProperty;
|
|
separator = separator || '/';
|
|
|
|
keys = path.split(separator);
|
|
last = keys.pop();
|
|
if (keys.length > 1) {
|
|
me.expandPath(keys.join(separator), field, separator, function(success, node){
|
|
var lastNode = node;
|
|
if (success && node) {
|
|
node = node.findChild(field, last);
|
|
if (node) {
|
|
me.getSelectionModel().select(node);
|
|
Ext.callback(callback, scope || me, [true, node]);
|
|
return;
|
|
}
|
|
}
|
|
Ext.callback(callback, scope || me, [false, lastNode]);
|
|
}, me);
|
|
} else {
|
|
root = me.getRootNode();
|
|
if (root.getId() === last) {
|
|
me.getSelectionModel().select(root);
|
|
Ext.callback(callback, scope || me, [true, root]);
|
|
} else {
|
|
Ext.callback(callback, scope || me, [false, null]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.view.DragZone', {
|
|
extend: Ext.dd.DragZone ,
|
|
containerScroll: false,
|
|
|
|
constructor: function(config) {
|
|
var me = this,
|
|
view,
|
|
ownerCt,
|
|
el;
|
|
|
|
Ext.apply(me, config);
|
|
|
|
// Create a ddGroup unless one has been configured.
|
|
// User configuration of ddGroups allows users to specify which
|
|
// DD instances can interact with each other. Using one
|
|
// based on the id of the View would isolate it and mean it can only
|
|
// interact with a DropZone on the same View also using a generated ID.
|
|
if (!me.ddGroup) {
|
|
me.ddGroup = 'view-dd-zone-' + me.view.id;
|
|
}
|
|
|
|
// Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
|
|
// 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
|
|
// 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.
|
|
view = me.view;
|
|
ownerCt = view.ownerCt;
|
|
// We don't just grab the parent el, since the parent el may be
|
|
// some el injected by the layout
|
|
if (ownerCt) {
|
|
el = ownerCt.getTargetEl().dom;
|
|
} else {
|
|
el = view.el.dom.parentNode;
|
|
}
|
|
me.callParent([el]);
|
|
|
|
me.ddel = Ext.get(document.createElement('div'));
|
|
me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
|
|
},
|
|
|
|
init: function(id, sGroup, config) {
|
|
this.initTarget(id, sGroup, config);
|
|
this.view.mon(this.view, {
|
|
itemmousedown: this.onItemMouseDown,
|
|
scope: this
|
|
});
|
|
},
|
|
|
|
onValidDrop: function(target, e, id) {
|
|
this.callParent();
|
|
// focus the view that the node was dropped onto so that keynav will be enabled.
|
|
target.el.focus();
|
|
},
|
|
|
|
onItemMouseDown: function(view, record, item, index, e) {
|
|
if (!this.isPreventDrag(e, record, item, index)) {
|
|
// Since handleMouseDown prevents the default behavior of the event, which
|
|
// is to focus the view, we focus the view now. This ensures that the view
|
|
// remains focused if the drag is cancelled, or if no drag occurs.
|
|
if (view.focusRow) {
|
|
view.focusRow(record);
|
|
}
|
|
this.handleMouseDown(e);
|
|
}
|
|
},
|
|
|
|
// private template method
|
|
isPreventDrag: function(e) {
|
|
return false;
|
|
},
|
|
|
|
getDragData: function(e) {
|
|
var view = this.view,
|
|
item = e.getTarget(view.getItemSelector());
|
|
|
|
if (item) {
|
|
return {
|
|
copy: view.copy || (view.allowCopy && e.ctrlKey),
|
|
event: new Ext.EventObjectImpl(e),
|
|
view: view,
|
|
ddel: this.ddel,
|
|
item: item,
|
|
records: view.getSelectionModel().getSelection(),
|
|
fromPosition: Ext.fly(item).getXY()
|
|
};
|
|
}
|
|
},
|
|
|
|
onInitDrag: function(x, y) {
|
|
var me = this,
|
|
data = me.dragData,
|
|
view = data.view,
|
|
selectionModel = view.getSelectionModel(),
|
|
record = view.getRecord(data.item);
|
|
|
|
// 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)) {
|
|
selectionModel.select(record, true);
|
|
}
|
|
data.records = selectionModel.getSelection();
|
|
|
|
me.ddel.update(me.getDragText());
|
|
me.proxy.update(me.ddel.dom);
|
|
me.onStartDrag(x, y);
|
|
return true;
|
|
},
|
|
|
|
getDragText: function() {
|
|
var count = this.dragData.records.length;
|
|
return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
|
|
},
|
|
|
|
getRepairXY : function(e, data){
|
|
return data ? data.fromPosition : false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.tree.ViewDragZone', {
|
|
extend: Ext.view.DragZone ,
|
|
|
|
isPreventDrag: function(e, record) {
|
|
return (record.get('allowDrag') === false) || !!e.getTarget(this.view.expanderSelector);
|
|
},
|
|
|
|
getDragText: function() {
|
|
var records = this.dragData.records,
|
|
count = records.length,
|
|
text = records[0].get(this.displayField),
|
|
suffix = 's';
|
|
|
|
if (count === 1 && text) {
|
|
return text;
|
|
} else if (!text) {
|
|
suffix = '';
|
|
}
|
|
return Ext.String.format(this.dragText, count, suffix);
|
|
},
|
|
|
|
afterRepair: function() {
|
|
var me = this,
|
|
view = me.view,
|
|
selectedRowCls = view.selectedItemCls,
|
|
records = me.dragData.records,
|
|
r,
|
|
rLen = records.length,
|
|
fly = Ext.fly,
|
|
item;
|
|
|
|
if (Ext.enableFx && me.repairHighlight) {
|
|
// Roll through all records and highlight all the ones we attempted to drag.
|
|
for (r = 0; r < rLen; r++) {
|
|
// anonymous fns below, don't hoist up unless below is wrapped in
|
|
// a self-executing function passing in item.
|
|
item = view.getNode(records[r]);
|
|
|
|
// We must remove the selected row class before animating, because
|
|
// the selected row class declares !important on its background-color.
|
|
fly(item.firstChild).highlight(me.repairHighlightColor, {
|
|
listeners: {
|
|
beforeanimate: function() {
|
|
if (view.isSelected(item)) {
|
|
fly(item).removeCls(selectedRowCls);
|
|
}
|
|
},
|
|
afteranimate: function() {
|
|
if (view.isSelected(item)) {
|
|
fly(item).addCls(selectedRowCls);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
me.dragging = false;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
Ext.define('Ext.tree.ViewDropZone', {
|
|
extend: Ext.view.DropZone ,
|
|
|
|
/**
|
|
* @cfg {Boolean} allowParentInserts
|
|
* Allow inserting a dragged node between an expanded parent node and its first child that will become a
|
|
* sibling of the parent when dropped.
|
|
*/
|
|
allowParentInserts: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} allowContainerDrop
|
|
* True if drops on the tree container (outside of a specific tree node) are allowed.
|
|
*/
|
|
allowContainerDrops: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} appendOnly
|
|
* True if the tree should only allow append drops (use for trees which are sorted).
|
|
*/
|
|
appendOnly: false,
|
|
|
|
/**
|
|
* @cfg {Number} expandDelay
|
|
* The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
|
|
* over the target.
|
|
*/
|
|
expandDelay : 500,
|
|
|
|
indicatorCls: Ext.baseCSSPrefix + 'tree-ddindicator',
|
|
|
|
// @private
|
|
expandNode : function(node) {
|
|
var view = this.view;
|
|
this.expandProcId = false;
|
|
if (!node.isLeaf() && !node.isExpanded()) {
|
|
view.expand(node);
|
|
this.expandProcId = false;
|
|
}
|
|
},
|
|
|
|
// @private
|
|
queueExpand : function(node) {
|
|
this.expandProcId = Ext.Function.defer(this.expandNode, this.expandDelay, this, [node]);
|
|
},
|
|
|
|
// @private
|
|
cancelExpand : function() {
|
|
if (this.expandProcId) {
|
|
clearTimeout(this.expandProcId);
|
|
this.expandProcId = false;
|
|
}
|
|
},
|
|
|
|
getPosition: function(e, node) {
|
|
var view = this.view,
|
|
record = view.getRecord(node),
|
|
y = e.getPageY(),
|
|
noAppend = record.isLeaf(),
|
|
noBelow = false,
|
|
region = Ext.fly(node).getRegion(),
|
|
fragment;
|
|
|
|
// If we are dragging on top of the root node of the tree, we always want to append.
|
|
if (record.isRoot()) {
|
|
return 'append';
|
|
}
|
|
|
|
// Return 'append' if the node we are dragging on top of is not a leaf else return false.
|
|
if (this.appendOnly) {
|
|
return noAppend ? false : 'append';
|
|
}
|
|
|
|
if (!this.allowParentInserts) {
|
|
noBelow = record.hasChildNodes() && record.isExpanded();
|
|
}
|
|
|
|
fragment = (region.bottom - region.top) / (noAppend ? 2 : 3);
|
|
if (y >= region.top && y < (region.top + fragment)) {
|
|
return 'before';
|
|
}
|
|
else if (!noBelow && (noAppend || (y >= (region.bottom - fragment) && y <= region.bottom))) {
|
|
return 'after';
|
|
}
|
|
else {
|
|
return 'append';
|
|
}
|
|
},
|
|
|
|
isValidDropPoint : function(node, position, dragZone, e, data) {
|
|
if (!node || !data.item) {
|
|
return false;
|
|
}
|
|
|
|
var view = this.view,
|
|
targetNode = view.getRecord(node),
|
|
draggedRecords = data.records,
|
|
dataLength = draggedRecords.length,
|
|
ln = draggedRecords.length,
|
|
i, record;
|
|
|
|
// No drop position, or dragged records: invalid drop point
|
|
if (!(targetNode && position && dataLength)) {
|
|
return false;
|
|
}
|
|
|
|
// If the targetNode is within the folder we are dragging
|
|
for (i = 0; i < ln; i++) {
|
|
record = draggedRecords[i];
|
|
if (record.isNode && record.contains(targetNode)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Respect the allowDrop field on Tree nodes
|
|
if (position === 'append' && targetNode.get('allowDrop') === false) {
|
|
return false;
|
|
}
|
|
else if (position != 'append' && targetNode.parentNode.get('allowDrop') === false) {
|
|
return false;
|
|
}
|
|
|
|
// If the target record is in the dragged dataset, then invalid drop
|
|
if (Ext.Array.contains(draggedRecords, targetNode)) {
|
|
return false;
|
|
}
|
|
return view.fireEvent('nodedragover', targetNode, position, data, e) !== false;
|
|
},
|
|
|
|
onNodeOver : function(node, dragZone, e, data) {
|
|
var position = this.getPosition(e, node),
|
|
returnCls = this.dropNotAllowed,
|
|
view = this.view,
|
|
targetNode = view.getRecord(node),
|
|
indicator = this.getIndicator(),
|
|
indicatorY = 0;
|
|
|
|
// auto node expand check
|
|
this.cancelExpand();
|
|
if (position == 'append' && !this.expandProcId && !Ext.Array.contains(data.records, targetNode) && !targetNode.isLeaf() && !targetNode.isExpanded()) {
|
|
this.queueExpand(targetNode);
|
|
}
|
|
|
|
|
|
if (this.isValidDropPoint(node, position, dragZone, e, data)) {
|
|
this.valid = true;
|
|
this.currentPosition = position;
|
|
this.overRecord = targetNode;
|
|
|
|
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);
|
|
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);
|
|
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 {
|
|
this.valid = false;
|
|
}
|
|
|
|
this.currentCls = returnCls;
|
|
return returnCls;
|
|
},
|
|
|
|
// The mouse is no longer over a tree node, so dropping is not valid
|
|
onNodeOut : function(n, dd, e, data){
|
|
this.valid = false;
|
|
this.getIndicator().hide();
|
|
},
|
|
|
|
onContainerOver : function(dd, e, data) {
|
|
return e.getTarget('.' + this.indicatorCls) ? this.currentCls : this.dropNotAllowed;
|
|
},
|
|
|
|
notifyOut: function() {
|
|
this.callParent(arguments);
|
|
this.cancelExpand();
|
|
},
|
|
|
|
handleNodeDrop : function(data, targetNode, position) {
|
|
var me = this,
|
|
targetView = me.view,
|
|
parentNode = targetNode ? targetNode.parentNode : targetView.panel.getRootNode(),
|
|
Model = targetView.getStore().treeStore.model,
|
|
records, i, len, record,
|
|
insertionMethod, argList,
|
|
needTargetExpand,
|
|
transferData;
|
|
|
|
// If the copy flag is set, create a copy of the models
|
|
if (data.copy) {
|
|
records = data.records;
|
|
data.records = [];
|
|
for (i = 0, len = records.length; i < len; i++) {
|
|
record = records[i];
|
|
if (record.isNode) {
|
|
data.records.push(record.copy(undefined, true));
|
|
} else {
|
|
// If it's not a node, make a node copy
|
|
data.records.push(new Model(record.data, record.getId()));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Cancel any pending expand operation
|
|
me.cancelExpand();
|
|
|
|
// Grab a reference to the correct node insertion method.
|
|
// Create an arg list array intended for the apply method of the
|
|
// chosen node insertion method.
|
|
// Ensure the target object for the method is referenced by 'targetNode'
|
|
if (position == 'before') {
|
|
insertionMethod = parentNode.insertBefore;
|
|
argList = [null, targetNode];
|
|
targetNode = parentNode;
|
|
}
|
|
else if (position == 'after') {
|
|
if (targetNode.nextSibling) {
|
|
insertionMethod = parentNode.insertBefore;
|
|
argList = [null, targetNode.nextSibling];
|
|
}
|
|
else {
|
|
insertionMethod = parentNode.appendChild;
|
|
argList = [null];
|
|
}
|
|
targetNode = parentNode;
|
|
}
|
|
else {
|
|
if (!(targetNode.isExpanded() || targetNode.isLoading())) {
|
|
needTargetExpand = true;
|
|
}
|
|
insertionMethod = targetNode.appendChild;
|
|
argList = [null];
|
|
}
|
|
|
|
// A function to transfer the data into the destination tree
|
|
transferData = function() {
|
|
var color,
|
|
n;
|
|
|
|
// Coalesce layouts caused by node removal, appending and sorting
|
|
Ext.suspendLayouts();
|
|
|
|
targetView.getSelectionModel().clearSelections();
|
|
|
|
// Insert the records into the target node
|
|
for (i = 0, len = data.records.length; i < len; i++) {
|
|
record = data.records[i];
|
|
if (!record.isNode) {
|
|
if (record.isModel) {
|
|
record = new Model(record.data, record.getId());
|
|
} else {
|
|
record = new Model(record);
|
|
}
|
|
data.records[i] = record;
|
|
}
|
|
argList[0] = record;
|
|
insertionMethod.apply(targetNode, argList);
|
|
}
|
|
|
|
// If configured to sort on drop, do it according to the TreeStore's comparator
|
|
if (me.sortOnDrop) {
|
|
targetNode.sort(targetNode.getOwnerTree().store.generateComparator());
|
|
}
|
|
|
|
Ext.resumeLayouts(true);
|
|
|
|
// Kick off highlights after everything's been inserted, so they are
|
|
// more in sync without insertion/render overhead.
|
|
// Element.highlight can handle highlighting table nodes.
|
|
if (Ext.enableFx && me.dropHighlight) {
|
|
color = me.dropHighlightColor;
|
|
|
|
for (i = 0; i < len; i++) {
|
|
n = targetView.getNode(data.records[i]);
|
|
if (n) {
|
|
Ext.fly(n).highlight(color);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// If dropping right on an unexpanded node, transfer the data after it is expanded.
|
|
if (needTargetExpand) {
|
|
targetNode.expand(false, transferData);
|
|
}
|
|
// If the node is waiting for its children, we must transfer the data after the expansion.
|
|
// The expand event does NOT signal UI expansion, it is the SIGNAL for UI expansion.
|
|
// It's listened for by the NodeStore on the root node. Which means that listeners on the target
|
|
// node get notified BEFORE UI expansion. So we need a delay.
|
|
// TODO: Refactor NodeInterface.expand/collapse to notify its owning tree directly when it needs to expand/collapse.
|
|
else if (targetNode.isLoading()) {
|
|
targetNode.on({
|
|
expand: transferData,
|
|
delay: 1,
|
|
single: true
|
|
});
|
|
}
|
|
// Otherwise, call the data transfer function immediately
|
|
else {
|
|
transferData();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* This plugin provides drag and/or drop functionality for a TreeView.
|
|
*
|
|
* It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a
|
|
* {@link Ext.tree.View TreeView} and loads the data object which is passed to a cooperating
|
|
* {@link Ext.dd.DragZone DragZone}'s methods with the following properties:
|
|
*
|
|
* - copy : Boolean
|
|
*
|
|
* The value of the TreeView's `copy` property, or `true` if the TreeView was configured with `allowCopy: true` *and*
|
|
* the control key was pressed when the drag operation was begun.
|
|
*
|
|
* - view : TreeView
|
|
*
|
|
* The source TreeView from which the drag originated.
|
|
*
|
|
* - ddel : HtmlElement
|
|
*
|
|
* The drag proxy element which moves with the mouse
|
|
*
|
|
* - item : HtmlElement
|
|
*
|
|
* The TreeView node upon which the mousedown event was registered.
|
|
*
|
|
* - records : Array
|
|
*
|
|
* An Array of {@link Ext.data.Model Models} representing the selected data being dragged from the source TreeView.
|
|
*
|
|
* It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
|
|
* members of the same ddGroup which processes such data objects.
|
|
*
|
|
* Adding this plugin to a view means that two new events may be fired from the client TreeView, {@link #beforedrop} and
|
|
* {@link #drop}.
|
|
*
|
|
* Note that the plugin must be added to the tree view, not to the tree panel. For example using viewConfig:
|
|
*
|
|
* viewConfig: {
|
|
* plugins: { ptype: 'treeviewdragdrop' }
|
|
* }
|
|
*/
|
|
Ext.define('Ext.tree.plugin.TreeViewDragDrop', {
|
|
extend: Ext.AbstractPlugin ,
|
|
alias: 'plugin.treeviewdragdrop',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @event beforedrop
|
|
*
|
|
* **This event is fired through the TreeView. Add listeners to the TreeView object**
|
|
*
|
|
* Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the TreeView.
|
|
*
|
|
* Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
|
|
* back to the point from which the drag began.
|
|
*
|
|
* The dropHandlers parameter can be used to defer the processing of this event. For example to wait for the result of
|
|
* a message box confirmation or an asynchronous server call. See the details of this property for more information.
|
|
*
|
|
* @example
|
|
* view.on('beforedrop', function(node, data, overModel, dropPosition, dropHandlers) {
|
|
* // Defer the handling
|
|
* dropHandlers.wait = true;
|
|
* Ext.MessageBox.confirm('Drop', 'Are you sure', function(btn){
|
|
* if (btn === 'yes') {
|
|
* dropHandlers.processDrop();
|
|
* } else {
|
|
* dropHandlers.cancelDrop();
|
|
* }
|
|
* });
|
|
* });
|
|
*
|
|
* Any other return value continues with the data transfer operation, unless the wait property is set.
|
|
*
|
|
* @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
|
|
*
|
|
* @param {Object} data The data object gathered at mousedown time by the cooperating
|
|
* {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
|
|
* properties:
|
|
* @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
|
|
* `allowCopy: true` and the control key was pressed when the drag operation was begun
|
|
* @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
|
|
* @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
|
|
* @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
|
|
* @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
|
|
* dragged from the source TreeView.
|
|
*
|
|
* @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
|
|
*
|
|
* @param {String} dropPosition `"before"`, `"after"` or `"append"` depending on whether the mouse is above or below
|
|
* the midline of the node, or the node is a branch node which accepts new child nodes.
|
|
*
|
|
* @param {Object} dropHandlers
|
|
* This parameter allows the developer to control when the drop action takes place. It is useful if any asynchronous
|
|
* processing needs to be completed before performing the drop. This object has the following properties:
|
|
*
|
|
* @param {Boolean} dropHandlers.wait Indicates whether the drop should be deferred. Set this property to true to defer the drop.
|
|
* @param {Function} dropHandlers.processDrop A function to be called to complete the drop operation.
|
|
* @param {Function} dropHandlers.cancelDrop A function to be called to cancel the drop operation.
|
|
*/
|
|
|
|
/**
|
|
* @event drop
|
|
*
|
|
* **This event is fired through the TreeView. Add listeners to the TreeView object** Fired when a drop operation
|
|
* has been completed and the data has been moved or copied.
|
|
*
|
|
* @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
|
|
*
|
|
* @param {Object} data The data object gathered at mousedown time by the cooperating
|
|
* {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
|
|
* properties:
|
|
* @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
|
|
* `allowCopy: true` and the control key was pressed when the drag operation was begun
|
|
* @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
|
|
* @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
|
|
* @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
|
|
* @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
|
|
* dragged from the source TreeView.
|
|
*
|
|
* @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
|
|
*
|
|
* @param {String} dropPosition `"before"`, `"after"` or `"append"` depending on whether the mouse is above or below
|
|
* the midline of the node, or the node is a branch node which accepts new child nodes.
|
|
*/
|
|
|
|
//<locale>
|
|
/**
|
|
* @cfg
|
|
* The text to show while dragging.
|
|
*
|
|
* Two placeholders can be used in the text:
|
|
*
|
|
* - `{0}` The number of selected items.
|
|
* - `{1}` 's' when more than 1 items (only useful for English).
|
|
*/
|
|
dragText : '{0} selected node{1}',
|
|
//</locale>
|
|
|
|
/**
|
|
* @cfg {Boolean} allowParentInserts
|
|
* Allow inserting a dragged node between an expanded parent node and its first child that will become a sibling of
|
|
* the parent when dropped.
|
|
*/
|
|
allowParentInserts: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} allowContainerDrops
|
|
* True if drops on the tree container (outside of a specific tree node) are allowed.
|
|
*/
|
|
allowContainerDrops: false,
|
|
|
|
/**
|
|
* @cfg {Boolean} appendOnly
|
|
* True if the tree should only allow append drops (use for trees which are sorted).
|
|
*/
|
|
appendOnly: false,
|
|
|
|
/**
|
|
* @cfg {String} ddGroup
|
|
* A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and
|
|
* DropZone used by this plugin will only interact with other drag drop objects in the same group.
|
|
*/
|
|
ddGroup : "TreeDD",
|
|
|
|
/**
|
|
* True to register this container with the Scrollmanager for auto scrolling during drag operations.
|
|
* A {@link Ext.dd.ScrollManager} configuration may also be passed.
|
|
* @cfg {Object/Boolean} containerScroll
|
|
*/
|
|
containerScroll: false,
|
|
|
|
/**
|
|
* @cfg {String} dragGroup
|
|
* The ddGroup to which the DragZone will belong.
|
|
*
|
|
* This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other
|
|
* Drag/DropZones which are members of the same ddGroup.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {String} dropGroup
|
|
* The ddGroup to which the DropZone will belong.
|
|
*
|
|
* This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other
|
|
* Drag/DropZones which are members of the same ddGroup.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Boolean} [sortOnDrop=false]
|
|
* Configure as `true` to sort the target node into the current tree sort order after the dropped node is added.
|
|
*/
|
|
|
|
/**
|
|
* @cfg {Number} expandDelay
|
|
* The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node over the
|
|
* target.
|
|
*/
|
|
expandDelay : 1000,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableDrop
|
|
* Set to `false` to disallow the View from accepting drop gestures.
|
|
*/
|
|
enableDrop: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} enableDrag
|
|
* Set to `false` to disallow dragging items from the View.
|
|
*/
|
|
enableDrag: true,
|
|
|
|
/**
|
|
* @cfg {String} nodeHighlightColor
|
|
* The color to use when visually highlighting the dragged or dropped node (default value is light blue).
|
|
* The color must be a 6 digit hex value, without a preceding '#'. See also {@link #nodeHighlightOnDrop} and
|
|
* {@link #nodeHighlightOnRepair}.
|
|
*/
|
|
nodeHighlightColor: 'c3daf9',
|
|
|
|
/**
|
|
* @cfg {Boolean} nodeHighlightOnDrop
|
|
* Whether or not to highlight any nodes after they are
|
|
* successfully dropped on their target. Defaults to the value of `Ext.enableFx`.
|
|
* See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnRepair}.
|
|
*/
|
|
nodeHighlightOnDrop: Ext.enableFx,
|
|
|
|
/**
|
|
* @cfg {Boolean} nodeHighlightOnRepair
|
|
* Whether or not to highlight any nodes after they are
|
|
* repaired from an unsuccessful drag/drop. Defaults to the value of `Ext.enableFx`.
|
|
* See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnDrop}.
|
|
*/
|
|
nodeHighlightOnRepair: Ext.enableFx,
|
|
|
|
/**
|
|
* @cfg {String} displayField
|
|
* The name of the model field that is used to display the text for the nodes
|
|
*/
|
|
displayField: 'text',
|
|
|
|
init : function(view) {
|
|
view.on('render', this.onViewRender, this, {single: true});
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
* AbstractComponent calls destroy on all its plugins at destroy time.
|
|
*/
|
|
destroy: function() {
|
|
Ext.destroy(this.dragZone, this.dropZone);
|
|
},
|
|
|
|
onViewRender : function(view) {
|
|
var me = this,
|
|
scrollEl;
|
|
|
|
if (me.enableDrag) {
|
|
if (me.containerScroll) {
|
|
scrollEl = view.getEl();
|
|
}
|
|
me.dragZone = new Ext.tree.ViewDragZone({
|
|
view: view,
|
|
ddGroup: me.dragGroup || me.ddGroup,
|
|
dragText: me.dragText,
|
|
displayField: me.displayField,
|
|
repairHighlightColor: me.nodeHighlightColor,
|
|
repairHighlight: me.nodeHighlightOnRepair,
|
|
scrollEl: scrollEl
|
|
});
|
|
}
|
|
|
|
if (me.enableDrop) {
|
|
me.dropZone = new Ext.tree.ViewDropZone({
|
|
view: view,
|
|
ddGroup: me.dropGroup || me.ddGroup,
|
|
allowContainerDrops: me.allowContainerDrops,
|
|
appendOnly: me.appendOnly,
|
|
allowParentInserts: me.allowParentInserts,
|
|
expandDelay: me.expandDelay,
|
|
dropHighlightColor: me.nodeHighlightColor,
|
|
dropHighlight: me.nodeHighlightOnDrop,
|
|
sortOnDrop: me.sortOnDrop,
|
|
containerScroll: me.containerScroll
|
|
});
|
|
}
|
|
}
|
|
}, function(){
|
|
var proto = this.prototype;
|
|
proto.nodeHighlightOnDrop = proto.nodeHighlightOnRepair = Ext.enableFx;
|
|
});
|
|
|
|
/**
|
|
* Utility class for setting/reading values from browser cookies.
|
|
* Values can be written using the {@link #set} method.
|
|
* Values can be read using the {@link #get} method.
|
|
* A cookie can be invalidated on the client machine using the {@link #clear} method.
|
|
*/
|
|
Ext.define('Ext.util.Cookies', {
|
|
singleton: true,
|
|
|
|
/**
|
|
* Creates a cookie with the specified name and value. Additional settings for the cookie may be optionally specified
|
|
* (for example: expiration, access restriction, SSL).
|
|
* @param {String} name The name of the cookie to set.
|
|
* @param {Object} value The value to set for the cookie.
|
|
* @param {Object} [expires] Specify an expiration date the cookie is to persist until. Note that the specified Date
|
|
* object will be converted to Greenwich Mean Time (GMT).
|
|
* @param {String} [path] Setting a path on the cookie restricts access to pages that match that path. Defaults to all
|
|
* pages ('/').
|
|
* @param {String} [domain] Setting a domain restricts access to pages on a given domain (typically used to allow
|
|
* cookie access across subdomains). For example, "sencha.com" will create a cookie that can be accessed from any
|
|
* subdomain of sencha.com, including www.sencha.com, support.sencha.com, etc.
|
|
* @param {Boolean} [secure] Specify true to indicate that the cookie should only be accessible via SSL on a page
|
|
* using the HTTPS protocol. Defaults to false. Note that this will only work if the page calling this code uses the
|
|
* HTTPS protocol, otherwise the cookie will be created with default options.
|
|
*/
|
|
set : function(name, value){
|
|
var argv = arguments,
|
|
argc = arguments.length,
|
|
expires = (argc > 2) ? argv[2] : null,
|
|
path = (argc > 3) ? argv[3] : '/',
|
|
domain = (argc > 4) ? argv[4] : null,
|
|
secure = (argc > 5) ? argv[5] : false;
|
|
|
|
document.cookie = name + "=" + escape(value) + ((expires === null) ? "" : ("; expires=" + expires.toGMTString())) + ((path === null) ? "" : ("; path=" + path)) + ((domain === null) ? "" : ("; domain=" + domain)) + ((secure === true) ? "; secure" : "");
|
|
},
|
|
|
|
/**
|
|
* Retrieves cookies that are accessible by the current page. If a cookie does not exist, `get()` returns null. The
|
|
* following example retrieves the cookie called "valid" and stores the String value in the variable validStatus.
|
|
*
|
|
* var validStatus = Ext.util.Cookies.get("valid");
|
|
*
|
|
* @param {String} name The name of the cookie to get
|
|
* @return {Object} Returns the cookie value for the specified name;
|
|
* null if the cookie name does not exist.
|
|
*/
|
|
get : function(name){
|
|
var arg = name + "=",
|
|
alen = arg.length,
|
|
clen = document.cookie.length,
|
|
i = 0,
|
|
j = 0;
|
|
|
|
while(i < clen){
|
|
j = i + alen;
|
|
if(document.cookie.substring(i, j) == arg){
|
|
return this.getCookieVal(j);
|
|
}
|
|
i = document.cookie.indexOf(" ", i) + 1;
|
|
if(i === 0){
|
|
break;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Removes a cookie with the provided name from the browser
|
|
* if found by setting its expiration date to sometime in the past.
|
|
* @param {String} name The name of the cookie to remove
|
|
* @param {String} [path] The path for the cookie.
|
|
* This must be included if you included a path while setting the cookie.
|
|
*/
|
|
clear : function(name, path){
|
|
if(this.get(name)){
|
|
path = path || '/';
|
|
document.cookie = name + '=' + '; expires=Thu, 01-Jan-70 00:00:01 GMT; path=' + path;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getCookieVal : function(offset){
|
|
var endstr = document.cookie.indexOf(";", offset);
|
|
if(endstr == -1){
|
|
endstr = document.cookie.length;
|
|
}
|
|
return unescape(document.cookie.substring(offset, endstr));
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @class Ext.util.Grouper
|
|
|
|
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', {
|
|
|
|
/* Begin Definitions */
|
|
|
|
extend: Ext.util.Sorter ,
|
|
|
|
/* End Definitions */
|
|
|
|
isGrouper: true,
|
|
|
|
/**
|
|
* Returns the value for grouping to be used.
|
|
* @param {Ext.data.Model} instance The Model instance
|
|
* @return {String} The group string for this model
|
|
*/
|
|
getGroupString: function(instance) {
|
|
return instance.get(this.property);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* History management component that allows you to register arbitrary tokens that signify application
|
|
* history state on navigation actions. You can then handle the history {@link #change} event in order
|
|
* to reset your application UI to the appropriate state when the user navigates forward or backward through
|
|
* the browser history stack.
|
|
*
|
|
* ## Initializing
|
|
*
|
|
* The {@link #init} method of the History object must be called before using History. This sets up the internal
|
|
* state and must be the first thing called before using History.
|
|
*/
|
|
Ext.define('Ext.util.History', {
|
|
singleton: true,
|
|
alternateClassName: 'Ext.History',
|
|
mixins: {
|
|
observable: Ext.util.Observable
|
|
},
|
|
|
|
/**
|
|
* @property
|
|
* True to use `window.top.location.hash` or false to use `window.location.hash`.
|
|
*/
|
|
useTopWindow: true,
|
|
|
|
/**
|
|
* @property
|
|
* The id of the hidden field required for storing the current history token.
|
|
*/
|
|
fieldId: Ext.baseCSSPrefix + 'history-field',
|
|
/**
|
|
* @property
|
|
* The id of the iframe required by IE to manage the history stack.
|
|
*/
|
|
iframeId: Ext.baseCSSPrefix + 'history-frame',
|
|
|
|
constructor: function() {
|
|
var me = this;
|
|
me.oldIEMode = Ext.isIE7m || !Ext.isStrict && Ext.isIE8;
|
|
me.iframe = null;
|
|
me.hiddenField = null;
|
|
me.ready = false;
|
|
me.currentToken = null;
|
|
me.mixins.observable.constructor.call(me);
|
|
},
|
|
|
|
getHash: function() {
|
|
var href = window.location.href,
|
|
i = href.indexOf("#");
|
|
|
|
return i >= 0 ? href.substr(i + 1) : null;
|
|
},
|
|
|
|
setHash: function (hash) {
|
|
var me = this,
|
|
win = me.useTopWindow ? window.top : window;
|
|
try {
|
|
win.location.hash = hash;
|
|
} catch (e) {
|
|
// IE can give Access Denied (esp. in popup windows)
|
|
}
|
|
},
|
|
|
|
doSave: function() {
|
|
this.hiddenField.value = this.currentToken;
|
|
},
|
|
|
|
|
|
handleStateChange: function(token) {
|
|
this.currentToken = token;
|
|
this.fireEvent('change', token);
|
|
},
|
|
|
|
updateIFrame: function(token) {
|
|
var html = '<html><body><div id="state">' +
|
|
Ext.util.Format.htmlEncode(token) +
|
|
'</div></body></html>',
|
|
doc;
|
|
|
|
try {
|
|
doc = this.iframe.contentWindow.document;
|
|
doc.open();
|
|
doc.write(html);
|
|
doc.close();
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
checkIFrame: function () {
|
|
var me = this,
|
|
contentWindow = me.iframe.contentWindow,
|
|
doc, elem, oldToken, oldHash;
|
|
|
|
if (!contentWindow || !contentWindow.document) {
|
|
Ext.Function.defer(this.checkIFrame, 10, this);
|
|
return;
|
|
}
|
|
|
|
doc = contentWindow.document;
|
|
elem = doc.getElementById("state");
|
|
oldToken = elem ? elem.innerText : null;
|
|
oldHash = me.getHash();
|
|
|
|
Ext.TaskManager.start({
|
|
run: function () {
|
|
var doc = contentWindow.document,
|
|
elem = doc.getElementById("state"),
|
|
newToken = elem ? elem.innerText : null,
|
|
newHash = me.getHash();
|
|
|
|
if (newToken !== oldToken) {
|
|
oldToken = newToken;
|
|
me.handleStateChange(newToken);
|
|
me.setHash(newToken);
|
|
oldHash = newToken;
|
|
me.doSave();
|
|
} else if (newHash !== oldHash) {
|
|
oldHash = newHash;
|
|
me.updateIFrame(newHash);
|
|
}
|
|
},
|
|
interval: 50,
|
|
scope: me
|
|
});
|
|
me.ready = true;
|
|
me.fireEvent('ready', me);
|
|
},
|
|
|
|
startUp: function () {
|
|
var me = this,
|
|
hash;
|
|
|
|
me.currentToken = me.hiddenField.value || this.getHash();
|
|
|
|
if (me.oldIEMode) {
|
|
me.checkIFrame();
|
|
} else {
|
|
hash = me.getHash();
|
|
Ext.TaskManager.start({
|
|
run: function () {
|
|
var newHash = me.getHash();
|
|
if (newHash !== hash) {
|
|
hash = newHash;
|
|
me.handleStateChange(hash);
|
|
me.doSave();
|
|
}
|
|
},
|
|
interval: 50,
|
|
scope: me
|
|
});
|
|
me.ready = true;
|
|
me.fireEvent('ready', me);
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Initializes the global History instance.
|
|
* @param {Function} [onReady] A callback function that will be called once the history
|
|
* component is fully initialized.
|
|
* @param {Object} [scope] The scope (`this` reference) in which the callback is executed.
|
|
* Defaults to the browser window.
|
|
*/
|
|
init: function (onReady, scope) {
|
|
var me = this,
|
|
DomHelper = Ext.DomHelper;
|
|
|
|
if (me.ready) {
|
|
Ext.callback(onReady, scope, [me]);
|
|
return;
|
|
}
|
|
|
|
if (!Ext.isReady) {
|
|
Ext.onReady(function() {
|
|
me.init(onReady, scope);
|
|
});
|
|
return;
|
|
}
|
|
|
|
/*
|
|
<form id="history-form" class="x-hide-display">
|
|
<input type="hidden" id="x-history-field" />
|
|
<iframe id="x-history-frame"></iframe>
|
|
</form>
|
|
*/
|
|
me.hiddenField = Ext.getDom(me.fieldId);
|
|
if (!me.hiddenField) {
|
|
me.hiddenField = Ext.getBody().createChild({
|
|
id: Ext.id(),
|
|
tag: 'form',
|
|
cls: Ext.baseCSSPrefix + 'hide-display',
|
|
children: [{
|
|
tag: 'input',
|
|
type: 'hidden',
|
|
id: me.fieldId
|
|
}]
|
|
}, false, true).firstChild;
|
|
}
|
|
|
|
if (me.oldIEMode) {
|
|
me.iframe = Ext.getDom(me.iframeId);
|
|
if (!me.iframe) {
|
|
me.iframe = DomHelper.append(me.hiddenField.parentNode, {
|
|
tag: 'iframe',
|
|
id: me.iframeId,
|
|
src: Ext.SSL_SECURE_URL
|
|
});
|
|
}
|
|
}
|
|
|
|
me.addEvents(
|
|
/**
|
|
* @event ready
|
|
* Fires when the Ext.util.History singleton has been initialized and is ready for use.
|
|
* @param {Ext.util.History} The Ext.util.History singleton.
|
|
*/
|
|
'ready',
|
|
/**
|
|
* @event change
|
|
* Fires when navigation back or forwards within the local page's history occurs.
|
|
* @param {String} token An identifier associated with the page state at that point in its history.
|
|
*/
|
|
'change'
|
|
);
|
|
|
|
if (onReady) {
|
|
me.on('ready', onReady, scope, {single: true});
|
|
}
|
|
me.startUp();
|
|
},
|
|
|
|
/**
|
|
* Add a new token to the history stack. This can be any arbitrary value, although it would
|
|
* commonly be the concatenation of a component id and another id marking the specific history
|
|
* state of that component. Example usage:
|
|
*
|
|
* // Handle tab changes on a TabPanel
|
|
* tabPanel.on('tabchange', function(tabPanel, tab){
|
|
* Ext.History.add(tabPanel.id + ':' + tab.id);
|
|
* });
|
|
*
|
|
* @param {String} token The value that defines a particular application-specific history state
|
|
* @param {Boolean} [preventDuplicates=true] When true, if the passed token matches the current token
|
|
* it will not save a new history step. Set to false if the same state can be saved more than once
|
|
* at the same history stack location.
|
|
*/
|
|
add: function (token, preventDup) {
|
|
var me = this;
|
|
|
|
if (preventDup !== false) {
|
|
if (me.getToken() === token) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
if (me.oldIEMode) {
|
|
return me.updateIFrame(token);
|
|
} else {
|
|
me.setHash(token);
|
|
return true;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
|
|
*/
|
|
back: function() {
|
|
window.history.go(-1);
|
|
},
|
|
|
|
/**
|
|
* Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
|
|
*/
|
|
forward: function(){
|
|
window.history.go(1);
|
|
},
|
|
|
|
/**
|
|
* Retrieves the currently-active history token.
|
|
* @return {String} The token
|
|
*/
|
|
getToken: function() {
|
|
return this.ready ? this.currentToken : this.getHash();
|
|
}
|
|
});
|
|
|