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 :


Code:
{
    xtype: 'panel',
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        layout: 'fit',
        items:[chartTop]
    },{
        xtype: 'panel',
        region: 'center',
        layout: 'fit',
        items:[chartCenter]
    }]
}

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 :


Code:
onChartResized: function(container, width, height, oldWidth, oldHeight){
    if(container.id == 'centerchart')
    {
        this.centerBox.setHeight(height);
        this.centerBox.doLayout();
    }
    this.centerBox.doComponentLayout();
    this.box.doComponentLayout();
}

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 !