Sencha Tap监听器不触发

Question

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

这是我的 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 listener not firing

Answer 1

按钮点击的监听器应该只是 'tap' 而不是 'itemtap'

tap: 'loginBtnHandler'

希望对你有帮助-

Answer 2

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

loginBtn: 'logincard button[action=login]'

Answer 3

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

首先移除控制器上的点击监听器。同时删除按钮上的'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 没有得到正确处理。我通常使用谷歌浏览器作为我的测试浏览器，打开网络检查器。我下载了 Safari 并尝试了相同的代码，它按预期工作。我查看了这两种浏览器，唯一的区别是 Chrome 打开了网络检查器，而 Safari 没有。我在 Chrome 中关闭了 Web 检查器，并且按钮处理程序运行良好（无需重新加载）。我重新启动浏览器，将检查器推到一个单独的窗口，它们都不起作用。然而，即使在检查器打开的情况下，Safari 也能很好地工作。可能是 Chrome 错误？

谷歌浏览器版本：27.0.1453.110

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

TL;DR：如果您打开了触摸模拟，请在测试前关闭 Chrome 中的网络检查器。