javascript - ExtJs 6.0 - Ext.application 内的 Javascript 事件处理函数作用域

Question

我不明白如何调用名为 some_function() 的事件处理函数:

var some_app = Ext.application({
  name   : 'some_app_name',
  launch : function() {
      function some_function(){
          Ext.toast('some_function called!');
      };
      var some_panel = Ext.create('Ext.panel.Panel', {
          html:"Some <span onmouseover='some_function()'>text</span> with "+
               "a html-span that should"+
               " listen to mouseover events"
      });
      var some_viewport = new Ext.Viewport({
          items: [some_panel],
          renderTo : Ext.getBody()
      });
  }
});

这是相应的 Sencha Fiddle:https://fiddle.sencha.com/#fiddle/135r

所以问题基本上是:我必须做什么才能调用 some_function()？

---

注意:

当我在浏览器中执行 Fiddle 时，我可以看到它在浏览器控制台中给我这个错误:

Uncaught ReferenceError: span_onmouseover_event_handler is not defined.

Answer 1

内联事件处理程序在全局范围内执行。 “函数未定义” 错误是不言自明的 - 您的处理程序仅存在于应用程序 launch 函数的本地范围内。没有很好的方法将上下文绑定(bind)到内联声明，但如果您坚持这种风格，您至少可以通过将处理程序声明为应用程序的成员变量来避免污染全局范围:

var some_app = Ext.application({
    name: 'some_app_name',
    some_function: function(){
        Ext.toast('some_function called!');
    },
    // ...
});

然后它可以像这样用它的完全限定路径来引用:

<span onmouseover="some_app_name.app.some_function()">

» fiddle

---

就是说，如果您给标记一个 class 属性并让 extjs 会干净得多通常处理事件委托(delegate)，这将避免潜在的代码重复和范围问题。例如，您可以这样声明您的面板:

var some_panel = Ext.create('Ext.panel.Panel', {
    html: "Some <span class='some_class'>text</span> with "+
          "a html-span that should"+
          " listen to mouseover events",
    listeners: {
        element: 'el',
        delegate: 'span.some_class',
        mouseover: some_function
    }
});

» fiddle