How to create sencha touch xtemplate from html file

Question

I am creating sencha touch x template using following code to display Ext.List

itemTpl : '<div style="width: 100%;height: 420px"><div style="width: 300px;float: left">' +
            'Wave No: {waveNo}<br/>Description:-{description}<br/></div>' +
            '<div style="width: 300px;float: left">' +
            'No of Hours Planned: {noOfHrsPlanned}<br/>' +
            'No of Hours Completed: {noOfHrsCompleted}<br/>' +
            'No of Hours Remaining: {noOfHrsRemaining}<br/>' +
            '</div><div style="width: 210px; float: left;">' +
            '<canvas id="doughnut{waveNo}" width="200" height="200" style="border:0px solid #000000;"></canvas>' +

            '</div></div>',

Actual HTML inside string is going to to be very big. Is there any way where I can load the whole HTML code from a html file?

Version: Sencha Touch 2.3.1

Answer 1

You can use Ext.Ajax to achieve this. You only need to execute a request for a local file. The file path is relative to the app.js file.

Ext.define('FileLoad.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.Ajax'
    ],

    initialize: function () {
        this.callParent( arguments );
        var me = this;
        Ext.Ajax.request({
            url: 'template.html',
            success: function ( response ) {
                me.setHtml( response.responseText    );
            },
            failure: function ( response ) {
                me.setHtml( response.responseText );
            }
        });
    }
});

response.responseText will hold the html as string.