将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

与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.'
      }
  });
  

  请注意,配置仅在使用config时定义新类时才在块内Ext.define.如果您使用的创建类的新实例Ext.create,new ClassName或使用对象有的xtype,配置也并不需要成为配置对象之内.

您可以通过阅读本指南了解有关新课程系统的更多信息.还有关于如何从1.x中迁移到2.x一个很大的指导这里.

所以,让我们让你的代码工作.

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

希望这会有所帮助.

Answer 2

rdougan的回答对我有用.如果它仍然不适合你,请查看Sencha Docs中的这个例子,他们使用AJAX加载.js文件的方式略有不同(对于.html文件来说,它们完全相同).要获取源代码,请下载Sencha Touch 2 SDK,它将在examples/nestedlist.