View Full Version : Loading external url in panel?

17 Sep 2010, 9:51 PM
Hi there,

Anyone know how to load the content of an external website (e.g. http://www.google.com) in a panel or other container in sencha touch? I have looked at the panel.load function and autoload attribute for tabpanels etc., but those only seem to work for html snippets.

Any help would be much appreciated.


18 Sep 2010, 12:17 AM
You can put an iframe in the html config of the panel, but this is not the right way to handle it.
If you want to point to an external url add a button to the panel:

items: [{xtype: 'button', text: 'GO', ui: 'decline', handler: function() {location.href='http://m.google.com';} }]

18 Sep 2010, 6:58 AM

Thank you for the prompt response.

The thing is that the application runs in fullscreen mode on iPhone and iPod (e.g. an icon on the homescreen and no browser navigation buttons during runtime). I use buttons to navigate to external urls at the moment, but then you get stuck on the external site as there are no back buttons etc.

I am therefore trying to get the web content to load inside a panel which has docked toolbars with my own back button, home button etc.

If iFrame's will do the trick, I'm not sure how to do it. extra help would be appreciated.

Kind regards,

19 Sep 2010, 7:37 PM
Are you loading data you want to display or chunks of markup you're just dumping inside your page?

19 Sep 2010, 7:57 PM
Hi evant,

After some reading, I suspect that the ManagedIFrame extension is probably what I need. I've written a Sencha Touch application for my school to access all their media content (audio broadcasts, video posts, twitter etc.) from one easy location. They've asked me to add the school's Facebook page recently, so instead of doing a custom implementation I thought I'd rather just link to the Facebook mobile url from the main menu of my app. The problem is that I want to display the Facebook link while retaining my application toolbars so that users can return to the main menu etc.

It works well if you access the application in a mobile browser, but when I use the fullscreen metatag on apple devices, the browser back button is not visible and users are unable to return to the main menu of my application after visiting an external site.

I have found no easy way to embed an external page (e.g. www.google.com or our Facebook page) in a panel and retain my toolbars. I've played around with the ManagedIFrame demos that Doug Hendricks posted, but could not get any of them to work.

Can't be that difficult to load a page inside a panel right?! :)


19 Sep 2010, 8:04 PM
And sorry about getting your name wrong...I see it's Evan:)

19 Sep 2010, 9:37 PM
It's not:

html: '<iframe src="http://google.com"></iframe>;

19 Sep 2010, 9:59 PM

I've set the inner html for a panel to "<iframe src="http://m.google.com" width="100%" height="100%"> </iframe>". This displayed the website content in my browser on the pc, but did not allow any interaction with the site (scrolling etc.) It also makes the web app hang/freeze on my iPod touch. Seems that it somehow interferes with the rest of the code.

I'm probably missing something really silly (that's how it always is right?!). It seems that a lot of people have trouble getting this right and have therefore turned to Doug's libraries (Even that proved pointless in my case:)).

Thanks for your help. Please let me know if you think of anything else.


19 Sep 2010, 10:16 PM

Sorry to have wasted your time. I found some silly mistakes in my code.

Really appreciate your help though. I'll be careful to look at my code properly before I ask questions again.

All the best,

ps: I do have some problems with Ext.Msg.alert('',''). The screen gray's out a little (a sign that the modal part of the messagebox is working fine), but no messagebox or text appears. If there are some well-known mistakes people make or known bugs, please point me in the right direction.

21 Sep 2010, 8:51 AM
how did you resolve the issue, if you don't mind me asking?

i have the exact same problem with iframe in my ipad app.
i can open iframe using "<iframe...>" tag and make it the right height inside a card in tabpanel, so i still have my top and bottom toolbars, but, just as you said, i'm loosing all the touch interaction with the iframe...

so, how did you resolve the issue?

thank you in advance,


Sorry to have wasted your time. I found some silly mistakes in my code.

Really appreciate your help though. I'll be careful to look at my code properly before I ask questions again.

All the best,

