ExtJS 4.1从外部网页加载内容

Question

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

我试过使用这里描述的加载器: loader问题

你可以在这个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/.