htmlファイルをパネルにロード

Question

私はsencha touch 2.0を初めて使用しています。私はhtmlファイルを持っています。このhtmlファイル（またはコンテンツ）をパネルに読み込もうとしています。私は単にajax呼び出しを使用していますが、動作しません。以下はコードです。

これは私がブラウザで実行している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 
}); 

私は、htmlコンテンツをパネル内に表示したいだけです。助けてもらえますか？

Answer 1

Sencha Touch 2では、クラスシステムが1.xと比べてかなり変化しています。 ExtJS 4の使い方と非常によく似ています。この変更の背後にあるアイデアは、理解しやすくし、開発を迅速にし、よりダイナミックにすることです。

いくつかの変更：

• あなたはもはやnew HTMLPanel({})を使うべきではありません。代わりにExt.create、つまりExt.create('HTMLPanel', {})を使用してください。
• カスタムクラスを定義するのに、Ext.extendを使用しないでください。代わりにextendプロパティを持つExt.defineを使用します。
• 親を呼び出すためにもう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.' 
      } 
  }); 
  

  あなたがExt.defineを使用して新しいクラスを定義するときの設定のみconfigブロック内で行くことに注意してください。 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の答えが私のために働いた。それでも動作しない場合は、をご覧ください.AJAXを使用して.jsファイルを読み込んでいます（これは.htmlファイルとまったく同じです）。ソースを取得するには、download the Sencha Touch 2 SDKとexamples/nestedlistの下になります。