Question

我目前正在创建一个以基本启动窗口而不是整个页面的应用程序。我遇到的主要问题是，由于某些原因，我无法像普通应用程序一样启动应用程序。我甚至尝试使用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.
    //-------------------------------------------------------------------------
});

应用程序/ application.js中

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

name: 'Extjs',

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

launch: function () {
}});

应用程序/视图/ 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>'
    }]
}]});

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

提前致谢！

Answer 1

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

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

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

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

}});

其中＆＃39;登录＆＃39;是窗口视图的xtype（在我的例子中是一个登录窗口表单）。确保此窗口具有＆＃34; autoShow：true＆＃34;当你定义它时，否则窗口不会出现。

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

Ext.application({
name: 'MyApp',

extend: 'MyApp.Application'});

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

1 个答案: