Loading an external web application within a Sencha-Touch 2 application

Question

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
            }]
        });

Morris Singer Morris Singer · Accepted Answer · 2013-01-03T15:00:57

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:

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.)
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.)
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.

Loading an external web application within a Sencha-Touch 2 application

3 Answers