problem in switching the screens

See more:

third-party

Hi can you please help me in switch a screen. I have two screen 1 and b , but when I click the login button it goes to b screen but i am not able to do that

This is app.js

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    views: [
        'a',
        'b'
            ],
            controller:['AppController'],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.a', {fullscreen: true});
    }

});


this is first view a.js

Ext.define('MyApp.view.a', {
    extend: 'Ext.form.Panel',

    config: {
        items: [
            {
                xtype: 'textfield',
                border: 10,
                height: 37,
                label: 'User Name',
                labelWidth: '40%',
                name: 'user-name',
                maxLength: 20
            },
            {
                xtype: 'passwordfield',
                height: 28,
                margin: 10,
                label: 'Password',
                labelWidth: '40%',
                name: 'password'
            },
            {
                xtype: 'button',
                centered: true,
                height: 40,
                ui: 'action-round',
                width: 120,
                text: 'Login',
                text: 'Login',
                listeners: {
        tap: function() {
            //alert("You tapped me");
        }
    }


            },
            {
                xtype: 'button',
                bottom: 20,
                centered: true,
                height: 42,
                left: 120,
                margin: 10,
                padding: '',
                ui: 'action-round',
                text: 'Register'
            }
        ]
    }

});

second view b.js
Ext.define('MyApp.view.b', {
    extend: 'Ext.form.Panel',

    config: {
        items: [

            {
                xtype: 'passwordfield',
                height: 28,
                margin: 10,
                label: 'Password',
                labelWidth: '40%',
                name: 'password'
            },
            {
                xtype: 'button',
                centered: true,
                height: 40,
                ui: 'action-round',
                width: 120,
                text: 'Login'
            },
            {
                xtype: 'button',
                bottom: 20,
                centered: true,
                height: 42,
                left: 120,
                margin: 10,
                padding: '',
                ui: 'action-round',
                text: 'Register'
            }
        ]
    }

});

what should i change in controller so that it navigate to second screeb on clicking the button login

Ext.define('MyApp.controller.AppController', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            Loginform: 'a',
            Registrationform: 'b'
        },

        control: {
            "Loginform": {
                tap: 'onButtonTap'
            }
        }
    },

    onButtonTap: function(button, e, options) {
        console.log("Hi");
       // this.getMain().setActiveItem(1);

    }

});

[Edit]Code block added[/Edit]