I have these files in this folder structure:
-application
--view
---Login.js
---Viewport.js
--app.js
-extjs
-index.html
Login.js
Ext.define('BBP.view.Login', {
extend: 'Ext.window.Window',
alias: 'widget.Login',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 140,
width: 280,
resizable: false,
bodyPadding: 14,
title: 'Login',
url: 'user/login',
items: [
{
xtype: 'textfield',
width: 240,
fieldLabel: 'Username',
name: 'Username'
},
{
xtype: 'textfield',
width: 240,
fieldLabel: 'Password',
name: 'Password'
},
{
xtype: 'button',
margin: '6 0 0 104',
padding: '2 20 2 20',
width: 136,
resizable: false,
text: 'Login'
}
]
}
]
});
}
});
Viewport.js:
Ext.define('BBP.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
items:[{
xtype:'panel',
title:'Brievenbusprofiel',
items:[{
xtype: 'Login'
}]
}],
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'BBP',
appFolder: 'app',
autoCreateViewport: true,
views: [
'Login'
],
launch: function() {}
});
this only shows me the panel and not my login form.
I tried to fix this by adding:
requires:['app.view.Login'],
To my viewport.js code. But then nothing appears on screen.
How can I load my Login view into my viewport?