ExtJS 4.1 从外部网页加载内容

Question

我有一个Ext.panel.Panel，我会将外部网页中的内容加载到我的面板中。

我尝试使用此处描述的加载器： loader question

你可以在这个 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);

});

可能我还没有理解如何将加载器（如果可能的话）与外部网页一起使用。 所以我的第一个问题是：是否可以使用加载器将页面http://it.wikipedia.org/wiki/Robot 加载到我的面板中？

第二个问题：如果答案是“否”，您建议如何加载该页面的内容？

谢谢大家

Answer 1

对于外部内容，您必须使用 iframe。但是，如果您希望 iframe 的尺寸由其容器面板管理，则必须将其设为组件，而不仅仅是使用 html 属性：

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

另请参阅我最近的博客文章中的窗口和动态页面加载示例：http://nohuhu.org/development/using-render-selectors-to-capture-element-references/。

Answer 2

这是一个安全原因（Access-Control-Allow-Origin）。

您可以将面板的“html”属性设置为：

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

见：http://jsfiddle.net/sH3fK/2/

如果你从同一个域加载页面，你可以设置面板的“loader”属性：

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