Can't tap button in Sencha

Question

I'm developing a mobile app using Sencha Touch. The problem is my button not switch to new view after I tap it.

My code:

view/LoginUsername.js

Ext.define('RibMobile.view.LoginUsername', {
    extend: 'Ext.form.Panel',
    xtype: 'loginusernamepage',
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label',
        'Ext.Img'
    ],
    config: {
        title: 'Login',
        items: [{
            /* ? */
        }, {
            xtype: 'button',
            itemId: 'nextButton',
            ui: 'action',
            padding: '10px',
            text: 'Next'
        }, {
            /* ? */
        }]
    }
});

controller/Login.js

Ext.define('RibMobile.controller.Login', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {},
        control: {
            nextButton: {
                // On the tap event, call onNewTap
                tap: 'onPasswordTap'
            }
        }
    },
    //called when the Application is launched, remove if not needed
    launch: function(app) {},
    onPasswordTap: function() {
        // When the user taps on the button, create a new reference of our New view, and set it as the active
        // item of Ext.Viewport
        Ext.Viewport.setActiveItem(Ext.create('RibMobile.view.LoginPassword'));
    }
});

app.js

Ext.application({
    name: 'RibMobile',

    requires: [
        'Ext.MessageBox'
    ],

    controllers: [ 'Main', 'Login' ],

    views: [
        'Contact',
        'Locate',
        'LoginUsername',
        'LoginPassword',
        'Main',
        'Promotion'
    ],
    /* ? */

How can I trigger the button?

Answer 1

You miss the mapping between your button and its control.

Add a reference to it and it should work:

refs: {
    nextButton: 'button[itemId=nextButton]'
}