點擊事件不在視圖

請檢查下面的代碼，我做錯了什麼？當我點擊身體上的事件時，我想輸出到控制檯。點擊事件不在視圖

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

沒有輸出到控制檯...

來源

2012-02-13 coure2011

您使用的是舊版本，添加元素偵聽。

如果使用compat版FO煎茶觸摸2，它應該給你在控制檯這樣的警告：

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

來源

2012-02-13 17:54:28 rdougan

我已經試過元素：「#mydiv」但它仍然沒有工作。 mydiv是這個視圖中元素的ID – coure2011 2012-02-14 15:22:34

@ coure2011我已更新我的示例以顯示如何做到這一點。 – rdougan 2012-02-14 18:46:19

查看觸控示例目錄中的jog-with-friends應用程序，您的偵聽器需要在控制器內部定義，您可以在該示例應用程序中看到它是如何完成的 – 2012-02-16 01:25:49

如果你想通過class和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!'); 
     } 
    } 
} 
});

來源

2012-11-17 01:33:21 user1831158

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

來源

2013-01-22 12:12:15 nuthan

獲得可點擊面板

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

來源

2013-09-05 14:42:45 Arindam

點擊事件不在視圖

回答

相關問題