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

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

这里是对应的煎茶Fiddle：https://fiddle.sencha.com/#fiddle/135r

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

注：

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

Uncaught ReferenceError: span_onmouseover_event_handler is not defined.

Answer 1

内联事件处理程序在全局范围内执行。 "function is not defined" 错误是 self-explanatory - 您的处理程序仅存在于应用程序 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()">

» fiddle

就是说，如果您为标记提供 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
    }
});

» fiddle

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

ExtJs 6.0 - Javascript event handler function scope inside Ext.application

javascript

extjs

event-handling

dom-events

extjs6