[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.BorderLayout |
---|
| 9 | * @extends Ext.layout.ContainerLayout |
---|
| 10 | * <p>This is a multi-pane, application-oriented UI layout style that supports multiple |
---|
| 11 | * nested panels, automatic {@link Ext.layout.BorderLayout.Region#split split} bars between |
---|
| 12 | * {@link Ext.layout.BorderLayout.Region#BorderLayout.Region regions} and built-in |
---|
| 13 | * {@link Ext.layout.BorderLayout.Region#collapsible expanding and collapsing} of regions.</p> |
---|
| 14 | * <p>This class is intended to be extended or created via the <tt>layout:'border'</tt> |
---|
| 15 | * {@link Ext.Container#layout} config, and should generally not need to be created directly |
---|
| 16 | * via the new keyword.</p> |
---|
| 17 | * <p>BorderLayout does not have any direct config options (other than inherited ones). |
---|
| 18 | * All configuration options available for customizing the BorderLayout are at the |
---|
| 19 | * {@link Ext.layout.BorderLayout.Region} and {@link Ext.layout.BorderLayout.SplitRegion} |
---|
| 20 | * levels.</p> |
---|
| 21 | * <p>Example usage:</p> |
---|
| 22 | * <pre><code> |
---|
| 23 | var myBorderPanel = new Ext.Panel({ |
---|
| 24 | {@link Ext.Component#renderTo renderTo}: document.body, |
---|
| 25 | {@link Ext.BoxComponent#width width}: 700, |
---|
| 26 | {@link Ext.BoxComponent#height height}: 500, |
---|
| 27 | {@link Ext.Panel#title title}: 'Border Layout', |
---|
| 28 | {@link Ext.Container#layout layout}: 'border', |
---|
| 29 | {@link Ext.Container#items items}: [{ |
---|
| 30 | {@link Ext.Panel#title title}: 'South Region is resizable', |
---|
| 31 | {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region |
---|
| 32 | {@link Ext.BoxComponent#height height}: 100, |
---|
| 33 | {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing |
---|
| 34 | {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} |
---|
| 35 | {@link Ext.SplitBar#maxSize maxSize}: 150, |
---|
| 36 | {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5' |
---|
| 37 | },{ |
---|
| 38 | // xtype: 'panel' implied by default |
---|
| 39 | {@link Ext.Panel#title title}: 'West Region is collapsible', |
---|
| 40 | {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}:'west', |
---|
| 41 | {@link Ext.layout.BorderLayout.Region#margins margins}: '5 0 0 5', |
---|
| 42 | {@link Ext.BoxComponent#width width}: 200, |
---|
| 43 | {@link Ext.layout.BorderLayout.Region#collapsible collapsible}: true, // make collapsible |
---|
| 44 | {@link Ext.layout.BorderLayout.Region#cmargins cmargins}: '5 5 0 5', // adjust top margin when collapsed |
---|
| 45 | {@link Ext.Component#id id}: 'west-region-container', |
---|
| 46 | {@link Ext.Container#layout layout}: 'fit', |
---|
| 47 | {@link Ext.Panel#unstyled unstyled}: true |
---|
| 48 | },{ |
---|
| 49 | {@link Ext.Panel#title title}: 'Center Region', |
---|
| 50 | {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'center', // center region is required, no width/height specified |
---|
| 51 | {@link Ext.Component#xtype xtype}: 'container', |
---|
| 52 | {@link Ext.Container#layout layout}: 'fit', |
---|
| 53 | {@link Ext.layout.BorderLayout.Region#margins margins}: '5 5 0 0' |
---|
| 54 | }] |
---|
| 55 | }); |
---|
| 56 | </code></pre> |
---|
| 57 | * <p><b><u>Notes</u></b>:</p><div class="mdetail-params"><ul> |
---|
| 58 | * <li>Any container using the BorderLayout <b>must</b> have a child item with <tt>region:'center'</tt>. |
---|
| 59 | * The child item in the center region will always be resized to fill the remaining space not used by |
---|
| 60 | * the other regions in the layout.</li> |
---|
| 61 | * <li>Any child items with a region of <tt>west</tt> or <tt>east</tt> must have <tt>width</tt> defined |
---|
| 62 | * (an integer representing the number of pixels that the region should take up).</li> |
---|
| 63 | * <li>Any child items with a region of <tt>north</tt> or <tt>south</tt> must have <tt>height</tt> defined.</li> |
---|
| 64 | * <li>The regions of a BorderLayout are <b>fixed at render time</b> and thereafter, its child Components may not be removed or added</b>. To add/remove |
---|
| 65 | * Components within a BorderLayout, have them wrapped by an additional Container which is directly |
---|
| 66 | * managed by the BorderLayout. If the region is to be collapsible, the Container used directly |
---|
| 67 | * by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) |
---|
| 68 | * is added to the west region: |
---|
| 69 | * <div style="margin-left:16px"><pre><code> |
---|
| 70 | wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container'); |
---|
| 71 | wrc.{@link Ext.Panel#removeAll removeAll}(); |
---|
| 72 | wrc.{@link Ext.Container#add add}({ |
---|
| 73 | title: 'Added Panel', |
---|
| 74 | html: 'Some content' |
---|
| 75 | }); |
---|
| 76 | wrc.{@link Ext.Container#doLayout doLayout}(); |
---|
| 77 | * </code></pre></div> |
---|
| 78 | * </li> |
---|
| 79 | * <li> To reference a {@link Ext.layout.BorderLayout.Region Region}: |
---|
| 80 | * <div style="margin-left:16px"><pre><code> |
---|
| 81 | wr = myBorderPanel.layout.west; |
---|
| 82 | * </code></pre></div> |
---|
| 83 | * </li> |
---|
| 84 | * </ul></div> |
---|
| 85 | */ |
---|
| 86 | Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { |
---|
| 87 | // private |
---|
| 88 | monitorResize:true, |
---|
| 89 | // private |
---|
| 90 | rendered : false, |
---|
| 91 | |
---|
| 92 | type: 'border', |
---|
| 93 | |
---|
| 94 | targetCls: 'x-border-layout-ct', |
---|
| 95 | |
---|
| 96 | getLayoutTargetSize : function() { |
---|
| 97 | var target = this.container.getLayoutTarget(); |
---|
| 98 | return target ? target.getViewSize() : {}; |
---|
| 99 | }, |
---|
| 100 | |
---|
| 101 | // private |
---|
| 102 | onLayout : function(ct, target){ |
---|
| 103 | var collapsed, i, c, pos, items = ct.items.items, len = items.length; |
---|
| 104 | if(!this.rendered){ |
---|
| 105 | collapsed = []; |
---|
| 106 | for(i = 0; i < len; i++) { |
---|
| 107 | c = items[i]; |
---|
| 108 | pos = c.region; |
---|
| 109 | if(c.collapsed){ |
---|
| 110 | collapsed.push(c); |
---|
| 111 | } |
---|
| 112 | c.collapsed = false; |
---|
| 113 | if(!c.rendered){ |
---|
| 114 | c.render(target, i); |
---|
| 115 | c.getPositionEl().addClass('x-border-panel'); |
---|
| 116 | } |
---|
| 117 | this[pos] = pos != 'center' && c.split ? |
---|
| 118 | new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) : |
---|
| 119 | new Ext.layout.BorderLayout.Region(this, c.initialConfig, pos); |
---|
| 120 | this[pos].render(target, c); |
---|
| 121 | } |
---|
| 122 | this.rendered = true; |
---|
| 123 | } |
---|
| 124 | |
---|
| 125 | var size = this.getLayoutTargetSize(); |
---|
| 126 | if(size.width < 20 || size.height < 20){ // display none? |
---|
| 127 | if(collapsed){ |
---|
| 128 | this.restoreCollapsed = collapsed; |
---|
| 129 | } |
---|
| 130 | return; |
---|
| 131 | }else if(this.restoreCollapsed){ |
---|
| 132 | collapsed = this.restoreCollapsed; |
---|
| 133 | delete this.restoreCollapsed; |
---|
| 134 | } |
---|
| 135 | |
---|
| 136 | var w = size.width, h = size.height, |
---|
| 137 | centerW = w, centerH = h, centerY = 0, centerX = 0, |
---|
| 138 | n = this.north, s = this.south, west = this.west, e = this.east, c = this.center, |
---|
| 139 | b, m, totalWidth, totalHeight; |
---|
| 140 | if(!c && Ext.layout.BorderLayout.WARN !== false){ |
---|
| 141 | throw 'No center region defined in BorderLayout ' + ct.id; |
---|
| 142 | } |
---|
| 143 | |
---|
| 144 | if(n && n.isVisible()){ |
---|
| 145 | b = n.getSize(); |
---|
| 146 | m = n.getMargins(); |
---|
| 147 | b.width = w - (m.left+m.right); |
---|
| 148 | b.x = m.left; |
---|
| 149 | b.y = m.top; |
---|
| 150 | centerY = b.height + b.y + m.bottom; |
---|
| 151 | centerH -= centerY; |
---|
| 152 | n.applyLayout(b); |
---|
| 153 | } |
---|
| 154 | if(s && s.isVisible()){ |
---|
| 155 | b = s.getSize(); |
---|
| 156 | m = s.getMargins(); |
---|
| 157 | b.width = w - (m.left+m.right); |
---|
| 158 | b.x = m.left; |
---|
| 159 | totalHeight = (b.height + m.top + m.bottom); |
---|
| 160 | b.y = h - totalHeight + m.top; |
---|
| 161 | centerH -= totalHeight; |
---|
| 162 | s.applyLayout(b); |
---|
| 163 | } |
---|
| 164 | if(west && west.isVisible()){ |
---|
| 165 | b = west.getSize(); |
---|
| 166 | m = west.getMargins(); |
---|
| 167 | b.height = centerH - (m.top+m.bottom); |
---|
| 168 | b.x = m.left; |
---|
| 169 | b.y = centerY + m.top; |
---|
| 170 | totalWidth = (b.width + m.left + m.right); |
---|
| 171 | centerX += totalWidth; |
---|
| 172 | centerW -= totalWidth; |
---|
| 173 | west.applyLayout(b); |
---|
| 174 | } |
---|
| 175 | if(e && e.isVisible()){ |
---|
| 176 | b = e.getSize(); |
---|
| 177 | m = e.getMargins(); |
---|
| 178 | b.height = centerH - (m.top+m.bottom); |
---|
| 179 | totalWidth = (b.width + m.left + m.right); |
---|
| 180 | b.x = w - totalWidth + m.left; |
---|
| 181 | b.y = centerY + m.top; |
---|
| 182 | centerW -= totalWidth; |
---|
| 183 | e.applyLayout(b); |
---|
| 184 | } |
---|
| 185 | if(c){ |
---|
| 186 | m = c.getMargins(); |
---|
| 187 | var centerBox = { |
---|
| 188 | x: centerX + m.left, |
---|
| 189 | y: centerY + m.top, |
---|
| 190 | width: centerW - (m.left+m.right), |
---|
| 191 | height: centerH - (m.top+m.bottom) |
---|
| 192 | }; |
---|
| 193 | c.applyLayout(centerBox); |
---|
| 194 | } |
---|
| 195 | if(collapsed){ |
---|
| 196 | for(i = 0, len = collapsed.length; i < len; i++){ |
---|
| 197 | collapsed[i].collapse(false); |
---|
| 198 | } |
---|
| 199 | } |
---|
| 200 | if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue |
---|
| 201 | target.repaint(); |
---|
| 202 | } |
---|
| 203 | // Putting a border layout into an overflowed container is NOT correct and will make a second layout pass necessary. |
---|
| 204 | if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { |
---|
| 205 | var ts = this.getLayoutTargetSize(); |
---|
| 206 | if (ts.width != size.width || ts.height != size.height){ |
---|
| 207 | this.adjustmentPass = true; |
---|
| 208 | this.onLayout(ct, target); |
---|
| 209 | } |
---|
| 210 | } |
---|
| 211 | delete this.adjustmentPass; |
---|
| 212 | }, |
---|
| 213 | |
---|
| 214 | destroy: function() { |
---|
| 215 | var r = ['north', 'south', 'east', 'west'], i, region; |
---|
| 216 | for (i = 0; i < r.length; i++) { |
---|
| 217 | region = this[r[i]]; |
---|
| 218 | if(region){ |
---|
| 219 | if(region.destroy){ |
---|
| 220 | region.destroy(); |
---|
| 221 | }else if (region.split){ |
---|
| 222 | region.split.destroy(true); |
---|
| 223 | } |
---|
| 224 | } |
---|
| 225 | } |
---|
| 226 | Ext.layout.BorderLayout.superclass.destroy.call(this); |
---|
| 227 | } |
---|
| 228 | |
---|
| 229 | /** |
---|
| 230 | * @property activeItem |
---|
| 231 | * @hide |
---|
| 232 | */ |
---|
| 233 | }); |
---|
| 234 | |
---|
| 235 | /** |
---|
| 236 | * @class Ext.layout.BorderLayout.Region |
---|
| 237 | * <p>This is a region of a {@link Ext.layout.BorderLayout BorderLayout} that acts as a subcontainer |
---|
| 238 | * within the layout. Each region has its own {@link Ext.layout.ContainerLayout layout} that is |
---|
| 239 | * independent of other regions and the containing BorderLayout, and can be any of the |
---|
| 240 | * {@link Ext.layout.ContainerLayout valid Ext layout types}.</p> |
---|
| 241 | * <p>Region size is managed automatically and cannot be changed by the user -- for |
---|
| 242 | * {@link #split resizable regions}, see {@link Ext.layout.BorderLayout.SplitRegion}.</p> |
---|
| 243 | * @constructor |
---|
| 244 | * Create a new Region. |
---|
| 245 | * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. |
---|
| 246 | * @param {Object} config The configuration options |
---|
| 247 | * @param {String} position The region position. Valid values are: <tt>north</tt>, <tt>south</tt>, |
---|
| 248 | * <tt>east</tt>, <tt>west</tt> and <tt>center</tt>. Every {@link Ext.layout.BorderLayout BorderLayout} |
---|
| 249 | * <b>must have a center region</b> for the primary content -- all other regions are optional. |
---|
| 250 | */ |
---|
| 251 | Ext.layout.BorderLayout.Region = function(layout, config, pos){ |
---|
| 252 | Ext.apply(this, config); |
---|
| 253 | this.layout = layout; |
---|
| 254 | this.position = pos; |
---|
| 255 | this.state = {}; |
---|
| 256 | if(typeof this.margins == 'string'){ |
---|
| 257 | this.margins = this.layout.parseMargins(this.margins); |
---|
| 258 | } |
---|
| 259 | this.margins = Ext.applyIf(this.margins || {}, this.defaultMargins); |
---|
| 260 | if(this.collapsible){ |
---|
| 261 | if(typeof this.cmargins == 'string'){ |
---|
| 262 | this.cmargins = this.layout.parseMargins(this.cmargins); |
---|
| 263 | } |
---|
| 264 | if(this.collapseMode == 'mini' && !this.cmargins){ |
---|
| 265 | this.cmargins = {left:0,top:0,right:0,bottom:0}; |
---|
| 266 | }else{ |
---|
| 267 | this.cmargins = Ext.applyIf(this.cmargins || {}, |
---|
| 268 | pos == 'north' || pos == 'south' ? this.defaultNSCMargins : this.defaultEWCMargins); |
---|
| 269 | } |
---|
| 270 | } |
---|
| 271 | }; |
---|
| 272 | |
---|
| 273 | Ext.layout.BorderLayout.Region.prototype = { |
---|
| 274 | /** |
---|
| 275 | * @cfg {Boolean} animFloat |
---|
| 276 | * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated |
---|
| 277 | * panel that will close again once the user mouses out of that panel (or clicks out if |
---|
| 278 | * <tt>{@link #autoHide} = false</tt>). Setting <tt>{@link #animFloat} = false</tt> will |
---|
| 279 | * prevent the open and close of these floated panels from being animated (defaults to <tt>true</tt>). |
---|
| 280 | */ |
---|
| 281 | /** |
---|
| 282 | * @cfg {Boolean} autoHide |
---|
| 283 | * When a collapsed region's bar is clicked, the region's panel will be displayed as a floated |
---|
| 284 | * panel. If <tt>autoHide = true</tt>, the panel will automatically hide after the user mouses |
---|
| 285 | * out of the panel. If <tt>autoHide = false</tt>, the panel will continue to display until the |
---|
| 286 | * user clicks outside of the panel (defaults to <tt>true</tt>). |
---|
| 287 | */ |
---|
| 288 | /** |
---|
| 289 | * @cfg {String} collapseMode |
---|
| 290 | * <tt>collapseMode</tt> supports two configuration values:<div class="mdetail-params"><ul> |
---|
| 291 | * <li><b><tt>undefined</tt></b> (default)<div class="sub-desc">By default, {@link #collapsible} |
---|
| 292 | * regions are collapsed by clicking the expand/collapse tool button that renders into the region's |
---|
| 293 | * title bar.</div></li> |
---|
| 294 | * <li><b><tt>'mini'</tt></b><div class="sub-desc">Optionally, when <tt>collapseMode</tt> is set to |
---|
| 295 | * <tt>'mini'</tt> the region's split bar will also display a small collapse button in the center of |
---|
| 296 | * the bar. In <tt>'mini'</tt> mode the region will collapse to a thinner bar than in normal mode. |
---|
| 297 | * </div></li> |
---|
| 298 | * </ul></div></p> |
---|
| 299 | * <p><b>Note</b>: if a collapsible region does not have a title bar, then set <tt>collapseMode = |
---|
| 300 | * 'mini'</tt> and <tt>{@link #split} = true</tt> in order for the region to be {@link #collapsible} |
---|
| 301 | * by the user as the expand/collapse tool button (that would go in the title bar) will not be rendered.</p> |
---|
| 302 | * <p>See also <tt>{@link #cmargins}</tt>.</p> |
---|
| 303 | */ |
---|
| 304 | /** |
---|
| 305 | * @cfg {Object} margins |
---|
| 306 | * An object containing margins to apply to the region when in the expanded state in the |
---|
| 307 | * format:<pre><code> |
---|
| 308 | { |
---|
| 309 | top: (top margin), |
---|
| 310 | right: (right margin), |
---|
| 311 | bottom: (bottom margin), |
---|
| 312 | left: (left margin) |
---|
| 313 | }</code></pre> |
---|
| 314 | * <p>May also be a string containing space-separated, numeric margin values. The order of the |
---|
| 315 | * sides associated with each value matches the way CSS processes margin values:</p> |
---|
| 316 | * <p><div class="mdetail-params"><ul> |
---|
| 317 | * <li>If there is only one value, it applies to all sides.</li> |
---|
| 318 | * <li>If there are two values, the top and bottom borders are set to the first value and the |
---|
| 319 | * right and left are set to the second.</li> |
---|
| 320 | * <li>If there are three values, the top is set to the first value, the left and right are set |
---|
| 321 | * to the second, and the bottom is set to the third.</li> |
---|
| 322 | * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li> |
---|
| 323 | * </ul></div></p> |
---|
| 324 | * <p>Defaults to:</p><pre><code> |
---|
| 325 | * {top:0, right:0, bottom:0, left:0} |
---|
| 326 | * </code></pre> |
---|
| 327 | */ |
---|
| 328 | /** |
---|
| 329 | * @cfg {Object} cmargins |
---|
| 330 | * An object containing margins to apply to the region when in the collapsed state in the |
---|
| 331 | * format:<pre><code> |
---|
| 332 | { |
---|
| 333 | top: (top margin), |
---|
| 334 | right: (right margin), |
---|
| 335 | bottom: (bottom margin), |
---|
| 336 | left: (left margin) |
---|
| 337 | }</code></pre> |
---|
| 338 | * <p>May also be a string containing space-separated, numeric margin values. The order of the |
---|
| 339 | * sides associated with each value matches the way CSS processes margin values.</p> |
---|
| 340 | * <p><ul> |
---|
| 341 | * <li>If there is only one value, it applies to all sides.</li> |
---|
| 342 | * <li>If there are two values, the top and bottom borders are set to the first value and the |
---|
| 343 | * right and left are set to the second.</li> |
---|
| 344 | * <li>If there are three values, the top is set to the first value, the left and right are set |
---|
| 345 | * to the second, and the bottom is set to the third.</li> |
---|
| 346 | * <li>If there are four values, they apply to the top, right, bottom, and left, respectively.</li> |
---|
| 347 | * </ul></p> |
---|
| 348 | */ |
---|
| 349 | /** |
---|
| 350 | * @cfg {Boolean} collapsible |
---|
| 351 | * <p><tt>true</tt> to allow the user to collapse this region (defaults to <tt>false</tt>). If |
---|
| 352 | * <tt>true</tt>, an expand/collapse tool button will automatically be rendered into the title |
---|
| 353 | * bar of the region, otherwise the button will not be shown.</p> |
---|
| 354 | * <p><b>Note</b>: that a title bar is required to display the collapse/expand toggle button -- if |
---|
| 355 | * no <tt>title</tt> is specified for the region's panel, the region will only be collapsible if |
---|
| 356 | * <tt>{@link #collapseMode} = 'mini'</tt> and <tt>{@link #split} = true</tt>. |
---|
| 357 | */ |
---|
| 358 | collapsible : false, |
---|
| 359 | /** |
---|
| 360 | * @cfg {Boolean} split |
---|
| 361 | * <p><tt>true</tt> to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and |
---|
| 362 | * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to |
---|
| 363 | * resize the regions dynamically. Defaults to <tt>false</tt> creating a |
---|
| 364 | * {@link Ext.layout.BorderLayout.Region Region}.</p><br> |
---|
| 365 | * <p><b>Notes</b>:</p><div class="mdetail-params"><ul> |
---|
| 366 | * <li>this configuration option is ignored if <tt>region='center'</tt></li> |
---|
| 367 | * <li>when <tt>split == true</tt>, it is common to specify a |
---|
| 368 | * <tt>{@link Ext.SplitBar#minSize minSize}</tt> and <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> |
---|
| 369 | * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native |
---|
| 370 | * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.</li> |
---|
| 371 | * <li>if <tt>{@link #collapseMode} = 'mini'</tt> requires <tt>split = true</tt> to reserve space |
---|
| 372 | * for the collapse tool</tt></li> |
---|
| 373 | * </ul></div> |
---|
| 374 | */ |
---|
| 375 | split:false, |
---|
| 376 | /** |
---|
| 377 | * @cfg {Boolean} floatable |
---|
| 378 | * <tt>true</tt> to allow clicking a collapsed region's bar to display the region's panel floated |
---|
| 379 | * above the layout, <tt>false</tt> to force the user to fully expand a collapsed region by |
---|
| 380 | * clicking the expand button to see it again (defaults to <tt>true</tt>). |
---|
| 381 | */ |
---|
| 382 | floatable: true, |
---|
| 383 | /** |
---|
| 384 | * @cfg {Number} minWidth |
---|
| 385 | * <p>The minimum allowable width in pixels for this region (defaults to <tt>50</tt>). |
---|
| 386 | * <tt>maxWidth</tt> may also be specified.</p><br> |
---|
| 387 | * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / |
---|
| 388 | * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified |
---|
| 389 | * <tt>minWidth</tt> / <tt>maxWidth</tt>.</p> |
---|
| 390 | */ |
---|
| 391 | minWidth:50, |
---|
| 392 | /** |
---|
| 393 | * @cfg {Number} minHeight |
---|
| 394 | * The minimum allowable height in pixels for this region (defaults to <tt>50</tt>) |
---|
| 395 | * <tt>maxHeight</tt> may also be specified.</p><br> |
---|
| 396 | * <p><b>Note</b>: setting the <tt>{@link Ext.SplitBar#minSize minSize}</tt> / |
---|
| 397 | * <tt>{@link Ext.SplitBar#maxSize maxSize}</tt> supersedes any specified |
---|
| 398 | * <tt>minHeight</tt> / <tt>maxHeight</tt>.</p> |
---|
| 399 | */ |
---|
| 400 | minHeight:50, |
---|
| 401 | |
---|
| 402 | // private |
---|
| 403 | defaultMargins : {left:0,top:0,right:0,bottom:0}, |
---|
| 404 | // private |
---|
| 405 | defaultNSCMargins : {left:5,top:5,right:5,bottom:5}, |
---|
| 406 | // private |
---|
| 407 | defaultEWCMargins : {left:5,top:0,right:5,bottom:0}, |
---|
| 408 | floatingZIndex: 100, |
---|
| 409 | |
---|
| 410 | /** |
---|
| 411 | * True if this region is collapsed. Read-only. |
---|
| 412 | * @type Boolean |
---|
| 413 | * @property |
---|
| 414 | */ |
---|
| 415 | isCollapsed : false, |
---|
| 416 | |
---|
| 417 | /** |
---|
| 418 | * This region's panel. Read-only. |
---|
| 419 | * @type Ext.Panel |
---|
| 420 | * @property panel |
---|
| 421 | */ |
---|
| 422 | /** |
---|
| 423 | * This region's layout. Read-only. |
---|
| 424 | * @type Layout |
---|
| 425 | * @property layout |
---|
| 426 | */ |
---|
| 427 | /** |
---|
| 428 | * This region's layout position (north, south, east, west or center). Read-only. |
---|
| 429 | * @type String |
---|
| 430 | * @property position |
---|
| 431 | */ |
---|
| 432 | |
---|
| 433 | // private |
---|
| 434 | render : function(ct, p){ |
---|
| 435 | this.panel = p; |
---|
| 436 | p.el.enableDisplayMode(); |
---|
| 437 | this.targetEl = ct; |
---|
| 438 | this.el = p.el; |
---|
| 439 | |
---|
| 440 | var gs = p.getState, ps = this.position; |
---|
| 441 | p.getState = function(){ |
---|
| 442 | return Ext.apply(gs.call(p) || {}, this.state); |
---|
| 443 | }.createDelegate(this); |
---|
| 444 | |
---|
| 445 | if(ps != 'center'){ |
---|
| 446 | p.allowQueuedExpand = false; |
---|
| 447 | p.on({ |
---|
| 448 | beforecollapse: this.beforeCollapse, |
---|
| 449 | collapse: this.onCollapse, |
---|
| 450 | beforeexpand: this.beforeExpand, |
---|
| 451 | expand: this.onExpand, |
---|
| 452 | hide: this.onHide, |
---|
| 453 | show: this.onShow, |
---|
| 454 | scope: this |
---|
| 455 | }); |
---|
| 456 | if(this.collapsible || this.floatable){ |
---|
| 457 | p.collapseEl = 'el'; |
---|
| 458 | p.slideAnchor = this.getSlideAnchor(); |
---|
| 459 | } |
---|
| 460 | if(p.tools && p.tools.toggle){ |
---|
| 461 | p.tools.toggle.addClass('x-tool-collapse-'+ps); |
---|
| 462 | p.tools.toggle.addClassOnOver('x-tool-collapse-'+ps+'-over'); |
---|
| 463 | } |
---|
| 464 | } |
---|
| 465 | }, |
---|
| 466 | |
---|
| 467 | // private |
---|
| 468 | getCollapsedEl : function(){ |
---|
| 469 | if(!this.collapsedEl){ |
---|
| 470 | if(!this.toolTemplate){ |
---|
| 471 | var tt = new Ext.Template( |
---|
| 472 | '<div class="x-tool x-tool-{id}"> </div>' |
---|
| 473 | ); |
---|
| 474 | tt.disableFormats = true; |
---|
| 475 | tt.compile(); |
---|
| 476 | Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt; |
---|
| 477 | } |
---|
| 478 | this.collapsedEl = this.targetEl.createChild({ |
---|
| 479 | cls: "x-layout-collapsed x-layout-collapsed-"+this.position, |
---|
| 480 | id: this.panel.id + '-xcollapsed' |
---|
| 481 | }); |
---|
| 482 | this.collapsedEl.enableDisplayMode('block'); |
---|
| 483 | |
---|
| 484 | if(this.collapseMode == 'mini'){ |
---|
| 485 | this.collapsedEl.addClass('x-layout-cmini-'+this.position); |
---|
| 486 | this.miniCollapsedEl = this.collapsedEl.createChild({ |
---|
| 487 | cls: "x-layout-mini x-layout-mini-"+this.position, html: " " |
---|
| 488 | }); |
---|
| 489 | this.miniCollapsedEl.addClassOnOver('x-layout-mini-over'); |
---|
| 490 | this.collapsedEl.addClassOnOver("x-layout-collapsed-over"); |
---|
| 491 | this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true}); |
---|
| 492 | }else { |
---|
| 493 | if(this.collapsible !== false && !this.hideCollapseTool) { |
---|
| 494 | var t = this.expandToolEl = this.toolTemplate.append( |
---|
| 495 | this.collapsedEl.dom, |
---|
| 496 | {id:'expand-'+this.position}, true); |
---|
| 497 | t.addClassOnOver('x-tool-expand-'+this.position+'-over'); |
---|
| 498 | t.on('click', this.onExpandClick, this, {stopEvent:true}); |
---|
| 499 | } |
---|
| 500 | if(this.floatable !== false || this.titleCollapse){ |
---|
| 501 | this.collapsedEl.addClassOnOver("x-layout-collapsed-over"); |
---|
| 502 | this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this); |
---|
| 503 | } |
---|
| 504 | } |
---|
| 505 | } |
---|
| 506 | return this.collapsedEl; |
---|
| 507 | }, |
---|
| 508 | |
---|
| 509 | // private |
---|
| 510 | onExpandClick : function(e){ |
---|
| 511 | if(this.isSlid){ |
---|
| 512 | this.panel.expand(false); |
---|
| 513 | }else{ |
---|
| 514 | this.panel.expand(); |
---|
| 515 | } |
---|
| 516 | }, |
---|
| 517 | |
---|
| 518 | // private |
---|
| 519 | onCollapseClick : function(e){ |
---|
| 520 | this.panel.collapse(); |
---|
| 521 | }, |
---|
| 522 | |
---|
| 523 | // private |
---|
| 524 | beforeCollapse : function(p, animate){ |
---|
| 525 | this.lastAnim = animate; |
---|
| 526 | if(this.splitEl){ |
---|
| 527 | this.splitEl.hide(); |
---|
| 528 | } |
---|
| 529 | this.getCollapsedEl().show(); |
---|
| 530 | var el = this.panel.getEl(); |
---|
| 531 | this.originalZIndex = el.getStyle('z-index'); |
---|
| 532 | el.setStyle('z-index', 100); |
---|
| 533 | this.isCollapsed = true; |
---|
| 534 | this.layout.layout(); |
---|
| 535 | }, |
---|
| 536 | |
---|
| 537 | // private |
---|
| 538 | onCollapse : function(animate){ |
---|
| 539 | this.panel.el.setStyle('z-index', 1); |
---|
| 540 | if(this.lastAnim === false || this.panel.animCollapse === false){ |
---|
| 541 | this.getCollapsedEl().dom.style.visibility = 'visible'; |
---|
| 542 | }else{ |
---|
| 543 | this.getCollapsedEl().slideIn(this.panel.slideAnchor, {duration:.2}); |
---|
| 544 | } |
---|
| 545 | this.state.collapsed = true; |
---|
| 546 | this.panel.saveState(); |
---|
| 547 | }, |
---|
| 548 | |
---|
| 549 | // private |
---|
| 550 | beforeExpand : function(animate){ |
---|
| 551 | if(this.isSlid){ |
---|
| 552 | this.afterSlideIn(); |
---|
| 553 | } |
---|
| 554 | var c = this.getCollapsedEl(); |
---|
| 555 | this.el.show(); |
---|
| 556 | if(this.position == 'east' || this.position == 'west'){ |
---|
| 557 | this.panel.setSize(undefined, c.getHeight()); |
---|
| 558 | }else{ |
---|
| 559 | this.panel.setSize(c.getWidth(), undefined); |
---|
| 560 | } |
---|
| 561 | c.hide(); |
---|
| 562 | c.dom.style.visibility = 'hidden'; |
---|
| 563 | this.panel.el.setStyle('z-index', this.floatingZIndex); |
---|
| 564 | }, |
---|
| 565 | |
---|
| 566 | // private |
---|
| 567 | onExpand : function(){ |
---|
| 568 | this.isCollapsed = false; |
---|
| 569 | if(this.splitEl){ |
---|
| 570 | this.splitEl.show(); |
---|
| 571 | } |
---|
| 572 | this.layout.layout(); |
---|
| 573 | this.panel.el.setStyle('z-index', this.originalZIndex); |
---|
| 574 | this.state.collapsed = false; |
---|
| 575 | this.panel.saveState(); |
---|
| 576 | }, |
---|
| 577 | |
---|
| 578 | // private |
---|
| 579 | collapseClick : function(e){ |
---|
| 580 | if(this.isSlid){ |
---|
| 581 | e.stopPropagation(); |
---|
| 582 | this.slideIn(); |
---|
| 583 | }else{ |
---|
| 584 | e.stopPropagation(); |
---|
| 585 | this.slideOut(); |
---|
| 586 | } |
---|
| 587 | }, |
---|
| 588 | |
---|
| 589 | // private |
---|
| 590 | onHide : function(){ |
---|
| 591 | if(this.isCollapsed){ |
---|
| 592 | this.getCollapsedEl().hide(); |
---|
| 593 | }else if(this.splitEl){ |
---|
| 594 | this.splitEl.hide(); |
---|
| 595 | } |
---|
| 596 | }, |
---|
| 597 | |
---|
| 598 | // private |
---|
| 599 | onShow : function(){ |
---|
| 600 | if(this.isCollapsed){ |
---|
| 601 | this.getCollapsedEl().show(); |
---|
| 602 | }else if(this.splitEl){ |
---|
| 603 | this.splitEl.show(); |
---|
| 604 | } |
---|
| 605 | }, |
---|
| 606 | |
---|
| 607 | /** |
---|
| 608 | * True if this region is currently visible, else false. |
---|
| 609 | * @return {Boolean} |
---|
| 610 | */ |
---|
| 611 | isVisible : function(){ |
---|
| 612 | return !this.panel.hidden; |
---|
| 613 | }, |
---|
| 614 | |
---|
| 615 | /** |
---|
| 616 | * Returns the current margins for this region. If the region is collapsed, the |
---|
| 617 | * {@link #cmargins} (collapsed margins) value will be returned, otherwise the |
---|
| 618 | * {@link #margins} value will be returned. |
---|
| 619 | * @return {Object} An object containing the element's margins: <tt>{left: (left |
---|
| 620 | * margin), top: (top margin), right: (right margin), bottom: (bottom margin)}</tt> |
---|
| 621 | */ |
---|
| 622 | getMargins : function(){ |
---|
| 623 | return this.isCollapsed && this.cmargins ? this.cmargins : this.margins; |
---|
| 624 | }, |
---|
| 625 | |
---|
| 626 | /** |
---|
| 627 | * Returns the current size of this region. If the region is collapsed, the size of the |
---|
| 628 | * collapsedEl will be returned, otherwise the size of the region's panel will be returned. |
---|
| 629 | * @return {Object} An object containing the element's size: <tt>{width: (element width), |
---|
| 630 | * height: (element height)}</tt> |
---|
| 631 | */ |
---|
| 632 | getSize : function(){ |
---|
| 633 | return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize(); |
---|
| 634 | }, |
---|
| 635 | |
---|
| 636 | /** |
---|
| 637 | * Sets the specified panel as the container element for this region. |
---|
| 638 | * @param {Ext.Panel} panel The new panel |
---|
| 639 | */ |
---|
| 640 | setPanel : function(panel){ |
---|
| 641 | this.panel = panel; |
---|
| 642 | }, |
---|
| 643 | |
---|
| 644 | /** |
---|
| 645 | * Returns the minimum allowable width for this region. |
---|
| 646 | * @return {Number} The minimum width |
---|
| 647 | */ |
---|
| 648 | getMinWidth: function(){ |
---|
| 649 | return this.minWidth; |
---|
| 650 | }, |
---|
| 651 | |
---|
| 652 | /** |
---|
| 653 | * Returns the minimum allowable height for this region. |
---|
| 654 | * @return {Number} The minimum height |
---|
| 655 | */ |
---|
| 656 | getMinHeight: function(){ |
---|
| 657 | return this.minHeight; |
---|
| 658 | }, |
---|
| 659 | |
---|
| 660 | // private |
---|
| 661 | applyLayoutCollapsed : function(box){ |
---|
| 662 | var ce = this.getCollapsedEl(); |
---|
| 663 | ce.setLeftTop(box.x, box.y); |
---|
| 664 | ce.setSize(box.width, box.height); |
---|
| 665 | }, |
---|
| 666 | |
---|
| 667 | // private |
---|
| 668 | applyLayout : function(box){ |
---|
| 669 | if(this.isCollapsed){ |
---|
| 670 | this.applyLayoutCollapsed(box); |
---|
| 671 | }else{ |
---|
| 672 | this.panel.setPosition(box.x, box.y); |
---|
| 673 | this.panel.setSize(box.width, box.height); |
---|
| 674 | } |
---|
| 675 | }, |
---|
| 676 | |
---|
| 677 | // private |
---|
| 678 | beforeSlide: function(){ |
---|
| 679 | this.panel.beforeEffect(); |
---|
| 680 | }, |
---|
| 681 | |
---|
| 682 | // private |
---|
| 683 | afterSlide : function(){ |
---|
| 684 | this.panel.afterEffect(); |
---|
| 685 | }, |
---|
| 686 | |
---|
| 687 | // private |
---|
| 688 | initAutoHide : function(){ |
---|
| 689 | if(this.autoHide !== false){ |
---|
| 690 | if(!this.autoHideHd){ |
---|
| 691 | this.autoHideSlideTask = new Ext.util.DelayedTask(this.slideIn, this); |
---|
| 692 | this.autoHideHd = { |
---|
| 693 | "mouseout": function(e){ |
---|
| 694 | if(!e.within(this.el, true)){ |
---|
| 695 | this.autoHideSlideTask.delay(500); |
---|
| 696 | } |
---|
| 697 | }, |
---|
| 698 | "mouseover" : function(e){ |
---|
| 699 | this.autoHideSlideTask.cancel(); |
---|
| 700 | }, |
---|
| 701 | scope : this |
---|
| 702 | }; |
---|
| 703 | } |
---|
| 704 | this.el.on(this.autoHideHd); |
---|
| 705 | this.collapsedEl.on(this.autoHideHd); |
---|
| 706 | } |
---|
| 707 | }, |
---|
| 708 | |
---|
| 709 | // private |
---|
| 710 | clearAutoHide : function(){ |
---|
| 711 | if(this.autoHide !== false){ |
---|
| 712 | this.el.un("mouseout", this.autoHideHd.mouseout); |
---|
| 713 | this.el.un("mouseover", this.autoHideHd.mouseover); |
---|
| 714 | this.collapsedEl.un("mouseout", this.autoHideHd.mouseout); |
---|
| 715 | this.collapsedEl.un("mouseover", this.autoHideHd.mouseover); |
---|
| 716 | } |
---|
| 717 | }, |
---|
| 718 | |
---|
| 719 | // private |
---|
| 720 | clearMonitor : function(){ |
---|
| 721 | Ext.getDoc().un("click", this.slideInIf, this); |
---|
| 722 | }, |
---|
| 723 | |
---|
| 724 | /** |
---|
| 725 | * If this Region is {@link #floatable}, this method slides this Region into full visibility <i>over the top |
---|
| 726 | * of the center Region</i> where it floats until either {@link #slideIn} is called, or other regions of the layout |
---|
| 727 | * are clicked, or the mouse exits the Region. |
---|
| 728 | */ |
---|
| 729 | slideOut : function(){ |
---|
| 730 | if(this.isSlid || this.el.hasActiveFx()){ |
---|
| 731 | return; |
---|
| 732 | } |
---|
| 733 | this.isSlid = true; |
---|
| 734 | var ts = this.panel.tools, dh, pc; |
---|
| 735 | if(ts && ts.toggle){ |
---|
| 736 | ts.toggle.hide(); |
---|
| 737 | } |
---|
| 738 | this.el.show(); |
---|
| 739 | |
---|
| 740 | // Temporarily clear the collapsed flag so we can onResize the panel on the slide |
---|
| 741 | pc = this.panel.collapsed; |
---|
| 742 | this.panel.collapsed = false; |
---|
| 743 | |
---|
| 744 | if(this.position == 'east' || this.position == 'west'){ |
---|
| 745 | // Temporarily clear the deferHeight flag so we can size the height on the slide |
---|
| 746 | dh = this.panel.deferHeight; |
---|
| 747 | this.panel.deferHeight = false; |
---|
| 748 | |
---|
| 749 | this.panel.setSize(undefined, this.collapsedEl.getHeight()); |
---|
| 750 | |
---|
| 751 | // Put the deferHeight flag back after setSize |
---|
| 752 | this.panel.deferHeight = dh; |
---|
| 753 | }else{ |
---|
| 754 | this.panel.setSize(this.collapsedEl.getWidth(), undefined); |
---|
| 755 | } |
---|
| 756 | |
---|
| 757 | // Put the collapsed flag back after onResize |
---|
| 758 | this.panel.collapsed = pc; |
---|
| 759 | |
---|
| 760 | this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top]; |
---|
| 761 | this.el.alignTo(this.collapsedEl, this.getCollapseAnchor()); |
---|
| 762 | this.el.setStyle("z-index", this.floatingZIndex+2); |
---|
| 763 | this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating'); |
---|
| 764 | if(this.animFloat !== false){ |
---|
| 765 | this.beforeSlide(); |
---|
| 766 | this.el.slideIn(this.getSlideAnchor(), { |
---|
| 767 | callback: function(){ |
---|
| 768 | this.afterSlide(); |
---|
| 769 | this.initAutoHide(); |
---|
| 770 | Ext.getDoc().on("click", this.slideInIf, this); |
---|
| 771 | }, |
---|
| 772 | scope: this, |
---|
| 773 | block: true |
---|
| 774 | }); |
---|
| 775 | }else{ |
---|
| 776 | this.initAutoHide(); |
---|
| 777 | Ext.getDoc().on("click", this.slideInIf, this); |
---|
| 778 | } |
---|
| 779 | }, |
---|
| 780 | |
---|
| 781 | // private |
---|
| 782 | afterSlideIn : function(){ |
---|
| 783 | this.clearAutoHide(); |
---|
| 784 | this.isSlid = false; |
---|
| 785 | this.clearMonitor(); |
---|
| 786 | this.el.setStyle("z-index", ""); |
---|
| 787 | this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed'); |
---|
| 788 | this.el.dom.style.left = this.restoreLT[0]; |
---|
| 789 | this.el.dom.style.top = this.restoreLT[1]; |
---|
| 790 | |
---|
| 791 | var ts = this.panel.tools; |
---|
| 792 | if(ts && ts.toggle){ |
---|
| 793 | ts.toggle.show(); |
---|
| 794 | } |
---|
| 795 | }, |
---|
| 796 | |
---|
| 797 | /** |
---|
| 798 | * If this Region is {@link #floatable}, and this Region has been slid into floating visibility, then this method slides |
---|
| 799 | * this region back into its collapsed state. |
---|
| 800 | */ |
---|
| 801 | slideIn : function(cb){ |
---|
| 802 | if(!this.isSlid || this.el.hasActiveFx()){ |
---|
| 803 | Ext.callback(cb); |
---|
| 804 | return; |
---|
| 805 | } |
---|
| 806 | this.isSlid = false; |
---|
| 807 | if(this.animFloat !== false){ |
---|
| 808 | this.beforeSlide(); |
---|
| 809 | this.el.slideOut(this.getSlideAnchor(), { |
---|
| 810 | callback: function(){ |
---|
| 811 | this.el.hide(); |
---|
| 812 | this.afterSlide(); |
---|
| 813 | this.afterSlideIn(); |
---|
| 814 | Ext.callback(cb); |
---|
| 815 | }, |
---|
| 816 | scope: this, |
---|
| 817 | block: true |
---|
| 818 | }); |
---|
| 819 | }else{ |
---|
| 820 | this.el.hide(); |
---|
| 821 | this.afterSlideIn(); |
---|
| 822 | } |
---|
| 823 | }, |
---|
| 824 | |
---|
| 825 | // private |
---|
| 826 | slideInIf : function(e){ |
---|
| 827 | if(!e.within(this.el)){ |
---|
| 828 | this.slideIn(); |
---|
| 829 | } |
---|
| 830 | }, |
---|
| 831 | |
---|
| 832 | // private |
---|
| 833 | anchors : { |
---|
| 834 | "west" : "left", |
---|
| 835 | "east" : "right", |
---|
| 836 | "north" : "top", |
---|
| 837 | "south" : "bottom" |
---|
| 838 | }, |
---|
| 839 | |
---|
| 840 | // private |
---|
| 841 | sanchors : { |
---|
| 842 | "west" : "l", |
---|
| 843 | "east" : "r", |
---|
| 844 | "north" : "t", |
---|
| 845 | "south" : "b" |
---|
| 846 | }, |
---|
| 847 | |
---|
| 848 | // private |
---|
| 849 | canchors : { |
---|
| 850 | "west" : "tl-tr", |
---|
| 851 | "east" : "tr-tl", |
---|
| 852 | "north" : "tl-bl", |
---|
| 853 | "south" : "bl-tl" |
---|
| 854 | }, |
---|
| 855 | |
---|
| 856 | // private |
---|
| 857 | getAnchor : function(){ |
---|
| 858 | return this.anchors[this.position]; |
---|
| 859 | }, |
---|
| 860 | |
---|
| 861 | // private |
---|
| 862 | getCollapseAnchor : function(){ |
---|
| 863 | return this.canchors[this.position]; |
---|
| 864 | }, |
---|
| 865 | |
---|
| 866 | // private |
---|
| 867 | getSlideAnchor : function(){ |
---|
| 868 | return this.sanchors[this.position]; |
---|
| 869 | }, |
---|
| 870 | |
---|
| 871 | // private |
---|
| 872 | getAlignAdj : function(){ |
---|
| 873 | var cm = this.cmargins; |
---|
| 874 | switch(this.position){ |
---|
| 875 | case "west": |
---|
| 876 | return [0, 0]; |
---|
| 877 | break; |
---|
| 878 | case "east": |
---|
| 879 | return [0, 0]; |
---|
| 880 | break; |
---|
| 881 | case "north": |
---|
| 882 | return [0, 0]; |
---|
| 883 | break; |
---|
| 884 | case "south": |
---|
| 885 | return [0, 0]; |
---|
| 886 | break; |
---|
| 887 | } |
---|
| 888 | }, |
---|
| 889 | |
---|
| 890 | // private |
---|
| 891 | getExpandAdj : function(){ |
---|
| 892 | var c = this.collapsedEl, cm = this.cmargins; |
---|
| 893 | switch(this.position){ |
---|
| 894 | case "west": |
---|
| 895 | return [-(cm.right+c.getWidth()+cm.left), 0]; |
---|
| 896 | break; |
---|
| 897 | case "east": |
---|
| 898 | return [cm.right+c.getWidth()+cm.left, 0]; |
---|
| 899 | break; |
---|
| 900 | case "north": |
---|
| 901 | return [0, -(cm.top+cm.bottom+c.getHeight())]; |
---|
| 902 | break; |
---|
| 903 | case "south": |
---|
| 904 | return [0, cm.top+cm.bottom+c.getHeight()]; |
---|
| 905 | break; |
---|
| 906 | } |
---|
| 907 | }, |
---|
| 908 | |
---|
| 909 | destroy : function(){ |
---|
| 910 | if (this.autoHideSlideTask && this.autoHideSlideTask.cancel){ |
---|
| 911 | this.autoHideSlideTask.cancel(); |
---|
| 912 | } |
---|
| 913 | Ext.destroyMembers(this, 'miniCollapsedEl', 'collapsedEl', 'expandToolEl'); |
---|
| 914 | } |
---|
| 915 | }; |
---|
| 916 | |
---|
| 917 | /** |
---|
| 918 | * @class Ext.layout.BorderLayout.SplitRegion |
---|
| 919 | * @extends Ext.layout.BorderLayout.Region |
---|
| 920 | * <p>This is a specialized type of {@link Ext.layout.BorderLayout.Region BorderLayout region} that |
---|
| 921 | * has a built-in {@link Ext.SplitBar} for user resizing of regions. The movement of the split bar |
---|
| 922 | * is configurable to move either {@link #tickSize smooth or incrementally}.</p> |
---|
| 923 | * @constructor |
---|
| 924 | * Create a new SplitRegion. |
---|
| 925 | * @param {Layout} layout The {@link Ext.layout.BorderLayout BorderLayout} instance that is managing this Region. |
---|
| 926 | * @param {Object} config The configuration options |
---|
| 927 | * @param {String} position The region position. Valid values are: north, south, east, west and center. Every |
---|
| 928 | * BorderLayout must have a center region for the primary content -- all other regions are optional. |
---|
| 929 | */ |
---|
| 930 | Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){ |
---|
| 931 | Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos); |
---|
| 932 | // prevent switch |
---|
| 933 | this.applyLayout = this.applyFns[pos]; |
---|
| 934 | }; |
---|
| 935 | |
---|
| 936 | Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, { |
---|
| 937 | /** |
---|
| 938 | * @cfg {Number} tickSize |
---|
| 939 | * The increment, in pixels by which to move this Region's {@link Ext.SplitBar SplitBar}. |
---|
| 940 | * By default, the {@link Ext.SplitBar SplitBar} moves smoothly. |
---|
| 941 | */ |
---|
| 942 | /** |
---|
| 943 | * @cfg {String} splitTip |
---|
| 944 | * The tooltip to display when the user hovers over a |
---|
| 945 | * {@link Ext.layout.BorderLayout.Region#collapsible non-collapsible} region's split bar |
---|
| 946 | * (defaults to <tt>"Drag to resize."</tt>). Only applies if |
---|
| 947 | * <tt>{@link #useSplitTips} = true</tt>. |
---|
| 948 | */ |
---|
| 949 | splitTip : "Drag to resize.", |
---|
| 950 | /** |
---|
| 951 | * @cfg {String} collapsibleSplitTip |
---|
| 952 | * The tooltip to display when the user hovers over a |
---|
| 953 | * {@link Ext.layout.BorderLayout.Region#collapsible collapsible} region's split bar |
---|
| 954 | * (defaults to "Drag to resize. Double click to hide."). Only applies if |
---|
| 955 | * <tt>{@link #useSplitTips} = true</tt>. |
---|
| 956 | */ |
---|
| 957 | collapsibleSplitTip : "Drag to resize. Double click to hide.", |
---|
| 958 | /** |
---|
| 959 | * @cfg {Boolean} useSplitTips |
---|
| 960 | * <tt>true</tt> to display a tooltip when the user hovers over a region's split bar |
---|
| 961 | * (defaults to <tt>false</tt>). The tooltip text will be the value of either |
---|
| 962 | * <tt>{@link #splitTip}</tt> or <tt>{@link #collapsibleSplitTip}</tt> as appropriate. |
---|
| 963 | */ |
---|
| 964 | useSplitTips : false, |
---|
| 965 | |
---|
| 966 | // private |
---|
| 967 | splitSettings : { |
---|
| 968 | north : { |
---|
| 969 | orientation: Ext.SplitBar.VERTICAL, |
---|
| 970 | placement: Ext.SplitBar.TOP, |
---|
| 971 | maxFn : 'getVMaxSize', |
---|
| 972 | minProp: 'minHeight', |
---|
| 973 | maxProp: 'maxHeight' |
---|
| 974 | }, |
---|
| 975 | south : { |
---|
| 976 | orientation: Ext.SplitBar.VERTICAL, |
---|
| 977 | placement: Ext.SplitBar.BOTTOM, |
---|
| 978 | maxFn : 'getVMaxSize', |
---|
| 979 | minProp: 'minHeight', |
---|
| 980 | maxProp: 'maxHeight' |
---|
| 981 | }, |
---|
| 982 | east : { |
---|
| 983 | orientation: Ext.SplitBar.HORIZONTAL, |
---|
| 984 | placement: Ext.SplitBar.RIGHT, |
---|
| 985 | maxFn : 'getHMaxSize', |
---|
| 986 | minProp: 'minWidth', |
---|
| 987 | maxProp: 'maxWidth' |
---|
| 988 | }, |
---|
| 989 | west : { |
---|
| 990 | orientation: Ext.SplitBar.HORIZONTAL, |
---|
| 991 | placement: Ext.SplitBar.LEFT, |
---|
| 992 | maxFn : 'getHMaxSize', |
---|
| 993 | minProp: 'minWidth', |
---|
| 994 | maxProp: 'maxWidth' |
---|
| 995 | } |
---|
| 996 | }, |
---|
| 997 | |
---|
| 998 | // private |
---|
| 999 | applyFns : { |
---|
| 1000 | west : function(box){ |
---|
| 1001 | if(this.isCollapsed){ |
---|
| 1002 | return this.applyLayoutCollapsed(box); |
---|
| 1003 | } |
---|
| 1004 | var sd = this.splitEl.dom, s = sd.style; |
---|
| 1005 | this.panel.setPosition(box.x, box.y); |
---|
| 1006 | var sw = sd.offsetWidth; |
---|
| 1007 | s.left = (box.x+box.width-sw)+'px'; |
---|
| 1008 | s.top = (box.y)+'px'; |
---|
| 1009 | s.height = Math.max(0, box.height)+'px'; |
---|
| 1010 | this.panel.setSize(box.width-sw, box.height); |
---|
| 1011 | }, |
---|
| 1012 | east : function(box){ |
---|
| 1013 | if(this.isCollapsed){ |
---|
| 1014 | return this.applyLayoutCollapsed(box); |
---|
| 1015 | } |
---|
| 1016 | var sd = this.splitEl.dom, s = sd.style; |
---|
| 1017 | var sw = sd.offsetWidth; |
---|
| 1018 | this.panel.setPosition(box.x+sw, box.y); |
---|
| 1019 | s.left = (box.x)+'px'; |
---|
| 1020 | s.top = (box.y)+'px'; |
---|
| 1021 | s.height = Math.max(0, box.height)+'px'; |
---|
| 1022 | this.panel.setSize(box.width-sw, box.height); |
---|
| 1023 | }, |
---|
| 1024 | north : function(box){ |
---|
| 1025 | if(this.isCollapsed){ |
---|
| 1026 | return this.applyLayoutCollapsed(box); |
---|
| 1027 | } |
---|
| 1028 | var sd = this.splitEl.dom, s = sd.style; |
---|
| 1029 | var sh = sd.offsetHeight; |
---|
| 1030 | this.panel.setPosition(box.x, box.y); |
---|
| 1031 | s.left = (box.x)+'px'; |
---|
| 1032 | s.top = (box.y+box.height-sh)+'px'; |
---|
| 1033 | s.width = Math.max(0, box.width)+'px'; |
---|
| 1034 | this.panel.setSize(box.width, box.height-sh); |
---|
| 1035 | }, |
---|
| 1036 | south : function(box){ |
---|
| 1037 | if(this.isCollapsed){ |
---|
| 1038 | return this.applyLayoutCollapsed(box); |
---|
| 1039 | } |
---|
| 1040 | var sd = this.splitEl.dom, s = sd.style; |
---|
| 1041 | var sh = sd.offsetHeight; |
---|
| 1042 | this.panel.setPosition(box.x, box.y+sh); |
---|
| 1043 | s.left = (box.x)+'px'; |
---|
| 1044 | s.top = (box.y)+'px'; |
---|
| 1045 | s.width = Math.max(0, box.width)+'px'; |
---|
| 1046 | this.panel.setSize(box.width, box.height-sh); |
---|
| 1047 | } |
---|
| 1048 | }, |
---|
| 1049 | |
---|
| 1050 | // private |
---|
| 1051 | render : function(ct, p){ |
---|
| 1052 | Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p); |
---|
| 1053 | |
---|
| 1054 | var ps = this.position; |
---|
| 1055 | |
---|
| 1056 | this.splitEl = ct.createChild({ |
---|
| 1057 | cls: "x-layout-split x-layout-split-"+ps, html: " ", |
---|
| 1058 | id: this.panel.id + '-xsplit' |
---|
| 1059 | }); |
---|
| 1060 | |
---|
| 1061 | if(this.collapseMode == 'mini'){ |
---|
| 1062 | this.miniSplitEl = this.splitEl.createChild({ |
---|
| 1063 | cls: "x-layout-mini x-layout-mini-"+ps, html: " " |
---|
| 1064 | }); |
---|
| 1065 | this.miniSplitEl.addClassOnOver('x-layout-mini-over'); |
---|
| 1066 | this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true}); |
---|
| 1067 | } |
---|
| 1068 | |
---|
| 1069 | var s = this.splitSettings[ps]; |
---|
| 1070 | |
---|
| 1071 | this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation); |
---|
| 1072 | this.split.tickSize = this.tickSize; |
---|
| 1073 | this.split.placement = s.placement; |
---|
| 1074 | this.split.getMaximumSize = this[s.maxFn].createDelegate(this); |
---|
| 1075 | this.split.minSize = this.minSize || this[s.minProp]; |
---|
| 1076 | this.split.on("beforeapply", this.onSplitMove, this); |
---|
| 1077 | this.split.useShim = this.useShim === true; |
---|
| 1078 | this.maxSize = this.maxSize || this[s.maxProp]; |
---|
| 1079 | |
---|
| 1080 | if(p.hidden){ |
---|
| 1081 | this.splitEl.hide(); |
---|
| 1082 | } |
---|
| 1083 | |
---|
| 1084 | if(this.useSplitTips){ |
---|
| 1085 | this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip; |
---|
| 1086 | } |
---|
| 1087 | if(this.collapsible){ |
---|
| 1088 | this.splitEl.on("dblclick", this.onCollapseClick, this); |
---|
| 1089 | } |
---|
| 1090 | }, |
---|
| 1091 | |
---|
| 1092 | //docs inherit from superclass |
---|
| 1093 | getSize : function(){ |
---|
| 1094 | if(this.isCollapsed){ |
---|
| 1095 | return this.collapsedEl.getSize(); |
---|
| 1096 | } |
---|
| 1097 | var s = this.panel.getSize(); |
---|
| 1098 | if(this.position == 'north' || this.position == 'south'){ |
---|
| 1099 | s.height += this.splitEl.dom.offsetHeight; |
---|
| 1100 | }else{ |
---|
| 1101 | s.width += this.splitEl.dom.offsetWidth; |
---|
| 1102 | } |
---|
| 1103 | return s; |
---|
| 1104 | }, |
---|
| 1105 | |
---|
| 1106 | // private |
---|
| 1107 | getHMaxSize : function(){ |
---|
| 1108 | var cmax = this.maxSize || 10000; |
---|
| 1109 | var center = this.layout.center; |
---|
| 1110 | return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth()); |
---|
| 1111 | }, |
---|
| 1112 | |
---|
| 1113 | // private |
---|
| 1114 | getVMaxSize : function(){ |
---|
| 1115 | var cmax = this.maxSize || 10000; |
---|
| 1116 | var center = this.layout.center; |
---|
| 1117 | return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight()); |
---|
| 1118 | }, |
---|
| 1119 | |
---|
| 1120 | // private |
---|
| 1121 | onSplitMove : function(split, newSize){ |
---|
| 1122 | var s = this.panel.getSize(); |
---|
| 1123 | this.lastSplitSize = newSize; |
---|
| 1124 | if(this.position == 'north' || this.position == 'south'){ |
---|
| 1125 | this.panel.setSize(s.width, newSize); |
---|
| 1126 | this.state.height = newSize; |
---|
| 1127 | }else{ |
---|
| 1128 | this.panel.setSize(newSize, s.height); |
---|
| 1129 | this.state.width = newSize; |
---|
| 1130 | } |
---|
| 1131 | this.layout.layout(); |
---|
| 1132 | this.panel.saveState(); |
---|
| 1133 | return false; |
---|
| 1134 | }, |
---|
| 1135 | |
---|
| 1136 | /** |
---|
| 1137 | * Returns a reference to the split bar in use by this region. |
---|
| 1138 | * @return {Ext.SplitBar} The split bar |
---|
| 1139 | */ |
---|
| 1140 | getSplitBar : function(){ |
---|
| 1141 | return this.split; |
---|
| 1142 | }, |
---|
| 1143 | |
---|
| 1144 | // inherit docs |
---|
| 1145 | destroy : function() { |
---|
| 1146 | Ext.destroy(this.miniSplitEl, this.split, this.splitEl); |
---|
| 1147 | Ext.layout.BorderLayout.SplitRegion.superclass.destroy.call(this); |
---|
| 1148 | } |
---|
| 1149 | }); |
---|
| 1150 | |
---|
| 1151 | Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout; |
---|