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()我该怎么做？

注意：

当我在浏览器中执行小提琴时，我可以看到它在浏览器控制台中出现了这个错误：

Uncaught ReferenceError: span_onmouseover_event_handler is not defined.

Answer 1

内联事件处理程序在全局范围内执行。 ＆＃34;函数未定义＆＃34; 错误不言自明 - 您的处理程序仅存在于应用程序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 - Ext.application

1 个答案: