Mastering Ext JS - Second Edition

Creating the Login screen

Under the app/view directory, we will create a new folder to organize all the source code related to the Login screen named login. Inside the login folder, we will also create a new file named Login.js. In this file, we will implement all the code that the user is going to see on the screen.

Inside view/login/Login.js, we will implement the following code:

Ext.define('Packt.view.login.Login', { // #1
    extend: 'Ext.window.Window',       // #2

    xtype: 'login-dialog',             // #3

    autoShow: true,                    // #4
    height: 170,                       // #5
    width: 360,                        
    layout: {
        type: 'fit'                    // #7
    },
    iconCls: 'fa fa-key fa-lg',        // #8
    title: 'Login',                    // #9
    closeAction: 'hide',               // #10
    closable: false,                   // #11
    draggable: false,                  // #12
    resizable: false                   // #13
});

On the first line ...