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