Javascript Ext JS 5 | |在窗口中创建应用程序

我正在创建一个应用程序，它以一个窗口而不是整个页面为基础。我遇到的主要问题是，由于某种原因，我无法让我的应用程序像普通应用程序一样启动。 我甚至尝试使用Sencha cmd创建一个全新的项目，为我生成一个干净的应用程序，并用默认的extjs窗口替换视图中使用的初始容器，但即使这样，它也无法工作。我希望有人知道这是否可能，如果可能，怎么可能？ 下面是一些代码示例，以说明我正在尝试执行的操作：

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>'
    }]
}]});

主要问题是窗口会显示，但当尝试拖动它时，它会消失

---

提前谢谢

找到了问题所在。窗口不能作为视口启动，因此我的建议是创建另一个视图，即窗口。然后将主视图设置为视口，如下所示：

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

您可以看到，此视图只是一个空容器，没有附加控制器或viewmodels。但是，应用程序需要一个视口

在application.js中，我们将确保窗口的加载方式如下：

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');

}});

其中“login”是窗口视图的X类型，在我的例子中是登录窗口窗体。请确保此窗口在定义时具有autoShow:true，否则该窗口将不会显示

最后，我们通过注释这一行来确保不使用autocreateviewport。app.js现在看起来像这样：

Ext.application({
name: 'MyApp',

extend: 'MyApp.Application'});