Javascript Sencha Tap侦听器未启动
我有一个带有几个视图的测试应用程序。我试图在我的按钮上调用一个简单的“点击”侦听器。即使控制器已实例化并启动，tap事件似乎也不会触发 这是我的app.jsJavascript Sencha Tap侦听器未启动,javascript,button,extjs,sencha-touch-2,Javascript,Button,Extjs,Sencha Touch 2,我有一个带有几个视图的测试应用程序。我试图在我的按钮上调用一个简单的“点击”侦听器。即使控制器已实例化并启动，tap事件似乎也不会触发 这是我的app.js Ext.application({ name: 'MyApp', requires: [ 'Ext.MessageBox', 'Ext.form.FormPanel', 'Ext.navigation.View' ], views: [ 'M
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'));
}
}
});
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');
}
});
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（“#loginsubmittn”）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:*找到了！请参见此处的答案：按钮点击的侦听器应该是“点击”而不是“项目点击”
tap: 'loginBtnHandler'
希望有帮助-按钮点击的侦听器应该是“点击”而不是“项目点击”
tap: 'loginBtnHandler'
希望能有帮助-我想我以前也有过这个问题。尝试使用视图名称限定控制器中的ref，以缩小查询范围：
loginBtn: 'logincard button[action=login]'
我想我以前也有过这个问题。尝试使用视图名称限定控制器中的ref，以缩小查询范围：
loginBtn: 'logincard button[action=login]'
不是最好的，但应该有效： 首先移除控制器上的点击侦听器。还要删除按钮上的“action”属性，并设置按钮上的处理程序：
{
xtype : 'button',
id : 'loginSubmitBtn',
itemId : 'loginSubmitItemBtn',
text : 'Login',
ui : 'action',
//action : 'login',
margin : 10,
handler : function () {
MyApp.app.getController('Main').loginBtnHandler()
}
}
不是最好的，但应该有效： 首先移除控制器上的点击侦听器。还要删除按钮上的“action”属性，并设置按钮上的处理程序：
{
xtype : 'button',
id : 'loginSubmitBtn',
itemId : 'loginSubmitItemBtn',
text : 'Login',
ui : 'action',
//action : 'login',
margin : 10,
handler : function () {
MyApp.app.getController('Main').loginBtnHandler()
}
}
好吧，这很奇怪，但我发现了为什么我的按钮没有被正确处理。我通常使用GoogleChrome作为我的测试浏览器，上面有web inspector。我下载了Safari并尝试了相同的代码，它的工作原理与预期的一样。我查看了这两种浏览器，唯一的区别是Chrome上有web inspector，而Safari没有。我在Chrome中关闭了web检查器，按钮处理程序工作得很好（无需重新加载）。我重新启动了浏览器，将检查器推到一个单独的窗口，但没有一个正常工作。然而，Safari即使与inspector一起工作也很好。可能是个Chrome bug 谷歌浏览器版本：27.0.1453.110 *编辑：*我在web inspector中打开了触摸模拟。启用此选项后，我们必须关闭web inspector以注册触摸事件。否则，我们必须在web检查器打开时关闭触摸模拟以注册事件
TL；DR：如果您已打开触摸模拟功能，请在测试前关闭Chrome中的web inspector。好的，这很奇怪，但我发现了我的按钮点击操作不正确的原因。我通常使用GoogleChrome作为我的测试浏览器，上面有web inspector。我下载了Safari并尝试了相同的代码，它的工作原理与预期的一样。我查看了这两种浏览器，唯一的区别是Chrome上有web inspector，而Safari没有。我在Chrome中关闭了web检查器，按钮处理程序工作得很好（无需重新加载）。我重新启动了浏览器，将检查器推到一个单独的窗口，但没有一个正常工作。然而，Safari即使与inspector一起工作也很好。可能是个Chrome bug 谷歌浏览器版本：27.0.1453.110 *编辑：*我在web inspector中打开了触摸模拟。启用此选项后，我们必须关闭web inspector以注册触摸事件。否则，我们必须在web检查器打开时关闭触摸模拟以注册事件
TL；DR：如果您已打开触摸仿真，请在测试前关闭Chrome中的web检查器。我的坏消息。一开始是“轻拍”。我已经编辑了我的问题。好的，您确定ref选择器找到了正确的项目吗？loginBtn:'按钮[action=login]'。我会使用itemId方法，只是为了确保。只需将：loginBtn:“button[action=login]”替换为ie:loginBtn:“logincard#loginsubmitembtn”我试过了，实际上没有用。然后我尝试了action=login的方式，但也不起作用。不幸的是，他们都没有抛出任何异常或警告，否则我可以给你更多的信息。。你用身份证试过了吗？”loginSubmitBtn'，这应该对我的工作不利。一开始是“轻拍”。我已经编辑了我的问题。好的，您确定ref选择器找到了正确的项目吗？loginBtn:'按钮[action=login]'。我会使用itemId方法，只是为了确保。只需将：loginBtn:“button[action=login]”替换为ie:loginBtn:“logincard#loginsubmitembtn”我试过了，实际上没有用。然后我尝试了action=login的方式，但也不起作用。不幸的是，他们都没有抛出任何异常或警告，否则我可以给你更多的信息。。你用身份证试过了吗？”loginSubmitBtn'，应能正常工作控制台中无错误？控制台中无错误？也尝试了此操作。。。不幸的是，这也不起作用。是否有一个调试过程，我可以通过它来缩小问题的范围？（对不起，我对Sencha Touch很陌生）在这里查看我的答案：看起来这根本不是代码问题。也尝试过这个。。。不幸的是，这也不起作用。是否有一个调试过程，我可以通过它来缩小问题的范围？（对不起，我对Sencha Touch很陌生）在这里查看我的答案：看起来这毕竟不是代码问题。但这将打破MVC范式，我不想这样做。谢谢你的建议！我删除了代码中的：action:'login'，并且它可以工作请查看我的回答：删除action:'login'仍然无法与上的检查器一起工作。但是这将打破MVC范式，我不想这样做。谢谢你的建议！我删除了代码中的：action:'login'，并且它可以工作。请在此处查看我的答案：删除action:'login'仍然无法与上的检查器一起工作。