1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Toulouse, France
    Posts
    10
    Vote Rating
    0
    Squ36 is on a distinguished road

      0  

    Default Unanswered: Nested panels don't resize

    Unanswered: Nested panels don't resize


    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 !

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Does your onChartResized fire?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Toulouse, France
    Posts
    10
    Vote Rating
    0
    Squ36 is on a distinguished road

      0  

    Default


    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...
    Last edited by Squ36; 10 Dec 2012 at 6:56 AM. Reason: typo

Thread Participants: 1

Tags for this Thread