如何在面板或容器中加載外部html文件sencha touch 2.3

Question

我想爲iOS和Android開發一個應用程序，使用Sencha觸摸，我想創建一個面板或容器來加載放置在同一文件夾中的外部HTML。

因爲我們在iOS中使用android或UIWebView中的phonegap應用程序中的webview。

Answer 1

Ext.define('MyApp.view.MyPanel', { 
extend: 'Ext.Panel', 
config: { 
    id: 'MyPanel', 
    itemId: 'MyPanel', 
    scrollable: true, 
    listeners: [ 
     { 
      fn: 'onMyPanelActivate', 
      event: 'activate' 
     } 
    ] 
}, onMyPanelActivate: function(newActiveItem, container, oldActiveItem, eOpts) { 
    Ext.Ajax.request({ 
     //local path of your html file 
     url: 'html/index.html', 
     success : function(response) { 
      Ext.getCmp('MyPanel').setHtml(response.responseText); 
     }, 
     failure : function(response) { 
      var text = response.responseText; 
      Ext.Msg.alert('Error', text, Ext.emptyFn);   } 
    }); 
}}); 

Answer 2

//Created this Panel Extender, that suited me better: 

Ext.define('Pricing.controller.HtmlPanelExtender', { 
    extend: 'Ext.Panel', 
    alias: 'widget.htmlPanelExtender', 
    autoScroll: true, 
    constructor: function (config) { 
     this.superclass.constructor.apply(this, arguments); 
     this.loaded = false; 
     this.load = function() { 
      if (!this.loaded && this.url && (this.url.length > 0)) { 
       Ext.Ajax.request({ 
        disableCaching: false, 
        url: this.url, 
        method: "GET", 
        panel: this, 
        success: function (response, request) { 
         request.panel.update(response.responseText); 
         request.panel.loaded = true; 
        } 
       }); 
      } 
     }; 
     this.on('show', this.load); 
     if (this.autoLoad) { 
      this.load(); 
     } 
    }, 
    url: null 
}); 



// use it like this 

items: [{ 
    id: 'abc', 
    xtype: 'htmlPanelExtender', 
    scroll: 'vertical', 
    border: 0, 
    autoLoad: true, 
    url: 'templates/adminhome.html' 
}]