/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.Container * @extends Ext.BoxComponent *- +Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the @@ -442,8 +448,6 @@ items: [ 'remove' ); - this.enableBubble(this.bubbleEvents); -
/** * The collection of components in this container as a {@link Ext.util.MixedCollection} * @type MixedCollection @@ -469,13 +473,15 @@ items: [ if(this.layout && this.layout != layout){ this.layout.setContainer(null); } - this.initItems(); this.layout = layout; + this.initItems(); layout.setContainer(this); }, afterRender: function(){ - this.layoutDone = false; + // Render this Container, this should be done before setLayout is called which + // will hook onResize + Ext.Container.superclass.afterRender.call(this); if(!this.layout){ this.layout = 'auto'; } @@ -488,21 +494,20 @@ items: [ } this.setLayout(this.layout); - // BoxComponent's afterRender will set the size. - // This will will trigger a layout if the layout is configured to monitor resize - Ext.Container.superclass.afterRender.call(this); - - if(Ext.isDefined(this.activeItem)){ + // If a CardLayout, the active item set + if(this.activeItem !== undefined && this.layout.setActiveItem){ var item = this.activeItem; delete this.activeItem; this.layout.setActiveItem(item); } - // If we have no ownerCt and the BoxComponent's sizing did not trigger a layout, force a layout - if(!this.ownerCt && !this.layoutDone){ + // If we have no ownerCt, render and size all children + if(!this.ownerCt){ this.doLayout(false, true); } + // This is a manually configured flag set by users in conjunction with renderTo. + // Not to be confused with the flag by the same name used in Layouts. if(this.monitorResize === true){ Ext.EventManager.onWindowResize(this.doLayout, this, [false]); } @@ -550,12 +555,10 @@ tb.{@link #doLayout}(); // refresh the layout * may not be removed or added. See the Notes for {@link Ext.layout.BorderLayout BorderLayout} * for more details. * - * @param {Object/Array} component - *Either a single component or an Array of components to add. See + * @param {...Object/Array} component + *
Either one or more Components to add or an Array of Components to add. See *
- * @param {Object} (Optional) component_2 - * @param {Object} (Optional) component_n - * @return {Ext.Component} component The Component (or config object) that was added. + * @return {Ext.Component/Array} The Components that were added. */ add : function(comp){ this.initItems(); @@ -582,7 +585,7 @@ tb.{@link #doLayout}(); // refresh the layout onAdd : function(c){ // Empty template method }, - + // private onAdded : function(container, pos) { //overridden here so we can cascade down, not worth creating a template method. @@ -613,20 +616,26 @@ tb.{@link #doLayout}(); // refresh the layout * @return {Ext.Component} component The Component (or config object) that was * inserted with the Container's default config values applied. */ - insert : function(index, comp){ + insert : function(index, comp) { + var args = arguments, + length = args.length, + result = [], + i, c; + this.initItems(); - var a = arguments, len = a.length; - if(len > 2){ - var result = []; - for(var i = len-1; i >= 1; --i) { - result.push(this.insert(index, a[i])); + + if (length > 2) { + for (i = length - 1; i >= 1; --i) { + result.push(this.insert(index, args[i])); } return result; } - var c = this.lookupComponent(this.applyDefaults(comp)); + + c = this.lookupComponent(this.applyDefaults(comp)); index = Math.min(index, this.items.length); - if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){ - if(c.ownerCt == this){ + + if (this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false) { + if (c.ownerCt == this) { this.items.remove(c); } this.items.insert(index, c); @@ -634,6 +643,7 @@ tb.{@link #doLayout}(); // refresh the layout this.onAdd(c); this.fireEvent('add', this, c, index); } + return c; }, @@ -690,8 +700,11 @@ tb.{@link #doLayout}(); // refresh the layout // private doRemove: function(c, autoDestroy){ - if(this.layout && this.rendered){ - this.layout.onRemove(c); + var l = this.layout, + hasLayout = l && this.rendered; + + if(hasLayout){ + l.onRemove(c); } this.items.remove(c); c.onRemoved(); @@ -699,6 +712,9 @@ tb.{@link #doLayout}(); // refresh the layout if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){ c.destroy(); } + if(hasLayout){ + l.afterRemove(c); + } }, /** @@ -755,22 +771,27 @@ tb.{@link #doLayout}(); // refresh the layout // private createComponent : function(config, defaultType){ + if (config.render) { + return config; + } // add in ownerCt at creation time but then immediately // remove so that onBeforeAdd can handle it - var c = config.render ? config : Ext.create(Ext.apply({ + var c = Ext.create(Ext.apply({ ownerCt: this }, config), defaultType || this.defaultType); + delete c.initialConfig.ownerCt; delete c.ownerCt; return c; }, - /** - * We can only lay out if there is a view area in which to layout. - * display:none on the layout target, *or any of its parent elements* will mean it has no view area. - */ - canLayout: function() { - var el = this.getLayoutTarget(), vs; - return !!(el && (vs = el.dom.offsetWidth || el.dom.offsetHeight)); + /** + * @private + * We can only lay out if there is a view area in which to layout. + * display:none on the layout target, *or any of its parent elements* will mean it has no view area. + */ + canLayout : function() { + var el = this.getVisibilityEl(); + return el && el.dom && !el.isStyle("display", "none"); }, /** @@ -781,13 +802,12 @@ tb.{@link #doLayout}(); // refresh the layout * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden. * @return {Ext.Container} this */ - doLayout: function(shallow, force){ + + doLayout : function(shallow, force){ var rendered = this.rendered, - forceLayout = force || this.forceLayout, - cs, i, len, c; + forceLayout = force || this.forceLayout; - this.layoutDone = true; - if(!this.canLayout() || this.collapsed){ + if(this.collapsed || !this.canLayout()){ this.deferLayout = this.deferLayout || !shallow; if(!forceLayout){ return; @@ -796,26 +816,16 @@ tb.{@link #doLayout}(); // refresh the layout } else { delete this.deferLayout; } - - cs = (shallow !== true && this.items) ? this.items.items : []; - -// Inhibit child Containers from relaying on resize since we are about to to explicitly call doLayout on them all! - for(i = 0, len = cs.length; i < len; i++){ - if ((c = cs[i]).layout) { - c.suspendLayoutResize = true; - } - } - -// Tell the layout manager to ensure all child items are rendered, and sized according to their rules. -// Will not cause the child items to relayout. if(rendered && this.layout){ this.layout.layout(); } - -// Explicitly lay out all child items - for(i = 0; i < len; i++){ - if((c = cs[i]).doLayout){ - c.doLayout(false, forceLayout); + if(shallow !== true && this.items){ + var cs = this.items.items; + for(var i = 0, len = cs.length; i < len; i++){ + var c = cs[i]; + if(c.doLayout){ + c.doLayout(false, forceLayout); + } } } if(rendered){ @@ -824,39 +834,45 @@ tb.{@link #doLayout}(); // refresh the layout // Initial layout completed this.hasLayout = true; delete this.forceLayout; - -// Re-enable child layouts relaying on resize. - for(i = 0; i < len; i++){ - if ((c = cs[i]).layout) { - delete c.suspendLayoutResize; - } - } }, - //private onLayout : Ext.emptyFn, - onResize: function(adjWidth, adjHeight, rawWidth, rawHeight){ - Ext.Container.superclass.onResize.apply(this, arguments); - if ((this.rendered && this.layout && this.layout.monitorResize) && !this.suspendLayoutResize) { - this.layout.onResize(); + // private + shouldBufferLayout: function(){ + /* + * Returns true if the container should buffer a layout. + * This is true only if the container has previously been laid out + * and has a parent container that is pending a layout. + */ + var hl = this.hasLayout; + if(this.ownerCt){ + // Only ever buffer if we've laid out the first time and we have one pending. + return hl ? !this.hasLayoutPending() : false; } + // Never buffer initial layout + return hl; }, // private hasLayoutPending: function(){ // Traverse hierarchy to see if any parent container has a pending layout. - var pending = this.layoutPending; + var pending = false; this.ownerCt.bubble(function(c){ - return !(pending = c.layoutPending); + if(c.layoutPending){ + pending = true; + return false; + } }); return pending; - }, onShow : function(){ + // removes css classes that were added to hide Ext.Container.superclass.onShow.call(this); + // If we were sized during the time we were hidden, layout. if(Ext.isDefined(this.deferLayout)){ + delete this.deferLayout; this.doLayout(true); } }, @@ -868,7 +884,7 @@ tb.{@link #doLayout}(); // refresh the layout */ getLayout : function(){ if(!this.layout){ - var layout = new Ext.layout.ContainerLayout(this.layoutConfig); + var layout = new Ext.layout.AutoLayout(this.layoutConfig); this.setLayout(layout); } return this.layout; @@ -889,27 +905,6 @@ tb.{@link #doLayout}(); // refresh the layout Ext.Container.superclass.beforeDestroy.call(this); }, - /** - * Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of - * function call will be the scope provided or the current component. The arguments to the function - * will be the args provided or the current component. If the function returns false at any point, - * the bubble is stopped. - * @param {Function} fn The function to call - * @param {Object} scope (optional) The scope of the function (defaults to current node) - * @param {Array} args (optional) The args to call the function with (default to passing the current component) - * @return {Ext.Container} this - */ - bubble : function(fn, scope, args){ - var p = this; - while(p){ - if(fn.apply(scope || p, args || [p]) === false){ - break; - } - p = p.ownerCt; - } - return this; - }, - /** * Cascades down the component/container heirarchy from this component (called first), calling the specified function with * each component. The scope (this) of @@ -940,17 +935,20 @@ tb.{@link #doLayout}(); // refresh the layout /** * Find a component under this container at any level by id * @param {String} id + * @deprecated Fairly useless method, since you can just use Ext.getCmp. Should be removed for 4.0 + * If you need to test if an id belongs to a container, you can use getCmp and findParent*. * @return Ext.Component */ findById : function(id){ - var m, ct = this; + var m = null, + ct = this; this.cascade(function(c){ if(ct != c && c.id === id){ m = c; return false; } }); - return m || null; + return m; }, /** @@ -998,15 +996,16 @@ tb.{@link #doLayout}(); // refresh the layout /** * Get a component contained by this container (alias for items.get(key)) * @param {String/Number} key The index or id of the component + * @deprecated Should be removed in 4.0, since getComponent does the same thing. * @return {Ext.Component} Ext.Component */ get : function(key){ - return this.items.get(key); + return this.getComponent(key); } }); Ext.Container.LAYOUTS = {}; Ext.reg('container', Ext.Container); -{@link #items}for additional information.