View Full Version : East region in border layout problem

lee el
10 Apr 2013, 1:10 AM

I have a view port with border layout and east and west panels that are defined as collapsible true.
when I click on the west region to expand it than the center panel is pushed to the right as expected.
when I click on the east region to expand it the center panel is not pushed to the left and the east panel is overlaying on the center panel.
both east and west panel have the same definitions


Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
region: 'north',
height: 100,
xtype: 'container',
cls: 'header_back',

title: 'West Region is collapsible',
xtype: 'panel',
width: 200,
collapsible: true, // make collapsible
collapsed: true,
id: 'west-region-container',
layout: 'fit'
region: 'east',
xtype: 'panel',
collapsible: true,
collapsed: true,
layout: 'fit',


xtype: 'panel',
region: 'center',

see image:

10 Apr 2013, 3:21 AM
it doesnt look like the east panel is covering up the center. the graph has the same start and end values in both images on x-axis and the lines also look similar to me (other than they are shifted to the left when the east panel is expanded).

lee el
10 Apr 2013, 3:57 AM
Thank you for your time.
when I expand west panel the end of the chart (the right side) is out of the picture.
when I expand east panel it is just covering the right side of the chart ...
see that x value 15:57:50 is not visible in both images.
here is the full chart when panels are closed.


11 Apr 2013, 2:22 PM
I was trying to reproduce what you were seeing and couldn't and then realized that the center portion is not a chart, but a HighChart rendered into the center panel's body. If you use an ExtJS chart under a fit layout it'll resize when the parent component is resized.

Not sure how the HighChart works. I'm guessing that you'll have to re-layout the chart inside its parent element manually when the center panel is resized (you see the same sort of thing when dropping an OpenLayers map into a panel's body element). These components don't know their parent container is being resized since they're not an ExtJS component themselves and don't directly participate in the layout.

lee el
12 Apr 2013, 5:28 AM
thank you for your answer, this is what I thought as well so what I did is listen to the expand/collapse event of the
east panel and when this event is fired I draw the chart again.
the chart knows how to draw itself in the new available space after the east panel is opened/closed and this solves the problem.
the only thing that is not cleared is why this works when the west panel is expanded (chart is pushed to the right) ...


12 Apr 2013, 5:07 PM
When the west panel or the east panel slide out they force the center panel to resize. The chart in it doesn't resize, but instead it's left edge just sticks to the left edge of the center panel. The center panel can't wrap the chart (overflow none type situation) so when it slides right the chart is pushed with it and effectively pushed under the east panel (more or less).

When the east panel expands the same thing happens only the left edge of center and its chart stay where they were and again the chart overflows off out of view - under the east panel.