src/widgets/layout/AnchorLayout.js

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