[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
| 4 | * licensing@sencha.com |
---|
| 5 | * http://www.sencha.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 | type : 'anchor', |
---|
| 97 | |
---|
| 98 | /** |
---|
| 99 | * @cfg {String} defaultAnchor |
---|
| 100 | * |
---|
| 101 | * default anchor for all child container items applied if no anchor or specific width is set on the child item. Defaults to '100%'. |
---|
| 102 | * |
---|
| 103 | */ |
---|
| 104 | defaultAnchor : '100%', |
---|
| 105 | |
---|
| 106 | parseAnchorRE : /^(r|right|b|bottom)$/i, |
---|
| 107 | |
---|
| 108 | |
---|
| 109 | getLayoutTargetSize : function() { |
---|
| 110 | var target = this.container.getLayoutTarget(), ret = {}; |
---|
| 111 | if (target) { |
---|
| 112 | ret = target.getViewSize(); |
---|
| 113 | |
---|
| 114 | // IE in strict mode will return a width of 0 on the 1st pass of getViewSize. |
---|
| 115 | // Use getStyleSize to verify the 0 width, the adjustment pass will then work properly |
---|
| 116 | // with getViewSize |
---|
| 117 | if (Ext.isIE && Ext.isStrict && ret.width == 0){ |
---|
| 118 | ret = target.getStyleSize(); |
---|
| 119 | } |
---|
| 120 | ret.width -= target.getPadding('lr'); |
---|
| 121 | ret.height -= target.getPadding('tb'); |
---|
| 122 | } |
---|
| 123 | return ret; |
---|
| 124 | }, |
---|
| 125 | |
---|
| 126 | // private |
---|
| 127 | onLayout : function(container, target) { |
---|
| 128 | Ext.layout.AnchorLayout.superclass.onLayout.call(this, container, target); |
---|
| 129 | |
---|
| 130 | var size = this.getLayoutTargetSize(), |
---|
| 131 | containerWidth = size.width, |
---|
| 132 | containerHeight = size.height, |
---|
| 133 | overflow = target.getStyle('overflow'), |
---|
| 134 | components = this.getRenderedItems(container), |
---|
| 135 | len = components.length, |
---|
| 136 | boxes = [], |
---|
| 137 | box, |
---|
| 138 | anchorWidth, |
---|
| 139 | anchorHeight, |
---|
| 140 | component, |
---|
| 141 | anchorSpec, |
---|
| 142 | calcWidth, |
---|
| 143 | calcHeight, |
---|
| 144 | anchorsArray, |
---|
| 145 | totalHeight = 0, |
---|
| 146 | i, |
---|
| 147 | el; |
---|
| 148 | |
---|
| 149 | if(containerWidth < 20 && containerHeight < 20){ |
---|
| 150 | return; |
---|
| 151 | } |
---|
| 152 | |
---|
| 153 | // find the container anchoring size |
---|
| 154 | if(container.anchorSize) { |
---|
| 155 | if(typeof container.anchorSize == 'number') { |
---|
| 156 | anchorWidth = container.anchorSize; |
---|
| 157 | } else { |
---|
| 158 | anchorWidth = container.anchorSize.width; |
---|
| 159 | anchorHeight = container.anchorSize.height; |
---|
| 160 | } |
---|
| 161 | } else { |
---|
| 162 | anchorWidth = container.initialConfig.width; |
---|
| 163 | anchorHeight = container.initialConfig.height; |
---|
| 164 | } |
---|
| 165 | |
---|
| 166 | for(i = 0; i < len; i++) { |
---|
| 167 | component = components[i]; |
---|
| 168 | el = component.getPositionEl(); |
---|
| 169 | |
---|
| 170 | // If a child container item has no anchor and no specific width, set the child to the default anchor size |
---|
| 171 | if (!component.anchor && component.items && !Ext.isNumber(component.width) && !(Ext.isIE6 && Ext.isStrict)){ |
---|
| 172 | component.anchor = this.defaultAnchor; |
---|
| 173 | } |
---|
| 174 | |
---|
| 175 | if(component.anchor) { |
---|
| 176 | anchorSpec = component.anchorSpec; |
---|
| 177 | // cache all anchor values |
---|
| 178 | if(!anchorSpec){ |
---|
| 179 | anchorsArray = component.anchor.split(' '); |
---|
| 180 | component.anchorSpec = anchorSpec = { |
---|
| 181 | right: this.parseAnchor(anchorsArray[0], component.initialConfig.width, anchorWidth), |
---|
| 182 | bottom: this.parseAnchor(anchorsArray[1], component.initialConfig.height, anchorHeight) |
---|
| 183 | }; |
---|
| 184 | } |
---|
| 185 | calcWidth = anchorSpec.right ? this.adjustWidthAnchor(anchorSpec.right(containerWidth) - el.getMargins('lr'), component) : undefined; |
---|
| 186 | calcHeight = anchorSpec.bottom ? this.adjustHeightAnchor(anchorSpec.bottom(containerHeight) - el.getMargins('tb'), component) : undefined; |
---|
| 187 | |
---|
| 188 | if(calcWidth || calcHeight) { |
---|
| 189 | boxes.push({ |
---|
| 190 | component: component, |
---|
| 191 | width: calcWidth || undefined, |
---|
| 192 | height: calcHeight || undefined |
---|
| 193 | }); |
---|
| 194 | } |
---|
| 195 | } |
---|
| 196 | } |
---|
| 197 | for (i = 0, len = boxes.length; i < len; i++) { |
---|
| 198 | box = boxes[i]; |
---|
| 199 | box.component.setSize(box.width, box.height); |
---|
| 200 | } |
---|
| 201 | |
---|
| 202 | if (overflow && overflow != 'hidden' && !this.adjustmentPass) { |
---|
| 203 | var newTargetSize = this.getLayoutTargetSize(); |
---|
| 204 | if (newTargetSize.width != size.width || newTargetSize.height != size.height){ |
---|
| 205 | this.adjustmentPass = true; |
---|
| 206 | this.onLayout(container, target); |
---|
| 207 | } |
---|
| 208 | } |
---|
| 209 | |
---|
| 210 | delete this.adjustmentPass; |
---|
| 211 | }, |
---|
| 212 | |
---|
| 213 | // private |
---|
| 214 | parseAnchor : function(a, start, cstart) { |
---|
| 215 | if (a && a != 'none') { |
---|
| 216 | var last; |
---|
| 217 | // standard anchor |
---|
| 218 | if (this.parseAnchorRE.test(a)) { |
---|
| 219 | var diff = cstart - start; |
---|
| 220 | return function(v){ |
---|
| 221 | if(v !== last){ |
---|
| 222 | last = v; |
---|
| 223 | return v - diff; |
---|
| 224 | } |
---|
| 225 | }; |
---|
| 226 | // percentage |
---|
| 227 | } else if(a.indexOf('%') != -1) { |
---|
| 228 | var ratio = parseFloat(a.replace('%', ''))*.01; |
---|
| 229 | return function(v){ |
---|
| 230 | if(v !== last){ |
---|
| 231 | last = v; |
---|
| 232 | return Math.floor(v*ratio); |
---|
| 233 | } |
---|
| 234 | }; |
---|
| 235 | // simple offset adjustment |
---|
| 236 | } else { |
---|
| 237 | a = parseInt(a, 10); |
---|
| 238 | if (!isNaN(a)) { |
---|
| 239 | return function(v) { |
---|
| 240 | if (v !== last) { |
---|
| 241 | last = v; |
---|
| 242 | return v + a; |
---|
| 243 | } |
---|
| 244 | }; |
---|
| 245 | } |
---|
| 246 | } |
---|
| 247 | } |
---|
| 248 | return false; |
---|
| 249 | }, |
---|
| 250 | |
---|
| 251 | // private |
---|
| 252 | adjustWidthAnchor : function(value, comp){ |
---|
| 253 | return value; |
---|
| 254 | }, |
---|
| 255 | |
---|
| 256 | // private |
---|
| 257 | adjustHeightAnchor : function(value, comp){ |
---|
| 258 | return value; |
---|
| 259 | } |
---|
| 260 | |
---|
| 261 | /** |
---|
| 262 | * @property activeItem |
---|
| 263 | * @hide |
---|
| 264 | */ |
---|
| 265 | }); |
---|
| 266 | Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout; |
---|