docs/source/AnchorLayout.html

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