Trying to determine the proper way to display store data in a XTemplate using ExtJS 4.2.1

Vote count:

0

I'm very new to ExtJS and I'm having a hard time determining the proper MVC architecture to display custom XTemplates using an non-hard coded store.

In the example code below I have 1, 2, and 3 working. However, 4 is not working. I'm pretty sure it's because there is a timing issue. Stores 1 - 3 are hard coded whereas 4 is created on the "load" event.

What is the best way to configure a custom template with an ajax store so that the store is completely loaded before rendering the custom 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;
    }
});

asked 27 secs ago

gsst

1

Trying to determine the proper way to display store data in a XTemplate using ExtJS 4.2.1