Extjs: when resizing a window when resizing a window

for your main container, I suggest hbox and / or vbox layouts. these layouts are what you are looking for. here is 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
                }
            ]
        },
    ]
} );

, 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
            ]
        }
    ]
});