Ext JS 5 || Creating an application in a window

Question

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:

App.js

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.
    //-------------------------------------------------------------------------
});

app/Application.js

Ext.define('Extjs.Application', {
extend: 'Ext.app.Application',

name: 'Extjs',

stores: [
    // TODO: add global / shared stores here
],

launch: function () {
}});

app/view/Main.js

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: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
    width: 250,
    split: true,
    tbar: [{
        text: 'Button',
        handler: 'onClickButton'
    }]
},{
    region: 'center',
    xtype: 'tabpanel',
    items:[{
        title: 'Tab 1',
        html: '<h2>Content appropriate for the current navigation.</h2>'
    }]
}]});

The main problem is that the window shows, but when trying to drag it, it disappears..

Thanks in advance!

Answer 1

Found what the problem was. A window cannot be initiated as a viewport, therefor my advice to do what i did was create another view, which will be the window. Then set the main view as viewport like so:

Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
plugins: 'viewport',
xtype: 'app-main'});

you can see that this view is only an empty container with no controllers or viewmodels attached. However, the application NEEDS a viewport.

In the application.js we will make sure that our window will be loaded like so:

Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',

name: 'MyApp',

stores: [
    // TODO: add global / shared stores here
],
views: [
    'MyApp.view.login.Login',
    'MyApp.view.main.Main'
],
launch: function () {

    Ext.widget('login');

}});

where 'login' is the xtype of the window view (in my case a login window form). make sure this window has "autoShow: true" when you define it, else the window wont show up.

Finally we make sure we do not use the autocreateviewport by commenting this line. the app.js will look like this now:

Ext.application({
name: 'MyApp',

extend: 'MyApp.Application'});