尝试使用ExtJS 4.2.1确定在XTemplate中显示商店数据的正确方法

Question

我是ExtJS的新手，我很难确定使用非硬编码存储来显示自定义XTemplates的正确MVC架构。

在下面的示例代码中，我有1个，2个和3个工作。但是，4不起作用。我很确定这是因为有时间问题。商店1 - 3是硬编码的，而4是在“加载”事件中创建的。

使用ajax存储配置自定义模板的最佳方法是什么，以便在呈现自定义html之前完全加载存储？

Ext.define('myApp.view.task.Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.task.custom',
    title: 'Custom List',

    initComponent: function () {
        var me = this;

        var data = {name: "One", age: "1"};
        // Template Test (#1)
        var tpl = new Ext.XTemplate(
                '<h2>1) Simple Template</h2>',
                '<tpl for=".">',
                '<p>{name}, {age}</p>',
                '</tpl>'
                );
        var generatedHtml1 = tpl.apply(data);

        // Template Test Store (hard coded)
        var myStore = Ext.create('Ext.data.Store', {
            fields: ["name", "age"],
            data: [
                {name: "One", age: "1"},
                {name: "Two", age: "2"},
                {name: "Three", age: "3"},
                {name: "Four", age: "4"},
                {name: "Five", age: "5"}
            ]
        });

        // UL List Template (#2)
        var tpl2 = new Ext.XTemplate(
                '<h2>2) UL List Template</h2>',
                '<ul>',
                '<tpl for=".">',
                '<li>Name: <b>{data.name}</b>, Age: <b>{data.age}</b></li>',
                '</tpl>',
                '</ul>'
                );
        var generatedHtml2 = tpl2.apply(myStore);

        // Table Template (#3)
        var tpl3 = new Ext.XTemplate(
                '<h2>3) Table Template</h2>',
                '<table>',
                '<tr><th>Name</th><th>Age</th></tr>',
                '<tpl for=".">',
                '<tr><td>{data.name}</td><td>{data.age}</td></tr>',
                '</tpl>',
                '</table>'
                );
        var generatedHtml3 = tpl3.apply(myStore);

        var me = this;
        Ext.applyIf(me, {
            items: [
                {
                    style: 'margin: 25px',
                    html: generatedHtml1 // #1 Works fine
                },
                {
                    style: 'margin: 25px',
                    html: generatedHtml2 // #2 Works fine
                },
                {
                    style: 'margin: 25px',
                    html: generatedHtml3 // #3 Works fine
                },
                {
                    style: 'margin: 25px',
                    html: this.generateDynamicHtml() // #4 Does not work
                }
            ]
        });
        me.callParent(arguments);
    },

    generateDynamicHtml: function () {
        var title = '<h2>4) Trying to generate a simple table from a store</h2>';
        var generatedTaskTable;
        var taskStore = Ext.create('myApp.store.Tasks');
        taskStore.load();
        taskStore.on("load", function () {
            var taskTpl = new Ext.XTemplate(
                    '<h2>Task Table Template</h2>',
                    '<table>',
                    '<tr><th>Name</th>',
                    '<th>Id</th></tr>',
                    '<tpl for=".">',
                    '<tr>',
                    '<td>{data.name}</td>',
                    '<td>{data.id}</td>',
                    '</tr>',
                    '</tpl>',
                    '</table>'
                    );
            generatedTaskTable = taskTpl.apply(taskStore);
        });
        return title + generatedTaskTable;
    }
});