javascript - Sencha Tap 监听器未触发

Question

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

这是我的 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 -- 对于 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'

希望有帮助-