-Employee = Ext.extend(Ext.util.Observable, {
- constructor: function(config){
- this.name = config.name;
- this.addEvents({
- "fired" : true,
- "quit" : true
- });
-
- // Copy configured listeners into *this* object so that the base class's
- // constructor will add them.
- this.listeners = config.listeners;
-
- // Call our superclass constructor to complete construction process.
- Employee.superclass.constructor.call(this, config)
- }
-});
-
-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!");
- }
- }
-});
-this reference) in which the function is executed. Defaults to the Observable firing the event.
+ * @param {Object} scope (optional) The scope (`this` reference) in which the function is executed. Defaults to
+ * the Observable firing the event.
* @static
*/
capture: function(o, fn, scope) {
@@ -72,22 +81,21 @@ Ext.define('Ext.util.Observable', {
},
/**
-Sets observability on the passed class constructor.
-
-This makes any event fired on any instance of the passed class also fire a single event through
-the __class__ allowing for central handling of events on many instances at once.
-
-Usage:
-
- Ext.util.Observable.observe(Ext.data.Connection);
- Ext.data.Connection.on('beforerequest', function(con, options) {
- console.log('Ajax request made to ' + options.url);
- });
-
+ * Sets observability on the passed class constructor.
+ *
+ * This makes any event fired on any instance of the passed class also fire a single event through
+ * the **class** allowing for central handling of events on many instances at once.
+ *
+ * Usage:
+ *
+ * Ext.util.Observable.observe(Ext.data.Connection);
+ * Ext.data.Connection.on('beforerequest', function(con, options) {
+ * console.log('Ajax request made to ' + options.url);
+ * });
+ *
* @param {Function} c The class constructor to make observable.
* @param {Object} listeners An object containing a series of listeners to add. See {@link #addListener}.
* @static
- * @markdown
*/
observe: function(cls, listeners) {
if (cls) {
@@ -106,36 +114,38 @@ Usage:
/* End Definitions */
/**
- * @cfg {Object} listeners (optional) A config object containing one or more event handlers to be added to this - * object during initialization. This should be a valid listeners config object as specified in the - * {@link #addListener} example for attaching multiple handlers at once.
- *DOM events from ExtJs {@link Ext.Component Components}
- *While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
- * is usually only done when extra value can be added. For example the {@link Ext.view.View DataView}'s
- * {@link Ext.view.View#click click} event passing the node clicked on. To access DOM
- * events directly from a child element of a Component, we need to specify the element option to
- * identify the Component property to add a DOM listener to:
- *
-new Ext.panel.Panel({
- width: 400,
- height: 200,
- dockedItems: [{
- xtype: 'toolbar'
- }],
- listeners: {
- click: {
- element: 'el', //bind to the underlying el property on the panel
- fn: function(){ console.log('click el'); }
- },
- dblclick: {
- element: 'body', //bind to the underlying body property on the panel
- fn: function(){ console.log('dblclick body'); }
- }
- }
-});
-Adds listeners to any Observable object (or Element) which are automatically removed when this Component
- * is destroyed.
- * @param {Observable/Element} item The item to which to add a listener/listeners.
+ * 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} opt Optional. If the ename parameter was an event name, this
- * is the {@link Ext.util.Observable#addListener addListener} options.
+ * @param {Function} fn (optional) If the `ename` parameter was an event name, this is the handler function.
+ * @param {Object} scope (optional) If the `ename` parameter was an event name, this is the scope (`this` reference)
+ * in which the handler function is executed.
+ * @param {Object} opt (optional) If the `ename` parameter was an event name, this is the
+ * {@link Ext.util.Observable#addListener addListener} options.
*/
addManagedListener : function(item, ename, fn, scope, options) {
var me = this,
managedListeners = me.managedListeners = me.managedListeners || [],
config;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -200,23 +210,22 @@ new Ext.panel.Panel({
/**
* Removes listeners that were added by the {@link #mon} method.
- * @param {Observable|Element} item The item from which to remove a listener/listeners.
- * @param {Object|String} ename The event name, or an object containing event name properties.
- * @param {Function} fn Optional. If the ename parameter was an event name, this
- * is the handler function.
- * @param {Object} scope Optional. If the ename parameter was an event name, this
- * is the scope (this reference) in which the handler function is executed.
+ *
+ * @param {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) {
+ removeManagedListener : function(item, ename, fn, scope) {
var me = this,
options,
config,
managedListeners,
- managedListener,
length,
i;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -229,116 +238,171 @@ new Ext.panel.Panel({
}
managedListeners = me.managedListeners ? me.managedListeners.slice() : [];
- length = managedListeners.length;
- for (i = 0; i < length; i++) {
- managedListener = managedListeners[i];
- if (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope)) {
- Ext.Array.remove(me.managedListeners, managedListener);
- item.un(managedListener.ename, managedListener.fn, managedListener.scope);
- }
+ for (i = 0, length = managedListeners.length; i < length; i++) {
+ me.removeManagedListenerItem(false, managedListeners[i], item, ename, fn, scope);
}
},
/**
- *
Fires the specified event with the passed parameters (minus the event name).
- *An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) - * by calling {@link #enableBubble}.
+ * Fires the specified event with the passed parameters (minus the event name, plus the `options` object passed + * to {@link #addListener}). + * + * An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget}) by + * calling {@link #enableBubble}. + * * @param {String} eventName The name of the event to fire. * @param {Object...} args Variable number of parameters are passed to handlers. * @return {Boolean} returns false if any of the handlers return false otherwise it returns true. */ - fireEvent: function() { - var me = this, - args = Ext.Array.toArray(arguments), - ename = args[0].toLowerCase(), - ret = true, - event = me.events[ename], - queue = me.eventQueue, - parent; + fireEvent: function(eventName) { + var name = eventName.toLowerCase(), + events = this.events, + event = events && events[name], + bubbles = event && event.bubble; - if (me.eventsSuspended === true) { - if (queue) { - queue.push(args); - } - } else if (event && Ext.isObject(event) && event.bubble) { - if (event.fire.apply(event, args.slice(1)) === false) { - return false; - } - parent = me.getBubbleTarget && me.getBubbleTarget(); - if (parent && parent.isObservable) { - if (!parent.events[ename] || !Ext.isObject(parent.events[ename]) || !parent.events[ename].bubble) { - parent.enableBubble(ename); + return this.continueFireEvent(name, Ext.Array.slice(arguments, 1), bubbles); + }, + + /** + * 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 === true) { + 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; + } } - return parent.fireEvent.apply(parent, args); } - } else if (event && Ext.isObject(event)) { - args.shift(); - ret = event.fire.apply(event, args); - } + } 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. - * @param {String} eventName The name of the event to listen for. May also be an object who's property names are event names. See - * @param {Function} handler The method the event invokes. - * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * properties. This may contain any of the following properties:this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.This option is useful during Component construction to add DOM event listeners to elements of {@link Ext.Component Components} which - * will exist only after the Component is rendered. For example, to add a click listener to a Panel's body:
-new Ext.panel.Panel({
- title: 'The title',
- listeners: {
- click: this.handlePanelClick,
- element: 'body'
- }
-});
-When added in this way, the options available are the options applicable to {@link Ext.core.Element#addListener}
- * Combining Options
- * Using the options argument, it is possible to combine different types of listeners:
- *
+ *
+ * @param {String} eventName The name of the event to listen for. May also be an object who's property names are
+ * event names.
+ * @param {Function} fn The method the event invokes. Will be called with arguments given to
+ * {@link #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:
+ *
+ * - **scope** : Object
+ *
+ * The scope (`this` reference) in which the handler function is executed. **If omitted, defaults to the object
+ * which fired the event.**
+ *
+ * - **delay** : Number
+ *
+ * The number of milliseconds to delay the invocation of the handler after the event fires.
+ *
+ * - **single** : Boolean
+ *
+ * True to add a handler to handle just the next firing of the event, and then remove itself.
+ *
+ * - **buffer** : Number
+ *
+ * Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed by the specified number of
+ * milliseconds. If the event fires again within that time, the original handler is _not_ invoked, but the new
+ * handler is scheduled in its place.
+ *
+ * - **target** : Observable
+ *
+ * Only call the handler if the event was fired on the target Observable, _not_ if the event was bubbled up from a
+ * child Observable.
+ *
+ * - **element** : String
+ *
+ * **This option is only valid for listeners bound to {@link Ext.Component Components}.** The name of a Component
+ * property which references an element to add a listener to.
+ *
+ * This option is useful during Component construction to add DOM event listeners to elements of
+ * {@link Ext.Component Components} which will exist only after the Component is rendered.
+ * For example, to add a click listener to a Panel's body:
+ *
+ * new Ext.panel.Panel({
+ * title: 'The title',
+ * listeners: {
+ * click: this.handlePanelClick,
+ * element: 'body'
+ * }
+ * });
+ *
+ * **Combining Options**
+ *
+ * Using the options argument, it is possible to combine different types of listeners:
+ *
* A delayed, one-time listener.
- *
-myPanel.on('hide', this.handleClick, this, {
-single: true,
-delay: 100
-});
- * Attaching multiple handlers in 1 call
- * The method also allows for a single argument to be passed which is a config object containing properties
- * which specify multiple events. For example:
-myGridPanel.on({
- cellClick: this.onCellClick,
- mouseover: this.onMouseOver,
- mouseout: this.onMouseOut,
- scope: this // Important. Ensure "this" is correct during handler execution
-});
-
+ *
+ * myPanel.on('hide', this.handleClick, this, {
+ * single: true,
+ * delay: 100
+ * });
+ *
+ * **Attaching multiple handlers in 1 call**
+ *
+ * The method also allows for a single argument to be passed which is a config object containing properties which
+ * specify multiple events. For example:
+ *
+ * myGridPanel.on({
+ * cellClick: this.onCellClick,
+ * mouseover: this.onMouseOver,
+ * mouseout: this.onMouseOut,
+ * scope: this // Important. Ensure "this" is correct during handler execution
+ * });
+ *
+ * One can also specify options for each event handler separately:
+ *
+ * myGridPanel.on({
+ * cellClick: {fn: this.onCellClick, scope: this, single: true},
+ * mouseover: {fn: panel.onMouseOver, scope: panel}
+ * });
+ *
*/
addListener: function(ename, fn, scope, options) {
var me = this,
config,
event;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -362,9 +426,12 @@ myGridPanel.on({
/**
* Removes an event handler.
- * @param {String} eventName The type of event the handler was associated with.
- * @param {Function} handler The handler to remove. This must be a reference to the function passed into the {@link #addListener} call.
- * @param {Object} scope (optional) The scope originally specified for the handler.
+ *
+ * @param {String} eventName The type of event the handler was associated with.
+ * @param {Function} fn The handler to remove. **This must be a reference to the function passed into the
+ * {@link #addListener} call.**
+ * @param {Object} scope (optional) The scope originally specified for the handler. It must be the same as the
+ * scope argument specified in the original call to {@link #addListener} or the listener will not be removed.
*/
removeListener: function(ename, fn, scope) {
var me = this,
@@ -372,7 +439,7 @@ myGridPanel.on({
event,
options;
- if (Ext.isObject(ename)) {
+ if (typeof ename !== 'string') {
options = ename;
for (ename in options) {
if (options.hasOwnProperty(ename)) {
@@ -385,7 +452,7 @@ myGridPanel.on({
} else {
ename = ename.toLowerCase();
event = me.events[ename];
- if (event.isEvent) {
+ if (event && event.isEvent) {
event.removeListener(fn, scope);
}
}
@@ -413,7 +480,9 @@ myGridPanel.on({
//true
- * or the first event name string if multiple event names are being passed as separate parameters.
- * @param {String} [additional] Optional additional event names if multiple event names are being passed as separate parameters.
- * Usage:
-this.addEvents('storeloaded', 'storecleared');
-queueSuspended parameter, then all
- * events fired during event suspension will be sent to any listeners now.
+ * Resumes firing events (see {@link #suspendEvents}).
+ *
+ * If events were suspended using the `queueSuspended` parameter, then all events fired
+ * during event suspension will be sent to any listeners now.
*/
resumeEvents: function() {
var me = this,
- queued = me.eventQueue || [];
+ queued = me.eventQueue;
me.eventsSuspended = false;
delete me.eventQueue;
- Ext.each(queued,
- function(e) {
- me.fireEvent.apply(me, e);
- });
+ if (queued) {
+ Ext.each(queued, function(e) {
+ me.continueFireEvent.apply(me, e);
+ });
+ }
},
/**
- * Relays selected events from the specified Observable as if the events were fired by this.
+ * Relays selected events from the specified Observable as if the events were fired by `this`.
+ *
* @param {Object} origin The Observable whose events this object is to relay.
- * @param {Array} events Array of event names to relay.
+ * @param {String[]} events Array of event names to relay.
+ * @param {String} prefix
*/
relayEvents : function(origin, events, prefix) {
prefix = prefix || '';
@@ -545,41 +644,45 @@ this.addEvents('storeloaded', 'storecleared');
},
/**
- * Enables events fired by this Observable to bubble up an owner hierarchy by calling
- * this.getBubbleTarget() if present. There is no implementation in the Observable base class.
This is commonly used by Ext.Components to bubble events to owner Containers. See {@link Ext.Component#getBubbleTarget}. The default - * implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to - * access the required target more quickly.
- *Example:
-Ext.override(Ext.form.field.Base, {
-// Add functionality to Field's initComponent to enable the change event to bubble
-initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
- this.enableBubble('change');
-}),
-
-// We know that we want Field's events to bubble directly to the FormPanel.
-getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
-}
-});
-
-var myForm = new Ext.formPanel({
-title: 'User Details',
-items: [{
- ...
-}],
-listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
-}
-});
-this reference) in which the handler function is executed.
- * If omitted, defaults to the object which fired the event.
- * @param {Object} options (optional) An object containing handler configuration.
- * @method on
- */
this.createAlias({
+ /**
+ * @method
+ * Shorthand for {@link #addListener}.
+ * @alias Ext.util.Observable#addListener
+ */
on: 'addListener',
+ /**
+ * @method
+ * Shorthand for {@link #removeListener}.
+ * @alias Ext.util.Observable#removeListener
+ */
un: 'removeListener',
+ /**
+ * @method
+ * Shorthand for {@link #addManagedListener}.
+ * @alias Ext.util.Observable#addManagedListener
+ */
mon: 'addManagedListener',
+ /**
+ * @method
+ * Shorthand for {@link #removeManagedListener}.
+ * @alias Ext.util.Observable#removeManagedListener
+ */
mun: 'removeManagedListener'
});
@@ -719,13 +825,13 @@ listeners: {
i, len;
for(i = 0, len = e.before.length; i < len; i++){
if(e.before[i].fn == fn && e.before[i].scope == scope){
- e.before.splice(i, 1);
+ Ext.Array.erase(e.before, i, 1);
return;
}
}
for(i = 0, len = e.after.length; i < len; i++){
if(e.after[i].fn == fn && e.after[i].scope == scope){
- e.after.splice(i, 1);
+ Ext.Array.erase(e.after, i, 1);
return;
}
}
@@ -747,7 +853,7 @@ listeners: {
* 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.core.Element}, {@link Ext.CompositeElement},
+ * 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).
@@ -865,7 +971,7 @@ listeners: {
*
* ## Animation Keyframes
*
- * You can also set up complex animations with {@link Ext.fx.Anim#keyframe keyframe} which follows the
+ * 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:
*
@@ -889,7 +995,7 @@ listeners: {
*
* ## Animation Events
*
- * Each animation you create has events for {@link Ext.fx.Anim#beforeanimation beforeanimation},
+ * 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.
@@ -950,7 +1056,7 @@ Ext.define('Ext.util.Animate', {
/**
* Perform custom animation on this object.
- *
This method is applicable to both the the {@link Ext.Component Component} class and the {@link Ext.core.Element Element} class. + *
This method is applicable to both the {@link Ext.Component Component} class and the {@link Ext.Element Element} class. * It performs animated transitions of certain properties of this object over a specified timeline.
*The sole parameter is an object which specifies start property values, end property values, and properties which
* describe the timeline. Of the properties listed below, only to is mandatory.
listeners beforeanimate event or the afteranimate event.from, to, and keyframe objects:x y Abstract base class for state provider implementations. The provider is responsible @@ -1154,7 +1266,7 @@ Ext.define('Ext.state.Provider', { /** * @event statechange * Fires when a state change occurs. - * @param {Provider} this This state provider + * @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 */ @@ -1166,8 +1278,8 @@ Ext.define('Ext.state.Provider', { /** * Returns the current value for a key * @param {String} name The key name - * @param {Mixed} defaultValue A default value to return if the key's value is not found - * @return {Mixed} The state data + * @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" ? @@ -1187,7 +1299,7 @@ Ext.define('Ext.state.Provider', { /** * Sets the value for a key * @param {String} name The key name - * @param {Mixed} value The value to set + * @param {Object} value The value to set */ set : function(name, value){ var me = this; @@ -1198,7 +1310,7 @@ Ext.define('Ext.state.Provider', { /** * Decodes a string previously encoded with {@link #encodeValue}. * @param {String} value The value to decode - * @return {Mixed} The decoded value + * @return {Object} The decoded value */ decodeValue : function(value){ @@ -1257,7 +1369,7 @@ Ext.define('Ext.state.Provider', { /** * Encodes a value including type information. Decode with {@link #decodeValue}. - * @param {Mixed} value The value to encode + * @param {Object} value The value to encode * @return {String} The encoded value */ encodeValue : function(value){ @@ -1297,161 +1409,684 @@ Ext.define('Ext.state.Provider', { } }); /** - * @class Ext.util.HashMap - *
- * 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}. - *
- * @constructor - * @param {Object} config The configuration options + * Components can be retrieved by using their {@link Ext.Component xtype} with an optional . prefix + * + * - `component` or `.component` + * - `gridpanel` or `.gridpanel` + * + * An itemId or id must be prefixed with a # + * + * - `#myContainer` + * + * Attributes must be wrapped in brackets + * + * - `component[autoScroll]` + * - `panel[title="Test"]` + * + * Member expressions from candidate Components may be tested. If the expression returns a *truthy* value, + * the candidate Component will be included in the query: + * + * var disabledFields = myFormPanel.query("{isDisabled()}"); + * + * Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}: + * + * // Function receives array and returns a filtered array. + * Ext.ComponentQuery.pseudos.invalid = function(items) { + * var i = 0, l = items.length, c, result = []; + * for (; i < l; i++) { + * if (!(c = items[i]).isValid()) { + * result.push(c); + * } + * } + * return result; + * }; + * + * var invalidFields = myFormPanel.query('field:invalid'); + * if (invalidFields.length) { + * invalidFields[0].getEl().scrollIntoView(myFormPanel.body); + * for (var i = 0, l = invalidFields.length; i < l; i++) { + * invalidFields[i].getEl().frame("red"); + * } + * } + * + * Default pseudos include: + * + * - not + * - last + * + * 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 and trees + * var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel'); + * + * For easy access to queries based from a particular Container see the {@link Ext.container.Container#query}, + * {@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see + * {@link Ext.Component#up}. */ -Ext.define('Ext.util.HashMap', { +Ext.define('Ext.ComponentQuery', { + singleton: true, + uses: ['Ext.ComponentManager'] +}, function() { - /** - * @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. - */ + var cq = this, - mixins: { - observable: 'Ext.util.Observable' - }, + // 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(''), - constructor: function(config) { - var me = this; + 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)); + }, - 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' - ); + 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; + }, - me.mixins.observable.constructor.call(me, config); - me.clear(true); - }, + getAncestors = function(items) { + var result = [], + i = 0, + length = items.length, + candidate; + for (; i < length; i++) { + candidate = items[i]; + while (!!(candidate = (candidate.ownerCt || candidate.floatParent))) { + result.push(candidate); + } + } + return result; + }, - /** - * Gets the number of items in the hash. - * @return {Number} The number of items in the hash. - */ - getCount: function() { - return this.length; - }, + // 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; + } + }, - /** - * 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); - } + // Filters the passed candidate array and returns only items which have the passed className + filterByClassName = function(items, className) { + var EA = Ext.Array, + result = [], + i = 0, + length = items.length, + candidate; + for (; i < length; i++) { + candidate = items[i]; + if (candidate.el ? candidate.el.hasCls(className) : EA.contains(candidate.initCls(), className)) { + result.push(candidate); + } + } + return result; + }, - return [key, value]; - }, + // Filters the passed candidate array and returns only items which have the specified property match + filterByAttribute = function(items, property, operator, value) { + var result = [], + i = 0, + length = items.length, + candidate; + for (; i < length; i++) { + candidate = items[i]; + if (!value ? !!candidate[property] : (String(candidate[property]) === value)) { + result.push(candidate); + } + } + return result; + }, - /** - * Extracts the key from an object. This is a default implementation, it may be overridden - * @private - * @param {Object} o The object to get the key from - * @return {String} The key to use. - */ - getKey: function(o) { - return o.id; - }, + // 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; + }, - /** - * Adds an item to the collection. Fires the {@link #add} event when complete. - * @param {String} keyThe 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, - data; + // 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); + }, - if (arguments.length === 1) { - value = key; - key = me.getKey(value); - } + // Determines leading mode + // > for direct child, and ^ to switch to ownerCt axis + modeRe = /^(\s?([>\^])\s?|\s|$)/, - if (me.containsKey(key)) { - me.replace(key, value); - } + // Matches a token with possibly (true|false) appended for the "shallow" parameter + tokenRe = /^(#)?([\w\-]+|\*)(?:\((true|false)\))?/, - data = me.getData(key, value); - key = data[0]; - value = data[1]; - me.map[key] = value; - ++me.length; - me.fireEvent('add', me, key, value); - return value; - }, + matchers = [{ + // Checks for .xtype with possibly (true|false) appended for the "shallow" parameter + re: /^\.([\w\-]+)(?:\((true|false)\))?/, + method: filterByXType + },{ + // checks for [attribute=value] + re: /^(?:[\[](?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]])/, + method: filterByAttribute + }, { + // checks for #cmpItemId + re: /^#([\w\-]+)/, + method: filterById + }, { + // checks for :+ * 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' + }, + + /** + * @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.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 #add} event when complete. + * @param {String} keyThe 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, + data; + + if (arguments.length === 1) { + value = key; + key = me.getKey(value); + } + + if (me.containsKey(key)) { + return me.replace(key, value); + } + + data = me.getData(key, value); + key = data[0]; + value = data[1]; + me.map[key] = value; + ++me.length; + me.fireEvent('add', me, key, value); + return value; + }, + + /** + * Replaces an item in the hash. If the key doesn't exist, the + * {@link #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; if (!me.containsKey(key)) { @@ -1640,10251 +2275,10142 @@ Ext.define('Ext.util.HashMap', { }); /** - * @class Ext.Template - *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: - *
-var t = new Ext.Template("<div>Hello {0}.</div>");
-t.{@link #append}('some-element', ['foo']);
- 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'});
- 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:
- *disableFormats reduces {@link #apply} time
- * when no formatting is required.
+// in your initialization function
+init : function(){
+ Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+ var win = new Window(...);
+ win.restoreState();
+}
+ 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}. By default, this function does
+ * nothing. The developer must provide an implementation which returns an
+ * object hash which represents the restorable state of the object.
The value yielded by getState is passed to {@link Ext.state.Manager#set}
+ * which uses the configured {@link Ext.state.Provider} to save the object
+ * keyed by the {@link #stateId}.
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
+ * more behaviour.
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: true, + + /** + * @cfg {String} stateId + * The unique id for this object to use for state management purposes. + *See {@link #stateful} for an explanation of saving and restoring state.
+ */ + + /** + * @cfg {String[]} stateEvents + *An array of events that, when fired, should trigger this object to
+ * save its state. Defaults to none. stateEvents may be any type
+ * of event supported by this object, including browser or custom events
+ * (e.g., ['click', 'customerchange']).
See {@link #stateful} for an explanation of saving and
+ * restoring object state.
values to the template and appends
- * the new node(s) to the specified el.
- * For example usage {@link #Template see the constructor}.
- * @param {Mixed} el The context element - * @param {Object/Array} values - * The template values. Can be an array if the params are numeric (i.e.{0})
- * or an object (i.e. {foo: 'bar'}).
- * @param {Boolean} returnElement (optional) true to return an Ext.core.Element (defaults to undefined)
- * @return {HTMLElement/Ext.core.Element} The new node or Element
+ * 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.
*/
- append: function(el, values, returnElement) {
- return this.doInsert('beforeEnd', el, values, returnElement);
+ 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;
},
- doInsert: function(where, el, values, returnEl) {
- el = Ext.getDom(el);
- var newNode = Ext.core.DomHelper.insertHtml(where, el, this.applyTemplate(values));
- return returnEl ? Ext.get(newNode, true) : newNode;
+ savePropsToState: function (propNames, state) {
+ var me = this;
+ Ext.each(propNames, function (propName) {
+ me.savePropToState(propName, state);
+ });
+ return state;
},
/**
- * Applies the supplied values to the template and overwrites the content of el with the new node(s).
- * @param {Mixed} el The context element
- * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
- * @return {HTMLElement/Ext.core.Element} The new node or Element
+ * Destroys this stateful object.
*/
- overwrite: function(el, values, returnElement) {
- el = Ext.getDom(el);
- el.innerHTML = this.applyTemplate(values);
- return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
+ destroy: function(){
+ var task = this.stateTask;
+ if (task) {
+ task.cancel();
+ }
+ this.clearListeners();
+
}
-}, function() {
- /**
- * Alias for {@link #applyTemplate}
- * Returns an HTML fragment of this template with the specified values applied.
- * @param {Object/Array} values
- * The template values. Can be an array if the params are numeric (i.e. {0})
- * or an object (i.e. {foo: 'bar'}).
- * @return {String} The HTML fragment
- * @member Ext.Template
- * @method apply
- */
- this.createAlias('apply', 'applyTemplate');
});
/**
- * @class Ext.ComponentQuery
- * @extends Object
- *
- * Provides searching of Components within Ext.ComponentManager (globally) or a specific
- * Ext.container.Container on the document with a similar syntax to a CSS selector.
- *
- * Components can be retrieved by using their {@link Ext.Component xtype} with an optional . prefix
-
-var disabledFields = myFormPanel.query("{isDisabled()}");
-
-// 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;
-};
+ * Base Manager class
+ */
+Ext.define('Ext.AbstractManager', {
-var invalidFields = myFormPanel.query('field:invalid');
-if (invalidFields.length) {
- invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
- for (var i = 0, l = invalidFields.length; i < l; i++) {
- invalidFields[i].getEl().frame("red");
- }
-}
-
- * Default pseudos include:
- * - not
- *
- // retrieve all Ext.Panels in the document by xtype
- var panelsArray = Ext.ComponentQuery.query('panel');
+ /* Begin Definitions */
- // retrieve all Ext.Panels within the container with an id myCt
- var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');
+ requires: ['Ext.util.HashMap'],
- // retrieve all direct children which are Ext.Panels within myCt
- var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');
+ /* End Definitions */
- // retrieve all gridpanels and listviews
- var gridsAndLists = Ext.ComponentQuery.query('gridpanel, listview');
-Returns an array of matched Components from within the passed root object.
- *This method filters returned Components in a similar way to how CSS selector based DOM - * queries work using a textual selector string.
- *See class summary for details.
- * @param selector The selector string to filter returned Components - * @param rootThe Container within which to perform the query. If omitted, all Components - * within the document are included in the search.
- *This parameter may also be an array of Components to filter according to the selector.
- * @returns {Array} The matched Components. - * @member Ext.ComponentQuery - * @method query - */ - 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]; - if (!query) { - this.cache[selector] = query = 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 component The Component to test - * @param selector The selector string to test against. - * @return {Boolean} True if the Component matches the selector. - * @member Ext.ComponentQuery - * @method query - */ - is: function(component, selector) { - if (!selector) { - return true; - } - var query = this.cache[selector]; - if (!query) { - this.cache[selector] = query = this.parse(selector); - } - return query.is(component); - }, - - 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; + //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
-});
+/**
+ * @class Ext.ComponentManager
+ * @extends Ext.AbstractManager
+ * Provides a registry of all Components (instances of {@link Ext.Component} or any subclass
+ * thereof) on a page so that they can be easily accessed by {@link Ext.Component component}
+ * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).
+ * This object also provides a registry of available Component classes
+ * indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
+ * The xtype provides a way to avoid instantiating child Components
+ * when creating a full, nested config object for a complete Ext page.
+ * A child Component may be specified simply as a config object
+ * as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
+ * needs rendering, the correct type can be looked up for lazy instantiation.
+ * For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
+ * @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 {Function} defaultType (optional) The constructor to provide the default Component type if
+ * the config object does not contain a xtype. (Optional if the config contains a xtype).
+ * @return {Ext.Component} The newly instantiated Component.
+ */
+ create: function(component, defaultType){
+ if (component instanceof Ext.AbstractComponent) {
+ return component;
+ }
+ else if (Ext.isString(component)) {
+ return Ext.createByAlias('widget.' + component);
+ }
+ else {
+ var type = component.xtype || defaultType,
+ config = component;
+
+ return Ext.createByAlias('widget.' + type, config);
+ }
+ },
-var longNameFilter = new Ext.util.Filter({
- filterFn: function(item) {
- return item.name.length > 4;
+ registerType: function(type, cls) {
+ this.types[type] = cls;
+ cls[this.typeName] = type;
+ cls.prototype[this.typeName] = type;
}
});
-
-//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 24:
-var youngFolk = allNames.filter(ageFilter);
-{desc}
' + * ], + * 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 #childEls} and {@link #addChildEls}. */ - createValueMatcher : function() { - var me = this, - value = me.value, - anyMatch = me.anyMatch, - exactMatch = me.exactMatch, - caseSensitive = me.caseSensitive, - escapeRe = Ext.String.escapeRegex; - - 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; - } -}); -/** - * @class Ext.util.Sorter - * @extends Object - * Represents a single sorter that can be applied to a Store - */ -Ext.define('Ext.util.Sorter', { /** - * @cfg {String} property The property to sort by. Required unless {@link #sorter} is provided + * @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: + * + * Ext.create('Ext.Component', { + * renderTo: Ext.getBody(), + * renderTpl: [ + * '{msg}
', + * ], + * 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 {Function} sorterFn A specific sorter function to execute. Can be passed instead of {@link #property} + * @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 `{@link #render}` also. */ - + /** - * @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 {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}. */ - + /** - * @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. + * @property {Object} frameSize + * Read-only property indicating the width of any framing elements which were added within the encapsulating element + * to provide graphical, rounded borders. See the {@link #frame} config. + * + * 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 The width of the top framing element in pixels. + * @property {Number} frameSize.right The width of the right framing element in pixels. + * @property {Number} frameSize.bottom The width of the bottom framing element in pixels. + * @property {Number} frameSize.left The width of the left framing element in pixels. */ - + /** - * @cfg {String} direction The direction to sort by. Defaults to ASC + * @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. */ - direction: "ASC", - - constructor: function(config) { - var me = this; - - Ext.apply(me, config); - - //
-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.core.Element#load} method - * will be used. - *
- */ -Ext.define('Ext.ElementLoader', { - /* Begin Definitions */ + /** + * @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. + */ + tplWriteMode: 'overwrite', - mixins: { - observable: 'Ext.util.Observable' - }, + /** + * @cfg {String} [baseCls='x-component'] + * The base CSS class to apply to this components'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', - uses: [ - 'Ext.data.Connection', - 'Ext.Ajax' - ], - - statics: { - Renderer: { - Html: function(loader, response, active){ - loader.getTarget().update(response.responseText, active.scripts === true); - return true; - } - } - }, + /** + * @cfg {String} componentCls + * CSS Class to be added to a components root level element to give distinction to it via styling. + */ - /* End Definitions */ + /** + * @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. + */ /** - * @cfg {String} url The url to retrieve the content from. Defaults to null. + * @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. */ - 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. Defaults to null. + * @cfg {String} [disabledCls='x-item-disabled'] + * CSS class to add when the Component is disabled. Defaults to 'x-item-disabled'. */ - params: null, + disabledCls: Ext.baseCSSPrefix + 'item-disabled', /** - * @cfg {Object} baseParams Params that will be attached to every request. These parameters - * will not be overridden by any params in the load options. Defaults to null. + * @cfg {String/String[]} ui + * A set style for a component. Can be a string or an Array of multiple strings (UIs) */ - baseParams: null, + ui: 'default', /** - * @cfg {Boolean/Object} autoLoad True to have the loader make a request as soon as it is created. Defaults to false. - * This argument can also be a set of options that will be passed to {@link #load} is called. + * @cfg {String[]} uiCls + * An array of of classNames which are currently applied to this component + * @private */ - autoLoad: false, + uiCls: [], /** - * @cfg {Mixed} target The target element for the loader. It can be the DOM element, the id or an Ext.Element. + * @cfg {String} 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' + * } + * }) + * ] + * }); */ - target: null, /** - * @cfg {Mixed} loadMask True or a string to show when the element is loading. + * @cfg {Number} width + * The width of this component in pixels. */ - loadMask: false, /** - * @cfg {Object} ajaxOptions Any additional options to be passed to the request, for example timeout or headers. Defaults to null. + * @cfg {Number} height + * The height of this component in pixels. */ - ajaxOptions: null, - + /** - * @cfg {Boolean} scripts True to parse any inline script tags in the response. + * @cfg {Number/String} border + * Specifies the border 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'. */ - scripts: false, /** - * @cfg {Function} success A function to be called when a load request is successful. + * @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'. */ /** - * @cfg {Function} failure A function to be called when a load request fails. + * @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'. */ /** - * @cfg {Object} scope The scope to execute the {@link #success} and {@link #failure} functions in. + * @cfg {Boolean} hidden + * True to hide the component. */ - + hidden: false, + /** - * @cfg {Function} renderer A custom function to render the content to the element. The passed parameters - * are - *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.
- */ + }, -Ext.define('Ext.layout.component.Component', { + // @private + render : function(container, position) { + var me = this; - /* Begin Definitions */ + if (!me.rendered && me.fireEvent('beforerender', me) !== false) { - extend: 'Ext.layout.Layout', + // Flag set during the render process. + // It can be used to inhibit event-driven layout calls during the render phase + me.rendering = true; - /* End Definitions */ + // If this.el is defined, we want to make sure we are dealing with + // an Ext Element. + if (me.el) { + me.el = Ext.get(me.el); + } - type: 'component', + // Perform render-time processing for floating Components + if (me.floating) { + me.onFloatRender(); + } - monitorChildren: true, + container = me.initContainer(container); - initLayout : function() { - var me = this, - owner = me.owner, - ownerEl = owner.el; + me.onRender(container, position); - if (!me.initialized) { - if (owner.frameSize) { - me.frameSize = owner.frameSize; - } - else { - owner.frameSize = me.frameSize = { - top: 0, - left: 0, - bottom: 0, - right: 0 - }; + // 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); } - } - me.callParent(arguments); - }, - beforeLayout : function(width, height, isSetSize, layoutOwner) { - this.callParent(arguments); + me.fireEvent('render', me); - var me = this, - owner = me.owner, - ownerCt = owner.ownerCt, - layout = owner.layout, - isVisible = owner.isVisible(true), - ownerElChild = owner.el.child, - layoutCollection; + me.initContent(); - /** - * Do not layout calculatedSized components for fixedLayouts unless the ownerCt == layoutOwner - * fixedLayouts means layouts which are never auto/auto in the sizing that comes from their ownerCt. - * Currently 3 layouts MAY be auto/auto (Auto, Border, and Box) - * The reason for not allowing component layouts is to stop component layouts from things such as Updater and - * form Validation. - */ - if (!isSetSize && !(Ext.isNumber(width) && Ext.isNumber(height)) && ownerCt && ownerCt.layout && ownerCt.layout.fixedLayout && ownerCt != layoutOwner) { - me.doContainerLayout(); - return false; - } + me.afterRender(container); + me.fireEvent('afterrender', me); - // If an ownerCt is hidden, add my reference onto the layoutOnShow stack. Set the needsLayout flag. - // If the owner itself is a directly hidden floater, set the needsLayout object on that for when it is shown. - if (!isVisible && (owner.hiddenAncestor || owner.floating)) { - if (owner.hiddenAncestor) { - layoutCollection = owner.hiddenAncestor.layoutOnShow; - layoutCollection.remove(owner); - layoutCollection.add(owner); + 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(); } - owner.needsLayout = { - width: width, - height: height, - isSetSize: false - }; - } - if (isVisible && this.needsLayout(width, height)) { - me.rawWidth = width; - me.rawHeight = height; - return owner.beforeComponentLayout(width, height, isSetSize, layoutOwner); - } - else { - return false; + if (me.disabled) { + // pass silent so the event doesn't fire the first time. + me.disable(true); + } + + // Delete the flag once the rendering is done. + delete me.rendering; } + return me; }, - /** - * Check if the new size is different from the current size and only - * trigger a layout if it is necessary. - * @param {Mixed} width The new width to set. - * @param {Mixed} height The new height to set. - */ - needsLayout : function(width, height) { - this.lastComponentSize = this.lastComponentSize || { - width: -Infinity, - height: -Infinity - }; - return (this.childrenChanged || this.lastComponentSize.width !== width || this.lastComponentSize.height !== height); + // @private + onRender : function(container, position) { + var me = this, + el = me.el, + styles = me.initStyles(), + renderTpl, renderData, i; + + position = me.getInsertPosition(position); + + if (!el) { + if (position) { + el = Ext.DomHelper.insertBefore(position, me.getElConfig(), true); + } + else { + el = Ext.DomHelper.append(container, me.getElConfig(), true); + } + } + else if (me.allowDomMove !== false) { + if (position) { + container.dom.insertBefore(el.dom, position); + } else { + container.dom.appendChild(el.dom); + } + } + + if (Ext.scopeResetCSS && !me.ownerCt) { + // If this component's el is the body element, we add the reset class to the html tag + if (el.dom == Ext.getBody().dom) { + el.parent().addCls(Ext.baseCSSPrefix + 'reset'); + } + else { + // Else we wrap this element in an element that adds the reset class. + me.resetEl = el.wrap({ + cls: Ext.baseCSSPrefix + 'reset' + }); + } + } + + me.setUI(me.ui); + + el.addCls(me.initCls()); + el.setStyle(styles); + + // Here we check if the component has a height set through style or css. + // If it does then we set the this.height to that value and it won't be + // considered an auto height component + // if (this.height === undefined) { + // var height = el.getHeight(); + // // This hopefully means that the panel has an explicit height set in style or css + // if (height - el.getPadding('tb') - el.getBorderWidth('tb') > 0) { + // this.height = height; + // } + // } + + me.el = el; + + me.initFrame(); + + renderTpl = me.initRenderTpl(); + if (renderTpl) { + renderData = me.initRenderData(); + renderTpl.append(me.getTargetEl(), renderData); + } + + me.applyRenderSelectors(); + + me.rendered = true; }, - /** - * Set the size of any element supporting undefined, null, and values. - * @param {Mixed} width The new width to set. - * @param {Mixed} height The new height to set. - */ - setElementSize: function(el, width, height) { - if (width !== undefined && height !== undefined) { - el.setSize(width, height); + // @private + afterRender : function() { + var me = this, + pos, + xy; + + me.getComponentLayout(); + + // Set the size if a size is configured, or if this is the outermost Container. + // Also, if this is a collapsed Panel, it needs an initial component layout + // to lay out its header so that it can have a height determined. + if (me.collapsed || (!me.ownerCt || (me.height || me.width))) { + me.setSize(me.width, me.height); + } else { + // It is expected that child items be rendered before this method returns and + // the afterrender event fires. Since we aren't going to do the layout now, we + // must render the child items. This is handled implicitly above in the layout + // caused by setSize. + me.renderChildren(); } - else if (height !== undefined) { - el.setHeight(height); + + // 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 && (me.x === undefined || me.y === undefined)) { + if (me.floatParent) { + xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c'); + pos = me.floatParent.getTargetEl().translatePoints(xy[0], xy[1]); + } else { + xy = me.el.getAlignToXY(me.container, 'c-c'); + pos = me.container.translatePoints(xy[0], xy[1]); + } + me.x = me.x === undefined ? pos.left: me.x; + me.y = me.y === undefined ? pos.top: me.y; } - else if (width !== undefined) { - el.setWidth(width); + + if (Ext.isDefined(me.x) || Ext.isDefined(me.y)) { + me.setPosition(me.x, me.y); + } + + if (me.styleHtmlContent) { + me.getTargetEl().addCls(me.styleHtmlCls); } }, /** - * Returns the owner component's resize element. - * @return {Ext.core.Element} + * @private + * Called by Component#doAutoRender + * + * Register a Container configured `floating: true` with this Component's {@link Ext.ZIndexManager ZIndexManager}. + * + * Components added in ths 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. */ - getTarget : function() { - return this.owner.el; - }, + registerFloatingItem: function(cmp) { + var me = this; + if (!me.floatingItems) { + me.floatingItems = Ext.create('Ext.ZIndexManager', me); + } + me.floatingItems.register(cmp); + }, - /** - *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.core.Element} - */ - getRenderTarget : function() { - return this.owner.el; + renderChildren: function () { + var me = this, + layout = me.getComponentLayout(); + + me.suspendLayout = true; + layout.renderChildren(); + delete me.suspendLayout; }, - /** - * Set the size of the target element. - * @param {Mixed} width The new width to set. - * @param {Mixed} height The new height to set. - */ - setTargetSize : function(width, height) { - var me = this; - me.setElementSize(me.owner.el, width, height); + frameCls: Ext.baseCSSPrefix + 'frame', - if (me.owner.frameBody) { - var targetInfo = me.getTargetInfo(), - padding = targetInfo.padding, - border = targetInfo.border, - frameSize = me.frameSize; + frameIdRegex: /[-]frame\d+[TMB][LCR]$/, - me.setElementSize(me.owner.frameBody, - Ext.isNumber(width) ? (width - frameSize.left - frameSize.right - padding.left - padding.right - border.left - border.right) : width, - Ext.isNumber(height) ? (height - frameSize.top - frameSize.bottom - padding.top - padding.bottom - border.top - border.bottom) : height - ); + frameElementCls: { + tl: [], + tc: [], + tr: [], + ml: [], + mc: [], + mr: [], + bl: [], + bc: [], + br: [] + }, + + frameTpl: [ + '
-// in your initialization function
-init : function(){
- Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
- var win = new Window(...);
- win.restoreState();
-}
- 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}. By default, this function does
- * nothing. The developer must provide an implementation which returns an
- * object hash which represents the restorable state of the object.
The value yielded by getState is passed to {@link Ext.state.Manager#set}
- * which uses the configured {@link Ext.state.Provider} to save the object
- * keyed by the {@link stateId}
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
- * more behaviour.
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: true, - - /** - * @cfg {String} stateId - * The unique id for this object to use for state management purposes. - *See {@link #stateful} for an explanation of saving and restoring state.
- */ - - /** - * @cfg {Array} stateEvents - *An array of events that, when fired, should trigger this object to
- * save its state (defaults to none). stateEvents may be any type
- * of event supported by this object, including browser or custom events
- * (e.g., ['click', 'customerchange']).
See {@link #stateful} for an explanation of saving and
- * restoring object state.
undefined if not found.
+ * 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.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
*/
- get : function(id) {
- return this.all.get(id);
+ 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;
},
/**
- * Registers an item to be managed
- * @param {Mixed} item The item to register
+ * Adds ctCls to container.
+ * @return {Ext.Element} The initialized container
+ * @private
*/
- register: function(item) {
- this.all.add(item);
+ 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 = Ext.get(container);
+
+ if (me.ctCls) {
+ me.container.addCls(me.ctCls);
+ }
+
+ return me.container;
},
/**
- * Unregisters an item by removing it from this manager
- * @param {Mixed} item The item to unregister
+ * 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
*/
- unregister: function(item) {
- this.all.remove(item);
+ initRenderData: function() {
+ var me = this;
+
+ return Ext.applyIf(me.renderData, {
+ id: me.id,
+ ui: me.ui,
+ uiCls: me.uiCls,
+ baseCls: me.baseCls,
+ componentCls: me.componentCls,
+ frame: me.frame
+ });
},
/**
- * 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 {Constructor} cls The new instance class.
+ * @private
*/
- registerType : function(type, cls) {
- this.types[type] = cls;
- cls[this.typeName] = type;
+ getTpl: function(name) {
+ var me = this,
+ prototype = me.self.prototype,
+ ownerPrototype,
+ tpl;
+
+ if (me.hasOwnProperty(name)) {
+ tpl = me[name];
+ if (tpl && !(tpl instanceof Ext.XTemplate)) {
+ me[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
+ }
+
+ return me[name];
+ }
+
+ if (!(prototype[name] instanceof Ext.XTemplate)) {
+ ownerPrototype = prototype;
+
+ do {
+ if (ownerPrototype.hasOwnProperty(name)) {
+ tpl = ownerPrototype[name];
+ if (tpl && !(tpl instanceof Ext.XTemplate)) {
+ ownerPrototype[name] = Ext.ClassManager.dynInstantiate('Ext.XTemplate', tpl);
+ break;
+ }
+ }
+
+ ownerPrototype = ownerPrototype.superclass;
+ } while (ownerPrototype);
+ }
+
+ return prototype[name];
},
/**
- * 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.
+ * Initializes the renderTpl.
+ * @return {Ext.XTemplate} The renderTpl XTemplate instance.
+ * @private
*/
- isRegistered : function(type){
- return this.types[type] !== undefined;
+ initRenderTpl: function() {
+ return this.getTpl('renderTpl');
},
/**
- * 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 {Mixed} The instance of whatever this manager is managing
+ * Converts style definitions to String.
+ * @return {String} A CSS style string with style, padding, margin and border.
+ * @private
*/
- create: function(config, defaultType) {
- var type = config[this.typeName] || config.type || defaultType,
- Constructor = this.types[type];
+ initStyles: function() {
+ var style = {},
+ me = this,
+ Element = Ext.Element;
- //this reference) in which the callback is executed. Defaults to the item.
+ * Initializes this components contents. It checks for the properties html, contentEl and tpl/data.
+ * @private
*/
- onAvailable : function(id, fn, scope){
- var all = this.all,
- item;
-
- if (all.containsKey(id)) {
- item = all.get(id);
- fn.call(scope || item, item);
- } else {
- all.on('add', function(map, key, item){
- if (key == id) {
- fn.call(scope || item, item);
- all.un('add', fn, scope);
- }
- });
+ initContent: function() {
+ var me = this,
+ target = me.getTargetEl(),
+ contentEl,
+ pre;
+
+ if (me.html) {
+ target.update(Ext.DomHelper.markup(me.html));
+ delete me.html;
+ }
+
+ if (me.contentEl) {
+ contentEl = Ext.get(me.contentEl);
+ pre = Ext.baseCSSPrefix;
+ contentEl.removeCls([pre + 'hidden', pre + 'hide-display', pre + 'hide-offsets', pre + 'hide-nosize']);
+ target.appendChild(contentEl.dom);
+ }
+
+ if (me.tpl) {
+ // Make sure this.tpl is an instantiated XTemplate
+ if (!me.tpl.isTemplate) {
+ me.tpl = Ext.create('Ext.XTemplate', me.tpl);
+ }
+
+ if (me.data) {
+ me.tpl[me.tplWriteMode](target, me.data);
+ delete me.data;
+ }
}
},
-
- /**
- * Executes the specified function once for each item in the collection.
- * Returning false from the function will cease iteration.
- *
- * The paramaters passed to the function are:
- *
The key of the item
The value of the item
The total number of items in the collection
Provides a registry of available Plugin classes indexed by a mnemonic code known as the Plugin's ptype.
- * The {@link Ext.Component#xtype xtype} provides a way to avoid instantiating child Components
- * when creating a full, nested config object for a complete Ext page.
A child Component may be specified simply as a config object
- * as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
- * needs rendering, the correct type can be looked up for lazy instantiation.
For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
ptype. (Optional if the config contains a ptype).
- * @return {Ext.Component} The newly instantiated Plugin.
+ * 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.
*/
- //create: function(plugin, defaultType) {
- // if (plugin instanceof this) {
- // return plugin;
- // } else {
- // var type, config = {};
- //
- // if (Ext.isString(plugin)) {
- // type = plugin;
- // }
- // else {
- // type = plugin[this.typeName] || defaultType;
- // config = plugin;
- // }
- //
- // return Ext.createByAlias('plugin.' + type, config);
- // }
- //},
+ removeChildEls: function (testFn) {
+ var me = this,
+ old = me.childEls,
+ keepers = (me.childEls = []),
+ n, i, cel;
- create : function(config, defaultType){
- if (config.init) {
- return config;
- } else {
- return Ext.createByAlias('plugin.' + (config.ptype || defaultType), config);
+ for (i = 0, n = old.length; i < n; ++i) {
+ cel = old[i];
+ if (!testFn(cel)) {
+ keepers.push(cel);
+ }
}
-
- // Prior system supported Singleton plugins.
- //var PluginCls = this.types[config.ptype || defaultType];
- //if (PluginCls.init) {
- // return PluginCls;
- //} else {
- // return new PluginCls(config);
- //}
},
/**
- * 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 {Array} All matching plugins
+ * Sets references to elements inside the component. This applies {@link #renderSelectors}
+ * as well as {@link #childEls}.
+ * @private
*/
- findByType: function(type, defaultsOnly) {
- var matches = [],
- types = this.types;
+ applyRenderSelectors: function() {
+ var me = this,
+ childEls = me.childEls,
+ selectors = me.renderSelectors,
+ el = me.el,
+ dom = el.dom,
+ baseId, childName, childId, i, selector;
+
+ if (childEls) {
+ baseId = me.id + '-';
+ for (i = childEls.length; i--; ) {
+ childName = childId = childEls[i];
+ if (typeof(childName) != 'string') {
+ childId = childName.id || (baseId + childName.itemId);
+ childName = childName.name;
+ } else {
+ childId = baseId + childId;
+ }
- for (var name in types) {
- if (!types.hasOwnProperty(name)) {
- continue;
+ // 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:
+ me[childName] = el.getById(childId);
}
- var item = types[name];
+ }
- if (item.type == type && (!defaultsOnly || (defaultsOnly === true && item.isDefault))) {
- matches.push(item);
+ // 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));
+ }
}
}
+ },
- 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 {Constructor} cls The new Plugin class.
- * @member Ext
- * @method preg
+ * 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.
*/
- Ext.preg = function() {
- return Ext.PluginManager.registerType.apply(Ext.PluginManager, arguments);
- };
-});
+ is: function(selector) {
+ return Ext.ComponentQuery.is(this, selector);
+ },
-/**
- * @class Ext.ComponentManager
- * @extends Ext.AbstractManager
- * Provides a registry of all Components (instances of {@link Ext.Component} or any subclass - * thereof) on a page so that they can be easily accessed by {@link Ext.Component component} - * {@link Ext.Component#id id} (see {@link #get}, or the convenience method {@link Ext#getCmp Ext.getCmp}).
- *This object also provides a registry of available Component classes
- * indexed by a mnemonic code known as the Component's {@link Ext.Component#xtype xtype}.
- * The xtype provides a way to avoid instantiating child Components
- * when creating a full, nested config object for a complete Ext page.
A child Component may be specified simply as a config object
- * as long as the correct {@link Ext.Component#xtype xtype} is specified so that if and when the Component
- * needs rendering, the correct type can be looked up for lazy instantiation.
For a list of all available {@link Ext.Component#xtype xtypes}, see {@link Ext.Component}.
xtype. (Optional if the config contains a xtype).
- * @return {Ext.Component} The newly instantiated Component.
+ * Walks up the `ownerCt` axis looking for an ancestor Container which matches the passed simple selector.
+ *
+ * Example:
+ *
+ * var owningTabPanel = grid.up('tabpanel');
+ *
+ * @param {String} [selector] The simple selector to test.
+ * @return {Ext.container.Container} The matching ancestor Container (or `undefined` if no match was found).
*/
- create: function(component, defaultType){
- if (component instanceof Ext.AbstractComponent) {
- return component;
- }
- else if (Ext.isString(component)) {
- return Ext.createByAlias('widget.' + component);
- }
- else {
- var type = component.xtype || defaultType,
- config = component;
-
- return Ext.createByAlias('widget.' + type, config);
+ up: function(selector) {
+ var result = this.ownerCt;
+ if (selector) {
+ for (; result; result = result.ownerCt) {
+ if (Ext.ComponentQuery.is(result, selector)) {
+ return result;
+ }
+ }
}
+ return result;
},
- registerType: function(type, cls) {
- this.types[type] = cls;
- cls[this.typeName] = type;
- cls.prototype[this.typeName] = type;
- }
-});
-/**
- * @class Ext.XTemplate
- * @extends Ext.Template
- * A template class that supports advanced functionality like:
XTemplate provides the templating mechanism built into:
This is the data object used for reference in each code example:
- *
-var data = {
-name: 'Tommy Maintz',
-title: 'Lead Developer',
-company: 'Sencha Inc.',
-email: 'tommy@sencha.com',
-address: '5 Cups Drive',
-city: 'Palo Alto',
-state: 'CA',
-zip: '44102',
-drinks: ['Coffee', 'Soda', 'Water'],
-kids: [{
- name: 'Joshua',
- age:3
- },{
- name: 'Matthew',
- age:2
- },{
- name: 'Solomon',
- age:0
-}]
-};
- The tpl tag and the for operator are used - * to process the provided data object: - *
-<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
-
-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 tpl tag and the if operator are used - * to provide conditional checks for deciding whether or not to render specific - * parts of the template. Notes:
-<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>
-// no good:
-<tpl if="name == "Tommy"">Hello</tpl>
-// encode " if it is part of the condition, e.g.
-<tpl if="name == "Tommy"">Hello</tpl>
- *
-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);
- 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);
- Anything between {[ ... ]} is considered code to be executed
- * in the scope of the template. There are some special variables available in that code:
- *
-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>'
- );
-tpl.overwrite(panel.body, data);
- 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>',
- // use opposite if statement to simulate 'else' processing:
- '<tpl if="this.isGirl(name) == false">',
- '<p>Boy: {name} - {age}</p>',
- '</tpl>',
- '<tpl if="this.isBaby(age)">',
- '<p>{name} is a baby!</p>',
- '</tpl>',
- '</tpl></p>',
- {
- // XTemplate configuration:
- compiled: true,
- // member functions:
- isGirl: function(name){
- return name == 'Sara Grace';
- },
- isBaby: function(age){
- return age < 1;
+ /**
+ * Returns the next sibling of this Component.
+ *
+ * Optionally selects the next sibling which matches the passed {@link Ext.ComponentQuery ComponentQuery} selector.
+ *
+ * May also be refered 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);
+ }
+ }
+ }
}
- }
-);
-tpl.overwrite(panel.body, data);
- 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} o The item to add. - * @return {Object} The item added. + * 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. */ - add : function(key, obj){ + isVisible: function(deep) { var me = this, - myObj = obj, - myKey = key, - old; + child = me, + visible = !me.hidden, + ancestor = me.ownerCt; - if (arguments.length == 1) { - myObj = myKey; - myKey = me.getKey(myObj); + // Clear hiddenOwnerCt property + me.hiddenAncestor = false; + if (me.destroyed) { + return false; } - if (typeof myKey != 'undefined' && myKey !== null) { - old = me.map[myKey]; - if (typeof old != 'undefined') { - return me.replace(myKey, myObj); + + if (deep && visible && me.rendered && ancestor) { + while (ancestor) { + // If any ancestor is hidden, then this is hidden. + // If an ancestor Panel (only Panels have a collapse method) is collapsed, + // then its layoutTarget (body) is hidden, so this is hidden unless its within a + // docked item; they are still visible when collapsed (Unless they themseves are hidden) + if (ancestor.hidden || (ancestor.collapsed && + !(ancestor.getDockedItems && Ext.Array.contains(ancestor.getDockedItems(), child)))) { + // Store hiddenOwnerCt property if needed + me.hiddenAncestor = ancestor; + visible = false; + break; + } + child = ancestor; + ancestor = ancestor.ownerCt; } - me.map[myKey] = myObj; } - me.length++; - me.items.push(myObj); - me.keys.push(myKey); - me.fireEvent('add', me.length - 1, myObj, myKey); - return myObj; + return visible; }, /** - * MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation - * simply returnsitem.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
+ * Enable the component
+ * @param {Boolean} [silent=false] Passing true will supress the 'enable' event from being fired.
+ */
+ enable: function(silent) {
+ var me = this;
-// using getKey
-var mc = new Ext.util.MixedCollection();
-mc.getKey = function(el){
- return el.dom.id;
-};
-mc.add(someEl);
-mc.add(otherEl);
+ if (me.rendered) {
+ me.el.removeCls(me.disabledCls);
+ me.el.dom.disabled = false;
+ me.onEnable();
+ }
-// or via the constructor
-var mc = new Ext.util.MixedCollection(false, function(el){
- return el.dom.id;
-});
-mc.add(someEl);
-mc.add(otherEl);
- * The key associated with the item to replace, or the replacement item.
- *If you supplied a {@link #getKey} implementation for this MixedCollection, or if the key - * of your stored items is in a property called id, then the MixedCollection - * will be able to derive the key of the replacement item. If you want to replace an item - * with one having the same key value, then just pass the replacement item in this parameter.
- * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate - * with that key. - * @return {Object} The new item. + * Disable the component. + * @param {Boolean} [silent=false] Passing true will supress the 'disable' event from being fired. */ - replace : function(key, o){ - var me = this, - old, - index; + disable: function(silent) { + var me = this; - 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); + if (me.rendered) { + me.el.addCls(me.disabledCls); + me.el.dom.disabled = true; + me.onDisable(); } - index = me.indexOfKey(key); - me.items[index] = o; - me.map[key] = o; - me.fireEvent('replace', key, old, o); - return o; - }, - /** - * 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.
- */
- addAll : function(objs){
- var me = this,
- i = 0,
- args,
- len,
- key;
+ me.disabled = true;
- if (arguments.length > 1 || Ext.isArray(objs)) {
- args = arguments.length > 1 ? arguments : objs;
- for (len = args.length; i < len; i++) {
- me.add(args[i]);
- }
- } else {
- for (key in objs) {
- if (objs.hasOwnProperty(key)) {
- if (me.allowFunctions || typeof objs[key] != 'function') {
- me.add(key, objs[key]);
- }
- }
- }
+ if (silent !== true) {
+ me.fireEvent('disable', me);
}
+
+ return me;
},
- /**
- * Executes the specified function once for every item in the collection, passing the following arguments:
- * The collection item
The item's index
The total number of items in the collection
this reference) in which the function is executed. Defaults to the current item in the iteration.
- */
- each : function(fn, scope){
- var items = [].concat(this.items), // each safe for removal
- i = 0,
- len = items.length,
- item;
+ // @private
+ onEnable: function() {
+ if (this.maskOnDisable) {
+ this.el.unmask();
+ }
+ },
- for (; i < len; i++) {
- item = items[i];
- if (fn.call(scope || item, item, i, len) === false) {
- break;
- }
+ // @private
+ onDisable : function() {
+ if (this.maskOnDisable) {
+ this.el.mask();
}
},
/**
- * 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 {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window.
+ * Method to determine whether this Component is currently disabled.
+ * @return {Boolean} the disabled state of this Component.
*/
- 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);
- }
+ isDisabled : function() {
+ return this.disabled;
},
/**
- * 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 {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to the browser window.
- * @return {Object} The first item in the collection which returned true from the selection function.
+ * Enable or disable the component.
+ * @param {Boolean} disabled True to disable.
*/
- 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;
+ setDisabled : function(disabled) {
+ return this[disabled ? 'disable': 'enable']();
},
- //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:
-
-//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);
-this reference) in which the function is executed. Defaults to this MixedCollection.
- * @return {MixedCollection} The new filtered collection
+ * This method needs to be called whenever you change something on this component that requires the Component's
+ * layout to be recalculated.
+ * @param {Object} width
+ * @param {Object} height
+ * @param {Object} isSetSize
+ * @param {Object} callingContainer
+ * @return {Ext.container.Container} this
*/
- filterBy : function(fn, scope) {
+ doComponentLayout : function(width, height, isSetSize, callingContainer) {
var me = this,
- newMC = new this.self(),
- keys = me.keys,
- items = me.items,
- length = items.length,
- i;
+ componentLayout = me.getComponentLayout(),
+ lastComponentSize = componentLayout.lastComponentSize || {
+ width: undefined,
+ height: undefined
+ };
- newMC.getKey = me.getKey;
+ // collapsed state is not relevant here, so no testing done.
+ // Only Panels have a collapse method, and that just sets the width/height such that only
+ // a single docked Header parallel to the collapseTo side are visible, and the Panel body is hidden.
+ if (me.rendered && componentLayout) {
+ // If no width passed, then only insert a value if the Component is NOT ALLOWED to autowidth itself.
+ if (!Ext.isDefined(width)) {
+ if (me.isFixedWidth()) {
+ width = Ext.isDefined(me.width) ? me.width : lastComponentSize.width;
+ }
+ }
+ // If no height passed, then only insert a value if the Component is NOT ALLOWED to autoheight itself.
+ if (!Ext.isDefined(height)) {
+ if (me.isFixedHeight()) {
+ height = Ext.isDefined(me.height) ? me.height : lastComponentSize.height;
+ }
+ }
- for (i = 0; i < length; i++) {
- if (fn.call(scope || me, items[i], keys[i])) {
- newMC.add(keys[i], items[i]);
+ if (isSetSize) {
+ me.width = width;
+ me.height = height;
}
+
+ componentLayout.layout(width, height, isSetSize, callingContainer);
}
- return newMC;
+ return me;
},
/**
- * 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 (optional) The index to start searching at (defaults to 0).
- * @param {Boolean} anyMatch (optional) True to match any part of the string, not just the beginning.
- * @param {Boolean} caseSensitive (optional) True for case sensitive comparison.
- * @return {Number} The matched index or -1
+ * Forces this component to redo its componentLayout.
*/
- findIndex : function(property, value, start, anyMatch, caseSensitive){
- if(Ext.isEmpty(value, false)){
- return -1;
+ forceComponentLayout: function () {
+ this.doComponentLayout();
+ },
+
+ // @private
+ setComponentLayout : function(layout) {
+ var currentLayout = this.componentLayout;
+ if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
+ currentLayout.setOwner(null);
}
- value = this.createValueMatcher(value, anyMatch, caseSensitive);
- return this.findIndexBy(function(o){
- return o && value.test(o[property]);
- }, null, start);
+ 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;
},
/**
- * Find the index of the first matching object in this collection by a function.
- * If the function returns true it is considered a match.
- * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key).
- * @param {Object} scope (optional) The scope (this reference) in which the function is executed. Defaults to this MixedCollection.
- * @param {Number} start (optional) The index to start searching at (defaults to 0).
- * @return {Number} The matched index or -1
+ * Occurs after componentLayout is run.
+ * @param {Number} adjWidth The box-adjusted width that was set
+ * @param {Number} adjHeight The box-adjusted height that was set
+ * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
+ * @param {Ext.Component} callingContainer Container requesting the layout. Only used when isSetSize is false.
*/
- findIndexBy : function(fn, scope, start){
+ afterComponentLayout: function(width, height, isSetSize, callingContainer) {
var me = this,
- keys = me.keys,
- items = me.items,
- i = start || 0,
- len = items.length;
+ layout = me.componentLayout,
+ oldSize = me.preLayoutSize;
- for (; i < len; i++) {
- if (fn.call(scope || me, items[i], keys[i])) {
- return i;
- }
+ ++me.componentLayoutCounter;
+ if (!oldSize || ((width !== oldSize.width) || (height !== oldSize.height))) {
+ me.fireEvent('resize', me, width, height);
}
- 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.
+ * 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
+ * @param {Boolean} isSetSize Whether or not the height/width are stored on the component permanently
+ * @param {Ext.Component} callingContainer Container requesting sent the layout. Only used when isSetSize is false.
*/
- 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;
+ beforeComponentLayout: function(width, height, isSetSize, callingContainer) {
+ this.preLayoutSize = this.componentLayout.lastComponentSize;
+ return true;
},
/**
- * Creates a shallow copy of this collection
- * @return {MixedCollection}
+ * Sets the left and top of the component. To set the page XY position instead, use
+ * {@link Ext.Component#setPagePosition setPagePosition}. This method fires the {@link #move} event.
+ * @param {Number} left The new left
+ * @param {Number} top The new top
+ * @return {Ext.Component} this
*/
- clone : function() {
- var me = this,
- copy = new this.self(),
- keys = me.keys,
- items = me.items,
- i = 0,
- len = items.length;
+ setPosition : function(x, y) {
+ var me = this;
- for(; i < len; i++){
- copy.add(keys[i], items[i]);
+ if (Ext.isObject(x)) {
+ y = x.y;
+ x = x.x;
}
- copy.getKey = me.getKey;
- return copy;
- }
-});
-/**
- * @class Ext.util.Sortable
+ if (!me.rendered) {
+ return me;
+ }
-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}.
+ if (x !== undefined || y !== undefined) {
+ me.el.setBox(x, y);
+ me.onPosition(x, y);
+ me.fireEvent('move', me, x, y);
+ }
+ return me;
+ },
-**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
-{@link Ext.data.Store} or {@link Ext.data.TreeStore}.
- * @markdown
- * @docauthor Tommy Maintz Sorts the data in the Store by one or more of its properties. Example usage:
-
-//sort by a single field
-myStore.sort('myField', 'DESC');
+ * Gets the current width of the component's underlying element.
+ * @return {Number}
+ */
+ getWidth : function() {
+ return this.el.getWidth();
+ },
-//sorting by multiple fields
-myStore.sort([
- {
- property : 'age',
- direction: 'ASC'
+ /**
+ * Gets the current height of the component's underlying element.
+ * @return {Number}
+ */
+ getHeight : function() {
+ return this.el.getHeight();
},
- {
- 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');
-The name of the field by which the Records are sorted.
The sort order, 'ASC' or 'DESC' (case-sensitive).
- * 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
- * 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');
- * - * 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'
-});
+ withCredentials: false,
-Ext.create('Ext.view.View', {
- store: 'myStore',
- // other configuration here
-});
- * Creates a new store for the given id and config, then registers it with the {@link Ext.data.StoreManager Store Mananger}. - * Sample usage:
-
- Ext.regStore('AllUsers', {
- model: 'User'
- });
-
- //the store can now easily be used throughout the application
- new Ext.List({
- store: 'AllUsers',
- ... other config
- });
-