docs/source/Column2.html

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