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     type: 'anchor',
  98
  99     getLayoutTargetSize : function() {
 100         var target = this.container.getLayoutTarget();
 101         if (!target) {
 102             return {};
 103         }
 104         // Style Sized (scrollbars not included)
 105         return target.getStyleSize();
 106     },
 107
 108     // private
 109     onLayout : function(ct, target){
 110         Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
 111         var size = this.getLayoutTargetSize();
 112
 113         var w = size.width, h = size.height;
 114
 115         if(w < 20 && h < 20){
 116             return;
 117         }
 118
 119         // find the container anchoring size
 120         var aw, ah;
 121         if(ct.anchorSize){
 122             if(typeof ct.anchorSize == 'number'){
 123                 aw = ct.anchorSize;
 124             }else{
 125                 aw = ct.anchorSize.width;
 126                 ah = ct.anchorSize.height;
 127             }
 128         }else{
 129             aw = ct.initialConfig.width;
 130             ah = ct.initialConfig.height;
 131         }
 132
 133         var cs = this.getRenderedItems(ct), len = cs.length, i, c, a, cw, ch, el, vs;
 134         for(i = 0; i < len; i++){
 135             c = cs[i];
 136             el = c.getPositionEl();
 137             if(c.anchor){
 138                 a = c.anchorSpec;
 139                 if(!a){ // cache all anchor values
 140                     vs = c.anchor.split(' ');
 141                     c.anchorSpec = a = {
 142                         right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
 143                         bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
 144                     };
 145                 }
 146                 cw = a.right ? this.adjustWidthAnchor(a.right(w) - el.getMargins('lr'), c) : undefined;
 147                 ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h) - el.getMargins('tb'), c) : undefined;
 148
 149                 if(cw || ch){
 150                     c.setSize(cw || undefined, ch || undefined);
 151                 }
 152             }
 153         }
 154     },
 155
 156     // private
 157     parseAnchor : function(a, start, cstart){
 158         if(a && a != 'none'){
 159             var last;
 160             if(/^(r|right|b|bottom)$/i.test(a)){   // standard anchor
 161                 var diff = cstart - start;
 162                 return function(v){
 163                     if(v !== last){
 164                         last = v;
 165                         return v - diff;
 166                     }
 167                 }
 168             }else if(a.indexOf('%') != -1){
 169                 var ratio = parseFloat(a.replace('%', ''))*.01;   // percentage
 170                 return function(v){
 171                     if(v !== last){
 172                         last = v;
 173                         return Math.floor(v*ratio);
 174                     }
 175                 }
 176             }else{
 177                 a = parseInt(a, 10);
 178                 if(!isNaN(a)){                            // simple offset adjustment
 179                     return function(v){
 180                         if(v !== last){
 181                             last = v;
 182                             return v + a;
 183                         }
 184                     }
 185                 }
 186             }
 187         }
 188         return false;
 189     },
 190
 191     // private
 192     adjustWidthAnchor : function(value, comp){
 193         return value;
 194     },
 195
 196     // private
 197     adjustHeightAnchor : function(value, comp){
 198         return value;
 199     }
 200
 201     <div id="prop-Ext.layout.AnchorLayout-activeItem"></div>/**
 202      * @property activeItem
 203      * @hide
 204      */
 205 });
 206 Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;
 207 </pre>    \r
 208 </body>\r
 209 </html>