- doLayout : function() {
- var me = this,
- layout = me.getLayout();
-
- if (me.rendered && layout && !me.suspendLayout) {
- // If either dimension is being auto-set, then it requires a ComponentLayout to be run.
- if (!me.isFixedWidth() || !me.isFixedHeight()) {
- // Only run the ComponentLayout if it is not already in progress
- if (me.componentLayout.layoutBusy !== true) {
- me.doComponentLayout();
- if (me.componentLayout.layoutCancelled === true) {
- layout.layout();
- }
- }
- }
- // Both dimensions set, either by configuration, or by an owning layout, run a ContainerLayout
- else {
- // Only run the ContainerLayout if it is not already in progress
- if (layout.layoutBusy !== true) {
- layout.layout();
- }
- }
- }
-
- return me;
- },
-
- // @private
- afterLayout : function(layout) {
- this.fireEvent('afterlayout', this, layout);
- },
-
- // @private
- prepareItems : function(items, applyDefaults) {
- if (!Ext.isArray(items)) {
- items = [items];
- }
-
- // Make sure defaults are applied and item is initialized
- var i = 0,
- len = items.length,
- item;
-
- for (; i < len; i++) {
- item = items[i];
- if (applyDefaults) {
- item = this.applyDefaults(item);
- }
- items[i] = this.lookupComponent(item);
- }
- return items;
- },
-
- // @private
- applyDefaults : function(config) {
- var defaults = this.defaults;
-
- if (defaults) {
- if (Ext.isFunction(defaults)) {
- defaults = defaults.call(this, config);
- }
-
- if (Ext.isString(config)) {
- config = Ext.ComponentManager.get(config);
- Ext.applyIf(config, defaults);
- } else if (!config.isComponent) {
- Ext.applyIf(config, defaults);
- } else {
- Ext.applyIf(config, defaults);
- }
- }
-
- return config;
- },
-
- // @private
- lookupComponent : function(comp) {
- return Ext.isString(comp) ? Ext.ComponentManager.get(comp) : this.createComponent(comp);
- },
-
- // @private
- createComponent : function(config, defaultType) {
- // // add in ownerCt at creation time but then immediately
- // // remove so that onBeforeAdd can handle it
- // var component = Ext.create(Ext.apply({ownerCt: this}, config), defaultType || this.defaultType);
- //
- // delete component.initialConfig.ownerCt;
- // delete component.ownerCt;
-
- return Ext.ComponentManager.create(config, defaultType || this.defaultType);
- },
-
- // @private - used as the key lookup function for the items collection
- getComponentId : function(comp) {
- return comp.getItemId();
- },
-
-<span id='Ext-container-AbstractContainer-method-add'> /**
-</span>
-Adds {@link Ext.Component Component}(s) to this Container.
-
-##Description:##
-
-- Fires the {@link #beforeadd} event before adding.
-- The Container's {@link #defaults default config values} will be applied
- accordingly (see `{@link #defaults}` for details).
-- Fires the `{@link #add}` event after the component has been added.
-
-##Notes:##
-
-If the Container is __already rendered__ when `add`
-is called, it will render the newly added Component into its content area.
-
-__**If**__ the Container was configured with a size-managing {@link #layout} manager, the Container
-will recalculate its internal layout at this time too.
-
-Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing.
-
-If adding multiple new child Components, pass them as an array to the `add` method, so that only one layout recalculation is performed.
-
- tb = new {@link Ext.toolbar.Toolbar}({
- renderTo: document.body
- }); // toolbar is rendered
- tb.add([{text:'Button 1'}, {text:'Button 2'}]); // add multiple items. ({@link #defaultType} for {@link Ext.toolbar.Toolbar Toolbar} is 'button')
-
-##Warning:##
-
-Components directly managed by the BorderLayout layout manager
-may not be removed or added. See the Notes for {@link Ext.layout.container.Border BorderLayout}
-for more details.
-
- * @param {...Object/Array} Component
- * Either one or more Components to add or an Array of Components to add.
- * See `{@link #items}` for additional information.
- *
- * @return {Ext.Component/Array} The Components that were added.
- * @markdown
- */
- add : function() {
- var me = this,
- args = Array.prototype.slice.call(arguments),
- hasMultipleArgs,
- items,
- results = [],
- i,
- ln,
- item,
- index = -1,
- cmp;
-
- if (typeof args[0] == 'number') {
- index = args.shift();
- }
-
- hasMultipleArgs = args.length > 1;
- if (hasMultipleArgs || Ext.isArray(args[0])) {
-
- items = hasMultipleArgs ? args : args[0];
- // Suspend Layouts while we add multiple items to the container
- me.suspendLayout = true;
- for (i = 0, ln = items.length; i < ln; i++) {
- item = items[i];
-
- //<debug>
- if (!item) {
- Ext.Error.raise("Trying to add a null item as a child of Container with itemId/id: " + me.getItemId());
- }
- //</debug>
-
- if (index != -1) {
- item = me.add(index + i, item);
- } else {
- item = me.add(item);
- }
- results.push(item);
- }
- // Resume Layouts now that all items have been added and do a single layout for all the items just added
- me.suspendLayout = false;
- me.doLayout();
- return results;
- }
-
- cmp = me.prepareItems(args[0], true)[0];
-
- // Floating Components are not added into the items collection
- // But they do get an upward ownerCt link so that they can traverse
- // up to their z-index parent.
- if (cmp.floating) {
- cmp.onAdded(me, index);
- } else {
- index = (index !== -1) ? index : me.items.length;
- if (me.fireEvent('beforeadd', me, cmp, index) !== false && me.onBeforeAdd(cmp) !== false) {
- me.items.insert(index, cmp);
- cmp.onAdded(me, index);
- me.onAdd(cmp, index);
- me.fireEvent('add', me, cmp, index);
- }
- me.doLayout();
- }
- return cmp;
- },
-
-<span id='Ext-container-AbstractContainer-method-registerFloatingItem'> /**
-</span> * @private
- * <p>Called by Component#doAutoRender</p>
- * <p>Register a Container configured <code>floating: true</code> with this Container's {@link Ext.ZIndexManager ZIndexManager}.</p>
- * <p>Components added in ths way will not participate in the layout, but will be rendered
- * upon first show in the way that {@link Ext.window.Window Window}s are.</p>
- * <p></p>
- */
- registerFloatingItem: function(cmp) {
- var me = this;
- if (!me.floatingItems) {
- me.floatingItems = Ext.create('Ext.ZIndexManager', me);
- }
- me.floatingItems.register(cmp);
- },
-
- onAdd : Ext.emptyFn,
- onRemove : Ext.emptyFn,
-
-<span id='Ext-container-AbstractContainer-method-insert'> /**
-</span> * Inserts a Component into this Container at a specified index. Fires the
- * {@link #beforeadd} event before inserting, then fires the {@link #add} event after the
- * Component has been inserted.
- * @param {Number} index The index at which the Component will be inserted
- * into the Container's items collection
- * @param {Ext.Component} component The child Component to insert.<br><br>
- * Ext uses lazy rendering, and will only render the inserted Component should
- * it become necessary.<br><br>
- * A Component config object may be passed in order to avoid the overhead of
- * constructing a real Component object if lazy rendering might mean that the
- * inserted Component will not be rendered immediately. To take advantage of
- * this 'lazy instantiation', set the {@link Ext.Component#xtype} config
- * property to the registered type of the Component wanted.<br><br>
- * For a list of all available xtypes, see {@link Ext.Component}.
- * @return {Ext.Component} component The Component (or config object) that was
- * inserted with the Container's default config values applied.
- */
- insert : function(index, comp) {
- return this.add(index, comp);
- },
-
-<span id='Ext-container-AbstractContainer-method-move'> /**
-</span> * Moves a Component within the Container
- * @param {Number} fromIdx The index the Component you wish to move is currently at.
- * @param {Number} toIdx The new index for the Component.
- * @return {Ext.Component} component The Component (or config object) that was moved.
- */
- move : function(fromIdx, toIdx) {
- var items = this.items,
- item;
- item = items.removeAt(fromIdx);
- if (item === false) {
- return false;
- }
- items.insert(toIdx, item);
- this.doLayout();
- return item;
- },
-
- // @private
- onBeforeAdd : function(item) {
- var me = this;
-
- if (item.ownerCt) {
- item.ownerCt.remove(item, false);
- }
-
- if (me.border === false || me.border === 0) {
- item.border = (item.border === true);
- }
- },
-
-<span id='Ext-container-AbstractContainer-method-remove'> /**
-</span> * Removes a component from this container. Fires the {@link #beforeremove} event before removing, then fires
- * the {@link #remove} event after the component has been removed.
- * @param {Component/String} component The component reference or id to remove.
- * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
- * Defaults to the value of this Container's {@link #autoDestroy} config.
- * @return {Ext.Component} component The Component that was removed.
- */
- remove : function(comp, autoDestroy) {
- var me = this,
- c = me.getComponent(comp);
- //<debug>
- if (Ext.isDefined(Ext.global.console) && !c) {
- console.warn("Attempted to remove a component that does not exist. Ext.container.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.");
- }
- //</debug>
-
- if (c && me.fireEvent('beforeremove', me, c) !== false) {
- me.doRemove(c, autoDestroy);
- me.fireEvent('remove', me, c);
- }
-
- return c;
- },
-
- // @private
- doRemove : function(component, autoDestroy) {
- var me = this,
- layout = me.layout,
- hasLayout = layout && me.rendered;
-
- me.items.remove(component);
- component.onRemoved();
-
- if (hasLayout) {
- layout.onRemove(component);
- }
-
- me.onRemove(component, autoDestroy);
-
- if (autoDestroy === true || (autoDestroy !== false && me.autoDestroy)) {
- component.destroy();
- }
-
- if (hasLayout && !autoDestroy) {
- layout.afterRemove(component);
- }
-
- if (!me.destroying) {
- me.doLayout();
- }
- },
-
-<span id='Ext-container-AbstractContainer-method-removeAll'> /**
-</span> * Removes all components from this container.
- * @param {Boolean} autoDestroy (optional) True to automatically invoke the removed Component's {@link Ext.Component#destroy} function.
- * Defaults to the value of this Container's {@link #autoDestroy} config.
- * @return {Array} Array of the destroyed components
- */
- removeAll : function(autoDestroy) {
- var me = this,
- removeItems = me.items.items.slice(),
- items = [],
- i = 0,
- len = removeItems.length,
- item;
-
- // Suspend Layouts while we remove multiple items from the container
- me.suspendLayout = true;
- for (; i < len; i++) {
- item = removeItems[i];
- me.remove(item, autoDestroy);
-
- if (item.ownerCt !== me) {
- items.push(item);
- }
- }
-
- // Resume Layouts now that all items have been removed and do a single layout (if we removed anything!)
- me.suspendLayout = false;
- if (len) {
- me.doLayout();
- }
- return items;
- },
-
- // Used by ComponentQuery to retrieve all of the items
- // which can potentially be considered a child of this Container.
- // This should be overriden by components which have child items
- // that are not contained in items. For example dockedItems, menu, etc
- // IMPORTANT note for maintainers:
- // Items are returned in tree traversal order. Each item is appended to the result array
- // followed by the results of that child's getRefItems call.
- // Floating child items are appended after internal child items.
- getRefItems : function(deep) {
- var me = this,
- items = me.items.items,
- len = items.length,
- i = 0,
- item,
- result = [];
-
- for (; i < len; i++) {
- item = items[i];
- result.push(item);
- if (deep && item.getRefItems) {
- result.push.apply(result, item.getRefItems(true));
- }
- }
-
- // Append floating items to the list.
- // These will only be present after they are rendered.
- if (me.floatingItems && me.floatingItems.accessList) {
- result.push.apply(result, me.floatingItems.accessList);
- }
-
- return result;
- },
-
-<span id='Ext-container-AbstractContainer-method-cascade'> /**
-</span> * Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with
- * each component. The scope (<code>this</code> reference) of the
- * function call will be the scope provided or the current component. The arguments to the function
- * will be the args provided or the current component. If the function returns false at any point,
- * the cascade is stopped on that branch.
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The scope of the function (defaults to current component)
- * @param {Array} args (optional) The args to call the function with. The current component always passed as the last argument.
- * @return {Ext.Container} this
- */
- cascade : function(fn, scope, origArgs){
- var me = this,
- cs = me.items ? me.items.items : [],
- len = cs.length,
- i = 0,
- c,
- args = origArgs ? origArgs.concat(me) : [me],
- componentIndex = args.length - 1;
-
- if (fn.apply(scope || me, args) !== false) {
- for(; i < len; i++){
- c = cs[i];
- if (c.cascade) {
- c.cascade(fn, scope, origArgs);
- } else {
- args[componentIndex] = c;
- fn.apply(scope || cs, args);
- }
- }
- }
- return this;
- },
-
-<span id='Ext-container-AbstractContainer-method-getComponent'> /**
-</span> * Examines this container's <code>{@link #items}</code> <b>property</b>
- * and gets a direct child component of this container.
- * @param {String/Number} comp This parameter may be any of the following:
- * <div><ul class="mdetail-params">
- * <li>a <b><code>String</code></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
- * or <code>{@link Ext.Component#id id}</code> of the child component </li>
- * <li>a <b><code>Number</code></b> : representing the position of the child component
- * within the <code>{@link #items}</code> <b>property</b></li>
- * </ul></div>
- * <p>For additional information see {@link Ext.util.MixedCollection#get}.
- * @return Ext.Component The component (if found).
- */
- getComponent : function(comp) {
- if (Ext.isObject(comp)) {
- comp = comp.getItemId();
- }
-
- return this.items.get(comp);
- },
-
-<span id='Ext-container-AbstractContainer-method-query'> /**
-</span> * Retrieves all descendant components which match the passed selector.
- * Executes an Ext.ComponentQuery.query using this container as its root.
- * @param {String} selector Selector complying to an Ext.ComponentQuery selector
- * @return {Array} Ext.Component's which matched the selector
- */
- query : function(selector) {
- return Ext.ComponentQuery.query(selector, this);