बाहरी वेब पेज से 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

बाहरी सामग्री के लिए, आपको एक आईफ्रेम का उपयोग करना होगा।

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

भी देखें एक उदाहरण एक खिड़की और गतिशील पेज लोड हो रहा है के साथ: यदि आप चाहते लेकिन अगर कि iframe के आयाम अपने कंटेनर पैनल द्वारा प्रबंधित किया जा करने के लिए, आप इसे एक घटक के बजाय बनाने के सिर्फ html संपत्ति का उपयोग कर करना होगा मेरा हालिया ब्लॉग पोस्ट: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/।

Answer 2

यह एक सुरक्षा कारणों से (पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति) है धन्यवाद।

तुम बस के रूप में अपने पैनल के "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(), 
    ... 
});