ps: I do have some problems with Ext.Msg.alert('',''). The screen gray's out a little (a sign that the modal part of the messagebox is working fine), but no messagebox or text appears. If there are some well-known mistakes people make or known bugs, please point me in the right direction.

22 Sep 2010, 8:08 AM

Sorry about the late reply. I've been trying to reproduce my mistake because I could not remember what exactly I did wrong.

Unfortunately I could not get it to stop working again. As I remember I just had some really general mistakes in my panel code. Stuff that would basically break any code I put in there.

If you set the inner html property (html: '<iframe>...') of the panel, the site should load with interaction and all.

Sorry I couldn't help. I'll let you know for sure if something pops into my mind.

Kind regards,

22 Sep 2010, 9:48 AM
thank you for the reply.
i can not get it to work, though i have a very basic panel as one of the panels inside a tabpanel...
html: '<iframe ...>' brings iframe's content, but no touch interaction works on ipad/iphone, i.e. it is impossible to scroll the content of the iframe if it is bigger than panel's height.
would you show me a snippet of your code for this specific panel? maybe i'm just missing some options which make it work.
thank you...

15 Oct 2010, 7:10 AM
Hi all,

I apologize for the confusion. Initially I could not get any interaction with iFrames (e.g. when I loaded http://google.com I could not even enter something in search box). When I then finally got some interaction, I immediately declared my issue SOLVED.

However, I found very quickly that I could not scroll the iFrame content at all. I could therefore only show part of the content. What's more, if I load "http://www.google.com" instead of just "http://google.com", the application would crash and exit.

So, in conclusion: This problem is still OPEN. I have abandoned iFrames since last time I tried, but it would solve many problems for me if I could get it going with scrolling capability.

Kind regards,

21 Oct 2010, 9:11 PM
Same problem. In <iframe…> in Safari on iPad no scrolling. Supposed two-finger scroll doesn't work either with <iframe…>, only works with <div…>. Tried many combinations of overflow, position, scrolling, width, height, etc.. About ready to load into hidden <iframe…> and copy into visible <div…>, which is work and not right, e.g. styles issue.

26 Oct 2010, 10:31 AM
i've the same problem. a panel with a iframe inside a tabpanel. i can load the iframe but when i try to scroll the scollbar applies also to the tabpanel. so i scoll everything...

26 Oct 2010, 10:37 AM
Problem appears to be caused by mobile (not desktop) Safari issue with <iframe>. Sencha Touch isn't the root cause, and apparently they haven't found and can't make a workaround either. By now I live with it by loading into hidden <iframe> and copying over into <div>. It isn't ideal, think of everything you lose by not having <iframe>, issues with isolation, styles, etc.

26 Oct 2010, 10:44 AM
in fact in safari desktop everything works but in mobile doesn't... btw can you post some code describing how to perform this copy? it would be useful...

29 Oct 2010, 1:17 AM
same problem here in italy./:)

30 Oct 2010, 4:34 AM
Hi all, i've found this for the iframe on Mobile Safari:
the only way to scroll an iframe is by using two fingers simultaneously, if you use one finger you scroll the entire component, i suppose.
What i dont know is how this one is handled within Sencha Touch, Anyone of Sencha Touch Team can clarify this?

30 Oct 2010, 9:25 AM

