將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

與Senx Touch 2相比，Sencha Touch 2中的班級系統發生了很大的變化，與1.x相比。它現在非常類似於ExtJS 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的對象創建類的新實例，則需要在配置對象內配置而不是。

通過閱讀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以稍微不同的方式（對於.html文件來說，它將完全相同）檢出this example from the Sencha Docs正在加載.js文件的位置。要得到源文件，download the Sencha Touch 2 SDK，它將在examples/nestedlist之下。