Extjs 6.5+向容器中添加组件会产生空的视口

Question

不确定我为什么要得到一个空的视口。我将子类定义为组件，并尝试获取视口以显示创建的2个组件。看起来很简单，却空无一物？

See fiddle

Answer 1

您的代码执行了您定义的内容。

您的myView没有任何要显示的项目。我刚刚添加了html属性，以显示一些简单的文本。

您需要将页眉和页脚组件添加为项目。

---

我建议您尝试使用面板和/或使用那里可用的tbar，bbar或标头配置。

docs：

https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.htmlhttps://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-dockedItemshttps://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-headerhttps://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-bbar

---

Ext.application({
    name: 'MyApp',
    launch: function () {
        var f = Ext.create('MyApp.view.MyHeader', {
            flex: 1
        });
        var h = Ext.create('MyApp.view.MyFooter', {
            flex: 1
        });
        Ext.Viewport.add(Ext.create('MyApp.view.MyView', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [h, f]
        }));
    }
});