ExtJs6.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时，我可以看到它在浏览器控制台中给了我这个错误：

未捕获引用错误：未定义span_onmouseover_event_handler。

Answer 1

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

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()">

»小提琴

---

也就是说，如果您给标记一个class属性，并让extjs处理事件委派，这将更加干净，因为通常情况下，这将避免潜在的代码重复和范围问题。例如，你可以这样声明你的面板：

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

»小提琴