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      *
 124      * default anchor for all child container items applied if no anchor or specific width is set on the child item.  Defaults to '100%'.
 125      *
 126      */
 127     defaultAnchor: '100%',
 128
 129     parseAnchorRE: /^(r|right|b|bottom)$/i,
 130
 131     // private
 132     onLayout: function() {
 133         this.callParent(arguments);
 134
 135         var me = this,
 136             size = me.getLayoutTargetSize(),
 137             owner = me.owner,
 138             target = me.getTarget(),
 139             ownerWidth = size.width,
 140             ownerHeight = size.height,
 141             overflow = target.getStyle('overflow'),
 142             components = me.getVisibleItems(owner),
 143             len = components.length,
 144             boxes = [],
 145             box, newTargetSize, anchorWidth, anchorHeight, component, anchorSpec, calcWidth, calcHeight,
 146             anchorsArray, anchor, i, el, cleaner;
 147
 148         if (ownerWidth &lt; 20 &amp;&amp; ownerHeight &lt; 20) {
 149             return;
 150         }
 151
 152         // Anchor layout uses natural HTML flow to arrange the child items.
 153         // To ensure that all browsers (I'm looking at you IE!) add the bottom margin of the last child to the
 154         // containing element height, we create a zero-sized element with style clear:both to force a &quot;new line&quot;
 155         if (!me.clearEl) {
 156             me.clearEl = target.createChild({
 157                 cls: Ext.baseCSSPrefix + 'clear',
 158                 role: 'presentation'
 159             });
 160         }
 161
 162         // find the container anchoring size
 163         if (owner.anchorSize) {
 164             if (typeof owner.anchorSize == 'number') {
 165                 anchorWidth = owner.anchorSize;
 166             }
 167             else {
 168                 anchorWidth = owner.anchorSize.width;
 169                 anchorHeight = owner.anchorSize.height;
 170             }
 171         }
 172         else {
 173             anchorWidth = owner.initialConfig.width;
 174             anchorHeight = owner.initialConfig.height;
 175         }
 176
 177         // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done
 178         if (!Ext.supports.RightMargin) {
 179             cleaner = Ext.core.Element.getRightMarginFixCleaner(target);
 180             target.addCls(Ext.baseCSSPrefix + 'inline-children');
 181         }
 182
 183         for (i = 0; i &lt; len; i++) {
 184             component = components[i];
 185             el = component.el;
 186             anchor = component.anchor;
 187
 188             if (!component.anchor &amp;&amp; component.items &amp;&amp; !Ext.isNumber(component.width) &amp;&amp; !(Ext.isIE6 &amp;&amp; Ext.isStrict)) {
 189                 component.anchor = anchor = me.defaultAnchor;
 190             }
 191
 192             if (anchor) {
 193                 anchorSpec = component.anchorSpec;
 194                 // cache all anchor values
 195                 if (!anchorSpec) {
 196                     anchorsArray = anchor.split(' ');
 197                     component.anchorSpec = anchorSpec = {
 198                         right: me.parseAnchor(anchorsArray[0], component.initialConfig.width, anchorWidth),
 199                         bottom: me.parseAnchor(anchorsArray[1], component.initialConfig.height, anchorHeight)
 200                     };
 201                 }
 202                 calcWidth = anchorSpec.right ? me.adjustWidthAnchor(anchorSpec.right(ownerWidth) - el.getMargin('lr'), component) : undefined;
 203                 calcHeight = anchorSpec.bottom ? me.adjustHeightAnchor(anchorSpec.bottom(ownerHeight) - el.getMargin('tb'), component) : undefined;
 204
 205                 boxes.push({
 206                     component: component,
 207                     anchor: true,
 208                     width: calcWidth || undefined,
 209                     height: calcHeight || undefined
 210                 });
 211             } else {
 212                 boxes.push({
 213                     component: component,
 214                     anchor: false
 215                 });
 216             }
 217         }
 218
 219         // Work around WebKit RightMargin bug. We're going to inline-block all the children only ONCE and remove it when we're done
 220         if (!Ext.supports.RightMargin) {
 221             target.removeCls(Ext.baseCSSPrefix + 'inline-children');
 222             cleaner();
 223         }
 224
 225         for (i = 0; i &lt; len; i++) {
 226             box = boxes[i];
 227             me.setItemSize(box.component, box.width, box.height);
 228         }
 229
 230         if (overflow &amp;&amp; overflow != 'hidden' &amp;&amp; !me.adjustmentPass) {
 231             newTargetSize = me.getLayoutTargetSize();
 232             if (newTargetSize.width != size.width || newTargetSize.height != size.height) {
 233                 me.adjustmentPass = true;
 234                 me.onLayout();
 235             }
 236         }
 237
 238         delete me.adjustmentPass;
 239     },
 240
 241     // private
 242     parseAnchor: function(a, start, cstart) {
 243         if (a &amp;&amp; a != 'none') {
 244             var ratio;
 245             // standard anchor
 246             if (this.parseAnchorRE.test(a)) {
 247                 var diff = cstart - start;
 248                 return function(v) {
 249                     return v - diff;
 250                 };
 251             }
 252             // percentage
 253             else if (a.indexOf('%') != -1) {
 254                 ratio = parseFloat(a.replace('%', '')) * 0.01;
 255                 return function(v) {
 256                     return Math.floor(v * ratio);
 257                 };
 258             }
 259             // simple offset adjustment
 260             else {
 261                 a = parseInt(a, 10);
 262                 if (!isNaN(a)) {
 263                     return function(v) {
 264                         return v + a;
 265                     };
 266                 }
 267             }
 268         }
 269         return null;
 270     },
 271
 272     // private
 273     adjustWidthAnchor: function(value, comp) {
 274         return value;
 275     },
 276
 277     // private
 278     adjustHeightAnchor: function(value, comp) {
 279         return value;
 280     }
 281
 282 });</pre>
 283 </body>
 284 </html>