ExtJS 4.1 load content from external web page

extjs, javascript, load, url

Solution

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

Problem

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

Original source