The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to - * render any child Components when no {@link Ext.Container#layout layout} is configured into - * a {@link Ext.Container Container}. ContainerLayout provides the basic foundation for all other layout - * classes in Ext. It simply renders all child Components into the Container, performing no sizing or - * positioning services. To utilize a layout that provides sizing and positioning of child Components, - * specify an appropriate {@link Ext.Container#layout layout}.
*This class is intended to be extended or created via the {@link Ext.Container#layout layout} * configuration property. See {@link Ext.Container#layout} for additional details.
*/ @@ -56,18 +50,48 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { activeItem : null, constructor : function(config){ + this.id = Ext.id(null, 'ext-layout-'); Ext.apply(this, config); }, + type: 'container', + + /* Workaround for how IE measures autoWidth elements. It prefers bottom-up measurements + whereas other browser prefer top-down. We will hide all target child elements before we measure and + put them back to get an accurate measurement. + */ + IEMeasureHack : function(target, viewFlag) { + var tChildren = target.dom.childNodes, tLen = tChildren.length, c, d = [], e, i, ret; + for (i = 0 ; i < tLen ; i++) { + c = tChildren[i]; + e = Ext.get(c); + if (e) { + d[i] = e.getStyle('display'); + e.setStyle({display: 'none'}); + } + } + ret = target ? target.getViewSize(viewFlag) : {}; + for (i = 0 ; i < tLen ; i++) { + c = tChildren[i]; + e = Ext.get(c); + if (e) { + e.setStyle({display: d[i]}); + } + } + return ret; + }, + + // Placeholder for the derived layouts + getLayoutTargetSize : Ext.EmptyFn, + // private layout : function(){ - var target = this.container.getLayoutTarget(); + var ct = this.container, target = ct.getLayoutTarget(); if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){ - target.addClass(this.targetCls) + target.addClass(this.targetCls); } - this.onLayout(this.container, target); - this.container.fireEvent('afterlayout', this.container, this); - this.hasLayout = true; + this.onLayout(ct, target); + ct.fireEvent('afterlayout', ct, this); }, // private @@ -82,9 +106,9 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { // private renderAll : function(ct, target){ - var items = ct.items.items; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; + var items = ct.items.items, i, c, len = items.length; + for(i = 0; i < len; i++) { + c = items[i]; if(c && (!c.rendered || !this.isValidParent(c, target))){ this.renderItem(c, i, target); } @@ -93,19 +117,33 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { // private renderItem : function(c, position, target){ - if(c && !c.rendered){ - c.render(target, position); - this.configureItem(c, position); - }else if(c && !this.isValidParent(c, target)){ - if(Ext.isNumber(position)){ - position = target.dom.childNodes[position]; + if(c){ + if(!c.rendered){ + c.render(target, position); + this.configureItem(c, position); + }else if(!this.isValidParent(c, target)){ + if(Ext.isNumber(position)){ + position = target.dom.childNodes[position]; + } + target.dom.insertBefore(c.getPositionEl().dom, position || null); + c.container = target; + this.configureItem(c, position); } - target.dom.insertBefore(c.getPositionEl().dom, position || null); - c.container = target; - this.configureItem(c, position); } }, + // private. + // Get all rendered items to lay out. + getRenderedItems: function(ct){ + var t = ct.getLayoutTarget(), cti = ct.items.items, len = cti.length, i, c, items = []; + for (i = 0; i < len; i++) { + if((c = cti[i]).rendered && this.isValidParent(c, t)){ + items.push(c); + } + }; + return items; + }, + // private configureItem: function(c, position){ if(this.extraCls){ @@ -114,7 +152,7 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { } // If we are forcing a layout, do so *before* we hide so elements have height/width if(c.doLayout && this.forceLayout){ - c.doLayout(false, true); + c.doLayout(); } if (this.renderHidden && c != this.activeItem) { c.hide(); @@ -131,22 +169,23 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { } }, + afterRemove: function(c){ + if(c.removeRestore){ + c.removeMode = 'container'; + delete c.removeRestore; + } + }, + // private onResize: function(){ var ct = this.container, - b = ct.bufferResize; - - if (ct.collapsed){ + b; + if(ct.collapsed){ return; } - - // Not having an ownerCt negates the buffering: floating and top level - // Containers (Viewport, Window, ToolTip, Menu) need to lay out ASAP. - if (b && ct.ownerCt) { - // If we do NOT already have a layout pending from an ancestor, schedule one. - // If there is a layout pending, we do nothing here. - // buffering to be deprecated soon - if (!ct.hasLayoutPending()){ + if(b = ct.bufferResize){ + // Only allow if we should buffer the layout + if(ct.shouldBufferLayout()){ if(!this.resizeTask){ this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this); this.resizeBuffer = Ext.isNumber(b) ? b : 50; @@ -155,21 +194,33 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { this.resizeTask.delay(this.resizeBuffer); } }else{ - ct.doLayout(false, this.forceLayout); + this.runLayout(); } }, - // private runLayout: function(){ var ct = this.container; + // AutoLayout is known to require the recursive doLayout call, others need this currently (BorderLayout for example) + // but shouldn't. A more extensive review will take place for 3.2 which requires a ContainerMgr with hierarchy lookups. + //this.layout(); + //ct.onLayout(); ct.doLayout(); delete ct.layoutPending; }, // private setContainer : function(ct){ - // No longer use events to handle resize. Instead this will be handled through a direct function call. - /* + if (!Ext.LayoutManager) { + Ext.LayoutManager = {}; + } + + /* This monitorResize flag will be renamed soon as to avoid confusion + * with the Container version which hooks onWindowResize to doLayout + * + * monitorResize flag in this context attaches the resize event between + * a container and it's layout + */ + if(this.monitorResize && ct != this.container){ var old = this.container; if(old){ @@ -179,7 +230,6 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { ct.on(ct.resizeEvent, this.onResize, this); } } - */ this.container = ct; }, @@ -191,15 +241,11 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { var ms = v.split(' '); var len = ms.length; if(len == 1){ - ms[1] = ms[0]; - ms[2] = ms[0]; - ms[3] = ms[0]; - } - if(len == 2){ + ms[1] = ms[2] = ms[3] = ms[0]; + } else if(len == 2){ ms[2] = ms[0]; ms[3] = ms[1]; - } - if(len == 3){ + } else if(len == 3){ ms[3] = ms[1]; } return { @@ -244,5 +290,4 @@ Ext.layout.ContainerLayout = Ext.extend(Object, { } } } -}); -Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout; +}); \ No newline at end of file