View Full Version : Nested panels don't resize

7 Dec 2012, 6:08 AM
Hi everyone,

I'm currently building an MVC app (with Ext 4.1.1), and some of the Panel behaviour bugs me a little. Essentially, I have a panel with a border layout, with 2 children (panels also), 1 north and 1 center, each one containing a chart (using Highcharts). Here is a more "visual" example :

xtype: 'panel',
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
layout: 'fit',
xtype: 'panel',
region: 'center',
layout: 'fit',

The chartCenter item (horizontal bar chart) is supposed to resize based on the number of rows (which changes dynamically after page rendering, based on user input). The chart resizes properly, but neither its container (this.centerBox) nor the top level panel (this.box) resize. I've tried a lot of things, but nothing works, and I don't want to be stuck with a scrollbar. The chart should be fully visible. Here is what I have so far in my controller, listening to the chartCenter resize event :

onChartResized: function(container, width, height, oldWidth, oldHeight){
if(container.id == 'centerchart')

My top level panel is set with no height property, only minHeight: 700, and it does not expand, meaning in most cases, my center chart is -largely- truncated on its bottom.

Any solution/advice/help much appreciated.

Thanks !

9 Dec 2012, 8:10 AM
Does your onChartResized fire?

9 Dec 2012, 10:18 AM
Yes, that's the first thing i checked.

Actually, i've only posted a part of the function, because there are other actions (unrelated) that i need to do when the chart is resized.
I've made several more attemps since Friday, like setting the height for both the box and the centerBox, changing the height/minHeight properties, but these didn't change anytthing...