loading external url in sencha touch 2

Question

i'm working on a simple application that loads an external url (google.com) into a tabpanel. using ajax request:Ext.Ajax.request is not working because of the access control allow origin. i know how to load local html, how to allow access control on local sever. my problem is when i don't have access to the external server. is there anyway to load an external url? i tried Ext.util.JSONP.request and it didn't work.

here's a senchafiddle example on tappanel and loading url (not written by me): link

how did you use Ext.util.JSONP and mean by "didn't work"? Please note that the URL you're trying to fetch data from must have JSONP enabled — Thiem Nguyen
@ThiemNguyen you're right jsonp will never work on a url with no jsonp enabled.my problem is how to load this url if i can't use ajax call. — john

Grgur Grgur · Accepted Answer · 2012-05-13T17:59:01

What you can do is load it in an iframe. I have compiled a component you could use for this purpose

Ext.define('Ext.ux.IframeComponent', {
    extend: 'Ext.Component',

    xtype: 'iframecmp',

    config: {
        /**
         * @cfg {String} url URL to load
         */
        url     : null,

        /**
         * @cfg
         * @inheritdoc
         *
         * Add your own style
         */
        baseCls : Ext.baseCSSPrefix + 'iframe'
    },

    initialize: function() {
        var me = this;
        me.callParent();

        me.iframe = this.element.createChild({
            tag   : 'iframe',
            src   : this.getUrl(),
            style : 'width: 100%; height: 100%;'
        });

        me.relayEvents(me.iframe, '*');
    }

});

Usage:

Ext.define("IframeCmp.view.Main", {
    extend: 'Ext.tab.Panel',
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title   : 'Google',
                iconCls : 'action',
                xtype   : 'iframecmp',
                url     : 'http://sencha.com'
            }
        ]
    }
});

Important notice: loading URLs from an external domain in an iframe is considered a security flaw

loading external url in sencha touch 2

1 Answers

Usage: