sencha-touch-2 – 将html文件加载到面板中

前端之家收集整理的这篇文章主要介绍了sencha-touch-2 – 将html文件加载到面板中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是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("@R_404_159@ -- response: "+response.responseText);
                        }
                    });
                }
            },this
        )
    },url : null
});

我只希望html内容显示在面板中.有人可以帮忙吗?

解决方法

在Sencha Touch 2中,类系统相对于1.x而言已经发生了很大变化.现在非常类似于ExtJS 4.改变背后的想法是使其更容易理解,更快地开发和更有活力.

一些变化:

>你不应再使用新的HTMLPanel({}).而是使用Ext.create,即Ext.create(‘HTMLPanel’,{}).
>您不应再使用Ext.extend来定义自定义类.而是使用扩展属性的Ext.define.
>您不必再使用HTMLPanel.superclass.constrctor.apply(这个参数)来调用父级.相反,你可以使用this.callParent(arguments)
>你应该很少覆盖构造函数.这是不好的做法.而应该使用配置块:

Ext.define('HTMLPanel',{
    extend: 'Ext.Panel',config: {
        html: 'This is the html of this panel.'
    }
});

请注意,当您使用Ext.define定义新类时,配置仅在配置块内.如果您正在使用Ext.create,新的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',// 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("@R_404_159@ -- response: " + response.responseText);
            }
        });
    }
});

希望这有帮助.

猜你在找的HTML相关文章