如何从HTML文件创建sencha touch xtemplate

Question

我正在使用以下代码创建sencha touch x模板以显示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>',

字符串中的实际HTML将非常大。 有什么方法可以从html文件加载整个HTML代码？

版本：Sencha Touch 2.3.1

Answer 1

您可以使用Ext.Ajax实现此目的。 您只需要执行对本地文件的请求。 文件路径是相对于app.js文件的。

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将html保留为字符串。