Sencha Tap listener not firing

Question

I have a test application with a couple of views. I am trying to invoke a simple 'tap' listener on my buttons. Even though the controller is instantiated and launched, the tap event does not seem to fire.

Here's my app.js

Ext.application({
    name: 'MyApp',

    requires: [
        'Ext.MessageBox',
        'Ext.form.FormPanel',
        'Ext.navigation.View'
    ],

    views: [
        'Main',
        'Tasks'
    ],

    controllers: [
        'Main'
    ],

    models: [
        'Task',
        'Schedule'
    ],

    stores: [
        'Tasks',
        'Schedules'
    ],

    launch: function() {
        // Destroy the #appLoadingIndicator element
        try{
            Ext.fly('appLoadingIndicator').destroy();
        }catch(err){
            console.warn("[CUSTOMWARN]Could not destroy loading indicator because of -- \n"+err);
        }

        var DEBUG=false;
        if(!DEBUG){
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Main'));
        }
    }
});

Main.js -- controller

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    requires: [
        'MyApp.view.Main'
    ],
    init: function(){
        // download and parse data from server here.
        console.log('controller initiated!');
    },
    config: {
        refs: {
            loginBtn: 'button[action=login]'
        },
        control: {
            loginBtn: {
                tap: 'loginBtnHandler'
            }
        }
    },
    loginBtnHandler: function(){
        this.callParent(arguments); 
        Ext.Msg.alert('here');
    }
});

Main.js -- view

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',
    alias: 'customnavigationview',
    requires: [
        'MyApp.form.Login'
    ],
    config: {
        navigationBar: {
            hidden: true
        },
        items: [
            {
                xtype: 'logincard',
                flex: 1
            }
        ],        
    }
});

Login.js -- for xtype: 'logincard'

Ext.define('MyApp.form.Login', {
    extend: 'Ext.form.Panel',
    xtype: 'logincard',
    requires: [
        'Ext.field.Password',
        'Ext.field.Email',
        'Ext.form.FieldSet',
        'Ext.field.Toggle',
        'Ext.Label'
    ],
    // id: 'loginForm',
    config: {
        items: [
            {

                xtype         : 'label',
                html          : 'Login failed. Please enter correct credentials.',
                itemId        : 'signInFailedLabel',
                hidden        : true,
                hideAnimation : 'fadeOut',
                showAnimation : 'fadeIn',
                style         : 'color:#990000;',
                margin        : 10
            },
            {
                title: 'Please log in',
                xtype: 'fieldset',
                items:[
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'UserName'
                    },
                    {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                items: [
                    {                
                        xtype : 'togglefield',
                        name  : 'rememberLogin',
                        label : 'Remember Me '
                    }
                ]
            },
            {
                xtype    : 'button',
                id       : 'loginSubmitBtn',
                itemId   : 'loginSubmitItemBtn',
                text     : 'Login',
                ui       : 'action',
                action   : 'login',
                margin   : 10
            }
        ]
    }
});

Any help would be highly appreciated!

EDIT: So I tried to use Ext.ComponentQuery.query("#loginSubmitBtn") and on printing the output on console, I can see that it is pointing to the correct button. Here's the output.

0: Class
_badgeCls: "x-badge"
_baseCls: "x-button"
_disabledCls: "x-item-disabled"
_floatingCls: "x-floating"
_hasBadgeCls: "x-hasbadge"
_hiddenCls: "x-item-hidden"
_icon: false
_iconAlign: "left"
_itemId: "loginSubmitItemBtn"
_labelCls: "x-button-label"
_margin: 10
_pressedCls: "x-button-pressing"
_pressedDelay: 0
_styleHtmlCls: "x-html"
_text: "Login"
_ui: "action"
action: "login"
badgeElement: Class
bodyElement: Class
config: objectClass
currentUi: "x-button-action"
element: Class
eventDispatcher: Class
getEventDispatcher: function () {
getId: function () {
getObservableId: function () {
getUniqueId: function () {
iconElement: Class
id: "loginSubmitBtn"
initConfig: function (){}
initialConfig: Object
initialized: true
innerElement: Class
managedListeners: Object
observableId: "#loginSubmitBtn"
onInitializedListeners: Array[0]
parent: Class
referenceList: Array[4]
refreshFloating: function () {
refreshSizeState: function () {
renderElement: Class
rendered: true
textElement: Class
usedSelectors: Array[1]
__proto__: Object
length: 1

**EDIT 3: ** Found it! See answer here: Sencha Tap listener not firing

Answer 1

Ok, this is weird, but I found out why my buttonclick was not being handled properly. I usually use Google Chrome as my testing browser with web inspector on. I downloaded Safari and tried the same code and it worked like its supposed to. I looked at both the browsers, and the only difference was that Chrome had web inspector on, while Safari didn't. I closed the web inspector in Chrome and the button handler worked great (without reloading). I restarted the browser, pushed the inspector to a separate window, none of them worked. However, Safari works great even with inspector on. Probably a Chrome bug?

Google Chrome version: 27.0.1453.110

*EDIT: * I had the touch emulation turned on in the web inspector. With this turned on, we have to close the web inspector for the touch event to register. Otherwise, we have to turn off the touch emulation to register for the events while the web inspector is open.

TL;DR: Close your web inspector in Chrome before testing, if you have touch emulation turned on.