PDA

View Full Version : scroll event for iframe in panel



glafrance
29 Apr 2013, 1:16 PM
In the following simplified code, how can I create an event handler to detect when the user has scrolled to the bottom of the iframe in the panel?


Ext.onReady( function (){
var textUrl = 'http://www.adobe.com';
var window = new Ext.Window({
height: 500,
width: 500,
autoShow: true,

border: false,
plain: true,

items: [{
html: '',
layout: 'fit',
id: 'myText',
width: 490,
height: 470
}]
});

window.down('#myText').body.update("<iframe width='100%' height='100%' frameborder='0' src='" + textUrl + "'></iframe>");
window.setVisible(true);

});

glafrance
29 Apr 2013, 3:07 PM
In the following code the scroll event is detected. I've gottem rid of the iframe. But when I put relevant parts of this working code in my real MVC ExtJS 4 app, this working code doesn't work. No scroll events are detected.


Ext.onReady( function (){
var textUrl = 'http://www.adobe.com';
var window = new Ext.Window({
height: 500,
width: 500,
autoShow: true,

border: false,
plain: true,

items: [{
html: '',
layout: 'fit',
autoScroll: true,
id: 'myText',
width: 490,
height: 470,
listeners: {
render: function(p){
p.body.on('scroll', function(){
console.log('here');
}, p);
}
}
}]
});

var panel = Ext.getCmp('myText');
if (panel.body) {
panel.body.insertHtml("beforeEnd", "<html><body>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br>This is a <b>test</b> of the system.<br></body></html>");
}
window.setVisible(true);

});

glafrance
29 Apr 2013, 4:56 PM
The problem might be the fact that I an using an iframe:


panel.body.insertHtml("beforeEnd", "<iframe width='100%' height='100%' frameborder='0' src='" + me.agreementUrl + "'></iframe>");


I don't really use an iframe, but iframe seems to automatically load the HTML I want to display in the Panel from the me.agreementUrl. If I load the HTML returned from that url manually, I just get back an XMLDocument object from which I cannot extract the HTML.

slemmon
1 May 2013, 3:56 PM
If you're loading an iFrame into a panel it'll be its own document within the document owning the panel. So, it'll own its own events and event bubbling. You can't simply listen to the scroll event from the the iframe document from your code in the parent document.