docs/source/AnchorLayout.html

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