Extjs: two panel resize accordingly when window resizes

Question

I have a panel containing two children panels.the parent panel uses "border" layout, while two children panels use "form" and "column" layouts respectively. now How can I make these two children panels resize accordingly when window resizes, i.e., make sure the size ratio of these two panels is constant.

thanks!

my codes are as follows:

itemRts = {
    xtype: 'panel',
    title: 'Route',
    region: 'north',
    autoHeight: true,
    layout: 'form',
    width: 294,
    bodyStyle: 'padding:10px 12px 10px',
    id: 'ROUTE_PANEL',
    el: 'Route_Setup',
    items: [
    {
        xtype: 'button',
        text: 'Go',
        anchor: '0',
        id: 'GO_BTN'

    }]
};

itemEvts = {
    xtype: 'panel',
    title: 'Events',
    region: 'center',
    layout: 'column',
    tpl: 'Please put events here.',
    //bodyStyle: 'padding:10px 12px 10px',
    border: false,
    hideBorders: true,
    id: 'EVENT_PANEL',
    el: 'Event_Legend',
    autoScroll: true
};

newView = new Ext.Viewport({
    layout: "border",
    items: [

    {
        xtype: 'panel',
        margins: '10 0 10 10',
        region: 'center',
        width: 200,
        layout: 'border',
        split: true,
        boxMaxWidth: 280,
        minWidth: 280,
        id: 'RTS_EVTS_REGION',
        collapseMode: 'mini',
        items: [
        itemRts,
        itemEvts]
    }]
});

how to modify above codes to make it work as what I want?

thanks again!

Solution 1

for your main container, i suggest hbox and/or vbox layouts. those layouts are what you are looking for. here a sample:

var testPanel = new Ext.Viewport( {
    id : 'vp_test',
    layout : 'hbox',
    align : 'stretch',
    items : [
        {
            id : 'pnl_child_1',
            title : 'Test 1',
            flex : 2
        },
        {
            id : 'pnl_child_2',
            title : 'Test 2',
            flex : 3,
            layout : 'vbox',
            align : 'stretch',
            items : [
                {
                    id : 'pnl_child_3',
                    title : 'Test 3',
                    flex : 1
                },
                {
                    id : 'pnl_child_4',
                    title : 'Test 4',
                    flex : 1
                }
            ]
        },
    ]
} );

you can refer to documentation, viewport, hbox, vbox

   itemRts = {
        xtype: 'panel',
        title: 'Route',
        // region: 'north', <<< we don't need this anymore
        flex: 1, // this means that this container has 1 flexible share
        // autoHeight: true, <<< this will ruin all layout
        layout: 'form',
        // width: 294, <<< we don't need this anymore
        bodyStyle: 'padding:10px 12px 10px',
        id: 'ROUTE_PANEL',
        el:'Route_Setup',
        items: [
            {
                xtype:'button',
                text:'Go',
                anchor:'0',
                id:'GO_BTN'
            }
        ]
    };
    itemEvts = {
        xtype: 'panel',
        title: 'Events',
        // region: 'center', <<< we don't need this anymore
        flex: 1, // this means that this container has 1 flexible share
        layout: 'column',
        tpl: 'Please put events here.', // <<<< if you're not going to use xTemplates you should use html property instead
        //bodyStyle: 'padding:10px 12px 10px',
        border: false,
        hideBorders: true,
        id: 'EVENT_PANEL',
        el : 'Event_Legend',
        autoScroll: true
    };

newView = new Ext.Viewport({
//// if you have only one child component you can use fit layout for viewport. 
//// and consider removing that only child. use viewport as main container.
    layout : "border", 
    items: [ 
        {
            xtype: 'panel',
            margins: '10 0 10 10',
            region: 'center',
            // width: 200, <<<< width has no effect on center region
      /// we'll use hbox with align stretch
            layout: 'hbox',
            align: 'stretch',
            // split: true, <<<< split has no effect on center region
            // boxMaxWidth: 280, <<<< no effect
            // minWidth: 280, <<<< no effect
            id: 'RTS_EVTS_REGION',
            // collapseMode: 'mini', <<<< collapse properties has no effect on center region
            items: [
                itemRts,
                itemEvts
            ]
        }
    ]
});

Solution 2

You can set a resize event for container panel and call "dolayout" method of their children in case of resize :

newView = new Ext.Viewport({
    layout: "border",
    items: [

    {
        xtype: 'panel',
        margins: '10 0 10 10',
        region: 'center',
        width: 200,
        layout: 'border',
        split: true,
        boxMaxWidth: 280,
        minWidth: 280,
        id: 'RTS_EVTS_REGION',
        collapseMode: 'mini',
        items: [itemRts, itemEvts],
        listeners: {
            'resize': function () {
                itemRts.doLayout();
                itemEvts.doLayout();
            }
        }
    }]
});