Ext.define('Whatever.view.LoginFormPanel', {
    extend: 'Ext.window.Window',
    requires: [
        'Whatever.controller.LoginController'
    ],
    controller: 'loginController',
    closable: false,
    height: 215,
    width: 370,
    layout: {
        type: 'vbox',
        align: 'left'
    },
    bodyBorder: true,
    bodyPadding: '15 10',
    resizable: false,
    title: ' ',
    modal: true,
    cls: 'x-login',

    header: {

        xtype: 'toolbar',
        height: 35,
        items: [
            { xtype: 'image', src: '/cms/extjs/resources/img/ww-logo.png', height: 28, width: 134, margin: '0 5 0 5' },
            { xtype: 'image', src: '/cms/extjs/resources/img/extjs/wwfr_logo.png', height: 28, width: 60 },
            { xtype: 'label', text: 'User Authentication', cls: 'x-login-header-user-auth', flex: 1},
        ]
    },

    initComponent: function() {
        var me = this;

        console.log(me);
        Ext.apply(me, {

            bodyStyle: 'padding: 15 10',

            items: [
                {
                    xtype: 'label',
                    text: 'You are currently not logged in.',
                    width: 340
                },
                {
                    xtype: 'label',
                    text: 'Please enter your Network User ID and Password:',
                    width: 340
                },
                {
                    xtype: 'container',
                    itemId: 'placeholder',
                    flex: 1
                },
                {
                    xtype: 'textfield',
                    reference: 'logonField',
                    fieldLabel: 'User ID',
                    labelWidth: 65,
                    height: 22,
                    width: 305,
                    listeners: {
                        afterrender: function(field){
                            field.focus(false, 500);
                        }
                    }
                },
                {
                    xtype: 'textfield',
                    reference: 'passwordField',
                    inputType: 'password',
                    fieldLabel: 'Password',
                    labelWidth: 65,
                    height: 22,
                    width: 305
                }
            ],
            dockedItems: [
                 {
                    xtype: 'toolbar',
                    flex: 1,
                    dock: 'bottom',
                    height: 50,
                    items: [
                        {
                            xtype: 'button',
                            reference: 'loginButton',
                            handler: 'onLoginButtonClick',
                            text: 'Login',
                            icon: '/cms/extjs/resources/img/green_pipe.png',
                            height: 30,
                            margin: '0 0 0 10'
                        }
                    ]
                }
            ]
        });
        console.log(me);
        me.callParent(arguments);
    },

    focus: Ext.emptyFn

});