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

Answer 1

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