将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之下。