Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / 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>