Upgrade to ExtJS 3.3.1 - Released 11/30/2010

[extjs.git] / src / widgets / layout / ContainerLayout.js

diff --git a/src/widgets/layout/ContainerLayout.js b/src/widgets/layout/ContainerLayout.js
index 70b01f7..937b366 100644 (file)
--- a/src/widgets/layout/ContainerLayout.js
+++ b/src/widgets/layout/ContainerLayout.js
@@ -1,25 +1,15 @@
 /*!
 /*!

- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license

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

- * <p>The ContainerLayout class is the default layout manager delegated by {@link Ext.Container} to
- * render any child Components when no <tt>{@link Ext.Container#layout layout}</tt> 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 <tt>{@link Ext.Container#layout layout}</tt>.</p>

  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  */
  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  */

-Ext.layout.ContainerLayout = function(config){
-    Ext.apply(this, config);
-};
-
-Ext.layout.ContainerLayout.prototype = {
+Ext.layout.ContainerLayout = Ext.extend(Object, {

     /**
      * @cfg {String} extraCls
      * <p>An optional extra CSS class that will be added to the container. This can be useful for adding
     /**
      * @cfg {String} extraCls
      * <p>An optional extra CSS class that will be added to the container. This can be useful for adding


@@ -59,11 +49,49 @@ Ext.layout.ContainerLayout.prototype = {
     // private
     activeItem : null,
 
     // private
     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(){
     // private
     layout : function(){

-        var target = this.container.getLayoutTarget();
-        this.onLayout(this.container, target);
-        this.container.fireEvent('afterlayout', this.container, this);
+        var ct = this.container, target = ct.getLayoutTarget();
+        if(!(this.hasLayout || Ext.isEmpty(this.targetCls))){
+            target.addClass(this.targetCls);
+        }
+        this.onLayout(ct, target);
+        ct.fireEvent('afterlayout', ct, this);

     },
 
     // private
     },
 
     // private


@@ -73,91 +101,128 @@ Ext.layout.ContainerLayout.prototype = {
 
     // private
     isValidParent : function(c, target){
 
     // private
     isValidParent : function(c, target){

-               return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
+        return target && c.getPositionEl().dom.parentNode == (target.dom || target);

     },
 
     // private
     renderAll : function(ct, 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];
+        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);
             }
         }
     },
 
             if(c && (!c.rendered || !this.isValidParent(c, target))){
                 this.renderItem(c, i, target);
             }
         }
     },
 

-    // private
+    /**
+     * @private
+     * Renders the given Component into the target Element. If the Component is already rendered,
+     * it is moved to the provided target instead.
+     * @param {Ext.Component} c The Component to render
+     * @param {Number} position The position within the target to render the item to
+     * @param {Ext.Element} target The target Element
+     */

     renderItem : function(c, position, target){
     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);
+            } 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);

             }
             }

-            target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
-            c.container = target;
-            this.configureItem(c, position);

         }
     },
         }
     },

-    
-    // private
-    configureItem: function(c, position){
-        if(this.extraCls){
+
+    // 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) && c.shouldLayout !== false){
+                items.push(c);
+            }
+        };
+        return items;
+    },
+
+    /**
+     * @private
+     * Applies extraCls and hides the item if renderHidden is true
+     */
+    configureItem: function(c){
+        if (this.extraCls) {

             var t = c.getPositionEl ? c.getPositionEl() : c;
             t.addClass(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();
+        }

         if (this.renderHidden && c != this.activeItem) {
             c.hide();
         }
         if (this.renderHidden && c != this.activeItem) {
             c.hide();
         }

-        if(c.doLayout && this.forceLayout){
-            c.doLayout(false, true);
-        }

     },
     },

-    
+

     onRemove: function(c){
     onRemove: function(c){

-         if(this.activeItem == c){
+        if(this.activeItem == c){

             delete this.activeItem;
             delete this.activeItem;

-         }
-         if(c.rendered && this.extraCls){
+        }
+        if(c.rendered && this.extraCls){

             var t = c.getPositionEl ? c.getPositionEl() : c;
             t.removeClass(this.extraCls);
         }
     },
 
             var t = c.getPositionEl ? c.getPositionEl() : c;
             t.removeClass(this.extraCls);
         }
     },
 

+    afterRemove: function(c){
+        if(c.removeRestore){
+            c.removeMode = 'container';
+            delete c.removeRestore;
+        }
+    },
+

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

-            

         if(ct.collapsed){
             return;
         }
         if(ct.collapsed){
             return;
         }

-        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;
-                }
-                ct.layoutPending = true;
-                this.resizeTask.delay(this.resizeBuffer);
+        if(b = ct.bufferResize && ct.shouldBufferLayout()){
+            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{
         }else{

-            ct.doLayout();
+            this.runLayout();

         }
     },
         }
     },

-    
-    // private
+

     runLayout: function(){
         var ct = this.container;
     runLayout: function(){
         var ct = this.container;

-        ct.doLayout();
+        this.layout();
+        ct.onLayout();

         delete ct.layoutPending;
     },
 
     // private
     setContainer : function(ct){
         delete ct.layoutPending;
     },
 
     // private
     setContainer : function(ct){

+        /**
+         * 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){
         if(this.monitorResize && ct != this.container){
             var old = this.container;
             if(old){


@@ -170,30 +235,33 @@ Ext.layout.ContainerLayout.prototype = {
         this.container = ct;
     },
 
         this.container = ct;
     },
 

-    // private
+    /**
+     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
+     * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
+     * @param {Number|String} v The encoded margins
+     * @return {Object} An object with margin sizes for top, right, bottom and left
+     */

     parseMargins : function(v){
     parseMargins : function(v){

-        if(Ext.isNumber(v)){
+        if (Ext.isNumber(v)) {

             v = v.toString();
         }
             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){
+        var ms  = v.split(' '),
+            len = ms.length;
+            
+        if (len == 1) {
+            ms[1] = ms[2] = ms[3] = ms[0];
+        } else if(len == 2) {

             ms[2] = ms[0];
             ms[3] = ms[1];
             ms[2] = ms[0];
             ms[3] = ms[1];

-        }
-        if(len == 3){
+        } else if(len == 3) {

             ms[3] = ms[1];
         }
             ms[3] = ms[1];
         }

+        

         return {
         return {

-            top:parseInt(ms[0], 10) || 0,
-            right:parseInt(ms[1], 10) || 0,
+            top   :parseInt(ms[0], 10) || 0,
+            right :parseInt(ms[1], 10) || 0,

             bottom:parseInt(ms[2], 10) || 0,
             bottom:parseInt(ms[2], 10) || 0,

-            left:parseInt(ms[3], 10) || 0
+            left  :parseInt(ms[3], 10) || 0

         };
     },
 
         };
     },
 


@@ -217,12 +285,25 @@ Ext.layout.ContainerLayout.prototype = {
         t.disableFormats = true;
         return t.compile();
     })(),
         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
      */
     /*
      * 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;
\ No newline at end of file
+    destroy : function(){
+        // Stop any buffered layout tasks
+        if(this.resizeTask && this.resizeTask.cancel){
+            this.resizeTask.cancel();
+        }
+        if(this.container) {
+            this.container.un(this.container.resizeEvent, this.onResize, this);
+        }
+        if(!Ext.isEmpty(this.targetCls)){
+            var target = this.container.getLayoutTarget();
+            if(target){
+                target.removeClass(this.targetCls);
+            }
+        }
+    }
+});
\ No newline at end of file