The source code

/** - * @class Ext.Container - * @extends Ext.BoxComponent - *

Base class for any {@link Ext.BoxComponent} that may contain other Components. Containers handle the - * basic behavior of containing items, namely adding, inserting and removing items.

- * - *

The most commonly used Container classes are {@link Ext.Panel}, {@link Ext.Window} and {@link Ext.TabPanel}. - * If you do not need the capabilities offered by the aforementioned classes you can create a lightweight - * Container to be encapsulated by an HTML element to your specifications by using the - * {@link Ext.Component#autoEl autoEl} config option. This is a useful technique when creating - * embedded {@link Ext.layout.ColumnLayout column} layouts inside {@link Ext.form.FormPanel FormPanels} - * for example.

- * - *

The code below illustrates both how to explicitly create a Container, and how to implicitly - * create one using the 'container' xtype:


-// explicitly create a Container
-var embeddedColumns = new Ext.Container({
-    autoEl: 'div',  // This is the default
-    layout: 'column',
-    defaults: {
-        // implicitly create Container by specifying xtype
-        xtype: 'container',
-        autoEl: 'div', // This is the default.
-        layout: 'form',
-        columnWidth: 0.5,
-        style: {
-            padding: '10px'
-        }
-    },
-//  The two items below will be Ext.Containers, each encapsulated by a <DIV> element.
-    items: [{
-        items: {
-            xtype: 'datefield',
-            name: 'startDate',
-            fieldLabel: 'Start date'
-        }
-    }, {
-        items: {
-            xtype: 'datefield',
-            name: 'endDate',
-            fieldLabel: 'End date'
-        }
-    }]
-});

- * - *

Layout

- *

Container classes delegate the rendering of child Components to a layout - * manager class which must be configured into the Container using the - * {@link #layout} configuration property.

- *

When either specifying child {@link #items} of a Container, - * or dynamically {@link #add adding} Components to a Container, remember to - * consider how you wish the Container to arrange those child elements, and - * whether those child elements need to be sized using one of Ext's built-in - * {@link #layout} schemes. By default, Containers use the - * {@link Ext.layout.ContainerLayout ContainerLayout} scheme which only - * renders child components, appending them one after the other inside the - * Container, and does not apply any sizing at all.

- *

A common mistake is when a developer neglects to specify a - * {@link #layout} (e.g. widgets like GridPanels or - * TreePanels are added to Containers for which no {@link #layout} - * has been specified). If a Container is left to use the default - * {@link Ext.layout.ContainerLayout ContainerLayout} scheme, none of its - * child components will be resized, or changed in any way when the Container - * is resized.

- *

Certain layout managers allow dynamic addition of child components. - * Those that do include {@link Ext.layout.CardLayout}, - * {@link Ext.layout.AnchorLayout}, {@link Ext.layout.FormLayout}, and - * {@link Ext.layout.TableLayout}. For example:


-//  Create the GridPanel.
-var myNewGrid = new Ext.grid.GridPanel({
-    store: myStore,
-    columns: myColumnModel,
-    title: 'Results', // the title becomes the title of the tab
-});
-
-myTabPanel.add(myNewGrid); // {@link Ext.TabPanel} implicitly uses {@link Ext.layout.CardLayout CardLayout}
-myTabPanel.{@link Ext.TabPanel#setActiveTab setActiveTab}(myNewGrid);
- *

- *

The example above adds a newly created GridPanel to a TabPanel. Note that - * a TabPanel uses {@link Ext.layout.CardLayout} as its layout manager which - * means all its child items are sized to {@link Ext.layout.FitLayout fit} - * exactly into its client area. - *

Overnesting is a common problem. - * An example of overnesting occurs when a GridPanel is added to a TabPanel - * by wrapping the GridPanel inside a wrapping Panel (that has no - * {@link #layout} specified) and then add that wrapping Panel - * to the TabPanel. The point to realize is that a GridPanel is a - * Component which can be added directly to a Container. If the wrapping Panel - * has no {@link #layout} configuration, then the overnested - * GridPanel will not be sized as expected.

- * - *

Adding via remote configuration

- * - *

A server side script can be used to add Components which are generated dynamically on the server. - * An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server - * based on certain parameters: - *


-// execute an Ajax request to invoke server side script:
-Ext.Ajax.request({
-    url: 'gen-invoice-grid.php',
-    // send additional parameters to instruct server script
-    params: {
-        startDate: Ext.getCmp('start-date').getValue(),
-        endDate: Ext.getCmp('end-date').getValue()
-    },
-    // process the response object to add it to the TabPanel:
-    success: function(xhr) {
-        var newComponent = eval(xhr.responseText); // see discussion below
-        myTabPanel.add(newComponent); // add the component to the TabPanel
-        myTabPanel.setActiveTab(newComponent);
-    },
-    failure: function() {
-        Ext.Msg.alert("Grid create failed", "Server communication failure");
+  
+  
+  
+  
+
+
+  /**
+* @class Ext.layout.container.Container
+* @extends Ext.layout.container.AbstractContainer
+* <p>This class is intended to be extended or created via the <tt><b>{@link Ext.container.Container#layout layout}</b></tt>
+* configuration property.  See <tt><b>{@link Ext.container.Container#layout}</b></tt> for additional details.</p>
+*/
+Ext.define('Ext.layout.container.Container', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.layout.container.AbstractContainer',
+    alternateClassName: 'Ext.layout.ContainerLayout',
+    
+    /* End Definitions */
+
+    layoutItem: function(item, box) {
+        box = box || {};
+        if (item.componentLayout.initialized !== true) {
+            this.setItemSize(item, box.width || item.width || undefined, box.height || item.height || undefined);
+            // item.doComponentLayout(box.width || item.width || undefined, box.height || item.height || undefined);
+        }
+    },
+
+    getLayoutTargetSize : function() {
+        var target = this.getTarget(),
+            ret;
+
+        if (target) {
+            ret = target.getViewSize();
+
+            // IE in will sometimes return a width of 0 on the 1st pass of getViewSize.
+            // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly
+            // with getViewSize
+            if (Ext.isIE && ret.width == 0){
+                ret = target.getStyleSize();
             }
-        }
-        return items;
-    },
 
-    /**
-     * Examines this container's {@link #items} property
-     * and gets a direct child component of this container.
-     * @param {String/Number} comp This parameter may be any of the following:
-     * 
-     * a String : representing the {@link Ext.Component#itemId itemId}
-     * or {@link Ext.Component#id id} of the child component 
-     * a Number : representing the position of the child component
-     * within the {@link #items} property
-     * 
-     * 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();
+            ret.width -= target.getPadding('lr');
+            ret.height -= target.getPadding('tb');
         }
-        return this.items.get(comp);
+        return ret;
     },
 
-    // private
-    lookupComponent : function(comp){
-        if(Ext.isString(comp)){
-            return Ext.ComponentMgr.get(comp);
-        }else if(!comp.events){
-            return this.createComponent(comp);
+    beforeLayout: function() {
+        if (this.owner.beforeLayout(arguments) !== false) {
+            return this.callParent(arguments);
         }
-        return comp;
-    },
-
-    // private
-    createComponent : function(config, defaultType){
-        if (config.render) {
-            return config;
+        else {
+            return false;
         }
-        // add in ownerCt at creation time but then immediately
-        // remove so that onBeforeAdd can handle it
-        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.
-    */
-
-    // private
-    canLayout : function() {
-        var el = this.getVisibilityEl();
-        return el && el.dom && !el.isStyle("display", "none");
-    },
-
-    /**
-     * Force this container's layout to be recalculated. A call to this function is required after adding a new component
-     * to an already rendered container, or possibly after changing sizing/position properties of child components.
-     * @param {Boolean} shallow (optional) True to only calc the layout of this component, and let child components auto
-     * calc layouts as required (defaults to false, which calls doLayout recursively for each subcontainer)
-     * @param {Boolean} force (optional) True to force a layout to occur, even if the item is hidden.
-     * @return {Ext.Container} this
+    /**
+     * @protected
+     * Returns all items that are rendered
+     * @return {Array} All matching items
      */
+    getRenderedItems: function() {
+        var me = this,
+            target = me.getTarget(),
+            items = me.getLayoutItems(),
+            ln = items.length,
+            renderedItems = [],
+            i, item;
 
-    doLayout : function(shallow, force){
-        var rendered = this.rendered,
-            forceLayout = force || this.forceLayout;
-
-        if(this.collapsed || !this.canLayout()){
-            this.deferLayout = this.deferLayout || !shallow;
-            if(!forceLayout){
-                return;
+        for (i = 0; i < ln; i++) {
+            item = items[i];
+            if (item.rendered && me.isValidParent(item, target, i)) {
+                renderedItems.push(item);
             }
-            shallow = shallow && !this.deferLayout;
-        } else {
-            delete this.deferLayout;
         }
-        if(rendered && this.layout){
-            this.layout.layout();
-        }
-        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){
-            this.onLayout(shallow, forceLayout);
-        }
-        // Initial layout completed
-        this.hasLayout = true;
-        delete this.forceLayout;
-    },
-
-    onLayout : Ext.emptyFn,
 
-    // 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 = false;
-        this.ownerCt.bubble(function(c){
-            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);
-        }
+        return renderedItems;
     },
 
-    /**
-     * Returns the layout currently in use by the container.  If the container does not currently have a layout
-     * set, a default {@link Ext.layout.ContainerLayout} will be created and set as the container's layout.
-     * @return {ContainerLayout} layout The container's layout
+    /**
+     * @protected
+     * Returns all items that are both rendered and visible
+     * @return {Array} All matching items
      */
-    getLayout : function(){
-        if(!this.layout){
-            var layout = new Ext.layout.AutoLayout(this.layoutConfig);
-            this.setLayout(layout);
-        }
-        return this.layout;
-    },
+    getVisibleItems: function() {
+        var target   = this.getTarget(),
+            items = this.getLayoutItems(),
+            ln = items.length,
+            visibleItems = [],
+            i, item;
 
-    // private
-    beforeDestroy : function(){
-        var c;
-        if(this.items){
-            while(c = this.items.first()){
-                this.doRemove(c, true);
+        for (i = 0; i < ln; i++) {
+            item = items[i];
+            if (item.rendered && this.isValidParent(item, target, i) && item.hidden !== true) {
+                visibleItems.push(item);
             }
         }
-        if(this.monitorResize){
-            Ext.EventManager.removeResizeListener(this.doLayout, this);
-        }
-        Ext.destroy(this.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
-     * 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 (defaults to passing the current component)
-     * @return {Ext.Container} this
-     */
-    cascade : function(fn, scope, args){
-        if(fn.apply(scope || this, args || [this]) !== false){
-            if(this.items){
-                var cs = this.items.items;
-                for(var i = 0, len = cs.length; i < len; i++){
-                    if(cs[i].cascade){
-                        cs[i].cascade(fn, scope, args);
-                    }else{
-                        fn.apply(scope || cs[i], args || [cs[i]]);
-                    }
-                }
-            }
-        }
-        return this;
-    },
-
-    /**
-     * Find a component under this container at any level by id
-     * @param {String} id
-     * @return Ext.Component
-     */
-    findById : function(id){
-        var m, ct = this;
-        this.cascade(function(c){
-            if(ct != c && c.id === id){
-                m = c;
-                return false;
-            }
-        });
-        return m || null;
-    },
-
-    /**
-     * Find a component under this container at any level by xtype or class
-     * @param {String/Class} xtype The xtype string for a component, or the class of the component directly
-     * @param {Boolean} shallow (optional) False to check whether this Component is descended from the xtype (this is
-     * the default), or true to check whether this Component is directly of the specified xtype.
-     * @return {Array} Array of Ext.Components
-     */
-    findByType : function(xtype, shallow){
-        return this.findBy(function(c){
-            return c.isXType(xtype, shallow);
-        });
-    },
-
-    /**
-     * Find a component under this container at any level by property
-     * @param {String} prop
-     * @param {String} value
-     * @return {Array} Array of Ext.Components
-     */
-    find : function(prop, value){
-        return this.findBy(function(c){
-            return c[prop] === value;
-        });
-    },
-
-    /**
-     * Find a component under this container at any level by a custom function. If the passed function returns
-     * true, the component will be included in the results. The passed function is called with the arguments (component, this container).
-     * @param {Function} fn The function to call
-     * @param {Object} scope (optional)
-     * @return {Array} Array of Ext.Components
-     */
-    findBy : function(fn, scope){
-        var m = [], ct = this;
-        this.cascade(function(c){
-            if(ct != c && fn.call(scope || c, c, ct) === true){
-                m.push(c);
-            }
-        });
-        return m;
-    },
-
-    /**
-     * Get a component contained by this container (alias for items.get(key))
-     * @param {String/Number} key The index or id of the component
-     * @return {Ext.Component} Ext.Component
-     */
-    get : function(key){
-        return this.items.get(key);
+        return visibleItems;
     }
-});
-
-Ext.Container.LAYOUTS = {};
-Ext.reg('container', Ext.Container);
-    
+});

- \ No newline at end of file +