Sencha touch 2 点击事件不在视图中工作

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

 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');
                }
            }
        }
    }
});

---

没有输出到控制台…

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

如果您使用Sencha Touch 2的版本，它会在控制台中向您发出如下警告：

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');
                }
            }
        }
    }
});

因此，您的代码应该如下所示：

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');
                }
            }
        }
    }
});

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

更新

如果要委托给项的子项，则仍必须以

元素

为目标，然后在函数中检查点击的元素是否为所需的元素：

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!');
                }
            }
        }
    }
});

var component=Ext.Viewport.add({
宽度：300，
身高：300，
样式：“背景：红色”，
html:“点击我这将发出警报”，
听众：{
点击：{
元素：'元素'，
fn：功能（e）{
var元素=Ext.get（e.target）；
如果（element.id==“测试”）{
警惕（“轻敲！”）；
}
}
}
}
});

您使用的是添加元素侦听器的旧版本

如果您使用Sencha Touch 2的版本，它会在控制台中向您发出如下警告：

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');
                }
            }
        }
    }
});

因此，您的代码应该如下所示：

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');
                }
            }
        }
    }
});

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

更新

如果要委托给项的子项，则仍必须以

元素

为目标，然后在函数中检查点击的元素是否为所需的元素：

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!');
                }
            }
        }
    }
});

var component=Ext.Viewport.add({
宽度：300，
身高：300，
样式：“背景：红色”，
html:“点击我这将发出警报”，
听众：{
点击：{
元素：'元素'，
fn：功能（e）{
var元素=Ext.get（e.target）；
如果（element.id==“测试”）{
警惕（“轻敲！”）；
}
}
}
}
});

如果要按类或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!');
        }
    }
}
});

var component=Ext.Viewport.add({
宽度：300，
身高：300，
样式：“背景：红色”，
html:“点击我这将发出警报”，
听众：{
点击：{
元素：'元素'，
代表：“#测试”，
fn：功能（e）{
警报（'id为“test”的元素被点击！'）；
}
}
}
});

如果要按类或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!');
        }
    }
}
});

var component=Ext.Viewport.add({
宽度：300，
身高：300，
样式：“背景：红色”，
html:“点击我这将发出警报”，
听众：{
点击：{
元素：'元素'，
代表：“#测试”，
fn：功能（e）{
警报（'id为“test”的元素被点击！'）；
}
}
}
});

Ext.define（'app.view.Card'{
配置：{
布局：“卡片”，
项目：[{
xtype:'面板'，
停靠：“顶部”，
html:“”，
听众：{
touchstart：{
元素：'元素'，
fn：函数（）{
console.log（'tapped'）
}
}
}
}]
},
初始化：函数（）{
//如果在控制器中记录/处理事件。
this.relayEvents（this.element，['tap']）；
}
});

Ext.define（'app.view.Card'{
配置：{
布局：“卡片”，
项目：[{
xtype:'面板'，
停靠：“顶部”，
html:“”，
听众：{
touchstart：{
元素：'元素'，
fn：函数（）{
console.log（'tapped'）
}
}
}
}]
},
初始化：函数（）{
//如果在控制器中记录/处理事件。
this.relayEvents（this.element，['tap']）；
}
});

获得可攻丝面板的更简单、更清洁的方法

 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');
    }
});

---

获得可攻丝面板的更简单、更清洁的方法

 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');
    }
});

---

我尝试了元素：“#mydiv”，但它仍然不起作用。其中，mydiv是此文件中某个元素的idview@coure2011我已经更新了我的示例，向您展示了如何做到这一点。请查看touch examples目录中的jog with friends应用程序，您的侦听器需要在控制器中定义，您可以在该示例中看到它是如何实现的。appI已尝试元素：“#mydiv”，但它仍然不起作用。其中，mydiv是此文件中某个元素的idview@coure2011我已经更新了我的示例，向您展示了如何做到这一点。请查看touch examples目录中的jog with friends应用程序，您的监听器需要在控制器中定义，您可以在该示例应用程序中看到如何做到这一点