Extjs 6.5+ Adding Components to Container Gives Empty Viewport - extjs

Question

Not sure why I'm getting an empty viewport. I am defining subclasses as components and trying to get the viewport to display the 2 components created. Seems simple enough yet coming up empty?
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
items: [{
xtype: 'titlebar',
title: 'Logo',
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'));
}
});
See fiddle

Answer 1

You're trying to require views, but you should add it to parent view by items array.
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
xtype: 'myheader',
items: [{
xtype: 'titlebar',
title: 'Logo'
}]
});
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'
});
}
});
Remember - classic toolkit does not have Ext.Viewport class.
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

Your code does what you have defined.
You need to add the Header and Footer components as items.
I would suggest that you may try to to use a panel and / or use tbar, bbar or header configs available there.
docs:
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-dockedItems
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-header
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]
}));
}
});