src/layout/container/Column.js

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