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

Question

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

Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
items: [{
xtype: 'titlebar',
title: '<a href="#">Logo</a>',
titleAlign: 'left',
cls: 'im-titlebar',
dock: 'top',
id: 'titlebar',
items: [
{
xtype: 'button',
text: 'Log In',
align: 'right',
ui: 'action',
margin: '',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_LogIn'
}
]
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button',
align: 'right',
ui: 'action',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
requires: ['MyApp.view.MyHeader', 'MyApp.view.MyFooter']
});
Ext.Loader.setConfig({
enabled: false
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.MyView'));
}
});

参见小提琴

Answer 1

您试图需要视图，但应该通过items数组将其添加到父视图中。

Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
xtype: 'myheader',
items: [{
xtype: 'titlebar',
title: '<a href="#">Logo</a>'
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
xtype: 'myfooter',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
xtype: 'myView',
height: 100,
items: [{
xtype: 'myheader'
}, {
xtype: 'myfooter'
}]
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add({
xtype: 'myView'
});
}
});

请记住，经典工具箱没有Ext.Viewport类。

Ext.application({
name : 'MyApp',
launch : function() {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
bodyPadding: 20,
tbar: {
items: [{
xtype: 'label',
text: 'Header'
}]
},
bbar: {
items: [{
xtype: 'label',
text: 'footer'
}]
},
items: [{
xtype: 'form',
title: 'My Form',
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'someField'
}]
}]
});
}
});

Answer 2

您的代码执行您定义的操作。

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

---

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

文档：

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-固定项目https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-收割台https://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]
}));
}
});