# 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 = Ext.extend(Object, {
        /**
         * @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,

        constructor : function(config){
            Ext.apply(this, config);
        },

        // private
        layout : function(){
            var target = this.container.getLayoutTarget();
            if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
                target.addClass(this.targetCls)
            }
            this.onLayout(this.container, target);
            this.container.fireEvent('afterlayout', this.container, this);
            this.hasLayout = true;
        },

        // private
        onLayout : function(ct, target){
            this.renderAll(ct, target);
        },

        // private
        isValidParent : function(c, target){
            return target && c.getPositionEl().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(Ext.isNumber(position)){
                    position = target.dom.childNodes[position];
                }
                target.dom.insertBefore(c.getPositionEl().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 we are forcing a layout, do so *before* we hide so elements have height/width
            if(c.doLayout && this.forceLayout){
                c.doLayout(false, true);
            }
            if (this.renderHidden && c != this.activeItem) {
                c.hide();
            }
        },

        onRemove: function(c){
             if(this.activeItem == c){
                delete this.activeItem;
             }
             if(c.rendered && this.extraCls){
                var t = c.getPositionEl ? c.getPositionEl() : c;
                t.removeClass(this.extraCls);
            }
        },

        // private
        onResize: function(){
            var ct = this.container,
                b = ct.bufferResize;

            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(!this.resizeTask){
                        this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
                        this.resizeBuffer = Ext.isNumber(b) ? b : 50;
                    }
                    ct.layoutPending = true;
                    this.resizeTask.delay(this.resizeBuffer);
                }
            }else{
                ct.doLayout(false, this.forceLayout);
            }
        },

        // private
        runLayout: function(){
            var ct = this.container;
            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(this.monitorResize && ct != this.container){
                var old = this.container;
                if(old){
                    old.un(old.resizeEvent, this.onResize, this);
                }
                if(ct){
                    ct.on(ct.resizeEvent, this.onResize, this);
                }
            }
            */
            this.container = ct;
        },

        // private
        parseMargins : function(v){
            if(Ext.isNumber(v)){
                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 Ext.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 : function(){
            if(!Ext.isEmpty(this.targetCls)){
                var target = this.container.getLayoutTarget();
                if(target){
                    target.removeClass(this.targetCls);
                }
            }
        }
    });
    Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;