How to define a form within a window?

[ragecf]

Dear all, I'm trying upgrade my code from Ext3 to Ext4.
But I can't organise the code pretty and clearly.

For example, I want to upgrade my login window.
In Ext3:

winLoginForm = function(){
    //define form buttons
    var buttons = [
        {text:'Login', handler:this.onLogin, scope:this},
        {text:'Reset', handler:this.onReset, scope:this}
    ];

    //define hot key - enter
    var key = {key:13, handler:this.onLogin, scope:this};

    //define login form
    this.form = new Ext.FormPanel({
        id:'login-form',
        title:'Login',
        
        ..........

        items:[
            {  
                fieldLabel:'Employee No',
                name:'username',
                xtype:'textfield',
                allowBlank:false
            }, {
                fieldLabel:'Password',
                name:'password',
                xtype:'textfield',
                inputType:'password',
                allowBlank:false
            }
        ],
        buttons:buttons,
        keys:key
     });

      winLoginForm.superclass.constructor.call(this, {
        id:'login-win',
        width:280,
        
        .........

        items:this.form,
        listeners:{
            show:this.onReset
        }        //how to write this listeners in Ext4?             
    });
};

Ext.extend(winLoginForm, Ext.Window, {
    onLogin: function(){
            ..............
            //handle login here
    },
    onReset: function(){
            .............
           //Clear user name and password textfield here
    }
});

I tried the code in Ext4, but not satisfied.

Ext.define('MyApp.view.loginWin', {
    extend: 'Ext.window.Window',
   
    id: 'login-win',
    
    ......
   
    initComponent: function() {
        //define form hot keys - Enter & Esc
        var keys = {
            keypress: function(t, e) {
                if(e.getKey() === 13) {
                    this.onLogin();
                }else if(e.getKey() === 27) {
                    this.onReset();
                }
            },
            scope: this
        }
       
        //define login form
        var loginForm = Ext.create('Ext.form.Panel', {
            id: 'login-form',
            title: 'Login',
            
            ..................

            items: [
                {  
                    fieldLabel: 'Employee No',
                    name: 'username',
                    xtype: 'textfield',
                    allowBlank: false,
                    enableKeyEvents: true,
                    listeners: keys
                }, {
                    fieldLabel: 'Password',
                    name: 'password',
                    xtype: 'textfield',
                    inputType: 'password',
                    allowBlank: false,
                    enableKeyEvents: true,
                    listeners: keys
                }
            ],
            buttons: [
               {text: 'Login', handler: this.onLogin, scope: this},
                {text: 'Reset', handler: this.onReset, scope: this}   
            ]
        });
   
        this.items = loginForm;
 
        this.callParent();
    },

    onLogin: function() {
        Ext.Msg.alert('tt', 'ttt');
    },
    onReset: function() {
        Ext.Msg.alert('xx', 'xxx');
    }
}

Now I don't know how to write the listeners to call the onReset function when winLogin show().

Did I wrote this Ext.define professionally? Show me the example or improvement, thanks a lot.

[mitchellsimoens]

That's fine how you did it.