ExtJS 4.1 загрузить контент с внешней веб-страницы

Question

У меня есть 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 в мою панель с помощью загрузчика?

Второй вопрос: если ответ «нет», как вы предлагаете загружать содержимое этой страницы?

Спасибо всем

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/.

Answer 2

Это по соображениям безопасности (Access-Control-Allow-Origin).

Вы можете просто установить свойство «HTML» вашей панели, как:

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

См: http://jsfiddle.net/sH3fK/2/

При загрузке страницы с того же домена, вы можете просто установить свойства «погрузчик» из ваша панель:

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