X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/layout/container/Column.js

diff --git a/src/layout/container/Column.js b/src/layout/container/Column.js
index 46401e78..7e488951 100644
--- a/src/layout/container/Column.js
+++ b/src/layout/container/Column.js
@@ -13,72 +13,70 @@ If you are unsure which license is appropriate for your use, please contact the
 
 */
 /**
- * @class Ext.layout.container.Column
- * @extends Ext.layout.container.Auto
- * <p>This is the layout style of choice for creating structural layouts in a multi-column format where the width of
- * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
- * This class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config,
- * and should generally not need to be created directly via the new keyword.</p>
- * <p>ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
- * specific config property of <b><tt>columnWidth</tt></b> that can be included in the config of any panel added to it.  The
- * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
- * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).</p>
- * <p>The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
- * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
- * less than 1 (e.g., .25).</p>
- * <p>The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the
- * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none
- * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second
- * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
- * the total <b>remaining</b> container width.  In other words, percentage width panels are designed to fill the space
- * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns
- * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
- * layout may not render as expected.  
- * {@img Ext.layout.container.Column/Ext.layout.container.Column1.png Ext.layout.container.Column container layout}
- * Example usage:</p>
- * <pre><code>
-    // All columns are percentages -- they must add up to 1
-    Ext.create('Ext.panel.Panel', {
-        title: 'Column Layout - Percentage Only',
-        width: 350,
-        height: 250,
-        layout:'column',
-        items: [{
-            title: 'Column 1',
-            columnWidth: .25
-        },{
-            title: 'Column 2',
-            columnWidth: .55
-        },{
-            title: 'Column 3',
-            columnWidth: .20
-        }],
-        renderTo: Ext.getBody()
-    }); 
-
-// {@img Ext.layout.container.Column/Ext.layout.container.Column2.png Ext.layout.container.Column container layout}
-// Mix of width and columnWidth -- all columnWidth values must add up
-// to 1. The first column will take up exactly 120px, and the last two
-// columns will fill the remaining container width.
-
-    Ext.create('Ext.Panel', {
-        title: 'Column Layout - Mixed',
-        width: 350,
-        height: 250,
-        layout:'column',
-        items: [{
-            title: 'Column 1',
-            width: 120
-        },{
-            title: 'Column 2',
-            columnWidth: .7
-        },{
-            title: 'Column 3',
-            columnWidth: .3
-        }],
-        renderTo: Ext.getBody()
-    }); 
-</code></pre>
+ * This is the layout style of choice for creating structural layouts in a multi-column format where the width of each
+ * column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This
+ * class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
+ *
+ * ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific
+ * config property of `columnWidth` that can be included in the config of any panel added to it. The layout will use
+ * the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or
+ * columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
+ *
+ * The width property is always evaluated as pixels, and must be a number greater than or equal to 1. The columnWidth
+ * property is always evaluated as a percentage, and must be a decimal value greater than 0 and less than 1 (e.g., .25).
+ *
+ * The basic rules for specifying column widths are pretty simple. The logic makes two passes through the set of
+ * contained panels. During the first layout pass, all panels that either have a fixed width or none specified (auto)
+ * are skipped, but their widths are subtracted from the overall container width.
+ *
+ * During the second pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages
+ * based on the total **remaining** container width. In other words, percentage width panels are designed to fill
+ * the space left over by all the fixed-width and/or auto-width panels. Because of this, while you can specify any
+ * number of columns with different percentages, the columnWidths must always add up to 1 (or 100%) when added
+ * together, otherwise your layout may not render as expected.
+ *
+ *     @example
+ *     // All columns are percentages -- they must add up to 1
+ *     Ext.create('Ext.panel.Panel', {
+ *         title: 'Column Layout - Percentage Only',
+ *         width: 350,
+ *         height: 250,
+ *         layout:'column',
+ *         items: [{
+ *             title: 'Column 1',
+ *             columnWidth: .25
+ *         },{
+ *             title: 'Column 2',
+ *             columnWidth: .55
+ *         },{
+ *             title: 'Column 3',
+ *             columnWidth: .20
+ *         }],
+ *         renderTo: Ext.getBody()
+ *     });
+ *
+ *     // Mix of width and columnWidth -- all columnWidth values must add up
+ *     // to 1. The first column will take up exactly 120px, and the last two
+ *     // columns will fill the remaining container width.
+ *
+ *     Ext.create('Ext.Panel', {
+ *         title: 'Column Layout - Mixed',
+ *         width: 350,
+ *         height: 250,
+ *         layout:'column',
+ *         items: [{
+ *             title: 'Column 1',
+ *             width: 120
+ *         },{
+ *             title: 'Column 2',
+ *             columnWidth: .7
+ *         },{
+ *             title: 'Column 3',
+ *             columnWidth: .3
+ *         }],
+ *         renderTo: Ext.getBody()
+ *     });
  */
 Ext.define('Ext.layout.container.Column', {
 
@@ -171,9 +169,9 @@ Ext.define('Ext.layout.container.Column', {
             item = items[i];
             if (item.columnWidth) {
                 columnWidth = Math.floor(item.columnWidth * availableWidth) - parallelMargins[i];
-                if (item.getWidth() != columnWidth) {
-                    me.setItemSize(item, columnWidth, item.height);
-                }
+                me.setItemSize(item, columnWidth, item.height);
+            } else {
+                me.layoutItem(item);
             }
         }
 
@@ -198,12 +196,10 @@ Ext.define('Ext.layout.container.Column', {
     },
 
     configureItem: function(item) {
+        this.callParent(arguments);
+
         if (item.columnWidth) {
             item.layoutManagedWidth = 1;
-        } else {
-            item.layoutManagedWidth = 2;
         }
-        item.layoutManagedHeight = 2;
-        this.callParent(arguments);
     }
 });