title: Ext JS 5 || Creating an application in a window
body: <p>Im currently creating an application that has as base start a window instead of a whole page. The main problem i'm running into is that for some reason i can't get my application to launch just like a normal application would.
  I've even tried creating a whole new project using the Sencha cmd to generate a clean application for me and replace the initial container that is used in the view with the default extjs window, but even then it wont work. I was hoping that someone knows if this is even possible, and if so, how?
  Here is some code examples to show what i'm trying to do:</p>
  
  <p>App.js</p>
  
  <pre><code>Ext.application({
      name: 'Extjs',
  
      extend: 'Extjs.Application',
  
      autoCreateViewport: 'Extjs.view.main.Main'
  
      //-------------------------------------------------------------------------
      // Most customizations should be made to Extjs.Application. If you need to
      // customize this file, doing so below this section reduces the likelihood
      // of merge conflicts when upgrading to new versions of Sencha Cmd.
      //-------------------------------------------------------------------------
  });
  </code></pre>
  
  <p>app/Application.js</p>
  
  <pre><code>Ext.define('Extjs.Application', {
  extend: 'Ext.app.Application',
  
  name: 'Extjs',
  
  stores: [
      // TODO: add global / shared stores here
  ],
  
  launch: function () {
  }});
  </code></pre>
  
  <p>app/view/Main.js</p>
  
  <pre><code>Ext.define('Extjs.view.main.Main', {
  extend: 'Ext.window.Window',
  requires: [
      'Extjs.view.main.MainController',
      'Extjs.view.main.MainModel'
  ],
  
  xtype: 'app-main',
  
  autoShow: true, //needs to be set for the window to show
  
  
  controller: 'main',
  viewModel: {
      type: 'main'
  }
  
  items: [{
      xtype: 'panel',
      bind: {
          title: '{name}'
      },
      region: 'west',
      html: '&lt;ul&gt;&lt;li&gt;This area is commonly used for navigation, for example, using a "tree" component.&lt;/li&gt;&lt;/ul&gt;',
      width: 250,
      split: true,
      tbar: [{
          text: 'Button',
          handler: 'onClickButton'
      }]
  },{
      region: 'center',
      xtype: 'tabpanel',
      items:[{
          title: 'Tab 1',
          html: '&lt;h2&gt;Content appropriate for the current navigation.&lt;/h2&gt;'
      }]
  }]});
  </code></pre>
  
  <p>The main problem is that the window shows, but when trying to drag it, it disappears..</p>
  
  <p>Thanks in advance!</p>