docs/source/Column2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-layout.container.Column'>/**
   2 </span> * @class Ext.layout.container.Column
   3  * @extends Ext.layout.container.Auto
   4  * &lt;p&gt;This is the layout style of choice for creating structural layouts in a multi-column format where the width of
   5  * each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content.
   6  * This class is intended to be extended or created via the layout:'column' {@link Ext.container.Container#layout} config,
   7  * and should generally not need to be created directly via the new keyword.&lt;/p&gt;
   8  * &lt;p&gt;ColumnLayout does not have any direct config options (other than inherited ones), but it does support a
   9  * specific config property of &lt;b&gt;&lt;tt&gt;columnWidth&lt;/tt&gt;&lt;/b&gt; that can be included in the config of any panel added to it.  The
  10  * layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel.
  11  * If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).&lt;/p&gt;
  12  * &lt;p&gt;The width property is always evaluated as pixels, and must be a number greater than or equal to 1.
  13  * The columnWidth property is always evaluated as a percentage, and must be a decimal value greater than 0 and
  14  * less than 1 (e.g., .25).&lt;/p&gt;
  15  * &lt;p&gt;The basic rules for specifying column widths are pretty simple.  The logic makes two passes through the
  16  * set of contained panels.  During the first layout pass, all panels that either have a fixed width or none
  17  * specified (auto) are skipped, but their widths are subtracted from the overall container width.  During the second
  18  * pass, all panels with columnWidths are assigned pixel widths in proportion to their percentages based on
  19  * the total &lt;b&gt;remaining&lt;/b&gt; container width.  In other words, percentage width panels are designed to fill the space
  20  * left over by all the fixed-width and/or auto-width panels.  Because of this, while you can specify any number of columns
  21  * with different percentages, the columnWidths must always add up to 1 (or 100%) when added together, otherwise your
  22  * layout may not render as expected.
  23  * {@img Ext.layout.container.Column/Ext.layout.container.Column1.png Ext.layout.container.Column container layout}
  24  * Example usage:&lt;/p&gt;
  25  * &lt;pre&gt;&lt;code&gt;
  26     // All columns are percentages -- they must add up to 1
  27     Ext.create('Ext.panel.Panel', {
  28         title: 'Column Layout - Percentage Only',
  29         width: 350,
  30         height: 250,
  31         layout:'column',
  32         items: [{
  33             title: 'Column 1',
  34             columnWidth: .25
  35         },{
  36             title: 'Column 2',
  37             columnWidth: .55
  38         },{
  39             title: 'Column 3',
  40             columnWidth: .20
  41         }],
  42         renderTo: Ext.getBody()
  43     });
  44
  45 // {@img Ext.layout.container.Column/Ext.layout.container.Column2.png Ext.layout.container.Column container layout}
  46 // Mix of width and columnWidth -- all columnWidth values must add up
  47 // to 1. The first column will take up exactly 120px, and the last two
  48 // columns will fill the remaining container width.
  49
  50     Ext.create('Ext.Panel', {
  51         title: 'Column Layout - Mixed',
  52         width: 350,
  53         height: 250,
  54         layout:'column',
  55         items: [{
  56             title: 'Column 1',
  57             width: 120
  58         },{
  59             title: 'Column 2',
  60             columnWidth: .7
  61         },{
  62             title: 'Column 3',
  63             columnWidth: .3
  64         }],
  65         renderTo: Ext.getBody()
  66     });
  67 &lt;/code&gt;&lt;/pre&gt;
  68  */
  69 Ext.define('Ext.layout.container.Column', {
  70
  71     extend: 'Ext.layout.container.Auto',
  72     alias: ['layout.column'],
  73     alternateClassName: 'Ext.layout.ColumnLayout',
  74
  75     type: 'column',
  76
  77     itemCls: Ext.baseCSSPrefix + 'column',
  78
  79     targetCls: Ext.baseCSSPrefix + 'column-layout-ct',
  80
  81     scrollOffset: 0,
  82
  83     bindToOwnerCtComponent: false,
  84
  85     getRenderTarget : function() {
  86         if (!this.innerCt) {
  87
  88             // the innerCt prevents wrapping and shuffling while
  89             // the container is resizing
  90             this.innerCt = this.getTarget().createChild({
  91                 cls: Ext.baseCSSPrefix + 'column-inner'
  92             });
  93
  94             // Column layout uses natural HTML flow to arrange the child items.
  95             // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
  96             // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
  97             this.clearEl = this.innerCt.createChild({
  98                 cls: Ext.baseCSSPrefix + 'clear',
  99                 role: 'presentation'
 100             });
 101         }
 102         return this.innerCt;
 103     },
 104
 105     // private
 106     onLayout : function() {
 107         var me = this,
 108             target = me.getTarget(),
 109             items = me.getLayoutItems(),
 110             len = items.length,
 111             item,
 112             i,
 113             parallelMargins = [],
 114             itemParallelMargins,
 115             size,
 116             availableWidth,
 117             columnWidth;
 118
 119         size = me.getLayoutTargetSize();
 120         if (size.width &lt; len * 10) { // Don't lay out in impossibly small target (probably display:none, or initial, unsized Container)
 121             return;
 122         }
 123
 124         // On the first pass, for all except IE6-7, we lay out the items with no scrollbars visible using style overflow: hidden.
 125         // If, after the layout, it is detected that there is vertical overflow,
 126         // we will recurse back through here. Do not adjust overflow style at that time.
 127         if (me.adjustmentPass) {
 128             if (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) {
 129                 size.width = me.adjustedWidth;
 130             }
 131         } else {
 132             i = target.getStyle('overflow');
 133             if (i &amp;&amp; i != 'hidden') {
 134                 me.autoScroll = true;
 135                 if (!(Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks)) {
 136                     target.setStyle('overflow', 'hidden');
 137                     size = me.getLayoutTargetSize();
 138                 }
 139             }
 140         }
 141
 142         availableWidth = size.width - me.scrollOffset;
 143         me.innerCt.setWidth(availableWidth);
 144
 145         // some columns can be percentages while others are fixed
 146         // so we need to make 2 passes
 147         for (i = 0; i &lt; len; i++) {
 148             item = items[i];
 149             itemParallelMargins = parallelMargins[i] = item.getEl().getMargin('lr');
 150             if (!item.columnWidth) {
 151                 availableWidth -= (item.getWidth() + itemParallelMargins);
 152             }
 153         }
 154
 155         availableWidth = availableWidth &lt; 0 ? 0 : availableWidth;
 156         for (i = 0; i &lt; len; i++) {
 157             item = items[i];
 158             if (item.columnWidth) {
 159                 columnWidth = Math.floor(item.columnWidth * availableWidth) - parallelMargins[i];
 160                 if (item.getWidth() != columnWidth) {
 161                     me.setItemSize(item, columnWidth, item.height);
 162                 }
 163             }
 164         }
 165
 166         // After the first pass on an autoScroll layout, restore the overflow settings if it had been changed (only changed for non-IE6)
 167         if (!me.adjustmentPass &amp;&amp; me.autoScroll) {
 168
 169             // If there's a vertical overflow, relay with scrollbars
 170             target.setStyle('overflow', 'auto');
 171             me.adjustmentPass = (target.dom.scrollHeight &gt; size.height);
 172             if (Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) {
 173                 me.adjustedWidth = size.width - Ext.getScrollBarWidth();
 174             } else {
 175                 target.setStyle('overflow', 'auto');
 176             }
 177
 178             // If the layout caused height overflow, recurse back and recalculate (with overflow setting restored on non-IE6)
 179             if (me.adjustmentPass) {
 180                 me.onLayout();
 181             }
 182         }
 183         delete me.adjustmentPass;
 184     }
 185 });</pre></pre></body></html>