1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
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. If |
---|
13 | * the container is resized, all anchored items are automatically rerendered according to their anchor rules. |
---|
14 | * This class is intended to be extended or created via the layout:'anchor' {@link Ext.Container#layout} config, |
---|
15 | * and should generally not need to be created directly via the new keyword.</p> |
---|
16 | * <p>AnchorLayout does not have any direct config options (other than inherited ones). However, the container |
---|
17 | * using the AnchorLayout can supply an anchoring-specific config property of <b>anchorSize</b>. By default, |
---|
18 | * AnchorLayout will calculate anchor measurements based on the size of the container itself. However, if |
---|
19 | * anchorSize is specifed, the layout will use it as a virtual container for the purposes of calculating anchor |
---|
20 | * measurements based on it instead, allowing the container to be sized independently of the anchoring logic if necessary.</p> |
---|
21 | * <p>The items added to an AnchorLayout can also supply an anchoring-specific config property of <b>anchor</b> which |
---|
22 | * is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). |
---|
23 | * This value is what tells the layout how the item should be anchored to the container. The following types of |
---|
24 | * anchor values are supported: |
---|
25 | * <ul> |
---|
26 | * <li><b>Percentage</b>: Any value between 1 and 100, expressed as a percentage. The first anchor is the percentage |
---|
27 | * width that the item should take up within the container, and the second is the percentage height. Example: '100% 50%' |
---|
28 | * would render an item the complete width of the container and 1/2 its height. If only one anchor value is supplied |
---|
29 | * it is assumed to be the width value and the height will default to auto.</li> |
---|
30 | * <li><b>Offsets</b>: Any positive or negative integer value. The first anchor is the offset from the right edge of |
---|
31 | * the container, and the second is the offset from the bottom edge. Example: '-50 -100' would render an item the |
---|
32 | * complete width of the container minus 50 pixels and the complete height minus 100 pixels. If only one anchor value |
---|
33 | * is supplied it is assumed to be the right offset value and the bottom offset will default to 0.</li> |
---|
34 | * <li><b>Sides</b>: Valid values are 'right' (or 'r') and 'bottom' (or 'b'). Either the container must have a fixed |
---|
35 | * size or an anchorSize config value defined at render time in order for these to have any effect.</li> |
---|
36 | * </ul> |
---|
37 | * <p>Anchor values can also be mixed as needed. For example, '-50 75%' would render the width offset from the |
---|
38 | * container right edge by 50 pixels and 75% of the container's height.</p> |
---|
39 | */ |
---|
40 | Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, { |
---|
41 | // private |
---|
42 | monitorResize:true, |
---|
43 | |
---|
44 | // private |
---|
45 | getAnchorViewSize : function(ct, target){ |
---|
46 | return target.dom == document.body ? |
---|
47 | target.getViewSize() : target.getStyleSize(); |
---|
48 | }, |
---|
49 | |
---|
50 | // private |
---|
51 | onLayout : function(ct, target){ |
---|
52 | Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target); |
---|
53 | |
---|
54 | var size = this.getAnchorViewSize(ct, target); |
---|
55 | |
---|
56 | var w = size.width, h = size.height; |
---|
57 | |
---|
58 | if(w < 20 || h < 20){ |
---|
59 | return; |
---|
60 | } |
---|
61 | |
---|
62 | // find the container anchoring size |
---|
63 | var aw, ah; |
---|
64 | if(ct.anchorSize){ |
---|
65 | if(typeof ct.anchorSize == 'number'){ |
---|
66 | aw = ct.anchorSize; |
---|
67 | }else{ |
---|
68 | aw = ct.anchorSize.width; |
---|
69 | ah = ct.anchorSize.height; |
---|
70 | } |
---|
71 | }else{ |
---|
72 | aw = ct.initialConfig.width; |
---|
73 | ah = ct.initialConfig.height; |
---|
74 | } |
---|
75 | |
---|
76 | var cs = ct.items.items, len = cs.length, i, c, a, cw, ch; |
---|
77 | for(i = 0; i < len; i++){ |
---|
78 | c = cs[i]; |
---|
79 | if(c.anchor){ |
---|
80 | a = c.anchorSpec; |
---|
81 | if(!a){ // cache all anchor values |
---|
82 | var vs = c.anchor.split(' '); |
---|
83 | c.anchorSpec = a = { |
---|
84 | right: this.parseAnchor(vs[0], c.initialConfig.width, aw), |
---|
85 | bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah) |
---|
86 | }; |
---|
87 | } |
---|
88 | cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined; |
---|
89 | ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined; |
---|
90 | |
---|
91 | if(cw || ch){ |
---|
92 | c.setSize(cw || undefined, ch || undefined); |
---|
93 | } |
---|
94 | } |
---|
95 | } |
---|
96 | }, |
---|
97 | |
---|
98 | // private |
---|
99 | parseAnchor : function(a, start, cstart){ |
---|
100 | if(a && a != 'none'){ |
---|
101 | var last; |
---|
102 | if(/^(r|right|b|bottom)$/i.test(a)){ // standard anchor |
---|
103 | var diff = cstart - start; |
---|
104 | return function(v){ |
---|
105 | if(v !== last){ |
---|
106 | last = v; |
---|
107 | return v - diff; |
---|
108 | } |
---|
109 | } |
---|
110 | }else if(a.indexOf('%') != -1){ |
---|
111 | var ratio = parseFloat(a.replace('%', ''))*.01; // percentage |
---|
112 | return function(v){ |
---|
113 | if(v !== last){ |
---|
114 | last = v; |
---|
115 | return Math.floor(v*ratio); |
---|
116 | } |
---|
117 | } |
---|
118 | }else{ |
---|
119 | a = parseInt(a, 10); |
---|
120 | if(!isNaN(a)){ // simple offset adjustment |
---|
121 | return function(v){ |
---|
122 | if(v !== last){ |
---|
123 | last = v; |
---|
124 | return v + a; |
---|
125 | } |
---|
126 | } |
---|
127 | } |
---|
128 | } |
---|
129 | } |
---|
130 | return false; |
---|
131 | }, |
---|
132 | |
---|
133 | // private |
---|
134 | adjustWidthAnchor : function(value, comp){ |
---|
135 | return value; |
---|
136 | }, |
---|
137 | |
---|
138 | // private |
---|
139 | adjustHeightAnchor : function(value, comp){ |
---|
140 | return value; |
---|
141 | } |
---|
142 | |
---|
143 | /** |
---|
144 | * @property activeItem |
---|
145 | * @hide |
---|
146 | */ |
---|
147 | }); |
---|
148 | Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout; |
---|