/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.2
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
@@ -38,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'
},{
@@ -96,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.render(target, i);
- c.getDomPositionEl().addClass('x-border-panel');
+ c.getPositionEl().addClass('x-border-panel');
}
this[pos] = pos != 'center' && c.split ?
new Ext.layout.BorderLayout.SplitRegion(this, c.initialConfig, pos) :
@@ -122,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;
@@ -133,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;
@@ -152,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,
@@ -193,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();
@@ -349,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:
- * - 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
- *
+ * for the collapse tool
+ *
*/
split:false,
/**
@@ -375,8 +392,8 @@ Ext.layout.BorderLayout.Region.prototype = {
* @cfg {Number} minWidth
* 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,
@@ -384,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,
@@ -482,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');
@@ -500,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();
@@ -519,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();
},
@@ -538,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'){
@@ -557,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();
},
@@ -675,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);
}
},
@@ -697,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);
}
},
@@ -715,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);
@@ -872,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');
}
};
@@ -1104,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;
+Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;
+
\ No newline at end of file