Расширение 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.
    //-------------------------------------------------------------------------
});

приложение/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>'
    }]
}]});

Основная проблема в том, что окно отображается, но при попытке его перетащить оно исчезает.

Заранее спасибо!


javascript extjs extjs5
person Nick    schedule 30.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нашел в чем проблема. Окно не может быть инициировано как окно просмотра, поэтому мой совет сделать то, что я сделал, — создать другое представление, которое будет окном. Затем установите основной вид в качестве области просмотра следующим образом:

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

}});

где «логин» - это xtype вида окна (в моем случае форма окна входа). убедитесь, что это окно имеет «autoShow: true», когда вы его определяете, иначе окно не появится.

Наконец, мы убеждаемся, что не используем autocreateviewport, комментируя эту строку. app.js теперь будет выглядеть так:

Ext.application({
name: 'MyApp',

extend: 'MyApp.Application'});
person Nick    schedule 01.10.2014