एक पैनल में एक HTML फ़ाइल लोड करें

Question

मैं सेन्चा टच 2.0 के लिए नया हूं। मेरे पास एक एचटीएमएल फाइल है। मैं इस एचटीएमएल फ़ाइल (या सामग्री) को एक पैनल में लोड करने की कोशिश कर रहा हूं। मैं बस एक अजाक्स कॉल का उपयोग कर रहा हूं लेकिन यह काम नहीं कर रहा है। कोड निम्नलिखित है।

यह html फ़ाइल मैं ब्राउज़र में चल रहा है।

index.html:

<script type="text/javascript" src="touch/sencha-touch-debug.js"></script> 
<script type="text/javascript" src="HTMLPanel.js"></script> 
<script type="text/javascript" src="app.js"></script> 

यह है app.js:

Ext.setup({ 
    name : 'SampleLoad', 
    requires : ['HTMLPanel'], 
    launch : function() { 
     var HTMLPanel = new HTMLPanel({ 
      scroll : 'vertical', 
      title : 'My HTML Panel', 
      url : 'sample.html' 
     }); 
    } 
}); 

और इस HTMLPanel.js है:

//HTMLPanel = Ext.extend(Ext.Panel, { //gives error 
var HTMLPanel = Ext.define('HTMLPanel',{ 
    extend : 'Ext.Panel', 
    constructor : function(config) { 
     HTMLPanel.superclass.constructor.apply(this, arguments); 

     // load the html file with ajax when the item is 
     // added to the parent container 
     this.on(
      "activate", 
      function(panel, container, index) { 
       if(this.url && (this.url.length > 0)) 
       { 
        Ext.Ajax.request({ 
         url : this.url, 
         method : "GET", 
         success : function(response, request) { 
          //console.log("success -- response: "+response.responseText); 
          panel.update(response.responseText); 
         }, 
         failure : function(response, request) { 
          //console.log("failed -- response: "+response.responseText); 
         } 
        }); 
       } 
      }, 
      this 
     ) 
    }, 

    url : null 
}); 

मैं सिर्फ पैनल के भीतर एचटीएमएल सामग्री प्रदर्शित करना चाहता हूं। क्या कोई मदद कर सकता है?

Answer 1

वर्ग प्रणाली Sencha टच 2 में काफी बहुत बदल गया है 1.x. की तुलना यह अब एक्सटीजेएस 4 के समान ही है। परिवर्तनों के पीछे विचार यह समझना आसान है, विकसित करने के लिए तेज़ और अधिक गतिशील है।

कुछ परिवर्तन:

• तुम अब new HTMLPanel({}) उपयोग करना चाहिए। इसके बजाय, Ext.create का उपयोग करें, यानी Ext.create('HTMLPanel', {})।
• अब आपको अपनी कस्टम कक्षाओं को परिभाषित करने के लिए Ext.extend का उपयोग नहीं करना चाहिए। इसके बजाय, Ext.define का उपयोग extend संपत्ति के साथ करें।
• आप अब HTMLPanel.superclass.constrctor.apply(this, arguments) उपयोग करने के लिए माता-पिता को फोन करने की जरूरत नहीं है। इसके बजाय, आप this.callParent(arguments)

• का उपयोग आप बहुत मुश्किल से ही constructor ओवरराइड करना चाहिए कर सकते हैं। यह बुरा अभ्यास है। इसके बजाय, आप config ब्लॉक का उपयोग करना चाहिए:

  Ext.define('HTMLPanel', { 
      extend: 'Ext.Panel', 
  
      config: { 
       html: 'This is the html of this panel.' 
      } 
  }); 
  

  कृपया ध्यान दें कि विन्यास केवल config ब्लॉक के भीतर जाने के लिए जब आप Ext.define उपयोग कर एक नया वर्ग को परिभाषित। आप एक वर्ग Ext.create, new ClassName का उपयोग करने का एक नया उदाहरण बना कर या किसी xtype के साथ एक वस्तु का उपयोग कर रहे हैं, तो विन्यास config वस्तु के भीतर होने की जरूरत नहीं है।

आप this guide पढ़कर नई कक्षा प्रणाली के बारे में अधिक जानकारी प्राप्त कर सकते हैं। 1.x से 2.x here पर माइग्रेट करने के तरीके पर एक महान मार्गदर्शिका भी है।

तो, अपने कोड काम करने की सुविधा देता है।

index.html (कुछ भी नहीं बदलने की जरूरत):

<script type="text/javascript" src="touch/sencha-touch-debug.js"></script> 
<script type="text/javascript" src="HTMLPanel.js"></script> 
<script type="text/javascript" src="app.js"></script> 

अनुप्रयोग।js:

// You should use Ext.application, not Ext.setup 
Ext.application({ 
    name: 'SampleLoad', 
    requires: ['HTMLPanel'], 
    launch: function() { 
     var HTMLPanel = Ext.create('HTMLPanel', { 
      // this is now `scrollable`, not `scroll` 
      //scroll: 'vertical', 
      scrollable: 'vertical', 

      url: 'sample.html' 
     }); 

     // Add the new HTMLPanel into the viewport so it is visible 
     Ext.Viewport.add(HTMLPanel); 
    } 
}); 

HTMLPanel.js:

// You do not need to save a reference to HTMLPanel when you define your class 
//var HTMLPanel = Ext.define('HTMLPanel', { 
Ext.define('HTMLPanel', { 
    extend: 'Ext.Panel', 

    // We are using Ext.Ajax, so we should require it 
    requires: ['Ext.Ajax'], 

    config: { 
     listeners: { 
      activate: 'onActivate' 
     }, 

     // Create a new configuration called `url` so we can specify the URL 
     url: null 
    }, 

    onActivate: function(me, container) { 
     Ext.Ajax.request({ 
      // we should use the getter for our new `url` config 
      url: this.getUrl(), 
      method: "GET", 
      success: function(response, request) { 
       // We should use the setter for the HTML config for this 
       me.setHtml(response.responseText); 
      }, 
      failure: function(response, request) { 
       me.setHtml("failed -- response: " + response.responseText); 
      } 
     }); 
    } 
}); 

उम्मीद है कि इस मदद करता है।

Answer 2

rdougan का उत्तर मेरे लिए काम किया। यदि यह अभी भी आपके लिए काम नहीं करता है, तो this example from the Sencha Docs देखें जहां वे AJAX का उपयोग कर .js फ़ाइलों को थोड़ा अलग तरीके से लोड कर रहे हैं (यह बिल्कुल .html फ़ाइलों के लिए समान होगा)। स्रोत प्राप्त करने के लिए, download the Sencha Touch 2 SDK और यह examples/nestedlist के तहत होगा।