PDA

View Full Version : One click to restore border layout?



lingz_public
9 Apr 2010, 8:39 AM
Hi,
I wants to restore original border layout in one button click.
I am using Ext 2.3.0
My layout is as below:


var viewport = new Ext.Viewport({
layout:'border',
items:[toolPanel, //north
gridPanel, //center
chartPanel //west
]



I configure chartPanel as collapsible as below:


region: 'west',
title : 'Statistics Chart:',
id : 'chart-panel',
split:true,
width: 300,
minSize: 175,
maxSize: 900,
collapsible:true,
autoScroll: true, //the default
layout: 'accordion',
layoutConfig:{
animate:true
},


I found the west panel can collapse correctly, while when expand, it reaches max of window width, not the configured maxSize. I didn't find the reason.
In this way, to restore to original view, user has to first expand to max, and then click 'restore' (I implemented to set to fixed width).
I want to have a button in one click to set west panel to fixed size.
The problem is that, when west panel is not collapsed, it can set to fixed size in one click correctly. When west panel is collapsed, in one click, the panel is set to fixed size, but the collapsed tool bar is always there. I think if can hide or remove the collapse bar, the work can be done.

The collapse bar is like below when to restore collapsed west panel:
http://cid-01d717d12a5c594a.skydrive.live.com/self.aspx/extjs/wbar.bmp

lingz_public
9 Apr 2010, 5:58 PM
Currently, I tried to find the bar node and hide the bar. But not the good result, the bar will disappear, but the panel will flash in center and then try rendering to whole area, and always rendered blank.

I use below code in click handling:


this.el.removeClass(this.collapsedCls);

this.beforeEffect(true);
this.onExpand(true, true);
this.afterExpand(false);
this.doLayout();
document.getElementById('chart-panel-xcollapsed').style.display='none';