ExtJS 4.1 ładuje zawartość z zewnętrznej strony internetowej

Question

Mam Ext.panel.Panel i ładowałem zawartość z zewnętrznej strony internetowej do mojego panelu.

Próbowałem użyć ładowarkę jak opisano tutaj: loader question

można znaleźć przykład w tym 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); 

}); 

Prawdopodobnie nie mam rozumieć, jak używać program ładujący (jeśli to możliwe) za pomocą zewnętrznych stron internetowych. Moje pierwsze pytanie brzmi: czy można załadować stronę http://it.wikipedia.org/wiki/Robot do mojego panelu za pomocą programu ładującego?

Drugie pytanie: Jeśli odpowiedź brzmi "nie", w jaki sposób sugerujesz załadować zawartość tej strony?

Dziękuję wszystko

Answer 1

W przypadku treści zewnętrznych będziesz musiał użyć elementu iframe. Jednak jeśli chcesz wymiarów iframe, który ma być zarządzany przez jego panelu pojemnika, będziesz musiał zrobić to komponent, a nie tylko za pomocą html właściwość:

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

Patrz także przykład z oknem i dynamicznego ładowania strony w mój ostatni wpis na blogu: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/.

Answer 2

Jest to względy bezpieczeństwa (Access-Control-Allow-Origin).

można po prostu ustawić „HTML” właściwości panelu jako:

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

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

Jeśli załadować stronę z tej samej domeny, można po prostu ustawić „Loader” własność Twój panel:

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