title: Panel not change size after scaling ExtJs
body: <p>Code of my panel:</p>
  
  <pre><code>Ext.define('Admin.view.mypanel.SidePanel', {
      extend: 'Ext.panel.Panel',
      xtype: 'widget.side-panel',
      reference: 'SidePanel',
      controller: 'controller',
      width: '80%',
      height: '100%',
      floating: true, 
      title: 'Test',
      userCls: 'create-panel',
      modal: true,
      renderTo: Ext.getBody(),
      alignTarget: Ext.getBody(),
      hidden: true,
      defaultAlign: 'r-r',
      layout: 'fit',
      autoShow: false,    
      listeners: {
          afterrender: function (panel) {
          Ext.on('resize', function (width, height) {
              panel.setSize('80%','100%');
          });
      }
  }});
  </code></pre>
  
  <p>When I'm start scaling page in browser my panel not change size and lose position r-r <a href="http://joxi.ru/p27BjwVTo6YW4m" rel="nofollow noreferrer">http://joxi.ru/p27BjwVTo6YW4m</a>.
  How can I fix this problem?</p>