docs/source/AnchorLayout.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.layout.AnchorLayout"></div>/**
  10  * @class Ext.layout.AnchorLayout
  11  * @extends Ext.layout.ContainerLayout
  12  * <p>This is a layout that enables anchoring of contained elements relative to the container's dimensions.
  13  * If the container is resized, all anchored items are automatically rerendered according to their
  14  * <b><tt>{@link #anchor}</tt></b> rules.</p>
  15  * <p>This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout}
  16  * config, and should generally not need to be created directly via the new keyword.</p>
  17  * <p>AnchorLayout does not have any direct config options (other than inherited ones). By default,
  18  * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, the
  19  * container using the AnchorLayout can supply an anchoring-specific config property of <b>anchorSize</b>.
  20  * If anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating
  21  * anchor measurements based on it instead, allowing the container to be sized independently of the anchoring
  22  * logic if necessary.  For example:</p>
  23  * <pre><code>
  24 var viewport = new Ext.Viewport({
  25     layout:'anchor',
  26     anchorSize: {width:800, height:600},
  27     items:[{
  28         title:'Item 1',
  29         html:'Content 1',
  30         width:800,
  31         anchor:'right 20%'
  32     },{
  33         title:'Item 2',
  34         html:'Content 2',
  35         width:300,
  36         anchor:'50% 30%'
  37     },{
  38         title:'Item 3',
  39         html:'Content 3',
  40         width:600,
  41         anchor:'-100 50%'
  42     }]
  43 });
  44  * </code></pre>
  45  */
  46 Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {
  47     <div id="cfg-Ext.layout.AnchorLayout-anchor"></div>/**
  48      * @cfg {String} anchor
  49      * <p>This configuation option is to be applied to <b>child <tt>items</tt></b> of a container managed by
  50      * this layout (ie. configured with <tt>layout:'anchor'</tt>).</p><br/>
  51      *
  52      * <p>This value is what tells the layout how an item should be anchored to the container. <tt>items</tt>
  53      * added to an AnchorLayout accept an anchoring-specific config property of <b>anchor</b> which is a string
  54      * containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%').
  55      * The following types of anchor values are supported:<div class="mdetail-params"><ul>
  56      *
  57      * <li><b>Percentage</b> : Any value between 1 and 100, expressed as a percentage.<div class="sub-desc">
  58      * The first anchor is the percentage width that the item should take up within the container, and the
  59      * second is the percentage height.  For example:<pre><code>
  60 // two values specified
  61 anchor: '100% 50%' // render item complete width of the container and
  62                    // 1/2 height of the container
  63 // one value specified
  64 anchor: '100%'     // the width value; the height will default to auto
  65      * </code></pre></div></li>
  66      *
  67      * <li><b>Offsets</b> : Any positive or negative integer value.<div class="sub-desc">
  68      * This is a raw adjustment where the first anchor is the offset from the right edge of the container,
  69      * and the second is the offset from the bottom edge. For example:<pre><code>
  70 // two values specified
  71 anchor: '-50 -100' // render item the complete width of the container
  72                    // minus 50 pixels and
  73                    // the complete height minus 100 pixels.
  74 // one value specified
  75 anchor: '-50'      // anchor value is assumed to be the right offset value
  76                    // bottom offset will default to 0
  77      * </code></pre></div></li>
  78      *
  79      * <li><b>Sides</b> : Valid values are <tt>'right'</tt> (or <tt>'r'</tt>) and <tt>'bottom'</tt>
  80      * (or <tt>'b'</tt>).<div class="sub-desc">
  81      * Either the container must have a fixed size or an anchorSize config value defined at render time in
  82      * order for these to have any effect.</div></li>
  83      *
  84      * <li><b>Mixed</b> : <div class="sub-desc">
  85      * Anchor values can also be mixed as needed.  For example, to render the width offset from the container
  86      * right edge by 50 pixels and 75% of the container's height use:
  87      * <pre><code>
  88 anchor: '-50 75%'
  89      * </code></pre></div></li>
  90      *
  91      *
  92      * </ul></div>
  93      */
  94
  95     // private
  96     monitorResize:true,
  97
  98     // private
  99     // deprecate
 100     getAnchorViewSize : function(ct, target){
 101         return target.dom == document.body ?
 102                    target.getViewSize(true) : target.getStyleSize();
 103     },
 104
 105     // private
 106     onLayout : function(ct, target){
 107         Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
 108
 109         var size = target.getViewSize(true);
 110
 111         var w = size.width, h = size.height;
 112
 113         if(w < 20 && h < 20){
 114             return;
 115         }
 116
 117         // find the container anchoring size
 118         var aw, ah;
 119         if(ct.anchorSize){
 120             if(typeof ct.anchorSize == 'number'){
 121                 aw = ct.anchorSize;
 122             }else{
 123                 aw = ct.anchorSize.width;
 124                 ah = ct.anchorSize.height;
 125             }
 126         }else{
 127             aw = ct.initialConfig.width;
 128             ah = ct.initialConfig.height;
 129         }
 130
 131         var cs = ct.items.items, len = cs.length, i, c, a, cw, ch, el, vs;
 132         for(i = 0; i < len; i++){
 133             c = cs[i];
 134             el = c.getPositionEl();
 135             if(c.anchor){
 136                 a = c.anchorSpec;
 137                 if(!a){ // cache all anchor values
 138                     vs = c.anchor.split(' ');
 139                     c.anchorSpec = a = {
 140                         right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
 141                         bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
 142                     };
 143                 }
 144                 cw = a.right ? this.adjustWidthAnchor(a.right(w) - el.getMargins('lr'), c) : undefined;
 145                 ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined;
 146
 147                 if(cw || ch){
 148                     c.setSize(cw || undefined, ch || undefined);
 149                 }
 150             }
 151         }
 152     },
 153
 154     // private
 155     parseAnchor : function(a, start, cstart){
 156         if(a && a != 'none'){
 157             var last;
 158             if(/^(r|right|b|bottom)$/i.test(a)){   // standard anchor
 159                 var diff = cstart - start;
 160                 return function(v){
 161                     if(v !== last){
 162                         last = v;
 163                         return v - diff;
 164                     }
 165                 }
 166             }else if(a.indexOf('%') != -1){
 167                 var ratio = parseFloat(a.replace('%', ''))*.01;   // percentage
 168                 return function(v){
 169                     if(v !== last){
 170                         last = v;
 171                         return Math.floor(v*ratio);
 172                     }
 173                 }
 174             }else{
 175                 a = parseInt(a, 10);
 176                 if(!isNaN(a)){                            // simple offset adjustment
 177                     return function(v){
 178                         if(v !== last){
 179                             last = v;
 180                             return v + a;
 181                         }
 182                     }
 183                 }
 184             }
 185         }
 186         return false;
 187     },
 188
 189     // private
 190     adjustWidthAnchor : function(value, comp){
 191         return value;
 192     },
 193
 194     // private
 195     adjustHeightAnchor : function(value, comp){
 196         return value;
 197     }
 198
 199     <div id="prop-Ext.layout.AnchorLayout-activeItem"></div>/**
 200      * @property activeItem
 201      * @hide
 202      */
 203 });
 204 Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;
 205 </pre>    \r
 206 </body>\r
 207 </html>