ExtJS 4.1 tải nội dung từ trang web bên ngoài

Question

Tôi đã Ext.panel.Panel và tôi sẽ tải nội dung từ một trang web bên ngoài vào bảng điều khiển của tôi.

Tôi đã cố gắng sử dụng bộ nạp như đã mô tả ở đây: loader question

và bạn có thể tìm thấy một ví dụ trong jsfiddle này: 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); 

}); 

Có lẽ tôi đã không hiểu làm thế nào để sử dụng bộ nạp (nếu có thể) với các trang web bên ngoài. Vì vậy, câu hỏi đầu tiên của tôi là: Có thể tải trang http://it.wikipedia.org/wiki/Robot vào bảng điều khiển của tôi bằng trình tải không?

Câu hỏi thứ hai: Nếu câu trả lời là "không", bạn đề xuất tải nội dung của trang đó như thế nào?

Cảm ơn tất cả các bạn

Answer 1

Đối với nội dung bên ngoài, bạn sẽ phải sử dụng iframe. Tuy nhiên nếu bạn muốn kích thước của khung nội tuyến được quản lý bởi bảng điều khiển chứa của nó, bạn sẽ phải làm cho nó một thành phần thay vì chỉ sử dụng html tài sản:

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

Xem thêm một ví dụ với một cửa sổ và tải trang năng động trong bài đăng blog gần đây của tôi: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/.

Answer 2

Đó là lý do bảo mật (Access-Control-Allow-Origin).

Bạn chỉ có thể thiết lập "html" tài sản của bảng điều khiển của bạn như:

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

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

Nếu bạn tải trang từ cùng một tên miền, bạn chỉ có thể thiết lập "nạp" tài sản của bảng điều khiển của bạn:

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