The source code

/** - * @class Ext.layout.ContainerLayout - *

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.

- */ -Ext.layout.ContainerLayout = function(config){ - Ext.apply(this, config); -}; - -Ext.layout.ContainerLayout.prototype = { -

/** - * @cfg {String} extraCls - *

An optional extra CSS class that will be added to the container. This can be useful for adding - * customized styles to the container or any of its children using standard CSS rules. See - * {@link Ext.Component}.{@link Ext.Component#ctCls ctCls} also.

- *

Note: extraCls defaults to '' except for the following classes - * which assign a value by default: - *

{@link Ext.layout.AbsoluteLayout Absolute Layout} : 'x-abs-layout-item'
{@link Ext.layout.Box Box Layout} : 'x-box-item'
{@link Ext.layout.ColumnLayout Column Layout} : 'x-column'

- * To configure the above Classes with an extra CSS class append to the default. For example, - * for ColumnLayout:


-     * extraCls: 'x-column custom-class'
-     *

- *

- */ -

/** - * @cfg {Boolean} renderHidden - * True to hide each contained item on render (defaults to false). - */ - -

/** - * A reference to the {@link Ext.Component} that is active. For example,


-     * if(myPanel.layout.activeItem.id == 'item-1') { ... }
-     *

- * activeItem only applies to layout styles that can display items one at a time - * (like {@link Ext.layout.AccordionLayout}, {@link Ext.layout.CardLayout} - * and {@link Ext.layout.FitLayout}). Read-only. Related to {@link Ext.Container#activeItem}. - * @type {Ext.Component} - * @property activeItem - */ - - // private - monitorResize:false, - // private - activeItem : null, - - // private - layout : function(){ - var target = this.container.getLayoutTarget(); - this.onLayout(this.container, target); - this.container.fireEvent('afterlayout', this.container, this); - }, - - // private - onLayout : function(ct, target){ - this.renderAll(ct, target); - }, - - // private - isValidParent : function(c, target){ - return target && c.getDomPositionEl().dom.parentNode == (target.dom || target); - }, - - // private - renderAll : function(ct, target){ - var items = ct.items.items; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; - if(c && (!c.rendered || !this.isValidParent(c, target))){ - this.renderItem(c, i, target); - } - } - }, - - // 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(typeof position == 'number'){ - position = target.dom.childNodes[position]; - } - target.dom.insertBefore(c.getDomPositionEl().dom, position || null); - c.container = target; - this.configureItem(c, position); - } - }, - - // private - configureItem: function(c, position){ - if(this.extraCls){ - var t = c.getPositionEl ? c.getPositionEl() : c; - t.addClass(this.extraCls); - } - if (this.renderHidden && c != this.activeItem) { - c.hide(); - } - if(c.doLayout){ - c.doLayout(false, this.forceLayout); - } - }, - - // private - onResize: function(){ - if(this.container.collapsed){ - return; - } - var b = this.container.bufferResize; - if(b){ - if(!this.resizeTask){ - this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this); - this.resizeBuffer = typeof b == 'number' ? b : 100; - } - this.resizeTask.delay(this.resizeBuffer); - }else{ - this.runLayout(); - } - }, - - // private - runLayout: function(){ - this.layout(); - this.container.onLayout(); - }, - - // private - setContainer : function(ct){ - if(this.monitorResize && ct != this.container){ - if(this.container){ - this.container.un('resize', this.onResize, this); - this.container.un('bodyresize', this.onResize, this); - } - if(ct){ - ct.on({ - scope: this, - resize: this.onResize, - bodyresize: this.onResize - }); - } - } - this.container = ct; - }, - - // private - parseMargins : function(v){ - if(typeof v == 'number'){ - v = v.toString(); - } - 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[2] = ms[0]; - ms[3] = ms[1]; - } - if(len == 3){ - ms[3] = ms[1]; - } - return { - top:parseInt(ms[0], 10) || 0, - right:parseInt(ms[1], 10) || 0, - bottom:parseInt(ms[2], 10) || 0, - left:parseInt(ms[3], 10) || 0 - }; - }, - -

/** - * The {@link Template Ext.Template} used by Field rendering layout classes (such as - * {@link Ext.layout.FormLayout}) to create the DOM structure of a fully wrapped, - * labeled and styled form Field. A default Template is supplied, but this may be - * overriden to create custom field structures. The template processes values returned from - * {@link Ext.layout.FormLayout#getTemplateArgs}. - * @property fieldTpl - * @type Ext.Template - */ - fieldTpl: (function() { - var t = new Ext.Template( - '

', - '{label}{labelSeparator}', - '

', - '

' - ); - t.disableFormats = true; - return t.compile(); - })(), - - /* - * Destroys this layout. This is a template method that is empty by default, but should be implemented - * by subclasses that require explicit destruction to purge event handlers or remove DOM nodes. - * @protected - */ - destroy : Ext.emptyFn -}; -Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;