Question

请检查下面的代码，我做错了什么？我想在主体点击事件时输出到控制台。

 Ext.define('iApp.view.LoginView', {
    extend: 'Ext.Panel',
    xtype: 'loginViewPanel',

    config: {
        style: "background-color: #3f3f3f;",
        html: 'hello world',
        listeners: {
            el: {
                tap: function() {
                    console.log('tapped');
                }
            }
        }
    }
});

没有输出到控制台...

Answer 1

您正在使用添加元素侦听器的旧版本。

如果你使用Sencha Touch 2的compat版本，它会在控制台中给你一个警告：

console warning

所以你的代码应该是这样的：

Ext.define('iApp.view.LoginView', {
    extend: 'Ext.Panel',
    xtype: 'loginViewPanel',

    config: {
        style: "background-color: #3f3f3f;",
        html: 'hello world',
        listeners: {
            tap: {
                element: 'element',
                fn: function() {
                    console.log('tapped');
                }
            }
        }
    }
});

您可以在Sencha Forums上找到有关更改的更多信息。

<强>更新

如果您想委托给该项目的子项，您仍然必须定位element，然后在您的函数中检查被点击的元素是否是您想要的元素：

var component = Ext.Viewport.add({
    width: 300,
    height: 300,
    style: 'background: red',
    html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
    listeners: {
        tap: {
            element: 'element',
            fn: function(e) {
                var element = Ext.get(e.target);
                if (element.id == "test") {
                    alert('tap!');
                }
            }
        }
    }
});

Answer 2

如果您想按类或ID选择元素，使用委托选项会更清晰：

var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
    tap: {
        element: 'element',
        delegate: '#test',
        fn: function(e) {
            alert('Element with id "test" was tapped!');
        }
    }
}
});

Answer 3

Ext.define('app.view.Card', {
config : {
    layout : 'card',
    items : [{
        xtype : 'panel',
        docked : 'top',
        html : "<img width='320px'  id='image1' src='images/im.jpg'/>",

        listeners : {
            touchstart : {
                element : 'element',
                fn : function() {
                    console.log('tapped')

                }
            }
        }
    }]
},
initialize : function() {
    // if recording/handling the event in the controller.
    this.relayEvents(this.element, ['tap']);
}
});

Answer 4

获取Tappable Panels的更简单，更简洁的方法

 Ext.define('My.component.TappablePanel', {
    extend: 'Ext.Panel',
    initialize: function () {
        this.element.on('tap', function(){
            this.tap();
        }, this);
    },
    tap: function() {
        console.log('I heard the tap!');
    }
});

它可以在子类中重写，如此......

Ext.define('My.view.TestPanel', {
    extend: 'My.component.TappablePanel',
    config: {
        html: 'Tap this panel',
        style: 'background-color: #5E99CC'
    },
    tap: function() {
        console.log('I handled the tap');
    }
});

点击事件在视野中不起作用

4 个答案: