title: Place a modal window in viewport
body: <p>I just started ExtJS, so it might be very trivial what I ask here. I just completed the <a href="http://docs.sencha.com/architect/2/#!/guide/first_desktop_app" rel="nofollow">cars tutorial</a> from the Sencha website and am now trying to create something. I have added a <code>Viewport</code>  as initial view, and in there I placed a <code>Panel</code> that holds all my widgets:</p>
  
  <pre><code>Ext.define('MyApp.view.MyViewport', {
      extend: 'Ext.container.Viewport',
  
      layout: {
          type: 'fit'
      },
      ...
  });
  </code></pre>
  
  <p>I also created a <code>Window</code> that can be opened by clicking a button:</p>
  
  <pre><code>Ext.define('MyApp.view.MyWindow', {
      extend: 'Ext.window.Window',
  
      height: 185,
      renderTo: 'MyApp.view.MyViewport',
      width: 334,
      layout: {
          type: 'absolute'
      },
      title: 'My Window',
  
      initComponent: function() {
        ...
      }
  });
  </code></pre>
  
  <p>And the onclick handler is like this:</p>
  
  <pre><code>var wind = new MyApp.view.MyWindow();
  wind.modal = true;
  wind.show();
  </code></pre>
  
  <p>The problem is, when I open the window, it is rendered inside the <code>Viewport</code>, under all panels, instead of floating in the browser's viewport. How do I fix that?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I created a new <code>Window</code> using the Sencha Architect and open that in the same way. It works as expected. When looking at the separate <code>.js</code> files of <code>MyWindow</code> and <code>MyWindow1</code>, I see no real difference though.</p>
  
  <p>MyWindow: <a href="http://pastebin.com/yE9V1twc" rel="nofollow">http://pastebin.com/yE9V1twc</a></p>
  
  <p>MyWindow1: <a href="http://pastebin.com/ZznUVZni" rel="nofollow">http://pastebin.com/ZznUVZni</a></p>