将 html 文件加载到面板中答案

【问题标题】：load an html file into a panel将 html 文件加载到面板中
【发布时间】：2012-02-27 17:51:02
【问题描述】：

我是 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 内容。有人可以帮忙吗？

【问题讨论】：

标签： sencha-touch-2

【解决方案1】：

与 1.x 相比，Sencha Touch 2 中的职业系统发生了很大变化。它现在与 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.'
    }
});
```
请注意，当您使用Ext.define 定义新类时，配置仅在config 块内进行。如果您正在使用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>

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

希望这会有所帮助。

【讨论】：

我可以确认这是有效的，应该被接受的答案

【解决方案2】：

rdougan 的回答对我有用。如果它仍然不适合您，请查看this example from the Sencha Docs，他们使用 AJAX 加载 .js 文件的方式略有不同（对于 .html 文件来说，这将完全相同）。要获取源，download the Sencha Touch 2 SDK，它将位于examples/nestedlist。

【讨论】：