Ext.Panel showing content webpages using iFrames

[The_KIller36]

Hi,

I'm building an app that shows the contents of webpages in a tabpanel. When I'm searching the internet, I found that I should use iFrames. I tried it but the problem is that the iFrame can not be scrolled. I found out that the panel is scrolling, when you put scrollable to true, but this has no effect on the iFrame. Any suggestions to solve this would be nice!

(btw I also tried to use iscroll, but also this plugin cannot scroll an iframe.)

Here is a panel that is added to a tabpanel.


Ext.create('Ext.Panel', {
extend: 'Ext.Panel',
title: '**website name**',
id: 'website id',
html: '<iframe scrolling="yes" src="http://www.google.com"></iframe>',
config: {
height: screen.height,
width: screen.width,
scrollable: false
}
});

[rdougan]

Unfortunately there is no way to do that using the frame work.

You could somewhat get around it for iOS5 only devices using this: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

[The_KIller36]

ah thats a problem, but thanks anyway for the quick response!

[bweiler]

I'm able to dynamically set and scroll iframes using PR3. I was very surprised I could do this given the other iframe posts, but it seems to work fine.

Here's my code:


Ext.define('MyApp.view.Contact', {
extend: 'Ext.Container',

config: {
layout: 'card',
title: 'Comment',
iconCls: 'reply'
}
});


Here's how I set the html after creating an instance of the Contact class:

view.setHtml(iframe);

The page takes a bit to load and there is no automatic loading mask, so I will have to set the loading mask manually.

NOTE: The above works fine using Safari desktop. I have not yet tested this on an iPad.

[bweiler]

I did not read the original post carefully enough. I have panel scrolling working with an iframe as the panel content and that seems to be sufficient for my needs. I just need to be able to see the whole iframe page.