src/layout/container/Anchor.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  * @class Ext.layout.container.Anchor
  17  * @extends Ext.layout.container.Container
  18  *
  19  * This is a layout that enables anchoring of contained elements relative to the container's dimensions.
  20  * If the container is resized, all anchored items are automatically rerendered according to their
  21  * `{@link #anchor}` rules.
  22  *
  23  * This class is intended to be extended or created via the {@link Ext.container.AbstractContainer#layout layout}: 'anchor'
  24  * config, and should generally not need to be created directly via the new keyword.
  25  *
  26  * AnchorLayout does not have any direct config options (other than inherited ones). By default,
  27  * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
  28  * container using the AnchorLayout can supply an anchoring-specific config property of `anchorSize`.
  29  *
  30  * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
  31  * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
  32  * logic if necessary.
  33  *
  34  *     @example
  35  *     Ext.create('Ext.Panel', {
  36  *         width: 500,
  37  *         height: 400,
  38  *         title: "AnchorLayout Panel",
  39  *         layout: 'anchor',
  40  *         renderTo: Ext.getBody(),
  41  *         items: [
  42  *             {
  43  *                 xtype: 'panel',
  44  *                 title: '75% Width and 20% Height',
  45  *                 anchor: '75% 20%'
  46  *             },
  47  *             {
  48  *                 xtype: 'panel',
  49  *                 title: 'Offset -300 Width & -200 Height',
  50  *                 anchor: '-300 -200'
  51  *             },
  52  *             {
  53  *                 xtype: 'panel',
  54  *                 title: 'Mixed Offset and Percent',
  55  *                 anchor: '-250 20%'
  56  *             }
  57  *         ]
  58  *     });
  59  */
  60 Ext.define('Ext.layout.container.Anchor', {
  61
  62     /* Begin Definitions */
  63
  64     alias: 'layout.anchor',
  65     extend: 'Ext.layout.container.Container',
  66     alternateClassName: 'Ext.layout.AnchorLayout',
  67
  68     /* End Definitions */
  69
  70     /**
  71      * @cfg {String} anchor
  72      *
  73      * This configuation option is to be applied to **child `items`** of a container managed by
  74      * this layout (ie. configured with `layout:'anchor'`).
  75      *
  76      * This value is what tells the layout how an item should be anchored to the container. `items`
  77      * added to an AnchorLayout accept an anchoring-specific config property of **anchor** which is a string
  78      * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
  79      * The following types of anchor values are supported:
  80      *
  81      * - **Percentage** : Any value between 1 and 100, expressed as a percentage.
  82      *
  83      *   The first anchor is the percentage width that the item should take up within the container, and the
  84      *   second is the percentage height.  For example:
  85      *
  86      *       // two values specified
  87      *       anchor: '100% 50%' // render item complete width of the container and
  88      *                          // 1/2 height of the container
  89      *       // one value specified
  90      *       anchor: '100%'     // the width value; the height will default to auto
  91      *
  92      * - **Offsets** : Any positive or negative integer value.
  93      *
  94      *   This is a raw adjustment where the first anchor is the offset from the right edge of the container,
  95      *   and the second is the offset from the bottom edge. For example:
  96      *
  97      *       // two values specified
  98      *       anchor: '-50 -100' // render item the complete width of the container
  99      *                          // minus 50 pixels and
 100      *                          // the complete height minus 100 pixels.
 101      *       // one value specified
 102      *       anchor: '-50'      // anchor value is assumed to be the right offset value
 103      *                          // bottom offset will default to 0
 104      *
 105      * - **Sides** : Valid values are `right` (or `r`) and `bottom` (or `b`).
 106      *
 107      *   Either the container must have a fixed size or an anchorSize config value defined at render time in
 108      *   order for these to have any effect.
 109      *
 110      * - **Mixed** :
 111      *
 112      *   Anchor values can also be mixed as needed.  For example, to render the width offset from the container
 113      *   right edge by 50 pixels and 75% of the container's height use:
 114      *
 115      *       anchor:   '-50 75%'
 116      */
 117     type: 'anchor',
 118
 119     /**
 120      * @cfg {String} defaultAnchor
 121      * Default anchor for all child <b>container</b> items applied if no anchor or specific width is set on the child item.  Defaults to '100%'.
 122      */
 123     defaultAnchor: '100%',
 124
 125     parseAnchorRE: /^(r|right|b|bottom)$/i,
 126
 127     // private
 128     onLayout: function() {
 129         this.callParent(arguments);
 130
 131         var me = this,
 132             size = me.getLayoutTargetSize(),
 133             owner = me.owner,
 134             target = me.getTarget(),
 135             ownerWidth = size.width,
 136             ownerHeight = size.height,
 137             overflow = target.getStyle('overflow'),
 138             components = me.getVisibleItems(owner),
 139             len = components.length,
 140             boxes = [],
 141             box, newTargetSize, component, anchorSpec, calcWidth, calcHeight,
 142             i, el, cleaner;
 143
 144         if (ownerWidth < 20 && ownerHeight < 20) {
 145             return;
 146         }
 147
 148         // Anchor layout uses natural HTML flow to arrange the child items.
 149         // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
 150         // containing element height, we create a zero-sized element with style clear:both to force a "new line"
 151         if (!me.clearEl) {
 152             me.clearEl = target.createChild({
 153                 cls: Ext.baseCSSPrefix + 'clear',
 154                 role: 'presentation'
 155             });
 156         }
 157
 158         // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done
 159         if (!Ext.supports.RightMargin) {
 160             cleaner = Ext.Element.getRightMarginFixCleaner(target);
 161             target.addCls(Ext.baseCSSPrefix + 'inline-children');
 162         }
 163
 164         for (i = 0; i < len; i++) {
 165             component = components[i];
 166             el = component.el;
 167
 168             anchorSpec = component.anchorSpec;
 169             if (anchorSpec) {
 170                 if (anchorSpec.right) {
 171                     calcWidth = me.adjustWidthAnchor(anchorSpec.right(ownerWidth) - el.getMargin('lr'), component);
 172                 } else {
 173                     calcWidth = undefined;
 174                 }
 175                 if (anchorSpec.bottom) {
 176                     calcHeight = me.adjustHeightAnchor(anchorSpec.bottom(ownerHeight) - el.getMargin('tb'), component);
 177                 } else {
 178                     calcHeight = undefined;
 179                 }
 180
 181                 boxes.push({
 182                     component: component,
 183                     anchor: true,
 184                     width: calcWidth || undefined,
 185                     height: calcHeight || undefined
 186                 });
 187             } else {
 188                 boxes.push({
 189                     component: component,
 190                     anchor: false
 191                 });
 192             }
 193         }
 194
 195         // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done
 196         if (!Ext.supports.RightMargin) {
 197             target.removeCls(Ext.baseCSSPrefix + 'inline-children');
 198             cleaner();
 199         }
 200
 201         for (i = 0; i < len; i++) {
 202             box = boxes[i];
 203             me.setItemSize(box.component, box.width, box.height);
 204         }
 205
 206         if (overflow && overflow != 'hidden' && !me.adjustmentPass) {
 207             newTargetSize = me.getLayoutTargetSize();
 208             if (newTargetSize.width != size.width || newTargetSize.height != size.height) {
 209                 me.adjustmentPass = true;
 210                 me.onLayout();
 211             }
 212         }
 213
 214         delete me.adjustmentPass;
 215     },
 216
 217     // private
 218     parseAnchor: function(a, start, cstart) {
 219         if (a && a != 'none') {
 220             var ratio;
 221             // standard anchor
 222             if (this.parseAnchorRE.test(a)) {
 223                 var diff = cstart - start;
 224                 return function(v) {
 225                     return v - diff;
 226                 };
 227             }
 228             // percentage
 229             else if (a.indexOf('%') != -1) {
 230                 ratio = parseFloat(a.replace('%', '')) * 0.01;
 231                 return function(v) {
 232                     return Math.floor(v * ratio);
 233                 };
 234             }
 235             // simple offset adjustment
 236             else {
 237                 a = parseInt(a, 10);
 238                 if (!isNaN(a)) {
 239                     return function(v) {
 240                         return v + a;
 241                     };
 242                 }
 243             }
 244         }
 245         return null;
 246     },
 247
 248     // private
 249     adjustWidthAnchor: function(value, comp) {
 250         return value;
 251     },
 252
 253     // private
 254     adjustHeightAnchor: function(value, comp) {
 255         return value;
 256     },
 257
 258     configureItem: function(item) {
 259         var me = this,
 260             owner = me.owner,
 261             anchor= item.anchor,
 262             anchorsArray,
 263             anchorSpec,
 264             anchorWidth,
 265             anchorHeight;
 266
 267         if (!item.anchor && item.items && !Ext.isNumber(item.width) && !(Ext.isIE6 && Ext.isStrict)) {
 268             item.anchor = anchor = me.defaultAnchor;
 269         }
 270
 271         // find the container anchoring size
 272         if (owner.anchorSize) {
 273             if (typeof owner.anchorSize == 'number') {
 274                 anchorWidth = owner.anchorSize;
 275             }
 276             else {
 277                 anchorWidth = owner.anchorSize.width;
 278                 anchorHeight = owner.anchorSize.height;
 279             }
 280         }
 281         else {
 282             anchorWidth = owner.initialConfig.width;
 283             anchorHeight = owner.initialConfig.height;
 284         }
 285
 286         if (anchor) {
 287             // cache all anchor values
 288             anchorsArray = anchor.split(' ');
 289             item.anchorSpec = anchorSpec = {
 290                 right: me.parseAnchor(anchorsArray[0], item.initialConfig.width, anchorWidth),
 291                 bottom: me.parseAnchor(anchorsArray[1], item.initialConfig.height, anchorHeight)
 292             };
 293
 294             if (anchorSpec.right) {
 295                 item.layoutManagedWidth = 1;
 296             } else {
 297                 item.layoutManagedWidth = 2;
 298             }
 299
 300             if (anchorSpec.bottom) {
 301                 item.layoutManagedHeight = 1;
 302             } else {
 303                 item.layoutManagedHeight = 2;
 304             }
 305         } else {
 306             item.layoutManagedWidth = 2;
 307             item.layoutManagedHeight = 2;
 308         }
 309         this.callParent(arguments);
 310     }
 311
 312 });