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

---

Примечание:

Когда я исполняю скрипку в моем браузере я могу видеть, что это дает мне эту ошибку в браузере-консоли:

Uncaught ReferenceError: span_onmouseover_event_handler is not defined.

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

» 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