6

我有一个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加载到我的面板中？

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

谢谢你们

4

2 回答 2

11

对于外部内容，您必须使用 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/。

于 2013-08-19T21:47:16.340 回答
3

这是一个安全原因（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(),
    ...
});
于 2013-08-19T16:00:07.483 回答