Sencha Tap监听器未触发

Question

我有一个带有几个视图的测试应用程序。 我试图在我的按钮上调用一个简单的“ tap”监听器。 即使实例化并启动了控制器，tap事件似乎也不会触发。

这是我的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-控制器

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-视图

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-对于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
            }
        ]
    }
});

任何帮助将不胜感激！

编辑：所以我尝试使用Ext.ComponentQuery.query("#loginSubmitBtn")并在控制台上打印输出时，我可以看到它指向正确的按钮。 这是输出。

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

**编辑3：**找到了！ 在此处查看答案： Sencha Tap监听器未触发

Answer 1

按钮点击的监听器应该只是“轻按”，而不是“ itemtap”

tap: 'loginBtnHandler'

希望能帮助到你-

Answer 2

我想我曾经遇到过这个问题。 尝试使用视图名称来限定控制器中的引用以缩小查询范围：

loginBtn: 'logincard button[action=login]'

Answer 3

不是最好的，但应该可以工作：

首先删除控制器上的Tap监听器。 还要删除按钮上的'action'属性，并在按钮上设置处理程序：

{
    xtype    : 'button',
    id       : 'loginSubmitBtn',
    itemId   : 'loginSubmitItemBtn',
    text     : 'Login',
    ui       : 'action',
    //action   : 'login',
    margin   : 10,
    handler  : function () {
        MyApp.app.getController('Main').loginBtnHandler()
    }
}

Answer 4

好的，这很奇怪，但是我发现了为什么不能正确处理我的buttonclick的原因。 我通常使用Google Chrome浏览器作为启用Web检查器的测试浏览器。 我下载了Safari并尝试了相同的代码，它按预期的方式工作。 我查看了两个浏览器，唯一的区别是Chrome启用了Web检查器，而Safari没有。 我关闭了Chrome中的Web检查器，并且按钮处理程序运行良好（无需重新加载）。 我重新启动浏览器，将检查器推到一个单独的窗口，但没有一个起作用。 但是，即使启用了检查器，Safari仍可正常工作。 可能是Chrome错误？

谷歌浏览器版本：27.0.1453.110

* 编辑：*我在Web检查器中打开了触摸仿真。 启用此功能后，我们必须关闭Web检查器才能注册触摸事件。 否则，我们必须在Web检查器打开时关闭触摸仿真来注册事件。

TL; DR：如果您已启用触摸仿真，请在测试前关闭Chrome中的Web检查器。