ExtJS 4.1 Inhalt von externer Webseite laden

Question

Ich habe eine Ext.panel.Panel und ich würde Inhalt von einer externen Webseite in mein Panel laden.

Ich habe versucht, den Lader zu verwenden, wie hier beschrieben: loader question

und Sie können ein Beispiel in diesem jsfiddle gefunden: 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); 

}); 

Wahrscheinlich habe ich nicht verstanden, wie die Verwendung Loader (wenn es möglich ist) mit externen Webseiten. Also meine erste Frage ist: Ist es möglich, die Seite http://it.wikipedia.org/wiki/Robot mit Loader in mein Panel zu laden?

Die zweite Frage: Wenn die Antwort "Nein" ist, wie schlagen Sie vor, den Inhalt dieser Seite zu laden?

Vielen Dank an alle

Answer 1

Für externe Inhalte, werden Sie einen iframe verwenden. Allerdings, wenn Sie feststellen, dass iframe Dimensionen wollen von seinem Container-Panel verwaltet werden, finden Sie es eine Komponente machen müssen, anstatt nur mit html Eigenschaft:

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

Siehe auch ein Beispiel mit einem Fenster und dynamischem Laden der Seite in Mein letzter Blogpost: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/.

Answer 2

Es ist ein aus Sicherheitsgründen (Access-Control-Allow-Origin).

Sie können nur „html“ Eigenschaft Ihres Panel eingestellt, wie:

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

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

Wenn Sie die Seite aus der gleichen Domäne laden, können Sie einfach auf „loader“ Eigentum Ihr Panel:

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