[CLOSED][2.x/3.x] BorderLayout floating region not resized

[SimonDeNooij]

Sizing of 'preview' panels (panels that aren't permanently expanded but 'previewed' by clicking in the header area) is not right.

It can be shown with the complex layout example on your web site:

Expand West panel (with expand button)
Collapse West panel
Collapse South panel
'Preview' West panel:

the height of the west panel is not right. It is the height it had before it was collapsed.

The same bug exists for horizontal border panels (north and south). I don't know the version you are using for your comples layout example but the bug still exists in version 2.1

Also: it would be nice to have events for previewing like for true expand/collapse

Keep up the good work,

Simon

[jsakalos]

Looks like bug. Do you want me to move this thread to Bugs forum?

[SimonDeNooij]

Anything to get it solved

[jsakalos]

Moved.

[SimonDeNooij]

Are you planning to solve this bug in the near future? It prevents me from using this otherwise very sex feature

[Condor]

'preview' is called 'floating' in Ext.

I noticed this a long time ago, but I never made a proper bug report for it.

[SimonDeNooij]

Ok, but the question remains? will it be solved in the near future?

[Condor]

Here is a possible solution:

Ext.override(Ext.layout.BorderLayout.Region, {
	slideOut : function(){
		if(this.isSlid || this.el.hasActiveFx()){
			return;
		}
		this.isSlid = true;
		this.panel.isSlid = true;
		var ts = this.panel.tools;
		if(ts && ts.toggle){
			ts.toggle.hide();
		}
		this.el.show();
		if(this.position == 'east' || this.position == 'west'){
			this.panel.setSize(undefined, this.collapsedEl.getHeight());
		}else{
			this.panel.setSize(this.collapsedEl.getWidth(), undefined);
		}
		this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
		this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
		this.el.setStyle("z-index", 102);
		this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
		if(this.animFloat !== false){
			this.beforeSlide();
			this.el.slideIn(this.getSlideAnchor(), {
				callback: function(){
					this.afterSlide();
					this.initAutoHide();
					Ext.getDoc().on("click", this.slideInIf, this);
				},
				scope: this,
				block: true
			});
		}else{
			this.initAutoHide();
			 Ext.getDoc().on("click", this.slideInIf, this);
		}
	},
	afterSlideIn : function(){
		this.clearAutoHide();
		this.isSlid = false;
		delete this.panel.isSlid;
		this.clearMonitor();
		this.el.setStyle("z-index", "");
		this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
		this.el.dom.style.left = this.restoreLT[0];
		this.el.dom.style.top = this.restoreLT[1];
		var ts = this.panel.tools;
		if(ts && ts.toggle){
			ts.toggle.show();
		}
	},
	slideIn : function(cb){
		if(!this.isSlid || this.el.hasActiveFx()){
			Ext.callback(cb);
			return;
		}
		this.isSlid = false;
		delete this.panel.isSlid;
		if(this.animFloat !== false){
			this.beforeSlide();
			this.el.slideOut(this.getSlideAnchor(), {
				callback: function(){
					this.el.hide();
					this.afterSlide();
					this.afterSlideIn();
					Ext.callback(cb);
				},
				scope: this,
				block: true
			});
		}else{
			this.el.hide();
			this.afterSlideIn();
		}
	}
});
Ext.override(Ext.Panel, {
	onResize : function(w, h){
		if(w !== undefined || h !== undefined){
			if(!this.collapsed || this.isSlid){
				if(typeof w == 'number'){
					this.body.setWidth(
							this.adjustBodyWidth(w - this.getFrameWidth()));
				}else if(w == 'auto'){
					this.body.setWidth(w);
				}
				if(typeof h == 'number'){
					this.body.setHeight(
							this.adjustBodyHeight(h - this.getFrameHeight()));
				}else if(h == 'auto'){
					this.body.setHeight(h);
				}
				if(this.disabled && this.el._mask){
					this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());
				}
			}else{
				this.queuedBodySize = {width: w, height: h};
				if(!this.queuedExpand && this.allowQueuedExpand !== false){
					this.queuedExpand = true;
					this.on('expand', function(){
						delete this.queuedExpand;
						this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
						this.doLayout();
					}, this, {single:true});
				}
			}
			this.fireEvent('bodyresize', this, w, h);
		}
		this.syncShadow();
	}
});
Ext.override(Ext.layout.ContainerLayout, {
	onResize: function(){
		if(this.container.collapsed && !this.container.isSlid){
			return;
		}
		var b = this.container.bufferResize;
		if(b){
			if(!this.resizeTask){
				this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
				this.resizeBuffer = typeof b == 'number' ? b : 100;
			}
			this.resizeTask.delay(this.resizeBuffer);
		}else{
			this.layout();
		}
	}
});
Ext.override(Ext.layout.FitLayout, {
	onLayout : function(ct, target){
		Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
		if(!this.container.collapsed || this.container.isSlid){
			this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
		}
	}
});

[SimonDeNooij]

Thanks for sorting it out! I hope this makes it into the next Ext release, I allready changed the design of our app to avoid this problem and am now too time-pressed to incorporate this solution, but the sliding panels will definitely make it into future versions of our app!

Regards,

Simon

[mprice]

Condor, thanks for the update. I applied these overrides to the complex layout example, and now the region itself does indeed resize correctly when "floated" after a browser resize. But the contents of the region to not resize properly. The east region is a fit layout, and the tab panel is added directly to the east region. How would I get the tab panel to resize as well? See screenshot :

temp.jpg

Repro steps:
1. Collapse the east region
2. Resize the browser to make it bigger
3. "Float" the east region