ExtJS 4.1 load content from external web page

Question

I've a Ext.panel.Panel and I would load content from an external web page into my panel.

I've tried to use the loader as described here: loader question

and you can found an example in this jsfiddle: http://jsfiddle.net/eternasparta/sH3fK/

Ext.require([    
'Ext.form.*',
'Ext.tip.*'
]);


Ext.onReady(function() {    


Ext.QuickTips.init();

Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
height:400,
    width:400,
    id:'specific_panel_id'
});

dynamicPanel = new Ext.Component({
       loader: {
           /*load contents from this url*/
          url: 'http://it.wikipedia.org/wiki/Robot',
          renderer: 'html',
          autoLoad: true,
          scripts: true
          }
       });

 Ext.getCmp('specific_panel_id').add(dynamicPanel);

});

Probably I haven't understood how to use loader (if it is possible) with external web pages. So my first question is: Is it possible to load the page http://it.wikipedia.org/wiki/Robot into my panel using loader?

The second question: If the answer is "no" how do you suggest to load the content of that page?

Thank you all

Answer 1

For external content, you will have to use an iframe. However if you want that iframe's dimensions to be managed by its container panel, you'll have to make it a component instead of just using html property:

Ext.define('MyIframePanel', {
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    items: [{
        xtype: 'box',
        autoEl: {
            tag: 'iframe',
            src: 'http://it.wikipedia.org/wiki/Robot',
        },
    }]
});

See also an example with a Window and dynamic page loading in my recent blog post: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/.

Answer 2

It is a security reasons (Access-Control-Allow-Origin).

You can just set "html" property of your panel as:

html: '<iframe src="http://it.wikipedia.org/wiki/Robot"></iframe>',

See: http://jsfiddle.net/sH3fK/2/

If you load the page from the same domain, you can just set "loader" property of your panel:

Ext.create('Ext.panelPanel', {
    ...
    loader: {
        url: 'content.html', //<-- page from the same domain
        autoLoad: true
    },
    renderTo: Ext.getBody(),
    ...
});