ExtJS 4.1 downloads content from an external web page

Question

I have Ext.panel.Panel and I would upload content from an external web page to my dashboard.

I tried using the bootloader as described here: bootloader issue

and you can find 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); }); 

Perhaps I did not understand how to use the bootloader (if possible) using external web pages. So my first question is: is it possible to load the http://it.wikipedia.org/wiki/Robot page into my panel using the bootloader?

Second question: if the answer is no, how do you suggest downloading the contents of this page?

Thank you all

Answer 1

For external content you will have to use an iframe. However, if you want the iframe dimensions to be controlled by its container panel, you will need to make it a component, and not just use the 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

These are security reasons (Access-Control-Allow-Origin).

You can simply set the html property of your panel as:

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

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

If you are loading a page from the same domain, you can simply set the "loader" property of your panel:

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