добавить прослушиватель событий для iframe в Sencha

Question

Я пытаюсь добавить прослушиватель событий для iframe, когда он загружен.

Я установил следующий код в функцию init для контроллера.

init: function(application) { 
var iframe = window.top.document.getElementsByTagName('iframe')[0]; 
if(iframe) { 
       Ext.EventManager.on(iframe.contentDocument.body, 'load', this.onload, this); 
      } 
//onload is my defined function. 

Однако функция onload не была выполнена.

Так что я попробовал другой код

var iframe = window.top.document.getElementsByTagName('iframe')[0]; 
iframe.addEventListener("load", this.onBeforeUnload, false); 

И результат тот же. Пожалуйста, сообщите надлежащим образом, чтобы добавить прослушиватель событий для iframe, когда он загружен в ExtJs.

ОБНОВЛЕНИЕ ----

Спасибо за пример. Но когда я попытался применить его к моему истинному делу, я столкнулся с некоторыми трудностями. В моем проекте, у меня есть меню, домой, нажатие каждой кнопки меню будет сделать следующие действия:

Ext.ComponentQuery.query('iframepanel"]')[0].update('<iframe src="buyitems">'); 

«/ buyitems» страница включает в себя контроллер, я уже упоминал в этом вопросе. Теперь я пытаюсь прослушивать изменения iframe (например, beforeunload). Если iframe изменен, я хотел бы выполнить функцию this.onBeforeUnload с контроллера, чтобы открыть диалоговое окно предупреждения для несохраненных данных.

Я применил ваш код в моей функции init, но все равно не могу прослушать событие beforeunload iframe.

Answer 1

Просто обернуть IFRAME в Ext.dom.Element и использовать on:

Ext.get(iframe).on('load', function() { 
    console.log('LOADED!'); 
}); 

Пример: https://fiddle.sencha.com/#fiddle/rt9