1

Am a newbie to Sencha-Touch 2 and am working on a project where i have to access a website within my application but the website is on a different domain from the application.

I thought of loading it in an iframe but the content in the iframe do not displaying anything from the external url in the iframe container.

An example is as below.

new Ext.TabPanel({
            fullscreen: true,
            type: 'dark',
            sortable: true,
            items: [{
                title: 'Tab 1',
                html: '1',
                cls: 'card1'
            }, {
                title: 'Tab 2',
                html: '2',
                cls: 'card2'
            }, {
                title: 'The Latest',
        html: '<iframe src =\"http://www.google.com\"></iframe>',
        id: 'feedTab',
        iconCls: 'team',
        scroll : false
            }]
        });
Hillary Namanya
  • 93
  • 4
  • 13

3 Answers3

0

The iframe tag is not correctly closed and don't forget to set its width and height.

Andrea Cammarata
  • 836
  • 5
  • 7
  • thanks its now displaying but i can't navigate through the application loaded in the iframe container. I also can't scroll through the application in the iframe.Thanks now the main issue i have. Please help me, am kindly begging. Thanks... – Hillary Namanya Dec 28 '12 at 22:21
0

Give width and height to iFrame as per your requirement.

To get scroll use CSS:

overflow : scroll;

Also check out sandbox & seamless properties of iFrame

http://www.w3schools.com/tags/tag_iframe.asp

ThinkFloyd
  • 4,981
  • 6
  • 36
  • 56
  • thanks, but the problem am facing now is that the application loaded in the iframe of the sencha-touch application is actually like an image because i cannot click on any link of the application loaded.It is not navigable...Thanks – Hillary Namanya Dec 30 '12 at 00:47
  • Do you have just this iFrame in application or many more? Having multiple iFrames loaded in DOM sometimes give weird issues. Checke this out http://www.angelfire.com/nm/thehtmlsource/tutors/frames/targetframe.html if your link target is pointing to some other iFrame. Check in some other browsers also because this could be related to Doctype & Meta tags http://hardforum.com/showthread.php?t=1532562 – ThinkFloyd Dec 30 '12 at 05:03
0

The best thing you can do is download PhoneGap, stick your HTML5/Sencha app into the www directory of a new PhoneGap app, compile it with XCode so that you have a native PhoneGap app serving your Sencha app. Then, once you get that far, you can create an event for loading your external app (e.g., on a button click, etc.).

PhoneGap provides a JavaScript entry point that you can use within your Sencha development. You can run native PhoneGap functionality, including the ChildBrowser plugin for PhoneGap (https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser). Use Sencha to call the JS entry point for PhoneGap's childbrowser plugin, and use the ChildBrowser to load your external app.

The reasons you cannot just do an iframe are at least threefold:

  1. Some have complained that loading an iframe inside of a sencha app has crashed the app in Native. (I imagine if the iframe contains a complex webpage, this may cause a memory issue, which would cause the app to crash.)
  2. There is no easy way to support scrolling within the iframe. The JS-based touch scrolling that Sencha implements does not carry into the iframe. (It may be possible to get this to work with some kind of hack, but you'd still have problem #1 above.)
  3. You may have issues sizing your content inside of the iframe so that it looks decent.

I should note, for the sake of completeness, that some have indicated on this site that they've been able to load a webpage via JSONP / AJAX and then inject the HTML of the page into their Sencha app. I suspect this may be as complicated to get working consistently as it would be to simply bone up a bit on PhoneGap and use the ChildBrowser plugin.

Morris Singer
  • 1,715
  • 2
  • 18
  • 34