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