load an html file into a panel

Question

I am new to sencha touch 2.0. I have an html file. I am trying to load this html file(or content) into a panel. I am simply using an ajax call but its not working. Following is the code.

This is the html file i am running in the browser.

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>

this is app.js:

Ext.setup({
    name : 'SampleLoad',
    requires : ['HTMLPanel'],
    launch : function () {
        var HTMLPanel = new HTMLPanel({
            scroll : 'vertical',
            title : 'My HTML Panel',
            url : 'sample.html'
        });
    }
});

and this is 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
});

I just want the html content to be displayed within the panel. Can someone help?

Answer 1

The class system has changed quite a lot in Sencha Touch 2 compared to 1.x. It is now very similar to how ExtJS 4 is. The idea behind the changes is to make it easier to understand, quicker to develop and more dynamic.

Some changes:

• you should no longer use new HTMLPanel({}). Instead, use Ext.create, i.e. Ext.create('HTMLPanel', {}).
• you should no longer use Ext.extend to define your custom classes. Instead, use Ext.define with an extend property.
• you do not need to use HTMLPanel.superclass.constrctor.apply(this, arguments) anymore to call the parent. Instead, you can use this.callParent(arguments)

• you should very rarely override constructor. This is bad practise. Instead, you should use the config block:

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

  Please note that configurations only go within the config block when you define a new class using Ext.define. If you are creating a new instance of a class using Ext.create, new ClassName or using an object with an xtype, configurations do not need to be within the config object.

You can find out more information about the new class system by reading this guide. There is also a great guide on how to migrate from 1.x to 2.x here.

So, lets make your code work.

index.html (nothing needs to change):

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

Hopefully this helps.