Touchy also mentioned the two finger scroll above, but it does not seem to work either:(

It would really really really be neat to be able to accomplish this basic thing. When you run an app in fullscreen mode, it would be great to be able to redirect to external links while keeping your own toolbar buttons and not exit the app completely.

Especially since Apple decided to reload the web app from scratch every time you access it in fullscreen mode. Exiting the app to visit a link and having to reload the whole app again so that you can get back to where you were is rather frustrating to users. And many have told us that.

Feedback always: "So how do I get back?". And I have to answer: "Sorry, guess you'll have to buy a Droid phone with a hardware back button:)"


1 Nov 2010, 3:09 AM
Hi Jac, i think the only way to do that is a sort of new component, a web container component that act like an in webapp browser.

The fact that the 2 fingers method is not working is simply because this event is not handled by Sencha Touch components, so when you scroll with one finger you are scrolling the component and not the iframe.

1 Nov 2010, 5:07 AM
Just adding my +1. Don't know how possible it is, but it really would be helpful to my app to be able to do this, rather than have to launch a new window (or display it inline without any sort of navigation that brings the user back to my app).

16 Dec 2010, 1:24 AM
Another +1 for me.

This issue looks like it's related to this open issue: http://www.sencha.com/forum/showthread.php?112003-OPEN-418-Content-in-IFrame-in-Panel-Will-Not-Scroll&highlight=418

17 Dec 2010, 7:51 AM
I am working on a simple app that has a form that requests login info: ID and password. In response I want a php module to display a nested list of info (new leads) for that user, (or invalid login). I'm fuzzy on how pass data back from the php module and replace the login form with the list. Should the response module just build it's own panel as though it were the first module being invoked?
I rewrote this to have the form do an ajax call instead of doing a submit., passing the info as parms. Then I hid the form panel and displayed my list panel. The only way I got this to work was to define both panels with fullscreen: true on both. Then hide the list panel. After the data is returned I switched which panel was being displayed.
I've been using ExtJS for several years. Seems like lots of trial and error now to get Touch to work... Having never worked with phone apps before, I need a tutorial on the architecture and rules, I think.

22 Apr 2011, 12:19 AM
Issue: Rendering html inside a tabl panel...
I am using PhoneGap but I did not try with the iframe solution instead I tried with html:'<div></div>'; and then in the listerner: activate: function(){ //called my JS to show the page} Now although i got the page to render but some pages were just not scrollable or they had issues like http://m.yahoo.com if u load this then u it breaks at the icons on that page.
On going through the kitchen sink again and again i found out that in the Data segment Getting data via Ajax he is actually rendering the html from the web onto a 'PANEL' ..I was finding it immensely difficult to know what he is using (in the kitch sink example of tabpanel) in items.. the code is good but little descriptive help is more appreciated especially when u give the power to add any crap in items.
so now what i do is i render a tab panel and in that items i put xtype:'panel'; and render the html and to my surprise it does everything beautifully. without any issues..
Incase u guys are still struggling post me a message i will show u my rnd code..
I dont know if this is the real solution but by far its the best working thing i got in this respect.

25 Apr 2011, 11:34 PM
Yes, this issue is still the case for some of us.
So I will appreciate it if you could share your solution.

26 Apr 2011, 4:37 PM
Yes please post! Thanks in advance...

12 May 2011, 9:10 PM
I am really sorry I did not find time earlier to get back to you'll.
Here is my sample code Please get back to me incase any issues
incase i dont reply here for long then its probably because I have been working on something else which is consuming all my time.. in such a scenario u can shout back at me at [email protected]


19 May 2011, 9:00 AM

Thanks for the code, but when I'm trying to test it I get this from Safari:


21 May 2011, 6:00 AM
Ok I dont know how you using the files.. But I basically run it from a web server (Apache) so you have place the folder in /var/www if you are on Linux.
Let me know if that helped

29 May 2011, 12:56 PM
Thanks wordwarrior for your response.

I tried iscroll, which kinda worked. I'm trying to load some liferay portlets ans since I dont have any control of their sourcecode the app is showing the typical iphone problems with iframes.

30 May 2011, 8:57 AM

Iframes on Iphone are absolute no-no. Its also not recommended.

28 Oct 2011, 5:30 AM
@wordwarrior in your code you say :

Note:- If you are using PhoneGap then you can even do cross domain AJAX

But how can I do that ? Because it currently doesn't work without any modification of your code :p (Security error is thrown)

Thank you !

1 May 2012, 6:48 AM

Sorry for dragging this up again but I'm still looking for a resolution. The sample code that you gave works great but only for static html documents. When I change the reference to an external URL it does not work. Is there something missing that I must do???


10 Aug 2012, 3:49 AM
If you're using Phonegap/Cordova, and you need a fully interactive site to show in your app, then I suggest using the ChildBrowser Plugin.

If not, and its a simple scrolling site, then using Ext.Ajax is the only way you'll get scroll to work