html dosyasını bir panele yükleyin

Question

Sencha touch 2.0 cihazında yeniyim. Bir html dosyası var. Bu html dosyasını (veya içeriği) bir panele yüklemeye çalışıyorum. Ben sadece ajax çağrısı kullanıyorum ama çalışmıyor. Aşağıdaki kod.

Bu, tarayıcıda çalıştırdığım html dosyasıdır.

index.html:

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

ve HTMLPanel.js olup:

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

bu app.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 
}); 

Sadece html içeriğinin panelde görüntülenmesini istiyorum. Birisi yardım edebilir mi?

Answer 1

Sencha Touch 2'de sınıf sistemi 1.x'e göre çok değişti. Şimdi ExtJS 4'ün nasıl olduğuna çok benzer. Değişimin arkasındaki fikir, anlaşılmasını kolaylaştırmayı, gelişmeyi daha hızlı ve daha dinamik hale getirmektir.

Bazı değişiklikler:

• artık new HTMLPanel({}) kullanmalıdır. Bunun yerine, Ext.create, yani Ext.create('HTMLPanel', {}) kullanın.
• Artık özel sınıflarınızı tanımlamak için Ext.extend kullanmamalısınız. Bunun yerine, extend özelliği ile Ext.define kullanın.
• Artık ebeveyn aramak için HTMLPanel.superclass.constrctor.apply(this, arguments) kullanmanız gerekmemektedir. Bunun yerine

• 'u constructor çok nadir bir şekilde geçersiz kılmalısınız. Bu kötü bir uygulama.

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

  Eğer Ext.define kullanarak yeni bir sınıf tanımladığınızda konfigürasyonları sadece config blok içinde gitmek lütfen unutmayın: Bunun yerine, config blok kullanmalıdır. Ext.create, new ClassName veya bir xtype ile bir nesne kullanarak bir sınıfın yeni bir örneğini oluşturuyorsanız, yapılandırma nesnesi yapılandırma nesnesinde olması gerekir yapın.

this guide okuyarak yeni sınıf sistemi hakkında daha fazla bilgi bulabilirsiniz. 1.x'ten 2.x here'a nasıl geçiş yapılacağına dair harika bir rehber de var.

Kodunuzu çalışır duruma getirelim.

index.html (hiçbir şey değiştirmek gerekiyor):

<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:

// 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); 
      } 
     }); 
    } 
}); 

Umarım bu yardımcı olur.

Answer 2

rdougan bireyin cevabı benim için çalıştı. hala sizin için işe yaramazsa onlar ajax biraz daha farklı bir şekilde kullanarak dosyaları js yükleme nereye, this example from the Sencha Docs göz atmak (o .html dosyaları için tam olarak aynı olacaktır). , download the Sencha Touch 2 SDK kaynağını elde etmek ve onu examples/nestedlist altında olacak.