/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +/** * @class Ext.layout.BorderLayout * @extends Ext.layout.ContainerLayout *- +Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout; +This is a multi-pane, application-oriented UI layout style that supports multiple @@ -32,7 +39,7 @@ var myBorderPanel = new Ext.Panel({ {@link Ext.layout.BorderLayout.Region#BorderLayout.Region region}: 'south', // position for region {@link Ext.BoxComponent#height height}: 100, {@link Ext.layout.BorderLayout.Region#split split}: true, // enable resizing - {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} + {@link Ext.SplitBar#minSize minSize}: 75, // defaults to {@link Ext.layout.BorderLayout.Region#minHeight 50} {@link Ext.SplitBar#maxSize maxSize}: 150, {@link Ext.layout.BorderLayout.Region#margins margins}: '0 5 5 5' },{ @@ -90,23 +97,30 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { // private rendered : false, + type: 'border', + + targetCls: 'x-border-layout-ct', + + getLayoutTargetSize : function() { + var target = this.container.getLayoutTarget(); + return target ? target.getViewSize() : {}; + }, + // private onLayout : function(ct, target){ - var collapsed; + var collapsed, i, c, pos, items = ct.items.items, len = items.length; if(!this.rendered){ - target.addClass('x-border-layout-ct'); - var items = ct.items.items; collapsed = []; - for(var i = 0, len = items.length; i < len; i++) { - var c = items[i]; - var pos = c.region; + for(i = 0; i < len; i++) { + c = items[i]; + pos = c.region; if(c.collapsed){ collapsed.push(c); } c.collapsed = false; if(!c.rendered){ - c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel'; c.render(target, i); + c.getPositionEl().addClass('x-border-panel'); } this[pos] = pos != 'center' && c.split ? new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) : @@ -116,7 +130,7 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { this.rendered = true; } - var size = target.getViewSize(); + var size = this.getLayoutTargetSize(); if(size.width < 20 || size.height < 20){ // display none? if(collapsed){ this.restoreCollapsed = collapsed; @@ -127,17 +141,17 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { delete this.restoreCollapsed; } - var w = size.width, h = size.height; - var centerW = w, centerH = h, centerY = 0, centerX = 0; - - var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center; + var w = size.width, h = size.height, + centerW = w, centerH = h, centerY = 0, centerX = 0, + n = this.north, s = this.south, west = this.west, e = this.east, c = this.center, + b, m, totalWidth, totalHeight; if(!c && Ext.layout.BorderLayout.WARN !== false){ throw 'No center region defined in BorderLayout ' + ct.id; } if(n && n.isVisible()){ - var b = n.getSize(); - var m = n.getMargins(); + b = n.getSize(); + m = n.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; b.y = m.top; @@ -146,38 +160,38 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { n.applyLayout(b); } if(s && s.isVisible()){ - var b = s.getSize(); - var m = s.getMargins(); + b = s.getSize(); + m = s.getMargins(); b.width = w - (m.left+m.right); b.x = m.left; - var totalHeight = (b.height + m.top + m.bottom); + totalHeight = (b.height + m.top + m.bottom); b.y = h - totalHeight + m.top; centerH -= totalHeight; s.applyLayout(b); } if(west && west.isVisible()){ - var b = west.getSize(); - var m = west.getMargins(); + b = west.getSize(); + m = west.getMargins(); b.height = centerH - (m.top+m.bottom); b.x = m.left; b.y = centerY + m.top; - var totalWidth = (b.width + m.left + m.right); + totalWidth = (b.width + m.left + m.right); centerX += totalWidth; centerW -= totalWidth; west.applyLayout(b); } if(e && e.isVisible()){ - var b = e.getSize(); - var m = e.getMargins(); + b = e.getSize(); + m = e.getMargins(); b.height = centerH - (m.top+m.bottom); - var totalWidth = (b.width + m.left + m.right); + totalWidth = (b.width + m.left + m.right); b.x = w - totalWidth + m.left; b.y = centerY + m.top; centerW -= totalWidth; e.applyLayout(b); } if(c){ - var m = c.getMargins(); + m = c.getMargins(); var centerBox = { x: centerX + m.left, y: centerY + m.top, @@ -187,19 +201,28 @@ Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, { c.applyLayout(centerBox); } if(collapsed){ - for(var i = 0, len = collapsed.length; i < len; i++){ + for(i = 0, len = collapsed.length; i < len; i++){ collapsed[i].collapse(false); } } if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue target.repaint(); } + // Putting a border layout into an overflowed container is NOT correct and will make a second layout pass necessary. + if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) { + var ts = this.getLayoutTargetSize(); + if (ts.width != size.width || ts.height != size.height){ + this.adjustmentPass = true; + this.onLayout(ct, target); + } + } + delete this.adjustmentPass; }, destroy: function() { - var r = ['north', 'south', 'east', 'west']; - for (var i = 0; i < r.length; i++) { - var region = this[r[i]]; + var r = ['north', 'south', 'east', 'west'], i, region; + for (i = 0; i < r.length; i++) { + region = this[r[i]]; if(region){ if(region.destroy){ region.destroy(); @@ -343,19 +366,19 @@ Ext.layout.BorderLayout.Region.prototype = { collapsible : false,
/** * @cfg {Boolean} split - *true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and + *
true to create a {@link Ext.layout.BorderLayout.SplitRegion SplitRegion} and * display a 5px wide {@link Ext.SplitBar} between this region and its neighbor, allowing the user to * resize the regions dynamically. Defaults to false creating a * {@link Ext.layout.BorderLayout.Region Region}.
*Notes:
+ * for the collapse tool + * */ split:false, /** @@ -369,8 +392,8 @@ Ext.layout.BorderLayout.Region.prototype = { * @cfg {Number} minWidth *- *
- this configuration option is ignored if region='center'
+ *- this configuration option is ignored if region='center'
*- when split == true, it is common to specify a * {@link Ext.SplitBar#minSize minSize} and {@link Ext.SplitBar#maxSize maxSize} * for the {@link Ext.BoxComponent BoxComponent} representing the region. These are not native * configs of {@link Ext.BoxComponent BoxComponent}, and are used only by this class.
*- if {@link #collapseMode} = 'mini' requires split = true to reserve space - * for the collapse tool
- *The minimum allowable width in pixels for this region (defaults to 50). * maxWidth may also be specified.
- *Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + *
Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified * minWidth / maxWidth.
*/ minWidth:50, @@ -378,8 +401,8 @@ Ext.layout.BorderLayout.Region.prototype = { * @cfg {Number} minHeight * The minimum allowable height in pixels for this region (defaults to 50) * maxHeight may also be specified.
- *Note: setting the {@link Ext.SplitBar#minSize minSize} / - * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified + *
Note: setting the {@link Ext.SplitBar#minSize minSize} / + * {@link Ext.SplitBar#maxSize maxSize} supersedes any specified * minHeight / maxHeight.
*/ minHeight:50, @@ -476,7 +499,7 @@ Ext.layout.BorderLayout.Region.prototype = { this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true}); }else { if(this.collapsible !== false && !this.hideCollapseTool) { - var t = this.toolTemplate.append( + var t = this.expandToolEl = this.toolTemplate.append( this.collapsedEl.dom, {id:'expand-'+this.position}, true); t.addClassOnOver('x-tool-expand-'+this.position+'-over'); @@ -494,7 +517,6 @@ Ext.layout.BorderLayout.Region.prototype = { // private onExpandClick : function(e){ if(this.isSlid){ - this.afterSlideIn(); this.panel.expand(false); }else{ this.panel.expand(); @@ -513,7 +535,9 @@ Ext.layout.BorderLayout.Region.prototype = { this.splitEl.hide(); } this.getCollapsedEl().show(); - this.panel.el.setStyle('z-index', 100); + var el = this.panel.getEl(); + this.originalZIndex = el.getStyle('z-index'); + el.setStyle('z-index', 100); this.isCollapsed = true; this.layout.layout(); }, @@ -532,6 +556,9 @@ Ext.layout.BorderLayout.Region.prototype = { // private beforeExpand : function(animate){ + if(this.isSlid){ + this.afterSlideIn(); + } var c = this.getCollapsedEl(); this.el.show(); if(this.position == 'east' || this.position == 'west'){ @@ -551,7 +578,7 @@ Ext.layout.BorderLayout.Region.prototype = { this.splitEl.show(); } this.layout.layout(); - this.panel.el.setStyle('z-index', 1); + this.panel.el.setStyle('z-index', this.originalZIndex); this.state.collapsed = false; this.panel.saveState(); }, @@ -669,20 +696,21 @@ Ext.layout.BorderLayout.Region.prototype = { initAutoHide : function(){ if(this.autoHide !== false){ if(!this.autoHideHd){ - var st = new Ext.util.DelayedTask(this.slideIn, this); + this.autoHideSlideTask = new Ext.util.DelayedTask(this.slideIn, this); this.autoHideHd = { "mouseout": function(e){ if(!e.within(this.el, true)){ - st.delay(500); + this.autoHideSlideTask.delay(500); } }, "mouseover" : function(e){ - st.cancel(); + this.autoHideSlideTask.cancel(); }, scope : this }; } this.el.on(this.autoHideHd); + this.collapsedEl.on(this.autoHideHd); } }, @@ -691,6 +719,8 @@ Ext.layout.BorderLayout.Region.prototype = { if(this.autoHide !== false){ this.el.un("mouseout", this.autoHideHd.mouseout); this.el.un("mouseover", this.autoHideHd.mouseover); + this.collapsedEl.un("mouseout", this.autoHideHd.mouseout); + this.collapsedEl.un("mouseover", this.autoHideHd.mouseover); } }, @@ -709,16 +739,32 @@ Ext.layout.BorderLayout.Region.prototype = { return; } this.isSlid = true; - var ts = this.panel.tools; + var ts = this.panel.tools, dh, pc; if(ts && ts.toggle){ ts.toggle.hide(); } this.el.show(); + + // Temporarily clear the collapsed flag so we can onResize the panel on the slide + pc = this.panel.collapsed; + this.panel.collapsed = false; + if(this.position == 'east' || this.position == 'west'){ + // Temporarily clear the deferHeight flag so we can size the height on the slide + dh = this.panel.deferHeight; + this.panel.deferHeight = false; + this.panel.setSize(undefined, this.collapsedEl.getHeight()); + + // Put the deferHeight flag back after setSize + this.panel.deferHeight = dh; }else{ this.panel.setSize(this.collapsedEl.getWidth(), undefined); } + + // Put the collapsed flag back after onResize + this.panel.collapsed = pc; + this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top]; this.el.alignTo(this.collapsedEl, this.getCollapseAnchor()); this.el.setStyle("z-index", this.floatingZIndex+2); @@ -866,6 +912,13 @@ Ext.layout.BorderLayout.Region.prototype = { return [0, cm.top+cm.bottom+c.getHeight()]; break; } + }, + + destroy : function(){ + if (this.autoHideSlideTask && this.autoHideSlideTask.cancel){ + this.autoHideSlideTask.cancel(); + } + Ext.destroyMembers(this, 'miniCollapsedEl', 'collapsedEl', 'expandToolEl'); } }; @@ -1098,14 +1151,12 @@ Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, // inherit docs destroy : function() { - Ext.destroy( - this.miniSplitEl, - this.split, - this.splitEl - ); + Ext.destroy(this.miniSplitEl, this.split, this.splitEl); + Ext.layout.BorderLayout.SplitRegion.superclass.destroy.call(this); } }); -Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;