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

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

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

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

在此先感谢！

来源

2014-09-30 Nick

找到问题所在。一个窗口不能作为一个视口发起，因此我建议我做的是创建另一个视图，这将是窗口。然后设置主视图视像这样：

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

}});

其中“登录”是窗口视图的的xtype（在我的情况下，登录窗口的形式）。确定此窗口在定义它时有“autoShow：true”，否则窗口不会显示。

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

Ext.application({ 
name: 'MyApp', 

extend: 'MyApp.Application'});

来源

2014-10-01 09:10:23 Nick

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

回答

相关问题