title: Extjs: two panel resize accordingly when window resizes
body: <p>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.</p>
  
  <p>thanks!</p>
  
  <p>my codes are as follows:</p>
  
  <pre><code>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]
      }]
  });
  </code></pre>
  
  <p>how to modify above codes to make it work as what I want?</p>
  
  <p>thanks again!</p>