title: Re-size panel component to fit screen size
body: <p>I have added a <code>Panel</code> (i call it <code>My Panel 1</code>), and another <code>panel</code> within this <code>panel</code> (I call it <code>My Panel 2</code>), and then added a grid into the 2nd panel (to <code>My Panel 2</code>). When i click on the <code>Restore Down</code> or the <code>re-sizing</code> button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('MyApp.view.MyPanel', {
      extend: 'Ext.panel.Panel',
  
      height: 469,
      width: 729,
      title: 'My Panel 1',
  
      initComponent: function () {
          var me = this;
  
          Ext.applyIf(me, {
              items: [{
                  xtype: 'panel',
                  height: 238,
                  title: 'My Panel 2',
                  items: [{
                      xtype: 'gridpanel',
                      height: 179,
                      title: 'My Grid Panel 1',
                      columns: [{
                          xtype: 'gridcolumn',
                          dataIndex: 'string',
                          text: 'String'
                      }, {
                          xtype: 'numbercolumn',
                          dataIndex: 'number',
                          text: 'Number'
                      }, {
                          xtype: 'datecolumn',
                          dataIndex: 'date',
                          text: 'Date'
                      }, {
                          xtype: 'booleancolumn',
                          dataIndex: 'bool',
                          text: 'Boolean'
                      }],
                      viewConfig: {
  
                      }
                  }]
              }]
          });
  
          me.callParent(arguments);
      }
  
  });
  </code></pre>