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);

});

可能我还没有理解如何使用外部网页加载（如果可能）。所以我的第一个问题是：是否可以使用loader将页面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(),
    ...
});

ExtJS 4.1从外部网页加载内容

2 个答案: