2013-08-19 11 views
6

Ho un Ext.panel.Panel e vorrei caricare il contenuto da una pagina Web esterna nel mio pannello.ExtJS 4.1 carica il contenuto da una pagina Web esterna

Ho cercato di usare il caricatore come descritto qui: loader question

e si può trovare un esempio in questo 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); 

}); 

Probabilmente non ho ancora capito come utilizzare loader (se possibile) con pagine Web esterne. Quindi la mia prima domanda è: è possibile caricare la pagina http://it.wikipedia.org/wiki/Robot nel mio pannello usando il caricatore?

La seconda domanda: se la risposta è "no", come suggerisci di caricare il contenuto di quella pagina?

Grazie a tutti

+1

E iFrame? –

risposta

10

Per i contenuti esterni, dovrai utilizzare un iframe. Tuttavia, se si desidera che le dimensioni di quella iframe alla diretta dal suo pannello di contenitore, si dovrà rendere un componente invece di utilizzare html proprietà:

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

Vedi anche un esempio con una finestra e caricamento della pagina dinamica il mio recente post sul blog: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/.

+0

Ho raggiunto autonomamente la soluzione proposta. Grazie a tutti – Marco

3

Si tratta di un ragioni di sicurezza (Access-Control-Allow-Origin).

Si può solo impostare la proprietà "html" del pannello come:

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

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

Se si carica la pagina dallo stesso dominio, si può solo impostare "loader" di proprietà di il tuo pannello:

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

Ma penso, anche se quel file html risiede nel proprio dominio, semplicemente non carica gli script scritti all'interno di quella pagina html; – Asqan