Добавление вкладок в приложение Sencha в коде оставляет их отключенными / неактивными

Question

В настоящее время я изучаю фреймворк Sencha и Ext, поэтому, пожалуйста, потерпите меня, если это явная проблема noob.

Если я добавлю конструктор для моей вкладки внутри конструктора приложения, вкладки будут работатьхорошо, и я могу переключаться между панелями.Если я пытаюсь создать панель вкладок отдельно, а затем добавить ее в приложение, компоненты добавляются в DOM, но вкладки, по-видимому, не включены и не работают.

Я не вижу ничего плохого вDOM, использующий инструменты разработчика Chromes и сравнивающий рабочую версию с неработающей версией, они выглядят идентичными мне.

Может кто-нибудь заметить, что я делаю неправильно, или почему следующий код из app.js делаетне работает:

var panelLowerTabs = new Ext.TabPanel({
flex: 1,
xtype: 'tabpanel',
items: [
        {
            title: 'TAB ONE',
            html: 'First',
            cls: 'card1'
        },
        {
            title: 'TAB TWO',
            html: 'Second',
            cls: 'card1'
        }
        ]
});

Ext.application({
    icon: 'images/icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'images/tablet_startup.png',
    phoneStartupScreen: 'images/phone_startup.png',

    requires: [
        'Ext.Container',
        'Ext.tab.Panel'
    ],

launch: function () {
    var container = Ext.create('Ext.Container', {
        fullscreen: true,
        layout: 'vbox',
        items: [{}]
        });

    container.add(panelLowerTabs);
    }
});

Answer 1

Я обнаружил проблему, я пытался создать экземпляр объекта TabPanel до запуска приложения и, следовательно, до того, как 'require' загрузил детали TabPanel.

Изменение порядка кода для создания объекта TabPanel непосредственно перед добавлением его в контейнер решает проблему.

Ext.application({
    icon: 'images/icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'images/tablet_startup.png',
    phoneStartupScreen: 'images/phone_startup.png',

    //next we require any components we are using in our application.
    requires: [
    'Ext.Container',
    'Ext.tab.Panel'
],

    launch: function () {
        var container = Ext.create('Ext.Container', {
        fullscreen: true,
        layout: 'vbox',
        items: [{}]
        });

        var panelLowerTabs = new Ext.TabPanel({
            flex: 1,
            xtype: 'tabpanel',
            items: [
                {
                    title: 'TAB ONE',
                    html: 'First',
                    cls: 'card1'
                },
                {
                    title: 'TAB TWO',
                    html: 'Second',
                    cls: 'card1'
                }
                ]
        });
        container.add(panelLowerTabs);
    }
});