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 - 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 - 对于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

按钮点击的监听器应该只是“点击”而不是“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没有被正确处理。我通常使用谷歌浏览器作为我的测试浏览器和web检查器。我下载了Safari并尝试了相同的代码，它就像它应该的那样工作。我查看了两个浏览器，唯一的区别是Chrome有Web检查器，而Safari没有。我在Chrome中关闭了Web检查器，按钮处理程序运行良好（无需重新加载）。我重新启动浏览器，将检查员推到一个单独的窗口，没有一个工作。然而，即使有检查员，Safari也能很好地工作。可能是Chrome漏洞？

Google Chrome版本：27.0.1453.110

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

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

Sencha Tap听众没有开火

4 个答案: