How do I require a login view in ExtJS 4

Question

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?

Answer 1

1.The correct way of adding login file to viewport is requires: ['Bpp.view.Login'] not requires: ['app.view.Login'].

2.Required to add me.callParent() method to login also

3.In viewport before CallParent method need to add Ext.create('Bpp.view.Login').show() method.

Answer 2

add one config in your Login.js like below.

 xtype: 'Login'

it will work for you.